.container {
  width: 100%;
  padding: 0px 1rem;
}

.container-sm {
  width: 100%;
  padding: 0px 1rem;
}

.container-md {
  width: 100%;
  padding: 0px 1rem;
}

.container-lg {
  width: 100%;
  padding: 0px 1rem;
}

.container-xl {
  width: 100%;
  padding: 0px 1rem;
}

.container-2xl {
  width: 100%;
  padding: 0px 1rem;
}

@media (width > 640px) {
  .container-sm {
    max-width: 640px;
  }
}
@media (width > 768px) {
  .container-md {
    max-width: 768px;
  }
}
@media (width > 1024px) {
  .container-lg {
    max-width: 1024px;
  }
}
@media (width > 1280px) {
  .container-xl {
    max-width: 1280px;
  }
}
@media (width > 1536px) {
  .container-2xl {
    max-width: 1536px;
  }
}
html,
body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

:root {
  --font-heading: "Fustat";
  --font-body: "Roboto";
  --slate-50: #e8efff;
  --slate-100: #d0d6e4;
  --slate-200: #b3bbcd;
  --slate-300: #96a1b5;
  --slate-400: #7a889f;
  --slate-500: #606f85;
  --slate-600: #4a5569;
  --slate-700: #333b4c;
  --slate-800: #1d2130;
  --slate-900: #070718;
  --primary-50: #e7e7ff;
  --primary-100: #b8bafd;
  --primary-200: #8a8cf5;
  --primary-300: #5b5ef0;
  --primary-400: #2e30eb;
  --primary-500: #1618d2;
  --primary-600: #0f12a4;
  --primary-700: #090d76;
  --primary-800: #030749;
  --primary-900: #00021d;
  font-family: var(--font-body);
}

.root {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: white;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 24px;
}

.profile {
  --avatar-size: 56px;
}
.profile__trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.profile__avatar .avatar__img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: calc(var(--avatar-size) / 2);
}
.profile__label {
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile__target {
  background: var(--primary-800);
  color: var(--primary-100);
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}
.profile__target[data-open=true] {
  display: block;
}
.profile__target .content {
  width: 360px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.profile__target .content .actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}
.profile__target .content .actions .action {
  width: 100%;
  padding: 0.5rem;
  font-size: 14px;
  transition: all 150ms linear;
  cursor: pointer;
  text-decoration: none;
  color: var(--primary-100);
}
.profile__target .content .actions .action * {
  text-decoration: none;
}
.profile__target .content .actions .action:hover {
  background: var(--primary-100);
  color: var(--primary-800);
  border-radius: 8px;
}
.profile__target .content .actions .divider {
  width: 100%;
  height: 1px;
  background: var(--primary-100);
  opacity: 0.15;
  margin: 0;
}

.sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4rem;
}
.sections .wallets {
  width: 100%;
  background: var(--primary-700);
  padding: 4rem 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wallet {
  width: 520px;
  min-height: 280px;
  background: linear-gradient(90deg, var(--primary-400), var(--primary-700), var(--primary-400));
  padding: 1rem;
  color: var(--primary-100);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wallet__top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.wallet__top [role=label] {
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-body);
}
.wallet__top [role=account-number] {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 0.35rem;
}
.wallet__top .title {
  font-family: var(--font-heading);
  font-weight: bold;
  letter-spacing: 16px;
}
.wallet .balance, .wallet .wallet__bottom .credit, .wallet__bottom .wallet .credit,
.wallet .wallet__bottom .debit,
.wallet__bottom .wallet .debit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.wallet .balance [role=label], .wallet .wallet__bottom .credit [role=label], .wallet__bottom .wallet .credit [role=label],
.wallet .wallet__bottom .debit [role=label],
.wallet__bottom .wallet .debit [role=label] {
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  font-weight: bold;
}
.wallet .balance [role=value], .wallet .wallet__bottom .credit [role=value], .wallet__bottom .wallet .credit [role=value],
.wallet .wallet__bottom .debit [role=value],
.wallet__bottom .wallet .debit [role=value] {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 32px;
  letter-spacing: 0.35rem;
}
.wallet__bottom {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}
.wallet__bottom .credit,
.wallet__bottom .debit {
  flex-basis: 50%;
}
.wallet__bottom .credit [role=label],
.wallet__bottom .debit [role=label] {
  font-size: 14px;
}
.wallet__bottom .credit [role=value],
.wallet__bottom .debit [role=value] {
  font-size: 16px !important;
}

.two-pane {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
}
.two-pane .left {
  flex-basis: calc(4 * 100% / 3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4rem;
}
.two-pane .right {
  flex-grow: 1;
  background: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 4px 16px 0px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
}

.quick-actions {
  width: 100%;
}
.quick-actions .actions {
  width: 100%;
  display: flex;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.quick-actions .actions .action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  gap: 1rem;
  border: 1px solid var(--primary-200);
  padding: 2rem 1rem;
  transition: all 150ms linear;
  cursor: pointer;
  text-decoration: none;
}
.quick-actions .actions .action * {
  text-decoration: none;
}
.quick-actions .actions .action .icon {
  background-color: var(--primary-300);
  color: var(--primary-50);
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 150ms linear;
}
.quick-actions .actions .action .label {
  font-size: 18px;
  font-family: var(--font-heading);
  max-width: 20ch;
  text-align: center;
  transition: all 150ms linear;
}
.quick-actions .actions .action:hover {
  background-color: var(--primary-300);
  color: var(--primary-100);
}
.quick-actions .actions .action:hover .icon {
  background-color: var(--primary-50);
  color: var(--primary-300);
}

.beneficiaries {
  width: 100%;
}
.beneficiaries .header {
  padding: 1rem 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.beneficiaries .header .actions .btn__add {
  all: unset;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 18px;
  background: var(--primary-500);
  color: var(--primary-50);
  padding: 12px 18px;
  border-radius: 4px;
  cursor: pointer;
}
.beneficiaries .header .actions .btn__add .icon {
  width: 24px;
  height: 24px;
}
.beneficiaries .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 320px;
}
.beneficiaries .content .empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.beneficiaries .content .empty p {
  font-size: 16px;
}
.beneficiaries .content .empty .btn__add {
  all: unset;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 18px;
  background: var(--primary-50);
  border: 1px solid var(--primary-500);
  color: var(--primary-500);
  padding: 12px 18px;
  border-radius: 4px;
  cursor: pointer;
}
.beneficiaries .content .empty .btn__add .icon {
  width: 24px;
  height: 24px;
}

.cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
.cards .title {
  font-family: var(--font-heading);
}

.cards__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
}

.card {
  background-image: linear-gradient(120deg, var(--primary-400), var(--primary-700), var(--primary-400));
  width: 100%;
  aspect-ratio: 5/3;
  border-radius: 8px;
  padding: 24px;
  color: var(--primary-100);
  font-family: var(--font-heading);
}
.card__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.card__top {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.card__top .sim-chip {
  width: 46px;
  height: auto;
}
.card__top .logo {
  width: 64px;
  height: auto;
  object-fit: cover;
  background: white;
}
.card__middle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.card__text {
  font-weight: bold;
  letter-spacing: 4px;
  font-size: 21px;
}
.card__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.card__bottom .label {
  font-size: 18px;
  font-weight: bold;
  opacity: 0.75;
}
.card__bottom .card-date {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}
.card__bottom .card-date .label {
  line-height: 16px;
  font-size: 16px;
}
.card__bottom .card-date .value {
  font-size: 32px;
  line-height: 32px;
}

.tips {
  width: 100%;
  padding: 4rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.25rem;
}
.tips .list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}

.tip {
  width: 100%;
  display: grid;
  grid-template-columns: 64px auto;
  gap: 1rem;
  padding: 16px 8px;
  cursor: pointer;
}
.tip__icon {
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tip__icon i,
.tip__icon .icon {
  width: 48px;
  height: 48px;
}
.tip__column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.tip__label {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: bold;
}
.tip__body {
  font-size: 14px;
  font-family: var(--font-body);
}
.tip:hover {
  background: var(--primary-100);
  border-radius: 8px;
}

@media (width < 960px) {
  .section-title {
    font-size: 18px;
  }

  .logo-as-link {
    gap: 1rem;
  }
  .logo-as-link .logo {
    height: auto;
    width: 76px;
  }
  .logo-as-link .label {
    font-size: 14px;
  }

  .profile {
    --avatar-size: 46px;
  }

  .wallet {
    width: 100%;
    max-height: 320px;
    aspect-ratio: 5/2;
    border-radius: 4px;
    gap: 0.125rem;
  }
  .wallet__top [role=label] {
    letter-spacing: 0.125rem;
  }
  .wallet__top [role=account-number] {
    font-size: 16px;
    letter-spacing: 0.25rem;
  }
  .wallet__top .title {
    letter-spacing: 14px;
  }
  .wallet .balance [role=label], .wallet .wallet__bottom .credit [role=label], .wallet__bottom .wallet .credit [role=label],
.wallet .wallet__bottom .debit [role=label],
.wallet__bottom .wallet .debit [role=label] {
    letter-spacing: 0.15rem;
    font-size: 10px;
  }
  .wallet .balance [role=value], .wallet .wallet__bottom .credit [role=value], .wallet__bottom .wallet .credit [role=value],
.wallet .wallet__bottom .debit [role=value],
.wallet__bottom .wallet .debit [role=value] {
    font-size: 24px;
    letter-spacing: 0.25rem;
  }
  .wallet__bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  .wallet__bottom .credit,
.wallet__bottom .debit {
    flex-basis: 50%;
  }
  .wallet__bottom .credit [role=label],
.wallet__bottom .debit [role=label] {
    font-size: 10px;
  }
  .wallet__bottom .credit [role=value],
.wallet__bottom .debit [role=value] {
    font-size: 14px !important;
  }

  .two-pane {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
  }
  .two-pane .left {
    width: 100%;
    flex-basis: 0;
    gap: 2rem;
  }
  .two-pane .right {
    box-shadow: none;
    padding: 0px;
    gap: 1rem;
  }

  .quick-actions {
    width: 100%;
  }
  .quick-actions .actions {
    gap: 1rem;
  }
  .quick-actions .actions .action {
    grid-column: 1/span 3;
    border-radius: 4px;
    gap: 0.5rem;
    padding: 1rem 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .quick-actions .actions .action .icon {
    width: 36px;
    height: 36px;
  }
  .quick-actions .actions .action .label {
    font-size: 14px;
    max-width: none;
    text-align: center;
  }
  .quick-actions .actions .action:hover {
    background-color: var(--primary-300);
    color: var(--primary-100);
  }
  .quick-actions .actions .action:hover .icon {
    background-color: var(--primary-50);
    color: var(--primary-300);
  }

  .beneficiaries {
    border: 1px solid var(--primary-50);
    border-radius: 8px;
    padding: 0.5rem 1rem;
  }
  .beneficiaries .header {
    padding: 0.5rem 0px;
  }
  .beneficiaries .header .actions .btn__add {
    gap: 0.5rem;
    font-size: 12px;
    padding: 10px 16px;
  }
  .beneficiaries .header .actions .btn__add .icon {
    width: 18px;
    height: 18px;
  }
  .beneficiaries .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 320px;
  }
  .beneficiaries .content .empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .beneficiaries .content .empty p {
    font-size: 14px;
  }
  .beneficiaries .content .empty .btn__add {
    gap: 0.5rem;
    font-size: 12px;
    padding: 10px 16px;
    cursor: pointer;
  }
  .beneficiaries .content .empty .btn__add .icon {
    width: 18px;
    height: 18px;
  }

  .cards {
    width: 100%;
    gap: 0.5rem;
    border: 1px solid var(--primary-50);
    padding: 1rem;
    border-radius: 4px;
  }

  .card {
    width: 460px;
  }
  .card__top .sim-chip {
    width: 24px;
    height: auto;
  }
  .card__top .logo {
    width: 56px;
  }
  .card__text {
    font-weight: bold;
    letter-spacing: 4px;
    font-size: 18px;
  }
  .card__bottom {
    gap: 4px;
  }
  .card__bottom .label {
    font-size: 14px;
    font-weight: bold;
    opacity: 0.75;
  }
  .card__bottom .card-date {
    gap: 8px;
  }
  .card__bottom .card-date .label {
    line-height: 14px;
    font-size: 14px;
  }
  .card__bottom .card-date .value {
    font-size: 18px;
    line-height: 18px;
  }

  .tips {
    padding: 1rem;
    border: 1px solid var(--primary-50);
    border-radius: 4px;
    gap: 0.25rem;
  }
  .tips .list {
    gap: 0.5rem;
  }

  .tip {
    grid-template-columns: 56px auto;
    gap: rem;
    padding: 8px;
    cursor: pointer;
  }
  .tip__icon {
    align-items: center;
    justify-content: flex-start;
    width: 56px;
    height: 56px;
  }
  .tip__icon i,
.tip__icon .icon {
    width: 36px;
    height: 36px;
  }
  .tip__column {
    padding: 8px 0px;
  }
  .tip__label {
    font-size: 14px;
    font-family: var(--font-heading);
    font-weight: bold;
  }
  .tip__body {
    font-size: 12px;
    font-family: var(--font-body);
  }
  .tip:hover {
    background: var(--primary-100);
    border-radius: 8px;
  }
}
@media (width < 480px) {
  .card {
    width: 100%;
  }
}
.appbar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-700);
  color: var(--primary-50);
  font-family: var(--font-heading);
}
.appbar__content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  --height: 64px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.appbar__content .mobile-menu-trigger {
  display: none;
}
.appbar__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.appbar__left .btn_menu {
  all: unset;
  background: var(--primary-100);
  color: var(--primary-700);
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
}
.appbar__left .btn_menu .icon {
  width: 24px;
  height: 24px;
}
.appbar__left .logo-as-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  color: inherit;
  text-decoration: none;
  height: var(--height);
}
.appbar__left .logo-as-link:hover {
  color: inherit;
  text-decoration: none;
}
.appbar__left .logo-as-link .logo {
  height: 100%;
  width: auto;
  background-color: white;
  display: none;
}
.appbar__left .logo-as-link .label {
  font-weight: bold;
  font-size: 16px;
  color: inherit;
  text-decoration: none;
  margin: 0;
}
.appbar__middle {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.appbar__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}
.appbar__bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

@media (width < 460px) {
  .appbar__middle .logo-as-link .logo {
    display: none;
  }
  .appbar__middle .logo-as-link .label {
    font-size: 14px;
  }
  .appbar__middle .block-langs {
    display: none;
  }
  .appbar__right .profile__trigger .profile__label {
    display: none;
  }
}
@media (width < 960px) {
  .appbar {
    padding: 0px;
  }
  .appbar__content {
    padding: 1rem;
  }
  .logo-as-link {
    gap: 1rem;
  }
  .logo-as-link .logo {
    height: auto;
    width: 76px;
  }
  .logo-as-link .label {
    font-size: 14px;
  }

  .profile {
    --avatar-size: 46px;
  }
}
@media (width > 860px) {
  .appbar__left .btn_menu {
    display: none;
  }
}
.menu {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: all 0.25s linear;
  --radius: 32px;
}
.menu__content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ffffff20;
  border-radius: var(--radius);
  margin: 2rem 0px;
}
.menu__item {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.25s linear;
  text-decoration: none !important;
  color: var(--primary-100);
  padding: 1rem 1rem;
  border-radius: var(--radius);
}
.menu__item * {
  text-decoration: none !important;
  color: inherit;
}
.menu__item .label {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.menu__item .icon {
  width: 21px;
  height: 21px;
}
.menu__item:hover {
  background: var(--primary-50);
  color: var(--primary-500);
}

@media (width < 1460px) {
  .menu__content {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    --radius: 8px;
  }
  .menu__content .menu__item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
  }
  .menu__content .menu__item .label {
    text-align: center;
  }
}
@media (width < 860px) {
  .menu {
    display: none;
  }
}
.sheet {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transition: all 150ms ease-in-out;
  z-index: 998;
  --padding: 0.5rem;
}
.sheet__overlay {
  width: 100%;
  height: 100%;
  background: #00000010;
  backdrop-filter: blur(4px);
}
.sheet__content {
  background-color: var(--primary-900);
  color: var(--primary-100);
  width: 400px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
  padding: var(--padding);
}
.sheet__header, .sheet__body, .sheet__footer {
  padding: var(--padding);
  width: 100%;
}
.sheet[data-state=closed] {
  transform: translate(-100%);
  opacity: 0;
}
.sheet[data-state=open] {
  transform: translate(0%);
  opacity: 1;
}

.sheet__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sheet__header .app {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}
.sheet__header .app:hover {
  color: inherit;
  text-decoration: none;
}
.sheet__header .app .logo {
  height: 56px;
  width: auto;
  background-color: white;
}
.sheet__header .app .label {
  font-weight: bold;
  font-size: 18px;
  color: inherit;
}

.sheet__body .actions {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
.sheet__body .actions .action {
  width: 100%;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  transition: all 150ms linear;
  cursor: pointer;
  text-decoration: none;
  color: var(--primary-100);
}
.sheet__body .actions .action * {
  text-decoration: none;
  color: inherit;
}
.sheet__body .actions .action:hover {
  background: var(--primary-200);
  color: var(--primary-700);
  border-radius: 4px;
}
.sheet__body .actions .action .icon {
  width: 24px;
  height: 24px;
}
.sheet__body .actions .action__label {
  font-size: 14px;
}
.sheet__body .block-langs {
  padding: 0rem 1rem;
}

@media (width < 460px) {
  .sheet .sheet__content {
    width: 85%;
  }
}
.langs.show {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.langs.show .menu-item.lang {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  font-family: inherit;
  transition: all 150ms linear;
}
.langs.show .menu-item.lang .lang__symbol {
  width: 24px;
  height: 24px;
}
.langs.show .menu-item.lang .lang__label {
  font-size: 18px;
}
.langs.show .menu-item.lang:hover {
  background: var(--primary-400);
  color: var(--primary-50);
  border-radius: 4px;
}

/*# sourceMappingURL=index.css.map */