@font-face {
  font-family: 'JTMarnie';
  src: url('../fonts/jtmarnie-bold-webfont.woff2') format('woff2'),
    url('../fonts/jtmarnie-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'JTMarnie';
  src: url('../fonts/jtmarnie-medium-webfont.woff2') format('woff2'),
    url('../fonts/jtmarnie-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* VARIABLES */

:root {
  --width: 1320px;
  --color-staking: #6495ed;
  --color-staking-dark: #2e73ee;
  --color-staking-light: #80a9f2;
  --color-pink: #e72076;
  --color-grey: #606a71;
  --color-grey-dark: #20323f;
  --color-grey-medium: #99A0A4;
  --color-grey-light: #e6e6e6;
  --color-grey-1: #929ea7;
  --color-green: #78d088;
  --color-blue: #78c9dd;
  --color-red: #cf4040;
  --color-orange: #f4b253;
  --color-selected: #f9f7f7;
  --color-brand: var(--color-pink);
  --color-brand-light: #f5a6c8;
  --color-brand-dark: #c91563;
  --color-text: var(--color-grey-dark);
  --color-success: var(--color-green);
  --color-warning: var(--color-orange);
  --color-error: var(--color-red);
  --color-info: var(--color-blue);
  --color-border: var(--color-grey-light);
  --color-placeholder: var(--color-grey-1);
  --color-tooltip-background: #3e4042;
  --color-nufi-primary: #BAE440;
  --color-nufi-secondary: #212121;
  --color-nufi-background: #292929;
  --color-nufi-text: rgba(255,255,255,.7);
  --transition-easing: ease-in-out;
  --transition-time: 0.25s;
}

/* NORMALIZE */

* {
  box-sizing: border-box;
}

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

* *:focus, *:hover{
  outline: none;
}

html {
  height: 100%;
  font-size: 14px;
  line-height: 24px;
  overflow-y: scroll !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: JTMarnie, Arial, Helvetica, sans-serif;
  height: 100%;
  background-color: #fcfcfc;
  color: var(--color-text);
  -webkit-overflow-scrolling: touch;
}

/* TYPOGRAPHY */

h2 {
  font-weight: normal;
  margin: 0;
  font-size: 32px;
  line-height: 48px;
}

h3 {
  font-weight: bold;
  margin: 0;
  font-size: 16px;
  line-height: 32px;
}

h3 {
  font-weight: bold;
  margin: 0;
  font-size: 14px;
  line-height: 24px;
}

a,
a:hover {
  color: var(--color-brand);
  text-decoration: underline;
  cursor: pointer;
}

p {
  margin: 0;
}

p.hey {
  width:100%,
}

/* UTILITIES */
.ml-8 {
  margin-left: 8px;
}

.my-6 {
  margin: 6px 0px;
}

.mb-6 {
  margin-bottom: 6px;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

.center-horizontally {
  margin-left: auto;
  margin-right: auto;
}

.center-vertically {
  margin-top: auto;
  margin-bottom: auto;
}

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

.bold {
  font-weight: bold;
}

/* COMMON */
.epoch-date-time {
  color: rgba(96, 106, 113, 0.64);
}

.nowrap {
  white-space: nowrap;
}

.desktop {
  display: block;
}

.mobile {
  display: none;
}

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

.flex-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

.shrinkable {
  min-width: 0;
}

/* SELECTABILITY */

.one-click-select {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

/* INPUTS */

.input {
  border-radius: 4px;
  border: 1px solid var(--color-border);
  padding: 12px 16px;
  font-size: 14px;
  font-family: JTMarnie, Arial, Helvetica, sans-serif;
  line-height: 32px;
  color: var(--color-text);
  background-color: white;
  transition: border-color var(--transition-easing) var(--transition-time),
    box-shadow var(--transition-easing) var(--transition-time);
}

.input:focus {
  outline: none;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
}

.input::-webkit-input-placeholder {
  color: var(--color-placeholder);
}
.input::-moz-placeholder {
  color: var(--color-placeholder);
}
.input:-ms-input-placeholder {
  color: var(--color-placeholder);
}
.input:-moz-placeholder {
  color: var(--color-placeholder);
}

.input.error {
  border-color: var(--color-error);
}

.input.fullwidth {
  width: 100%;
}

.input.auth {
  margin-bottom: 24px;
}

.input.fullwidth {
  width: 100%;
}

.input.export {
  margin-bottom: 32px;
}

.input.send-address {
  margin-bottom: 32px;
}

.input.send-amount {
  border: none;
  padding: 0;
  display: block;
  width: 100%;
}

.input.send-amount:focus {
  box-shadow: none;
}

.input.dropdown {
  background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  background-size: 0.7em;
  background-position: calc(100% - 1.3em) center;
  background-repeat: no-repeat;
}

.input-wrapper {
  border-radius: 4px;
  border: 1px solid var(--color-border);
  padding: 12px 62px 12px 16px;
  position: relative;
}

.input-wrapper .button.send-max {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
}

.input-wrapper-percent {
  border-radius: 4px;
  border: 1px solid var(--color-border);
  margin-left: 12px;
  position: relative;
  height: 58px;
}

.input-wrapper-percent .percent {
  position: absolute;
  top: 16px;
  right: 40px;
}

.textarea {
  font-family: JTMarnie, Arial, Helvetica, sans-serif;
}

/* BUTTONS */

.button {
  font-family: JTMarnie, Arial, Helvetica, sans-serif;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 32px;
  font-weight: bold;
  border: none;
  display: inline-block;
  text-decoration: none;
  outline:none;
}

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

.button.primary {
  background-color: var(--color-brand);
  color: white;
}

.button.primary:hover {
  background-color: var(--color-brand-dark);
}

.button.primary:disabled {
  background-color: var(--color-brand-light);
  color: white;
}

.button.primary.medium {
  min-width: 121px;
}

.button.secondary {
  padding: 10px 24px;
  color: var(--color-grey);
  border: 2px solid var(--color-border);
  font-weight: normal;
  background-color: white;
  font-size: 14px;
}

.button.secondary:disabled {
  border-color: var(--color-border);
  color: var(--color-placeholder);
}

.button.secondary:disabled svg path {
  fill: var(--color-placeholder);
}

.button.secondary:disabled:hover {
  background-color: var(--color-brand-light);
  color: #fff;
}

.button.secondary:disabled:hover svg path {
  fill: #fff;
}

.button.secondary:hover {
  color: var(--color-brand);
}

.button.outline {
  background-color: white;
  color: var(--color-brand);
  border: 2px solid var(--color-brand);
}

.button.outline:hover {
  background-color: var(--color-brand);
  color: white;
}

.button.grey {
  background-color: var(--color-grey-light);
  color: white;
}

.button.small {
  padding: 8px 16px;
}

.button.fullwidth {
  width: 100%;
}

.button.navbar {
  margin-left: 16px;
  padding: 6px 24px;
  width: 206px;
}

.button.secondary.balance {
  width: 154px;
  line-height: 24px;
}

.button.secondary.refresh {
  padding: 10px 24px 10px 58px;
  position: relative;
}

.button.secondary.refresh::before {
  content: '';
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background-image: url('../assets/refresh_button_symbol.svg');
}

.button.secondary.refresh:hover::before {
  background-image: url('../assets/refresh_button_symbol_active.svg');
}

.button.secondary.withdraw {
  padding: 10px 24px 10px 58px;
  position: relative;
}

.button.secondary.withdraw::before {
  content: '';
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background-image: url('../assets/cash-stack.svg');
}

.button.secondary.withdraw:hover::before {
  background-image: url('../assets/cash-stack_active.svg');
}

.button.secondary.convert {
  padding: 10px 20px;
  line-height: 24px;
}

.button.secondary.convert::before {
  content: 'Convert to stakeable'
}

.button.secondary.logout {
  margin-left: 16px;
  padding: 7px 24px 8px 56px;
  position: relative;
}

.button.secondary.logout::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  margin: auto;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../assets/logout_symbol.svg');
}

.button.secondary.logout:hover::before {
  background-image: url('../assets/logout_symbol_active.svg');
}

.button.secondary.ledger-webusb {
  margin-top: 0px;
}

.authentication-paragraph.small.ledger-webusb {
  margin-top: 8px;
}

.authentication-wallet .button {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.authentication-button-label {
  flex-grow: 1;
  white-space: nowrap;
}

.bitbox-logo-container {
  flex-grow: 1;
  padding-left: 10px;
  position: relative;
  width: 86px;
  height: 21px;
}

.trezor-logo-container {
  flex-grow: 1;
  padding-left: 10px;
  position: relative;
  width: 86px;
  height: 22px;
}

.ledger-logo-container {
  flex-grow: 1;
  padding-left: 10px;
  position: relative;
  width: 86px;
  height: 20px;
}

.button.send-max {
  padding: 0;
  background: none;
  font-size: 14px;
  color: var(--color-brand);
  text-decoration: none;
  margin-left: 16px;
  font-weight: normal;
}

.button.send-max:enabled::after {
  content: "";
  position: absolute;
  top: 60%;
  height: 1px;
  width: 100%;
  left: 0%;
  background-color: var(--color-brand);
}

.button.send-max:disabled {
  color: var(--color-grey-light);
}

.button.send-error {
  position: absolute;
  right: 0;
}

.send-values .button svg {
  width: 8px;
}

.button.send-max svg path {
  fill: var(--color-brand);
}

.button.send-max:disabled svg path {
  fill: var(--color-grey-light);
}

.button.close {
  background-image: url('../assets/close_icon.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  padding: 0;
}

.button.account-switch {
  background-image: url('../assets/switch-icon.svg');
  text-indent: -9999px;
  background-position: center;
  background-size: 16px;
  background-position: center;
  background-position-x: right;
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  padding: 0;
  margin-top: -16px;
  margin-bottom: -16px;
  margin-right: 16px;
}

/* ACCORDIONS */

.accordion {
  cursor: pointer;
}

.accordion-panel {
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.accordion-panel.hidden {
  max-height: 0;
}

.accordion-panel.shown {
  max-height: 600px;
}

.accordion-icon {
  margin-top: 6px;
  transform-origin: 50% 37%;
  transition: transform 0.5s ease-out;
}

.accordion-icon.hidden {
  transform: rotate(0deg);
}

.accordion-icon.shown {
  transform: rotate(180deg);
}

/* SEARCHABLE SELECT */

.searchable-select-wrapper {
  position: relative;
  min-width: 0;
}

.searchable-select-wrapper.no-margin {
  margin-bottom: 0;
}

.searchable-select {
  position: relative;
  cursor: pointer;
}

.searchable-select .wrapper{
  display: flex;
  min-width: 0;
  padding-right: 16px;
}

.searchable-select .hash{
  display: flex;
  padding-left: 4px;
  min-width: 0;
  color: var(--color-grey-medium);
}

.searchable-select.focus {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
}

.searchable-select-dropdown {
  position: absolute;
  width: 100%;
  min-width: 0;
  max-height: 331px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: pointer;
  /* transition: max-height 0.25s ease-out; */
  background-color: white;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  z-index: 1;
}

.searchable-select-dropdown.modal-dropdown {
  right: 0px;
}

.searchable-select-dropdown.hide {
  max-height: 0px;
}

.searchable-select-input {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-left: 12px;
  font-size: 14px;
  line-height: 16px;
  padding-top: 13px;
  padding-bottom: 13px;
  border: none;
  background-color: white;
  z-index: 1;
  font-family: JTMarnie, Arial, Helvetica, sans-serif;
}

.searchable-select-input:focus {
  outline: none;
}

.searchable-select-item {
  padding-left: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: white;
}

.searchable-select-item:hover {
  background-color: var(--color-grey-light);
}

.searchable-select-item.hide {
  display: none;
}

.multi-asset-item {
  display: flex;
  flex-direction: column;
}

.multi-asset-name-amount {
  display: flex;
  justify-content: space-between;
}

.multi-asset-name {
  display: flex;
  align-items: center;
  margin: unset;
}

.multi-asset-amount {
  margin: unset;
  padding-right: 12px;
}

.searchable-select-label {
  position: absolute;
  top: -10px;
  left: 12px;
  padding-left: 4px;
  width: 6.6em;
  background: white;
  z-index: 1;
}

/* FORM GLOBAL */

.form-message-field {
  margin-top: 16px;
  height: 24px;
}

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

.form-alert.success {
  color: var(--color-green);
}

.form-alert.error {
  color: var(--color-error);
}
/* TOOLTIP */

button[data-balloon] {
  overflow: visible;
}

[data-balloon] {
  position: relative;
  cursor: pointer;
}

[data-balloon]::after {
  filter: alpha(opacity=0);
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.18s ease-out 0.18s;
  -moz-transition: all 0.18s ease-out 0.18s;
  -ms-transition: all 0.18s ease-out 0.18s;
  -o-transition: all 0.18s ease-out 0.18s;
  transition: all 0.18s ease-out 0.18s;
  background: rgba(62, 64, 66, 0.96);
  border-radius: 4px;
  color: #fff;
  content: attr(data-balloon);
  padding: 8px;
  position: absolute;
  white-space: pre;
  z-index: 10;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
  text-align: center;
  min-width: 280px;
  white-space: pre-wrap;
}

.wide-data-balloon[data-balloon]::after {
  min-width: 480px;
}

.thin-data-balloon[data-balloon]::after {
  min-width: unset;
  white-space: pre;
}

[data-balloon]::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 8px 0 8px;
  border-color: rgba(62, 64, 66, 0.96) transparent transparent transparent;
  filter: alpha(opacity=0);
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.18s ease-out 0.18s;
  -moz-transition: all 0.18s ease-out 0.18s;
  -ms-transition: all 0.18s ease-out 0.18s;
  -o-transition: all 0.18s ease-out 0.18s;
  transition: all 0.18s ease-out 0.18s;
  content: '';
  position: absolute;
  z-index: 10;
}

[data-balloon]:not([data-balloon-visible]):hover::before,
[data-balloon]:not([data-balloon-visible]):hover::after,
[data-balloon][data-balloon-visible='true']::before,
[data-balloon][data-balloon-visible='true']::after {
  filter: alpha(opacity=100);
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  pointer-events: auto;
}

[data-balloon]::after {
  bottom: 100%;
  left: 0;
  -webkit-transform: translate(0, 10px);
  -moz-transform: translate(0, 10px);
  -ms-transform: translate(0, 10px);
  transform: translate(0, 10px);
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}

[data-balloon]::before {
  bottom: 100%;
  left: 8px;
  margin-bottom: 4px;
  -webkit-transform: translate(0, 10px);
  -moz-transform: translate(0, 10px);
  -ms-transform: translate(0, 10px);
  transform: translate(0, 10px);
}

[data-balloon]:not([data-balloon-visible]):hover::after,
[data-balloon][data-balloon-visible='true']::after {
  -webkit-transform: translate(0, -8px);
  -moz-transform: translate(0, -8px);
  -ms-transform: translate(0, -8px);
  transform: translate(0, -8px);
}

[data-balloon]:not([data-balloon-visible]):hover::before,
[data-balloon][data-balloon-visible='true']::before {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.nufi-tooltip-wrapper {
  width: 100%;
  text-align: center;
  padding: 20px 0;
  color: var(--color-grey)
}

/* ALERTS */

.alert {
  position: relative;
  border: 1px solid transparent;
  padding: 24px 24px 24px 64px;
  background-color: white;
  border-radius: 2px;
}

.alert::before {
  content: '';
  position: absolute;
  left: 24px;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.alert.error {
  border-color: var(--color-error);
}

.alert.error::before {
  background-image: url('../assets/alert_icon_danger.svg');
}

.alert.error.event {
  margin-top: unset;
}

.alert.success {
  border-color: var(--color-success);
}

.alert.success::before {
  background-image: url('../assets/alert_icon_success.svg');
}

.alert.warning {
  border-color: var(--color-warning);
}

.alert.warning::before {
  background-image: url('../assets/alert_icon_warning.svg');
}

.alert.info {
  border-color: var(--color-info);
}

.alert.info:before {
  background-image: url('../assets/alert_icon_info.svg');
}

.alert.nufi-announcement:before {
  background-image: url('../assets/alert_icon_nufi.svg');
}

.alert.nufi-announcement > .alert-content {
  max-width: fit-content;
  max-height: 300px;
  padding-right: 5px;
}

.alert.news {
  border-color: var(--color-brand-dark);
  padding: 24px;
}

.alert-content {
  text-align: left;
  max-height: 220px;
  overflow: auto;
}

.alert.sidebar {
  margin-left: -40px;
  padding: 0 0 0 40px;
  border-color: transparent;
  background-color: transparent;
}

.alert.sidebar:before {
  left: 0;
}

.alert .sidebar-link {
  display: inline;
}

.alert.auth {
  margin-bottom: 24px;
}

/* NAVIGATION */

.navbar {
  padding: 32px 0 48px 0;
  z-index: 2;
}

.navbar.demo {
  position: relative;
}

.navbar.demo::before {
  content: '';
  width: 100%;
  height: 4px;
  background-color: var(--color-error);
  position: absolute;
  top: 0;
}

.navbar.authed {
  padding-bottom: 16px;
}

.navbar-heading {
  line-height: 0;
  margin: 0;
}

.navbar-logo {
  max-width: 158px;
}

.navbar-wrapper {
  max-width: var(--width);
  padding: 0 16px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-content {
  flex: 1;
  justify-content: flex-end;
  display: flex;
  align-items: center;
}

.navbar-demo {
  margin-left: 16px;
  padding: 8px 16px;
  background-color: var(--color-error);
  color: white;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.6px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 2px;
  position: relative;
}

.navbar-demo::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 4px 6px 0;
  border-color: transparent var(--color-error) transparent;
}

.navbar-version {
  margin-left: 32px;
  color: var(--color-grey-dark);
  font-size: 14px;
  line-height: 32px;
}

.navbar-link {
  margin-right: 40px;
  font-size: 14px;
  line-height: 32px;
  text-decoration: none;
  color: var(--color-grey-dark);
  position: relative;
}

.navbar-link.primary::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 6px;
  height: 6px;
  background-color: var(--color-brand);
  border-radius: 50%;
}

.navbar-link:hover {
  color: var(--color-brand);
  text-decoration: none;
}

.navbar-link.export {
  display: none;
}

.navbar-title {
  width: 0;
  height: 0;
  text-indent: -999999px;
  display: inline-block;
}

/* BRANDING */

.branding-label {
  color: white;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.6px;
}

.branding-label.dark {
  color: var(--color-grey);
}

.branding-logo {
  max-width: 156px;
  display: block;
}

/* MODALS */

.modal {
  animation: fade-in 0.5s;
  display: flex;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 50, 63, 0.64);
  padding-right: 0 !important;
}

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 17;
}

.modal-body {
  position: relative;
  z-index: 21;
  background-color: white;
  margin: auto;
  padding: 56px;
  width: 100%;
  max-width: 952px;
  max-height: 95%;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0);
  border-radius: 2px;
  overflow-y: auto;
}

.modal-body.send {
  width: max(540px, calc(min(var(--width), 100%) * 0.5 - 44px));
}

.modal-body.delegate {
  width: calc(min(var(--width), 100%) * 0.5 - 44px);
}

.modal-close {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 32px;
  right: 32px;
}

.modal-close:hover {
  cursor: pointer;
}

.modal-paragraph {
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  white-space: pre-wrap;
}

.modal-instructions {
  margin: 20px 24px;
}

.modal-paragraph.bigger {
  font-size: 16px;
  line-height: 32px;
}

.modal-footer {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-footer .modal-paragraph {
  margin-top: 40px;
}

.modal-footer.send-error {
  flex-direction: row;
  position: relative;
  align-items: normal;
}

.modal-body .alert {
  margin-top: 40px;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-head .modal-warning {
  min-width: 185px;
  margin-top: 16px;
}

.modal-warning {
  font-size: 11px;
  line-height: 16px;
  font-weight: bold;
  letter-spacing: 0.6px;
  color: var(--color-warning);
  text-transform: uppercase;
  padding-left: 28px;
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}

.modal-warning::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/alert_icon_warning.svg');
}

.modal-mnemonic {
  position: relative;
  margin-top: 40px;
  padding: 24px 24px 24px 64px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.modal-mnemonic:before {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  top: 24px;
  left: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/input_pencil_icon.svg');
}

.modal-body.centered {
  text-align: center;
}

.modal-body.centered .modal-head {
  justify-content: center;
}

.modal-body.centered .modal-footer {
  margin-top: 40px;
}

.modal-section {
  margin-bottom: 16px;
}

.modal-content .card {
  padding: unset;
  box-shadow: unset;
}

/* MAIN PAGE */

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
}

.no-scroll {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  min-height: 100%;
  max-width: var(--width);
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  flex: 1;
  flex-wrap: wrap;
  align-content: flex-start;
}

.page-wrapper-header {
  display: flex;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-message {
  display: flex;
  justify-content: flex-end;
  margin-right: 4px;
  align-items: center;
}

.helper-text-wrapper {
  position: relative;
  margin-top: -5px;
}

.header-message-helper-text {
  position: absolute;
  bottom: -5px;
  left: 0;
}

.page-inner {
  width: 100%;
  padding-top: 72px;
  display: flex;
}

.page-main {
  width: 66%;
}

.page-demo {
  margin-top: 56px;
  text-align: center;
}

/* BANNER */

.banner {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.banner.nufi {
  width: '100%';
  padding: 0;
  justify-content: center;
}

.banner.login-nufi {
  display: block;
  padding: 0;
  margin-bottom: 25px;
}

.banner.error {
  background-color: var(--color-error);
}

.banner.saturation {
  background-color: var(--color-grey-dark);
}

.banner.delegation-offer {
  margin: -32px 0 24px 0px;
  background-color: #408c40;
  opacity: 80%;
  padding: 12px 12px;
}

.delegation-offer-text {
  color: white;
  display: block;
}

.delegation-offer-text > a {
  color: white;
}

.banner.premium {
  background-color: cornflowerblue;
  width: 100%;
  margin-bottom: 20px;
}

.banner-text {
  flex: 1;
  padding-left: 40px;
  position: relative;
}

.banner.error > .banner-text {
  font-weight: bold;
  color: white;
}

.banner.premium > .banner-text {
  font-weight: bold;
  color: white;
}

.banner.saturation > .banner-text {
  font-weight: bold;
  color: white;
}

.banner-text::before {
  content: '';
  width: 24px;
  height: 24px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: calc( 50% - 12px );
  margin-right: 16px;
  vertical-align: middle;
  background: url('../assets/icon-star.svg') no-repeat;
  background-position: center center;
}

.banner.error > .banner-text::before {
  display: none;
}

.banner.saturation > .banner-text::before {
  display: none;
}

.banner .banner-close {
  width: 20px;
  height: 20px;
  background-size: 10px 10px;
}

/* DASHBOARD */

.dashboard.desktop {
  display: flex;
  width: 100%;
}

.dashboard.mobile {
  display: none;
}

.dashboard-column.wide {
  flex: 1 1 75%;
}

.dashboard-column.narrow {
  flex: 1 1 25%;
}

.dashboard-column {
  flex: 1 1 50%;
}

.dashboard-column:first-child {
  padding-right: 28px;
}

.dashboard-column:last-child {
  padding-left: 28px;
}

.dashboard-column.account {
  display: flex;
  flex-direction: column;
  padding-left: 0px;
  padding-right: 0px;
}

.dashboard-column .card:not(:last-child) {
  margin-bottom: 56px;
}

.dashboard-column .card.compact:not(:last-child) {
  margin-bottom: 0px;
}

.dashboard-content {
  width: 100%;
}

.dashboard-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dashboard-tab {
  flex: 1;
  background: linear-gradient(
    -180deg,
    rgba(252, 252, 252, 0) 0%,
    #fcfcfc 100%,
    rgba(252, 252, 252, 1) 50%
  );
  padding: 16px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-bottom-color: var(--color-border);
  border-right-color: rgba(230, 230, 230, 0.4);
}

.dashboard-tab:last-child {
  border-right-color: transparent;
}

.dashboard-tab.selected {
  background: white;
  border-bottom-color: transparent;
  border-right-color: var(--color-border);
  border-left-color: var(--color-border);
}

.dashboard-tab:first-child.selected {
  border-left-color: transparent;
}

.dashboard-tab:last-child.selected {
  border-right-color: transparent;
}

.dashboard-tab:hover {
  cursor: pointer;
}

/* MAIN TABS */


.tabinator {
  padding-bottom: 2px;
  padding-inline-start: unset;
  padding-inline-end: unset;
  margin-block-start: unset;
  margin-block-end: unset;
}

.tabinator li {
  display: inline-block;
  position: relative;
}

.tabinator li.primary:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 14px;
  width: 6px;
  height: 6px;
  background-color: var(--color-brand);
  border-radius: 50%;
}

li.main-tab input {
  display: none;
}

li.main-tab label {
  white-space: nowrap;
  min-width: 100px;
  box-sizing: border-box;
  display: inline-block;
  padding: 15px 25px;
  color: var(--color-grey);
  width: 100%;
  text-align: center;
}

li.main-tab > input+label.selected:before {
  content:'';
  display:block;
  width:100%;
  height:24px;
  background-color:#fff;
  position:absolute;
  bottom:-4px;
  left:0;
  z-index:1;
}

li.main-tab label:hover {
  color: #888;
  cursor: pointer;
}
li.main-tab input + label.selected {
  position: relative;
  color: #000;
  background: #fff;
  border-radius: 5px 5px 0 0;
}
li.main-tab input + label.selected:after {
  display: block;
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
}

/* CARD */

.card {
  background-color: white;
  padding: 40px 56px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
}

.card-column {
  flex-grow: 1;
  width: 25%;
}

.card-column > button {
  width: 144px;
}

.card-column > .item {
  margin-top: 24px;
  margin-bottom: 4px;
}

.card-title {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 32px;
  font-weight: bold;
}

.card-title.margin-top {
  margin-top: 24px;
}

.card-title.no-margin {
  margin-bottom: unset;
}

.card-title.small-margin {
  margin-bottom: 12px;
}

.card.account-aggregated {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.card.account-aggregated > .balance {
  display: flex;
  width: 100%;
}

.card.account-aggregated > .balance .item {
  width: 26%;
  align-self: center;
}

.card.account-aggregated .refresh-wrapper {
  margin-top: auto;
  margin-bottom: auto;
}

.card.account {
  display: flex;
  align-items: center;
}

.card.account.selected {
  background-color: var(--color-selected);
}

/* ACCOUNTS*/

.accounts-wrapper {
  display: flex;
}

.account-header {
  text-align: center;
  font-size: 20px;
  padding-bottom: 8px;
  width: 144px;
}

.account.list {
  flex: 0 0 75%;
  display: flex;
  flex-direction: column;
}

.account.info {
  flex: 1 1 auto;
  padding-left: 40px;
  margin-left: 20px;
  padding-right: 24px;
}

.account.info .alert-content {
  overflow: unset;
  max-height: unset;
}

.account-button {
  width: 30px;
  height: 30px;
  padding: 0px;
  margin-top: 6px;
  margin-left: 8px;
}

.account-button .show-info::after {
  left: 72px;
  top: -4px;
}

.show-warning::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 16px;
  left: 0;
  top: 0;
  bottom: 0;
  margin-left: 5px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/alert_icon_warning.svg');
}

.account-action-buttons {
  display: flex;
  justify-items: center;
}

.account-action-buttons .account-button {
  width: 78px;
  height: 30px;
  margin-top: 6px;
  margin-right: 8px;
  font-size: 12px;
}

.account-action-buttons.desktop {
  flex-direction: column;
  margin-left: -48px;
}

.account-verify-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* AUTHENTICATION */

.authentication {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 528px;
}

.authentication-title {
  font-weight: normal;
  text-align: center;
  white-space: pre-wrap;
  margin-bottom: 56px;
}

.authentication.initial {
  padding: 80px 56px 88px 56px;
}

.authentication-content {
  flex: 1;
  padding: 56px;
}

.authentication-content.centered {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}

.authentication-content.hardware {
  display: flex;
  padding: 0;
}

.authentication-content .dropzone {
  margin-bottom: 24px;
}

.authentication-label {
  margin-bottom: 16px;
  padding-left: 8px;
  display: block;
}

.authentication-paragraph {
  margin-bottom: 40px;
}

.authentication-paragraph.small {
  font-size: 12px;
  color: var(--color-grey);
}

.authentication-content .validation-message {
  display: none;
}

.authentication-content.key-file .validation-message {
  display: block;
}

.authentication-link {
  display: block;
  margin-top: 24px;
}

.authentication-wallet {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 10px;
}

.authentication-wallet:not(:last-child)::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 242px;
  width: 1px;
  background-color: var(--color-grey-light);
}

.authentication-wallet .authentication-paragraph {
  text-align: center;
  margin-bottom: 0;
}

.authentication-wallet .button {
  margin-top: 16px;
}

.authentication-image {
  max-width: 144px;
  max-height: 178px;
}

.authentication-image-container {
  position: relative;
  padding-bottom: 202px;
  height: 0;
  overflow: hidden;
}

.authentication-wallet .authentication-image {
  margin-bottom: 24px;
}
.authentication-buttons {
  display: none;
}

.authentication-hw-bulk-public-export {
  padding-bottom: 24px;
  margin: auto;
}


/* AUTHENTICATION TABS */

.auth-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.auth-tab {
  flex: 1;
  background: linear-gradient(
    -180deg,
    rgba(252, 252, 252, 0) 0%,
    #fcfcfc 100%,
    rgba(252, 252, 252, 1) 50%
  );
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-bottom-color: var(--color-border);
  border-right-color: rgba(230, 230, 230, 0.4);
}

.auth-tab:last-child {
  border-right-color: transparent;
}

.auth-tab.selected {
  background: white;
  border-bottom-color: transparent;
  border-right-color: var(--color-border);
  border-left-color: var(--color-border);
}

.auth-tab:first-child.selected {
  border-left-color: transparent;
}

.auth-tab:last-child.selected {
  border-right-color: transparent;
}

.auth-tab:hover {
  cursor: pointer;
}

.auth-tab-text {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.auth-tab-text::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 16px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.auth-tab-text.mnemonic::before {
  background-image: url('../assets/tab_icon_mnemonic_grey.svg');
}

.auth-tab-text.hw-wallet::before {
  background-image: url('../assets/tab_icon_shield_grey.svg');
}

.auth-tab-text.file::before {
  background-image: url('../assets/tab_icon_file_grey.svg');
}

.auth-tab.selected .auth-tab-text.mnemonic::before {
  background-image: url('../assets/tab_icon_mnemonic.svg');
}

.auth-tab.selected .auth-tab-text.hw-wallet::before {
  background-image: url('../assets/tab_icon_shield.svg');
}

.auth-tab.selected .auth-tab-text.file::before {
  background-image: url('../assets/tab_icon_file.svg');
}

.auth-tab.recommended .auth-tab-text::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 16px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../assets/alert_icon_success.svg');
}

/* AUTHENTICATION OPTIONS */

.auth-options {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.auth-option {
  padding: 104px 20px 48px 20px;
  position: relative;
  background-color: white;
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--color-border);
  transition: background-color var(--transition-easing) var(--transition-time);
}

.auth-option:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.auth-option:last-child {
  border-right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.auth-option::before {
  content: '';
  width: 24px;
  height: 30px;
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.auth-option:hover {
  background-color: #fcfcfc;
}

.auth-option:hover .auth-option-title {
  text-decoration: underline;
}

.auth-option.mnemonic::before {
  background-image: url('../assets/cursor_icon.svg');
}

.auth-option.hw-wallet::before {
  background-image: url('../assets/shield_icon.svg');
}

.auth-option.file::before {
  background-image: url('../assets/file_icon.svg');
}

.auth-option:hover {
  cursor: pointer;
}

.auth-option-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 32px;
  margin: 0;
}

.auth-option-text {
  color: var(--color-grey);
}

/* TAGS */

.tag {
  position: relative;
}

.tag.fastest {
  color: var(--color-blue);
}

.tag.recommended {
  color: var(--color-green);
}

.tag.warning {
  color: var(--color-warning);
}

.tag.big {
  min-width: 185px;
  margin-top: 10px;
}

.tag.auth {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
}

.tag-text {
  position: relative;
  padding-left: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.6px;
}

.tag-text::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.tag.big .tag-text {
  padding-left: 28px;
}

.tag.big .tag-text::before {
  width: 20px;
  height: 20px;
}

.tag.fastest .tag-text::before {
  background-image: url('../assets/alert_icon_lightning.svg');
}

.tag.recommended .tag-text::before {
  background-image: url('../assets/alert_icon_success.svg');
}

.tag.warning .tag-text::before {
  background-image: url('../assets/alert_icon_warning.svg');
}

/* FOOTER */

.footer {
  background-image: url('../assets/footer_bg.svg');
  background-position: center;
  background-size: cover;
  padding: 56px 0 32px 0;
  margin-top: 56px;
}

.footer-wrapper {
  max-width: var(--width);
  padding: 0 16px;
  margin: 0 auto;
}

.footer-row {
  display: flex;
  justify-content: space-between;
}

.footer .branding {
  margin-bottom: 48px;
}

.footer .conversion {
  margin-top: 32px;
  margin-bottom: 8px;
}

.footer .social {
  width: 60%;
}

.footer .donations {
  width: 30%;
}

.conversion {
  color: white;
  padding-left: 40px;
  position: relative;
}

.conversion:before {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  background-image: url('../assets/conversion_icon.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.conversion-link {
  color: white;
}

.social {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.social-link {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 0 0 40px;
  position: relative;
  margin-bottom: 24px;
  color: white;
  background-color: transparent;
  border: 0;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px;
  font-family: inherit;
}

.social-link:hover {
  color: var(--color-brand)
}

.social-link:before {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.social-link.email:before {
  background-image: url('../assets/social_icon_email.svg');
}

.social-link.twitter:before {
  background-image: url('../assets/social_icon_twitter.svg');
}

.social-link.telegram:before {
  background-image: url('../assets/social_icon_telegram.svg');
}

.social-link.github:before {
  background-image: url('../assets/social_icon_github.svg');
}

.donations {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.donations-title {
  color: white;
  font-weight: bold;
  flex: 1 1 100%;
  margin-bottom: 24px;
}

.donations-item {
  color: white;
  position: relative;
  padding-left: 40px;
  margin-right: 32px;
}

.donations-item:before {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.donations-item.bitcoin:before {
  background-image: url('../assets/donation_icon_bitcoin.svg');
}

.donations-item.ada:before {
  background-image: url('../assets/donation_icon_ada.svg');
}

.donations-item.ether:before {
  background-image: url('../assets/donation_icon_ether.svg');
}

/* DROPZONE */

.dropzone {
  border-radius: 4px;
  border: 2px dashed var(--color-grey-light);
  background-color: #fcfcfc;
  transition: border-color var(--transition-easing) var(--transition-time);
}

.dropzone.error {
  border-color: var(--color-error);
}

.dropzone-file-input {
  display: none;
}

.dropzone-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dropzone-content.has-file {
  padding: 52px 40px;
}

.dropzone-paragraph {
  margin-bottom: 16px;
}

.dropzone-filename {
  margin-bottom: 16px;
  padding-left: 24px;
  text-align: center;
  position: relative;
  color: var(--color-grey);
}

.dropzone-filename::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 15px;
  background-image: url('../assets/file_icon.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.dropzone-link {
  color: var(--color-brand);
  text-decoration: underline;
}

.dropzone-link:hover {
  cursor: pointer;
}

/* VALIDATION */

.validation-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.validation-error-field {
  padding: 12px 16px;
  margin: -24px 0px 8px;
}

.validation-message {
  padding-left: 40px;
  flex: 1;
}

.validation-message.send {
  padding-left: 64px;
  color: var(--color-grey);
}

.validation-message.error {
  color: var(--color-error);
}

.validation-message.warning {
  color: var(--color-warning);
}

.validation-message.transaction-success {
  padding-left: 104px;
  position: relative;
  color: var(--color-success);
}

.validation-message.transaction-success::before {
  content: '';
  position: absolute;
  left: 67px;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../assets/alert_icon_success.svg');
}

.green-checkmark {
  position: inherit;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../assets/alert_icon_success.svg');
}

.red-warning {
  position: inherit;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../assets/alert_icon_danger.svg');
}

.validation-message.transaction-success.header::before {
  display: none;
}

/* SIDEBAR */

.sidebar {
  flex: 1;
  margin-left: 5%;
  padding-left: 40px;
  padding-top: 105px;
}

.sidebar-link {
  display: block;
}

.sidebar-item {
  margin-bottom: 24px;
}

.sidebar-item.spacy {
  margin-bottom: 64px;
}
.sidebar.login {
  padding-top: 0px;
}

/* STAKING BALANCES */

.staking-balances-title {
  margin-bottom: 0;
}

.staking-balances-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.staking-balances-amount {
  margin-left: 16px;
  font-size: 20px;
  color: var(--color-brand);
  padding: 12px 20px 12px 0px;
  position: relative;
}

.staking-balances-amount svg {
  margin-left: 12px;
  width: 12px;
}

.staking-balances-amount svg path {
  fill: var(--color-brand);
}

.balance-amount-staking {
  font-size: 32px;
  line-height: 48px;
  color: var(--color-brand);
  padding-right: 34px;
  position: relative;
}

.balance-amount-staking svg {
  margin-left: 12px;
  width: 18px;
}

.balance-amount-staking svg path {
  fill: var(--color-brand);
}

.total-balance-wrapper {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.staking-balance-next-reward {
  color: var(--color-grey-medium);
  position: relative;
  font-size: 14px;
}

/* BALANCE */

.balance-amount {
  display: flex;
  font-size: 32px;
  line-height: 48px;
  color: var(--color-brand);
  padding-right: 34px;
  position: relative;
}

.balance-amount.small {
  font-size: 24px;
}

.balance-amount svg {
  margin-left: 12px;
  width: 18px;
}

.balance-amount.small svg {
  margin-left: 12px;
  width: 14px;
}


.balance-amount svg path {
  fill: var(--color-brand);
}

.conversions {
  display: flex;
  align-items: center;
}

.conversions-item + .conversions-item {
  margin-left: 15px;
}

.buy-ada-partner-wrapper {
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.buy-ada-partner-logo {
  margin-left: 24px;
  font-size: 14px;
  color: var(--color-grey-medium);
  padding-bottom: 4px;
}

.buy-ada-partner-logo-img {
  display: block;
  max-width: 100%;
}

/* ADDRESSES */

.addresses {
  width: 100%;
  position: relative;
}

.addresses-title {
  margin-bottom: 24px;
}

.addresses-content {
  position: relative;
}

.address {
  padding: 24px;
  border-top: 1px solid var(--color-border);
}

.address:last-child {
  padding-bottom: 0px;
}

.address .label {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.address .value {
  display: flex;
  color: var(--color-grey);
  word-break: break-all;
}

.address.expanded {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
  background-color: var(--color-selected);
  transition: background-color 0.25s ease-out 0.25s, box-shadow 0.25s ease-out 0.25s;
}

.address:not(.expanded) {
  cursor: pointer;
  transition: background-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.address .expanded {
  display: flex;
  margin-left: 32px;
}

.address .explorer-links {
  margin-left: 38px;
}

.address .explorer-links.show {
  max-height: 24px;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.address .expanded.show {
  max-height: 208px;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.address .hide {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.address .expanded .details {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  margin-left: 12px;
}

.address .expanded .details .verification {
  margin-top: 74px;
}

.address .number {
  font-weight: bold;
  word-break: normal;
  margin-right: 16px;
  min-width: 22px;
}

.no-select {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.address-links {
  display: flex;
  justify-content: flex-end;
}

.address-link {
  color: var(--color-grey);
}

.address-link:last-child {
  margin-right: 0;
}

.address-link.copy {
  margin-right: auto;
}

.address-link:hover {
  color: var(--color-brand);
}

.address-link.seiza {
  margin-right: 0;
}

.address-link.adascan {
  margin-right: 24px;
}

.address:hover .address-value {
  color: var(--color-text);
}

.address:hover .copy::before {
  background-image: url('../assets/copy_symbol_active.svg');
}

.addresses .view-more {
  display: block;
  margin: 0 auto;
}

.detail {
  display: flex;
}

.detail-content {
  flex: 1;
  margin-right: 48px;
}

.detail-label {
  margin-bottom: 8px;
  color: var(--color-grey);
  line-height: 32px;
}

.detail-input {
  position: relative;
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0;
}

.detail-copy-message {
  position: absolute;
  right: 0;
  bottom: -32px;
  line-height: 32px;
  color: var(--color-grey);
}

.detail-address {
  flex: 1;
  word-break: break-all;
  padding: 12px;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

.detail-input.address {
  margin-bottom: 24px;
}

.detail-row {
  display: flex;
  align-items: flex-end;
}

.detail-row .detail-input {
  width: 287px;
  margin-right: 40px;
}

.detail-verify {
  margin-bottom: 8px;
}

.detail-derivation {
  padding: 8px 12px;
}

.detail-error {
  margin-bottom: 8px;
  color: var(--color-error);
  padding-left: 40px;
  position: relative;
}

.detail-error::before {
  width: 24px;
  height: 24px;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url('../assets/alert_icon_danger.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.detail-error .detail-verify {
  color: var(--color-error);
}

.address-copy {
  padding: 27px;
  border-left: 1px solid var(--color-border);
}

.address-copy .copy-text::before {
  width: 20px;
  height: 20px;
}

/* STAKING HISTORY */
.staking-history {
  position: relative;
  padding-right: 28px;
}

.staking-history-content {
  padding: 0;
  margin: 0;
  max-height: 680px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.staking-history-content .show-all {
  display: flex;
  justify-content: center;
}

.staking-history-item {
  padding: 24px 16px 24px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-grey);
}

.staking-history-item .margin-bottom {
  margin-bottom: 12px;
}

.staking-history-item .margin-top {
  margin-top: 12px;
}

.staking-history-item .label {
  font-size: 16px;
  font-weight: bold;
}

.staking-history-item .right {
  text-align: right;
}

.staking-history-item .wrapper {
  margin-left: 12px;
}

/* COPY */

.copy-text {
  position: relative;
  padding-left: 21px;
  color: var(--color-grey);
}

.copy-text::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/copy_symbol.svg');
}

.copy:hover .copy-text::before {
  background-image: url('../assets/copy_symbol_active.svg');
}

.copy-text.margin-left {
  margin-left: 8px;
}

/* LINK ICON */

.link {
  margin-left: 8px;
}

.link-icon {
  position: relative;
  padding-left: 21px;
  color: var(--color-grey);
}

.link-icon::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  left: 0;
  top: 0;
  bottom: 4px;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/link_icon.svg');
}

.link:hover .link-icon::before {
  background-image: url('../assets/link_icon_active.svg');
}

/* DOWNLOAD TRANSACTIONS */

.download-transaction {
  margin: 4px 16px 0px 0px;
}

.download-transactions-text {
  position: relative;
  padding-left: 21px;
  color: rgba(96, 106, 113, 0.64);
}

.download-transactions-text::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/csv_icon.svg');
}

.download-transactions-text:hover::before {
  background-image: url('../assets/csv_icon_active.svg');
}

.download-key {
  margin: 4px 16px 0px 0px;
}

.download-key-text {
  position: relative;
  padding-left: 21px;
  color: rgba(96, 106, 113, 0.64);
}

.download-key-text::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  left: 6px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/download-icon.svg');
}

/* WELCOME MODAL */

.welcome-title {
  margin-bottom: 16px;
  text-align: center;
}

.welcome-subtitle {
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  white-space: pre-wrap;
}

.welcome-articles {
  margin: 56px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 56px;
  grid-row-gap: 32px;
}

.welcome .article {
  padding-top: 56px;
  position: relative;
}

.welcome .article-icon {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.welcome .article-icon.mnemonic {
  background-image: url('../assets/cursor_icon_bounded.svg');
}

.welcome .article-icon.funds {
  background-image: url('../assets/lock_icon_bounded.svg');
}

.welcome .article-icon.wallet {
  background-image: url('../assets/shield_icon_bounded.svg');
}

.welcome .article-icon.phishing {
  background-image: url('../assets/bookmark_icon_bounded.svg');
}

.welcome-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  bottom: -56px;
  border-top: 1px solid var(--color-border);
  padding: 24px 56px;
  margin-top: 0;
  background-color: white;
}

.welcome-footer .button {
  margin-left: 64px;
}

.welcome .credits {
  display: flex;
  align-items: center;
  padding: 56px 0;
  border: solid var(--color-border);
  border-width: 1px 0;
}

.credits-paragraph {
  margin-left: 64px;
  color: var(--color-grey);
}

.article-title {
  margin-bottom: 8px;
}

.checkbox {
  display: flex;
  align-items: center;
}

.checkbox:hover {
  cursor: pointer;
}

.checkbox-indicator {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/checkbox.svg');
}

.checkbox-input {
  display: none;
}

.checkbox-input:checked + .checkbox-indicator {
  background-image: url('../assets/checkbox_checked.svg');
}

.info-date {
  font-size: large;
  margin-bottom: -32px;
  margin-top: 48px;
}

.info-separator {
  margin: 42px 0;
}

.info-spaced-paragraph {
  text-align: left;
  margin-bottom: 12px;
}

/* STAKING PAGE */

.staking-wrapper {
  max-width: 638px;
  padding: 100px 16px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
}

.staking-label {
  margin-bottom: 16px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-staking);
  position: relative;
  display: inline-block;
  line-height: 1;
}

.staking-label::before {
  content: '';
  position: absolute;
  left: -24px;
  top: -3px;
  width: 16px;
  height: 16px;
  background: url('../assets/icon-star-circled.svg') no-repeat;
  background-position: center center;
  background-size: contain;
}

.staking-title {
  margin-bottom: 24px;
}

.staking-text {
  text-align: left;
  margin-bottom: 24px;
}

.wanted-text {
  text-align: left;
  margin-top: 24px;
}

.alert.wanted {
  border-color: var(--color-brand-dark);
  padding: 16px;
  word-wrap: break-word;
}

.stakepool-info {
  padding-left: 16px;
  text-align: left;
  margin-bottom: 24px;
}

.staking-form input {
  max-width: 300px;
  width: 100%;
  margin-right: 24px;
}

/* CONTACT MODAL */

.contact-form .input {
  margin-bottom: 24px;
}

.contact-form .textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 170px;
}

.contact-form-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.contact-form .button + .button {
  margin-left: 25px;
}

.contact-modal .instructions {
  margin-top: 20px;
  margin-bottom: 20px;
}

.contact-form .form-alert {
  margin-top: -15px;
}

/* SENDING-STAKING TOGGLE */

.staking-page-toggle-wrapper {
  display: flex;
  padding: 20px 0 0 40px;
}

.toggle-title {
  font-size: 14px;
  line-height: 28px;
  font-weight: bold;
}

.staking-page-toggle-switch {
  position: relative;
  display: inline-block;
  margin: 0 4px 12px 4px;
  width: 56px;
  height: 28px;
}

.staking-page-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-grey-light);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-brand);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: var(--color-staking)
}

/* DELEGATIONS */

.delegation-account {
  font-size: 20px;
  line-height: 48px;
}

.delegation-fee {
  padding-left: 16px;
  color: var(--color-text);
}

.delegation-percent {
  padding-left: 16px;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-grey);
}

.delegation-percent.valid {
  color: var(--color-green);
}

.delegation-info-row {
  margin-bottom: 32px;
  padding-top: 32px;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-row-gap: 16px;
  grid-column-gap: 96px;
  align-items: center;
  color: var(--color-grey);
  border-top: 1px solid var(--color-border);
}

.delegation-info-row .fee-label {
  justify-self: end;
  align-self: start;
}

.delegation-info-row .delegated-percent-label {
  justify-self: end;
  align-self: start;
}

.delegation-info-row svg {
  margin-left: 8px;
  width: 8px;
}

.delegation-info-row svg path {
  fill: var(--color-grey-medium);
}

.delegation-input-row {
  display: flex;
  align-items: center;
}

.delegation-input {
  border: none;
  flex: 1 1 auto;
  font-family: JTMarnie, Arial, Helvetica, sans-serif;
}

.delegation-input:focus {
  outline: none;
}

.delegation-input-label {
  position: absolute;
  top: -12px;
}

.stake-pool-info {
  margin-left: 12px;
  height: 168px;
}

.stake-pool-info.valid {
  color: var(--color-black)
}

.stake-pool-info.valid.warning {
  color: var(--color-grey)
}

.stake-pool-info.invalid {
  color: var(--color-red)
}

.input.stake-pool-percent {
  border: none;
  display: block;
  width: 100%;
}

.input.stake-pool-percent:focus {
  box-shadow: none;
}

.input.stake-pool-id {
  margin-bottom: 12px;
}

.button.revoke-delegation {
  background-color: var(--color-staking);
  font-size: 14px;
  line-height: 16px;
  margin-top: 16px
}

.button.revoke-delegation:hover {
  background-color: var(--color-staking-dark);
}

.button.revoke-delegation:disabled {
  background-color: var(--color-staking-light);
}

.stake-pool-list {
  padding: 0 0 8px 0;
  margin: 0;
}

.stake-pool-item {
  display: grid;
  /* grid-template-columns: 76% 24%; */
  padding: 24px 0px 4px 0;
  color: var(--color-grey);
}

.stake-pool-input-label {
  position: relative;
  top: 13px;
  left: 12px;
  padding-left: 4px;
  width: 12em;
  background: white;
}

.stake-pool-input-label.stake-pool-id-only {
  width: 7.3em;
}

.stake-pool-input-label .highlight {
  color: black;
}

.current-delegation-wrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.current-delegation-name {
  font-size: 14px;
  font-weight: bold;
  margin-left: 12px;
  justify-self: start;
}

.current-delegation-id {
  margin-left: 12px;
  margin-bottom: 4px;
  justify-self: start;
  color: rgba(96, 106, 113, 0.64);
  grid-column-start: 1;
  grid-column-end: 3;
  word-break: break-all;
}

.current-delegation-id span.error {
  color: red;
  font-weight: bold;
}

/* ADVANCED */
.advanced-label {
  font-weight: bold;
}

.advanced-value {
  margin-left: 12px;
  margin-bottom: 4px;
  color: rgba(96, 106, 113, 0.64);
  word-break: break-all;
}

.pool-registration-instructions .advanced-label {
  margin-top: 28px;
}

/* TRANSACTIONS */

.transactions {
  position: relative;
  padding-right: 28px;
}

.transactions::before {
  position: absolute;
  content: '';
  left: 56px;
  right: 40px;
  bottom: 40px;
  height: 40px;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  z-index: 2;
}

.transactions-content {
  padding: 0;
  margin: 0;
  max-height: 680px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.transaction-item {
  display: flex;
  padding: 24px 16px 24px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-grey);
  flex-direction: column;
}

.transaction-item .row {
  display: flex;
  justify-content: space-between;
}

.transaction-item:last-child {
  margin-bottom: 8px;
}

.transactions-content .show-all {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  cursor: pointer;
}

.transaction-date {
  align-self: center;
}

.transaction-amount {
  line-height: 32px;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}

.transaction-amount.credit {
  color: var(--color-success);
}

.transaction-amount.credit svg path {
  fill: var(--color-success);
}

.transaction-amount.debit {
  color: var(--color-error);
}

.transaction-amount.debit svg path {
  fill: var(--color-error);
}

.transaction-amount.withdraw {
  color: var(--color-staking-dark);
}

.transaction-amount svg {
  margin-left: 6px;
  height: 13px;
}

.transaction-address {
  justify-self: start;
  color: rgba(96, 106, 113, 0.64);
}

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

.transaction-fee svg {
  margin-left: 6px;
  height: 12px;
}

.transaction-fee svg path {
  fill: var(--color-grey)
}

.multi-asset-amount {
  text-align: right;
  font-weight: bold;
}

.credit {
  color: var(--color-success);
}

.debit {
  color: var(--color-error);
}

.multi-asset-hash {
  display: flex;
  padding-right: 128px;
}

.transactions-empty {
  color: var(--color-grey);
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.raw-transaction {
  padding: 16px;
  word-wrap: break-word;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.transactions-header {
  display: flex;
  justify-content: space-between;
}

/* SEND */

.send-values {
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-row-gap: 32px;
  grid-column-gap: 96px;
  align-items: center;
  color: var(--color-grey);
}

.send-values.dropdowns {
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-row-gap: 16px;
  grid-column-gap: 96px;
  align-items: center;
  color: var(--color-grey);
}

.send-label {
  justify-self: end;
  padding-right: 16px;
}

.ada-label {
  padding-right: 16px;
  position: relative;
  color: var(--color-grey);
  font-size: 14px;
  line-height: 32px;
}

.ada-label:not(.token)::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 12px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  margin-left: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/ada_symbol_grey.svg');
}

.account-label {
  position: relative;
  color: var(--color-grey);
  font-size: 14px;
  line-height: 32px;
  align-self: center;
  justify-self: end;
  padding-right: 16px;
}

.show-info::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  left: 0;
  top: -1px;
  bottom: 0;
  margin-left: 5px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../assets/question_symbol.svg');
}

.show-info.show-info-start{
  width: 20px;
  height: 15px;
  left: 0;
  top: -1px;
  bottom: 0;
  display: inline-block;
}

.show-info.show-info-start::after {
  width: 100%;
  height: 100%;
  margin-left: 0px;
}

.delegation.field-na {
  color: var(--color-error);
}

.delegation.stake-pool-id {
  word-break: break-all;
}

.delegation.show-info::after {
  position: relative;
  float: right;
}

.send-values .ada-label {
  justify-self: end;
  align-self: start;
}

.ada-label.amount {
  align-self: center;
}

.send-fee {
  padding-left: 16px;
  color: var(--color-text);
}

.send-raw {
  color: rgba(96, 106, 113, 0.64);
  margin-top: 40px;
  display: inline-block;
}

.send .conversions {
  justify-content: space-between;
  color: var(--color-grey);
  padding-left: 16px;
}

.send-total {
  border-top: 1px solid var(--color-border);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 80px auto;
  grid-column-gap: 96px;
  align-items: center;
  text-align: right;
}

.send-total-ada {
  display: flex;
  flex-wrap: wrap;
  padding-left: 16px;
  text-align: left;
  font-size: 24px;
}

.send-total-ada svg, .send-total-ada img {
  position: relative;
  top: -2px;
  margin-left: 6px;
  height: 18px !important;
  width: unset !important;
}

.send-total-title {
  font-weight: bold;
}

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

.send-total .ma-ada-fees {
  text-align: left;
  padding-left: 16px;
  color: var(--color-grey);
}

.send-total .ma-ada-fees svg {
  padding-left: 2px;
  height: 10px;
}

.send-total .ma-ada-fees svg path {
  fill: var(--color-grey);
}

.review {
  display: grid;
  grid-template-columns: 112px 1fr;
  grid-row-gap: 8px;
  grid-column-gap: 56px;
  line-height: 32px;
  margin: 32px 0 64px 0;
}

.review-label {
  color: var(--color-grey);
  font-size: 14px;
  line-height: 32px;
}

.review-value {
  display: flex;
  align-items: center;
}

.review-value svg, .review-value img {
  position: relative;
  top: -2px;
  margin-left: 6px;
}

.review .ada-label {
  align-self: start;
  justify-self: start;
}

.review-address {
  margin-bottom: 24px;
  word-break: break-all;
}

.review-address-verification {
  float: right;
}

.review-fee {
  margin-bottom: 24px;
  position: relative;
}

.review-fee::before {
  content: '';
  height: 1px;
  width: 200px;
  position: absolute;
  left: -168px;
  bottom: -16px;
  background-color: var(--color-grey-light);
}

.review-total {
  font-weight: bold;
  color: var(--color-grey-dark);
}

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

.review-bottom .button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.review-cancel {
  color: var(--color-grey);
}

.review-bottom .button:first-child {
  margin-bottom: 32px;
}

/* MULTI ASSETS SCREEN: START */
.mobile-multi-assets-page-wrapper {
  margin-top: 32px;
  margin-bottom: 32px;
}

.multi-asset-page-copy-on-click {
  display: flex;
}

.multi-asset-page-policy .multi-asset-hash {
  padding-right: 0;
  max-width: calc(100% - 150px);
}

.multi-asset-page-item {
  border-top: 1px solid var(--color-border);
  padding-bottom: 8px;
}

.multi-assets-page-list {
  /* Hack due to Tooltip being cut due to overflow property */
  padding-top: 12px;
  margin-top: -12px;

  border-bottom: 1px solid var(--color-border);
  max-height: 400px;
  overflow: auto;
}

.multi-asset-page-policy {
  color: var(--color-grey);
}
/* MULTI ASSETS SCREEN: END */

/* ANIMATIONS */

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

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

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* LOADING OVERLAY */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fade-in 0.5s;
  background-color: rgba(32, 50, 64, 0.64);
}

.loading-message {
  margin-top: 16px;
  font-size: 16px;
  line-height: 32px;
  font-weight: bold;
  color: white;
  z-index: 15;
}

.loading-message.black {
  font-size: 14px;
  line-height: 32px;
  font-weight: bold;
  color: black;
  z-index: 15;
  margin-top: 3px;
  margin-right: 12px;
}

.loading-helper-text {
  font-size: 11px;
  color: var(--color-grey);
  line-height: 1;
}

.spinner {
  display: block;
  height: 40px;
  width: 40px;
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}

.spinner span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 40px;
  width: 40px;
  clip: rect(24px, 40px, 40px, 0);
  -webkit-animation: rotate 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation: rotate 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  z-index: 15;
}

.spinner span::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 40px;
  width: 40px;
  border: 3px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  -webkit-animation: rotate 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation: rotate 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.spinner.pink span::before {
  border-top-color: var(--color-brand-dark);
  height: 32px;
  width: 32px;
}

.spinner span::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 40px;
  width: 40px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.spinner.pink span::after {
  border: 3px solid var(--color-brand-dark);
  height: 32px;
  width: 32px;
}

/* EXPORT */

.export.download {
  display: flex;
}

.export-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.export-title {
  margin-bottom: 0;
}

.export.download .export-title {
  font-size: 32px;
  line-height: 48px;
  font-weight: normal;
  margin-bottom: 40px;
}

.export-subtitle {
  font-size: 16px;
  line-height: 32px;
}

.export-content {
  width: 100%;
}

.export-type {
  color: var(--color-grey);
  position: relative;
  padding-left: 20px;
  margin-top: 4px;
  min-width: 88px;
}

.export-type::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 15px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../assets/file_icon.svg');
}

.export-paragraph {
  margin-bottom: 40px;
  color: var(--color-grey);
}

.export-content .validation-row {
  margin-top: 24px;
}

.export-content-bottom {
  display: flex;
  align-items: center;
}

.export-content .button + .button {
  margin-left: 24px;
}

/* VALIDATION */

.validation-row {
  display: flex;
  align-items: center;
}

.validation-message {
  padding-left: 40px;
  flex: 1;
}

.validation-message.error {
  color: var(--color-error);
}

/* Pool Owner */
.validation-error-field.pool-owner {
  margin: 0px 0px -24px;
}

.validation-message.pool-owner {
  padding-left: 0;
}

.pool-owner-content-bottom {
  margin-top: 32px;
  display: flex;
  align-items: center;
}

.pool-owner-content-bottom .button + .button {
  margin-left: 24px;
}

.review.pool-owner {
  grid-template-columns: 120px 1fr;
}


label.button.primary.disabled {
  background-color: var(--color-brand-light);
  color: white;
}

/* HINT */

.hint {
  position: relative;
  padding-left: 64px;
  margin-bottom: 56px;
}

.hint-title {
  font-size: 16px;
  line-height: 32px;
}

.hint-paragraph {
  color: var(--color-grey);
}

.hint::before {
  position: absolute;
  content: '';
  width: 30px;
  height: 30px;
  top: 8px;
  left: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hint.lose::before {
  background-image: url('../assets/lose_icon.svg');
}

.hint.share::before {
  background-image: url('../assets/eye_icon.svg');
}

.hint.backup::before {
  background-image: url('../assets/documents_icon.svg');
}

/* DROPDOWN */

.dropdown {
  position: relative;
  background-color: white;
}

.dropdown.auth {
  display: none;
}

.dropdown-items {
  display: block;
  visibility: hidden;
  opacity: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  border: 1px solid var(--color-grey-light);
  border-radius: 0 0 4px 4px;
  background-color: white;
}

.dropdown.open .dropdown-items {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.dropdown-item-text {
  position: relative;
}

.dropdown-item {
  position: relative;
  padding: 20px 16px 20px 40px;
  border-bottom: 1px solid var(--color-grey-light);
}

.dropdown-item:hover {
  cursor: pointer;
}

.dropdown-item::before {
  content: '';
  width: 12px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 16px;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.dropdown-item.mnemonic::before {
  background-image: url('../assets/cursor_icon.svg');
}

.dropdown-item.hw-wallet::before {
  background-image: url('../assets/shield_icon.svg');
}

.dropdown-item.file::before {
  background-image: url('../assets/file_icon.svg');
}

.dropdown-item.recommended .dropdown-item-text::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: -26px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../assets/alert_icon_success.svg');
}

.dropdown-item.current {
  border: 1px solid var(--color-grey-light);
  border-radius: 4px;
  padding-right: 32px;
}

.dropdown-item.current::after {
  content: '';
  width: 10px;
  height: 4px;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../assets/dropdown_caret.svg');
}

.dropdown.open .dropdown-item.current {
  border-radius: 4px 4px 0 0;
}

.dropdown-item.selected {
  background-color: #f3f3f3;
}

.dropdown-item:last-child {
  border: none;
}

/* ACCOUNT DROPDOWN */
.account-dropdown-button {
  width: 100%;
  background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-size: 0.7em;
  background-position: calc(100% - 1.3em) center;
  background-repeat: no-repeat;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  padding: 12px 16px;
  font-size: 14px;
  font-family: JTMarnie, Arial, Helvetica, sans-serif;
  line-height: 32px;
  color: var(--color-text);
  background-color: white;
  transition: border-color var(--transition-easing) var(--transition-time), box-shadow var(--transition-easing) var(--transition-time);
  text-align: start;
}

.account-dropdown-button:focus {
  outline: none;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
}

.account-dropdown {
  position: relative;
  display: inline-block;
}

.account-dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
  z-index: 1;
}

.account-dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.account-dropdown-content a:hover {
  background-color: #f1f1f1
}

.account-dropdown-content.show {
  display: block;
}

.account-dropdown-content.hide {
  display: none;
}

/* FORM GLOBAL */

.form-row {
  display: flex;
  justify-content: space-between;
}

.form-row .input {
  width: 49%;
}

.dashboard-content {
  width: 100%;
}

.dashboard-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dashboard-tab {
  flex: 1;
  background: linear-gradient(
    -180deg,
    rgba(252, 252, 252, 0) 0%,
    #fcfcfc 100%,
    rgba(252, 252, 252, 1) 50%
  );
  padding: 16px 8px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-bottom-color: var(--color-border);
  border-right-color: rgba(230, 230, 230, 0.4);
}

.dashboard-tab:last-child {
  border-right-color: transparent;
}

.dashboard-tab.selected {
  background: white;
  border-bottom-color: transparent;
  border-right-color: var(--color-border);
  border-left-color: var(--color-border);
}

.dashboard-tab:first-child.selected {
  border-left-color: transparent;
}

.dashboard-tab:last-child.selected {
  border-right-color: transparent;
}

.dashboard-tab:hover {
  cursor: pointer;
}

/* STAKE KEY DEREGISTER: (START) */
.deregister-stake-key-card {
  background: repeating-linear-gradient(
    45deg,
    #F7F7F7,
    #F7F7F7 12px,
    #FFFFFF 12px,
    #FFFFFF 20px
  );
}

.deregister-stake-key-card-disclaimer {
  margin-bottom: 8px;
  color: var(--color-grey);
}

.button.secondary.cancel-delegation {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 40px;
}

.cancel-delegation::before {
  background-image: url('../assets/alert_icon_danger.svg');
  content: '';
  position: absolute;
  left: 8px;
  top: 5px;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.button.secondary.cancel-delegation:hover {
  color: var(--color-red);
}

.review.deregister-staking-key {
  grid-template-columns: 160px 1fr;
  margin-left: 30px;
  margin-bottom: 32px;
}

.review.deregister-staking-key .review-fee::before {
  left: -220px;
  width: 310px;
}

.checkbox.deregister-stake-key-check {
  margin-bottom: 40px;
}

.modal-body .deregister-staking-key-dialog .alert {
  margin-top: 0px;
  margin-left: -22px;
  padding-top: 12px;
  padding-bottom: 12px;
  border: none;
}

/* STAKE KEY DEREGISTER: (END) */

.bitbox02-multiasset-warning {
  margin-bottom: 32px;
}
.nufi-background {
  background: var(--color-nufi-secondary);
}

/* LISTS */
.list-reset {
  margin:0;
  padding:0;
  list-style: none;
}

.list-style-check > li::before {
  content: '\2713';
  font-weight: 700;
  margin-right: 6px;
}