.CalendarDialog {
  width: 400px;
  height: 647px;
}
.CalendarDialog .Cal__Today__chevron {
  position: static;
  margin-top: 2px;
}
.CalendarDialog .Cal__Day__month {
  font-size: 11px;
}
.CalendarDialog .Cal__Header__year {
  font-size: 16px;
}
.CalendarDialog .Cal__Header__day {
  font-size: 24px;
}
.CalendarDialog .Cal__MonthList__root {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@supports (overflow-y: overlay) {
  .CalendarDialog .Cal__MonthList__root {
    overflow-y: overlay;
  }
}
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
  .CalendarDialog .Cal__MonthList__root {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
.CalendarDialog.fixMonthView .Cal__Month__label {
  opacity: 0;
}
@media (max-height: 707px) {
  .CalendarDialog {
    height: calc(100vh - 140px);
  }
}
@media (max-width: 440px) {
  .CalendarDialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 140px);
  }
}

.Icon {
  display: inline-block;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
.Icon.disabled {
  pointer-events: none;
  cursor: default;
}
.Icon.redGradient {
  background: url(/static/media/redGradient.7df1778e.svg);
}
.Icon.greenGradient {
  background: url(/static/media/greenGradient.bc7b5353.svg);
}
.Icon.violetGradient {
  background: url(/static/media/violetGradient.534c338f.svg);
}
.Icon.backgroundRed {
  background: url(/static/media/backgroundRed.71dd6ce1.png);
}
.Icon.backgroundGreen {
  background: url(/static/media/backgroundGreen.cd01bd02.png);
}
.Icon.backgroundViolet {
  background: url(/static/media/backgroundViolet.abc335d2.png);
}
.Icon.creditCard-W9HLLMx9b86NBfHv,
.Icon.virtualCard-W9HLLMx9b86NBfHv,
.Icon.creditCard-MVgLbTyYF67Agh7,
.Icon.virtualCard-MVgLbTyYF67Agh7,
.Icon.creditCard-J6GA6BTRj9T6yYA,
.Icon.virtualCard-J6GA6BTRj9T6yYA,
.Icon.creditCard-A8KX5JdPq7B1tVML,
.Icon.virtualCard-A8KX5JdPq7B1tVML {
  width: 80px;
  height: 50px;
}
.Icon.creditCard-W9HLLMx9b86NBfHv {
  background: url(/static/media/creditCard-W9HLLMx9b86NBfHv.339685c4.jpg);
}
.Icon.virtualCard-W9HLLMx9b86NBfHv {
  background: url(/static/media/virtualCard-W9HLLMx9b86NBfHv.5e5241b6.jpg);
}
.Icon.creditCard-MVgLbTyYF67Agh7 {
  background: url(/static/media/creditCard-MVgLbTyYF67Agh7.ab3e693e.png);
}
.Icon.virtualCard-MVgLbTyYF67Agh7 {
  background: url(/static/media/virtualCard-MVgLbTyYF67Agh7.e9c9dbca.png);
}
.Icon.creditCard-J6GA6BTRj9T6yYA {
  background: url(/static/media/creditCard-J6GA6BTRj9T6yYA.b57f0527.png);
}
.Icon.virtualCard-J6GA6BTRj9T6yYA {
  background: url(/static/media/virtualCard-J6GA6BTRj9T6yYA.a8546809.png);
}
.Icon.creditCard-A8KX5JdPq7B1tVML {
  background: url(/static/media/creditCard-A8KX5JdPq7B1tVML.71b6c1ba.png);
}
.Icon.virtualCard-A8KX5JdPq7B1tVML {
  background: url(/static/media/virtualCard-A8KX5JdPq7B1tVML.de698846.png);
}
.Icon.dots {
  width: 32px;
  height: 14px;
  background: url(/static/media/dotsWhite.7d3695cc.svg);
  background-size: contain !important;
  background-position: center !important;
}
.Icon.dots-alt {
  width: 32px;
  height: 32px;
  background: url(/static/media/dots.cf9917d3.svg);
  background-size: contain !important;
  background-position: center !important;
}
.Icon.dots-table {
  width: 32px;
  height: 14px;
  background: url(/static/media/dotsTable.487e3840.svg);
  background-size: contain !important;
  background-position: center !important;
}
.Icon.arrow {
  width: 14px;
  height: 14px;
  background: url(/static/media/arrow.f48ac8d9.svg);
}
.Icon.up {
  width: 13px;
  height: 13px;
  background: url(/static/media/up.3204fa75.svg);
}
.Icon.down {
  width: 13px;
  height: 13px;
  background: url(/static/media/up.3204fa75.svg);
  transform: rotate(180deg);
}
.Icon.arrowUp {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronUp.413b76e5.svg);
}
.Icon.arrowDown {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronDown.5014ea3a.svg);
}
.Icon.arrowUpWhite {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronUpWhite.8b519e78.svg);
}
.Icon.arrowDownWhite {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronDownWhite.102826ab.svg);
}
.Icon.logout {
  width: 13px;
  height: 13px;
  background: url(/static/media/logout.b26bf66a.svg);
}
.Icon.user {
  width: 18px;
  height: 18px;
  background: url(/static/media/user.e5d41067.svg);
}
.Icon.globe {
  width: 18px;
  height: 18px;
  background: url(/static/media/globe.f1115a09.svg);
}
.Icon.mapPin {
  width: 18px;
  height: 18px;
  background: url(/static/media/map-pin.8ea9f1ec.svg);
}
.Icon.percent {
  width: 18px;
  height: 18px;
  background: url(/static/media/percent.fd32974c.svg);
}
.Icon.bank {
  width: 18px;
  height: 18px;
  background: url(/static/media/bank.9b8bea00.svg);
}
.Icon.plus {
  width: 18px;
  height: 18px;
  background: url(/static/media/plus.c69f33c5.svg);
}
.Icon.plusWhite {
  width: 18px;
  height: 18px;
  background: url(/static/media/plusWhite.2b828d71.svg);
}
.Icon.lock {
  width: 18px;
  height: 18px;
  background: url(/static/media/lock.cc3a28f1.svg);
}
.Icon.lockWhite {
  width: 18px;
  height: 18px;
  background: url(/static/media/lockWhite.262795ca.svg);
}
.Icon.unlock {
  width: 18px;
  height: 18px;
  background: url(/static/media/unlock.6aef5996.svg);
}
.Icon.unlockWhite {
  width: 18px;
  height: 18px;
  background: url(/static/media/unlockWhite.3e9f0b56.svg);
}
.Icon.link {
  width: 18px;
  height: 18px;
  background: url(/static/media/link.66e436e1.svg);
}
.Icon.key {
  width: 14px;
  height: 14px;
  background: url(/static/media/key.19731b53.svg);
}
.Icon.phone {
  width: 16px;
  height: 16px;
  background: url(/static/media/phone.ccb063fd.svg);
}
.Icon.info-circle {
  width: 18px;
  height: 18px;
  background: url(/static/media/info-circle.a9afd618.svg);
}
.Icon.eye {
  width: 18px;
  height: 18px;
  background: url(/static/media/eye.dfac78d0.svg);
}
.Icon.eyeOff {
  width: 18px;
  height: 18px;
  background: url(/static/media/eye-off.5ef6e0d0.svg);
}
.Icon.mail {
  width: 18px;
  height: 18px;
  background: url(/static/media/mail.d286a822.svg);
}
.Icon.mail-alt {
  width: 18px;
  height: 18px;
  background: url(/static/media/mail.d286a822.svg);
  background-size: 18px 16px !important;
  background-position-y: bottom;
}
.Icon.credit {
  width: 18px;
  height: 18px;
  background: url(/static/media/credit.ad5f017c.svg);
}
.Icon.title {
  width: 18px;
  height: 18px;
  background: url(/static/media/edit-3.585b674e.svg);
}
.Icon.file {
  width: 18px;
  height: 18px;
  background: url(/static/media/file.9cb7df4c.svg);
}
.Icon.file-text {
  width: 18px;
  height: 18px;
  background: url(/static/media/file-text.66e67f73.svg);
}
.Icon.mastercard {
  width: 100%;
  height: 100%;
  background: url(/static/media/mastercard.0b8ab49d.png) center;
  background-size: contain !important;
}
.Icon.visa {
  width: 100%;
  height: 100%;
  background: url(/static/media/visa.d591b3b3.png) center;
  background-size: contain !important;
}
.Icon.upload {
  width: 17px;
  height: 17px;
  background: url(/static/media/upload.26035b4a.svg);
}
.Icon.uploadWhite {
  width: 17px;
  height: 17px;
  background: url(/static/media/uploadWhite.a8f5959c.svg);
}
.Icon.download {
  width: 17px;
  height: 17px;
  background: url(/static/media/download.1d1894dd.svg);
}
.Icon.downloadWhite {
  width: 17px;
  height: 17px;
  background: url(/static/media/downloadWhite.aee10948.svg);
}
.Icon.clipboard {
  width: 17px;
  height: 17px;
  background: url(/static/media/clipboard.e422cdbb.svg);
}
.Icon.crosshair {
  width: 17px;
  height: 17px;
  background: url(/static/media/crosshair.29141f5a.svg);
}
.Icon.search {
  width: 17px;
  height: 17px;
  background: url(/static/media/search.6f6600b5.svg);
}
.Icon.calendar {
  width: 18px;
  height: 18px;
  background: url(/static/media/calendar.e5a8c238.svg);
}
.Icon.calendar2 {
  width: 18px;
  height: 18px;
  background: url(/static/media/calendar2.2683cedb.svg);
}
.Icon.clock2 {
  width: 18px;
  height: 18px;
  background: url(/static/media/clock2.551c7f41.svg);
}
.Icon.message {
  width: 18px;
  height: 18px;
  background: url(/static/media/message.3dba22e9.svg);
}
.Icon.RUB {
  width: 18px;
  height: 18px;
  background: url(/static/media/RUB.c626b283.svg);
  background-size: 11px 16px !important;
  background-position: center center;
}
.Icon.USD {
  width: 18px;
  height: 18px;
  background: url(/static/media/USD.358635fb.svg);
  background-size: 10px 18px !important;
  background-position: center center;
}
.Icon.EUR {
  width: 18px;
  height: 18px;
  background: url(/static/media/EUR.03dcca74.svg);
  background-size: 11px 15px !important;
  background-position: center center;
}
.Icon.travel {
  width: 30px;
  height: 30px;
  background: url(/static/media/travel.27ace447.svg);
}
.Icon.products {
  width: 30px;
  height: 30px;
  background: url(/static/media/products.cae22b61.svg);
}
.Icon.clothes {
  width: 30px;
  height: 30px;
  background: url(/static/media/clothes.e4b9c2a3.svg);
}
.Icon.itemTransaction {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--icon-color);
}
.Icon.itemTransaction::after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  background: url(/static/media/transaction.bfde82ad.svg);
}
.Icon.itemDocument {
  position: relative;
  width: 30px;
  height: 30px;
  background: #BDBDBD;
  border-radius: 50%;
}
.Icon.itemDocument::after {
  content: '';
  display: block;
  position: absolute;
  top: 7px;
  left: 7px;
  width: 16px;
  height: 16px;
  background: url(/static/media/document.71850693.svg);
}
.Icon.itemDocument.approved {
  background: #7BD2B9;
}
.Icon.itemDocument.declined {
  background: #EC616D;
}
.Icon.itemTemplate {
  position: relative;
  width: 30px;
  height: 30px;
  background: #BDBDBD;
  border-radius: 50%;
}
.Icon.itemTemplate::after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  background: url(/static/media/document.71850693.svg);
}
.Icon.statusBlocked {
  width: 24px;
  height: 24px;
  background: url(/static/media/statusBlocked.2f12296d.svg);
}
.Icon.statusNew {
  width: 24px;
  height: 24px;
  background: url(/static/media/statusNew.ba6ce4d5.svg);
}
.Icon.statusInactive {
  width: 18px;
  height: 24px;
  background: url(/static/media/statusInactive.248d0bad.svg);
}
.Icon.statusSoftBlocked {
  width: 24px;
  height: 24px;
  background: url(/static/media/statusSoftBlocked.cabe0994.svg);
}
.Icon.pencil {
  width: 16px;
  height: 16px;
  background: url(/static/media/pencil.6e7ab5c3.svg);
}
.Icon.save {
  width: 16px;
  height: 16px;
  background: url(/static/media/save.faac104b.svg);
}
.Icon.saveAlt {
  width: 16px;
  height: 16px;
  background: url(/static/media/saveActive.9eb50ef2.svg);
}
.Icon.close {
  width: 24px;
  height: 24px;
  background: url(/static/media/close.84c0e6dc.svg);
  transition: background 0.3s ease-in-out;
}
.Icon.close:hover {
  background: url(/static/media/closeActive.28f28e2c.svg);
}
.Icon.navBack {
  width: 24px;
  height: 24px;
  background: url(/static/media/arrowLeft.c51a23d6.svg);
  transition: background 0.3s ease-in-out;
}
.Icon.navBack:hover {
  background: url(/static/media/arrowLeftActive.f0130648.svg);
}
.Icon.navBackAlt {
  width: 32px;
  height: 32px;
  background: url(/static/media/arrow.f48ac8d9.svg);
  transform: rotate(90deg);
}
.Icon.navLink {
  width: 14px;
  height: 14px;
  background: url(/static/media/arrow.f48ac8d9.svg);
  transform: rotate(-90deg);
}
.Icon.chip {
  width: 50px;
  height: 40px;
  background: url(/static/media/chip.3fead4f6.svg);
}
.Icon.settings,
.Icon.list,
.Icon.lockCvn {
  display: block;
  position: relative;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #FFF;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.15);
}
.Icon.settings:after,
.Icon.list:after,
.Icon.lockCvn:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  transition: background 0.3s ease-in-out;
}
.Icon.settings-dark,
.Icon.list-dark,
.Icon.lockCvn-dark {
  border-color: #000;
}
.Icon.settings:after {
  background-image: url(/static/media/settings.e149ddd1.svg);
}
.Icon.settings:hover:after {
  background-image: url(/static/media/settingsHover.30d6de06.svg);
}
.Icon.list:after {
  background-image: url(/static/media/list.1a1982b7.svg);
  background-size: 18px 18px;
}
.Icon.list:hover:after {
  background-image: url(/static/media/listHover.b5b0cf7f.svg);
}
.Icon.lockCvn:after {
  background-image: url(/static/media/lockWhite.262795ca.svg);
  background-size: 16px 16px;
}
.Icon.lockCvn:hover:after {
  background-image: url(/static/media/lockBlack.e5e48359.svg);
}
.Icon.lockCvn-dark:after {
  background-image: url(/static/media/lockBlack.e5e48359.svg);
  background-size: 16px 16px;
}
.Icon.notificationWarning {
  height: 34px;
  width: 34px;
  background: url(/static/media/notificationWarning.e6ae459a.svg);
}
.Icon.notificationSuccess {
  height: 34px;
  width: 34px;
  background: url(/static/media/notificationSuccess.4ec38d8a.svg);
}
.Icon.notificationError {
  height: 34px;
  width: 34px;
  background: url(/static/media/notificationError.7063d715.svg);
}
.Icon.W9HLLMx9b86NBfHv,
.Icon.W9HLLMx9b86NBfHv-black {
  width: 106px;
  height: 14px;
}
.Icon.W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv.8d2b8d41.svg);
}
.Icon.W9HLLMx9b86NBfHv-black {
  background: url(/static/media/W9HLLMx9b86NBfHv-black.ef7b500d.svg);
}
.Icon.MVgLbTyYF67Agh7,
.Icon.MVgLbTyYF67Agh7-black {
  width: 58px;
  height: 16px;
}
.Icon.MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7-white.1b8180de.png);
}
.Icon.MVgLbTyYF67Agh7-black {
  background: url(/static/media/MVgLbTyYF67Agh7-black.eca12d93.png);
}
.Icon.J6GA6BTRj9T6yYA,
.Icon.J6GA6BTRj9T6yYA-black {
  width: 58px;
  height: 24px;
  background: url(/static/media/J6GA6BTRj9T6yYA.86ede452.png);
}
.Icon.A8KX5JdPq7B1tVML,
.Icon.A8KX5JdPq7B1tVML-black {
  width: 58px;
  height: 29px;
  background: url(/static/media/A8KX5JdPq7B1tVML.4e902194.png);
}
.Icon.card-symbol {
  width: 48px;
  height: 48px;
}
.Icon.symbol-visa {
  background: url(/static/media/symbol-visa.e62aaa1f.svg);
}
.Icon.symbol-mastercard {
  background: url(/static/media/symbol-mastercard.f2414e27.svg);
}
.Icon.symbol-visa-alt {
  background: url(/static/media/symbol-visa-alt.42cf537e.svg);
}
.Icon.symbol-mastercard-alt {
  background: url(/static/media/symbol-mastercard-alt.1fe00fac.svg);
}
.Icon.info {
  width: 16px;
  height: 16px;
  background: url(/static/media/info.00033fec.svg);
}
.Icon.success {
  width: 120px;
  height: 120px;
  background: url(/static/media/success.394ff3ed.svg);
}
.Icon.clock {
  width: 120px;
  height: 120px;
  background: url(/static/media/clock.3882546a.svg);
}
.Icon.noAccounts {
  width: 80px;
  height: 80px;
  background: url(/static/media/wallet.ba775a0a.svg);
  opacity: 0.2;
}
.Icon.noCards {
  width: 80px;
  height: 80px;
  background: url(/static/media/cards.1fb47233.svg);
  opacity: 0.2;
}
.Icon.noTemplates {
  width: 80px;
  height: 80px;
  background: url(/static/media/wishlist.15e0124f.svg);
  opacity: 0.2;
}
.Icon.emptyTray {
  width: 64px;
  height: 64px;
  background: url(/static/media/empty-tray.8c11d771.svg);
  opacity: 0.2;
}
.Icon.authorization {
  width: 16px;
  height: 16px;
  background: url(/static/media/authorization.d02b3e3f.svg);
}
.Icon.approve {
  width: 16px;
  height: 16px;
  background: url(/static/media/approve.4027ff49.svg);
}
.Icon.star {
  width: 24px;
  height: 24px;
  background: url(/static/media/star.0607b12a.svg);
}
.Icon.starFilled {
  width: 24px;
  height: 24px;
  background: url(/static/media/starFilled.3ddee844.svg);
}
.Icon.times {
  width: 16px;
  height: 16px;
  background: url(/static/media/x.b9ecbb73.svg);
}
.Icon.grid {
  width: 16px;
  height: 16px;
  background: url(/static/media/grid.88db6d9f.svg);
}
.Icon.alert-triangle {
  width: 16px;
  height: 16px;
  background: url(/static/media/alert-triangle.3e49b74c.svg);
}
.Icon.table {
  width: 16px;
  height: 16px;
  background: url(/static/media/menu.862f5eb8.svg);
}
.Icon.menu-settings {
  width: 20px;
  height: 20px;
  background: url(/static/media/settings.69f28d97.svg);
}
.Icon.menu-settings.menu-settings-small {
  width: 18px;
  height: 18px;
}
.Icon.menu-logout {
  width: 20px;
  height: 20px;
  background: url(/static/media/log-out.f355e75b.svg);
}
.Icon.cardSlideWhite {
  width: 60px;
  height: 42px;
  background: url(/static/media/card-slide-white.e9a4de2f.png);
}
.Icon.brand-mastercard {
  background-image: url(/static/media/brand-mastercard.3c036285.svg);
  background-position: center center;
  background-size: 120% !important;
}
.Icon.brand-visa {
  background-image: url(/static/media/brand-visa.c8973f89.svg);
  background-position: center center;
  background-size: 170% !important;
}
.Icon.brand-visa-black {
  background-image: url(/static/media/brand-visa-black.303619f8.svg);
  background-position: center center;
  background-size: 170% !important;
}
.Icon.green_mastercard_plastic-W9HLLMx9b86NBfHv,
.Icon.green_mastercard_virtual-W9HLLMx9b86NBfHv,
.Icon.blue_mastercard_plastic-W9HLLMx9b86NBfHv,
.Icon.yellow_mastercard_plastic-W9HLLMx9b86NBfHv,
.Icon.white_mastercard_plastic-W9HLLMx9b86NBfHv,
.Icon.white_mastercard_virtual-W9HLLMx9b86NBfHv,
.Icon.blue_visa_virtual-W9HLLMx9b86NBfHv,
.Icon.black_visa_plastic-W9HLLMx9b86NBfHv,
.Icon.green_mastercard_plastic-MVgLbTyYF67Agh7,
.Icon.green_mastercard_virtual-MVgLbTyYF67Agh7,
.Icon.blue_mastercard_plastic-MVgLbTyYF67Agh7,
.Icon.yellow_mastercard_plastic-MVgLbTyYF67Agh7,
.Icon.white_mastercard_plastic-MVgLbTyYF67Agh7,
.Icon.white_mastercard_virtual-MVgLbTyYF67Agh7,
.Icon.blue_visa_virtual-MVgLbTyYF67Agh7,
.Icon.black_visa_plastic-MVgLbTyYF67Agh7,
.Icon.green_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.green_mastercard_virtual-J6GA6BTRj9T6yYA,
.Icon.blue_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.yellow_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.white_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.white_mastercard_virtual-J6GA6BTRj9T6yYA,
.Icon.blue_visa_virtual-J6GA6BTRj9T6yYA,
.Icon.black_visa_plastic-J6GA6BTRj9T6yYA,
.Icon.green_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.green_mastercard_virtual-A8KX5JdPq7B1tVML,
.Icon.blue_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.yellow_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.white_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.white_mastercard_virtual-A8KX5JdPq7B1tVML,
.Icon.blue_visa_virtual-A8KX5JdPq7B1tVML,
.Icon.black_visa_plastic-A8KX5JdPq7B1tVML {
  width: 80px;
  height: 50px;
}
.Icon.white_mastercard_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_Debit_white.19d3cd18.png);
}
.Icon.white_mastercard_virtual-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_Debit_white_virtual.67515ae3.png);
}
.Icon.green_mastercard_plastic-W9HLLMx9b86NBfHv.design_id-13638 {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_Debit.866dfa91.png);
}
.Icon.green_mastercard_plastic-W9HLLMx9b86NBfHv.design_id-15424 {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_prepaid_plastic.adadd0c9.png);
}
.Icon.green_mastercard_virtual-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_prepaid_virtual.29f9441b.png);
}
.Icon.blue_mastercard_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_VISA_Debit.d189bbde.png);
}
.Icon.yellow_mastercard_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_virtual.f00e5fdd.png);
}
.Icon.blue_visa_virtual-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_VISA_virtual.c33c843b.png);
}
.Icon.black_visa_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_VISA_credit.8948a609.png);
}
.Icon.white_mastercard_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_Debit_white.377b77ee.png);
}
.Icon.white_mastercard_virtual-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_Debit_white_virtual.c83dd805.png);
}
.Icon.green_mastercard_plastic-MVgLbTyYF67Agh7.design_id-13638 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_Debit.f13ad76b.png);
}
.Icon.green_mastercard_plastic-MVgLbTyYF67Agh7.design_id-15424 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_prepaid_plastic.fc8ac7ea.png);
}
.Icon.green_mastercard_virtual-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_prepaid_virtual.4050fd69.png);
}
.Icon.blue_mastercard_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_VISA_Debit.7c74b73e.png);
}
.Icon.yellow_mastercard_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_virtual.ae260525.png);
}
.Icon.blue_visa_virtual-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_VISA_virtual.51e0c8ec.png);
}
.Icon.black_visa_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_VISA_credit.9a5cd159.png);
}
.Icon.green_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.white_mastercard_plastic-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_MASTERCARD.610d31e1.png);
}
.Icon.yellow_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.green_mastercard_virtual-J6GA6BTRj9T6yYA,
.Icon.white_mastercard_virtual-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_MASTERCARD_virtual.ffeaf71d.png);
}
.Icon.black_visa_plastic-J6GA6BTRj9T6yYA,
.Icon.blue_mastercard_plastic-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_VISA.483cb6bf.png);
}
.Icon.blue_visa_virtual-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_VISA_virtual.812cdfcf.png);
}
.Icon.green_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.white_mastercard_plastic-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_MASTERCARD.ff92ac44.png);
}
.Icon.yellow_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.green_mastercard_virtual-A8KX5JdPq7B1tVML,
.Icon.white_mastercard_virtual-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_MASTERCARD_virtual.75ed40a7.png);
}
.Icon.black_visa_plastic-A8KX5JdPq7B1tVML,
.Icon.blue_mastercard_plastic-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_VISA.b8332e62.png);
}
.Icon.blue_visa_virtual-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_VISA_virtual.56349e48.png);
}

.TooltipContainer {
  position: relative;
  cursor: pointer;
}
.Tooltip {
  position: absolute;
  z-index: 8000;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  cursor: auto;
  margin-top: 6px;
}
.Tooltip .content {
  color: #3F4C69;
  background: #FFF;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  position: relative;
}
.Tooltip .content::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -7px;
  width: 0;
  height: 0;
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent rgba(189, 189, 189, 0.2);
}
.Tooltip .content::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #FFF;
}

.Input {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 45px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.6);
}
.Input.masked input {
  font-family: 'password-mask';
  -webkit-text-security: disc;
}
.Input.masked input::-moz-placeholder {
  color: transparent;
}
.Input.masked input::placeholder {
  color: transparent;
}
.Input.masked.visible input {
  font-family: var(--font-family);
  -webkit-text-security: none;
}
.Input.error {
  color: #D0021B;
}
.Input.disabled .iconWrapper {
  filter: invert(60%);
}
.Input.disabled input {
  color: rgba(63, 76, 105, 0.7);
}
.Input .TooltipContainer {
  margin-left: 5px;
  width: 20px;
  height: 29px;
  display: flex;
  align-items: center;
}
.Input .TooltipContainer .content {
  padding: 10px;
  white-space: nowrap;
}
.Input .iconWrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 29px;
}
.Input .iconWrapper.password {
  cursor: pointer;
  margin-left: 5px;
}
.Input .iconWrapper.password .Icon {
  transition: all 0.25s linear;
}
.Input .iconWrapper.close {
  justify-content: flex-end;
  width: 18px;
  margin-left: 5px;
}
.Input .iconWrapper.close .Icon {
  cursor: pointer;
  height: 18px;
  width: 18px;
  transition: all 0.25s linear;
}
.Input input {
  width: 100%;
  min-width: 0;
  height: 30px;
  margin-top: 15px;
  padding: 0 0 0 5px;
  color: #3F4C69;
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family);
  font-size: 13px;
}
.Input input:invalid {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.Input input::-moz-placeholder {
  color: rgba(63, 76, 105, 0.6);
}
.Input input::placeholder {
  color: rgba(63, 76, 105, 0.6);
}
.Input .borderWrapper {
  position: absolute;
  bottom: -1px;
  height: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.Input .borderWrapper .border {
  height: 100%;
  width: 0px;
  background: #3F4C69;
  transition: all 0.3s ease;
}
.Input .placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 7px;
  left: 25px;
  font-size: 14px;
  color: rgba(63, 76, 105, 0.6);
  transition: all 0.3s ease;
  transform-origin: left top 0px;
  pointer-events: none;
}
.Input .placeholder.animated {
  transform: scale(0.8) translate(calc(-25px * 1.2), -25px);
  transform-origin: left top 0px;
}
.Input .errorText {
  position: absolute;
  bottom: 7px;
  right: 0px;
  font-size: 14px;
  color: #F5425F;
  text-align: end;
}
.Input .errorText.errorAnimation-enter {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(1) translateY(0px);
  transform-origin: right bottom 0px;
}
.Input .errorText.errorAnimation-enter-active,
.Input .errorText.errorAnimation-enter-done {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.8) translateY(-28px);
  transform-origin: right bottom 0px;
}
.Input .errorText.errorAnimation-exit {
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.8) translateY(-28px);
  transform-origin: right bottom 0px;
}
.Input .errorText.errorAnimation-exit-active,
.Input .errorText.errorAnimation-exit-done {
  opacity: 0;
  transform: scale(1) translateY(0px);
  transform-origin: right bottom 0px;
}
.Input .errorTransition {
  width: 0;
}
.Input .errorTransition .errorText {
  bottom: 7px;
  white-space: normal;
  overflow: visible;
  margin-top: 15px;
}
.Input.focused .borderWrapper .border {
  width: 100%;
}
.Input.error .borderWrapper .border {
  width: 100%;
  background: #F5425F;
}

.Loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.Loader .spin {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3F4C69;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.Button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  outline: none;
  border: none;
  font-family: var(--font-family);
  cursor: pointer;
}
.Button::-moz-focus-inner {
  border: 0;
}
.Button.primary {
  background: var(--primary-button-color);
  height: 40px;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
}
.Button.primary:hover,
.Button.primary.active {
  background: var(--primary-button-hover-color);
}
.Button.primary.active {
  pointer-events: none;
}
.Button.danger {
  background: #C24957;
  height: 40px;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
}
.Button.danger:hover,
.Button.danger.active {
  background: #B43E49;
}
.Button.danger.active {
  pointer-events: none;
}
.Button.primaryGhost {
  border: 1px solid var(--primary-button-color);
  height: 40px;
  border-radius: 5px;
  color: var(--primary-button-color);
  font-size: 17px;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
}
.Button.primaryGhost:hover,
.Button.primaryGhost.active {
  background: var(--primary-button-hover-color);
  color: #FFFFFF;
}
.Button.primaryGhost.active {
  pointer-events: none;
}
.Button.dashedGhost {
  border: 1px dashed #bdbdbd99;
  height: 32px;
  border-radius: 10px;
  color: #3F4C69;
  font-size: 14px;
  padding: 0 8px;
  transition: all 0.3s ease-in-out;
}
.Button.dashedGhost:hover,
.Button.dashedGhost.active {
  background: #FFF;
}
.Button.dashedGhost.active {
  pointer-events: none;
}
.Button.cardAction {
  background: transparent;
  border-radius: 20px;
  color: #FFFFFF;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  border: 1px solid #FFFFFF;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.15);
}
.Button.cardAction:hover,
.Button.cardAction.active,
.Button.cardAction :focus {
  color: #000000;
  background: #ffffff;
  box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.125);
}
.Button.cardAction.active {
  pointer-events: none;
}
.Button.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}
.Button .Loader {
  position: absolute;
  top: calc((100% - 20px) / 2);
  right: 12px;
  width: 20px;
  height: 20px;
  margin: 0 auto !important;
}
.Button .Loader .spin {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-top-color: transparent;
}

.DropDown {
  position: relative;
  display: inline-block;
}
.DropDown__menu {
  z-index: 2;
  position: absolute;
  background: #FFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 300px;
}
.DropDown .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.Select {
  width: 100%;
}
.Select .selectWrapper {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45px;
  padding-top: 15px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.6);
  outline: none;
}
.Select .selectWrapper.error {
  color: #D0021B;
}
.Select .selectWrapper.disabled {
  pointer-events: none;
}
.Select .selectWrapper.disabled .iconWrapper {
  filter: invert(60%);
}
.Select .selectWrapper.disabled .arrow {
  opacity: 0;
}
.Select .selectWrapper.disabled .box {
  color: rgba(63, 76, 105, 0.7);
}
.Select .selectWrapper.wide {
  height: 55px;
}
.Select .selectWrapper.wide .placeholder {
  bottom: 12px;
}
.Select .selectWrapper.wide .placeholder.animated {
  transform: scale(0.8) translate(calc(-25px * 1.2), -35px);
  transform-origin: left top 0px;
}
.Select .selectWrapper.wide .errorText {
  bottom: 12px;
}
.Select .selectWrapper.wide .errorText.errorAnimation-enter-active,
.Select .selectWrapper.wide .errorText.errorAnimation-enter-done {
  transform: scale(0.8) translateY(-39px);
}
.Select .selectWrapper.wide .errorText.errorAnimation-exit {
  transform: scale(0.8) translateY(-39px);
}
.Select .selectWrapper .iconWrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 30px;
}
.Select .selectWrapper .box {
  display: flex;
  align-items: center;
  width: calc(100% - 20px - 14px);
  height: 30px;
  padding: 0 5px;
  color: #3F4C69;
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family);
  line-height: 1.2;
}
.Select .selectWrapper .box > div {
  width: 100%;
}
.Select .selectWrapper .box > div > div {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Select .selectWrapper .search {
  width: 100%;
  padding: 0;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: var(--font-family);
  color: #3f4c69;
}
.Select .selectWrapper .arrow {
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: 0.35s linear;
}
.Select .selectWrapper .arrow.active {
  transform: rotate(180deg);
}
.Select .selectWrapper .close {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 4px;
}
.Select .selectWrapper .borderWrapper {
  position: absolute;
  bottom: -1px;
  height: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.Select .selectWrapper .borderWrapper .border {
  height: 100%;
  width: 0px;
  background: #3F4C69;
  transition: all 0.3s ease;
}
.Select .selectWrapper .placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 7px;
  left: 25px;
  font-size: 14px;
  color: rgba(63, 76, 105, 0.6);
  transition: all 0.3s ease;
  transform-origin: left top 0px;
  pointer-events: none;
}
.Select .selectWrapper .placeholder.animated {
  transform: scale(0.8) translate(calc(-25px * 1.2), -25px);
  transform-origin: left top 0px;
}
.Select .selectWrapper .errorText {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 7px;
  right: 0;
  font-size: 14px;
  color: #F5425F;
  text-align: end;
}
.Select .selectWrapper .errorText.errorAnimation-enter {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(1) translateY(0px);
  transform-origin: right bottom 0px;
}
.Select .selectWrapper .errorText.errorAnimation-enter-active,
.Select .selectWrapper .errorText.errorAnimation-enter-done {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.8) translateY(-25px);
  transform-origin: right bottom 0px;
}
.Select .selectWrapper .errorText.errorAnimation-exit {
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.8) translateY(-25px);
  transform-origin: right bottom 0px;
}
.Select .selectWrapper .errorText.errorAnimation-exit-active,
.Select .selectWrapper .errorText.errorAnimation-exit-done {
  opacity: 0;
  transform: scale(1) translateY(0px);
  transform-origin: right bottom 0px;
}
.Select .selectWrapper.focused .borderWrapper .border {
  width: 100%;
}
.Select .selectWrapper.error .borderWrapper .border {
  width: 100%;
  background: #F5425F;
}
.Select .DropDown {
  width: 100%;
}
.Select .DropDown .menu {
  width: 100%;
  left: 0px;
  top: 55px;
  padding: 5px 0;
}
.Select .DropDown .menu .option {
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  color: rgba(63, 76, 105, 0.7);
  font-weight: 300;
  outline: none;
}
.Select .DropDown .menu .option:hover,
.Select .DropDown .menu .option:focus {
  background: var(--primary-background);
  color: #3F4C69;
}
.Select .DropDown .menu .option-disabled {
  pointer-events: none;
}

.ActivationDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 380px;
  min-height: 10px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ActivationDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ActivationDialog .title {
  margin: 30px 0 14px;
  font-size: 28px;
  font-weight: 300;
}
.ActivationDialog .subtitle {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
}
.ActivationDialog .Input + .subtitle {
  margin-top: 30px;
}
.ActivationDialog .Input,
.ActivationDialog .Select {
  margin-top: 10px;
}
.ActivationDialog .actions {
  display: flex;
  margin: 40px 0 20px;
}
.ActivationDialog .actions .Button {
  width: 100%;
}
@media (max-width: 410px) {
  .ActivationDialog {
    width: calc(100vw - 30px);
  }
  .ActivationDialog .actions .Button {
    font-size: 15px;
  }
}

.GAuthDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 380px;
  min-height: 10px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.GAuthDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.GAuthDialog .title {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 300;
}
.GAuthDialog .subtitle {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
}
.GAuthDialog .sub {
  font-weight: 500;
  color: #3F4C69;
}
.GAuthDialog .resendCode {
  display: inline-block;
  position: relative;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.GAuthDialog .resendCode.disabled {
  opacity: 0.7;
  pointer-events: none;
}
.GAuthDialog .resendCode .Loader {
  position: absolute;
  right: -22px;
  top: 0;
  width: 14px;
  height: 14px;
}
.GAuthDialog .resendCode .Loader .spin {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.GAuthDialog .Input {
  margin: 10px 0 20px;
}
.GAuthDialog .actions {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin: 20px 0;
}
.GAuthDialog .actions .Button {
  padding: 0 40px;
}
.GAuthDialog .Countdown {
  font-weight: 500;
  margin-left: 0.25em;
  color: #3F4C69;
}
@media (max-width: 410px) {
  .GAuthDialog {
    width: calc(100vw - 30px);
  }
}

.PasswordStrengthInput .progressWrapper {
  height: 28px;
  display: flex;
  align-items: center;
  margin: 0 5px;
}
.PasswordStrengthInput .progressWrapper .TooltipContainer {
  width: 60px;
}
.PasswordStrengthInput .progressWrapper .container {
  height: 12px;
  display: flex;
  align-items: center;
}
.PasswordStrengthInput .progressWrapper .bar {
  position: relative;
  width: 60px;
  height: 6px;
  background: #bdbdbd99;
  border-radius: 3px;
  overflow: hidden;
}
.PasswordStrengthInput .progressWrapper .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 8px;
  transition: all 0.2s ease-in;
}

.ChangePasswordDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ChangePasswordDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ChangePasswordDialog .title {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 300;
}
.ChangePasswordDialog .subtitle {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
}
.ChangePasswordDialog .subtitle .Tooltip {
  margin-top: 10px;
}
.ChangePasswordDialog .subtitle .Tooltip .content {
  padding: 12px 16px;
}
.ChangePasswordDialog .subtitle .TooltipContainer {
  display: inline-block;
  margin-left: 4px;
}
.ChangePasswordDialog .subtitle .TooltipContainer .Icon {
  margin-bottom: -4px;
}
.ChangePasswordDialog .password-requirements {
  width: 280px;
  text-align: left;
}
.ChangePasswordDialog .password-requirements ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
}
.ChangePasswordDialog .password-requirements ul li {
  position: relative;
  margin-bottom: 10px;
}
.ChangePasswordDialog .password-requirements ul li:last-child {
  margin-bottom: 0;
}
.ChangePasswordDialog .password-requirements ul li::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -10px;
  width: 4px;
  height: 4px;
  background: var(--link-color);
  border-radius: 50%;
}
.ChangePasswordDialog .footer {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin-bottom: 30px;
}
.ChangePasswordDialog .sub {
  font-weight: 500;
  color: #3F4C69;
}
.ChangePasswordDialog .link {
  font-size: 13px;
  color: var(--link-color);
  font-weight: 500;
  cursor: pointer;
}
.ChangePasswordDialog .Input {
  margin-top: 10px;
  height: unset;
}
.ChangePasswordDialog .actions {
  display: flex;
  width: 100%;
  margin: 40px 0 20px 0;
}
.ChangePasswordDialog .actions .Button {
  width: 100%;
}
@media (max-width: 420px) {
  .ChangePasswordDialog {
    width: calc(100vw - 30px);
  }
  .ChangePasswordDialog .subtitle .TooltipContainer {
    position: static;
  }
  .ChangePasswordDialog .subtitle .Tooltip {
    position: fixed;
    top: unset;
  }
  .ChangePasswordDialog .subtitle .Tooltip .content::before,
  .ChangePasswordDialog .subtitle .Tooltip .content::after {
    display: none;
  }
  .ChangePasswordDialog .Input .transition .errorText {
    right: 150px;
    width: 150px;
  }
}

.ChangePinDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ChangePinDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ChangePinDialog .title {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 300;
}
.ChangePinDialog .subtitle {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
}
.ChangePinDialog .sub {
  font-weight: 500;
  color: #3F4C69;
}
.ChangePinDialog .link {
  font-size: 13px;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
}
.ChangePinDialog .Input {
  margin-top: 10px;
}
.ChangePinDialog .actions {
  display: flex;
  width: 100%;
  margin: 40px 0 20px 0;
}
.ChangePinDialog .actions .Button {
  width: 100%;
}
@media (max-width: 420px) {
  .ChangePasswordDialog {
    width: calc(100vw - 30px);
  }
}

.ShowPinDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ShowPinDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ShowPinDialog .title {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 300;
}
.ShowPinDialog .subtitle {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
}
.ShowPinDialog .input-wrapper {
  margin-top: 10px;
  position: relative;
}
.ShowPinDialog .Loader {
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  top: 18px;
  right: 0;
}
.ShowPinDialog .Loader .spin {
  width: 22px;
  height: 22px;
  border-width: 2px;
}
.ShowPinDialog .pin-border {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #6377A4;
  animation: pin-line 10s linear;
}
@keyframes pin-line {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
.ShowPinDialog .actions {
  display: flex;
  width: 100%;
  margin: 40px 0 20px 0;
}
.ShowPinDialog .actions .Button {
  width: 100%;
}
@media (max-width: 420px) {
  .ChangePasswordDialog {
    width: calc(100vw - 30px);
  }
}

.SelectAsync {
  width: 100%;
}
.SelectAsync .selectWrapper {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 45px;
  padding-top: 15px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.6);
  outline: none;
}
.SelectAsync .selectWrapper.error {
  color: #D0021B;
}
.SelectAsync .selectWrapper.disabled {
  pointer-events: none;
}
.SelectAsync .selectWrapper.disabled .iconWrapper,
.SelectAsync .selectWrapper.disabled .arrow {
  filter: invert(60%);
}
.SelectAsync .selectWrapper.disabled .box {
  color: rgba(63, 76, 105, 0.7);
}
.SelectAsync .selectWrapper .iconWrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 30px;
}
.SelectAsync .selectWrapper .box {
  display: flex;
  align-items: center;
  width: calc(100% - 20px);
  min-width: 0;
  height: 30px;
  padding: 0 5px;
  font-size: 13px;
  line-height: 1.2;
  color: #3F4C69;
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family);
  pointer-events: none;
}
.SelectAsync .selectWrapper .box.multiline {
  padding: 5px;
  height: auto;
  min-height: 40px;
}
.SelectAsync .selectWrapper .box.multiline > div {
  white-space: wrap;
}
.SelectAsync .selectWrapper .box > div {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.SelectAsync .selectWrapper .box input {
  pointer-events: all;
  width: 100%;
  height: 30px;
  color: #3F4C69;
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family);
  padding-bottom: 4px;
}
.SelectAsync .selectWrapper .box input::-moz-placeholder {
  font-size: 12px;
  color: #3F4C69;
  font-family: var(--font-family);
}
.SelectAsync .selectWrapper .box input::placeholder {
  font-size: 12px;
  color: #3F4C69;
  font-family: var(--font-family);
}
.SelectAsync .selectWrapper .Loader {
  width: 14px;
  height: 14px;
}
.SelectAsync .selectWrapper .Loader .spin {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.SelectAsync .selectWrapper .arrow {
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: 0.35s linear;
}
.SelectAsync .selectWrapper .arrow.active {
  transform: rotate(180deg);
}
.SelectAsync .selectWrapper .iconWrapper.close {
  width: 18px;
  margin-right: 5px;
}
.SelectAsync .selectWrapper .borderWrapper {
  position: absolute;
  bottom: -1px;
  height: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.SelectAsync .selectWrapper .borderWrapper .border {
  height: 100%;
  width: 0px;
  background: #3F4C69;
  transition: all 0.3s ease;
}
.SelectAsync .selectWrapper.multiline .placeholder {
  top: 28px;
}
.SelectAsync .selectWrapper.multiline .placeholder.animated {
  transform: scale(0.8) translate(calc(-25px * 1.2), -32px);
}
.SelectAsync .selectWrapper .placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  top: 23px;
  left: 25px;
  font-size: 14px;
  color: rgba(63, 76, 105, 0.6);
  transition: all 0.3s ease;
  transform-origin: left top 0px;
  pointer-events: none;
}
.SelectAsync .selectWrapper .placeholder.animated {
  transform: scale(0.8) translate(calc(-25px * 1.2), -25px);
  transform-origin: left top 0px;
}
.SelectAsync .selectWrapper .errorText {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 7px;
  right: 0;
  font-size: 14px;
  color: #F5425F;
  text-align: end;
}
.SelectAsync .selectWrapper .errorText.errorAnimation-enter {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(1) translateY(0px);
  transform-origin: right bottom 0px;
}
.SelectAsync .selectWrapper .errorText.errorAnimation-enter-active,
.SelectAsync .selectWrapper .errorText.errorAnimation-enter-done {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.8) translateY(-28px);
  transform-origin: right bottom 0px;
}
.SelectAsync .selectWrapper .errorText.errorAnimation-exit {
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.8) translateY(-28px);
  transform-origin: right bottom 0px;
}
.SelectAsync .selectWrapper .errorText.errorAnimation-exit-active,
.SelectAsync .selectWrapper .errorText.errorAnimation-exit-done {
  opacity: 0;
  transform: scale(1) translateY(0px);
  transform-origin: right bottom 0px;
}
.SelectAsync .selectWrapper.focused .borderWrapper .border {
  width: 100%;
}
.SelectAsync .selectWrapper.error .borderWrapper .border {
  width: 100%;
  background: #F5425F;
}
.SelectAsync .DropDown {
  width: 100%;
}
.SelectAsync .DropDown .menu {
  width: 100%;
  left: 0px;
  top: 55px;
  padding: 5px 0;
  max-height: 200px;
  overflow: auto;
}
.SelectAsync .DropDown .menu .option {
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  color: rgba(63, 76, 105, 0.7);
  font-weight: 300;
  outline: none;
}
.SelectAsync .DropDown .menu .option:hover,
.SelectAsync .DropDown .menu .option:focus {
  background: var(--primary-background);
  color: #3F4C69;
}

.AccountCard.oneCard {
  gap: 10px;
  display: flex;
}
.AccountCard .cardholder {
  gap: 2px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  min-width: 180px;
  color: rgba(63, 76, 105, 0.9);
}
.AccountCard .cardholder span {
  font-weight: 500;
  margin-right: 2px;
  color: rgba(63, 76, 105, 0.6);
}
.AccountCard .Tooltip {
  top: 50px;
}
.AccountCard .Tooltip .content {
  height: auto;
  text-align: left;
}
.AccountCard .card-block {
  width: 80px;
  position: relative;
}
.AccountCard .card-title {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translate(-50%);
  white-space: nowrap;
}
.AccountCard .cardIcon {
  position: relative;
  width: 80px;
  height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}
.AccountCard .cardIcon .status-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.AccountCard .cardIcon .creditCard,
.AccountCard .cardIcon .virtualCard {
  pointer-events: none;
  flex-shrink: 0;
  width: 80px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}
.AccountCard .cardIcon .card-symbol {
  position: absolute;
}
.AccountCard .cardIcon .symbol-visa-alt {
  bottom: -4px;
  right: 3px;
  width: 20px;
  height: 20px;
}
.AccountCard .cardIcon .symbol-mastercard-alt {
  bottom: -1px;
  right: 2px;
  width: 16px;
  height: 16px;
}
.AccountCard .cardIcon .brand-icon {
  position: absolute;
}
.AccountCard .cardIcon .brand-visa {
  bottom: -2px;
  right: 3px;
  width: 18px;
  height: 18px;
}
.AccountCard .cardIcon .brand-mastercard {
  bottom: 0;
  right: 3px;
  width: 16px;
  height: 16px;
}
.AccountCard .cardIcon.white_mastercard_plastic,
.AccountCard .cardIcon.white_mastercard_virtual {
  background: #DADADA;
}
.AccountCard .cardIcon.green_mastercard_plastic.design_id-13638 {
  background: #76990F;
}
.AccountCard .cardIcon.green_mastercard_plastic.design_id-15424,
.AccountCard .cardIcon.green_mastercard_virtual {
  background: #00534C;
}
.AccountCard .cardIcon.blue_mastercard_plastic {
  background: #300370;
}
.AccountCard .cardIcon.yellow_mastercard_plastic {
  background: #CCD500;
}
.AccountCard .cardIcon.blue_visa_virtual {
  background: #7466A3;
}
.AccountCard .cardIcon.black_visa_plastic {
  background: #343333;
}
.AccountCard .cardIcon.creditCard,
.AccountCard .cardIcon.virtualCard {
  background: #B02E3A;
}
.AccountCard .cardIcon.white_mastercard_plastic.white_mastercard_plastic-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.white_mastercard_virtual.white_mastercard_virtual-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.green_mastercard_plastic.green_mastercard_plastic-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.green_mastercard_virtual.green_mastercard_virtual-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.blue_mastercard_plastic.blue_mastercard_plastic-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.yellow_mastercard_plastic.yellow_mastercard_plastic-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.blue_visa_virtual.blue_visa_virtual-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.black_visa_plastic.black_visa_plastic-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.creditCard.creditCard-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.virtualCard.virtualCard-J6GA6BTRj9T6yYA,
.AccountCard .cardIcon.white_mastercard_plastic.white_mastercard_plastic-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.white_mastercard_virtual.white_mastercard_virtual-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.green_mastercard_plastic.green_mastercard_plastic-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.green_mastercard_virtual.green_mastercard_virtual-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.blue_mastercard_plastic.blue_mastercard_plastic-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.yellow_mastercard_plastic.yellow_mastercard_plastic-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.blue_visa_virtual.blue_visa_virtual-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.black_visa_plastic.black_visa_plastic-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.creditCard.creditCard-A8KX5JdPq7B1tVML,
.AccountCard .cardIcon.virtualCard.virtualCard-A8KX5JdPq7B1tVML {
  background: #1E4AC3;
}
.AccountCard .card-pan {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(63, 76, 105, 0.7);
  text-align: center;
}
.AccountCard.inactive .cardIcon {
  opacity: 0.6;
}
.AccountCard.inactive .card-pan {
  color: #A6A6A6;
}

.AddCardDialog {
  display: flex;
  flex-direction: column;
  width: 360px;
  /*padding: 0 40px 30px;*/
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.AddCardDialog.AddCardDialogBig {
  width: 500px;
}
.AddCardDialog.AddCardDialogBig .card-types {
  grid-template-columns: repeat(3, 1fr);
}
.AddCardDialog .header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 40px;
  min-height: 48px;
  border-bottom: 1px solid #bdbdbd99;
}
.AddCardDialog .header .navBack {
  position: absolute;
  left: 12px;
  top: 12px;
}
.AddCardDialog .header .close {
  position: absolute;
  right: 12px;
  top: 12px;
}
.AddCardDialog .header .title {
  font-size: 28px;
  font-weight: 300;
  text-align: center;
  padding: 8px 0;
}
.AddCardDialog .content {
  padding: 20px 40px;
}
.AddCardDialog .description {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
}
.AddCardDialog .description p {
  margin: 0;
}
.AddCardDialog .description p:not(:last-of-type) {
  margin-bottom: 1em;
}
.AddCardDialog .Input,
.AddCardDialog .Select,
.AddCardDialog .SelectAsync {
  margin-top: 10px;
}
.AddCardDialog .SelectAsync .disabled .arrow {
  display: none;
}
.AddCardDialog .errorBlock {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 11.2px;
  color: #F5425F;
}
.AddCardDialog .actions {
  display: flex;
  width: 100%;
  margin-top: 40px;
}
.AddCardDialog .actions .Button {
  width: 100%;
}
.AddCardDialog .card-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
.AddCardDialog .card-types .TooltipContainer {
  cursor: auto;
}
.AddCardDialog .card-types .TooltipContainer .Tooltip {
  top: 50%;
  width: 260px;
}
.AddCardDialog .card-types .card {
  display: grid;
  padding: 10px;
  color: #3f4c6999;
  background: #F1F1F1;
  border: 1px solid #F1F1F1;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.AddCardDialog .card-types .card::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.AddCardDialog .card-types .card::before,
.AddCardDialog .card-types .card .card-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: 1/1/2/2;
}
.AddCardDialog .card-types .card.disabled {
  pointer-events: none;
  opacity: 0.7;
}
.AddCardDialog .card-types .card:hover,
.AddCardDialog .card-types .card.active {
  color: #3F4C69;
  border-color: #3F4C69;
}
.AddCardDialog .card-types .card .card-dialog .card-type {
  margin-bottom: 10px;
}
.AddCardDialog .card-types .card .card-type {
  font-size: 16px;
  font-weight: 700;
}
.AddCardDialog .card-types .card .card-description {
  font-weight: 500;
}
.AddCardDialog .card-types .card .product-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.AddCardDialog .card-types .card .product-wrapper .AccountCard {
  margin-right: 0;
}
.AddCardDialog .Input.disabled input,
.AddCardDialog .SelectAsync .selectWrapper.disabled .box {
  -webkit-text-fill-color: #3F4C69;
  color: #3F4C69;
  opacity: 1;
}
@media (max-width: 420px) {
  .AddCardDialog {
    width: calc(100vw - 30px);
  }
}

.GAuthEnableForm .info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.GAuthEnableForm .code {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.GAuthEnableForm .code img {
  width: 100%;
}
.GAuthEnableForm .steps {
  margin-left: 20px;
  margin-bottom: -10px;
}
.GAuthEnableForm .steps .step {
  display: flex;
  color: rgba(63, 76, 105, 0.6);
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 10px;
}
.GAuthEnableForm .steps .step > span {
  flex-shrink: 0;
  margin-right: 10px;
  line-height: 13px;
}
.GAuthEnableForm .steps .step .sub {
  font-size: 13px;
  font-weight: 500;
  color: #3F4C69;
}
.GAuthEnableForm .steps .step .sub2 {
  display: inline-block;
  color: #6377A4;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 4px;
}
.GAuthEnableForm .steps .step .sub2 .clipboard {
  width: 13px;
  height: 13px;
  vertical-align: top;
}
.GAuthEnableForm .steps .step .link {
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.GAuthEnableForm .important {
  color: rgba(63, 76, 105, 0.6);
  font-size: 12px;
  line-height: 13px;
  margin-bottom: 20px;
}
.GAuthEnableForm .important .label {
  color: #3F4C69;
  font-weight: 700;
  margin-bottom: 4px;
}
.GAuthEnableForm .Input {
  margin-bottom: 20px;
}
.GAuthEnableForm .Input .errorText {
  max-width: 260px;
}
.GAuthEnableForm .inputs {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  .GAuthEnableForm .info {
    flex-direction: column;
  }
  .GAuthEnableForm .code {
    margin-bottom: 20px;
  }
  .GAuthEnableForm .steps {
    margin-left: 0;
  }
  .GAuthEnableForm .Input .errorText {
    max-width: 200px;
  }
  .GAuthEnableForm .Input .errorTransition .errorText {
    right: 200px;
  }
}

.ActivateTotpDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 560px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ActivateTotpDialog .title {
  margin: 30px 0 20px;
  font-size: 28px;
  font-weight: 300;
}
.ActivateTotpDialog .header {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin-bottom: 20px;
}
.ActivateTotpDialog .footer {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin: 20px 0 30px;
}
.ActivateTotpDialog .link {
  font-size: 13px;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
}
@media (max-width: 600px) {
  .ActivateTotpDialog {
    width: 360px;
  }
}

.Enable3DSDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.Enable3DSDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.Enable3DSDialog .title {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 300;
}
.Enable3DSDialog .subtitle {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
}
.Enable3DSDialog .footer {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin-bottom: 30px;
}
.Enable3DSDialog .sub {
  font-weight: 500;
  color: #3F4C69;
}
.Enable3DSDialog .link {
  font-size: 13px;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
}
.Enable3DSDialog .Input {
  margin-top: 10px;
  height: unset;
}
.Enable3DSDialog .actions {
  display: flex;
  width: 100%;
  margin: 40px 0 20px 0;
}
.Enable3DSDialog .actions .Button {
  width: 100%;
}
@media (max-width: 420px) {
  .Enable3DSDialog {
    width: calc(100vw - 30px);
  }
  .Enable3DSDialog .Input .transition .errorText {
    right: 150px;
    width: 150px;
  }
}

.RemoveTemplateDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 380px;
  min-height: 10px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.RemoveTemplateDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.RemoveTemplateDialog .title {
  margin: 30px 0 14px;
  font-size: 28px;
  font-weight: 300;
}
.RemoveTemplateDialog .content {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin-bottom: 20px;
}
.RemoveTemplateDialog .actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.RemoveTemplateDialog .actions .Button {
  width: 48%;
}
@media (max-width: 410px) {
  .RemoveTemplateDialog {
    width: calc(100vw - 30px);
  }
  .RemoveTemplateDialog .actions .Button {
    font-size: 15px;
  }
}

.FileInput .drag-box {
  position: relative;
  width: 100%;
  height: 160px;
  border: 4px dashed #bdbdbd99;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 300;
  overflow: hidden;
  transition: all 0.3s ease-out;
}
.FileInput .drag-box::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -60%;
  height: 100%;
  width: 60%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(63, 76, 105, 0.1) 40%, rgba(63, 76, 105, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
}
.FileInput .drag-box.loading::before {
  animation: gradient-progress 1.5s linear infinite;
}
.FileInput .drag-box.disabled {
  border-color: #bdbdbd66;
  color: #0006;
  pointer-events: none;
}
.FileInput .drag-box.active,
.FileInput .drag-box:hover {
  border-color: #3f4c69;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
}
.FileInput .selected {
  min-height: 16px;
  line-height: 16px;
  position: relative;
  margin-bottom: 10px;
}
.FileInput .selected-empty {
  color: #0006;
}
.FileInput .selected-file {
  display: flex;
  align-items: center;
}
.FileInput .selected .Icon {
  flex-shrink: 0;
}
.FileInput .selected .Icon.file {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.FileInput .selected .Icon.close {
  width: 18px;
  height: 18px;
  margin: -1px 0 -1px 8px;
  position: static;
  transition: all 0.3s ease-in-out;
}
.FileInput .selected .Icon.close.disabled {
  pointer-events: none;
  opacity: 0.7;
}
.FileInput .selected .filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.FileInput .progress {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
}
.FileInput .progress::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: #3F4C69;
  animation: gradient-progress 1.5s linear infinite;
}
.FileInput .error {
  color: #D0021B;
  line-height: 16px;
  min-height: 16px;
  word-break: break-word;
}
@keyframes gradient-progress {
  0% {
    width: 20%;
    left: -20%;
  }
  50% {
    left: 20%;
    width: 60%;
  }
  100% {
    width: 20%;
    left: 100%;
  }
}

.DraftImportDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 380px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.DraftImportDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.DraftImportDialog .title {
  margin: 30px 0 20px;
  font-size: 28px;
  font-weight: 300;
}
.DraftImportDialog .actions {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 20px;
}
.DraftImportDialog .actions .Button {
  width: 100%;
  padding: 0 40px;
}
.DraftImportDialog .actions .Button.disabled {
  pointer-events: auto;
  cursor: not-allowed;
}
.DraftImportDialog .actions .Button.disabled:hover,
.DraftImportDialog .actions .Button.disabled.active {
  background: var(--primary-button-color);
}
.DraftImportDialog .FileInput {
  margin-bottom: 10px;
}
.DraftImportDialog .info-block {
  line-height: 16px;
  color: #3f4c6999;
  margin-bottom: 10px;
}
.DraftImportDialog .info-block.semibold {
  font-weight: 500;
}
.DraftImportDialog .info-block a {
  color: var(--link-color);
  text-decoration: none;
}
.DraftImportDialog .info-block a:hover,
.DraftImportDialog .info-block a.active {
  color: var(--primary-button-color);
}
@media (max-width: 410px) {
  .DraftImportDialog {
    width: calc(100vw - 30px);
  }
}

.SuccessIconAnimated {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 6px solid #72BB53;
}
.SuccessIconAnimated::before,
.SuccessIconAnimated::after {
  content: '';
  height: 150px;
  position: absolute;
  background: #FFFFFF;
  transform: rotate(-45deg);
}
.SuccessIconAnimated::before {
  top: 4.5px;
  left: -3px;
  width: 45px;
  transform-origin: 100% 50%;
  border-radius: 150px 0 0 150px;
}
.SuccessIconAnimated::after {
  top: 0;
  left: 45px;
  width: 90px;
  transform-origin: 0 50%;
  border-radius: 0 150px 150px 0;
}
.SuccessIconAnimated .icon-line {
  height: 7.5px;
  background-color: #72BB53;
  display: block;
  border-radius: 3px;
  position: absolute;
  z-index: 10;
}
.SuccessIconAnimated .icon-line.line-tip {
  width: 0;
  left: 1.5px;
  top: 28.5px;
  transform: rotate(45deg);
}
.SuccessIconAnimated .icon-line.line-long {
  width: 0;
  right: 69px;
  top: 81px;
  transform: rotate(-45deg);
}
.SuccessIconAnimated .icon-circle {
  top: -6px;
  left: -6px;
  z-index: 10;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  border: 6px solid rgba(114, 187, 83, 0.5);
}
.SuccessIconAnimated .icon-fix {
  top: 12px;
  width: 7.5px;
  left: 39px;
  z-index: 1;
  height: 127.5px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #FFFFFF;
}
.SuccessIconAnimated.animating::after {
  animation: rotate-circle 4.25s ease-in;
}
.SuccessIconAnimated.animating .icon-line.line-tip {
  top: 69px;
  left: 21px;
  width: 37.5px;
  animation: icon-line-tip 0.75s;
}
.SuccessIconAnimated.animating .icon-line.line-long {
  top: 57px;
  right: 12px;
  width: 70.5px;
  animation: icon-line-long 0.75s;
}
@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1.5px;
    top: 28.5px;
  }
  54% {
    width: 0;
    left: 1.5px;
    top: 28.5px;
  }
  70% {
    width: 75px;
    left: -12px;
    top: 55.5px;
  }
  84% {
    width: 25.5px;
    left: 31.5px;
    top: 72px;
  }
  100% {
    width: 37.5px;
    left: 21px;
    top: 67.5px;
  }
}
@keyframes icon-line-long {
  0% {
    width: 0;
    right: 69px;
    top: 81px;
  }
  65% {
    width: 0;
    right: 69px;
    top: 81px;
  }
  84% {
    width: 82.5px;
    right: 0;
    top: 52.5px;
  }
  100% {
    width: 70.5px;
    right: 12px;
    top: 57px;
  }
}

.FailedIconAnimated {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 6px solid rgba(255, 160, 0, 0.5);
}
.FailedIconAnimated .icon-circle {
  position: absolute;
  top: -6px;
  left: -6px;
  transform: rotate(45deg);
}
.FailedIconAnimated .icon-circle circle {
  stroke: #ff8f00;
  stroke-dasharray: 0 197.92;
  stroke-dashoffset: 0;
}
.FailedIconAnimated .line-a-wrapper,
.FailedIconAnimated .line-b-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
}
.FailedIconAnimated .line-a-wrapper {
  transform: rotate(-45deg);
}
.FailedIconAnimated .line-b-wrapper {
  transform: rotate(45deg);
}
.FailedIconAnimated .line {
  display: block;
  position: absolute;
  z-index: 10;
  width: 7.5px;
  height: 0;
  left: 56.25px;
  top: -6px;
  border-radius: 4px;
  background-color: #ff8f00;
}
.FailedIconAnimated.animated .line {
  top: 20px;
  height: 80px;
}
.FailedIconAnimated.animating .icon-circle circle {
  animation: failed-circle-arc 0.75s;
}
.FailedIconAnimated.animating .line {
  animation: failed-icon-line 0.75s;
}
@keyframes failed-circle-arc {
  0% {
    stroke-dasharray: 0 197.92 0 197.92;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 0 197.92 0 197.92;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 98.96 98.96 98.96 98.96;
    stroke-dashoffset: 98.96;
  }
  70% {
    stroke-dasharray: 0 296.881 0 98.96;
    stroke-dashoffset: 98.96;
  }
  100% {
    stroke-dasharray: 0 296.881 0 98.96;
    stroke-dashoffset: 98.96;
  }
}
@keyframes failed-icon-line {
  0% {
    top: -6px;
    height: 0;
  }
  50% {
    top: -6px;
    height: 0;
  }
  70% {
    top: -6px;
    height: 132px;
  }
  /*84% {
        top: 20px;
        height: 80px;
    }*/
  100% {
    top: 20px;
    height: 80px;
  }
}

.DraftImportReportDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 420px;
  padding: 0 40px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.DraftImportReportDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.DraftImportReportDialog .title {
  margin: 30px 0 30px;
  font-size: 28px;
  font-weight: 300;
}
.DraftImportReportDialog .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.DraftImportReportDialog .wrapper .message {
  font-size: 24px;
  font-weight: 300;
  margin-top: 30px;
  text-align: center;
}
.DraftImportReportDialog .actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.DraftImportReportDialog .actions .Button {
  width: 100%;
  padding: 0 40px;
}
.DraftImportReportDialog .report-block .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  line-height: 16px;
}
.DraftImportReportDialog .report-block .row:first-child {
  margin-top: 0;
}
@media (max-width: 410px) {
  .DraftImportReportDialog {
    width: calc(100vw - 30px);
  }
}

.ReceiptConfirmationDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 380px;
  min-height: 10px;
  padding: 40px 40px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ReceiptConfirmationDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ReceiptConfirmationDialog .wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.ReceiptConfirmationDialog .title {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 300;
  text-align: center;
}
.ReceiptConfirmationDialog .content {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin-bottom: 20px;
}
.ReceiptConfirmationDialog .actions {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.ReceiptConfirmationDialog .actions .Button {
  width: 100%;
}
@media (max-width: 410px) {
  .ReceiptConfirmationDialog {
    width: calc(100vw - 30px);
  }
  .ReceiptConfirmationDialog .actions .Button {
    font-size: 15px;
  }
}

.RemoveDraftsDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 380px;
  min-height: 10px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.RemoveDraftsDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.RemoveDraftsDialog .title {
  margin: 30px 0 14px;
  font-size: 28px;
  font-weight: 300;
}
.RemoveDraftsDialog .content {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin-bottom: 20px;
}
.RemoveDraftsDialog .actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.RemoveDraftsDialog .actions .Button {
  width: 48%;
}
@media (max-width: 410px) {
  .RemoveDraftsDialog {
    width: calc(100vw - 30px);
  }
  .RemoveDraftsDialog .actions .Button {
    font-size: 15px;
  }
}

.ProcessDraftsDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 380px;
  min-height: 10px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ProcessDraftsDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ProcessDraftsDialog .title {
  margin: 30px 0 14px;
  font-size: 28px;
  font-weight: 300;
}
.ProcessDraftsDialog .content {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
  line-height: 16px;
  margin-bottom: 20px;
}
.ProcessDraftsDialog .actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ProcessDraftsDialog .actions .Button {
  width: 48%;
}
@media (max-width: 410px) {
  .ProcessDraftsDialog {
    width: calc(100vw - 30px);
  }
  .ProcessDraftsDialog .actions .Button {
    font-size: 15px;
  }
}


.DraftProcessReportDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 420px;
  padding: 0 40px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.DraftProcessReportDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.DraftProcessReportDialog .title {
  margin: 30px 0 30px;
  font-size: 28px;
  font-weight: 300;
}
.DraftProcessReportDialog .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.DraftProcessReportDialog .wrapper .message {
  font-size: 24px;
  font-weight: 300;
  margin-top: 30px;
  text-align: center;
}
.DraftProcessReportDialog .actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.DraftProcessReportDialog .actions .Button {
  width: 100%;
  padding: 0 40px;
}
.DraftProcessReportDialog .report-block .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  line-height: 16px;
}
.DraftProcessReportDialog .report-block .row:first-child {
  margin-top: 0;
}
.DraftProcessReportDialog .details-block {
  margin-top: 20px;
}
.DraftProcessReportDialog .details-block .toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #3F4C69;
}
.DraftProcessReportDialog .details-block .toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background-color 0.3s ease-in-out;
}
.DraftProcessReportDialog .details-block .toggle.hasFilters:after {
  background: var(--primary-button-color);
}
.DraftProcessReportDialog .details-block .toggle .toggleIcon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  transition: 0.35s linear;
}
.DraftProcessReportDialog .details-block .toggle .toggleIcon.collapsed {
  transform: rotate(-180deg);
}
.DraftProcessReportDialog .details-content {
  font-size: 12px;
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
}
.DraftProcessReportDialog .details-content .item {
  padding-bottom: 10px;
  border-bottom: 1px solid #bdbdbd99;
  margin-bottom: 10px;
}
.DraftProcessReportDialog .details-content .item:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.DraftProcessReportDialog .details-content .row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.DraftProcessReportDialog .details-content .row:first-child {
  margin-top: 0;
}
.DraftProcessReportDialog .details-content .row .label {
  white-space: nowrap;
  margin-right: 20px;
}
.DraftProcessReportDialog .details-content .row .value {
  text-align: right;
}
@media (max-width: 410px) {
  .DraftProcessReportDialog {
    width: calc(100vw - 30px);
  }
}

.DraftRemoveReportDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 420px;
  padding: 0 40px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.DraftRemoveReportDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.DraftRemoveReportDialog .title {
  margin: 30px 0 30px;
  font-size: 28px;
  font-weight: 300;
}
.DraftRemoveReportDialog .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.DraftRemoveReportDialog .wrapper .message {
  font-size: 24px;
  font-weight: 300;
  margin-top: 30px;
  text-align: center;
}
.DraftRemoveReportDialog .actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.DraftRemoveReportDialog .actions .Button {
  width: 100%;
  padding: 0 40px;
}
.DraftRemoveReportDialog .report-block .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  line-height: 16px;
}
.DraftRemoveReportDialog .report-block .row:first-child {
  margin-top: 0;
}
@media (max-width: 410px) {
  .DraftRemoveReportDialog {
    width: calc(100vw - 30px);
  }
}

.LayoutChangeNotes {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 30px 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.LayoutChangeNotes .title {
  font-size: 28px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 20px;
}
.LayoutChangeNotes .notes {
  font-size: 14px;
  color: rgba(63, 76, 105, 0.6);
  margin-bottom: 20px;
}
.LayoutChangeNotes .actions {
  display: flex;
  flex-flow: column nowrap;
}
.LayoutChangeNotes .actions .Button {
  width: 100%;
  margin-bottom: 10px;
}
.LayoutChangeNotes .actions .Button:last-child {
  margin-bottom: 0;
}

.DocumentsAlertNotes {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 30px 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.DocumentsAlertNotes .FailedIconAnimated {
  margin: 0 auto 30px;
}
.DocumentsAlertNotes .title {
  font-size: 28px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 20px;
}
.DocumentsAlertNotes .notes {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 30px;
  text-align: center;
}
.DocumentsAlertNotes .notes a {
  cursor: pointer;
  color: #6377A4;
  text-decoration: underline;
  -webkit-text-decoration-style: dashed;
          text-decoration-style: dashed;
}
.DocumentsAlertNotes .actions {
  display: flex;
  flex-flow: column nowrap;
}
.DocumentsAlertNotes .actions .Button {
  width: 100%;
  margin-bottom: 10px;
}
.DocumentsAlertNotes .actions .Button:last-child {
  margin-bottom: 0;
}

.ExportAlertNotes {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 30px 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ExportAlertNotes .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ExportAlertNotes .FailedIconAnimated {
  margin: 0 auto 30px;
}
.ExportAlertNotes .title {
  font-size: 28px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 20px;
}
.ExportAlertNotes .notes {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 30px;
  text-align: center;
}
.ExportAlertNotes .notes a {
  cursor: pointer;
  color: #6377A4;
  text-decoration: underline;
  -webkit-text-decoration-style: dashed;
          text-decoration-style: dashed;
}
.ExportAlertNotes .actions {
  display: flex;
  flex-flow: column nowrap;
}
.ExportAlertNotes .actions .Button {
  width: 100%;
  margin-bottom: 10px;
}
.ExportAlertNotes .actions .Button:last-child {
  margin-bottom: 0;
}

.AccountCards {
  display: flex;
  flex-flow: row nowrap;
}
.AccountCards .has-more {
  width: 80px;
  height: 50px;
  border-radius: 3px;
  font-size: 11px;
  color: rgba(63, 76, 105, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.AccountCards .has-more .dots {
  line-height: 1;
  font-size: 32px;
  margin-top: -20px;
}
.AccountCards .AccountCard:not(:first-child),
.AccountCards .has-more {
  margin-left: 9px;
}

.AccountCardsDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 30px 40px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.AccountCardsDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.AccountCardsDialog .title {
  font-size: 28px;
  font-weight: 300;
}
.AccountCardsDialog .AccountCards {
  margin-top: 20px;
  height: unset;
  flex-flow: row wrap;
  margin-right: -20px;
  margin-bottom: -14px;
}
.AccountCardsDialog .AccountCards .AccountCard {
  margin-left: 0 !important;
  margin-right: 20px;
  margin-bottom: 14px;
}
@media (max-width: 469px) {
  .AccountCardsDialog {
    width: calc(100vw - 30px);
  }
}

.TrackingInfo {
  display: flex;
  align-items: center;
}
.TrackingInfo .Icon.clipboard {
  width: 13px;
  height: 13px;
  position: static;
  margin-right: 4px;
}
.TrackingInfo .trackingLink {
  margin-left: 6px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
  height: 16px;
}
.TrackingInfo .trackingLink .Icon {
  width: 14px;
  height: 14px;
  margin: 0 4px 0 0;
}

.TrackRequestDialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 600px;
  padding: 30px 40px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.TrackRequestDialog .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.TrackRequestDialog .title {
  font-size: 28px;
  font-weight: 300;
  margin-bottom: 10px;
}
.TrackRequestDialog .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 300;
  padding: 10px 0;
}
.TrackRequestDialog .row .value {
  position: relative;
  min-width: 0;
  text-align: right;
  margin-left: 20px;
}
@media (max-width: 649px) {
  .TrackRequestDialog {
    width: calc(100vw - 30px);
  }
}

.ChangeMccUsageGroup {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 420px;
  padding: 0 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.ChangeMccUsageGroup .close-modal.close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.ChangeMccUsageGroup .title {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 300;
  text-align: center;
}
.ChangeMccUsageGroup .Select {
  margin-top: 20px;
}
.ChangeMccUsageGroup .actions {
  display: flex;
  width: 100%;
  margin: 40px 0 20px 0;
}
.ChangeMccUsageGroup .actions .Button {
  width: 100%;
}
@media (max-width: 500px) {
  .ChangeMccUsageGroup {
    width: calc(100vw - 30px);
  }
}

.Notification {
  z-index: 100000;
  width: 300px;
  margin: 0 10px 10px 10px;
  padding: 10px;
  position: relative;
  background-color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  border-top: 4px solid grey;
}
.Notification.warning {
  border-color: #F4AB11;
}
.Notification.success {
  border-color: #6377a4;
}
.Notification.error {
  border-color: #E61515;
}
.Notification .header {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 10px;
}
.Notification .header .close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
}
.Notification .content {
  display: flex;
  padding: 0 0px 5px 0px;
  font-size: 13px;
}
.Notification .content .Icon {
  flex-shrink: 0;
  margin-right: 15px;
}
.Notification .content .contentWrapper {
  display: flex;
  flex-direction: column;
}
.Notification .content .contentWrapper .message {
  padding-right: 25px;
}
.Notification .content .contentWrapper .message.bold {
  margin-bottom: 5px;
  font-weight: 500;
}
.Notification .content .contentWrapper .description {
  color: rgba(63, 76, 105, 0.7);
}

@font-face {
  font-family: 'Roboto';
  src: url(/static/media/Roboto-Light.fc84e998.ttf);
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/static/media/Roboto-Regular.3e1af3ef.ttf);
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/static/media/Roboto-Medium.d0884059.ttf);
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/static/media/Roboto-Bold.ee7b96fa.ttf);
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "password-mask";
  src: url(data:font/woff2;charset:utf-8;base64,d09GMgABAAAAAAMUAAoAAAAACAAAAALLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAggAKcHILBgABNgIkAwYEIAWJSAcvG0gHEZWcjBRfHdjGjMcejbPCigr7qKAHNeanOj7Jm5KeeqEcD9+vvZ677xMHVQqMjhWDjCyoTl1ZdXydAWAZ2bLKbACcs9Xnq2pytVoloiXHDrIGgeGktwDL77mDVWev4kIiuu5b/b3qu0lI2lLou/73KenUDvDhB0trgOEEPNYLpQMHqHSyBMRj25J66GeNQQ+RI2SIyNESUhqL2yiSXdUD294/E0cs9hkA/uflf8vz9ncbYNPWzbtsJM/TaI406vyxBZEDmAhCUkNDE/wB+oB3OcF3jD9DMP4jHycEwkCGDAkJBRRQRBEllFBGGRVUUEUVNdRQRx0NNNBEEy200EYbHXR+J2SggAwTMRVQACE6HczWr33H5bra1bHZYtel6UeaPr0j02cBa28QSCze+/ej7bV/KymNwcfXD++N5Xb7GWeyMpIMBDRDcRsRs8NiWEn/07sFMh0B6CpQdzWJQhXLMRCmWo5MywEkq53LLjwoOuVudslFxXCUULcnRtDM7pDWa1laqGmwxdif01IR1Kvb6cHeJ8xp2BlrGeGXSh55cJp+pUh7fkIZUuYa5arc++C6vu8GYXQ713ltclCzMsR99Yaa9i/Xao1BxhJENQK/SHVq1a/davW6ZaOKhKxrv1KRk1V4lbnJKvlR6ZVatovSDDNtTHA2gj5ZCA3sO1PNMfcYQcgjdEAK4bzcwN5iHp+7iaFi3F5FTW7lg3xGpVbk9CtQShkcY7u2MDzDUhVgZOpCxcb35WWxv16Gdng6DXdqOT0Xa3yC8X43Wfq6YSwxk0fmJ6yXoP6DD3kxOsv2tY69T0pO6cz2rDAqF648Yru1IAwZ9vYOWAt8FKQsl4FJIhZLWcBz8fkWfdEV6Eg1MVIlzTtA5DJaCz8TnC8kYyMkRbaB8sUbwp7zNVvy5YSclouyrPR/1M0/kF+p/wkAABmRVU7qqPq5awA=) format("woff2");
}
body {
  color: #3F4C69;
  font-size: 12px;
  line-height: 1;
  background: var(--primary-background);
  -webkit-tap-highlight-color: transparent;
}
body * {
  box-sizing: border-box;
}
body button {
  font-family: var(--font-family);
}
html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: var(--font-family);
}
.ReactModal__Overlay {
  opacity: 0;
}
.ReactModal__Overlay--after-open {
  opacity: 1;
  transition: opacity 250ms linear;
}
.ReactModal__Content--after-open {
  transition: all 250ms linear;
}
.ReactModal__Overlay--before-close {
  opacity: 0;
}
.ReactModal__Content--before-close {
  transition: all 250ms linear;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 0.3s linear;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active,
.fade-exit-done {
  opacity: 0;
  transition: opacity 0.3s linear;
}
.toggle-enter {
  opacity: 0;
  transform: scale3d(0, 0, 0);
}
.toggle-enter-active {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: all 0.35s ease;
}
.toggle-exit {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}
.toggle-exit-active {
  opacity: 0;
  transform: scale3d(0, 0, 0);
  transition: all 0.35s ease-out;
}
.MainLayout {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.notificationsWrapper {
  width: 320px;
  height: 100%;
  pointer-events: none;
  position: fixed;
  padding: 0;
  top: 0;
  right: 0;
  overflow: hidden;
  z-index: 9000;
}
.notificationsWrapper > div {
  padding-top: 10px;
  height: 100%;
}
.uppercase {
  text-transform: uppercase;
}
.pre-formatted {
  white-space: pre-wrap;
}
.clickable {
  cursor: pointer;
}
.breakable {
  word-break: break-word;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.IconBurger {
  width: 22px;
  height: 22px;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.IconBurger span {
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #3F4C69;
  transition: all 0.3s ease-in-out;
}
.IconBurger span:nth-child(1) {
  top: 3px;
}
.IconBurger span:nth-child(2) {
  top: 10px;
}
.IconBurger span:nth-child(3) {
  top: 17px;
}
.IconBurger.open {
  transform: rotate(-45deg);
  transition-delay: 0.3s;
}
.IconBurger.open span:nth-child(1) {
  transform: rotate(90deg) translateX(7px);
  transition-delay: 0.3s;
}
.IconBurger.open span:nth-child(2) {
  width: 0;
  left: 50%;
}
.IconBurger.open span:nth-child(3) {
  transform: translateY(-7px);
  transition-delay: 0.3s;
}

.UserAvatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background-color 0.3s ease-in;
}
.UserAvatar .name {
  color: #FFF;
  font-size: 13px;
  line-height: 1;
}
.UserAvatar .Loader {
  width: 16px;
  height: 16px;
}
.UserAvatar .Loader .spin {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.ClientSelectOption {
  display: flex;
  align-items: center;
  padding: 10px;
  color: #3f4c69b3;
}
.ClientSelectOption .UserAvatar {
  flex-shrink: 0;
  margin-right: 10px;
}
.ClientSelectOption .title {
  line-height: 1.2;
}
.ClientSelectOption.clickable:hover {
  background: var(--primary-background);
  color: #3F4C69;
}
.ClientSelectOption.active {
  color: #3F4C69;
}
.ClientSelectOption.active .UserAvatar {
  width: 48px;
  height: 48px;
}
.ClientSelectOption.active .UserAvatar .name {
  font-size: 18px;
}
.ClientSelectOption.active .title {
  font-size: 14px;
  font-weight: 500;
}
.ClientSelectOption.disabled {
  cursor: default;
  background: #BDBDBD33 !important;
  color: #3f4c69b3 !important;
}

.ClientSelect .active-client {
  display: flex;
  align-items: center;
}
.ClientSelect .active-client.clickable {
  cursor: pointer;
}
.ClientSelect .active-client.clickable .title {
  color: #6377a4;
}
.ClientSelect .active-client.clickable:hover .title {
  color: #3F4C69;
}
.ClientSelect .active-client .UserAvatar {
  margin-right: 10px;
}
.ClientSelect .active-client .title {
  font-size: 14px;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ClientSelect .active-client .arrow {
  transform: rotate(0deg);
  transition: 0.35s linear;
  margin-left: 6px;
}
.ClientSelect .active-client .arrow.active {
  transform: rotate(180deg);
}
.ClientSelect .menu {
  min-width: calc(100% + 20px);
  left: -10px;
  top: 50px;
}
.ClientSelect .clients-popup .ClientSelectOption {
  border-bottom: 1px solid rgba(189, 189, 189, 0.4);
}
.ClientSelect .clients-popup .ClientSelectOption:last-child {
  border-bottom: none;
}

.Balances {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
  color: #3F4C69;
  text-align: right;
}
.Balances .decimals {
  font-size: 0.8em;
}
.Balances .available {
  font-weight: 500;
}
.Balances .hold {
  font-size: 13px;
}

.Header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
  position: relative;
}
.Header .headerWrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 10px;
}
.Header .headerWrapper .logo {
  flex-shrink: 0;
  margin-right: 10px;
  max-width: 222px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
  cursor: pointer;
}
.Header .headerWrapper .menu-bar {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.Header .headerWrapper .menu-bar > .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  color: rgba(63, 76, 105, 0.7);
  font-weight: 300;
  padding: 0 12px;
  text-decoration: none;
}
.Header .headerWrapper .menu-bar > .item:last-child {
  border-left: 1px solid rgba(189, 189, 189, 0.6);
}
.Header .headerWrapper .menu-bar > .item.main {
  font-weight: 400;
  color: #6377a4;
}
.Header .headerWrapper .menu-bar > .item.main.last {
  margin-right: 10px;
}
.Header .headerWrapper .menu-bar > .item.active,
.Header .headerWrapper .menu-bar > .item:hover {
  background: var(--primary-background);
  color: #3F4C69;
}
.Header .headerWrapper .menu-bar .ClientSelect {
  margin-left: auto;
  margin-right: 20px;
}
.Header .headerWrapper .menu-bar .Balances {
  margin-right: 10px;
}
.Header .headerWrapper .menu-button {
  display: none;
  margin-left: auto;
  margin-right: 8px;
  z-index: 1001;
}
.Header .menu-page {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-background);
  z-index: 1000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.Header .menu-page.open {
  max-height: 100%;
}
.Header .menu-page .menu-head {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}
.Header .menu-page .menu-wrapper {
  border-top: 1px solid rgba(189, 189, 189, 0.6);
  padding: 20px;
}
.Header .menu-page .user-name {
  font-size: 20px;
  margin-bottom: 20px;
}
.Header .menu-page .menu-list .item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #3f4c69;
  font-size: 17px;
  font-weight: 300;
  padding: 10px 20px;
  text-decoration: none;
  margin: 0 -20px;
}
.Header .menu-page .menu-list .item:last-child {
  border-bottom: none;
}
.Header .menu-page .menu-list .item .Icon {
  margin-left: 10px;
}
.Header .menu-page .menu-list .item.main {
  font-weight: 400;
}
.Header .menu-page .menu-list .item:active,
.Header .menu-page .menu-list .item.active {
  background: rgba(99, 119, 164, 0.05);
}
.Header .menu-page .menu-list .gap {
  width: 100%;
  height: 0;
  border-bottom: 1px solid rgba(189, 189, 189, 0.4);
  margin: 10px 0;
}
.Header .menu-page .menu-list .ClientSelect {
  display: none;
}
.Header .menu-page .menu-list .Balances {
  text-align: left;
  font-size: 17px;
}
.Header .menu-page .menu-list .Balances .available {
  font-weight: inherit;
}
.Header .menu-page .menu-list .Balances .hold {
  font-size: inherit;
  font-weight: 300;
  color: #3f4c69;
}
@media (max-width: 1023px) {
  .Header .headerWrapper .logo {
    margin: 0;
  }
  .Header .headerWrapper .menu-bar {
    display: none;
    justify-content: flex-end;
    margin-right: 10px;
  }
  .Header .headerWrapper .menu-button {
    display: block;
  }
  .Header .menu-page {
    display: block;
  }
}

.Message {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 1;
}
.Message .message {
  background: rgba(63, 76, 105, 0.7);
  color: #FFF;
  font-size: 14px;
}
.Message .message .wrapper {
  width: 1180px;
  height: 30px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.Message .actions {
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 12px;
}
.Message .actions .Button {
  color: #FFF;
  font-size: 14px;
  background: none;
  padding: 0;
  border-bottom: 1px dashed #fff;
  transition: border-color 0.3s ease-in;
}
.Message .actions .Button:hover {
  border-bottom-color: transparent;
}
.Message .actions .Button:not(:last-child) {
  margin-right: 16px;
  position: relative;
}
.Message .actions .Button:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FFFFFF99;
}
.Message .Icon.times {
  position: absolute;
  top: 7px;
  right: 0;
}
.Message .Icon.times:hover {
  opacity: 0.8;
}
@media (max-width: 1200px) {
  .Message .message .wrapper {
    padding: 10px;
    width: unset;
    height: unset;
    display: block;
  }
  .Message .text {
    margin-bottom: 10px;
  }
  .Message .actions {
    margin-left: 0;
  }
}

.NotificationPage .pageWrapper {
  min-height: calc(100vh - 60px);
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.NotificationPage .wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
  border-radius: 10px;
  padding: 40px 60px;
}
.NotificationPage .title {
  font-size: 24px;
  font-weight: 300;
  margin-top: 30px;
  text-align: center;
}
.NotificationPage .message {
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  margin-top: 15px;
}
.NotificationPage .actions {
  width: 240px;
  margin-top: 30px;
}
.NotificationPage .actions .Button {
  width: 100%;
  font-size: 14px;
  padding: 0 15px;
}
.NotificationPage .actions .Button:not(:last-child) {
  margin-bottom: 10px;
}
.NotificationPage > .Loader {
  height: unset;
}
@media (max-width: 649px) {
  .NotificationPage .wrapper {
    padding: 40px;
  }
  .NotificationPage .actions {
    width: 220px;
  }
}

.AuthLayout {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
@supports (overflow-y: overlay) {
  .AuthLayout {
    overflow-y: overlay;
  }
}
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
  .AuthLayout {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
.AuthLayout .transition {
  width: 100%;
}

.AnonLayout {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@supports (overflow-y: overlay) {
  .AnonLayout {
    overflow-y: overlay;
  }
}
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
  .AnonLayout {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
.AnonLayout .transition {
  width: 100%;
  height: 100%;
}

.LangSelector .lang-option {
  display: flex;
  align-items: center;
  line-height: 16px;
}
.LangSelector .lang-option img {
  width: 20px;
  height: 15px;
  margin-right: 8px;
  border: 1px solid #eee;
}

.LoginPage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100%;
  min-height: -webkit-fill-available;
  min-height: -moz-available;
  min-height: stretch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.LoginPage .form {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 360px;
  min-height: 10px;
  padding: 40px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.LoginPage .form .header {
  position: absolute;
  top: -80px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
}
.LoginPage .form .header .logo {
  width: 330px;
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}
.LoginPage .form .header .logo.large {
  height: 75px;
}
.LoginPage .form .title {
  text-align: center;
  font-size: 28px;
  font-weight: 300;
}
.LoginPage .form .credentials {
  margin-top: 20px;
}
.LoginPage .form .credentials .Input:not(:last-child) {
  margin-bottom: 10px;
}
.LoginPage .form .forgot {
  visibility: hidden;
  margin-top: 5px;
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
}
.LoginPage .form .forgot > span {
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
}
.LoginPage .form .errorBlock {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-size: 11.2px;
  color: #F5425F;
}
.LoginPage .form .LangSelector {
  position: relative;
  left: 50%;
  margin-left: -60px;
  margin-top: 15px;
  width: 120px;
}
@media (max-width: 500px) {
  .LoginPage .form {
    width: calc(100% - 20px);
    margin: 50px 0;
  }
}

.AccountsFilters {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
  margin-bottom: 5px;
}
.AccountsFilters .filterGroup {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}
.AccountsFilters .filterGroup > .Input,
.AccountsFilters .filterGroup > .SelectAsync {
  width: 30%;
  margin-bottom: 10px;
}
.AccountsFilters .filterGroup > .Input:nth-child(1),
.AccountsFilters .filterGroup > .SelectAsync:nth-child(1) {
  width: 100%;
}
@media (max-width: 1024px) {
  .AccountsFilters .filterGroup > .Input,
  .AccountsFilters .filterGroup > .SelectAsync {
    width: 45%;
  }
}
@media (max-width: 469px) {
  .AccountsFilters > .Input,
  .AccountsFilters > .SelectAsync {
    width: calc(50% - 5px);
  }
}

.Account {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 384px;
  height: 145px;
  margin-right: 14px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.Account .cardHeader {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 25px;
}
.Account .cardHeader.background-0,
.Account .cardHeader.background-1,
.Account .cardHeader.background-2 {
  border-radius: 10px 10px 0 0;
}
.Account .cardHeader.background-0 .block,
.Account .cardHeader.background-1 .block,
.Account .cardHeader.background-2 .block {
  width: 100%;
}
.Account .cardHeader.background-0 {
  background-color: var(--account-background-1);
}
.Account .cardHeader.background-1 {
  background-color: var(--account-background-2);
}
.Account .cardHeader.background-2 {
  background-color: var(--account-background-3);
}
.Account .cardHeader .redGradient,
.Account .cardHeader .greenGradient,
.Account .cardHeader .violetGradient {
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 100%;
}
.Account .cardHeader .dots {
  position: absolute;
  right: 0px;
  width: 42px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease-in;
  background-size: 32px 15px !important;
}
.Account .cardHeader .dots:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.Account .cardHeader .DropDown.uk_locale .menu {
  width: 165px;
}
.Account .cardHeader .menu {
  width: 120px;
  top: 20px;
  right: -5px;
  padding: 5px 0;
}
.Account .cardHeader .menu .item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 25px;
  font-size: 13px;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  color: rgba(63, 76, 105, 0.7);
  font-weight: 300;
}
.Account .cardHeader .menu .item:hover {
  background: var(--primary-background);
  color: #3F4C69;
}
.Account .cardHeader .menu .divider {
  height: 1px;
  margin: 0 10px;
  border-bottom: 1px solid rgba(63, 76, 105, 0.1);
}
.Account .content {
  height: 120px;
  padding: 10px 18px 5px 18px;
  cursor: pointer;
}
.Account .content .content-wrapper {
  display: flex;
}
.Account .content .center {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  width: 0;
  height: 35px;
  flex-grow: 1;
  margin-right: 5px;
}
.Account .content .center .name {
  display: inline-flex;
  flex-shrink: 0;
  max-width: 100%;
  margin-right: auto;
  height: 14px;
  font-size: 13px;
  color: #3f4c69;
}
.Account .content .center .name > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Account .content .center .name .pencil {
  position: relative;
  top: -2px;
  margin-left: 2px;
  flex-shrink: 0;
  transition: background 0.25s linear, background-color 0.25s linear;
  background-color: transparent;
  border-radius: 2px;
}
.Account .content .center .name .save {
  position: relative;
  top: -2px;
  margin-left: 2px;
  flex-shrink: 0;
  transition: background 0.25s linear, background-color 0.25s linear;
  background-color: transparent;
  border-radius: 2px;
}
.Account .content .center .name .save:hover {
  background: url(/static/media/saveActive.9eb50ef2.svg);
  background-color: rgba(99, 119, 164, 0.2);
}
.Account .content .center .name .Loader {
  width: 12px;
  height: 12px;
  margin-left: 2px;
}
.Account .content .center .name .Loader .spin {
  width: 12px;
  height: 12px;
  border-width: 2px;
}
.Account .content .center .name .Input {
  width: 200px;
  height: 18px;
  border: none;
  margin-top: -2px;
}
.Account .content .center .name .Input input {
  height: 18px;
  font-size: 13px;
  color: #3f4c69;
  font-weight: 500;
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(63, 76, 105, 0.4);
}
.Account .content .center .name .Input .border {
  background: rgba(63, 76, 105, 0.4);
}
.Account .content .center .name .Input.error .border {
  background: #F5425F;
}
.Account .content .center .name:hover .pencil {
  background: url(/static/media/pencilActive.23d977cb.svg);
  background-color: rgba(99, 119, 164, 0.2);
}
.Account .content .center .pan {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(63, 76, 105, 0.7);
  display: inline-flex;
  align-items: center;
}
.Account .content .center .pan .clipboard {
  position: relative;
  top: -2px;
  margin-left: 2px;
  flex-shrink: 0;
  transition: background 0.25s linear, background-color 0.25s linear;
  background-image: url(/static/media/clipboardOpaque.8aa0f0a6.svg);
  background-color: transparent;
  background-size: 14px 14px !important;
  background-position: center center;
  border-radius: 2px;
}
.Account .content .center .pan .clipboard:hover {
  background-image: url(/static/media/clipboard.e422cdbb.svg);
  background-color: rgba(99, 119, 164, 0.2);
}
.Account .content .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}
.Account .content .right .amount {
  line-height: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #3F4C69;
}
.Account .content .right .amount .decimals {
  line-height: 10px;
  font-size: 12px;
}
.Account .content .right .hold {
  margin: 4px 1px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(63, 76, 105, 0.7);
}
.Account .content .right .hold .decimals {
  font-size: 9px;
}
.Account .content .AccountCards {
  margin-top: 4px;
}
@media (min-width: 1201px) {
  .Account:nth-child(n + 4) {
    margin-top: 14px;
  }
}
@media (max-width: 1200px) {
  .Account .content .center .pan {
    margin-top: 3px;
    font-size: 10px;
  }
  .Account .content .right .hold {
    margin: 3px 1px 0 0;
    font-size: 10px;
  }
  .Account .content .right .hold .decimals {
    font-size: 8px;
  }
}
@media (max-width: 1200px) and (min-width: 1023px) {
  .Account {
    width: calc(33% - 6px);
    flex-shrink: 1;
  }
  .Account:nth-child(n + 4) {
    margin-top: 14px;
  }
}
@media (max-width: 1023px) and (min-width: 700px) {
  .Account {
    width: calc(50% - 7px);
    flex-shrink: 1;
    margin-right: 0;
  }
  .Account:nth-child(odd) {
    margin-right: 14px;
  }
  .Account:nth-child(n + 3) {
    margin-top: 14px;
  }
}
@media (max-width: 700px) and (min-width: 500px) {
  .Account {
    width: 100%;
    margin-right: 0;
  }
  .Account:nth-child(n + 2) {
    margin-top: 14px;
  }
  .Account .content .center .name {
    pointer-events: none;
  }
  .Account .content .center .name .pencil {
    display: none;
  }
}
@media (max-width: 500px) {
  .Account {
    width: 100%;
    height: 120px;
    border-radius: 0;
    margin-right: 0;
  }
  .Account .cardHeader {
    display: none;
  }
  .Account .content .center .name,
  .Account .content .center .pan {
    flex-shrink: 0;
  }
  .Account .content .center .name {
    pointer-events: none;
  }
  .Account .content .center .name .pencil {
    display: none;
  }
}

.Request {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 384px;
  height: 145px;
  margin-right: 14px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.Request .cardHeader {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  height: 25px;
  background: var(--request-header-color);
}
.Request .content {
  height: 120px;
  padding: 10px 18px 5px 18px;
}
.Request .content .content-wrapper {
  display: flex;
  height: 100%;
}
.Request .content .center {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  width: 0;
  flex-grow: 1;
}
.Request .content .center .name {
  display: inline-flex;
  position: relative;
  max-width: 100%;
  margin-right: auto;
  height: 14px;
  font-size: 13px;
  color: #808080;
}
.Request .content .center .name .DropDown {
  position: unset;
}
.Request .content .center .name .DropDown sup {
  position: relative;
  top: -2px;
  left: 4px;
  cursor: pointer;
  color: var(--link-color);
  text-decoration: underline;
  -webkit-text-decoration-style: dashed;
          text-decoration-style: dashed;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.Request .content .center .name .DropDown .menu {
  width: 300px;
  top: 16px;
  left: -40px;
}
.Request .content .center .name .DropDown .menu .tracking {
  padding: 10px;
  font-size: 11px;
  line-height: 13px;
  font-weight: 400;
  color: #3f4c69;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}
.Request .content .center .name .DropDown .menu .tracking span {
  font-weight: 600;
  color: #6377A4;
}
.Request .content .center .name .DropDown .menu .tracking .clipboard {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}
.Request .content .center .pan {
  margin-top: 4px;
  font-size: 11px;
  color: #A6A6A6;
}
.Request .content .right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  margin-left: auto;
  text-align: right;
  height: 100%;
}
.Request .content .right .amount {
  line-height: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #808080;
  white-space: nowrap;
}
.Request .content .right .amount .decimals {
  line-height: 10px;
  font-size: 12px;
}
.Request .content .right .activate {
  pointer-events: all;
  position: absolute;
  bottom: 8px;
  right: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: transparent;
  height: 23px;
  border-radius: 20px;
  color: var(--link-color);
  font-size: 12px;
  font-weight: 300;
  transition: all 0.3s linear;
  border: 1px solid var(--link-color);
  padding: 0 6px;
}
.Request .content .right .activate .unlock {
  background: url(/static/media/unlockBlue.a193a32d.svg);
  margin: 0 2px 1px 0;
  height: 12px;
  width: 12px;
  transition: all 0.3s linear !important;
}
.Request .content .right .activate:hover {
  color: #FFF;
  background: var(--link-color);
}
.Request .content .right .activate:hover .unlock {
  background: url(/static/media/unlockWhite.3e9f0b56.svg);
}
.Request .content .AccountCard {
  margin-top: 21px;
}
@media (max-width: 1200px) {
  .Request .content .center .pan {
    margin-top: 3px;
    font-size: 10px;
  }
}
@media (max-width: 500px) {
  .Request {
    width: 100%;
    height: 120px;
    border-radius: 0;
    margin-right: 0;
  }
  .Request .cardHeader {
    display: none;
  }
  .Request .content .center .name .DropDown .menu {
    left: 0;
    width: 280px;
  }
}

.SortSelect {
  position: relative;
}
.SortSelect .select {
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}
.SortSelect .select .box {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 0;
}
.SortSelect .select .box .FlipMove {
  align-items: flex-start;
}
.SortSelect .select .box .active {
  display: flex;
  align-items: flex-end;
  height: 14px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 3px;
}
.SortSelect .select .box .active .label {
  transition: border 0.3s ease-in-out;
  border-bottom: 1px dashed;
}
.SortSelect .select .box .active .Icon {
  margin-left: 2px;
  margin-bottom: 1px;
}
.SortSelect .select .box:hover .active .label {
  border-bottom-color: transparent;
}
.SortSelect .menu {
  top: 28px;
  right: -5px;
  padding: 5px 0;
}
.SortSelect .menu .item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
  height: 28px;
  font-size: 13px;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  color: rgba(63, 76, 105, 0.7);
  font-weight: 300;
}
.SortSelect .menu .item:hover {
  background: var(--primary-background);
  color: #3F4C69;
}
.SortSelect .Loader {
  position: absolute;
  top: calc((100% - 20px) / 2);
  left: -24px;
  width: 20px;
  height: 20px;
}
.SortSelect .Loader .spin {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.CollapsibleGroup {
  padding: 0 10px;
  width: 1200px;
}
.CollapsibleGroup .group-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 62px;
}
.CollapsibleGroup .group-header .title {
  flex-shrink: 0;
  font-size: 16px;
  color: #3F4C69;
  margin-right: auto;
  gap: 6px;
  display: flex;
  align-items: center;
}
.CollapsibleGroup .group-header .title .pointer {
  cursor: pointer;
}
.CollapsibleGroup .group-header .title .pointer:hover {
  color: rgba(63, 76, 105, 0.6);
}
.CollapsibleGroup .group-header .toggleIcon {
  transition: 0.35s linear;
}
.CollapsibleGroup .group-header .toggleIcon.collapsed {
  transform: rotate(-180deg);
}
.CollapsibleGroup .Collapsible {
  margin: 0 -10px;
  padding: 0 10px;
  border-bottom: 1px solid transparent;
}
@media (max-width: 1200px) and (min-width: 1023px) {
  .CollapsibleGroup {
    max-width: 100%;
  }
}
@media (max-width: 1023px) and (min-width: 700px) {
  .CollapsibleGroup {
    max-width: 100%;
  }
}
@media (max-width: 700px) and (min-width: 500px) {
  .CollapsibleGroup {
    max-width: 100%;
    padding: 0 50px;
  }
}
@media (max-width: 600px) {
  .CollapsibleGroup .group-header .title {
    align-items: start;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .CollapsibleGroup .group-header .title span {
    display: none;
  }
}
@media (max-width: 500px) {
  .CollapsibleGroup {
    max-width: 100%;
    padding: 0;
  }
  .CollapsibleGroup .group-header {
    padding: 0 10px;
  }
  .CollapsibleGroup .group-header .title {
    color: #FFF;
    margin-right: auto;
  }
  .CollapsibleGroup .group-header .toggleIcon {
    width: 24px;
    height: 24px;
    margin-left: 10px;
  }
  .CollapsibleGroup .group-header .select {
    color: #FFF;
  }
  .CollapsibleGroup .group-header .select .active .Icon {
    background: url(/static/media/upWhite.252cbc47.svg);
  }
  .CollapsibleGroup .group-header .select .arrow {
    background: url(/static/media/arrowWhite.bbced3c0.svg);
  }
  .CollapsibleGroup .Collapsible {
    border-bottom: none !important;
  }
}

.Accounts .accountsWrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 10px;
}
.Accounts .accountsWrapper .add {
  flex-shrink: 0;
  width: 384px;
  height: 145px;
  margin-right: 14px;
  border-radius: 10px;
  border: 1px dashed rgba(189, 189, 189, 0.6);
  background: transparent;
  transition: background 0.3s linear;
  cursor: pointer;
}
.Accounts .accountsWrapper .add .TooltipContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.Accounts .accountsWrapper .add .TooltipContainer .Tooltip {
  top: 50%;
  width: 100%;
  max-width: 260px;
}
.Accounts .accountsWrapper .add:not(.disabled):hover {
  background: #FFF;
}
.Accounts .accountsWrapper .add.disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
.Accounts .accountsWrapper .add.disabled .TooltipContainer {
  cursor: not-allowed;
}
.Accounts .accountsWrapper .add .Icon {
  margin: 0 1px 1px 0;
}
.Accounts .accountsWrapper .Account:nth-child(3n),
.Accounts .accountsWrapper .Request:nth-child(3n),
.Accounts .accountsWrapper .add:nth-child(3n) {
  margin-right: 0;
}
.Accounts .noRecords {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 16px;
  font-weight: 300;
  color: #0006;
  text-align: center;
  padding: 0 20px 30px;
}
.Accounts .noRecords .Icon {
  margin-bottom: 10px;
}
@media (min-width: 1201px) {
  .Accounts .accountsWrapper .Account:nth-child(n + 4),
  .Accounts .accountsWrapper .Request:nth-child(n + 4),
  .Accounts .accountsWrapper .add:nth-child(n + 4) {
    margin-top: 14px;
  }
}
@media (max-width: 1200px) and (min-width: 1023px) {
  .Accounts .accountsWrapper .Account,
  .Accounts .accountsWrapper .Request,
  .Accounts .accountsWrapper .add {
    width: calc(33% - 6px);
    flex-shrink: 1;
  }
  .Accounts .accountsWrapper .Account:nth-child(n + 4),
  .Accounts .accountsWrapper .Request:nth-child(n + 4),
  .Accounts .accountsWrapper .add:nth-child(n + 4) {
    margin-top: 14px;
  }
}
@media (max-width: 1023px) and (min-width: 700px) {
  .Accounts .accountsWrapper .Account,
  .Accounts .accountsWrapper .Request,
  .Accounts .accountsWrapper .add {
    width: calc(50% - 7px);
    flex-shrink: 1;
    margin-right: 0;
  }
  .Accounts .accountsWrapper .Account:nth-child(odd),
  .Accounts .accountsWrapper .Request:nth-child(odd),
  .Accounts .accountsWrapper .add:nth-child(odd) {
    margin-right: 14px;
  }
  .Accounts .accountsWrapper .Account:nth-child(n + 3),
  .Accounts .accountsWrapper .Request:nth-child(n + 3),
  .Accounts .accountsWrapper .add:nth-child(n + 3) {
    margin-top: 14px;
  }
}
@media (max-width: 700px) and (min-width: 500px) {
  .Accounts .accountsWrapper .Account,
  .Accounts .accountsWrapper .Request,
  .Accounts .accountsWrapper .add {
    width: 100%;
    margin-right: 0;
  }
  .Accounts .accountsWrapper .Account:nth-child(n + 2),
  .Accounts .accountsWrapper .Request:nth-child(n + 2),
  .Accounts .accountsWrapper .add:nth-child(n + 2) {
    margin-top: 14px;
  }
}
@media (max-width: 500px) {
  .Accounts .group-header.showGradient {
    background: url(/static/media/redGradient.7df1778e.svg);
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
  .Accounts .group-header:not(.showGradient) {
    background-color: var(--account-background-1);
  }
  .Accounts .accountsWrapper {
    padding-bottom: 0;
  }
  .Accounts .accountsWrapper .Account,
  .Accounts .accountsWrapper .Request {
    width: 100%;
  }
  .Accounts .accountsWrapper .add {
    width: calc(100% - 20px);
    height: 78px;
    margin: 10px;
  }
  .Accounts .noRecords {
    padding: 30px 20px;
  }
}

.Template {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 384px;
  height: 103px;
  margin-right: 14px;
  background: #fffcf7;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
}
.Template:nth-child(3n) {
  margin-right: 0;
}
.Template .cardHeader {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 25px;
}
.Template .cardHeader.background-0,
.Template .cardHeader.background-1,
.Template .cardHeader.background-2 {
  border-radius: 10px 10px 0 0;
}
.Template .cardHeader.background-0 {
  background-color: var(--account-background-1);
}
.Template .cardHeader.background-1 {
  background-color: var(--account-background-2);
}
.Template .cardHeader.background-2 {
  background-color: var(--account-background-3);
}
.Template .cardHeader .redGradient,
.Template .cardHeader .greenGradient,
.Template .cardHeader .violetGradient {
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 100%;
}
.Template .cardHeader .dots {
  position: absolute;
  right: 0;
  width: 42px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease-in;
  background-size: 32px 15px !important;
}
.Template .cardHeader .dots:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.Template .content {
  height: 78px;
  padding: 10px 18px 18px 18px;
  cursor: pointer;
}
.Template .content.disabled {
  pointer-events: none;
}
.Template .content .head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
}
.Template .content .head .name {
  font-size: 13px;
  font-weight: 500;
  color: #3f4c69;
  padding-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Template .content .head .amount {
  line-height: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #3F4C69;
  white-space: nowrap;
}
.Template .content .head .amount .decimals {
  line-height: 10px;
  font-size: 12px;
}
.Template .content .rows .row {
  display: flex;
  margin-bottom: 8px;
  font-size: 11px;
}
.Template .content .rows .row .title {
  color: #3f4c69b3;
  width: 68px;
  flex-shrink: 0;
}
.Template .content .rows .row .value {
  color: #6377A4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 1201px) {
  .Template:nth-child(n + 4) {
    margin-top: 14px;
  }
}
@media (max-width: 1200px) and (min-width: 1023px) {
  .Template {
    width: calc(33% - 6px);
    flex-shrink: 1;
  }
  .Template:nth-child(n + 4) {
    margin-top: 14px;
  }
}
@media (max-width: 1023px) and (min-width: 700px) {
  .Template {
    width: calc(50% - 7px);
    flex-shrink: 1;
    margin-right: 0;
  }
  .Template:nth-child(odd) {
    margin-right: 14px;
  }
  .Template:nth-child(n + 3) {
    margin-top: 14px;
  }
}
@media (max-width: 700px) and (min-width: 500px) {
  .Template {
    width: 100%;
    margin-right: 0;
  }
  .Template:nth-child(n + 2) {
    margin-top: 14px;
  }
}
@media (max-width: 500px) {
  .Template {
    width: 100%;
    height: 78px;
    border-radius: 0;
    margin-right: 0;
  }
  .Template .cardHeader {
    display: none;
  }
  .Template .menu {
    right: 10px;
  }
  .Template .content {
    position: relative;
    padding: 18px;
  }
  .Template .content .head {
    margin-bottom: 7px;
  }
  .Template .content .rows .row {
    margin-bottom: 4px;
  }
}

.Templates .templatesWrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 10px;
}
.Templates .noRecords {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 16px;
  font-weight: 300;
  color: #0006;
  text-align: center;
  padding: 0 20px 30px;
}
.Templates .noRecords .Icon {
  margin-bottom: 10px;
}
@media (max-width: 500px) {
  .Templates .group-header.showGradient {
    background: url(/static/media/violetGradient.534c338f.svg);
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
  .Templates .group-header:not(.showGradient) {
    background-color: var(--account-background-2);
  }
  .Templates .templatesWrapper {
    padding-bottom: 0;
  }
  .Templates .noRecords {
    padding: 30px 20px;
  }
}

.CardIcon {
  box-sizing: border-box;
  width: 36px;
  height: 24px;
  color: #FFF;
  background: #B43E49;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.CardIcon.J6GA6BTRj9T6yYA {
  background: #1E4AC3;
}
.CardIcon.request {
  opacity: 0.6;
}
.CardIcon.icon-dark-color {
  color: #000;
}
.CardIcon.white_mastercard_plastic,
.CardIcon.white_mastercard_virtual {
  background: #DADADA;
}
.CardIcon.green_mastercard_plastic.design_id-13638 {
  background: #76990F;
}
.CardIcon.green_mastercard_plastic.design_id-15424,
.CardIcon.green_mastercard_virtual {
  background: #00534C;
}
.CardIcon.blue_mastercard_plastic {
  background: #300370;
}
.CardIcon.yellow_mastercard_plastic {
  background: #CCD500;
  /* background: #FFED00; */
}
.CardIcon.blue_visa_virtual {
  background: #7466A3;
  /* background: #117E8E; */
}
.CardIcon.black_visa_plastic {
  background: #343333;
}
.CardIcon.white_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardIcon.white_mastercard_virtual.J6GA6BTRj9T6yYA,
.CardIcon.green_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardIcon.green_mastercard_virtual.J6GA6BTRj9T6yYA,
.CardIcon.blue_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardIcon.yellow_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardIcon.blue_visa_virtual.J6GA6BTRj9T6yYA,
.CardIcon.black_visa_plastic.J6GA6BTRj9T6yYA,
.CardIcon.white_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardIcon.white_mastercard_virtual.A8KX5JdPq7B1tVML,
.CardIcon.green_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardIcon.green_mastercard_virtual.A8KX5JdPq7B1tVML,
.CardIcon.blue_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardIcon.yellow_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardIcon.blue_visa_virtual.A8KX5JdPq7B1tVML,
.CardIcon.black_visa_plastic.A8KX5JdPq7B1tVML {
  background: #1E4AC3;
}
.CardIcon .Icon.status-icon {
  width: 24px !important;
  height: 24px !important;
}
.CardIcon .new {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.AccountCardTable.oneCard {
  gap: 8px;
  display: flex;
}
.AccountCardTable .cardholder {
  gap: 2px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  min-width: 180px;
  color: rgba(63, 76, 105, 0.9);
}
.AccountCardTable .cardholder span {
  font-weight: 500;
  margin-right: 2px;
  color: rgba(63, 76, 105, 0.6);
}
.AccountCardTable .Tooltip {
  top: 50px;
}
.AccountCardTable .Tooltip .content {
  height: auto;
  text-align: left;
}
.AccountCardTable .card-block {
  width: 54px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.AccountCardTable .CardIcon {
  width: 54px;
  height: 36px;
}
.AccountCardTable .CardIcon .Icon {
  width: 36px;
  height: 36px;
}
.AccountCardTable .card-pan {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  color: rgba(63, 76, 105, 0.7);
  text-align: center;
}
.AccountCardTable.inactive .card-pan {
  color: #A6A6A6;
}

.AccountCardsTable {
  display: flex;
  flex-flow: row nowrap;
}
.AccountCardsTable .has-more {
  height: 36px;
  border-radius: 3px;
  font-size: 9px;
  color: rgba(63, 76, 105, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.AccountCardsTable .has-more .dots {
  line-height: 1;
  font-size: 30px;
}
.AccountCardsTable .AccountCardTable:not(:first-child),
.AccountCardsTable .has-more {
  margin-left: 20px;
}

.BaseTable table {
  min-width: 100%;
  line-height: 1.2;
}
.BaseTable tr {
  display: grid;
  min-width: 100%;
}
.BaseTable tr.disabled td {
  opacity: 0.7;
  pointer-events: none;
}
.BaseTable th,
.BaseTable td {
  font-size: 15px;
  display: flex;
  align-items: center;
}
.BaseTable th {
  padding: 10px 14px;
  font-weight: 500;
  border-bottom: 1px solid #bdbdbd99;
}
.BaseTable th .sort {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}
.BaseTable th .sort span {
  border-bottom: 1px dashed #3F4C69;
  transition: border-color 0.3s ease-in-out;
}
.BaseTable th .sort .Icon {
  position: absolute;
  top: 3px;
  right: -14px;
  transition: transform 0.3s ease-in-out;
}
.BaseTable th .sort:hover span {
  border-bottom-color: transparent;
}
.BaseTable td {
  border-bottom: 1px solid #bdbdbd99;
  min-height: 43px;
  padding: 6px 12px;
}
.BaseTable .bodyWrapper .body-row:nth-child(2n + 1) {
  background-color: rgba(0, 0, 0, 0.025);
}
.BaseTable .bodyWrapper .body-row:hover {
  background-color: unset;
}
.BaseTable .footer td {
  border-bottom: none;
}
.BaseTable .no-records {
  display: flex;
  flex-flow: column;
  font-size: 14px;
  font-weight: 300;
  color: #0006;
  padding: 0;
  text-align: center;
  border-bottom: none;
}
.BaseTable .no-records .Icon {
  margin-bottom: 10px;
}
@media (max-width: 1200px) {
  .BaseTable {
    overflow-x: auto;
  }
}

.AccountIcon {
  width: 32px;
  height: 26px;
  position: relative;
}
.AccountIcon .base {
  position: absolute;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--account-table-color);
  font-size: 20px;
  color: #FFF;
  font-weight: 700;
}
.AccountIcon .icon {
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #FFF;
}
.AccountIcon .icon .box {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background-color: var(--account-table-color);
  -webkit-mask-image: url(/static/media/boxRed.350ff1dd.svg);
  mask-image: url(/static/media/boxRed.350ff1dd.svg);
}

.RequestIcon {
  width: 32px;
  height: 26px;
  position: relative;
}
.RequestIcon .base {
  position: absolute;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--account-table-color);
  font-size: 9px;
  color: #FFF;
  font-weight: 700;
}
.RequestIcon .icon {
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFF;
}
.RequestIcon .icon .box {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background-color: var(--account-table-color);
  -webkit-mask-image: url(/static/media/boxRed.350ff1dd.svg);
  mask-image: url(/static/media/boxRed.350ff1dd.svg);
}

.TableInlineInput {
  width: 100%;
}
.TableInlineInput .value {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.TableInlineInput .value > span {
  margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.TableInlineInput .value .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s linear;
}
.TableInlineInput .value .icon .Icon {
  width: 22px;
  height: 22px;
}
.TableInlineInput .value .icon:hover {
  background: rgba(99, 119, 164, 0.2);
}
.TableInlineInput .value .icon:hover .Icon {
  background: url(/static/media/pencilActive.23d977cb.svg);
}
.TableInlineInput .form {
  display: flex;
}
.TableInlineInput .form .Input {
  height: 19px;
  border: none;
  margin-bottom: -1px;
}
.TableInlineInput .form .Input input {
  height: 18px;
  font-size: 15px;
  color: #3f4c69;
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(63, 76, 105, 0.4);
}
.TableInlineInput .form .Input .border {
  background: rgba(63, 76, 105, 0.4);
}
.TableInlineInput .form .Input.error .border {
  background: #F5425F;
}
.TableInlineInput .form .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  margin-left: 4px;
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s linear;
}
.TableInlineInput .form .icon .Icon {
  width: 18px;
  height: 18px;
}
.TableInlineInput .form .icon:hover {
  background: rgba(99, 119, 164, 0.2);
}
.TableInlineInput .form .icon:hover .Icon {
  background: url(/static/media/saveActive.9eb50ef2.svg);
}

.AccountsTable {
  width: 1200px;
  padding: 0 10px;
  margin-top: 20px;
}
.AccountsTable .header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.AccountsTable .header.showGradient {
  background: url(/static/media/redGradient.7df1778e.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.AccountsTable .header:not(.showGradient) {
  background-color: var(--account-background-1);
}
.AccountsTable .header .title {
  font-size: 16px;
  color: #FFF;
  gap: 6px;
  display: flex;
  align-items: center;
}
.AccountsTable .header .title .pointer {
  cursor: pointer;
}
.AccountsTable .header .title .pointer:hover {
  color: rgba(63, 76, 105, 0.6);
}
.AccountsTable .header .addCard {
  margin-left: auto;
  border-color: #FFF;
  color: #FFF;
}
.AccountsTable .header .addCard .Icon {
  margin-right: 6px;
}
.AccountsTable .header .addCard:hover {
  background: rgba(255, 255, 255, 0.15);
}
.AccountsTable .header .TooltipContainer {
  margin-left: auto;
  cursor: auto;
}
.AccountsTable .header .TooltipContainer .Tooltip {
  width: 220px;
  top: 50%;
}
.AccountsTable .BaseTable td {
  min-height: 67px;
}
.AccountsTable .BaseTable tr.body-row:hover td {
  background: var(--account-table-hover-color);
}
.AccountsTable .BaseTable .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.AccountsTable .BaseTable .iban {
  display: inline-flex;
  align-items: center;
}
.AccountsTable .BaseTable .iban .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  margin-left: 8px;
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s linear;
}
.AccountsTable .BaseTable .iban .icon .Icon {
  width: 16px;
  height: 16px;
  background: url(/static/media/clipboardOpaque.8aa0f0a6.svg);
}
.AccountsTable .BaseTable .iban .icon:hover {
  background: rgba(99, 119, 164, 0.2);
}
.AccountsTable .BaseTable .iban .icon:hover .Icon {
  background: url(/static/media/clipboard.e422cdbb.svg);
}
.AccountsTable .BaseTable .AccountCardsTable {
  height: 46px;
}
.AccountsTable .BaseTable .balance {
  font-weight: 500;
}
.AccountsTable .BaseTable .balance.zero {
  color: #0006;
}
.AccountsTable .BaseTable .balance .decimals {
  font-size: 12px;
}
.AccountsTable .BaseTable .actions .Loader {
  width: 24px;
  height: 24px;
}
.AccountsTable .BaseTable .actions .Loader .spin {
  width: 24px;
  height: 24px;
  border-width: 3px;
}
.AccountsTable .BaseTable .actions .DropDown {
  display: block;
}
.AccountsTable .BaseTable .actions .DropDown .DropDown__menu {
  overflow-x: unset;
  overflow-y: unset;
}
.AccountsTable .BaseTable .actions .DropDown .Icon {
  display: block;
  width: 24px;
  height: 24px;
  transition: opacity 0.3s ease-in;
}
.AccountsTable .BaseTable .actions .DropDown .Icon:hover {
  opacity: 0.6;
}
.AccountsTable .BaseTable .actions .menu {
  min-width: 120px;
  max-width: 200px;
  top: 20px;
  right: -5px;
  padding: 5px 0;
}
.AccountsTable .BaseTable .actions .menu .item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 25px;
  font-size: 13px;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  color: rgba(63, 76, 105, 0.7);
  font-weight: 300;
}
.AccountsTable .BaseTable .actions .menu .item:hover {
  background: var(--primary-background);
  color: #3F4C69;
}
.AccountsTable .BaseTable .actions .menu .divider {
  height: 1px;
  margin: 0 10px;
  border-bottom: 1px solid rgba(63, 76, 105, 0.1);
}
@media (max-width: 1200px) {
  .AccountsTable {
    max-width: 100%;
  }
}
@media (max-width: 620px) {
  .AccountsTable .header .title {
    align-items: start;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .AccountsTable .header .title span {
    display: none;
  }
}
@media (max-width: 500px) {
  .AccountsTable {
    max-width: 100%;
    padding: 0;
    margin-top: 0;
  }
}

.TemplateIcon {
  width: 32px;
  height: 26px;
  position: relative;
}
.TemplateIcon .base {
  position: absolute;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #828EB8;
  font-size: 20px;
  color: #FFF;
  font-weight: 700;
}
.TemplateIcon .icon {
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFF;
}
.TemplateIcon .icon .box {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  background: url(/static/media/listBlue.44da2318.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.TemplatesTable {
  width: 1200px;
  padding: 0 10px;
  margin: 20px 0;
}
.TemplatesTable .header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.TemplatesTable .header.showGradient {
  background: url(/static/media/violetGradient.534c338f.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.TemplatesTable .header:not(.showGradient) {
  background-color: var(--account-background-2);
}
.TemplatesTable .header .title {
  font-size: 16px;
  color: #FFF;
}
.TemplatesTable .BaseTable tr.body-row:hover td {
  background: rgba(130, 142, 184, 0.1);
}
.TemplatesTable .BaseTable .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.TemplatesTable .BaseTable .balance {
  font-weight: 500;
}
.TemplatesTable .BaseTable .balance.zero {
  color: #0006;
}
.TemplatesTable .BaseTable .balance .decimals {
  font-size: 12px;
}
@media (max-width: 1200px) {
  .TemplatesTable {
    max-width: 100%;
  }
}
@media (max-width: 500px) {
  .TemplatesTable {
    max-width: 100%;
    padding: 0;
    margin-top: 0;
  }
}

.AccountsPage {
  display: flex;
  width: 100%;
  height: 100%;
}
.AccountsPage .FlipMove {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.AccountsPage .FlipMove > div {
  flex-shrink: 0;
}

.AccountCardWhite {
  width: 60px;
}
.AccountCardWhite .Icon {
  display: block;
}
.AccountCardWhite .card-pan {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #FFF;
  text-align: center;
  letter-spacing: 1px;
}

.AccountCardsWhite {
  display: flex;
  flex-flow: row nowrap;
}
.AccountCardsWhite .has-more .card {
  width: 60px;
  height: 42px;
  border-radius: 6px;
  position: relative;
}
.AccountCardsWhite .has-more .card .dots {
  position: absolute;
  line-height: 1;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 10px;
}
.AccountCardsWhite .has-more .title {
  font-size: 13px;
  color: #FFF;
  margin-top: 4px;
}
.AccountCardsWhite .AccountCardWhite:not(:first-child),
.AccountCardsWhite .has-more {
  margin-left: 28px;
}

.AccountSlide {
  position: relative;
  display: block;
  margin: 5px 40px 9px;
  outline: none;
  cursor: pointer;
  perspective: 1000px;
}
.AccountSlide .slide-container {
  position: relative;
  width: 476px !important;
  height: 300px !important;
  border-radius: 4px;
  box-shadow: 0 3px 8px #bdbdbd;
}
.AccountSlide .obverse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  z-index: 10;
}
.AccountSlide .obverse {
  opacity: 1;
  transition: opacity 0s 0.53s;
}
.AccountSlide .obverse .DropDown {
  position: absolute;
  top: 0;
  right: 0;
}
.AccountSlide .obverse .DropDown.closed .menu {
  min-width: unset !important;
}
.AccountSlide .obverse .DropDown.closed .menu span {
  display: inline-block;
  color: #6377A4;
  font-size: 14px;
  white-space: nowrap;
  padding: 6px 10px;
}
.AccountSlide .obverse .DropDown .menu {
  min-width: 260px;
  max-width: 300px;
  padding: 5px 10px;
  right: 40px;
  top: 12px;
  color: #3f4c69;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.AccountSlide .obverse .DropDown .menu .title {
  font-weight: 600;
  color: #6377A4;
  margin-bottom: 8px;
}
.AccountSlide .obverse .DropDown .menu .block-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  font-size: 11px;
  white-space: nowrap;
}
.AccountSlide .obverse .DropDown .menu .block-details span {
  font-weight: 600;
  color: #6377A4;
}
.AccountSlide .obverse .decorationsWrapper {
  overflow: hidden;
  border-radius: 17px;
}
.AccountSlide .obverse .decorationsWrapper .soft-blocked {
  position: absolute;
  top: -35px;
  right: -35px;
  width: 70px;
  height: 70px;
  background-color: #ff9800;
  transform: rotate(45deg);
  box-shadow: inset 0 -10px 12px -10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 2;
}
.AccountSlide .obverse .decorationsWrapper .soft-blocked::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 27px;
  width: 16px;
  height: 16px;
  background: url(/static/media/lockWhite.262795ca.svg) center no-repeat;
  background-size: contain;
  cursor: pointer;
  transform: rotate(-45deg);
}
.AccountSlide .obverse.background-0,
.AccountSlide .obverse.background-1,
.AccountSlide .obverse.background-2 {
  border-radius: 4px;
}
.AccountSlide .obverse.background-0 {
  background-color: var(--account-background-1);
}
.AccountSlide .obverse.background-1 {
  background-color: var(--account-background-2);
}
.AccountSlide .obverse.background-2 {
  background-color: var(--account-background-3);
}
.AccountSlide .account-bg {
  border-radius: 3px;
  overflow: hidden;
}
.AccountSlide .backgroundRed,
.AccountSlide .backgroundGreen,
.AccountSlide .backgroundViolet {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.AccountSlide .decorationsWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.AccountSlide .decorationsWrapper .chip {
  position: absolute;
  top: 35%;
  left: 10%;
  width: 12%;
  height: 14.5%;
}
.AccountSlide .decorationsWrapper .card-symbol {
  position: absolute;
  bottom: 0;
  right: 5%;
  width: 16%;
  height: 25%;
  opacity: 0.75;
}
.AccountSlide .card {
  position: relative;
  height: 100%;
  width: 100%;
  color: #FFFFFF;
}
.AccountSlide .card .cardTitle {
  position: absolute;
  top: 10%;
  left: 5%;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
  max-width: 200px;
}
.AccountSlide .card .cardTitle .label {
  height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.AccountSlide .card .cardTitle:hover .pencil {
  background-image: url(/static/media/pencilBlack.5857a841.svg);
  background-color: #ffffff;
}
.AccountSlide .card .cardTitle .Loader {
  position: absolute;
  top: 0px;
  right: -18px;
  width: 12px;
  height: 12px;
}
.AccountSlide .card .cardTitle .Loader .spin {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top: 2px solid #FFFFFF;
}
.AccountSlide .card .cardTitle .pencil {
  position: absolute;
  bottom: -2px;
  right: -28px;
  height: 24px;
  width: 24px;
  background-image: url(/static/media/pencilWhite.c1d3d72e.svg);
  background-size: 18px 18px !important;
  background-position: center center;
  margin-left: auto;
  background-color: transparent;
  transition: all 0.3s ease-in;
  border: 1px solid #FFF;
  border-radius: 50%;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.AccountSlide .card .cardTitle .pencil:hover {
  background-image: url(/static/media/pencilBlack.5857a841.svg);
  background-color: #ffffff;
}
.AccountSlide .card .cardTitle .save {
  position: absolute;
  bottom: -3px;
  right: -28px;
  height: 24px;
  width: 24px;
  background-image: url(/static/media/saveWhite.9dcf227e.svg);
  background-size: 18px 18px !important;
  background-position: center center;
  margin-left: auto;
  background-color: transparent;
  transition: all 0.3s ease-in;
  border: 1px solid #FFF;
  border-radius: 50%;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.AccountSlide .card .cardTitle .save:hover {
  background-image: url(/static/media/saveBlack.1e3a63a5.svg);
  background-color: #ffffff;
}
.AccountSlide .card .cardTitle .Input {
  height: 18px;
  border: none;
  width: 100%;
}
.AccountSlide .card .cardTitle .Input input {
  height: 100%;
  font-size: inherit;
  color: #FFFFFF;
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  line-height: 18px;
}
.AccountSlide .card .cardTitle .Input .borderWrapper {
  bottom: -4px;
}
.AccountSlide .card .cardTitle .Input .borderWrapper .border {
  background: #FFFFFF;
}
.AccountSlide .card .cardTitle .Input.error .border {
  background: #F5425F;
}
.AccountSlide .card .amount {
  position: absolute;
  top: 10%;
  right: 5%;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 500;
}
.AccountSlide .card .amount .decimals {
  font-size: 20px;
  font-weight: 400;
}
.AccountSlide .card .hold {
  position: absolute;
  top: 20%;
  right: 5%;
  font-size: 14px;
  font-weight: 500;
}
.AccountSlide .card .hold .decimals {
  font-size: 12px;
  font-weight: 400;
}
.AccountSlide .card .pan {
  position: absolute;
  top: 43%;
  left: 10%;
  right: 10%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 22px;
  font-weight: 700;
  text-shadow: -2px 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}
.AccountSlide .card .pan:hover {
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
.AccountSlide .card .AccountCardsWhite {
  position: absolute;
  top: 55%;
  width: 346px;
  left: 50%;
  transform: translateX(-50%);
}
.AccountSlide .card .actions {
  position: absolute;
  bottom: 7%;
  left: 5%;
  display: flex;
  margin-top: auto;
}
.AccountSlide .card .actions-accounts {
  right: 5%;
}
.AccountSlide .card .actions .Button {
  margin-right: 14px;
}
.AccountSlide .card .actions .Button.margin-left {
  margin-left: auto;
}
.AccountSlide .card .actions .Button:last-child {
  margin-right: 0;
}
.AccountSlide .card .iconWrapper {
  height: 28px;
  width: 28px;
  margin-left: auto;
  background-color: transparent;
  transition: all 0.3s ease-in;
  border: 1px solid #FFF;
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
}
.AccountSlide .card .iconWrapper:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.AccountSlide .card .iconWrapper .Icon {
  width: 100%;
  height: 100%;
  transition: background 0.2s ease-in;
}
@media (max-width: 1000px) {
  .AccountSlide {
    margin-left: 30px;
    margin-right: 30px;
  }
  .AccountSlide .slide-container {
    width: 413px !important;
    height: 260px !important;
  }
  .AccountSlide .obverse .DropDown .menu {
    top: 10px;
    right: 35px;
  }
  .AccountSlide .obverse .decorationsWrapper .soft-blocked {
    top: -30px;
    right: -30px;
    width: 60px;
    height: 60px;
  }
  .AccountSlide .obverse .decorationsWrapper .soft-blocked::after {
    bottom: 6px;
    left: 25px;
    width: 12px;
    height: 12px;
  }
  .AccountSlide .card .cardTitle {
    font-size: 14px;
    max-width: 170px;
  }
  .AccountSlide .card .amount {
    font-size: 20px;
  }
  .AccountSlide .card .amount .decimals {
    font-size: 18px;
  }
  .AccountSlide .card .pan {
    top: 38%;
  }
  .AccountSlide .card .AccountCardsWhite {
    top: 50%;
  }
}
@media (max-width: 649px) {
  .AccountSlide {
    margin-left: 15px;
    margin-right: 15px;
  }
  .AccountSlide .slide-container {
    width: 349px !important;
    height: 220px !important;
  }
  .AccountSlide .decorationsWrapper .card-symbol {
    display: none;
  }
  .AccountSlide .obverse .DropDown .menu {
    top: 8px;
    right: 30px;
  }
  .AccountSlide .obverse .decorationsWrapper .soft-blocked {
    top: -25px;
    right: -25px;
    width: 50px;
    height: 50px;
  }
  .AccountSlide .obverse .decorationsWrapper .soft-blocked::after {
    bottom: 4px;
    left: 23px;
    width: 10px;
    height: 10px;
  }
  .AccountSlide .card .cardTitle {
    font-size: 12px;
    max-width: 150px;
  }
  .AccountSlide .card .amount {
    font-size: 15px;
  }
  .AccountSlide .card .amount .decimals {
    font-size: 13px;
  }
  .AccountSlide .card .hold {
    font-size: 12px;
  }
  .AccountSlide .card .hold .decimals {
    font-size: 10px;
  }
  .AccountSlide .card .pan {
    font-size: 18px;
  }
  .AccountSlide .card .AccountCardsWhite {
    width: 315px;
  }
  .AccountSlide .card .AccountCardsWhite .has-more .title {
    font-size: 12px;
  }
  .AccountSlide .card .AccountCardsWhite .AccountCardWhite .card-pan {
    font-size: 12px;
  }
  .AccountSlide .card .AccountCardsWhite .AccountCardWhite:not(:first-child),
  .AccountSlide .card .AccountCardsWhite .has-more {
    margin-left: 16px;
  }
  .AccountSlide .card .actions .Button {
    font-size: 10px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 500px) {
  .AccountSlide .obverse .DropDown .menu {
    max-width: 260px;
  }
}
@media (max-width: 469px) {
  .AccountSlide {
    margin-left: 10px;
    margin-right: 10px;
  }
  .AccountSlide .slide-container {
    width: 286px !important;
    height: 180px !important;
  }
  .AccountSlide .decorationsWrapper .chip {
    top: 29%;
  }
  .AccountSlide .obverse .DropDown .menu {
    top: 5px;
    right: 25px;
  }
  .AccountSlide .obverse .decorationsWrapper .soft-blocked {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
  }
  .AccountSlide .obverse .decorationsWrapper .soft-blocked::after {
    bottom: 3px;
    left: 17px;
    width: 8px;
    height: 8px;
  }
  .AccountSlide .card .cardTitle {
    font-size: 12px;
    line-height: 14px;
    max-width: 110px;
  }
  .AccountSlide .card .cardTitle .label {
    height: 14px;
  }
  .AccountSlide .card .cardTitle .Input {
    height: 14px;
  }
  .AccountSlide .card .amount {
    font-size: 13px;
  }
  .AccountSlide .card .amount .decimals {
    font-size: 12px;
  }
  .AccountSlide .card .hold {
    font-size: 11px;
  }
  .AccountSlide .card .hold .decimals {
    font-size: 10px;
  }
  .AccountSlide .card .pan {
    top: 33%;
    font-size: 14px;
  }
  .AccountSlide .card .AccountCardsWhite {
    top: 44%;
    width: 250px;
  }
  .AccountSlide .card .AccountCardsWhite .has-more .card {
    width: 50px;
    height: 35px;
  }
  .AccountSlide .card .AccountCardsWhite .has-more .title {
    font-size: 11px;
    margin-top: 4px;
  }
  .AccountSlide .card .AccountCardsWhite .AccountCardWhite {
    width: 50px;
  }
  .AccountSlide .card .AccountCardsWhite .AccountCardWhite .Icon {
    width: 50px;
    height: 35px;
  }
  .AccountSlide .card .AccountCardsWhite .AccountCardWhite .card-pan {
    font-size: 11px;
    margin-top: 4px;
  }
  .AccountSlide .card .AccountCardsWhite .AccountCardWhite:not(:first-child),
  .AccountSlide .card .AccountCardsWhite .has-more {
    margin-left: 10px;
  }
  .AccountSlide .card .actions-accounts {
    justify-content: space-between;
  }
  .AccountSlide .card .actions-accounts .Button {
    padding-left: 6px;
    padding-right: 6px;
    margin: 0;
  }
  .AccountSlide .card .actions-accounts .Button.margin-left {
    margin: 0;
  }
}

.Bar {
  display: flex;
  flex-flow: column-reverse nowrap;
  position: relative;
}
.Bar span {
  flex-shrink: 0;
  height: 30px;
}

.CardPan.clickable {
  cursor: pointer !important;
  transition: all 0.3s ease-in-out;
}
.CardPan.clickable:hover {
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.5) !important;
}
.CardPan .part {
  line-height: 30px;
  overflow: hidden;
  padding: 0 2px;
  transition: filter 0.4s ease-out;
}
.CardPan .part-blur {
  filter: blur(4px);
}
.CardPan .part-clip {
  display: flex;
  flex-flow: row nowrap;
  height: 30px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 10%, #000000 90%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 10%, #000000 90%, rgba(0, 0, 0, 0) 100%);
}
.CardPan .panBorder {
  position: absolute;
  bottom: -2%;
  left: 0;
  height: 2px;
  background: #FFFFFF;
  animation: pan-line 7s linear;
}
@keyframes pan-line {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@media (max-width: 649px) {
  .CardPan {
    font-size: 20px;
  }
}
@media (max-width: 469px) {
  .CardPan {
    font-size: 18px;
  }
  .CardPan .panBorder {
    bottom: 12%;
  }
}

.CardSlide {
  position: relative;
  display: block;
  margin: 5px 40px 9px;
  outline: none;
  cursor: pointer;
  perspective: 1000px;
}
.CardSlide .outer-container {
  transform-style: preserve-3d;
  perspective: 2000px;
  animation: card-transition-out 0.96s ease-in-out;
}
.CardSlide .outer-container__no-animation {
  animation: none;
}
.CardSlide .outer-container__reverse {
  animation: card-transition-in 0.96s ease-in-out;
}
.CardSlide .slide-container {
  position: relative;
  width: 476px !important;
  height: 300px !important;
  border-radius: 18px;
  background: linear-gradient(135deg, #B43E49 30%, #BE4A57 45%, #C24957 75%);
  box-shadow: 0 3px 8px #bdbdbd;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in;
}
.CardSlide .slide-container__reverse {
  transform: rotateY(-0.5turn);
}
.CardSlide .slide-container__reverse .obverse {
  opacity: 0;
}
.CardSlide .slide-container.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.A8KX5JdPq7B1tVML {
  background: #1E4AC3;
}
.CardSlide .slide-container.white_mastercard_plastic,
.CardSlide .slide-container.white_mastercard_virtual {
  background: #DADADA;
}
.CardSlide .slide-container.green_mastercard_plastic.design_id-13638 {
  background: #76990F;
}
.CardSlide .slide-container.green_mastercard_plastic.design_id-15424,
.CardSlide .slide-container.green_mastercard_virtual {
  background: #00534C;
}
.CardSlide .slide-container.blue_mastercard_plastic {
  background: #300370;
}
.CardSlide .slide-container.yellow_mastercard_plastic {
  background: #CCD500;
  /* background: #FFED00; */
}
.CardSlide .slide-container.blue_visa_virtual {
  background: #7466A3;
  /* background: #117E8E; */
}
.CardSlide .slide-container.black_visa_plastic {
  background: #343333;
}
.CardSlide .slide-container.white_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.white_mastercard_virtual.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.green_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.green_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.green_mastercard_virtual.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.blue_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.yellow_mastercard_plastic.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.blue_visa_virtual.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.black_visa_plastic.J6GA6BTRj9T6yYA,
.CardSlide .slide-container.white_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.white_mastercard_virtual.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.green_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.green_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.green_mastercard_virtual.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.blue_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.yellow_mastercard_plastic.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.blue_visa_virtual.A8KX5JdPq7B1tVML,
.CardSlide .slide-container.black_visa_plastic.A8KX5JdPq7B1tVML {
  background: #1E4AC3;
}
.CardSlide .obverse,
.CardSlide .reverse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  z-index: 10;
}
.CardSlide .obverse {
  opacity: 1;
  transition: opacity 0s 0.53s;
}
.CardSlide .obverse.logo-J6GA6BTRj9T6yYA {
  border-radius: 18px;
  background-repeat: no-repeat;
  background-position: -38px -38px;
  background-size: auto calc(100% + 40px);
  background-image: url(/static/media/cardlogo-J6GA6BTRj9T6yYA.bc176fb4.png);
}
.CardSlide .obverse.logo-A8KX5JdPq7B1tVML {
  border-radius: 18px;
  background-repeat: no-repeat;
  background-position: -2px -2px;
  background-size: auto calc(100% + 4px);
  background-image: url(/static/media/cardlogo-A8KX5JdPq7B1tVML.d7ee2b46.png);
}
.CardSlide .obverse .DropDown {
  position: absolute;
  top: 0;
  right: 0;
}
.CardSlide .obverse .DropDown.closed .menu {
  min-width: unset !important;
}
.CardSlide .obverse .DropDown.closed .menu span {
  display: inline-block;
  color: #6377A4;
  font-size: 14px;
  white-space: nowrap;
  padding: 6px 10px;
}
.CardSlide .obverse .DropDown .menu {
  min-width: 260px;
  max-width: 300px;
  padding: 5px 10px;
  right: 40px;
  top: 12px;
  color: #3f4c69;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.CardSlide .obverse .DropDown .menu .title {
  font-weight: 600;
  color: #6377A4;
  margin-bottom: 8px;
}
.CardSlide .obverse .DropDown .menu .block-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  font-size: 11px;
  white-space: nowrap;
}
.CardSlide .obverse .DropDown .menu .block-details span {
  font-weight: 600;
  color: #6377A4;
}
.CardSlide .obverse .decorationsWrapper {
  overflow: hidden;
  border-radius: 17px;
}
.CardSlide .obverse .decorationsWrapper .soft-blocked {
  position: absolute;
  top: -35px;
  right: -35px;
  width: 70px;
  height: 70px;
  background-color: #ff9800;
  transform: rotate(45deg);
  box-shadow: inset 0 -10px 12px -10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 2;
}
.CardSlide .obverse .decorationsWrapper .soft-blocked::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 27px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  transform: rotate(-45deg);
  background-image: url(/static/media/lockWhite.262795ca.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.new::after {
  background-image: url(/static/media/statusNew.ba6ce4d5.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.inactive::after {
  background-image: url(/static/media/statusInactive.248d0bad.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.blocked::after {
  background-image: url(/static/media/statusBlocked.2f12296d.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.soft_blocked::after {
  background-image: url(/static/media/statusSoftBlocked.cabe0994.svg);
}
.CardSlide .reverse {
  transform: rotateY(0.5turn);
  z-index: 20;
}
.CardSlide .account-bg {
  border-radius: 3px;
  overflow: hidden;
}
.CardSlide .backgroundRed,
.CardSlide .backgroundGreen,
.CardSlide .backgroundViolet {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.CardSlide .decorationsWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
}
.CardSlide .decorationsWrapper .W9HLLMx9b86NBfHv,
.CardSlide .decorationsWrapper .MVgLbTyYF67Agh7,
.CardSlide .decorationsWrapper .J6GA6BTRj9T6yYA,
.CardSlide .decorationsWrapper .A8KX5JdPq7B1tVML {
  position: absolute;
  top: 10%;
  right: 5%;
  height: 6.7%;
}
.CardSlide .decorationsWrapper .W9HLLMx9b86NBfHv {
  width: 31.8%;
}
.CardSlide .decorationsWrapper .MVgLbTyYF67Agh7 {
  width: 16%;
}
.CardSlide .decorationsWrapper .J6GA6BTRj9T6yYA {
  width: 134px;
  height: 31px;
  top: 8%;
  right: 6%;
}
.CardSlide .decorationsWrapper .A8KX5JdPq7B1tVML {
  width: 134px;
  height: 66px;
  top: 8%;
  right: 6%;
}
.CardSlide .decorationsWrapper .brand-icon {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 20%;
  height: 19%;
}
.CardSlide .decorationsWrapper .brand-icon.brand-without-category {
  bottom: calc(5% - 12px);
}
.CardSlide .decorationsWrapper .brand-mastercard {
  height: 24%;
  background-position: 34% 100%;
}
.CardSlide .decorationsWrapper .category {
  position: absolute;
  bottom: 4%;
  right: 5%;
  font-size: 14px;
}
.CardSlide .decorationsWrapper .magnetStrip {
  position: absolute;
  top: 8%;
  left: 0;
  width: 100%;
  height: 24%;
  background: #000;
}
.CardSlide .decorationsWrapper .signatureArea {
  position: absolute;
  top: 36%;
  left: 3%;
  width: 42%;
  height: 14%;
  background-image: radial-gradient(#FFF 20%, #D5D5D5 20%);
  background-position: 0 0;
  background-size: 10px 10px;
}
.CardSlide .card {
  position: relative;
  height: 100%;
  width: 100%;
  color: #FFFFFF;
}
.CardSlide .card .cardTitle {
  position: absolute;
  top: 10%;
  left: 5%;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
  max-width: 220px;
}
.CardSlide .card .cardTitle .label {
  height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CardSlide .card .cardTitle:hover .pencil {
  background-image: url(/static/media/pencilBlack.5857a841.svg);
  background-color: #FFF;
}
.CardSlide .card .cardTitle .Loader {
  position: absolute;
  top: 0px;
  right: -18px;
  width: 12px;
  height: 12px;
}
.CardSlide .card .cardTitle .Loader .spin {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top: 2px solid #FFFFFF;
}
.CardSlide .card .cardTitle .pencil {
  position: absolute;
  bottom: -2px;
  right: -28px;
  height: 24px;
  width: 24px;
  background-image: url(/static/media/pencilWhite.c1d3d72e.svg);
  background-size: 18px 18px !important;
  background-position: center center;
  margin-left: auto;
  background-color: transparent;
  transition: all 0.3s ease-in;
  border: 1px solid #FFF;
  border-radius: 50%;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.CardSlide .card .cardTitle .pencil-dark {
  background-image: url(/static/media/pencilBlack.5857a841.svg);
  border-color: #000;
}
.CardSlide .card .cardTitle .save {
  position: absolute;
  bottom: -3px;
  right: -28px;
  height: 24px;
  width: 24px;
  background-image: url(/static/media/saveWhite.9dcf227e.svg);
  background-size: 18px 18px !important;
  background-position: center center;
  margin-left: auto;
  background-color: transparent;
  transition: all 0.3s ease-in;
  border: 1px solid #FFF;
  border-radius: 50%;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.CardSlide .card .cardTitle .save:hover {
  background-image: url(/static/media/saveBlack.1e3a63a5.svg);
  background-color: #FFF;
}
.CardSlide .card .cardTitle .save-dark {
  background-image: url(/static/media/saveBlack.1e3a63a5.svg);
  border-color: #000;
}
.CardSlide .card .cardTitle .save-dark:hover {
  background-image: url(/static/media/saveWhite.9dcf227e.svg);
  background-color: #000;
}
.CardSlide .card .cardTitle .Input {
  height: 18px;
  border: none;
  width: 100%;
}
.CardSlide .card .cardTitle .Input input {
  height: 100%;
  font-size: inherit;
  color: #FFFFFF;
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  line-height: 18px;
}
.CardSlide .card .cardTitle .Input .borderWrapper {
  bottom: -4px;
}
.CardSlide .card .cardTitle .Input .borderWrapper .border {
  background: #FFFFFF;
}
.CardSlide .card .cardTitle .Input.error .border {
  background: #F5425F;
}
.CardSlide .card .pan {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 22px;
  font-weight: 700;
  text-shadow: -2px 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: text;
  transform: translateY(-50%);
}
.CardSlide .card .expiration {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: -3px 2px 4px rgba(0, 0, 0, 0.25);
}
.CardSlide .card .expiration .title {
  text-align: right;
  text-shadow: none;
}
.CardSlide .card .expiration.position-footer {
  font-size: 17px;
  bottom: 9%;
  left: 45%;
}
.CardSlide .card .expiration.position-footer .title {
  font-size: 10px;
  line-height: 9px;
  margin-right: 10px;
}
.CardSlide .card .expiration.position-under_pan {
  font-size: 14px;
  top: calc(50% + 20px);
  right: calc(10% + 6px);
  opacity: 0.75;
}
.CardSlide .card .expiration.position-under_pan .title {
  font-size: 9px;
  line-height: 8px;
  margin-right: 8px;
}
.CardSlide .card .actions {
  position: absolute;
  bottom: 7%;
  left: 5%;
  display: flex;
  margin-top: auto;
}
.CardSlide .card .actions .Button {
  margin-right: 14px;
}
.CardSlide .card .actions .Button.margin-left {
  margin-left: auto;
}
.CardSlide .card .actions .Button:last-child {
  margin-right: 0;
}
.CardSlide .card .actions .showCvn {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.CardSlide .card .actions .showCvn .cvnIcon {
  margin-left: 4px;
}
.CardSlide .card .actions .showCvn:hover .lockCvn {
  background: #FFF;
}
.CardSlide .card .actions .showCvn:hover .lockCvn:after {
  background-image: url(/static/media/lockBlack.e5e48359.svg);
}
.CardSlide .card .iconWrapper {
  height: 28px;
  width: 28px;
  margin-left: auto;
  background-color: transparent;
  transition: all 0.3s ease-in;
  border: 1px solid #FFF;
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
}
.CardSlide .card .iconWrapper:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.CardSlide .card .iconWrapper .Icon {
  width: 100%;
  height: 100%;
  transition: background 0.2s ease-in;
}
.CardSlide .card .cvn {
  position: absolute;
  top: 40%;
  left: 35%;
  font-size: 20px;
  color: #000000;
}
.CardSlide .card .cvn .skewed {
  display: inline-block;
  transform: skew(12deg);
}
.CardSlide .card .cvn .Loader {
  width: 24px;
  height: 24px;
  margin-left: 2px;
  margin-top: -3px;
  transform: none !important;
}
.CardSlide .card .cvn .Loader .spin {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-top: 2px solid #000;
}
.CardSlide .card .cvnBorder {
  position: absolute;
  top: 51%;
  left: 3%;
  height: 2px;
  background: #FFFFFF;
  animation: cvn-line 10s linear;
}
@keyframes cvn-line {
  0% {
    width: 42%;
  }
  100% {
    width: 0%;
  }
}
.CardSlide .slide-dark-color .decorationsWrapper,
.CardSlide .slide-dark-color .card {
  color: #000;
}
.CardSlide .slide-dark-color .card .cardTitle {
  color: #000;
}
.CardSlide .slide-dark-color .card .cardTitle .Input input {
  color: #000;
}
.CardSlide .slide-dark-color .card .cardTitle .Input .borderWrapper .border {
  background: #000;
}
.CardSlide .slide-dark-color .card .cardTitle:hover .pencil {
  background-image: url(/static/media/pencilWhite.c1d3d72e.svg);
  background-color: #000;
}
.CardSlide .slide-dark-color .card .actions .showCvn:hover .lockCvn {
  background: #000;
}
.CardSlide .slide-dark-color .card .actions .showCvn:hover .lockCvn:after {
  background-image: url(/static/media/lockWhite.262795ca.svg);
}
@media (max-width: 1000px) {
  .CardSlide {
    margin-left: 30px;
    margin-right: 30px;
  }
  .CardSlide .slide-container {
    width: 413px !important;
    height: 260px !important;
  }
  .CardSlide .decorationsWrapper .category {
    font-size: 12px;
  }
  .CardSlide .obverse .DropDown .menu {
    top: 10px;
    right: 35px;
  }
  .CardSlide .obverse .decorationsWrapper .soft-blocked {
    top: -30px;
    right: -30px;
    width: 60px;
    height: 60px;
  }
  .CardSlide .obverse .decorationsWrapper .soft-blocked::after {
    bottom: 6px;
    left: 25px;
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 649px) {
  .CardSlide {
    margin-left: 15px;
    margin-right: 15px;
  }
  .CardSlide .slide-container {
    width: 349px !important;
    height: 220px !important;
  }
  .CardSlide .obverse.logo-J6GA6BTRj9T6yYA {
    background-position: -28px -28px;
    background-size: auto calc(100% + 30px);
  }
  .CardSlide .obverse .DropDown .menu {
    top: 8px;
    right: 30px;
  }
  .CardSlide .obverse .decorationsWrapper .soft-blocked {
    top: -25px;
    right: -25px;
    width: 50px;
    height: 50px;
  }
  .CardSlide .obverse .decorationsWrapper .soft-blocked::after {
    bottom: 4px;
    left: 23px;
    width: 10px;
    height: 10px;
  }
  .CardSlide .card .pan {
    font-size: 20px;
  }
  .CardSlide .card .expiration.position-footer {
    font-size: 15px;
  }
  .CardSlide .card .expiration.position-under_pan {
    font-size: 12;
    top: calc(50% + 15px);
  }
  .CardSlide .card .actions .Button {
    font-size: 10px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .CardSlide .card .actions .showCvn {
    font-size: 10px;
  }
  .CardSlide .card .cvn {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
  .CardSlide .obverse .DropDown .menu {
    max-width: 260px;
  }
}
@media (max-width: 469px) {
  .CardSlide {
    margin-left: 10px;
    margin-right: 10px;
  }
  .CardSlide .slide-container {
    width: 286px !important;
    height: 180px !important;
  }
  .CardSlide .decorationsWrapper .brand-icon {
    display: none;
  }
  .CardSlide .decorationsWrapper .category {
    bottom: 3%;
    font-size: 9px;
  }
  .CardSlide .obverse .DropDown .menu {
    top: 5px;
    right: 25px;
  }
  .CardSlide .obverse .decorationsWrapper .soft-blocked {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
  }
  .CardSlide .obverse .decorationsWrapper .soft-blocked::after {
    bottom: 3px;
    left: 17px;
    width: 8px;
    height: 8px;
  }
  .CardSlide .card .cardTitle {
    font-size: 14px;
    line-height: 14px;
    max-width: 110px;
  }
  .CardSlide .card .cardTitle .label {
    height: 14px;
  }
  .CardSlide .card .cardTitle .Input {
    height: 14px;
  }
  .CardSlide .card .pan {
    font-size: 18px;
  }
  .CardSlide .card .expiration {
    left: unset;
    right: 5%;
  }
  .CardSlide .card .cvn {
    top: 39%;
  }
}
@keyframes card-transition-in {
  0% {
    transform: translateZ(0);
  }
  35% {
    transform: translateZ(-400px);
  }
  65% {
    transform: translateZ(-400px);
  }
  100% {
    transform: translateZ(0);
  }
}
@keyframes card-transition-out {
  0% {
    transform: translateZ(0);
  }
  35% {
    transform: translateZ(-350px);
  }
  65% {
    transform: translateZ(-350px);
  }
  100% {
    transform: translateZ(0);
  }
}

.Record {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
  background: #FFF;
  transition: background 0.3s ease-in;
}
.Record .content {
  display: flex;
  line-height: 1.16;
  padding: 10px 20px;
}
.Record .content.clickable:hover {
  background: var(--primary-background);
}
.Record .content .Icon {
  flex-shrink: 0;
}
.Record .content .main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
  margin: 0 10px 0 15px;
}
.Record .content .main .title {
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Record .content .main .title_open {
  white-space: pre-wrap;
}
.Record .content .main .date {
  margin-top: 2px;
  font-weight: 300;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.Record .content .right {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  align-items: flex-end;
  flex-shrink: 0;
}
.Record .content .right .amount {
  font-weight: 500;
  font-size: 16px;
  line-height: 15px;
}
.Record .content .right .amount .decimals {
  font-weight: 400;
  font-size: 13px;
}
.Record .content .right .extended {
  margin-top: 2px;
  font-weight: 300;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.Record .extra {
  transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}
.Record .extra > .extra-content {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 65px);
  margin-left: 65px;
  padding-bottom: 15px;
}
.Record .extra > .extra-content .item {
  display: flex;
  flex-direction: column;
  margin: 15px 15px 0 0;
  font-weight: 300;
  font-size: 11px;
  flex-shrink: 0;
}
.Record .extra > .extra-content .item .value {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.Record .record-actions {
  padding: 10px 0 10px 65px;
  margin: -8px -8px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.Record .record-actions .Button {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  height: unset;
  border-radius: 10px;
  padding: 4px 8px;
  margin: 8px 8px 0 0;
}
@media (max-width: 400px) {
  .extra .item {
    min-width: 110px;
  }
}

.DatePicker {
  cursor: pointer;
}
.DatePicker .Input {
  pointer-events: none;
}

.SwitcherYesNo {
  display: flex;
  flex-flow: row nowrap;
  position: relative;
}
.SwitcherYesNo .Button {
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  width: 30px;
  height: 28px;
  padding: 0 6px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
}
.SwitcherYesNo .Button .title {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  flex-grow: 1;
}
.SwitcherYesNo .Button .label {
  overflow: hidden;
  white-space: nowrap;
  margin-left: 4px;
  flex-grow: 1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.SwitcherYesNo .Button .Icon {
  transition: all 0.3s ease-in-out;
}
.SwitcherYesNo .Button.primary .Icon,
.SwitcherYesNo .Button:hover .Icon {
  filter: invert(1);
}
.SwitcherYesNo .Button.primary {
  width: 190px;
  border: 1px solid var(--primary-button-color);
}
.SwitcherYesNo .Button.primary .label {
  opacity: 1;
}
.SwitcherYesNo .Button:hover {
  border-color: var(--primary-button-hover-color);
}
.SwitcherYesNo .Button:nth-of-type(1) {
  border-radius: 20px 0 0 20px;
}
.SwitcherYesNo .Button:nth-of-type(2) {
  border-radius: 0 20px 20px 0;
}
.SwitcherYesNo .Loader {
  position: static;
  width: 16px;
  height: 16px;
}
.SwitcherYesNo .Loader .spin {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.Records {
  display: flex;
  flex-direction: column;
  max-width: 712px;
  min-height: calc(100% - 357px);
  width: 100%;
  flex-shrink: 0;
}
.Records .header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 15px;
}
.Records .header .Input {
  flex-shrink: 0;
  max-width: 200px;
}
.Records .header .btn-export {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #FFF;
  background-color: var(--primary-button-color);
  font-weight: 400;
  cursor: pointer;
  border-radius: 10px;
  padding: 2px 10px;
  margin: 21px 10px 0 auto;
  transition: background-color 0.3s ease-in-out;
}
.Records .header .btn-export.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}
.Records .header .btn-export:hover {
  background: var(--primary-button-hover-color);
}
.Records .header .btn-export .Icon {
  margin-right: 4px;
}
.Records .header .btn-export .Loader {
  margin-right: 4px;
  width: 17px;
  height: 17px;
}
.Records .header .btn-export .Loader .spin {
  width: 17px;
  height: 17px;
  border-width: 2px;
}
.Records .header .DatePicker {
  flex-shrink: 0;
  max-width: 110px;
  margin-left: 10px;
}
.Records .header .DatePicker .placeholder {
  white-space: nowrap;
}
.Records .header .presets {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.Records .header .presets > div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: var(--primary-button-color);
  color: #FFF;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}
.Records .header .presets > div:hover,
.Records .header .presets > div.active {
  background: var(--primary-button-hover-color);
}
.Records .header .presets > div:last-child {
  margin-top: 3px;
}
.Records .sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 24px;
}
.Records .sub-header .box {
  font-size: 12px;
}
.Records .sub-header .Switcher {
  background-color: #69c8a7;
}
.Records .transition {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: calc(100vh - 60px - 20px - 314px - 25px - 45px - 15px);
  padding: 26px 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.Records .transition .status {
  padding: 0 20px;
  margin: 20px 0 4px 0;
  font-weight: 300;
  font-size: 12px;
  color: rgba(63, 76, 105, 0.7);
  flex-shrink: 0;
}
.Records .transition .status:first-child {
  margin-top: 0;
}
.Records .transition .no-records,
.Records .transition .validation-error {
  padding: 0 20px;
  margin: 20px 0 4px;
  font-weight: 300;
  font-size: 12px;
  flex-shrink: 0;
}
.Records .transition .no-records .errors-message,
.Records .transition .validation-error .errors-message {
  color: #F5425F;
}
.Records .transition > .Loader {
  position: absolute;
  right: 0px;
  top: 0px;
}
.Records .transition .more {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
}
.Records .transition .more .Button {
  width: 100%;
  max-width: 260px;
}
@media (max-width: 1000px) and (min-width: 650px) {
  .Records {
    min-height: calc(100% - 297px);
  }
  .Records .transition {
    min-height: calc(100vh - 60px - 20px - 274px - 25px - 45px - 15px);
  }
}
@media (max-width: 712px) {
  .Records .transition {
    border-radius: 0px;
  }
}
@media (max-width: 700px) and (min-width: 470px) {
  .Records .header > .Input {
    min-width: 220px;
  }
}
@media (max-width: 700px) {
  .Records {
    min-height: calc(100% - 237px);
  }
  .Records .transition {
    box-sizing: border-box;
    min-height: calc(100vh - 60px - 20px - 274px - 25px - 100px - 15px);
  }
  .Records .header {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .Records .header > .Input {
    width: 100px;
    max-width: unset;
    flex-grow: 1;
  }
  .Records .header .btn-export {
    margin-left: 20px;
    margin-right: 0;
  }
  .Records .header .DatePicker {
    width: 50%;
    flex-grow: 0;
    max-width: calc(calc(50% - 30px));
    margin: 10px 0 0 0;
  }
  .Records .header .DatePicker:nth-child(2) {
    margin: 10px 0 0 0px;
  }
  .Records .header .presets {
    margin: 10px 0 0 0;
  }
}
@media (max-width: 650px) {
  .Records .transition {
    box-sizing: border-box;
    min-height: calc(100vh - 60px - 20px - 234px - 25px - 100px - 15px);
  }
}
@media (max-width: 469px) {
  .Records {
    min-height: calc(100% - 217px);
  }
  .Records .transition {
    min-height: calc(100vh - 60px - 20px - 194px - 25px - 100px - 15px);
  }
}

.Switcher {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
  border-radius: 20px;
  background-color: #CCCCCC;
  transition: background-color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  cursor: pointer;
}
.Switcher.checked {
  background-color: #69c8a7;
}
.Switcher.disabled {
  background-color: #CCCCCC;
  cursor: not-allowed;
}
.Switcher .curtain {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
.Switcher .curtain .Loader .spin {
  width: 15px;
  height: 15px;
  border: 2px solid transparent;
  border-top: 2px solid #69c8a7;
}
.Switcher .labels {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}
.Switcher .labels .label {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  align-items: center;
  color: #fff;
  padding: 0 7px;
  transition: opacity 0.25s cubic-bezier(0.35, 0, 0.25, 1);
  white-space: nowrap;
}
.Switcher .labels .label:first-child {
  left: 0;
}
.Switcher .labels .label:last-child {
  right: 0;
}

.OptionRow {
  display: flex;
  justify-content: space-between;
  min-height: 30px;
  padding: 10px 0;
}
.OptionRow .main {
  display: flex;
  width: calc(100% - 130px);
  flex-direction: column;
  margin-right: 10px;
}
.OptionRow .main .title {
  font-weight: 300;
  font-size: 13px;
}
.OptionRow .main .title.disabled {
  color: rgba(63, 76, 105, 0.7);
}
.OptionRow .main .sub {
  margin-top: 4px;
  font-weight: 300;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.OptionRow .main .sub .nowrap {
  white-space: nowrap;
}

.NavBackButton {
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: relative;
}
.NavBackButton .Icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
}
.NavBackButton:hover .Icon {
  opacity: 0.8;
  left: -4px;
}

.Settings {
  display: flex;
  flex-direction: column;
  max-width: 712px;
  min-height: calc(100% - 375px);
  width: 100%;
  flex-shrink: 0;
}
.Settings .transition {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: calc(100vh - 60px - 20px - 314px - 45px);
  padding: 10px 26px 26px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.Settings .transition .Loader {
  position: absolute;
  right: 0px;
  top: 0px;
}
.Settings .transition .sub-header {
  display: flex;
  align-items: center;
  height: 24px;
  margin-top: 16px;
  margin-bottom: 20px;
  font-weight: 300;
  font-size: 12px;
  color: #3f4c69b3;
}
.Settings .transition .sub-header .NavBackButton {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.Settings .transition .header {
  margin: 16px 0 4px;
  font-weight: 300;
  font-size: 14px;
  color: rgba(63, 76, 105, 0.7);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  padding-bottom: 4px;
  text-transform: uppercase;
}
.Settings .transition .header .NavBackButton {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.Settings .transition .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 300;
  padding: 10px 0;
}
.Settings .transition .row .value {
  position: relative;
  min-width: 0;
  text-align: right;
  margin-left: 20px;
}
.Settings .transition .row .value.bold {
  font-weight: 700;
}
.Settings .transition .row .value .decimals {
  font-size: 0.8125em;
}
.Settings .transition .row .value .clipboard {
  position: absolute;
  top: -1px;
  left: -17px;
  width: 13px;
  height: 13px;
}
.Settings .transition .row .trackingBlock .clipboard {
  position: static;
  margin-right: 4px;
}
.Settings .transition .item {
  display: flex;
  justify-content: space-between;
  min-height: 30px;
  padding: 10px 0;
}
.Settings .transition .item.with-loader {
  position: relative;
}
.Settings .transition .item.with-loader .Loader {
  width: 30px;
  height: 30px;
  margin-left: 4px;
  left: 0;
}
.Settings .transition .item.with-loader .Loader .spin {
  width: 30px;
  height: 30px;
  border-width: 4px;
}
.Settings .transition .item .main {
  display: flex;
  width: calc(100% - 130px);
  flex-direction: column;
  margin-right: 10px;
}
.Settings .transition .item .main .title {
  font-weight: 300;
  font-size: 13px;
}
.Settings .transition .item .main .title.disabled {
  color: rgba(63, 76, 105, 0.7);
}
.Settings .transition .item .main .sub {
  margin-top: 4px;
  font-weight: 300;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.Settings .transition .item .main .sub .nowrap {
  white-space: nowrap;
}
.Settings .transition .action {
  display: flex;
  align-items: center;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
  height: 16px;
}
.Settings .transition .action .Icon {
  margin-right: 4px;
  width: 14px;
  height: 14px;
}
.Settings .transition .action.disabled {
  color: rgba(63, 76, 105, 0.7);
  cursor: not-allowed;
}
.Settings .transition .link {
  display: flex;
  align-items: center;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
  height: 16px;
}
.Settings .transition .link .Icon {
  margin-left: 4px;
}
.Settings .transition .no-records {
  margin: 14px 0 4px;
  font-weight: 300;
  font-size: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
}
@media (max-width: 1000px) and (min-width: 650px) {
  .Settings {
    min-height: calc(100% - 315px);
  }
  .Settings .transition {
    min-height: calc(100vh - 60px - 20px - 274px - 45px);
  }
}
@media (max-width: 712px) {
  .Settings .transition {
    border-radius: 0px;
  }
}
@media (max-width: 649px) and (min-width: 470px) {
  .Settings {
    min-height: calc(100% - 255px);
  }
  .Settings .transition {
    min-height: calc(100vh - 60px - 20px - 234px - 45px);
  }
}
@media (max-width: 469px) {
  .Settings {
    min-height: calc(100% - 225px);
  }
  .Settings .transition {
    min-height: calc(100vh - 60px - 20px - 194px - 45px);
  }
}

.DocumentsFilters {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 5px;
}
.DocumentsFilters .showMore {
  width: 100%;
  position: relative;
  display: flex;
  padding: 4px 0;
}
.DocumentsFilters .showMore button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  outline: none;
  padding: 2px 6px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #3F4C69;
  position: relative;
}
.DocumentsFilters .showMore button::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background-color 0.3s ease-in-out;
}
.DocumentsFilters .showMore button.hasFilters:after {
  background: var(--primary-button-color);
}
.DocumentsFilters .showMore button .toggleIcon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  transition: 0.35s linear;
}
.DocumentsFilters .showMore button .toggleIcon.collapsed {
  transform: rotate(-180deg);
}
.DocumentsFilters .filterGroup {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}
.DocumentsFilters .filterGroup > .Input,
.DocumentsFilters .filterGroup > .SelectAsync {
  width: 30%;
  margin-bottom: 10px;
}
.DocumentsFilters .filterGroup .date {
  width: 65%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.DocumentsFilters .DatePicker {
  flex-shrink: 0;
  width: calc(45% - 30px);
}
.DocumentsFilters .presets {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.DocumentsFilters .presets > div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: var(--primary-button-color);
  color: #FFF;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}
.DocumentsFilters .presets > div:hover,
.DocumentsFilters .presets > div.active {
  background: var(--primary-button-hover-color);
}
.DocumentsFilters .presets > div:last-child {
  margin-top: 3px;
}
@media (max-width: 650px) {
  .DocumentsFilters .filterGroup > .Input,
  .DocumentsFilters .filterGroup > .SelectAsync {
    width: 45%;
  }
  .DocumentsFilters .filterGroup .date {
    width: 100%;
    order: 3;
  }
  .DocumentsFilters .filterGroup-main > .Input:nth-child(1),
  .DocumentsFilters .filterGroup-main > .SelectAsync:nth-child(1) {
    width: 100%;
  }
}
@media (max-width: 469px) {
  .DocumentsFilters > .Input,
  .DocumentsFilters > .SelectAsync {
    width: calc(50% - 5px);
  }
  .DocumentsFilters .DatePicker {
    width: calc(50% - 30px);
  }
}

.Checkbox {
  height: 20px;
  /* checkbox aspect */
  /* checked mark aspect */
  /* checked mark aspect changes */
  /* disabled checkbox */
}
.Checkbox [type="checkbox"]:not(:checked),
.Checkbox [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
.Checkbox [type="checkbox"]:not(:checked) + label,
.Checkbox [type="checkbox"]:checked + label {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 26px;
  cursor: pointer;
  color: #6377a4;
  font-weight: 500;
}
.Checkbox [type="checkbox"]:not(:checked) + label:before,
.Checkbox [type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #bdbdbd99;
  background: white;
  transition: background 0.4s ease-in-out, border 0.4s ease-in-out;
  border-radius: 3px;
  box-shadow: none;
}
.Checkbox [type="checkbox"]:checked + label:before {
  border-color: #6377a4;
  background: #6377a4;
  width: 16px;
  height: 16px;
}
.Checkbox [type="checkbox"]:not(:checked) + label:after,
.Checkbox [type="checkbox"]:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  transition: all 0.4s ease-in-out;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
}
.Checkbox .partiallyChecked[type="checkbox"]:checked + label:after {
  top: 9px;
  border-radius: 50%;
  border: 4px solid white;
  border-width: 4px;
  height: 0px;
  width: 0px;
}
.Checkbox [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: rotate(-45deg) scale(0);
}
.Checkbox [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.Checkbox [type="checkbox"]:disabled:not(:checked) + label:before,
.Checkbox [type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

.DocumentsDraftBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 21px;
  padding: 0 20px;
  margin-bottom: 20px;
}
.DocumentsDraftBar .selectAll {
  width: 30px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
.DocumentsDraftBar .selectAll .Checkbox label {
  width: 20px;
  height: 20px;
  padding: 0;
}
.DocumentsDraftBar .actions {
  display: flex;
}
.DocumentsDraftBar .actions .Button {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  height: unset;
  border-radius: 10px;
  padding: 4px 8px;
  margin-right: 8px;
}
.DocumentsDraftBar .selectedCount,
.DocumentsDraftBar .selectedAmount {
  color: #0006;
  transition: color 0.3s ease-in-out;
}
.DocumentsDraftBar .selectedCount.selected,
.DocumentsDraftBar .selectedAmount.selected {
  color: #3F4C69;
}
.DocumentsDraftBar .selectedCount {
  margin-right: 15px;
}
.DocumentsDraftBar .selectedAmount {
  margin-left: auto;
  text-align: right;
}
.DocumentsDraftBar .selectedAmount .amount {
  font-size: 16px;
  font-weight: 500;
  margin-left: 8px;
}
.DocumentsDraftBar .selectedAmount .amount .decimals {
  font-size: 13px;
  font-weight: 400;
}
@media (max-width: 700px) {
  .DocumentsDraftBar .actions {
    order: 1;
    width: 100%;
  }
  .DocumentsDraftBar .actions .Button {
    margin-top: 20px;
  }
}

.Document {
  border-bottom: 1px solid #8080801a;
}
.Document > .content {
  padding: 10px 20px;
  display: flex;
  line-height: 1.16;
  cursor: pointer;
}
.Document > .content:hover {
  background: var(--primary-background);
}
.Document > .content .TooltipContainer {
  flex-shrink: 0;
  margin-right: 15px;
}
.Document > .content .TooltipContainer .Tooltip {
  top: 14px;
}
.Document > .content .TooltipContainer .Tooltip .content {
  width: 300px;
}
.Document > .content .left {
  min-width: 0;
}
.Document > .content .right {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  align-items: flex-end;
  flex-shrink: 0;
}
.Document > .content .title {
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Document > .content .title_open {
  white-space: pre-wrap;
}
.Document > .content .date,
.Document > .content .showTransactions {
  font-weight: 300;
  font-size: 11px;
  color: #0006;
}
.Document > .content .date {
  margin-top: 2px;
}
.Document > .content .amount {
  font-weight: 500;
  font-size: 16px;
  line-height: 15px;
}
.Document > .content .amount .decimals {
  font-weight: 400;
  font-size: 13px;
}
.Document > .content .showTransactions {
  margin-top: 2px;
  position: relative;
}
.Document > .content .checkboxWrapper {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
.Document > .content .checkboxWrapper .Checkbox label {
  width: 20px;
  height: 20px;
  padding: 0;
}
.Document > .content .checkboxWrapper .TooltipContainer {
  margin-right: 0;
}
.Document > .content .checkboxWrapper .TooltipContainer .Tooltip .content {
  width: 250px;
}
.Document .extra {
  transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}
.Document .extra > .extra-content {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 65px);
  margin-left: 65px;
  padding-bottom: 15px;
}
.Document .extra > .extra-content .item {
  display: flex;
  flex-direction: column;
  margin: 15px 15px 0 0;
  font-weight: 300;
  font-size: 11px;
  flex-shrink: 0;
}
.Document .extra > .extra-content .item .value {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.Document .transactions {
  position: relative;
  min-height: 40px;
}
.Document .transactions .Loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: 17.5px;
}
.Document .transactions .Loader .spin {
  width: 30px;
  height: 30px;
  border-width: 3px;
}
.Document .transactions .Record .content {
  padding-left: 65px;
}
.Document .transactions .Record .extra > .extra-content {
  margin-left: 110px;
  width: calc(100% - 110px);
}
.Document .transactions .no-records {
  padding: 14px 20px 14px 65px;
  font-weight: 300;
  font-size: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.Document .document-actions {
  padding: 10px 0 10px 65px;
  margin: -8px -8px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.Document .document-actions .Button {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  height: unset;
  border-radius: 10px;
  padding: 4px 8px;
  margin: 8px 8px 0 0;
}
@media (max-width: 400px) {
  .Document .extra .item {
    min-width: 110px;
  }
}

.Tabs {
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  margin-bottom: 30px;
  position: relative;
}
.Tabs .tabs-list {
  display: flex;
}
.Tabs .tab {
  padding: 12px 14px;
  margin-right: 4px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.Tabs .tab:last-child {
  margin-right: 0;
}
.Tabs .tab:hover,
.Tabs .tab.active {
  color: #6377a4;
}
.Tabs .tabs-bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #6377a4;
  z-index: 1;
}
.Tabs .tabs-bar.animated {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.Documents {
  display: flex;
  flex-direction: column;
  max-width: 712px;
  min-height: 100%;
  width: 100%;
  flex-shrink: 0;
}
.Documents .transition {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: calc(100vh - 60px - 30px - 36px - 88px);
  padding-bottom: 26px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.Documents .transition > div > .no-records {
  padding: 0 20px;
  font-weight: 300;
  font-size: 12px;
  flex-shrink: 0;
}
.Documents .transition .validation-error {
  padding: 0 20px;
  font-weight: 300;
  font-size: 12px;
}
.Documents .transition .validation-error .errors-message {
  color: #F5425F;
}
.Documents .transition > .Loader {
  position: absolute;
  right: 0;
  top: 37px;
  height: calc(100% - 37px);
}
.Documents .transition .more {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
}
.Documents .transition .more .Button {
  width: 100%;
  max-width: 260px;
}
.Documents .sub-header {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 20px;
  margin: 26px 0 4px;
  font-weight: 300;
  font-size: 12px;
  color: #3f4c69b3;
}
.Documents .sub-header .NavBackButton {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.Documents .statusTabs {
  margin: 4px 0 20px;
  position: relative;
}
.Documents .statusTabs-wrapper {
  overflow-x: auto;
}
.Documents .statusTabs::before,
.Documents .statusTabs::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 30px;
  height: 35px;
  z-index: 1;
  pointer-events: none;
}
.Documents .statusTabs::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
}
.Documents .statusTabs::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
}
.Documents .statusTabs .Tabs {
  min-width: 100%;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 20px;
  margin-bottom: 0;
}
.Documents .statusTabs .document-all-tab {
  display: flex;
  align-items: center;
}
.Documents .statusTabs .document-all-tab .Icon {
  margin: -2px 0 -2px 6px;
  cursor: pointer;
}
@media (max-width: 712px) {
  .Documents .transition {
    border-radius: 0;
  }
}
@media (max-width: 650px) {
  .Documents .transition {
    box-sizing: border-box;
    min-height: calc(100vh - 60px - 30px - 36px - 143px);
  }
}

.Statement {
  display: flex;
  flex-direction: column;
  max-width: 712px;
  min-height: calc(100% - 312px);
  width: 100%;
  flex-shrink: 0;
}
.Statement .transition {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: calc(100vh - 60px - 20px - 314px - 25px - 45px - 15px);
  padding: 26px 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.Statement .transition .no-records,
.Statement .transition .validation-error {
  padding: 0 20px;
  margin: 20px 0 4px;
  font-weight: 300;
  font-size: 12px;
  flex-shrink: 0;
}
.Statement .transition .no-records .errors-message,
.Statement .transition .validation-error .errors-message {
  color: #F5425F;
}
.Statement .transition > .Loader {
  position: absolute;
  right: 0;
  top: 0;
}
.Statement .header {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 15px;
}
.Statement .header .btn-export {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #FFF;
  background-color: var(--primary-button-color);
  font-weight: 400;
  cursor: pointer;
  border-radius: 10px;
  padding: 2px 10px;
  margin: 21px 20px 0 0;
  transition: background-color 0.3s ease-in-out;
}
.Statement .header .btn-export:hover {
  background: var(--primary-button-hover-color);
}
.Statement .header .btn-export .Icon {
  margin-right: 4px;
}
.Statement .header .btn-export .Loader {
  margin-right: 4px;
  width: 17px;
  height: 17px;
}
.Statement .header .btn-export .Loader .spin {
  width: 17px;
  height: 17px;
  border-width: 2px;
}
.Statement .header .btn-export.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}
.Statement .header .date {
  width: 48%;
  display: flex;
  justify-content: space-between;
}
.Statement .header .DatePicker {
  flex-shrink: 0;
  width: calc(50% - 40px);
}
.Statement .header .presets {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.Statement .header .presets > div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: var(--primary-button-color);
  color: #FFF;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}
.Statement .header .presets > div:hover,
.Statement .header .presets > div.active {
  background: var(--primary-button-hover-color);
}
.Statement .header .presets > div:last-child {
  margin-top: 3px;
}
.Statement .sub-header {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 20px;
  margin-bottom: 20px;
  font-weight: 300;
  font-size: 12px;
  color: #3f4c69b3;
}
.Statement .sub-header .NavBackButton {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.Statement .sub-title {
  margin: 16px 20px 4px;
  font-weight: 300;
  font-size: 14px;
  color: rgba(63, 76, 105, 0.7);
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  padding-bottom: 4px;
  text-transform: uppercase;
}
.Statement .Tabs {
  padding: 0 20px;
  margin-bottom: 20px;
}
.Statement .info-block {
  margin: 0 20px;
}
.Statement .info-block .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 300;
  padding: 10px 0;
}
.Statement .info-block .row .value {
  position: relative;
  min-width: 0;
}
.Statement .info-block .row .value .decimals {
  font-size: 0.8125em;
}
.Statement .info-block .row .value .clipboard {
  position: absolute;
  top: -1px;
  left: -17px;
  width: 13px;
  height: 13px;
}
@media (max-width: 1000px) and (min-width: 650px) {
  .Statement {
    min-height: calc(100% - 252px);
  }
  .Statement .transition {
    min-height: calc(100vh - 60px - 20px - 274px - 25px - 45px - 15px);
  }
}
@media (max-width: 712px) {
  .Statement .transition {
    border-radius: 0;
  }
}
@media (max-width: 700px) {
  .Statement {
    min-height: calc(100% - 192px);
  }
  .Statement .transition {
    box-sizing: border-box;
    min-height: calc(100vh - 60px - 20px - 274px - 25px - 76px - 15px);
  }
  .Statement .header {
    justify-content: flex-start;
  }
  .Statement .header .btn-export {
    margin: 0;
  }
  .Statement .header .date {
    margin-top: 10px;
    width: 100%;
  }
}
@media (max-width: 650px) {
  .Statement .transition {
    box-sizing: border-box;
    min-height: calc(100vh - 60px - 20px - 234px - 25px - 76px - 15px);
  }
  .Statement .statement-info {
    margin: 0;
  }
  .Statement .info-block .row .label {
    width: 130px;
  }
}
@media (max-width: 469px) {
  .Statement {
    min-height: calc(100% - 217px);
  }
  .Statement .transition {
    min-height: calc(100vh - 60px - 20px - 194px - 25px - 76px - 15px);
  }
  .Statement .header .DatePicker {
    width: calc(50% - 30px);
  }
}

.EntitiesPage {
  display: flex;
  width: 100%;
  max-width: 1200px;
  padding: 0 10px;
  margin: 0 auto;
  height: 100%;
}
.EntitiesPage .pageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.EntitiesPage .slickWrapper {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  margin-top: 20px;
}
.EntitiesPage .slickWrapper .slickStub {
  width: 100%;
  display: flex;
  justify-content: center;
}
.EntitiesPage .slickWrapper .gradient {
  position: absolute;
  top: 0px;
  height: 100%;
  width: 200px;
  pointer-events: none;
}
.EntitiesPage .slickWrapper .gradient.left {
  left: 0px;
  background: linear-gradient(to right, var(--primary-background), 30%, rgba(255, 255, 255, 0));
}
.EntitiesPage .slickWrapper .gradient.right {
  right: 0px;
  background: linear-gradient(to left, var(--primary-background), 30%, rgba(255, 255, 255, 0));
}
.EntitiesPage .slickWrapper .slick-slide .Slide .slide-container {
  pointer-events: none;
}
.EntitiesPage .slickWrapper .slick-slide.slick-active .Slide .slide-container {
  pointer-events: auto;
}
.EntitiesPage .slickWrapper .slick-track {
  min-width: 1000rem !important;
}
.EntitiesPage .slickWrapper .slick-dots {
  bottom: -24px;
}
.EntitiesPage .slickWrapper .slick-dots li {
  margin: 0 2px;
}
.EntitiesPage .slickWrapper .slick-dots li button::-moz-focus-inner {
  border: 0;
}
.EntitiesPage .slickWrapper .slick-dots li button:before {
  transition: all 0.3s linear;
  font-size: 10px;
  color: #3F4C69;
}
.EntitiesPage .slickWrapper .slick-dots li button:focus:before {
  opacity: 0.25;
}
.EntitiesPage .slickWrapper .slick-dots li button:hover:before {
  opacity: 1;
}
.EntitiesPage .slickWrapper .slick-dots li.slick-active button:before {
  opacity: 0.75;
}
.EntitiesPage .slickWrapper .slick-dots li.slick-active button:hover:before {
  opacity: 1;
}
.EntitiesPage .slickWrapper .slick-slide .Slide .card {
  pointer-events: none;
}
.EntitiesPage .slickWrapper .slick-active .Slide {
  cursor: default;
}
.EntitiesPage .slickWrapper .slick-active .Slide .card {
  pointer-events: all;
}
.EntitiesPage .Records,
.EntitiesPage .Documents,
.EntitiesPage .Statement {
  margin-top: 25px;
}
.EntitiesPage .Settings {
  margin-top: 45px;
}
.EntitiesPage .Documents {
  min-height: calc(100% - 312px);
}
.EntitiesPage .Documents .transition {
  min-height: calc(100vh - 60px - 20px - 314px - 25px - 88px);
}
@media (max-width: 1000px) {
  .EntitiesPage {
    padding: 0;
  }
  .EntitiesPage .slickWrapper .gradient {
    display: none;
  }
}
@media (max-width: 1000px) and (min-width: 650px) {
  .EntitiesPage .Documents {
    min-height: calc(100% - 252px);
  }
  .EntitiesPage .Documents .transition {
    min-height: calc(100vh - 60px - 20px - 274px - 25px - 88px);
  }
}
@media (max-width: 650px) {
  .EntitiesPage .Documents {
    min-height: calc(100% - 192px);
  }
  .EntitiesPage .Documents .transition {
    min-height: calc(100vh - 60px - 20px - 234px - 25px - 143px);
  }
  .EntitiesPage .Documents .DocumentsFilters .filterGroup-extra > .Input:nth-child(1),
  .EntitiesPage .Documents .DocumentsFilters .filterGroup-extra > .SelectAsync:nth-child(1) {
    width: 100%;
  }
}
@media (max-width: 470px) {
  .EntitiesPage .Documents .transition {
    min-height: calc(100vh - 60px - 20px - 194px - 25px - 143px);
  }
}
@-moz-document url-prefix() {
  .AuthLayout {
    overflow-y: scroll;
  }
}

.Profile {
  display: flex;
  flex-direction: column;
  width: 500px;
}
.Profile .header {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 30px 0 16px;
}
.Profile .header .NavBackButton {
  margin-right: 10px;
}
.Profile .header .title {
  flex-shrink: 0;
  font-size: 16px;
  color: #3F4C69;
}
.Profile .content {
  position: relative;
  display: flex;
  padding: 26px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
  height: calc(100% - 62px);
}
.Profile .content .avatar {
  position: relative;
  flex-shrink: 0;
  height: 120px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: url(/static/media/avatar.25616335.jpg);
  background-size: cover;
}
.Profile .content .avatar .hoverStub {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  bottom: 0px;
  height: 25px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  color: #fff;
  font-size: 12px;
}
.Profile .content .avatar:hover .hoverStub {
  background-color: rgba(0, 0, 0, 0.7);
  height: 100%;
  font-size: 16px;
}
.Profile .content .status {
  margin-top: 2px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(63, 76, 105, 0.7);
  white-space: nowrap;
}
.Profile .content .status .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #72BB53;
  margin-right: 5px;
}
.Profile .content .inputs {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 31px;
}
.Profile .content .inputs .name {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}
.Profile .content .inputs .name > div {
  word-break: break-word;
}
.Profile .content .inputs .name .Input {
  width: -moz-fit-content;
  width: fit-content;
  height: unset;
  border: none;
}
.Profile .content .inputs .name .Input input {
  margin-top: 0;
  padding-left: 0;
  font-size: 20px;
  height: 24px;
  font-weight: 400;
}
.Profile .content .inputs .name .pencil {
  height: 24px;
  width: 24px;
  background-size: 18px 18px !important;
  background-position: center center !important;
  background-color: transparent;
  transition: background 0.25s linear, background-color 0.25s linear;
  border-radius: 50%;
}
.Profile .content .inputs .name:hover .pencil {
  background: url(/static/media/pencilActive.23d977cb.svg);
  background-color: rgba(99, 119, 164, 0.2);
}
.Profile .content .inputs .email {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  word-break: break-word;
}
.Profile .content .inputs .email .Icon {
  margin-right: 6px;
  margin-bottom: 1px;
  flex-shrink: 0;
}
.Profile .content .inputs .telephone {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 300;
  margin-top: 4px;
}
.Profile .content .inputs .telephone .phone {
  margin-right: 8px;
}
.Profile .content .inputs .telephone > div {
  cursor: pointer;
}
.Profile .content .inputs .telephone .Input {
  width: -moz-fit-content;
  width: fit-content;
  height: unset;
  border: none;
}
.Profile .content .inputs .telephone .Input input {
  margin-top: 0;
  padding-left: 0;
  font-size: 12px;
  height: 21px;
  font-weight: 300;
}
.Profile .content .inputs .telephone .pencil {
  margin-bottom: 1px;
  height: 20px;
  width: 20px;
  background-size: 16px 16px !important;
  background-position: center center !important;
  background-color: transparent;
  transition: background 0.25s linear, background-color 0.25s linear;
  border-radius: 50%;
}
.Profile .content .inputs .telephone:hover .pencil {
  background: url(/static/media/pencilActive.23d977cb.svg);
  background-color: rgba(99, 119, 164, 0.2);
}
.Profile .content .inputs .password {
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  color: #6377A4;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 10px;
}
.Profile .content .inputs .password .unlock {
  margin: 0 6px 1px 0;
  height: 16px;
  width: 16px;
}
.Profile .content .inputs .LangSelector .placeholder,
.Profile .content .inputs .layoutSelect .placeholder {
  font-weight: 300;
}
.Profile .content .inputs .LangSelector .placeholder.animated,
.Profile .content .inputs .layoutSelect .placeholder.animated {
  transform: scale(0.7858) translate(calc(-25px * 1.2), -25px);
}
.Profile .content .inputs .LangSelector {
  margin-bottom: 10px;
}
.Profile .content .inputs .layoutSelect .layout-option {
  display: flex;
  align-items: center;
}
.Profile .content .inputs .layoutSelect .layout-option .Icon {
  margin-right: 8px;
}

.GAuth {
  display: flex;
  flex-direction: column;
  width: 500px;
}
.GAuth .pointer {
  cursor: pointer;
}
.GAuth .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  margin: 30px 0 16px;
}
.GAuth .header .title {
  flex-shrink: 0;
}
.GAuth .header .title .main {
  font-size: 16px;
  color: #3F4C69;
}
.GAuth .header .title .sub {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.4);
}
.GAuth .header .Loader {
  justify-content: flex-end;
}
.GAuth .header .Loader .spin {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.GAuth .header .actions {
  display: flex;
  align-items: center;
}
.GAuth .header .actions .status {
  font-weight: 500;
}
.GAuth .header .actions .status.enabled {
  color: #72BB53;
}
.GAuth .header .actions .status.disabled {
  color: #D0021B;
}
.GAuth .header .actions .arrow {
  margin-left: 10px;
  transition: 0.35s linear;
}
.GAuth .header .actions .arrow.active {
  transform: rotate(180deg);
}
.GAuth .content {
  position: relative;
  padding: 26px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
  color: rgba(63, 76, 105, 0.6);
  font-size: 12px;
  line-height: 13px;
}
@media (max-width: 500px) {
  .GAuth .header {
    flex-direction: column;
    align-items: flex-start;
  }
  .GAuth .header .title {
    margin-bottom: 10px;
  }
}

.UserPage {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}
.UserPage .pageWrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 1200px;
  padding: 0 10px 31px;
}
.UserPage .pageWrapper .Profile {
  flex-shrink: 0;
}
.UserPage .pageWrapper .ChangePassword {
  margin-left: 62px;
}
.UserPage > .Loader {
  height: unset;
  min-height: 100%;
}
@media (max-width: 560px) {
  .UserPage .pageWrapper .Profile {
    width: 100%;
  }
  .UserPage .pageWrapper .GAuth {
    width: 100%;
  }
}
@media (max-width: 440px) {
  .UserPage .pageWrapper .Profile .content .avatar {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 350px) {
  .UserPage .pageWrapper .Profile .content .avatar {
    width: 80px;
    height: 80px;
  }
  .UserPage .pageWrapper .Profile .content .inputs {
    margin-left: 20px;
  }
}

.Requisites {
  display: flex;
  flex-direction: column;
  width: 500px;
  margin-bottom: 31px;
}
.Requisites .header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 62px;
}
.Requisites .header .NavBackButton {
  margin-right: 10px;
}
.Requisites .header .title {
  flex-shrink: 0;
  font-size: 16px;
  color: #3F4C69;
}
.Requisites .header .copy-btn {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: #6377a4;
  display: flex;
  align-items: center;
}
.Requisites .header .copy-btn .clipboard {
  width: 13px;
  height: 13px;
  margin-right: 4px;
}
.Requisites .content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 26px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.Requisites .content .item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  line-height: 14px;
}
.Requisites .content .item:last-child {
  margin-bottom: 0;
}
.Requisites .content .item .title {
  font-size: 13px;
}
.Requisites .content .item .value {
  font-size: 14px;
  font-weight: 300;
  margin-left: 20px;
  color: rgba(63, 76, 105, 0.6);
  text-align: right;
}
.Requisites .content .item .value.centered {
  width: 100%;
  margin-left: 0;
  font-weight: 400;
  text-align: center;
}

.RefillPage {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}
.RefillPage .pageWrapper {
  display: flex;
  justify-content: center;
  width: 1200px;
  padding: 0 10px;
}
.RefillPage .pageWrapper .Requisites {
  flex-shrink: 0;
}
.RefillPage .Loader {
  height: unset;
  min-height: 100%;
}
@media (max-width: 700px) and (min-width: 451px) {
  .RefillPage .pageWrapper .Requisites {
    width: 100%;
  }
}
@media (max-width: 450px) {
  .RefillPage .pageWrapper .Requisites {
    width: 100%;
  }
}

.CurrencyIcon {
  display: inline-block;
  font-size: 20px;
  width: 18px;
  height: 18px;
  text-align: center;
}

.InputAmountTaxForm {
  width: 100%;
}
.InputAmountTaxForm .info {
  margin-top: 20px;
  width: 100%;
  margin-left: auto;
  position: relative;
  /*.titles,
        .prices {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

        }*/
  /*.titles {
            margin-right: 10px;
            line-height: 15px;

            .title {
                font-size: 12px;
                color: rgba(63, 76, 105, 0.6);

                &:last-child {
                    margin-top: 4px;
                }
            }
        }*/
  /*.prices {
            align-items: flex-end;
            font-size: 15px;
            line-height: 15px;

            .fee {
                font-weight: 400;
            }

            .total {
                font-weight: 500;
                margin-top: 4px;
            }

            .decimals {
                font-size: 13px;
            }
        }*/
}
.InputAmountTaxForm .info .fees,
.InputAmountTaxForm .info .totals {
  display: flex;
  justify-content: space-between;
  line-height: 15px;
  height: 15px;
}
.InputAmountTaxForm .info .totals {
  margin-top: 4px;
}
.InputAmountTaxForm .info .title {
  font-size: 12px;
  color: rgba(63, 76, 105, 0.6);
}
.InputAmountTaxForm .info .price {
  font-size: 15px;
}
.InputAmountTaxForm .info .price.fee {
  font-weight: 400;
}
.InputAmountTaxForm .info .price.total {
  font-weight: 500;
}
.InputAmountTaxForm .info .price .decimals {
  font-size: 13px;
}
.InputAmountTaxForm .info .Loader {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 0;
  right: 0;
}
.InputAmountTaxForm .info .Loader .spin {
  width: 34px;
  height: 34px;
  border-width: 2px;
}

.TextArea {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  min-height: 45px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.6);
}
.TextArea.error {
  color: #D0021B;
}
.TextArea.disabled .iconWrapper {
  filter: invert(60%);
}
.TextArea.disabled textarea {
  color: rgba(63, 76, 105, 0.7);
}
.TextArea .iconWrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 29px;
  margin-top: 15px;
}
.TextArea textarea {
  width: 100%;
  min-height: 62px;
  margin-top: 14px;
  padding: 7px 0 7px 5px;
  color: #3F4C69;
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-family);
  resize: none;
}
.TextArea .borderWrapper {
  position: absolute;
  bottom: -1px;
  height: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.TextArea .borderWrapper .border {
  height: 100%;
  width: 0px;
  background: #3F4C69;
  transition: all 0.3s ease;
}
.TextArea .placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  top: 23px;
  left: 25px;
  font-size: 14px;
  color: rgba(63, 76, 105, 0.6);
  transition: all 0.3s ease;
  transform-origin: left top 0px;
  pointer-events: none;
}
.TextArea .placeholder.animated {
  transform: scale(0.8) translate(calc(-25px * 1.2), -25px);
  transform-origin: left top 0px;
}
.TextArea .errorText {
  position: absolute;
  display: flex;
  align-items: center;
  top: 23px;
  right: 0px;
  font-size: 14px;
  color: #F5425F;
}
.TextArea .errorText.errorAnimation-enter {
  transition: all 0.3s ease;
  transform: scale(1) translateY(0px);
  transform-origin: right top 0px;
}
.TextArea .errorText.errorAnimation-enter-active,
.TextArea .errorText.errorAnimation-enter-done {
  transition: all 0.3s ease;
  transform: scale(0.8) translateY(-25px);
  transform-origin: right top 0px;
}
.TextArea .errorText.errorAnimation-exit {
  opacity: 1;
  transition: all 0.3s ease;
  transform: scale(0.8) translateY(-25px);
  transform-origin: right top 0px;
}
.TextArea .errorText.errorAnimation-exit-active,
.TextArea .errorText.errorAnimation-exit-done {
  opacity: 0;
  transform: scale(1) translateY(0px);
  transform-origin: right top 0px;
}
.TextArea.focused .borderWrapper .border {
  width: 100%;
}
.TextArea.error .borderWrapper .border {
  width: 100%;
  background: #F5425F;
}

.SwitcherYesNoForm {
  width: 100%;
  padding: 10px 0;
}
.SwitcherYesNoForm .SwitcherYesNo {
  width: 100%;
}
.SwitcherYesNoForm .SwitcherYesNo .Button {
  width: 50%;
}
.SwitcherYesNoForm .SwitcherYesNo .Button .label {
  opacity: 1;
}
.SwitcherYesNoForm.owncard-switcher .SwitcherYesNo .Button:first-child {
  width: 64%;
}
.SwitcherYesNoForm.owncard-switcher .SwitcherYesNo .Button:last-child {
  width: 36%;
}

.FormBlock {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 30px;
  margin-top: 30px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}
.FormBlock:nth-child(1) {
  margin-top: 0;
}
.FormBlock > .title {
  font-size: 15px;
  font-weight: 300;
  color: #3F4C69;
  margin-right: 10px;
}
.FormBlock > .inputs {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 280px;
  margin-bottom: -10px;
  flex-shrink: 0;
}
.FormBlock > .inputs > .Select,
.FormBlock > .inputs > .SelectAsync,
.FormBlock > .inputs > .Input,
.FormBlock > .inputs > .TextArea,
.FormBlock > .inputs > .Checkbox,
.FormBlock > .inputs > .Switcher {
  margin-top: 0;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.FormBlock > .inputs .Select .optionBalance {
  width: 100%;
  line-height: 1.2;
}
.FormBlock > .inputs .Select .optionBalance .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.FormBlock > .inputs .Select .optionBalance .balance {
  font-weight: 500;
  white-space: pre;
}
@media (max-width: 400px) and (min-width: 351px) {
  .FormBlock .title {
    font-size: 14px;
  }
  .FormBlock .inputs {
    width: 215px;
  }
}
@media (max-width: 350px) {
  .FormBlock .title {
    font-size: 14px;
  }
  .FormBlock .inputs {
    width: 180px;
  }
}

.BaseForm {
  display: flex;
  justify-content: center;
  width: 100%;
}
.BaseForm .main {
  display: flex;
  flex-direction: column;
  width: 460px;
  flex-shrink: 0;
  margin-bottom: 31px;
}
.BaseForm .main .header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 62px;
}
.BaseForm .main .header .NavBackButton {
  margin-right: 10px;
}
.BaseForm .main .header .title {
  flex-shrink: 0;
  font-size: 16px;
  color: #3F4C69;
}
.BaseForm .main .content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  padding: 26px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.BaseForm .main .content .formError {
  display: flex;
  align-items: center;
  min-height: 37px;
  font-size: 11.2px;
  color: #F5425F;
}
.BaseForm .main .content .actions {
  display: flex;
  flex-direction: column;
}
.BaseForm .main .content .actions .Button {
  margin-bottom: 10px;
}
.BaseForm .main .content .actions .Button:last-child {
  margin-bottom: 0;
}
@media (max-width: 500px) {
  .BaseForm {
    justify-content: flex-start;
  }
  .BaseForm .main {
    width: 100%;
  }
  .BaseForm .main .FormBlock > .inputs > .Input {
    width: 100% !important;
  }
}

.PaymentPage {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}
.PaymentPage .pageWrapper {
  display: flex;
  width: 1200px;
  padding: 0 10px;
}
.PaymentPage > .Loader {
  height: unset;
  min-height: 100%;
}
@media (max-width: 900px) and (min-width: 801px) {
  .PaymentPage .pageWrapper .Requisites {
    margin-left: 26px;
  }
}
@media (max-width: 800px) and (min-width: 701px) {
  .PaymentPage .pageWrapper .Requisites {
    width: 300px;
    margin-left: 26px;
  }
}
@media (max-width: 700px) and (min-width: 451px) {
  .PaymentPage .pageWrapper {
    flex-direction: column;
  }
  .PaymentPage .pageWrapper .Refill {
    flex-shrink: 0;
    order: 2;
  }
  .PaymentPage .pageWrapper .Requisites {
    order: 1;
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 450px) {
  .PaymentPage .pageWrapper {
    flex-direction: column;
  }
  .PaymentPage .pageWrapper .Refill {
    flex-shrink: 0;
    order: 2;
    margin-bottom: 26px;
  }
  .PaymentPage .pageWrapper .Refill .content .item .step {
    width: 50px;
    height: 50px;
    font-size: 17px;
    margin-right: 16px;
  }
  .PaymentPage .pageWrapper .Refill .content .item .main .title {
    min-height: 50px;
    margin: 0 0 10px 0;
  }
  .PaymentPage .pageWrapper .Requisites {
    order: 1;
    width: 100%;
    margin-left: 0;
  }
}

.CashFlowsFilters {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 5px;
}
.CashFlowsFilters .showMore {
  width: 100%;
  position: relative;
  display: flex;
  padding: 4px 0;
}
.CashFlowsFilters .showMore button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  outline: none;
  padding: 2px 6px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #3F4C69;
  position: relative;
}
.CashFlowsFilters .showMore button::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background-color 0.3s ease-in-out;
}
.CashFlowsFilters .showMore button.hasFilters:after {
  background: var(--primary-button-color);
}
.CashFlowsFilters .showMore button .toggleIcon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  transition: 0.35s linear;
}
.CashFlowsFilters .showMore button .toggleIcon.collapsed {
  transform: rotate(-180deg);
}
.CashFlowsFilters .filterGroup {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}
.CashFlowsFilters .filterGroup > .Input,
.CashFlowsFilters .filterGroup > .SelectAsync {
  width: 30%;
  margin-bottom: 10px;
}
.CashFlowsFilters .filterGroup .date {
  width: 65%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.CashFlowsFilters .filterGroup .amount {
  width: 65%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.CashFlowsFilters .filterGroup .amount .Input {
  flex-shrink: 0;
  width: calc(50% - 10px);
}
.CashFlowsFilters .DatePicker {
  flex-shrink: 0;
  width: calc(45% - 30px);
}
.CashFlowsFilters .presets {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.CashFlowsFilters .presets > div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: var(--primary-button-color);
  color: #FFF;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}
.CashFlowsFilters .presets > div:hover,
.CashFlowsFilters .presets > div.active {
  background: var(--primary-button-hover-color);
}
.CashFlowsFilters .presets > div:last-child {
  margin-top: 3px;
}
@media (max-width: 650px) {
  .CashFlowsFilters .filterGroup > .Input,
  .CashFlowsFilters .filterGroup > .SelectAsync {
    width: 45%;
  }
  .CashFlowsFilters .filterGroup .date {
    width: 100%;
    order: 3;
  }
  .CashFlowsFilters .filterGroup .amount {
    width: 100%;
  }
  .CashFlowsFilters .filterGroup-main > .Input:nth-child(1),
  .CashFlowsFilters .filterGroup-main > .SelectAsync:nth-child(1) {
    width: 100%;
  }
}
@media (max-width: 469px) {
  .CashFlowsFilters > .Input,
  .CashFlowsFilters > .SelectAsync {
    width: calc(50% - 5px);
  }
  .CashFlowsFilters .DatePicker {
    width: calc(50% - 30px);
  }
}

.CashFlow {
  border-bottom: 1px solid #8080801a;
}
.CashFlow > .content {
  padding: 10px 20px;
  display: flex;
  line-height: 1.16;
  cursor: pointer;
}
.CashFlow > .content:hover {
  background: #F7F7FB;
}
.CashFlow > .content > .Icon {
  flex-shrink: 0;
  margin-right: 15px;
}
.CashFlow > .content .left {
  min-width: 0;
}
.CashFlow > .content .right {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  align-items: flex-end;
  flex-shrink: 0;
}
.CashFlow > .content .title {
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CashFlow > .content .title_open {
  white-space: pre-wrap;
}
.CashFlow > .content .date,
.CashFlow > .content .showInfo {
  font-weight: 300;
  font-size: 11px;
  color: #0006;
}
.CashFlow > .content .date {
  margin-top: 2px;
}
.CashFlow > .content .amount {
  font-weight: 500;
  font-size: 16px;
  line-height: 15px;
}
.CashFlow > .content .amount .decimals {
  font-weight: 400;
  font-size: 13px;
}
.CashFlow > .content .showInfo {
  margin-top: 2px;
  position: relative;
}
.CashFlow .extra {
  transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}
.CashFlow .extra > .extra-content {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 65px);
  margin-left: 65px;
  padding-bottom: 15px;
}
.CashFlow .extra > .extra-content .item {
  display: flex;
  flex-direction: column;
  margin: 15px 15px 0 0;
  font-weight: 300;
  font-size: 11px;
  flex-shrink: 0;
}
.CashFlow .extra > .extra-content .item .value {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
@media (max-width: 400px) {
  .CashFlow .extra .item {
    min-width: 110px;
  }
}

.CashFlows {
  display: flex;
  flex-direction: column;
  max-width: 712px;
  min-height: 100%;
  width: 100%;
  flex-shrink: 0;
}
.CashFlows .transition {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: calc(100vh - 60px - 30px - 36px - 88px);
  padding-bottom: 26px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.CashFlows .transition > div > .no-records {
  padding: 0 20px;
  font-weight: 300;
  font-size: 12px;
  flex-shrink: 0;
}
.CashFlows .transition .validation-error {
  padding: 0 20px;
  font-weight: 300;
  font-size: 12px;
}
.CashFlows .transition .validation-error .errors-message {
  color: #F5425F;
}
.CashFlows .transition > .Loader {
  position: absolute;
  right: 0;
  top: 37px;
  height: calc(100% - 37px);
}
.CashFlows .transition .more {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
}
.CashFlows .transition .more .Button {
  width: 100%;
  max-width: 260px;
}
.CashFlows .sub-header {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 20px;
  margin: 26px 0 4px;
  font-weight: 300;
  font-size: 12px;
  color: #3f4c69b3;
}
.CashFlows .sub-header .NavBackButton {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.CashFlows .statusTabs {
  margin: 4px 0 20px;
  position: relative;
}
.CashFlows .statusTabs-wrapper {
  overflow-x: auto;
}
.CashFlows .statusTabs::before,
.CashFlows .statusTabs::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 30px;
  height: 35px;
  z-index: 1;
  pointer-events: none;
}
.CashFlows .statusTabs::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
}
.CashFlows .statusTabs::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
}
.CashFlows .statusTabs .Tabs {
  min-width: 100%;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 20px;
  margin-bottom: 0;
}
.CashFlows .statusTabs .document-all-tab {
  display: flex;
  align-items: center;
}
.CashFlows .statusTabs .document-all-tab .Icon {
  margin: -2px 0 -2px 6px;
  cursor: pointer;
}
@media (max-width: 712px) {
  .CashFlows .transition {
    border-radius: 0;
  }
}
@media (max-width: 650px) {
  .CashFlows .transition {
    box-sizing: border-box;
    min-height: calc(100vh - 60px - 30px - 36px - 143px);
  }
}

.CashFlowPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 10px;
  margin: 0 auto;
  height: 100%;
}
.CashFlowPage .pageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 712px;
  padding-top: 30px;
}
.CashFlowPage .pageWrapper .header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}
.CashFlowPage .pageWrapper .header .NavBackButton {
  margin-right: 10px;
}
.CashFlowPage .pageWrapper .header .title {
  flex-shrink: 0;
  font-size: 16px;
  color: #3F4C69;
}
.CashFlowPage .pageWrapper .header .actions {
  display: flex;
  margin-left: auto;
}
.CashFlowPage .pageWrapper .header .actions .Button .Icon {
  margin-right: 6px;
}
.CashFlowPage .pageWrapper .header .actions .Button:not(:first-child) {
  margin-left: 10px;
}
@media (max-width: 650px) {
  .CashFlowPage .pageWrapper .header .actions {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    padding: 0 20px;
    justify-content: space-between;
  }
  .CashFlowPage .pageWrapper .header .actions .Button {
    width: 48%;
    font-size: 13px;
    margin: 0 !important;
  }
}

.TemplateForm {
  display: flex;
  width: 100%;
}
.TemplateForm .BaseForm .main .content {
  position: relative;
}
.TemplateForm .watermark {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%) rotateZ(-70deg);
  font-size: 100px;
  font-weight: 500;
  opacity: 0.05;
  pointer-events: none;
}

.TemplatePage {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}
.TemplatePage .pageWrapper {
  display: flex;
  width: 1200px;
  padding: 0 10px;
}
.TemplatePage > .Loader {
  height: unset;
  min-height: 100%;
}

.DocumentsPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 10px;
  margin: 0 auto;
  height: 100%;
}
.DocumentsPage .pageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 712px;
  padding-top: 30px;
}
.DocumentsPage .pageWrapper .header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}
.DocumentsPage .pageWrapper .header .NavBackButton {
  margin-right: 10px;
}
.DocumentsPage .pageWrapper .header .title {
  flex-shrink: 0;
  font-size: 16px;
  color: #3F4C69;
}
.DocumentsPage .pageWrapper .header .actions {
  display: flex;
  margin-left: auto;
}
.DocumentsPage .pageWrapper .header .actions .Button .Icon {
  margin-right: 6px;
}
.DocumentsPage .pageWrapper .header .actions .Button:not(:first-child) {
  margin-left: 10px;
}
@media (max-width: 650px) {
  .DocumentsPage .pageWrapper .header .actions {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    padding: 0 20px;
    justify-content: space-between;
  }
  .DocumentsPage .pageWrapper .header .actions .Button {
    width: 48%;
    font-size: 13px;
    margin: 0 !important;
  }
}

.TemplateItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px 20px;
  flex-shrink: 0;
  background: #FFF;
  transition: background 0.3s ease-in;
}
.TemplateItem .content {
  display: flex;
  line-height: 1.16;
  min-height: 29px;
}
.TemplateItem .content:hover {
  background: var(--primary-background);
}
.TemplateItem .content .favorite {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 29px;
}
.TemplateItem .content .favorite Doc .Icon {
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.TemplateItem .content .favorite Doc .Icon.processing {
  pointer-events: none;
  opacity: 0.5;
}
.TemplateItem .content .main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0 10px 0 15px;
}
.TemplateItem .content .main .title {
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.TemplateItem .content .main .description {
  margin-top: 2px;
  font-weight: 300;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.TemplateItem .content .main .description_open {
  white-space: pre-wrap;
}
.TemplateItem .content .right {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  height: 29px;
}
.TemplateItem .content .right .amount {
  font-weight: 500;
  font-size: 16px;
  line-height: 15px;
}
.TemplateItem .content .right .amount .decimals {
  font-weight: 400;
  font-size: 13px;
}
.TemplateItem .content .right .extended {
  margin-top: 2px;
  font-weight: 300;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.TemplateItem .extra {
  transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}
.TemplateItem .extra > .extra-content {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 46px);
  margin-left: 46px;
}
.TemplateItem .extra > .extra-content .item {
  display: flex;
  flex-direction: column;
  margin: 15px 15px 0 0;
  font-weight: 300;
  font-size: 11px;
  flex-shrink: 0;
}
.TemplateItem .extra > .extra-content .item:last-child {
  margin-bottom: 15px;
}
.TemplateItem .extra > .extra-content .item .value {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.TemplateItem .template-actions {
  padding: 10px 0 10px 46px;
  margin: -8px -8px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.TemplateItem .template-actions .Button {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  height: unset;
  border-radius: 10px;
  padding: 4px 8px;
  margin: 8px 8px 0 0;
}
.TemplateItem .template-actions .Button .Loader {
  position: static;
  width: 12px;
  height: 12px;
  margin-left: 4px;
}
.TemplateItem .template-actions .Button .Loader .spin {
  width: 12px;
  height: 12px;
}
@media (max-width: 400px) {
  .extra .item {
    min-width: 110px;
  }
}

.TemplatesList {
  display: flex;
  flex-direction: column;
  max-width: 712px;
  min-height: 100%;
  width: 100%;
  flex-shrink: 0;
}
.TemplatesList .transition {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: calc(100vh - 60px - 30px - 32px - 60px);
  padding-bottom: 26px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
}
.TemplatesList .transition > div > .no-records {
  padding: 0 20px;
  font-weight: 300;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 20px;
}
.TemplatesList .transition .validation-error {
  padding: 0 20px;
  font-weight: 300;
  font-size: 12px;
  margin-top: 20px;
}
.TemplatesList .transition .validation-error .errors-message {
  color: #F5425F;
}
.TemplatesList .transition > .Loader {
  position: absolute;
  right: 0;
  top: 0;
}
.TemplatesList .transition .more {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
}
.TemplatesList .transition .more .Button {
  width: 100%;
  max-width: 260px;
}
.TemplatesList .header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 5px;
}
.TemplatesList .header > .Input,
.TemplatesList .header > .Select {
  width: 30%;
  margin-bottom: 10px;
}
.TemplatesList .sub-header {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 20px;
  margin-bottom: 4px;
  font-weight: 300;
  font-size: 12px;
  color: #3f4c69b3;
}
.TemplatesList .sub-header .NavBackButton {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.TemplatesList .templateTabs {
  margin: 4px 0 20px;
}
.TemplatesList .templateTabs .Tabs {
  padding: 0 20px;
  margin-bottom: 0;
}
@media (max-width: 712px) {
  .TemplatesList .transition {
    border-radius: 0;
  }
}
@media (max-width: 700px) {
  .TemplatesList .transition {
    box-sizing: border-box;
    min-height: calc(100vh - 60px - 30px - 32px - 115px);
  }
  .TemplatesList .header > .Input,
  .TemplatesList .header > .Select {
    width: 45%;
  }
  .TemplatesList .header > .Input:nth-child(1),
  .TemplatesList .header > .Select:nth-child(1) {
    width: 100%;
  }
}
@media (max-width: 469px) {
  .TemplatesList .header > .Input,
  .TemplatesList .header > .Select {
    width: calc(50% - 5px);
  }
}

.TemplatesPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 10px;
  margin: 0 auto;
  height: 100%;
}
.TemplatesPage .pageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 712px;
  padding-top: 30px;
}
.TemplatesPage .pageWrapper .header {
  display: flex;
  align-items: center;
  width: 100%;
}
.TemplatesPage .pageWrapper .header .NavBackButton {
  margin-right: 10px;
}
.TemplatesPage .pageWrapper .header .title {
  flex-shrink: 0;
  font-size: 16px;
  color: #3F4C69;
}
.TemplatesPage .pageWrapper .header .newTemplate {
  margin-left: auto;
}
.TemplatesPage > .Loader {
  height: unset;
  min-height: 100%;
}

.DepositFromCardCompletePage .pageWrapper {
  min-height: calc(100vh - 60px);
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.DepositFromCardCompletePage .wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.6);
  background: #FFF;
  border-radius: 10px;
  padding: 40px 60px;
}
.DepositFromCardCompletePage .title {
  font-size: 24px;
  font-weight: 300;
  margin-top: 30px;
  text-align: center;
}
.DepositFromCardCompletePage .message {
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  margin-top: 15px;
}
.DepositFromCardCompletePage .actions {
  width: 240px;
  margin-top: 30px;
}
.DepositFromCardCompletePage .actions .Button {
  width: 100%;
  font-size: 14px;
  padding: 0 15px;
}
.DepositFromCardCompletePage .actions .Button:not(:last-child) {
  margin-bottom: 10px;
}
.DepositFromCardCompletePage > .Loader {
  height: unset;
}
@media (max-width: 649px) {
  .NotificationPage .wrapper {
    padding: 40px;
  }
  .NotificationPage .actions {
    width: 220px;
  }
}

.ErrorIconAnimated {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 6px solid rgba(211, 47, 47, 0.5);
}
.ErrorIconAnimated .icon-circle {
  position: absolute;
  top: -6px;
  left: -6px;
  transform: rotate(90deg);
}
.ErrorIconAnimated .icon-circle circle {
  stroke: #c62828;
  stroke-dasharray: 395.841;
  stroke-dashoffset: 395.841;
}
.ErrorIconAnimated .line-long {
  display: block;
  position: absolute;
  z-index: 10;
  width: 7.5px;
  height: 0;
  left: 56.25px;
  top: -6px;
  border-radius: 4px;
  background-color: #c62828;
}
.ErrorIconAnimated .dot-tip {
  display: block;
  position: absolute;
  z-index: 10;
  width: 0;
  height: 0;
  left: 60px;
  bottom: 23.75px;
  border-radius: 50%;
  background-color: #c62828;
}
.ErrorIconAnimated.animated .icon-circle {
  transform: rotate(-90deg);
}
.ErrorIconAnimated.animated .line-long {
  top: 20px;
  height: 58px;
}
.ErrorIconAnimated.animated .dot-tip {
  width: 7.5px;
  height: 7.5px;
  left: 56.25px;
  bottom: 20px;
}
.ErrorIconAnimated.animating .icon-circle {
  animation: error-rotate-circle 0.75s;
}
.ErrorIconAnimated.animating .icon-circle circle {
  animation: error-circle-arc 0.75s;
}
.ErrorIconAnimated.animating .line-long {
  animation: error-icon-line-long 0.75s;
}
.ErrorIconAnimated.animating .dot-tip {
  animation: error-icon-dot-tip 0.75s;
}
@keyframes error-rotate-circle {
  0% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  70% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes error-circle-arc {
  0% {
    stroke-dashoffset: 395.841;
  }
  50% {
    stroke-dashoffset: 593.7615;
  }
  50% {
    stroke-dashoffset: 197.9205;
  }
  70% {
    stroke-dashoffset: 395.841;
  }
  100% {
    stroke-dashoffset: 395.841;
  }
}
@keyframes error-icon-line-long {
  0% {
    top: -6px;
    height: 0;
  }
  50% {
    top: -6px;
    height: 0;
  }
  70% {
    top: -6px;
    height: 106px;
  }
  84% {
    top: 20px;
    height: 58px;
  }
  100% {
    top: 20px;
    height: 58px;
  }
}
@keyframes error-icon-dot-tip {
  0% {
    width: 0;
    height: 0;
    left: 60px;
    bottom: 23.75px;
  }
  70% {
    width: 0;
    height: 0;
    left: 60px;
    bottom: 23.75px;
  }
  84% {
    width: 12px;
    height: 12px;
    left: 54px;
    bottom: 17.75px;
  }
  100% {
    width: 7.5px;
    height: 7.5px;
    left: 56.25px;
    bottom: 20px;
  }
}