@charset "UTF-8";
/*
  MetaMask design system imports
*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)

   ⚠️ This file has been updated from the original copy. ⚠️
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

b {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-variant: inherit;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
/* stylelint-disable */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  border-style: none;
  cursor: pointer;
}

button::-moz-focus-inner {
  border: none;
}

/* stylelint-enable */
/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -0.0667em;
}

.fa-xs {
  font-size: 0.75em;
}

.fa-sm {
  font-size: 0.875em;
}

.fa-1x {
  font-size: 1em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-6x {
  font-size: 6em;
}

.fa-7x {
  font-size: 7em;
}

.fa-8x {
  font-size: 8em;
}

.fa-9x {
  font-size: 9em;
}

.fa-10x {
  font-size: 10em;
}

.fa-fw {
  text-align: center;
  width: 1.25em;
}

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

[dir="ltr"] .fa-ul {
  margin-left: 2.5em;
  padding-left: 0;
}

[dir="rtl"] .fa-ul {
  margin-right: 2.5em;
  padding-right: 0;
}

.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit;
}

[dir="ltr"] .fa-li {
  left: -2em;
}

[dir="rtl"] .fa-li {
  right: -2em;
}

.fa-border {
  border: solid 0.08em #eee;
  border-radius: 0.1em;
  padding: 0.2em 0.25em 0.15em;
}

[dir="ltr"] .fa-pull-left {
  float: left;
}

[dir="rtl"] .fa-pull-left {
  float: right;
}

[dir="ltr"] .fa-pull-right {
  float: right;
}

[dir="rtl"] .fa-pull-right {
  float: left;
}

[dir="ltr"] .fa.fa-pull-left,
[dir="ltr"] .fas.fa-pull-left,
[dir="ltr"] .far.fa-pull-left,
[dir="ltr"] .fal.fa-pull-left,
[dir="ltr"] .fab.fa-pull-left {
  margin-right: 0.3em;
}

[dir="rtl"] .fa.fa-pull-left,
[dir="rtl"] .fas.fa-pull-left,
[dir="rtl"] .far.fa-pull-left,
[dir="rtl"] .fal.fa-pull-left,
[dir="rtl"] .fab.fa-pull-left {
  margin-left: 0.3em;
}

[dir="ltr"] .fa.fa-pull-right,
[dir="ltr"] .fas.fa-pull-right,
[dir="ltr"] .far.fa-pull-right,
[dir="ltr"] .fal.fa-pull-right,
[dir="ltr"] .fab.fa-pull-right {
  margin-left: 0.3em;
}

[dir="rtl"] .fa.fa-pull-right,
[dir="rtl"] .fas.fa-pull-right,
[dir="rtl"] .far.fa-pull-right,
[dir="rtl"] .fal.fa-pull-right,
[dir="rtl"] .fab.fa-pull-right {
  margin-right: 0.3em;
}

.fa-spin {
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  animation: fa-spin 1s infinite steps(8);
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
}

[dir="ltr"] .fa-rotate-90 {
  transform: rotate(90deg);
}

[dir="rtl"] .fa-rotate-90 {
  transform: rotate(-90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
}

[dir="ltr"] .fa-rotate-180 {
  transform: rotate(180deg);
}

[dir="rtl"] .fa-rotate-180 {
  transform: rotate(-180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
}

[dir="ltr"] .fa-rotate-270 {
  transform: rotate(270deg);
}

[dir="rtl"] .fa-rotate-270 {
  transform: rotate(-270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1);
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(-1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
  filter: none;
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  text-align: center;
  width: 100%;
}

[dir="ltr"] .fa-stack-1x,
[dir="ltr"] .fa-stack-2x {
  left: 0;
}

[dir="rtl"] .fa-stack-1x,
[dir="rtl"] .fa-stack-2x {
  right: 0;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
  content: "\f26e";
}

.fa-accessible-icon:before {
  content: "\f368";
}

.fa-accusoft:before {
  content: "\f369";
}

.fa-acquisitions-incorporated:before {
  content: "\f6af";
}

.fa-ad:before {
  content: "\f641";
}

.fa-address-book:before {
  content: "\f2b9";
}

.fa-address-card:before {
  content: "\f2bb";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-adn:before {
  content: "\f170";
}

.fa-adobe:before {
  content: "\f778";
}

.fa-adversal:before {
  content: "\f36a";
}

.fa-affiliatetheme:before {
  content: "\f36b";
}

.fa-air-freshener:before {
  content: "\f5d0";
}

.fa-airbnb:before {
  content: "\f834";
}

.fa-algolia:before {
  content: "\f36c";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-alipay:before {
  content: "\f642";
}

.fa-allergies:before {
  content: "\f461";
}

.fa-amazon:before {
  content: "\f270";
}

.fa-amazon-pay:before {
  content: "\f42c";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

.fa-amilia:before {
  content: "\f36d";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-android:before {
  content: "\f17b";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angry:before {
  content: "\f556";
}

.fa-angrycreative:before {
  content: "\f36e";
}

.fa-angular:before {
  content: "\f420";
}

.fa-ankh:before {
  content: "\f644";
}

.fa-app-store:before {
  content: "\f36f";
}

.fa-app-store-ios:before {
  content: "\f370";
}

.fa-apper:before {
  content: "\f371";
}

.fa-apple:before {
  content: "\f179";
}

.fa-apple-alt:before {
  content: "\f5d1";
}

.fa-apple-pay:before {
  content: "\f415";
}

.fa-archive:before {
  content: "\f187";
}

.fa-archway:before {
  content: "\f557";
}

.fa-arrow-alt-circle-down:before {
  content: "\f358";
}

.fa-arrow-alt-circle-left:before {
  content: "\f359";
}

.fa-arrow-alt-circle-right:before {
  content: "\f35a";
}

.fa-arrow-alt-circle-up:before {
  content: "\f35b";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-arrows-alt-h:before {
  content: "\f337";
}

.fa-arrows-alt-v:before {
  content: "\f338";
}

.fa-artstation:before {
  content: "\f77a";
}

.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-asymmetrik:before {
  content: "\f372";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-atlas:before {
  content: "\f558";
}

.fa-atlassian:before {
  content: "\f77b";
}

.fa-atom:before {
  content: "\f5d2";
}

.fa-audible:before {
  content: "\f373";
}

.fa-audio-description:before {
  content: "\f29e";
}

.fa-autoprefixer:before {
  content: "\f41c";
}

.fa-avianex:before {
  content: "\f374";
}

.fa-aviato:before {
  content: "\f421";
}

.fa-award:before {
  content: "\f559";
}

.fa-aws:before {
  content: "\f375";
}

.fa-baby:before {
  content: "\f77c";
}

.fa-baby-carriage:before {
  content: "\f77d";
}

.fa-backspace:before {
  content: "\f55a";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-bacon:before {
  content: "\f7e5";
}

.fa-bahai:before {
  content: "\f666";
}

.fa-balance-scale:before {
  content: "\f24e";
}

.fa-balance-scale-left:before {
  content: "\f515";
}

.fa-balance-scale-right:before {
  content: "\f516";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-band-aid:before {
  content: "\f462";
}

.fa-bandcamp:before {
  content: "\f2d5";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-bars:before {
  content: "\f0c9";
}

.fa-baseball-ball:before {
  content: "\f433";
}

.fa-basketball-ball:before {
  content: "\f434";
}

.fa-bath:before {
  content: "\f2cd";
}

.fa-battery-empty:before {
  content: "\f244";
}

.fa-battery-full:before {
  content: "\f240";
}

.fa-battery-half:before {
  content: "\f242";
}

.fa-battery-quarter:before {
  content: "\f243";
}

.fa-battery-three-quarters:before {
  content: "\f241";
}

.fa-battle-net:before {
  content: "\f835";
}

.fa-bed:before {
  content: "\f236";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bezier-curve:before {
  content: "\f55b";
}

.fa-bible:before {
  content: "\f647";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-biking:before {
  content: "\f84a";
}

.fa-bimobject:before {
  content: "\f378";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-biohazard:before {
  content: "\f780";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitcoin:before {
  content: "\f379";
}

.fa-bity:before {
  content: "\f37a";
}

.fa-black-tie:before {
  content: "\f27e";
}

.fa-blackberry:before {
  content: "\f37b";
}

.fa-blender:before {
  content: "\f517";
}

.fa-blender-phone:before {
  content: "\f6b6";
}

.fa-blind:before {
  content: "\f29d";
}

.fa-blog:before {
  content: "\f781";
}

.fa-blogger:before {
  content: "\f37c";
}

.fa-blogger-b:before {
  content: "\f37d";
}

.fa-bluetooth:before {
  content: "\f293";
}

.fa-bluetooth-b:before {
  content: "\f294";
}

.fa-bold:before {
  content: "\f032";
}

.fa-bolt:before {
  content: "\f0e7";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-bone:before {
  content: "\f5d7";
}

.fa-bong:before {
  content: "\f55c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-book-dead:before {
  content: "\f6b7";
}

.fa-book-medical:before {
  content: "\f7e6";
}

.fa-book-open:before {
  content: "\f518";
}

.fa-book-reader:before {
  content: "\f5da";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-bootstrap:before {
  content: "\f836";
}

.fa-border-all:before {
  content: "\f84c";
}

.fa-border-none:before {
  content: "\f850";
}

.fa-border-style:before {
  content: "\f853";
}

.fa-bowling-ball:before {
  content: "\f436";
}

.fa-box:before {
  content: "\f466";
}

.fa-box-open:before {
  content: "\f49e";
}

.fa-box-tissue:before {
  content: "拏";
}

.fa-boxes:before {
  content: "\f468";
}

.fa-braille:before {
  content: "\f2a1";
}

.fa-brain:before {
  content: "\f5dc";
}

.fa-bread-slice:before {
  content: "\f7ec";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-briefcase-medical:before {
  content: "\f469";
}

.fa-broadcast-tower:before {
  content: "\f519";
}

.fa-broom:before {
  content: "\f51a";
}

.fa-brush:before {
  content: "\f55d";
}

.fa-btc:before {
  content: "\f15a";
}

.fa-buffer:before {
  content: "\f837";
}

.fa-bug:before {
  content: "\f188";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-burn:before {
  content: "\f46a";
}

.fa-buromobelexperte:before {
  content: "\f37f";
}

.fa-bus:before {
  content: "\f207";
}

.fa-bus-alt:before {
  content: "\f55e";
}

.fa-business-time:before {
  content: "\f64a";
}

.fa-buy-n-large:before {
  content: "\f8a6";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-calendar:before {
  content: "\f133";
}

.fa-calendar-alt:before {
  content: "\f073";
}

.fa-calendar-check:before {
  content: "\f274";
}

.fa-calendar-day:before {
  content: "\f783";
}

.fa-calendar-minus:before {
  content: "\f272";
}

.fa-calendar-plus:before {
  content: "\f271";
}

.fa-calendar-times:before {
  content: "\f273";
}

.fa-calendar-week:before {
  content: "\f784";
}

.fa-camera:before {
  content: "\f030";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-campground:before {
  content: "\f6bb";
}

.fa-canadian-maple-leaf:before {
  content: "\f785";
}

.fa-candy-cane:before {
  content: "\f786";
}

.fa-cannabis:before {
  content: "\f55f";
}

.fa-capsules:before {
  content: "\f46b";
}

.fa-car:before {
  content: "\f1b9";
}

.fa-car-alt:before {
  content: "\f5de";
}

.fa-car-battery:before {
  content: "\f5df";
}

.fa-car-crash:before {
  content: "\f5e1";
}

.fa-car-side:before {
  content: "\f5e4";
}

.fa-caravan:before {
  content: "\f8ff";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-caret-square-down:before {
  content: "\f150";
}

.fa-caret-square-left:before {
  content: "\f191";
}

.fa-caret-square-right:before {
  content: "\f152";
}

.fa-caret-square-up:before {
  content: "\f151";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-carrot:before {
  content: "\f787";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cash-register:before {
  content: "\f788";
}

.fa-cat:before {
  content: "\f6be";
}

.fa-cc-amazon-pay:before {
  content: "\f42d";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-apple-pay:before {
  content: "\f416";
}

.fa-cc-diners-club:before {
  content: "\f24c";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-jcb:before {
  content: "\f24b";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-centercode:before {
  content: "\f380";
}

.fa-centos:before {
  content: "\f789";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-chair:before {
  content: "\f6c0";
}

.fa-chalkboard:before {
  content: "\f51b";
}

.fa-chalkboard-teacher:before {
  content: "\f51c";
}

.fa-charging-station:before {
  content: "\f5e7";
}

.fa-chart-area:before {
  content: "\f1fe";
}

.fa-chart-bar:before {
  content: "\f080";
}

.fa-chart-line:before {
  content: "\f201";
}

.fa-chart-pie:before {
  content: "\f200";
}

.fa-check:before {
  content: "\f00c";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-check-double:before {
  content: "\f560";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-cheese:before {
  content: "\f7ef";
}

.fa-chess:before {
  content: "\f439";
}

.fa-chess-bishop:before {
  content: "\f43a";
}

.fa-chess-board:before {
  content: "\f43c";
}

.fa-chess-king:before {
  content: "\f43f";
}

.fa-chess-knight:before {
  content: "\f441";
}

.fa-chess-pawn:before {
  content: "\f443";
}

.fa-chess-queen:before {
  content: "\f445";
}

.fa-chess-rook:before {
  content: "\f447";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-chrome:before {
  content: "\f268";
}

.fa-chromecast:before {
  content: "\f838";
}

.fa-church:before {
  content: "\f51d";
}

.fa-circle:before {
  content: "\f111";
}

.fa-circle-notch:before {
  content: "\f1ce";
}

.fa-city:before {
  content: "\f64f";
}

.fa-clinic-medical:before {
  content: "\f7f2";
}

.fa-clipboard:before {
  content: "\f328";
}

.fa-clipboard-check:before {
  content: "\f46c";
}

.fa-clipboard-list:before {
  content: "\f46d";
}

.fa-clock:before {
  content: "\f017";
}

.fa-clone:before {
  content: "\f24d";
}

.fa-closed-captioning:before {
  content: "\f20a";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-cloud-download-alt:before {
  content: "\f381";
}

.fa-cloud-meatball:before {
  content: "\f73b";
}

.fa-cloud-moon:before {
  content: "\f6c3";
}

.fa-cloud-moon-rain:before {
  content: "\f73c";
}

.fa-cloud-rain:before {
  content: "\f73d";
}

.fa-cloud-showers-heavy:before {
  content: "\f740";
}

.fa-cloud-sun:before {
  content: "\f6c4";
}

.fa-cloud-sun-rain:before {
  content: "\f743";
}

.fa-cloud-upload-alt:before {
  content: "\f382";
}

.fa-cloudscale:before {
  content: "\f383";
}

.fa-cloudsmith:before {
  content: "\f384";
}

.fa-cloudversify:before {
  content: "\f385";
}

.fa-cocktail:before {
  content: "\f561";
}

.fa-code:before {
  content: "\f121";
}

.fa-code-branch:before {
  content: "\f126";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-codiepie:before {
  content: "\f284";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cog:before {
  content: "\f013";
}

.fa-cogs:before {
  content: "\f085";
}

.fa-coins:before {
  content: "\f51e";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-comment:before {
  content: "\f075";
}

.fa-comment-alt:before {
  content: "\f27a";
}

.fa-comment-dollar:before {
  content: "\f651";
}

.fa-comment-dots:before {
  content: "\f4ad";
}

.fa-comment-medical:before {
  content: "\f7f5";
}

.fa-comment-slash:before {
  content: "\f4b3";
}

.fa-comments:before {
  content: "\f086";
}

.fa-comments-dollar:before {
  content: "\f653";
}

.fa-compact-disc:before {
  content: "\f51f";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-compress:before {
  content: "\f066";
}

.fa-compress-alt:before {
  content: "\f422";
}

.fa-compress-arrows-alt:before {
  content: "\f78c";
}

.fa-concierge-bell:before {
  content: "\f562";
}

.fa-confluence:before {
  content: "\f78d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-contao:before {
  content: "\f26d";
}

.fa-cookie:before {
  content: "\f563";
}

.fa-cookie-bite:before {
  content: "\f564";
}

.fa-copy:before {
  content: "\f0c5";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-cotton-bureau:before {
  content: "\f89e";
}

.fa-couch:before {
  content: "\f4b8";
}

.fa-cpanel:before {
  content: "\f388";
}

.fa-creative-commons:before {
  content: "\f25e";
}

.fa-creative-commons-by:before {
  content: "\f4e7";
}

.fa-creative-commons-nc:before {
  content: "\f4e8";
}

.fa-creative-commons-nc-eu:before {
  content: "\f4e9";
}

.fa-creative-commons-nc-jp:before {
  content: "\f4ea";
}

.fa-creative-commons-nd:before {
  content: "\f4eb";
}

.fa-creative-commons-pd:before {
  content: "\f4ec";
}

.fa-creative-commons-pd-alt:before {
  content: "\f4ed";
}

.fa-creative-commons-remix:before {
  content: "\f4ee";
}

.fa-creative-commons-sa:before {
  content: "\f4ef";
}

.fa-creative-commons-sampling:before {
  content: "\f4f0";
}

.fa-creative-commons-sampling-plus:before {
  content: "\f4f1";
}

.fa-creative-commons-share:before {
  content: "\f4f2";
}

.fa-creative-commons-zero:before {
  content: "\f4f3";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-critical-role:before {
  content: "\f6c9";
}

.fa-crop:before {
  content: "\f125";
}

.fa-crop-alt:before {
  content: "\f565";
}

.fa-cross:before {
  content: "\f654";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-crow:before {
  content: "\f520";
}

.fa-crown:before {
  content: "\f521";
}

.fa-crutch:before {
  content: "\f7f7";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-css3-alt:before {
  content: "\f38b";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-cut:before {
  content: "\f0c4";
}

.fa-cuttlefish:before {
  content: "\f38c";
}

.fa-d-and-d:before {
  content: "\f38d";
}

.fa-d-and-d-beyond:before {
  content: "\f6ca";
}

.fa-dailymotion:before {
  content: "勒";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-deaf:before {
  content: "\f2a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-democrat:before {
  content: "\f747";
}

.fa-deploydog:before {
  content: "\f38e";
}

.fa-deskpro:before {
  content: "\f38f";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-dev:before {
  content: "\f6cc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-dharmachakra:before {
  content: "\f655";
}

.fa-dhl:before {
  content: "\f790";
}

.fa-diagnoses:before {
  content: "\f470";
}

.fa-diaspora:before {
  content: "\f791";
}

.fa-dice:before {
  content: "\f522";
}

.fa-dice-d20:before {
  content: "\f6cf";
}

.fa-dice-d6:before {
  content: "\f6d1";
}

.fa-dice-five:before {
  content: "\f523";
}

.fa-dice-four:before {
  content: "\f524";
}

.fa-dice-one:before {
  content: "\f525";
}

.fa-dice-six:before {
  content: "\f526";
}

.fa-dice-three:before {
  content: "\f527";
}

.fa-dice-two:before {
  content: "\f528";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-digital-ocean:before {
  content: "\f391";
}

.fa-digital-tachograph:before {
  content: "\f566";
}

.fa-directions:before {
  content: "\f5eb";
}

.fa-discord:before {
  content: "\f392";
}

.fa-discourse:before {
  content: "\f393";
}

.fa-disease:before {
  content: "\f7fa";
}

.fa-divide:before {
  content: "\f529";
}

.fa-dizzy:before {
  content: "\f567";
}

.fa-dna:before {
  content: "\f471";
}

.fa-dochub:before {
  content: "\f394";
}

.fa-docker:before {
  content: "\f395";
}

.fa-dog:before {
  content: "\f6d3";
}

.fa-dollar-sign:before {
  content: "\f155";
}

.fa-dolly:before {
  content: "\f472";
}

.fa-dolly-flatbed:before {
  content: "\f474";
}

.fa-donate:before {
  content: "\f4b9";
}

.fa-door-closed:before {
  content: "\f52a";
}

.fa-door-open:before {
  content: "\f52b";
}

.fa-dot-circle:before {
  content: "\f192";
}

.fa-dove:before {
  content: "\f4ba";
}

.fa-download:before {
  content: "\f019";
}

.fa-draft2digital:before {
  content: "\f396";
}

.fa-drafting-compass:before {
  content: "\f568";
}

.fa-dragon:before {
  content: "\f6d5";
}

.fa-draw-polygon:before {
  content: "\f5ee";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-dribbble-square:before {
  content: "\f397";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-drum:before {
  content: "\f569";
}

.fa-drum-steelpan:before {
  content: "\f56a";
}

.fa-drumstick-bite:before {
  content: "\f6d7";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-dumbbell:before {
  content: "\f44b";
}

.fa-dumpster:before {
  content: "\f793";
}

.fa-dumpster-fire:before {
  content: "\f794";
}

.fa-dungeon:before {
  content: "\f6d9";
}

.fa-dyalog:before {
  content: "\f399";
}

.fa-earlybirds:before {
  content: "\f39a";
}

.fa-ebay:before {
  content: "\f4f4";
}

.fa-edge:before {
  content: "\f282";
}

.fa-edit:before {
  content: "\f044";
}

.fa-egg:before {
  content: "\f7fb";
}

.fa-eject:before {
  content: "\f052";
}

.fa-elementor:before {
  content: "\f430";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-ello:before {
  content: "\f5f1";
}

.fa-ember:before {
  content: "\f423";
}

.fa-empire:before {
  content: "\f1d1";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-envelope-open:before {
  content: "\f2b6";
}

.fa-envelope-open-text:before {
  content: "\f658";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-envira:before {
  content: "\f299";
}

.fa-equals:before {
  content: "\f52c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-erlang:before {
  content: "\f39d";
}

.fa-ethereum:before {
  content: "\f42e";
}

.fa-ethernet:before {
  content: "\f796";
}

.fa-etsy:before {
  content: "\f2d7";
}

.fa-euro-sign:before {
  content: "\f153";
}

.fa-evernote:before {
  content: "\f839";
}

.fa-exchange-alt:before {
  content: "\f362";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-expand:before {
  content: "\f065";
}

.fa-expand-alt:before {
  content: "\f424";
}

.fa-expand-arrows-alt:before {
  content: "\f31e";
}

.fa-expeditedssl:before {
  content: "\f23e";
}

.fa-external-link-alt:before {
  content: "\f35d";
}

.fa-external-link-square-alt:before {
  content: "\f360";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-dropper:before {
  content: "\f1fb";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-facebook:before {
  content: "\f09a";
}

.fa-facebook-f:before {
  content: "\f39e";
}

.fa-facebook-messenger:before {
  content: "\f39f";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-fan:before {
  content: "\f863";
}

.fa-fantasy-flight-games:before {
  content: "\f6dc";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-faucet:before {
  content: "串";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-feather:before {
  content: "\f52d";
}

.fa-feather-alt:before {
  content: "\f56b";
}

.fa-fedex:before {
  content: "\f797";
}

.fa-fedora:before {
  content: "\f798";
}

.fa-female:before {
  content: "\f182";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-figma:before {
  content: "\f799";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-alt:before {
  content: "\f15c";
}

.fa-file-archive:before {
  content: "\f1c6";
}

.fa-file-audio:before {
  content: "\f1c7";
}

.fa-file-code:before {
  content: "\f1c9";
}

.fa-file-contract:before {
  content: "\f56c";
}

.fa-file-csv:before {
  content: "\f6dd";
}

.fa-file-download:before {
  content: "\f56d";
}

.fa-file-excel:before {
  content: "\f1c3";
}

.fa-file-export:before {
  content: "\f56e";
}

.fa-file-image:before {
  content: "\f1c5";
}

.fa-file-import:before {
  content: "\f56f";
}

.fa-file-invoice:before {
  content: "\f570";
}

.fa-file-invoice-dollar:before {
  content: "\f571";
}

.fa-file-medical:before {
  content: "\f477";
}

.fa-file-medical-alt:before {
  content: "\f478";
}

.fa-file-pdf:before {
  content: "\f1c1";
}

.fa-file-powerpoint:before {
  content: "\f1c4";
}

.fa-file-prescription:before {
  content: "\f572";
}

.fa-file-signature:before {
  content: "\f573";
}

.fa-file-upload:before {
  content: "\f574";
}

.fa-file-video:before {
  content: "\f1c8";
}

.fa-file-word:before {
  content: "\f1c2";
}

.fa-fill:before {
  content: "\f575";
}

.fa-fill-drip:before {
  content: "\f576";
}

.fa-film:before {
  content: "\f008";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-fingerprint:before {
  content: "\f577";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-fire-alt:before {
  content: "\f7e4";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-firefox:before {
  content: "\f269";
}

.fa-firefox-browser:before {
  content: "龜";
}

.fa-first-aid:before {
  content: "\f479";
}

.fa-first-order:before {
  content: "\f2b0";
}

.fa-first-order-alt:before {
  content: "\f50a";
}

.fa-firstdraft:before {
  content: "\f3a1";
}

.fa-fish:before {
  content: "\f578";
}

.fa-fist-raised:before {
  content: "\f6de";
}

.fa-flag:before {
  content: "\f024";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-flag-usa:before {
  content: "\f74d";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-flipboard:before {
  content: "\f44d";
}

.fa-flushed:before {
  content: "\f579";
}

.fa-fly:before {
  content: "\f417";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-minus:before {
  content: "\f65d";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-folder-plus:before {
  content: "\f65e";
}

.fa-font:before {
  content: "\f031";
}

.fa-font-awesome:before {
  content: "\f2b4";
}

.fa-font-awesome-alt:before {
  content: "\f35c";
}

.fa-font-awesome-flag:before {
  content: "\f425";
}

.fa-font-awesome-logo-full:before {
  content: "\f4e6";
}

.fa-fonticons:before {
  content: "\f280";
}

.fa-fonticons-fi:before {
  content: "\f3a2";
}

.fa-football-ball:before {
  content: "\f44e";
}

.fa-fort-awesome:before {
  content: "\f286";
}

.fa-fort-awesome-alt:before {
  content: "\f3a3";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-free-code-camp:before {
  content: "\f2c5";
}

.fa-freebsd:before {
  content: "\f3a4";
}

.fa-frog:before {
  content: "\f52e";
}

.fa-frown:before {
  content: "\f119";
}

.fa-frown-open:before {
  content: "\f57a";
}

.fa-fulcrum:before {
  content: "\f50b";
}

.fa-funnel-dollar:before {
  content: "\f662";
}

.fa-futbol:before {
  content: "\f1e3";
}

.fa-galactic-republic:before {
  content: "\f50c";
}

.fa-galactic-senate:before {
  content: "\f50d";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-gas-pump:before {
  content: "\f52f";
}

.fa-gavel:before {
  content: "\f0e3";
}

.fa-gem:before {
  content: "\f3a5";
}

.fa-genderless:before {
  content: "\f22d";
}

.fa-get-pocket:before {
  content: "\f265";
}

.fa-gg:before {
  content: "\f260";
}

.fa-gg-circle:before {
  content: "\f261";
}

.fa-ghost:before {
  content: "\f6e2";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-gifts:before {
  content: "\f79c";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-git-alt:before {
  content: "\f841";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-github:before {
  content: "\f09b";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-gitkraken:before {
  content: "\f3a6";
}

.fa-gitlab:before {
  content: "\f296";
}

.fa-gitter:before {
  content: "\f426";
}

.fa-glass-cheers:before {
  content: "\f79f";
}

.fa-glass-martini:before {
  content: "\f000";
}

.fa-glass-martini-alt:before {
  content: "\f57b";
}

.fa-glass-whiskey:before {
  content: "\f7a0";
}

.fa-glasses:before {
  content: "\f530";
}

.fa-glide:before {
  content: "\f2a5";
}

.fa-glide-g:before {
  content: "\f2a6";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-globe-africa:before {
  content: "\f57c";
}

.fa-globe-americas:before {
  content: "\f57d";
}

.fa-globe-asia:before {
  content: "\f57e";
}

.fa-globe-europe:before {
  content: "\f7a2";
}

.fa-gofore:before {
  content: "\f3a7";
}

.fa-golf-ball:before {
  content: "\f450";
}

.fa-goodreads:before {
  content: "\f3a8";
}

.fa-goodreads-g:before {
  content: "\f3a9";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-google-drive:before {
  content: "\f3aa";
}

.fa-google-play:before {
  content: "\f3ab";
}

.fa-google-plus:before {
  content: "\f2b3";
}

.fa-google-plus-g:before {
  content: "\f0d5";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-gopuram:before {
  content: "\f664";
}

.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-gratipay:before {
  content: "\f184";
}

.fa-grav:before {
  content: "\f2d6";
}

.fa-greater-than:before {
  content: "\f531";
}

.fa-greater-than-equal:before {
  content: "\f532";
}

.fa-grimace:before {
  content: "\f57f";
}

.fa-grin:before {
  content: "\f580";
}

.fa-grin-alt:before {
  content: "\f581";
}

.fa-grin-beam:before {
  content: "\f582";
}

.fa-grin-beam-sweat:before {
  content: "\f583";
}

.fa-grin-hearts:before {
  content: "\f584";
}

.fa-grin-squint:before {
  content: "\f585";
}

.fa-grin-squint-tears:before {
  content: "\f586";
}

.fa-grin-stars:before {
  content: "\f587";
}

.fa-grin-tears:before {
  content: "\f588";
}

.fa-grin-tongue:before {
  content: "\f589";
}

.fa-grin-tongue-squint:before {
  content: "\f58a";
}

.fa-grin-tongue-wink:before {
  content: "\f58b";
}

.fa-grin-wink:before {
  content: "\f58c";
}

.fa-grip-horizontal:before {
  content: "\f58d";
}

.fa-grip-lines:before {
  content: "\f7a4";
}

.fa-grip-lines-vertical:before {
  content: "\f7a5";
}

.fa-grip-vertical:before {
  content: "\f58e";
}

.fa-gripfire:before {
  content: "\f3ac";
}

.fa-grunt:before {
  content: "\f3ad";
}

.fa-guitar:before {
  content: "\f7a6";
}

.fa-gulp:before {
  content: "\f3ae";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-hacker-news-square:before {
  content: "\f3af";
}

.fa-hackerrank:before {
  content: "\f5f7";
}

.fa-hamburger:before {
  content: "\f805";
}

.fa-hammer:before {
  content: "\f6e3";
}

.fa-hamsa:before {
  content: "\f665";
}

.fa-hand-holding:before {
  content: "\f4bd";
}

.fa-hand-holding-heart:before {
  content: "\f4be";
}

.fa-hand-holding-medical:before {
  content: "樂";
}

.fa-hand-holding-usd:before {
  content: "\f4c0";
}

.fa-hand-holding-water:before {
  content: "\f4c1";
}

.fa-hand-lizard:before {
  content: "\f258";
}

.fa-hand-middle-finger:before {
  content: "\f806";
}

.fa-hand-paper:before {
  content: "\f256";
}

.fa-hand-peace:before {
  content: "\f25b";
}

.fa-hand-point-down:before {
  content: "\f0a7";
}

.fa-hand-point-left:before {
  content: "\f0a5";
}

.fa-hand-point-right:before {
  content: "\f0a4";
}

.fa-hand-point-up:before {
  content: "\f0a6";
}

.fa-hand-pointer:before {
  content: "\f25a";
}

.fa-hand-rock:before {
  content: "\f255";
}

.fa-hand-scissors:before {
  content: "\f257";
}

.fa-hand-sparkles:before {
  content: "諾";
}

.fa-hand-spock:before {
  content: "\f259";
}

.fa-hands:before {
  content: "\f4c2";
}

.fa-hands-helping:before {
  content: "\f4c4";
}

.fa-hands-wash:before {
  content: "丹";
}

.fa-handshake:before {
  content: "\f2b5";
}

.fa-handshake-alt-slash:before {
  content: "寧";
}

.fa-handshake-slash:before {
  content: "怒";
}

.fa-hanukiah:before {
  content: "\f6e6";
}

.fa-hard-hat:before {
  content: "\f807";
}

.fa-hashtag:before {
  content: "\f292";
}

.fa-hat-cowboy:before {
  content: "\f8c0";
}

.fa-hat-cowboy-side:before {
  content: "\f8c1";
}

.fa-hat-wizard:before {
  content: "\f6e8";
}

.fa-hdd:before {
  content: "\f0a0";
}

.fa-head-side-cough:before {
  content: "率";
}

.fa-head-side-cough-slash:before {
  content: "異";
}

.fa-head-side-mask:before {
  content: "北";
}

.fa-head-side-virus:before {
  content: "磻";
}

.fa-heading:before {
  content: "\f1dc";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-headphones-alt:before {
  content: "\f58f";
}

.fa-headset:before {
  content: "\f590";
}

.fa-heart:before {
  content: "\f004";
}

.fa-heart-broken:before {
  content: "\f7a9";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-helicopter:before {
  content: "\f533";
}

.fa-highlighter:before {
  content: "\f591";
}

.fa-hiking:before {
  content: "\f6ec";
}

.fa-hippo:before {
  content: "\f6ed";
}

.fa-hips:before {
  content: "\f452";
}

.fa-hire-a-helper:before {
  content: "\f3b0";
}

.fa-history:before {
  content: "\f1da";
}

.fa-hockey-puck:before {
  content: "\f453";
}

.fa-holly-berry:before {
  content: "\f7aa";
}

.fa-home:before {
  content: "\f015";
}

.fa-hooli:before {
  content: "\f427";
}

.fa-hornbill:before {
  content: "\f592";
}

.fa-horse:before {
  content: "\f6f0";
}

.fa-horse-head:before {
  content: "\f7ab";
}

.fa-hospital:before {
  content: "\f0f8";
}

.fa-hospital-alt:before {
  content: "\f47d";
}

.fa-hospital-symbol:before {
  content: "\f47e";
}

.fa-hospital-user:before {
  content: "\f80d";
}

.fa-hot-tub:before {
  content: "\f593";
}

.fa-hotdog:before {
  content: "\f80f";
}

.fa-hotel:before {
  content: "\f594";
}

.fa-hotjar:before {
  content: "\f3b1";
}

.fa-hourglass:before {
  content: "\f254";
}

.fa-hourglass-end:before {
  content: "\f253";
}

.fa-hourglass-half:before {
  content: "\f252";
}

.fa-hourglass-start:before {
  content: "\f251";
}

.fa-house-damage:before {
  content: "\f6f1";
}

.fa-house-user:before {
  content: "便";
}

.fa-houzz:before {
  content: "\f27c";
}

.fa-hryvnia:before {
  content: "\f6f2";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-hubspot:before {
  content: "\f3b2";
}

.fa-i-cursor:before {
  content: "\f246";
}

.fa-ice-cream:before {
  content: "\f810";
}

.fa-icicles:before {
  content: "\f7ad";
}

.fa-icons:before {
  content: "\f86d";
}

.fa-id-badge:before {
  content: "\f2c1";
}

.fa-id-card:before {
  content: "\f2c2";
}

.fa-id-card-alt:before {
  content: "\f47f";
}

.fa-ideal:before {
  content: "邏";
}

.fa-igloo:before {
  content: "\f7ae";
}

.fa-image:before {
  content: "\f03e";
}

.fa-images:before {
  content: "\f302";
}

.fa-imdb:before {
  content: "\f2d8";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-industry:before {
  content: "\f275";
}

.fa-infinity:before {
  content: "\f534";
}

.fa-info:before {
  content: "\f129";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-instagram-square:before {
  content: "凌";
}

.fa-intercom:before {
  content: "\f7af";
}

.fa-internet-explorer:before {
  content: "\f26b";
}

.fa-invision:before {
  content: "\f7b0";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-italic:before {
  content: "\f033";
}

.fa-itch-io:before {
  content: "\f83a";
}

.fa-itunes:before {
  content: "\f3b4";
}

.fa-itunes-note:before {
  content: "\f3b5";
}

.fa-java:before {
  content: "\f4e4";
}

.fa-jedi:before {
  content: "\f669";
}

.fa-jedi-order:before {
  content: "\f50e";
}

.fa-jenkins:before {
  content: "\f3b6";
}

.fa-jira:before {
  content: "\f7b1";
}

.fa-joget:before {
  content: "\f3b7";
}

.fa-joint:before {
  content: "\f595";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-journal-whills:before {
  content: "\f66a";
}

.fa-js:before {
  content: "\f3b8";
}

.fa-js-square:before {
  content: "\f3b9";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-kaaba:before {
  content: "\f66b";
}

.fa-kaggle:before {
  content: "\f5fa";
}

.fa-key:before {
  content: "\f084";
}

.fa-keybase:before {
  content: "\f4f5";
}

.fa-keyboard:before {
  content: "\f11c";
}

.fa-keycdn:before {
  content: "\f3ba";
}

.fa-khanda:before {
  content: "\f66d";
}

.fa-kickstarter:before {
  content: "\f3bb";
}

.fa-kickstarter-k:before {
  content: "\f3bc";
}

.fa-kiss:before {
  content: "\f596";
}

.fa-kiss-beam:before {
  content: "\f597";
}

.fa-kiss-wink-heart:before {
  content: "\f598";
}

.fa-kiwi-bird:before {
  content: "\f535";
}

.fa-korvue:before {
  content: "\f42f";
}

.fa-landmark:before {
  content: "\f66f";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-laptop-code:before {
  content: "\f5fc";
}

.fa-laptop-house:before {
  content: "復";
}

.fa-laptop-medical:before {
  content: "\f812";
}

.fa-laravel:before {
  content: "\f3bd";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-laugh:before {
  content: "\f599";
}

.fa-laugh-beam:before {
  content: "\f59a";
}

.fa-laugh-squint:before {
  content: "\f59b";
}

.fa-laugh-wink:before {
  content: "\f59c";
}

.fa-layer-group:before {
  content: "\f5fd";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-lemon:before {
  content: "\f094";
}

.fa-less:before {
  content: "\f41d";
}

.fa-less-than:before {
  content: "\f536";
}

.fa-less-than-equal:before {
  content: "\f537";
}

.fa-level-down-alt:before {
  content: "\f3be";
}

.fa-level-up-alt:before {
  content: "\f3bf";
}

.fa-life-ring:before {
  content: "\f1cd";
}

.fa-lightbulb:before {
  content: "\f0eb";
}

.fa-line:before {
  content: "\f3c0";
}

.fa-link:before {
  content: "\f0c1";
}

.fa-linkedin:before {
  content: "\f08c";
}

.fa-linkedin-in:before {
  content: "\f0e1";
}

.fa-linode:before {
  content: "\f2b8";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-lira-sign:before {
  content: "\f195";
}

.fa-list:before {
  content: "\f03a";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-lock:before {
  content: "\f023";
}

.fa-lock-open:before {
  content: "\f3c1";
}

.fa-long-arrow-alt-down:before {
  content: "\f309";
}

.fa-long-arrow-alt-left:before {
  content: "\f30a";
}

.fa-long-arrow-alt-right:before {
  content: "\f30b";
}

.fa-long-arrow-alt-up:before {
  content: "\f30c";
}

.fa-low-vision:before {
  content: "\f2a8";
}

.fa-luggage-cart:before {
  content: "\f59d";
}

.fa-lungs:before {
  content: "\f604";
}

.fa-lungs-virus:before {
  content: "不";
}

.fa-lyft:before {
  content: "\f3c3";
}

.fa-magento:before {
  content: "\f3c4";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-mail-bulk:before {
  content: "\f674";
}

.fa-mailchimp:before {
  content: "\f59e";
}

.fa-male:before {
  content: "\f183";
}

.fa-mandalorian:before {
  content: "\f50f";
}

.fa-map:before {
  content: "\f279";
}

.fa-map-marked:before {
  content: "\f59f";
}

.fa-map-marked-alt:before {
  content: "\f5a0";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-map-marker-alt:before {
  content: "\f3c5";
}

.fa-map-pin:before {
  content: "\f276";
}

.fa-map-signs:before {
  content: "\f277";
}

.fa-markdown:before {
  content: "\f60f";
}

.fa-marker:before {
  content: "\f5a1";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mask:before {
  content: "\f6fa";
}

.fa-mastodon:before {
  content: "\f4f6";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-mdb:before {
  content: "\f8ca";
}

.fa-medal:before {
  content: "\f5a2";
}

.fa-medapps:before {
  content: "\f3c6";
}

.fa-medium:before {
  content: "\f23a";
}

.fa-medium-m:before {
  content: "\f3c7";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-medrt:before {
  content: "\f3c8";
}

.fa-meetup:before {
  content: "\f2e0";
}

.fa-megaport:before {
  content: "\f5a3";
}

.fa-meh:before {
  content: "\f11a";
}

.fa-meh-blank:before {
  content: "\f5a4";
}

.fa-meh-rolling-eyes:before {
  content: "\f5a5";
}

.fa-memory:before {
  content: "\f538";
}

.fa-mendeley:before {
  content: "\f7b3";
}

.fa-menorah:before {
  content: "\f676";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-meteor:before {
  content: "\f753";
}

.fa-microblog:before {
  content: "駱";
}

.fa-microchip:before {
  content: "\f2db";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-alt:before {
  content: "\f3c9";
}

.fa-microphone-alt-slash:before {
  content: "\f539";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-microscope:before {
  content: "\f610";
}

.fa-microsoft:before {
  content: "\f3ca";
}

.fa-minus:before {
  content: "\f068";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-mitten:before {
  content: "\f7b5";
}

.fa-mix:before {
  content: "\f3cb";
}

.fa-mixcloud:before {
  content: "\f289";
}

.fa-mixer:before {
  content: "稜";
}

.fa-mizuni:before {
  content: "\f3cc";
}

.fa-mobile:before {
  content: "\f10b";
}

.fa-mobile-alt:before {
  content: "\f3cd";
}

.fa-modx:before {
  content: "\f285";
}

.fa-monero:before {
  content: "\f3d0";
}

.fa-money-bill:before {
  content: "\f0d6";
}

.fa-money-bill-alt:before {
  content: "\f3d1";
}

.fa-money-bill-wave:before {
  content: "\f53a";
}

.fa-money-bill-wave-alt:before {
  content: "\f53b";
}

.fa-money-check:before {
  content: "\f53c";
}

.fa-money-check-alt:before {
  content: "\f53d";
}

.fa-monument:before {
  content: "\f5a6";
}

.fa-moon:before {
  content: "\f186";
}

.fa-mortar-pestle:before {
  content: "\f5a7";
}

.fa-mosque:before {
  content: "\f678";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-mountain:before {
  content: "\f6fc";
}

.fa-mouse:before {
  content: "\f8cc";
}

.fa-mouse-pointer:before {
  content: "\f245";
}

.fa-mug-hot:before {
  content: "\f7b6";
}

.fa-music:before {
  content: "\f001";
}

.fa-napster:before {
  content: "\f3d2";
}

.fa-neos:before {
  content: "\f612";
}

.fa-network-wired:before {
  content: "\f6ff";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-newspaper:before {
  content: "\f1ea";
}

.fa-nimblr:before {
  content: "\f5a8";
}

.fa-node:before {
  content: "\f419";
}

.fa-node-js:before {
  content: "\f3d3";
}

.fa-not-equal:before {
  content: "\f53e";
}

.fa-notes-medical:before {
  content: "\f481";
}

.fa-npm:before {
  content: "\f3d4";
}

.fa-ns8:before {
  content: "\f3d5";
}

.fa-nutritionix:before {
  content: "\f3d6";
}

.fa-object-group:before {
  content: "\f247";
}

.fa-object-ungroup:before {
  content: "\f248";
}

.fa-odnoklassniki:before {
  content: "\f263";
}

.fa-odnoklassniki-square:before {
  content: "\f264";
}

.fa-oil-can:before {
  content: "\f613";
}

.fa-old-republic:before {
  content: "\f510";
}

.fa-om:before {
  content: "\f679";
}

.fa-opencart:before {
  content: "\f23d";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-opera:before {
  content: "\f26a";
}

.fa-optin-monster:before {
  content: "\f23c";
}

.fa-orcid:before {
  content: "\f8d2";
}

.fa-osi:before {
  content: "\f41a";
}

.fa-otter:before {
  content: "\f700";
}

.fa-outdent:before {
  content: "\f03b";
}

.fa-page4:before {
  content: "\f3d7";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-pager:before {
  content: "\f815";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-paint-roller:before {
  content: "\f5aa";
}

.fa-palette:before {
  content: "\f53f";
}

.fa-palfed:before {
  content: "\f3d8";
}

.fa-pallet:before {
  content: "\f482";
}

.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-parachute-box:before {
  content: "\f4cd";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-parking:before {
  content: "\f540";
}

.fa-passport:before {
  content: "\f5ab";
}

.fa-pastafarianism:before {
  content: "\f67b";
}

.fa-paste:before {
  content: "\f0ea";
}

.fa-patreon:before {
  content: "\f3d9";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-pause-circle:before {
  content: "\f28b";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-peace:before {
  content: "\f67c";
}

.fa-pen:before {
  content: "\f304";
}

.fa-pen-alt:before {
  content: "\f305";
}

.fa-pen-fancy:before {
  content: "\f5ac";
}

.fa-pen-nib:before {
  content: "\f5ad";
}

.fa-pen-square:before {
  content: "\f14b";
}

.fa-pencil-alt:before {
  content: "\f303";
}

.fa-pencil-ruler:before {
  content: "\f5ae";
}

.fa-penny-arcade:before {
  content: "\f704";
}

.fa-people-arrows:before {
  content: "泌";
}

.fa-people-carry:before {
  content: "\f4ce";
}

.fa-pepper-hot:before {
  content: "\f816";
}

.fa-percent:before {
  content: "\f295";
}

.fa-percentage:before {
  content: "\f541";
}

.fa-periscope:before {
  content: "\f3da";
}

.fa-person-booth:before {
  content: "\f756";
}

.fa-phabricator:before {
  content: "\f3db";
}

.fa-phoenix-framework:before {
  content: "\f3dc";
}

.fa-phoenix-squadron:before {
  content: "\f511";
}

.fa-phone:before {
  content: "\f095";
}

.fa-phone-alt:before {
  content: "\f879";
}

.fa-phone-slash:before {
  content: "\f3dd";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-phone-square-alt:before {
  content: "\f87b";
}

.fa-phone-volume:before {
  content: "\f2a0";
}

.fa-photo-video:before {
  content: "\f87c";
}

.fa-php:before {
  content: "\f457";
}

.fa-pied-piper:before {
  content: "\f2ae";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-pied-piper-hat:before {
  content: "\f4e5";
}

.fa-pied-piper-pp:before {
  content: "\f1a7";
}

.fa-pied-piper-square:before {
  content: "爛";
}

.fa-piggy-bank:before {
  content: "\f4d3";
}

.fa-pills:before {
  content: "\f484";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-pizza-slice:before {
  content: "\f818";
}

.fa-place-of-worship:before {
  content: "\f67f";
}

.fa-plane:before {
  content: "\f072";
}

.fa-plane-arrival:before {
  content: "\f5af";
}

.fa-plane-departure:before {
  content: "\f5b0";
}

.fa-plane-slash:before {
  content: "數";
}

.fa-play:before {
  content: "\f04b";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-playstation:before {
  content: "\f3df";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-plus:before {
  content: "\f067";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-podcast:before {
  content: "\f2ce";
}

.fa-poll:before {
  content: "\f681";
}

.fa-poll-h:before {
  content: "\f682";
}

.fa-poo:before {
  content: "\f2fe";
}

.fa-poo-storm:before {
  content: "\f75a";
}

.fa-poop:before {
  content: "\f619";
}

.fa-portrait:before {
  content: "\f3e0";
}

.fa-pound-sign:before {
  content: "\f154";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-pray:before {
  content: "\f683";
}

.fa-praying-hands:before {
  content: "\f684";
}

.fa-prescription:before {
  content: "\f5b1";
}

.fa-prescription-bottle:before {
  content: "\f485";
}

.fa-prescription-bottle-alt:before {
  content: "\f486";
}

.fa-print:before {
  content: "\f02f";
}

.fa-procedures:before {
  content: "\f487";
}

.fa-product-hunt:before {
  content: "\f288";
}

.fa-project-diagram:before {
  content: "\f542";
}

.fa-pump-medical:before {
  content: "索";
}

.fa-pump-soap:before {
  content: "參";
}

.fa-pushed:before {
  content: "\f3e1";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-python:before {
  content: "\f3e2";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-question:before {
  content: "\f128";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-quidditch:before {
  content: "\f458";
}

.fa-quinscape:before {
  content: "\f459";
}

.fa-quora:before {
  content: "\f2c4";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-quran:before {
  content: "\f687";
}

.fa-r-project:before {
  content: "\f4f7";
}

.fa-radiation:before {
  content: "\f7b9";
}

.fa-radiation-alt:before {
  content: "\f7ba";
}

.fa-rainbow:before {
  content: "\f75b";
}

.fa-random:before {
  content: "\f074";
}

.fa-raspberry-pi:before {
  content: "\f7bb";
}

.fa-ravelry:before {
  content: "\f2d9";
}

.fa-react:before {
  content: "\f41b";
}

.fa-reacteurope:before {
  content: "\f75d";
}

.fa-readme:before {
  content: "\f4d5";
}

.fa-rebel:before {
  content: "\f1d0";
}

.fa-receipt:before {
  content: "\f543";
}

.fa-record-vinyl:before {
  content: "\f8d9";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-red-river:before {
  content: "\f3e3";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-alien:before {
  content: "\f281";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-redhat:before {
  content: "\f7bc";
}

.fa-redo:before {
  content: "\f01e";
}

.fa-redo-alt:before {
  content: "\f2f9";
}

.fa-registered:before {
  content: "\f25d";
}

.fa-remove-format:before {
  content: "\f87d";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-reply:before {
  content: "\f3e5";
}

.fa-reply-all:before {
  content: "\f122";
}

.fa-replyd:before {
  content: "\f3e6";
}

.fa-republican:before {
  content: "\f75e";
}

.fa-researchgate:before {
  content: "\f4f8";
}

.fa-resolving:before {
  content: "\f3e7";
}

.fa-restroom:before {
  content: "\f7bd";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-rev:before {
  content: "\f5b2";
}

.fa-ribbon:before {
  content: "\f4d6";
}

.fa-ring:before {
  content: "\f70b";
}

.fa-road:before {
  content: "\f018";
}

.fa-robot:before {
  content: "\f544";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-rocketchat:before {
  content: "\f3e8";
}

.fa-rockrms:before {
  content: "\f3e9";
}

.fa-route:before {
  content: "\f4d7";
}

.fa-rss:before {
  content: "\f09e";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-ruble-sign:before {
  content: "\f158";
}

.fa-ruler:before {
  content: "\f545";
}

.fa-ruler-combined:before {
  content: "\f546";
}

.fa-ruler-horizontal:before {
  content: "\f547";
}

.fa-ruler-vertical:before {
  content: "\f548";
}

.fa-running:before {
  content: "\f70c";
}

.fa-rupee-sign:before {
  content: "\f156";
}

.fa-sad-cry:before {
  content: "\f5b3";
}

.fa-sad-tear:before {
  content: "\f5b4";
}

.fa-safari:before {
  content: "\f267";
}

.fa-salesforce:before {
  content: "\f83b";
}

.fa-sass:before {
  content: "\f41e";
}

.fa-satellite:before {
  content: "\f7bf";
}

.fa-satellite-dish:before {
  content: "\f7c0";
}

.fa-save:before {
  content: "\f0c7";
}

.fa-schlix:before {
  content: "\f3ea";
}

.fa-school:before {
  content: "\f549";
}

.fa-screwdriver:before {
  content: "\f54a";
}

.fa-scribd:before {
  content: "\f28a";
}

.fa-scroll:before {
  content: "\f70e";
}

.fa-sd-card:before {
  content: "\f7c2";
}

.fa-search:before {
  content: "\f002";
}

.fa-search-dollar:before {
  content: "\f688";
}

.fa-search-location:before {
  content: "\f689";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-searchengin:before {
  content: "\f3eb";
}

.fa-seedling:before {
  content: "\f4d8";
}

.fa-sellcast:before {
  content: "\f2da";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-server:before {
  content: "\f233";
}

.fa-servicestack:before {
  content: "\f3ec";
}

.fa-shapes:before {
  content: "\f61f";
}

.fa-share:before {
  content: "\f064";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-shekel-sign:before {
  content: "\f20b";
}

.fa-shield-alt:before {
  content: "\f3ed";
}

.fa-shield-virus:before {
  content: "塞";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-shipping-fast:before {
  content: "\f48b";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-shoe-prints:before {
  content: "\f54b";
}

.fa-shopify:before {
  content: "綾";
}

.fa-shopping-bag:before {
  content: "\f290";
}

.fa-shopping-basket:before {
  content: "\f291";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-shopware:before {
  content: "\f5b5";
}

.fa-shower:before {
  content: "\f2cc";
}

.fa-shuttle-van:before {
  content: "\f5b6";
}

.fa-sign:before {
  content: "\f4d9";
}

.fa-sign-in-alt:before {
  content: "\f2f6";
}

.fa-sign-language:before {
  content: "\f2a7";
}

.fa-sign-out-alt:before {
  content: "\f2f5";
}

.fa-signal:before {
  content: "\f012";
}

.fa-signature:before {
  content: "\f5b7";
}

.fa-sim-card:before {
  content: "\f7c4";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-sistrix:before {
  content: "\f3ee";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-sith:before {
  content: "\f512";
}

.fa-skating:before {
  content: "\f7c5";
}

.fa-sketch:before {
  content: "\f7c6";
}

.fa-skiing:before {
  content: "\f7c9";
}

.fa-skiing-nordic:before {
  content: "\f7ca";
}

.fa-skull:before {
  content: "\f54c";
}

.fa-skull-crossbones:before {
  content: "\f714";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-slack:before {
  content: "\f198";
}

.fa-slack-hash:before {
  content: "\f3ef";
}

.fa-slash:before {
  content: "\f715";
}

.fa-sleigh:before {
  content: "\f7cc";
}

.fa-sliders-h:before {
  content: "\f1de";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-smile:before {
  content: "\f118";
}

.fa-smile-beam:before {
  content: "\f5b8";
}

.fa-smile-wink:before {
  content: "\f4da";
}

.fa-smog:before {
  content: "\f75f";
}

.fa-smoking:before {
  content: "\f48d";
}

.fa-smoking-ban:before {
  content: "\f54d";
}

.fa-sms:before {
  content: "\f7cd";
}

.fa-snapchat:before {
  content: "\f2ab";
}

.fa-snapchat-ghost:before {
  content: "\f2ac";
}

.fa-snapchat-square:before {
  content: "\f2ad";
}

.fa-snowboarding:before {
  content: "\f7ce";
}

.fa-snowflake:before {
  content: "\f2dc";
}

.fa-snowman:before {
  content: "\f7d0";
}

.fa-snowplow:before {
  content: "\f7d2";
}

.fa-soap:before {
  content: "葉";
}

.fa-socks:before {
  content: "\f696";
}

.fa-solar-panel:before {
  content: "\f5ba";
}

.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-alpha-down:before {
  content: "\f15d";
}

.fa-sort-alpha-down-alt:before {
  content: "\f881";
}

.fa-sort-alpha-up:before {
  content: "\f15e";
}

.fa-sort-alpha-up-alt:before {
  content: "\f882";
}

.fa-sort-amount-down:before {
  content: "\f160";
}

.fa-sort-amount-down-alt:before {
  content: "\f884";
}

.fa-sort-amount-up:before {
  content: "\f161";
}

.fa-sort-amount-up-alt:before {
  content: "\f885";
}

.fa-sort-down:before {
  content: "\f0dd";
}

.fa-sort-numeric-down:before {
  content: "\f162";
}

.fa-sort-numeric-down-alt:before {
  content: "\f886";
}

.fa-sort-numeric-up:before {
  content: "\f163";
}

.fa-sort-numeric-up-alt:before {
  content: "\f887";
}

.fa-sort-up:before {
  content: "\f0de";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-sourcetree:before {
  content: "\f7d3";
}

.fa-spa:before {
  content: "\f5bb";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-speakap:before {
  content: "\f3f3";
}

.fa-speaker-deck:before {
  content: "\f83c";
}

.fa-spell-check:before {
  content: "\f891";
}

.fa-spider:before {
  content: "\f717";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-splotch:before {
  content: "\f5bc";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-spray-can:before {
  content: "\f5bd";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-square-full:before {
  content: "\f45c";
}

.fa-square-root-alt:before {
  content: "\f698";
}

.fa-squarespace:before {
  content: "\f5be";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-stackpath:before {
  content: "\f842";
}

.fa-stamp:before {
  content: "\f5bf";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-and-crescent:before {
  content: "\f699";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-star-half-alt:before {
  content: "\f5c0";
}

.fa-star-of-david:before {
  content: "\f69a";
}

.fa-star-of-life:before {
  content: "\f621";
}

.fa-staylinked:before {
  content: "\f3f5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-steam-symbol:before {
  content: "\f3f6";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-sticker-mule:before {
  content: "\f3f7";
}

.fa-sticky-note:before {
  content: "\f249";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-stop-circle:before {
  content: "\f28d";
}

.fa-stopwatch:before {
  content: "\f2f2";
}

.fa-stopwatch-20:before {
  content: "說";
}

.fa-store:before {
  content: "\f54e";
}

.fa-store-alt:before {
  content: "\f54f";
}

.fa-store-alt-slash:before {
  content: "殺";
}

.fa-store-slash:before {
  content: "辰";
}

.fa-strava:before {
  content: "\f428";
}

.fa-stream:before {
  content: "\f550";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-stripe:before {
  content: "\f429";
}

.fa-stripe-s:before {
  content: "\f42a";
}

.fa-stroopwafel:before {
  content: "\f551";
}

.fa-studiovinari:before {
  content: "\f3f8";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-subway:before {
  content: "\f239";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-suitcase-rolling:before {
  content: "\f5c1";
}

.fa-sun:before {
  content: "\f185";
}

.fa-superpowers:before {
  content: "\f2dd";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-supple:before {
  content: "\f3f9";
}

.fa-surprise:before {
  content: "\f5c2";
}

.fa-suse:before {
  content: "\f7d6";
}

.fa-swatchbook:before {
  content: "\f5c3";
}

.fa-swift:before {
  content: "\f8e1";
}

.fa-swimmer:before {
  content: "\f5c4";
}

.fa-swimming-pool:before {
  content: "\f5c5";
}

.fa-symfony:before {
  content: "\f83d";
}

.fa-synagogue:before {
  content: "\f69b";
}

.fa-sync:before {
  content: "\f021";
}

.fa-sync-alt:before {
  content: "\f2f1";
}

.fa-syringe:before {
  content: "\f48e";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-table-tennis:before {
  content: "\f45d";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-tablet-alt:before {
  content: "\f3fa";
}

.fa-tablets:before {
  content: "\f490";
}

.fa-tachometer-alt:before {
  content: "\f3fd";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-tape:before {
  content: "\f4db";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-taxi:before {
  content: "\f1ba";
}

.fa-teamspeak:before {
  content: "\f4f9";
}

.fa-teeth:before {
  content: "\f62e";
}

.fa-teeth-open:before {
  content: "\f62f";
}

.fa-telegram:before {
  content: "\f2c6";
}

.fa-telegram-plane:before {
  content: "\f3fe";
}

.fa-temperature-high:before {
  content: "\f769";
}

.fa-temperature-low:before {
  content: "\f76b";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-tenge:before {
  content: "\f7d7";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-the-red-yeti:before {
  content: "\f69d";
}

.fa-theater-masks:before {
  content: "\f630";
}

.fa-themeco:before {
  content: "\f5c6";
}

.fa-themeisle:before {
  content: "\f2b2";
}

.fa-thermometer:before {
  content: "\f491";
}

.fa-thermometer-empty:before {
  content: "\f2cb";
}

.fa-thermometer-full:before {
  content: "\f2c7";
}

.fa-thermometer-half:before {
  content: "\f2c9";
}

.fa-thermometer-quarter:before {
  content: "\f2ca";
}

.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

.fa-think-peaks:before {
  content: "\f731";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbtack:before {
  content: "\f08d";
}

.fa-ticket-alt:before {
  content: "\f3ff";
}

.fa-times:before {
  content: "\f00d";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-tint:before {
  content: "\f043";
}

.fa-tint-slash:before {
  content: "\f5c7";
}

.fa-tired:before {
  content: "\f5c8";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-toilet:before {
  content: "\f7d8";
}

.fa-toilet-paper:before {
  content: "\f71e";
}

.fa-toilet-paper-slash:before {
  content: "沈";
}

.fa-toolbox:before {
  content: "\f552";
}

.fa-tools:before {
  content: "\f7d9";
}

.fa-tooth:before {
  content: "\f5c9";
}

.fa-torah:before {
  content: "\f6a0";
}

.fa-torii-gate:before {
  content: "\f6a1";
}

.fa-tractor:before {
  content: "\f722";
}

.fa-trade-federation:before {
  content: "\f513";
}

.fa-trademark:before {
  content: "\f25c";
}

.fa-traffic-light:before {
  content: "\f637";
}

.fa-trailer:before {
  content: "論";
}

.fa-train:before {
  content: "\f238";
}

.fa-tram:before {
  content: "\f7da";
}

.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-trash-alt:before {
  content: "\f2ed";
}

.fa-trash-restore:before {
  content: "\f829";
}

.fa-trash-restore-alt:before {
  content: "\f82a";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-trello:before {
  content: "\f181";
}

.fa-tripadvisor:before {
  content: "\f262";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-truck-loading:before {
  content: "\f4de";
}

.fa-truck-monster:before {
  content: "\f63b";
}

.fa-truck-moving:before {
  content: "\f4df";
}

.fa-truck-pickup:before {
  content: "\f63c";
}

.fa-tshirt:before {
  content: "\f553";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-tv:before {
  content: "\f26c";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-typo3:before {
  content: "\f42b";
}

.fa-uber:before {
  content: "\f402";
}

.fa-ubuntu:before {
  content: "\f7df";
}

.fa-uikit:before {
  content: "\f403";
}

.fa-umbraco:before {
  content: "\f8e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-umbrella-beach:before {
  content: "\f5ca";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-undo:before {
  content: "\f0e2";
}

.fa-undo-alt:before {
  content: "\f2ea";
}

.fa-uniregistry:before {
  content: "\f404";
}

.fa-unity:before {
  content: "雷";
}

.fa-universal-access:before {
  content: "\f29a";
}

.fa-university:before {
  content: "\f19c";
}

.fa-unlink:before {
  content: "\f127";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-untappd:before {
  content: "\f405";
}

.fa-upload:before {
  content: "\f093";
}

.fa-ups:before {
  content: "\f7e0";
}

.fa-usb:before {
  content: "\f287";
}

.fa-user:before {
  content: "\f007";
}

.fa-user-alt:before {
  content: "\f406";
}

.fa-user-alt-slash:before {
  content: "\f4fa";
}

.fa-user-astronaut:before {
  content: "\f4fb";
}

.fa-user-check:before {
  content: "\f4fc";
}

.fa-user-circle:before {
  content: "\f2bd";
}

.fa-user-clock:before {
  content: "\f4fd";
}

.fa-user-cog:before {
  content: "\f4fe";
}

.fa-user-edit:before {
  content: "\f4ff";
}

.fa-user-friends:before {
  content: "\f500";
}

.fa-user-graduate:before {
  content: "\f501";
}

.fa-user-injured:before {
  content: "\f728";
}

.fa-user-lock:before {
  content: "\f502";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-user-minus:before {
  content: "\f503";
}

.fa-user-ninja:before {
  content: "\f504";
}

.fa-user-nurse:before {
  content: "\f82f";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-user-shield:before {
  content: "\f505";
}

.fa-user-slash:before {
  content: "\f506";
}

.fa-user-tag:before {
  content: "\f507";
}

.fa-user-tie:before {
  content: "\f508";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-users:before {
  content: "\f0c0";
}

.fa-users-cog:before {
  content: "\f509";
}

.fa-usps:before {
  content: "\f7e1";
}

.fa-ussunnah:before {
  content: "\f407";
}

.fa-utensil-spoon:before {
  content: "\f2e5";
}

.fa-utensils:before {
  content: "\f2e7";
}

.fa-vaadin:before {
  content: "\f408";
}

.fa-vector-square:before {
  content: "\f5cb";
}

.fa-venus:before {
  content: "\f221";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-viadeo:before {
  content: "\f2a9";
}

.fa-viadeo-square:before {
  content: "\f2aa";
}

.fa-vial:before {
  content: "\f492";
}

.fa-vials:before {
  content: "\f493";
}

.fa-viber:before {
  content: "\f409";
}

.fa-video:before {
  content: "\f03d";
}

.fa-video-slash:before {
  content: "\f4e2";
}

.fa-vihara:before {
  content: "\f6a7";
}

.fa-vimeo:before {
  content: "\f40a";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-vimeo-v:before {
  content: "\f27d";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-virus:before {
  content: "若";
}

.fa-virus-slash:before {
  content: "掠";
}

.fa-viruses:before {
  content: "略";
}

.fa-vk:before {
  content: "\f189";
}

.fa-vnv:before {
  content: "\f40b";
}

.fa-voicemail:before {
  content: "\f897";
}

.fa-volleyball-ball:before {
  content: "\f45f";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-mute:before {
  content: "\f6a9";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-vote-yea:before {
  content: "\f772";
}

.fa-vr-cardboard:before {
  content: "\f729";
}

.fa-vuejs:before {
  content: "\f41f";
}

.fa-walking:before {
  content: "\f554";
}

.fa-wallet:before {
  content: "\f555";
}

.fa-warehouse:before {
  content: "\f494";
}

.fa-water:before {
  content: "\f773";
}

.fa-wave-square:before {
  content: "\f83e";
}

.fa-waze:before {
  content: "\f83f";
}

.fa-weebly:before {
  content: "\f5cc";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-weight:before {
  content: "\f496";
}

.fa-weight-hanging:before {
  content: "\f5cd";
}

.fa-weixin:before {
  content: "\f1d7";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-whatsapp-square:before {
  content: "\f40c";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-whmcs:before {
  content: "\f40d";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-wikipedia-w:before {
  content: "\f266";
}

.fa-wind:before {
  content: "\f72e";
}

.fa-window-close:before {
  content: "\f410";
}

.fa-window-maximize:before {
  content: "\f2d0";
}

.fa-window-minimize:before {
  content: "\f2d1";
}

.fa-window-restore:before {
  content: "\f2d2";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-wine-bottle:before {
  content: "\f72f";
}

.fa-wine-glass:before {
  content: "\f4e3";
}

.fa-wine-glass-alt:before {
  content: "\f5ce";
}

.fa-wix:before {
  content: "\f5cf";
}

.fa-wizards-of-the-coast:before {
  content: "\f730";
}

.fa-wolf-pack-battalion:before {
  content: "\f514";
}

.fa-won-sign:before {
  content: "\f159";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-wordpress-simple:before {
  content: "\f411";
}

.fa-wpbeginner:before {
  content: "\f297";
}

.fa-wpexplorer:before {
  content: "\f2de";
}

.fa-wpforms:before {
  content: "\f298";
}

.fa-wpressr:before {
  content: "\f3e4";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-x-ray:before {
  content: "\f497";
}

.fa-xbox:before {
  content: "\f412";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-y-combinator:before {
  content: "\f23b";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-yammer:before {
  content: "\f840";
}

.fa-yandex:before {
  content: "\f413";
}

.fa-yandex-international:before {
  content: "\f414";
}

.fa-yarn:before {
  content: "\f7e3";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-yen-sign:before {
  content: "\f157";
}

.fa-yin-yang:before {
  content: "\f6ad";
}

.fa-yoast:before {
  content: "\f2b1";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-youtube-square:before {
  content: "\f431";
}

.fa-zhihu:before {
  content: "\f63f";
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/fontawesome/fa-brands-400.woff2") format("woff2");
}

.fab {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("./fonts/fontawesome/fa-solid-900.woff2") format("woff2");
}

.fa,
.fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/fontawesome/fa-regular-400.woff2") format("woff2");
}

.far {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

@font-face {
  font-family: "CentraNo1";
  src: url("./fonts/CentraNo1/CentraNo1-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "CentraNo1";
  src: url("./fonts/CentraNo1/CentraNo1-BookItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "CentraNo1";
  src: url("./fonts/CentraNo1/CentraNo1-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "CentraNo1";
  src: url("./fonts/CentraNo1/CentraNo1-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "CentraNo1";
  src: url("./fonts/CentraNo1/CentraNo1-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "CentraNo1";
  src: url("./fonts/CentraNo1/CentraNo1-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "MMSans";
  src: url("./fonts/MMSans/MM_Sans-Variable.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "MMSans";
  src: url("./fonts/MMSans/MM_Sans-Variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MMPoly";
  src: url("./fonts/MMPoly/MM_Poly-Variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
/*
Disabling Stylelint's hex color rule so this file is ignored.
Before adding a color here make sure that there isn't a design token available.
*/
/* stylelint-disable color-no-hex */
:root {
  --inherit: inherit;
  --transparent: transparent;
  --qr-code-white-background: #fff;
  --color-network-goerli-default: #1098fc;
  --color-network-sepolia-default: #c65cf2;
  --color-network-goerli-inverse: #fcfcfc;
  --color-network-sepolia-inverse: #fcfcfc;
  --color-network-localhost-default: #bbc0c5;
  --color-network-localhost-inverse: #fcfcfc;
  --color-network-linea-goerli-default: #61dfff;
  --color-network-linea-goerli-inverse: #fcfcfc;
  --color-network-linea-sepolia-default: #61dfff;
  --color-network-linea-sepolia-inverse: #fcfcfc;
  --color-network-linea-mainnet-default: #121212;
  --color-network-linea-mainnet-inverse: #fcfcfc;
}

:root {
  --opacity-disabled: 0.5;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
* {
  box-sizing: border-box;
}

html,
body {
  color: var(--color-text-default);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  overflow: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  min-height: 500px;
  /*
    Until we get the user's preference from React state,
    assume the user is in dark mode, because the default
    theme is system preference
  */
}

@media screen and (max-width: calc(576px - 1px)) {
  html:not([data-theme]) {
    background-color: var(--color-background-default);
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color: var(--brand-colors-white);
    background-color: var(--brand-colors-grey-grey900);
  }

  html:not([data-theme]) body {
    color: var(--brand-colors-white);
  }
}

@media screen and (prefers-color-scheme: dark) and (max-width: calc(576px - 1px)) {
  html:not([data-theme]) {
    background-color: var(--brand-colors-grey-grey800);
  }
}

/* stylelint-disable */
#app-content {
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

html[data-theme] #app-content {
  background: var(--color-background-alternative);
}

@media screen and (max-width: calc(576px - 1px)) {
  html[data-theme] #app-content {
    background-color: var(--color-background-default);
  }
}

/* stylelint-enable */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: var(--color-primary-alternative);
}

/** Default Typography on base elements **/
* {
  font-family: var(--font-family-default);
}

/**
* Please import your styles in order of atomicity.
* The most atomic styles should be imported first.
* This will help improve specificity and reduce the chance of
* unintended overrides.
**/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.mm-box--padding-0 {
  padding: 0px;
}

.mm-box--padding-1 {
  padding: 4px;
}

.mm-box--padding-2 {
  padding: 8px;
}

.mm-box--padding-3 {
  padding: 12px;
}

.mm-box--padding-4 {
  padding: 16px;
}

.mm-box--padding-5 {
  padding: 20px;
}

.mm-box--padding-6 {
  padding: 24px;
}

.mm-box--padding-7 {
  padding: 28px;
}

.mm-box--padding-8 {
  padding: 32px;
}

.mm-box--padding-9 {
  padding: 36px;
}

.mm-box--padding-10 {
  padding: 40px;
}

.mm-box--padding-11 {
  padding: 44px;
}

.mm-box--padding-12 {
  padding: 48px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-0 {
    padding: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-1 {
    padding: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-2 {
    padding: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-3 {
    padding: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-4 {
    padding: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-5 {
    padding: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-6 {
    padding: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-7 {
    padding: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-8 {
    padding: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-9 {
    padding: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-10 {
    padding: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-11 {
    padding: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-12 {
    padding: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-0 {
    padding: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-1 {
    padding: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-2 {
    padding: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-3 {
    padding: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-4 {
    padding: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-5 {
    padding: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-6 {
    padding: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-7 {
    padding: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-8 {
    padding: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-9 {
    padding: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-10 {
    padding: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-11 {
    padding: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-12 {
    padding: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-0 {
    padding: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-1 {
    padding: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-2 {
    padding: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-3 {
    padding: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-4 {
    padding: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-5 {
    padding: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-6 {
    padding: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-7 {
    padding: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-8 {
    padding: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-9 {
    padding: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-10 {
    padding: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-11 {
    padding: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-12 {
    padding: 48px;
  }
}

.mm-box--padding-top-0 {
  padding-top: 0px;
}

[dir="ltr"] .mm-box--padding-right-0 {
  padding-right: 0px;
}

[dir="rtl"] .mm-box--padding-right-0 {
  padding-left: 0px;
}

.mm-box--padding-bottom-0 {
  padding-bottom: 0px;
}

[dir="ltr"] .mm-box--padding-left-0 {
  padding-left: 0px;
}

[dir="rtl"] .mm-box--padding-left-0 {
  padding-right: 0px;
}

.mm-box--padding-inline-0 {
  padding-inline: 0px;
}

.mm-box--padding-inline-start-0 {
  padding-inline-start: 0px;
}

.mm-box--padding-inline-end-0 {
  padding-inline-end: 0px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-0 {
    padding-top: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-0 {
    padding-right: 0px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-0 {
    padding-left: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-0 {
    padding-bottom: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-0 {
    padding-left: 0px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-0 {
    padding-right: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-0 {
    padding-inline: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-0 {
    padding-inline-start: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-0 {
    padding-inline-end: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-0 {
    padding-top: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-0 {
    padding-right: 0px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-0 {
    padding-left: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-0 {
    padding-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-0 {
    padding-left: 0px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-0 {
    padding-right: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-0 {
    padding-inline: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-0 {
    padding-inline-start: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-0 {
    padding-inline-end: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-0 {
    padding-top: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-0 {
    padding-right: 0px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-0 {
    padding-left: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-0 {
    padding-bottom: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-0 {
    padding-left: 0px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-0 {
    padding-right: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-0 {
    padding-inline: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-0 {
    padding-inline-start: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-0 {
    padding-inline-end: 0px;
  }
}

.mm-box--padding-top-1 {
  padding-top: 4px;
}

[dir="ltr"] .mm-box--padding-right-1 {
  padding-right: 4px;
}

[dir="rtl"] .mm-box--padding-right-1 {
  padding-left: 4px;
}

.mm-box--padding-bottom-1 {
  padding-bottom: 4px;
}

[dir="ltr"] .mm-box--padding-left-1 {
  padding-left: 4px;
}

[dir="rtl"] .mm-box--padding-left-1 {
  padding-right: 4px;
}

.mm-box--padding-inline-1 {
  padding-inline: 4px;
}

.mm-box--padding-inline-start-1 {
  padding-inline-start: 4px;
}

.mm-box--padding-inline-end-1 {
  padding-inline-end: 4px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-1 {
    padding-top: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-1 {
    padding-right: 4px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-1 {
    padding-left: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-1 {
    padding-bottom: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-1 {
    padding-left: 4px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-1 {
    padding-right: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-1 {
    padding-inline: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-1 {
    padding-inline-start: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-1 {
    padding-inline-end: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-1 {
    padding-top: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-1 {
    padding-right: 4px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-1 {
    padding-left: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-1 {
    padding-bottom: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-1 {
    padding-left: 4px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-1 {
    padding-right: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-1 {
    padding-inline: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-1 {
    padding-inline-start: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-1 {
    padding-inline-end: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-1 {
    padding-top: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-1 {
    padding-right: 4px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-1 {
    padding-left: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-1 {
    padding-bottom: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-1 {
    padding-left: 4px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-1 {
    padding-right: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-1 {
    padding-inline: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-1 {
    padding-inline-start: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-1 {
    padding-inline-end: 4px;
  }
}

.mm-box--padding-top-2 {
  padding-top: 8px;
}

[dir="ltr"] .mm-box--padding-right-2 {
  padding-right: 8px;
}

[dir="rtl"] .mm-box--padding-right-2 {
  padding-left: 8px;
}

.mm-box--padding-bottom-2 {
  padding-bottom: 8px;
}

[dir="ltr"] .mm-box--padding-left-2 {
  padding-left: 8px;
}

[dir="rtl"] .mm-box--padding-left-2 {
  padding-right: 8px;
}

.mm-box--padding-inline-2 {
  padding-inline: 8px;
}

.mm-box--padding-inline-start-2 {
  padding-inline-start: 8px;
}

.mm-box--padding-inline-end-2 {
  padding-inline-end: 8px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-2 {
    padding-top: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-2 {
    padding-right: 8px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-2 {
    padding-left: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-2 {
    padding-bottom: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-2 {
    padding-left: 8px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-2 {
    padding-right: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-2 {
    padding-inline: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-2 {
    padding-inline-start: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-2 {
    padding-inline-end: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-2 {
    padding-top: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-2 {
    padding-right: 8px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-2 {
    padding-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-2 {
    padding-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-2 {
    padding-left: 8px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-2 {
    padding-right: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-2 {
    padding-inline: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-2 {
    padding-inline-start: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-2 {
    padding-inline-end: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-2 {
    padding-top: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-2 {
    padding-right: 8px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-2 {
    padding-left: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-2 {
    padding-bottom: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-2 {
    padding-left: 8px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-2 {
    padding-right: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-2 {
    padding-inline: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-2 {
    padding-inline-start: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-2 {
    padding-inline-end: 8px;
  }
}

.mm-box--padding-top-3 {
  padding-top: 12px;
}

[dir="ltr"] .mm-box--padding-right-3 {
  padding-right: 12px;
}

[dir="rtl"] .mm-box--padding-right-3 {
  padding-left: 12px;
}

.mm-box--padding-bottom-3 {
  padding-bottom: 12px;
}

[dir="ltr"] .mm-box--padding-left-3 {
  padding-left: 12px;
}

[dir="rtl"] .mm-box--padding-left-3 {
  padding-right: 12px;
}

.mm-box--padding-inline-3 {
  padding-inline: 12px;
}

.mm-box--padding-inline-start-3 {
  padding-inline-start: 12px;
}

.mm-box--padding-inline-end-3 {
  padding-inline-end: 12px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-3 {
    padding-top: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-3 {
    padding-right: 12px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-3 {
    padding-left: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-3 {
    padding-bottom: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-3 {
    padding-left: 12px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-3 {
    padding-right: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-3 {
    padding-inline: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-3 {
    padding-inline-start: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-3 {
    padding-inline-end: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-3 {
    padding-top: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-3 {
    padding-right: 12px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-3 {
    padding-left: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-3 {
    padding-bottom: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-3 {
    padding-left: 12px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-3 {
    padding-right: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-3 {
    padding-inline: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-3 {
    padding-inline-start: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-3 {
    padding-inline-end: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-3 {
    padding-top: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-3 {
    padding-right: 12px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-3 {
    padding-left: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-3 {
    padding-bottom: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-3 {
    padding-left: 12px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-3 {
    padding-right: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-3 {
    padding-inline: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-3 {
    padding-inline-start: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-3 {
    padding-inline-end: 12px;
  }
}

.mm-box--padding-top-4 {
  padding-top: 16px;
}

[dir="ltr"] .mm-box--padding-right-4 {
  padding-right: 16px;
}

[dir="rtl"] .mm-box--padding-right-4 {
  padding-left: 16px;
}

.mm-box--padding-bottom-4 {
  padding-bottom: 16px;
}

[dir="ltr"] .mm-box--padding-left-4 {
  padding-left: 16px;
}

[dir="rtl"] .mm-box--padding-left-4 {
  padding-right: 16px;
}

.mm-box--padding-inline-4 {
  padding-inline: 16px;
}

.mm-box--padding-inline-start-4 {
  padding-inline-start: 16px;
}

.mm-box--padding-inline-end-4 {
  padding-inline-end: 16px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-4 {
    padding-top: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-4 {
    padding-right: 16px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-4 {
    padding-left: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-4 {
    padding-bottom: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-4 {
    padding-left: 16px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-4 {
    padding-right: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-4 {
    padding-inline: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-4 {
    padding-inline-start: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-4 {
    padding-inline-end: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-4 {
    padding-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-4 {
    padding-right: 16px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-4 {
    padding-left: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-4 {
    padding-bottom: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-4 {
    padding-left: 16px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-4 {
    padding-right: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-4 {
    padding-inline: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-4 {
    padding-inline-start: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-4 {
    padding-inline-end: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-4 {
    padding-top: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-4 {
    padding-right: 16px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-4 {
    padding-left: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-4 {
    padding-bottom: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-4 {
    padding-left: 16px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-4 {
    padding-right: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-4 {
    padding-inline: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-4 {
    padding-inline-start: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-4 {
    padding-inline-end: 16px;
  }
}

.mm-box--padding-top-5 {
  padding-top: 20px;
}

[dir="ltr"] .mm-box--padding-right-5 {
  padding-right: 20px;
}

[dir="rtl"] .mm-box--padding-right-5 {
  padding-left: 20px;
}

.mm-box--padding-bottom-5 {
  padding-bottom: 20px;
}

[dir="ltr"] .mm-box--padding-left-5 {
  padding-left: 20px;
}

[dir="rtl"] .mm-box--padding-left-5 {
  padding-right: 20px;
}

.mm-box--padding-inline-5 {
  padding-inline: 20px;
}

.mm-box--padding-inline-start-5 {
  padding-inline-start: 20px;
}

.mm-box--padding-inline-end-5 {
  padding-inline-end: 20px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-5 {
    padding-top: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-5 {
    padding-right: 20px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-5 {
    padding-left: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-5 {
    padding-bottom: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-5 {
    padding-left: 20px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-5 {
    padding-right: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-5 {
    padding-inline: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-5 {
    padding-inline-start: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-5 {
    padding-inline-end: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-5 {
    padding-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-5 {
    padding-right: 20px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-5 {
    padding-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-5 {
    padding-bottom: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-5 {
    padding-left: 20px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-5 {
    padding-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-5 {
    padding-inline: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-5 {
    padding-inline-start: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-5 {
    padding-inline-end: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-5 {
    padding-top: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-5 {
    padding-right: 20px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-5 {
    padding-left: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-5 {
    padding-bottom: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-5 {
    padding-left: 20px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-5 {
    padding-right: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-5 {
    padding-inline: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-5 {
    padding-inline-start: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-5 {
    padding-inline-end: 20px;
  }
}

.mm-box--padding-top-6 {
  padding-top: 24px;
}

[dir="ltr"] .mm-box--padding-right-6 {
  padding-right: 24px;
}

[dir="rtl"] .mm-box--padding-right-6 {
  padding-left: 24px;
}

.mm-box--padding-bottom-6 {
  padding-bottom: 24px;
}

[dir="ltr"] .mm-box--padding-left-6 {
  padding-left: 24px;
}

[dir="rtl"] .mm-box--padding-left-6 {
  padding-right: 24px;
}

.mm-box--padding-inline-6 {
  padding-inline: 24px;
}

.mm-box--padding-inline-start-6 {
  padding-inline-start: 24px;
}

.mm-box--padding-inline-end-6 {
  padding-inline-end: 24px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-6 {
    padding-top: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-6 {
    padding-right: 24px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-6 {
    padding-left: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-6 {
    padding-bottom: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-6 {
    padding-left: 24px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-6 {
    padding-right: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-6 {
    padding-inline: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-6 {
    padding-inline-start: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-6 {
    padding-inline-end: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-6 {
    padding-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-6 {
    padding-right: 24px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-6 {
    padding-left: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-6 {
    padding-bottom: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-6 {
    padding-left: 24px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-6 {
    padding-right: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-6 {
    padding-inline: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-6 {
    padding-inline-start: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-6 {
    padding-inline-end: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-6 {
    padding-top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-6 {
    padding-right: 24px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-6 {
    padding-left: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-6 {
    padding-bottom: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-6 {
    padding-left: 24px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-6 {
    padding-right: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-6 {
    padding-inline: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-6 {
    padding-inline-start: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-6 {
    padding-inline-end: 24px;
  }
}

.mm-box--padding-top-7 {
  padding-top: 28px;
}

[dir="ltr"] .mm-box--padding-right-7 {
  padding-right: 28px;
}

[dir="rtl"] .mm-box--padding-right-7 {
  padding-left: 28px;
}

.mm-box--padding-bottom-7 {
  padding-bottom: 28px;
}

[dir="ltr"] .mm-box--padding-left-7 {
  padding-left: 28px;
}

[dir="rtl"] .mm-box--padding-left-7 {
  padding-right: 28px;
}

.mm-box--padding-inline-7 {
  padding-inline: 28px;
}

.mm-box--padding-inline-start-7 {
  padding-inline-start: 28px;
}

.mm-box--padding-inline-end-7 {
  padding-inline-end: 28px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-7 {
    padding-top: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-7 {
    padding-right: 28px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-7 {
    padding-left: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-7 {
    padding-bottom: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-7 {
    padding-left: 28px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-7 {
    padding-right: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-7 {
    padding-inline: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-7 {
    padding-inline-start: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-7 {
    padding-inline-end: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-7 {
    padding-top: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-7 {
    padding-right: 28px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-7 {
    padding-left: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-7 {
    padding-bottom: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-7 {
    padding-left: 28px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-7 {
    padding-right: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-7 {
    padding-inline: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-7 {
    padding-inline-start: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-7 {
    padding-inline-end: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-7 {
    padding-top: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-7 {
    padding-right: 28px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-7 {
    padding-left: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-7 {
    padding-bottom: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-7 {
    padding-left: 28px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-7 {
    padding-right: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-7 {
    padding-inline: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-7 {
    padding-inline-start: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-7 {
    padding-inline-end: 28px;
  }
}

.mm-box--padding-top-8 {
  padding-top: 32px;
}

[dir="ltr"] .mm-box--padding-right-8 {
  padding-right: 32px;
}

[dir="rtl"] .mm-box--padding-right-8 {
  padding-left: 32px;
}

.mm-box--padding-bottom-8 {
  padding-bottom: 32px;
}

[dir="ltr"] .mm-box--padding-left-8 {
  padding-left: 32px;
}

[dir="rtl"] .mm-box--padding-left-8 {
  padding-right: 32px;
}

.mm-box--padding-inline-8 {
  padding-inline: 32px;
}

.mm-box--padding-inline-start-8 {
  padding-inline-start: 32px;
}

.mm-box--padding-inline-end-8 {
  padding-inline-end: 32px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-8 {
    padding-top: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-8 {
    padding-right: 32px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-8 {
    padding-left: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-8 {
    padding-bottom: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-8 {
    padding-left: 32px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-8 {
    padding-right: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-8 {
    padding-inline: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-8 {
    padding-inline-start: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-8 {
    padding-inline-end: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-8 {
    padding-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-8 {
    padding-right: 32px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-8 {
    padding-left: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-8 {
    padding-bottom: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-8 {
    padding-left: 32px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-8 {
    padding-right: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-8 {
    padding-inline: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-8 {
    padding-inline-start: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-8 {
    padding-inline-end: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-8 {
    padding-top: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-8 {
    padding-right: 32px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-8 {
    padding-left: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-8 {
    padding-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-8 {
    padding-left: 32px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-8 {
    padding-right: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-8 {
    padding-inline: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-8 {
    padding-inline-start: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-8 {
    padding-inline-end: 32px;
  }
}

.mm-box--padding-top-9 {
  padding-top: 36px;
}

[dir="ltr"] .mm-box--padding-right-9 {
  padding-right: 36px;
}

[dir="rtl"] .mm-box--padding-right-9 {
  padding-left: 36px;
}

.mm-box--padding-bottom-9 {
  padding-bottom: 36px;
}

[dir="ltr"] .mm-box--padding-left-9 {
  padding-left: 36px;
}

[dir="rtl"] .mm-box--padding-left-9 {
  padding-right: 36px;
}

.mm-box--padding-inline-9 {
  padding-inline: 36px;
}

.mm-box--padding-inline-start-9 {
  padding-inline-start: 36px;
}

.mm-box--padding-inline-end-9 {
  padding-inline-end: 36px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-9 {
    padding-top: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-9 {
    padding-right: 36px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-9 {
    padding-left: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-9 {
    padding-bottom: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-9 {
    padding-left: 36px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-9 {
    padding-right: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-9 {
    padding-inline: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-9 {
    padding-inline-start: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-9 {
    padding-inline-end: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-9 {
    padding-top: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-9 {
    padding-right: 36px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-9 {
    padding-left: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-9 {
    padding-bottom: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-9 {
    padding-left: 36px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-9 {
    padding-right: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-9 {
    padding-inline: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-9 {
    padding-inline-start: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-9 {
    padding-inline-end: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-9 {
    padding-top: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-9 {
    padding-right: 36px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-9 {
    padding-left: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-9 {
    padding-bottom: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-9 {
    padding-left: 36px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-9 {
    padding-right: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-9 {
    padding-inline: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-9 {
    padding-inline-start: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-9 {
    padding-inline-end: 36px;
  }
}

.mm-box--padding-top-10 {
  padding-top: 40px;
}

[dir="ltr"] .mm-box--padding-right-10 {
  padding-right: 40px;
}

[dir="rtl"] .mm-box--padding-right-10 {
  padding-left: 40px;
}

.mm-box--padding-bottom-10 {
  padding-bottom: 40px;
}

[dir="ltr"] .mm-box--padding-left-10 {
  padding-left: 40px;
}

[dir="rtl"] .mm-box--padding-left-10 {
  padding-right: 40px;
}

.mm-box--padding-inline-10 {
  padding-inline: 40px;
}

.mm-box--padding-inline-start-10 {
  padding-inline-start: 40px;
}

.mm-box--padding-inline-end-10 {
  padding-inline-end: 40px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-10 {
    padding-top: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-10 {
    padding-right: 40px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-10 {
    padding-left: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-10 {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-10 {
    padding-left: 40px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-10 {
    padding-right: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-10 {
    padding-inline: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-10 {
    padding-inline-start: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-10 {
    padding-inline-end: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-10 {
    padding-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-10 {
    padding-right: 40px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-10 {
    padding-left: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-10 {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-10 {
    padding-left: 40px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-10 {
    padding-right: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-10 {
    padding-inline: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-10 {
    padding-inline-start: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-10 {
    padding-inline-end: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-10 {
    padding-top: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-10 {
    padding-right: 40px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-10 {
    padding-left: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-10 {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-10 {
    padding-left: 40px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-10 {
    padding-right: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-10 {
    padding-inline: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-10 {
    padding-inline-start: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-10 {
    padding-inline-end: 40px;
  }
}

.mm-box--padding-top-11 {
  padding-top: 44px;
}

[dir="ltr"] .mm-box--padding-right-11 {
  padding-right: 44px;
}

[dir="rtl"] .mm-box--padding-right-11 {
  padding-left: 44px;
}

.mm-box--padding-bottom-11 {
  padding-bottom: 44px;
}

[dir="ltr"] .mm-box--padding-left-11 {
  padding-left: 44px;
}

[dir="rtl"] .mm-box--padding-left-11 {
  padding-right: 44px;
}

.mm-box--padding-inline-11 {
  padding-inline: 44px;
}

.mm-box--padding-inline-start-11 {
  padding-inline-start: 44px;
}

.mm-box--padding-inline-end-11 {
  padding-inline-end: 44px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-11 {
    padding-top: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-11 {
    padding-right: 44px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-11 {
    padding-left: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-11 {
    padding-bottom: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-11 {
    padding-left: 44px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-11 {
    padding-right: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-11 {
    padding-inline: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-11 {
    padding-inline-start: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-11 {
    padding-inline-end: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-11 {
    padding-top: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-11 {
    padding-right: 44px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-11 {
    padding-left: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-11 {
    padding-bottom: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-11 {
    padding-left: 44px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-11 {
    padding-right: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-11 {
    padding-inline: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-11 {
    padding-inline-start: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-11 {
    padding-inline-end: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-11 {
    padding-top: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-11 {
    padding-right: 44px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-11 {
    padding-left: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-11 {
    padding-bottom: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-11 {
    padding-left: 44px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-11 {
    padding-right: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-11 {
    padding-inline: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-11 {
    padding-inline-start: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-11 {
    padding-inline-end: 44px;
  }
}

.mm-box--padding-top-12 {
  padding-top: 48px;
}

[dir="ltr"] .mm-box--padding-right-12 {
  padding-right: 48px;
}

[dir="rtl"] .mm-box--padding-right-12 {
  padding-left: 48px;
}

.mm-box--padding-bottom-12 {
  padding-bottom: 48px;
}

[dir="ltr"] .mm-box--padding-left-12 {
  padding-left: 48px;
}

[dir="rtl"] .mm-box--padding-left-12 {
  padding-right: 48px;
}

.mm-box--padding-inline-12 {
  padding-inline: 48px;
}

.mm-box--padding-inline-start-12 {
  padding-inline-start: 48px;
}

.mm-box--padding-inline-end-12 {
  padding-inline-end: 48px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-top-12 {
    padding-top: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-right-12 {
    padding-right: 48px;
  }

  [dir="rtl"] .mm-box--sm\:padding-right-12 {
    padding-left: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-bottom-12 {
    padding-bottom: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:padding-left-12 {
    padding-left: 48px;
  }

  [dir="rtl"] .mm-box--sm\:padding-left-12 {
    padding-right: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-12 {
    padding-inline: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-start-12 {
    padding-inline-start: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:padding-inline-end-12 {
    padding-inline-end: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-top-12 {
    padding-top: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-right-12 {
    padding-right: 48px;
  }

  [dir="rtl"] .mm-box--md\:padding-right-12 {
    padding-left: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-bottom-12 {
    padding-bottom: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:padding-left-12 {
    padding-left: 48px;
  }

  [dir="rtl"] .mm-box--md\:padding-left-12 {
    padding-right: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-12 {
    padding-inline: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-start-12 {
    padding-inline-start: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:padding-inline-end-12 {
    padding-inline-end: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-top-12 {
    padding-top: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-right-12 {
    padding-right: 48px;
  }

  [dir="rtl"] .mm-box--lg\:padding-right-12 {
    padding-left: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-bottom-12 {
    padding-bottom: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:padding-left-12 {
    padding-left: 48px;
  }

  [dir="rtl"] .mm-box--lg\:padding-left-12 {
    padding-right: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-12 {
    padding-inline: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-start-12 {
    padding-inline-start: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:padding-inline-end-12 {
    padding-inline-end: 48px;
  }
}

.mm-box--margin-0 {
  margin: 0px;
}

.mm-box--margin-1 {
  margin: 4px;
}

.mm-box--margin-2 {
  margin: 8px;
}

.mm-box--margin-3 {
  margin: 12px;
}

.mm-box--margin-4 {
  margin: 16px;
}

.mm-box--margin-5 {
  margin: 20px;
}

.mm-box--margin-6 {
  margin: 24px;
}

.mm-box--margin-7 {
  margin: 28px;
}

.mm-box--margin-8 {
  margin: 32px;
}

.mm-box--margin-9 {
  margin: 36px;
}

.mm-box--margin-10 {
  margin: 40px;
}

.mm-box--margin-11 {
  margin: 44px;
}

.mm-box--margin-12 {
  margin: 48px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-0 {
    margin: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-1 {
    margin: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-2 {
    margin: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-3 {
    margin: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-4 {
    margin: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-5 {
    margin: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-6 {
    margin: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-7 {
    margin: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-8 {
    margin: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-9 {
    margin: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-10 {
    margin: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-11 {
    margin: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-12 {
    margin: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-0 {
    margin: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-1 {
    margin: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-2 {
    margin: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-3 {
    margin: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-4 {
    margin: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-5 {
    margin: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-6 {
    margin: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-7 {
    margin: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-8 {
    margin: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-9 {
    margin: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-10 {
    margin: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-11 {
    margin: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-12 {
    margin: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-0 {
    margin: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-1 {
    margin: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-2 {
    margin: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-3 {
    margin: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-4 {
    margin: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-5 {
    margin: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-6 {
    margin: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-7 {
    margin: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-8 {
    margin: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-9 {
    margin: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-10 {
    margin: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-11 {
    margin: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-12 {
    margin: 48px;
  }
}

.mm-box--margin-top-0 {
  margin-top: 0px;
}

[dir="ltr"] .mm-box--margin-right-0 {
  margin-right: 0px;
}

[dir="rtl"] .mm-box--margin-right-0 {
  margin-left: 0px;
}

.mm-box--margin-bottom-0 {
  margin-bottom: 0px;
}

[dir="ltr"] .mm-box--margin-left-0 {
  margin-left: 0px;
}

[dir="rtl"] .mm-box--margin-left-0 {
  margin-right: 0px;
}

.mm-box--margin-inline-0 {
  margin-inline: 0px;
}

.mm-box--margin-inline-start-0 {
  margin-inline-start: 0px;
}

.mm-box--margin-inline-end-0 {
  margin-inline-end: 0px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-0 {
    margin-top: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-0 {
    margin-right: 0px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-0 {
    margin-left: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-0 {
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-0 {
    margin-left: 0px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-0 {
    margin-right: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-0 {
    margin-inline: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-0 {
    margin-inline-start: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-0 {
    margin-inline-end: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-0 {
    margin-top: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-0 {
    margin-right: 0px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-0 {
    margin-left: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-0 {
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-0 {
    margin-left: 0px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-0 {
    margin-right: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-0 {
    margin-inline: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-0 {
    margin-inline-start: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-0 {
    margin-inline-end: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-0 {
    margin-top: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-0 {
    margin-right: 0px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-0 {
    margin-left: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-0 {
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-0 {
    margin-left: 0px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-0 {
    margin-right: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-0 {
    margin-inline: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-0 {
    margin-inline-start: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-0 {
    margin-inline-end: 0px;
  }
}

.mm-box--margin-top-1 {
  margin-top: 4px;
}

[dir="ltr"] .mm-box--margin-right-1 {
  margin-right: 4px;
}

[dir="rtl"] .mm-box--margin-right-1 {
  margin-left: 4px;
}

.mm-box--margin-bottom-1 {
  margin-bottom: 4px;
}

[dir="ltr"] .mm-box--margin-left-1 {
  margin-left: 4px;
}

[dir="rtl"] .mm-box--margin-left-1 {
  margin-right: 4px;
}

.mm-box--margin-inline-1 {
  margin-inline: 4px;
}

.mm-box--margin-inline-start-1 {
  margin-inline-start: 4px;
}

.mm-box--margin-inline-end-1 {
  margin-inline-end: 4px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-1 {
    margin-top: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-1 {
    margin-right: 4px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-1 {
    margin-left: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-1 {
    margin-bottom: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-1 {
    margin-left: 4px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-1 {
    margin-right: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-1 {
    margin-inline: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-1 {
    margin-inline-start: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-1 {
    margin-inline-end: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-1 {
    margin-top: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-1 {
    margin-right: 4px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-1 {
    margin-left: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-1 {
    margin-bottom: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-1 {
    margin-left: 4px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-1 {
    margin-right: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-1 {
    margin-inline: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-1 {
    margin-inline-start: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-1 {
    margin-inline-end: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-1 {
    margin-top: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-1 {
    margin-right: 4px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-1 {
    margin-left: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-1 {
    margin-bottom: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-1 {
    margin-left: 4px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-1 {
    margin-right: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-1 {
    margin-inline: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-1 {
    margin-inline-start: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-1 {
    margin-inline-end: 4px;
  }
}

.mm-box--margin-top-2 {
  margin-top: 8px;
}

[dir="ltr"] .mm-box--margin-right-2 {
  margin-right: 8px;
}

[dir="rtl"] .mm-box--margin-right-2 {
  margin-left: 8px;
}

.mm-box--margin-bottom-2 {
  margin-bottom: 8px;
}

[dir="ltr"] .mm-box--margin-left-2 {
  margin-left: 8px;
}

[dir="rtl"] .mm-box--margin-left-2 {
  margin-right: 8px;
}

.mm-box--margin-inline-2 {
  margin-inline: 8px;
}

.mm-box--margin-inline-start-2 {
  margin-inline-start: 8px;
}

.mm-box--margin-inline-end-2 {
  margin-inline-end: 8px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-2 {
    margin-top: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-2 {
    margin-right: 8px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-2 {
    margin-left: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-2 {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-2 {
    margin-left: 8px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-2 {
    margin-right: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-2 {
    margin-inline: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-2 {
    margin-inline-start: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-2 {
    margin-inline-end: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-2 {
    margin-top: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-2 {
    margin-right: 8px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-2 {
    margin-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-2 {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-2 {
    margin-left: 8px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-2 {
    margin-right: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-2 {
    margin-inline: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-2 {
    margin-inline-start: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-2 {
    margin-inline-end: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-2 {
    margin-top: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-2 {
    margin-right: 8px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-2 {
    margin-left: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-2 {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-2 {
    margin-left: 8px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-2 {
    margin-right: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-2 {
    margin-inline: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-2 {
    margin-inline-start: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-2 {
    margin-inline-end: 8px;
  }
}

.mm-box--margin-top-3 {
  margin-top: 12px;
}

[dir="ltr"] .mm-box--margin-right-3 {
  margin-right: 12px;
}

[dir="rtl"] .mm-box--margin-right-3 {
  margin-left: 12px;
}

.mm-box--margin-bottom-3 {
  margin-bottom: 12px;
}

[dir="ltr"] .mm-box--margin-left-3 {
  margin-left: 12px;
}

[dir="rtl"] .mm-box--margin-left-3 {
  margin-right: 12px;
}

.mm-box--margin-inline-3 {
  margin-inline: 12px;
}

.mm-box--margin-inline-start-3 {
  margin-inline-start: 12px;
}

.mm-box--margin-inline-end-3 {
  margin-inline-end: 12px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-3 {
    margin-top: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-3 {
    margin-right: 12px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-3 {
    margin-left: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-3 {
    margin-bottom: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-3 {
    margin-left: 12px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-3 {
    margin-right: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-3 {
    margin-inline: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-3 {
    margin-inline-start: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-3 {
    margin-inline-end: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-3 {
    margin-top: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-3 {
    margin-right: 12px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-3 {
    margin-left: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-3 {
    margin-bottom: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-3 {
    margin-left: 12px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-3 {
    margin-right: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-3 {
    margin-inline: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-3 {
    margin-inline-start: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-3 {
    margin-inline-end: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-3 {
    margin-top: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-3 {
    margin-right: 12px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-3 {
    margin-left: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-3 {
    margin-bottom: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-3 {
    margin-left: 12px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-3 {
    margin-right: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-3 {
    margin-inline: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-3 {
    margin-inline-start: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-3 {
    margin-inline-end: 12px;
  }
}

.mm-box--margin-top-4 {
  margin-top: 16px;
}

[dir="ltr"] .mm-box--margin-right-4 {
  margin-right: 16px;
}

[dir="rtl"] .mm-box--margin-right-4 {
  margin-left: 16px;
}

.mm-box--margin-bottom-4 {
  margin-bottom: 16px;
}

[dir="ltr"] .mm-box--margin-left-4 {
  margin-left: 16px;
}

[dir="rtl"] .mm-box--margin-left-4 {
  margin-right: 16px;
}

.mm-box--margin-inline-4 {
  margin-inline: 16px;
}

.mm-box--margin-inline-start-4 {
  margin-inline-start: 16px;
}

.mm-box--margin-inline-end-4 {
  margin-inline-end: 16px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-4 {
    margin-top: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-4 {
    margin-right: 16px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-4 {
    margin-left: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-4 {
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-4 {
    margin-left: 16px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-4 {
    margin-right: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-4 {
    margin-inline: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-4 {
    margin-inline-start: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-4 {
    margin-inline-end: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-4 {
    margin-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-4 {
    margin-right: 16px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-4 {
    margin-left: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-4 {
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-4 {
    margin-left: 16px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-4 {
    margin-right: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-4 {
    margin-inline: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-4 {
    margin-inline-start: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-4 {
    margin-inline-end: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-4 {
    margin-top: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-4 {
    margin-right: 16px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-4 {
    margin-left: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-4 {
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-4 {
    margin-left: 16px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-4 {
    margin-right: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-4 {
    margin-inline: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-4 {
    margin-inline-start: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-4 {
    margin-inline-end: 16px;
  }
}

.mm-box--margin-top-5 {
  margin-top: 20px;
}

[dir="ltr"] .mm-box--margin-right-5 {
  margin-right: 20px;
}

[dir="rtl"] .mm-box--margin-right-5 {
  margin-left: 20px;
}

.mm-box--margin-bottom-5 {
  margin-bottom: 20px;
}

[dir="ltr"] .mm-box--margin-left-5 {
  margin-left: 20px;
}

[dir="rtl"] .mm-box--margin-left-5 {
  margin-right: 20px;
}

.mm-box--margin-inline-5 {
  margin-inline: 20px;
}

.mm-box--margin-inline-start-5 {
  margin-inline-start: 20px;
}

.mm-box--margin-inline-end-5 {
  margin-inline-end: 20px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-5 {
    margin-top: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-5 {
    margin-right: 20px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-5 {
    margin-left: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-5 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-5 {
    margin-left: 20px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-5 {
    margin-right: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-5 {
    margin-inline: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-5 {
    margin-inline-start: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-5 {
    margin-inline-end: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-5 {
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-5 {
    margin-right: 20px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-5 {
    margin-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-5 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-5 {
    margin-left: 20px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-5 {
    margin-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-5 {
    margin-inline: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-5 {
    margin-inline-start: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-5 {
    margin-inline-end: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-5 {
    margin-top: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-5 {
    margin-right: 20px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-5 {
    margin-left: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-5 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-5 {
    margin-left: 20px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-5 {
    margin-right: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-5 {
    margin-inline: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-5 {
    margin-inline-start: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-5 {
    margin-inline-end: 20px;
  }
}

.mm-box--margin-top-6 {
  margin-top: 24px;
}

[dir="ltr"] .mm-box--margin-right-6 {
  margin-right: 24px;
}

[dir="rtl"] .mm-box--margin-right-6 {
  margin-left: 24px;
}

.mm-box--margin-bottom-6 {
  margin-bottom: 24px;
}

[dir="ltr"] .mm-box--margin-left-6 {
  margin-left: 24px;
}

[dir="rtl"] .mm-box--margin-left-6 {
  margin-right: 24px;
}

.mm-box--margin-inline-6 {
  margin-inline: 24px;
}

.mm-box--margin-inline-start-6 {
  margin-inline-start: 24px;
}

.mm-box--margin-inline-end-6 {
  margin-inline-end: 24px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-6 {
    margin-top: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-6 {
    margin-right: 24px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-6 {
    margin-left: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-6 {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-6 {
    margin-left: 24px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-6 {
    margin-right: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-6 {
    margin-inline: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-6 {
    margin-inline-start: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-6 {
    margin-inline-end: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-6 {
    margin-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-6 {
    margin-right: 24px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-6 {
    margin-left: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-6 {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-6 {
    margin-left: 24px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-6 {
    margin-right: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-6 {
    margin-inline: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-6 {
    margin-inline-start: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-6 {
    margin-inline-end: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-6 {
    margin-top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-6 {
    margin-right: 24px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-6 {
    margin-left: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-6 {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-6 {
    margin-left: 24px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-6 {
    margin-right: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-6 {
    margin-inline: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-6 {
    margin-inline-start: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-6 {
    margin-inline-end: 24px;
  }
}

.mm-box--margin-top-7 {
  margin-top: 28px;
}

[dir="ltr"] .mm-box--margin-right-7 {
  margin-right: 28px;
}

[dir="rtl"] .mm-box--margin-right-7 {
  margin-left: 28px;
}

.mm-box--margin-bottom-7 {
  margin-bottom: 28px;
}

[dir="ltr"] .mm-box--margin-left-7 {
  margin-left: 28px;
}

[dir="rtl"] .mm-box--margin-left-7 {
  margin-right: 28px;
}

.mm-box--margin-inline-7 {
  margin-inline: 28px;
}

.mm-box--margin-inline-start-7 {
  margin-inline-start: 28px;
}

.mm-box--margin-inline-end-7 {
  margin-inline-end: 28px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-7 {
    margin-top: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-7 {
    margin-right: 28px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-7 {
    margin-left: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-7 {
    margin-bottom: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-7 {
    margin-left: 28px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-7 {
    margin-right: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-7 {
    margin-inline: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-7 {
    margin-inline-start: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-7 {
    margin-inline-end: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-7 {
    margin-top: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-7 {
    margin-right: 28px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-7 {
    margin-left: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-7 {
    margin-bottom: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-7 {
    margin-left: 28px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-7 {
    margin-right: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-7 {
    margin-inline: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-7 {
    margin-inline-start: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-7 {
    margin-inline-end: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-7 {
    margin-top: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-7 {
    margin-right: 28px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-7 {
    margin-left: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-7 {
    margin-bottom: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-7 {
    margin-left: 28px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-7 {
    margin-right: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-7 {
    margin-inline: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-7 {
    margin-inline-start: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-7 {
    margin-inline-end: 28px;
  }
}

.mm-box--margin-top-8 {
  margin-top: 32px;
}

[dir="ltr"] .mm-box--margin-right-8 {
  margin-right: 32px;
}

[dir="rtl"] .mm-box--margin-right-8 {
  margin-left: 32px;
}

.mm-box--margin-bottom-8 {
  margin-bottom: 32px;
}

[dir="ltr"] .mm-box--margin-left-8 {
  margin-left: 32px;
}

[dir="rtl"] .mm-box--margin-left-8 {
  margin-right: 32px;
}

.mm-box--margin-inline-8 {
  margin-inline: 32px;
}

.mm-box--margin-inline-start-8 {
  margin-inline-start: 32px;
}

.mm-box--margin-inline-end-8 {
  margin-inline-end: 32px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-8 {
    margin-top: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-8 {
    margin-right: 32px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-8 {
    margin-left: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-8 {
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-8 {
    margin-left: 32px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-8 {
    margin-right: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-8 {
    margin-inline: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-8 {
    margin-inline-start: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-8 {
    margin-inline-end: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-8 {
    margin-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-8 {
    margin-right: 32px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-8 {
    margin-left: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-8 {
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-8 {
    margin-left: 32px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-8 {
    margin-right: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-8 {
    margin-inline: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-8 {
    margin-inline-start: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-8 {
    margin-inline-end: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-8 {
    margin-top: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-8 {
    margin-right: 32px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-8 {
    margin-left: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-8 {
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-8 {
    margin-left: 32px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-8 {
    margin-right: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-8 {
    margin-inline: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-8 {
    margin-inline-start: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-8 {
    margin-inline-end: 32px;
  }
}

.mm-box--margin-top-9 {
  margin-top: 36px;
}

[dir="ltr"] .mm-box--margin-right-9 {
  margin-right: 36px;
}

[dir="rtl"] .mm-box--margin-right-9 {
  margin-left: 36px;
}

.mm-box--margin-bottom-9 {
  margin-bottom: 36px;
}

[dir="ltr"] .mm-box--margin-left-9 {
  margin-left: 36px;
}

[dir="rtl"] .mm-box--margin-left-9 {
  margin-right: 36px;
}

.mm-box--margin-inline-9 {
  margin-inline: 36px;
}

.mm-box--margin-inline-start-9 {
  margin-inline-start: 36px;
}

.mm-box--margin-inline-end-9 {
  margin-inline-end: 36px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-9 {
    margin-top: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-9 {
    margin-right: 36px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-9 {
    margin-left: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-9 {
    margin-bottom: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-9 {
    margin-left: 36px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-9 {
    margin-right: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-9 {
    margin-inline: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-9 {
    margin-inline-start: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-9 {
    margin-inline-end: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-9 {
    margin-top: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-9 {
    margin-right: 36px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-9 {
    margin-left: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-9 {
    margin-bottom: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-9 {
    margin-left: 36px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-9 {
    margin-right: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-9 {
    margin-inline: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-9 {
    margin-inline-start: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-9 {
    margin-inline-end: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-9 {
    margin-top: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-9 {
    margin-right: 36px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-9 {
    margin-left: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-9 {
    margin-bottom: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-9 {
    margin-left: 36px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-9 {
    margin-right: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-9 {
    margin-inline: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-9 {
    margin-inline-start: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-9 {
    margin-inline-end: 36px;
  }
}

.mm-box--margin-top-10 {
  margin-top: 40px;
}

[dir="ltr"] .mm-box--margin-right-10 {
  margin-right: 40px;
}

[dir="rtl"] .mm-box--margin-right-10 {
  margin-left: 40px;
}

.mm-box--margin-bottom-10 {
  margin-bottom: 40px;
}

[dir="ltr"] .mm-box--margin-left-10 {
  margin-left: 40px;
}

[dir="rtl"] .mm-box--margin-left-10 {
  margin-right: 40px;
}

.mm-box--margin-inline-10 {
  margin-inline: 40px;
}

.mm-box--margin-inline-start-10 {
  margin-inline-start: 40px;
}

.mm-box--margin-inline-end-10 {
  margin-inline-end: 40px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-10 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-10 {
    margin-right: 40px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-10 {
    margin-left: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-10 {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-10 {
    margin-left: 40px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-10 {
    margin-right: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-10 {
    margin-inline: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-10 {
    margin-inline-start: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-10 {
    margin-inline-end: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-10 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-10 {
    margin-right: 40px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-10 {
    margin-left: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-10 {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-10 {
    margin-left: 40px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-10 {
    margin-right: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-10 {
    margin-inline: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-10 {
    margin-inline-start: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-10 {
    margin-inline-end: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-10 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-10 {
    margin-right: 40px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-10 {
    margin-left: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-10 {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-10 {
    margin-left: 40px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-10 {
    margin-right: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-10 {
    margin-inline: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-10 {
    margin-inline-start: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-10 {
    margin-inline-end: 40px;
  }
}

.mm-box--margin-top-11 {
  margin-top: 44px;
}

[dir="ltr"] .mm-box--margin-right-11 {
  margin-right: 44px;
}

[dir="rtl"] .mm-box--margin-right-11 {
  margin-left: 44px;
}

.mm-box--margin-bottom-11 {
  margin-bottom: 44px;
}

[dir="ltr"] .mm-box--margin-left-11 {
  margin-left: 44px;
}

[dir="rtl"] .mm-box--margin-left-11 {
  margin-right: 44px;
}

.mm-box--margin-inline-11 {
  margin-inline: 44px;
}

.mm-box--margin-inline-start-11 {
  margin-inline-start: 44px;
}

.mm-box--margin-inline-end-11 {
  margin-inline-end: 44px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-11 {
    margin-top: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-11 {
    margin-right: 44px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-11 {
    margin-left: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-11 {
    margin-bottom: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-11 {
    margin-left: 44px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-11 {
    margin-right: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-11 {
    margin-inline: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-11 {
    margin-inline-start: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-11 {
    margin-inline-end: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-11 {
    margin-top: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-11 {
    margin-right: 44px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-11 {
    margin-left: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-11 {
    margin-bottom: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-11 {
    margin-left: 44px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-11 {
    margin-right: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-11 {
    margin-inline: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-11 {
    margin-inline-start: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-11 {
    margin-inline-end: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-11 {
    margin-top: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-11 {
    margin-right: 44px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-11 {
    margin-left: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-11 {
    margin-bottom: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-11 {
    margin-left: 44px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-11 {
    margin-right: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-11 {
    margin-inline: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-11 {
    margin-inline-start: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-11 {
    margin-inline-end: 44px;
  }
}

.mm-box--margin-top-12 {
  margin-top: 48px;
}

[dir="ltr"] .mm-box--margin-right-12 {
  margin-right: 48px;
}

[dir="rtl"] .mm-box--margin-right-12 {
  margin-left: 48px;
}

.mm-box--margin-bottom-12 {
  margin-bottom: 48px;
}

[dir="ltr"] .mm-box--margin-left-12 {
  margin-left: 48px;
}

[dir="rtl"] .mm-box--margin-left-12 {
  margin-right: 48px;
}

.mm-box--margin-inline-12 {
  margin-inline: 48px;
}

.mm-box--margin-inline-start-12 {
  margin-inline-start: 48px;
}

.mm-box--margin-inline-end-12 {
  margin-inline-end: 48px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-12 {
    margin-top: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-12 {
    margin-right: 48px;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-12 {
    margin-left: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-12 {
    margin-bottom: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-12 {
    margin-left: 48px;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-12 {
    margin-right: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-12 {
    margin-inline: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-12 {
    margin-inline-start: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-12 {
    margin-inline-end: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-12 {
    margin-top: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-12 {
    margin-right: 48px;
  }

  [dir="rtl"] .mm-box--md\:margin-right-12 {
    margin-left: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-12 {
    margin-bottom: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-12 {
    margin-left: 48px;
  }

  [dir="rtl"] .mm-box--md\:margin-left-12 {
    margin-right: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-12 {
    margin-inline: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-12 {
    margin-inline-start: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-12 {
    margin-inline-end: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-12 {
    margin-top: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-12 {
    margin-right: 48px;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-12 {
    margin-left: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-12 {
    margin-bottom: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-12 {
    margin-left: 48px;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-12 {
    margin-right: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-12 {
    margin-inline: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-12 {
    margin-inline-start: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-12 {
    margin-inline-end: 48px;
  }
}

.mm-box--margin-auto {
  margin: auto;
}

.mm-box--margin-top-auto {
  margin-top: auto;
}

[dir="ltr"] .mm-box--margin-right-auto {
  margin-right: auto;
}

[dir="rtl"] .mm-box--margin-right-auto {
  margin-left: auto;
}

.mm-box--margin-bottom-auto {
  margin-bottom: auto;
}

[dir="ltr"] .mm-box--margin-left-auto {
  margin-left: auto;
}

[dir="rtl"] .mm-box--margin-left-auto {
  margin-right: auto;
}

.mm-box--margin-inline-auto {
  margin-inline: auto;
}

.mm-box--margin-inline-start-auto {
  margin-inline-start: auto;
}

.mm-box--margin-inline-end-auto {
  margin-inline-end: auto;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-auto {
    margin: auto;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-top-auto {
    margin-top: auto;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-right-auto {
    margin-right: auto;
  }

  [dir="rtl"] .mm-box--sm\:margin-right-auto {
    margin-left: auto;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-bottom-auto {
    margin-bottom: auto;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:margin-left-auto {
    margin-left: auto;
  }

  [dir="rtl"] .mm-box--sm\:margin-left-auto {
    margin-right: auto;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-auto {
    margin-inline: auto;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-start-auto {
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:margin-inline-end-auto {
    margin-inline-end: auto;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-auto {
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-top-auto {
    margin-top: auto;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-right-auto {
    margin-right: auto;
  }

  [dir="rtl"] .mm-box--md\:margin-right-auto {
    margin-left: auto;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-bottom-auto {
    margin-bottom: auto;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:margin-left-auto {
    margin-left: auto;
  }

  [dir="rtl"] .mm-box--md\:margin-left-auto {
    margin-right: auto;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-auto {
    margin-inline: auto;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-start-auto {
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:margin-inline-end-auto {
    margin-inline-end: auto;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-auto {
    margin: auto;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-top-auto {
    margin-top: auto;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-right-auto {
    margin-right: auto;
  }

  [dir="rtl"] .mm-box--lg\:margin-right-auto {
    margin-left: auto;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-bottom-auto {
    margin-bottom: auto;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:margin-left-auto {
    margin-left: auto;
  }

  [dir="rtl"] .mm-box--lg\:margin-left-auto {
    margin-right: auto;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-auto {
    margin-inline: auto;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-start-auto {
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:margin-inline-end-auto {
    margin-inline-end: auto;
  }
}

.mm-box--gap-0 {
  gap: 0px;
}

.mm-box--gap-1 {
  gap: 4px;
}

.mm-box--gap-2 {
  gap: 8px;
}

.mm-box--gap-3 {
  gap: 12px;
}

.mm-box--gap-4 {
  gap: 16px;
}

.mm-box--gap-5 {
  gap: 20px;
}

.mm-box--gap-6 {
  gap: 24px;
}

.mm-box--gap-7 {
  gap: 28px;
}

.mm-box--gap-8 {
  gap: 32px;
}

.mm-box--gap-9 {
  gap: 36px;
}

.mm-box--gap-10 {
  gap: 40px;
}

.mm-box--gap-11 {
  gap: 44px;
}

.mm-box--gap-12 {
  gap: 48px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-0 {
    gap: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-1 {
    gap: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-2 {
    gap: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-3 {
    gap: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-4 {
    gap: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-5 {
    gap: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-6 {
    gap: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-7 {
    gap: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-8 {
    gap: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-9 {
    gap: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-10 {
    gap: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-11 {
    gap: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-12 {
    gap: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-0 {
    gap: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-1 {
    gap: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-2 {
    gap: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-3 {
    gap: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-4 {
    gap: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-5 {
    gap: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-6 {
    gap: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-7 {
    gap: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-8 {
    gap: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-9 {
    gap: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-10 {
    gap: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-11 {
    gap: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-12 {
    gap: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-0 {
    gap: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-1 {
    gap: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-2 {
    gap: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-3 {
    gap: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-4 {
    gap: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-5 {
    gap: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-6 {
    gap: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-7 {
    gap: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-8 {
    gap: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-9 {
    gap: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-10 {
    gap: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-11 {
    gap: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-12 {
    gap: 48px;
  }
}

.mm-box--gap-top-0 {
  gap-top: 0px;
}

[dir="ltr"] .mm-box--gap-right-0 {
  gap-right: 0px;
}

[dir="rtl"] .mm-box--gap-right-0 {
  gap-left: 0px;
}

.mm-box--gap-bottom-0 {
  gap-bottom: 0px;
}

[dir="ltr"] .mm-box--gap-left-0 {
  gap-left: 0px;
}

[dir="rtl"] .mm-box--gap-left-0 {
  gap-right: 0px;
}

.mm-box--gap-inline-0 {
  gap-inline: 0px;
}

.mm-box--gap-inline-start-0 {
  gap-inline-start: 0px;
}

.mm-box--gap-inline-end-0 {
  gap-inline-end: 0px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-0 {
    gap-top: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-0 {
    gap-right: 0px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-0 {
    gap-left: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-0 {
    gap-bottom: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-0 {
    gap-left: 0px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-0 {
    gap-right: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-0 {
    gap-inline: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-0 {
    gap-inline-start: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-0 {
    gap-inline-end: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-0 {
    gap-top: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-0 {
    gap-right: 0px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-0 {
    gap-left: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-0 {
    gap-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-0 {
    gap-left: 0px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-0 {
    gap-right: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-0 {
    gap-inline: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-0 {
    gap-inline-start: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-0 {
    gap-inline-end: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-0 {
    gap-top: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-0 {
    gap-right: 0px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-0 {
    gap-left: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-0 {
    gap-bottom: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-0 {
    gap-left: 0px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-0 {
    gap-right: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-0 {
    gap-inline: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-0 {
    gap-inline-start: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-0 {
    gap-inline-end: 0px;
  }
}

.mm-box--gap-top-1 {
  gap-top: 4px;
}

[dir="ltr"] .mm-box--gap-right-1 {
  gap-right: 4px;
}

[dir="rtl"] .mm-box--gap-right-1 {
  gap-left: 4px;
}

.mm-box--gap-bottom-1 {
  gap-bottom: 4px;
}

[dir="ltr"] .mm-box--gap-left-1 {
  gap-left: 4px;
}

[dir="rtl"] .mm-box--gap-left-1 {
  gap-right: 4px;
}

.mm-box--gap-inline-1 {
  gap-inline: 4px;
}

.mm-box--gap-inline-start-1 {
  gap-inline-start: 4px;
}

.mm-box--gap-inline-end-1 {
  gap-inline-end: 4px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-1 {
    gap-top: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-1 {
    gap-right: 4px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-1 {
    gap-left: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-1 {
    gap-bottom: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-1 {
    gap-left: 4px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-1 {
    gap-right: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-1 {
    gap-inline: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-1 {
    gap-inline-start: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-1 {
    gap-inline-end: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-1 {
    gap-top: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-1 {
    gap-right: 4px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-1 {
    gap-left: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-1 {
    gap-bottom: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-1 {
    gap-left: 4px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-1 {
    gap-right: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-1 {
    gap-inline: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-1 {
    gap-inline-start: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-1 {
    gap-inline-end: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-1 {
    gap-top: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-1 {
    gap-right: 4px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-1 {
    gap-left: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-1 {
    gap-bottom: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-1 {
    gap-left: 4px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-1 {
    gap-right: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-1 {
    gap-inline: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-1 {
    gap-inline-start: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-1 {
    gap-inline-end: 4px;
  }
}

.mm-box--gap-top-2 {
  gap-top: 8px;
}

[dir="ltr"] .mm-box--gap-right-2 {
  gap-right: 8px;
}

[dir="rtl"] .mm-box--gap-right-2 {
  gap-left: 8px;
}

.mm-box--gap-bottom-2 {
  gap-bottom: 8px;
}

[dir="ltr"] .mm-box--gap-left-2 {
  gap-left: 8px;
}

[dir="rtl"] .mm-box--gap-left-2 {
  gap-right: 8px;
}

.mm-box--gap-inline-2 {
  gap-inline: 8px;
}

.mm-box--gap-inline-start-2 {
  gap-inline-start: 8px;
}

.mm-box--gap-inline-end-2 {
  gap-inline-end: 8px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-2 {
    gap-top: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-2 {
    gap-right: 8px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-2 {
    gap-left: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-2 {
    gap-bottom: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-2 {
    gap-left: 8px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-2 {
    gap-right: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-2 {
    gap-inline: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-2 {
    gap-inline-start: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-2 {
    gap-inline-end: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-2 {
    gap-top: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-2 {
    gap-right: 8px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-2 {
    gap-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-2 {
    gap-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-2 {
    gap-left: 8px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-2 {
    gap-right: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-2 {
    gap-inline: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-2 {
    gap-inline-start: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-2 {
    gap-inline-end: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-2 {
    gap-top: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-2 {
    gap-right: 8px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-2 {
    gap-left: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-2 {
    gap-bottom: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-2 {
    gap-left: 8px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-2 {
    gap-right: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-2 {
    gap-inline: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-2 {
    gap-inline-start: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-2 {
    gap-inline-end: 8px;
  }
}

.mm-box--gap-top-3 {
  gap-top: 12px;
}

[dir="ltr"] .mm-box--gap-right-3 {
  gap-right: 12px;
}

[dir="rtl"] .mm-box--gap-right-3 {
  gap-left: 12px;
}

.mm-box--gap-bottom-3 {
  gap-bottom: 12px;
}

[dir="ltr"] .mm-box--gap-left-3 {
  gap-left: 12px;
}

[dir="rtl"] .mm-box--gap-left-3 {
  gap-right: 12px;
}

.mm-box--gap-inline-3 {
  gap-inline: 12px;
}

.mm-box--gap-inline-start-3 {
  gap-inline-start: 12px;
}

.mm-box--gap-inline-end-3 {
  gap-inline-end: 12px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-3 {
    gap-top: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-3 {
    gap-right: 12px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-3 {
    gap-left: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-3 {
    gap-bottom: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-3 {
    gap-left: 12px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-3 {
    gap-right: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-3 {
    gap-inline: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-3 {
    gap-inline-start: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-3 {
    gap-inline-end: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-3 {
    gap-top: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-3 {
    gap-right: 12px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-3 {
    gap-left: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-3 {
    gap-bottom: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-3 {
    gap-left: 12px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-3 {
    gap-right: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-3 {
    gap-inline: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-3 {
    gap-inline-start: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-3 {
    gap-inline-end: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-3 {
    gap-top: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-3 {
    gap-right: 12px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-3 {
    gap-left: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-3 {
    gap-bottom: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-3 {
    gap-left: 12px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-3 {
    gap-right: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-3 {
    gap-inline: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-3 {
    gap-inline-start: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-3 {
    gap-inline-end: 12px;
  }
}

.mm-box--gap-top-4 {
  gap-top: 16px;
}

[dir="ltr"] .mm-box--gap-right-4 {
  gap-right: 16px;
}

[dir="rtl"] .mm-box--gap-right-4 {
  gap-left: 16px;
}

.mm-box--gap-bottom-4 {
  gap-bottom: 16px;
}

[dir="ltr"] .mm-box--gap-left-4 {
  gap-left: 16px;
}

[dir="rtl"] .mm-box--gap-left-4 {
  gap-right: 16px;
}

.mm-box--gap-inline-4 {
  gap-inline: 16px;
}

.mm-box--gap-inline-start-4 {
  gap-inline-start: 16px;
}

.mm-box--gap-inline-end-4 {
  gap-inline-end: 16px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-4 {
    gap-top: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-4 {
    gap-right: 16px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-4 {
    gap-left: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-4 {
    gap-bottom: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-4 {
    gap-left: 16px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-4 {
    gap-right: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-4 {
    gap-inline: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-4 {
    gap-inline-start: 16px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-4 {
    gap-inline-end: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-4 {
    gap-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-4 {
    gap-right: 16px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-4 {
    gap-left: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-4 {
    gap-bottom: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-4 {
    gap-left: 16px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-4 {
    gap-right: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-4 {
    gap-inline: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-4 {
    gap-inline-start: 16px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-4 {
    gap-inline-end: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-4 {
    gap-top: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-4 {
    gap-right: 16px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-4 {
    gap-left: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-4 {
    gap-bottom: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-4 {
    gap-left: 16px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-4 {
    gap-right: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-4 {
    gap-inline: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-4 {
    gap-inline-start: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-4 {
    gap-inline-end: 16px;
  }
}

.mm-box--gap-top-5 {
  gap-top: 20px;
}

[dir="ltr"] .mm-box--gap-right-5 {
  gap-right: 20px;
}

[dir="rtl"] .mm-box--gap-right-5 {
  gap-left: 20px;
}

.mm-box--gap-bottom-5 {
  gap-bottom: 20px;
}

[dir="ltr"] .mm-box--gap-left-5 {
  gap-left: 20px;
}

[dir="rtl"] .mm-box--gap-left-5 {
  gap-right: 20px;
}

.mm-box--gap-inline-5 {
  gap-inline: 20px;
}

.mm-box--gap-inline-start-5 {
  gap-inline-start: 20px;
}

.mm-box--gap-inline-end-5 {
  gap-inline-end: 20px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-5 {
    gap-top: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-5 {
    gap-right: 20px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-5 {
    gap-left: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-5 {
    gap-bottom: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-5 {
    gap-left: 20px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-5 {
    gap-right: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-5 {
    gap-inline: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-5 {
    gap-inline-start: 20px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-5 {
    gap-inline-end: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-5 {
    gap-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-5 {
    gap-right: 20px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-5 {
    gap-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-5 {
    gap-bottom: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-5 {
    gap-left: 20px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-5 {
    gap-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-5 {
    gap-inline: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-5 {
    gap-inline-start: 20px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-5 {
    gap-inline-end: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-5 {
    gap-top: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-5 {
    gap-right: 20px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-5 {
    gap-left: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-5 {
    gap-bottom: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-5 {
    gap-left: 20px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-5 {
    gap-right: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-5 {
    gap-inline: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-5 {
    gap-inline-start: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-5 {
    gap-inline-end: 20px;
  }
}

.mm-box--gap-top-6 {
  gap-top: 24px;
}

[dir="ltr"] .mm-box--gap-right-6 {
  gap-right: 24px;
}

[dir="rtl"] .mm-box--gap-right-6 {
  gap-left: 24px;
}

.mm-box--gap-bottom-6 {
  gap-bottom: 24px;
}

[dir="ltr"] .mm-box--gap-left-6 {
  gap-left: 24px;
}

[dir="rtl"] .mm-box--gap-left-6 {
  gap-right: 24px;
}

.mm-box--gap-inline-6 {
  gap-inline: 24px;
}

.mm-box--gap-inline-start-6 {
  gap-inline-start: 24px;
}

.mm-box--gap-inline-end-6 {
  gap-inline-end: 24px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-6 {
    gap-top: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-6 {
    gap-right: 24px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-6 {
    gap-left: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-6 {
    gap-bottom: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-6 {
    gap-left: 24px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-6 {
    gap-right: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-6 {
    gap-inline: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-6 {
    gap-inline-start: 24px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-6 {
    gap-inline-end: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-6 {
    gap-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-6 {
    gap-right: 24px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-6 {
    gap-left: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-6 {
    gap-bottom: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-6 {
    gap-left: 24px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-6 {
    gap-right: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-6 {
    gap-inline: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-6 {
    gap-inline-start: 24px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-6 {
    gap-inline-end: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-6 {
    gap-top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-6 {
    gap-right: 24px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-6 {
    gap-left: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-6 {
    gap-bottom: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-6 {
    gap-left: 24px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-6 {
    gap-right: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-6 {
    gap-inline: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-6 {
    gap-inline-start: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-6 {
    gap-inline-end: 24px;
  }
}

.mm-box--gap-top-7 {
  gap-top: 28px;
}

[dir="ltr"] .mm-box--gap-right-7 {
  gap-right: 28px;
}

[dir="rtl"] .mm-box--gap-right-7 {
  gap-left: 28px;
}

.mm-box--gap-bottom-7 {
  gap-bottom: 28px;
}

[dir="ltr"] .mm-box--gap-left-7 {
  gap-left: 28px;
}

[dir="rtl"] .mm-box--gap-left-7 {
  gap-right: 28px;
}

.mm-box--gap-inline-7 {
  gap-inline: 28px;
}

.mm-box--gap-inline-start-7 {
  gap-inline-start: 28px;
}

.mm-box--gap-inline-end-7 {
  gap-inline-end: 28px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-7 {
    gap-top: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-7 {
    gap-right: 28px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-7 {
    gap-left: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-7 {
    gap-bottom: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-7 {
    gap-left: 28px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-7 {
    gap-right: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-7 {
    gap-inline: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-7 {
    gap-inline-start: 28px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-7 {
    gap-inline-end: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-7 {
    gap-top: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-7 {
    gap-right: 28px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-7 {
    gap-left: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-7 {
    gap-bottom: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-7 {
    gap-left: 28px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-7 {
    gap-right: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-7 {
    gap-inline: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-7 {
    gap-inline-start: 28px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-7 {
    gap-inline-end: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-7 {
    gap-top: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-7 {
    gap-right: 28px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-7 {
    gap-left: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-7 {
    gap-bottom: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-7 {
    gap-left: 28px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-7 {
    gap-right: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-7 {
    gap-inline: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-7 {
    gap-inline-start: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-7 {
    gap-inline-end: 28px;
  }
}

.mm-box--gap-top-8 {
  gap-top: 32px;
}

[dir="ltr"] .mm-box--gap-right-8 {
  gap-right: 32px;
}

[dir="rtl"] .mm-box--gap-right-8 {
  gap-left: 32px;
}

.mm-box--gap-bottom-8 {
  gap-bottom: 32px;
}

[dir="ltr"] .mm-box--gap-left-8 {
  gap-left: 32px;
}

[dir="rtl"] .mm-box--gap-left-8 {
  gap-right: 32px;
}

.mm-box--gap-inline-8 {
  gap-inline: 32px;
}

.mm-box--gap-inline-start-8 {
  gap-inline-start: 32px;
}

.mm-box--gap-inline-end-8 {
  gap-inline-end: 32px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-8 {
    gap-top: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-8 {
    gap-right: 32px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-8 {
    gap-left: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-8 {
    gap-bottom: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-8 {
    gap-left: 32px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-8 {
    gap-right: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-8 {
    gap-inline: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-8 {
    gap-inline-start: 32px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-8 {
    gap-inline-end: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-8 {
    gap-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-8 {
    gap-right: 32px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-8 {
    gap-left: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-8 {
    gap-bottom: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-8 {
    gap-left: 32px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-8 {
    gap-right: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-8 {
    gap-inline: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-8 {
    gap-inline-start: 32px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-8 {
    gap-inline-end: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-8 {
    gap-top: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-8 {
    gap-right: 32px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-8 {
    gap-left: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-8 {
    gap-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-8 {
    gap-left: 32px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-8 {
    gap-right: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-8 {
    gap-inline: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-8 {
    gap-inline-start: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-8 {
    gap-inline-end: 32px;
  }
}

.mm-box--gap-top-9 {
  gap-top: 36px;
}

[dir="ltr"] .mm-box--gap-right-9 {
  gap-right: 36px;
}

[dir="rtl"] .mm-box--gap-right-9 {
  gap-left: 36px;
}

.mm-box--gap-bottom-9 {
  gap-bottom: 36px;
}

[dir="ltr"] .mm-box--gap-left-9 {
  gap-left: 36px;
}

[dir="rtl"] .mm-box--gap-left-9 {
  gap-right: 36px;
}

.mm-box--gap-inline-9 {
  gap-inline: 36px;
}

.mm-box--gap-inline-start-9 {
  gap-inline-start: 36px;
}

.mm-box--gap-inline-end-9 {
  gap-inline-end: 36px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-9 {
    gap-top: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-9 {
    gap-right: 36px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-9 {
    gap-left: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-9 {
    gap-bottom: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-9 {
    gap-left: 36px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-9 {
    gap-right: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-9 {
    gap-inline: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-9 {
    gap-inline-start: 36px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-9 {
    gap-inline-end: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-9 {
    gap-top: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-9 {
    gap-right: 36px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-9 {
    gap-left: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-9 {
    gap-bottom: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-9 {
    gap-left: 36px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-9 {
    gap-right: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-9 {
    gap-inline: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-9 {
    gap-inline-start: 36px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-9 {
    gap-inline-end: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-9 {
    gap-top: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-9 {
    gap-right: 36px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-9 {
    gap-left: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-9 {
    gap-bottom: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-9 {
    gap-left: 36px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-9 {
    gap-right: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-9 {
    gap-inline: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-9 {
    gap-inline-start: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-9 {
    gap-inline-end: 36px;
  }
}

.mm-box--gap-top-10 {
  gap-top: 40px;
}

[dir="ltr"] .mm-box--gap-right-10 {
  gap-right: 40px;
}

[dir="rtl"] .mm-box--gap-right-10 {
  gap-left: 40px;
}

.mm-box--gap-bottom-10 {
  gap-bottom: 40px;
}

[dir="ltr"] .mm-box--gap-left-10 {
  gap-left: 40px;
}

[dir="rtl"] .mm-box--gap-left-10 {
  gap-right: 40px;
}

.mm-box--gap-inline-10 {
  gap-inline: 40px;
}

.mm-box--gap-inline-start-10 {
  gap-inline-start: 40px;
}

.mm-box--gap-inline-end-10 {
  gap-inline-end: 40px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-10 {
    gap-top: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-10 {
    gap-right: 40px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-10 {
    gap-left: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-10 {
    gap-bottom: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-10 {
    gap-left: 40px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-10 {
    gap-right: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-10 {
    gap-inline: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-10 {
    gap-inline-start: 40px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-10 {
    gap-inline-end: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-10 {
    gap-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-10 {
    gap-right: 40px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-10 {
    gap-left: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-10 {
    gap-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-10 {
    gap-left: 40px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-10 {
    gap-right: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-10 {
    gap-inline: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-10 {
    gap-inline-start: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-10 {
    gap-inline-end: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-10 {
    gap-top: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-10 {
    gap-right: 40px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-10 {
    gap-left: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-10 {
    gap-bottom: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-10 {
    gap-left: 40px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-10 {
    gap-right: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-10 {
    gap-inline: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-10 {
    gap-inline-start: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-10 {
    gap-inline-end: 40px;
  }
}

.mm-box--gap-top-11 {
  gap-top: 44px;
}

[dir="ltr"] .mm-box--gap-right-11 {
  gap-right: 44px;
}

[dir="rtl"] .mm-box--gap-right-11 {
  gap-left: 44px;
}

.mm-box--gap-bottom-11 {
  gap-bottom: 44px;
}

[dir="ltr"] .mm-box--gap-left-11 {
  gap-left: 44px;
}

[dir="rtl"] .mm-box--gap-left-11 {
  gap-right: 44px;
}

.mm-box--gap-inline-11 {
  gap-inline: 44px;
}

.mm-box--gap-inline-start-11 {
  gap-inline-start: 44px;
}

.mm-box--gap-inline-end-11 {
  gap-inline-end: 44px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-11 {
    gap-top: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-11 {
    gap-right: 44px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-11 {
    gap-left: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-11 {
    gap-bottom: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-11 {
    gap-left: 44px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-11 {
    gap-right: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-11 {
    gap-inline: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-11 {
    gap-inline-start: 44px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-11 {
    gap-inline-end: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-11 {
    gap-top: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-11 {
    gap-right: 44px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-11 {
    gap-left: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-11 {
    gap-bottom: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-11 {
    gap-left: 44px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-11 {
    gap-right: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-11 {
    gap-inline: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-11 {
    gap-inline-start: 44px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-11 {
    gap-inline-end: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-11 {
    gap-top: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-11 {
    gap-right: 44px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-11 {
    gap-left: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-11 {
    gap-bottom: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-11 {
    gap-left: 44px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-11 {
    gap-right: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-11 {
    gap-inline: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-11 {
    gap-inline-start: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-11 {
    gap-inline-end: 44px;
  }
}

.mm-box--gap-top-12 {
  gap-top: 48px;
}

[dir="ltr"] .mm-box--gap-right-12 {
  gap-right: 48px;
}

[dir="rtl"] .mm-box--gap-right-12 {
  gap-left: 48px;
}

.mm-box--gap-bottom-12 {
  gap-bottom: 48px;
}

[dir="ltr"] .mm-box--gap-left-12 {
  gap-left: 48px;
}

[dir="rtl"] .mm-box--gap-left-12 {
  gap-right: 48px;
}

.mm-box--gap-inline-12 {
  gap-inline: 48px;
}

.mm-box--gap-inline-start-12 {
  gap-inline-start: 48px;
}

.mm-box--gap-inline-end-12 {
  gap-inline-end: 48px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-top-12 {
    gap-top: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-right-12 {
    gap-right: 48px;
  }

  [dir="rtl"] .mm-box--sm\:gap-right-12 {
    gap-left: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-bottom-12 {
    gap-bottom: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:gap-left-12 {
    gap-left: 48px;
  }

  [dir="rtl"] .mm-box--sm\:gap-left-12 {
    gap-right: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-12 {
    gap-inline: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-start-12 {
    gap-inline-start: 48px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:gap-inline-end-12 {
    gap-inline-end: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-top-12 {
    gap-top: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-right-12 {
    gap-right: 48px;
  }

  [dir="rtl"] .mm-box--md\:gap-right-12 {
    gap-left: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-bottom-12 {
    gap-bottom: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:gap-left-12 {
    gap-left: 48px;
  }

  [dir="rtl"] .mm-box--md\:gap-left-12 {
    gap-right: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-12 {
    gap-inline: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-start-12 {
    gap-inline-start: 48px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:gap-inline-end-12 {
    gap-inline-end: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-top-12 {
    gap-top: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-right-12 {
    gap-right: 48px;
  }

  [dir="rtl"] .mm-box--lg\:gap-right-12 {
    gap-left: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-bottom-12 {
    gap-bottom: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:gap-left-12 {
    gap-left: 48px;
  }

  [dir="rtl"] .mm-box--lg\:gap-left-12 {
    gap-right: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-12 {
    gap-inline: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-start-12 {
    gap-inline-start: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:gap-inline-end-12 {
    gap-inline-end: 48px;
  }
}

.mm-box--border-width-0 {
  border-width: 0px;
}

.mm-box--border-width-1 {
  border-width: 1px;
}

.mm-box--border-width-2 {
  border-width: 2px;
}

.mm-box--border-width-3 {
  border-width: 3px;
}

.mm-box--border-width-4 {
  border-width: 4px;
}

.mm-box--border-width-5 {
  border-width: 5px;
}

.mm-box--border-width-6 {
  border-width: 6px;
}

.mm-box--border-width-7 {
  border-width: 7px;
}

.mm-box--border-width-8 {
  border-width: 8px;
}

.mm-box--border-width-9 {
  border-width: 9px;
}

.mm-box--border-width-10 {
  border-width: 10px;
}

.mm-box--border-width-11 {
  border-width: 11px;
}

.mm-box--border-width-12 {
  border-width: 12px;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-0 {
    border-width: 0px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-1 {
    border-width: 1px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-2 {
    border-width: 2px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-3 {
    border-width: 3px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-4 {
    border-width: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-5 {
    border-width: 5px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-6 {
    border-width: 6px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-7 {
    border-width: 7px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-8 {
    border-width: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-9 {
    border-width: 9px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-10 {
    border-width: 10px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-11 {
    border-width: 11px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-width-12 {
    border-width: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-0 {
    border-width: 0px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-1 {
    border-width: 1px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-2 {
    border-width: 2px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-3 {
    border-width: 3px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-4 {
    border-width: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-5 {
    border-width: 5px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-6 {
    border-width: 6px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-7 {
    border-width: 7px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-8 {
    border-width: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-9 {
    border-width: 9px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-10 {
    border-width: 10px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-11 {
    border-width: 11px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-width-12 {
    border-width: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-0 {
    border-width: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-1 {
    border-width: 1px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-2 {
    border-width: 2px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-3 {
    border-width: 3px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-4 {
    border-width: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-5 {
    border-width: 5px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-6 {
    border-width: 6px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-7 {
    border-width: 7px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-8 {
    border-width: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-9 {
    border-width: 9px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-10 {
    border-width: 10px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-11 {
    border-width: 11px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-width-12 {
    border-width: 12px;
  }
}

.mm-box--border-color-background-default {
  border-color: var(--color-background-default);
}

.mm-box--border-color-background-alternative {
  border-color: var(--color-background-alternative);
}

.mm-box--border-color-background-muted {
  border-color: var(--color-background-muted);
}

.mm-box--border-color-background-hover {
  border-color: var(--color-background-hover);
}

.mm-box--border-color-background-pressed {
  border-color: var(--color-background-pressed);
}

.mm-box--border-color-text-default {
  border-color: var(--color-text-default);
}

.mm-box--border-color-text-alternative {
  border-color: var(--color-text-alternative);
}

.mm-box--border-color-text-muted {
  border-color: var(--color-text-muted);
}

.mm-box--border-color-icon-default {
  border-color: var(--color-icon-default);
}

.mm-box--border-color-icon-alternative {
  border-color: var(--color-icon-alternative);
}

.mm-box--border-color-icon-muted {
  border-color: var(--color-icon-muted);
}

.mm-box--border-color-border-default {
  border-color: var(--color-border-default);
}

.mm-box--border-color-border-muted {
  border-color: var(--color-border-muted);
}

.mm-box--border-color-overlay-default {
  border-color: var(--color-overlay-default);
}

.mm-box--border-color-overlay-alternative {
  border-color: var(--color-overlay-alternative);
}

.mm-box--border-color-overlay-inverse {
  border-color: var(--color-overlay-inverse);
}

.mm-box--border-color-primary-default {
  border-color: var(--color-primary-default);
}

.mm-box--border-color-primary-alternative {
  border-color: var(--color-primary-alternative);
}

.mm-box--border-color-primary-muted {
  border-color: var(--color-primary-muted);
}

.mm-box--border-color-primary-inverse {
  border-color: var(--color-primary-inverse);
}

.mm-box--border-color-error-default {
  border-color: var(--color-error-default);
}

.mm-box--border-color-error-alternative {
  border-color: var(--color-error-alternative);
}

.mm-box--border-color-error-muted {
  border-color: var(--color-error-muted);
}

.mm-box--border-color-error-inverse {
  border-color: var(--color-error-inverse);
}

.mm-box--border-color-warning-default {
  border-color: var(--color-warning-default);
}

.mm-box--border-color-warning-muted {
  border-color: var(--color-warning-muted);
}

.mm-box--border-color-warning-inverse {
  border-color: var(--color-warning-inverse);
}

.mm-box--border-color-success-default {
  border-color: var(--color-success-default);
}

.mm-box--border-color-success-muted {
  border-color: var(--color-success-muted);
}

.mm-box--border-color-success-inverse {
  border-color: var(--color-success-inverse);
}

.mm-box--border-color-info-default {
  border-color: var(--color-info-default);
}

.mm-box--border-color-info-muted {
  border-color: var(--color-info-muted);
}

.mm-box--border-color-info-inverse {
  border-color: var(--color-info-inverse);
}

.mm-box--border-color-goerli {
  border-color: var(--color-network-goerli-default);
}

.mm-box--border-color-sepolia {
  border-color: var(--color-network-sepolia-default);
}

.mm-box--border-color-goerli-inverse {
  border-color: var(--color-network-goerli-inverse);
}

.mm-box--border-color-sepolia-inverse {
  border-color: var(--color-network-sepolia-inverse);
}

.mm-box--border-color-linea-goerli {
  border-color: var(--color-network-linea-goerli-default);
}

.mm-box--border-color-linea-goerli-inverse {
  border-color: var(--color-network-linea-goerli-inverse);
}

.mm-box--border-color-linea-sepolia {
  border-color: var(--color-network-linea-sepolia-default);
}

.mm-box--border-color-linea-sepolia-inverse {
  border-color: var(--color-network-linea-sepolia-inverse);
}

.mm-box--border-color-linea-mainnet {
  border-color: var(--color-network-linea-mainnet-default);
}

.mm-box--border-color-linea-mainnet-inverse {
  border-color: var(--color-network-linea-mainnet-inverse);
}

.mm-box--border-color-localhost {
  border-color: var(--color-network-localhost-default);
}

.mm-box--border-color-transparent {
  border-color: var(--transparent);
}

.mm-box--border-color-flask-purple {
  border-color: var(--color-flask-default);
}

.mm-box--border-color-inherit {
  border-color: var(--inherit);
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-background-default {
    border-color: var(--color-background-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-background-alternative {
    border-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-background-muted {
    border-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-background-hover {
    border-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-background-pressed {
    border-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-text-default {
    border-color: var(--color-text-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-text-alternative {
    border-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-text-muted {
    border-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-icon-default {
    border-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-icon-alternative {
    border-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-icon-muted {
    border-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-border-default {
    border-color: var(--color-border-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-border-muted {
    border-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-overlay-default {
    border-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-overlay-alternative {
    border-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-overlay-inverse {
    border-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-primary-default {
    border-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-primary-alternative {
    border-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-primary-muted {
    border-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-primary-inverse {
    border-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-error-default {
    border-color: var(--color-error-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-error-alternative {
    border-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-error-muted {
    border-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-error-inverse {
    border-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-warning-default {
    border-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-warning-muted {
    border-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-warning-inverse {
    border-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-success-default {
    border-color: var(--color-success-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-success-muted {
    border-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-success-inverse {
    border-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-info-default {
    border-color: var(--color-info-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-info-muted {
    border-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-info-inverse {
    border-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-goerli {
    border-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-sepolia {
    border-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-goerli-inverse {
    border-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-sepolia-inverse {
    border-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-linea-goerli {
    border-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-linea-goerli-inverse {
    border-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-linea-sepolia {
    border-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-linea-sepolia-inverse {
    border-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-linea-mainnet {
    border-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-linea-mainnet-inverse {
    border-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-localhost {
    border-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-transparent {
    border-color: var(--transparent);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-flask-purple {
    border-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-color-inherit {
    border-color: var(--inherit);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-background-default {
    border-color: var(--color-background-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-background-alternative {
    border-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-background-muted {
    border-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-background-hover {
    border-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-background-pressed {
    border-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-text-default {
    border-color: var(--color-text-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-text-alternative {
    border-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-text-muted {
    border-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-icon-default {
    border-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-icon-alternative {
    border-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-icon-muted {
    border-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-border-default {
    border-color: var(--color-border-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-border-muted {
    border-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-overlay-default {
    border-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-overlay-alternative {
    border-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-overlay-inverse {
    border-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-primary-default {
    border-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-primary-alternative {
    border-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-primary-muted {
    border-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-primary-inverse {
    border-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-error-default {
    border-color: var(--color-error-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-error-alternative {
    border-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-error-muted {
    border-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-error-inverse {
    border-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-warning-default {
    border-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-warning-muted {
    border-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-warning-inverse {
    border-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-success-default {
    border-color: var(--color-success-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-success-muted {
    border-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-success-inverse {
    border-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-info-default {
    border-color: var(--color-info-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-info-muted {
    border-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-info-inverse {
    border-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-goerli {
    border-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-sepolia {
    border-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-goerli-inverse {
    border-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-sepolia-inverse {
    border-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-linea-goerli {
    border-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-linea-goerli-inverse {
    border-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-linea-sepolia {
    border-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-linea-sepolia-inverse {
    border-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-linea-mainnet {
    border-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-linea-mainnet-inverse {
    border-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-localhost {
    border-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-transparent {
    border-color: var(--transparent);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-flask-purple {
    border-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-color-inherit {
    border-color: var(--inherit);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-background-default {
    border-color: var(--color-background-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-background-alternative {
    border-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-background-muted {
    border-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-background-hover {
    border-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-background-pressed {
    border-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-text-default {
    border-color: var(--color-text-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-text-alternative {
    border-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-text-muted {
    border-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-icon-default {
    border-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-icon-alternative {
    border-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-icon-muted {
    border-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-border-default {
    border-color: var(--color-border-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-border-muted {
    border-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-overlay-default {
    border-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-overlay-alternative {
    border-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-overlay-inverse {
    border-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-primary-default {
    border-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-primary-alternative {
    border-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-primary-muted {
    border-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-primary-inverse {
    border-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-error-default {
    border-color: var(--color-error-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-error-alternative {
    border-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-error-muted {
    border-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-error-inverse {
    border-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-warning-default {
    border-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-warning-muted {
    border-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-warning-inverse {
    border-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-success-default {
    border-color: var(--color-success-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-success-muted {
    border-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-success-inverse {
    border-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-info-default {
    border-color: var(--color-info-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-info-muted {
    border-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-info-inverse {
    border-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-goerli {
    border-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-sepolia {
    border-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-goerli-inverse {
    border-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-sepolia-inverse {
    border-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-linea-goerli {
    border-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-linea-goerli-inverse {
    border-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-linea-sepolia {
    border-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-linea-sepolia-inverse {
    border-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-linea-mainnet {
    border-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-linea-mainnet-inverse {
    border-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-localhost {
    border-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-transparent {
    border-color: var(--transparent);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-flask-purple {
    border-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-color-inherit {
    border-color: var(--inherit);
  }
}

.mm-box--border-style-solid {
  border-style: solid;
}

.mm-box--border-style-double {
  border-style: double;
}

.mm-box--border-style-none {
  border-style: none;
}

.mm-box--border-style-dashed {
  border-style: dashed;
}

.mm-box--border-style-dotted {
  border-style: dotted;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-style-solid {
    border-style: solid;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-style-double {
    border-style: double;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-style-none {
    border-style: none;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-style-dashed {
    border-style: dashed;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:border-style-dotted {
    border-style: dotted;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-style-solid {
    border-style: solid;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-style-double {
    border-style: double;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-style-none {
    border-style: none;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-style-dashed {
    border-style: dashed;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:border-style-dotted {
    border-style: dotted;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-style-solid {
    border-style: solid;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-style-double {
    border-style: double;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-style-none {
    border-style: none;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-style-dashed {
    border-style: dashed;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:border-style-dotted {
    border-style: dotted;
  }
}

.mm-box--rounded-xs {
  border-radius: 2px;
}

.mm-box--rounded-sm {
  border-radius: 4px;
}

.mm-box--rounded-md {
  border-radius: 6px;
}

.mm-box--rounded-lg {
  border-radius: 8px;
}

.mm-box--rounded-xl {
  border-radius: 12px;
}

.mm-box--rounded-full {
  border-radius: 50%;
}

.mm-box--rounded-pill {
  border-radius: 9999px;
}

.mm-box--rounded-none {
  border-radius: 0;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-xs {
    border-radius: 2px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-sm {
    border-radius: 4px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-md {
    border-radius: 6px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-lg {
    border-radius: 8px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-xl {
    border-radius: 12px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-full {
    border-radius: 50%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-pill {
    border-radius: 9999px;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:rounded-none {
    border-radius: 0;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-xs {
    border-radius: 2px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-sm {
    border-radius: 4px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-md {
    border-radius: 6px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-lg {
    border-radius: 8px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-xl {
    border-radius: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-full {
    border-radius: 50%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-pill {
    border-radius: 9999px;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:rounded-none {
    border-radius: 0;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-xs {
    border-radius: 2px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-sm {
    border-radius: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-md {
    border-radius: 6px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-lg {
    border-radius: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-xl {
    border-radius: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-full {
    border-radius: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-pill {
    border-radius: 9999px;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:rounded-none {
    border-radius: 0;
  }
}

.mm-box--display-block {
  display: block;
}

.mm-box--display-flex {
  display: flex;
}

.mm-box--display-grid {
  display: grid;
}

.mm-box--display-inline-block {
  display: inline-block;
}

.mm-box--display-inline-grid {
  display: inline-grid;
}

.mm-box--display-inline-flex {
  display: inline-flex;
}

.mm-box--display-list-item {
  display: list-item;
}

.mm-box--display-none {
  display: none;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-block {
    display: block;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-flex {
    display: flex;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-grid {
    display: grid;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-inline-block {
    display: inline-block;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-inline-grid {
    display: inline-grid;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-inline-flex {
    display: inline-flex;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-list-item {
    display: list-item;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:display-none {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-block {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-flex {
    display: flex;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-grid {
    display: grid;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-inline-block {
    display: inline-block;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-inline-grid {
    display: inline-grid;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-inline-flex {
    display: inline-flex;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-list-item {
    display: list-item;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:display-none {
    display: none;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-block {
    display: block;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-flex {
    display: flex;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-grid {
    display: grid;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-inline-block {
    display: inline-block;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-inline-grid {
    display: inline-grid;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-inline-flex {
    display: inline-flex;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-list-item {
    display: list-item;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:display-none {
    display: none;
  }
}

.mm-box--align-items-baseline {
  align-items: baseline;
}

.mm-box--align-items-center {
  align-items: center;
}

.mm-box--align-items-flex-end {
  align-items: flex-end;
}

.mm-box--align-items-flex-start {
  align-items: flex-start;
}

.mm-box--align-items-stretch {
  align-items: stretch;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:align-items-baseline {
    align-items: baseline;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:align-items-center {
    align-items: center;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:align-items-flex-end {
    align-items: flex-end;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:align-items-flex-start {
    align-items: flex-start;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:align-items-stretch {
    align-items: stretch;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:align-items-baseline {
    align-items: baseline;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:align-items-center {
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:align-items-flex-end {
    align-items: flex-end;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:align-items-flex-start {
    align-items: flex-start;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:align-items-stretch {
    align-items: stretch;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:align-items-baseline {
    align-items: baseline;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:align-items-center {
    align-items: center;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:align-items-flex-end {
    align-items: flex-end;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:align-items-flex-start {
    align-items: flex-start;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:align-items-stretch {
    align-items: stretch;
  }
}

.mm-box--justify-content-center {
  justify-content: center;
}

.mm-box--justify-content-flex-end {
  justify-content: flex-end;
}

.mm-box--justify-content-flex-start {
  justify-content: flex-start;
}

.mm-box--justify-content-space-around {
  justify-content: space-around;
}

.mm-box--justify-content-space-between {
  justify-content: space-between;
}

.mm-box--justify-content-space-evenly {
  justify-content: space-evenly;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:justify-content-center {
    justify-content: center;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:justify-content-flex-end {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:justify-content-flex-start {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:justify-content-space-around {
    justify-content: space-around;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:justify-content-space-between {
    justify-content: space-between;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:justify-content-center {
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:justify-content-flex-end {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:justify-content-flex-start {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:justify-content-space-around {
    justify-content: space-around;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:justify-content-space-between {
    justify-content: space-between;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:justify-content-center {
    justify-content: center;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:justify-content-flex-end {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:justify-content-flex-start {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:justify-content-space-around {
    justify-content: space-around;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:justify-content-space-between {
    justify-content: space-between;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

.mm-box--flex-direction-row {
  flex-direction: row;
}

.mm-box--flex-direction-row-reverse {
  flex-direction: row-reverse;
}

.mm-box--flex-direction-column {
  flex-direction: column;
}

.mm-box--flex-direction-column-reverse {
  flex-direction: column-reverse;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:flex-direction-row {
    flex-direction: row;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:flex-direction-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:flex-direction-row {
    flex-direction: row;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:flex-direction-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:flex-direction-row {
    flex-direction: row;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:flex-direction-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
}

.mm-box--flex-wrap-wrap {
  flex-wrap: wrap;
}

.mm-box--flex-wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.mm-box--flex-wrap-nowrap {
  flex-wrap: nowrap;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:flex-wrap-wrap {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:flex-wrap-wrap {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:flex-wrap-wrap {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}

.mm-box--width-full {
  width: 100%;
}

.mm-box--min-width-full {
  min-width: 100%;
}

.mm-box--height-full {
  height: 100%;
}

.mm-box--width-0 {
  width: 0;
}

.mm-box--min-width-0 {
  min-width: 0;
}

.mm-box--height-0 {
  height: 0;
}

.mm-box--width-1\/2 {
  width: 50%;
}

.mm-box--min-width-1\/2 {
  min-width: 50%;
}

.mm-box--height-1\/2 {
  height: 50%;
}

.mm-box--width-1\/3 {
  width: 33.333333%;
}

.mm-box--min-width-1\/3 {
  min-width: 33.333333%;
}

.mm-box--height-1\/3 {
  height: 33.333333%;
}

.mm-box--width-2\/3 {
  width: 66.666667%;
}

.mm-box--min-width-2\/3 {
  min-width: 66.666667%;
}

.mm-box--height-2\/3 {
  height: 66.666667%;
}

.mm-box--width-1\/4 {
  width: 25%;
}

.mm-box--min-width-1\/4 {
  min-width: 25%;
}

.mm-box--height-1\/4 {
  height: 25%;
}

.mm-box--width-2\/4 {
  width: 50%;
}

.mm-box--min-width-2\/4 {
  min-width: 50%;
}

.mm-box--height-2\/4 {
  height: 50%;
}

.mm-box--width-3\/4 {
  width: 75%;
}

.mm-box--min-width-3\/4 {
  min-width: 75%;
}

.mm-box--height-3\/4 {
  height: 75%;
}

.mm-box--width-1\/5 {
  width: 20%;
}

.mm-box--min-width-1\/5 {
  min-width: 20%;
}

.mm-box--height-1\/5 {
  height: 20%;
}

.mm-box--width-2\/5 {
  width: 40%;
}

.mm-box--min-width-2\/5 {
  min-width: 40%;
}

.mm-box--height-2\/5 {
  height: 40%;
}

.mm-box--width-3\/5 {
  width: 60%;
}

.mm-box--min-width-3\/5 {
  min-width: 60%;
}

.mm-box--height-3\/5 {
  height: 60%;
}

.mm-box--width-4\/5 {
  width: 80%;
}

.mm-box--min-width-4\/5 {
  min-width: 80%;
}

.mm-box--height-4\/5 {
  height: 80%;
}

.mm-box--width-1\/6 {
  width: 16.666667%;
}

.mm-box--min-width-1\/6 {
  min-width: 16.666667%;
}

.mm-box--height-1\/6 {
  height: 16.666667%;
}

.mm-box--width-2\/6 {
  width: 33.333333%;
}

.mm-box--min-width-2\/6 {
  min-width: 33.333333%;
}

.mm-box--height-2\/6 {
  height: 33.333333%;
}

.mm-box--width-3\/6 {
  width: 50%;
}

.mm-box--min-width-3\/6 {
  min-width: 50%;
}

.mm-box--height-3\/6 {
  height: 50%;
}

.mm-box--width-4\/6 {
  width: 66.666667%;
}

.mm-box--min-width-4\/6 {
  min-width: 66.666667%;
}

.mm-box--height-4\/6 {
  height: 66.666667%;
}

.mm-box--width-5\/6 {
  width: 83.333333%;
}

.mm-box--min-width-5\/6 {
  min-width: 83.333333%;
}

.mm-box--height-5\/6 {
  height: 83.333333%;
}

.mm-box--width-1\/12 {
  width: 8.333333%;
}

.mm-box--min-width-1\/12 {
  min-width: 8.333333%;
}

.mm-box--height-1\/12 {
  height: 8.333333%;
}

.mm-box--width-2\/12 {
  width: 16.666667%;
}

.mm-box--min-width-2\/12 {
  min-width: 16.666667%;
}

.mm-box--height-2\/12 {
  height: 16.666667%;
}

.mm-box--width-3\/12 {
  width: 25%;
}

.mm-box--min-width-3\/12 {
  min-width: 25%;
}

.mm-box--height-3\/12 {
  height: 25%;
}

.mm-box--width-4\/12 {
  width: 33.333333%;
}

.mm-box--min-width-4\/12 {
  min-width: 33.333333%;
}

.mm-box--height-4\/12 {
  height: 33.333333%;
}

.mm-box--width-5\/12 {
  width: 41.666667%;
}

.mm-box--min-width-5\/12 {
  min-width: 41.666667%;
}

.mm-box--height-5\/12 {
  height: 41.666667%;
}

.mm-box--width-6\/12 {
  width: 50%;
}

.mm-box--min-width-6\/12 {
  min-width: 50%;
}

.mm-box--height-6\/12 {
  height: 50%;
}

.mm-box--width-7\/12 {
  width: 58.333333%;
}

.mm-box--min-width-7\/12 {
  min-width: 58.333333%;
}

.mm-box--height-7\/12 {
  height: 58.333333%;
}

.mm-box--width-8\/12 {
  width: 66.666667%;
}

.mm-box--min-width-8\/12 {
  min-width: 66.666667%;
}

.mm-box--height-8\/12 {
  height: 66.666667%;
}

.mm-box--width-9\/12 {
  width: 75%;
}

.mm-box--min-width-9\/12 {
  min-width: 75%;
}

.mm-box--height-9\/12 {
  height: 75%;
}

.mm-box--width-10\/12 {
  width: 83.333333%;
}

.mm-box--min-width-10\/12 {
  min-width: 83.333333%;
}

.mm-box--height-10\/12 {
  height: 83.333333%;
}

.mm-box--width-11\/12 {
  width: 91.666667%;
}

.mm-box--min-width-11\/12 {
  min-width: 91.666667%;
}

.mm-box--height-11\/12 {
  height: 91.666667%;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-0 {
    width: 0;
  }

  .mm-box--sm\:min-width-0 {
    min-width: 0;
  }

  .mm-box--sm\:height-0 {
    height: 0;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-1\/2 {
    width: 50%;
  }

  .mm-box--sm\:min-width-1\/2 {
    min-width: 50%;
  }

  .mm-box--sm\:height-1\/2 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-1\/3 {
    width: 33.333333%;
  }

  .mm-box--sm\:min-width-1\/3 {
    min-width: 33.333333%;
  }

  .mm-box--sm\:height-1\/3 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-2\/3 {
    width: 66.666667%;
  }

  .mm-box--sm\:min-width-2\/3 {
    min-width: 66.666667%;
  }

  .mm-box--sm\:height-2\/3 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-1\/4 {
    width: 25%;
  }

  .mm-box--sm\:min-width-1\/4 {
    min-width: 25%;
  }

  .mm-box--sm\:height-1\/4 {
    height: 25%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-2\/4 {
    width: 50%;
  }

  .mm-box--sm\:min-width-2\/4 {
    min-width: 50%;
  }

  .mm-box--sm\:height-2\/4 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-3\/4 {
    width: 75%;
  }

  .mm-box--sm\:min-width-3\/4 {
    min-width: 75%;
  }

  .mm-box--sm\:height-3\/4 {
    height: 75%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-1\/5 {
    width: 20%;
  }

  .mm-box--sm\:min-width-1\/5 {
    min-width: 20%;
  }

  .mm-box--sm\:height-1\/5 {
    height: 20%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-2\/5 {
    width: 40%;
  }

  .mm-box--sm\:min-width-2\/5 {
    min-width: 40%;
  }

  .mm-box--sm\:height-2\/5 {
    height: 40%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-3\/5 {
    width: 60%;
  }

  .mm-box--sm\:min-width-3\/5 {
    min-width: 60%;
  }

  .mm-box--sm\:height-3\/5 {
    height: 60%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-4\/5 {
    width: 80%;
  }

  .mm-box--sm\:min-width-4\/5 {
    min-width: 80%;
  }

  .mm-box--sm\:height-4\/5 {
    height: 80%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-1\/6 {
    width: 16.666667%;
  }

  .mm-box--sm\:min-width-1\/6 {
    min-width: 16.666667%;
  }

  .mm-box--sm\:height-1\/6 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-2\/6 {
    width: 33.333333%;
  }

  .mm-box--sm\:min-width-2\/6 {
    min-width: 33.333333%;
  }

  .mm-box--sm\:height-2\/6 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-3\/6 {
    width: 50%;
  }

  .mm-box--sm\:min-width-3\/6 {
    min-width: 50%;
  }

  .mm-box--sm\:height-3\/6 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-4\/6 {
    width: 66.666667%;
  }

  .mm-box--sm\:min-width-4\/6 {
    min-width: 66.666667%;
  }

  .mm-box--sm\:height-4\/6 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-5\/6 {
    width: 83.333333%;
  }

  .mm-box--sm\:min-width-5\/6 {
    min-width: 83.333333%;
  }

  .mm-box--sm\:height-5\/6 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-1\/12 {
    width: 8.333333%;
  }

  .mm-box--sm\:min-width-1\/12 {
    min-width: 8.333333%;
  }

  .mm-box--sm\:height-1\/12 {
    height: 8.333333%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-2\/12 {
    width: 16.666667%;
  }

  .mm-box--sm\:min-width-2\/12 {
    min-width: 16.666667%;
  }

  .mm-box--sm\:height-2\/12 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-3\/12 {
    width: 25%;
  }

  .mm-box--sm\:min-width-3\/12 {
    min-width: 25%;
  }

  .mm-box--sm\:height-3\/12 {
    height: 25%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-4\/12 {
    width: 33.333333%;
  }

  .mm-box--sm\:min-width-4\/12 {
    min-width: 33.333333%;
  }

  .mm-box--sm\:height-4\/12 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-5\/12 {
    width: 41.666667%;
  }

  .mm-box--sm\:min-width-5\/12 {
    min-width: 41.666667%;
  }

  .mm-box--sm\:height-5\/12 {
    height: 41.666667%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-6\/12 {
    width: 50%;
  }

  .mm-box--sm\:min-width-6\/12 {
    min-width: 50%;
  }

  .mm-box--sm\:height-6\/12 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-7\/12 {
    width: 58.333333%;
  }

  .mm-box--sm\:min-width-7\/12 {
    min-width: 58.333333%;
  }

  .mm-box--sm\:height-7\/12 {
    height: 58.333333%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-8\/12 {
    width: 66.666667%;
  }

  .mm-box--sm\:min-width-8\/12 {
    min-width: 66.666667%;
  }

  .mm-box--sm\:height-8\/12 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-9\/12 {
    width: 75%;
  }

  .mm-box--sm\:min-width-9\/12 {
    min-width: 75%;
  }

  .mm-box--sm\:height-9\/12 {
    height: 75%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-10\/12 {
    width: 83.333333%;
  }

  .mm-box--sm\:min-width-10\/12 {
    min-width: 83.333333%;
  }

  .mm-box--sm\:height-10\/12 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-11\/12 {
    width: 91.666667%;
  }

  .mm-box--sm\:min-width-11\/12 {
    min-width: 91.666667%;
  }

  .mm-box--sm\:height-11\/12 {
    height: 91.666667%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-0 {
    width: 0;
  }

  .mm-box--md\:min-width-0 {
    min-width: 0;
  }

  .mm-box--md\:height-0 {
    height: 0;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-1\/2 {
    width: 50%;
  }

  .mm-box--md\:min-width-1\/2 {
    min-width: 50%;
  }

  .mm-box--md\:height-1\/2 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-1\/3 {
    width: 33.333333%;
  }

  .mm-box--md\:min-width-1\/3 {
    min-width: 33.333333%;
  }

  .mm-box--md\:height-1\/3 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-2\/3 {
    width: 66.666667%;
  }

  .mm-box--md\:min-width-2\/3 {
    min-width: 66.666667%;
  }

  .mm-box--md\:height-2\/3 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-1\/4 {
    width: 25%;
  }

  .mm-box--md\:min-width-1\/4 {
    min-width: 25%;
  }

  .mm-box--md\:height-1\/4 {
    height: 25%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-2\/4 {
    width: 50%;
  }

  .mm-box--md\:min-width-2\/4 {
    min-width: 50%;
  }

  .mm-box--md\:height-2\/4 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-3\/4 {
    width: 75%;
  }

  .mm-box--md\:min-width-3\/4 {
    min-width: 75%;
  }

  .mm-box--md\:height-3\/4 {
    height: 75%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-1\/5 {
    width: 20%;
  }

  .mm-box--md\:min-width-1\/5 {
    min-width: 20%;
  }

  .mm-box--md\:height-1\/5 {
    height: 20%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-2\/5 {
    width: 40%;
  }

  .mm-box--md\:min-width-2\/5 {
    min-width: 40%;
  }

  .mm-box--md\:height-2\/5 {
    height: 40%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-3\/5 {
    width: 60%;
  }

  .mm-box--md\:min-width-3\/5 {
    min-width: 60%;
  }

  .mm-box--md\:height-3\/5 {
    height: 60%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-4\/5 {
    width: 80%;
  }

  .mm-box--md\:min-width-4\/5 {
    min-width: 80%;
  }

  .mm-box--md\:height-4\/5 {
    height: 80%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-1\/6 {
    width: 16.666667%;
  }

  .mm-box--md\:min-width-1\/6 {
    min-width: 16.666667%;
  }

  .mm-box--md\:height-1\/6 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-2\/6 {
    width: 33.333333%;
  }

  .mm-box--md\:min-width-2\/6 {
    min-width: 33.333333%;
  }

  .mm-box--md\:height-2\/6 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-3\/6 {
    width: 50%;
  }

  .mm-box--md\:min-width-3\/6 {
    min-width: 50%;
  }

  .mm-box--md\:height-3\/6 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-4\/6 {
    width: 66.666667%;
  }

  .mm-box--md\:min-width-4\/6 {
    min-width: 66.666667%;
  }

  .mm-box--md\:height-4\/6 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-5\/6 {
    width: 83.333333%;
  }

  .mm-box--md\:min-width-5\/6 {
    min-width: 83.333333%;
  }

  .mm-box--md\:height-5\/6 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-1\/12 {
    width: 8.333333%;
  }

  .mm-box--md\:min-width-1\/12 {
    min-width: 8.333333%;
  }

  .mm-box--md\:height-1\/12 {
    height: 8.333333%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-2\/12 {
    width: 16.666667%;
  }

  .mm-box--md\:min-width-2\/12 {
    min-width: 16.666667%;
  }

  .mm-box--md\:height-2\/12 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-3\/12 {
    width: 25%;
  }

  .mm-box--md\:min-width-3\/12 {
    min-width: 25%;
  }

  .mm-box--md\:height-3\/12 {
    height: 25%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-4\/12 {
    width: 33.333333%;
  }

  .mm-box--md\:min-width-4\/12 {
    min-width: 33.333333%;
  }

  .mm-box--md\:height-4\/12 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-5\/12 {
    width: 41.666667%;
  }

  .mm-box--md\:min-width-5\/12 {
    min-width: 41.666667%;
  }

  .mm-box--md\:height-5\/12 {
    height: 41.666667%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-6\/12 {
    width: 50%;
  }

  .mm-box--md\:min-width-6\/12 {
    min-width: 50%;
  }

  .mm-box--md\:height-6\/12 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-7\/12 {
    width: 58.333333%;
  }

  .mm-box--md\:min-width-7\/12 {
    min-width: 58.333333%;
  }

  .mm-box--md\:height-7\/12 {
    height: 58.333333%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-8\/12 {
    width: 66.666667%;
  }

  .mm-box--md\:min-width-8\/12 {
    min-width: 66.666667%;
  }

  .mm-box--md\:height-8\/12 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-9\/12 {
    width: 75%;
  }

  .mm-box--md\:min-width-9\/12 {
    min-width: 75%;
  }

  .mm-box--md\:height-9\/12 {
    height: 75%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-10\/12 {
    width: 83.333333%;
  }

  .mm-box--md\:min-width-10\/12 {
    min-width: 83.333333%;
  }

  .mm-box--md\:height-10\/12 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-11\/12 {
    width: 91.666667%;
  }

  .mm-box--md\:min-width-11\/12 {
    min-width: 91.666667%;
  }

  .mm-box--md\:height-11\/12 {
    height: 91.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-0 {
    width: 0;
  }

  .mm-box--lg\:min-width-0 {
    min-width: 0;
  }

  .mm-box--lg\:height-0 {
    height: 0;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-1\/2 {
    width: 50%;
  }

  .mm-box--lg\:min-width-1\/2 {
    min-width: 50%;
  }

  .mm-box--lg\:height-1\/2 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-1\/3 {
    width: 33.333333%;
  }

  .mm-box--lg\:min-width-1\/3 {
    min-width: 33.333333%;
  }

  .mm-box--lg\:height-1\/3 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-2\/3 {
    width: 66.666667%;
  }

  .mm-box--lg\:min-width-2\/3 {
    min-width: 66.666667%;
  }

  .mm-box--lg\:height-2\/3 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-1\/4 {
    width: 25%;
  }

  .mm-box--lg\:min-width-1\/4 {
    min-width: 25%;
  }

  .mm-box--lg\:height-1\/4 {
    height: 25%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-2\/4 {
    width: 50%;
  }

  .mm-box--lg\:min-width-2\/4 {
    min-width: 50%;
  }

  .mm-box--lg\:height-2\/4 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-3\/4 {
    width: 75%;
  }

  .mm-box--lg\:min-width-3\/4 {
    min-width: 75%;
  }

  .mm-box--lg\:height-3\/4 {
    height: 75%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-1\/5 {
    width: 20%;
  }

  .mm-box--lg\:min-width-1\/5 {
    min-width: 20%;
  }

  .mm-box--lg\:height-1\/5 {
    height: 20%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-2\/5 {
    width: 40%;
  }

  .mm-box--lg\:min-width-2\/5 {
    min-width: 40%;
  }

  .mm-box--lg\:height-2\/5 {
    height: 40%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-3\/5 {
    width: 60%;
  }

  .mm-box--lg\:min-width-3\/5 {
    min-width: 60%;
  }

  .mm-box--lg\:height-3\/5 {
    height: 60%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-4\/5 {
    width: 80%;
  }

  .mm-box--lg\:min-width-4\/5 {
    min-width: 80%;
  }

  .mm-box--lg\:height-4\/5 {
    height: 80%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-1\/6 {
    width: 16.666667%;
  }

  .mm-box--lg\:min-width-1\/6 {
    min-width: 16.666667%;
  }

  .mm-box--lg\:height-1\/6 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-2\/6 {
    width: 33.333333%;
  }

  .mm-box--lg\:min-width-2\/6 {
    min-width: 33.333333%;
  }

  .mm-box--lg\:height-2\/6 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-3\/6 {
    width: 50%;
  }

  .mm-box--lg\:min-width-3\/6 {
    min-width: 50%;
  }

  .mm-box--lg\:height-3\/6 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-4\/6 {
    width: 66.666667%;
  }

  .mm-box--lg\:min-width-4\/6 {
    min-width: 66.666667%;
  }

  .mm-box--lg\:height-4\/6 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-5\/6 {
    width: 83.333333%;
  }

  .mm-box--lg\:min-width-5\/6 {
    min-width: 83.333333%;
  }

  .mm-box--lg\:height-5\/6 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-1\/12 {
    width: 8.333333%;
  }

  .mm-box--lg\:min-width-1\/12 {
    min-width: 8.333333%;
  }

  .mm-box--lg\:height-1\/12 {
    height: 8.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-2\/12 {
    width: 16.666667%;
  }

  .mm-box--lg\:min-width-2\/12 {
    min-width: 16.666667%;
  }

  .mm-box--lg\:height-2\/12 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-3\/12 {
    width: 25%;
  }

  .mm-box--lg\:min-width-3\/12 {
    min-width: 25%;
  }

  .mm-box--lg\:height-3\/12 {
    height: 25%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-4\/12 {
    width: 33.333333%;
  }

  .mm-box--lg\:min-width-4\/12 {
    min-width: 33.333333%;
  }

  .mm-box--lg\:height-4\/12 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-5\/12 {
    width: 41.666667%;
  }

  .mm-box--lg\:min-width-5\/12 {
    min-width: 41.666667%;
  }

  .mm-box--lg\:height-5\/12 {
    height: 41.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-6\/12 {
    width: 50%;
  }

  .mm-box--lg\:min-width-6\/12 {
    min-width: 50%;
  }

  .mm-box--lg\:height-6\/12 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-7\/12 {
    width: 58.333333%;
  }

  .mm-box--lg\:min-width-7\/12 {
    min-width: 58.333333%;
  }

  .mm-box--lg\:height-7\/12 {
    height: 58.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-8\/12 {
    width: 66.666667%;
  }

  .mm-box--lg\:min-width-8\/12 {
    min-width: 66.666667%;
  }

  .mm-box--lg\:height-8\/12 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-9\/12 {
    width: 75%;
  }

  .mm-box--lg\:min-width-9\/12 {
    min-width: 75%;
  }

  .mm-box--lg\:height-9\/12 {
    height: 75%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-10\/12 {
    width: 83.333333%;
  }

  .mm-box--lg\:min-width-10\/12 {
    min-width: 83.333333%;
  }

  .mm-box--lg\:height-10\/12 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-11\/12 {
    width: 91.666667%;
  }

  .mm-box--lg\:min-width-11\/12 {
    min-width: 91.666667%;
  }

  .mm-box--lg\:height-11\/12 {
    height: 91.666667%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-full {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-full {
    width: 100%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-full {
    width: 100%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:min-width-full {
    min-width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:min-width-full {
    min-width: 100%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:min-width-full {
    min-width: 100%;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:height-full {
    height: 100%;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:height-full {
    height: 100%;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:height-full {
    height: 100%;
  }
}

.mm-box--height-screen {
  height: 100vh;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:height-screen {
    height: 100vh;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:height-screen {
    height: 100vh;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:height-screen {
    height: 100vh;
  }
}

.mm-box--width-screen {
  width: 100vw;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-screen {
    width: 100vw;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-screen {
    width: 100vw;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-screen {
    width: 100vw;
  }
}

.mm-box--min-width-screen {
  min-width: 100vw;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:min-width-screen {
    min-width: 100vw;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:min-width-screen {
    min-width: 100vw;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:min-width-screen {
    min-width: 100vw;
  }
}

.mm-box--height-max {
  height: max-content;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:height-max {
    height: max-content;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:height-max {
    height: max-content;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:height-max {
    height: max-content;
  }
}

.mm-box--width-max {
  width: max-content;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-max {
    width: max-content;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-max {
    width: max-content;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-max {
    width: max-content;
  }
}

.mm-box--min-width-max {
  min-width: max-content;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:min-width-max {
    min-width: max-content;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:min-width-max {
    min-width: max-content;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:min-width-max {
    min-width: max-content;
  }
}

.mm-box--height-min {
  height: min-content;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:height-min {
    height: min-content;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:height-min {
    height: min-content;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:height-min {
    height: min-content;
  }
}

.mm-box--width-min {
  width: min-content;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:width-min {
    width: min-content;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:width-min {
    width: min-content;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:width-min {
    width: min-content;
  }
}

.mm-box--min-width-min {
  min-width: min-content;
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:min-width-min {
    min-width: min-content;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:min-width-min {
    min-width: min-content;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:min-width-min {
    min-width: min-content;
  }
}

[dir="ltr"] .mm-box--text-align-left {
  text-align: left;
}

[dir="rtl"] .mm-box--text-align-left {
  text-align: right;
}

[dir="ltr"] .mm-box--text-align-right {
  text-align: right;
}

[dir="rtl"] .mm-box--text-align-right {
  text-align: left;
}

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

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

.mm-box--text-align-end {
  text-align: end;
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:text-align-left {
    text-align: left;
  }

  [dir="rtl"] .mm-box--sm\:text-align-left {
    text-align: right;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .mm-box--sm\:text-align-right {
    text-align: right;
  }

  [dir="rtl"] .mm-box--sm\:text-align-right {
    text-align: left;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:text-align-center {
    text-align: center;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:text-align-justify {
    text-align: justify;
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:text-align-end {
    text-align: end;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:text-align-left {
    text-align: left;
  }

  [dir="rtl"] .mm-box--md\:text-align-left {
    text-align: right;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .mm-box--md\:text-align-right {
    text-align: right;
  }

  [dir="rtl"] .mm-box--md\:text-align-right {
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:text-align-center {
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:text-align-justify {
    text-align: justify;
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:text-align-end {
    text-align: end;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:text-align-left {
    text-align: left;
  }

  [dir="rtl"] .mm-box--lg\:text-align-left {
    text-align: right;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .mm-box--lg\:text-align-right {
    text-align: right;
  }

  [dir="rtl"] .mm-box--lg\:text-align-right {
    text-align: left;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:text-align-center {
    text-align: center;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:text-align-justify {
    text-align: justify;
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:text-align-end {
    text-align: end;
  }
}

.mm-box--background-color-background-default {
  background-color: var(--color-background-default);
}

.mm-box--background-color-background-alternative {
  background-color: var(--color-background-alternative);
}

.mm-box--background-color-background-muted {
  background-color: var(--color-background-muted);
}

.mm-box--background-color-background-hover {
  background-color: var(--color-background-hover);
}

.mm-box--background-color-background-pressed {
  background-color: var(--color-background-pressed);
}

.mm-box--background-color-text-default {
  background-color: var(--color-text-default);
}

.mm-box--background-color-text-alternative {
  background-color: var(--color-text-alternative);
}

.mm-box--background-color-text-muted {
  background-color: var(--color-text-muted);
}

.mm-box--background-color-icon-default {
  background-color: var(--color-icon-default);
}

.mm-box--background-color-icon-alternative {
  background-color: var(--color-icon-alternative);
}

.mm-box--background-color-icon-muted {
  background-color: var(--color-icon-muted);
}

.mm-box--background-color-border-default {
  background-color: var(--color-border-default);
}

.mm-box--background-color-border-muted {
  background-color: var(--color-border-muted);
}

.mm-box--background-color-overlay-default {
  background-color: var(--color-overlay-default);
}

.mm-box--background-color-overlay-alternative {
  background-color: var(--color-overlay-alternative);
}

.mm-box--background-color-overlay-inverse {
  background-color: var(--color-overlay-inverse);
}

.mm-box--background-color-primary-default {
  background-color: var(--color-primary-default);
}

.mm-box--background-color-primary-alternative {
  background-color: var(--color-primary-alternative);
}

.mm-box--background-color-primary-muted {
  background-color: var(--color-primary-muted);
}

.mm-box--background-color-primary-inverse {
  background-color: var(--color-primary-inverse);
}

.mm-box--background-color-error-default {
  background-color: var(--color-error-default);
}

.mm-box--background-color-error-alternative {
  background-color: var(--color-error-alternative);
}

.mm-box--background-color-error-muted {
  background-color: var(--color-error-muted);
}

.mm-box--background-color-error-inverse {
  background-color: var(--color-error-inverse);
}

.mm-box--background-color-warning-default {
  background-color: var(--color-warning-default);
}

.mm-box--background-color-warning-muted {
  background-color: var(--color-warning-muted);
}

.mm-box--background-color-warning-inverse {
  background-color: var(--color-warning-inverse);
}

.mm-box--background-color-success-default {
  background-color: var(--color-success-default);
}

.mm-box--background-color-success-muted {
  background-color: var(--color-success-muted);
}

.mm-box--background-color-success-inverse {
  background-color: var(--color-success-inverse);
}

.mm-box--background-color-info-default {
  background-color: var(--color-info-default);
}

.mm-box--background-color-info-muted {
  background-color: var(--color-info-muted);
}

.mm-box--background-color-info-inverse {
  background-color: var(--color-info-inverse);
}

.mm-box--background-color-goerli {
  background-color: var(--color-network-goerli-default);
}

.mm-box--background-color-sepolia {
  background-color: var(--color-network-sepolia-default);
}

.mm-box--background-color-goerli-inverse {
  background-color: var(--color-network-goerli-inverse);
}

.mm-box--background-color-sepolia-inverse {
  background-color: var(--color-network-sepolia-inverse);
}

.mm-box--background-color-linea-goerli {
  background-color: var(--color-network-linea-goerli-default);
}

.mm-box--background-color-linea-goerli-inverse {
  background-color: var(--color-network-linea-goerli-inverse);
}

.mm-box--background-color-linea-sepolia {
  background-color: var(--color-network-linea-sepolia-default);
}

.mm-box--background-color-linea-sepolia-inverse {
  background-color: var(--color-network-linea-sepolia-inverse);
}

.mm-box--background-color-linea-mainnet {
  background-color: var(--color-network-linea-mainnet-default);
}

.mm-box--background-color-linea-mainnet-inverse {
  background-color: var(--color-network-linea-mainnet-inverse);
}

.mm-box--background-color-localhost {
  background-color: var(--color-network-localhost-default);
}

.mm-box--background-color-transparent {
  background-color: var(--transparent);
}

.mm-box--background-color-flask-purple {
  background-color: var(--color-flask-default);
}

.mm-box--background-color-inherit {
  background-color: var(--inherit);
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-background-default {
    background-color: var(--color-background-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-background-alternative {
    background-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-background-muted {
    background-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-background-hover {
    background-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-background-pressed {
    background-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-text-default {
    background-color: var(--color-text-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-text-alternative {
    background-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-text-muted {
    background-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-icon-default {
    background-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-icon-alternative {
    background-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-icon-muted {
    background-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-border-default {
    background-color: var(--color-border-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-border-muted {
    background-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-overlay-default {
    background-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-overlay-alternative {
    background-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-overlay-inverse {
    background-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-primary-default {
    background-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-primary-alternative {
    background-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-primary-muted {
    background-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-primary-inverse {
    background-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-error-default {
    background-color: var(--color-error-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-error-alternative {
    background-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-error-muted {
    background-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-error-inverse {
    background-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-warning-default {
    background-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-warning-muted {
    background-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-warning-inverse {
    background-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-success-default {
    background-color: var(--color-success-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-success-muted {
    background-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-success-inverse {
    background-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-info-default {
    background-color: var(--color-info-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-info-muted {
    background-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-info-inverse {
    background-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-goerli {
    background-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-sepolia {
    background-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-goerli-inverse {
    background-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-sepolia-inverse {
    background-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-linea-goerli {
    background-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-linea-goerli-inverse {
    background-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-linea-sepolia {
    background-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-linea-sepolia-inverse {
    background-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-linea-mainnet {
    background-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-linea-mainnet-inverse {
    background-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-localhost {
    background-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-transparent {
    background-color: var(--transparent);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-flask-purple {
    background-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\:background-color-inherit {
    background-color: var(--inherit);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-background-default {
    background-color: var(--color-background-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-background-alternative {
    background-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-background-muted {
    background-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-background-hover {
    background-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-background-pressed {
    background-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-text-default {
    background-color: var(--color-text-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-text-alternative {
    background-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-text-muted {
    background-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-icon-default {
    background-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-icon-alternative {
    background-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-icon-muted {
    background-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-border-default {
    background-color: var(--color-border-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-border-muted {
    background-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-overlay-default {
    background-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-overlay-alternative {
    background-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-overlay-inverse {
    background-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-primary-default {
    background-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-primary-alternative {
    background-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-primary-muted {
    background-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-primary-inverse {
    background-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-error-default {
    background-color: var(--color-error-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-error-alternative {
    background-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-error-muted {
    background-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-error-inverse {
    background-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-warning-default {
    background-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-warning-muted {
    background-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-warning-inverse {
    background-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-success-default {
    background-color: var(--color-success-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-success-muted {
    background-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-success-inverse {
    background-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-info-default {
    background-color: var(--color-info-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-info-muted {
    background-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-info-inverse {
    background-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-goerli {
    background-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-sepolia {
    background-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-goerli-inverse {
    background-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-sepolia-inverse {
    background-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-linea-goerli {
    background-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-linea-goerli-inverse {
    background-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-linea-sepolia {
    background-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-linea-sepolia-inverse {
    background-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-linea-mainnet {
    background-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-linea-mainnet-inverse {
    background-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-localhost {
    background-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-transparent {
    background-color: var(--transparent);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-flask-purple {
    background-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\:background-color-inherit {
    background-color: var(--inherit);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-background-default {
    background-color: var(--color-background-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-background-alternative {
    background-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-background-muted {
    background-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-background-hover {
    background-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-background-pressed {
    background-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-text-default {
    background-color: var(--color-text-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-text-alternative {
    background-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-text-muted {
    background-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-icon-default {
    background-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-icon-alternative {
    background-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-icon-muted {
    background-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-border-default {
    background-color: var(--color-border-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-border-muted {
    background-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-overlay-default {
    background-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-overlay-alternative {
    background-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-overlay-inverse {
    background-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-primary-default {
    background-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-primary-alternative {
    background-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-primary-muted {
    background-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-primary-inverse {
    background-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-error-default {
    background-color: var(--color-error-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-error-alternative {
    background-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-error-muted {
    background-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-error-inverse {
    background-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-warning-default {
    background-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-warning-muted {
    background-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-warning-inverse {
    background-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-success-default {
    background-color: var(--color-success-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-success-muted {
    background-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-success-inverse {
    background-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-info-default {
    background-color: var(--color-info-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-info-muted {
    background-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-info-inverse {
    background-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-goerli {
    background-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-sepolia {
    background-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-goerli-inverse {
    background-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-sepolia-inverse {
    background-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-linea-goerli {
    background-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-linea-goerli-inverse {
    background-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-linea-sepolia {
    background-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-linea-sepolia-inverse {
    background-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-linea-mainnet {
    background-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-linea-mainnet-inverse {
    background-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-localhost {
    background-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-transparent {
    background-color: var(--transparent);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-flask-purple {
    background-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\:background-color-inherit {
    background-color: var(--inherit);
  }
}

.mm-box--color-background-default {
  color: var(--color-background-default);
}

.mm-box--color-background-alternative {
  color: var(--color-background-alternative);
}

.mm-box--color-background-muted {
  color: var(--color-background-muted);
}

.mm-box--color-background-hover {
  color: var(--color-background-hover);
}

.mm-box--color-background-pressed {
  color: var(--color-background-pressed);
}

.mm-box--color-text-default {
  color: var(--color-text-default);
}

.mm-box--color-text-alternative {
  color: var(--color-text-alternative);
}

.mm-box--color-text-muted {
  color: var(--color-text-muted);
}

.mm-box--color-icon-default {
  color: var(--color-icon-default);
}

.mm-box--color-icon-alternative {
  color: var(--color-icon-alternative);
}

.mm-box--color-icon-muted {
  color: var(--color-icon-muted);
}

.mm-box--color-border-default {
  color: var(--color-border-default);
}

.mm-box--color-border-muted {
  color: var(--color-border-muted);
}

.mm-box--color-overlay-default {
  color: var(--color-overlay-default);
}

.mm-box--color-overlay-alternative {
  color: var(--color-overlay-alternative);
}

.mm-box--color-overlay-inverse {
  color: var(--color-overlay-inverse);
}

.mm-box--color-primary-default {
  color: var(--color-primary-default);
}

.mm-box--color-primary-alternative {
  color: var(--color-primary-alternative);
}

.mm-box--color-primary-muted {
  color: var(--color-primary-muted);
}

.mm-box--color-primary-inverse {
  color: var(--color-primary-inverse);
}

.mm-box--color-error-default {
  color: var(--color-error-default);
}

.mm-box--color-error-alternative {
  color: var(--color-error-alternative);
}

.mm-box--color-error-muted {
  color: var(--color-error-muted);
}

.mm-box--color-error-inverse {
  color: var(--color-error-inverse);
}

.mm-box--color-warning-default {
  color: var(--color-warning-default);
}

.mm-box--color-warning-muted {
  color: var(--color-warning-muted);
}

.mm-box--color-warning-inverse {
  color: var(--color-warning-inverse);
}

.mm-box--color-success-default {
  color: var(--color-success-default);
}

.mm-box--color-success-muted {
  color: var(--color-success-muted);
}

.mm-box--color-success-inverse {
  color: var(--color-success-inverse);
}

.mm-box--color-info-default {
  color: var(--color-info-default);
}

.mm-box--color-info-muted {
  color: var(--color-info-muted);
}

.mm-box--color-info-inverse {
  color: var(--color-info-inverse);
}

.mm-box--color-goerli {
  color: var(--color-network-goerli-default);
}

.mm-box--color-sepolia {
  color: var(--color-network-sepolia-default);
}

.mm-box--color-goerli-inverse {
  color: var(--color-network-goerli-inverse);
}

.mm-box--color-sepolia-inverse {
  color: var(--color-network-sepolia-inverse);
}

.mm-box--color-linea-goerli {
  color: var(--color-network-linea-goerli-default);
}

.mm-box--color-linea-goerli-inverse {
  color: var(--color-network-linea-goerli-inverse);
}

.mm-box--color-linea-sepolia {
  color: var(--color-network-linea-sepolia-default);
}

.mm-box--color-linea-sepolia-inverse {
  color: var(--color-network-linea-sepolia-inverse);
}

.mm-box--color-linea-mainnet {
  color: var(--color-network-linea-mainnet-default);
}

.mm-box--color-linea-mainnet-inverse {
  color: var(--color-network-linea-mainnet-inverse);
}

.mm-box--color-localhost {
  color: var(--color-network-localhost-default);
}

.mm-box--color-transparent {
  color: var(--transparent);
}

.mm-box--color-flask-purple {
  color: var(--color-flask-default);
}

.mm-box--color-inherit {
  color: var(--inherit);
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-background-default {
    color: var(--color-background-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-background-alternative {
    color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-background-muted {
    color: var(--color-background-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-background-hover {
    color: var(--color-background-hover);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-background-pressed {
    color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-text-default {
    color: var(--color-text-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-text-alternative {
    color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-text-muted {
    color: var(--color-text-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-icon-default {
    color: var(--color-icon-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-icon-alternative {
    color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-icon-muted {
    color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-border-default {
    color: var(--color-border-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-border-muted {
    color: var(--color-border-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-overlay-default {
    color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-overlay-alternative {
    color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-overlay-inverse {
    color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-primary-default {
    color: var(--color-primary-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-primary-alternative {
    color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-primary-muted {
    color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-primary-inverse {
    color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-error-default {
    color: var(--color-error-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-error-alternative {
    color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-error-muted {
    color: var(--color-error-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-error-inverse {
    color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-warning-default {
    color: var(--color-warning-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-warning-muted {
    color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-warning-inverse {
    color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-success-default {
    color: var(--color-success-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-success-muted {
    color: var(--color-success-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-success-inverse {
    color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-info-default {
    color: var(--color-info-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-info-muted {
    color: var(--color-info-muted);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-info-inverse {
    color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-goerli {
    color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-sepolia {
    color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-goerli-inverse {
    color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-sepolia-inverse {
    color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-linea-goerli {
    color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-linea-goerli-inverse {
    color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-linea-sepolia {
    color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-linea-sepolia-inverse {
    color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-linea-mainnet {
    color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-linea-mainnet-inverse {
    color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-localhost {
    color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-transparent {
    color: var(--transparent);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-flask-purple {
    color: var(--color-flask-default);
  }
}

@media screen and (min-width: 576px) {
  .mm-box--sm\c olor-inherit {
    color: var(--inherit);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-background-default {
    color: var(--color-background-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-background-alternative {
    color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-background-muted {
    color: var(--color-background-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-background-hover {
    color: var(--color-background-hover);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-background-pressed {
    color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-text-default {
    color: var(--color-text-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-text-alternative {
    color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-text-muted {
    color: var(--color-text-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-icon-default {
    color: var(--color-icon-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-icon-alternative {
    color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-icon-muted {
    color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-border-default {
    color: var(--color-border-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-border-muted {
    color: var(--color-border-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-overlay-default {
    color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-overlay-alternative {
    color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-overlay-inverse {
    color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-primary-default {
    color: var(--color-primary-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-primary-alternative {
    color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-primary-muted {
    color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-primary-inverse {
    color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-error-default {
    color: var(--color-error-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-error-alternative {
    color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-error-muted {
    color: var(--color-error-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-error-inverse {
    color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-warning-default {
    color: var(--color-warning-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-warning-muted {
    color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-warning-inverse {
    color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-success-default {
    color: var(--color-success-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-success-muted {
    color: var(--color-success-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-success-inverse {
    color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-info-default {
    color: var(--color-info-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-info-muted {
    color: var(--color-info-muted);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-info-inverse {
    color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-goerli {
    color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-sepolia {
    color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-goerli-inverse {
    color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-sepolia-inverse {
    color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-linea-goerli {
    color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-linea-goerli-inverse {
    color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-linea-sepolia {
    color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-linea-sepolia-inverse {
    color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-linea-mainnet {
    color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-linea-mainnet-inverse {
    color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-localhost {
    color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-transparent {
    color: var(--transparent);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-flask-purple {
    color: var(--color-flask-default);
  }
}

@media screen and (min-width: 768px) {
  .mm-box--md\c olor-inherit {
    color: var(--inherit);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-background-default {
    color: var(--color-background-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-background-alternative {
    color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-background-muted {
    color: var(--color-background-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-background-hover {
    color: var(--color-background-hover);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-background-pressed {
    color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-text-default {
    color: var(--color-text-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-text-alternative {
    color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-text-muted {
    color: var(--color-text-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-icon-default {
    color: var(--color-icon-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-icon-alternative {
    color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-icon-muted {
    color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-border-default {
    color: var(--color-border-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-border-muted {
    color: var(--color-border-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-overlay-default {
    color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-overlay-alternative {
    color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-overlay-inverse {
    color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-primary-default {
    color: var(--color-primary-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-primary-alternative {
    color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-primary-muted {
    color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-primary-inverse {
    color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-error-default {
    color: var(--color-error-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-error-alternative {
    color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-error-muted {
    color: var(--color-error-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-error-inverse {
    color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-warning-default {
    color: var(--color-warning-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-warning-muted {
    color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-warning-inverse {
    color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-success-default {
    color: var(--color-success-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-success-muted {
    color: var(--color-success-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-success-inverse {
    color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-info-default {
    color: var(--color-info-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-info-muted {
    color: var(--color-info-muted);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-info-inverse {
    color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-goerli {
    color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-sepolia {
    color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-goerli-inverse {
    color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-sepolia-inverse {
    color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-linea-goerli {
    color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-linea-goerli-inverse {
    color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-linea-sepolia {
    color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-linea-sepolia-inverse {
    color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-linea-mainnet {
    color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-linea-mainnet-inverse {
    color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-localhost {
    color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-transparent {
    color: var(--transparent);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-flask-purple {
    color: var(--color-flask-default);
  }
}

@media screen and (min-width: 1280px) {
  .mm-box--lg\c olor-inherit {
    color: var(--inherit);
  }
}

.mm-container {
  --size: 100%;
  max-width: var(--size);
}

.mm-container--max-width-sm {
  --size: 360px;
}

.mm-container--max-width-md {
  --size: 480px;
}

.mm-container--max-width-lg {
  --size: 720px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.mm-text {
  font-family: var(--font-family-default);
}

.mm-text:is(strong),
.mm-text strong {
  font-weight: var(--font-weight-bold);
}

.mm-text--display {
  font-weight: var(--typography-s-display-md-font-weight);
  font-size: var(--typography-s-display-md-font-size);
  line-height: var(--typography-s-display-md-line-height);
  letter-spacing: var(--typography-s-display-md-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--display {
    font-weight: var(--typography-l-display-md-font-weight);
    font-size: var(--typography-l-display-md-font-size);
    line-height: var(--typography-l-display-md-line-height);
    letter-spacing: var(--typography-l-display-md-letter-spacing);
  }
}

.mm-text--display-md {
  font-weight: var(--typography-s-display-md-font-weight);
  font-size: var(--typography-s-display-md-font-size);
  line-height: var(--typography-s-display-md-line-height);
  letter-spacing: var(--typography-s-display-md-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--display-md {
    font-weight: var(--typography-l-display-md-font-weight);
    font-size: var(--typography-l-display-md-font-size);
    line-height: var(--typography-l-display-md-line-height);
    letter-spacing: var(--typography-l-display-md-letter-spacing);
  }
}

.mm-text--heading {
  font-weight: var(--typography-s-heading-md-font-weight);
  font-size: var(--typography-s-heading-md-font-size);
  line-height: var(--typography-s-heading-md-line-height);
  letter-spacing: var(--typography-s-heading-md-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--heading {
    font-weight: var(--typography-l-heading-md-font-weight);
    font-size: var(--typography-l-heading-md-font-size);
    line-height: var(--typography-l-heading-md-line-height);
    letter-spacing: var(--typography-l-heading-md-letter-spacing);
  }
}

.mm-text--heading-sm {
  font-weight: var(--typography-s-heading-sm-font-weight);
  font-size: var(--typography-s-heading-sm-font-size);
  line-height: var(--typography-s-heading-sm-line-height);
  letter-spacing: var(--typography-s-heading-sm-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--heading-sm {
    font-weight: var(--typography-l-heading-sm-font-weight);
    font-size: var(--typography-l-heading-sm-font-size);
    line-height: var(--typography-l-heading-sm-line-height);
    letter-spacing: var(--typography-l-heading-sm-letter-spacing);
  }
}

.mm-text--heading-md {
  font-weight: var(--typography-s-heading-md-font-weight);
  font-size: var(--typography-s-heading-md-font-size);
  line-height: var(--typography-s-heading-md-line-height);
  letter-spacing: var(--typography-s-heading-md-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--heading-md {
    font-weight: var(--typography-l-heading-md-font-weight);
    font-size: var(--typography-l-heading-md-font-size);
    line-height: var(--typography-l-heading-md-line-height);
    letter-spacing: var(--typography-l-heading-md-letter-spacing);
  }
}

.mm-text--heading-lg {
  font-weight: var(--typography-s-heading-lg-font-weight);
  font-size: var(--typography-s-heading-lg-font-size);
  line-height: var(--typography-s-heading-lg-line-height);
  letter-spacing: var(--typography-s-heading-lg-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--heading-lg {
    font-weight: var(--typography-l-heading-lg-font-weight);
    font-size: var(--typography-l-heading-lg-font-size);
    line-height: var(--typography-l-heading-lg-line-height);
    letter-spacing: var(--typography-l-heading-lg-letter-spacing);
  }
}

.mm-text--body {
  font-weight: var(--typography-s-body-md-font-weight);
  font-size: var(--typography-s-body-md-font-size);
  line-height: var(--typography-s-body-md-line-height);
  letter-spacing: var(--typography-s-body-md-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body {
    font-weight: var(--typography-l-body-md-font-weight);
    font-size: var(--typography-l-body-md-font-size);
    line-height: var(--typography-l-body-md-line-height);
    letter-spacing: var(--typography-l-body-md-letter-spacing);
  }
}

.mm-text--body-xs {
  font-weight: var(--typography-s-body-xs-font-weight);
  font-size: var(--typography-s-body-xs-font-size);
  line-height: var(--typography-s-body-xs-line-height);
  letter-spacing: var(--typography-s-body-xs-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-xs {
    font-weight: var(--typography-l-body-xs-font-weight);
    font-size: var(--typography-l-body-xs-font-size);
    line-height: var(--typography-l-body-xs-line-height);
    letter-spacing: var(--typography-l-body-xs-letter-spacing);
  }
}

.mm-text--body-xs-medium {
  font-weight: var(--typography-s-body-xs-medium-font-weight);
  font-size: var(--typography-s-body-xs-medium-font-size);
  line-height: var(--typography-s-body-xs-medium-line-height);
  letter-spacing: var(--typography-s-body-xs-medium-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-xs-medium {
    font-weight: var(--typography-l-body-xs-medium-font-weight);
    font-size: var(--typography-l-body-xs-medium-font-size);
    line-height: var(--typography-l-body-xs-medium-line-height);
    letter-spacing: var(--typography-l-body-xs-medium-letter-spacing);
  }
}

.mm-text--body-sm {
  font-weight: var(--typography-s-body-sm-font-weight);
  font-size: var(--typography-s-body-sm-font-size);
  line-height: var(--typography-s-body-sm-line-height);
  letter-spacing: var(--typography-s-body-sm-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-sm {
    font-weight: var(--typography-l-body-sm-font-weight);
    font-size: var(--typography-l-body-sm-font-size);
    line-height: var(--typography-l-body-sm-line-height);
    letter-spacing: var(--typography-l-body-sm-letter-spacing);
  }
}

.mm-text--body-sm-medium {
  font-weight: var(--typography-s-body-sm-medium-font-weight);
  font-size: var(--typography-s-body-sm-medium-font-size);
  line-height: var(--typography-s-body-sm-medium-line-height);
  letter-spacing: var(--typography-s-body-sm-medium-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-sm-medium {
    font-weight: var(--typography-l-body-sm-medium-font-weight);
    font-size: var(--typography-l-body-sm-medium-font-size);
    line-height: var(--typography-l-body-sm-medium-line-height);
    letter-spacing: var(--typography-l-body-sm-medium-letter-spacing);
  }
}

.mm-text--body-sm-bold {
  font-weight: var(--typography-s-body-sm-bold-font-weight);
  font-size: var(--typography-s-body-sm-bold-font-size);
  line-height: var(--typography-s-body-sm-bold-line-height);
  letter-spacing: var(--typography-s-body-sm-bold-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-sm-bold {
    font-weight: var(--typography-l-body-sm-bold-font-weight);
    font-size: var(--typography-l-body-sm-bold-font-size);
    line-height: var(--typography-l-body-sm-bold-line-height);
    letter-spacing: var(--typography-l-body-sm-bold-letter-spacing);
  }
}

.mm-text--body-md {
  font-weight: var(--typography-s-body-md-font-weight);
  font-size: var(--typography-s-body-md-font-size);
  line-height: var(--typography-s-body-md-line-height);
  letter-spacing: var(--typography-s-body-md-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-md {
    font-weight: var(--typography-l-body-md-font-weight);
    font-size: var(--typography-l-body-md-font-size);
    line-height: var(--typography-l-body-md-line-height);
    letter-spacing: var(--typography-l-body-md-letter-spacing);
  }
}

.mm-text--body-md-medium {
  font-weight: var(--typography-s-body-md-medium-font-weight);
  font-size: var(--typography-s-body-md-medium-font-size);
  line-height: var(--typography-s-body-md-medium-line-height);
  letter-spacing: var(--typography-s-body-md-medium-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-md-medium {
    font-weight: var(--typography-l-body-md-medium-font-weight);
    font-size: var(--typography-l-body-md-medium-font-size);
    line-height: var(--typography-l-body-md-medium-line-height);
    letter-spacing: var(--typography-l-body-md-medium-letter-spacing);
  }
}

.mm-text--body-md-bold {
  font-weight: var(--typography-s-body-md-bold-font-weight);
  font-size: var(--typography-s-body-md-bold-font-size);
  line-height: var(--typography-s-body-md-bold-line-height);
  letter-spacing: var(--typography-s-body-md-bold-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-md-bold {
    font-weight: var(--typography-l-body-md-bold-font-weight);
    font-size: var(--typography-l-body-md-bold-font-size);
    line-height: var(--typography-l-body-md-bold-line-height);
    letter-spacing: var(--typography-l-body-md-bold-letter-spacing);
  }
}

.mm-text--body-lg-medium {
  font-weight: var(--typography-s-body-lg-medium-font-weight);
  font-size: var(--typography-s-body-lg-medium-font-size);
  line-height: var(--typography-s-body-lg-medium-line-height);
  letter-spacing: var(--typography-s-body-lg-medium-letter-spacing);
}

@media screen and (min-width: 768px) {
  .mm-text--body-lg-medium {
    font-weight: var(--typography-l-body-lg-medium-font-weight);
    font-size: var(--typography-l-body-lg-medium-font-size);
    line-height: var(--typography-l-body-lg-medium-line-height);
    letter-spacing: var(--typography-l-body-lg-medium-letter-spacing);
  }
}

.mm-text--inherit {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.mm-text--font-weight-bold {
  font-weight: bold;
}

.mm-text--font-weight-medium {
  font-weight: var(--font-weight-medium);
}

.mm-text--font-weight-normal {
  font-weight: normal;
}

.mm-text--font-weight-100 {
  font-weight: 100;
}

.mm-text--font-weight-200 {
  font-weight: 200;
}

.mm-text--font-weight-300 {
  font-weight: 300;
}

.mm-text--font-weight-400 {
  font-weight: 400;
}

.mm-text--font-weight-500 {
  font-weight: 500;
}

.mm-text--font-weight-600 {
  font-weight: 600;
}

.mm-text--font-weight-700 {
  font-weight: 700;
}

.mm-text--font-weight-800 {
  font-weight: 800;
}

.mm-text--font-weight-900 {
  font-weight: 900;
}

.mm-text--font-style-normal {
  font-style: normal;
}

.mm-text--font-style-italic {
  font-style: italic;
}

.mm-text--font-style-oblique {
  font-style: oblique;
}

[dir="ltr"] .mm-text--text-align-left {
  text-align: left;
}

[dir="rtl"] .mm-text--text-align-left {
  text-align: right;
}

[dir="ltr"] .mm-text--text-align-right {
  text-align: right;
}

[dir="rtl"] .mm-text--text-align-right {
  text-align: left;
}

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

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

.mm-text--text-align-end {
  text-align: end;
}

.mm-text--overflow-wrap-normal {
  overflow-wrap: normal;
}

.mm-text--overflow-wrap-break-word {
  overflow-wrap: break-word;
}

.mm-text--overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}

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

.mm-text--text-transform-uppercase {
  text-transform: uppercase;
}

.mm-text--text-transform-lowercase {
  text-transform: lowercase;
}

.mm-text--text-transform-capitalize {
  text-transform: capitalize;
}

.mm-text--font-family-default {
  font-family: var(--font-family-default);
}

.mm-text--font-family-accent {
  font-family: var(--font-family-accent);
}

.mm-text--font-family-hero {
  font-family: var(--font-family-hero);
}

.mm-icon {
  --icon-size: var(--size, 16px);
  font-size: var(--icon-size);
  width: 1em;
  height: 1em;
  max-width: 1em;
  flex: 0 0 1em;
  background-color: currentColor;
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.mm-icon--size-xs {
  --size: 12px;
}

.mm-icon--size-sm {
  --size: 16px;
}

.mm-icon--size-md {
  --size: 20px;
}

.mm-icon--size-lg {
  --size: 24px;
}

.mm-icon--size-xl {
  --size: 32px;
}

.mm-icon--size-inherit {
  --size: 1em;
  position: relative;
  top: 0.125em;
}

.mm-label--html-for {
  cursor: pointer;
}

.mm-tag {
  height: auto;
  width: max-content;
  padding-top: 1px;
  padding-bottom: 1px;
}

.mm-avatar-base {
  --avatar-size: var(--size, 16px);
  height: var(--avatar-size);
  width: var(--avatar-size);
  max-width: var(--avatar-size);
  flex: 0 0 var(--avatar-size);
  overflow: hidden;
}

.mm-avatar-base--size-xs {
  --size: 16px;
}

.mm-avatar-base--size-sm {
  --size: 24px;
}

.mm-avatar-base--size-md {
  --size: 32px;
}

.mm-avatar-base--size-lg {
  --size: 40px;
}

.mm-avatar-base--size-xl {
  --size: 48px;
}

.mm-avatar-account__jazzicon {
  display: flex;
}

.mm-avatar-favicon__image {
  width: 100%;
}

.mm-avatar-network--with-halo {
  position: relative;
}

.mm-avatar-network__network-image {
  width: 100%;
}

.mm-avatar-network__network-image--blurred {
  filter: blur(8px);
  opacity: 0.5;
}

.mm-avatar-network__network-image--size-reduced {
  position: absolute;
  top: 50%;
  width: 62.5%;
  height: 62.5%;
  border-radius: 50%;
}

[dir="ltr"] .mm-avatar-network__network-image--size-reduced {
  left: 50%;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .mm-avatar-network__network-image--size-reduced {
  right: 50%;
  transform: translate(50%, -50%);
}

.mm-avatar-token--with-halo {
  position: relative;
}

.mm-avatar-token__token-image {
  width: 100%;
}

.mm-avatar-token__token-image--blurred {
  filter: blur(8px);
  opacity: 0.5;
}

.mm-avatar-token__token-image--size-reduced {
  position: absolute;
  top: 50%;
  width: 62.5%;
  height: 62.5%;
  border-radius: 50%;
}

[dir="ltr"] .mm-avatar-token__token-image--size-reduced {
  left: 50%;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .mm-avatar-token__token-image--size-reduced {
  right: 50%;
  transform: translate(50%, -50%);
}

/**
* Mixin that renders the CSS values for badge positions and value
*/
.mm-badge-wrapper {
  --badge-wrapper-position-circular: 7%;
  --badge-wrapper-position-rectangular: 11%;
  position: relative;
  align-self: start;
}

.mm-badge-wrapper__badge-container {
  position: absolute;
}

.mm-badge-wrapper__badge-container--circular-top-right {
  top: var(--badge-wrapper-position-circular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--circular-top-right {
  right: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--circular-top-right {
  left: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 0% 0%;
}

.mm-badge-wrapper__badge-container--circular-bottom-right {
  bottom: var(--badge-wrapper-position-circular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--circular-bottom-right {
  right: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(50%, 50%);
  transform-origin: 100% 100%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--circular-bottom-right {
  left: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(-50%, 50%);
  transform-origin: 0% 100%;
}

.mm-badge-wrapper__badge-container--circular-top-left {
  top: var(--badge-wrapper-position-circular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--circular-top-left {
  left: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 0% 0%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--circular-top-left {
  right: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
}

.mm-badge-wrapper__badge-container--circular-bottom-left {
  bottom: var(--badge-wrapper-position-circular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--circular-bottom-left {
  left: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(-50%, 50%);
  transform-origin: 0% 100%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--circular-bottom-left {
  right: var(--badge-wrapper-position-circular);
  transform: scale(1) translate(50%, 50%);
  transform-origin: 100% 100%;
}

.mm-badge-wrapper__badge-container--rectangular-top-right {
  top: var(--badge-wrapper-position-rectangular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--rectangular-top-right {
  right: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--rectangular-top-right {
  left: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 0% 0%;
}

.mm-badge-wrapper__badge-container--rectangular-bottom-right {
  bottom: var(--badge-wrapper-position-rectangular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--rectangular-bottom-right {
  right: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(50%, 50%);
  transform-origin: 100% 100%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--rectangular-bottom-right {
  left: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(-50%, 50%);
  transform-origin: 0% 100%;
}

.mm-badge-wrapper__badge-container--rectangular-top-left {
  top: var(--badge-wrapper-position-rectangular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--rectangular-top-left {
  left: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 0% 0%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--rectangular-top-left {
  right: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
}

.mm-badge-wrapper__badge-container--rectangular-bottom-left {
  bottom: var(--badge-wrapper-position-rectangular);
}

[dir="ltr"] .mm-badge-wrapper__badge-container--rectangular-bottom-left {
  left: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(-50%, 50%);
  transform-origin: 0% 100%;
}

[dir="rtl"] .mm-badge-wrapper__badge-container--rectangular-bottom-left {
  right: var(--badge-wrapper-position-rectangular);
  transform: scale(1) translate(50%, 50%);
  transform-origin: 100% 100%;
}

.mm-button-base {
  position: relative;
  height: 40px;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
}

.mm-button-base--block {
  width: 100%;
}

.mm-button-base--ellipsis {
  max-width: 100%;
}

.mm-button-base--size-sm {
  height: 32px;
}

.mm-button-base--size-md {
  height: 40px;
}

.mm-button-base--size-lg {
  height: 48px;
}

.mm-button-base--loading {
  cursor: not-allowed;
}

.mm-button-base--disabled, .mm-button-base:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.mm-button-base__icon-loading {
  position: absolute;
  top: 50%;
  animation: spinner 1.2s linear infinite;
}

[dir="ltr"] .mm-button-base__icon-loading {
  left: 50%;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .mm-button-base__icon-loading {
  right: 50%;
  transform: translate(50%, -50%);
}

a.mm-button-base:hover {
  color: var(--color-text-default);
}

@keyframes spinner {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.mm-button-icon {
  --button-icon-size: var(--size, 24px);
  height: var(--button-icon-size);
  width: var(--button-icon-size);
  min-width: var(--button-icon-size);
  padding: 0;
  cursor: pointer;
}

.mm-button-icon:hover {
  background-color: var(--color-background-hover);
}

.mm-button-icon:active {
  background-color: var(--color-background-pressed);
}

.mm-button-icon--disabled, .mm-button-icon:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.mm-button-icon--disabled:hover, .mm-button-icon--disabled:active, .mm-button-icon:disabled:hover, .mm-button-icon:disabled:active {
  background-color: transparent;
}

.mm-button-icon--size-sm {
  --button-icon-size: 24px;
}

.mm-button-icon--size-md {
  --button-icon-size: 28px;
}

.mm-button-icon--size-lg {
  --button-icon-size: 32px;
}

.mm-button-link:hover:not(.mm-button-link--disabled) {
  color: var(--color-primary-default);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.mm-button-link:active:not(.mm-button-link--disabled) {
  color: var(--color-primary-alternative);
}

.mm-button-link--disabled:active {
  color: var(--color-primary-default);
}

.mm-button-link--type-danger:not(.mm-button-link--disabled):hover {
  color: var(--color-error-default);
}

.mm-button-link--type-danger:not(.mm-button-link--disabled):active {
  color: var(--color-error-alternative);
}

.mm-button-link--type-danger.mm-button-link--disabled:active {
  color: var(--color-error-default);
}

.mm-button-link--size-auto {
  height: auto;
}

.mm-button-link--size-inherit {
  height: auto;
  background-color: transparent;
  vertical-align: top;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.mm-button-link--size-inherit__icon {
  top: 0;
}

.mm-button-link--size-inherit:hover:not(.mm-button-link--disabled) {
  text-decoration-thickness: auto;
  text-underline-offset: 2px;
}

.mm-button-link--loading:hover:not(.mm-button-link--disabled) {
  text-decoration: none;
}

.mm-button-primary:hover:not(.mm-button-primary--disabled) {
  color: var(--color-primary-inverse);
  box-shadow: var(--shadow-size-sm) var(--color-shadow-primary);
}

.mm-button-primary:active {
  color: var(--color-primary-inverse);
  background-color: var(--color-primary-alternative);
}

.mm-button-primary--type-danger:not(.mm-button-primary--disabled):hover {
  color: var(--color-error-inverse);
  box-shadow: var(--shadow-size-sm) var(--color-shadow-error);
}

.mm-button-primary--type-danger:not(.mm-button-primary--disabled):active {
  color: var(--color-error-inverse);
  background-color: var(--color-error-alternative);
}

.mm-button-primary--disabled:hover {
  box-shadow: none;
}

.mm-button-primary--disabled:active {
  background-color: var(--color-primary-default);
}

.mm-button-primary--type-danger.mm-button-primary--disabled:active {
  background-color: var(--color-error-default);
}

.mm-button-secondary:hover:not(.mm-button-secondary--disabled) {
  color: var(--color-primary-inverse);
  background-color: var(--color-primary-default);
  box-shadow: var(--shadow-size-sm) var(--color-shadow-primary);
}

.mm-button-secondary:active {
  color: var(--color-primary-inverse);
  background-color: var(--color-primary-alternative);
  border-color: var(--color-primary-alternative);
}

.mm-button-secondary--type-danger:not(.mm-button-secondary--disabled) {
  color: var(--color-error-default);
  border: 1px solid var(--color-error-default);
  background-color: transparent;
}

.mm-button-secondary--type-danger:not(.mm-button-secondary--disabled):hover {
  color: var(--color-error-inverse);
  background-color: var(--color-error-default);
  box-shadow: var(--shadow-size-sm) var(--color-shadow-error);
}

.mm-button-secondary--type-danger:not(.mm-button-secondary--disabled):active {
  color: var(--color-error-inverse);
  background-color: var(--color-error-alternative);
  border-color: var(--color-error-alternative);
}

.mm-button-secondary--disabled:hover {
  color: var(--color-primary-default);
  box-shadow: none;
  background-color: transparent;
}

.mm-button-secondary--disabled:active {
  background-color: transparent;
}

.mm-button-secondary--type-danger.mm-button-secondary--disabled:hover {
  color: var(--color-error-default);
}

.mm-checkbox {
  cursor: pointer;
}

.mm-checkbox__input-wrapper {
  position: relative;
}

.mm-checkbox__input {
  appearance: none;
  width: 20px;
  height: 20px;
}

.mm-checkbox__input:hover:not(:disabled) {
  background-color: var(--color-background-default-hover);
  cursor: pointer;
}

.mm-checkbox__input:focus {
  border-color: var(--color-primary-default);
}

.mm-checkbox__input:disabled {
  color: var(--color-icon-muted);
  cursor: not-allowed;
}

.mm-checkbox__input--checked:hover:not(:disabled), .mm-checkbox__input--indeterminate:hover:not(:disabled) {
  border-color: var(--color-primary-alternative);
  background-color: var(--color-primary-alternative);
}

.mm-checkbox__input--checked.mm-checkbox__input--readonly, .mm-checkbox__input--checked.mm-checkbox__input--readonly:hover, .mm-checkbox__input--indeterminate.mm-checkbox__input--readonly, .mm-checkbox__input--indeterminate.mm-checkbox__input--readonly:hover {
  border-color: var(--color-icon-alternative);
  background-color: var(--color-icon-alternative);
  cursor: not-allowed;
}

.mm-checkbox--disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.mm-checkbox__icon {
  position: absolute;
  top: 0;
  pointer-events: none;
}

[dir="ltr"] .mm-checkbox__icon {
  left: 0;
}

[dir="rtl"] .mm-checkbox__icon {
  right: 0;
}

.mm-input {
  --input-opacity-disabled: 0.5;
  box-sizing: content-box;
}

.mm-input--disable-state-styles:focus, .mm-input--disable-state-styles:focus-visible {
  outline: none;
}

.mm-input--disabled {
  opacity: var(--input-opacity-disabled);
}

.mm-skeleton {
  animation: skeleton-pulse 1400ms cubic-bezier(0, 0, 1, 1) infinite;
  background-clip: padding-box;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.1;
  }
}

.mm-skeleton--hide-children * {
  visibility: hidden;
}

.mm-picker-network {
  --picker-network-height: 32px;
  height: var(--picker-network-height);
}

.mm-picker-network:not([disabled]):active {
  background-color: var(--color-background-default-hover);
}

.mm-tag-url {
  height: 48px;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.mm-text-field {
  --text-field-height: var(--size, 40px);
  height: var(--text-field-height);
  border-color: var(--color-border-default);
}

.mm-text-field--size-sm {
  --size: 32px;
}

.mm-text-field--size-md {
  --size: 40px;
}

.mm-text-field--size-lg {
  --size: 48px;
}

.mm-text-field--focused {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

.mm-text-field--error {
  border-color: var(--color-error-default);
}

.mm-text-field--disabled {
  opacity: 0.5;
  border-color: var(--color-border-default);
}

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

.mm-text-field__input {
  width: 100%;
  flex-grow: 1;
}

.mm-textarea {
  max-width: 100%;
}

.mm-textarea--is-disabled, .mm-textarea:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.mm-textarea--resize-none {
  resize: none;
}

.mm-textarea--resize-both {
  resize: both;
}

.mm-textarea--resize-horizontal {
  resize: horizontal;
}

.mm-textarea--resize-vertical {
  resize: vertical;
}

.mm-textarea--resize-initial {
  resize: initial;
}

.mm-textarea--resize-inherit {
  resize: inherit;
}

.mm-text-field-search ::-webkit-search-decoration,
.mm-text-field-search ::-webkit-search-cancel-button,
.mm-text-field-search ::-webkit-search-results-button,
.mm-text-field-search ::-webkit-search-results-decoration {
  display: none;
}

.mm-form-text-field {
  --text-opacity-disabled: 0.5;
}

.mm-form-text-field--disabled .mm-form-text-field__label,
.mm-form-text-field--disabled .mm-form-text-field__help-text {
  opacity: var(--text-opacity-disabled);
  cursor: default;
}

[dir="ltr"] .mm-banner-alert {
  border-left: 4px solid var(--color-primary-default);
}

[dir="rtl"] .mm-banner-alert {
  border-right: 4px solid var(--color-primary-default);
}

[dir="ltr"] .mm-banner-alert--severity-danger {
  border-left-color: var(--color-error-default);
}

[dir="rtl"] .mm-banner-alert--severity-danger {
  border-right-color: var(--color-error-default);
}

[dir="ltr"] .mm-banner-alert--severity-warning {
  border-left-color: var(--color-warning-default);
}

[dir="rtl"] .mm-banner-alert--severity-warning {
  border-right-color: var(--color-warning-default);
}

[dir="ltr"] .mm-banner-alert--severity-success {
  border-left-color: var(--color-success-default);
}

[dir="rtl"] .mm-banner-alert--severity-success {
  border-right-color: var(--color-success-default);
}

.mm-banner-tip--logo {
  width: 60px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.mm-modal-content {
  position: fixed;
  top: 0;
  z-index: 1050;
  scrollbar-width: thin;
  scrollbar-color: var(--color-icon-muted) transparent;
}

[dir="ltr"] .mm-modal-content {
  left: 0;
}

[dir="rtl"] .mm-modal-content {
  right: 0;
}

@media (max-height: 475px) {
  .mm-modal-content {
    padding: 8px;
  }
}

.mm-modal-content ::-webkit-scrollbar {
  width: 8px;
}

.mm-modal-content ::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--color-icon-muted);
}

.mm-modal-content__dialog {
  --modal-content-size: var(--size, 360px);
  max-height: 100%;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

@media (prefers-reduced-motion: no-preference) {
  .mm-modal-content__dialog {
    animation: modal-dialog-slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-modal-content__dialog {
    opacity: 1;
    transform: translateY(0);
  }
}

.mm-modal-content__dialog--size-sm {
  --size: 360px;
  max-width: var(--modal-content-size);
}

.mm-modal-content__dialog--size-md {
  --size: 480px;
  max-width: var(--modal-content-size);
}

.mm-modal-content__dialog--size-lg {
  --size: 720px;
  max-width: var(--modal-content-size);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes modal-dialog-slide-up {
    from {
      transform: translateY(24px);
      opacity: 0;
      overflow: hidden;
    }

    to {
      transform: translateY(0);
      opacity: 1;
      overflow: hidden;
    }
  }
}
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.mm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .mm-modal-overlay {
    animation: modal-overlay-fade-in 250ms linear forwards;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes modal-overlay-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

.mm-modal-body {
  max-height: 100%;
  overflow-y: auto;
  position: relative;
}

.mm-modal-footer__button {
  flex: 1 0 auto;
}

.mm-popover {
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
  /* Hide the popper when the reference is hidden */
}

.mm-popover--reference-hidden[data-popper-reference-hidden=true] {
  visibility: hidden;
  pointer-events: none;
}

.mm-popover--reference-hidden[data-popper-reference-hidden=true] > .mm-popover__arrow::before {
  visibility: hidden;
}

.mm-popover__arrow,
.mm-popover__arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.mm-popover__arrow {
  width: 40px;
  height: 40px;
  visibility: hidden;
}

.mm-popover__arrow::before {
  display: block;
  background-color: inherit;
  border: 1px solid;
  border-top-color: inherit;
  border-bottom-color: transparent;
  visibility: visible;
  content: "";
}

[dir="ltr"] .mm-popover__arrow::before {
  border-left-color: inherit;
  border-right-color: transparent;
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

[dir="rtl"] .mm-popover__arrow::before {
  border-right-color: inherit;
  border-left-color: transparent;
  transform: rotate(-45deg);
  border-radius: 0 2px 0 0;
}

.mm-popover[data-popper-placement^=top] > .mm-popover__arrow {
  bottom: -20px;
}

[dir="ltr"] .mm-popover[data-popper-placement^=top] > .mm-popover__arrow::before {
  transform: rotate(-135deg);
}

[dir="rtl"] .mm-popover[data-popper-placement^=top] > .mm-popover__arrow::before {
  transform: rotate(135deg);
}

.mm-popover[data-popper-placement^=bottom] > .mm-popover__arrow {
  top: -20px;
}

[dir="ltr"] .mm-popover[data-popper-placement^=left] > .mm-popover__arrow {
  right: -20px;
}

[dir="rtl"] .mm-popover[data-popper-placement^=left] > .mm-popover__arrow {
  left: -20px;
}

[dir="ltr"] .mm-popover[data-popper-placement^=left] > .mm-popover__arrow::before {
  transform: rotate(135deg);
}

[dir="rtl"] .mm-popover[data-popper-placement^=left] > .mm-popover__arrow::before {
  transform: rotate(-135deg);
}

[dir="ltr"] .mm-popover[data-popper-placement^=right] > .mm-popover__arrow {
  left: -20px;
}

[dir="rtl"] .mm-popover[data-popper-placement^=right] > .mm-popover__arrow {
  right: -20px;
}

[dir="ltr"] .mm-popover[data-popper-placement^=right] > .mm-popover__arrow::before {
  transform: rotate(-45deg);
}

[dir="rtl"] .mm-popover[data-popper-placement^=right] > .mm-popover__arrow::before {
  transform: rotate(45deg);
}

.mm-select-button {
  --select-button-height: var(--size, 40px);
  position: relative;
  cursor: pointer;
  text-align: start;
  height: min-content;
  min-height: var(--select-button-height);
  overflow: hidden;
  max-width: 100%;
}

.mm-select-button--size-sm {
  --size: 32px;
}

.mm-select-button--size-md {
  --size: 40px;
}

.mm-select-button--size-lg {
  --size: 48px;
}

.mm-select-button:hover:not(.mm-select-button--disabled) {
  background-color: var(--color-background-hover);
}

.mm-select-button:active:not(.mm-select-button--disabled) {
  background-color: var(--color-background-pressed);
}

.mm-select-button:active:not(.mm-select-button--disabled), .mm-select-button:focus:not(.mm-select-button--disabled) {
  border-color: var(--color-primary-default);
  box-shadow: inset 0 0 0 1px var(--color-primary-default);
}

.mm-select-button--type-danger {
  border-color: var(--color-error-default);
  box-shadow: inset 0 0 0 1px var(--color-error-default);
}

.mm-select-button__content {
  overflow: auto;
}

.mm-select-wrapper:has(.mm-select-button--block) {
  width: 100%;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.mm-select-wrapper__popover {
  overflow: hidden;
  z-index: 30;
}

/** Please import your files in alphabetical order **/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.account-list-item__top-row {
  display: flex;
  margin-top: 10px;
  position: relative;
}

[dir="ltr"] .account-list-item__top-row {
  margin-left: 8px;
}

[dir="rtl"] .account-list-item__top-row {
  margin-right: 8px;
}

.account-list-item__account-name {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

[dir="ltr"] .account-list-item__account-name {
  margin-left: 8px;
}

[dir="rtl"] .account-list-item__account-name {
  margin-right: 8px;
}

.account-list-item__icon {
  position: absolute;
  top: 1px;
}

[dir="ltr"] .account-list-item__icon {
  right: 12px;
}

[dir="rtl"] .account-list-item__icon {
  left: 12px;
}

.account-list-item__account-address {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir="ltr"] .account-list-item__account-address {
  margin-left: 35px;
}

[dir="rtl"] .account-list-item__account-address {
  margin-right: 35px;
}

.app-loading-spinner {
  background-color: var(--color-overlay-alternative);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.app-loading-spinner__inner {
  width: 50px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.invalid-custom-network-alert__content {
  border-radius: 0;
  padding: 0 24px 16px 24px;
}

.invalid-custom-network-alert__content > p {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  padding-bottom: 12px;
}

.invalid-custom-network-alert__content > p:last-of-type {
  padding-bottom: 0;
}

.invalid-custom-network-alert__content-link {
  color: var(--color-primary-default);
  cursor: pointer;
}

.invalid-custom-network-alert__footer {
  flex-direction: column;
}

.invalid-custom-network-alert__footer > :only-child {
  margin: 0;
  width: 100%;
}

.invalid-custom-network-alert__footer-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.invalid-custom-network-alert__footer-row .invalid-custom-network-alert__footer-row-button {
  height: 40px;
  width: 50%;
}

[dir="ltr"] .invalid-custom-network-alert__footer-row .invalid-custom-network-alert__footer-row-button {
  margin-right: 24px;
}

[dir="rtl"] .invalid-custom-network-alert__footer-row .invalid-custom-network-alert__footer-row-button {
  margin-left: 24px;
}

[dir="ltr"] .invalid-custom-network-alert__footer-row .invalid-custom-network-alert__footer-row-button:last-of-type {
  margin-right: 0;
}

[dir="rtl"] .invalid-custom-network-alert__footer-row .invalid-custom-network-alert__footer-row-button:last-of-type {
  margin-left: 0;
}

.invalid-custom-network-alert__error {
  margin-bottom: 16px;
  padding: 16px;
  font-size: 14px;
  border: 1px solid var(--color-error-default);
  background: var(--color-error-muted);
  border-radius: 3px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.unconnected-account-alert__content {
  border-radius: 0 !important;
}

.unconnected-account-alert__footer {
  flex-direction: column;
}

.unconnected-account-alert__footer > :only-child {
  margin: 0;
}

.unconnected-account-alert__footer-row {
  display: flex;
  flex-direction: row;
}

.unconnected-account-alert .unconnected-account-alert__dismiss-button {
  background: var(--color-primary-default);
  color: var(--color-primary-inverse);
  height: 40px;
  width: 100px;
  border: 0;
}

.unconnected-account-alert__error {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--color-error-default);
  background: var(--color-error-muted);
  border-radius: 3px;
}

.unconnected-account-alert__checkbox-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.unconnected-account-alert__checkbox {
  margin-top: -2px;
}

[dir="ltr"] .unconnected-account-alert__checkbox {
  margin-right: 8px;
}

[dir="rtl"] .unconnected-account-alert__checkbox {
  margin-left: 8px;
}

.unconnected-account-alert__checkbox-label {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--color-text-alternative);
  align-items: center;
}

[dir="ltr"] .unconnected-account-alert__checkbox-label-tooltip {
  margin-left: 8px;
}

[dir="rtl"] .unconnected-account-alert__checkbox-label-tooltip {
  margin-right: 8px;
}

.beta-header__message {
  text-align: center;
  flex-grow: 1;
}

.beta-header__button {
  background: transparent;
  padding: 0 6px;
  margin: 0;
}

.beta-header__button i {
  color: var(--color-warning-inverse);
}

.cancel-speedup-popover__wrapper {
  padding: 0 16px 16px;
}

[dir="ltr"] .cancel-speedup-popover__wrapper .info-tooltip {
  margin-left: 4px;
}

[dir="rtl"] .cancel-speedup-popover__wrapper .info-tooltip {
  margin-right: 4px;
}

.cancel-speedup-popover__edit-gas-button {
  align-self: flex-end;
}

.cancel-speedup-popover__gas-details {
  padding-top: 10px;
}

.cancel-speedup-popover__spinner {
  margin-top: -30px;
  height: calc(100% + 30px);
}

.cancel-speedup-popover__description {
  border-bottom: 1px solid var(--color-border-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.alert-modal__alert-details {
  list-style-type: disc;
  word-wrap: break-word;
}

.alert-modal__acknowledge-checkbox {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.inline-alert {
  padding: 2px;
  cursor: pointer;
}

.inline-alert__danger {
  color: var(--color-error-default);
}

.inline-alert__info {
  color: var(--color-info-default);
}

.inline-alert__warning {
  color: var(--color-warning-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.token-list__empty-list {
  height: 237.5px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: calc(576px - 1px)) {
  .token-list__empty-list {
    height: 237.5px;
  }
}

.token-list__tokens-container {
  overflow: auto;
  max-height: 237.5px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .token-list__tokens-container {
    max-height: 237.5px;
  }
}

.token-list__token_component {
  cursor: pointer;
}

.token-list__token_component--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.tokenId-popover {
  max-width: 228px;
  word-wrap: break-word;
  text-align: center;
}

@media screen and (max-width: calc(576px - 1px)) {
  .tokenId-popover {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

.buttonDescriptionContainer {
  position: absolute;
  bottom: 0;
}

[dir="ltr"] .buttonDescriptionContainer {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-background-default) 33%);
}

[dir="rtl"] .buttonDescriptionContainer {
  left: 0;
  background: linear-gradient(-90deg, transparent 0%, var(--color-background-default) 33%);
}

@media screen and (min-width: 768px) {
  .buttonDescriptionContainer {
    bottom: 3px;
  }
}

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fade-in.visible {
  opacity: 1;
}

.nft-details__nft-item {
  margin-bottom: 16px;
  margin-bottom: 0;
  max-width: 144px;
  flex: 0 0 144px;
  height: calc(100% - 8px);
}

@media screen and (max-width: calc(576px - 1px)) {
  .nft-details__nft-item {
    margin-bottom: 0;
    max-width: 144px;
    flex: 0 0 144px;
    height: calc(100% - 8px);
  }
}

.nft-details__full-image-container {
  margin: 10px;
  align-items: center;
}

@media screen and (min-width: 1280px) {
  .nft-details__full-image-container {
    margin: 10px;
    align-items: center;
  }
}

@media screen and (min-width: 1280px) {
  .nft-details__content {
    padding-left: 192px;
    padding-right: 192px;
    width: auto !important;
  }
}

.nft-details__addressButton {
  background-color: transparent;
}

[dir="ltr"] .nft-details__addressButton {
  padding-right: 0;
}

[dir="rtl"] .nft-details__addressButton {
  padding-left: 0;
}

.nft-details__show-more {
  max-height: 2.5rem;
}

.nft-details__show-more__buttonContainer {
  position: "absolute";
  bottom: 0;
}

[dir="ltr"] .nft-details__show-more__buttonContainer {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-background-default) 33%);
}

[dir="rtl"] .nft-details__show-more__buttonContainer {
  left: 0;
  background: linear-gradient(-90deg, transparent 0%, var(--color-background-default) 33%);
}

@media screen and (min-width: 768px) {
  .nft-details__show-more {
    max-height: 3rem;
  }
}

.nft-details__show-more__button {
  vertical-align: baseline;
}

[dir="ltr"] .nft-details__show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-background-default) 33%);
}

[dir="rtl"] .nft-details__show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-background-default) 33%);
}

.nft-details__nft-frame {
  flex: 1 0 33%;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: var(--Spacing-sm, 8px);
  border: 1px solid var(--color-border-muted);
}

.nft-details__nft-attribute-frame {
  display: inline-block;
  width: 49%;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: var(--Spacing-sm, 8px);
  border: 1px solid var(--border-muted, #d6d9dc);
}

@media screen and (max-width: calc(576px - 1px)) {
  .nft-details__nft-attribute-frame {
    width: 48.51%;
  }
}

.nft-default {
  padding-top: 100%;
  position: relative;
  background-image: url("/images/default_nft.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.nft-default__button {
  position: absolute;
  bottom: 16px;
}

[dir="ltr"] .nft-options__button {
  padding: 2px 0 2px 8px;
}

[dir="rtl"] .nft-options__button {
  padding: 2px 8px 2px 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.connected-accounts-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connected-accounts-list__row {
  width: 100%;
  word-break: break-word;
}

.connected-accounts-list__row-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.connected-accounts-options__button {
  font-size: 1.125rem;
  background: inherit;
  color: var(--color-icon-default);
}

.tippy-tooltip.none-theme {
  background: none;
  padding: 0;
}

.connected-accounts-permissions__list {
  padding-block: 8px;
  height: 100%;
  overflow: auto;
}

.connected-accounts-permissions__list-item {
  display: flex;
}

.connected-accounts-permissions__list-container {
  max-height: 0;
  height: auto;
  transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.connected-accounts-permissions__list-container--expanded {
  max-height: 100px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.connected-sites-list__content-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connected-sites-list__content-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.connected-sites-list__content-row .connected-sites-list__content-row-link-button {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 0;
  width: auto;
  padding-inline-start: 24px;
}

.connected-sites-list__subject-info {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.connected-sites-list__subject-icon {
  flex-shrink: 0;
}

.connected-sites-list__subject-name {
  max-width: 215px;
}

[dir="ltr"] .connected-sites-list__subject-name {
  margin-left: 6px;
}

[dir="rtl"] .connected-sites-list__subject-name {
  margin-right: 6px;
}

.create-new-vault__form {
  display: flex;
  flex-direction: column;
}

.create-new-vault__create-password {
  display: flex;
  flex-direction: column;
  width: 360px;
}

.create-new-vault__terms {
  margin-top: 16px;
  margin-bottom: 16px;
}

.create-new-vault__terms-link {
  color: var(--color-primary-default);
}

.create-new-vault__submit-button.create-new-vault__submit-button {
  margin-top: 16px;
  width: 170px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.experimental-area {
  color: var(--color-flask-default);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.experimental-area .logo {
  padding: 16px 8px 0;
  line-height: 0.625em;
  font-family: monospace;
  font-size: 0.625rem;
  margin-bottom: 32px;
}

.experimental-area .experimental-text {
  padding: 16px 8px 0;
  font-family: monospace;
  font-size: 1rem;
  margin: auto;
  line-height: 0.875em;
  margin-bottom: 32px;
}

.experimental-area .text {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 16px;
  max-width: 670px;
}

.experimental-area ul {
  padding: 16px 0;
}

.experimental-area li {
  list-style-type: disc;
  list-style-position: inside;
  margin-bottom: 8px;
}

[dir="ltr"] .experimental-area li {
  padding-left: 8px;
}

[dir="rtl"] .experimental-area li {
  padding-right: 8px;
}

.experimental-area li:nth-last-child(1) {
  margin-bottom: 0;
}

.experimental-area button {
  background-color: var(--color-flask-default) !important;
  border: 0 !important;
  color: var(--color-flask-inverse);
  width: 200px;
}

.snap-content-footer__description {
  max-width: 100%;
}

.snap-install-warning .mm-checkbox__input:focus {
  border-color: var(--color-border-default);
  outline: none;
}

.snap-install-warning .mm-checkbox__input--checked:focus {
  border-color: var(--color-primary-default);
  outline: none;
}

.snap-install-warning .mm-checkbox__input {
  cursor: pointer;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.snap-ui-renderer__container > *:first-child {
  gap: 16px;
  margin: 16px;
}

.snap-ui-renderer__content {
  flex: 1 1 auto;
}

.snap-ui-renderer__spinner {
  width: 30px;
}

.snap-ui-renderer__divider {
  width: 100%;
  height: 1px;
}

.snap-ui-renderer__input > .mm-text-field {
  min-height: 48px;
  border-radius: 8px;
  border-color: var(--color-border-muted);
}

.snap-ui-renderer__input > .mm-text-field .mm-icon {
  top: 0;
}

.snap-ui-renderer__input > .mm-text-field .mm-text--overflow-wrap-anywhere {
  overflow-wrap: normal;
}

.snap-ui-renderer__input > .mm-text-field .snap-ui-renderer__image {
  min-width: 24px;
  max-width: 36px;
  min-height: 24px;
  max-height: 36px;
}

.snap-ui-renderer__address-input > .mm-text-field {
  border-color: var(--color-border-muted);
}

.snap-ui-renderer__panel {
  gap: 8px;
}

.snap-ui-renderer__text i {
  font-style: revert;
}

.snap-ui-renderer__text b {
  font-weight: revert;
}

.snap-ui-renderer__text span {
  font-style: inherit;
  font-weight: inherit;
}

.snap-ui-renderer__image {
  max-width: 100%;
}

.snap-ui-renderer__footer {
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
  height: 80px;
  position: fixed;
  bottom: 0;
  margin-top: auto;
  transition: bottom 0.3s ease-in-out;
}

@media screen and (min-width: 576px) {
  .snap-ui-renderer__footer {
    max-width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .snap-ui-renderer__footer {
    max-width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .snap-ui-renderer__footer {
    max-width: 62vw;
  }
}

@media screen and (min-width: 576px) {
  .snap-ui-renderer__content .snap-ui-renderer__footer {
    max-width: calc(85vw - 2px);
  }
}

@media screen and (min-width: 768px) {
  .snap-ui-renderer__content .snap-ui-renderer__footer {
    max-width: calc(80vw - 2px);
  }
}

@media screen and (min-width: 1280px) {
  .snap-ui-renderer__content .snap-ui-renderer__footer {
    max-width: calc(62vw - 2px);
  }
}

.snap-ui-renderer__panel.box--flex-direction-row .snap-ui-renderer__field {
  flex: 1 1 50%;
}

.snap-ui-renderer__panel.box--flex-direction-row .snap-ui-renderer__field .snap-ui-renderer__asset-selector {
  padding-left: 8px;
  padding-right: 8px;
}

.snap-ui-renderer__panel.box--flex-direction-row .snap-ui-renderer__field .snap-ui-renderer__asset-selector .snap-ui-renderer__asset-selector-option__balance {
  display: none;
}

.snap-ui-renderer [disabled],
.snap-ui-renderer__content [disabled] {
  cursor: not-allowed !important;
}

.snap-ui-renderer .mm-text-field--disabled,
.snap-ui-renderer .toggle-button--disabled,
.snap-ui-renderer .toggle-button--disabled * div,
.snap-ui-renderer__content .mm-text-field--disabled,
.snap-ui-renderer__content .toggle-button--disabled,
.snap-ui-renderer__content .toggle-button--disabled * div {
  cursor: not-allowed;
}

.snap-ui-renderer .mm-form-text-field--disabled label,
.snap-ui-renderer__content .mm-form-text-field--disabled label {
  opacity: 1;
}

.snap-ui-snap-ui-renderer__file-input__drop-zone--disabled,
.snap-ui-renderer__radio-label--disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.snap-ui-markdown__text em {
  font-style: revert;
}

.snap-ui-renderer__button {
  background: none;
  text-align: center;
}

.snap-ui-renderer__button:has(.snap-ui-renderer__icon, .snap-ui-renderer__image) {
  display: flex;
  padding-inline: 0;
}

.snap-ui-renderer__button:not(.snap-ui-renderer__button--disabled):hover {
  cursor: pointer;
  opacity: 0.75;
}

.snap-ui-renderer__button--disabled {
  cursor: default !important;
}

.snap-ui-renderer__input > .mm-text-field {
  height: 100%;
  max-height: 58px;
}

.snap-ui-renderer__input .mm-text-field > .snap-ui-renderer__panel {
  gap: 8px;
}

.snap-ui-renderer__input .mm-text-field > input::-webkit-outer-spin-button, .snap-ui-renderer__input .mm-text-field > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.snap-ui-renderer__input .mm-text-field > input[type=number] {
  -moz-appearance: textfield;
}

.snap-ui-renderer__input .snap-ui-renderer__image {
  vertical-align: middle;
  max-height: 20px;
  max-width: 20px;
}

.snap-ui-renderer__file-input__drop-zone {
  background-color: var(--color-background-alternative);
  cursor: pointer;
}

.snap-ui-renderer__file-input__drop-zone .mm-icon,
.snap-ui-renderer__file-input__drop-zone .mm-text {
  color: var(--color-icon-alternative);
}

.snap-ui-renderer__file-input__drop-zone:hover .mm-icon, .snap-ui-renderer__file-input__drop-zone:hover .mm-text {
  color: var(--color-info-default);
}

.snap-ui-renderer__file-input__drop-zone:hover {
  background-color: var(--color-background-alternative-hover);
}

.snap-ui-renderer__selector {
  width: 100%;
  border: 1px solid var(--color-border-muted);
}

.snap-ui-renderer__selector > span:first-child {
  width: 100%;
}

.snap-ui-renderer__selector > span:first-child > *:first-child {
  width: 100%;
}

.snap-ui-renderer__selector:hover {
  background-color: var(--color-background-alternative-hover);
  border-color: var(--color-border-default);
}

.snap-ui-renderer__selector-item {
  width: 100%;
}

.snap-ui-renderer__selector-item > span:first-child {
  width: 100%;
}

.snap-ui-renderer__selector-item > span:first-child > *:first-child {
  width: 100%;
}

.snap-ui-renderer__selector-item:hover {
  background-color: var(--color-background-alternative-hover);
}

.snap-ui-renderer__link .snap-ui-renderer__address {
  display: inline-flex;
}

.snap-ui-renderer__link .snap-ui-renderer__address + .mm-icon {
  top: 0;
}

.snap-delineator__header {
  border-bottom-width: 1px;
  border-color: var(--color-border-default);
  border-style: solid;
  border-radius: 8px 8px 0 0;
}

.snap-delineator__header__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 16px);
  overflow: hidden;
}

.snap-delineator__header__container {
  width: calc(100% - 16px);
}

.snap-delineator__expansion-icon {
  cursor: pointer;
}

.snap-home-menu__item:hover {
  background: var(--color-background-default-hover);
  border-radius: 4px;
  cursor: pointer;
}

.snap-list-item {
  cursor: pointer;
}

.snap-list-item:hover {
  background: var(--color-background-default-hover);
}

.copyable {
  cursor: pointer;
  transition: background-color background 0.2s;
}

[dir="ltr"] .copyable .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-primary-muted) 33%);
}

[dir="rtl"] .copyable .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-primary-muted) 33%);
}

.copyable:hover {
  background-color: var(--color-primary-muted);
  color: var(--color-primary-default) !important;
}

[dir="ltr"] .copyable:hover .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-primary-muted) 33%);
}

[dir="rtl"] .copyable:hover .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-primary-muted) 33%);
}

.copyable:hover p,
.copyable:hover .copyable__icon {
  color: var(--color-primary-default);
}

.copyable:hover .copyable__tooltip .mm-icon {
  color: var(--color-primary-default);
}

.copyable.clicked {
  background-color: var(--color-primary-muted);
  opacity: 0.75;
}

[dir="ltr"] .copyable.clicked .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-primary-muted) 33%);
}

[dir="rtl"] .copyable.clicked .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-primary-muted) 33%);
}

.copyable.clicked:hover {
  background-color: var(--color-primary-muted);
}

[dir="ltr"] .copyable.clicked:hover .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-primary-muted) 33%);
}

[dir="rtl"] .copyable.clicked:hover .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-primary-muted) 33%);
}

.copyable.sensitive.visible {
  background-color: var(--color-error-muted);
}

[dir="ltr"] .copyable.sensitive.visible .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-error-muted) 33%);
}

[dir="rtl"] .copyable.sensitive.visible .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-error-muted) 33%);
}

.copyable.sensitive.visible:hover {
  background-color: var(--color-error-muted-hover);
}

[dir="ltr"] .copyable.sensitive.visible:hover .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-hover) 33%);
}

[dir="rtl"] .copyable.sensitive.visible:hover .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-error-muted-hover) 33%);
}

.copyable.sensitive.visible:hover p,
.copyable.sensitive.visible:hover .copyable__icon {
  color: var(--color-error-default);
}

.copyable.sensitive.visible:hover .copyable__tooltip .mm-icon {
  color: var(--color-error-default);
}

.copyable.sensitive.visible.clicked {
  opacity: 0.75;
  background-color: var(--color-error-muted-pressed);
}

[dir="ltr"] .copyable.sensitive.visible.clicked .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-pressed) 33%);
}

[dir="rtl"] .copyable.sensitive.visible.clicked .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-error-muted-pressed) 33%);
}

.copyable.sensitive.visible.clicked:hover {
  background-color: var(--color-error-muted-pressed);
}

[dir="ltr"] .copyable.sensitive.visible.clicked:hover .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-pressed) 33%);
}

[dir="rtl"] .copyable.sensitive.visible.clicked:hover .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-error-muted-pressed) 33%);
}

.copyable__icon {
  margin-top: 2px;
}

.copyable__tooltip {
  display: flex;
  align-items: center;
}

.copyable__tooltip > div {
  display: flex !important;
}

.snap-external-pill:hover {
  opacity: 1;
  text-decoration: none !important;
}

.snap-external-pill__wrapper:hover {
  background-color: var(--color-info-muted);
}

.snap-external-pill__wrapper:hover * {
  color: var(--color-info-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.show-more {
  max-height: 6rem;
}

.show-more:first-child {
  text-overflow: ellipsis;
}

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

[dir="ltr"] .show-more__button {
  background: linear-gradient(90deg, transparent 0%, var(--color-background-default) 33%);
}

[dir="rtl"] .show-more__button {
  background: linear-gradient(-90deg, transparent 0%, var(--color-background-default) 33%);
}

.snaps-authorship-header__button {
  cursor: pointer;
}

.snaps-authorship-header__button:hover {
  color: var(--color-icon-alternative);
}

.snap-authorship-pill {
  cursor: pointer;
}

.snap-authorship-pill:hover {
  background-color: var(--color-background-alternative);
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-primary {
  box-shadow: none;
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-primary:hover:not(.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-primary--disabled) {
  opacity: 80%;
  box-shadow: none;
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-primary:active:not(.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-primary--disabled) {
  opacity: 60%;
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-primary:not(.mm-button-primary--type-danger) {
  color: var(--color-text-alternative);
  background-color: var(--color-icon-default);
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary {
  border-color: var(--color-icon-default);
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary span {
  color: var(--color-icon-default);
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary:hover:not(.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary--disabled) {
  border-color: var(--color-icon-default);
  color: var(--color-background-default);
  background-color: var(--color-background-default-hover);
  box-shadow: none;
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary:hover:not(.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary--disabled) span {
  color: var(--color-icon-default);
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary:active:not(.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary--disabled) {
  border-color: var(--color-icon-default);
  opacity: 60%;
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary:active:not(.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary--disabled) span {
  color: var(--color-icon-default);
}

.snap-ui-renderer__footer-button:not(.hide-snap-branding).mm-button-secondary:not(.mm-button-primary--type-danger) {
  color: var(--color-icon-default);
}

.snap-ui-renderer__footer-button:not(.snap-ui-renderer__footer-button--disabled):hover {
  cursor: pointer;
}

.snap-ui-renderer__footer-button.mm-button-secondary:hover:not(.snap-ui-renderer__footer-button.mm-button-secondary--disabled) > span {
  color: var(--color-primary-inverse);
}

.snap-ui-renderer__footer-button--disabled {
  cursor: default !important;
}

@keyframes collapse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

@keyframes expand {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hold-to-reveal-button__absolute-fill, .hold-to-reveal-button__unlock-icon-container, .hold-to-reveal-button__lock-icon-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.hold-to-reveal-button__icon, .hold-to-reveal-button__circle-svg, .hold-to-reveal-button__icon-container {
  height: 28px;
  width: 28px;
}

.hold-to-reveal-button__circle-shared, .hold-to-reveal-button__circle-foreground, .hold-to-reveal-button__circle-background {
  fill: transparent;
  stroke-width: 2px;
}

.hold-to-reveal-button__button-hold {
  transform: scale(1) !important;
  transition: 0.5s transform !important;
}

[dir="ltr"] .hold-to-reveal-button__button-hold {
  padding: 6px 13px 6px 9px !important;
}

[dir="rtl"] .hold-to-reveal-button__button-hold {
  padding: 6px 9px 6px 13px !important;
}

.hold-to-reveal-button__button-hold:active {
  background-color: var(--color-primary-default) !important;
  transform: scale(1.05) !important;
}

.hold-to-reveal-button__button-hold:active .hold-to-reveal-button__circle-foreground {
  stroke-dashoffset: 0 !important;
}

.hold-to-reveal-button__button-hold:active .hold-to-reveal-button__lock-icon-container {
  opacity: 0 !important;
}

.hold-to-reveal-button__icon-container {
  position: relative;
}

.hold-to-reveal-button__main-icon-show {
  animation: 0.4s fadeIn 1.2s forwards;
}

.hold-to-reveal-button__invisible {
  opacity: 0;
}

[dir="ltr"] .hold-to-reveal-button__circle-svg {
  transform: rotate(-90deg);
}

[dir="rtl"] .hold-to-reveal-button__circle-svg {
  transform: rotate(90deg);
}

.hold-to-reveal-button__circle-background {
  stroke: var(--color-primary-alternative);
}

.hold-to-reveal-button__circle-foreground {
  stroke: var(--color-primary-inverse);
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
  transition: 1s stroke-dashoffset;
}

.hold-to-reveal-button__lock-icon-container {
  transition: 0.3s opacity;
  opacity: 1;
}

.hold-to-reveal-button__lock-icon {
  width: 7.88px;
  height: 9px;
}

.hold-to-reveal-button__unlock-icon-hide {
  animation: 0.3s collapse 1s forwards;
}

.hold-to-reveal-button__circle-static-outer-container {
  animation: 0.25s collapse forwards;
}

.hold-to-reveal-button__circle-static-outer {
  fill: var(--color-primary-inverse);
}

.hold-to-reveal-button__circle-static-inner-container {
  animation: 0.125s collapse forwards;
}

.hold-to-reveal-button__circle-static-inner {
  fill: var(--color-primary-default);
}

.hold-to-reveal-button__unlock-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  animation: 0.175s expand 0.2s forwards;
}

.hold-to-reveal-button__unlock-icon {
  width: 14px;
  height: 11px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.home-notification {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: var(--color-background-default);
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
  border: 1px solid var(--color-border-muted);
  border-radius: 8px;
  min-height: 116px;
  padding: 16px;
  width: calc(100% - 16px);
  max-width: 472px;
}

.home-notification__content-container {
  display: flex;
}

.home-notification__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-notification__text {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
}

.home-notification__text-link {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

.home-notification__checkbox-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media screen and (max-width: calc(576px - 1px)) {
  .home-notification__checkbox-wrapper {
    width: 160px;
  }
}

.home-notification__checkbox {
  height: 13px;
  width: 13px;
  font-size: 16px;
  cursor: pointer;
}

.home-notification__checkbox-label {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  margin-top: 1px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

[dir="ltr"] .home-notification__checkbox-label {
  margin-left: 8px;
}

[dir="rtl"] .home-notification__checkbox-label {
  margin-right: 8px;
}

.home-notification__ignore-button.button {
  width: auto;
  padding: 8px 16px;
}

.home-notification__accept-button.button {
  width: auto;
  padding: 8px 16px;
}

.home-notification__buttons {
  display: flex;
  width: 100%;
  padding-top: 8px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.home-notification__tooltip-wrapper {
  display: flex;
}

[dir="ltr"] .home-notification__tooltip-wrapper {
  margin-left: 8px;
}

[dir="rtl"] .home-notification__tooltip-wrapper {
  margin-right: 8px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.info-box {
  border-radius: 4px;
  background-color: var(--color-background-alternative);
  position: relative;
  padding: 16px;
  display: flex;
  flex-flow: column;
  color: var(--color-text-alternative);
}

.info-box__close::after {
  content: "×";
  font-size: 29px;
  font-weight: 200;
  color: var(--color-icon-default);
  position: absolute;
  top: 0;
  cursor: pointer;
}

[dir="ltr"] .info-box__close::after {
  right: 12px;
}

[dir="rtl"] .info-box__close::after {
  left: 12px;
}

.info-box__description {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.modal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.modal-content__title {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 500;
  padding: 16px 0;
  text-align: center;
}

.modal-content__description {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
}

.modal-container {
  width: 100%;
  height: 100%;
  background-color: var(--color-background-default);
  display: flex;
  flex-flow: column;
  border-radius: 8px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .modal-container {
    max-height: 450px;
  }
}

.modal-container__content {
  overflow-y: auto;
  flex: 1;
  padding: 16px 32px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .modal-container__content {
    justify-content: center;
    padding: 28px 20px;
  }
}

.modal-container__header {
  position: relative;
  display: flex;
  padding: 12px;
  justify-content: center;
  border-bottom: 1px solid var(--color-border-muted);
  flex: 0 0 auto;
}

.modal-container__header-close::after {
  content: "×";
  font-size: 40px;
  color: var(--color-icon-default);
  position: absolute;
  top: -5px;
  cursor: pointer;
}

[dir="ltr"] .modal-container__header-close::after {
  right: 10px;
}

[dir="rtl"] .modal-container__header-close::after {
  left: 10px;
}

.modal-container__footer {
  display: flex;
  flex-flow: row;
  justify-content: center;
  border-top: 1px solid var(--color-border-muted);
  padding: 16px;
  flex: 0 0 auto;
}

.modal-container__footer-button {
  min-width: 0;
}

[dir="ltr"] .modal-container__footer-button {
  margin-right: 16px;
}

[dir="rtl"] .modal-container__footer-button {
  margin-left: 16px;
}

[dir="ltr"] .modal-container__footer-button:last-of-type {
  margin-right: 0;
}

[dir="rtl"] .modal-container__footer-button:last-of-type {
  margin-left: 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.cancel-transaction-gas-fee {
  background: var(--color-background-alternative);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
}

.cancel-transaction-gas-fee__eth {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 500;
}

.cancel-transaction-gas-fee__fiat {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.cancel-transaction__title {
  font-weight: 500;
  padding-bottom: 16px;
  text-align: center;
}

.cancel-transaction__description {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
}

.cancel-transaction__cancel-transaction-gas-fee-container {
  margin-bottom: 16px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.confirm-remove-account__description {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
}

.confirm-remove-account__account {
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
}

[dir="ltr"] .confirm-remove-account__account__identicon {
  margin-right: 10px;
}

[dir="rtl"] .confirm-remove-account__account__identicon {
  margin-left: 10px;
}

.confirm-remove-account__account__name, .confirm-remove-account__account__address {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

[dir="ltr"] .confirm-remove-account__account__name, [dir="ltr"] .confirm-remove-account__account__address {
  margin-right: 10px;
}

[dir="rtl"] .confirm-remove-account__account__name, [dir="rtl"] .confirm-remove-account__account__address {
  margin-left: 10px;
}

.confirm-remove-account__account__name {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.confirm-remove-account__account__label {
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: block;
  color: var(--color-text-muted);
}

.confirm-remove-account__account__link {
  margin-top: 14px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .confirm-remove-account__account__name {
    width: 90px;
  }
}

.confirm-remove-account__link {
  color: var(--color-primary-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.edit-approval-permission {
  width: 100%;
}

.edit-approval-permission__header, .edit-approval-permission__account-info {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-bottom: 1px solid var(--color-border-muted);
}

.edit-approval-permission__header {
  padding: 24px;
}

.edit-approval-permission__header__close {
  position: absolute;
  cursor: pointer;
  display: block;
}

[dir="ltr"] .edit-approval-permission__header__close {
  right: 24px;
}

[dir="rtl"] .edit-approval-permission__header__close {
  left: 24px;
}

.edit-approval-permission__title {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
}

.edit-approval-permission__account-info {
  justify-content: space-between;
  padding: 8px 24px;
}

.edit-approval-permission__account-info__account, .edit-approval-permission__account-info__balance {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: normal;
  color: var(--color-text-default);
}

.edit-approval-permission__account-info__account {
  display: flex;
  align-items: center;
}

.edit-approval-permission__account-info__name {
  min-width: 64px;
}

[dir="ltr"] .edit-approval-permission__account-info__name {
  margin-right: 8px;
}

[dir="rtl"] .edit-approval-permission__account-info__name {
  margin-left: 8px;
}

.edit-approval-permission__account-info__balance {
  color: var(--color-text-alternative);
}

[dir="ltr"] .edit-approval-permission__account-info__balance {
  margin-left: 8px;
}

[dir="rtl"] .edit-approval-permission__account-info__balance {
  margin-right: 8px;
}

.edit-approval-permission__edit-section {
  padding: 24px;
}

.edit-approval-permission__edit-section__title {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
  color: var(--color-text-default);
}

.edit-approval-permission__edit-section__description {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  margin-top: 8px;
}

.edit-approval-permission__edit-section__option {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}

.edit-approval-permission__edit-section__radio-button {
  width: 18px;
}

.edit-approval-permission__edit-section__option-text {
  display: flex;
  flex-direction: column;
}

.edit-approval-permission__edit-section__option-label, .edit-approval-permission__edit-section__option-label--selected {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
}

.edit-approval-permission__edit-section__option-label--selected {
  color: var(--color-primary-default);
}

.edit-approval-permission__edit-section__option-description {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  margin-top: 8px;
  margin-bottom: 6px;
}

.edit-approval-permission__edit-section__option-value {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
}

.edit-approval-permission__edit-section__radio-button {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="ltr"] .edit-approval-permission__edit-section__radio-button {
  margin-right: 4px;
}

[dir="rtl"] .edit-approval-permission__edit-section__radio-button {
  margin-left: 4px;
}

.edit-approval-permission__edit-section__radio-button-outline, .edit-approval-permission__edit-section__radio-button-outline--selected {
  width: 18px;
  height: 18px;
  background: var(--color-border-default);
  border-radius: 9px;
  position: absolute;
}

.edit-approval-permission__edit-section__radio-button-outline--selected {
  background: var(--color-primary-default);
}

.edit-approval-permission__edit-section__radio-button-fill {
  width: 14px;
  height: 14px;
  background: var(--color-background-default);
  border-radius: 7px;
  position: absolute;
}

.edit-approval-permission__edit-section__radio-button-dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary-default);
  border-radius: 4px;
  position: absolute;
}

.edit-approval-permission__name-and-balance-container {
  display: flex;
  flex: 0 0 100%;
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
}

[dir="ltr"] .edit-approval-permission__name-and-balance-container {
  margin-left: 8px;
}

[dir="rtl"] .edit-approval-permission__name-and-balance-container {
  margin-right: 8px;
}

.edit-approval-permission-modal-content {
  padding: 0;
}

.edit-approval-permission-modal-container {
  max-height: 550px;
  width: 100%;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.hide-token-confirmation {
  min-height: 250.72px;
  border-radius: 4px;
  background-color: var(--color-background-default);
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
}

.hide-token-confirmation__container {
  padding: 24px 27px 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hide-token-confirmation__identicon {
  margin-bottom: 10px;
}

.hide-token-confirmation__symbol {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  text-align: center;
  margin-bottom: 7.5px;
}

.hide-token-confirmation__title {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  height: 30px;
  width: 271.28px;
  color: var(--color-text-alternative);
  text-align: center;
  margin-bottom: 10.5px;
}

.hide-token-confirmation__copy {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  min-height: 41px;
  width: 318px;
  color: var(--color-text-alternative);
  text-align: center;
}

.hide-token-confirmation__buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 15px;
  width: 100%;
}

.hide-token-confirmation__button {
  margin: 0 5px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.ens-input__wrapper--valid .ens-input__wrapper__input, .ens-input__wrapper, .ens-input, .send__select-recipient-wrapper__group-item, .send__select-recipient-wrapper__group-item--selected, .send__select-recipient-wrapper__list__link, .new-account-modal__footer {
  display: flex;
  flex-flow: row nowrap;
}

.send__select-recipient-wrapper__group-item__content, .send__select-recipient-wrapper__group-item--selected__content, .send__select-recipient-wrapper__group, .send__select-recipient-wrapper__recent-group-wrapper, .send__select-recipient-wrapper, .new-account-modal__content {
  display: flex;
  flex-flow: column nowrap;
}

.send__select-recipient-wrapper__list__back-caret {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ens-input__selected-input__title, .multichain-send-page__account-picker__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.new-account-modal {
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--color-background-default);
  border-radius: 10px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

.new-account-modal__content {
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border-muted);
}

.new-account-modal__content__header {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.new-account-modal__content__header-close {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-icon-default);
  background: none;
}

.new-account-modal__input-label {
  color: var(--color-text-alternative);
  margin-top: 1.25rem;
}

.new-account-modal__input {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  background: var(--color-background-default);
  border: 1px solid var(--color-border-muted);
  color: var(--color-text-default);
  box-sizing: border-box;
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
  margin-top: 0.75rem;
}

.new-account-modal__input::placeholder {
  color: var(--color-text-muted);
}

.new-account-modal__footer {
  padding: 1rem;
}

[dir="ltr"] .new-account-modal__footer button + button {
  margin-left: 1rem;
}

[dir="rtl"] .new-account-modal__footer button + button {
  margin-right: 1rem;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.qr-scanner {
  width: 100%;
  height: 100%;
  background-color: var(--color-background-default);
  display: flex;
  flex-flow: column;
  border-radius: 8px;
}

.qr-scanner__title {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 500;
  padding: 16px 0;
  text-align: center;
}

.qr-scanner__content {
  padding-left: 20px;
  padding-right: 20px;
}

.qr-scanner__content__video-wrapper {
  overflow: hidden;
  width: 100%;
  height: 275px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-scanner__content__video-wrapper video {
  transform: scaleX(-1);
  width: auto;
  height: 275px;
}

.qr-scanner__progress {
  width: 110px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--color-border-muted);
  margin: 6px auto 0;
}

.qr-scanner__progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--progress);
  background-color: var(--color-primary-default);
}

.qr-scanner__status {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  padding: 15px;
}

.qr-scanner__image {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 500;
  padding: 16px 0 0;
  text-align: center;
}

.qr-scanner__error {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  padding: 15px;
}

.qr-scanner__footer {
  padding: 20px;
  flex-direction: row;
  display: flex;
}

[dir="ltr"] .qr-scanner__footer button {
  margin-right: 15px;
}

[dir="rtl"] .qr-scanner__footer button {
  margin-left: 15px;
}

.qr-scanner__footer button:last-of-type {
  background-color: var(--color-primary-default);
  border: none;
  color: var(--color-primary-inverse);
}

[dir="ltr"] .qr-scanner__footer button:last-of-type {
  margin-right: 0;
}

[dir="rtl"] .qr-scanner__footer button:last-of-type {
  margin-left: 0;
}

.qr-scanner__close::after {
  content: "×";
  font-size: 35px;
  color: var(--color-icon-default);
  position: absolute;
  top: 4px;
  cursor: pointer;
  font-weight: 300;
}

[dir="ltr"] .qr-scanner__close::after {
  right: 20px;
}

[dir="rtl"] .qr-scanner__close::after {
  left: 20px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.transaction-confirmed__content {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.customize-nonce-modal {
  display: flex;
  flex-flow: column nowrap;
}

[dir="ltr"] .customize-nonce-modal {
  padding-left: 24px;
  padding-right: 18px;
}

[dir="rtl"] .customize-nonce-modal {
  padding-right: 24px;
  padding-left: 18px;
}

.customize-nonce-modal__main-header {
  display: flex;
  align-items: center;
  padding-top: 24px;
}

.customize-nonce-modal__main-title {
  flex: 1;
}

.customize-nonce-modal__close {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-icon-default);
  background: none;
  flex: 0;
  align-self: flex-start;
}

.customize-nonce-modal .customize-nonce-modal__link {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: inline;
}

[dir="ltr"] .customize-nonce-modal .customize-nonce-modal__link {
  padding-left: 5px;
}

[dir="rtl"] .customize-nonce-modal .customize-nonce-modal__link {
  padding-right: 5px;
}

.customize-nonce-modal .customize-nonce-modal__reset {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.customize-nonce-modal__input input {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  width: 100%;
}

.customize-nonce-modal-content {
  padding: 0;
}

.customize-nonce-modal-container {
  height: 324px;
  width: 100%;
}

.convert-token-to-nft-modal {
  display: flex;
  flex-flow: column nowrap;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.visit-support-data-consent-modal__body__preference-checkbox {
  margin-top: 16px;
  margin-bottom: 16px;
}

.modal {
  z-index: 1050;
  position: fixed;
  width: 500px;
  top: 50%;
}

[dir="ltr"] .modal {
  transform: translate3d(-50%, -50%, 0);
  left: 50%;
}

[dir="rtl"] .modal {
  transform: translate3d(50%, -50%, 0);
  right: 50%;
}

.modal__content {
  margin: 0;
  background-color: var(--color-background-default);
  animation-fill-mode: forwards;
}

.modal__backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: var(--color-overlay-alterantive);
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

.modal > div:focus {
  outline: none !important;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.home-notification-wrapper--show-all,
.home-notification-wrapper--show-first {
  display: flex;
  flex-direction: column;
  width: 472px;
  position: absolute;
  bottom: 0;
  margin: 8px;
}

[dir="ltr"] .home-notification-wrapper--show-all,
[dir="ltr"] .home-notification-wrapper--show-first {
  right: 0;
}

[dir="rtl"] .home-notification-wrapper--show-all,
[dir="rtl"] .home-notification-wrapper--show-first {
  left: 0;
}

@media screen and (max-width: calc(576px - 1px)) {
  .home-notification-wrapper--show-all,
  .home-notification-wrapper--show-first {
    width: 340px;
  }
}

.home-notification-wrapper--show-all .home-notification-wrapper__i-container,
.home-notification-wrapper--show-first .home-notification-wrapper__i-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-notification-wrapper--show-all .home-notification-wrapper__i-container .fa-sm,
.home-notification-wrapper--show-first .home-notification-wrapper__i-container .fa-sm {
  display: initial;
  position: absolute;
  bottom: 14px;
  color: var(--color-icon-muted);
  cursor: pointer;
  visibility: visible;
}

[dir="ltr"] .home-notification-wrapper--show-all .home-notification-wrapper__i-container .fa-sm,
[dir="ltr"] .home-notification-wrapper--show-first .home-notification-wrapper__i-container .fa-sm {
  left: 16px;
}

[dir="rtl"] .home-notification-wrapper--show-all .home-notification-wrapper__i-container .fa-sm,
[dir="rtl"] .home-notification-wrapper--show-first .home-notification-wrapper__i-container .fa-sm {
  right: 16px;
}

.home-notification-wrapper--show-all .home-notification-wrapper__i-container .fa-sm:hover,
.home-notification-wrapper--show-first .home-notification-wrapper__i-container .fa-sm:hover {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.home-notification-wrapper--show-all {
  justify-content: flex-end;
  margin-bottom: 0;
}

.home-notification-wrapper--show-all .home-notification-wrapper__i-container {
  height: 0;
}

.home-notification-wrapper--show-all > div {
  position: relative;
  margin-top: 8px;
}

.home-notification-wrapper--show-all .fa-sm {
  margin-bottom: 8px;
}

.home-notification-wrapper--show-first {
  /* accommodates for the home "Wallet" / "Connections" footer */
}

.home-notification-wrapper--show-first > div {
  position: fixed;
  bottom: 8px;
  visibility: hidden;
}

[dir="ltr"] .home-notification-wrapper--show-first > div {
  right: 8px;
}

[dir="rtl"] .home-notification-wrapper--show-first > div {
  left: 8px;
}

.home-notification-wrapper--show-first.home-notification-wrapper--multichain > div {
  bottom: 88px;
}

.home-notification-wrapper--show-first > div:first-of-type {
  visibility: visible;
}

.home-notification-wrapper--show-first .fa-sm {
  position: relative;
  display: initial;
}

[dir="ltr"] .flipped {
  transform: rotate(180deg);
}

[dir="rtl"] .flipped {
  transform: rotate(-180deg);
}

.network-display:not([disabled]):active {
  background-color: transparent;
}

.permission-page-container-content {
  flex: "1 1 auto";
}

.permission-page-container-footer {
  border-top: none !important;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.permissions-connect-header {
  flex: 0;
  width: 100%;
}

.permissions-connect-header__icon {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.permissions-connect-header__title {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  color: var(--color-text-default);
  font-weight: bold;
}

.permissions-connect-header__subtitle {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  color: var(--color-text-default);
}

.permissions-connect-header__subtitle {
  margin-top: 4px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.permissions-connect-permission-list {
  width: 100%;
}

.permissions-connect-permission-list .permission {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-muted);
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--color-text-default);
}

.permissions-connect-permission-list .permission i {
  display: block;
  margin: 16px;
  min-width: 16px;
  min-height: 16px;
  color: var(--color-icon-alternative);
  font-size: 1rem;
  text-align: center;
}

[dir="ltr"] .permissions-connect-permission-list .permission .mm-avatar-icon {
  margin: 16px 16px 16px 0;
}

[dir="rtl"] .permissions-connect-permission-list .permission .mm-avatar-icon {
  margin: 16px 0 16px 16px;
}

[dir="ltr"] .permissions-connect-permission-list .permission__tooltip-icon {
  margin-left: auto !important;
  padding-left: 16px;
}

[dir="rtl"] .permissions-connect-permission-list .permission__tooltip-icon {
  margin-right: auto !important;
  padding-right: 16px;
}

.permissions-connect-permission-list .permission__tooltip-icon i {
  color: var(--color-icon-muted);
}

.permissions-connect-permission-list .permission__tooltip-icon__warning i {
  color: var(--color-warning-default);
}

.permissions-connect-permission-list .permission-label-item {
  font-weight: bold;
}

.tooltip-label-item {
  font-weight: bold;
}

.permission-cell__title-revoked {
  text-decoration: line-through;
}

.permission-cell__status__accounts-group-box {
  vertical-align: sub;
}

.recovery-phrase-reminder__list {
  list-style: disc;
}

[dir="ltr"] .recovery-phrase-reminder__list {
  padding-left: 20px;
}

[dir="rtl"] .recovery-phrase-reminder__list {
  padding-right: 20px;
}

.recovery-phrase-reminder__list li {
  margin-bottom: 5px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.progressbar {
  counter-reset: step;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

ul.two-steps {
  margin: 0 auto;
}

.progressbar li {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  list-style-type: none;
  position: relative;
  text-align: center;
  color: var(--color-text-alternative);
  z-index: 2;
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.progressbar li::before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid var(--color-background-alternative);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: var(--color-background-default);
}

.progressbar li::after {
  width: calc(100% - 34px);
  height: 2px;
  content: "";
  position: absolute;
  background-color: var(--color-background-alternative);
  top: 15px;
}

[dir="ltr"] .progressbar li::after {
  left: calc(-50% + 17px);
}

[dir="rtl"] .progressbar li::after {
  right: calc(-50% + 17px);
}

[dir=rtl] .progressbar li::after {
  width: calc(100% - 34px);
  height: 2px;
  content: "";
  position: absolute;
  background-color: var(--color-background-alternative);
}

.progressbar li:first-child::after {
  content: none;
}

[dir=rtl] .progressbar li:first-child::after {
  content: none;
}

.progressbar li.active {
  color: var(--color-primary-default);
}

[dir=rtl] .progressbar li.active {
  color: var(--color-primary-default);
}

.progressbar li.active::before {
  border-color: var(--color-primary-default);
  z-index: 1;
}

[dir=rtl] .progressbar li.active::before {
  border-color: var(--color-primary-default);
  z-index: 1;
}

.progressbar li.complete + li::after {
  background-color: var(--color-primary-default);
  z-index: -1;
}

[dir=rtl] .progressbar li.complete + li::after {
  background-color: var(--color-primary-default);
  z-index: -1;
}

.progressbar li.complete::before {
  background-color: var(--color-primary-default);
  color: var(--color-primary-inverse);
}

[dir=rtl] .progressbar li.complete::before {
  background-color: var(--color-primary-default);
  color: var(--color-primary-inverse);
}

.progressbar li.two-steps::after {
  height: 2px;
  content: "";
  position: absolute;
  background-color: var(--color-background-alternative);
  top: 15px;
  z-index: -1;
}

[dir=rtl] .progressbar li.two-steps::after {
  width: 180px;
  height: 2px;
  content: "";
  position: absolute;
  background-color: var(--color-background-alternative);
  z-index: -1;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.selected-account {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.selected-account__tooltip-wrapper {
  width: 100%;
}

.selected-account__clickable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
  padding: 6px 1px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  background-color: unset;
}

.selected-account__clickable:hover, .selected-account__clickable:active {
  background-color: var(--color-background-default-hover);
}

.selected-account__copy {
  display: flex;
  margin-inline-start: 3px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.solana-bridge-transaction-details-modal__content {
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 8px;
}

.solana-bridge-transaction-details-modal__segment {
  height: 4px;
  width: 0;
  transition: width 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  border-radius: var(--rounded-pill);
  background-color: var(--color-primary-default);
}

.solana-bridge-transaction-details-modal__segment--pending {
  width: 50%;
}

.solana-bridge-transaction-details-modal__segment--complete {
  width: 100%;
}

.solana-bridge-transaction-details-modal__segment-container {
  width: 100%;
  height: 4px;
  background-color: var(--color-background-alternative);
  border-radius: var(--rounded-pill);
}

[dir="ltr"] .solana-bridge-transaction-details-modal__network-badge {
  margin-right: 8px;
}

[dir="rtl"] .solana-bridge-transaction-details-modal__network-badge {
  margin-left: 8px;
}

.solana-bridge-transaction-details-modal__timestamp {
  color: var(--color-text-alternative);
}

.solana-bridge-transaction-details-modal__transaction-history {
  margin-top: 16px;
  margin-bottom: 16px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.solana-bridge-transaction-list-item__segment {
  height: 4px;
  width: 0;
  transition: width 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  border-radius: var(--rounded-pill);
  background-color: var(--color-primary-default);
}

.solana-bridge-transaction-list-item__segment--pending {
  width: 50%;
}

.solana-bridge-transaction-list-item__segment--complete {
  width: 100%;
}

.solana-bridge-transaction-list-item__segment-container {
  width: 100%;
  height: 4px;
  background-color: var(--color-background-alternative);
  border-radius: var(--rounded-pill);
}

.solana-bridge-transaction-list-item__dest-amount {
  color: var(--color-text-alternative);
}

.solana-bridge-transaction-list-item .transaction-status-label--confirmed {
  color: var(--color-success-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.import-srp__container {
  display: grid;
  grid-template-areas: "title" "paste-tip" "input" "error" "too-many-words-error";
}

.import-srp__dropdown-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

@media screen and (max-width: calc(768px - 1px)) {
  .import-srp__container {
    grid-template-areas: "title" "dropdown" "paste-tip" "input" "error" "too-many-words-error";
  }
}

.import-srp__srp-label {
  grid-area: title;
  text-align: center;
}

.import-srp__number-of-words-dropdown {
  grid-area: dropdown;
  width: 100%;
}

.import-srp__paste-tip {
  margin: 24px 0 12px 0;
  grid-area: paste-tip;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.import-srp__srp {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-area: input;
}

@media screen and (max-width: calc(768px - 1px)) {
  .import-srp__srp {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.import-srp__srp-word {
  display: flex;
  align-items: center;
  margin: 8px;
}

.import-srp__srp-word-label {
  width: 2em;
}

.import-srp__srp-error {
  margin-top: 4px;
  grid-area: error;
}

.import-srp__srp-too-many-words-error {
  margin-top: 4px;
  grid-area: too-many-words-error;
}

.snap-privacy-warning__content {
  max-height: 325px;
  overflow-y: auto;
}

.snap-privacy-warning__content__terms-link {
  outline: none !important;
}

.snap-privacy-warning__content__terms-link:focus {
  outline: none !important;
}

.snap-privacy-warning__content__terms-link:focus-visible {
  outline: none !important;
}

.snap-privacy-warning__content__scroll-button {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  left: 0;
  bottom: 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.tab-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tab-bar__tab {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  transition: opacity 200ms ease-in-out;
  background-color: unset;
  text-align: start;
  position: relative;
}

@media screen and (max-width: calc(576px - 1px)) {
  .tab-bar__tab {
    font-size: 1.125rem;
    font-family: var(--font-family-default);
    line-height: 140%;
    font-style: normal;
    font-weight: normal;
    opacity: 1;
  }
}

.tab-bar__tab__selected-indicator {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .tab-bar__tab__selected-indicator {
  left: 4px;
}

[dir="rtl"] .tab-bar__tab__selected-indicator {
  right: 4px;
}

.tab-bar__tab__content {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.tab-bar__tab__content__title {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 576px) {
  .tab-bar__tab__content__title {
    font-size: 0.875rem;
    font-family: var(--font-family-default);
    line-height: 140%;
    font-style: normal;
    font-weight: normal;
  }
}

.tab-bar__tab__content__description {
  display: none;
}

@media screen and (max-width: calc(576px - 1px)) {
  .tab-bar__tab__content__description {
    font-size: 0.875rem;
    font-family: var(--font-family-default);
    line-height: 140%;
    font-style: normal;
    font-weight: normal;
    display: block;
    font-weight: 300;
    margin-top: 8px;
    min-height: 14px;
  }
}

.tab-bar__tab__content__icon {
  display: flex;
  justify-content: center;
  margin-inline-end: 16px;
  flex: 0 0 18px;
}

.tab-bar__tab__caret {
  display: none;
}

@media screen and (max-width: calc(576px - 1px)) {
  .tab-bar__tab__caret {
    display: block;
    margin-inline-start: auto;
    margin-inline-end: 8px;
  }

  [dir="ltr"] [dir=rtl] .tab-bar__tab__caret {
    transform: rotate(180deg);
  }

  [dir="rtl"] [dir=rtl] .tab-bar__tab__caret {
    transform: rotate(-180deg);
  }
}

.tab-bar__tab--active {
  opacity: 1 !important;
}

@media screen and (min-width: 576px) {
  .tab-bar__tab--active {
    background-color: var(--color-primary-muted);
  }
}

.tab-bar__grow-tab {
  flex-grow: 1;
}

.asset-list-control-bar {
  padding-top: 4px;
  padding-bottom: 4px;
}

.asset-list-control-bar__network_control {
  justify-content: space-between;
  width: auto;
  min-width: auto;
  border-radius: 8px;
  padding: 0 8px !important;
  gap: 4px;
}

.asset-list-control-bar__buttons {
  display: flex;
  justify-content: flex-end;
}

.asset-list-control-bar__buttons .asset-list-control-bar__button {
  width: 32px;
  min-width: 32px;
  margin: 0;
  border-radius: 8px;
  padding: 0;
}

.asset-list-control-bar__button:hover {
  background-color: var(--color-background-hover);
}

.selectable-list-item-wrapper {
  position: relative;
}

.selectable-list-item {
  cursor: pointer;
  padding: 16px;
}

.selectable-list-item--selected {
  background: var(--color-primary-muted);
}

.selectable-list-item:not(.selectable-list-item--selected):hover, .selectable-list-item:not(.selectable-list-item--selected):focus-within {
  background: var(--color-background-default-hover);
}

.selectable-list-item__selected-indicator {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .selectable-list-item__selected-indicator {
  left: 4px;
}

[dir="rtl"] .selectable-list-item__selected-indicator {
  right: 4px;
}

.selectable-list-item .currency-display-component__text,
.selectable-list-item .currency-display-component__suffix {
  color: var(--color-text-alternative);
}

.token-cell--outdated .list-item__heading {
  color: var(--color-text-alternative);
}

.token-cell-title--ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.nft-items__wrapper {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  /* When used in the send NFT modal */
}

.mm-modal-content .nft-items__wrapper {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

@media screen and (max-width: calc(768px - 1px)) {
  .nft-items__wrapper {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .nft-items__wrapper {
    grid-template-columns: repeat(3, minmax(85px, 1fr));
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.transaction-activity-log__title {
  border-bottom: 1px solid var(--color-border-muted);
  padding-bottom: 4px;
  text-transform: capitalize;
}

.transaction-activity-log__activities-container {
  padding-top: 8px;
}

.transaction-activity-log__activity {
  padding: 4px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.transaction-activity-log__activity::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 7px;
}

[dir="ltr"] .transaction-activity-log__activity::after {
  left: 0;
  border-right: 1px solid var(--color-border-muted);
}

[dir="rtl"] .transaction-activity-log__activity::after {
  right: 0;
  border-left: 1px solid var(--color-border-muted);
}

.transaction-activity-log__activity:first-child::after {
  height: 50%;
  top: 50%;
}

.transaction-activity-log__activity:last-child::after {
  height: 50%;
}

.transaction-activity-log__activity:first-child:last-child::after {
  display: none;
}

.transaction-activity-log__activity-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

[dir="ltr"] .transaction-activity-log__activity-icon {
  margin-right: 6px;
}

[dir="rtl"] .transaction-activity-log__activity-icon {
  margin-left: 6px;
}

.transaction-activity-log__activity-text {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternate);
  cursor: pointer;
}

.transaction-activity-log__activity-text:hover {
  color: var(--color-text-default);
}

.transaction-activity-log__value {
  display: inline;
  font-weight: 500;
}

.transaction-activity-log__entry-container {
  min-width: 0;
}

.transaction-activity-log__action-link {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  cursor: pointer;
  color: var(--color-primary-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.transaction-breakdown-row {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.transaction-breakdown-row--with-bottom-border {
  border-bottom: 1px solid var(---color-border-muted);
}

.transaction-breakdown-row__title {
  min-width: 40%;
}

[dir="ltr"] .transaction-breakdown-row__title {
  padding-right: 8px;
}

[dir="rtl"] .transaction-breakdown-row__title {
  padding-left: 8px;
}

.transaction-breakdown-row__value {
  min-width: 0;
  word-break: break-word;
}

.transaction-breakdown__title {
  padding-bottom: 4px;
  padding-top: 8px;
  font-size: 14px;
  color: var(--color-text-default);
  font-weight: bold;
  text-transform: capitalize;
}

.transaction-breakdown__row-title {
  text-transform: capitalize;
}

.transaction-breakdown__value {
  display: flex;
  justify-content: flex-end;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transaction-breakdown__value--eth-total {
  font-weight: bold;
  color: var(--color-text-default);
}

.transaction-breakdown__value--amount {
  font-weight: bold;
  color: var(--color-text-default);
}

.transaction-icon__grey-circle {
  height: 28px;
  width: 28px;
  border-radius: 14px;
  background: var(--color-background-alternative);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.transaction-list-item-details div.disclosure + div.disclosure {
  margin-top: 0;
}

.transaction-list-item-details .sender-to-recipient--flat .sender-to-recipient__party.sender-to-recipient__party--sender {
  padding: 0;
  justify-content: flex-start;
}

.transaction-list-item-details .sender-to-recipient--flat .sender-to-recipient__party.sender-to-recipient__party--recipient {
  padding: 0;
  justify-content: flex-end;
}

.transaction-list-item-details__sender-to-recipient-header {
  display: flex;
  font-size: 14px;
  color: var(--color-text-default);
  font-weight: bold;
  padding-bottom: 7px;
}

.transaction-list-item-details__sender-to-recipient-header > div:first-child {
  flex: 1;
}

.transaction-list-item-details__tx-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 44px;
  justify-content: space-between;
}

.transaction-list-item-details__tx-status > div:first-child {
  font-size: 14px;
  color: var(--color-text-default);
  font-weight: bold;
}

.transaction-list-item-details__tx-status > div:last-child {
  font-weight: bold;
}

.transaction-list-item-details__tx-hash {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.transaction-list-item-details__tx-hash .btn-link {
  font-size: 12px;
  line-height: 100%;
  padding: 0;
}

.transaction-list-item-details__tx-hash > div:first-child {
  padding-bottom: 16px;
}

.transaction-list-item-details__operations {
  margin: 0 16px 16px 16px;
  display: flex;
  justify-content: flex-end;
}

.transaction-list-item-details__header {
  font-size: 12px;
  margin: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.transaction-list-item-details__body {
  padding: 8px 16px;
}

.transaction-list-item-details__header-buttons {
  display: flex;
  flex-direction: row;
}

.transaction-list-item-details .transaction-list-item-details__header-button-rounded-button {
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 8px;
  min-width: 75px;
}

[dir="ltr"] .transaction-list-item-details .transaction-list-item-details__header-button-rounded-button {
  margin-right: 8px;
}

[dir="rtl"] .transaction-list-item-details .transaction-list-item-details__header-button-rounded-button {
  margin-left: 8px;
}

.transaction-list-item-details .transaction-list-item-details__header-button-tooltip-container {
  display: flex !important;
  height: 100%;
}

[dir="ltr"] .transaction-list-item-details .transaction-list-item-details__header-button:not(:last-child) {
  margin-right: 8px;
}

[dir="rtl"] .transaction-list-item-details .transaction-list-item-details__header-button:not(:last-child) {
  margin-left: 8px;
}

.transaction-list-item-details__sender-to-recipient-container {
  margin-bottom: 8px;
}

.transaction-list-item-details__sender-to-recipient-container .sender-to-recipient .sender-to-recipient__party {
  border: none;
}

[dir="ltr"] .transaction-list-item-details__sender-to-recipient-container .sender-to-recipient .sender-to-recipient__party--sender {
  padding-left: 0;
}

[dir="rtl"] .transaction-list-item-details__sender-to-recipient-container .sender-to-recipient .sender-to-recipient__party--sender {
  padding-right: 0;
}

[dir="ltr"] .transaction-list-item-details__sender-to-recipient-container .sender-to-recipient .sender-to-recipient__party--recipient {
  padding-right: 0;
}

[dir="rtl"] .transaction-list-item-details__sender-to-recipient-container .sender-to-recipient .sender-to-recipient__party--recipient {
  padding-left: 0;
}

.transaction-list-item-details__cards-container {
  display: flex;
  flex-direction: column;
}

.transaction-list-item-details__transaction-breakdown {
  flex: 1;
  min-width: 0;
}

[dir="ltr"] .transaction-list-item-details__transaction-breakdown {
  margin-right: 8px;
}

[dir="rtl"] .transaction-list-item-details__transaction-breakdown {
  margin-left: 8px;
}

[dir] .transaction-list-item-details__transaction-breakdown {
  margin: 0 0 8px 0;
}

.transaction-list-item-details__transaction-activity-log {
  flex: 2;
  min-width: 0;
}

.transaction-list-item-details__transaction-activity-log .transaction-activity-log__activities-container {
  padding-top: 0;
}

.transaction-list-item-details__transaction-activity-log .transaction-activity-log__title {
  display: none;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.transaction-list-item {
  border-top: none;
}

.transaction-list-item__primary-currency {
  color: var(--color-text-default);
  overflow: hidden;
  text-overflow: ellipsis;
}

.transaction-list-item__secondary-currency {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  margin-top: 4px;
  color: var(--color-text-alternative);
}

.transaction-list-item .transaction-list-item--unconfirmed {
  color: var(--color-text-alternative);
}

.transaction-list-item--unconfirmed .transaction-list-item__primary-currency {
  color: var(--color-text-alternative);
}

.transaction-list-item__pending-actions {
  display: flex;
}

.transaction-list-item__pending-actions .button {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  width: 90px;
  white-space: nowrap;
}

[dir="ltr"] .transaction-list-item__pending-actions > .button:first-child {
  margin-right: 6px;
}

[dir="rtl"] .transaction-list-item__pending-actions > .button:first-child {
  margin-left: 6px;
}

.transaction-list-item__pending-actions:empty {
  padding-top: 0;
}

.transaction-list-item .list-item__subheading {
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.transaction-list-item .list-item__subheading > h3 {
  overflow: visible;
  display: flex;
  white-space: nowrap;
  text-overflow: initial;
}

.transaction-list-item__address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.transaction-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.transaction-list__completed-transactions {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.transaction-list__header {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  flex: 0 0 auto;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-muted);
}

[dir="ltr"] .transaction-list__header {
  padding: 8px 0 8px 20px;
}

[dir="rtl"] .transaction-list__header {
  padding: 8px 20px 8px 0;
}

@media screen and (max-width: calc(576px - 1px)) {
  [dir="ltr"] .transaction-list__header {
    padding: 8px 0 8px 16px;
  }

  [dir="rtl"] .transaction-list__header {
    padding: 8px 16px 8px 0;
  }
}

.transaction-list__transactions {
  flex: 1;
}

.transaction-list__empty {
  flex: 1;
  display: grid;
  grid-template-rows: auto;
  padding-top: 24px;
}

.transaction-list__empty-text {
  grid-row-start: 2;
  display: flex;
  justify-content: center;
  color: var(--color-text-muted);
}

.transaction-list__view-more {
  margin: 16px auto;
  max-width: 200px;
}

.transaction-list__view-on-block-explorer {
  grid-row-start: 2;
  display: flex;
  justify-content: center;
  padding: 16px;
}

.transaction-status-label {
  display: inline;
}

.transaction-status-label--confirmed {
  color: var(--color-success-default);
}

.transaction-status-label--failed, .transaction-status-label--cancelled, .transaction-status-label--dropped, .transaction-status-label--rejected {
  color: var(--color-error-default);
}

.transaction-status-label--unapproved, .transaction-status-label--signing, .transaction-status-label--pending {
  color: var(--color-warning-default);
}

.transaction-status-label--queued {
  color: var(--color-text-alternative);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.wallet-overview {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  width: 100%;
}

.wallet-overview-fullscreen {
  align-items: center;
}

.wallet-overview__balance {
  flex: 1;
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

.wallet-overview-fullscreen > .wallet-overview__balance {
  align-items: center;
}

.wallet-overview__icon_button {
  margin-top: 0 !important;
}

.wallet-overview__buttons {
  display: flex;
  flex-direction: row;
  height: 100%;
  margin-bottom: 12px;
  padding: 0 16px;
  width: 100%;
}

.wallet-overview-fullscreen > .wallet-overview__buttons {
  width: auto;
}

.wallet-overview__currency-wrapper {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.coin-overview__balance,
.eth-overview__balance {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  align-items: start;
  margin: 16px 0;
  padding: 0 16px;
  max-width: 326px;
}

.coin-overview__icon-button,
.eth-overview__icon-button {
  margin-top: 0 !important;
  color: var(--color-icon-default);
}

.coin-overview__primary-container,
.eth-overview__primary-container {
  display: flex;
  max-width: inherit;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.coin-overview__primary-balance,
.eth-overview__primary-balance {
  font-size: 2rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  font-weight: 500;
}

[dir="ltr"] .coin-overview__cached-star,
[dir="ltr"] .eth-overview__cached-star {
  margin-left: 4px;
}

[dir="rtl"] .coin-overview__cached-star,
[dir="rtl"] .eth-overview__cached-star {
  margin-right: 4px;
}

.coin-overview__cached-balance, .coin-overview__cached-star,
.eth-overview__cached-balance,
.eth-overview__cached-star {
  color: var(--color-warning-default);
}

.coin-overview__cached-secondary-balance,
.eth-overview__cached-secondary-balance {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-warning-muted);
}

.coin-overview__secondary-balance,
.eth-overview__secondary-balance {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
}

[dir="ltr"] .coin-overview__button:last-of-type,
[dir="ltr"] .eth-overview__button:last-of-type {
  margin-right: 0;
}

[dir="rtl"] .coin-overview__button:last-of-type,
[dir="rtl"] .eth-overview__button:last-of-type {
  margin-left: 0;
}

.coin-overview__circle,
.eth-overview__circle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  background: var(--color-primary-default);
  border-radius: 18px;
  margin-top: 6px;
}

.token-overview__balance {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  align-items: center;
  margin: 16px 0;
  padding: 0 16px;
  max-width: 326px;
}

.token-overview__primary-container {
  display: flex;
  max-width: inherit;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.token-overview__primary-balance {
  font-size: 2rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  width: 100%;
  justify-content: center;
}

.token-overview__secondary-balance {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
}

[dir="ltr"] .token-overview__button:last-of-type {
  margin-right: 0;
}

[dir="rtl"] .token-overview__button:last-of-type {
  margin-left: 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.popover-wrap.terms-of-use__popover .terms-of-use__terms-list {
  list-style: decimal none outside;
}

.popover-wrap.terms-of-use__popover .terms-of-use__footer-text {
  align-self: center;
}

.popover-wrap.terms-of-use__popover .popover-header__title {
  margin-bottom: 0;
}

.popover-wrap.terms-of-use__popover .popover-footer {
  border-top: none;
}

@media screen and (min-width: 576px) {
  .popover-wrap.terms-of-use__popover {
    max-height: 750px;
    width: 500px;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .popover-wrap.terms-of-use__popover {
    max-height: 568px;
  }
}

.loading-overlay__error-buttons button {
  margin: 5px;
  padding: 5px 30px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.currency-input__conversion-component {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

[dir="ltr"] .currency-input__conversion-component {
  padding-left: 1px;
}

[dir="rtl"] .currency-input__conversion-component {
  padding-right: 1px;
}

.currency-input__swap-component {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-default);
  cursor: pointer;
  background: none;
  border: none;
}

.currency-input__pulsing-bar {
  height: 4px;
  background: var(--color-icon-muted);
  animation: pulse 2s infinite;
  -webkit-animation: pulse 2s infinite;
}

.currency-input__skeleton-container {
  min-height: 54px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

@keyframes pulse {
  0%, 100% {
    background: var(--color-icon-muted);
  }

  50% {
    background: var(--color-background-alternative);
  }
}
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.detected-token-aggregators .typography {
  display: inline;
}

.detected-token-aggregators .detected-token-aggregators__link {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 0;
  display: inline;
}

[dir="ltr"] .detected-token-aggregators .detected-token-aggregators__link {
  margin-left: 4px;
}

[dir="rtl"] .detected-token-aggregators .detected-token-aggregators__link {
  margin-right: 4px;
}

[dir="ltr"] .detected-token-values__checkbox {
  margin-left: auto;
}

[dir="rtl"] .detected-token-values__checkbox {
  margin-right: auto;
}

.detected-token-details__identicon {
  margin-top: 4px;
}

.detected-token-details__data {
  flex-grow: 1;
}

[dir="ltr"] .detected-token-selection-popover__ignore-button {
  margin-right: 8px;
}

[dir="rtl"] .detected-token-selection-popover__ignore-button {
  margin-left: 8px;
}

[dir="ltr"] .detected-token-selection-popover__import-button {
  margin-left: 8px;
}

[dir="rtl"] .detected-token-selection-popover__import-button {
  margin-right: 8px;
}

.network-account-balance-header {
  border-top: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
}

.network-account-balance-header__network-account__ident-icon-ethereum, .network-account-balance-header__network-account__ident-icon-ethereum--gray {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-background-default);
  background: var(--color-background-default);
  margin-inline-start: -10px;
  margin-top: -20px;
}

.network-account-balance-header__network-account__ident-icon-ethereum > span, .network-account-balance-header__network-account__ident-icon-ethereum--gray > span {
  display: flex;
  justify-content: center;
  line-height: 18px;
}

.network-account-balance-header__network-account__ident-icon-ethereum--gray {
  border: 1px solid var(--color-border-default);
}

.name {
  border-radius: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  max-width: 100%;
}

[dir="ltr"] .name {
  padding: 1px 8px 1px 4px;
}

[dir="rtl"] .name {
  padding: 1px 4px 1px 8px;
}

.name__clickable {
  cursor: pointer;
}

.name__missing {
  background-color: var(--color-background-alternative);
}

.name__missing .name__value {
  color: var(--color-text-default);
}

.name__saved {
  background-color: var(--color-info-muted);
}

.name__saved .name__name {
  color: var(--color-info-default);
}

.name__recognized_unsaved {
  background-color: var(--color-background-alternative);
}

.name__recognized_unsaved .name__name {
  color: var(--color-text-default);
}

.name__missing .name__icon {
  color: var(--color-text-default);
}

.name__saved .name__icon {
  color: var(--color-info-default);
}

.name__value, .name__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.name-details__display-name {
  width: 100%;
  margin-bottom: 16px;
}

[dir="ltr"] .name-details__address .mm-text-field {
  padding-right: 5px;
}

[dir="rtl"] .name-details__address .mm-text-field {
  padding-left: 5px;
}

.name-details__modal-body {
  overflow-y: visible;
}

.expandable {
  transition: height 0.3s ease-in-out;
  overflow: hidden;
}

.expandIcon {
  transition: 0.3s ease-in-out;
}

.expandIcon.expanded {
  rotate: -180deg;
}

/** Please import your files in alphabetical order **/
.account-mismatch-warning__tooltip-container-icon {
  display: flex;
  align-items: center;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.choose-account-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.choose-account-list__header--one-item, .choose-account-list__header--multiple-items {
  display: flex;
  flex: 0;
  width: 100%;
  padding-inline-start: 16px;
  padding-inline-end: 17px;
}

.choose-account-list__header--one-item {
  justify-content: flex-end;
}

.choose-account-list__header--multiple-items {
  justify-content: space-between;
}

.choose-account-list__select-all {
  display: flex;
  align-items: center;
}

[dir="ltr"] .choose-account-list__header-check-box {
  margin-right: 16px;
}

[dir="rtl"] .choose-account-list__header-check-box {
  margin-left: 16px;
}

.choose-account-list__wrapper {
  margin-top: 8px;
  display: flex;
  overflow: hidden;
  width: 100%;
}

.choose-account-list__list {
  flex: 2 1 0;
  width: 100%;
  max-height: max-content;
  border: 1px solid var(--color-border-muted);
  box-sizing: border-box;
  border-radius: 8px;
  margin-top: 8px;
  overflow-y: auto;
}

.choose-account-list__account {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--color-border-muted);
  justify-content: space-between;
}

.choose-account-list__account:last-of-type {
  border-bottom: none;
}

.choose-account-list__account:hover {
  background: var(--color-primary-muted);
  cursor: pointer;
}

.choose-account-list__account__info {
  display: flex;
  flex-direction: column;
  margin-inline-start: 16px;
  min-width: 0;
}

.choose-account-list__account__last-connected {
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--color-primary-default);
}

.choose-account-list__account-info-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}

.choose-account-list__list-check-box {
  margin-inline-end: 16px;
}

.choose-account-list__list-check-box i {
  font-size: 0.8rem;
}

.choose-account-list .info-circle {
  cursor: pointer;
}

.choose-account-list .info-circle:hover {
  color: var(--color-icon-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.actionable-message {
  color: var(--color-text-default);
  background-color: var(--color-background-default);
  border: 1px solid var(--color-info-default);
  border-radius: 8px;
  padding: 16px;
  margin-top: 18px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  /**
  * Need the z-index and pseudo element for the time being while we update our muted colors to not use alpha levels
  * Otherwise ActionableMessages on top of content will transparent and it may effect
  * readability.
  */
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.actionable-message * {
  z-index: 1;
}

.actionable-message::before {
  content: "";
  position: absolute;
  border-radius: 8px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-info-muted);
}

.actionable-message--with-icon {
  padding-inline-start: 32px;
}

.actionable-message--with-icon.actionable-message--warning {
  justify-content: normal;
}

[dir="ltr"] .actionable-message--with-icon.actionable-message--with-right-button {
  padding-left: 32px;
}

[dir="rtl"] .actionable-message--with-icon.actionable-message--with-right-button {
  padding-right: 32px;
}

.actionable-message svg {
  width: 16px;
  height: 16px;
  position: absolute;
}

[dir="ltr"] .actionable-message svg {
  left: 8px;
}

[dir="rtl"] .actionable-message svg {
  right: 8px;
}

.actionable-message__message {
  color: var(--color-text-default);
  text-align: center;
  width: 100%;
}

.actionable-message__actions {
  display: flex;
  width: 80%;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  color: var(--color-primary-default);
}

.actionable-message__actions--single {
  width: 100%;
}

.actionable-message__action {
  font-weight: bold;
}

.actionable-message__action--rounded {
  border-radius: 8px;
}

.actionable-message__action-v2 {
  color: var(--color-primary-default);
  background: none;
  border: none;
  font-size: 12px;
  align-self: baseline;
  padding: 0;
  margin-top: 12px;
}

.actionable-message__info-tooltip-wrapper {
  position: absolute;
  top: 8px;
}

[dir="ltr"] .actionable-message__info-tooltip-wrapper {
  right: 4px;
}

[dir="rtl"] .actionable-message__info-tooltip-wrapper {
  left: 4px;
}

.actionable-message--warning {
  border: 1px solid var(--color-warning-default);
  justify-content: center;
}

.actionable-message--warning::before {
  background: var(--color-warning-muted);
}

.actionable-message--warning .actionable-message__action--secondary {
  text-decoration: underline;
}

.actionable-message--warning .actionable-message__actions button {
  background: var(--color-warning-default);
  color: var(--color-warning-inverse);
}

.actionable-message--danger {
  border: 1px solid var(--color-error-default);
  justify-content: flex-start;
}

.actionable-message--danger::before {
  background: var(--color-error-muted);
}

[dir="ltr"] .actionable-message--danger .actionable-message__message {
  text-align: left;
}

[dir="rtl"] .actionable-message--danger .actionable-message__message {
  text-align: right;
}

.actionable-message--danger .actionable-message__actions button {
  background: var(--color-error-default);
  color: var(--color-error-inverse);
}

.actionable-message--success {
  border: 1px solid var(--color-success-default);
}

.actionable-message--success::before {
  background: var(--color-success-muted);
}

.actionable-message--success .actionable-message__actions button {
  background: var(--color-success-default);
  color: var(--color-success-inverse);
}

[dir="ltr"] .actionable-message--left-aligned .actionable-message__message,
[dir="ltr"] .actionable-message--left-aligned .actionable-message__actions {
  text-align: left;
}

[dir="rtl"] .actionable-message--left-aligned .actionable-message__message,
[dir="rtl"] .actionable-message--left-aligned .actionable-message__actions {
  text-align: right;
}

.actionable-message--with-right-button {
  padding: 12px;
}

.actionable-message--with-right-button .actionable-message__message {
  justify-content: flex-start;
  width: 100%;
}

[dir="ltr"] .actionable-message--with-right-button .actionable-message__message {
  text-align: left;
}

[dir="rtl"] .actionable-message--with-right-button .actionable-message__message {
  text-align: right;
}

.actionable-message--with-right-button .actionable-message__actions {
  justify-content: flex-end;
  width: 100%;
}

.actionable-message--with-right-button .actionable-message__action {
  font-weight: normal;
  border-radius: 42px;
  min-width: 72px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.actionable-message--warning.actionable-message--with-right-button .actionable-message__action::before {
  background: var(--color-warning-muted);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.global-alert {
  position: relative;
  width: 100%;
  background-color: var(--color-primary-default);
}

.global-alert .msg {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  width: 100%;
  display: block;
  color: var(--color-primary-inverse);
  text-align: center;
}

.global-alert.hidden {
  animation: alertHidden 0.5s ease forwards;
}

.global-alert.visible {
  animation: alert 0.5s ease forwards;
}

/* Animation */
@keyframes alert {
  0% {
    opacity: 0;
    top: -50px;
    padding: 0;
    line-height: 12px;
  }

  50% {
    opacity: 1;
  }

  100% {
    top: 0;
    padding: 8px;
    line-height: 12px;
  }
}

@keyframes alertHidden {
  0% {
    top: 0;
    opacity: 1;
    padding: 8px;
    line-height: 12px;
  }

  100% {
    opacity: 0;
    top: -50px;
    padding: 0;
    line-height: 0;
  }
}
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.box--padding-0 {
  padding: 0px;
}

.box--padding-1 {
  padding: 4px;
}

.box--padding-2 {
  padding: 8px;
}

.box--padding-3 {
  padding: 12px;
}

.box--padding-4 {
  padding: 16px;
}

.box--padding-5 {
  padding: 20px;
}

.box--padding-6 {
  padding: 24px;
}

.box--padding-7 {
  padding: 28px;
}

.box--padding-8 {
  padding: 32px;
}

.box--padding-9 {
  padding: 36px;
}

.box--padding-10 {
  padding: 40px;
}

.box--padding-11 {
  padding: 44px;
}

.box--padding-12 {
  padding: 48px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-0 {
    padding: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-1 {
    padding: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-2 {
    padding: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-3 {
    padding: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-4 {
    padding: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-5 {
    padding: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-6 {
    padding: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-7 {
    padding: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-8 {
    padding: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-9 {
    padding: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-10 {
    padding: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-11 {
    padding: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-12 {
    padding: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-0 {
    padding: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-1 {
    padding: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-2 {
    padding: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-3 {
    padding: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-4 {
    padding: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-5 {
    padding: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-6 {
    padding: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-7 {
    padding: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-8 {
    padding: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-9 {
    padding: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-10 {
    padding: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-11 {
    padding: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-12 {
    padding: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-0 {
    padding: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-1 {
    padding: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-2 {
    padding: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-3 {
    padding: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-4 {
    padding: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-5 {
    padding: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-6 {
    padding: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-7 {
    padding: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-8 {
    padding: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-9 {
    padding: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-10 {
    padding: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-11 {
    padding: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-12 {
    padding: 48px;
  }
}

.box--padding-top-0 {
  padding-top: 0px;
}

[dir="ltr"] .box--padding-right-0 {
  padding-right: 0px;
}

[dir="rtl"] .box--padding-right-0 {
  padding-left: 0px;
}

.box--padding-bottom-0 {
  padding-bottom: 0px;
}

[dir="ltr"] .box--padding-left-0 {
  padding-left: 0px;
}

[dir="rtl"] .box--padding-left-0 {
  padding-right: 0px;
}

.box--padding-inline-0 {
  padding-inline: 0px;
}

.box--padding-inline-start-0 {
  padding-inline-start: 0px;
}

.box--padding-inline-end-0 {
  padding-inline-end: 0px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-0 {
    padding-top: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-0 {
    padding-right: 0px;
  }

  [dir="rtl"] .box--sm\:padding-right-0 {
    padding-left: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-0 {
    padding-bottom: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-0 {
    padding-left: 0px;
  }

  [dir="rtl"] .box--sm\:padding-left-0 {
    padding-right: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-0 {
    padding-inline: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-0 {
    padding-inline-start: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-0 {
    padding-inline-end: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-0 {
    padding-top: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-0 {
    padding-right: 0px;
  }

  [dir="rtl"] .box--md\:padding-right-0 {
    padding-left: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-0 {
    padding-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-0 {
    padding-left: 0px;
  }

  [dir="rtl"] .box--md\:padding-left-0 {
    padding-right: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-0 {
    padding-inline: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-0 {
    padding-inline-start: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-0 {
    padding-inline-end: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-0 {
    padding-top: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-0 {
    padding-right: 0px;
  }

  [dir="rtl"] .box--lg\:padding-right-0 {
    padding-left: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-0 {
    padding-bottom: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-0 {
    padding-left: 0px;
  }

  [dir="rtl"] .box--lg\:padding-left-0 {
    padding-right: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-0 {
    padding-inline: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-0 {
    padding-inline-start: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-0 {
    padding-inline-end: 0px;
  }
}

.box--padding-top-1 {
  padding-top: 4px;
}

[dir="ltr"] .box--padding-right-1 {
  padding-right: 4px;
}

[dir="rtl"] .box--padding-right-1 {
  padding-left: 4px;
}

.box--padding-bottom-1 {
  padding-bottom: 4px;
}

[dir="ltr"] .box--padding-left-1 {
  padding-left: 4px;
}

[dir="rtl"] .box--padding-left-1 {
  padding-right: 4px;
}

.box--padding-inline-1 {
  padding-inline: 4px;
}

.box--padding-inline-start-1 {
  padding-inline-start: 4px;
}

.box--padding-inline-end-1 {
  padding-inline-end: 4px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-1 {
    padding-top: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-1 {
    padding-right: 4px;
  }

  [dir="rtl"] .box--sm\:padding-right-1 {
    padding-left: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-1 {
    padding-bottom: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-1 {
    padding-left: 4px;
  }

  [dir="rtl"] .box--sm\:padding-left-1 {
    padding-right: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-1 {
    padding-inline: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-1 {
    padding-inline-start: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-1 {
    padding-inline-end: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-1 {
    padding-top: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-1 {
    padding-right: 4px;
  }

  [dir="rtl"] .box--md\:padding-right-1 {
    padding-left: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-1 {
    padding-bottom: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-1 {
    padding-left: 4px;
  }

  [dir="rtl"] .box--md\:padding-left-1 {
    padding-right: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-1 {
    padding-inline: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-1 {
    padding-inline-start: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-1 {
    padding-inline-end: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-1 {
    padding-top: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-1 {
    padding-right: 4px;
  }

  [dir="rtl"] .box--lg\:padding-right-1 {
    padding-left: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-1 {
    padding-bottom: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-1 {
    padding-left: 4px;
  }

  [dir="rtl"] .box--lg\:padding-left-1 {
    padding-right: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-1 {
    padding-inline: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-1 {
    padding-inline-start: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-1 {
    padding-inline-end: 4px;
  }
}

.box--padding-top-2 {
  padding-top: 8px;
}

[dir="ltr"] .box--padding-right-2 {
  padding-right: 8px;
}

[dir="rtl"] .box--padding-right-2 {
  padding-left: 8px;
}

.box--padding-bottom-2 {
  padding-bottom: 8px;
}

[dir="ltr"] .box--padding-left-2 {
  padding-left: 8px;
}

[dir="rtl"] .box--padding-left-2 {
  padding-right: 8px;
}

.box--padding-inline-2 {
  padding-inline: 8px;
}

.box--padding-inline-start-2 {
  padding-inline-start: 8px;
}

.box--padding-inline-end-2 {
  padding-inline-end: 8px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-2 {
    padding-top: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-2 {
    padding-right: 8px;
  }

  [dir="rtl"] .box--sm\:padding-right-2 {
    padding-left: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-2 {
    padding-bottom: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-2 {
    padding-left: 8px;
  }

  [dir="rtl"] .box--sm\:padding-left-2 {
    padding-right: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-2 {
    padding-inline: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-2 {
    padding-inline-start: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-2 {
    padding-inline-end: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-2 {
    padding-top: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-2 {
    padding-right: 8px;
  }

  [dir="rtl"] .box--md\:padding-right-2 {
    padding-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-2 {
    padding-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-2 {
    padding-left: 8px;
  }

  [dir="rtl"] .box--md\:padding-left-2 {
    padding-right: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-2 {
    padding-inline: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-2 {
    padding-inline-start: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-2 {
    padding-inline-end: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-2 {
    padding-top: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-2 {
    padding-right: 8px;
  }

  [dir="rtl"] .box--lg\:padding-right-2 {
    padding-left: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-2 {
    padding-bottom: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-2 {
    padding-left: 8px;
  }

  [dir="rtl"] .box--lg\:padding-left-2 {
    padding-right: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-2 {
    padding-inline: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-2 {
    padding-inline-start: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-2 {
    padding-inline-end: 8px;
  }
}

.box--padding-top-3 {
  padding-top: 12px;
}

[dir="ltr"] .box--padding-right-3 {
  padding-right: 12px;
}

[dir="rtl"] .box--padding-right-3 {
  padding-left: 12px;
}

.box--padding-bottom-3 {
  padding-bottom: 12px;
}

[dir="ltr"] .box--padding-left-3 {
  padding-left: 12px;
}

[dir="rtl"] .box--padding-left-3 {
  padding-right: 12px;
}

.box--padding-inline-3 {
  padding-inline: 12px;
}

.box--padding-inline-start-3 {
  padding-inline-start: 12px;
}

.box--padding-inline-end-3 {
  padding-inline-end: 12px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-3 {
    padding-top: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-3 {
    padding-right: 12px;
  }

  [dir="rtl"] .box--sm\:padding-right-3 {
    padding-left: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-3 {
    padding-bottom: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-3 {
    padding-left: 12px;
  }

  [dir="rtl"] .box--sm\:padding-left-3 {
    padding-right: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-3 {
    padding-inline: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-3 {
    padding-inline-start: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-3 {
    padding-inline-end: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-3 {
    padding-top: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-3 {
    padding-right: 12px;
  }

  [dir="rtl"] .box--md\:padding-right-3 {
    padding-left: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-3 {
    padding-bottom: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-3 {
    padding-left: 12px;
  }

  [dir="rtl"] .box--md\:padding-left-3 {
    padding-right: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-3 {
    padding-inline: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-3 {
    padding-inline-start: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-3 {
    padding-inline-end: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-3 {
    padding-top: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-3 {
    padding-right: 12px;
  }

  [dir="rtl"] .box--lg\:padding-right-3 {
    padding-left: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-3 {
    padding-bottom: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-3 {
    padding-left: 12px;
  }

  [dir="rtl"] .box--lg\:padding-left-3 {
    padding-right: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-3 {
    padding-inline: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-3 {
    padding-inline-start: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-3 {
    padding-inline-end: 12px;
  }
}

.box--padding-top-4 {
  padding-top: 16px;
}

[dir="ltr"] .box--padding-right-4 {
  padding-right: 16px;
}

[dir="rtl"] .box--padding-right-4 {
  padding-left: 16px;
}

.box--padding-bottom-4 {
  padding-bottom: 16px;
}

[dir="ltr"] .box--padding-left-4 {
  padding-left: 16px;
}

[dir="rtl"] .box--padding-left-4 {
  padding-right: 16px;
}

.box--padding-inline-4 {
  padding-inline: 16px;
}

.box--padding-inline-start-4 {
  padding-inline-start: 16px;
}

.box--padding-inline-end-4 {
  padding-inline-end: 16px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-4 {
    padding-top: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-4 {
    padding-right: 16px;
  }

  [dir="rtl"] .box--sm\:padding-right-4 {
    padding-left: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-4 {
    padding-bottom: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-4 {
    padding-left: 16px;
  }

  [dir="rtl"] .box--sm\:padding-left-4 {
    padding-right: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-4 {
    padding-inline: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-4 {
    padding-inline-start: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-4 {
    padding-inline-end: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-4 {
    padding-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-4 {
    padding-right: 16px;
  }

  [dir="rtl"] .box--md\:padding-right-4 {
    padding-left: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-4 {
    padding-bottom: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-4 {
    padding-left: 16px;
  }

  [dir="rtl"] .box--md\:padding-left-4 {
    padding-right: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-4 {
    padding-inline: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-4 {
    padding-inline-start: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-4 {
    padding-inline-end: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-4 {
    padding-top: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-4 {
    padding-right: 16px;
  }

  [dir="rtl"] .box--lg\:padding-right-4 {
    padding-left: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-4 {
    padding-bottom: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-4 {
    padding-left: 16px;
  }

  [dir="rtl"] .box--lg\:padding-left-4 {
    padding-right: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-4 {
    padding-inline: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-4 {
    padding-inline-start: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-4 {
    padding-inline-end: 16px;
  }
}

.box--padding-top-5 {
  padding-top: 20px;
}

[dir="ltr"] .box--padding-right-5 {
  padding-right: 20px;
}

[dir="rtl"] .box--padding-right-5 {
  padding-left: 20px;
}

.box--padding-bottom-5 {
  padding-bottom: 20px;
}

[dir="ltr"] .box--padding-left-5 {
  padding-left: 20px;
}

[dir="rtl"] .box--padding-left-5 {
  padding-right: 20px;
}

.box--padding-inline-5 {
  padding-inline: 20px;
}

.box--padding-inline-start-5 {
  padding-inline-start: 20px;
}

.box--padding-inline-end-5 {
  padding-inline-end: 20px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-5 {
    padding-top: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-5 {
    padding-right: 20px;
  }

  [dir="rtl"] .box--sm\:padding-right-5 {
    padding-left: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-5 {
    padding-bottom: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-5 {
    padding-left: 20px;
  }

  [dir="rtl"] .box--sm\:padding-left-5 {
    padding-right: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-5 {
    padding-inline: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-5 {
    padding-inline-start: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-5 {
    padding-inline-end: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-5 {
    padding-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-5 {
    padding-right: 20px;
  }

  [dir="rtl"] .box--md\:padding-right-5 {
    padding-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-5 {
    padding-bottom: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-5 {
    padding-left: 20px;
  }

  [dir="rtl"] .box--md\:padding-left-5 {
    padding-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-5 {
    padding-inline: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-5 {
    padding-inline-start: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-5 {
    padding-inline-end: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-5 {
    padding-top: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-5 {
    padding-right: 20px;
  }

  [dir="rtl"] .box--lg\:padding-right-5 {
    padding-left: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-5 {
    padding-bottom: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-5 {
    padding-left: 20px;
  }

  [dir="rtl"] .box--lg\:padding-left-5 {
    padding-right: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-5 {
    padding-inline: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-5 {
    padding-inline-start: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-5 {
    padding-inline-end: 20px;
  }
}

.box--padding-top-6 {
  padding-top: 24px;
}

[dir="ltr"] .box--padding-right-6 {
  padding-right: 24px;
}

[dir="rtl"] .box--padding-right-6 {
  padding-left: 24px;
}

.box--padding-bottom-6 {
  padding-bottom: 24px;
}

[dir="ltr"] .box--padding-left-6 {
  padding-left: 24px;
}

[dir="rtl"] .box--padding-left-6 {
  padding-right: 24px;
}

.box--padding-inline-6 {
  padding-inline: 24px;
}

.box--padding-inline-start-6 {
  padding-inline-start: 24px;
}

.box--padding-inline-end-6 {
  padding-inline-end: 24px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-6 {
    padding-top: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-6 {
    padding-right: 24px;
  }

  [dir="rtl"] .box--sm\:padding-right-6 {
    padding-left: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-6 {
    padding-bottom: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-6 {
    padding-left: 24px;
  }

  [dir="rtl"] .box--sm\:padding-left-6 {
    padding-right: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-6 {
    padding-inline: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-6 {
    padding-inline-start: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-6 {
    padding-inline-end: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-6 {
    padding-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-6 {
    padding-right: 24px;
  }

  [dir="rtl"] .box--md\:padding-right-6 {
    padding-left: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-6 {
    padding-bottom: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-6 {
    padding-left: 24px;
  }

  [dir="rtl"] .box--md\:padding-left-6 {
    padding-right: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-6 {
    padding-inline: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-6 {
    padding-inline-start: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-6 {
    padding-inline-end: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-6 {
    padding-top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-6 {
    padding-right: 24px;
  }

  [dir="rtl"] .box--lg\:padding-right-6 {
    padding-left: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-6 {
    padding-bottom: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-6 {
    padding-left: 24px;
  }

  [dir="rtl"] .box--lg\:padding-left-6 {
    padding-right: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-6 {
    padding-inline: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-6 {
    padding-inline-start: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-6 {
    padding-inline-end: 24px;
  }
}

.box--padding-top-7 {
  padding-top: 28px;
}

[dir="ltr"] .box--padding-right-7 {
  padding-right: 28px;
}

[dir="rtl"] .box--padding-right-7 {
  padding-left: 28px;
}

.box--padding-bottom-7 {
  padding-bottom: 28px;
}

[dir="ltr"] .box--padding-left-7 {
  padding-left: 28px;
}

[dir="rtl"] .box--padding-left-7 {
  padding-right: 28px;
}

.box--padding-inline-7 {
  padding-inline: 28px;
}

.box--padding-inline-start-7 {
  padding-inline-start: 28px;
}

.box--padding-inline-end-7 {
  padding-inline-end: 28px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-7 {
    padding-top: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-7 {
    padding-right: 28px;
  }

  [dir="rtl"] .box--sm\:padding-right-7 {
    padding-left: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-7 {
    padding-bottom: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-7 {
    padding-left: 28px;
  }

  [dir="rtl"] .box--sm\:padding-left-7 {
    padding-right: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-7 {
    padding-inline: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-7 {
    padding-inline-start: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-7 {
    padding-inline-end: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-7 {
    padding-top: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-7 {
    padding-right: 28px;
  }

  [dir="rtl"] .box--md\:padding-right-7 {
    padding-left: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-7 {
    padding-bottom: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-7 {
    padding-left: 28px;
  }

  [dir="rtl"] .box--md\:padding-left-7 {
    padding-right: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-7 {
    padding-inline: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-7 {
    padding-inline-start: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-7 {
    padding-inline-end: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-7 {
    padding-top: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-7 {
    padding-right: 28px;
  }

  [dir="rtl"] .box--lg\:padding-right-7 {
    padding-left: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-7 {
    padding-bottom: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-7 {
    padding-left: 28px;
  }

  [dir="rtl"] .box--lg\:padding-left-7 {
    padding-right: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-7 {
    padding-inline: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-7 {
    padding-inline-start: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-7 {
    padding-inline-end: 28px;
  }
}

.box--padding-top-8 {
  padding-top: 32px;
}

[dir="ltr"] .box--padding-right-8 {
  padding-right: 32px;
}

[dir="rtl"] .box--padding-right-8 {
  padding-left: 32px;
}

.box--padding-bottom-8 {
  padding-bottom: 32px;
}

[dir="ltr"] .box--padding-left-8 {
  padding-left: 32px;
}

[dir="rtl"] .box--padding-left-8 {
  padding-right: 32px;
}

.box--padding-inline-8 {
  padding-inline: 32px;
}

.box--padding-inline-start-8 {
  padding-inline-start: 32px;
}

.box--padding-inline-end-8 {
  padding-inline-end: 32px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-8 {
    padding-top: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-8 {
    padding-right: 32px;
  }

  [dir="rtl"] .box--sm\:padding-right-8 {
    padding-left: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-8 {
    padding-bottom: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-8 {
    padding-left: 32px;
  }

  [dir="rtl"] .box--sm\:padding-left-8 {
    padding-right: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-8 {
    padding-inline: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-8 {
    padding-inline-start: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-8 {
    padding-inline-end: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-8 {
    padding-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-8 {
    padding-right: 32px;
  }

  [dir="rtl"] .box--md\:padding-right-8 {
    padding-left: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-8 {
    padding-bottom: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-8 {
    padding-left: 32px;
  }

  [dir="rtl"] .box--md\:padding-left-8 {
    padding-right: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-8 {
    padding-inline: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-8 {
    padding-inline-start: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-8 {
    padding-inline-end: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-8 {
    padding-top: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-8 {
    padding-right: 32px;
  }

  [dir="rtl"] .box--lg\:padding-right-8 {
    padding-left: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-8 {
    padding-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-8 {
    padding-left: 32px;
  }

  [dir="rtl"] .box--lg\:padding-left-8 {
    padding-right: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-8 {
    padding-inline: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-8 {
    padding-inline-start: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-8 {
    padding-inline-end: 32px;
  }
}

.box--padding-top-9 {
  padding-top: 36px;
}

[dir="ltr"] .box--padding-right-9 {
  padding-right: 36px;
}

[dir="rtl"] .box--padding-right-9 {
  padding-left: 36px;
}

.box--padding-bottom-9 {
  padding-bottom: 36px;
}

[dir="ltr"] .box--padding-left-9 {
  padding-left: 36px;
}

[dir="rtl"] .box--padding-left-9 {
  padding-right: 36px;
}

.box--padding-inline-9 {
  padding-inline: 36px;
}

.box--padding-inline-start-9 {
  padding-inline-start: 36px;
}

.box--padding-inline-end-9 {
  padding-inline-end: 36px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-9 {
    padding-top: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-9 {
    padding-right: 36px;
  }

  [dir="rtl"] .box--sm\:padding-right-9 {
    padding-left: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-9 {
    padding-bottom: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-9 {
    padding-left: 36px;
  }

  [dir="rtl"] .box--sm\:padding-left-9 {
    padding-right: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-9 {
    padding-inline: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-9 {
    padding-inline-start: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-9 {
    padding-inline-end: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-9 {
    padding-top: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-9 {
    padding-right: 36px;
  }

  [dir="rtl"] .box--md\:padding-right-9 {
    padding-left: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-9 {
    padding-bottom: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-9 {
    padding-left: 36px;
  }

  [dir="rtl"] .box--md\:padding-left-9 {
    padding-right: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-9 {
    padding-inline: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-9 {
    padding-inline-start: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-9 {
    padding-inline-end: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-9 {
    padding-top: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-9 {
    padding-right: 36px;
  }

  [dir="rtl"] .box--lg\:padding-right-9 {
    padding-left: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-9 {
    padding-bottom: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-9 {
    padding-left: 36px;
  }

  [dir="rtl"] .box--lg\:padding-left-9 {
    padding-right: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-9 {
    padding-inline: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-9 {
    padding-inline-start: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-9 {
    padding-inline-end: 36px;
  }
}

.box--padding-top-10 {
  padding-top: 40px;
}

[dir="ltr"] .box--padding-right-10 {
  padding-right: 40px;
}

[dir="rtl"] .box--padding-right-10 {
  padding-left: 40px;
}

.box--padding-bottom-10 {
  padding-bottom: 40px;
}

[dir="ltr"] .box--padding-left-10 {
  padding-left: 40px;
}

[dir="rtl"] .box--padding-left-10 {
  padding-right: 40px;
}

.box--padding-inline-10 {
  padding-inline: 40px;
}

.box--padding-inline-start-10 {
  padding-inline-start: 40px;
}

.box--padding-inline-end-10 {
  padding-inline-end: 40px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-10 {
    padding-top: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-10 {
    padding-right: 40px;
  }

  [dir="rtl"] .box--sm\:padding-right-10 {
    padding-left: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-10 {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-10 {
    padding-left: 40px;
  }

  [dir="rtl"] .box--sm\:padding-left-10 {
    padding-right: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-10 {
    padding-inline: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-10 {
    padding-inline-start: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-10 {
    padding-inline-end: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-10 {
    padding-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-10 {
    padding-right: 40px;
  }

  [dir="rtl"] .box--md\:padding-right-10 {
    padding-left: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-10 {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-10 {
    padding-left: 40px;
  }

  [dir="rtl"] .box--md\:padding-left-10 {
    padding-right: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-10 {
    padding-inline: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-10 {
    padding-inline-start: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-10 {
    padding-inline-end: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-10 {
    padding-top: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-10 {
    padding-right: 40px;
  }

  [dir="rtl"] .box--lg\:padding-right-10 {
    padding-left: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-10 {
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-10 {
    padding-left: 40px;
  }

  [dir="rtl"] .box--lg\:padding-left-10 {
    padding-right: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-10 {
    padding-inline: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-10 {
    padding-inline-start: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-10 {
    padding-inline-end: 40px;
  }
}

.box--padding-top-11 {
  padding-top: 44px;
}

[dir="ltr"] .box--padding-right-11 {
  padding-right: 44px;
}

[dir="rtl"] .box--padding-right-11 {
  padding-left: 44px;
}

.box--padding-bottom-11 {
  padding-bottom: 44px;
}

[dir="ltr"] .box--padding-left-11 {
  padding-left: 44px;
}

[dir="rtl"] .box--padding-left-11 {
  padding-right: 44px;
}

.box--padding-inline-11 {
  padding-inline: 44px;
}

.box--padding-inline-start-11 {
  padding-inline-start: 44px;
}

.box--padding-inline-end-11 {
  padding-inline-end: 44px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-11 {
    padding-top: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-11 {
    padding-right: 44px;
  }

  [dir="rtl"] .box--sm\:padding-right-11 {
    padding-left: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-11 {
    padding-bottom: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-11 {
    padding-left: 44px;
  }

  [dir="rtl"] .box--sm\:padding-left-11 {
    padding-right: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-11 {
    padding-inline: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-11 {
    padding-inline-start: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-11 {
    padding-inline-end: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-11 {
    padding-top: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-11 {
    padding-right: 44px;
  }

  [dir="rtl"] .box--md\:padding-right-11 {
    padding-left: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-11 {
    padding-bottom: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-11 {
    padding-left: 44px;
  }

  [dir="rtl"] .box--md\:padding-left-11 {
    padding-right: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-11 {
    padding-inline: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-11 {
    padding-inline-start: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-11 {
    padding-inline-end: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-11 {
    padding-top: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-11 {
    padding-right: 44px;
  }

  [dir="rtl"] .box--lg\:padding-right-11 {
    padding-left: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-11 {
    padding-bottom: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-11 {
    padding-left: 44px;
  }

  [dir="rtl"] .box--lg\:padding-left-11 {
    padding-right: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-11 {
    padding-inline: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-11 {
    padding-inline-start: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-11 {
    padding-inline-end: 44px;
  }
}

.box--padding-top-12 {
  padding-top: 48px;
}

[dir="ltr"] .box--padding-right-12 {
  padding-right: 48px;
}

[dir="rtl"] .box--padding-right-12 {
  padding-left: 48px;
}

.box--padding-bottom-12 {
  padding-bottom: 48px;
}

[dir="ltr"] .box--padding-left-12 {
  padding-left: 48px;
}

[dir="rtl"] .box--padding-left-12 {
  padding-right: 48px;
}

.box--padding-inline-12 {
  padding-inline: 48px;
}

.box--padding-inline-start-12 {
  padding-inline-start: 48px;
}

.box--padding-inline-end-12 {
  padding-inline-end: 48px;
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-top-12 {
    padding-top: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-right-12 {
    padding-right: 48px;
  }

  [dir="rtl"] .box--sm\:padding-right-12 {
    padding-left: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-bottom-12 {
    padding-bottom: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:padding-left-12 {
    padding-left: 48px;
  }

  [dir="rtl"] .box--sm\:padding-left-12 {
    padding-right: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-12 {
    padding-inline: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-start-12 {
    padding-inline-start: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:padding-inline-end-12 {
    padding-inline-end: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-top-12 {
    padding-top: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-right-12 {
    padding-right: 48px;
  }

  [dir="rtl"] .box--md\:padding-right-12 {
    padding-left: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-bottom-12 {
    padding-bottom: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:padding-left-12 {
    padding-left: 48px;
  }

  [dir="rtl"] .box--md\:padding-left-12 {
    padding-right: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-12 {
    padding-inline: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-start-12 {
    padding-inline-start: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:padding-inline-end-12 {
    padding-inline-end: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-top-12 {
    padding-top: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-right-12 {
    padding-right: 48px;
  }

  [dir="rtl"] .box--lg\:padding-right-12 {
    padding-left: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-bottom-12 {
    padding-bottom: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:padding-left-12 {
    padding-left: 48px;
  }

  [dir="rtl"] .box--lg\:padding-left-12 {
    padding-right: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-12 {
    padding-inline: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-start-12 {
    padding-inline-start: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:padding-inline-end-12 {
    padding-inline-end: 48px;
  }
}

.box--margin-0 {
  margin: 0px;
}

.box--margin-1 {
  margin: 4px;
}

.box--margin-2 {
  margin: 8px;
}

.box--margin-3 {
  margin: 12px;
}

.box--margin-4 {
  margin: 16px;
}

.box--margin-5 {
  margin: 20px;
}

.box--margin-6 {
  margin: 24px;
}

.box--margin-7 {
  margin: 28px;
}

.box--margin-8 {
  margin: 32px;
}

.box--margin-9 {
  margin: 36px;
}

.box--margin-10 {
  margin: 40px;
}

.box--margin-11 {
  margin: 44px;
}

.box--margin-12 {
  margin: 48px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-0 {
    margin: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-1 {
    margin: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-2 {
    margin: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-3 {
    margin: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-4 {
    margin: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-5 {
    margin: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-6 {
    margin: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-7 {
    margin: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-8 {
    margin: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-9 {
    margin: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-10 {
    margin: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-11 {
    margin: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-12 {
    margin: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-0 {
    margin: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-1 {
    margin: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-2 {
    margin: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-3 {
    margin: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-4 {
    margin: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-5 {
    margin: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-6 {
    margin: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-7 {
    margin: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-8 {
    margin: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-9 {
    margin: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-10 {
    margin: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-11 {
    margin: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-12 {
    margin: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-0 {
    margin: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-1 {
    margin: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-2 {
    margin: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-3 {
    margin: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-4 {
    margin: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-5 {
    margin: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-6 {
    margin: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-7 {
    margin: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-8 {
    margin: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-9 {
    margin: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-10 {
    margin: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-11 {
    margin: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-12 {
    margin: 48px;
  }
}

.box--margin-top-0 {
  margin-top: 0px;
}

[dir="ltr"] .box--margin-right-0 {
  margin-right: 0px;
}

[dir="rtl"] .box--margin-right-0 {
  margin-left: 0px;
}

.box--margin-bottom-0 {
  margin-bottom: 0px;
}

[dir="ltr"] .box--margin-left-0 {
  margin-left: 0px;
}

[dir="rtl"] .box--margin-left-0 {
  margin-right: 0px;
}

.box--margin-inline-0 {
  margin-inline: 0px;
}

.box--margin-inline-start-0 {
  margin-inline-start: 0px;
}

.box--margin-inline-end-0 {
  margin-inline-end: 0px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-0 {
    margin-top: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-0 {
    margin-right: 0px;
  }

  [dir="rtl"] .box--sm\:margin-right-0 {
    margin-left: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-0 {
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-0 {
    margin-left: 0px;
  }

  [dir="rtl"] .box--sm\:margin-left-0 {
    margin-right: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-0 {
    margin-inline: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-0 {
    margin-inline-start: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-0 {
    margin-inline-end: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-0 {
    margin-top: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-0 {
    margin-right: 0px;
  }

  [dir="rtl"] .box--md\:margin-right-0 {
    margin-left: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-0 {
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-0 {
    margin-left: 0px;
  }

  [dir="rtl"] .box--md\:margin-left-0 {
    margin-right: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-0 {
    margin-inline: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-0 {
    margin-inline-start: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-0 {
    margin-inline-end: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-0 {
    margin-top: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-0 {
    margin-right: 0px;
  }

  [dir="rtl"] .box--lg\:margin-right-0 {
    margin-left: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-0 {
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-0 {
    margin-left: 0px;
  }

  [dir="rtl"] .box--lg\:margin-left-0 {
    margin-right: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-0 {
    margin-inline: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-0 {
    margin-inline-start: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-0 {
    margin-inline-end: 0px;
  }
}

.box--margin-top-1 {
  margin-top: 4px;
}

[dir="ltr"] .box--margin-right-1 {
  margin-right: 4px;
}

[dir="rtl"] .box--margin-right-1 {
  margin-left: 4px;
}

.box--margin-bottom-1 {
  margin-bottom: 4px;
}

[dir="ltr"] .box--margin-left-1 {
  margin-left: 4px;
}

[dir="rtl"] .box--margin-left-1 {
  margin-right: 4px;
}

.box--margin-inline-1 {
  margin-inline: 4px;
}

.box--margin-inline-start-1 {
  margin-inline-start: 4px;
}

.box--margin-inline-end-1 {
  margin-inline-end: 4px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-1 {
    margin-top: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-1 {
    margin-right: 4px;
  }

  [dir="rtl"] .box--sm\:margin-right-1 {
    margin-left: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-1 {
    margin-bottom: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-1 {
    margin-left: 4px;
  }

  [dir="rtl"] .box--sm\:margin-left-1 {
    margin-right: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-1 {
    margin-inline: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-1 {
    margin-inline-start: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-1 {
    margin-inline-end: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-1 {
    margin-top: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-1 {
    margin-right: 4px;
  }

  [dir="rtl"] .box--md\:margin-right-1 {
    margin-left: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-1 {
    margin-bottom: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-1 {
    margin-left: 4px;
  }

  [dir="rtl"] .box--md\:margin-left-1 {
    margin-right: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-1 {
    margin-inline: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-1 {
    margin-inline-start: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-1 {
    margin-inline-end: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-1 {
    margin-top: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-1 {
    margin-right: 4px;
  }

  [dir="rtl"] .box--lg\:margin-right-1 {
    margin-left: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-1 {
    margin-bottom: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-1 {
    margin-left: 4px;
  }

  [dir="rtl"] .box--lg\:margin-left-1 {
    margin-right: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-1 {
    margin-inline: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-1 {
    margin-inline-start: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-1 {
    margin-inline-end: 4px;
  }
}

.box--margin-top-2 {
  margin-top: 8px;
}

[dir="ltr"] .box--margin-right-2 {
  margin-right: 8px;
}

[dir="rtl"] .box--margin-right-2 {
  margin-left: 8px;
}

.box--margin-bottom-2 {
  margin-bottom: 8px;
}

[dir="ltr"] .box--margin-left-2 {
  margin-left: 8px;
}

[dir="rtl"] .box--margin-left-2 {
  margin-right: 8px;
}

.box--margin-inline-2 {
  margin-inline: 8px;
}

.box--margin-inline-start-2 {
  margin-inline-start: 8px;
}

.box--margin-inline-end-2 {
  margin-inline-end: 8px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-2 {
    margin-top: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-2 {
    margin-right: 8px;
  }

  [dir="rtl"] .box--sm\:margin-right-2 {
    margin-left: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-2 {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-2 {
    margin-left: 8px;
  }

  [dir="rtl"] .box--sm\:margin-left-2 {
    margin-right: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-2 {
    margin-inline: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-2 {
    margin-inline-start: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-2 {
    margin-inline-end: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-2 {
    margin-top: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-2 {
    margin-right: 8px;
  }

  [dir="rtl"] .box--md\:margin-right-2 {
    margin-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-2 {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-2 {
    margin-left: 8px;
  }

  [dir="rtl"] .box--md\:margin-left-2 {
    margin-right: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-2 {
    margin-inline: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-2 {
    margin-inline-start: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-2 {
    margin-inline-end: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-2 {
    margin-top: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-2 {
    margin-right: 8px;
  }

  [dir="rtl"] .box--lg\:margin-right-2 {
    margin-left: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-2 {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-2 {
    margin-left: 8px;
  }

  [dir="rtl"] .box--lg\:margin-left-2 {
    margin-right: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-2 {
    margin-inline: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-2 {
    margin-inline-start: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-2 {
    margin-inline-end: 8px;
  }
}

.box--margin-top-3 {
  margin-top: 12px;
}

[dir="ltr"] .box--margin-right-3 {
  margin-right: 12px;
}

[dir="rtl"] .box--margin-right-3 {
  margin-left: 12px;
}

.box--margin-bottom-3 {
  margin-bottom: 12px;
}

[dir="ltr"] .box--margin-left-3 {
  margin-left: 12px;
}

[dir="rtl"] .box--margin-left-3 {
  margin-right: 12px;
}

.box--margin-inline-3 {
  margin-inline: 12px;
}

.box--margin-inline-start-3 {
  margin-inline-start: 12px;
}

.box--margin-inline-end-3 {
  margin-inline-end: 12px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-3 {
    margin-top: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-3 {
    margin-right: 12px;
  }

  [dir="rtl"] .box--sm\:margin-right-3 {
    margin-left: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-3 {
    margin-bottom: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-3 {
    margin-left: 12px;
  }

  [dir="rtl"] .box--sm\:margin-left-3 {
    margin-right: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-3 {
    margin-inline: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-3 {
    margin-inline-start: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-3 {
    margin-inline-end: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-3 {
    margin-top: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-3 {
    margin-right: 12px;
  }

  [dir="rtl"] .box--md\:margin-right-3 {
    margin-left: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-3 {
    margin-bottom: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-3 {
    margin-left: 12px;
  }

  [dir="rtl"] .box--md\:margin-left-3 {
    margin-right: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-3 {
    margin-inline: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-3 {
    margin-inline-start: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-3 {
    margin-inline-end: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-3 {
    margin-top: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-3 {
    margin-right: 12px;
  }

  [dir="rtl"] .box--lg\:margin-right-3 {
    margin-left: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-3 {
    margin-bottom: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-3 {
    margin-left: 12px;
  }

  [dir="rtl"] .box--lg\:margin-left-3 {
    margin-right: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-3 {
    margin-inline: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-3 {
    margin-inline-start: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-3 {
    margin-inline-end: 12px;
  }
}

.box--margin-top-4 {
  margin-top: 16px;
}

[dir="ltr"] .box--margin-right-4 {
  margin-right: 16px;
}

[dir="rtl"] .box--margin-right-4 {
  margin-left: 16px;
}

.box--margin-bottom-4 {
  margin-bottom: 16px;
}

[dir="ltr"] .box--margin-left-4 {
  margin-left: 16px;
}

[dir="rtl"] .box--margin-left-4 {
  margin-right: 16px;
}

.box--margin-inline-4 {
  margin-inline: 16px;
}

.box--margin-inline-start-4 {
  margin-inline-start: 16px;
}

.box--margin-inline-end-4 {
  margin-inline-end: 16px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-4 {
    margin-top: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-4 {
    margin-right: 16px;
  }

  [dir="rtl"] .box--sm\:margin-right-4 {
    margin-left: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-4 {
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-4 {
    margin-left: 16px;
  }

  [dir="rtl"] .box--sm\:margin-left-4 {
    margin-right: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-4 {
    margin-inline: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-4 {
    margin-inline-start: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-4 {
    margin-inline-end: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-4 {
    margin-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-4 {
    margin-right: 16px;
  }

  [dir="rtl"] .box--md\:margin-right-4 {
    margin-left: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-4 {
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-4 {
    margin-left: 16px;
  }

  [dir="rtl"] .box--md\:margin-left-4 {
    margin-right: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-4 {
    margin-inline: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-4 {
    margin-inline-start: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-4 {
    margin-inline-end: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-4 {
    margin-top: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-4 {
    margin-right: 16px;
  }

  [dir="rtl"] .box--lg\:margin-right-4 {
    margin-left: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-4 {
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-4 {
    margin-left: 16px;
  }

  [dir="rtl"] .box--lg\:margin-left-4 {
    margin-right: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-4 {
    margin-inline: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-4 {
    margin-inline-start: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-4 {
    margin-inline-end: 16px;
  }
}

.box--margin-top-5 {
  margin-top: 20px;
}

[dir="ltr"] .box--margin-right-5 {
  margin-right: 20px;
}

[dir="rtl"] .box--margin-right-5 {
  margin-left: 20px;
}

.box--margin-bottom-5 {
  margin-bottom: 20px;
}

[dir="ltr"] .box--margin-left-5 {
  margin-left: 20px;
}

[dir="rtl"] .box--margin-left-5 {
  margin-right: 20px;
}

.box--margin-inline-5 {
  margin-inline: 20px;
}

.box--margin-inline-start-5 {
  margin-inline-start: 20px;
}

.box--margin-inline-end-5 {
  margin-inline-end: 20px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-5 {
    margin-top: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-5 {
    margin-right: 20px;
  }

  [dir="rtl"] .box--sm\:margin-right-5 {
    margin-left: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-5 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-5 {
    margin-left: 20px;
  }

  [dir="rtl"] .box--sm\:margin-left-5 {
    margin-right: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-5 {
    margin-inline: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-5 {
    margin-inline-start: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-5 {
    margin-inline-end: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-5 {
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-5 {
    margin-right: 20px;
  }

  [dir="rtl"] .box--md\:margin-right-5 {
    margin-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-5 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-5 {
    margin-left: 20px;
  }

  [dir="rtl"] .box--md\:margin-left-5 {
    margin-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-5 {
    margin-inline: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-5 {
    margin-inline-start: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-5 {
    margin-inline-end: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-5 {
    margin-top: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-5 {
    margin-right: 20px;
  }

  [dir="rtl"] .box--lg\:margin-right-5 {
    margin-left: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-5 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-5 {
    margin-left: 20px;
  }

  [dir="rtl"] .box--lg\:margin-left-5 {
    margin-right: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-5 {
    margin-inline: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-5 {
    margin-inline-start: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-5 {
    margin-inline-end: 20px;
  }
}

.box--margin-top-6 {
  margin-top: 24px;
}

[dir="ltr"] .box--margin-right-6 {
  margin-right: 24px;
}

[dir="rtl"] .box--margin-right-6 {
  margin-left: 24px;
}

.box--margin-bottom-6 {
  margin-bottom: 24px;
}

[dir="ltr"] .box--margin-left-6 {
  margin-left: 24px;
}

[dir="rtl"] .box--margin-left-6 {
  margin-right: 24px;
}

.box--margin-inline-6 {
  margin-inline: 24px;
}

.box--margin-inline-start-6 {
  margin-inline-start: 24px;
}

.box--margin-inline-end-6 {
  margin-inline-end: 24px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-6 {
    margin-top: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-6 {
    margin-right: 24px;
  }

  [dir="rtl"] .box--sm\:margin-right-6 {
    margin-left: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-6 {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-6 {
    margin-left: 24px;
  }

  [dir="rtl"] .box--sm\:margin-left-6 {
    margin-right: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-6 {
    margin-inline: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-6 {
    margin-inline-start: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-6 {
    margin-inline-end: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-6 {
    margin-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-6 {
    margin-right: 24px;
  }

  [dir="rtl"] .box--md\:margin-right-6 {
    margin-left: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-6 {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-6 {
    margin-left: 24px;
  }

  [dir="rtl"] .box--md\:margin-left-6 {
    margin-right: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-6 {
    margin-inline: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-6 {
    margin-inline-start: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-6 {
    margin-inline-end: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-6 {
    margin-top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-6 {
    margin-right: 24px;
  }

  [dir="rtl"] .box--lg\:margin-right-6 {
    margin-left: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-6 {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-6 {
    margin-left: 24px;
  }

  [dir="rtl"] .box--lg\:margin-left-6 {
    margin-right: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-6 {
    margin-inline: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-6 {
    margin-inline-start: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-6 {
    margin-inline-end: 24px;
  }
}

.box--margin-top-7 {
  margin-top: 28px;
}

[dir="ltr"] .box--margin-right-7 {
  margin-right: 28px;
}

[dir="rtl"] .box--margin-right-7 {
  margin-left: 28px;
}

.box--margin-bottom-7 {
  margin-bottom: 28px;
}

[dir="ltr"] .box--margin-left-7 {
  margin-left: 28px;
}

[dir="rtl"] .box--margin-left-7 {
  margin-right: 28px;
}

.box--margin-inline-7 {
  margin-inline: 28px;
}

.box--margin-inline-start-7 {
  margin-inline-start: 28px;
}

.box--margin-inline-end-7 {
  margin-inline-end: 28px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-7 {
    margin-top: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-7 {
    margin-right: 28px;
  }

  [dir="rtl"] .box--sm\:margin-right-7 {
    margin-left: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-7 {
    margin-bottom: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-7 {
    margin-left: 28px;
  }

  [dir="rtl"] .box--sm\:margin-left-7 {
    margin-right: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-7 {
    margin-inline: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-7 {
    margin-inline-start: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-7 {
    margin-inline-end: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-7 {
    margin-top: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-7 {
    margin-right: 28px;
  }

  [dir="rtl"] .box--md\:margin-right-7 {
    margin-left: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-7 {
    margin-bottom: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-7 {
    margin-left: 28px;
  }

  [dir="rtl"] .box--md\:margin-left-7 {
    margin-right: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-7 {
    margin-inline: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-7 {
    margin-inline-start: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-7 {
    margin-inline-end: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-7 {
    margin-top: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-7 {
    margin-right: 28px;
  }

  [dir="rtl"] .box--lg\:margin-right-7 {
    margin-left: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-7 {
    margin-bottom: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-7 {
    margin-left: 28px;
  }

  [dir="rtl"] .box--lg\:margin-left-7 {
    margin-right: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-7 {
    margin-inline: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-7 {
    margin-inline-start: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-7 {
    margin-inline-end: 28px;
  }
}

.box--margin-top-8 {
  margin-top: 32px;
}

[dir="ltr"] .box--margin-right-8 {
  margin-right: 32px;
}

[dir="rtl"] .box--margin-right-8 {
  margin-left: 32px;
}

.box--margin-bottom-8 {
  margin-bottom: 32px;
}

[dir="ltr"] .box--margin-left-8 {
  margin-left: 32px;
}

[dir="rtl"] .box--margin-left-8 {
  margin-right: 32px;
}

.box--margin-inline-8 {
  margin-inline: 32px;
}

.box--margin-inline-start-8 {
  margin-inline-start: 32px;
}

.box--margin-inline-end-8 {
  margin-inline-end: 32px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-8 {
    margin-top: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-8 {
    margin-right: 32px;
  }

  [dir="rtl"] .box--sm\:margin-right-8 {
    margin-left: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-8 {
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-8 {
    margin-left: 32px;
  }

  [dir="rtl"] .box--sm\:margin-left-8 {
    margin-right: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-8 {
    margin-inline: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-8 {
    margin-inline-start: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-8 {
    margin-inline-end: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-8 {
    margin-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-8 {
    margin-right: 32px;
  }

  [dir="rtl"] .box--md\:margin-right-8 {
    margin-left: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-8 {
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-8 {
    margin-left: 32px;
  }

  [dir="rtl"] .box--md\:margin-left-8 {
    margin-right: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-8 {
    margin-inline: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-8 {
    margin-inline-start: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-8 {
    margin-inline-end: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-8 {
    margin-top: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-8 {
    margin-right: 32px;
  }

  [dir="rtl"] .box--lg\:margin-right-8 {
    margin-left: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-8 {
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-8 {
    margin-left: 32px;
  }

  [dir="rtl"] .box--lg\:margin-left-8 {
    margin-right: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-8 {
    margin-inline: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-8 {
    margin-inline-start: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-8 {
    margin-inline-end: 32px;
  }
}

.box--margin-top-9 {
  margin-top: 36px;
}

[dir="ltr"] .box--margin-right-9 {
  margin-right: 36px;
}

[dir="rtl"] .box--margin-right-9 {
  margin-left: 36px;
}

.box--margin-bottom-9 {
  margin-bottom: 36px;
}

[dir="ltr"] .box--margin-left-9 {
  margin-left: 36px;
}

[dir="rtl"] .box--margin-left-9 {
  margin-right: 36px;
}

.box--margin-inline-9 {
  margin-inline: 36px;
}

.box--margin-inline-start-9 {
  margin-inline-start: 36px;
}

.box--margin-inline-end-9 {
  margin-inline-end: 36px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-9 {
    margin-top: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-9 {
    margin-right: 36px;
  }

  [dir="rtl"] .box--sm\:margin-right-9 {
    margin-left: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-9 {
    margin-bottom: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-9 {
    margin-left: 36px;
  }

  [dir="rtl"] .box--sm\:margin-left-9 {
    margin-right: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-9 {
    margin-inline: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-9 {
    margin-inline-start: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-9 {
    margin-inline-end: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-9 {
    margin-top: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-9 {
    margin-right: 36px;
  }

  [dir="rtl"] .box--md\:margin-right-9 {
    margin-left: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-9 {
    margin-bottom: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-9 {
    margin-left: 36px;
  }

  [dir="rtl"] .box--md\:margin-left-9 {
    margin-right: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-9 {
    margin-inline: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-9 {
    margin-inline-start: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-9 {
    margin-inline-end: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-9 {
    margin-top: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-9 {
    margin-right: 36px;
  }

  [dir="rtl"] .box--lg\:margin-right-9 {
    margin-left: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-9 {
    margin-bottom: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-9 {
    margin-left: 36px;
  }

  [dir="rtl"] .box--lg\:margin-left-9 {
    margin-right: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-9 {
    margin-inline: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-9 {
    margin-inline-start: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-9 {
    margin-inline-end: 36px;
  }
}

.box--margin-top-10 {
  margin-top: 40px;
}

[dir="ltr"] .box--margin-right-10 {
  margin-right: 40px;
}

[dir="rtl"] .box--margin-right-10 {
  margin-left: 40px;
}

.box--margin-bottom-10 {
  margin-bottom: 40px;
}

[dir="ltr"] .box--margin-left-10 {
  margin-left: 40px;
}

[dir="rtl"] .box--margin-left-10 {
  margin-right: 40px;
}

.box--margin-inline-10 {
  margin-inline: 40px;
}

.box--margin-inline-start-10 {
  margin-inline-start: 40px;
}

.box--margin-inline-end-10 {
  margin-inline-end: 40px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-10 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-10 {
    margin-right: 40px;
  }

  [dir="rtl"] .box--sm\:margin-right-10 {
    margin-left: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-10 {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-10 {
    margin-left: 40px;
  }

  [dir="rtl"] .box--sm\:margin-left-10 {
    margin-right: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-10 {
    margin-inline: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-10 {
    margin-inline-start: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-10 {
    margin-inline-end: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-10 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-10 {
    margin-right: 40px;
  }

  [dir="rtl"] .box--md\:margin-right-10 {
    margin-left: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-10 {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-10 {
    margin-left: 40px;
  }

  [dir="rtl"] .box--md\:margin-left-10 {
    margin-right: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-10 {
    margin-inline: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-10 {
    margin-inline-start: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-10 {
    margin-inline-end: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-10 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-10 {
    margin-right: 40px;
  }

  [dir="rtl"] .box--lg\:margin-right-10 {
    margin-left: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-10 {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-10 {
    margin-left: 40px;
  }

  [dir="rtl"] .box--lg\:margin-left-10 {
    margin-right: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-10 {
    margin-inline: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-10 {
    margin-inline-start: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-10 {
    margin-inline-end: 40px;
  }
}

.box--margin-top-11 {
  margin-top: 44px;
}

[dir="ltr"] .box--margin-right-11 {
  margin-right: 44px;
}

[dir="rtl"] .box--margin-right-11 {
  margin-left: 44px;
}

.box--margin-bottom-11 {
  margin-bottom: 44px;
}

[dir="ltr"] .box--margin-left-11 {
  margin-left: 44px;
}

[dir="rtl"] .box--margin-left-11 {
  margin-right: 44px;
}

.box--margin-inline-11 {
  margin-inline: 44px;
}

.box--margin-inline-start-11 {
  margin-inline-start: 44px;
}

.box--margin-inline-end-11 {
  margin-inline-end: 44px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-11 {
    margin-top: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-11 {
    margin-right: 44px;
  }

  [dir="rtl"] .box--sm\:margin-right-11 {
    margin-left: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-11 {
    margin-bottom: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-11 {
    margin-left: 44px;
  }

  [dir="rtl"] .box--sm\:margin-left-11 {
    margin-right: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-11 {
    margin-inline: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-11 {
    margin-inline-start: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-11 {
    margin-inline-end: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-11 {
    margin-top: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-11 {
    margin-right: 44px;
  }

  [dir="rtl"] .box--md\:margin-right-11 {
    margin-left: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-11 {
    margin-bottom: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-11 {
    margin-left: 44px;
  }

  [dir="rtl"] .box--md\:margin-left-11 {
    margin-right: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-11 {
    margin-inline: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-11 {
    margin-inline-start: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-11 {
    margin-inline-end: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-11 {
    margin-top: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-11 {
    margin-right: 44px;
  }

  [dir="rtl"] .box--lg\:margin-right-11 {
    margin-left: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-11 {
    margin-bottom: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-11 {
    margin-left: 44px;
  }

  [dir="rtl"] .box--lg\:margin-left-11 {
    margin-right: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-11 {
    margin-inline: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-11 {
    margin-inline-start: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-11 {
    margin-inline-end: 44px;
  }
}

.box--margin-top-12 {
  margin-top: 48px;
}

[dir="ltr"] .box--margin-right-12 {
  margin-right: 48px;
}

[dir="rtl"] .box--margin-right-12 {
  margin-left: 48px;
}

.box--margin-bottom-12 {
  margin-bottom: 48px;
}

[dir="ltr"] .box--margin-left-12 {
  margin-left: 48px;
}

[dir="rtl"] .box--margin-left-12 {
  margin-right: 48px;
}

.box--margin-inline-12 {
  margin-inline: 48px;
}

.box--margin-inline-start-12 {
  margin-inline-start: 48px;
}

.box--margin-inline-end-12 {
  margin-inline-end: 48px;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-12 {
    margin-top: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-12 {
    margin-right: 48px;
  }

  [dir="rtl"] .box--sm\:margin-right-12 {
    margin-left: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-12 {
    margin-bottom: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-12 {
    margin-left: 48px;
  }

  [dir="rtl"] .box--sm\:margin-left-12 {
    margin-right: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-12 {
    margin-inline: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-12 {
    margin-inline-start: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-12 {
    margin-inline-end: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-12 {
    margin-top: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-12 {
    margin-right: 48px;
  }

  [dir="rtl"] .box--md\:margin-right-12 {
    margin-left: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-12 {
    margin-bottom: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-12 {
    margin-left: 48px;
  }

  [dir="rtl"] .box--md\:margin-left-12 {
    margin-right: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-12 {
    margin-inline: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-12 {
    margin-inline-start: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-12 {
    margin-inline-end: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-12 {
    margin-top: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-12 {
    margin-right: 48px;
  }

  [dir="rtl"] .box--lg\:margin-right-12 {
    margin-left: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-12 {
    margin-bottom: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-12 {
    margin-left: 48px;
  }

  [dir="rtl"] .box--lg\:margin-left-12 {
    margin-right: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-12 {
    margin-inline: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-12 {
    margin-inline-start: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-12 {
    margin-inline-end: 48px;
  }
}

.box--margin-auto {
  margin: auto;
}

.box--margin-top-auto {
  margin-top: auto;
}

[dir="ltr"] .box--margin-right-auto {
  margin-right: auto;
}

[dir="rtl"] .box--margin-right-auto {
  margin-left: auto;
}

.box--margin-bottom-auto {
  margin-bottom: auto;
}

[dir="ltr"] .box--margin-left-auto {
  margin-left: auto;
}

[dir="rtl"] .box--margin-left-auto {
  margin-right: auto;
}

.box--margin-inline-auto {
  margin-inline: auto;
}

.box--margin-inline-start-auto {
  margin-inline-start: auto;
}

.box--margin-inline-end-auto {
  margin-inline-end: auto;
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-auto {
    margin: auto;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-top-auto {
    margin-top: auto;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-right-auto {
    margin-right: auto;
  }

  [dir="rtl"] .box--sm\:margin-right-auto {
    margin-left: auto;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-bottom-auto {
    margin-bottom: auto;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:margin-left-auto {
    margin-left: auto;
  }

  [dir="rtl"] .box--sm\:margin-left-auto {
    margin-right: auto;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-auto {
    margin-inline: auto;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-start-auto {
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:margin-inline-end-auto {
    margin-inline-end: auto;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-auto {
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-top-auto {
    margin-top: auto;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-right-auto {
    margin-right: auto;
  }

  [dir="rtl"] .box--md\:margin-right-auto {
    margin-left: auto;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-bottom-auto {
    margin-bottom: auto;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:margin-left-auto {
    margin-left: auto;
  }

  [dir="rtl"] .box--md\:margin-left-auto {
    margin-right: auto;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-auto {
    margin-inline: auto;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-start-auto {
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:margin-inline-end-auto {
    margin-inline-end: auto;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-auto {
    margin: auto;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-top-auto {
    margin-top: auto;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-right-auto {
    margin-right: auto;
  }

  [dir="rtl"] .box--lg\:margin-right-auto {
    margin-left: auto;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-bottom-auto {
    margin-bottom: auto;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:margin-left-auto {
    margin-left: auto;
  }

  [dir="rtl"] .box--lg\:margin-left-auto {
    margin-right: auto;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-auto {
    margin-inline: auto;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-start-auto {
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:margin-inline-end-auto {
    margin-inline-end: auto;
  }
}

.box--gap-0 {
  gap: 0px;
}

.box--gap-1 {
  gap: 4px;
}

.box--gap-2 {
  gap: 8px;
}

.box--gap-3 {
  gap: 12px;
}

.box--gap-4 {
  gap: 16px;
}

.box--gap-5 {
  gap: 20px;
}

.box--gap-6 {
  gap: 24px;
}

.box--gap-7 {
  gap: 28px;
}

.box--gap-8 {
  gap: 32px;
}

.box--gap-9 {
  gap: 36px;
}

.box--gap-10 {
  gap: 40px;
}

.box--gap-11 {
  gap: 44px;
}

.box--gap-12 {
  gap: 48px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-0 {
    gap: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-1 {
    gap: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-2 {
    gap: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-3 {
    gap: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-4 {
    gap: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-5 {
    gap: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-6 {
    gap: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-7 {
    gap: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-8 {
    gap: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-9 {
    gap: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-10 {
    gap: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-11 {
    gap: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-12 {
    gap: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-0 {
    gap: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-1 {
    gap: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-2 {
    gap: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-3 {
    gap: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-4 {
    gap: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-5 {
    gap: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-6 {
    gap: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-7 {
    gap: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-8 {
    gap: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-9 {
    gap: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-10 {
    gap: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-11 {
    gap: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-12 {
    gap: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-0 {
    gap: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-1 {
    gap: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-2 {
    gap: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-3 {
    gap: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-4 {
    gap: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-5 {
    gap: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-6 {
    gap: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-7 {
    gap: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-8 {
    gap: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-9 {
    gap: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-10 {
    gap: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-11 {
    gap: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-12 {
    gap: 48px;
  }
}

.box--gap-top-0 {
  gap-top: 0px;
}

[dir="ltr"] .box--gap-right-0 {
  gap-right: 0px;
}

[dir="rtl"] .box--gap-right-0 {
  gap-left: 0px;
}

.box--gap-bottom-0 {
  gap-bottom: 0px;
}

[dir="ltr"] .box--gap-left-0 {
  gap-left: 0px;
}

[dir="rtl"] .box--gap-left-0 {
  gap-right: 0px;
}

.box--gap-inline-0 {
  gap-inline: 0px;
}

.box--gap-inline-start-0 {
  gap-inline-start: 0px;
}

.box--gap-inline-end-0 {
  gap-inline-end: 0px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-0 {
    gap-top: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-0 {
    gap-right: 0px;
  }

  [dir="rtl"] .box--sm\:gap-right-0 {
    gap-left: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-0 {
    gap-bottom: 0px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-0 {
    gap-left: 0px;
  }

  [dir="rtl"] .box--sm\:gap-left-0 {
    gap-right: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-0 {
    gap-inline: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-0 {
    gap-inline-start: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-0 {
    gap-inline-end: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-0 {
    gap-top: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-0 {
    gap-right: 0px;
  }

  [dir="rtl"] .box--md\:gap-right-0 {
    gap-left: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-0 {
    gap-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-0 {
    gap-left: 0px;
  }

  [dir="rtl"] .box--md\:gap-left-0 {
    gap-right: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-0 {
    gap-inline: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-0 {
    gap-inline-start: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-0 {
    gap-inline-end: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-0 {
    gap-top: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-0 {
    gap-right: 0px;
  }

  [dir="rtl"] .box--lg\:gap-right-0 {
    gap-left: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-0 {
    gap-bottom: 0px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-0 {
    gap-left: 0px;
  }

  [dir="rtl"] .box--lg\:gap-left-0 {
    gap-right: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-0 {
    gap-inline: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-0 {
    gap-inline-start: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-0 {
    gap-inline-end: 0px;
  }
}

.box--gap-top-1 {
  gap-top: 4px;
}

[dir="ltr"] .box--gap-right-1 {
  gap-right: 4px;
}

[dir="rtl"] .box--gap-right-1 {
  gap-left: 4px;
}

.box--gap-bottom-1 {
  gap-bottom: 4px;
}

[dir="ltr"] .box--gap-left-1 {
  gap-left: 4px;
}

[dir="rtl"] .box--gap-left-1 {
  gap-right: 4px;
}

.box--gap-inline-1 {
  gap-inline: 4px;
}

.box--gap-inline-start-1 {
  gap-inline-start: 4px;
}

.box--gap-inline-end-1 {
  gap-inline-end: 4px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-1 {
    gap-top: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-1 {
    gap-right: 4px;
  }

  [dir="rtl"] .box--sm\:gap-right-1 {
    gap-left: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-1 {
    gap-bottom: 4px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-1 {
    gap-left: 4px;
  }

  [dir="rtl"] .box--sm\:gap-left-1 {
    gap-right: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-1 {
    gap-inline: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-1 {
    gap-inline-start: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-1 {
    gap-inline-end: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-1 {
    gap-top: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-1 {
    gap-right: 4px;
  }

  [dir="rtl"] .box--md\:gap-right-1 {
    gap-left: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-1 {
    gap-bottom: 4px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-1 {
    gap-left: 4px;
  }

  [dir="rtl"] .box--md\:gap-left-1 {
    gap-right: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-1 {
    gap-inline: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-1 {
    gap-inline-start: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-1 {
    gap-inline-end: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-1 {
    gap-top: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-1 {
    gap-right: 4px;
  }

  [dir="rtl"] .box--lg\:gap-right-1 {
    gap-left: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-1 {
    gap-bottom: 4px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-1 {
    gap-left: 4px;
  }

  [dir="rtl"] .box--lg\:gap-left-1 {
    gap-right: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-1 {
    gap-inline: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-1 {
    gap-inline-start: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-1 {
    gap-inline-end: 4px;
  }
}

.box--gap-top-2 {
  gap-top: 8px;
}

[dir="ltr"] .box--gap-right-2 {
  gap-right: 8px;
}

[dir="rtl"] .box--gap-right-2 {
  gap-left: 8px;
}

.box--gap-bottom-2 {
  gap-bottom: 8px;
}

[dir="ltr"] .box--gap-left-2 {
  gap-left: 8px;
}

[dir="rtl"] .box--gap-left-2 {
  gap-right: 8px;
}

.box--gap-inline-2 {
  gap-inline: 8px;
}

.box--gap-inline-start-2 {
  gap-inline-start: 8px;
}

.box--gap-inline-end-2 {
  gap-inline-end: 8px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-2 {
    gap-top: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-2 {
    gap-right: 8px;
  }

  [dir="rtl"] .box--sm\:gap-right-2 {
    gap-left: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-2 {
    gap-bottom: 8px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-2 {
    gap-left: 8px;
  }

  [dir="rtl"] .box--sm\:gap-left-2 {
    gap-right: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-2 {
    gap-inline: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-2 {
    gap-inline-start: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-2 {
    gap-inline-end: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-2 {
    gap-top: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-2 {
    gap-right: 8px;
  }

  [dir="rtl"] .box--md\:gap-right-2 {
    gap-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-2 {
    gap-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-2 {
    gap-left: 8px;
  }

  [dir="rtl"] .box--md\:gap-left-2 {
    gap-right: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-2 {
    gap-inline: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-2 {
    gap-inline-start: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-2 {
    gap-inline-end: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-2 {
    gap-top: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-2 {
    gap-right: 8px;
  }

  [dir="rtl"] .box--lg\:gap-right-2 {
    gap-left: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-2 {
    gap-bottom: 8px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-2 {
    gap-left: 8px;
  }

  [dir="rtl"] .box--lg\:gap-left-2 {
    gap-right: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-2 {
    gap-inline: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-2 {
    gap-inline-start: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-2 {
    gap-inline-end: 8px;
  }
}

.box--gap-top-3 {
  gap-top: 12px;
}

[dir="ltr"] .box--gap-right-3 {
  gap-right: 12px;
}

[dir="rtl"] .box--gap-right-3 {
  gap-left: 12px;
}

.box--gap-bottom-3 {
  gap-bottom: 12px;
}

[dir="ltr"] .box--gap-left-3 {
  gap-left: 12px;
}

[dir="rtl"] .box--gap-left-3 {
  gap-right: 12px;
}

.box--gap-inline-3 {
  gap-inline: 12px;
}

.box--gap-inline-start-3 {
  gap-inline-start: 12px;
}

.box--gap-inline-end-3 {
  gap-inline-end: 12px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-3 {
    gap-top: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-3 {
    gap-right: 12px;
  }

  [dir="rtl"] .box--sm\:gap-right-3 {
    gap-left: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-3 {
    gap-bottom: 12px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-3 {
    gap-left: 12px;
  }

  [dir="rtl"] .box--sm\:gap-left-3 {
    gap-right: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-3 {
    gap-inline: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-3 {
    gap-inline-start: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-3 {
    gap-inline-end: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-3 {
    gap-top: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-3 {
    gap-right: 12px;
  }

  [dir="rtl"] .box--md\:gap-right-3 {
    gap-left: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-3 {
    gap-bottom: 12px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-3 {
    gap-left: 12px;
  }

  [dir="rtl"] .box--md\:gap-left-3 {
    gap-right: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-3 {
    gap-inline: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-3 {
    gap-inline-start: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-3 {
    gap-inline-end: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-3 {
    gap-top: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-3 {
    gap-right: 12px;
  }

  [dir="rtl"] .box--lg\:gap-right-3 {
    gap-left: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-3 {
    gap-bottom: 12px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-3 {
    gap-left: 12px;
  }

  [dir="rtl"] .box--lg\:gap-left-3 {
    gap-right: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-3 {
    gap-inline: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-3 {
    gap-inline-start: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-3 {
    gap-inline-end: 12px;
  }
}

.box--gap-top-4 {
  gap-top: 16px;
}

[dir="ltr"] .box--gap-right-4 {
  gap-right: 16px;
}

[dir="rtl"] .box--gap-right-4 {
  gap-left: 16px;
}

.box--gap-bottom-4 {
  gap-bottom: 16px;
}

[dir="ltr"] .box--gap-left-4 {
  gap-left: 16px;
}

[dir="rtl"] .box--gap-left-4 {
  gap-right: 16px;
}

.box--gap-inline-4 {
  gap-inline: 16px;
}

.box--gap-inline-start-4 {
  gap-inline-start: 16px;
}

.box--gap-inline-end-4 {
  gap-inline-end: 16px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-4 {
    gap-top: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-4 {
    gap-right: 16px;
  }

  [dir="rtl"] .box--sm\:gap-right-4 {
    gap-left: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-4 {
    gap-bottom: 16px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-4 {
    gap-left: 16px;
  }

  [dir="rtl"] .box--sm\:gap-left-4 {
    gap-right: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-4 {
    gap-inline: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-4 {
    gap-inline-start: 16px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-4 {
    gap-inline-end: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-4 {
    gap-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-4 {
    gap-right: 16px;
  }

  [dir="rtl"] .box--md\:gap-right-4 {
    gap-left: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-4 {
    gap-bottom: 16px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-4 {
    gap-left: 16px;
  }

  [dir="rtl"] .box--md\:gap-left-4 {
    gap-right: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-4 {
    gap-inline: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-4 {
    gap-inline-start: 16px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-4 {
    gap-inline-end: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-4 {
    gap-top: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-4 {
    gap-right: 16px;
  }

  [dir="rtl"] .box--lg\:gap-right-4 {
    gap-left: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-4 {
    gap-bottom: 16px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-4 {
    gap-left: 16px;
  }

  [dir="rtl"] .box--lg\:gap-left-4 {
    gap-right: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-4 {
    gap-inline: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-4 {
    gap-inline-start: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-4 {
    gap-inline-end: 16px;
  }
}

.box--gap-top-5 {
  gap-top: 20px;
}

[dir="ltr"] .box--gap-right-5 {
  gap-right: 20px;
}

[dir="rtl"] .box--gap-right-5 {
  gap-left: 20px;
}

.box--gap-bottom-5 {
  gap-bottom: 20px;
}

[dir="ltr"] .box--gap-left-5 {
  gap-left: 20px;
}

[dir="rtl"] .box--gap-left-5 {
  gap-right: 20px;
}

.box--gap-inline-5 {
  gap-inline: 20px;
}

.box--gap-inline-start-5 {
  gap-inline-start: 20px;
}

.box--gap-inline-end-5 {
  gap-inline-end: 20px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-5 {
    gap-top: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-5 {
    gap-right: 20px;
  }

  [dir="rtl"] .box--sm\:gap-right-5 {
    gap-left: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-5 {
    gap-bottom: 20px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-5 {
    gap-left: 20px;
  }

  [dir="rtl"] .box--sm\:gap-left-5 {
    gap-right: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-5 {
    gap-inline: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-5 {
    gap-inline-start: 20px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-5 {
    gap-inline-end: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-5 {
    gap-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-5 {
    gap-right: 20px;
  }

  [dir="rtl"] .box--md\:gap-right-5 {
    gap-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-5 {
    gap-bottom: 20px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-5 {
    gap-left: 20px;
  }

  [dir="rtl"] .box--md\:gap-left-5 {
    gap-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-5 {
    gap-inline: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-5 {
    gap-inline-start: 20px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-5 {
    gap-inline-end: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-5 {
    gap-top: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-5 {
    gap-right: 20px;
  }

  [dir="rtl"] .box--lg\:gap-right-5 {
    gap-left: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-5 {
    gap-bottom: 20px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-5 {
    gap-left: 20px;
  }

  [dir="rtl"] .box--lg\:gap-left-5 {
    gap-right: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-5 {
    gap-inline: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-5 {
    gap-inline-start: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-5 {
    gap-inline-end: 20px;
  }
}

.box--gap-top-6 {
  gap-top: 24px;
}

[dir="ltr"] .box--gap-right-6 {
  gap-right: 24px;
}

[dir="rtl"] .box--gap-right-6 {
  gap-left: 24px;
}

.box--gap-bottom-6 {
  gap-bottom: 24px;
}

[dir="ltr"] .box--gap-left-6 {
  gap-left: 24px;
}

[dir="rtl"] .box--gap-left-6 {
  gap-right: 24px;
}

.box--gap-inline-6 {
  gap-inline: 24px;
}

.box--gap-inline-start-6 {
  gap-inline-start: 24px;
}

.box--gap-inline-end-6 {
  gap-inline-end: 24px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-6 {
    gap-top: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-6 {
    gap-right: 24px;
  }

  [dir="rtl"] .box--sm\:gap-right-6 {
    gap-left: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-6 {
    gap-bottom: 24px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-6 {
    gap-left: 24px;
  }

  [dir="rtl"] .box--sm\:gap-left-6 {
    gap-right: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-6 {
    gap-inline: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-6 {
    gap-inline-start: 24px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-6 {
    gap-inline-end: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-6 {
    gap-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-6 {
    gap-right: 24px;
  }

  [dir="rtl"] .box--md\:gap-right-6 {
    gap-left: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-6 {
    gap-bottom: 24px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-6 {
    gap-left: 24px;
  }

  [dir="rtl"] .box--md\:gap-left-6 {
    gap-right: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-6 {
    gap-inline: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-6 {
    gap-inline-start: 24px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-6 {
    gap-inline-end: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-6 {
    gap-top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-6 {
    gap-right: 24px;
  }

  [dir="rtl"] .box--lg\:gap-right-6 {
    gap-left: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-6 {
    gap-bottom: 24px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-6 {
    gap-left: 24px;
  }

  [dir="rtl"] .box--lg\:gap-left-6 {
    gap-right: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-6 {
    gap-inline: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-6 {
    gap-inline-start: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-6 {
    gap-inline-end: 24px;
  }
}

.box--gap-top-7 {
  gap-top: 28px;
}

[dir="ltr"] .box--gap-right-7 {
  gap-right: 28px;
}

[dir="rtl"] .box--gap-right-7 {
  gap-left: 28px;
}

.box--gap-bottom-7 {
  gap-bottom: 28px;
}

[dir="ltr"] .box--gap-left-7 {
  gap-left: 28px;
}

[dir="rtl"] .box--gap-left-7 {
  gap-right: 28px;
}

.box--gap-inline-7 {
  gap-inline: 28px;
}

.box--gap-inline-start-7 {
  gap-inline-start: 28px;
}

.box--gap-inline-end-7 {
  gap-inline-end: 28px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-7 {
    gap-top: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-7 {
    gap-right: 28px;
  }

  [dir="rtl"] .box--sm\:gap-right-7 {
    gap-left: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-7 {
    gap-bottom: 28px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-7 {
    gap-left: 28px;
  }

  [dir="rtl"] .box--sm\:gap-left-7 {
    gap-right: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-7 {
    gap-inline: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-7 {
    gap-inline-start: 28px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-7 {
    gap-inline-end: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-7 {
    gap-top: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-7 {
    gap-right: 28px;
  }

  [dir="rtl"] .box--md\:gap-right-7 {
    gap-left: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-7 {
    gap-bottom: 28px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-7 {
    gap-left: 28px;
  }

  [dir="rtl"] .box--md\:gap-left-7 {
    gap-right: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-7 {
    gap-inline: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-7 {
    gap-inline-start: 28px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-7 {
    gap-inline-end: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-7 {
    gap-top: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-7 {
    gap-right: 28px;
  }

  [dir="rtl"] .box--lg\:gap-right-7 {
    gap-left: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-7 {
    gap-bottom: 28px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-7 {
    gap-left: 28px;
  }

  [dir="rtl"] .box--lg\:gap-left-7 {
    gap-right: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-7 {
    gap-inline: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-7 {
    gap-inline-start: 28px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-7 {
    gap-inline-end: 28px;
  }
}

.box--gap-top-8 {
  gap-top: 32px;
}

[dir="ltr"] .box--gap-right-8 {
  gap-right: 32px;
}

[dir="rtl"] .box--gap-right-8 {
  gap-left: 32px;
}

.box--gap-bottom-8 {
  gap-bottom: 32px;
}

[dir="ltr"] .box--gap-left-8 {
  gap-left: 32px;
}

[dir="rtl"] .box--gap-left-8 {
  gap-right: 32px;
}

.box--gap-inline-8 {
  gap-inline: 32px;
}

.box--gap-inline-start-8 {
  gap-inline-start: 32px;
}

.box--gap-inline-end-8 {
  gap-inline-end: 32px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-8 {
    gap-top: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-8 {
    gap-right: 32px;
  }

  [dir="rtl"] .box--sm\:gap-right-8 {
    gap-left: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-8 {
    gap-bottom: 32px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-8 {
    gap-left: 32px;
  }

  [dir="rtl"] .box--sm\:gap-left-8 {
    gap-right: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-8 {
    gap-inline: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-8 {
    gap-inline-start: 32px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-8 {
    gap-inline-end: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-8 {
    gap-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-8 {
    gap-right: 32px;
  }

  [dir="rtl"] .box--md\:gap-right-8 {
    gap-left: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-8 {
    gap-bottom: 32px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-8 {
    gap-left: 32px;
  }

  [dir="rtl"] .box--md\:gap-left-8 {
    gap-right: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-8 {
    gap-inline: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-8 {
    gap-inline-start: 32px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-8 {
    gap-inline-end: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-8 {
    gap-top: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-8 {
    gap-right: 32px;
  }

  [dir="rtl"] .box--lg\:gap-right-8 {
    gap-left: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-8 {
    gap-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-8 {
    gap-left: 32px;
  }

  [dir="rtl"] .box--lg\:gap-left-8 {
    gap-right: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-8 {
    gap-inline: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-8 {
    gap-inline-start: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-8 {
    gap-inline-end: 32px;
  }
}

.box--gap-top-9 {
  gap-top: 36px;
}

[dir="ltr"] .box--gap-right-9 {
  gap-right: 36px;
}

[dir="rtl"] .box--gap-right-9 {
  gap-left: 36px;
}

.box--gap-bottom-9 {
  gap-bottom: 36px;
}

[dir="ltr"] .box--gap-left-9 {
  gap-left: 36px;
}

[dir="rtl"] .box--gap-left-9 {
  gap-right: 36px;
}

.box--gap-inline-9 {
  gap-inline: 36px;
}

.box--gap-inline-start-9 {
  gap-inline-start: 36px;
}

.box--gap-inline-end-9 {
  gap-inline-end: 36px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-9 {
    gap-top: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-9 {
    gap-right: 36px;
  }

  [dir="rtl"] .box--sm\:gap-right-9 {
    gap-left: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-9 {
    gap-bottom: 36px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-9 {
    gap-left: 36px;
  }

  [dir="rtl"] .box--sm\:gap-left-9 {
    gap-right: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-9 {
    gap-inline: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-9 {
    gap-inline-start: 36px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-9 {
    gap-inline-end: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-9 {
    gap-top: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-9 {
    gap-right: 36px;
  }

  [dir="rtl"] .box--md\:gap-right-9 {
    gap-left: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-9 {
    gap-bottom: 36px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-9 {
    gap-left: 36px;
  }

  [dir="rtl"] .box--md\:gap-left-9 {
    gap-right: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-9 {
    gap-inline: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-9 {
    gap-inline-start: 36px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-9 {
    gap-inline-end: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-9 {
    gap-top: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-9 {
    gap-right: 36px;
  }

  [dir="rtl"] .box--lg\:gap-right-9 {
    gap-left: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-9 {
    gap-bottom: 36px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-9 {
    gap-left: 36px;
  }

  [dir="rtl"] .box--lg\:gap-left-9 {
    gap-right: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-9 {
    gap-inline: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-9 {
    gap-inline-start: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-9 {
    gap-inline-end: 36px;
  }
}

.box--gap-top-10 {
  gap-top: 40px;
}

[dir="ltr"] .box--gap-right-10 {
  gap-right: 40px;
}

[dir="rtl"] .box--gap-right-10 {
  gap-left: 40px;
}

.box--gap-bottom-10 {
  gap-bottom: 40px;
}

[dir="ltr"] .box--gap-left-10 {
  gap-left: 40px;
}

[dir="rtl"] .box--gap-left-10 {
  gap-right: 40px;
}

.box--gap-inline-10 {
  gap-inline: 40px;
}

.box--gap-inline-start-10 {
  gap-inline-start: 40px;
}

.box--gap-inline-end-10 {
  gap-inline-end: 40px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-10 {
    gap-top: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-10 {
    gap-right: 40px;
  }

  [dir="rtl"] .box--sm\:gap-right-10 {
    gap-left: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-10 {
    gap-bottom: 40px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-10 {
    gap-left: 40px;
  }

  [dir="rtl"] .box--sm\:gap-left-10 {
    gap-right: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-10 {
    gap-inline: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-10 {
    gap-inline-start: 40px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-10 {
    gap-inline-end: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-10 {
    gap-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-10 {
    gap-right: 40px;
  }

  [dir="rtl"] .box--md\:gap-right-10 {
    gap-left: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-10 {
    gap-bottom: 40px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-10 {
    gap-left: 40px;
  }

  [dir="rtl"] .box--md\:gap-left-10 {
    gap-right: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-10 {
    gap-inline: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-10 {
    gap-inline-start: 40px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-10 {
    gap-inline-end: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-10 {
    gap-top: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-10 {
    gap-right: 40px;
  }

  [dir="rtl"] .box--lg\:gap-right-10 {
    gap-left: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-10 {
    gap-bottom: 40px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-10 {
    gap-left: 40px;
  }

  [dir="rtl"] .box--lg\:gap-left-10 {
    gap-right: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-10 {
    gap-inline: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-10 {
    gap-inline-start: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-10 {
    gap-inline-end: 40px;
  }
}

.box--gap-top-11 {
  gap-top: 44px;
}

[dir="ltr"] .box--gap-right-11 {
  gap-right: 44px;
}

[dir="rtl"] .box--gap-right-11 {
  gap-left: 44px;
}

.box--gap-bottom-11 {
  gap-bottom: 44px;
}

[dir="ltr"] .box--gap-left-11 {
  gap-left: 44px;
}

[dir="rtl"] .box--gap-left-11 {
  gap-right: 44px;
}

.box--gap-inline-11 {
  gap-inline: 44px;
}

.box--gap-inline-start-11 {
  gap-inline-start: 44px;
}

.box--gap-inline-end-11 {
  gap-inline-end: 44px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-11 {
    gap-top: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-11 {
    gap-right: 44px;
  }

  [dir="rtl"] .box--sm\:gap-right-11 {
    gap-left: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-11 {
    gap-bottom: 44px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-11 {
    gap-left: 44px;
  }

  [dir="rtl"] .box--sm\:gap-left-11 {
    gap-right: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-11 {
    gap-inline: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-11 {
    gap-inline-start: 44px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-11 {
    gap-inline-end: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-11 {
    gap-top: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-11 {
    gap-right: 44px;
  }

  [dir="rtl"] .box--md\:gap-right-11 {
    gap-left: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-11 {
    gap-bottom: 44px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-11 {
    gap-left: 44px;
  }

  [dir="rtl"] .box--md\:gap-left-11 {
    gap-right: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-11 {
    gap-inline: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-11 {
    gap-inline-start: 44px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-11 {
    gap-inline-end: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-11 {
    gap-top: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-11 {
    gap-right: 44px;
  }

  [dir="rtl"] .box--lg\:gap-right-11 {
    gap-left: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-11 {
    gap-bottom: 44px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-11 {
    gap-left: 44px;
  }

  [dir="rtl"] .box--lg\:gap-left-11 {
    gap-right: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-11 {
    gap-inline: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-11 {
    gap-inline-start: 44px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-11 {
    gap-inline-end: 44px;
  }
}

.box--gap-top-12 {
  gap-top: 48px;
}

[dir="ltr"] .box--gap-right-12 {
  gap-right: 48px;
}

[dir="rtl"] .box--gap-right-12 {
  gap-left: 48px;
}

.box--gap-bottom-12 {
  gap-bottom: 48px;
}

[dir="ltr"] .box--gap-left-12 {
  gap-left: 48px;
}

[dir="rtl"] .box--gap-left-12 {
  gap-right: 48px;
}

.box--gap-inline-12 {
  gap-inline: 48px;
}

.box--gap-inline-start-12 {
  gap-inline-start: 48px;
}

.box--gap-inline-end-12 {
  gap-inline-end: 48px;
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-top-12 {
    gap-top: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-right-12 {
    gap-right: 48px;
  }

  [dir="rtl"] .box--sm\:gap-right-12 {
    gap-left: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-bottom-12 {
    gap-bottom: 48px;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:gap-left-12 {
    gap-left: 48px;
  }

  [dir="rtl"] .box--sm\:gap-left-12 {
    gap-right: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-12 {
    gap-inline: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-start-12 {
    gap-inline-start: 48px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:gap-inline-end-12 {
    gap-inline-end: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-top-12 {
    gap-top: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-right-12 {
    gap-right: 48px;
  }

  [dir="rtl"] .box--md\:gap-right-12 {
    gap-left: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-bottom-12 {
    gap-bottom: 48px;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:gap-left-12 {
    gap-left: 48px;
  }

  [dir="rtl"] .box--md\:gap-left-12 {
    gap-right: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-12 {
    gap-inline: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-start-12 {
    gap-inline-start: 48px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:gap-inline-end-12 {
    gap-inline-end: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-top-12 {
    gap-top: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-right-12 {
    gap-right: 48px;
  }

  [dir="rtl"] .box--lg\:gap-right-12 {
    gap-left: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-bottom-12 {
    gap-bottom: 48px;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:gap-left-12 {
    gap-left: 48px;
  }

  [dir="rtl"] .box--lg\:gap-left-12 {
    gap-right: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-12 {
    gap-inline: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-start-12 {
    gap-inline-start: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:gap-inline-end-12 {
    gap-inline-end: 48px;
  }
}

.box--border-width-0 {
  border-width: 0px;
}

.box--border-width-1 {
  border-width: 1px;
}

.box--border-width-2 {
  border-width: 2px;
}

.box--border-width-3 {
  border-width: 3px;
}

.box--border-width-4 {
  border-width: 4px;
}

.box--border-width-5 {
  border-width: 5px;
}

.box--border-width-6 {
  border-width: 6px;
}

.box--border-width-7 {
  border-width: 7px;
}

.box--border-width-8 {
  border-width: 8px;
}

.box--border-width-9 {
  border-width: 9px;
}

.box--border-width-10 {
  border-width: 10px;
}

.box--border-width-11 {
  border-width: 11px;
}

.box--border-width-12 {
  border-width: 12px;
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-0 {
    border-width: 0px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-1 {
    border-width: 1px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-2 {
    border-width: 2px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-3 {
    border-width: 3px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-4 {
    border-width: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-5 {
    border-width: 5px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-6 {
    border-width: 6px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-7 {
    border-width: 7px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-8 {
    border-width: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-9 {
    border-width: 9px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-10 {
    border-width: 10px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-11 {
    border-width: 11px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-width-12 {
    border-width: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-0 {
    border-width: 0px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-1 {
    border-width: 1px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-2 {
    border-width: 2px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-3 {
    border-width: 3px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-4 {
    border-width: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-5 {
    border-width: 5px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-6 {
    border-width: 6px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-7 {
    border-width: 7px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-8 {
    border-width: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-9 {
    border-width: 9px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-10 {
    border-width: 10px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-11 {
    border-width: 11px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-width-12 {
    border-width: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-0 {
    border-width: 0px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-1 {
    border-width: 1px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-2 {
    border-width: 2px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-3 {
    border-width: 3px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-4 {
    border-width: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-5 {
    border-width: 5px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-6 {
    border-width: 6px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-7 {
    border-width: 7px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-8 {
    border-width: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-9 {
    border-width: 9px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-10 {
    border-width: 10px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-11 {
    border-width: 11px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-width-12 {
    border-width: 12px;
  }
}

.box--border-color-background-default {
  border-color: var(--color-background-default);
}

.box--border-color-background-alternative {
  border-color: var(--color-background-alternative);
}

.box--border-color-background-muted {
  border-color: var(--color-background-muted);
}

.box--border-color-background-hover {
  border-color: var(--color-background-hover);
}

.box--border-color-background-pressed {
  border-color: var(--color-background-pressed);
}

.box--border-color-text-default {
  border-color: var(--color-text-default);
}

.box--border-color-text-alternative {
  border-color: var(--color-text-alternative);
}

.box--border-color-text-muted {
  border-color: var(--color-text-muted);
}

.box--border-color-icon-default {
  border-color: var(--color-icon-default);
}

.box--border-color-icon-alternative {
  border-color: var(--color-icon-alternative);
}

.box--border-color-icon-muted {
  border-color: var(--color-icon-muted);
}

.box--border-color-border-default {
  border-color: var(--color-border-default);
}

.box--border-color-border-muted {
  border-color: var(--color-border-muted);
}

.box--border-color-overlay-default {
  border-color: var(--color-overlay-default);
}

.box--border-color-overlay-alternative {
  border-color: var(--color-overlay-alternative);
}

.box--border-color-overlay-inverse {
  border-color: var(--color-overlay-inverse);
}

.box--border-color-primary-default {
  border-color: var(--color-primary-default);
}

.box--border-color-primary-alternative {
  border-color: var(--color-primary-alternative);
}

.box--border-color-primary-muted {
  border-color: var(--color-primary-muted);
}

.box--border-color-primary-inverse {
  border-color: var(--color-primary-inverse);
}

.box--border-color-error-default {
  border-color: var(--color-error-default);
}

.box--border-color-error-alternative {
  border-color: var(--color-error-alternative);
}

.box--border-color-error-muted {
  border-color: var(--color-error-muted);
}

.box--border-color-error-inverse {
  border-color: var(--color-error-inverse);
}

.box--border-color-warning-default {
  border-color: var(--color-warning-default);
}

.box--border-color-warning-muted {
  border-color: var(--color-warning-muted);
}

.box--border-color-warning-inverse {
  border-color: var(--color-warning-inverse);
}

.box--border-color-success-default {
  border-color: var(--color-success-default);
}

.box--border-color-success-muted {
  border-color: var(--color-success-muted);
}

.box--border-color-success-inverse {
  border-color: var(--color-success-inverse);
}

.box--border-color-info-default {
  border-color: var(--color-info-default);
}

.box--border-color-info-muted {
  border-color: var(--color-info-muted);
}

.box--border-color-info-inverse {
  border-color: var(--color-info-inverse);
}

.box--border-color-goerli {
  border-color: var(--color-network-goerli-default);
}

.box--border-color-sepolia {
  border-color: var(--color-network-sepolia-default);
}

.box--border-color-goerli-inverse {
  border-color: var(--color-network-goerli-inverse);
}

.box--border-color-sepolia-inverse {
  border-color: var(--color-network-sepolia-inverse);
}

.box--border-color-linea-goerli {
  border-color: var(--color-network-linea-goerli-default);
}

.box--border-color-linea-goerli-inverse {
  border-color: var(--color-network-linea-goerli-inverse);
}

.box--border-color-linea-sepolia {
  border-color: var(--color-network-linea-sepolia-default);
}

.box--border-color-linea-sepolia-inverse {
  border-color: var(--color-network-linea-sepolia-inverse);
}

.box--border-color-linea-mainnet {
  border-color: var(--color-network-linea-mainnet-default);
}

.box--border-color-linea-mainnet-inverse {
  border-color: var(--color-network-linea-mainnet-inverse);
}

.box--border-color-localhost {
  border-color: var(--color-network-localhost-default);
}

.box--border-color-transparent {
  border-color: var(--transparent);
}

.box--border-color-flask-purple {
  border-color: var(--color-flask-default);
}

.box--border-color-inherit {
  border-color: var(--inherit);
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-background-default {
    border-color: var(--color-background-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-background-alternative {
    border-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-background-muted {
    border-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-background-hover {
    border-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-background-pressed {
    border-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-text-default {
    border-color: var(--color-text-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-text-alternative {
    border-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-text-muted {
    border-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-icon-default {
    border-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-icon-alternative {
    border-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-icon-muted {
    border-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-border-default {
    border-color: var(--color-border-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-border-muted {
    border-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-overlay-default {
    border-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-overlay-alternative {
    border-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-overlay-inverse {
    border-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-primary-default {
    border-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-primary-alternative {
    border-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-primary-muted {
    border-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-primary-inverse {
    border-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-error-default {
    border-color: var(--color-error-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-error-alternative {
    border-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-error-muted {
    border-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-error-inverse {
    border-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-warning-default {
    border-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-warning-muted {
    border-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-warning-inverse {
    border-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-success-default {
    border-color: var(--color-success-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-success-muted {
    border-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-success-inverse {
    border-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-info-default {
    border-color: var(--color-info-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-info-muted {
    border-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-info-inverse {
    border-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-goerli {
    border-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-sepolia {
    border-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-goerli-inverse {
    border-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-sepolia-inverse {
    border-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-linea-goerli {
    border-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-linea-goerli-inverse {
    border-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-linea-sepolia {
    border-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-linea-sepolia-inverse {
    border-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-linea-mainnet {
    border-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-linea-mainnet-inverse {
    border-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-localhost {
    border-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-transparent {
    border-color: var(--transparent);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-flask-purple {
    border-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-color-inherit {
    border-color: var(--inherit);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-background-default {
    border-color: var(--color-background-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-background-alternative {
    border-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-background-muted {
    border-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-background-hover {
    border-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-background-pressed {
    border-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-text-default {
    border-color: var(--color-text-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-text-alternative {
    border-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-text-muted {
    border-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-icon-default {
    border-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-icon-alternative {
    border-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-icon-muted {
    border-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-border-default {
    border-color: var(--color-border-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-border-muted {
    border-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-overlay-default {
    border-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-overlay-alternative {
    border-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-overlay-inverse {
    border-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-primary-default {
    border-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-primary-alternative {
    border-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-primary-muted {
    border-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-primary-inverse {
    border-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-error-default {
    border-color: var(--color-error-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-error-alternative {
    border-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-error-muted {
    border-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-error-inverse {
    border-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-warning-default {
    border-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-warning-muted {
    border-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-warning-inverse {
    border-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-success-default {
    border-color: var(--color-success-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-success-muted {
    border-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-success-inverse {
    border-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-info-default {
    border-color: var(--color-info-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-info-muted {
    border-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-info-inverse {
    border-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-goerli {
    border-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-sepolia {
    border-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-goerli-inverse {
    border-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-sepolia-inverse {
    border-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-linea-goerli {
    border-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-linea-goerli-inverse {
    border-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-linea-sepolia {
    border-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-linea-sepolia-inverse {
    border-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-linea-mainnet {
    border-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-linea-mainnet-inverse {
    border-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-localhost {
    border-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-transparent {
    border-color: var(--transparent);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-flask-purple {
    border-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-color-inherit {
    border-color: var(--inherit);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-background-default {
    border-color: var(--color-background-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-background-alternative {
    border-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-background-muted {
    border-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-background-hover {
    border-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-background-pressed {
    border-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-text-default {
    border-color: var(--color-text-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-text-alternative {
    border-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-text-muted {
    border-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-icon-default {
    border-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-icon-alternative {
    border-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-icon-muted {
    border-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-border-default {
    border-color: var(--color-border-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-border-muted {
    border-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-overlay-default {
    border-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-overlay-alternative {
    border-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-overlay-inverse {
    border-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-primary-default {
    border-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-primary-alternative {
    border-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-primary-muted {
    border-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-primary-inverse {
    border-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-error-default {
    border-color: var(--color-error-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-error-alternative {
    border-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-error-muted {
    border-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-error-inverse {
    border-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-warning-default {
    border-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-warning-muted {
    border-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-warning-inverse {
    border-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-success-default {
    border-color: var(--color-success-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-success-muted {
    border-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-success-inverse {
    border-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-info-default {
    border-color: var(--color-info-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-info-muted {
    border-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-info-inverse {
    border-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-goerli {
    border-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-sepolia {
    border-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-goerli-inverse {
    border-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-sepolia-inverse {
    border-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-linea-goerli {
    border-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-linea-goerli-inverse {
    border-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-linea-sepolia {
    border-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-linea-sepolia-inverse {
    border-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-linea-mainnet {
    border-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-linea-mainnet-inverse {
    border-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-localhost {
    border-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-transparent {
    border-color: var(--transparent);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-flask-purple {
    border-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-color-inherit {
    border-color: var(--inherit);
  }
}

.box--border-style-solid {
  border-style: solid;
}

.box--border-style-double {
  border-style: double;
}

.box--border-style-none {
  border-style: none;
}

.box--border-style-dashed {
  border-style: dashed;
}

.box--border-style-dotted {
  border-style: dotted;
}

@media screen and (min-width: 576px) {
  .box--sm\:border-style-solid {
    border-style: solid;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-style-double {
    border-style: double;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-style-none {
    border-style: none;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-style-dashed {
    border-style: dashed;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:border-style-dotted {
    border-style: dotted;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-style-solid {
    border-style: solid;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-style-double {
    border-style: double;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-style-none {
    border-style: none;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-style-dashed {
    border-style: dashed;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:border-style-dotted {
    border-style: dotted;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-style-solid {
    border-style: solid;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-style-double {
    border-style: double;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-style-none {
    border-style: none;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-style-dashed {
    border-style: dashed;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:border-style-dotted {
    border-style: dotted;
  }
}

.box--rounded-xs {
  border-radius: 2px;
}

.box--rounded-sm {
  border-radius: 4px;
}

.box--rounded-md {
  border-radius: 6px;
}

.box--rounded-lg {
  border-radius: 8px;
}

.box--rounded-xl {
  border-radius: 12px;
}

.box--rounded-full {
  border-radius: 50%;
}

.box--rounded-pill {
  border-radius: 9999px;
}

.box--rounded-none {
  border-radius: 0;
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-xs {
    border-radius: 2px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-sm {
    border-radius: 4px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-md {
    border-radius: 6px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-lg {
    border-radius: 8px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-xl {
    border-radius: 12px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-full {
    border-radius: 50%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-pill {
    border-radius: 9999px;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:rounded-none {
    border-radius: 0;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-xs {
    border-radius: 2px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-sm {
    border-radius: 4px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-md {
    border-radius: 6px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-lg {
    border-radius: 8px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-xl {
    border-radius: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-full {
    border-radius: 50%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-pill {
    border-radius: 9999px;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:rounded-none {
    border-radius: 0;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-xs {
    border-radius: 2px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-sm {
    border-radius: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-md {
    border-radius: 6px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-lg {
    border-radius: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-xl {
    border-radius: 12px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-full {
    border-radius: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-pill {
    border-radius: 9999px;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:rounded-none {
    border-radius: 0;
  }
}

.box--display-block {
  display: block;
}

.box--display-flex {
  display: flex;
}

.box--display-grid {
  display: grid;
}

.box--display-inline-block {
  display: inline-block;
}

.box--display-inline-grid {
  display: inline-grid;
}

.box--display-inline-flex {
  display: inline-flex;
}

.box--display-list-item {
  display: list-item;
}

.box--display-none {
  display: none;
}

@media screen and (min-width: 576px) {
  .box--sm\:display-block {
    display: block;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:display-flex {
    display: flex;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:display-grid {
    display: grid;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:display-inline-block {
    display: inline-block;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:display-inline-grid {
    display: inline-grid;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:display-inline-flex {
    display: inline-flex;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:display-list-item {
    display: list-item;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:display-none {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-block {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-flex {
    display: flex;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-grid {
    display: grid;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-inline-block {
    display: inline-block;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-inline-grid {
    display: inline-grid;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-inline-flex {
    display: inline-flex;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-list-item {
    display: list-item;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:display-none {
    display: none;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-block {
    display: block;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-flex {
    display: flex;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-grid {
    display: grid;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-inline-block {
    display: inline-block;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-inline-grid {
    display: inline-grid;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-inline-flex {
    display: inline-flex;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-list-item {
    display: list-item;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:display-none {
    display: none;
  }
}

.box--align-items-baseline {
  align-items: baseline;
}

.box--align-items-center {
  align-items: center;
}

.box--align-items-flex-end {
  align-items: flex-end;
}

.box--align-items-flex-start {
  align-items: flex-start;
}

.box--align-items-stretch {
  align-items: stretch;
}

@media screen and (min-width: 576px) {
  .box--sm\:align-items-baseline {
    align-items: baseline;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:align-items-center {
    align-items: center;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:align-items-flex-end {
    align-items: flex-end;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:align-items-flex-start {
    align-items: flex-start;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:align-items-stretch {
    align-items: stretch;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:align-items-baseline {
    align-items: baseline;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:align-items-center {
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:align-items-flex-end {
    align-items: flex-end;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:align-items-flex-start {
    align-items: flex-start;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:align-items-stretch {
    align-items: stretch;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:align-items-baseline {
    align-items: baseline;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:align-items-center {
    align-items: center;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:align-items-flex-end {
    align-items: flex-end;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:align-items-flex-start {
    align-items: flex-start;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:align-items-stretch {
    align-items: stretch;
  }
}

.box--justify-content-center {
  justify-content: center;
}

.box--justify-content-flex-end {
  justify-content: flex-end;
}

.box--justify-content-flex-start {
  justify-content: flex-start;
}

.box--justify-content-space-around {
  justify-content: space-around;
}

.box--justify-content-space-between {
  justify-content: space-between;
}

.box--justify-content-space-evenly {
  justify-content: space-evenly;
}

@media screen and (min-width: 576px) {
  .box--sm\:justify-content-center {
    justify-content: center;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:justify-content-flex-end {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:justify-content-flex-start {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:justify-content-space-around {
    justify-content: space-around;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:justify-content-space-between {
    justify-content: space-between;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:justify-content-center {
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:justify-content-flex-end {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:justify-content-flex-start {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:justify-content-space-around {
    justify-content: space-around;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:justify-content-space-between {
    justify-content: space-between;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:justify-content-center {
    justify-content: center;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:justify-content-flex-end {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:justify-content-flex-start {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:justify-content-space-around {
    justify-content: space-around;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:justify-content-space-between {
    justify-content: space-between;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

.box--flex-direction-row {
  flex-direction: row;
}

.box--flex-direction-row-reverse {
  flex-direction: row-reverse;
}

.box--flex-direction-column {
  flex-direction: column;
}

.box--flex-direction-column-reverse {
  flex-direction: column-reverse;
}

@media screen and (min-width: 576px) {
  .box--sm\:flex-direction-row {
    flex-direction: row;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:flex-direction-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:flex-direction-row {
    flex-direction: row;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:flex-direction-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:flex-direction-row {
    flex-direction: row;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:flex-direction-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
}

.box--flex-wrap-wrap {
  flex-wrap: wrap;
}

.box--flex-wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.box--flex-wrap-nowrap {
  flex-wrap: nowrap;
}

@media screen and (min-width: 576px) {
  .box--sm\:flex-wrap-wrap {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:flex-wrap-wrap {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:flex-wrap-wrap {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}

.box--width-full {
  width: 100%;
}

.box--height-full {
  height: 100%;
}

.box--width-0 {
  width: 0;
}

.box--height-0 {
  height: 0;
}

.box--width-1\/2 {
  width: 50%;
}

.box--height-1\/2 {
  height: 50%;
}

.box--width-1\/3 {
  width: 33.333333%;
}

.box--height-1\/3 {
  height: 33.333333%;
}

.box--width-2\/3 {
  width: 66.666667%;
}

.box--height-2\/3 {
  height: 66.666667%;
}

.box--width-1\/4 {
  width: 25%;
}

.box--height-1\/4 {
  height: 25%;
}

.box--width-2\/4 {
  width: 50%;
}

.box--height-2\/4 {
  height: 50%;
}

.box--width-3\/4 {
  width: 75%;
}

.box--height-3\/4 {
  height: 75%;
}

.box--width-1\/5 {
  width: 20%;
}

.box--height-1\/5 {
  height: 20%;
}

.box--width-2\/5 {
  width: 40%;
}

.box--height-2\/5 {
  height: 40%;
}

.box--width-3\/5 {
  width: 60%;
}

.box--height-3\/5 {
  height: 60%;
}

.box--width-4\/5 {
  width: 80%;
}

.box--height-4\/5 {
  height: 80%;
}

.box--width-1\/6 {
  width: 16.666667%;
}

.box--height-1\/6 {
  height: 16.666667%;
}

.box--width-2\/6 {
  width: 33.333333%;
}

.box--height-2\/6 {
  height: 33.333333%;
}

.box--width-3\/6 {
  width: 50%;
}

.box--height-3\/6 {
  height: 50%;
}

.box--width-4\/6 {
  width: 66.666667%;
}

.box--height-4\/6 {
  height: 66.666667%;
}

.box--width-5\/6 {
  width: 83.333333%;
}

.box--height-5\/6 {
  height: 83.333333%;
}

.box--width-1\/12 {
  width: 8.333333%;
}

.box--height-1\/12 {
  height: 8.333333%;
}

.box--width-2\/12 {
  width: 16.666667%;
}

.box--height-2\/12 {
  height: 16.666667%;
}

.box--width-3\/12 {
  width: 25%;
}

.box--height-3\/12 {
  height: 25%;
}

.box--width-4\/12 {
  width: 33.333333%;
}

.box--height-4\/12 {
  height: 33.333333%;
}

.box--width-5\/12 {
  width: 41.666667%;
}

.box--height-5\/12 {
  height: 41.666667%;
}

.box--width-6\/12 {
  width: 50%;
}

.box--height-6\/12 {
  height: 50%;
}

.box--width-7\/12 {
  width: 58.333333%;
}

.box--height-7\/12 {
  height: 58.333333%;
}

.box--width-8\/12 {
  width: 66.666667%;
}

.box--height-8\/12 {
  height: 66.666667%;
}

.box--width-9\/12 {
  width: 75%;
}

.box--height-9\/12 {
  height: 75%;
}

.box--width-10\/12 {
  width: 83.333333%;
}

.box--height-10\/12 {
  height: 83.333333%;
}

.box--width-11\/12 {
  width: 91.666667%;
}

.box--height-11\/12 {
  height: 91.666667%;
}

@media screen and (min-width: 576px) {
  .box--sm\:width-0 {
    width: 0;
  }

  .box--sm\:height-0 {
    height: 0;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-1\/2 {
    width: 50%;
  }

  .box--sm\:height-1\/2 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-1\/3 {
    width: 33.333333%;
  }

  .box--sm\:height-1\/3 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-2\/3 {
    width: 66.666667%;
  }

  .box--sm\:height-2\/3 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-1\/4 {
    width: 25%;
  }

  .box--sm\:height-1\/4 {
    height: 25%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-2\/4 {
    width: 50%;
  }

  .box--sm\:height-2\/4 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-3\/4 {
    width: 75%;
  }

  .box--sm\:height-3\/4 {
    height: 75%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-1\/5 {
    width: 20%;
  }

  .box--sm\:height-1\/5 {
    height: 20%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-2\/5 {
    width: 40%;
  }

  .box--sm\:height-2\/5 {
    height: 40%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-3\/5 {
    width: 60%;
  }

  .box--sm\:height-3\/5 {
    height: 60%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-4\/5 {
    width: 80%;
  }

  .box--sm\:height-4\/5 {
    height: 80%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-1\/6 {
    width: 16.666667%;
  }

  .box--sm\:height-1\/6 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-2\/6 {
    width: 33.333333%;
  }

  .box--sm\:height-2\/6 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-3\/6 {
    width: 50%;
  }

  .box--sm\:height-3\/6 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-4\/6 {
    width: 66.666667%;
  }

  .box--sm\:height-4\/6 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-5\/6 {
    width: 83.333333%;
  }

  .box--sm\:height-5\/6 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-1\/12 {
    width: 8.333333%;
  }

  .box--sm\:height-1\/12 {
    height: 8.333333%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-2\/12 {
    width: 16.666667%;
  }

  .box--sm\:height-2\/12 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-3\/12 {
    width: 25%;
  }

  .box--sm\:height-3\/12 {
    height: 25%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-4\/12 {
    width: 33.333333%;
  }

  .box--sm\:height-4\/12 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-5\/12 {
    width: 41.666667%;
  }

  .box--sm\:height-5\/12 {
    height: 41.666667%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-6\/12 {
    width: 50%;
  }

  .box--sm\:height-6\/12 {
    height: 50%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-7\/12 {
    width: 58.333333%;
  }

  .box--sm\:height-7\/12 {
    height: 58.333333%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-8\/12 {
    width: 66.666667%;
  }

  .box--sm\:height-8\/12 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-9\/12 {
    width: 75%;
  }

  .box--sm\:height-9\/12 {
    height: 75%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-10\/12 {
    width: 83.333333%;
  }

  .box--sm\:height-10\/12 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-11\/12 {
    width: 91.666667%;
  }

  .box--sm\:height-11\/12 {
    height: 91.666667%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-0 {
    width: 0;
  }

  .box--md\:height-0 {
    height: 0;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-1\/2 {
    width: 50%;
  }

  .box--md\:height-1\/2 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-1\/3 {
    width: 33.333333%;
  }

  .box--md\:height-1\/3 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-2\/3 {
    width: 66.666667%;
  }

  .box--md\:height-2\/3 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-1\/4 {
    width: 25%;
  }

  .box--md\:height-1\/4 {
    height: 25%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-2\/4 {
    width: 50%;
  }

  .box--md\:height-2\/4 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-3\/4 {
    width: 75%;
  }

  .box--md\:height-3\/4 {
    height: 75%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-1\/5 {
    width: 20%;
  }

  .box--md\:height-1\/5 {
    height: 20%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-2\/5 {
    width: 40%;
  }

  .box--md\:height-2\/5 {
    height: 40%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-3\/5 {
    width: 60%;
  }

  .box--md\:height-3\/5 {
    height: 60%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-4\/5 {
    width: 80%;
  }

  .box--md\:height-4\/5 {
    height: 80%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-1\/6 {
    width: 16.666667%;
  }

  .box--md\:height-1\/6 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-2\/6 {
    width: 33.333333%;
  }

  .box--md\:height-2\/6 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-3\/6 {
    width: 50%;
  }

  .box--md\:height-3\/6 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-4\/6 {
    width: 66.666667%;
  }

  .box--md\:height-4\/6 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-5\/6 {
    width: 83.333333%;
  }

  .box--md\:height-5\/6 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-1\/12 {
    width: 8.333333%;
  }

  .box--md\:height-1\/12 {
    height: 8.333333%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-2\/12 {
    width: 16.666667%;
  }

  .box--md\:height-2\/12 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-3\/12 {
    width: 25%;
  }

  .box--md\:height-3\/12 {
    height: 25%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-4\/12 {
    width: 33.333333%;
  }

  .box--md\:height-4\/12 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-5\/12 {
    width: 41.666667%;
  }

  .box--md\:height-5\/12 {
    height: 41.666667%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-6\/12 {
    width: 50%;
  }

  .box--md\:height-6\/12 {
    height: 50%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-7\/12 {
    width: 58.333333%;
  }

  .box--md\:height-7\/12 {
    height: 58.333333%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-8\/12 {
    width: 66.666667%;
  }

  .box--md\:height-8\/12 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-9\/12 {
    width: 75%;
  }

  .box--md\:height-9\/12 {
    height: 75%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-10\/12 {
    width: 83.333333%;
  }

  .box--md\:height-10\/12 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-11\/12 {
    width: 91.666667%;
  }

  .box--md\:height-11\/12 {
    height: 91.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-0 {
    width: 0;
  }

  .box--lg\:height-0 {
    height: 0;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-1\/2 {
    width: 50%;
  }

  .box--lg\:height-1\/2 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-1\/3 {
    width: 33.333333%;
  }

  .box--lg\:height-1\/3 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-2\/3 {
    width: 66.666667%;
  }

  .box--lg\:height-2\/3 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-1\/4 {
    width: 25%;
  }

  .box--lg\:height-1\/4 {
    height: 25%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-2\/4 {
    width: 50%;
  }

  .box--lg\:height-2\/4 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-3\/4 {
    width: 75%;
  }

  .box--lg\:height-3\/4 {
    height: 75%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-1\/5 {
    width: 20%;
  }

  .box--lg\:height-1\/5 {
    height: 20%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-2\/5 {
    width: 40%;
  }

  .box--lg\:height-2\/5 {
    height: 40%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-3\/5 {
    width: 60%;
  }

  .box--lg\:height-3\/5 {
    height: 60%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-4\/5 {
    width: 80%;
  }

  .box--lg\:height-4\/5 {
    height: 80%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-1\/6 {
    width: 16.666667%;
  }

  .box--lg\:height-1\/6 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-2\/6 {
    width: 33.333333%;
  }

  .box--lg\:height-2\/6 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-3\/6 {
    width: 50%;
  }

  .box--lg\:height-3\/6 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-4\/6 {
    width: 66.666667%;
  }

  .box--lg\:height-4\/6 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-5\/6 {
    width: 83.333333%;
  }

  .box--lg\:height-5\/6 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-1\/12 {
    width: 8.333333%;
  }

  .box--lg\:height-1\/12 {
    height: 8.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-2\/12 {
    width: 16.666667%;
  }

  .box--lg\:height-2\/12 {
    height: 16.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-3\/12 {
    width: 25%;
  }

  .box--lg\:height-3\/12 {
    height: 25%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-4\/12 {
    width: 33.333333%;
  }

  .box--lg\:height-4\/12 {
    height: 33.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-5\/12 {
    width: 41.666667%;
  }

  .box--lg\:height-5\/12 {
    height: 41.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-6\/12 {
    width: 50%;
  }

  .box--lg\:height-6\/12 {
    height: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-7\/12 {
    width: 58.333333%;
  }

  .box--lg\:height-7\/12 {
    height: 58.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-8\/12 {
    width: 66.666667%;
  }

  .box--lg\:height-8\/12 {
    height: 66.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-9\/12 {
    width: 75%;
  }

  .box--lg\:height-9\/12 {
    height: 75%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-10\/12 {
    width: 83.333333%;
  }

  .box--lg\:height-10\/12 {
    height: 83.333333%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-11\/12 {
    width: 91.666667%;
  }

  .box--lg\:height-11\/12 {
    height: 91.666667%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:width-full {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-full {
    width: 100%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-full {
    width: 100%;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:height-full {
    height: 100%;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:height-full {
    height: 100%;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:height-full {
    height: 100%;
  }
}

.box--height-screen {
  height: 100vh;
}

@media screen and (min-width: 576px) {
  .box--sm\:height-screen {
    height: 100vh;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:height-screen {
    height: 100vh;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:height-screen {
    height: 100vh;
  }
}

.box--width-screen {
  width: 100vw;
}

@media screen and (min-width: 576px) {
  .box--sm\:width-screen {
    width: 100vw;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-screen {
    width: 100vw;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-screen {
    width: 100vw;
  }
}

.box--height-max {
  height: max-content;
}

@media screen and (min-width: 576px) {
  .box--sm\:height-max {
    height: max-content;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:height-max {
    height: max-content;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:height-max {
    height: max-content;
  }
}

.box--width-max {
  width: max-content;
}

@media screen and (min-width: 576px) {
  .box--sm\:height-max {
    height: max-content;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:height-max {
    height: max-content;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:height-max {
    height: max-content;
  }
}

.box--height-min {
  height: min-content;
}

@media screen and (min-width: 576px) {
  .box--sm\:height-min {
    height: min-content;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:height-min {
    height: min-content;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:height-min {
    height: min-content;
  }
}

.box--width-min {
  width: min-content;
}

@media screen and (min-width: 576px) {
  .box--sm\:width-min {
    width: min-content;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:width-min {
    width: min-content;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:width-min {
    width: min-content;
  }
}

[dir="ltr"] .box--text-align-left {
  text-align: left;
}

[dir="rtl"] .box--text-align-left {
  text-align: right;
}

[dir="ltr"] .box--text-align-right {
  text-align: right;
}

[dir="rtl"] .box--text-align-right {
  text-align: left;
}

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

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

.box--text-align-end {
  text-align: end;
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:text-align-left {
    text-align: left;
  }

  [dir="rtl"] .box--sm\:text-align-left {
    text-align: right;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .box--sm\:text-align-right {
    text-align: right;
  }

  [dir="rtl"] .box--sm\:text-align-right {
    text-align: left;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:text-align-center {
    text-align: center;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:text-align-justify {
    text-align: justify;
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:text-align-end {
    text-align: end;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:text-align-left {
    text-align: left;
  }

  [dir="rtl"] .box--md\:text-align-left {
    text-align: right;
  }
}

@media screen and (min-width: 768px) {
  [dir="ltr"] .box--md\:text-align-right {
    text-align: right;
  }

  [dir="rtl"] .box--md\:text-align-right {
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:text-align-center {
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:text-align-justify {
    text-align: justify;
  }
}

@media screen and (min-width: 768px) {
  .box--md\:text-align-end {
    text-align: end;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:text-align-left {
    text-align: left;
  }

  [dir="rtl"] .box--lg\:text-align-left {
    text-align: right;
  }
}

@media screen and (min-width: 1280px) {
  [dir="ltr"] .box--lg\:text-align-right {
    text-align: right;
  }

  [dir="rtl"] .box--lg\:text-align-right {
    text-align: left;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:text-align-center {
    text-align: center;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:text-align-justify {
    text-align: justify;
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:text-align-end {
    text-align: end;
  }
}

.box--background-color-background-default {
  background-color: var(--color-background-default);
}

.box--background-color-background-alternative {
  background-color: var(--color-background-alternative);
}

.box--background-color-background-muted {
  background-color: var(--color-background-muted);
}

.box--background-color-background-hover {
  background-color: var(--color-background-hover);
}

.box--background-color-background-pressed {
  background-color: var(--color-background-pressed);
}

.box--background-color-text-default {
  background-color: var(--color-text-default);
}

.box--background-color-text-alternative {
  background-color: var(--color-text-alternative);
}

.box--background-color-text-muted {
  background-color: var(--color-text-muted);
}

.box--background-color-icon-default {
  background-color: var(--color-icon-default);
}

.box--background-color-icon-alternative {
  background-color: var(--color-icon-alternative);
}

.box--background-color-icon-muted {
  background-color: var(--color-icon-muted);
}

.box--background-color-border-default {
  background-color: var(--color-border-default);
}

.box--background-color-border-muted {
  background-color: var(--color-border-muted);
}

.box--background-color-overlay-default {
  background-color: var(--color-overlay-default);
}

.box--background-color-overlay-alternative {
  background-color: var(--color-overlay-alternative);
}

.box--background-color-overlay-inverse {
  background-color: var(--color-overlay-inverse);
}

.box--background-color-primary-default {
  background-color: var(--color-primary-default);
}

.box--background-color-primary-alternative {
  background-color: var(--color-primary-alternative);
}

.box--background-color-primary-muted {
  background-color: var(--color-primary-muted);
}

.box--background-color-primary-inverse {
  background-color: var(--color-primary-inverse);
}

.box--background-color-error-default {
  background-color: var(--color-error-default);
}

.box--background-color-error-alternative {
  background-color: var(--color-error-alternative);
}

.box--background-color-error-muted {
  background-color: var(--color-error-muted);
}

.box--background-color-error-inverse {
  background-color: var(--color-error-inverse);
}

.box--background-color-warning-default {
  background-color: var(--color-warning-default);
}

.box--background-color-warning-muted {
  background-color: var(--color-warning-muted);
}

.box--background-color-warning-inverse {
  background-color: var(--color-warning-inverse);
}

.box--background-color-success-default {
  background-color: var(--color-success-default);
}

.box--background-color-success-muted {
  background-color: var(--color-success-muted);
}

.box--background-color-success-inverse {
  background-color: var(--color-success-inverse);
}

.box--background-color-info-default {
  background-color: var(--color-info-default);
}

.box--background-color-info-muted {
  background-color: var(--color-info-muted);
}

.box--background-color-info-inverse {
  background-color: var(--color-info-inverse);
}

.box--background-color-goerli {
  background-color: var(--color-network-goerli-default);
}

.box--background-color-sepolia {
  background-color: var(--color-network-sepolia-default);
}

.box--background-color-goerli-inverse {
  background-color: var(--color-network-goerli-inverse);
}

.box--background-color-sepolia-inverse {
  background-color: var(--color-network-sepolia-inverse);
}

.box--background-color-linea-goerli {
  background-color: var(--color-network-linea-goerli-default);
}

.box--background-color-linea-goerli-inverse {
  background-color: var(--color-network-linea-goerli-inverse);
}

.box--background-color-linea-sepolia {
  background-color: var(--color-network-linea-sepolia-default);
}

.box--background-color-linea-sepolia-inverse {
  background-color: var(--color-network-linea-sepolia-inverse);
}

.box--background-color-linea-mainnet {
  background-color: var(--color-network-linea-mainnet-default);
}

.box--background-color-linea-mainnet-inverse {
  background-color: var(--color-network-linea-mainnet-inverse);
}

.box--background-color-localhost {
  background-color: var(--color-network-localhost-default);
}

.box--background-color-transparent {
  background-color: var(--transparent);
}

.box--background-color-flask-purple {
  background-color: var(--color-flask-default);
}

.box--background-color-inherit {
  background-color: var(--inherit);
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-background-default {
    background-color: var(--color-background-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-background-alternative {
    background-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-background-muted {
    background-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-background-hover {
    background-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-background-pressed {
    background-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-text-default {
    background-color: var(--color-text-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-text-alternative {
    background-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-text-muted {
    background-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-icon-default {
    background-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-icon-alternative {
    background-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-icon-muted {
    background-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-border-default {
    background-color: var(--color-border-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-border-muted {
    background-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-overlay-default {
    background-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-overlay-alternative {
    background-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-overlay-inverse {
    background-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-primary-default {
    background-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-primary-alternative {
    background-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-primary-muted {
    background-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-primary-inverse {
    background-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-error-default {
    background-color: var(--color-error-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-error-alternative {
    background-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-error-muted {
    background-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-error-inverse {
    background-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-warning-default {
    background-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-warning-muted {
    background-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-warning-inverse {
    background-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-success-default {
    background-color: var(--color-success-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-success-muted {
    background-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-success-inverse {
    background-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-info-default {
    background-color: var(--color-info-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-info-muted {
    background-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-info-inverse {
    background-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-goerli {
    background-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-sepolia {
    background-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-goerli-inverse {
    background-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-sepolia-inverse {
    background-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-linea-goerli {
    background-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-linea-goerli-inverse {
    background-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-linea-sepolia {
    background-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-linea-sepolia-inverse {
    background-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-linea-mainnet {
    background-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-linea-mainnet-inverse {
    background-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-localhost {
    background-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-transparent {
    background-color: var(--transparent);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-flask-purple {
    background-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\:background-color-inherit {
    background-color: var(--inherit);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-background-default {
    background-color: var(--color-background-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-background-alternative {
    background-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-background-muted {
    background-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-background-hover {
    background-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-background-pressed {
    background-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-text-default {
    background-color: var(--color-text-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-text-alternative {
    background-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-text-muted {
    background-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-icon-default {
    background-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-icon-alternative {
    background-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-icon-muted {
    background-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-border-default {
    background-color: var(--color-border-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-border-muted {
    background-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-overlay-default {
    background-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-overlay-alternative {
    background-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-overlay-inverse {
    background-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-primary-default {
    background-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-primary-alternative {
    background-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-primary-muted {
    background-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-primary-inverse {
    background-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-error-default {
    background-color: var(--color-error-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-error-alternative {
    background-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-error-muted {
    background-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-error-inverse {
    background-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-warning-default {
    background-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-warning-muted {
    background-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-warning-inverse {
    background-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-success-default {
    background-color: var(--color-success-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-success-muted {
    background-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-success-inverse {
    background-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-info-default {
    background-color: var(--color-info-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-info-muted {
    background-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-info-inverse {
    background-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-goerli {
    background-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-sepolia {
    background-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-goerli-inverse {
    background-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-sepolia-inverse {
    background-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-linea-goerli {
    background-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-linea-goerli-inverse {
    background-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-linea-sepolia {
    background-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-linea-sepolia-inverse {
    background-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-linea-mainnet {
    background-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-linea-mainnet-inverse {
    background-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-localhost {
    background-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-transparent {
    background-color: var(--transparent);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-flask-purple {
    background-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\:background-color-inherit {
    background-color: var(--inherit);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-background-default {
    background-color: var(--color-background-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-background-alternative {
    background-color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-background-muted {
    background-color: var(--color-background-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-background-hover {
    background-color: var(--color-background-hover);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-background-pressed {
    background-color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-text-default {
    background-color: var(--color-text-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-text-alternative {
    background-color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-text-muted {
    background-color: var(--color-text-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-icon-default {
    background-color: var(--color-icon-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-icon-alternative {
    background-color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-icon-muted {
    background-color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-border-default {
    background-color: var(--color-border-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-border-muted {
    background-color: var(--color-border-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-overlay-default {
    background-color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-overlay-alternative {
    background-color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-overlay-inverse {
    background-color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-primary-default {
    background-color: var(--color-primary-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-primary-alternative {
    background-color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-primary-muted {
    background-color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-primary-inverse {
    background-color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-error-default {
    background-color: var(--color-error-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-error-alternative {
    background-color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-error-muted {
    background-color: var(--color-error-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-error-inverse {
    background-color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-warning-default {
    background-color: var(--color-warning-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-warning-muted {
    background-color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-warning-inverse {
    background-color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-success-default {
    background-color: var(--color-success-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-success-muted {
    background-color: var(--color-success-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-success-inverse {
    background-color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-info-default {
    background-color: var(--color-info-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-info-muted {
    background-color: var(--color-info-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-info-inverse {
    background-color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-goerli {
    background-color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-sepolia {
    background-color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-goerli-inverse {
    background-color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-sepolia-inverse {
    background-color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-linea-goerli {
    background-color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-linea-goerli-inverse {
    background-color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-linea-sepolia {
    background-color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-linea-sepolia-inverse {
    background-color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-linea-mainnet {
    background-color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-linea-mainnet-inverse {
    background-color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-localhost {
    background-color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-transparent {
    background-color: var(--transparent);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-flask-purple {
    background-color: var(--color-flask-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\:background-color-inherit {
    background-color: var(--inherit);
  }
}

.box--color-background-default {
  color: var(--color-background-default);
}

.box--color-background-alternative {
  color: var(--color-background-alternative);
}

.box--color-background-muted {
  color: var(--color-background-muted);
}

.box--color-background-hover {
  color: var(--color-background-hover);
}

.box--color-background-pressed {
  color: var(--color-background-pressed);
}

.box--color-text-default {
  color: var(--color-text-default);
}

.box--color-text-alternative {
  color: var(--color-text-alternative);
}

.box--color-text-muted {
  color: var(--color-text-muted);
}

.box--color-icon-default {
  color: var(--color-icon-default);
}

.box--color-icon-alternative {
  color: var(--color-icon-alternative);
}

.box--color-icon-muted {
  color: var(--color-icon-muted);
}

.box--color-border-default {
  color: var(--color-border-default);
}

.box--color-border-muted {
  color: var(--color-border-muted);
}

.box--color-overlay-default {
  color: var(--color-overlay-default);
}

.box--color-overlay-alternative {
  color: var(--color-overlay-alternative);
}

.box--color-overlay-inverse {
  color: var(--color-overlay-inverse);
}

.box--color-primary-default {
  color: var(--color-primary-default);
}

.box--color-primary-alternative {
  color: var(--color-primary-alternative);
}

.box--color-primary-muted {
  color: var(--color-primary-muted);
}

.box--color-primary-inverse {
  color: var(--color-primary-inverse);
}

.box--color-error-default {
  color: var(--color-error-default);
}

.box--color-error-alternative {
  color: var(--color-error-alternative);
}

.box--color-error-muted {
  color: var(--color-error-muted);
}

.box--color-error-inverse {
  color: var(--color-error-inverse);
}

.box--color-warning-default {
  color: var(--color-warning-default);
}

.box--color-warning-muted {
  color: var(--color-warning-muted);
}

.box--color-warning-inverse {
  color: var(--color-warning-inverse);
}

.box--color-success-default {
  color: var(--color-success-default);
}

.box--color-success-muted {
  color: var(--color-success-muted);
}

.box--color-success-inverse {
  color: var(--color-success-inverse);
}

.box--color-info-default {
  color: var(--color-info-default);
}

.box--color-info-muted {
  color: var(--color-info-muted);
}

.box--color-info-inverse {
  color: var(--color-info-inverse);
}

.box--color-goerli {
  color: var(--color-network-goerli-default);
}

.box--color-sepolia {
  color: var(--color-network-sepolia-default);
}

.box--color-goerli-inverse {
  color: var(--color-network-goerli-inverse);
}

.box--color-sepolia-inverse {
  color: var(--color-network-sepolia-inverse);
}

.box--color-linea-goerli {
  color: var(--color-network-linea-goerli-default);
}

.box--color-linea-goerli-inverse {
  color: var(--color-network-linea-goerli-inverse);
}

.box--color-linea-sepolia {
  color: var(--color-network-linea-sepolia-default);
}

.box--color-linea-sepolia-inverse {
  color: var(--color-network-linea-sepolia-inverse);
}

.box--color-linea-mainnet {
  color: var(--color-network-linea-mainnet-default);
}

.box--color-linea-mainnet-inverse {
  color: var(--color-network-linea-mainnet-inverse);
}

.box--color-localhost {
  color: var(--color-network-localhost-default);
}

.box--color-transparent {
  color: var(--transparent);
}

.box--color-flask-purple {
  color: var(--color-flask-default);
}

.box--color-inherit {
  color: var(--inherit);
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-background-default {
    color: var(--color-background-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-background-alternative {
    color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-background-muted {
    color: var(--color-background-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-background-hover {
    color: var(--color-background-hover);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-background-pressed {
    color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-text-default {
    color: var(--color-text-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-text-alternative {
    color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-text-muted {
    color: var(--color-text-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-icon-default {
    color: var(--color-icon-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-icon-alternative {
    color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-icon-muted {
    color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-border-default {
    color: var(--color-border-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-border-muted {
    color: var(--color-border-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-overlay-default {
    color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-overlay-alternative {
    color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-overlay-inverse {
    color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-primary-default {
    color: var(--color-primary-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-primary-alternative {
    color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-primary-muted {
    color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-primary-inverse {
    color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-error-default {
    color: var(--color-error-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-error-alternative {
    color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-error-muted {
    color: var(--color-error-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-error-inverse {
    color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-warning-default {
    color: var(--color-warning-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-warning-muted {
    color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-warning-inverse {
    color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-success-default {
    color: var(--color-success-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-success-muted {
    color: var(--color-success-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-success-inverse {
    color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-info-default {
    color: var(--color-info-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-info-muted {
    color: var(--color-info-muted);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-info-inverse {
    color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-goerli {
    color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-sepolia {
    color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-goerli-inverse {
    color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-sepolia-inverse {
    color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-linea-goerli {
    color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-linea-goerli-inverse {
    color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-linea-sepolia {
    color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-linea-sepolia-inverse {
    color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-linea-mainnet {
    color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-linea-mainnet-inverse {
    color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-localhost {
    color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-transparent {
    color: var(--transparent);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-flask-purple {
    color: var(--color-flask-default);
  }
}

@media screen and (min-width: 576px) {
  .box--sm\c olor-inherit {
    color: var(--inherit);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-background-default {
    color: var(--color-background-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-background-alternative {
    color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-background-muted {
    color: var(--color-background-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-background-hover {
    color: var(--color-background-hover);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-background-pressed {
    color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-text-default {
    color: var(--color-text-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-text-alternative {
    color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-text-muted {
    color: var(--color-text-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-icon-default {
    color: var(--color-icon-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-icon-alternative {
    color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-icon-muted {
    color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-border-default {
    color: var(--color-border-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-border-muted {
    color: var(--color-border-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-overlay-default {
    color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-overlay-alternative {
    color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-overlay-inverse {
    color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-primary-default {
    color: var(--color-primary-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-primary-alternative {
    color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-primary-muted {
    color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-primary-inverse {
    color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-error-default {
    color: var(--color-error-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-error-alternative {
    color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-error-muted {
    color: var(--color-error-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-error-inverse {
    color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-warning-default {
    color: var(--color-warning-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-warning-muted {
    color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-warning-inverse {
    color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-success-default {
    color: var(--color-success-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-success-muted {
    color: var(--color-success-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-success-inverse {
    color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-info-default {
    color: var(--color-info-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-info-muted {
    color: var(--color-info-muted);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-info-inverse {
    color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-goerli {
    color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-sepolia {
    color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-goerli-inverse {
    color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-sepolia-inverse {
    color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-linea-goerli {
    color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-linea-goerli-inverse {
    color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-linea-sepolia {
    color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-linea-sepolia-inverse {
    color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-linea-mainnet {
    color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-linea-mainnet-inverse {
    color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-localhost {
    color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-transparent {
    color: var(--transparent);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-flask-purple {
    color: var(--color-flask-default);
  }
}

@media screen and (min-width: 768px) {
  .box--md\c olor-inherit {
    color: var(--inherit);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-background-default {
    color: var(--color-background-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-background-alternative {
    color: var(--color-background-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-background-muted {
    color: var(--color-background-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-background-hover {
    color: var(--color-background-hover);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-background-pressed {
    color: var(--color-background-pressed);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-text-default {
    color: var(--color-text-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-text-alternative {
    color: var(--color-text-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-text-muted {
    color: var(--color-text-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-icon-default {
    color: var(--color-icon-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-icon-alternative {
    color: var(--color-icon-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-icon-muted {
    color: var(--color-icon-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-border-default {
    color: var(--color-border-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-border-muted {
    color: var(--color-border-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-overlay-default {
    color: var(--color-overlay-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-overlay-alternative {
    color: var(--color-overlay-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-overlay-inverse {
    color: var(--color-overlay-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-primary-default {
    color: var(--color-primary-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-primary-alternative {
    color: var(--color-primary-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-primary-muted {
    color: var(--color-primary-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-primary-inverse {
    color: var(--color-primary-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-error-default {
    color: var(--color-error-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-error-alternative {
    color: var(--color-error-alternative);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-error-muted {
    color: var(--color-error-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-error-inverse {
    color: var(--color-error-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-warning-default {
    color: var(--color-warning-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-warning-muted {
    color: var(--color-warning-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-warning-inverse {
    color: var(--color-warning-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-success-default {
    color: var(--color-success-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-success-muted {
    color: var(--color-success-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-success-inverse {
    color: var(--color-success-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-info-default {
    color: var(--color-info-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-info-muted {
    color: var(--color-info-muted);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-info-inverse {
    color: var(--color-info-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-goerli {
    color: var(--color-network-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-sepolia {
    color: var(--color-network-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-goerli-inverse {
    color: var(--color-network-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-sepolia-inverse {
    color: var(--color-network-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-linea-goerli {
    color: var(--color-network-linea-goerli-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-linea-goerli-inverse {
    color: var(--color-network-linea-goerli-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-linea-sepolia {
    color: var(--color-network-linea-sepolia-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-linea-sepolia-inverse {
    color: var(--color-network-linea-sepolia-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-linea-mainnet {
    color: var(--color-network-linea-mainnet-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-linea-mainnet-inverse {
    color: var(--color-network-linea-mainnet-inverse);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-localhost {
    color: var(--color-network-localhost-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-transparent {
    color: var(--transparent);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-flask-purple {
    color: var(--color-flask-default);
  }
}

@media screen and (min-width: 1280px) {
  .box--lg\c olor-inherit {
    color: var(--inherit);
  }
}

.breadcrumbs {
  display: flex;
  flex-flow: row nowrap;
}

.breadcrumb {
  height: 10px;
  width: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
}

[dir="ltr"] .breadcrumb + .breadcrumb {
  margin-left: 10px;
}

[dir="rtl"] .breadcrumb + .breadcrumb {
  margin-right: 10px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-group__button {
  font-size: 1rem;
  border-style: solid;
  border-color: var(--color-border-default);
  border-width: 1px 1px 1px;
  flex: 1;
  padding: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir="ltr"] .button-group__button {
  border-left: 0;
}

[dir="rtl"] .button-group__button {
  border-right: 0;
}

[dir="ltr"] .button-group__button:first-child {
  border-left: 1px solid var(--color-border-default);
  border-radius: 4px 0 0 4px;
}

[dir="rtl"] .button-group__button:first-child {
  border-right: 1px solid var(--color-border-default);
  border-radius: 0 4px 4px 0;
}

[dir="ltr"] .button-group__button:last-child {
  border-radius: 0 4px 4px 0;
}

[dir="rtl"] .button-group__button:last-child {
  border-radius: 4px 0 0 4px;
}

.button-group__button--active {
  background-color: var(--color-primary-default);
  color: var(--color-primary-inverse);
}

.button-group__button:disabled {
  opacity: 0.5;
}

.radio-button-group__button {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  border: 1px solid var(--color-border-muted);
  background: var(--color-background-default);
  border-radius: 25px;
  height: 25px;
  min-width: 48px;
  padding: 0;
}

[dir="ltr"] .radio-button-group__button {
  margin-right: 8px;
}

[dir="rtl"] .radio-button-group__button {
  margin-left: 8px;
}

.radio-button-group__button--active {
  background: var(--color-primary-default);
  color: var(--color-primary-inverse);
  border: none;
}

.radio-button-group__button--danger {
  border: 1px solid var(--color-error-default);
  color: var(--color-error-default);
  background: var(--color-background-default);
}

.radio-button-group__button:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
}

.radio-button-group .radio-button--active.radio-button--danger {
  border: 1px solid var(--color-error-default);
  color: var(--color-error-inverse);
  background: var(--color-error-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
  Buttons
 */
.button {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 500;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 12px;
  width: 100%;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.button--disabled, .button[disabled] {
  cursor: auto;
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.button__icon {
  display: flex;
  align-items: center;
}

[dir="ltr"] .button__icon {
  margin-right: 4px;
}

[dir="rtl"] .button__icon {
  margin-left: 4px;
}

.btn-secondary {
  color: var(--color-primary-default);
  border: 1px solid var(--color-primary-default);
  background-color: var(--color-background-default);
}

.btn-secondary:hover {
  border-color: var(--color-primary-default);
}

.btn-secondary:active {
  color: var(--color-primary-inverse);
  background: var(--color-primary-default);
  border-color: var(--color-primary-default);
}

.btn-warning {
  color: var(--color-text-default);
  border: 1px solid var(--color-warning-default);
  background-color: var(--color-background-default);
}

.btn-warning:hover {
  border: 1px solid var(--color-warning-default);
}

.btn-warning:active {
  background: var(--color-warning-muted);
  border: 1px solid var(--color-warning-default);
}

.btn-warning--disabled, .btn-warning[disabled] {
  opacity: 1;
  color: var(--color-text-muted);
}

.btn-danger {
  color: var(--color-error-default);
  border: 1px solid var(--color-error-muted);
  background-color: var(--color-background-default);
}

.btn-danger:hover {
  border-color: var(--color-error-default);
}

.btn-danger:active {
  background: var(--color-error-muted);
  border-color: var(--color-error-default);
}

.btn-danger-primary {
  color: var(--color-error-inverse);
  border: 1px solid;
  border-color: var(--color-error-default);
  background-color: var(--color-error-default);
}

.btn-danger-primary:hover {
  border-color: var(--color-error-alternative);
  background-color: var(--color-error-alternative);
}

.btn-danger-primary:active {
  background: var(--color-error-alternative0);
  border-color: var(--color-error-alternative);
}

.btn-default {
  color: var(--color-text-alternative);
  background: var(--color-background-default);
}

.btn-default:active {
  background: var(--color-background-alternative);
}

.btn-default--disabled, .btn-default[disabled] {
  opacity: var(--opacity-disabled);
}

.btn-primary {
  color: var(--color-primary-inverse);
  border: 1px solid var(--color-primary-default);
  background-color: var(--color-primary-default);
}

.btn-primary:hover {
  border-color: var(--color-primary-alternative);
  background-color: var(--color-primary-alternative);
}

.btn-primary:active {
  background: var(--color-primary-alternative);
  border-color: var(--color-primary-alternative);
}

.btn-link {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
  background-color: transparent;
}

.btn-link:hover {
  color: var(--color-primary-alternative);
}

.btn-link:active {
  color: var(--color-primary-alternative);
}

.btn-link--disabled, .btn-link[disabled] {
  cursor: auto;
  pointer-events: none;
}

.btn--large {
  min-height: 54px;
}

/**
  All Buttons styles are deviations from design guide
 */
.btn-raised {
  color: var(--color-primary-default);
  background-color: var(--color-background-default);
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
  padding: 6px;
  height: initial;
  min-height: initial;
  width: initial;
  min-width: initial;
}

button[disabled],
input[type=submit][disabled] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.btn--rounded {
  border-radius: 100px;
  will-change: box-shadow;
  transition: box-shadow cubic-bezier(0.6, -0.28, 0.735, 0.045) 200ms;
}

.btn--rounded:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
}

.btn--rounded.btn-secondary {
  border: 1px solid var(--color-primary-default);
}

.btn--rounded.btn-secondary:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-primary);
}

.btn--rounded.btn-secondary:active {
  border-color: var(--color-primary-alternative);
}

.btn--rounded.btn-default:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
}

.btn--rounded.btn-default:active {
  border-color: var(--color-text-alternative);
}

.btn--rounded.btn-danger {
  border: 1px solid var(--color-error-default);
}

.btn--rounded.btn-danger:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-error);
}

.btn--rounded.btn-danger:active {
  border-color: var(--color-error-alternative);
}

.btn--rounded.btn-warning {
  border: 1px solid var(--color-warning-default);
}

.btn--rounded.btn-warning:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
}

.btn--rounded.btn-warning--disabled, .btn--rounded.btn-warning[disabled] {
  border-color: var(--color-warning-default);
  color: var(--color-text-muted);
}

.btn--rounded.btn-warning:active {
  border-color: var(--color-warning-default);
}

.btn--rounded.btn-primary {
  background-color: var(--color-primary-default);
}

.btn--rounded.btn-primary:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-primary);
}

.btn--rounded.btn-primary:active {
  background-color: var(--color-primary-alternative);
}

.btn--rounded.btn-danger-primary {
  background-color: var(--color-error-default);
}

.btn--rounded.btn-danger-primary:hover {
  box-shadow: var(--shadow-size-sm) var(--color-shadow-error);
}

.btn--rounded.btn-danger-primary:active {
  background-color: var(--color-error-alternative);
}

.btn--inline {
  display: inline;
  padding: 0;
  font-size: inherit;
  width: auto;
  color: var(--color-primary-default);
  cursor: pointer;
  background-color: transparent;
}

.btn--inline:hover {
  color: var(--color-primary-alternative);
}

.btn--inline:active {
  color: var(--color-primary-alternative);
}

.btn--inline--disabled, .btn--inline[disabled] {
  cursor: auto;
  pointer-events: none;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.callout {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  grid-template-rows: 1fr;
  transition: opacity 0.75s 0s;
}

.callout a {
  color: var(--color-primary-default);
}

.callout--dismissible.callout--first {
  box-shadow: 0 -5px 5px -5px var(--color-shadow-default);
}

.callout--multiple {
  padding-top: 8px;
  padding-bottom: 8px;
}

.callout--multiple.callout--first {
  padding-top: 16px;
}

.callout--multiple.callout--last {
  padding-bottom: 16px;
}

.callout--dismissed {
  opacity: 0;
}

[dir="ltr"] .callout--warning {
  border-left: 2px solid var(--color-warning-default);
}

[dir="rtl"] .callout--warning {
  border-right: 2px solid var(--color-warning-default);
}

[dir="ltr"] .callout--danger {
  border-left: 2px solid var(--color-error-default);
}

[dir="rtl"] .callout--danger {
  border-right: 2px solid var(--color-error-default);
}

[dir="ltr"] .callout--info {
  border-left: 2px solid var(--color-info-default);
}

[dir="rtl"] .callout--info {
  border-right: 2px solid var(--color-info-default);
}

[dir="ltr"] .callout--success {
  border-left: 2px solid var(--color-success-default);
}

[dir="rtl"] .callout--success {
  border-right: 2px solid var(--color-success-default);
}

.callout .info-icon {
  margin: unset;
}

[dir="ltr"] .callout .info-icon {
  margin-right: 10px;
}

[dir="rtl"] .callout .info-icon {
  margin-left: 10px;
}

.callout__close-button {
  background: unset;
  cursor: pointer;
}

[dir="ltr"] .callout__close-button {
  margin-left: 8px;
}

[dir="rtl"] .callout__close-button {
  margin-right: 8px;
}

.check-box {
  appearance: none;
  background: var(--color-background-default);
  color: var(--color-icon-muted);
  width: 18px;
  height: 18px;
  font-size: 21px;
  line-height: 0.9;
  border-radius: 2px;
  display: flex;
}

.check-box__checked, .check-box__indeterminate {
  color: var(--color-primary-default);
  border-color: var(--color-primary-default);
}

.check-box:disabled {
  color: var(--color-icon-muted);
  cursor: not-allowed;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.chip {
  border-radius: 100px;
  border: 1px solid var(--color-border-default);
  padding: 8px 16px;
  margin: 0 4px;
  display: flex;
  align-items: center;
}

.chip__left-icon, .chip__right-icon {
  display: flex;
  align-items: center;
}

[dir="ltr"] .chip__left-url-icon {
  margin-right: 8px;
}

[dir="rtl"] .chip__left-url-icon {
  margin-left: 8px;
}

.chip--border-color-background-default {
  border-color: var(--color-background-default);
}

.chip--background-color-background-default {
  background-color: var(--color-background-default);
}

.chip--border-color-background-alternative {
  border-color: var(--color-background-alternative);
}

.chip--background-color-background-alternative {
  background-color: var(--color-background-alternative);
}

.chip--border-color-background-muted {
  border-color: var(--color-background-muted);
}

.chip--background-color-background-muted {
  background-color: var(--color-background-muted);
}

.chip--border-color-background-hover {
  border-color: var(--color-background-hover);
}

.chip--background-color-background-hover {
  background-color: var(--color-background-hover);
}

.chip--border-color-background-pressed {
  border-color: var(--color-background-pressed);
}

.chip--background-color-background-pressed {
  background-color: var(--color-background-pressed);
}

.chip--border-color-text-default {
  border-color: var(--color-text-default);
}

.chip--background-color-text-default {
  background-color: var(--color-text-default);
}

.chip--border-color-text-alternative {
  border-color: var(--color-text-alternative);
}

.chip--background-color-text-alternative {
  background-color: var(--color-text-alternative);
}

.chip--border-color-text-muted {
  border-color: var(--color-text-muted);
}

.chip--background-color-text-muted {
  background-color: var(--color-text-muted);
}

.chip--border-color-icon-default {
  border-color: var(--color-icon-default);
}

.chip--background-color-icon-default {
  background-color: var(--color-icon-default);
}

.chip--border-color-icon-alternative {
  border-color: var(--color-icon-alternative);
}

.chip--background-color-icon-alternative {
  background-color: var(--color-icon-alternative);
}

.chip--border-color-icon-muted {
  border-color: var(--color-icon-muted);
}

.chip--background-color-icon-muted {
  background-color: var(--color-icon-muted);
}

.chip--border-color-border-default {
  border-color: var(--color-border-default);
}

.chip--background-color-border-default {
  background-color: var(--color-border-default);
}

.chip--border-color-border-muted {
  border-color: var(--color-border-muted);
}

.chip--background-color-border-muted {
  background-color: var(--color-border-muted);
}

.chip--border-color-overlay-default {
  border-color: var(--color-overlay-default);
}

.chip--background-color-overlay-default {
  background-color: var(--color-overlay-default);
}

.chip--border-color-overlay-alternative {
  border-color: var(--color-overlay-alternative);
}

.chip--background-color-overlay-alternative {
  background-color: var(--color-overlay-alternative);
}

.chip--border-color-overlay-inverse {
  border-color: var(--color-overlay-inverse);
}

.chip--background-color-overlay-inverse {
  background-color: var(--color-overlay-inverse);
}

.chip--border-color-primary-default {
  border-color: var(--color-primary-default);
}

.chip--background-color-primary-default {
  background-color: var(--color-primary-default);
}

.chip--border-color-primary-alternative {
  border-color: var(--color-primary-alternative);
}

.chip--background-color-primary-alternative {
  background-color: var(--color-primary-alternative);
}

.chip--border-color-primary-muted {
  border-color: var(--color-primary-muted);
}

.chip--background-color-primary-muted {
  background-color: var(--color-primary-muted);
}

.chip--border-color-primary-inverse {
  border-color: var(--color-primary-inverse);
}

.chip--background-color-primary-inverse {
  background-color: var(--color-primary-inverse);
}

.chip--border-color-error-default {
  border-color: var(--color-error-default);
}

.chip--background-color-error-default {
  background-color: var(--color-error-default);
}

.chip--border-color-error-alternative {
  border-color: var(--color-error-alternative);
}

.chip--background-color-error-alternative {
  background-color: var(--color-error-alternative);
}

.chip--border-color-error-muted {
  border-color: var(--color-error-muted);
}

.chip--background-color-error-muted {
  background-color: var(--color-error-muted);
}

.chip--border-color-error-inverse {
  border-color: var(--color-error-inverse);
}

.chip--background-color-error-inverse {
  background-color: var(--color-error-inverse);
}

.chip--border-color-warning-default {
  border-color: var(--color-warning-default);
}

.chip--background-color-warning-default {
  background-color: var(--color-warning-default);
}

.chip--border-color-warning-muted {
  border-color: var(--color-warning-muted);
}

.chip--background-color-warning-muted {
  background-color: var(--color-warning-muted);
}

.chip--border-color-warning-inverse {
  border-color: var(--color-warning-inverse);
}

.chip--background-color-warning-inverse {
  background-color: var(--color-warning-inverse);
}

.chip--border-color-success-default {
  border-color: var(--color-success-default);
}

.chip--background-color-success-default {
  background-color: var(--color-success-default);
}

.chip--border-color-success-muted {
  border-color: var(--color-success-muted);
}

.chip--background-color-success-muted {
  background-color: var(--color-success-muted);
}

.chip--border-color-success-inverse {
  border-color: var(--color-success-inverse);
}

.chip--background-color-success-inverse {
  background-color: var(--color-success-inverse);
}

.chip--border-color-info-default {
  border-color: var(--color-info-default);
}

.chip--background-color-info-default {
  background-color: var(--color-info-default);
}

.chip--border-color-info-muted {
  border-color: var(--color-info-muted);
}

.chip--background-color-info-muted {
  background-color: var(--color-info-muted);
}

.chip--border-color-info-inverse {
  border-color: var(--color-info-inverse);
}

.chip--background-color-info-inverse {
  background-color: var(--color-info-inverse);
}

.chip--border-color-goerli {
  border-color: var(--color-network-goerli-default);
}

.chip--background-color-goerli {
  background-color: var(--color-network-goerli-default);
}

.chip--border-color-sepolia {
  border-color: var(--color-network-sepolia-default);
}

.chip--background-color-sepolia {
  background-color: var(--color-network-sepolia-default);
}

.chip--border-color-goerli-inverse {
  border-color: var(--color-network-goerli-inverse);
}

.chip--background-color-goerli-inverse {
  background-color: var(--color-network-goerli-inverse);
}

.chip--border-color-sepolia-inverse {
  border-color: var(--color-network-sepolia-inverse);
}

.chip--background-color-sepolia-inverse {
  background-color: var(--color-network-sepolia-inverse);
}

.chip--border-color-linea-goerli {
  border-color: var(--color-network-linea-goerli-default);
}

.chip--background-color-linea-goerli {
  background-color: var(--color-network-linea-goerli-default);
}

.chip--border-color-linea-goerli-inverse {
  border-color: var(--color-network-linea-goerli-inverse);
}

.chip--background-color-linea-goerli-inverse {
  background-color: var(--color-network-linea-goerli-inverse);
}

.chip--border-color-linea-sepolia {
  border-color: var(--color-network-linea-sepolia-default);
}

.chip--background-color-linea-sepolia {
  background-color: var(--color-network-linea-sepolia-default);
}

.chip--border-color-linea-sepolia-inverse {
  border-color: var(--color-network-linea-sepolia-inverse);
}

.chip--background-color-linea-sepolia-inverse {
  background-color: var(--color-network-linea-sepolia-inverse);
}

.chip--border-color-linea-mainnet {
  border-color: var(--color-network-linea-mainnet-default);
}

.chip--background-color-linea-mainnet {
  background-color: var(--color-network-linea-mainnet-default);
}

.chip--border-color-linea-mainnet-inverse {
  border-color: var(--color-network-linea-mainnet-inverse);
}

.chip--background-color-linea-mainnet-inverse {
  background-color: var(--color-network-linea-mainnet-inverse);
}

.chip--border-color-localhost {
  border-color: var(--color-network-localhost-default);
}

.chip--background-color-localhost {
  background-color: var(--color-network-localhost-default);
}

.chip--border-color-transparent {
  border-color: var(--transparent);
}

.chip--background-color-transparent {
  background-color: var(--transparent);
}

.chip--border-color-flask-purple {
  border-color: var(--color-flask-default);
}

.chip--background-color-flask-purple {
  background-color: var(--color-flask-default);
}

.chip--border-color-inherit {
  border-color: var(--inherit);
}

.chip--background-color-inherit {
  background-color: var(--inherit);
}

.chip--with-left-icon, .chip--with-right-icon {
  padding-top: 4px;
  padding-bottom: 4px;
}

[dir="ltr"] .chip--with-left-icon {
  padding-left: 4px;
}

[dir="rtl"] .chip--with-left-icon {
  padding-right: 4px;
}

[dir="ltr"] .chip--with-left-icon .chip__label {
  margin-left: 8px;
}

[dir="rtl"] .chip--with-left-icon .chip__label {
  margin-right: 8px;
}

.chip--with-input .chip__input {
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  font-size: 1rem;
  color: var(--color-text-default);
}

[dir="ltr"] .chip--with-input .chip__input {
  direction: ltr;
}

[dir="rtl"] .chip--with-input .chip__input {
  direction: rtl;
}

[dir="ltr"] .chip--with-input .chip__input:focus {
  text-align: left;
}

[dir="rtl"] .chip--with-input .chip__input:focus {
  text-align: right;
}

.chip--with-input .chip__input:focus-visible {
  outline: none;
}

[dir="ltr"] .chip--with-right-icon {
  padding-right: 4px;
}

[dir="rtl"] .chip--with-right-icon {
  padding-left: 4px;
}

[dir="ltr"] .chip--with-right-icon .chip__label {
  margin-right: 8px;
}

[dir="rtl"] .chip--with-right-icon .chip__label {
  margin-left: 8px;
}

.chip--max-content {
  width: max-content;
}

.chip--display-inline-block {
  display: inline-block;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.color-indicator {
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-indicator__inner-circle {
  background-color: transparent;
}

.color-indicator--size-xl {
  height: 16px;
  width: 16px;
  border-radius: 8px;
}

.color-indicator--size-xl .color-indicator__inner-circle {
  border-radius: 8px;
  height: 8px;
  width: 8px;
}

.color-indicator--size-xl .color-indicator__icon {
  font-size: 10px;
}

.color-indicator--size-lg {
  height: 12px;
  width: 12px;
  border-radius: 6px;
}

.color-indicator--size-lg .color-indicator__inner-circle {
  border-radius: 6px;
  height: 6px;
  width: 6px;
}

.color-indicator--size-lg .color-indicator__icon {
  font-size: 7.5px;
}

.color-indicator--size-md {
  height: 10px;
  width: 10px;
  border-radius: 5px;
}

.color-indicator--size-md .color-indicator__inner-circle {
  border-radius: 5px;
  height: 5px;
  width: 5px;
}

.color-indicator--size-md .color-indicator__icon {
  font-size: 6.25px;
}

.color-indicator--size-sm {
  height: 8px;
  width: 8px;
  border-radius: 4px;
}

.color-indicator--size-sm .color-indicator__inner-circle {
  border-radius: 4px;
  height: 4px;
  width: 4px;
}

.color-indicator--size-sm .color-indicator__icon {
  font-size: 5px;
}

.color-indicator--size-xs {
  height: 5px;
  width: 5px;
  border-radius: 2.5px;
}

.color-indicator--size-xs .color-indicator__inner-circle {
  border-radius: 2.5px;
  height: 2.5px;
  width: 2.5px;
}

.color-indicator--size-xs .color-indicator__icon {
  font-size: 3.125px;
}

.color-indicator--color-background-default {
  border-color: var(--color-background-default);
}

.color-indicator--color-background-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-background-default);
}

.color-indicator--color-background-default.color-indicator--filled {
  background-color: var(--color-background-default);
}

.color-indicator--color-background-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-background-alternative {
  border-color: var(--color-background-alternative);
}

.color-indicator--color-background-alternative.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-background-alternative);
}

.color-indicator--color-background-alternative.color-indicator--filled {
  background-color: var(--color-background-alternative);
}

.color-indicator--color-background-alternative .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-background-muted {
  border-color: var(--color-background-muted);
}

.color-indicator--color-background-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-background-muted);
}

.color-indicator--color-background-muted.color-indicator--filled {
  background-color: var(--color-background-muted);
}

.color-indicator--color-background-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-background-hover {
  border-color: var(--color-background-hover);
}

.color-indicator--color-background-hover.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-background-hover);
}

.color-indicator--color-background-hover.color-indicator--filled {
  background-color: var(--color-background-hover);
}

.color-indicator--color-background-hover .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-background-pressed {
  border-color: var(--color-background-pressed);
}

.color-indicator--color-background-pressed.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-background-pressed);
}

.color-indicator--color-background-pressed.color-indicator--filled {
  background-color: var(--color-background-pressed);
}

.color-indicator--color-background-pressed .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-text-default {
  border-color: var(--color-text-default);
}

.color-indicator--color-text-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-text-default);
}

.color-indicator--color-text-default.color-indicator--filled {
  background-color: var(--color-text-default);
}

.color-indicator--color-text-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-text-alternative {
  border-color: var(--color-text-alternative);
}

.color-indicator--color-text-alternative.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-text-alternative);
}

.color-indicator--color-text-alternative.color-indicator--filled {
  background-color: var(--color-text-alternative);
}

.color-indicator--color-text-alternative .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-text-muted {
  border-color: var(--color-text-muted);
}

.color-indicator--color-text-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-text-muted);
}

.color-indicator--color-text-muted.color-indicator--filled {
  background-color: var(--color-text-muted);
}

.color-indicator--color-text-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-icon-default {
  border-color: var(--color-icon-default);
}

.color-indicator--color-icon-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-icon-default);
}

.color-indicator--color-icon-default.color-indicator--filled {
  background-color: var(--color-icon-default);
}

.color-indicator--color-icon-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-icon-alternative {
  border-color: var(--color-icon-alternative);
}

.color-indicator--color-icon-alternative.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-icon-alternative);
}

.color-indicator--color-icon-alternative.color-indicator--filled {
  background-color: var(--color-icon-alternative);
}

.color-indicator--color-icon-alternative .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-icon-muted {
  border-color: var(--color-icon-muted);
}

.color-indicator--color-icon-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-icon-muted);
}

.color-indicator--color-icon-muted.color-indicator--filled {
  background-color: var(--color-icon-muted);
}

.color-indicator--color-icon-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-border-default {
  border-color: var(--color-border-default);
}

.color-indicator--color-border-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-border-default);
}

.color-indicator--color-border-default.color-indicator--filled {
  background-color: var(--color-border-default);
}

.color-indicator--color-border-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-border-muted {
  border-color: var(--color-border-muted);
}

.color-indicator--color-border-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-border-muted);
}

.color-indicator--color-border-muted.color-indicator--filled {
  background-color: var(--color-border-muted);
}

.color-indicator--color-border-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-overlay-default {
  border-color: var(--color-overlay-default);
}

.color-indicator--color-overlay-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-overlay-default);
}

.color-indicator--color-overlay-default.color-indicator--filled {
  background-color: var(--color-overlay-default);
}

.color-indicator--color-overlay-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-overlay-alternative {
  border-color: var(--color-overlay-alternative);
}

.color-indicator--color-overlay-alternative.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-overlay-alternative);
}

.color-indicator--color-overlay-alternative.color-indicator--filled {
  background-color: var(--color-overlay-alternative);
}

.color-indicator--color-overlay-alternative .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-overlay-inverse {
  border-color: var(--color-overlay-inverse);
}

.color-indicator--color-overlay-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-overlay-inverse);
}

.color-indicator--color-overlay-inverse.color-indicator--filled {
  background-color: var(--color-overlay-inverse);
}

.color-indicator--color-overlay-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-primary-default {
  border-color: var(--color-primary-default);
}

.color-indicator--color-primary-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-primary-default);
}

.color-indicator--color-primary-default.color-indicator--filled {
  background-color: var(--color-primary-default);
}

.color-indicator--color-primary-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-primary-alternative {
  border-color: var(--color-primary-alternative);
}

.color-indicator--color-primary-alternative.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-primary-alternative);
}

.color-indicator--color-primary-alternative.color-indicator--filled {
  background-color: var(--color-primary-alternative);
}

.color-indicator--color-primary-alternative .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-primary-muted {
  border-color: var(--color-primary-muted);
}

.color-indicator--color-primary-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-primary-muted);
}

.color-indicator--color-primary-muted.color-indicator--filled {
  background-color: var(--color-primary-muted);
}

.color-indicator--color-primary-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-primary-inverse {
  border-color: var(--color-primary-inverse);
}

.color-indicator--color-primary-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-primary-inverse);
}

.color-indicator--color-primary-inverse.color-indicator--filled {
  background-color: var(--color-primary-inverse);
}

.color-indicator--color-primary-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-error-default {
  border-color: var(--color-error-default);
}

.color-indicator--color-error-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-error-default);
}

.color-indicator--color-error-default.color-indicator--filled {
  background-color: var(--color-error-default);
}

.color-indicator--color-error-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-error-alternative {
  border-color: var(--color-error-alternative);
}

.color-indicator--color-error-alternative.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-error-alternative);
}

.color-indicator--color-error-alternative.color-indicator--filled {
  background-color: var(--color-error-alternative);
}

.color-indicator--color-error-alternative .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-error-muted {
  border-color: var(--color-error-muted);
}

.color-indicator--color-error-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-error-muted);
}

.color-indicator--color-error-muted.color-indicator--filled {
  background-color: var(--color-error-muted);
}

.color-indicator--color-error-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-error-inverse {
  border-color: var(--color-error-inverse);
}

.color-indicator--color-error-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-error-inverse);
}

.color-indicator--color-error-inverse.color-indicator--filled {
  background-color: var(--color-error-inverse);
}

.color-indicator--color-error-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-warning-default {
  border-color: var(--color-warning-default);
}

.color-indicator--color-warning-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-warning-default);
}

.color-indicator--color-warning-default.color-indicator--filled {
  background-color: var(--color-warning-default);
}

.color-indicator--color-warning-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-warning-muted {
  border-color: var(--color-warning-muted);
}

.color-indicator--color-warning-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-warning-muted);
}

.color-indicator--color-warning-muted.color-indicator--filled {
  background-color: var(--color-warning-muted);
}

.color-indicator--color-warning-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-warning-inverse {
  border-color: var(--color-warning-inverse);
}

.color-indicator--color-warning-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-warning-inverse);
}

.color-indicator--color-warning-inverse.color-indicator--filled {
  background-color: var(--color-warning-inverse);
}

.color-indicator--color-warning-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-success-default {
  border-color: var(--color-success-default);
}

.color-indicator--color-success-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-success-default);
}

.color-indicator--color-success-default.color-indicator--filled {
  background-color: var(--color-success-default);
}

.color-indicator--color-success-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-success-muted {
  border-color: var(--color-success-muted);
}

.color-indicator--color-success-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-success-muted);
}

.color-indicator--color-success-muted.color-indicator--filled {
  background-color: var(--color-success-muted);
}

.color-indicator--color-success-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-success-inverse {
  border-color: var(--color-success-inverse);
}

.color-indicator--color-success-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-success-inverse);
}

.color-indicator--color-success-inverse.color-indicator--filled {
  background-color: var(--color-success-inverse);
}

.color-indicator--color-success-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-info-default {
  border-color: var(--color-info-default);
}

.color-indicator--color-info-default.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-info-default);
}

.color-indicator--color-info-default.color-indicator--filled {
  background-color: var(--color-info-default);
}

.color-indicator--color-info-default .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-info-muted {
  border-color: var(--color-info-muted);
}

.color-indicator--color-info-muted.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-info-muted);
}

.color-indicator--color-info-muted.color-indicator--filled {
  background-color: var(--color-info-muted);
}

.color-indicator--color-info-muted .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-info-inverse {
  border-color: var(--color-info-inverse);
}

.color-indicator--color-info-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-info-inverse);
}

.color-indicator--color-info-inverse.color-indicator--filled {
  background-color: var(--color-info-inverse);
}

.color-indicator--color-info-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-goerli {
  border-color: var(--color-network-goerli-default);
}

.color-indicator--color-goerli.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-goerli-default);
}

.color-indicator--color-goerli.color-indicator--filled {
  background-color: var(--color-network-goerli-default);
}

.color-indicator--color-goerli .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-sepolia {
  border-color: var(--color-network-sepolia-default);
}

.color-indicator--color-sepolia.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-sepolia-default);
}

.color-indicator--color-sepolia.color-indicator--filled {
  background-color: var(--color-network-sepolia-default);
}

.color-indicator--color-sepolia .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-goerli-inverse {
  border-color: var(--color-network-goerli-inverse);
}

.color-indicator--color-goerli-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-goerli-inverse);
}

.color-indicator--color-goerli-inverse.color-indicator--filled {
  background-color: var(--color-network-goerli-inverse);
}

.color-indicator--color-goerli-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-sepolia-inverse {
  border-color: var(--color-network-sepolia-inverse);
}

.color-indicator--color-sepolia-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-sepolia-inverse);
}

.color-indicator--color-sepolia-inverse.color-indicator--filled {
  background-color: var(--color-network-sepolia-inverse);
}

.color-indicator--color-sepolia-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-linea-goerli {
  border-color: var(--color-network-linea-goerli-default);
}

.color-indicator--color-linea-goerli.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-linea-goerli-default);
}

.color-indicator--color-linea-goerli.color-indicator--filled {
  background-color: var(--color-network-linea-goerli-default);
}

.color-indicator--color-linea-goerli .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-linea-goerli-inverse {
  border-color: var(--color-network-linea-goerli-inverse);
}

.color-indicator--color-linea-goerli-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-linea-goerli-inverse);
}

.color-indicator--color-linea-goerli-inverse.color-indicator--filled {
  background-color: var(--color-network-linea-goerli-inverse);
}

.color-indicator--color-linea-goerli-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-linea-sepolia {
  border-color: var(--color-network-linea-sepolia-default);
}

.color-indicator--color-linea-sepolia.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-linea-sepolia-default);
}

.color-indicator--color-linea-sepolia.color-indicator--filled {
  background-color: var(--color-network-linea-sepolia-default);
}

.color-indicator--color-linea-sepolia .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-linea-sepolia-inverse {
  border-color: var(--color-network-linea-sepolia-inverse);
}

.color-indicator--color-linea-sepolia-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-linea-sepolia-inverse);
}

.color-indicator--color-linea-sepolia-inverse.color-indicator--filled {
  background-color: var(--color-network-linea-sepolia-inverse);
}

.color-indicator--color-linea-sepolia-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-linea-mainnet {
  border-color: var(--color-network-linea-mainnet-default);
}

.color-indicator--color-linea-mainnet.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-linea-mainnet-default);
}

.color-indicator--color-linea-mainnet.color-indicator--filled {
  background-color: var(--color-network-linea-mainnet-default);
}

.color-indicator--color-linea-mainnet .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-linea-mainnet-inverse {
  border-color: var(--color-network-linea-mainnet-inverse);
}

.color-indicator--color-linea-mainnet-inverse.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-linea-mainnet-inverse);
}

.color-indicator--color-linea-mainnet-inverse.color-indicator--filled {
  background-color: var(--color-network-linea-mainnet-inverse);
}

.color-indicator--color-linea-mainnet-inverse .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-localhost {
  border-color: var(--color-network-localhost-default);
}

.color-indicator--color-localhost.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-network-localhost-default);
}

.color-indicator--color-localhost.color-indicator--filled {
  background-color: var(--color-network-localhost-default);
}

.color-indicator--color-localhost .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-transparent {
  border-color: var(--transparent);
}

.color-indicator--color-transparent.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--transparent);
}

.color-indicator--color-transparent.color-indicator--filled {
  background-color: var(--transparent);
}

.color-indicator--color-transparent .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-flask-purple {
  border-color: var(--color-flask-default);
}

.color-indicator--color-flask-purple.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--color-flask-default);
}

.color-indicator--color-flask-purple.color-indicator--filled {
  background-color: var(--color-flask-default);
}

.color-indicator--color-flask-purple .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--color-inherit {
  border-color: var(--inherit);
}

.color-indicator--color-inherit.color-indicator--partial-filled .color-indicator__inner-circle {
  background-color: var(--inherit);
}

.color-indicator--color-inherit.color-indicator--filled {
  background-color: var(--inherit);
}

.color-indicator--color-inherit .color-indicator__icon {
  color: var(--color-icon-default);
}

.color-indicator--border-color-background-default {
  border-color: var(--color-background-default);
}

.color-indicator--border-color-background-alternative {
  border-color: var(--color-background-alternative);
}

.color-indicator--border-color-background-muted {
  border-color: var(--color-background-muted);
}

.color-indicator--border-color-background-hover {
  border-color: var(--color-background-hover);
}

.color-indicator--border-color-background-pressed {
  border-color: var(--color-background-pressed);
}

.color-indicator--border-color-text-default {
  border-color: var(--color-text-default);
}

.color-indicator--border-color-text-alternative {
  border-color: var(--color-text-alternative);
}

.color-indicator--border-color-text-muted {
  border-color: var(--color-text-muted);
}

.color-indicator--border-color-icon-default {
  border-color: var(--color-icon-default);
}

.color-indicator--border-color-icon-alternative {
  border-color: var(--color-icon-alternative);
}

.color-indicator--border-color-icon-muted {
  border-color: var(--color-icon-muted);
}

.color-indicator--border-color-border-default {
  border-color: var(--color-border-default);
}

.color-indicator--border-color-border-muted {
  border-color: var(--color-border-muted);
}

.color-indicator--border-color-overlay-default {
  border-color: var(--color-overlay-default);
}

.color-indicator--border-color-overlay-alternative {
  border-color: var(--color-overlay-alternative);
}

.color-indicator--border-color-overlay-inverse {
  border-color: var(--color-overlay-inverse);
}

.color-indicator--border-color-primary-default {
  border-color: var(--color-primary-default);
}

.color-indicator--border-color-primary-alternative {
  border-color: var(--color-primary-alternative);
}

.color-indicator--border-color-primary-muted {
  border-color: var(--color-primary-muted);
}

.color-indicator--border-color-primary-inverse {
  border-color: var(--color-primary-inverse);
}

.color-indicator--border-color-error-default {
  border-color: var(--color-error-default);
}

.color-indicator--border-color-error-alternative {
  border-color: var(--color-error-alternative);
}

.color-indicator--border-color-error-muted {
  border-color: var(--color-error-muted);
}

.color-indicator--border-color-error-inverse {
  border-color: var(--color-error-inverse);
}

.color-indicator--border-color-warning-default {
  border-color: var(--color-warning-default);
}

.color-indicator--border-color-warning-muted {
  border-color: var(--color-warning-muted);
}

.color-indicator--border-color-warning-inverse {
  border-color: var(--color-warning-inverse);
}

.color-indicator--border-color-success-default {
  border-color: var(--color-success-default);
}

.color-indicator--border-color-success-muted {
  border-color: var(--color-success-muted);
}

.color-indicator--border-color-success-inverse {
  border-color: var(--color-success-inverse);
}

.color-indicator--border-color-info-default {
  border-color: var(--color-info-default);
}

.color-indicator--border-color-info-muted {
  border-color: var(--color-info-muted);
}

.color-indicator--border-color-info-inverse {
  border-color: var(--color-info-inverse);
}

.color-indicator--border-color-goerli {
  border-color: var(--color-network-goerli-default);
}

.color-indicator--border-color-sepolia {
  border-color: var(--color-network-sepolia-default);
}

.color-indicator--border-color-goerli-inverse {
  border-color: var(--color-network-goerli-inverse);
}

.color-indicator--border-color-sepolia-inverse {
  border-color: var(--color-network-sepolia-inverse);
}

.color-indicator--border-color-linea-goerli {
  border-color: var(--color-network-linea-goerli-default);
}

.color-indicator--border-color-linea-goerli-inverse {
  border-color: var(--color-network-linea-goerli-inverse);
}

.color-indicator--border-color-linea-sepolia {
  border-color: var(--color-network-linea-sepolia-default);
}

.color-indicator--border-color-linea-sepolia-inverse {
  border-color: var(--color-network-linea-sepolia-inverse);
}

.color-indicator--border-color-linea-mainnet {
  border-color: var(--color-network-linea-mainnet-default);
}

.color-indicator--border-color-linea-mainnet-inverse {
  border-color: var(--color-network-linea-mainnet-inverse);
}

.color-indicator--border-color-localhost {
  border-color: var(--color-network-localhost-default);
}

.color-indicator--border-color-transparent {
  border-color: var(--transparent);
}

.color-indicator--border-color-flask-purple {
  border-color: var(--color-flask-default);
}

.color-indicator--border-color-inherit {
  border-color: var(--inherit);
}

.confusable__point {
  color: var(--color-error-default);
}

.definition-list__term {
  display: flex;
  align-items: center;
}

.definition-list__term .definition-list__tooltip-wrapper {
  display: flex !important;
  align-items: center;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.dialog {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 8px;
}

.dialog--message {
  color: var(--color-text-default);
  background-color: var(--color-info-muted);
  border: 1px solid var(--color-info-default);
}

.dialog--error {
  color: 1px solid var(--color-text-default);
  background-color: var(--color-error-muted);
  border: 1px solid var(--color-error-default);
}

.dialog--warning {
  color: 1px solid var(--color-text-default);
  background-color: var(--color-warning-muted);
  border: 1px solid var(--color-warning-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.dropdown {
  position: relative;
  display: inline-block;
  height: 48px;
}

.dropdown__select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background-color: var(--color-background-default);
  width: 100%;
}

[dir="ltr"] .dropdown__select {
  padding: 12px 40px 12px 16px;
}

[dir="rtl"] .dropdown__select {
  padding: 12px 16px 12px 40px;
}

[dir="ltr"] [dir=rtl] .dropdown__select {
  padding: 8px 16px 8px 40px;
}

[dir="rtl"] [dir=rtl] .dropdown__select {
  padding: 8px 40px 8px 16px;
}

.dropdown__icon-caret-down {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

[dir="ltr"] .dropdown__icon-caret-down {
  right: 16px;
}

[dir="rtl"] .dropdown__icon-caret-down {
  left: 16px;
}

[dir="ltr"] [dir=rtl] .dropdown__icon-caret-down {
  left: 16px;
}

[dir="rtl"] [dir=rtl] .dropdown__icon-caret-down {
  right: 16px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.error-message {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  min-height: 32px;
  border: 1px solid var(--color-error-default);
  color: var(--color-text-default);
  background-color: var(--color-error-muted);
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 10px;
}

.error-message__text {
  overflow: auto;
}

.icon-border {
  border-radius: 50%;
  border: 1px solid var(--color-border-muted);
  background: var(--color-background-alternative);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: unset;
  text-align: center;
  width: 64px;
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  cursor: pointer;
}

.icon-button__circle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  background: var(--color-background-muted);
  border-radius: 99px;
  margin-top: 6px;
  margin-bottom: 4px;
  margin-inline: auto;
}

.icon-button__circle:hover {
  background: var(--color-background-muted-hover);
  transition: background 200ms ease;
}

.icon-button--disabled {
  opacity: 0.3;
  cursor: auto;
}

.icon-button__label-large {
  width: 60px;
}

.icon-with-fallback__fallback {
  color: var(--color-icon-alternative);
}

.info-icon {
  margin: 0 4px;
}

.info-icon--success {
  fill: var(--color-success-default);
}

.info-icon--info {
  fill: var(--color-info-default);
}

.info-icon--warning {
  fill: var(--color-warning-default);
}

.info-icon--danger {
  fill: var(--color-error-default);
}

.preloader__icon {
  animation-name: spin;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.identicon {
  direction: ltr;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.identicon__address-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-radius: 50%;
  border-width: 2px;
  border-color: var(--color-primary-default);
}

.identicon__image-border {
  border: 1px solid var(--color-border-default);
  background: var(--color-background-default);
}

.info-tooltip svg {
  height: 12px;
  width: 12px;
}

.info-tooltip__tooltip-container svg {
  position: static;
}

.tippy-tooltip.tippy-tooltip-info-theme {
  max-width: 200px;
  padding: 16px;
  padding-bottom: 16px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.list-item {
  width: 100%;
  min-height: 86px;
  margin: 0;
  background: var(--color-background-default);
  padding: 24px 16px;
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  border-bottom: 1px solid var(--color-border-muted);
  color: var(--color-text-default);
  display: grid;
  grid-template-columns: 0fr repeat(11, 1fr);
  grid-template-areas: "icon head     head     head     head     head     head     head     right right right right" "icon sub      sub      sub      sub      sub      sub      sub      right right right right" ".    actions  actions  actions  actions  actions  actions  actions  right right right right";
  align-items: flex-start;
  cursor: pointer;
}

.list-item:hover, .list-item:focus-within {
  background-color: var(--color-background-default-hover);
}

.list-item__icon {
  grid-area: icon;
  align-self: center;
}

[dir="ltr"] .list-item__icon > * {
  margin: 0 16px 0 0;
}

[dir="rtl"] .list-item__icon > * {
  margin: 0 0 0 16px;
}

.list-item__actions {
  grid-area: actions;
}

.list-item__heading {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  grid-area: head;
  position: relative;
  display: flex;
  align-items: center;
}

.list-item__heading button {
  background: unset;
  font-size: unset;
  padding-inline-start: 0;
}

.list-item__heading-wrap {
  display: inline-block;
}

[dir="ltr"] .list-item__heading-wrap {
  margin-left: 8px;
}

[dir="rtl"] .list-item__heading-wrap {
  margin-right: 8px;
}

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

.list-item__subheading {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  grid-area: sub;
  color: var(--color-text-alternative);
  margin-top: 4px;
}

.list-item__subheading > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__subheading:empty {
  display: none;
}

.list-item__mid-content {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  grid-area: mid;
  color: var(--color-text-muted);
}

.list-item__right-content {
  grid-area: right;
  align-items: flex-end;
  overflow: hidden;
  white-space: nowrap;
}

[dir="ltr"] .list-item__right-content {
  text-align: right;
}

[dir="rtl"] .list-item__right-content {
  text-align: left;
}

@media screen and (max-width: calc(576px - 1px)) {
  .list-item__mid-content {
    display: none;
  }
}

@media screen and (min-width: 576px) {
  .list-item {
    grid-template-areas: "icon head     head     head     head     mid mid mid mid right right right" "icon sub      sub      sub      sub      mid mid mid mid right right right" ".    actions  actions  actions  actions  mid mid mid mid right right right";
  }
}

.list-item--single-content-row {
  grid-template-areas: "icon head     head     head     head     head     head     head     right right right right";
  align-items: center;
}

@media screen and (min-width: 576px) {
  .list-item--single-content-row {
    grid-template-areas: "icon head     head     head     head     mid mid mid mid right right right";
  }
}

.loading-heartbeat {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: var(--color-background-default);
  display: none;
  pointer-events: none;
}

.loading-heartbeat--active {
  display: block;
  animation-name: heartbeat;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes heartbeat {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

.loading-indicator {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: relative;
  height: 16px;
  width: 16px;
}

.loading-indicator__spinner {
  position: absolute;
  width: 27px;
  height: 26px;
}

[dir="ltr"] .loading-indicator__spinner {
  left: -5px;
}

[dir="rtl"] .loading-indicator__spinner {
  right: -5px;
}

[data-theme=dark] .logo-coinbasepay path {
  fill: var(--color-text-default);
}

.loading-overlay {
  top: 0;
  z-index: 55;
  position: fixed;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  background: var(--color-background-alternative);
  opacity: 0.8;
}

[dir="ltr"] .loading-overlay {
  left: 0;
}

[dir="rtl"] .loading-overlay {
  right: 0;
}

.loading-overlay__screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-overlay__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-overlay__error-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 160px;
  justify-content: space-evenly;
}

.loading-overlay__error-buttons {
  display: flex;
  flex-direction: row;
}

.loading-overlay__error-buttons button {
  margin: 5px;
}

.loading-overlay__emoji {
  font-size: 32px;
}

.loading-overlay__spinner {
  height: 58px;
  width: 58px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.menu__container {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  background: var(--color-background-default);
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
  border-radius: 8px;
  width: 225px;
  color: var(--color-text-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1050;
}

.menu__background {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1050;
}

[dir="ltr"] .menu__background {
  left: 0;
}

[dir="rtl"] .menu__background {
  right: 0;
}

.menu-item {
  background: none;
  font-size: inherit;
  display: grid;
  grid-template-columns: min-content auto;
  text-align: start;
  align-items: center;
  width: 100%;
  padding: 16px;
  cursor: pointer;
  color: inherit;
}

.menu-item:hover, .menu-item:active {
  background: var(--color-background-default-hover);
}

.menu-item:focus {
  outline: 2px solid var(--color-primary-default);
  outline-offset: -2px;
}

.menu-item__icon {
  grid-row: 1/span 2;
  color: var(--color-icon-alternative);
}

[dir="ltr"] .menu-item__icon {
  margin-right: 8px;
}

[dir="rtl"] .menu-item__icon {
  margin-left: 8px;
}

.numeric-input {
  border: 1px solid var(--color-border-default);
  position: relative;
  border-radius: 6px;
}

.numeric-input--error {
  border-color: var(--color-error-default);
}

.numeric-input input {
  width: 100%;
  border: 0;
  padding: 10px;
  border-radius: 6px;
  background-color: var(--color-background-default);
  color: var(--color-text-default);
  /* ensures the increment/decrement arrows always display */
}

.numeric-input input::-webkit-inner-spin-button, .numeric-input input::-webkit-outer-spin-button {
  opacity: 1;
}

.numeric-input span {
  position: absolute;
  top: 7px;
}

[dir="ltr"] .numeric-input span {
  right: 40px;
}

[dir="rtl"] .numeric-input span {
  left: 40px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.nickname-popover__popover-wrap {
  height: 232px;
  border-radius: 4px;
  background: var(--color-background-default);
  display: flex;
  justify-content: center;
  width: auto;
}

[dir="ltr"] .nickname-popover__popover-wrap .popover-header {
  padding: 16px 16px 0 0;
}

[dir="rtl"] .nickname-popover__popover-wrap .popover-header {
  padding: 16px 0 0 16px;
}

.nickname-popover__popover-wrap .popover-content {
  margin-top: -15px;
  align-items: center;
}

.nickname-popover__address {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: var(--color-text-default);
  padding-top: 8px;
}

.nickname-popover__public-address {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 25px;
  background: var(--color-background-alternative);
  border-radius: 40px;
  margin-top: 8px;
}

[dir="ltr"] .nickname-popover__public-address {
  padding-left: 8px;
  padding-right: 2px;
}

[dir="rtl"] .nickname-popover__public-address {
  padding-right: 8px;
  padding-left: 2px;
}

.nickname-popover__public-address button {
  background: none;
}

.nickname-popover__public-address__constant {
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
}

.nickname-popover__view-on-block-explorer {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  margin-top: 12px;
}

.nickname-popover__etherscan-link {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 0;
}

.nickname-popover__footer-button {
  margin-top: 16px;
  width: 152px;
  height: 40px;
  background: var(--color-primary-default);
}

.form-field__heading {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.form-field .info-tooltip {
  display: inline-block;
}

.form-field__heading-detail {
  flex-grow: 1;
  align-self: center;
}

.form-field__heading-title__tooltip {
  width: 180px;
}

.form-field__heading-title__tooltip__warning-icon {
  color: var(--color-error-default) !important;
}

.form-field__error, .form-field__error h6 {
  color: var(--color-error-default) !important;
  padding-top: 6px;
}

.form-field h6 {
  padding-bottom: 6px;
  margin-inline-end: 6px;
  color: var(--color-text-default);
}

.form-field__input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  background-color: var(--color-background-default);
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
}

.form-field__input:focus {
  border: solid 1px var(--color-primary-default);
}

.form-field__input--error {
  border-color: var(--color-error-default);
}

.form-field__input--warning {
  border-color: var(--color-warning-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.page-container {
  max-width: 100%;
  background-color: var(--color-background-default);
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
  z-index: 25;
  display: flex;
  flex-flow: column;
  border-radius: 8px;
  overflow-y: auto;
}

@media screen and (min-width: 576px) {
  .page-container {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .page-container {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .page-container {
    width: 62vw;
  }
}

.page-container__header {
  display: flex;
  flex-flow: column;
  border-bottom: 1px solid var(--color-border-muted);
  padding: 16px;
  flex: 0 0 auto;
  position: relative;
}

.page-container__header--no-padding-bottom {
  padding-bottom: 0;
}

.page-container__header-close {
  color: var(--color-icon-default);
  position: absolute;
  top: 16px;
  cursor: pointer;
  overflow: hidden;
  background-color: transparent;
}

[dir="ltr"] .page-container__header-close {
  right: 16px;
}

[dir="rtl"] .page-container__header-close {
  left: 16px;
}

.page-container__header-close::after {
  content: "×";
  font-size: 40px;
  line-height: 20px;
}

.page-container__header-row {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.page-container__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-container__footer {
  display: flex;
  flex-flow: column;
  justify-content: center;
  border-top: 1px solid var(--color-border-muted);
  flex: 0 0 auto;
  width: 100%;
}

.page-container__footer footer {
  display: flex;
  flex-flow: row;
  justify-content: center;
  padding: 16px;
  flex: 0 0 auto;
}

.page-container__footer-secondary {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  padding: 0 16px 16px;
  flex: 0 0 auto;
}

.page-container__footer-secondary a,
.page-container__footer-secondary a:hover {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  color: var(--color-primary-alternative);
}

[dir="ltr"] .page-container__footer-button {
  margin-right: 16px;
}

[dir="rtl"] .page-container__footer-button {
  margin-left: 16px;
}

[dir="ltr"] .page-container__footer-button:last-of-type {
  margin-right: 0;
}

[dir="rtl"] .page-container__footer-button:last-of-type {
  margin-left: 0;
}

.page-container__footer-button__cancel {
  border-color: var(--color-primary-alternative) !important;
  color: var(--color-primary-alternative);
}

.page-container__back-button {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

.page-container__title {
  font-size: 2rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  font-weight: 500;
}

[dir="ltr"] .page-container__title {
  margin-right: 1.5rem;
}

[dir="rtl"] .page-container__title {
  margin-left: 1.5rem;
}

[dir="ltr"] .page-container__title--no-margin-right {
  margin-right: 0;
}

[dir="rtl"] .page-container__title--no-margin-right {
  margin-left: 0;
}

.page-container__subtitle {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding-top: 0.5rem;
  color: var(--color-text-alternative);
}

.page-container__tabs {
  display: flex;
  margin-top: 16px;
}

.page-container__tab {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  min-width: 5rem;
  color: var(--color-text-alternative);
  border-bottom: none;
}

[dir="ltr"] .page-container__tab {
  margin-right: 16px;
}

[dir="rtl"] .page-container__tab {
  margin-left: 16px;
}

[dir="ltr"] .page-container__tab:last-of-type {
  margin-right: 0;
}

[dir="rtl"] .page-container__tab:last-of-type {
  margin-left: 0;
}

.page-container--full-width {
  width: 100% !important;
}

.page-container--full-height {
  height: 100% !important;
  max-height: initial !important;
  min-height: initial !important;
}

.page-container__content {
  overflow-y: auto;
  flex: 1;
}

.page-container__warning-container {
  background: var(--color-error-muted);
  padding: 20px;
  display: flex;
  align-items: flex-start;
}

[dir="ltr"] .page-container__warning-message {
  padding-left: 15px;
}

[dir="rtl"] .page-container__warning-message {
  padding-right: 15px;
}

.page-container__warning-title {
  font-weight: 500;
}

.page-container__warning-icon {
  padding-top: 5px;
  color: var(--color-error-default);
}

@media screen and (max-width: 250px) {
  .page-container__footer {
    flex-flow: column-reverse;
  }

  .page-container__footer-button {
    width: 100%;
    margin-bottom: 1rem;
  }

  [dir="ltr"] .page-container__footer-button {
    margin-right: 0;
  }

  [dir="rtl"] .page-container__footer-button {
    margin-left: 0;
  }

  [dir="ltr"] .page-container__footer-button:first-of-type {
    margin-right: 4px;
  }

  [dir="rtl"] .page-container__footer-button:first-of-type {
    margin-left: 4px;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .page-container {
    height: 100%;
    width: 100%;
    background-color: var(--color-background-default);
    border-radius: 0;
    flex: 1;
    overflow-y: auto;
  }
}

@media screen and (min-width: 576px) {
  .page-container {
    max-height: 82vh;
    min-height: 570px;
    flex: 0 0 auto;
    margin-right: auto;
    margin-left: auto;
  }
}
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.popover-wrap {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 328px;
  max-height: 94vh;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
  border-radius: 10px;
  background: var(--color-background-default);
}

.popover-wrap ::-webkit-scrollbar {
  width: 6px;
}

.popover-wrap ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--color-icon-muted);
}

.popover-header {
  position: relative;
}

.popover-header__title--center {
  flex: 1;
}

.popover-header__title-wrap {
  white-space: normal;
}

.popover-bg {
  width: 100%;
  height: 100%;
  background: var(--color-overlay-default);
}

.popover-content {
  overflow-y: auto;
  position: relative;
  flex: 1;
  align-content: stretch;
}

.popover-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
}

[dir="ltr"] .popover-container {
  left: 0;
}

[dir="rtl"] .popover-container {
  right: 0;
}

.popover-footer {
  border-top: 1px solid var(--color-border-muted);
}

.popover-footer > :only-child {
  margin: 0 auto;
}

.popover-scroll-button {
  position: absolute;
  bottom: 12px;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-primary-default);
  z-index: 201;
  cursor: pointer;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="ltr"] .popover-scroll-button {
  right: 12px;
}

[dir="rtl"] .popover-scroll-button {
  left: 12px;
}

.popover-scroll-button:hover {
  opacity: 1;
}

.popover-arrow {
  width: 22px;
  height: 22px;
  background: var(--color-background-default);
  position: absolute;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

[dir="ltr"] .popover-arrow {
  transform: rotate(45deg);
}

[dir="rtl"] .popover-arrow {
  transform: rotate(-45deg);
}

.popover-container .page-container {
  width: auto;
}

.pulse-loader {
  display: flex;
}

.pulse-loader__loading-dot-one, .pulse-loader__loading-dot-two, .pulse-loader__loading-dot-three {
  background: var(--color-primary-default);
  width: 9px;
  height: 9px;
  border-radius: 100%;
  animation-fill-mode: both;
}

[dir="ltr"] .pulse-loader__loading-dot-one, [dir="ltr"] .pulse-loader__loading-dot-two, [dir="ltr"] .pulse-loader__loading-dot-three {
  margin-right: 2px;
}

[dir="rtl"] .pulse-loader__loading-dot-one, [dir="rtl"] .pulse-loader__loading-dot-two, [dir="rtl"] .pulse-loader__loading-dot-three {
  margin-left: 2px;
}

.pulse-loader__loading-dot-one {
  animation: loading-dot 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.pulse-loader__loading-dot-two {
  animation: loading-dot 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.pulse-loader__loading-dot-three {
  animation: loading-dot 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

@keyframes loading-dot {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  45% {
    transform: scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: scale(1);
    opacity: 1;
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.qr-code {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.qr-code__wrapper {
  position: relative;
  display: inline-block;
}

.qr-code__image {
  position: relative;
  z-index: 1;
  border: 1px solid var(--color-border-muted);
  border-radius: 16px;
  background-color: var(--brand-colors-white);
}

.qr-code__logo {
  position: absolute;
  top: 50%;
  z-index: 2;
  background-color: var(--brand-colors-white);
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 45px;
}

[dir="ltr"] .qr-code__logo {
  left: 50%;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .qr-code__logo {
  right: 50%;
  transform: translate(50%, -50%);
}

.qr-code__logo img {
  height: 35px;
  width: 35px;
}

.qr-code__message-container > div:first-child {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  margin-top: 18px;
  color: var(--color-text-muted);
}

.qr-code__address-segments {
  word-break: break-all;
  width: 240px;
  text-align: center;
}

.qr-code__address-inner-segment {
  display: inline;
}

.qr-code__copy-button {
  cursor: pointer;
}

.qr-code__error {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-error-default);
  margin-bottom: 9px;
}

.radio-group {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 60px;
  width: 100%;
}

.radio-group--has-recommendation {
  grid-template-rows: 100px;
}

.radio-group label {
  cursor: pointer;
}

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

.radio-group__column-recommended {
  height: 20px;
}

.radio-group__column-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.radio-group__column-line, .radio-group__column-horizontal-line, .radio-group__column-radio, .radio-group__column-label {
  flex: 1 1 auto;
}

.radio-group__column-start-connector {
  width: calc(50% + 0.5px);
  height: 6px;
  border-bottom: 1px solid var(--color-border-muted);
  align-self: flex-end;
}

[dir="ltr"] .radio-group__column-start-connector {
  border-left: 1px solid var(--color-border-muted);
}

[dir="rtl"] .radio-group__column-start-connector {
  border-right: 1px solid var(--color-border-muted);
}

.radio-group__column-end-connector {
  width: calc(50% + 0.5px);
  height: 6px;
  border-bottom: 1px solid var(--color-border-muted);
  align-self: flex-start;
}

[dir="ltr"] .radio-group__column-end-connector {
  border-right: 1px solid var(--color-border-muted);
}

[dir="rtl"] .radio-group__column-end-connector {
  border-left: 1px solid var(--color-border-muted);
}

.radio-group__column-vertical-line {
  width: 1px;
  height: 5px;
}

[dir="ltr"] .radio-group__column-vertical-line {
  border-left: 1px solid var(--color-border-muted);
}

[dir="rtl"] .radio-group__column-vertical-line {
  border-right: 1px solid var(--color-border-muted);
}

.radio-group__column-horizontal-line {
  height: 1px;
  border-bottom: 1px solid var(--color-border-muted);
  width: 100%;
}

.radio-group__column-radio input {
  cursor: pointer;
  margin: 0;
}

.radio-group__column-radio, .radio-group__column-label {
  text-align: center;
}

.radio-group__column-label {
  padding-top: 6px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.sender-to-recipient {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.sender-to-recipient--default {
  height: 42px;
}

.sender-to-recipient--default .sender-to-recipient__tooltip-wrapper {
  min-width: 0;
}

.sender-to-recipient--default .sender-to-recipient__tooltip-container {
  max-width: 100%;
}

.sender-to-recipient--default .sender-to-recipient__party {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--color-border-muted);
}

.sender-to-recipient--default .sender-to-recipient__party--sender {
  cursor: pointer;
}

[dir="ltr"] .sender-to-recipient--default .sender-to-recipient__party--sender {
  padding-right: 30px;
}

[dir="rtl"] .sender-to-recipient--default .sender-to-recipient__party--sender {
  padding-left: 30px;
}

[dir="ltr"] .sender-to-recipient--default .sender-to-recipient__party--recipient {
  padding-left: 30px;
  border-left: 1px solid var(--color-border-muted);
}

[dir="rtl"] .sender-to-recipient--default .sender-to-recipient__party--recipient {
  padding-right: 30px;
  border-right: 1px solid var(--color-border-muted);
}

.sender-to-recipient--default .sender-to-recipient__party--recipient-with-address {
  cursor: pointer;
}

.sender-to-recipient--default .sender-to-recipient__arrow-container {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[dir="ltr"] [dir=rtl] .sender-to-recipient--default .sender-to-recipient__arrow-container {
  transform: rotate(180deg);
}

[dir="rtl"] [dir=rtl] .sender-to-recipient--default .sender-to-recipient__arrow-container {
  transform: rotate(-180deg);
}

.sender-to-recipient--default .sender-to-recipient__arrow-circle {
  background: var(--color-background-default);
  padding: 5px;
  border: 1px solid var(--color-border-muted);
  border-radius: 20px;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sender-to-recipient--default .sender-to-recipient__arrow-circle__icon {
  color: var(--color-icon-muted);
}

.sender-to-recipient--default .sender-to-recipient__name {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[dir="ltr"] .sender-to-recipient--default .sender-to-recipient__name {
  padding-left: 14px;
}

[dir="rtl"] .sender-to-recipient--default .sender-to-recipient__name {
  padding-right: 14px;
}

[dir=rtl] .sender-to-recipient--default .sender-to-recipient__name {
  direction: ltr;
  text-align: right;
}

[dir=rtl] .sender-to-recipient--default .sender-to-recipient__name span {
  display: block;
  direction: rtl;
}

.sender-to-recipient--cards .sender-to-recipient__party {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  border-radius: 4px;
  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  padding: 6px;
  background: var(--color-background-default);
  cursor: pointer;
  min-width: 0;
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
}

.sender-to-recipient--cards .sender-to-recipient__tooltip-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sender-to-recipient--cards .sender-to-recipient__name {
  font-size: 0.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[dir=rtl] .sender-to-recipient--cards .sender-to-recipient__name {
  direction: ltr;
  text-align: right;
}

[dir=rtl] .sender-to-recipient--cards .sender-to-recipient__name span {
  display: block;
  direction: rtl;
}

.sender-to-recipient--cards .sender-to-recipient__arrow-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="ltr"] [dir=rtl] .sender-to-recipient--cards .sender-to-recipient__arrow-container {
  transform: rotate(180deg);
}

[dir="rtl"] [dir=rtl] .sender-to-recipient--cards .sender-to-recipient__arrow-container {
  transform: rotate(-180deg);
}

.sender-to-recipient--flat .sender-to-recipient__party {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 6px;
  cursor: pointer;
  min-width: 0;
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
}

.sender-to-recipient--flat .sender-to-recipient__tooltip-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sender-to-recipient--flat .sender-to-recipient__name {
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-inline-start: 8px;
}

[dir=rtl] .sender-to-recipient--flat .sender-to-recipient__name {
  direction: ltr;
  text-align: right;
}

[dir=rtl] .sender-to-recipient--flat .sender-to-recipient__name span {
  display: block;
  direction: rtl;
}

.sender-to-recipient--flat .sender-to-recipient__arrow-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="ltr"] [dir=rtl] .sender-to-recipient--flat .sender-to-recipient__arrow-container {
  transform: rotate(180deg);
}

[dir="rtl"] [dir=rtl] .sender-to-recipient--flat .sender-to-recipient__arrow-container {
  transform: rotate(-180deg);
}

.show-hide-toggle {
  position: relative;
  display: inline-flex;
}

.show-hide-toggle__input {
  appearance: none;
  /* Focused when tabbing with keyboard */
}

.show-hide-toggle__input + .show-hide-toggle__label {
  display: flex;
  cursor: pointer;
  user-select: none;
}

.show-hide-toggle__input:focus, .show-hide-toggle__input:focus-visible {
  outline: none;
}

.show-hide-toggle__input:focus + .show-hide-toggle__label, .show-hide-toggle__input:focus-visible + .show-hide-toggle__label {
  outline: Highlight auto 1px;
}

.show-hide-toggle__input:disabled + label {
  opacity: 0.5;
  cursor: auto;
}

.show-hide-toggle__icon {
  color: var(--color-icon-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.snackbar {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 0.75rem 1rem;
  color: var(--color-text-default);
  min-width: 360px;
  width: -moz-fit-content;
  width: fit-content;
  background: var(--color-info-muted);
  border: 1px solid var(--color-info-default);
  border-radius: 6px;
}

.site-origin {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

.site-origin .chip {
  max-width: 100%;
}

[dir="ltr"] .site-origin .chip__left-icon {
  padding: 4px 0 4px 8px;
}

[dir="rtl"] .site-origin .chip__left-icon {
  padding: 4px 8px 4px 0;
}

.site-origin span {
  display: inline-block;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
  max-width: 100%;
}

.slider {
  display: inline-block;
  width: 100%;
}

.slider__heading, .slider__footer {
  display: flex;
  justify-content: space-between;
}

.slider__heading-title {
  display: flex;
  align-items: center;
}

.slider__heading-title > p {
  font-size: 14px;
}

[dir="ltr"] .slider__heading-title > p {
  margin-left: 10px;
}

[dir="rtl"] .slider__heading-title > p {
  margin-right: 10px;
}

.slider__heading-detail > p {
  font-size: 14px;
}

.slider__footer-info {
  display: flex;
  align-items: center;
}

.slider__footer-info > p {
  font-size: 12px;
}

.slider__footer-edit > button {
  border: none;
  background: none;
  font-size: 12px;
  color: var(--color-primary-default);
}

.slider__footer-edit > button:focus {
  outline: none;
}

.slider h6 {
  margin-inline-end: 6px;
}

.tab {
  border-bottom: 2px solid var(--color-border-muted);
  color: var(--color-text-alternative);
  font-weight: 500;
  transition: color 200ms ease, border-color 200ms ease;
}

.tab button {
  min-width: 50px;
  background-color: unset;
  color: unset;
  font-weight: 500;
  transition: color 50ms ease, border-color 50ms ease;
}

.tab button:not([disabled]):hover {
  color: var(--color-text-default);
}

.tab--disabled {
  color: var(--color-text-muted);
}

.tab--single {
  color: var(--color-text-default);
  border-bottom: none;
}

.tab--active {
  color: var(--color-text-default);
  border-bottom: 2px solid var(--color-text-default);
  transition: color 200ms cubic-bezier(0.7, 0, 0.15, 1), border-color 200ms cubic-bezier(0.7, 0, 0.15, 1);
}

.tabs {
  -moz-transform: translateZ(0);
}

.tabs__list {
  position: sticky;
  top: 0;
  z-index: 2;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.MuiInput-input,
.MuiInputBase-input {
  color: var(--color-text-default) !important;
}

.MuiFormHelperText-root.Mui-error {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-error-default) !important;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.toggle-button {
  display: flex;
  cursor: pointer;
}

.toggle-button__status {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  display: grid;
}

.toggle-button__label-off, .toggle-button__label-on {
  grid-area: 1/1/1/1;
}

.toggle-button__label-off {
  visibility: hidden;
}

.toggle-button__label-on {
  visibility: visible;
}

.toggle-button--off .toggle-button__label-off {
  visibility: visible;
}

.toggle-button--off .toggle-button__label-on {
  visibility: hidden;
}

.toggle-button--disabled {
  opacity: 0.5;
}

.token-balance-component {
  display: flex;
  align-items: center;
}

.token-balance-component__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir="ltr"] .token-balance-component__suffix {
  padding-left: 4px;
}

[dir="rtl"] .token-balance-component__suffix {
  padding-right: 4px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.tippy-popper .tippy-tooltip.tippy-tooltip--mm-custom-theme {
  background: var(--color-background-muted);
  color: var(--color-text-default);
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
  padding: 10px 14px;
  padding-bottom: 12px;
  border-radius: 8px;
}

.tippy-popper .tippy-tooltip.tippy-tooltip--mm-custom-theme .tippy-tooltip-content {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
}

[dir="ltr"] .tippy-popper .tippy-tooltip.tippy-tooltip--mm-custom-theme .tippy-tooltip-content {
  text-align: left;
}

[dir="rtl"] .tippy-popper .tippy-tooltip.tippy-tooltip--mm-custom-theme .tippy-tooltip-content {
  text-align: right;
}

.tippy-popper .tippy-tooltip.tippy-tooltip--mm-custom-theme .tippy-tooltip-content a {
  color: var(--color-primary-default);
}

.tippy-popper .tippy-tooltip.tippy-tooltip--mm-custom-theme .tippy-tooltip-content p {
  margin-bottom: 16px;
}

.tippy-popper .tippy-tooltip.tippy-tooltip--mm-custom-theme .tippy-tooltip-content p:last-child {
  margin-bottom: 0;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
  border-top-color: var(--color-background-default);
}

[dir="ltr"] .tippy-popper[x-placement^=right] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
  border-right-color: var(--color-background-default);
}

[dir="rtl"] .tippy-popper[x-placement^=right] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
  border-left-color: var(--color-background-default);
}

[dir="ltr"] .tippy-popper[x-placement^=left] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
  border-left-color: var(--color-background-default);
}

[dir="rtl"] .tippy-popper[x-placement^=left] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
  border-right-color: var(--color-background-default);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
  border-bottom-color: var(--color-background-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.truncated-definition-list__view-more {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  padding: 0;
  width: auto;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/**
 * @deprecated `<Typography />` has been deprecated in favor of the `<Text />` component in ./ui/components/component-library/text/text.js
 *
 * See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
 *
 * Help to replace `Typography` with `Text` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/17670
 */
.typography {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography b, .typography strong {
  font-weight: 700;
}

.typography--h1 {
  font-size: 2.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h2 {
  font-size: 2rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h3 {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h4 {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h5 {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h6 {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--paragraph {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h7 {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h8 {
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--h9 {
  font-size: 0.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.typography--color-background-default {
  color: var(--color-background-default);
}

.typography--color-background-alternative {
  color: var(--color-background-alternative);
}

.typography--color-background-muted {
  color: var(--color-background-muted);
}

.typography--color-background-hover {
  color: var(--color-background-hover);
}

.typography--color-background-pressed {
  color: var(--color-background-pressed);
}

.typography--color-text-default {
  color: var(--color-text-default);
}

.typography--color-text-alternative {
  color: var(--color-text-alternative);
}

.typography--color-text-muted {
  color: var(--color-text-muted);
}

.typography--color-icon-default {
  color: var(--color-icon-default);
}

.typography--color-icon-alternative {
  color: var(--color-icon-alternative);
}

.typography--color-icon-muted {
  color: var(--color-icon-muted);
}

.typography--color-border-default {
  color: var(--color-border-default);
}

.typography--color-border-muted {
  color: var(--color-border-muted);
}

.typography--color-overlay-default {
  color: var(--color-overlay-default);
}

.typography--color-overlay-alternative {
  color: var(--color-overlay-alternative);
}

.typography--color-overlay-inverse {
  color: var(--color-overlay-inverse);
}

.typography--color-primary-default {
  color: var(--color-primary-default);
}

.typography--color-primary-alternative {
  color: var(--color-primary-alternative);
}

.typography--color-primary-muted {
  color: var(--color-primary-muted);
}

.typography--color-primary-inverse {
  color: var(--color-primary-inverse);
}

.typography--color-error-default {
  color: var(--color-error-default);
}

.typography--color-error-alternative {
  color: var(--color-error-alternative);
}

.typography--color-error-muted {
  color: var(--color-error-muted);
}

.typography--color-error-inverse {
  color: var(--color-error-inverse);
}

.typography--color-warning-default {
  color: var(--color-warning-default);
}

.typography--color-warning-muted {
  color: var(--color-warning-muted);
}

.typography--color-warning-inverse {
  color: var(--color-warning-inverse);
}

.typography--color-success-default {
  color: var(--color-success-default);
}

.typography--color-success-muted {
  color: var(--color-success-muted);
}

.typography--color-success-inverse {
  color: var(--color-success-inverse);
}

.typography--color-info-default {
  color: var(--color-info-default);
}

.typography--color-info-muted {
  color: var(--color-info-muted);
}

.typography--color-info-inverse {
  color: var(--color-info-inverse);
}

.typography--color-goerli {
  color: var(--color-network-goerli-default);
}

.typography--color-sepolia {
  color: var(--color-network-sepolia-default);
}

.typography--color-goerli-inverse {
  color: var(--color-network-goerli-inverse);
}

.typography--color-sepolia-inverse {
  color: var(--color-network-sepolia-inverse);
}

.typography--color-linea-goerli {
  color: var(--color-network-linea-goerli-default);
}

.typography--color-linea-goerli-inverse {
  color: var(--color-network-linea-goerli-inverse);
}

.typography--color-linea-sepolia {
  color: var(--color-network-linea-sepolia-default);
}

.typography--color-linea-sepolia-inverse {
  color: var(--color-network-linea-sepolia-inverse);
}

.typography--color-linea-mainnet {
  color: var(--color-network-linea-mainnet-default);
}

.typography--color-linea-mainnet-inverse {
  color: var(--color-network-linea-mainnet-inverse);
}

.typography--color-localhost {
  color: var(--color-network-localhost-default);
}

.typography--color-transparent {
  color: var(--transparent);
}

.typography--color-flask-purple {
  color: var(--color-flask-default);
}

.typography--color-inherit {
  color: var(--inherit);
}

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

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

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

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

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

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

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

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

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

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

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

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

.typography--style-normal {
  font-style: normal;
}

.typography--style-italic {
  font-style: italic;
}

.typography--style-oblique {
  font-style: oblique;
}

[dir="ltr"] .typography--align-left {
  text-align: left;
}

[dir="rtl"] .typography--align-left {
  text-align: right;
}

[dir="ltr"] .typography--align-right {
  text-align: right;
}

[dir="rtl"] .typography--align-right {
  text-align: left;
}

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

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

.typography--align-end {
  text-align: end;
}

.typography--overflowwrap-normal {
  overflow-wrap: normal;
}

.typography--overflowwrap-break-word {
  overflow-wrap: break-word;
}

.typography--overflowwrap-anywhere {
  overflow-wrap: anywhere;
}

.typography--spacing-1 {
  margin: 4px auto;
}

.typography--spacing-2 {
  margin: 8px auto;
}

.typography--spacing-3 {
  margin: 12px auto;
}

.typography--spacing-4 {
  margin: 16px auto;
}

.typography--spacing-5 {
  margin: 20px auto;
}

.typography--spacing-6 {
  margin: 24px auto;
}

.typography--spacing-7 {
  margin: 28px auto;
}

.typography--spacing-8 {
  margin: 32px auto;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.textarea {
  display: block;
  box-shadow: none;
  color: var(--color-text-default);
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
}

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

.textarea--not-scrollable {
  overflow-y: hidden;
}

.textarea--resize-none {
  resize: none;
}

.textarea--resize-both {
  resize: both;
}

.textarea--resize-horizontal {
  resize: horizontal;
}

.textarea--resize-vertical {
  resize: vertical;
}

.textarea--resize-initial {
  resize: initial;
}

.textarea--resize-inherit {
  resize: inherit;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.unit-input {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background-color: var(--color-background-default);
  color: var(--color-text-default);
  padding: 8px 10px;
  position: relative;
}

.unit-input input[type=number] {
  -moz-appearance: textfield;
}

.unit-input input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: none;
}

.unit-input input[type=number]:hover::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: none;
}

.unit-input__inputs {
  flex: 1 0 auto;
  display: flex;
  flex-flow: column nowrap;
}

.unit-input__input {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  background: transparent;
  border: none;
  min-width: 0;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 16px;
  outline: none;
}

.unit-input__input-container {
  display: flex;
  align-items: center;
  padding-bottom: 2px;
}

.unit-input__suffix {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

[dir="ltr"] .unit-input__suffix {
  margin-left: 3px;
}

[dir="rtl"] .unit-input__suffix {
  margin-right: 3px;
}

.unit-input--error {
  border-color: var(--color-error-default);
}

.url-icon {
  width: 24px;
  height: 24px;
  background-position: center;
  border-radius: 50%;
  background-color: var(--color-background-default);
  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  flex: 0 0 auto;
  -moz-animation: fadein 1s;
  /* Firefox */
  -webkit-animation: fadein 1s;
  /* Safari and Chrome */
  -o-animation: fadein 1s;
}

.url-icon__fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-background-alternative);
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.update-nickname__wrapper {
  height: 620px;
  width: 360px;
  border-radius: 10px;
  max-height: 100vh;
  width: auto;
}

.update-nickname__wrapper .popover-header {
  border-bottom: 1px solid var(--color-border-muted);
  margin-bottom: 16px;
  border-radius: 10px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .update-nickname__wrapper {
    width: 96%;
    height: 96%;
  }
}

[dir="ltr"] .update-nickname__cancel {
  margin-right: 16px;
}

[dir="rtl"] .update-nickname__cancel {
  margin-left: 16px;
}

.update-nickname__content {
  padding: 0 18px 20px 18px;
  position: relative;
}

.update-nickname__content__indenticon {
  margin-bottom: 16px;
}

.update-nickname__content__text-area-wrapper {
  height: 96px !important;
}

.update-nickname__content__text-area {
  line-height: initial !important;
}

.update-nickname__content__address {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-alternative);
  margin-bottom: 16px;
  overflow-wrap: break-word;
}

.update-nickname__content__label, .update-nickname__content__label--capitalized {
  text-transform: capitalize;
  margin-top: 16px;
  color: var(--color-text-default);
  font-size: 14px;
}

.update-nickname__content__nickname-label {
  margin-bottom: 8px;
  color: var(--color-text-default);
  font-size: 14px;
}

.disclosure {
  font-size: 14px;
}

.disclosure__summary {
  position: relative;
  font-weight: bold;
  display: flex;
  cursor: pointer;
}

.disclosure__summary::-webkit-details-marker, .disclosure__summary::marker {
  display: none;
  content: "";
}

.disclosure__content {
  padding-top: 10px;
  margin-inline-start: 12px;
  font-size: 14px;
}

.disclosure__content.small {
  font-size: 12px;
}

.disclosure details[open] .disclosure__summary.is-arrow .disclosure__summary--icon {
  transform: rotateX(0deg);
}

.disclosure__summary.is-arrow {
  display: flex;
  align-items: center;
  font-weight: normal;
}

.disclosure__summary.is-arrow:hover {
  opacity: 0.5;
}

[dir="ltr"] .disclosure__summary.is-arrow + .disclosure__content {
  margin-left: 0;
}

[dir="rtl"] .disclosure__summary.is-arrow + .disclosure__content {
  margin-right: 0;
}

.disclosure__summary.is-arrow .disclosure__summary--icon {
  transform: rotateX(180deg);
  transition: 0.1s transform;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.deprecated-networks {
  max-width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1050;
}

@media screen and (min-width: 576px) {
  .deprecated-networks {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .deprecated-networks {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .deprecated-networks {
    width: 62vw;
  }
}

.collection-image-alt {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 2px;
  background: var(--color-overlay-alternative);
}

.form-combo-field {
  width: 100%;
}

.form-combo-field ::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--color-icon-muted);
}

.form-combo-field ::-webkit-scrollbar {
  width: 0;
}

.form-combo-field__value > div {
  outline: 0;
  width: 100%;
}

.form-combo-field__value-dropdown-visible > div {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-combo-field__dropdown {
  border: 1px solid var(--color-border-default);
  border-top-width: 0;
  position: absolute;
  overflow-y: scroll;
  z-index: 1;
  background-color: var(--color-background-default);
}

.form-combo-field__dropdown__scroll::-webkit-scrollbar {
  width: 8px;
}

.form-combo-field__option {
  display: flex;
  flex-direction: column;
  padding: 10px 16px 10px 16px;
  line-height: normal;
  font-weight: normal;
}

.form-combo-field__option:hover {
  background-color: var(--color-background-default-hover);
}

.form-combo-field__option-primary {
  padding-bottom: 4px;
}

.form-combo-field__option-secondary {
  color: var(--color-text-alternative);
  font-size: 12px;
}

.form-combo-field__option-primary, .form-combo-field__option-secondary {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.delineator__header {
  cursor: pointer;
}

.delineator__header--loading {
  cursor: default;
}

.delineator__header--disabled {
  cursor: default;
  opacity: 0.5;
}

/**
* Please import your styles in order of atomicity.
* The most atomic styles should be imported first.
* This will help improve specificity and reduce the chance of
* unintended overrides.
**/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.multichain-page-content {
  overflow: auto;
}

.multichain-page {
  transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}

@media screen and (min-width: 576px) and (min-height: 720px) {
  .multichain-page:not(.multichain-page--has-app-header) {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.multichain-page--has-app-header .multichain-page__inner-container {
  border-radius: 0 0 2px 2px;
  border: 0;
  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
}

.multichain-page__inner-container {
  border: 1px solid var(--color-border-muted);
  border-radius: 2px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

@media screen and (min-width: 576px) and (min-height: 720px) {
  .multichain-app-header-logo + .multichain-page {
    padding-top: 0;
  }
}

@media screen and (min-width: 576px) and (min-height: 720px) {
  .snap-view > .multichain-page {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.multichain-send-page {
  max-width: 100%;
  border: 1px solid var(--color-border-muted);
  border-radius: 2px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

@media screen and (min-width: 576px) {
  .multichain-send-page {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .multichain-send-page {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .multichain-send-page {
    width: 62vw;
  }
}

.multichain-send-page__account-picker {
  height: 62px;
}

.multichain-send-page__account-picker__label {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 500;
}

.multichain-send-page__nav-button {
  flex-basis: 50%;
}

.multichain-send-page__recipient {
  width: 100%;
}

.multichain-send-page__recipient .tabs__list {
  font-size: 0.875rem;
  border-bottom: 0;
  background-color: transparent;
  position: relative;
}

.multichain-send-page__recipient .tabs__list .tab {
  width: 50%;
}

.multichain-send-page__recipient__item__title-tooltip > * {
  display: inline;
}

.multichain-send-page__recipient__item__title-tooltip {
  white-space: nowrap;
}

.multichain-send-page__recipient__item__title-tooltip-container {
  overflow: hidden;
  text-overflow: ellipsis;
}

.multichain-send-page__recipient__item__title-confusable-wrapper {
  display: inline-block;
}

.multichain-send-page__recipient__item__avatar {
  width: 20px;
  height: 20px;
  max-width: 20px;
  border-radius: 10px;
}

.multichain-send-page__recipient__item__badge {
  width: "20px";
  height: "20px";
}

[dir="ltr"] .multichain-send-page__recipient__item__badge {
  transform: scale(1) translate(25%, 70%);
}

[dir="rtl"] .multichain-send-page__recipient__item__badge {
  transform: scale(1) translate(-25%, 70%);
}

.multichain-send-page__recipient:last-child {
  padding-bottom: 0;
}

.connections-page .tabs__list {
  display: flex;
  justify-content: center;
  margin-left: 16px;
  margin-right: 16px;
}

.connections-page__no-site-connected-content {
  height: 100%;
}

.permissions-page__tabs {
  padding: 0 16px;
}

.permissions-page__tabs .tab {
  flex-grow: 1;
}

.multichain-address-copy-button__address--wrap {
  word-break: break-word;
  min-height: 32px;
  height: auto;
}

.address-list-item {
  /* Set explicitly to match the font-size of AccountListItem */
}

.address-list-item__label {
  font-size: 14px !important;
}

.address-list-item__duplicate-contact-warning-icon {
  align-self: center;
}

[dir="ltr"] .address-list-item__duplicate-contact-warning-icon {
  margin-left: auto;
}

[dir="rtl"] .address-list-item__duplicate-contact-warning-icon {
  margin-right: auto;
}

.address-list-item:hover, .address-list-item:focus-within {
  background: var(--color-background-default-hover);
}

.add-nft__close {
  color: var(--color-icon-default);
  background: none;
  flex: 0;
  align-self: flex-start;
}

[dir="ltr"] .add-nft__close {
  padding-right: 0;
}

[dir="rtl"] .add-nft__close {
  padding-left: 0;
}

.multichain-account-list-item {
  position: relative;
  width: 100%;
  justify-items: center;
  /* Prevent font-size resizing to avoid conflcits for long asset and token names */
}

.multichain-account-list-item--clickable {
  cursor: pointer;
}

.multichain-account-list-item:not(.multichain-account-list-item--clickable) {
  cursor: default;
}

.multichain-account-list-item:not(.multichain-account-list-item--clickable) .multichain-account-list-item__account-name__button,
.multichain-account-list-item:not(.multichain-account-list-item--clickable) .multichain-badge-status {
  cursor: default;
}

.multichain-account-list-item:not(.multichain-account-list-item--selected):hover, .multichain-account-list-item:not(.multichain-account-list-item--selected):focus-within {
  background: var(--color-background-default-hover);
}

.multichain-account-list-item__account-name {
  max-width: 160px;
  min-width: 80px;
  /* Prevent the normal hover effect on Buttons */
}

.multichain-account-list-item__account-name__button:hover, .multichain-account-list-item__account-name__button:focus {
  opacity: 1;
}

.multichain-account-list-item__asset {
  max-width: 130px;
  min-width: 60px;
  align-self: self-end;
}

.multichain-account-list-item__account-name button, .multichain-account-list-item__asset, .multichain-account-list-item__tooltip {
  font-size: 14px !important;
}

.multichain-account-list-item__avatar {
  margin-inline-end: 2px;
}

.multichain-account-list-item__selected-indicator {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .multichain-account-list-item__selected-indicator {
  left: 4px;
}

[dir="rtl"] .multichain-account-list-item__selected-indicator {
  right: 4px;
}

.multichain-account-list-item__content {
  overflow: hidden;
  flex: 1;
}

.multichain-account-list-item__tooltip {
  display: inline;
}

.multichain-account-list-item .currency-display-component {
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline;
}

[dir="ltr"] .multichain-account-list-item .currency-display-component__prefix {
  padding-right: unset;
}

[dir="rtl"] .multichain-account-list-item .currency-display-component__prefix {
  padding-left: unset;
}

.multichain-account-list-item .currency-display-component__suffix {
  font-size: 12px !important;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.multichain-account-list-item-menu__popover {
  z-index: 1051;
  overflow: hidden;
  min-width: 225px;
  max-width: 225px;
}

.multichain-account-menu-popover__dialog {
  max-height: 100%;
}

.multichain-account-menu-popover .popover-content {
  border-radius: 0;
}

.multichain-account-menu-popover__list {
  overflow: auto;
}

.multichain-account-menu-popover__list--menu-item-hidden {
  opacity: 0.5;
}

.multichain-account-menu-popover__list--menu-item-hidden-account {
  opacity: 0.5;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.account-overview__balance-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 auto;
}

.account-overview__tabs {
  border: none;
  padding: 0 16px;
}

.account-overview__tab {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  flex-grow: 1;
}

.account-overview__tab--active {
  color: var(--color-text-default);
}

.account-overview__tab button {
  padding: 8px;
}

.account-overview-unknown__empty {
  margin-top: 24px;
}

.multichain-account-picker:not([disabled]):hover, .multichain-account-picker:not([disabled]):focus {
  box-shadow: none;
  background: var(--color-background-default-hover);
}

.multichain-account-picker-container {
  overflow: hidden;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.activity-list-item {
  cursor: pointer;
}

.activity-list-item__content-container {
  overflow: hidden;
}

.activity-list-item__primary-currency {
  max-width: 130px;
}

@media screen and (min-width: 576px) {
  .activity-list-item__primary-currency {
    max-width: max-content;
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.multichain-app-header {
  max-width: 100%;
  flex-flow: column nowrap;
  z-index: 55;
  min-height: 68px;
}

.multichain-app-header__contents {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  height: 68px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .multichain-app-header__contents {
    height: 100%;
    /* Ensures network picker column and icons column are always the same size */
    grid-template-columns: 64px 2fr 64px;
  }
}

@media screen and (min-width: 576px) {
  .multichain-app-header__contents {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .multichain-app-header__contents {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .multichain-app-header__contents {
    width: 62vw;
  }
}

.multichain-app-header__contents__network-picker {
  max-width: 250px;
}

.multichain-app-header__contents__container {
  width: -moz-fit-content;
  width: fit-content;
}

.multichain-app-header__address-copy-button:not([disabled]):hover, .multichain-app-header__address-copy-button:not([disabled]):focus {
  box-shadow: none;
  background: var(--color-background-default-hover);
}

.multichain-app-header__lock-contents {
  flex-flow: row nowrap;
  height: 68px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .multichain-app-header__lock-contents {
    height: 100%;
  }
}

@media screen and (min-width: 576px) {
  .multichain-app-header__lock-contents {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .multichain-app-header__lock-contents {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .multichain-app-header__lock-contents {
    width: 62vw;
  }
}

.multichain-app-header-shadow {
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
}

.multichain-app-header-logo {
  height: 75px;
  flex: 0 0 auto;
}

.app-header__metafox-logo--icon {
  height: 32px;
}

@media screen and (min-width: 576px) {
  .app-header__metafox-logo--icon {
    display: none;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .app-header__metafox-logo--horizontal {
    display: none;
  }
}

.multichain-app-header-counter {
  position: absolute;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.multichain-connected-accounts-menu__popover {
  z-index: 1051;
  overflow: hidden;
  min-width: 225px;
  max-width: 225px;
}

.multichain-connected-site-menu {
  height: 24px;
  width: 24px;
  padding: 0;
}

.multichain-connected-site-menu:hover {
  background-color: var(--color-background-hover);
}

.multichain-connected-site-menu--disabled, .multichain-connected-site-menu:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.multichain-connected-site-menu__badge {
  height: 12px;
  width: 12px;
}

.multichain-connected-site-menu__badge.not-connected {
  height: 8px;
  width: 8px;
}

.multichain-connected-site-menu__badge.not-connected::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--color-background-default);
  z-index: -1;
  border-radius: 50%;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.name-snap-account-page {
  max-width: 100%;
  width: 100%;
  flex-flow: column nowrap;
  margin: 0 auto !important;
}

@media screen and (max-width: calc(576px - 1px)) {
  .name-snap-account-page {
    height: 100%;
  }
}

@media screen and (min-width: 576px) {
  .name-snap-account-page {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .name-snap-account-page {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .name-snap-account-page {
    width: 62vw;
  }
}

.dropdown-editor__item-dropdown {
  cursor: pointer;
  word-break: break-all;
}

.dropdown-editor__item {
  position: relative;
}

.dropdown-editor__item:hover {
  cursor: pointer;
  background-color: var(--color-background-default-hover);
}

.dropdown-editor__item--selected, .dropdown-editor__item--selected:hover {
  background-color: var(--color-primary-muted);
}

.dropdown-editor__item-selected-pill {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .dropdown-editor__item-selected-pill {
  left: 4px;
}

[dir="rtl"] .dropdown-editor__item-selected-pill {
  right: 4px;
}

.dropdown-editor__item-popover {
  z-index: 1;
}

.dropdown-editor__item-placeholder {
  cursor: pointer;
  pointer-events: none;
  user-select: none;
}

.edit-accounts-modal__body {
  overflow: auto;
}

.edit-networks-modal__body {
  overflow: auto;
}

.multichain-token-list-item__container-cell--clickable:hover, .multichain-token-list-item__container-cell--clickable:focus-within {
  background-color: var(--color-background-default-hover);
}

.multichain-token-list-item__badge {
  align-self: center;
}

.multichain-network-list-item {
  position: relative;
  cursor: pointer;
}

.multichain-network-list-item:not(.multichain-network-list-item--selected, .multichain-network-list-item--disabled, .multichain-network-list-item--not-selectable):hover, .multichain-network-list-item:not(.multichain-network-list-item--selected, .multichain-network-list-item--disabled, .multichain-network-list-item--not-selectable):focus-within {
  background: var(--color-background-default-hover);
}

.multichain-network-list-item--not-selectable {
  cursor: default;
}

.multichain-network-list-item--disabled {
  opacity: 0.4;
}

.multichain-network-list-item--disabled .mm-avatar-network {
  filter: grayscale(1);
}

.multichain-network-list-item a:hover,
.multichain-network-list-item a:focus {
  color: inherit;
}

.multichain-network-list-item:hover .multichain-network-list-item__delete, .multichain-network-list-item:focus .multichain-network-list-item__delete, .multichain-network-list-item:focus-within .multichain-network-list-item__delete {
  visibility: visible;
}

.multichain-network-list-item__tooltip {
  display: inline;
}

.multichain-network-list-item__selected-indicator {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .multichain-network-list-item__selected-indicator {
  left: 4px;
}

[dir="rtl"] .multichain-network-list-item__selected-indicator {
  right: 4px;
}

.multichain-network-list-item__delete {
  visibility: hidden;
}

.multichain-network-list-item__rpc-endpoint {
  max-width: 100%;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.multichain-network-list-item-menu__popover {
  z-index: 1051;
  overflow: hidden;
  min-width: 225px;
  max-width: 225px;
}

.multichain-network-list-menu-content-wrapper__dialog {
  transform: unset;
  animation: network-menu-fade 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
}

@keyframes network-menu-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.multichain-network-list-menu {
  height: 100%;
  overflow: auto;
}

.rpc-list-item {
  overflow: hidden;
}

.rpc-list-item button {
  text-align: start;
}

.mm-carousel {
  height: 100px;
}

.mm-carousel--single-slide {
  height: 70px;
}

.mm-carousel--single-slide .control-dots {
  display: none !important;
}

.mm-carousel-slide {
  position: relative;
  cursor: pointer;
  /* !important needed to override react-responsive-carousel default padding */
  padding: 0 !important;
  background-color: var(--color-background-muted);
}

.mm-carousel-slide:hover {
  background-color: var(--color-background-muted-hover);
}

.mm-carousel-slide:active, .mm-carousel-slide.active {
  background-color: var(--color-background-muted-pressed);
}

.mm-carousel__loading {
  cursor: default;
}

.mm-carousel-slide__accessory {
  background-size: cover;
  background-position: center;
  height: 100%;
  /* !important needed to override react-responsive-carousel default width */
  width: 60px !important;
}

[dir="ltr"] .mm-carousel-slide__accessory {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

[dir="rtl"] .mm-carousel-slide__accessory {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.mm-carousel-slide__close-button {
  position: absolute;
  top: 8px;
}

[dir="ltr"] .mm-carousel-slide__close-button {
  right: 6px;
}

[dir="rtl"] .mm-carousel-slide__close-button {
  left: 6px;
}

.control-dots {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 40px;
  align-items: center;
  gap: 8px;
  /* !important needed to override react-responsive-carousel default margin */
  margin: 0 !important;
}

.dot {
  /* !important rules needed to override react-responsive-carousel default styles */
  margin: 0 !important;
  background: var(--color-icon-muted) !important;
  box-shadow: none !important;
}

.dot.selected {
  background: var(--color-icon-default) !important;
}

.add-rpc-modal {
  overflow-y: auto;
}

.add-rpc-modal__footer {
  position: sticky;
  bottom: 0;
  box-shadow: 0 0 8px 0 var(--color-shadow-default);
}

.add-block-explorer-modal {
  overflow-y: auto;
}

.add-block-explorer-modal__footer {
  position: sticky;
  bottom: 0;
  box-shadow: 0 0 8px 0 var(--color-shadow-default);
}

.select-rpc-url__item {
  position: relative;
}

.select-rpc-url__item:hover {
  cursor: pointer;
  background-color: var(--color-background-default-hover);
}

.select-rpc-url__item--selected, .select-rpc-url__item--selected:hover {
  background-color: var(--color-primary-muted);
}

.select-rpc-url__item-selected-pill {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .select-rpc-url__item-selected-pill {
  left: 4px;
}

[dir="rtl"] .select-rpc-url__item-selected-pill {
  right: 4px;
}

.multichain-product-tour-menu {
  width: 344px;
  box-shadow: none;
  top: 10px !important;
}

[dir="ltr"] .multichain-product-tour-menu {
  left: -7px !important;
}

[dir="rtl"] .multichain-product-tour-menu {
  right: -7px !important;
}

.multichain-product-tour-menu--rtl {
  left: 6px !important;
  right: 6px !important;
}

.multichain-product-tour-menu__permissions-page-tour {
  top: 0 !important;
}

[dir="ltr"] .multichain-product-tour-menu__permissions-page-tour {
  left: auto !important;
}

[dir="rtl"] .multichain-product-tour-menu__permissions-page-tour {
  right: auto !important;
}

.multichain-product-tour-menu__arrow, .multichain-product-tour-menu__arrow::before {
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
}

.multichain-product-tour-menu__arrow {
  width: 40px;
  height: 40px;
  visibility: hidden;
  top: 0;
}

.multichain-product-tour-menu__arrow::before {
  display: block;
  background-color: inherit;
  visibility: visible;
  content: "";
  top: -7px;
}

[dir="ltr"] .multichain-product-tour-menu__arrow::before {
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

[dir="rtl"] .multichain-product-tour-menu__arrow::before {
  transform: rotate(-45deg);
  border-radius: 0 2px 0 0;
}

.multichain-product-tour-menu__header {
  position: relative;
}

.multichain-product-tour-menu__previous-icon {
  position: absolute;
  top: 0;
}

[dir="ltr"] .multichain-product-tour-menu__previous-icon {
  left: 0;
}

[dir="rtl"] .multichain-product-tour-menu__previous-icon {
  right: 0;
}

.multichain-product-tour-menu__button:hover {
  color: var(--color-primary-default);
}

.multichain-product-tour-menu__button:active {
  opacity: 0.5;
  background-color: var(--color-primary-inverse);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.nft-item__card {
  cursor: pointer;
}

.nft-item__container {
  width: 100%;
  padding: 0;
  border-radius: 8px;
}

.nft-item__badge-wrapper {
  max-width: 100%;
  position: relative;
  align-self: center;
}

.nft-item__badge-wrapper__clickable {
  cursor: pointer;
}

.nft-item__item-image {
  border-radius: 8px;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.nft-item__item-image--hidden {
  border-radius: 8px;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.5);
  mix-blend-mode: lighten;
}

@media screen and (max-width: calc(576px - 1px)) {
  .nft-item__item-image--hidden {
    background: rgba(255, 255, 255, 0.5);
    mix-blend-mode: lighten;
  }
}

.nft-item__item-detail {
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
}

.funding-method-item {
  cursor: pointer;
}

.funding-method-item:hover {
  background-color: var(--color-background-hover);
}

.multichain-badge-status {
  padding: 0;
}

.multichain-badge-status__badge {
  height: 16px;
  width: 16px;
  z-index: 1;
}

.multichain-badge-status .mm-badge-wrapper__badge-container {
  z-index: 1;
}

.multichain-badge-status__badge-not-connected {
  height: 10px;
  width: 10px;
}

.multichain-badge-status__badge-not-connected::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: var(--color-background-default);
  z-index: -1;
  border-radius: 50%;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.import-tokens-modal .tabs ul {
  border-bottom: 0;
}

.import-tokens-modal .tabs li {
  width: 50%;
}

.import-tokens-modal__body::-webkit-scrollbar {
  display: none;
}

.import-tokens-modal__body {
  overflow-y: auto;
}

.import-tokens-modal__confirmation-list {
  overflow-y: scroll;
  overflow: auto;
  height: 356px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .import-tokens-modal__confirmation-list {
    height: 356px;
  }
}

.import-tokens-modal__tabs {
  padding-left: 16px;
  padding-right: 16px;
  justify-content: center;
}

.import-tokens-modal__modal-dialog-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 16px !important;
}

.import-tokens-modal__autodetect {
  vertical-align: unset;
}

.import-tokens-modal__search-list {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: scroll;
  max-width: 100%;
  overflow: auto;
  max-height: 400px;
}

.import-tokens-modal__button-link {
  font-size: 12px;
}

.import-tokens-modal__active-tab {
  color: var(--color-text-default);
}

.import-tokens-modal__button-tab {
  font-weight: 500;
}

.import-tokens-modal__button-search {
  outline-color: var(--color-primary-default);
  padding-left: 16px;
  padding-right: 16px;
}

.import-tokens-modal__custom-token-form__container {
  overflow: auto;
  height: 384px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .import-tokens-modal__custom-token-form__container {
    height: 370px;
  }
}

.import-tokens-modal__custom-token-form__text-outline-success {
  outline-color: var(--color-primary-default);
}

.import-tokens-modal__custom-token-form__text-outline-error {
  outline-color: var(--color-error-default);
}

.import-tokens-modal__custom-token-form input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}

.import-tokens-modal__custom-token-form input[type=number]:hover::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}

.import-tokens-modal__custom-token-form .import-tokens-modal__decimal-warning {
  margin-top: 5px;
}

.import-tokens-modal__token-name {
  flex: 1;
}

.import-tokens-modal__token-balance {
  flex: 0 0 30%;
}

.import-tokens-modal__confirm-token-list {
  flex-flow: column nowrap;
}

.import-tokens-modal__confirm-token-list-item {
  flex-flow: row nowrap;
}

.import-tokens-modal__confirm-token-list-item-wrapper {
  flex-grow: 1;
}

.import-tokens-modal__confirm-token-list-item-wrapper__text {
  max-width: 130px;
}

.import-tokens-modal__nft-address-error-link {
  display: contents;
  font-size: inherit;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.asset-picker-amount__balance > *, .asset-picker-amount__balance > div > * {
  font-size: 0.75rem;
  padding: 0;
  align-self: baseline;
}

.asset-picker-amount__input-nft {
  height: 66px;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border-color: inherit;
  border-width: 1px;
}

[dir="ltr"] .asset-picker-amount__input-nft {
  margin: -5px -5px -5px 0;
  border-radius: 0 8px 8px 0;
}

[dir="rtl"] .asset-picker-amount__input-nft {
  margin: -5px 0 -5px -5px;
  border-radius: 8px 0 0 8px;
}

.asset-picker-amount__input-nft > div > div > input {
  text-overflow: hidden;
  margin: auto;
  text-align: center;
  max-width: 5ch;
}

.asset-picker-amount__input {
  padding: 8px;
  flex-grow: 1;
  border: none;
}

[dir="ltr"] .asset-picker-amount__input {
  float: right;
}

[dir="rtl"] .asset-picker-amount__input {
  float: left;
}

.asset-picker-amount__input .unit-input__inputs > div {
  max-width: 138px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.asset-picker-amount__input .unit-input__inputs > div.currency-input__conversion-component {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-wrap: nowrap;
}

.asset-picker-amount__input .unit-input__inputs > div.currency-input__conversion-component > span {
  color: var(--color-text-alternative);
}

.asset-picker-amount__input .unit-input__inputs > div.currency-input__conversion-component > span.currency-display-component__text {
  width: max-content;
}

.asset-picker-amount__input .unit-input__inputs > div.currency-input__conversion-component > span.currency-display-component__suffix {
  width: max-content;
}

.asset-picker-amount__input .unit-input__inputs > div.unit-input__input-container > * {
  color: var(--color-text-default);
  font-size: 0.875rem;
}

[dir="ltr"] .asset-picker-amount__input > .unit-input__inputs > div {
  margin-left: auto;
}

[dir="rtl"] .asset-picker-amount__input > .unit-input__inputs > div {
  margin-right: auto;
}

[dir="ltr"] .asset-picker-amount__input > .unit-input__inputs > div > input {
  text-align: right;
}

[dir="rtl"] .asset-picker-amount__input > .unit-input__inputs > div > input {
  text-align: left;
}

[dir="ltr"] .asset-picker-amount__input__swap {
  margin-left: 4px;
}

[dir="rtl"] .asset-picker-amount__input__swap {
  margin-right: 4px;
}

button.asset-picker-amount__max-clear {
  font-size: 0.75rem;
}

button.asset-picker-amount__max-clear:hover:not(.--disabled) {
  text-decoration: none;
}

.asset-picker {
  height: 30px;
  flex-grow: 1;
}

[dir="ltr"] .asset-picker {
  text-align: left;
}

[dir="rtl"] .asset-picker {
  text-align: right;
}

.asset-picker:hover:not(.asset-picker--disabled), .asset-picker:active {
  box-shadow: none;
  background-color: transparent;
}

.asset-picker:hover {
  cursor: pointer;
}

.asset-picker__symbol {
  text-overflow: ellipsis;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
}

.asset-picker:disabled {
  opacity: 1;
  cursor: not-allowed;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.multichain-asset-picker__network-modal .mm-modal-content__dialog {
  overflow: hidden;
}

.multichain-asset-picker__network-modal .multichain-asset-picker__network-list {
  overflow-y: auto;
}

.asset-picker-modal__search-list {
  max-width: 100%;
  overflow: auto;
  max-height: 200px;
}

.asset-picker-modal__search-list:hover {
  border-color: var(--color-primary-default);
}

.asset-picker-modal__autodetect {
  vertical-align: unset;
}

.asset-picker-modal .multichain-asset-picker-list-item {
  position: relative;
  cursor: pointer;
  overflow-y: auto;
  max-height: 50vh;
  white-space: nowrap;
}

.asset-picker-modal .multichain-asset-picker-list-item:not(.multichain-asset-picker-list-item--selected):hover, .asset-picker-modal .multichain-asset-picker-list-item:not(.multichain-asset-picker-list-item--selected):focus-within {
  background: var(--color-background-default-hover);
}

.asset-picker-modal .multichain-asset-picker-list-item--disabled, .asset-picker-modal .multichain-asset-picker-list-item:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.asset-picker-modal .multichain-asset-picker-list-item__selected-indicator {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .asset-picker-modal .multichain-asset-picker-list-item__selected-indicator {
  left: 4px;
}

[dir="rtl"] .asset-picker-modal .multichain-asset-picker-list-item__selected-indicator {
  right: 4px;
}

.asset-picker-modal .tokens-main-view-modal {
  max-height: 100%;
}

.asset-picker-modal .network-picker {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4px;
  button-background: var(--color-background-alternative);
}

[dir="ltr"] .asset-picker-modal .network-picker {
  padding-left: 16px;
}

[dir="rtl"] .asset-picker-modal .network-picker {
  padding-right: 16px;
}

.asset-picker-modal .modal-tab__main-view {
  max-height: 100%;
  background: var(--color-background-default);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.asset-picker-modal .modal-tab__main-view .asset-picker-modal .modal-tab__tab {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  flex-grow: 1;
  color: var(--color-icon-default);
  font-weight: 500;
}

.asset-picker-modal .modal-tab__main-view .asset-picker-modal .modal-tab__tab--active {
  color: var(--color-primary-default);
}

.asset-picker-modal .modal-tab__main-view .asset-picker-modal .modal-tab__tab button {
  padding: 8px;
}

.asset-picker-modal .modal-tab__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0;
  padding-inline: 16px;
}

.asset-picker-modal .modal-tab__wrapper {
  max-height: 100%;
  overflow-y: scroll;
}

.asset-picker-modal .modal-tab__loading {
  display: flex;
  height: 200px;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.asset-picker-modal .modal-tab__fetching {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.notification-detail__icon {
  padding-top: 6px;
}

.notification-detail__right-container {
  flex-shrink: 0;
}

.notification-detail-collection__image {
  width: 32px;
  height: 32px;
}

.notification-detail-nft__image {
  width: 112px;
  height: 112px;
}

.notification-list-item-icon__image {
  width: 32px;
  height: 32px;
}

.notification-list-item {
  position: relative;
  background-color: transparent;
}

.notification-list-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.notification-list-item__icon {
  padding-top: 6px;
}

.notification-list-item--unread {
  background-color: rgba(3, 109, 185, 0.05);
}

.notification-list-item--unread:hover {
  background-color: rgba(3, 109, 185, 0.1);
}

.notification-list-item__unread-dot__wrapper {
  position: absolute;
  top: 24px;
}

[dir="ltr"] .notification-list-item__unread-dot__wrapper {
  left: 11px;
}

[dir="rtl"] .notification-list-item__unread-dot__wrapper {
  right: 11px;
}

.notification-list-item__unread-dot__wrapper--snap {
  position: absolute;
  top: 22px;
}

[dir="ltr"] .notification-list-item__unread-dot__wrapper--snap {
  left: 11px;
}

[dir="rtl"] .notification-list-item__unread-dot__wrapper--snap {
  right: 11px;
}

.notification-list-item__unread-dot__dot {
  width: 6px;
  height: 6px;
}

.notification-list-item__right-container {
  flex-shrink: 0;
}

.notification-detail-asset__icon {
  border-width: 0.5px;
}

.notifications-settings-box__toggle {
  width: 40px;
}

.notifications-tag-counter {
  padding-left: 6px;
  padding-right: 6px;
}

.notifications-tag-counter__text {
  min-width: 13px;
}

.notifications-tag-counter__unread-dot {
  min-width: 16.5px;
  padding-left: 3px;
  padding-right: 3px;
  line-height: 1.4;
}

.toasts-container {
  position: sticky;
  bottom: 16px;
  margin-inline-start: 16px;
  margin-inline-end: 16px;
  z-index: 200;
  display: flex;
  gap: 10px;
  width: 90%;
  flex-direction: column;
}

.toasts-container__banner-base {
  border-radius: 8px;
}

.toast-text {
  word-break: break-word;
}

.ramps-card {
  margin-top: 8px;
  margin-left: 16px;
  margin-right: 16px;
  padding: 12px 16px;
}

.ramps-card__cta-button {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--brand-colors-grey-grey800);
  background-color: var(--brand-colors-white);
}

.ramps-card__title {
  color: var(--brand-colors-white);
}

.ramps-card__body {
  color: var(--brand-colors-white);
  width: 80%;
}

.ramps-card-token {
  background-color: var(--color-info-default);
}

.ramps-card-nft {
  background-color: var(--color-flask-default);
}

.ramps-card-activity {
  background-color: var(--color-error-alternative);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.select-srp__container {
  cursor: pointer;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.srp-list__container {
  max-height: 500px;
  overflow-y: auto;
}

.srp-list__divider {
  height: 1px;
  background-color: var(--color-border-muted);
}

.srp-list__show-accounts {
  color: var(--color-primary-default);
  cursor: pointer;
}

.srp-list__show-accounts:hover {
  text-decoration: underline;
}

.srp-list__account-name {
  overflow: hidden;
  white-space: nowrap;
  max-width: 80px;
}

/** Please import your files in alphabetical order **/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.asset__container {
  background-color: var(--color-background-default);
}

.asset__content {
  max-width: 650px;
  width: 100%;
}

.asset-navigation {
  display: flex;
  align-items: center;
  padding: 16px;
  height: 64px;
}

.asset-breadcrumb {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  background-color: inherit;
}

.asset-breadcrumb__asset {
  font-weight: bold;
}

.time-range-button {
  height: 24px;
}

.time-range-button:hover {
  background-color: var(--color-background-default-pressed);
}

.time-range-button__selected {
  color: var(--color-text-default);
  background-color: var(--color-background-default-hover);
}

.chart-up {
  stroke: var(--color-success-default);
}

.chart-down {
  stroke: var(--color-error-default);
}

.asset-page__spending-caps {
  text-decoration: none;
}

.asset-page__spending-caps:hover {
  color: var(--color-primary-alternative);
  text-decoration: underline;
}

.asset-chart__empty-state-container {
  aspect-ratio: 2.9;
  margin-top: 22px;
  margin-bottom: 22px;
}

.asset-chart__empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 20px;
  border-radius: 1rem;
  margin-right: 1rem;
  margin-left: 1rem;
  height: 100%;
}

[dir="ltr"] .asset-chart__empty-state-content {
  background: linear-gradient(101.63deg, #e7f2f8 39.39%, #e9f2f9 44.98%, #ebf2fa 50.57%, #edf2fb 56.16%, #eff2fc 61.75%, #f0f2fd 67.35%, #f1f2fd 72.94%, #f2f2fe 78.53%, #f2f2fe 84.12%, #f3f2fe 89.71%, #f3f2ff 95.3%, #f4f2ff 100.89%, #f4f2ff 106.49%, #f4f2ff 112.08%, #f4f2ff 117.67%, #f4f2ff 123.26%, #f4f2ff 128.85%), linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}

[dir="rtl"] .asset-chart__empty-state-content {
  background: linear-gradient(-101.63deg, #e7f2f8 39.39%, #e9f2f9 44.98%, #ebf2fa 50.57%, #edf2fb 56.16%, #eff2fc 61.75%, #f0f2fd 67.35%, #f1f2fd 72.94%, #f2f2fe 78.53%, #f2f2fe 84.12%, #f3f2fe 89.71%, #f3f2ff 95.3%, #f4f2ff 100.89%, #f4f2ff 106.49%, #f4f2ff 112.08%, #f4f2ff 117.67%, #f4f2ff 123.26%, #f4f2ff 128.85%), linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}

.asset-chart__empty-state-illustration {
  max-width: 134px;
  max-height: 106px;
  width: 21%;
  height: 47%;
}

.asset-chart__skeleton-container {
  aspect-ratio: 2.9;
  margin-top: 22px;
  margin-bottom: 22px;
}

.asset-chart__skeleton {
  aspect-ratio: 2.9;
  margin-right: 1rem;
  margin-left: 1rem;
}

/** Please import your files in alphabetical order **/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.confirm_wrapper {
  max-width: 100%;
}

@media screen and (min-width: 576px) {
  .confirm_wrapper {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .confirm_wrapper {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .confirm_wrapper {
    width: 62vw;
  }
}

.confirm_wrapper.multichain-page__inner-container {
  border: 1px solid var(--color-border-muted);
  border-radius: 2px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.confirmation-footer {
  grid-area: footer;
}

.confirmation-footer__actions {
  display: flex;
  border-top: 1px solid var(--color-border-muted);
  background-color: var(--color-background-default);
  padding: 16px;
}

[dir="ltr"] .confirmation-footer__actions button:first-child {
  margin-right: 16px;
}

[dir="rtl"] .confirmation-footer__actions button:first-child {
  margin-left: 16px;
}

[dir="ltr"] .confirmation-footer__actions button.centered {
  margin-right: 0;
}

[dir="rtl"] .confirmation-footer__actions button.centered {
  margin-left: 0;
}

.confirmation-network-switch__center-icon {
  position: relative;
  height: 48px;
}

.confirmation-network-switch__icon {
  width: 48px;
}

.confirmation-network-switch__check {
  width: 32px;
  height: 32px;
  color: var(--color-primary-inverse);
  background-color: var(--color-primary-default);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.confirmation-network-switch__check::before {
  content: "";
  position: absolute;
  top: 25%;
}

[dir="ltr"] .confirmation-network-switch__check::before {
  left: 35%;
}

[dir="rtl"] .confirmation-network-switch__check::before {
  right: 35%;
}

[dir="ltr"] [dir=rtl] .confirmation-network-switch__arrow {
  transform: rotate(180deg);
}

[dir="rtl"] [dir=rtl] .confirmation-network-switch__arrow {
  transform: rotate(-180deg);
}

.confirmation-network-switch__dashed-line {
  width: 130px;
  border-bottom: 1px solid var(--color-border-muted);
  border-style: dashed;
}

.confirmation-page {
  max-width: 100%;
  border: 1px solid var(--color-border-muted);
  border-radius: 2px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
  width: 100%;
  min-height: 0;
  height: auto;
  position: relative;
  background: var(--color-background-default);
  display: grid;
  flex-direction: column;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "navigation" "content" "footer";
  /**
   * @todo
   * Support responsive margin top and bottom for snaps
   * {@see {@link https://github.com/MetaMask/metamask-extension/issues/31671}}
   */
}

@media screen and (min-width: 576px) {
  .confirmation-page {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .confirmation-page {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .confirmation-page {
    width: 62vw;
  }
}

.confirmation-page a {
  color: var(--color-primary-default);
}

.confirmation-page__content {
  display: flex;
  flex-direction: column;
  grid-area: content;
  min-width: 0;
}

.confirmation-page__content > :last-child {
  margin-top: auto;
}

.confirmation-page__navigation {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  grid-area: navigation;
  background-color: var(--color-background-alternative);
  border-bottom: 1px solid var(--color-border-muted);
  padding: 6px 16px 5px 16px;
  color: var(--color-text-alternative);
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) minmax(0, auto);
  align-items: center;
}

.confirmation-page__navigation-button {
  background-color: var(--color-background-default);
  border-radius: 100px;
  color: var(--color-text-alternative);
  font-size: 0.875rem;
  height: 20px;
  width: 20px;
  padding: 0;
}

.confirmation-page__navigation-button:disabled {
  cursor: not-allowed;
  background-color: var(--color-background-alternative);
  color: var(--color-text-muted);
}

[dir="ltr"] .confirmation-page__navigation .confirmation-page__navigation-button:last-child {
  margin-left: 8px;
}

[dir="rtl"] .confirmation-page__navigation .confirmation-page__navigation-button:last-child {
  margin-right: 8px;
}

.confirmation-page .chip {
  max-width: 100%;
  height: 40px;
}

.confirmation-page .chip__label {
  word-break: break-all;
}

.confirmation-page .actionable-message {
  margin-top: 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.new-account-modal__footer, .send__select-recipient-wrapper__list__link, .send__select-recipient-wrapper__group-item, .send__select-recipient-wrapper__group-item--selected, .ens-input, .ens-input__wrapper, .ens-input__wrapper--valid .ens-input__wrapper__input {
  display: flex;
  flex-flow: row nowrap;
}

.new-account-modal__content, .send__select-recipient-wrapper, .send__select-recipient-wrapper__recent-group-wrapper, .send__select-recipient-wrapper__group, .send__select-recipient-wrapper__group-item__content, .send__select-recipient-wrapper__group-item--selected__content {
  display: flex;
  flex-flow: column nowrap;
}

.send__select-recipient-wrapper__list__back-caret {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.multichain-send-page__account-picker__label, .ens-input__selected-input__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.send__header {
  position: relative;
  display: flex;
  justify-content: center;
  border-bottom: none;
  padding: 14px 0 3px 0;
}

.send__header .page-container__title {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
}

.send__header .page-container__header-close-text {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  position: absolute;
  width: min-content;
  font-size: 0.75rem;
  white-space: nowrap;
}

[dir="ltr"] .send__header .page-container__header-close-text {
  right: 1rem;
}

[dir="rtl"] .send__header .page-container__header-close-text {
  left: 1rem;
}

.send__dialog {
  margin: 1rem;
  cursor: pointer;
}

.send__error-dialog {
  margin: 1rem;
}

.send__warning-container {
  padding-left: 16px;
  padding-right: 16px;
}

.send__warning-container__link {
  color: var(--color-primary-default);
}

.send__to-row {
  margin: 0;
  padding: 0.5rem;
  flex: 0 0 auto;
}

.send__select-recipient-wrapper {
  flex: 1 1 auto;
  height: 0;
}

.send__select-recipient-wrapper__list__duplicate-contact-banner {
  padding: 8px 16px 0 16px;
}

.send__select-recipient-wrapper__list__link {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 1rem;
  border-radius: 0;
  align-items: center;
  justify-content: flex-start;
}

.send__select-recipient-wrapper__list__back-caret {
  display: block;
}

[dir="ltr"] .send__select-recipient-wrapper__list__back-caret {
  margin-right: 8px;
}

[dir="rtl"] .send__select-recipient-wrapper__list__back-caret {
  margin-left: 8px;
}

[dir="ltr"] [dir=rtl] .send__select-recipient-wrapper__list__back-caret {
  transform: rotate(180deg);
}

[dir="rtl"] [dir=rtl] .send__select-recipient-wrapper__list__back-caret {
  transform: rotate(-180deg);
}

.send__select-recipient-wrapper__recent-group-wrapper__load-more {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border-muted);
  justify-content: flex-start;
}

.send__select-recipient-wrapper__group-item, .send__select-recipient-wrapper__group-item--selected {
  align-items: center;
  cursor: pointer;
  padding: 16px;
}

.send__select-recipient-wrapper__group-item .identicon, .send__select-recipient-wrapper__group-item--selected .identicon {
  flex: 0 0 auto;
}

[dir="ltr"] .send__select-recipient-wrapper__group-item .identicon, [dir="ltr"] .send__select-recipient-wrapper__group-item--selected .identicon {
  margin-right: 1rem;
}

[dir="rtl"] .send__select-recipient-wrapper__group-item .identicon, [dir="rtl"] .send__select-recipient-wrapper__group-item--selected .identicon {
  margin-left: 1rem;
}

.send__select-recipient-wrapper__group-item__content, .send__select-recipient-wrapper__group-item--selected__content {
  flex: 1 1 auto;
  width: 0;
}

.send__select-recipient-wrapper__group-item__title, .send__select-recipient-wrapper__group-item__subtitle, .send__select-recipient-wrapper__group-item--selected__title, .send__select-recipient-wrapper__group-item--selected__subtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.send__select-recipient-wrapper__group-item__title .confusable__point, .send__select-recipient-wrapper__group-item--selected__title .confusable__point {
  text-overflow: ellipsis;
}

.send__select-recipient-wrapper__group-item--selected {
  border: 2px solid var(--color-primary-default);
  border-radius: 8px;
}

.ens-input__wrapper {
  flex: 1 1 auto;
  width: 0;
  align-items: center;
  background: var(--color-background-default);
  border-radius: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border-muted);
  transition: border-color 150ms ease-in-out;
}

.ens-input__wrapper:focus-within {
  border-color: var(--color-primary-default);
}

[dir="ltr"] .ens-input__wrapper__status-icon {
  margin: 4px 8px 4px 4px;
}

[dir="rtl"] .ens-input__wrapper__status-icon {
  margin: 4px 4px 4px 8px;
}

.ens-input__wrapper__input {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  flex: 1 1 auto;
  width: 0;
  border: 0;
  outline: none;
  color: var(--color-text-default);
  background-color: var(--color-background-default);
}

.ens-input__wrapper__input::placeholder {
  color: var(--color-text-alternative);
}

.ens-input__wrapper__action-icon-button {
  background: none;
  border: none;
  padding: 0 8px;
  height: 24px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ens-input__wrapper--valid .ens-input__wrapper__input {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  align-items: center;
  color: var(--color-primary-default);
}

.ens-input__selected-input__title {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 500;
  word-wrap: break-word;
  white-space: inherit !important;
  color: var(--color-text-default);
}

[dir="ltr"] .ens-input__selected-input__title {
  margin-left: 0.75rem;
}

[dir="rtl"] .ens-input__selected-input__title {
  margin-right: 0.75rem;
}

/** Please import your files in alphabetical order **/
.advanced-gas-controls__row {
  margin-bottom: 20px;
}

.advanced-gas-controls .info-tooltip {
  display: inline-block;
}

.advanced-gas-controls .form-field__row--error .form-field__heading-title h6 {
  color: var(--color-error-default);
}

.advanced-gas-controls .form-field__row--error .form-field__heading-title h6 path {
  fill: var(--color-error-default);
}

.advanced-gas-controls h6 {
  padding-bottom: 6px;
  margin-inline-end: 6px;
}

.advanced-gas-controls path {
  fill: var(--color-icon-alternative);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.advanced-gas-fee-popover .form-field__heading-title > h6 {
  font-size: 0.75rem;
}

.advanced-gas-fee-popover .popover-header {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px solid var(--color-border-muted);
}

.advanced-gas-fee-popover .popover-footer {
  border-top: none;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.advanced-gas-fee-gas-limit {
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-top: 1px solid var(--color-border-muted);
  padding-top: 16px;
}

[dir="ltr"] .advanced-gas-fee-gas-limit > * {
  margin-right: 4px;
}

[dir="rtl"] .advanced-gas-fee-gas-limit > * {
  margin-left: 4px;
}

.advanced-gas-fee-gas-limit a.advanced-gas-fee-gas-limit__edit-link {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 0;
  width: auto;
}

.advanced-gas-fee-defaults {
  border-top: 1px solid var(--color-border-muted);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.advanced-gas-fee-inputs .form-field {
  margin-bottom: 4px;
}

.advanced-gas-fee-inputs .form-field__heading-title > h6 {
  font-size: 0.75rem;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.base-fee-input a.base-fee-input__edit-link {
  display: inline;
  font-size: 0.75rem;
  padding: 0;
  white-space: nowrap;
}

.priority-fee-input {
  border-top: 1px solid var(--color-border-default);
  padding-top: 16px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.advanced-gas-fee-input-subtext {
  margin-top: 2px;
  color: var(--color-text-alternative);
  font-size: 0.625rem;
}

.advanced-gas-fee-input-subtext__label {
  font-weight: bold;
}

[dir="ltr"] .advanced-gas-fee-input-subtext__label {
  margin-right: 4px;
}

[dir="rtl"] .advanced-gas-fee-input-subtext__label {
  margin-left: 4px;
}

.advanced-gas-fee-input-subtext__value {
  position: relative;
}

[dir="ltr"] .advanced-gas-fee-input-subtext__level {
  margin-left: 2px;
}

[dir="rtl"] .advanced-gas-fee-input-subtext__level {
  margin-right: 2px;
}

.advanced-gas-fee-input-subtext__up, .advanced-gas-fee-input-subtext__down {
  padding-top: 2px;
}

[dir="ltr"] .advanced-gas-fee-input-subtext__icon {
  margin-right: 8px;
}

[dir="rtl"] .advanced-gas-fee-input-subtext__icon {
  margin-left: 8px;
}

.confirmation-warning-modal__content ul {
  padding-inline-start: 1rem;
  margin-block-start: 0;
  list-style: disc outside;
}

.confirmation-warning-modal__content li {
  display: list-item;
}

.confirm-footer_page-footer {
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
  z-index: 1;
}

.confirm_header__wrapper {
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
  height: 64px;
  z-index: 1;
}

.confirm_header__avatar-network {
  margin-top: -4px;
}

[dir="ltr"] .confirm_header__avatar-network {
  margin-left: -12px;
}

[dir="rtl"] .confirm_header__avatar-network {
  margin-right: -12px;
}

.siwe-sign__message-rows > .confirm-info-row {
  padding-left: 0;
  padding-right: 0;
}

.gas-fee-token-list-item {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.gas-fee-token-list-item:not(.gas-fee-token-list-item--selected):hover, .gas-fee-token-list-item:not(.gas-fee-token-list-item--selected):focus-within {
  background: var(--color-background-default-hover);
}

.gas-fee-token-list-item__selected-indicator {
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
}

[dir="ltr"] .gas-fee-token-list-item__selected-indicator {
  left: 4px;
}

[dir="rtl"] .gas-fee-token-list-item__selected-indicator {
  right: 4px;
}

.gas-fee-token-native-toggle-option {
  cursor: pointer;
}

.gas-fee-token-native-toggle-option:not(.gas-fee-token-native-toggle-option--selected):hover, .gas-fee-token-native-toggle-option:not(.gas-fee-token-native-toggle-option--selected):focus-within {
  background: var(--color-background-default-hover);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.toast_wrapper {
  bottom: 80px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  position: fixed;
  width: 100%;
  z-index: 1050;
}

@media screen and (min-width: calc(576px - 1px)) {
  .toast_wrapper {
    max-width: 408px;
  }
}

.confirm-scroll-to-bottom__button {
  bottom: 12px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  height: 36px;
  width: 36px;
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
  /** arbitrary value to ensure bottom is above content */
  z-index: 201;
  /**
    override design-system defaults.
    */
}

.confirm-scroll-to-bottom__button:hover {
  background-color: var(--color-primary-default);
  color: var(--color-primary-inverse);
  opacity: 0.95;
}

.confirm_nav__reject_all {
  background-color: var(--color-error-muted);
  color: #d73847;
  font-size: 12px;
  height: 20px;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.confirm_nav__reject_all:hover {
  background-color: var(--color-error-muted) !important;
  box-shadow: none !important;
  color: #d73847 !important;
}

.confirm_nav__reject_all > span {
  font-size: 10px;
}

.confirm_nav__left_btn, .confirm_nav__right_btn {
  height: 20px;
  width: 20px;
  min-width: 20px;
}

.confirm_nav__left_btn > span, .confirm_nav__right_btn > span {
  font-size: 12px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.smart-account-update__wrapper {
  font-size: 12px;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1050;
}

@media screen and (min-width: 575px) {
  .smart-account-update__wrapper {
    max-width: 360px;
  }
}

.smart-account-update__inner {
  height: calc(100% - 32px);
  width: calc(100% - 32px);
  overflow: auto;
}

.edit-gas-display__top-tooltip {
  text-align: center;
}

.edit-gas-display__top-tooltip .info-tooltip {
  display: inline-block;
}

.edit-gas-display__top-tooltip .info-tooltip img {
  height: 10px;
  width: 10px;
}

.edit-gas-display button.edit-gas-display__dapp-acknowledgement-button {
  margin: 40px auto 0 auto;
  display: block;
  color: var(--color-warning-default);
  border: 1px solid var(--color-warning-default);
  text-transform: unset;
  width: auto;
  background: transparent;
}

.edit-gas-display .radio-group {
  margin: 20px auto;
}

.edit-gas-display .advanced-gas-controls {
  margin-top: 20px;
}

.edit-gas-display__scroll-bottom {
  margin-bottom: -20px;
  margin-top: 20px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.edit-gas-fee-button {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

.edit-gas-fee-button button {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  align-items: center;
  color: var(--color-primary-default);
  background: transparent;
  border: 0;
  padding-inline-end: 0;
  white-space: pre;
}

.edit-gas-fee-button__icon {
  font-size: 16px;
}

[dir="ltr"] .edit-gas-fee-button__icon {
  margin-right: 2px;
}

[dir="rtl"] .edit-gas-fee-button__icon {
  margin-left: 2px;
}

.edit-gas-fee-button__label {
  font-size: 12px;
}

[dir="ltr"] .edit-gas-fee-button__label {
  margin-right: 4px;
}

[dir="rtl"] .edit-gas-fee-button__label {
  margin-left: 4px;
}

.edit-gas-fee-button .info-tooltip {
  align-self: center;
}

[dir="ltr"] .edit-gas-fee-button .info-tooltip {
  margin-left: 6px;
}

[dir="rtl"] .edit-gas-fee-button .info-tooltip {
  margin-right: 6px;
}

.edit-gas-fee-button__tooltip p {
  color: var(--color-text-alternative);
}

.edit-gas-fee-button__tooltip b {
  color: var(--color-text-default);
  display: inline-block;
  min-width: 60%;
}

.tippy-tooltip .tippy-tooltip-content .edit-gas-fee-button__tooltip {
  min-width: 170px;
}

.edit-gas-fee-popover {
  height: 500px;
}

.edit-gas-fee-popover__wrapper {
  border-top: 1px solid var(--color-border-default);
  height: 100%;
}

.edit-gas-fee-popover__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 12px;
}

.edit-gas-fee-popover__content .error-message {
  margin-top: 0;
  margin-bottom: 12px;
}

.edit-gas-fee-popover__content__header {
  color: var(--color-text-alternative);
  font-size: 10px;
  font-weight: 700;
  margin: 0 12px;
}

.edit-gas-fee-popover__content__header-option {
  display: inline-block;
  width: 36%;
}

.edit-gas-fee-popover__content__header-time {
  display: inline-block;
  width: 24%;
}

.edit-gas-fee-popover__content__header-max-fee {
  display: inline-block;
  width: 30%;
}

.edit-gas-fee-popover__content__separator {
  border-top: 1px solid var(--color-border-default);
  margin: 8px 12px;
}

.edit-gas-fee-popover__network-status {
  margin-top: 36px;
}

.edit-gas-fee-popover__know-more a {
  color: var(--color-primary-default);
}

.edit-gas-item {
  border-radius: 24px;
  background: var(--color-background-default);
  color: var(--color-text-alternative);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 4px 12px;
  height: 32px;
  width: 100%;
}

.edit-gas-item:hover:not([disabled]) {
  background-color: var(--color-background-default-hover);
}

.edit-gas-item--selected {
  background-color: var(--color-primary-muted);
}

.edit-gas-item--selected:hover:not([disabled]) {
  background-color: var(--color-primary-muted);
}

.edit-gas-item button.edit-gas-item--disabled[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

.edit-gas-item__name {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-default);
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  width: 36%;
}

.edit-gas-item__name__sufix {
  font-weight: 400;
}

[dir="ltr"] .edit-gas-item__name__sufix {
  margin-left: 4px;
}

[dir="rtl"] .edit-gas-item__name__sufix {
  margin-right: 4px;
}

.edit-gas-item__icon {
  font-size: 20px;
  line-height: 1;
}

[dir="ltr"] .edit-gas-item__icon {
  margin-right: 4px;
}

[dir="rtl"] .edit-gas-item__icon {
  margin-left: 4px;
}

.edit-gas-item__icon-custom {
  font-size: 22px;
  line-height: 1;
}

.edit-gas-item__maxfee {
  position: relative;
}

.edit-gas-item__time-estimate {
  display: inline-block;
  width: 24%;
}

[dir="ltr"] .edit-gas-item__time-estimate {
  text-align: left;
}

[dir="rtl"] .edit-gas-item__time-estimate {
  text-align: right;
}

.edit-gas-item__fee-estimate {
  display: inline-block;
  width: 30%;
  white-space: nowrap;
}

.edit-gas-item__tooltip {
  display: inline-block;
  width: 10%;
}

[dir="ltr"] .edit-gas-item__tooltip {
  text-align: right;
}

[dir="rtl"] .edit-gas-item__tooltip {
  text-align: left;
}

.edit-gas-item__tooltip .info-tooltip {
  display: inline-block;
}

.edit-gas-item__time-estimate-low, .edit-gas-item__fee-estimate-high {
  color: var(--color-warning-default);
}

.edit-gas-item__time-estimate-medium, .edit-gas-item__time-estimate-high {
  color: var(--color-success-default);
}

.network-statistics {
  margin: 24px 12px 12px;
}

.network-statistics__info {
  border-top: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-statistics__field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

[dir="ltr"] .network-statistics__field:not(:last-child) {
  border-right: 1px solid var(--color-border-muted);
}

[dir="rtl"] .network-statistics__field:not(:last-child) {
  border-left: 1px solid var(--color-border-muted);
}

.network-statistics__field-data {
  color: var(--color-text-alternative);
  font-size: 12px;
  text-align: center;
}

.network-statistics__field-label {
  color: var(--color-text-default);
  font-size: 10px;
  font-weight: bold;
  margin-top: 4px;
}

.network-statistics__tooltip-label {
  font-weight: 700;
}

.status-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 56px;
}

.status-slider__line {
  height: 4px;
  width: 100%;
  border-radius: 100px;
  display: block;
}

[dir="ltr"] .status-slider__line {
  background-image: linear-gradient(to right, var(--color-primary-default), var(--color-error-default));
}

[dir="rtl"] .status-slider__line {
  background-image: linear-gradient(to left, var(--color-primary-default), var(--color-error-default));
}

.status-slider__label {
  font-size: 10px;
  font-weight: bold;
  margin-top: 4px;
  text-align: center;
}

.status-slider__arrow-container {
  width: 100%;
}

[dir="ltr"] .status-slider__arrow-container {
  margin-left: -10px;
}

[dir="rtl"] .status-slider__arrow-container {
  margin-right: -10px;
}

.status-slider__arrow-border {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-background-default);
  position: relative;
  margin-bottom: -2px;
}

.status-slider__arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  position: absolute;
  bottom: 3px;
}

[dir="ltr"] .status-slider__arrow {
  left: -5px;
}

[dir="rtl"] .status-slider__arrow {
  right: -5px;
}

.edit-gas-tooltip__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 160px;
}

.edit-gas-tooltip__container img {
  margin-bottom: 8px;
}

.edit-gas-tooltip__container__message {
  width: 100%;
}

.edit-gas-tooltip__container__dialog {
  background-color: var(--color-warning-default);
  border-radius: 30px;
  margin: 4px 0;
  text-align: center;
  padding: 4px;
}

.edit-gas-tooltip__container__label {
  white-space: nowrap;
  min-width: 50%;
}

.edit-gas-tooltip__container__value {
  min-width: 50%;
}

.edit-gas-tooltip__container p {
  margin-bottom: 0 !important;
}

.edit-gas-tooltip__container__values {
  width: 100%;
  margin-top: 8px;
}

.edit-gas-tooltip__container__values div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

[dir="ltr"] .edit-gas-tooltip__container__values div {
  text-align: left;
}

[dir="rtl"] .edit-gas-tooltip__container__values div {
  text-align: right;
}

.edit-gas-popover__edit-gas-display {
  position: relative;
}

.gas-details-item__gas-fee-warning {
  color: var(--color-warning-default);
}

.gas-details-item__currency-container, .gas-details-item__gasfee-label {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}

.gas-details-item__dangerTooltip {
  position: relative;
}

.gas-details-item__dangerTooltip .mm-icon {
  position: relative;
  top: 2px;
  margin-inline-start: 4px;
}

.multi-layer-fee-message__transaction-detail-item__total-item {
  padding-top: 8px;
}

.set-approval-for-all-warning__content__header {
  border-bottom: 1px solid var(--color-border-muted);
}

.set-approval-for-all-warning__content__header__warning-icon {
  padding-top: 7px;
  color: var(--color-error-default);
}

[dir="ltr"] .set-approval-for-all-warning__content__header__warning-icon {
  margin-right: 10px;
}

[dir="rtl"] .set-approval-for-all-warning__content__header__warning-icon {
  margin-left: 10px;
}

.set-approval-for-all-warning__content__account {
  border-bottom: 1px solid var(--color-border-muted);
}

.set-approval-for-all-warning__footer {
  width: 100%;
  height: 100px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.transaction-detail {
  margin: 15px;
  padding: 16px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border-default);
  position: relative;
}

.transaction-detail .transaction-detail-edit {
  text-align: end;
  padding-bottom: 4px;
}

.transaction-detail .transaction-detail-edit button {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  background: transparent;
  border: 0;
  padding-inline-end: 0;
  text-transform: uppercase;
}

.transaction-detail-item {
  color: var(--color-text-alternative);
}

.transaction-detail-item__row {
  display: flex;
  justify-content: space-between;
  grid-gap: 5px;
}

.transaction-detail-item__row-subText {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

[dir="ltr"] .transaction-detail-item__row-subText .currency-display-component {
  margin-left: 4px;
}

[dir="rtl"] .transaction-detail-item__row-subText .currency-display-component {
  margin-right: 4px;
}

.transaction-detail-item__detail-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 50%;
  width: 50%;
}

.transaction-detail-item__detail-values--flex-width {
  width: auto;
}

.transaction-detail-item .info-tooltip {
  display: inline-block;
  margin-inline-start: 8px;
}

.transaction-detail-item .info-tooltip path {
  fill: var(--color-icon-alternative);
}

.transaction-detail-item .currency-display-component {
  justify-content: end;
  min-width: 0;
}

.transaction-detail-item .currency-display-component__text {
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: end;
}

.transaction-detail-item:last-child {
  border-bottom: 0;
}

.tippy-tooltip.word-break-all-theme .tippy-tooltip-content {
  word-break: break-all;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.confirm-add-suggested-nft__card {
  background-color: var(--color-background-default);
  box-shadow: var(--shadow-size-md) var(--color-shadow-default);
}

.confirm-add-suggested-nft__header {
  border-bottom: 1px solid var(--color-border-muted);
}

.confirm-add-suggested-nft__nft-list {
  padding: 8px;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.confirm-add-suggested-nft__nft-list-item:last-child {
  margin-bottom: 0;
}

.confirm-add-suggested-nft__nft-image {
  width: 48px;
  border-radius: 8px;
  flex: 0 0 auto;
}

[dir="ltr"] .confirm-add-suggested-nft__nft-image {
  margin-right: 12px;
}

[dir="rtl"] .confirm-add-suggested-nft__nft-image {
  margin-left: 12px;
}

.confirm-add-suggested-nft__nft-image-default {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  padding: 0 !important;
}

[dir="ltr"] .confirm-add-suggested-nft__nft-image-default {
  margin-right: 12px;
}

[dir="rtl"] .confirm-add-suggested-nft__nft-image-default {
  margin-left: 12px;
}

.confirm-add-suggested-nft__nft-sub-details {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-add-suggested-nft__nft-name {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  align-self: flex-start;
}

.confirm-add-suggested-nft__nft-tokenid {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.confirm-add-suggested-nft__nft-remove-tooltip {
  background-color: black;
  color: white;
}

.confirm-add-suggested-nft__nft-single-image {
  border-radius: inherit;
  width: 100%;
}

.confirm-add-suggested-nft__nft-single-image-default {
  border-radius: inherit;
}

.confirm-add-suggested-nft__nft-single-sub-details {
  overflow: hidden;
  text-overflow: ellipsis;
}

.confirm-add-suggested-nft.page-container {
  background-color: var(--color-background-alternative);
  transition: margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
}

@media screen and (min-width: 576px) and (min-height: 720px) {
  .confirm-add-suggested-nft.page-container {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 576px) and (min-height: 720px) {
  .confirm-add-suggested-nft.page-container.confirm-add-suggested-nft--has-app-header-multichain {
    margin-top: 0;
  }
}

.confirm-add-suggested-nft .page-container__content {
  padding: 16px;
}

.confirm-add-suggested-nft--has-app-header-multichain {
  border-radius: 0 0 2px 2px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.confirm-add-suggested-token__header {
  display: flex;
}

.confirm-add-suggested-token__token {
  flex: 1;
  min-width: 0;
}

.confirm-add-suggested-token__balance {
  flex: 0 0 30%;
  min-width: 0;
}

.confirm-add-suggested-token__token-list {
  display: flex;
  flex-flow: column nowrap;
}

.confirm-add-suggested-token__token-list-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-top: 8px;
  box-sizing: border-box;
}

.confirm-add-suggested-token__data {
  display: flex;
  align-items: center;
  padding: 8px;
}

.confirm-add-suggested-token__name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.confirm-add-suggested-token__token-icon {
  flex: 0 0 auto;
}

[dir="ltr"] .confirm-add-suggested-token__token-icon {
  margin-right: 12px;
}

[dir="rtl"] .confirm-add-suggested-token__token-icon {
  margin-left: 12px;
}

.confirm-add-suggested-token.page-container {
  transition: margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
}

@media screen and (min-width: 576px) and (min-height: 720px) {
  .confirm-add-suggested-token.page-container {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 576px) {
  .confirm-add-suggested-token.page-container {
    max-height: 100%;
  }
}

@media screen and (min-width: 576px) and (min-height: 720px) {
  .confirm-add-suggested-token.page-container.confirm-add-suggested-token--has-app-header-multichain {
    margin-top: 0;
  }
}

.confirm-add-suggested-token .page-container__content {
  padding: 16px;
}

.confirm-add-suggested-token .page-container__header {
  padding-top: 24px;
  padding-bottom: 24px;
}

.confirm-add-suggested-token .page-container__title {
  text-align: center;
  margin: 0;
}

.confirm-add-suggested-token--has-app-header-multichain {
  border-radius: 0 0 2px 2px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.request-decrypt-message__container {
  width: 380px;
  border-radius: 8px;
  background-color: var(--color-background-default);
  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  display: flex;
  flex-flow: column nowrap;
  z-index: 25;
  align-items: center;
  position: relative;
  height: 100%;
}

@media screen and (max-width: calc(576px - 1px)) {
  .request-decrypt-message__container {
    width: 100%;
    top: 0;
    box-shadow: none;
  }
}

@media screen and (min-width: 576px) {
  .request-decrypt-message__container {
    height: 620px;
  }
}

.request-decrypt-message__typed-container {
  padding: 17px;
}

.request-decrypt-message__typed-container h1 {
  font-weight: 900;
  margin-bottom: 5px;
}

.request-decrypt-message__typed-container * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-decrypt-message__typed-container > div {
  margin-bottom: 10px;
}

.request-decrypt-message__header {
  height: 64px;
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

.request-decrypt-message__header-background {
  position: absolute;
  background-color: var(--color-background-alternative);
  z-index: 2;
  width: 100%;
  height: 100%;
}

.request-decrypt-message__header__text {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  z-index: 3;
  text-align: center;
}

.request-decrypt-message__header__tip-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.request-decrypt-message__header__tip {
  height: 25px;
  width: 25px;
  background: var(--color-background-alternative);
  position: absolute;
  bottom: -8px;
  z-index: 1;
}

[dir="ltr"] .request-decrypt-message__header__tip {
  transform: rotate(45deg);
}

[dir="rtl"] .request-decrypt-message__header__tip {
  transform: rotate(-45deg);
}

.request-decrypt-message__account-info {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  margin-bottom: 20px;
}

.request-decrypt-message__account {
  color: var(--color-text-alternative);
}

[dir="ltr"] .request-decrypt-message__account {
  margin-left: 17px;
}

[dir="rtl"] .request-decrypt-message__account {
  margin-right: 17px;
}

.request-decrypt-message__account-text {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.request-decrypt-message__account-item {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  height: 22px;
  background-color: var(--color-background-default);
  width: 124px;
}

.request-decrypt-message__account-item .account-list-item {
  margin-top: 6px;
}

.request-decrypt-message__account-item .account-list-item__account-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 80px;
}

.request-decrypt-message__account-item .account-list-item__top-row {
  margin: 0;
}

.request-decrypt-message__balance {
  color: var(--color-text-alternative);
  width: 124px;
}

[dir="ltr"] .request-decrypt-message__balance {
  margin-right: 17px;
}

[dir="rtl"] .request-decrypt-message__balance {
  margin-left: 17px;
}

.request-decrypt-message__balance-text {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

[dir="ltr"] .request-decrypt-message__balance-text {
  text-align: right;
}

[dir="rtl"] .request-decrypt-message__balance-text {
  text-align: left;
}

.request-decrypt-message__balance-value {
  margin-top: 2.5px;
}

[dir="ltr"] .request-decrypt-message__balance-value {
  text-align: right;
}

[dir="rtl"] .request-decrypt-message__balance-value {
  text-align: left;
}

.request-decrypt-message__request-icon {
  margin-top: 25px;
}

.request-decrypt-message__body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  height: 0;
  overflow-y: auto;
}

.request-decrypt-message__notice {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 11px;
  width: 100%;
}

.request-decrypt-message__message-container {
  position: relative;
}

.request-decrypt-message__message-container .scroll-to-bottom__button {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 28px;
}

.request-decrypt-message__message-container .scroll-to-bottom__button:hover {
  background-color: var(--color-primary-default);
}

.request-decrypt-message__message {
  overflow-wrap: break-word;
  margin: 20px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
  border: 1px solid var(--color-border-muted);
  padding: 13px 16px;
}

.request-decrypt-message__message-text {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  height: 115px;
  overflow-y: scroll;
}

.request-decrypt-message__message-cover {
  background-color: var(--color-background-default);
  opacity: 0.75;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.request-decrypt-message__message-lock {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  cursor: pointer;
}

[dir="ltr"] .request-decrypt-message__message-lock {
  left: 0;
}

[dir="rtl"] .request-decrypt-message__message-lock {
  right: 0;
}

.request-decrypt-message__message-lock__container {
  padding: 16px;
  background-color: var(--color-background-default);
  position: absolute;
  top: 50%;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

[dir="ltr"] .request-decrypt-message__message-lock__container {
  left: 50%;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .request-decrypt-message__message-lock__container {
  right: 50%;
  transform: translate(50%, -50%);
}

.request-decrypt-message__message-lock__container__icon {
  color: var(--color-icon-default);
  display: flex;
  margin-bottom: 16px;
}

.request-decrypt-message__message-lock__container__text {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.request-decrypt-message__message-lock--pressed {
  display: none;
}

.request-decrypt-message__message-copy {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  justify-content: space-evenly;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 24px;
  display: flex;
  cursor: pointer;
}

.request-decrypt-message__message-copy-text {
  display: inline;
  color: var(--color-primary-default);
}

[dir="ltr"] .request-decrypt-message__message-copy-text {
  margin-right: 10px;
}

[dir="rtl"] .request-decrypt-message__message-copy-text {
  margin-left: 10px;
}

[dir="ltr"] .request-decrypt-message__message-copy-tooltip {
  float: right;
}

[dir="rtl"] .request-decrypt-message__message-copy-tooltip {
  float: left;
}

.request-decrypt-message__visual {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  position: relative;
  margin: 0 20px;
}

.request-decrypt-message__visual section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.request-decrypt-message__visual-identicon {
  width: 48px;
  height: 48px;
}

.request-decrypt-message__visual-identicon--default {
  background-color: var(--color-background-alternative);
  color: var(--color-text-default);
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.request-encryption-public-key__container {
  width: 380px;
  border-radius: 8px;
  background-color: var(--color-background-default);
  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  display: flex;
  flex-flow: column nowrap;
  z-index: 25;
  align-items: center;
  position: relative;
  height: 100%;
}

@media screen and (max-width: calc(576px - 1px)) {
  .request-encryption-public-key__container {
    width: 100%;
    top: 0;
    box-shadow: none;
  }
}

@media screen and (min-width: 576px) {
  .request-encryption-public-key__container {
    height: 620px;
  }
}

.request-encryption-public-key__typed-container {
  padding: 17px;
}

.request-encryption-public-key__typed-container h1 {
  font-weight: 900;
  margin-bottom: 5px;
}

.request-encryption-public-key__typed-container * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-encryption-public-key__typed-container > div {
  margin-bottom: 10px;
}

.request-encryption-public-key__header {
  height: 64px;
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

.request-encryption-public-key__header-background {
  position: absolute;
  background-color: var(--color-background-alternative);
  z-index: 2;
  width: 100%;
  height: 100%;
}

.request-encryption-public-key__header__text {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  z-index: 3;
  text-align: center;
}

.request-encryption-public-key__header__tip-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.request-encryption-public-key__header__tip {
  height: 25px;
  width: 25px;
  background: var(--color-background-alternative);
  position: absolute;
  bottom: -8px;
  z-index: 1;
}

[dir="ltr"] .request-encryption-public-key__header__tip {
  transform: rotate(45deg);
}

[dir="rtl"] .request-encryption-public-key__header__tip {
  transform: rotate(-45deg);
}

.request-encryption-public-key__account-info {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  margin-bottom: 20px;
}

.request-encryption-public-key__account {
  color: var(--color-text-alternative);
}

[dir="ltr"] .request-encryption-public-key__account {
  margin-left: 17px;
}

[dir="rtl"] .request-encryption-public-key__account {
  margin-right: 17px;
}

.request-encryption-public-key__account-text {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.request-encryption-public-key__account-item {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  height: 22px;
  background-color: var(--color-background-default);
  width: 124px;
}

.request-encryption-public-key__account-item .account-list-item {
  margin-top: 6px;
}

.request-encryption-public-key__account-item .account-list-item__account-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 80px;
}

.request-encryption-public-key__account-item .account-list-item__top-row {
  margin: 0;
}

.request-encryption-public-key__balance {
  color: var(--color-text-alternative);
  width: 124px;
}

[dir="ltr"] .request-encryption-public-key__balance {
  margin-right: 17px;
}

[dir="rtl"] .request-encryption-public-key__balance {
  margin-left: 17px;
}

.request-encryption-public-key__balance-text {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

[dir="ltr"] .request-encryption-public-key__balance-text {
  text-align: right;
}

[dir="rtl"] .request-encryption-public-key__balance-text {
  text-align: left;
}

.request-encryption-public-key__balance-value {
  margin-top: 2.5px;
}

[dir="ltr"] .request-encryption-public-key__balance-value {
  text-align: right;
}

[dir="rtl"] .request-encryption-public-key__balance-value {
  text-align: left;
}

.request-encryption-public-key__request-icon {
  margin-top: 25px;
}

.request-encryption-public-key__body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  height: 0;
}

.request-encryption-public-key__notice {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  margin-top: 41px;
  margin-bottom: 11px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  color: var(--color-text-alternative);
}

.request-encryption-public-key__visual {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  position: relative;
  margin: 0 20px;
}

.request-encryption-public-key__visual section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

.request-encryption-public-key__visual-identicon {
  width: 48px;
  height: 48px;
}

.request-encryption-public-key__visual-identicon--default {
  background-color: var(--color-background-alternative);
  color: var(--color-text-alternative);
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.connected-sites h2 {
  text-overflow: ellipsis;
}

[dir="ltr"] .connected-sites h2 {
  margin-right: 10px;
}

[dir="rtl"] .connected-sites h2 {
  margin-left: 10px;
}

.connected-sites__confirmation {
  flex-direction: column;
}

[dir="ltr"] .connected-sites__confirmation button:first-child {
  margin-right: 24px;
}

[dir="rtl"] .connected-sites__confirmation button:first-child {
  margin-left: 24px;
}

.connected-sites__footer-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.connected-sites__footer-row + .connected-sites__footer-row {
  margin-top: 15px;
}

.connected-sites a {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

.connected-sites a:hover {
  color: var(--color-primary-alternative);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.connected-accounts__footer {
  overflow: hidden;
  margin-bottom: 8px;
}

.connected-accounts__footer a,
.connected-accounts__footer a:hover {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.connected-sites h2 {
  text-overflow: ellipsis;
}

[dir="ltr"] .connected-sites h2 {
  margin-right: 10px;
}

[dir="rtl"] .connected-sites h2 {
  margin-left: 10px;
}

.connected-sites__confirmation {
  flex-direction: column;
}

[dir="ltr"] .connected-sites__confirmation button:first-child {
  margin-right: 24px;
}

[dir="rtl"] .connected-sites__confirmation button:first-child {
  margin-left: 24px;
}

.connected-sites__footer-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.connected-sites__footer-row + .connected-sites__footer-row {
  margin-top: 15px;
}

.connected-sites a {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

.connected-sites a:hover {
  color: var(--color-primary-alternative);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.new-account-wrapper {
  background-color: var(--color-background-default);
}

@media screen and (min-width: 576px) {
  .new-account-wrapper {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .new-account-wrapper {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .new-account-wrapper {
    width: 62vw;
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.hw-tutorial {
  overflow: visible;
  display: block;
  padding: 15px 30px;
}

.hw-connect {
  width: 100%;
}

.hw-connect__header__title-wrapper {
  width: 100%;
}

.hw-connect__QR-subtitle {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  margin-top: 10px;
  color: var(--color-text-default);
}

.hw-connect__btn-wrapper {
  flex: 1;
  flex-direction: row;
  display: flex;
}

.hw-connect__connect-btn {
  width: 315px;
  margin: 20px;
}

.hw-connect__connect-btn.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.hw-connect__external-btn-first {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 5px 10px;
  width: auto;
  display: inline;
  margin-top: 10px;
}

[dir="ltr"] .hw-connect__external-btn-first {
  margin-right: 20px;
}

[dir="rtl"] .hw-connect__external-btn-first {
  margin-left: 20px;
}

.hw-connect__external-btn {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 5px 10px;
  width: auto;
  display: inline;
  margin-top: 10px;
}

.hw-connect__btn {
  background: var(--color-background-alternative);
  border: 1px solid var(--color-border-muted);
  height: 148px;
  width: 199px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 0;
}

[dir="ltr"] .hw-connect__btn {
  margin-right: 15px;
}

[dir="rtl"] .hw-connect__btn {
  margin-left: 15px;
}

.hw-connect__btn__img {
  width: 136px;
}

.hw-connect__btn.selected {
  border-color: var(--color-primary-default);
  width: 199px;
}

[dir="ltr"] .hw-connect__btn:first-child {
  margin-left: 20px;
}

[dir="rtl"] .hw-connect__btn:first-child {
  margin-right: 20px;
}

[dir="ltr"] .hw-connect__btn:last-child {
  margin-right: 20px;
}

[dir="rtl"] .hw-connect__btn:last-child {
  margin-left: 20px;
}

.hw-connect__hdPath {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  margin-bottom: 30px;
}

.hw-connect__hdPath__title {
  display: flex;
  margin-top: 10px;
}

[dir="ltr"] .hw-connect__hdPath__title {
  margin-right: 15px;
}

[dir="rtl"] .hw-connect__hdPath__title {
  margin-left: 15px;
}

.hw-connect__hdPath__select {
  display: flex;
  flex: 1;
}

.hw-connect__unlock-title {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding-top: 10px;
  font-weight: 400;
  margin-bottom: 15px;
}

.hw-connect__msg-link {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  color: var(--color-primary-default);
  background: unset;
}

.hw-connect__error {
  color: var(--color-warning-default);
  margin: 20px 20px 10px;
  display: block;
  text-align: center;
}

.hw-connect__step-asset {
  margin: 0 auto 20px;
  display: flex;
}

.hw-account-list {
  display: flex;
  flex: 1;
  flex-flow: column;
  width: 100%;
}

.hw-account-list__title_wrapper {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.hw-account-list__title {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 23px;
  align-self: flex-start;
  color: var(--color-text-muted);
  font-weight: bold;
  display: flex;
  flex: 1;
}

.hw-account-list__device {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 23px;
  align-self: flex-end;
  color: var(--color-text-muted);
  display: flex;
}

.hw-account-list__item {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  flex-direction: row;
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid var(--color-border-muted);
  background-color: var(--color-background-default);
}

.hw-account-list__item:hover {
  background-color: var(--color-background-default-hover);
}

.hw-account-list__item__index {
  display: flex;
  width: 24px;
}

.hw-account-list__item__checkbox {
  display: flex;
  flex: 1;
}

.hw-account-list__item__checkbox input {
  margin-top: 13px;
}

.hw-account-list__item__label {
  display: flex;
  flex: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}

[dir="ltr"] .hw-account-list__item__label {
  padding-left: 10px;
}

[dir="rtl"] .hw-account-list__item__label {
  padding-right: 10px;
}

.hw-account-list__item__balance {
  display: flex;
  flex: 1;
  justify-content: center;
}

.hw-account-list__item__link {
  display: flex;
  margin-top: 13px;
}

.hw-account-list__item__link img {
  width: 15px;
  height: 15px;
}

.hw-list-pagination {
  display: flex;
  align-self: flex-end;
  margin-top: 10px;
}

.hw-list-pagination__button {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  background: var(--color-background-default);
  height: 19px;
  display: flex;
  color: var(--color-primary-default);
  border: none;
  min-width: 46px;
  padding: 0;
  text-transform: uppercase;
}

[dir="ltr"] .hw-list-pagination__button {
  margin-right: 0;
  margin-left: 16px;
}

[dir="rtl"] .hw-list-pagination__button {
  margin-left: 0;
  margin-right: 16px;
}

.new-external-account-form.footer {
  width: 520px;
}

.new-external-account-form.unsupported-browser {
  height: 210px;
  overflow: auto;
  scrollbar-width: none;
}

.new-external-account-form.unsupported-browser::-webkit-scrollbar {
  display: none;
}

.new-external-account-form.account-list {
  height: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.new-external-account-form__buttons {
  margin-top: 39px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

[dir="ltr"] .new-external-account-form__button:not(:last-child) {
  margin-right: 16px;
}

[dir="rtl"] .new-external-account-form__button:not(:last-child) {
  margin-left: 16px;
}

.hw-forget-device-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 22px;
}

.hw-forget-device-container a {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

.switch-ledger-path-popover__content {
  padding: 0 24px 48px 24px;
}

.switch-ledger-path-popover__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

[dir="ltr"] .switch-ledger-path-popover__footer button:first-of-type {
  margin-right: 15px;
}

[dir="rtl"] .switch-ledger-path-popover__footer button:first-of-type {
  margin-left: 15px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.error-page {
  display: flex;
  flex-flow: column;
  padding: 16px;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .error-page__inner-wrapper {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

.error-page__stack {
  max-height: 120px;
  overflow: auto;
  font-family: var(--font-family-default);
  font-weight: var(--typography-l-body-xs-font-weight);
  font-size: var(--typography-l-body-xs-font-size);
}

.error-page__link-text {
  color: var(--color-primary-default);
}

#sentry-feedback {
  --font-family: var(--font-family-default);
  --inset: auto 20px 20px auto;
  --input-font-size: 14px;
  --button-color: var(--color-primary-default);
  --button-primary-background: var(--color-primary-default);
  --button-primary-border: var(--color-primary-default);
  --button-primary-hover-background: var(--color-primary-default);
  --success-color: var(--color-success-default);
  --error-color: var(--color-error-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.home__onboarding_list {
  list-style: initial;
  margin-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home__container {
  display: flex;
  min-height: 100%;
}

.home__main-view {
  flex: 1 1 66.5%;
  background: var(--color-background-default);
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.home__connect-status-text {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding-left: 24px;
  padding-right: 24px;
  color: var(--color-text-default);
}

.home__connect-status-text div {
  margin-bottom: 20px;
}

.home__connect-status-text div:last-child {
  margin-bottom: 0;
}

.home__connected-status-popover {
  width: 329px;
  margin-top: -15px;
}

.home__connected-status-popover .popover-header {
  padding-bottom: 20px;
}

.home__connected-status-popover .popover-header__title {
  padding-bottom: 0;
}

.home__connected-status-popover .popover-content {
  overflow-y: auto;
}

.home__connected-status-popover .popover-arrow {
  top: -6px;
}

[dir="ltr"] .home__connected-status-popover .popover-arrow {
  left: 24px;
}

[dir="rtl"] .home__connected-status-popover .popover-arrow {
  right: 24px;
}

.home__connected-status-popover .popover-footer {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  border-top: 0;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.home__connected-status-popover .popover-footer :only-child {
  margin: 0;
}

.home__connected-status-popover .popover-footer button {
  height: 39px;
  width: 133px;
  border-radius: 39px;
  padding: 0;
}

.home__connected-status-popover .popover-footer a,
.home__connected-status-popover .popover-footer a:hover {
  color: var(--color-primary-alternative);
  cursor: pointer;
}

.home__connected-status-popover-bg {
  height: 55px;
  width: 120px;
  border-radius: 34px;
  position: absolute;
  top: 73px;
  opacity: 1;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
  background: none;
}

.home__connected-status-popover-bg-container {
  height: 100%;
  width: 100%;
}

.home__support {
  padding: 10px 0 20px 0;
  text-align: center;
}

.home__support a {
  color: var(--color-primary-default);
}

.home__new-network-notification {
  margin-bottom: 50px;
}

.home__new-network-notification {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.home__new-network-notification-icon {
  padding-top: 8px;
  color: var(--color-success-default);
}

[dir="ltr"] .home__new-network-notification-icon {
  margin-right: 8px;
}

[dir="rtl"] .home__new-network-notification-icon {
  margin-left: 8px;
}

.home__new-network-notification-close {
  color: var(--color-icon-default);
  background: none;
}

[dir="ltr"] .home__new-network-notification-close {
  margin-left: 20px;
}

[dir="rtl"] .home__new-network-notification-close {
  margin-right: 20px;
}

[dir="ltr"] .home__error-message {
  left: 8px;
}

[dir="rtl"] .home__error-message {
  right: 8px;
}

.home__new-nft-notification {
  margin-bottom: 24px;
}

[dir="ltr"] .home__new-nft-notification {
  margin-right: 8px;
}

[dir="rtl"] .home__new-nft-notification {
  margin-left: 8px;
}

.home__new-nft-notification-icon {
  padding-top: 6px;
  color: var(--color-success-default);
}

[dir="ltr"] .home__new-nft-notification-icon {
  margin-right: 10px;
}

[dir="rtl"] .home__new-nft-notification-icon {
  margin-left: 10px;
}

.home__new-nft-notification-close {
  color: var(--color-icon-default);
  background: none;
}

[dir="ltr"] .home__new-nft-notification-close {
  margin-left: 44px;
}

[dir="rtl"] .home__new-nft-notification-close {
  margin-right: 44px;
}

.home__new-tokens-imported-notification {
  padding: 8px;
  bottom: 16px !important;
}

@media screen and (min-width: 576px) {
  .home__new-tokens-imported-notification {
    margin-bottom: 50px;
    margin-inline-end: 8px;
  }

  [dir="ltr"] .home__new-tokens-imported-notification {
    margin-right: 40%;
  }

  [dir="rtl"] .home__new-tokens-imported-notification {
    margin-left: 40%;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .home__new-tokens-imported-notification {
    left: 5%;
    right: 5% !important;
  }
}

.home__new-tokens-imported-notification-title, .home__new-tokens-imported-notification-message {
  text-align: start;
}

.home__new-tokens-imported-notification-icon {
  font-size: 24px;
  margin-inline-end: 12px;
  color: var(--color-success-default);
}

.home__new-tokens-imported-notification-close {
  color: var(--color-icon-default);
  background: none;
  margin-inline-start: 32px;
}

.home__new-network-added {
  border-radius: 10px;
  text-align: center;
}

.home__new-network-added__check-circle {
  color: var(--color-success-default);
  margin-top: 20px;
}

.home__new-network-added__switch-to-button {
  margin-bottom: 16px;
}

.home__subheader-link {
  display: flex;
  padding: 12px 0;
  justify-content: center;
  color: var(--color-primary-default);
  align-items: center;
  cursor: pointer;
}

.home__subheader-link--tooltip-content-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.home__subheader-link--tooltip-content-header-text {
  font-size: 18px;
  line-height: 22.82px;
  font-weight: 700;
}

.home__subheader-link--tooltip-content-header-button {
  background-color: var(--color-primary-default);
  color: var(--color-primary-inverse);
  border: 0;
}

.home__subheader-link--tooltip-content-text-bold {
  font-weight: 700;
}

.home__subheader-link--tooltip-theme {
  background-color: var(--color-primary-default) !important;
}

.home__subheader-link--tooltip-theme .tippy-tooltip-content {
  color: var(--color-primary-inverse) !important;
}

.home__subheader-link--tooltip-theme .arrow-regular {
  border-bottom-color: var(--color-primary-default) !important;
}

.home__subheader-link--text {
  font-weight: 400;
  font-size: 12px;
  line-height: 140.62%;
}

[dir="ltr"] .home__subheader-link--text {
  margin-left: 8px;
}

[dir="rtl"] .home__subheader-link--text {
  margin-right: 8px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.first-view-main-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  padding: 0 10px;
}

.first-view-main-wrapper > .first-view-main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

@media screen and (min-width: 1280px) {
  .first-view-main {
    width: 62vw;
  }
}

.import-account {
  display: flex;
  flex-flow: column nowrap;
  margin: 60px 0 30px 0;
  position: relative;
  max-width: initial;
}

@media screen and (max-width: calc(576px - 1px)) {
  .import-account {
    margin: 24px;
    display: flex;
    flex-flow: column nowrap;
    width: calc(100vw - 80px);
  }

  .import-account__title {
    width: initial !important;
  }

  .first-view-main {
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 12px;
  }

  .first-view-phone-invisible {
    display: none;
  }

  .first-time-flow__input {
    width: 100%;
  }
}

.import-account__back-button {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 18px;
  color: var(--color-text-default);
  position: absolute;
  top: -25px;
}

.import-account__link {
  display: inline;
  padding: 0;
  font-size: inherit;
}

.reveal-seed__tab {
  display: flex;
  flex: 1;
}

.reveal-seed__active-tab {
  color: var(--color-primary-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.notifications {
  display: block;
  position: relative;
}

.notifications__tabs {
  border: none;
  padding: 0 0;
}

.notifications__tab {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  flex-grow: 1;
}

.notifications__tab button {
  padding: 8px;
}

.notifications__list {
  position: relative;
}

.notifications__list__read__all__button {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snap-notifications__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid var(--color-border-muted);
  cursor: pointer;
}

[dir="ltr"] .snap-notifications__item {
  padding: 16px 32px 16px 16px;
}

[dir="rtl"] .snap-notifications__item {
  padding: 16px 16px 16px 32px;
}

.snap-notifications__item:hover {
  background-color: var(--color-background-default-hover);
}

.snap-notifications__item__unread-dot {
  content: " ";
  align-self: flex-start;
  margin-top: 6px;
  width: 8px;
  height: 8px;
  background-color: transparent;
  border-radius: 50%;
}

.snap-notifications__item .unread {
  flex-shrink: 0;
  background-color: var(--color-primary-default);
}

.snap-notifications__item__details {
  display: flex;
  flex-direction: column;
}

[dir="ltr"] .snap-notifications__item__details {
  margin-left: 12px;
}

[dir="rtl"] .snap-notifications__item__details {
  margin-right: 12px;
}

.snap-notifications__item__details__infos {
  color: var(--color-text-muted);
  font-size: 12px;
  margin-top: 6px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.recovery-phrase {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recovery-phrase__header {
  max-width: 420px;
}

.recovery-phrase__tips {
  flex-direction: column;
  max-width: 420px;
  margin: 0 auto;
}

.recovery-phrase__tips ul {
  list-style: disc;
  margin-bottom: 24px;
}

[dir="ltr"] .recovery-phrase__tips ul {
  margin-left: 20px;
}

[dir="rtl"] .recovery-phrase__tips ul {
  margin-right: 20px;
}

.recovery-phrase__chips {
  display: grid;
  justify-items: center;
  align-items: center;
  row-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media screen and (min-width: 576px) {
  .recovery-phrase__chips {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.recovery-phrase__chips--hidden {
  filter: blur(5px);
}

.recovery-phrase__secret {
  position: relative;
  width: 100%;
}

.recovery-phrase__secret-blocker {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-overlay-alternative);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  padding: 8px 0 18px;
  border-radius: 4px;
  color: var(--color-overlay-inverse);
}

.recovery-phrase__secret-blocker--text {
  margin-top: 32px;
}

.recovery-phrase__chip-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
}

.recovery-phrase__chip-item__number {
  font-size: 1rem;
}

.recovery-phrase__footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: calc(576px - 1px)) {
  .recovery-phrase__footer {
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    margin-bottom: 40px;
  }
}

.recovery-phrase__footer__confirm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .recovery-phrase__footer__confirm {
    margin-top: 20px;
  }
}

.recovery-phrase__footer__confirm--button {
  align-self: center;
  width: 100%;
  max-width: 300px;
}

.recovery-phrase__footer--button {
  align-self: center;
}

@media screen and (min-width: 576px) {
  .recovery-phrase__footer--button {
    max-width: 300px;
  }
}

.recovery-phrase__footer__copy-and-hide {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.recovery-phrase__footer__copy-and-hide__area {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@media screen and (min-width: 576px) {
  .recovery-phrase__footer__copy-and-hide__area {
    justify-content: space-around;
  }
}

.recovery-phrase__footer__copy-and-hide__button {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
  border: none;
  width: 32%;
  color: var(--color-primary-default);
  cursor: pointer;
  margin-bottom: 24px;
  padding-left: 0;
  padding-right: 0;
}

.recovery-phrase__footer__copy-and-hide__button__hide-seed {
  justify-content: flex-start;
}

.recovery-phrase__footer__copy-and-hide__button__copy-to-clipboard {
  justify-content: flex-end;
}

@media screen and (max-width: calc(576px - 1px)) {
  .recovery-phrase__footer__copy-and-hide__button {
    justify-content: center;
    width: 100%;
  }
}

.recovery-phrase__footer__copy-and-hide__button svg {
  width: 15px;
}

.recovery-phrase__footer__copy-and-hide__button:active {
  color: var(--color-text-default);
  background-color: transparent;
  border: none;
  transform: scale(0.97);
}

.recovery-phrase__chip {
  justify-content: center;
  border-radius: 13px;
  height: 32px;
  width: 120px;
}

.recovery-phrase__chip--with-input {
  width: 120px;
  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  border-width: 2px;
  border-radius: 13px;
  height: 32px;
}

@media screen and (min-width: 576px) {
  .recovery-phrase__confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.onboarding-app-header {
  align-items: center;
  background: var(--color-background-default);
  position: relative;
  z-index: 12;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  flex: 0 0 auto;
}

@media screen and (max-width: calc(576px - 1px)) {
  .onboarding-app-header {
    padding: 16px;
    z-index: 26;
  }
}

@media screen and (min-width: 576px) {
  .onboarding-app-header {
    height: 75px;
    justify-content: center;
  }
}

.onboarding-app-header__metafox-logo--icon {
  height: 32px;
}

@media screen and (min-width: 576px) {
  .onboarding-app-header__metafox-logo--icon {
    display: none;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .onboarding-app-header__metafox-logo--horizontal {
    display: none;
  }
}

.onboarding-app-header__contents {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  justify-content: space-between;
}

@media screen and (max-width: calc(576px - 1px)) {
  .onboarding-app-header__contents {
    height: 100%;
  }
}

@media screen and (min-width: 576px) {
  .onboarding-app-header__contents {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .onboarding-app-header__contents {
    width: 90vw;
  }
}

@media screen and (min-width: 1280px) {
  .onboarding-app-header__contents {
    width: 62vw;
  }
}

.onboarding-app-header__logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
}

[dir="ltr"] .onboarding-app-header__logo-container {
  margin-right: 1rem;
}

[dir="rtl"] .onboarding-app-header__logo-container {
  margin-left: 1rem;
}

.secure-your-wallet__list {
  list-style: disc inside;
}

.secure-your-wallet__srp-design-container {
  margin-bottom: 36px;
}

.secure-your-wallet__srp-design-image {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.skip-srp-backup-popover {
  width: 365px;
}

.skip-srp-backup-popover__icon {
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
}

[dir="ltr"] .skip-srp-backup-popover__checkbox {
  margin: 8px 12px 0 0;
}

[dir="rtl"] .skip-srp-backup-popover__checkbox {
  margin: 8px 0 0 12px;
}

.skip-srp-backup-popover__label {
  display: flex;
}

.skip-srp-backup-popover__footer button {
  width: 140px;
  margin: 0 10px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.privacy-settings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  /* slide in show the detail view */
  /* slide back to show the list view */
}

@media screen and (max-width: calc(576px - 1px)) {
  .privacy-settings {
    margin-bottom: 24px;
  }
}

.privacy-settings__header a {
  color: var(--color-primary-default);
}

.privacy-settings__settings {
  display: flex;
  flex-direction: column;
  max-width: 620px;
  margin-bottom: 20px;
}

.privacy-settings__settings a {
  color: var(--color-primary-default);
}

.privacy-settings__settings a:hover {
  cursor: pointer;
  color: var(--color-primary-default);
}

.privacy-settings__setting {
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: 430px;
}

[dir="ltr"] .privacy-settings__setting {
  text-align: left;
}

[dir="rtl"] .privacy-settings__setting {
  text-align: right;
}

[dir="ltr"] .privacy-settings__setting__toggle {
  margin-left: 42px;
}

[dir="rtl"] .privacy-settings__setting__toggle {
  margin-right: 42px;
}

.privacy-settings__network {
  position: relative;
}

.privacy-settings .container {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}

.privacy-settings .hidden {
  display: none;
}

.privacy-settings .categories-item {
  cursor: pointer;
}

.privacy-settings .list-view,
.privacy-settings .detail-view {
  flex: 0 0 100%;
  width: 100%;
}

[dir="ltr"] .privacy-settings .container.show-detail {
  transform: translateX(-100%);
}

[dir="rtl"] .privacy-settings .container.show-detail {
  transform: translateX(100%);
}

.privacy-settings .container.show-list {
  transform: translateX(0%);
}

.privacy-settings__customizable-network:hover {
  cursor: pointer;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.create-password__weak {
  color: var(--color-error-default);
}

.create-password__average {
  color: var(--color-warning-default);
}

.create-password__strong {
  color: var(--color-success-default);
}

.create-password__wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.create-password__link-text {
  color: var(--color-primary-default);
}

@media screen and (min-width: 576px) {
  .create-password__form {
    max-width: 320px;
  }
}

.create-password__form--password-button {
  color: var(--color-primary-default);
}

.create-password__form--checkmark i {
  color: var(--color-success-default);
}

.create-password__form .mm-checkbox__input-wrapper {
  margin-top: 2px;
}

.create-password__form .form-field__input {
  height: 50px;
  width: 100%;
}

.create-password__analytics-iframe {
  width: 1px;
  height: 1px;
  position: absolute;
  top: -9999px;
}

[dir="ltr"] .create-password__analytics-iframe {
  left: -9999px;
}

[dir="rtl"] .create-password__analytics-iframe {
  right: -9999px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.creation-successful {
  max-width: 600px;
}

.creation-successful img {
  align-self: center;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/********************************************
	BREAKPOINT WIDTHS
********************************************/
/********************************************
	FONTS
********************************************/
/********************************************
	COLOURS
********************************************/
.carousel .control-arrow, .carousel.carousel-slider .control-arrow {
  transition: all 0.25s ease-in;
  opacity: 0.4;
  filter: alpha(opacity=40);
  position: absolute;
  z-index: 2;
  top: 20px;
  background: none;
  border: 0;
  font-size: 32px;
  cursor: pointer;
}

.carousel .control-arrow:focus, .carousel .control-arrow:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
  margin: 0 5px;
  display: inline-block;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  content: "";
}

.carousel .control-disabled.control-arrow {
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: inherit;
  display: none;
}

[dir="ltr"] .carousel .control-prev.control-arrow {
  left: 0;
}

[dir="rtl"] .carousel .control-prev.control-arrow {
  right: 0;
}

[dir="ltr"] .carousel .control-prev.control-arrow:before {
  border-right: 8px solid #fff;
}

[dir="rtl"] .carousel .control-prev.control-arrow:before {
  border-left: 8px solid #fff;
}

[dir="ltr"] .carousel .control-next.control-arrow {
  right: 0;
}

[dir="rtl"] .carousel .control-next.control-arrow {
  left: 0;
}

[dir="ltr"] .carousel .control-next.control-arrow:before {
  border-left: 8px solid #fff;
}

[dir="rtl"] .carousel .control-next.control-arrow:before {
  border-right: 8px solid #fff;
}

.carousel-root {
  outline: none;
}

.carousel {
  position: relative;
  width: 100%;
}

.carousel * {
  box-sizing: border-box;
}

.carousel img {
  width: 100%;
  display: inline-block;
  pointer-events: none;
}

.carousel .carousel {
  position: relative;
}

.carousel .control-arrow {
  outline: 0;
  border: 0;
  background: none;
  top: 50%;
  margin-top: -13px;
  font-size: 18px;
}

.carousel .thumbs-wrapper {
  margin: 20px;
  overflow: hidden;
}

.carousel .thumbs {
  transition: all 0.15s ease-in;
  transform: translate3d(0, 0, 0);
  position: relative;
  list-style: none;
  white-space: nowrap;
}

.carousel .thumb {
  transition: border 0.15s ease-in;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border: 3px solid #fff;
  padding: 2px;
}

[dir="ltr"] .carousel .thumb {
  margin-right: 6px;
}

[dir="rtl"] .carousel .thumb {
  margin-left: 6px;
}

.carousel .thumb:focus {
  border: 3px solid #ccc;
  outline: none;
}

.carousel .thumb.selected, .carousel .thumb:hover {
  border: 3px solid #333;
}

.carousel .thumb img {
  vertical-align: top;
}

.carousel.carousel-slider {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.carousel.carousel-slider .control-arrow {
  top: 0;
  color: #fff;
  font-size: 26px;
  bottom: 0;
  margin-top: 0;
  padding: 5px;
}

.carousel.carousel-slider .control-arrow:hover {
  background: rgba(0, 0, 0, 0.2);
}

.carousel .slider-wrapper {
  overflow: hidden;
  margin: auto;
  width: 100%;
  transition: height 0.15s ease-in;
}

.carousel .slider-wrapper.axis-horizontal .slider {
  -ms-box-orient: horizontal;
  display: -moz-flex;
  display: flex;
}

.carousel .slider-wrapper.axis-horizontal .slider .slide {
  flex-direction: column;
  flex-flow: column;
}

.carousel .slider-wrapper.axis-vertical {
  -ms-box-orient: horizontal;
  display: -moz-flex;
  display: flex;
}

.carousel .slider-wrapper.axis-vertical .slider {
  flex-direction: column;
}

.carousel .slider {
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  width: 100%;
}

.carousel .slider.animated {
  transition: all 0.35s ease-in-out;
}

.carousel .slide {
  min-width: 100%;
  margin: 0;
  position: relative;
  text-align: center;
}

.carousel .slide img {
  width: 100%;
  vertical-align: top;
  border: 0;
}

.carousel .slide iframe {
  display: inline-block;
  width: calc(100% - 80px);
  margin: 0 40px 40px;
  border: 0;
}

.carousel .slide .legend {
  transition: all 0.5s ease-in-out;
  position: absolute;
  bottom: 40px;
  width: 90%;
  border-radius: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  opacity: 0.25;
  transition: opacity 0.35s ease-in-out;
}

[dir="ltr"] .carousel .slide .legend {
  left: 50%;
  margin-left: -45%;
}

[dir="rtl"] .carousel .slide .legend {
  right: 50%;
  margin-right: -45%;
}

.carousel .control-dots {
  position: absolute;
  bottom: 0;
  margin: 10px 0;
  padding: 0;
  text-align: center;
  width: 100%;
  z-index: 1;
}

@media (min-width: 960px) {
  .carousel .control-dots {
    bottom: 0;
  }
}

.carousel .control-dots .dot {
  transition: opacity 0.25s ease-in;
  opacity: 0.3;
  filter: alpha(opacity=30);
  background: #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  cursor: pointer;
  display: inline-block;
  margin: 0 8px;
}

[dir="ltr"] .carousel .control-dots .dot {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}

[dir="rtl"] .carousel .control-dots .dot {
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.9);
}

.carousel .control-dots .dot.selected, .carousel .control-dots .dot:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.carousel .carousel-status {
  position: absolute;
  top: 0;
  padding: 5px;
  font-size: 10px;
  color: #fff;
}

[dir="ltr"] .carousel .carousel-status {
  right: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

[dir="rtl"] .carousel .carousel-status {
  left: 0;
  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.9);
}

.carousel:hover .slide .legend {
  opacity: 1;
}

.onboarding-welcome {
  /* next and previous arrow colors */
}

.onboarding-welcome .control-dots .dot {
  background: var(--color-icon-muted);
  box-shadow: none;
}

.onboarding-welcome .control-dots .dot.selected {
  background: var(--color-icon-default);
}

.onboarding-welcome .slide {
  min-height: 400px;
}

.onboarding-welcome .carousel.carousel-slider .control-arrow {
  opacity: 1;
  color: var(--color-icon-default);
}

@media screen and (min-width: 576px) {
  .onboarding-welcome .carousel.carousel-slider .control-arrow {
    padding: 40px;
  }
}

[dir="ltr"] .onboarding-welcome .carousel .control-next.control-arrow::before {
  border-left-color: var(--color-icon-default);
}

[dir="rtl"] .onboarding-welcome .carousel .control-next.control-arrow::before {
  border-right-color: var(--color-icon-default);
}

[dir="ltr"] .onboarding-welcome .carousel .control-prev.control-arrow::before {
  border-right-color: var(--color-icon-default);
}

[dir="rtl"] .onboarding-welcome .carousel .control-prev.control-arrow::before {
  border-left-color: var(--color-icon-default);
}

.onboarding-welcome .carousel.carousel-slider .control-arrow:hover {
  background: none;
}

.onboarding-welcome__mascot {
  width: 250px;
  height: 250px;
  margin: 20px auto;
}

.onboarding-welcome__image {
  text-align: center;
  margin: 20px auto;
}

.onboarding-welcome__buttons {
  max-width: 300px;
  margin: 40px auto 0 auto;
}

.onboarding-welcome__buttons li {
  margin-bottom: 24px;
}

.onboarding-welcome__terms-checkbox {
  margin: 0;
  align-self: flex-start;
}

.import-srp {
  margin-bottom: 24px;
}

.import-srp__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: 24px;
}

.import-srp__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: 30px;
}

.import-srp__description a {
  color: var(--color-primary-default);
}

.import-srp__description a:hover {
  cursor: pointer;
  color: var(--color-primary-default);
}

.import-srp__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

[dir="ltr"] .import-srp__actions {
  text-align: left;
}

[dir="rtl"] .import-srp__actions {
  text-align: right;
}

.import-srp__confirm-button {
  max-width: 327px;
  margin: auto;
  margin-top: 24px;
}

.onboarding-pin-extension .control-dots .dot {
  background: var(--color-icon-muted);
  box-shadow: none;
}

.onboarding-pin-extension .control-dots .dot.selected {
  background: var(--color-icon-default);
}

.onboarding-pin-extension__diagram {
  margin: 24px auto;
  max-width: 799px;
  height: 320px;
}

.onboarding-pin-extension__buttons {
  max-width: 50%;
  margin: 40px auto 0 auto;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
@media screen and (min-width: 576px) {
  .onboarding-metametrics {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.onboarding-metametrics p {
  align-self: baseline;
}

.onboarding-metametrics ul {
  margin: 24px 0 0 0;
  width: 100%;
}

.onboarding-metametrics ul li {
  padding-bottom: 20px;
  display: flex;
}

.onboarding-metametrics ul li > span {
  width: 90%;
}

.onboarding-metametrics__terms a {
  color: var(--color-primary-default);
}

.onboarding-metametrics__buttons {
  margin-top: 24px;
}

@media screen and (min-width: 576px) {
  .onboarding-metametrics__buttons {
    margin-top: 40px;
  }
}

.onboarding-metametrics__buttons button {
  margin-bottom: 24px;
  width: 50%;
}

.onboarding-flow {
  background-color: var(--color-background-default);
  padding: 0 16px;
  width: 100%;
}

.onboarding-flow__wrapper {
  margin: 24px auto;
  padding: 32px 16px;
  max-width: 600px;
  border: 1px solid var(--color-border-muted);
  border-radius: 24px;
}

@media screen and (min-width: 576px) {
  .onboarding-flow__wrapper {
    margin: 64px auto 40px;
    padding: 32px;
  }
}

.onboarding-flow__twitter-button {
  margin-bottom: 40px;
  vertical-align: middle;
}

[dir="ltr"] .onboarding-flow__twitter-button__icon {
  margin-left: 4px;
}

[dir="rtl"] .onboarding-flow__twitter-button__icon {
  margin-right: 4px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.permissions-connect-choose-account__content {
  overflow-y: auto;
}

.permissions-connect-choose-account__footer .page-container__footer {
  border-top: 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.connect-page .multichain-page-content {
  overflow: hidden;
}

.connect-page .multichain-account-list-item:hover, .connect-page .multichain-account-list-item:focus-within {
  background: var(--color-background-default);
}

.connect-page__accounts-empty {
  min-height: 200px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.snap-install {
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

.snap-install__content {
  position: relative;
}

.snap-install__content__loader-container {
  height: 100%;
}

.snap-install__scroll-button-area {
  position: sticky;
  right: 0;
  left: 0;
  bottom: 0;
  height: 48px;
}

[dir="ltr"] .snap-install__scroll-button-area {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-background-alternative) 100%);
}

[dir="rtl"] .snap-install__scroll-button-area {
  background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, var(--color-background-alternative) 100%);
}

.snap-install__scroll-button {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: auto;
}

.snap-install .page-container__footer {
  width: 100%;
  border-top: 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.snap-update {
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

.snap-update__content {
  position: relative;
}

.snap-update__content__loader-container {
  height: 100%;
}

.snap-update__scroll-button-area {
  position: sticky;
  right: 0;
  left: 0;
  bottom: 0;
  height: 48px;
}

[dir="ltr"] .snap-update__scroll-button-area {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-background-alternative) 100%);
}

[dir="rtl"] .snap-update__scroll-button-area {
  background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, var(--color-background-alternative) 100%);
}

.snap-update__scroll-button {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: auto;
}

.snap-update .page-container__footer {
  width: 100%;
  border-top: 0;
}

.snap-update .page-container__footer button {
  padding: 0.75rem;
}

.snap-result {
  border: 1px solid var(--color-border-muted);
  border-radius: 2px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

.snap-result .page-container__footer {
  width: 100%;
  border-top: 0;
}

.snap-result__content {
  flex: 1 1 auto;
  overflow-y: auto;
}

.snaps-connect {
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
}

.snaps-connect .page-container__footer {
  border-top: 0;
}

.permissions-connect {
  max-width: 100%;
  position: relative;
  background: var(--color-background-default);
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .permissions-connect {
    width: 85vw;
  }

  .permissions-connect .page-container {
    max-height: none;
    min-height: auto;
  }
}

@media screen and (min-width: 768px) {
  .permissions-connect {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .permissions-connect {
    width: 62vw;
  }
}

.permissions-connect__top-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px 16px 0 16px;
  align-items: center;
}

.permissions-connect__back {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-icon-default);
  font-weight: bold;
  cursor: pointer;
}

.permissions-connect__page-count {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  grid-column: 2;
  justify-self: flex-end;
  font-weight: bold;
}

.permissions-connect .connect-page {
  background-color: var(--color-background-alternative);
}

.permission-approval-container .page-container__footer {
  border-top: 0;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.info-tab__logo-wrapper {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.info-tab__logo {
  height: 80px;
}

.info-tab__item {
  padding: 10px 0;
}

.info-tab__link-header {
  padding-bottom: 15px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .info-tab__link-header {
    padding-bottom: 5px;
  }
}

.info-tab__link-text {
  width: max-content;
  padding: 0;
}

.info-tab__link-item {
  padding: 15px 0;
}

@media screen and (max-width: calc(576px - 1px)) {
  .info-tab__link-item {
    padding: 5px 0;
  }
}

.info-tab__version-number {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding-top: 5px;
  color: var(--color-text-muted);
}

.info-tab__separator {
  margin: 15px 0;
  width: 80px;
  border: none;
  height: 1px;
  background-color: var(--color-border-muted);
}

.info-tab__about {
  color: var(--color-text-muted);
  margin-bottom: 15px;
}

.info-tab__tag {
  margin-inline-start: 8px;
}

.settings-page-developer-options__icon-check {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.settings-page-developer-options__icon-check:not([hidden]) {
  opacity: 1;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.networks-tab__imageclose {
  cursor: pointer;
  color: var(--color-icon-default);
}

.networks-tab__content--with-networks-list-popup-footer {
  padding-bottom: 80px;
  isolation: isolate;
}

@media screen and (min-width: 576px) {
  .networks-tab__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.networks-tab__content__icon-check {
  max-width: 24px;
  flex: 0 0 24px;
}

.networks-tab__content__custom-image {
  border: 1px solid var(--color-border-muted);
}

.networks-tab__content__icon-with-fallback {
  display: flex;
  align-items: center;
  padding: 0;
  max-width: 24px;
  flex: 0 0 24px;
  color: var(--color-text-alternative);
}

.networks-tab__content__icon-with-fallback--color-background-default {
  background: var(--color-background-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-background-alternative {
  background: var(--color-background-alternative);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-background-muted {
  background: var(--color-background-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-background-hover {
  background: var(--color-background-hover);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-background-pressed {
  background: var(--color-background-pressed);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-text-default {
  background: var(--color-text-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-text-alternative {
  background: var(--color-text-alternative);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-text-muted {
  background: var(--color-text-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-icon-default {
  background: var(--color-icon-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-icon-alternative {
  background: var(--color-icon-alternative);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-icon-muted {
  background: var(--color-icon-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-border-default {
  background: var(--color-border-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-border-muted {
  background: var(--color-border-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-overlay-default {
  background: var(--color-overlay-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-overlay-alternative {
  background: var(--color-overlay-alternative);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-overlay-inverse {
  background: var(--color-overlay-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-primary-default {
  background: var(--color-primary-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-primary-alternative {
  background: var(--color-primary-alternative);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-primary-muted {
  background: var(--color-primary-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-primary-inverse {
  background: var(--color-primary-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-error-default {
  background: var(--color-error-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-error-alternative {
  background: var(--color-error-alternative);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-error-muted {
  background: var(--color-error-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-error-inverse {
  background: var(--color-error-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-warning-default {
  background: var(--color-warning-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-warning-muted {
  background: var(--color-warning-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-warning-inverse {
  background: var(--color-warning-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-success-default {
  background: var(--color-success-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-success-muted {
  background: var(--color-success-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-success-inverse {
  background: var(--color-success-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-info-default {
  background: var(--color-info-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-info-muted {
  background: var(--color-info-muted);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-info-inverse {
  background: var(--color-info-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-goerli {
  background: var(--color-network-goerli-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-sepolia {
  background: var(--color-network-sepolia-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-goerli-inverse {
  background: var(--color-network-goerli-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-sepolia-inverse {
  background: var(--color-network-sepolia-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-linea-goerli {
  background: var(--color-network-linea-goerli-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-linea-goerli-inverse {
  background: var(--color-network-linea-goerli-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-linea-sepolia {
  background: var(--color-network-linea-sepolia-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-linea-sepolia-inverse {
  background: var(--color-network-linea-sepolia-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-linea-mainnet {
  background: var(--color-network-linea-mainnet-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-linea-mainnet-inverse {
  background: var(--color-network-linea-mainnet-inverse);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-localhost {
  background: var(--color-network-localhost-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-transparent {
  background: var(--transparent);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-flask-purple {
  background: var(--color-flask-default);
  color: var(--color-primary-inverse);
}

.networks-tab__content__icon-with-fallback--color-inherit {
  background: var(--inherit);
  color: var(--color-primary-inverse);
}

.networks-tab__body {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 576px) {
  .networks-tab__body {
    margin-inline-end: 16px;
    margin-bottom: 24px;
  }
}

.networks-tab__subheader {
  display: none;
}

@media screen and (min-width: 576px) {
  .networks-tab__subheader {
    font-size: 1.125rem;
    font-family: var(--font-family-default);
    line-height: 140%;
    font-style: normal;
    font-weight: normal;
    padding: 16px 4px;
    border-bottom: 1px solid var(--color-border-default);
    height: 72px;
    align-items: center;
    display: flex;
    gap: 8px;
    flex-flow: row nowrap;
  }
}

.networks-tab__sub-header-text {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-muted);
}

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

.networks-tab__network-form__footer {
  position: sticky;
  bottom: 0;
  box-shadow: 0 0 8px 0 var(--color-shadow-default);
}

.networks-tab__networks-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
}

@media screen and (min-width: 576px) {
  .networks-tab__networks-list {
    padding: 16px;
    min-width: 160px;
  }

  [dir="ltr"] .networks-tab__networks-list {
    border-right: 1px solid var(--color-border-muted);
  }

  [dir="rtl"] .networks-tab__networks-list {
    border-left: 1px solid var(--color-border-muted);
  }
}

.networks-tab__networks-list__custom-search-network {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

@media screen and (min-width: 576px) {
  .networks-tab__networks-list__custom-search-network {
    font-size: 1rem;
    font-family: var(--font-family-default);
    line-height: 140%;
    font-style: normal;
    font-weight: normal;
  }
}

.networks-tab__networks-list-popup-footer {
  display: flex;
  justify-content: center;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border-default);
  position: fixed;
  bottom: 0;
  width: 100%;
  background: var(--color-background-default);
}

[dir="ltr"] .networks-tab__networks-list-popup-footer {
  left: 0;
}

[dir="rtl"] .networks-tab__networks-list-popup-footer {
  right: 0;
}

@media screen and (min-width: 576px) {
  .networks-tab__networks-list-popup-footer {
    display: none;
  }
}

.networks-tab__add-network-header-button-wrapper {
  justify-content: center;
}

.networks-tab__add-network-header-button-wrapper .button {
  width: 138px;
  padding: 10px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .networks-tab__add-network-header-button-wrapper {
    display: none;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .networks-tab__networks-list--selection {
    display: none;
  }
}

.networks-tab__networks-list-item {
  display: flex;
  gap: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.networks-tab__networks-list-name {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-grow: 1;
}

[dir="ltr"] .networks-tab__networks-list-name {
  margin-left: 8px;
}

[dir="rtl"] .networks-tab__networks-list-name {
  margin-right: 8px;
}

.networks-tab__networks-list-name:hover {
  cursor: pointer;
}

.networks-tab__networks-list-name svg {
  margin-inline-start: 15px;
  padding-top: 3px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .networks-tab__networks-list-name {
    color: var(--color-text-default);
  }
}

.networks-tab__networks-list-name--selected {
  font-weight: bold;
  color: var(--color-text-default);
}

@media screen and (max-width: calc(576px - 1px)) {
  .networks-tab__networks-list-name--selected {
    font-weight: normal;
    color: var(--color-text-default);
  }
}

.networks-tab__networks-list-name--disabled {
  color: var(--color-text-muted);
}

@media screen and (max-width: calc(576px - 1px)) {
  .networks-tab__networks-list-name--disabled {
    color: var(--color-text-default);
  }
}

.settings-tab__error {
  padding-bottom: 20px;
  text-align: center;
  color: var(--color-error-default);
}

.settings-tab__rpc-save-button {
  align-self: flex-end;
  padding: 5px;
  cursor: pointer;
  width: 25%;
}

.settings-tab__button--red {
  border-color: var(--color-error-muted);
  color: var(--color-error-default);
}

.settings-tab__button--red:active {
  background: var(--color-error-muted-pressed);
  border-color: var(--color-error-default);
}

.settings-tab__button--red:hover {
  border-color: var(--color-error-default);
}

.settings-tab__radio-buttons {
  display: flex;
  align-items: center;
}

.settings-tab__radio-button {
  display: flex;
  align-items: center;
}

[dir="ltr"] .settings-tab__radio-button:not(:last-child) {
  margin-right: 16px;
}

[dir="rtl"] .settings-tab__radio-button:not(:last-child) {
  margin-left: 16px;
}

[dir="ltr"] .settings-tab__radio-label {
  padding-left: 4px;
}

[dir="rtl"] .settings-tab__radio-label {
  padding-right: 4px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.address-book-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.address-book {
  flex: 0.4 1 100%;
}

@media screen and (max-width: calc(576px - 1px)) {
  .address-book {
    flex: 1;
    max-width: 100%;
  }

  .address-book__container {
    min-height: 100%;
  }
}

.address-book__header {
  display: flex;
  align-items: center;
}

.address-book__header--edit {
  display: flex;
  justify-content: space-between;
}

.address-book__header--edit .button {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  justify-content: flex-end;
  color: var(--color-error-default);
}

.address-book__container {
  margin: 0 auto;
  min-height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.address-book__icon {
  margin: 0 auto 16px auto;
  display: block;
}

.address-book__title {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.address-book__sub-title {
  font-size: small;
  margin-bottom: 0.5em;
}

.address-book__link {
  background-color: transparent;
  color: var(--color-primary-default);
}

.address-book__input {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  border: 1px solid var(--color-border-muted);
  border-radius: 6px;
  color: var(--color-text-muted);
  padding: 0.875rem 1rem;
  margin-top: 0.25rem;
}

.address-book__input:focus-within {
  border-color: var(--color-primary-default);
}

.address-book__input--address {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.address-book__view-contact__text-area-wrapper {
  height: 96px !important;
}

.address-book__view-contact__text-area {
  line-height: initial !important;
}

.address-book__view-contact__address {
  height: 90px !important;
}

.address-book__view-contact__address textarea {
  padding-top: 10px !important;
}

.address-book__view-contact__group {
  display: flex;
  flex-flow: column nowrap;
  padding: 1.5rem 1.5rem 0 1.5rem;
}

.address-book__view-contact__group__label, .address-book__view-contact__group__label--capitalized {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  margin-top: 0.75rem;
}

.address-book__view-contact__group__label--capitalized {
  text-transform: capitalize;
}

.address-book__view-contact__group__value, .address-book__view-contact__group__static-address {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-flow: row nowrap;
  color: var(--color-text-muted);
  word-break: break-word;
}

.address-book__view-contact__group__value--address, .address-book__view-contact__group__static-address--address {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.address-book__view-contact__group__value--copy-icon, .address-book__view-contact__group__static-address--copy-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
}

[dir="ltr"] .address-book__view-contact__group__value--copy-icon, [dir="ltr"] .address-book__view-contact__group__static-address--copy-icon {
  padding-left: 0;
  margin-left: 10px;
}

[dir="rtl"] .address-book__view-contact__group__value--copy-icon, [dir="rtl"] .address-book__view-contact__group__static-address--copy-icon {
  padding-right: 0;
  margin-right: 10px;
}

.address-book__view-contact__group__static-address {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.address-book__view-contact__group__static-address--copy-icon {
  cursor: pointer;
}

.address-book__view-contact__group__static-address--copy-icon:hover {
  color: var(--color-text-default);
}

.address-book__view-contact__group .unit-input__input {
  max-width: 100%;
  width: 100%;
}

.address-book__view-contact__group__resolution-list, .address-book__view-contact__group__single-resolution-list {
  background: var(--color-background-default);
  box-sizing: border-box;
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
  border-radius: 6px;
  position: absolute;
  width: 309px;
  z-index: 10;
  top: 338px;
  max-height: 96px;
  overflow-y: auto;
}

.address-book__view-contact__group__resolution-list > *, .address-book__view-contact__group__single-resolution-list > * {
  padding: 8px;
}

.address-book__view-contact__group__resolution-list > * {
  padding-bottom: 0;
}

.address-book__view-contact__group__resolution-list .multichain-send-page__recipient__item:last-child {
  padding-bottom: 8px;
}

.address-book__edit-contact {
  display: flex;
  flex-flow: column nowrap;
  padding-bottom: 0 !important;
  height: 100%;
}

.address-book__edit-contact__content {
  flex: 1 1 auto;
}

.address-book__edit-contact__content > div {
  padding-top: 0;
}

.address-book__add-contact {
  display: flex;
  flex-flow: column nowrap !important;
  padding-bottom: 0 !important;
  width: 100%;
  height: 100%;
  padding-top: 0;
}

.address-book__add-contact__content {
  flex: 1 1 auto;
  height: 100%;
  padding-top: 0;
}

.address-book__add-contact__content__username {
  padding-top: 0;
}

.address-book__add-contact__error {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-error-default);
}

[dir="ltr"] .address-book__add-contact__error {
  left: 8px;
}

[dir="rtl"] .address-book__add-contact__error {
  right: 8px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .address-book-add-button__button--hidden {
    display: none;
  }
}

.address-book--hidden {
  display: none;
}

.address-book-contact-content {
  flex: 0.4 1 100%;
}

@media screen and (max-width: calc(576px - 1px)) {
  .address-book-contact-content {
    flex: 1;
  }
}

.settings-page {
  position: relative;
  background: var(--color-background-default);
  display: flex;
  flex-flow: column nowrap;
}

.settings-page__content-padded {
  padding: 16px;
}

.settings-page__error-text {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-error-default);
}

.settings-page__header__title-container {
  display: grid;
  align-items: center;
  grid-template-columns: 197px 1fr 1fr;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__header__title-container {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    gap: 16px;
    grid-template-areas: "back title close" "search search search";
  }

  .settings-page__header__title-container__back-button {
    grid-area: back;
  }

  .settings-page__header__title-container__title {
    grid-area: title;
    text-align: center;
  }

  .settings-page__header__title-container__close-button {
    grid-area: close;
  }

  .settings-page__header__title-container__search {
    grid-area: search;
  }
}

@media screen and (min-width: 576px) {
  [dir="ltr"] .settings-page__header__title-container__title {
    margin-right: 16px;
  }

  [dir="rtl"] .settings-page__header__title-container__title {
    margin-left: 16px;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__header__title-container__title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 250px;
  }
}

.settings-page__header__search {
  width: 330px;
}

.settings-page__header__search__list {
  background: var(--color-background-default);
  box-sizing: border-box;
  box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
  border-radius: 6px;
  position: absolute;
  width: 330px;
  z-index: 10;
}

.settings-page__header__search__list > div:hover {
  background: var(--color-background-default-hover);
}

.settings-page__header__search__list__item {
  transition: 200ms ease-in-out;
  display: grid;
  align-items: center;
  padding: 16px;
  border-top: 1px solid var(--color-border-muted);
  cursor: pointer;
  grid-template-columns: 16px max-content 24px auto;
  gap: 8px;
}

.settings-page__header__search__list__item__icon {
  height: 15px;
  width: 15px;
}

[dir="ltr"] .settings-page__header__search__list__item__icon {
  margin-right: 16px;
}

[dir="rtl"] .settings-page__header__search__list__item__icon {
  margin-left: 16px;
}

.settings-page__header__search__list__item__request, .settings-page__header__search__list__item__tab, .settings-page__header__search__list__item__section, .settings-page__header__search__list__item__no-matching {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-icon-default);
}

.settings-page__header__search__list__item__highlight {
  color: var(--color-warning-inverse);
  background-color: var(--color-warning-default);
}

@media screen and (max-width: calc(576px - 1px)) {
  [dir="ltr"] .settings-page__header__search__list__item__section-multiple-lines {
    margin-left: 10px;
  }

  [dir="rtl"] .settings-page__header__search__list__item__section-multiple-lines {
    margin-right: 10px;
  }
}

[dir="ltr"] [dir=rtl] .settings-page__header__search__list__item__caret {
  transform: rotate(180deg);
}

[dir="rtl"] [dir=rtl] .settings-page__header__search__list__item__caret {
  transform: rotate(-180deg);
}

.settings-page__header__search__list__item__link {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: inline;
  color: var(--color-primary-default);
}

[dir="ltr"] .settings-page__header__search__list__item__link {
  margin-left: 3px;
}

[dir="rtl"] .settings-page__header__search__list__item__link {
  margin-right: 3px;
}

.settings-page__header .app-header__logo-container {
  display: flex;
}

.settings-page__header .app-header__metafox-logo--icon {
  height: 24px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__subheader, .settings-page__subheader--link {
    display: none;
  }
}

.settings-page__subheader--link {
  cursor: pointer;
}

[dir="ltr"] .settings-page__subheader--link {
  margin-right: 4px;
}

[dir="rtl"] .settings-page__subheader--link {
  margin-left: 4px;
}

.settings-page__subheader--link:hover {
  cursor: pointer;
  color: var(--color-primary-default);
}

.settings-page__subheader--break {
  margin-inline-start: 4px;
  white-space: nowrap;
  width: 100%;
  max-width: calc(100% - 125px - 85px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-page__sub-header {
  height: 72px;
  border-bottom: 1px solid var(--color-border-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__sub-header {
    height: 69px;
    position: relative;
    text-align: center;
  }
}

.settings-page__sub-header-text {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__sub-header-text {
    font-size: 1rem;
    font-family: var(--font-family-default);
    line-height: 140%;
    font-style: normal;
    font-weight: normal;
    width: 100%;
  }
}

.settings-page__security-tab-sub-header {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-icon-alternative);
}

.settings-page__security-tab-sub-header__bold {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-default);
}

[dir="ltr"] .settings-page__back-button {
  margin-right: 8px;
}

[dir="rtl"] .settings-page__back-button {
  margin-left: 8px;
}

[dir="ltr"] [dir=rtl] .settings-page__back-button {
  margin: 0 0 0 8px;
  transform: rotate(180deg);
}

[dir="rtl"] [dir=rtl] .settings-page__back-button {
  margin: 0 8px 0 0;
  transform: rotate(-180deg);
}

.settings-page__content {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  overflow: auto;
  scrollbar-color: var(--color-icon-muted) transparent;
}

.settings-page__content__tabs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 100vw;
}

@media screen and (min-width: 576px) {
  .settings-page__content__tabs {
    flex: 0 0 40%;
    max-width: 197px;
  }
}

@media screen and (min-width: 576px) {
  .settings-page__content__tabs .tab-bar__tab {
    max-height: 50px;
  }
}

@media screen and (min-width: 576px) {
  .settings-page__content__tabs .tab-bar__tab__caret {
    display: none;
  }
}

.settings-page__content__modules {
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__content__modules {
    display: none;
  }
}

.settings-page__body {
  padding: 0 16px 16px 16px;
}

.settings-page__content-row {
  padding: 16px 0 0;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__content-row {
    flex-wrap: wrap;
  }
}

.settings-page__content-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__content-item {
    height: initial;
  }
}

.settings-page__content-item--without-height {
  height: initial;
}

.settings-page__content-item--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.settings-page__content-item .dialog {
  margin-top: 10px;
}

.settings-page__content-item__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.settings-page__content-item__identicon {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.settings-page__content-item__identicon__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: unset;
  border: 1px solid transparent;
}

.settings-page__content-item__identicon__item__icon--active {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  border: 2px solid var(--color-primary-default);
  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-page__content-item__description {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  line-height: 22px;
}

[dir="ltr"] .settings-page__content-row-experimental {
  padding: 16px 0 16px 12px;
}

[dir="rtl"] .settings-page__content-row-experimental {
  padding: 16px 12px 16px 0;
}

.settings-page__content-label {
  text-transform: capitalize;
}

.settings-page__content-unordered-list {
  margin-top: 1rem;
  list-style: disc;
}

[dir="ltr"] .settings-page__content-unordered-list {
  padding-left: 2.5rem;
}

[dir="rtl"] .settings-page__content-unordered-list {
  padding-right: 2.5rem;
}

.settings-page__content-description {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
}

.settings-page__content-description a {
  color: var(--color-primary-default);
}

.settings-page__content-item-col {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page__content-item-col {
    max-width: 100%;
  }
}

.settings-page__button {
  cursor: pointer;
}

[dir="ltr"] .settings-page__copy-icon {
  padding-left: 4px;
}

[dir="rtl"] .settings-page__copy-icon {
  padding-right: 4px;
}

.settings-page__button-group {
  display: flex;
}

[dir="ltr"] .settings-page__button-group {
  margin-left: auto;
}

[dir="rtl"] .settings-page__button-group {
  margin-right: auto;
}

.settings-page__address-book-button {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  padding: 0;
}

[dir="ltr"] .settings-page__address-book-button + .settings-page__address-book-button {
  margin-left: 1.875rem;
}

[dir="rtl"] .settings-page__address-book-button + .settings-page__address-book-button {
  margin-right: 1.875rem;
}

.settings-page__inline-link {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: initial;
  padding: 0;
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page--selected .settings-page__content__tabs {
    display: none;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .settings-page--selected .settings-page__content__modules {
    display: block;
  }
}

.settings-page .toggle-button {
  direction: ltr;
}

[dir=rtl] .settings-page .toggle-button {
  justify-content: flex-end;
}

.smart-transaction-status-page {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .smart-transaction-status-page {
    max-width: 640px;
    margin: auto auto 16px auto;
    overflow: hidden;
  }
}

@media screen and (min-width: 768px) {
  .smart-transaction-status-page__description {
    max-width: 480px;
  }
}

.smart-transaction-status-page__footer {
  grid-area: footer;
}

.smart-transaction-status-page__countdown {
  width: 25px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.snaps {
  max-width: 100%;
  width: 100%;
  flex-flow: column nowrap;
}

@media screen and (max-width: calc(576px - 1px)) {
  .snaps {
    height: 100%;
  }
}

@media screen and (min-width: 576px) {
  .snaps {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .snaps {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .snaps {
    width: 62vw;
  }
}

.snaps__content {
  padding: 0;
}

@media screen and (min-width: 768px) {
  .snaps__content__list__wrapper {
    margin-top: 24px;
    margin-left: 24px;
    margin-right: 24px;
  }
}

.snaps__content__list__container--no-snaps_inner {
  max-width: 164px;
  align-self: flex-end;
}

.snaps__content__list__no-snaps_icon {
  font-size: 48px;
}

.snaps__content__list__container--no-snaps_banner-tip {
  max-width: 390px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.snap-view {
  max-width: 100%;
  width: 100%;
  flex-flow: column nowrap;
}

@media screen and (max-width: calc(576px - 1px)) {
  .snap-view {
    height: 100%;
  }
}

@media screen and (min-width: 576px) {
  .snap-view {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .snap-view {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .snap-view {
    width: 62vw;
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .snap-view__content {
    padding-top: 0;
  }
}

.snap-view__content__permissions .permission-cell {
  margin: 0;
}

.snap-view__content .connected-sites-list__content-row {
  border-top: none;
  padding: 0 0 8px 0;
}

.snap-view__content .connected-sites-list__content-row .snap-view__content .connected-sites-list__content-row-link-button {
  padding: 0;
  padding-inline-start: 0;
  color: var(--color-error-default);
  font-size: 14px;
}

.snap-view__content .connected-sites-list__content-row a {
  font-size: 14px;
  color: var(--color-error-default);
}

.snap-view__content .connected-sites-list__content-row a:hover {
  color: var(--color-error-alternative);
}

.snap-view__content .connected-sites-list__subject-info a.btn-link {
  font-size: 14px;
  color: var(--color-error-default);
}

.snap-view__content .connected-sites-list__subject-icon {
  flex-shrink: 0;
}

.snap-view__content .connected-sites-list__subject-name {
  font-size: 14px;
}

.snap-view__content__remove-button .mm-box--color-error-default, .snap-view__content__remove-button:hover .mm-box--color-error-default {
  color: inherit;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.create-snap-account-page {
  max-width: 100%;
}

@media screen and (min-width: 576px) {
  .create-snap-account-page {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .create-snap-account-page {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .create-snap-account-page {
    width: 62vw;
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.unit-input {
  width: 100%;
  border-radius: 0.5rem;
  min-height: 45px;
  margin-top: 8px;
}

.unit-input .unit-input__input {
  width: 100% !important;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.remove-snap-account-page {
  max-width: 100%;
}

@media screen and (min-width: 576px) {
  .remove-snap-account-page {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .remove-snap-account-page {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .remove-snap-account-page {
    width: 62vw;
  }
}

.snap-account-card .multichain-account-list-item {
  pointer-events: none;
}

.snap-account-card-remove .multichain-account-list-item {
  background-color: var(--color-transparent);
  pointer-events: none;
}

.snap-account-card-remove .multichain-account-list-item__selected-indicator {
  background-color: var(--color-error-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.awaiting-swap {
  display: flex;
  flex-flow: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

.awaiting-swap__content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  height: 100%;
  padding-left: 32px;
  padding-right: 32px;
}

.awaiting-swap__mascot {
  margin-bottom: 16px;
  display: flex;
  align-self: center;
  justify-content: center;
}

.awaiting-swap div {
  text-align: center;
  display: flex;
  justify-content: center;
}

.awaiting-swap__status-image {
  margin-top: 12px;
  margin-bottom: 16px;
}

.awaiting-swap__header {
  font-size: 1.5rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
}

.awaiting-swap__main-description {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  margin-top: 16px;
  width: 100%;
}

.awaiting-swap__time-estimate {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  margin-top: 20px;
  font-style: italic;
}

.awaiting-swap__time-estimate > span {
  display: flex;
}

.awaiting-swap__time-estimate--invisible {
  visibility: hidden;
}

.awaiting-swap__time-estimate-text {
  font-weight: bold;
}

[dir="ltr"] .awaiting-swap__time-estimate-text {
  margin-right: 2px;
}

[dir="rtl"] .awaiting-swap__time-estimate-text {
  margin-left: 2px;
}

.awaiting-swap__support-link {
  color: var(--color-primary-default);
  margin-top: 24px;
  cursor: pointer;
}

.awaiting-swap__support-link {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.awaiting-swap__amount-and-symbol {
  color: var(--color-text-default);
  font-weight: bold;
}

.awaiting-signatures {
  display: flex;
  flex-flow: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

.awaiting-signatures__content {
  flex-flow: column;
}

.awaiting-signatures div {
  text-align: center;
  display: flex;
  justify-content: center;
}

.awaiting-signatures__steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 16px auto 12px auto;
}

.awaiting-signatures__steps li {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

[dir="ltr"] .awaiting-signatures__steps li svg {
  margin-right: 4px;
}

[dir="rtl"] .awaiting-signatures__steps li svg {
  margin-left: 4px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
@keyframes shift {
  to {
    background-position: 100% 0;
  }
}

.smart-transaction-status {
  display: flex;
  flex-flow: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

.smart-transaction-status__loading-bar-container {
  height: 3px;
  background: var(--color-background-alternative);
  display: flex;
  margin-top: 12px;
  margin-bottom: 28px;
}

.smart-transaction-status__loading-bar {
  height: 3px;
  background: var(--color-primary-default);
  transition: width 0.5s linear;
}

.smart-transaction-status div {
  text-align: center;
}

.smart-transaction-status__content {
  flex-flow: column;
  width: 100%;
}

.smart-transaction-status__spacer-box--top {
  height: 54px;
}

.smart-transaction-status__spacer-box--bottom {
  height: 62px;
}

.smart-transaction-status a {
  color: var(--color-primary-default);
}

.smart-transaction-status__support-link {
  color: var(--color-primary-default);
  margin-top: 24px;
  cursor: pointer;
}

.smart-transaction-status__cancel-swap-link {
  font-size: 0.75rem;
}

.smart-transaction-status__swaps-footer .btn-secondary {
  color: var(--color-text-alternative);
  border: 1px solid var(--color-border-default);
}

.smart-transaction-status__remaining-time {
  font-variant-numeric: tabular-nums;
}

.smart-transaction-status__icon, .smart-transaction-status__icon-fallback {
  height: 16px;
  width: 16px;
}

.smart-transaction-status__icon-fallback {
  padding-top: 0;
  font-size: 12px;
  line-height: 16px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.prepare-swap-page {
  display: flex;
  flex-flow: column;
  flex: 1;
  width: 100%;
}

.prepare-swap-page__content {
  display: flex;
  height: 100%;
  flex-direction: column;
  margin-left: 16px;
  margin-right: 16px;
}

@media screen and (min-width: 576px) {
  .prepare-swap-page__content {
    margin-left: 24px;
    margin-right: 24px;
  }
}

.prepare-swap-page__swap-from-content {
  padding: 24px 16px 20px 16px;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
  border: 1px solid var(--color-border-muted);
  margin-top: 16px;
  position: relative;
}

[dir="ltr"] .prepare-swap-page__swap-from-content .MuiInputBase-root {
  padding-right: 0;
}

[dir="rtl"] .prepare-swap-page__swap-from-content .MuiInputBase-root {
  padding-left: 0;
}

.prepare-swap-page__swap-to-content {
  padding: 28px 16px 20px 16px;
  border-radius: 0 0 6px 6px;
  box-shadow: none;
  border: 1px solid var(--color-border-muted);
  border-top: 0;
}

.prepare-swap-page__switch-tokens {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 7px;
  background: var(--color-background-default);
  border: 1px solid var(--color-border-muted);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.prepare-swap-page__switch-tokens .mm-icon {
  color: var(--color-icon-alternative);
  transition: all 0.3s ease-in-out;
}

.prepare-swap-page__switch-tokens:hover {
  background: var(--color-background-default-hover);
}

.prepare-swap-page__switch-tokens:hover .mm-icon {
  color: var(--color-icon-default);
}

.prepare-swap-page__switch-tokens:active {
  background: var(--color-background-default-pressed);
}

.prepare-swap-page__switch-tokens:active .mm-icon {
  color: var(--color-icon-default);
}

[dir="ltr"] .prepare-swap-page__switch-tokens--rotate {
  transform: rotate(360deg);
}

[dir="rtl"] .prepare-swap-page__switch-tokens--rotate {
  transform: rotate(-360deg);
}

.prepare-swap-page__switch-tokens--disabled {
  cursor: not-allowed;
}

.prepare-swap-page__max-balance {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

[dir="ltr"] .prepare-swap-page__max-balance {
  padding-left: 4px;
}

[dir="rtl"] .prepare-swap-page__max-balance {
  padding-right: 4px;
}

.prepare-swap-page__balance-message {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  width: 100%;
  color: var(--color-text-alternative);
  margin-top: 4px;
  display: flex;
  flex-flow: row;
  height: 18px;
}

.prepare-swap-page__balance-message--error div:first-of-type {
  font-weight: bold;
  color: var(--color-text-default);
}

.prepare-swap-page__balance-message--error .prepare-swap-page__form-error:first-of-type {
  font-weight: bold;
  color: var(--color-error-default);
}

.prepare-swap-page__balance-message--error div:last-of-type {
  font-weight: normal;
  color: var(--color-text-alternative);
}

.prepare-swap-page__token-etherscan-link {
  color: var(--color-primary-default);
  cursor: pointer;
}

.prepare-swap-page__bold {
  font-weight: bold;
}

.prepare-swap-page__underline {
  text-decoration: underline;
}

.prepare-swap-page__from-token-amount {
  border: 0;
}

[dir="ltr"] .prepare-swap-page__from-token-amount {
  margin-right: -4px;
}

[dir="rtl"] .prepare-swap-page__from-token-amount {
  margin-left: -4px;
}

.prepare-swap-page__from-token-amount input {
  font-weight: var(--typography-s-heading-lg-font-weight);
  font-size: var(--typography-s-heading-lg-font-size);
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir="ltr"] .prepare-swap-page__from-token-amount input {
  padding-right: 4px;
  text-align: right;
}

[dir="rtl"] .prepare-swap-page__from-token-amount input {
  padding-left: 4px;
  text-align: left;
}

.prepare-swap-page__from-token-amount--lg input {
  font-weight: var(--typography-s-heading-lg-font-weight);
  font-size: var(--typography-s-heading-lg-font-size);
}

.prepare-swap-page__from-token-amount--md input {
  font-weight: var(--typography-s-heading-md-font-weight);
  font-size: var(--typography-s-heading-md-font-size);
}

.prepare-swap-page__from-token-amount--sm input {
  font-weight: var(--typography-s-heading-sm-font-weight);
  font-size: var(--typography-s-heading-sm-font-size);
}

.prepare-swap-page__receive-amount-container {
  overflow: hidden;
}

.prepare-swap-page__receive-amount {
  font-weight: var(--typography-s-heading-lg-font-weight);
  font-size: var(--typography-s-heading-lg-font-size);
  overflow: hidden;
  text-overflow: ellipsis;
}

.prepare-swap-page__receive-amount--lg {
  font-weight: var(--typography-s-heading-lg-font-weight);
  font-size: var(--typography-s-heading-lg-font-size);
}

.prepare-swap-page__receive-amount--md {
  font-weight: var(--typography-s-heading-md-font-weight);
  font-size: var(--typography-s-heading-md-font-size);
}

.prepare-swap-page__receive-amount--sm {
  font-weight: var(--typography-s-heading-sm-font-weight);
  font-size: var(--typography-s-heading-sm-font-size);
}

.prepare-swap-page footer .btn-primary {
  width: 100%;
}

.review-quote {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.review-quote__overview {
  width: 100%;
}

.review-quote::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url("/images/transaction-background-top.svg") url("/images/transaction-background-bottom.svg");
}

.review-quote__content {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
  flex: 1;
}

@media screen and (max-width: calc(576px - 1px)) {
  .review-quote__content {
    overflow-y: auto;
    max-height: 420px;
  }
}

.review-quote__bold {
  font-weight: bold;
}

.review-quote__countdown-timer-container {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.review-quote__thin-swaps-footer {
  max-height: 82px;
}

@media screen and (min-width: 576px) {
  .review-quote__thin-swaps-footer {
    height: 72px;
  }
}

.review-quote__footer footer {
  padding: 16px 0;
}

.review-quote__footer footer .btn-primary {
  width: 100%;
}

.review-quote__edit-limit {
  white-space: nowrap;
}

.review-quote__exchange-rate-display {
  width: auto !important;
}

@keyframes slide-in {
  100% {
    transform: translateY(0%);
  }
}

.notification-page {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.notification-page__content {
  flex: 1;
}

.notification-page__warning-icon {
  font-size: 54px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.countdown-timer {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 576px) {
  .countdown-timer {
    margin: 0;
  }
}

.countdown-timer__timer-container {
  display: flex;
  color: var(--color-text-alternative);
}

[dir="ltr"] .countdown-timer__timer-container {
  padding-right: 3px;
}

[dir="rtl"] .countdown-timer__timer-container {
  padding-left: 3px;
}

.countdown-timer__timer-container > span {
  display: flex;
}

[dir="ltr"] .countdown-timer__timer-container > span {
  padding-left: 4px;
}

[dir="rtl"] .countdown-timer__timer-container > span {
  padding-right: 4px;
}

.countdown-timer__timer-container--warning .countdown-timer__time {
  color: var(--color-error-default);
}

.countdown-timer__time {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
  width: 24px;
}

[dir="ltr"] .countdown-timer__time {
  margin-left: 4px;
  margin-right: 2px;
}

[dir="rtl"] .countdown-timer__time {
  margin-right: 4px;
  margin-left: 2px;
}

.countdown-timer div {
  display: flex;
  align-items: center;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.exchange-rate-display {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--color-text-default);
  width: 100%;
  flex-wrap: wrap;
}

.exchange-rate-display__bold {
  font-weight: bold;
}

.exchange-rate-display__quote-rate {
  cursor: pointer;
}

.exchange-rate-display__quote-rate--no-link {
  cursor: text;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.fee-card {
  width: 100%;
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.fee-card .transaction-detail-rows {
  margin-top: 8px;
}

.fee-card .transaction-detail-rows .transaction-detail-item:last-of-type {
  margin-bottom: 8px;
}

.fee-card__savings-and-quotes-header {
  display: flex;
  position: relative;
  align-items: center;
}

.fee-card__savings-text {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
  color: var(--color-primary-default);
}

.fee-card__quote-link-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.fee-card__quote-link-text {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  cursor: pointer;
}

[dir="ltr"] .fee-card__quote-link-text {
  padding-right: 4px;
}

[dir="rtl"] .fee-card__quote-link-text {
  padding-left: 4px;
}

.fee-card__caret-right {
  color: var(--color-primary-default);
  width: 6px;
  height: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="ltr"] .fee-card__caret-right {
  margin-left: 6px;
}

[dir="rtl"] .fee-card__caret-right {
  margin-right: 6px;
}

[dir="ltr"] .fee-card__caret-right i {
  transform: rotate(90deg);
}

[dir="rtl"] .fee-card__caret-right i {
  transform: rotate(-90deg);
}

.fee-card__main .transaction-detail {
  border-top: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
  margin-bottom: 12px;
}

.fee-card__row-header {
  display: flex;
  align-items: center;
  margin-top: 8px;
  justify-content: space-between;
}

.fee-card__row-header:first-of-type {
  margin-top: 0;
}

.fee-card__row-header div {
  display: flex;
  align-items: center;
}

[dir="ltr"] .fee-card__row-header-text, [dir="ltr"] .fee-card__row-header-text--bold {
  margin-right: 4px;
}

[dir="rtl"] .fee-card__row-header-text, [dir="rtl"] .fee-card__row-header-text--bold {
  margin-left: 4px;
}

.fee-card__row-header-text--bold {
  color: var(--color-text-default);
}

.fee-card__row-header-text {
  display: block;
  white-space: nowrap;
}

.fee-card__row-header-text .info-tooltip {
  padding-bottom: 2px;
}

[dir="ltr"] .fee-card__row-header-text .info-tooltip {
  padding-left: 4px;
}

[dir="rtl"] .fee-card__row-header-text .info-tooltip {
  padding-right: 4px;
}

.fee-card__row, .fee-card__top-bordered-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.fee-card__top-bordered-row {
  border-top: 1px solid var(--color-border-muted);
  padding-top: 12px;
}

.fee-card__row-label {
  display: flex;
  align-items: flex-start;
}

.fee-card__row-label img {
  height: 10px;
  width: 10px;
  cursor: pointer;
}

.fee-card__info-tooltip-container {
  height: 10px;
  width: 10px;
  justify-content: center;
}

.fee-card__info-tooltip-container div {
  display: flex !important;
  height: 10px;
}

.fee-card__info-tooltip-paragraph {
  margin-bottom: 8px;
}

.fee-card__info-tooltip-paragraph:last-of-type {
  margin-bottom: 0;
}

[dir="ltr"] .fee-card__row-fee {
  margin-right: 4px;
}

[dir="rtl"] .fee-card__row-fee {
  margin-left: 4px;
}

.fee-card__link, .fee-card__link:hover {
  color: var(--color-primary-default);
  cursor: pointer;
}

.fee-card__edit-link {
  color: var(--color-primary-default);
  cursor: pointer;
}

[dir="ltr"] .fee-card__edit-link {
  padding-left: 6px;
}

[dir="rtl"] .fee-card__edit-link {
  padding-right: 6px;
}

.fee-card__total-box {
  border-top: 1px solid var(--color-border-muted);
  padding: 12px 16px 16px 16px;
}

.fee-card__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.fee-card__total-secondary {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-weight: bold;
  color: var(--color-text-alternative);
  margin-top: 4px;
}

.fee-card__row-header-secondary, .fee-card__row-header-secondary--bold {
  color: var(--color-text-alternative);
}

[dir="ltr"] .fee-card__row-header-secondary, [dir="ltr"] .fee-card__row-header-secondary--bold {
  margin-right: 12px;
}

[dir="rtl"] .fee-card__row-header-secondary, [dir="rtl"] .fee-card__row-header-secondary--bold {
  margin-left: 12px;
}

.fee-card__row-header-primary {
  color: var(--color-text-alternative);
}

.fee-card__row-header-primary--bold {
  color: var(--color-text-default);
}

.fee-card__row-header-text--bold, .fee-card__row-header-secondary--bold, .fee-card__row-header-primary--bold {
  font-weight: bold;
}

.fee-card__bold {
  font-weight: bold;
}

.info-tooltip > div {
  display: flex;
  align-items: center;
}

[dir="ltr"] .info-tooltip > div {
  margin-right: 4px;
}

[dir="rtl"] .info-tooltip > div {
  margin-left: 4px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.loading-swaps-quotes {
  display: flex;
  flex-flow: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

.loading-swaps-quotes__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 445px;
}

.loading-swaps-quotes__background-1, .loading-swaps-quotes__background-2 {
  width: 265.18px;
  height: 221.02px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  animation: spin 38s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.loading-swaps-quotes__background-2 {
  width: 182.8px;
  height: 195.39px;
  animation: spin 42s linear infinite;
}

.loading-swaps-quotes__mascot-container {
  position: absolute;
}

.loading-swaps-quotes__animation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 60%;
  width: 316px;
}

.loading-swaps-quotes__loading-bar-container {
  width: 248px;
  height: 3px;
  background: var(--color-background-alternative);
  display: flex;
  margin-top: 16px;
}

.loading-swaps-quotes__loading-bar {
  height: 3px;
  background: var(--color-primary-default);
  transition: width 0.5s linear;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.searchable-item-list {
  background: var(--color-background-default);
  width: 100%;
  position: relative;
}

.searchable-item-list__search > div {
  border: none;
  border-bottom: 1px solid var(--color-border-muted);
  border-radius: 0;
  height: 55px;
  font-size: 12px;
}

.searchable-item-list__search > div input {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  line-height: 100%;
}

.searchable-item-list__search > div input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.searchable-item-list__list-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.searchable-item-list__item {
  transition: 200ms ease-in-out;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 8px 12px;
  box-sizing: border-box;
  cursor: pointer;
  border-top: 1px solid var(--color-border-muted);
  position: relative;
  min-height: 50px;
}

.searchable-item-list__item:first-of-type {
  border-top: none;
}

.searchable-item-list__item:last-of-type {
  border-bottom: none;
}

.searchable-item-list__item:hover, .searchable-item-list__item:focus {
  background: var(--color-background-default-hover);
}

.searchable-item-list__item--selected {
  border: 1px solid var(--color-primary-default) !important;
}

.searchable-item-list__item--disabled {
  opacity: 0.4;
  cursor: auto;
}

.searchable-item-list__item--add-token {
  min-height: auto;
  opacity: 1;
  pointer-events: none;
}

.searchable-item-list__item--add-token:hover {
  background: none;
}

.searchable-item-list__item--add-token .actionable-message {
  margin: 0;
}

.searchable-item-list__item--add-token .actionable-message__message {
  color: var(--color-text-default);
}

[dir="ltr"] .searchable-item-list__item--add-token .actionable-message__message {
  text-align: left;
}

[dir="rtl"] .searchable-item-list__item--add-token .actionable-message__message {
  text-align: right;
}

.searchable-item-list__item--add-token .actionable-message a {
  pointer-events: auto;
  color: var(--color-primary-default);
  cursor: pointer;
}

.searchable-item-list__item .btn-primary {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  width: auto;
  padding: 7px 11px;
}

.searchable-item-list__item > img {
  margin-top: -2px;
}

.searchable-item-list__primary-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  line-height: 100%;
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 3px;
}

.searchable-item-list__item-name {
  direction: ltr;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-item-list__labels {
  display: flex;
  justify-content: space-between;
  flex: 1;
  -moz-animation: fadein 1s;
  -webkit-animation: fadein 1s;
  -o-animation: fadein 1s;
}

.searchable-item-list__item-labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[dir="ltr"] .searchable-item-list__item-labels {
  margin-left: 12px;
}

[dir="rtl"] .searchable-item-list__item-labels {
  margin-right: 12px;
}

.searchable-item-list__right-labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  max-width: 100%;
  flex: 1 1 auto;
}

.searchable-item-list__secondary-label, .searchable-item-list__right-primary-label {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  line-height: 100%;
  color: var(--color-text-alternative);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 4px;
}

.searchable-item-list__right-primary-label {
  margin-top: 3px;
}

.searchable-item-list__right-secondary-label {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  line-height: 100%;
  color: var(--color-text-alternative);
  opacity: 0.5;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.searchable-item-list__list-container {
  z-index: 1002;
  background: var(--color-background-default);
}

.searchable-item-list__search {
  z-index: 1001;
}

.searchable-item-list__item--highlighted {
  background: var(--color-background-alternative);
}

.searchable-item-list__identicon {
  margin-top: -2px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.quote-details {
  display: flex;
  flex-flow: column;
  padding-left: 16px;
  padding-right: 16px;
}

.quote-details__detail-header {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-alternative);
  margin-bottom: 2px;
  display: flex;
}

.quote-details__detail-content {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
}

.quote-details__detail-content > div {
  justify-content: flex-start;
}

.quote-details__conversion-rate {
  color: var(--color-text-default);
  justify-content: flex-start;
  align-items: center;
  height: inherit;
}

.quote-details__conversion-rate i {
  color: var(--color-primary-default);
}

[dir="ltr"] .quote-details__conversion-rate * {
  margin-right: 4px;
}

[dir="rtl"] .quote-details__conversion-rate * {
  margin-left: 4px;
}

[dir="ltr"] .quote-details__popover-wrap .popover-content {
  margin-left: 24px;
}

[dir="rtl"] .quote-details__popover-wrap .popover-content {
  margin-right: 24px;
}

.quote-details__light-grey {
  color: var(--color-text-muted);
}

.quote-details__row {
  height: 60px;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  border-top: 1px solid var(--color-background-alternative);
}

.quote-details__row--high {
  min-height: 60px;
  height: inherit;
}

.quote-details__metafox-logo {
  width: 17px;
}

[dir="ltr"] .quote-details__metafox-logo {
  margin-right: 4px;
}

[dir="rtl"] .quote-details__metafox-logo {
  margin-left: 4px;
}

[dir="ltr"] .quote-details .info-tooltip {
  margin-left: 2px;
}

[dir="rtl"] .quote-details .info-tooltip {
  margin-right: 2px;
}

.quote-details--high {
  min-height: 60px;
  height: inherit;
}

.quote-details__font-small {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
}

.quote-details__bold {
  font-weight: bold;
}

.select-quote-popover__button {
  height: 39px;
  width: 140px;
}

.select-quote-popover__popover-wrap {
  height: 100%;
}

@media screen and (min-width: 576px) {
  .select-quote-popover__popover-wrap {
    height: 620px;
    width: 348px;
  }
}

.select-quote-popover__popover-wrap .popover-content {
  height: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

.select-quote-popover__popover-wrap .swaps__footer {
  padding: 16px 24px;
}

.select-quote-popover__popover-bg {
  height: 100%;
  width: 100%;
  background: var(--color-background-alternative);
  opacity: 1;
}

@media screen and (min-width: 576px) {
  .select-quote-popover__popover-bg {
    opacity: 0.5;
  }
}

.select-quote-popover__sort-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-quote-popover__column-headers, .select-quote-popover__row {
  display: flex;
  align-items: center;
  width: 100%;
}

[dir="ltr"] .select-quote-popover__column-headers, [dir="ltr"] .select-quote-popover__row {
  padding-left: 20px;
}

[dir="rtl"] .select-quote-popover__column-headers, [dir="rtl"] .select-quote-popover__row {
  padding-right: 20px;
}

[dir="ltr"] .select-quote-popover__column-headers > * + *, [dir="ltr"] .select-quote-popover__row > * + * {
  margin-left: 8px;
}

[dir="rtl"] .select-quote-popover__column-headers > * + *, [dir="rtl"] .select-quote-popover__row > * + * {
  margin-right: 8px;
}

.select-quote-popover__column-headers {
  font-size: 0.625rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
  color: var(--color-text-default);
  height: 43px;
  margin-bottom: 4px;
}

.select-quote-popover__column-header {
  cursor: pointer;
  font-size: 12px;
}

.select-quote-popover__row {
  font-size: 0.875rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  cursor: pointer;
  color: var(--color-text-default);
  height: 49px;
  border: 1px solid transparent;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--color-background-alternative);
}

[dir="ltr"] .select-quote-popover__row {
  padding-right: 12px;
}

[dir="rtl"] .select-quote-popover__row {
  padding-left: 12px;
}

.select-quote-popover__row:hover {
  border: 1px solid var(--color-primary-default);
}

[dir="ltr"] .select-quote-popover__row:hover {
  padding-right: 11px;
  padding-left: 19.5px;
}

[dir="rtl"] .select-quote-popover__row:hover {
  padding-left: 11px;
  padding-right: 19.5px;
}

.select-quote-popover__row--no-hover:hover {
  border: 1px solid var(--color-background-alternative);
  width: 100%;
}

[dir="ltr"] .select-quote-popover__row--no-hover:hover {
  padding-right: 12px;
  padding-left: 20px;
}

[dir="rtl"] .select-quote-popover__row--no-hover:hover {
  padding-left: 12px;
  padding-right: 20px;
}

.select-quote-popover__row--selected {
  color: var(--color-primary-inverse);
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
  border-radius: 8px;
  height: 64px;
}

[dir="ltr"] .select-quote-popover__row--selected {
  background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
}

[dir="rtl"] .select-quote-popover__row--selected {
  background: linear-gradient(-90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
}

.select-quote-popover__row--selected:hover {
  width: 100%;
}

[dir="ltr"] .select-quote-popover__row--selected:hover {
  background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
  padding-left: 20px;
  padding-right: 12px;
}

[dir="rtl"] .select-quote-popover__row--selected:hover {
  background: linear-gradient(-90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
  padding-right: 20px;
  padding-left: 12px;
}

.select-quote-popover__row--selected .select-quote-popover__caret-right {
  color: var(--color-primary-inverse);
}

.select-quote-popover__row--selected .select-quote-popover__caret-right:hover {
  color: var(--color-icon-alternative);
}

.select-quote-popover__row--selected .select-quote-popover__zero-slippage {
  color: var(--color-primary-inverse);
}

.select-quote-popover__receiving {
  display: flex;
  flex-direction: column;
  width: 88px;
}

.select-quote-popover__network-fees {
  width: 99px;
}

.select-quote-popover__quote-source {
  width: 28px;
  display: flex;
  align-items: flex-end;
}

[dir="ltr"] .select-quote-popover__quote-source {
  margin-right: 3px;
}

[dir="rtl"] .select-quote-popover__quote-source {
  margin-left: 3px;
}

.select-quote-popover__caret-right {
  color: var(--color-text-alternative);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="ltr"] .select-quote-popover__caret-right i {
  transform: rotate(90deg);
}

[dir="rtl"] .select-quote-popover__caret-right i {
  transform: rotate(-90deg);
}

.select-quote-popover__caret-right:hover {
  border-radius: 8px;
  background: var(--color-primary-inverse);
  border: 1px solid var(--color-primary-default);
}

.select-quote-popover__receiving-value {
  display: flex;
  align-items: center;
}

[dir="ltr"] .select-quote-popover__receiving-value svg {
  margin-right: 2px;
}

[dir="rtl"] .select-quote-popover__receiving-value svg {
  margin-left: 2px;
}

.select-quote-popover__receiving-value-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-quote-popover__zero-slippage {
  font-size: 12px;
  line-height: 100%;
  color: var(--color-text-muted);
  font-weight: normal;
}

.select-quote-popover__quote-source-toggle {
  height: 12px;
}

[dir="ltr"] .select-quote-popover__quote-source-toggle {
  margin-left: 2px;
}

[dir="rtl"] .select-quote-popover__quote-source-toggle {
  margin-right: 2px;
}

.select-quote-popover__network-fees-header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.select-quote-popover__network-fees-header > span {
  width: 77px;
}

.select-quote-popover__network-fees-header > div {
  height: 12px;
}

.select-quote-popover__network-fees-header > svg {
  margin-bottom: 2px;
}

.select-quote-popover__receiving-symbol {
  color: var(--color-text-alternative);
}

.select-quote-popover__receiving-symbol > div {
  width: 12px;
  height: 12px;
}

.select-quote-popover__receiving-label {
  display: flex;
  align-items: center;
}

.select-quote-popover__receiving-label img {
  height: 10px;
  width: 10px;
  margin-top: 2px;
}

[dir="ltr"] .select-quote-popover__receiving-label > div {
  margin-left: 3px;
}

[dir="rtl"] .select-quote-popover__receiving-label > div {
  margin-right: 3px;
}

.select-quote-popover__quote-source-label {
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-primary-inverse);
  border-radius: 5px;
  padding: 4px;
  font-size: 10px;
  font-weight: bold;
  padding-bottom: 2px;
}

.select-quote-popover__quote-source-label--blue {
  background: var(--color-primary-default);
}

.select-quote-popover__quote-source-label--orange {
  background: var(--color-warning-default);
}

.select-quote-popover__quote-source-label--green {
  background: var(--color-success-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.swaps-footer {
  width: 100%;
  z-index: 50;
  position: sticky;
  bottom: 0;
  background-color: var(--color-background-default);
}

.swaps-footer--warning .btn-primary {
  background: var(--color-error-default);
  border-color: var(--color-error-default);
}

@media screen and (max-width: calc(576px - 1px)) {
  .swaps-footer--border .swaps-footer__custom-page-container-footer-class {
    border-top: 1px solid var(--color-border-muted);
  }
}

.swaps-footer__custom-page-container-footer-class {
  border-top: none;
}

@media screen and (min-width: 576px) {
  .swaps-footer__custom-page-container-footer-class {
    height: 96px;
  }
}

.swaps-footer__custom-page-container-footer-button-class {
  height: 39px;
  width: 140px;
}

.swaps-footer__custom-page-container-footer-button-class--single {
  width: 307px;
}

.swaps-footer__bottom-text {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  margin-bottom: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 576px) {
  .swaps-footer__bottom-text {
    margin-top: 0;
  }
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.create-new-swap button {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  background-color: transparent;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.view-on-block-explorer button {
  font-size: 0.75rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-default);
  background-color: transparent;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
@media screen and (max-width: calc(576px - 1px)) {
  .transaction-settings__content {
    height: 100%;
  }
}

.transaction-settings__button-group {
  display: flex;
  flex-direction: row;
}

.transaction-settings__button-group .transaction-settings__button-group-custom-button {
  cursor: text;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 72px;
}

.transaction-settings__custom-input {
  display: flex;
  justify-content: center;
}

.transaction-settings__custom-input input {
  border: none;
  width: 64px;
  text-align: center;
  background: var(--color-primary-default);
  color: var(--color-primary-inverse);
  font-weight: inherit;
  outline: none;
}

.transaction-settings__custom-input input::placeholder { /* Most modern browsers support this now. */
  color: var(--color-primary-inverse);
}

.transaction-settings__custom-input input::-webkit-outer-spin-button,
.transaction-settings__custom-input input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.transaction-settings__custom-input input[type=number] {
  -moz-appearance: textfield;
}

.transaction-settings__custom-input--danger input {
  background: var(--color-error-default);
}

.transaction-settings__percentage-suffix {
  position: absolute;
}

[dir="ltr"] .transaction-settings__percentage-suffix {
  right: 5px;
}

[dir="rtl"] .transaction-settings__percentage-suffix {
  left: 5px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.list-with-search .searchable-item-list__list-container {
  max-height: 320px;
  overflow-y: auto;
}

[dir="ltr"] .list-with-search .searchable-item-list__list-container {
  padding-right: 8px;
}

[dir="rtl"] .list-with-search .searchable-item-list__list-container {
  padding-left: 8px;
}

@media screen and (min-width: 576px) {
  .list-with-search .searchable-item-list__list-container {
    max-height: 600px;
  }
}

.list-with-search__text-search {
  outline: none;
}

.list-with-search .mm-button-icon .mm-icon--size-lg {
  --size: 20px;
}

.mascot-background-animation {
  display: flex;
  flex-flow: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

.mascot-background-animation__background-1, .mascot-background-animation__background-2 {
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  animation: spin 38s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.mascot-background-animation__background-2 {
  width: 120px;
  height: 128px;
  animation: spin 42s linear infinite;
}

.mascot-background-animation__mascot-container {
  position: relative;
}

.mascot-background-animation__animation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.selected-token .selected-token-list {
  background-color: var(--color-background-alternative);
  border-radius: 100px;
}

.selected-token .selected-token-list__close-area {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
}

[dir="ltr"] .selected-token .selected-token-list__close-area {
  left: 0;
}

[dir="rtl"] .selected-token .selected-token-list__close-area {
  right: 0;
}

.selected-token .selected-token-list__select-default {
  color: var(--color-text-default);
}

.selected-token .selected-token-list__labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex: auto;
  max-width: 110px;
}

.selected-token .selected-token-list__labels--with-icon {
  max-width: 95px;
}

.selected-token .selected-token-list__closed-primary-label {
  font-size: 1.125rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-default);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.selected-token .selected-token-list__selector-closed-container {
  display: flex;
  position: relative;
  align-items: center;
  transition: 200ms ease-in-out;
  box-shadow: none;
  border: 0;
  border-radius: 100px;
  height: 32px;
  max-height: 32px;
  max-width: 165px;
  width: auto;
}

.selected-token .selected-token-list__selector-closed-container:hover {
  background: var(--color-background-default-hover);
}

.selected-token .selected-token-list__selector-closed-icon {
  width: 24px;
  height: 24px;
}

[dir="ltr"] .selected-token .selected-token-list__selector-closed-icon {
  margin-right: 8px;
}

[dir="rtl"] .selected-token .selected-token-list__selector-closed-icon {
  margin-left: 8px;
}

.selected-token .selected-token-list__selector-closed {
  display: flex;
  flex-flow: row nowrap;
  padding: 16px 12px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  align-items: center;
  flex: 1;
  height: 32px;
  max-width: 140px;
}

.selected-token .selected-token-list__selector-closed i {
  font-size: 1.2em;
}

.selected-token .selected-token-list__selector-closed div {
  display: flex;
}

.selected-token .selected-token-list__selector-closed__item-labels {
  width: 100%;
}

[dir="ltr"] .selected-token .selected-token-list__selector-closed__item-labels {
  margin-left: 0;
}

[dir="rtl"] .selected-token .selected-token-list__selector-closed__item-labels {
  margin-right: 0;
}

.selected-token .selected-token-list__item-labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[dir="ltr"] .selected-token .selected-token-list__item-labels {
  margin-left: 8px;
}

[dir="rtl"] .selected-token .selected-token-list__item-labels {
  margin-right: 8px;
}

.selected-token .selected-token-input-pair {
  height: 32px;
  width: auto;
}

.selected-token .selected-token-input-pair__selector--closed {
  height: 60px;
}

[dir="ltr"] .selected-token .selected-token-input-pair__selector--closed {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}

[dir="rtl"] .selected-token .selected-token-input-pair__selector--closed {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

.selected-token .selected-token-input-pair .searchable-item-list__item--add-token {
  display: none;
}

.selected-token .selected-token-input-pair__to {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-token .selected-token-input-pair__to .searchable-item-list__item--add-token {
  display: flex;
}

.selected-token .selected-token-input-pair__input div {
  border: 0;
}

.selected-token .selected-token-input-pair__two-line-input input {
  padding-bottom: 0;
}

.swaps {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 16px;
}

@media screen and (min-width: 576px) {
  .swaps {
    z-index: 12;
  }
}

.swaps__error-message {
  margin-left: 24px;
  margin-right: 24px;
}

@media screen and (min-width: 576px) {
  .swaps__error-message {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.swaps__container {
  display: flex;
  flex-flow: column;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

@media screen and (min-width: 576px) {
  .swaps__container {
    width: 460px;
    background: var(--color-background-default);
    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
    border: 1px solid var(--color-border-muted);
    border-radius: 8px;
    height: 620px;
  }
}

.swaps__content {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: calc(576px - 1px)) {
  .swaps__content--overflow {
    overflow: scroll;
  }
}

@media screen and (min-width: 576px) {
  .swaps__content {
    width: 100%;
  }
}

.swaps__title {
  font-size: 1rem;
  font-family: var(--font-family-default);
  line-height: 140%;
  font-style: normal;
  font-weight: normal;
  font-weight: bold;
  color: var(--color-text-default);
  margin-top: -5px;
  flex: 1;
  text-align: center;
}

.swaps__header {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--color-background-alternative);
  width: 100%;
  flex-direction: row;
  position: sticky;
  top: 0;
  z-index: 1;
}

@media screen and (min-width: 576px) {
  .swaps__header {
    padding-top: 12px;
    padding-bottom: 12px;
    height: 66px;
  }
}

.actionable-message__message .swaps__notification-close-button {
  background-color: transparent;
  position: absolute;
  top: 2px;
}

[dir="ltr"] .actionable-message__message .swaps__notification-close-button {
  right: 0;
}

[dir="rtl"] .actionable-message__message .swaps__notification-close-button {
  left: 0;
}

.actionable-message__message .swaps__notification-close-button::after {
  position: absolute;
  content: "×";
  font-size: 29px;
  font-weight: 200;
  color: var(--color-text-default);
  background-color: transparent;
  top: 0;
  cursor: pointer;
}

[dir="ltr"] .actionable-message__message .swaps__notification-close-button::after {
  right: 12px;
}

[dir="rtl"] .actionable-message__message .swaps__notification-close-button::after {
  left: 12px;
}

.swaps__notification-title {
  font-weight: bold;
}

[dir="ltr"] .swaps__notification-title {
  margin-right: 14px;
}

[dir="rtl"] .swaps__notification-title {
  margin-left: 14px;
}

.mm-modal__custom-scrollbar ::-webkit-scrollbar {
  width: 6px;
}

.mm-modal__custom-scrollbar ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--color-icon-muted);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.prepare-bridge-page {
  flex: 1;
}

.prepare-bridge-page .mm-text-field {
  background-color: inherit;
}

.prepare-bridge-page .mm-text-field--focused {
  outline: none;
}

.prepare-bridge-page .defined > .mm-input--disabled,
.prepare-bridge-page .defined p {
  opacity: 1;
}

.prepare-bridge-page .mm-select-button__content {
  max-height: 100%;
  overflow: hidden;
}

.prepare-bridge-page .amount-input {
  border: none;
  padding: 0;
  width: 100%;
  gap: 4px;
  height: -moz-fit-content;
  height: fit-content;
}

.prepare-bridge-page__switch-tokens button:hover:enabled {
  background: var(--color-background-default-hover);
}

.prepare-bridge-page__switch-tokens button:hover:enabled .mm-icon {
  color: var(--color-icon-default);
}

.prepare-bridge-page__switch-tokens button:active {
  background: var(--color-background-default-pressed);
}

.prepare-bridge-page__switch-tokens button:active .mm-icon {
  color: var(--color-icon-default);
}

[dir="ltr"] .prepare-bridge-page__switch-tokens button .rotate {
  transform: rotate(360deg);
}

[dir="rtl"] .prepare-bridge-page__switch-tokens button .rotate {
  transform: rotate(-360deg);
}

.prepare-bridge-page__switch-tokens .mm-icon {
  transition: all 0.3s ease-in-out;
}

.prepare-bridge-page .mascot-background-animation__animation {
  margin-top: 24px;
  margin-bottom: 16px;
}

.prepare-bridge-page .highlight {
  padding: 16px;
  background: var(--color-background-default);
  border: none;
  border-radius: 8px;
}

.prepare-bridge-page .highlight .row-with-warning {
  max-width: calc(100% + 32px);
  width: calc(100% + 32px);
}

[dir="ltr"] .prepare-bridge-page .highlight .row-with-warning {
  padding-left: 16px;
  padding-right: 12px;
  margin-left: -16px;
}

[dir="rtl"] .prepare-bridge-page .highlight .row-with-warning {
  padding-right: 16px;
  padding-left: 12px;
  margin-right: -16px;
}

.prepare-bridge-page .highlight [data-theme=light],
.prepare-bridge-page .highlight .light {
  box-shadow: 0 0 2px 0 #e2e4e9, 0 0 16px 0 rgba(226, 228, 233, 0.16);
}

.prepare-bridge-page .highlight [data-theme=dark],
.prepare-bridge-page .highlight .dark {
  box-shadow: 0 0 2px 0 #18191b, 0 0 16px 0 #18191b;
}

.bridge-settings-modal .mm-button-secondary:hover {
  background-color: var(--color-background-default-hover);
}

.bridge-settings-modal .mm-text-field {
  height: 32px;
  width: 94px;
}

.bridge-settings-modal .mm-text-field--focused, .bridge-settings-modal .mm-text-field:focus-visible {
  outline: none;
}

.bridge-settings-modal .mm-text-field input {
  font-size: var(--font-size-2);
  padding-top: 1px;
  width: 100%;
  height: 32px;
}

[data-theme=light],
.light {
  --shadow-bridge-picker: 0 0 2px 0 var(--color-border-muted), 0 0 16px 0 rgba(226, 228, 233, 0.16);
}

[data-theme=dark],
.dark {
  --shadow-bridge-picker: 0 0 2px 0 var(--color-border-muted), 0 0 16px 0 rgba(226, 228, 233, 0.16);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.quotes-modal .mm-modal-content__dialog {
  display: flex;
  height: 100%;
}

.bridge-transaction-details__content {
  overflow-y: hidden;
}

.bridge-transaction-details__icon-loading {
  animation: loading-dot 1.2s linear infinite;
}

.bridge-transaction-details__segment {
  height: 4px;
  width: 0;
  transition: width 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.bridge-transaction-details__segment--pending {
  width: 50%;
}

.bridge-transaction-details__segment--complete {
  width: 100%;
}

.bridge-transaction-details__step-grid {
  display: grid;
  grid-template-columns: 1rem 6fr;
  column-gap: 1rem;
  justify-items: center;
  align-items: center;
}

.bridge-transaction-details__step-grid--desc {
  justify-self: start;
}

@keyframes loading-dot {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  45% {
    transform: scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: scale(1);
    opacity: 1;
  }
}

.awaiting-bridge-signatures {
  display: flex;
  flex-flow: column;
  align-items: center;
  flex: 1;
  width: 100%;
  margin-top: 40%;
}

.awaiting-bridge-signatures__content {
  flex-flow: column;
}

.awaiting-bridge-signatures div {
  text-align: center;
  display: flex;
  justify-content: center;
}

.awaiting-bridge-signatures__steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 16px auto 12px auto;
}

.awaiting-bridge-signatures__steps li {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.mm-avatar-base--size-xxs {
  --size: 12px;
}

[data-theme=light],
.light {
  --color-background-alternative-soft: #f9fafb;
  --color-text-alternative-soft: #6a737d;
  --color-icon-alternative-soft: #6a737d;
}

[data-theme=dark],
.dark {
  --color-background-alternative-soft: #1f2124;
  --color-text-alternative-soft: #848c96;
  --color-icon-alternative-soft: #848c96;
}

.mm-box--color-text-alternative-soft {
  color: var(--color-text-alternative-soft);
}

.mm-box--color-icon-alternative-soft {
  color: var(--color-icon-alternative-soft);
}

.mm-box--background-color-background-alternative-soft {
  background-color: var(--color-background-alternative-soft);
}

.bridge__container {
  height: 100%;
  min-width: 360px;
  max-width: 480px;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.unlock-page {
  color: var(--color-text-default);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 400px;
  padding: 30px;
  font-weight: 400;
}

.unlock-page__container {
  display: flex;
  align-self: stretch;
  justify-content: center;
  flex: 1 0 auto;
  background: var(--color-background-default);
}

.unlock-page__mascot-container {
  margin-top: 24px;
  position: relative;
}

.unlock-page__mascot-container__beta {
  background: var(--color-primary-default);
  color: var(--color-primary-inverse);
  padding: 3px 6px;
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  border-radius: 10px;
  text-transform: uppercase;
}

[dir="ltr"] .unlock-page__mascot-container__beta {
  right: 0;
}

[dir="rtl"] .unlock-page__mascot-container__beta {
  left: 0;
}

.unlock-page__form {
  width: 100%;
  margin: 56px 0 8px;
}

.unlock-page__links {
  margin-top: 15px;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
}

.unlock-page__link {
  font-size: unset;
  font-weight: medium;
}

.unlock-page__support {
  margin-top: 25px;
  font-size: 0.75rem;
}

.unlock-page__support a {
  color: var(--color-primary-default);
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
.import-srp__multi-srp {
  flex-flow: column nowrap;
  z-index: 55;
  min-height: 68px;
  padding-left: 24px;
  padding-right: 24px;
}

@media screen and (max-width: calc(576px - 1px)) {
  .import-srp__multi-srp {
    height: 100%;
  }
}

@media screen and (min-width: 576px) {
  .import-srp__multi-srp {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .import-srp__multi-srp {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .import-srp__multi-srp {
    width: 62vw;
  }
}

.import-srp__multi-srp__srp-inner-container {
  padding-bottom: 64px;
  overflow-y: auto;
}

.import-srp__multi-srp__srp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-area: input;
  gap: 0 24px;
}

.import-srp__multi-srp__label {
  min-width: 16px;
  max-width: 16px;
  flex-shrink: 0;
}

.import-srp__multi-srp__srp-word input {
  flex: 1;
}

.import-srp__multi-srp__import-button {
  position: fixed;
  /* stylelint-disable length-zero-no-unit */
  bottom: 0;
  z-index: 99999;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

[dir="ltr"] .import-srp__multi-srp__import-button {
  left: initial;
  margin-left: -24px;
}

[dir="rtl"] .import-srp__multi-srp__import-button {
  right: initial;
  margin-right: -24px;
}

@media screen and (min-width: 576px) {
  .import-srp__multi-srp__import-button {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .import-srp__multi-srp__import-button {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .import-srp__multi-srp__import-button {
    width: 62vw;
  }
}

.critical-error {
  max-width: 600px;
  border-radius: 4px;
  background-color: var(--color-warning-muted);
  color: inherit;
  display: flex;
  gap: 8px;
  line-height: 24px;
}

[dir="ltr"] .critical-error {
  border-left: var(--color-warning-default) 4px solid;
  padding: 12px 12px 12px 8px;
}

[dir="rtl"] .critical-error {
  border-right: var(--color-warning-default) 4px solid;
  padding: 12px 8px 12px 12px;
}

.critical-error__container {
  padding: 20px;
  margin: 0 auto;
}

.critical-error__footer {
  display: inline-flex;
  flex-wrap: wrap;
}

.critical-error__footer > span {
  flex: 0 0 auto;
  max-width: 100%;
  padding-inline-end: 8px;
}

.critical-error__icon {
  padding-top: 4px;
}

.critical-error__icon svg {
  fill: var(--color-warning-default);
}

.critical-error__link {
  cursor: pointer;
  text-decoration: none;
  color: var(--color-primary-default);
}

.critical-error__link:hover {
  color: var(--color-primary-alternative);
}

.critical-error__link-restart {
  align-items: center;
  display: flex;
  margin: 8px 0 24px;
  padding: 8px 0;
}

.loading-logo {
  width: 10rem;
  height: 10rem;
  align-self: center;
  margin: 10rem 0 0 0;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  align-self: center;
  margin-top: 1rem;
}

/*
  ITCSS

  http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
  https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

  DEPRECATED: This CSS architecture is deprecated. The following imports will be removed
  overtime.
 */
.new-account-modal__footer, .send__select-recipient-wrapper__list__link, .send__select-recipient-wrapper__group-item, .send__select-recipient-wrapper__group-item--selected, .ens-input, .ens-input__wrapper, .ens-input__wrapper--valid .ens-input__wrapper__input {
  display: flex;
  flex-flow: row nowrap;
}

.new-account-modal__content, .send__select-recipient-wrapper, .send__select-recipient-wrapper__recent-group-wrapper, .send__select-recipient-wrapper__group, .send__select-recipient-wrapper__group-item__content, .send__select-recipient-wrapper__group-item--selected__content {
  display: flex;
  flex-flow: column nowrap;
}

.send__select-recipient-wrapper__list__back-caret {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.multichain-send-page__account-picker__label, .ens-input__selected-input__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/*
Responsive breakpoints
*/
/*
DEPRECATED
*/
/**
* @deprecated The typography mixins `@include design-system.H1` - `@include design-system.H9` have been deprecated in favor of the `<Text>` component from the component-library.
* Please update your code to use the `<Text>` component instead, which can be found in ui/components/component-library/text/text.tsx.
* You can find documentation for the new `<Text>` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--docs}
* If you would like to help with the replacement of the old mixins `@include design-system.H1` - `@include design-system.H9`, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/19533}
*/
/*
  Z-Indicies
*/
/*
  NewUI Container Elements
 */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  position: relative;
  align-items: center;
}

.app.os-mac.browser-chrome::after {
  content: "";
  position: fixed;
  top: 0;
  width: 1px;
  height: 1px;
  background-color: var(--color-background-alternative);
  animation: emptySpinningDiv 1s infinite linear;
}

[dir="ltr"] .app.os-mac.browser-chrome::after {
  left: 0;
}

[dir="rtl"] .app.os-mac.browser-chrome::after {
  right: 0;
}

@keyframes emptySpinningDiv {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.main-container {
  display: flex;
  flex-direction: column;
  z-index: 18;
}

.main-container::-webkit-scrollbar {
  display: none;
}

.main-container-wrapper {
  display: flex;
  justify-content: center;
  flex: 1 0 auto;
  min-height: 0;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .main-container {
    width: 85vw;
    min-height: 90vh;
  }

  .main-container--has-shadow {
    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  }
}

@media screen and (min-width: 768px) {
  .main-container {
    width: 80vw;
    min-height: 82vh;
  }

  .main-container--has-shadow {
    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  }
}

@media screen and (min-width: 1280px) {
  .main-container {
    width: 62vw;
    min-height: 82vh;
  }

  .main-container--has-shadow {
    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
  }
}

@media screen and (max-width: calc(576px - 1px)) {
  .main-container {
    width: 100%;
    overflow-y: auto;
    background-color: var(--color-background-default);
  }

  .main-container-wrapper {
    flex: 1;
  }
}

.first-view-main {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

@media screen and (max-width: calc(576px - 1px)) {
  .first-view-main {
    height: 100%;
  }
}

@media screen and (min-width: 576px) {
  .first-view-main {
    width: 85vw;
  }
}

@media screen and (min-width: 768px) {
  .first-view-main {
    width: 80vw;
  }
}

@media screen and (min-width: 1280px) {
  .first-view-main {
    width: 62vw;
  }
}

.first-view-main-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  padding: 0 10px;
  background: var(--color-background-default);
}

/*
  Third Party Library Styles
*/
.tippy-touch {
  cursor: pointer !important;
}

.tippy-notransition {
  transition: none !important;
}

.tippy-popper {
  max-width: 400px;
  perspective: 800px;
  z-index: 9999;
  outline: 0;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
}

.tippy-popper.html-template {
  max-width: 96%;
  max-width: calc(100% - 20px);
}

.tippy-popper[x-placement^=top] [x-arrow] {
  border-top: 7px solid #333;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  bottom: -7px;
  margin: 0 9px;
}

.tippy-popper[x-placement^=top] [x-arrow].arrow-small {
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  bottom: -5px;
}

.tippy-popper[x-placement^=top] [x-arrow].arrow-big {
  border-top: 10px solid #333;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  bottom: -10px;
}

[dir="ltr"] .tippy-popper[x-placement^=top] [x-circle] {
  transform-origin: 0 33%;
}

[dir="rtl"] .tippy-popper[x-placement^=top] [x-circle] {
  transform-origin: 100% 33%;
}

.tippy-popper[x-placement^=top] [x-circle].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=top] [x-circle].enter {
  transform: scale(1) translate(-50%, -55%);
}

[dir="rtl"] .tippy-popper[x-placement^=top] [x-circle].enter {
  transform: scale(1) translate(50%, -55%);
}

.tippy-popper[x-placement^=top] [x-circle].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=top] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -50%);
}

[dir="rtl"] .tippy-popper[x-placement^=top] [x-circle].leave {
  transform: scale(0.15) translate(50%, -50%);
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle] {
  background-color: #fff;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] {
  border-top: 7px solid #fff;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow] {
  border-top: 7px solid rgba(0, 0, 0, 0.7);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-top: 5px solid rgba(0, 0, 0, 0.7);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-top: 10px solid rgba(0, 0, 0, 0.7);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.tippy-popper[x-placement^=top] [data-animation=perspective] {
  transform-origin: bottom;
}

.tippy-popper[x-placement^=top] [data-animation=perspective].enter {
  opacity: 1;
  transform: translateY(-10px) rotateX(0);
}

.tippy-popper[x-placement^=top] [data-animation=perspective].leave {
  opacity: 0;
  transform: translateY(0) rotateX(90deg);
}

.tippy-popper[x-placement^=top] [data-animation=fade].enter {
  opacity: 1;
  transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=fade].leave {
  opacity: 0;
  transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift].enter {
  opacity: 1;
  transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift].leave {
  opacity: 0;
  transform: translateY(0);
}

.tippy-popper[x-placement^=top] [data-animation=scale].enter {
  opacity: 1;
  transform: translateY(-10px) scale(1);
}

.tippy-popper[x-placement^=top] [data-animation=scale].leave {
  opacity: 0;
  transform: translateY(0) scale(0);
}

.tippy-popper[x-placement^=bottom] [x-arrow] {
  border-bottom: 7px solid #333;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  top: -7px;
  margin: 0 9px;
}

.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small {
  border-bottom: 5px solid #333;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top: -5px;
}

.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
  border-bottom: 10px solid #333;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  top: -10px;
}

[dir="ltr"] .tippy-popper[x-placement^=bottom] [x-circle] {
  transform-origin: 0 -50%;
}

[dir="rtl"] .tippy-popper[x-placement^=bottom] [x-circle] {
  transform-origin: 100% -50%;
}

.tippy-popper[x-placement^=bottom] [x-circle].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=bottom] [x-circle].enter {
  transform: scale(1) translate(-50%, -45%);
}

[dir="rtl"] .tippy-popper[x-placement^=bottom] [x-circle].enter {
  transform: scale(1) translate(50%, -45%);
}

.tippy-popper[x-placement^=bottom] [x-circle].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=bottom] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -5%);
}

[dir="rtl"] .tippy-popper[x-placement^=bottom] [x-circle].leave {
  transform: scale(0.15) translate(50%, -5%);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle] {
  background-color: #fff;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] {
  border-bottom: 7px solid #fff;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-bottom: 5px solid #fff;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-bottom: 10px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow] {
  border-bottom: 7px solid rgba(0, 0, 0, 0.7);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-bottom: 5px solid rgba(0, 0, 0, 0.7);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-bottom: 10px solid rgba(0, 0, 0, 0.7);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.tippy-popper[x-placement^=bottom] [data-animation=perspective] {
  transform-origin: top;
}

.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter {
  opacity: 1;
  transform: translateY(10px) rotateX(0);
}

.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave {
  opacity: 0;
  transform: translateY(0) rotateX(-90deg);
}

.tippy-popper[x-placement^=bottom] [data-animation=fade].enter {
  opacity: 1;
  transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=fade].leave {
  opacity: 0;
  transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift].enter {
  opacity: 1;
  transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift].leave {
  opacity: 0;
  transform: translateY(0);
}

.tippy-popper[x-placement^=bottom] [data-animation=scale].enter {
  opacity: 1;
  transform: translateY(10px) scale(1);
}

.tippy-popper[x-placement^=bottom] [data-animation=scale].leave {
  opacity: 0;
  transform: translateY(0) scale(0);
}

.tippy-popper[x-placement^=left] [x-arrow] {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin: 6px 0;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [x-arrow] {
  border-left: 7px solid #333;
  right: -7px;
}

[dir="rtl"] .tippy-popper[x-placement^=left] [x-arrow] {
  border-right: 7px solid #333;
  left: -7px;
}

.tippy-popper[x-placement^=left] [x-arrow].arrow-small {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [x-arrow].arrow-small {
  border-left: 5px solid #333;
  right: -5px;
}

[dir="rtl"] .tippy-popper[x-placement^=left] [x-arrow].arrow-small {
  border-right: 5px solid #333;
  left: -5px;
}

.tippy-popper[x-placement^=left] [x-arrow].arrow-big {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [x-arrow].arrow-big {
  border-left: 10px solid #333;
  right: -10px;
}

[dir="rtl"] .tippy-popper[x-placement^=left] [x-arrow].arrow-big {
  border-right: 10px solid #333;
  left: -10px;
}

.tippy-popper[x-placement^=left] [x-circle] {
  transform-origin: 50% 0;
}

.tippy-popper[x-placement^=left] [x-circle].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [x-circle].enter {
  transform: scale(1) translate(-50%, -50%);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [x-circle].enter {
  transform: scale(1) translate(50%, -50%);
}

.tippy-popper[x-placement^=left] [x-circle].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -50%);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [x-circle].leave {
  transform: scale(0.15) translate(50%, -50%);
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle] {
  background-color: #fff;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] {
  border-left: 7px solid #fff;
}

[dir="rtl"] .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] {
  border-right: 7px solid #fff;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-left: 5px solid #fff;
}

[dir="rtl"] .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-right: 5px solid #fff;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-left: 10px solid #fff;
}

[dir="rtl"] .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-right: 10px solid #fff;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] {
  border-left: 7px solid rgba(0, 0, 0, 0.7);
}

[dir="rtl"] .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] {
  border-right: 7px solid rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-left: 5px solid rgba(0, 0, 0, 0.7);
}

[dir="rtl"] .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-right: 5px solid rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-left: 10px solid rgba(0, 0, 0, 0.7);
}

[dir="rtl"] .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-right: 10px solid rgba(0, 0, 0, 0.7);
}

[dir="ltr"] .tippy-popper[x-placement^=left] [data-animation=perspective] {
  transform-origin: right;
}

[dir="rtl"] .tippy-popper[x-placement^=left] [data-animation=perspective] {
  transform-origin: left;
}

.tippy-popper[x-placement^=left] [data-animation=perspective].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [data-animation=perspective].enter {
  transform: translateX(-10px) rotateY(0);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [data-animation=perspective].enter {
  transform: translateX(10px) rotateY(0);
}

.tippy-popper[x-placement^=left] [data-animation=perspective].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [data-animation=perspective].leave {
  transform: translateX(0) rotateY(-90deg);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [data-animation=perspective].leave {
  transform: translateX(0) rotateY(90deg);
}

.tippy-popper[x-placement^=left] [data-animation=fade].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [data-animation=fade].enter {
  transform: translateX(-10px);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [data-animation=fade].enter {
  transform: translateX(10px);
}

.tippy-popper[x-placement^=left] [data-animation=fade].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [data-animation=fade].leave {
  transform: translateX(-10px);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [data-animation=fade].leave {
  transform: translateX(10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [data-animation=shift].enter {
  transform: translateX(-10px);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [data-animation=shift].enter {
  transform: translateX(10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift].leave {
  opacity: 0;
  transform: translateX(0);
}

.tippy-popper[x-placement^=left] [data-animation=scale].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=left] [data-animation=scale].enter {
  transform: translateX(-10px) scale(1);
}

[dir="rtl"] .tippy-popper[x-placement^=left] [data-animation=scale].enter {
  transform: translateX(10px) scale(1);
}

.tippy-popper[x-placement^=left] [data-animation=scale].leave {
  opacity: 0;
  transform: translateX(0) scale(0);
}

.tippy-popper[x-placement^=right] [x-arrow] {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin: 6px 0;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [x-arrow] {
  border-right: 7px solid #333;
  left: -7px;
}

[dir="rtl"] .tippy-popper[x-placement^=right] [x-arrow] {
  border-left: 7px solid #333;
  right: -7px;
}

.tippy-popper[x-placement^=right] [x-arrow].arrow-small {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [x-arrow].arrow-small {
  border-right: 5px solid #333;
  left: -5px;
}

[dir="rtl"] .tippy-popper[x-placement^=right] [x-arrow].arrow-small {
  border-left: 5px solid #333;
  right: -5px;
}

.tippy-popper[x-placement^=right] [x-arrow].arrow-big {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [x-arrow].arrow-big {
  border-right: 10px solid #333;
  left: -10px;
}

[dir="rtl"] .tippy-popper[x-placement^=right] [x-arrow].arrow-big {
  border-left: 10px solid #333;
  right: -10px;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [x-circle] {
  transform-origin: -50% 0;
}

[dir="rtl"] .tippy-popper[x-placement^=right] [x-circle] {
  transform-origin: 150% 0;
}

.tippy-popper[x-placement^=right] [x-circle].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [x-circle].enter {
  transform: scale(1) translate(-50%, -50%);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [x-circle].enter {
  transform: scale(1) translate(50%, -50%);
}

.tippy-popper[x-placement^=right] [x-circle].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [x-circle].leave {
  transform: scale(0.15) translate(-50%, -50%);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [x-circle].leave {
  transform: scale(0.15) translate(50%, -50%);
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle] {
  background-color: #fff;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] {
  border-right: 7px solid #fff;
}

[dir="rtl"] .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] {
  border-left: 7px solid #fff;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-right: 5px solid #fff;
}

[dir="rtl"] .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small {
  border-left: 5px solid #fff;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-right: 10px solid #fff;
}

[dir="rtl"] .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big {
  border-left: 10px solid #fff;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle] {
  background-color: rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] {
  border-right: 7px solid rgba(0, 0, 0, 0.7);
}

[dir="rtl"] .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] {
  border-left: 7px solid rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-right: 5px solid rgba(0, 0, 0, 0.7);
}

[dir="rtl"] .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
  border-left: 5px solid rgba(0, 0, 0, 0.7);
}

.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

[dir="ltr"] .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-right: 10px solid rgba(0, 0, 0, 0.7);
}

[dir="rtl"] .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
  border-left: 10px solid rgba(0, 0, 0, 0.7);
}

[dir="ltr"] .tippy-popper[x-placement^=right] [data-animation=perspective] {
  transform-origin: left;
}

[dir="rtl"] .tippy-popper[x-placement^=right] [data-animation=perspective] {
  transform-origin: right;
}

.tippy-popper[x-placement^=right] [data-animation=perspective].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [data-animation=perspective].enter {
  transform: translateX(10px) rotateY(0);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [data-animation=perspective].enter {
  transform: translateX(-10px) rotateY(0);
}

.tippy-popper[x-placement^=right] [data-animation=perspective].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [data-animation=perspective].leave {
  transform: translateX(0) rotateY(90deg);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [data-animation=perspective].leave {
  transform: translateX(0) rotateY(-90deg);
}

.tippy-popper[x-placement^=right] [data-animation=fade].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [data-animation=fade].enter {
  transform: translateX(10px);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [data-animation=fade].enter {
  transform: translateX(-10px);
}

.tippy-popper[x-placement^=right] [data-animation=fade].leave {
  opacity: 0;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [data-animation=fade].leave {
  transform: translateX(10px);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [data-animation=fade].leave {
  transform: translateX(-10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [data-animation=shift].enter {
  transform: translateX(10px);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [data-animation=shift].enter {
  transform: translateX(-10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift].leave {
  opacity: 0;
  transform: translateX(0);
}

.tippy-popper[x-placement^=right] [data-animation=scale].enter {
  opacity: 1;
}

[dir="ltr"] .tippy-popper[x-placement^=right] [data-animation=scale].enter {
  transform: translateX(10px) scale(1);
}

[dir="rtl"] .tippy-popper[x-placement^=right] [data-animation=scale].enter {
  transform: translateX(-10px) scale(1);
}

.tippy-popper[x-placement^=right] [data-animation=scale].leave {
  opacity: 0;
  transform: translateX(0) scale(0);
}

.tippy-popper .tippy-tooltip.transparent-theme {
  background-color: rgba(0, 0, 0, 0.7);
}

.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] {
  background-color: transparent;
}

.tippy-popper .tippy-tooltip.light-theme {
  color: #26323d;
  box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1), 0 4px 80px -8px rgba(0, 20, 60, 0.2);
  background-color: #fff;
}

.tippy-popper .tippy-tooltip.light-theme[data-animatefill] {
  background-color: transparent;
}

.tippy-tooltip {
  position: relative;
  color: #fff;
  border-radius: 4px;
  font-size: 0.95rem;
  padding: 0.4rem 0.8rem;
  text-align: center;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #333;
}

.tippy-tooltip--small {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.tippy-tooltip--big {
  padding: 0.6rem 1.2rem;
  font-size: 1.2rem;
}

.tippy-tooltip[data-animatefill] {
  overflow: hidden;
  background-color: transparent;
}

.tippy-tooltip[data-interactive] {
  pointer-events: auto;
}

.tippy-tooltip[data-inertia] {
  transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85);
}

.tippy-tooltip [x-arrow] {
  position: absolute;
  width: 0;
  height: 0;
}

.tippy-tooltip [x-circle] {
  position: absolute;
  will-change: transform;
  background-color: #333;
  border-radius: 50%;
  width: 130%;
  width: calc(110% + 2rem);
  top: 50%;
  z-index: -1;
  overflow: hidden;
  transition: all ease;
}

[dir="ltr"] .tippy-tooltip [x-circle] {
  left: 50%;
}

[dir="rtl"] .tippy-tooltip [x-circle] {
  right: 50%;
}

.tippy-tooltip [x-circle]:before {
  content: "";
  padding-top: 90%;
}

[dir="ltr"] .tippy-tooltip [x-circle]:before {
  float: left;
}

[dir="rtl"] .tippy-tooltip [x-circle]:before {
  float: right;
}

@media (max-width: 450px) {
  .tippy-popper {
    max-width: 96%;
    max-width: calc(100% - 20px);
  }
}

:root {
  --brand-colors-grey-grey100:#dadce5;
  --brand-colors-grey-grey200:#b7bbc8;
  --brand-colors-grey-grey300:#9ca1af;
  --brand-colors-grey-grey400:#858b9a;
  --brand-colors-grey-grey500:#686e7d;
  --brand-colors-grey-grey600:#4b505c;
  --brand-colors-grey-grey700:#31333a;
  --brand-colors-grey-grey800:#222325;
  --brand-colors-grey-grey900:#121314;
  --brand-colors-grey-grey1000:#000000;
  --brand-colors-grey-grey050:#f3f5f9;
  --brand-colors-grey-grey000:#ffffff;
  --brand-colors-grey-grey025:#f7f9fc;
  --brand-colors-blue-blue100:#d6dbff;
  --brand-colors-blue-blue200:#adb6fe;
  --brand-colors-blue-blue300:#8b99ff;
  --brand-colors-blue-blue400:#6f7eff;
  --brand-colors-blue-blue500:#4459ff;
  --brand-colors-blue-blue600:#2c3dc5;
  --brand-colors-blue-blue700:#1c277f;
  --brand-colors-blue-blue800:#131b59;
  --brand-colors-blue-blue900:#0b0f32;
  --brand-colors-blue-blue050:#f4f5ff;
  --brand-colors-blue-blue025:#f8f9ff;
  --brand-colors-green-green100:#c1e6c9;
  --brand-colors-green-green200:#80cb91;
  --brand-colors-green-green300:#4cb564;
  --brand-colors-green-green400:#279f41;
  --brand-colors-green-green500:#1c7e33;
  --brand-colors-green-green600:#145d25;
  --brand-colors-green-green700:#0d3b18;
  --brand-colors-green-green800:#092912;
  --brand-colors-green-green900:#051709;
  --brand-colors-green-green050:#ebf7ee;
  --brand-colors-green-green025:#f1faf4;
  --brand-colors-red-red100:#ffd2d5;
  --brand-colors-red-red200:#ffa1aa;
  --brand-colors-red-red300:#ff7584;
  --brand-colors-red-red400:#f74d5e;
  --brand-colors-red-red500:#ca3542;
  --brand-colors-red-red600:#952731;
  --brand-colors-red-red700:#611a20;
  --brand-colors-red-red800:#431216;
  --brand-colors-red-red900:#3b0f13;
  --brand-colors-red-red050:#fff2f3;
  --brand-colors-red-red025:#fff6f7;
  --brand-colors-yellow-yellow100:#ffd957;
  --brand-colors-yellow-yellow200:#f0b034;
  --brand-colors-yellow-yellow300:#e18f01;
  --brand-colors-yellow-yellow400:#c37b02;
  --brand-colors-yellow-yellow500:#9a6300;
  --brand-colors-yellow-yellow600:#714802;
  --brand-colors-yellow-yellow700:#482d01;
  --brand-colors-yellow-yellow800:#321f00;
  --brand-colors-yellow-yellow900:#1c1100;
  --brand-colors-yellow-yellow050:#fff5d5;
  --brand-colors-yellow-yellow025:#fff9e6;
  --brand-colors-orange-orange100:#ffd4c1;
  --brand-colors-orange-orange200:#ffa680;
  --brand-colors-orange-orange300:#ff7940;
  --brand-colors-orange-orange400:#ff5c16;
  --brand-colors-orange-orange500:#c3420d;
  --brand-colors-orange-orange600:#932d06;
  --brand-colors-orange-orange700:#661800;
  --brand-colors-orange-orange800:#451100;
  --brand-colors-orange-orange900:#280a00;
  --brand-colors-orange-orange050:#fff0ea;
  --brand-colors-orange-orange025:#fff8f5;
  --brand-colors-purple-purple100:#eac2ff;
  --brand-colors-purple-purple200:#dfa4ff;
  --brand-colors-purple-purple300:#d075ff;
  --brand-colors-purple-purple400:#b864f5;
  --brand-colors-purple-purple500:#8f44e4;
  --brand-colors-purple-purple600:#6c2ab2;
  --brand-colors-purple-purple700:#6c2ab2;
  --brand-colors-purple-purple800:#3d065f;
  --brand-colors-purple-purple900:#280a00;
  --brand-colors-purple-purple050:#fbf2ff;
  --brand-colors-purple-purple025:#fcf6ff;
  --brand-colors-lime-lime100:#baf24a;
  --brand-colors-lime-lime200:#95ca45;
  --brand-colors-lime-lime300:#7ab040;
  --brand-colors-lime-lime400:#64993d;
  --brand-colors-lime-lime500:#457a39;
  --brand-colors-lime-lime600:#275b35;
  --brand-colors-lime-lime700:#013330;
  --brand-colors-lime-lime800:#012826;
  --brand-colors-lime-lime900:#011515;
  --brand-colors-lime-lime025:#effed9;
  --brand-colors-lime-lime050:#e5ffc3;
  --brand-colors-indigo-indigo025:#f3faff;
  --brand-colors-indigo-indigo050:#ebf5ff;
  --brand-colors-indigo-indigo100:#cce7ff;
  --brand-colors-indigo-indigo200:#89b0ff;
  --brand-colors-indigo-indigo300:#7e9ff0;
  --brand-colors-indigo-indigo400:#6f87db;
  --brand-colors-indigo-indigo500:#5b66bf;
  --brand-colors-indigo-indigo600:#4544a1;
  --brand-colors-indigo-indigo700:#2e2082;
  --brand-colors-indigo-indigo800:#190066;
  --brand-colors-indigo-indigo900:#13004a;
  --brand-colors-white:#ffffff;
  --brand-colors-black:#000000;
}

.light, :root, [data-theme=light] {
  --color-background-default:var(--brand-colors-grey-grey000);
  --color-background-alternative:var(--brand-colors-grey-grey050);
  --color-background-muted:var(--brand-colors-grey-grey050);
  --color-background-default-hover:#f6f6f7;
  --color-background-default-pressed:#ebecef;
  --color-background-alternative-hover:#f6f6f7;
  --color-background-alternative-pressed:#ebecef;
  --color-background-muted-hover:#e7ebee;
  --color-background-muted-pressed:#ebecef;
  --color-background-hover:#858b9a14;
  --color-background-pressed:#858b9a29;
  --color-text-default:var(--brand-colors-grey-grey900);
  --color-text-alternative:var(--brand-colors-grey-grey500);
  --color-text-muted:var(--brand-colors-grey-grey300);
  --color-icon-default:var(--brand-colors-grey-grey900);
  --color-icon-alternative:var(--brand-colors-grey-grey500);
  --color-icon-muted:var(--brand-colors-grey-grey300);
  --color-border-default:var(--brand-colors-grey-grey200);
  --color-border-muted:#b7bbc866;
  --color-overlay-default:#00000066;
  --color-overlay-alternative:#000000cc;
  --color-overlay-inverse:var(--brand-colors-grey-grey000);
  --color-primary-default:var(--brand-colors-blue-blue500);
  --color-primary-alternative:var(--brand-colors-blue-blue600);
  --color-primary-muted:#4459ff1a;
  --color-primary-inverse:var(--brand-colors-grey-grey000);
  --color-primary-default-hover:#384df5;
  --color-primary-default-pressed:#2b3eda;
  --color-primary-muted-hover:#4459ff26;
  --color-primary-muted-pressed:#4459ff33;
  --color-error-default:var(--brand-colors-red-red500);
  --color-error-alternative:var(--brand-colors-red-red600);
  --color-error-muted:#ca35421a;
  --color-error-inverse:var(--brand-colors-grey-grey000);
  --color-error-default-hover:#ba313d;
  --color-error-default-pressed:#9a2832;
  --color-error-muted-hover:#ca354226;
  --color-error-muted-pressed:#ca354233;
  --color-warning-default:var(--brand-colors-yellow-yellow500);
  --color-warning-muted:#9a63001a;
  --color-warning-inverse:var(--brand-colors-grey-grey000);
  --color-warning-default-hover:#855500;
  --color-warning-default-pressed:#5c3b00;
  --color-warning-muted-hover:#9a630026;
  --color-warning-muted-pressed:#9a630033;
  --color-success-default:var(--brand-colors-green-green500);
  --color-success-muted:#1c7e331a;
  --color-success-inverse:var(--brand-colors-grey-grey000);
  --color-success-default-hover:#186c2c;
  --color-success-default-pressed:#114b1e;
  --color-success-muted-hover:#1c7e3326;
  --color-success-muted-pressed:#1c7e3333;
  --color-info-default:var(--brand-colors-blue-blue500);
  --color-info-muted:#4459ff1a;
  --color-info-inverse:var(--brand-colors-grey-grey000);
  --color-flask-default:var(--brand-colors-purple-purple500);
  --color-flask-inverse:var(--brand-colors-grey-grey000);
  --color-shadow-default:#0000001a;
  --color-shadow-primary:#4459ff33;
  --color-shadow-error:#ca354266;
}

.dark, [data-theme=dark] {
  --color-background-default:var(--brand-colors-grey-grey900);
  --color-background-alternative:var(--brand-colors-grey-grey1000);
  --color-background-muted:var(--brand-colors-grey-grey800);
  --color-background-default-hover:#1a1b1c;
  --color-background-default-pressed:#222424;
  --color-background-alternative-hover:#0d0d0e;
  --color-background-alternative-pressed:#161617;
  --color-background-muted-hover:#2a2b2d;
  --color-background-muted-pressed:#303234;
  --color-background-hover:#dadce50a;
  --color-background-pressed:#dadce514;
  --color-text-default:var(--brand-colors-grey-grey000);
  --color-text-alternative:var(--brand-colors-grey-grey200);
  --color-text-muted:var(--brand-colors-grey-grey400);
  --color-icon-default:var(--brand-colors-grey-grey000);
  --color-icon-alternative:var(--brand-colors-grey-grey200);
  --color-icon-muted:var(--brand-colors-grey-grey400);
  --color-border-default:var(--brand-colors-grey-grey400);
  --color-border-muted:#858b9a33;
  --color-overlay-default:#00000066;
  --color-overlay-alternative:#000000cc;
  --color-overlay-inverse:var(--brand-colors-grey-grey000);
  --color-primary-default:var(--brand-colors-blue-blue300);
  --color-primary-alternative:var(--brand-colors-blue-blue200);
  --color-primary-muted:#8b99ff26;
  --color-primary-inverse:var(--brand-colors-grey-grey900);
  --color-primary-default-hover:#9eaaff;
  --color-primary-default-pressed:#c7ceff;
  --color-primary-muted-hover:#8b99ff33;
  --color-primary-muted-pressed:#8b99ff40;
  --color-error-default:var(--brand-colors-red-red300);
  --color-error-alternative:var(--brand-colors-red-red200);
  --color-error-muted:#ff758426;
  --color-error-inverse:var(--brand-colors-grey-grey900);
  --color-error-default-hover:#ff8a96;
  --color-error-default-pressed:#ffb2bb;
  --color-error-muted-hover:#ff758433;
  --color-error-muted-pressed:#ff758440;
  --color-warning-default:var(--brand-colors-yellow-yellow100);
  --color-warning-muted:#ffd95726;
  --color-warning-inverse:var(--brand-colors-grey-grey900);
  --color-warning-default-hover:#ffde6b;
  --color-warning-default-pressed:#ffe794;
  --color-warning-muted-hover:#ffd95733;
  --color-warning-muted-pressed:#ffd95740;
  --color-success-default:var(--brand-colors-green-green300);
  --color-success-muted:#4cb56426;
  --color-success-inverse:var(--brand-colors-grey-grey900);
  --color-success-default-hover:#59ba6f;
  --color-success-default-pressed:#76c688;
  --color-success-muted-hover:#4cb56433;
  --color-success-muted-pressed:#4cb56440;
  --color-info-default:var(--brand-colors-blue-blue300);
  --color-info-muted:#8b99ff26;
  --color-info-inverse:var(--brand-colors-grey-grey900);
  --color-flask-default:var(--brand-colors-purple-purple300);
  --color-flask-inverse:var(--brand-colors-grey-grey900);
  --color-shadow-default:#00000066;
  --color-shadow-primary:#8b99ff33;
  --color-shadow-error:#ff758433;
}

:root {
  --font-family-default:"CentraNo1","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-family-accent:"MMSans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-family-hero:"MMPoly","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-size-base:16px;
  --font-size-1:0.625rem;
  --font-size-2:0.75rem;
  --font-size-3:0.875rem;
  --font-size-4:1rem;
  --font-size-5:1.125rem;
  --font-size-6:1.5rem;
  --font-size-7:2rem;
  --font-size-8:3rem;
  --line-height-1:1rem;
  --line-height-2:1.25rem;
  --line-height-3:1.375rem;
  --line-height-4:1.5rem;
  --line-height-5:2rem;
  --line-height-6:2.5rem;
  --line-height-7:3.5rem;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-bold:700;
  --letter-spacing-0:0;
  --letter-spacing-1:2.5%;
  --typography-s-display-md-font-size:var(--font-size-7);
  --typography-s-display-md-line-height:var(--line-height-6);
  --typography-s-display-md-font-weight:var(--font-weight-bold);
  --typography-s-display-md-letter-spacing:var(--letter-spacing-0);
  --typography-s-heading-lg-font-size:var(--font-size-6);
  --typography-s-heading-lg-line-height:var(--line-height-5);
  --typography-s-heading-lg-font-weight:var(--font-weight-bold);
  --typography-s-heading-lg-letter-spacing:var(--letter-spacing-0);
  --typography-s-heading-md-font-size:var(--font-size-5);
  --typography-s-heading-md-line-height:var(--line-height-4);
  --typography-s-heading-md-font-weight:var(--font-weight-bold);
  --typography-s-heading-md-letter-spacing:var(--letter-spacing-0);
  --typography-s-heading-sm-font-size:var(--font-size-4);
  --typography-s-heading-sm-line-height:var(--line-height-4);
  --typography-s-heading-sm-font-weight:var(--font-weight-bold);
  --typography-s-heading-sm-letter-spacing:var(--letter-spacing-0);
  --typography-s-heading-sm-regular-font-size:var(--font-size-4);
  --typography-s-heading-sm-regular-line-height:var(--line-height-4);
  --typography-s-heading-sm-regular-font-weight:var(--font-weight-regular);
  --typography-s-heading-sm-regular-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-lg-medium-font-size:var(--font-size-5);
  --typography-s-body-lg-medium-line-height:var(--line-height-4);
  --typography-s-body-lg-medium-font-weight:var(--font-weight-medium);
  --typography-s-body-lg-medium-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-lg-regular-font-size:var(--font-size-5);
  --typography-s-body-lg-regular-line-height:var(--line-height-4);
  --typography-s-body-lg-regular-font-weight:var(--font-weight-medium);
  --typography-s-body-lg-regular-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-md-bold-font-size:var(--font-size-4);
  --typography-s-body-md-bold-line-height:var(--line-height-4);
  --typography-s-body-md-bold-font-weight:var(--font-weight-bold);
  --typography-s-body-md-bold-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-md-medium-font-size:var(--font-size-4);
  --typography-s-body-md-medium-line-height:var(--line-height-4);
  --typography-s-body-md-medium-font-weight:var(--font-weight-medium);
  --typography-s-body-md-medium-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-md-font-size:var(--font-size-4);
  --typography-s-body-md-line-height:var(--line-height-4);
  --typography-s-body-md-font-weight:var(--font-weight-regular);
  --typography-s-body-md-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-sm-bold-font-size:var(--font-size-3);
  --typography-s-body-sm-bold-line-height:var(--line-height-3);
  --typography-s-body-sm-bold-font-weight:var(--font-weight-bold);
  --typography-s-body-sm-bold-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-sm-medium-font-size:var(--font-size-3);
  --typography-s-body-sm-medium-line-height:var(--line-height-3);
  --typography-s-body-sm-medium-font-weight:var(--font-weight-medium);
  --typography-s-body-sm-medium-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-sm-font-size:var(--font-size-3);
  --typography-s-body-sm-line-height:var(--line-height-3);
  --typography-s-body-sm-font-weight:var(--font-weight-regular);
  --typography-s-body-sm-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-xs-medium-font-size:var(--font-size-2);
  --typography-s-body-xs-medium-line-height:var(--line-height-2);
  --typography-s-body-xs-medium-font-weight:var(--font-weight-medium);
  --typography-s-body-xs-medium-letter-spacing:var(--letter-spacing-0);
  --typography-s-body-xs-font-size:var(--font-size-2);
  --typography-s-body-xs-line-height:var(--line-height-2);
  --typography-s-body-xs-font-weight:var(--font-weight-regular);
  --typography-s-body-xs-letter-spacing:var(--letter-spacing-0);
  --typography-l-display-md-font-size:var(--font-size-8);
  --typography-l-display-md-line-height:var(--line-height-7);
  --typography-l-display-md-font-weight:var(--font-weight-medium);
  --typography-l-display-md-letter-spacing:var(--letter-spacing-0);
  --typography-l-heading-lg-font-size:var(--font-size-7);
  --typography-l-heading-lg-line-height:var(--line-height-6);
  --typography-l-heading-lg-font-weight:var(--font-weight-bold);
  --typography-l-heading-lg-letter-spacing:var(--letter-spacing-0);
  --typography-l-heading-md-font-size:var(--font-size-6);
  --typography-l-heading-md-line-height:var(--line-height-5);
  --typography-l-heading-md-font-weight:var(--font-weight-bold);
  --typography-l-heading-md-letter-spacing:var(--letter-spacing-0);
  --typography-l-heading-sm-font-size:var(--font-size-5);
  --typography-l-heading-sm-line-height:var(--line-height-4);
  --typography-l-heading-sm-font-weight:var(--font-weight-bold);
  --typography-l-heading-sm-letter-spacing:var(--letter-spacing-0);
  --typography-l-heading-sm-regular-font-size:var(--font-size-5);
  --typography-l-heading-sm-regular-line-height:var(--line-height-4);
  --typography-l-heading-sm-regular-font-weight:var(--font-weight-regular);
  --typography-l-heading-sm-regular-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-lg-medium-font-size:var(--font-size-5);
  --typography-l-body-lg-medium-line-height:var(--line-height-4);
  --typography-l-body-lg-medium-font-weight:var(--font-weight-medium);
  --typography-l-body-lg-medium-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-md-bold-font-size:var(--font-size-4);
  --typography-l-body-md-bold-line-height:var(--line-height-4);
  --typography-l-body-md-bold-font-weight:var(--font-weight-bold);
  --typography-l-body-md-bold-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-md-medium-font-size:var(--font-size-4);
  --typography-l-body-md-medium-line-height:var(--line-height-4);
  --typography-l-body-md-medium-font-weight:var(--font-weight-medium);
  --typography-l-body-md-medium-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-md-font-size:var(--font-size-4);
  --typography-l-body-md-line-height:var(--line-height-4);
  --typography-l-body-md-font-weight:var(--font-weight-regular);
  --typography-l-body-md-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-sm-bold-font-size:var(--font-size-3);
  --typography-l-body-sm-bold-line-height:var(--line-height-3);
  --typography-l-body-sm-bold-font-weight:var(--font-weight-bold);
  --typography-l-body-sm-bold-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-sm-medium-font-size:var(--font-size-3);
  --typography-l-body-sm-medium-line-height:var(--line-height-3);
  --typography-l-body-sm-medium-font-weight:var(--font-weight-medium);
  --typography-l-body-sm-medium-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-sm-font-size:var(--font-size-3);
  --typography-l-body-sm-line-height:var(--line-height-3);
  --typography-l-body-sm-font-weight:var(--font-weight-regular);
  --typography-l-body-sm-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-xs-medium-font-size:var(--font-size-2);
  --typography-l-body-xs-medium-line-height:var(--line-height-2);
  --typography-l-body-xs-medium-font-weight:var(--font-weight-medium);
  --typography-l-body-xs-medium-letter-spacing:var(--letter-spacing-0);
  --typography-l-body-xs-font-size:var(--font-size-2);
  --typography-l-body-xs-line-height:var(--line-height-2);
  --typography-l-body-xs-font-weight:var(--font-weight-regular);
  --typography-l-body-xs-letter-spacing:var(--letter-spacing-0);
}

:root {
  --shadow-size-xs:0 2px 4px 0;
  --shadow-size-sm:0 2px 8px 0;
  --shadow-size-md:0 2px 16px 0;
  --shadow-size-lg:0 2px 40px 0;
}