.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.75c23eef.svg);
}
.Icon.greenGradient {
  background: url(/static/media/greenGradient.b0dbfad3.svg);
}
.Icon.violetGradient {
  background: url(/static/media/violetGradient.8db863f9.svg);
}
.Icon.backgroundRed {
  background: url(/static/media/backgroundRed.fab3c64c.png);
}
.Icon.backgroundGreen {
  background: url(/static/media/backgroundGreen.06f67216.png);
}
.Icon.backgroundViolet {
  background: url(/static/media/backgroundViolet.19603585.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,
.Icon.creditCard-FM7KRRTz4m91VPnWq,
.Icon.virtualCard-FM7KRRTz4m91VPnWq {
  width: 80px;
  height: 50px;
}
.Icon.creditCard-W9HLLMx9b86NBfHv {
  background: url(/static/media/creditCard-W9HLLMx9b86NBfHv.a90d3644.jpg);
}
.Icon.virtualCard-W9HLLMx9b86NBfHv {
  background: url(/static/media/virtualCard-W9HLLMx9b86NBfHv.a76c068a.jpg);
}
.Icon.creditCard-MVgLbTyYF67Agh7 {
  background: url(/static/media/creditCard-MVgLbTyYF67Agh7.5eee75b5.png);
}
.Icon.virtualCard-MVgLbTyYF67Agh7 {
  background: url(/static/media/virtualCard-MVgLbTyYF67Agh7.d5970032.png);
}
.Icon.creditCard-J6GA6BTRj9T6yYA {
  background: url(/static/media/creditCard-J6GA6BTRj9T6yYA.3a1c84cb.png);
}
.Icon.virtualCard-J6GA6BTRj9T6yYA {
  background: url(/static/media/virtualCard-J6GA6BTRj9T6yYA.6bf3fb66.png);
}
.Icon.creditCard-A8KX5JdPq7B1tVML {
  background: url(/static/media/creditCard-A8KX5JdPq7B1tVML.6813f628.png);
}
.Icon.virtualCard-A8KX5JdPq7B1tVML {
  background: url(/static/media/virtualCard-A8KX5JdPq7B1tVML.206c83ad.png);
}
.Icon.creditCard-FM7KRRTz4m91VPnWq {
  background: url(/static/media/creditCard-FM7KRRTz4m91VPnWq.0f794dcd.png);
}
.Icon.virtualCard-FM7KRRTz4m91VPnWq {
  background: url(/static/media/virtualCard-FM7KRRTz4m91VPnWq.d31b5126.png);
}
.Icon.dots {
  width: 32px;
  height: 14px;
  background: url(/static/media/dotsWhite.113c2b07.svg);
  background-size: contain !important;
  background-position: center !important;
}
.Icon.dots-alt {
  width: 32px;
  height: 32px;
  background: url(/static/media/dots.dd02cc8c.svg);
  background-size: contain !important;
  background-position: center !important;
}
.Icon.dots-table {
  width: 32px;
  height: 14px;
  background: url(/static/media/dotsTable.43792da0.svg);
  background-size: contain !important;
  background-position: center !important;
}
.Icon.dots-table.layout-FM7KRRTz4m91VPnWq {
  width: 20px !important;
}
.Icon.arrow {
  width: 14px;
  height: 14px;
  background: url(/static/media/arrow.4c08ea13.svg);
}
.Icon.up {
  width: 13px;
  height: 13px;
  background: url(/static/media/up.539a8eb3.svg);
}
.Icon.down {
  width: 13px;
  height: 13px;
  background: url(/static/media/up.539a8eb3.svg);
  transform: rotate(180deg);
}
.Icon.arrowUp {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronUp.0fa78112.svg);
}
.Icon.arrowDown {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronDown.2d0be92b.svg);
}
.Icon.arrowUpWhite {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronUpWhite.d2df612b.svg);
}
.Icon.arrowDownWhite {
  width: 20px;
  height: 20px;
  background: url(/static/media/chevronDownWhite.42916699.svg);
}
.Icon.logout {
  width: 13px;
  height: 13px;
  background: url(/static/media/logout.76bc546b.svg);
}
.Icon.logout.layout-FM7KRRTz4m91VPnWq {
  width: 20px;
  height: 20px;
  background: url(/static/media/logout-v2.f173ba45.svg);
}
.Icon.user {
  width: 18px;
  height: 18px;
  background: url(/static/media/user.2ce127e2.svg);
}
.Icon.user.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/user-v2.ab65a702.svg);
}
.Icon.globe {
  width: 18px;
  height: 18px;
  background: url(/static/media/globe.668c27be.svg);
}
.Icon.mapPin {
  width: 18px;
  height: 18px;
  background: url(/static/media/map-pin.0b421800.svg);
}
.Icon.percent {
  width: 18px;
  height: 18px;
  background: url(/static/media/percent.74f3eec3.svg);
}
.Icon.bank {
  width: 18px;
  height: 18px;
  background: url(/static/media/bank.48f2275a.svg);
}
.Icon.plus {
  width: 18px;
  height: 18px;
  background: url(/static/media/plus.21bb0f96.svg);
}
.Icon.plusWhite {
  width: 18px;
  height: 18px;
  background: url(/static/media/plusWhite.f711f6fc.svg);
}
.Icon.refresh {
  width: 20px;
  height: 20px;
  background: url(/static/media/refresh.3c311d0e.svg);
}
.Icon.lock {
  width: 18px;
  height: 18px;
  background: url(/static/media/lock.c763ea18.svg);
}
.Icon.lock.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/lock-v2.b6863ab6.svg);
}
.Icon.lockWhite {
  width: 18px;
  height: 18px;
  background: url(/static/media/lockWhite.5f88bc98.svg);
}
.Icon.unlock {
  width: 18px;
  height: 18px;
  background: url(/static/media/unlock.382ae4a3.svg);
}
.Icon.unlockWhite {
  width: 18px;
  height: 18px;
  background: url(/static/media/unlockWhite.d54262be.svg);
}
.Icon.link {
  width: 18px;
  height: 18px;
  background: url(/static/media/link.f087c3dc.svg);
}
.Icon.key {
  width: 14px;
  height: 14px;
  background: url(/static/media/key.c2571afe.svg);
}
.Icon.phone {
  width: 16px;
  height: 16px;
  background: url(/static/media/phone.493392d9.svg);
}
.Icon.info-circle {
  width: 18px;
  height: 18px;
  background: url(/static/media/info-circle.5c827269.svg);
}
.Icon.info-circle.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/info-v2.2538f787.svg);
}
.Icon.eye {
  width: 18px;
  height: 18px;
  background: url(/static/media/eye.bf3af47f.svg);
}
.Icon.eyeOff {
  width: 18px;
  height: 18px;
  background: url(/static/media/eye-off.b71a214a.svg);
}
.Icon.mail {
  width: 18px;
  height: 18px;
  background: url(/static/media/mail.95b7e54f.svg);
}
.Icon.mail-alt {
  width: 18px;
  height: 18px;
  background: url(/static/media/mail.95b7e54f.svg);
  background-size: 18px 16px !important;
  background-position-y: bottom;
}
.Icon.credit {
  width: 18px;
  height: 18px;
  background: url(/static/media/credit.a8800125.svg);
}
.Icon.credit.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/credit-v2.77d1a8ba.svg);
}
.Icon.title {
  width: 18px;
  height: 18px;
  background: url(/static/media/edit-3.2e61acd5.svg);
}
.Icon.title.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/pencil-v2.dcddceac.svg) !important;
}
.Icon.file {
  width: 18px;
  height: 18px;
  background: url(/static/media/file.98f700b1.svg);
}
.Icon.file-text {
  width: 18px;
  height: 18px;
  background: url(/static/media/file-text.844e3e96.svg);
}
.Icon.mastercard {
  width: 100%;
  height: 100%;
  background: url(/static/media/mastercard.5bd0502a.png) center;
  background-size: contain !important;
}
.Icon.visa {
  width: 100%;
  height: 100%;
  background: url(/static/media/visa.57780355.png) center;
  background-size: contain !important;
}
.Icon.upload {
  width: 17px;
  height: 17px;
  background: url(/static/media/upload.1b5ac2f8.svg);
}
.Icon.upload.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/upload-v2.dc55013d.svg);
}
.Icon.uploadWhite {
  width: 17px;
  height: 17px;
  background-color: var(--primary-button-text-color);
  mask-image: url(/static/media/uploadWhite.28868170.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url(/static/media/uploadWhite.28868170.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.Icon.uploadWhite.layout-FM7KRRTz4m91VPnWq {
  mask-image: url(/static/media/upload-v2.dc55013d.svg);
  -webkit-mask-image: url(/static/media/upload-v2.dc55013d.svg);
}
.Icon.download {
  width: 17px;
  height: 17px;
  background: url(/static/media/download.5dfea628.svg);
}
.Icon.download.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/download-v2.12260991.svg);
}
.Icon.downloadWhite {
  width: 17px;
  height: 17px;
  background: url(/static/media/downloadWhite.0f711e96.svg);
}
.Icon.downloadWhite.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/downloadWhite-v2.d55d4df4.svg);
}
.Icon.clipboard {
  width: 17px;
  height: 17px;
  background: url(/static/media/clipboard.2e6577d7.svg);
}
.Icon.clipboard.layout-FM7KRRTz4m91VPnWq {
  width: 20px !important;
  height: 20px !important;
  background: url(/static/media/copy.e8c94bb0.svg) !important;
}
.Icon.crosshair {
  width: 17px;
  height: 17px;
  background: url(/static/media/crosshair.8d681e75.svg);
}
.Icon.search {
  width: 17px;
  height: 17px;
  background: url(/static/media/search.8810a4a6.svg);
}
.Icon.search.layout-FM7KRRTz4m91VPnWq {
  width: 20px;
  height: 20px;
  background: url(/static/media/search-v2.c8cfee82.svg);
}
.Icon.calendar {
  width: 18px;
  height: 18px;
  background: url(/static/media/calendar.9b107f69.svg);
}
.Icon.calendar.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/calendar-v2.dcc5bfff.svg);
}
.Icon.calendar2 {
  width: 18px;
  height: 18px;
  background: url(/static/media/calendar2.7e3cc817.svg);
}
.Icon.calendar2.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/calendar-v2.dcc5bfff.svg);
}
.Icon.clock2 {
  width: 18px;
  height: 18px;
  background: url(/static/media/clock2.43722292.svg);
}
.Icon.message {
  width: 18px;
  height: 18px;
  background: url(/static/media/message.7d809ea3.svg);
}
.Icon.message.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/message-v2.09fa9207.svg);
}
.Icon.RUB {
  width: 18px;
  height: 18px;
  background: url(/static/media/RUB.adffc3d6.svg);
  background-size: 11px 16px !important;
  background-position: center center;
}
.Icon.USD {
  width: 18px;
  height: 18px;
  background: url(/static/media/USD.1f19b894.svg);
  background-size: 10px 18px !important;
  background-position: center center;
}
.Icon.EUR {
  width: 18px;
  height: 18px;
  background: url(/static/media/EUR.6d021008.svg);
  background-size: 11px 15px !important;
  background-position: center center;
}
.Icon.travel {
  width: 30px;
  height: 30px;
  background: url(/static/media/travel.3eaafdc4.svg);
}
.Icon.products {
  width: 30px;
  height: 30px;
  background: url(/static/media/products.68753b82.svg);
}
.Icon.clothes {
  width: 30px;
  height: 30px;
  background: url(/static/media/clothes.16a785a3.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.7bbb1edd.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.b49494af.svg);
}
.Icon.itemDocument.approved {
  background: var(--approved-color);
}
.Icon.itemDocument.declined {
  background: var(--declined-color);
}
.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.b49494af.svg);
}
.Icon.statusBlocked {
  width: 24px;
  height: 24px;
  background: url(/static/media/statusBlocked.f49bb831.svg);
}
.Icon.statusNew {
  width: 24px;
  height: 24px;
  background: url(/static/media/statusNew.f65e4e25.svg);
}
.Icon.statusInactive {
  width: 18px;
  height: 24px;
  background: url(/static/media/statusInactive.9ed94051.svg);
}
.Icon.statusSoftBlocked {
  width: 24px;
  height: 24px;
  background: url(/static/media/statusSoftBlocked.43e661a0.svg);
}
.Icon.pencil {
  width: 16px;
  height: 16px;
  background-image: url(/static/media/pencil.5b7de291.svg);
}
.Icon.pencil.layout-FM7KRRTz4m91VPnWq {
  background-image: url(/static/media/pencil-v2.dcddceac.svg) !important;
}
.Icon.save {
  width: 16px;
  height: 16px;
  background: url(/static/media/save.3d6d3ffd.svg);
}
.Icon.saveAlt {
  width: 16px;
  height: 16px;
  background: url(/static/media/saveActive.e33c0e53.svg);
}
.Icon.close {
  width: 24px;
  height: 24px;
  background: url(/static/media/close.d234c4e5.svg);
  transition: background 0.3s ease-in-out;
}
.Icon.close:hover {
  background: url(/static/media/closeActive.28b93dd2.svg);
}
.Icon.close.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/close-v2.1412dc14.svg);
}
.Icon.close.layout-FM7KRRTz4m91VPnWq:hover {
  background: url(/static/media/close-v2.1412dc14.svg);
}
.Icon.navBack {
  width: 24px;
  height: 24px;
  background: url(/static/media/arrowLeft.3547a48f.svg);
  transition: background 0.3s ease-in-out;
}
.Icon.navBack:hover {
  background: url(/static/media/arrowLeftActive.91e861de.svg);
}
.Icon.navBackAlt {
  width: 32px;
  height: 32px;
  background: url(/static/media/arrow.4c08ea13.svg);
  transform: rotate(90deg);
}
.Icon.navLink {
  width: 14px;
  height: 14px;
  background: url(/static/media/arrow.4c08ea13.svg);
  transform: rotate(-90deg);
}
.Icon.chip {
  width: 50px;
  height: 40px;
  background: url(/static/media/chip.a415a9a8.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.9e8a3c8b.svg);
}
.Icon.settings:hover:after {
  background-image: url(/static/media/settingsHover.f168dfb3.svg);
}
.Icon.list:after {
  background-image: url(/static/media/list.33bdb2d4.svg);
  background-size: 18px 18px;
}
.Icon.list:hover:after {
  background-image: url(/static/media/listHover.cd21bc8e.svg);
}
.Icon.lockCvn:after {
  background-image: url(/static/media/lockWhite.5f88bc98.svg);
  background-size: 16px 16px;
}
.Icon.lockCvn:hover:after {
  background-image: url(/static/media/lockBlack.f8bd2272.svg);
}
.Icon.lockCvn.layout-FM7KRRTz4m91VPnWq {
  width: 30px;
  height: 30px;
  box-shadow: unset;
  border: 1px solid transparent;
  background-color: #FFFFFF33 !important;
}
.Icon.lockCvn.layout-FM7KRRTz4m91VPnWq:hover:after {
  background-image: url(/static/media/lockWhite.5f88bc98.svg) !important;
}
.Icon.lockCvn-dark:after {
  background-image: url(/static/media/lockBlack.f8bd2272.svg);
  background-size: 16px 16px;
}
.Icon.notificationWarning {
  height: 34px;
  width: 34px;
  background: url(/static/media/notificationWarning.2274c9a6.svg);
}
.Icon.notificationSuccess {
  height: 34px;
  width: 34px;
  background: url(/static/media/notificationSuccess.9f4119b5.svg);
}
.Icon.notificationError {
  height: 34px;
  width: 34px;
  background: url(/static/media/notificationError.738585bb.svg);
}
.Icon.W9HLLMx9b86NBfHv,
.Icon.W9HLLMx9b86NBfHv-black {
  width: 106px;
  height: 14px;
}
.Icon.W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv.f7772b92.svg);
}
.Icon.W9HLLMx9b86NBfHv-black {
  background: url(/static/media/W9HLLMx9b86NBfHv-black.91c59453.svg);
}
.Icon.MVgLbTyYF67Agh7,
.Icon.MVgLbTyYF67Agh7-black {
  width: 58px;
  height: 16px;
}
.Icon.MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7-white.568dea8c.png);
}
.Icon.MVgLbTyYF67Agh7-black {
  background: url(/static/media/MVgLbTyYF67Agh7-black.bfcab505.png);
}
.Icon.J6GA6BTRj9T6yYA,
.Icon.J6GA6BTRj9T6yYA-black {
  width: 58px;
  height: 24px;
  background: url(/static/media/J6GA6BTRj9T6yYA.595ae5f5.png);
}
.Icon.A8KX5JdPq7B1tVML,
.Icon.A8KX5JdPq7B1tVML-black {
  width: 58px;
  height: 29px;
  background: url(/static/media/A8KX5JdPq7B1tVML.6c6fb73b.png);
}
.Icon.card-symbol {
  width: 48px;
  height: 48px;
}
.Icon.symbol-visa {
  background: url(/static/media/symbol-visa.92531a0b.svg);
}
.Icon.symbol-mastercard {
  background: url(/static/media/symbol-mastercard.ca4258db.svg);
}
.Icon.symbol-visa-alt {
  background: url(/static/media/symbol-visa-alt.bc632ad2.svg);
}
.Icon.symbol-mastercard-alt {
  background: url(/static/media/symbol-mastercard-alt.b4f44620.svg);
}
.Icon.info {
  width: 16px;
  height: 16px;
  background: url(/static/media/info.4805b716.svg);
}
.Icon.info.layout-FM7KRRTz4m91VPnWq {
  width: 20px;
  height: 20px;
  background: url(/static/media/info-v2.2538f787.svg);
}
.Icon.success {
  width: 120px;
  height: 120px;
  background: url(/static/media/success.06aed07b.svg);
}
.Icon.clock {
  width: 120px;
  height: 120px;
  background: url(/static/media/clock.d4ccc46f.svg);
}
.Icon.noAccounts {
  width: 80px;
  height: 80px;
  background: url(/static/media/wallet.de8c2ed4.svg);
  opacity: 0.2;
}
.Icon.noCards {
  width: 80px;
  height: 80px;
  background: url(/static/media/cards.2606ac02.svg);
  opacity: 0.2;
}
.Icon.noTemplates {
  width: 80px;
  height: 80px;
  background: url(/static/media/wishlist.0c9154aa.svg);
  opacity: 0.2;
}
.Icon.emptyTray {
  width: 64px;
  height: 64px;
  background: url(/static/media/empty-tray.568e7b41.svg);
  opacity: 0.2;
}
.Icon.emptyTray.layout-FM7KRRTz4m91VPnWq {
  background: url(/static/media/empty-tray-v2.e7119238.svg);
  opacity: 1;
}
.Icon.authorization {
  width: 16px;
  height: 16px;
  background: url(/static/media/authorization.1c73e295.svg);
}
.Icon.approve {
  width: 16px;
  height: 16px;
  background: url(/static/media/approve.6a36a384.svg);
}
.Icon.star {
  width: 24px;
  height: 24px;
  background: url(/static/media/star.8d612f9b.svg);
}
.Icon.starFilled {
  width: 24px;
  height: 24px;
  background: url(/static/media/starFilled.be160e18.svg);
}
.Icon.times {
  width: 16px;
  height: 16px;
  background: url(/static/media/x.725b0d00.svg);
}
.Icon.grid {
  width: 16px;
  height: 16px;
  background: url(/static/media/grid.d3accb8d.svg);
}
.Icon.alert-triangle {
  width: 16px;
  height: 16px;
  background: url(/static/media/alert-triangle.b37d217b.svg);
}
.Icon.table {
  width: 16px;
  height: 16px;
  background: url(/static/media/menu.9f541f09.svg);
}
.Icon.menu-settings {
  width: 20px;
  height: 20px;
  background: url(/static/media/settings.65b16d0b.svg);
}
.Icon.menu-settings.menu-settings-small {
  width: 18px;
  height: 18px;
}
.Icon.menu-settings.layout-FM7KRRTz4m91VPnWq {
  width: 24px;
  height: 24px;
  background: url(/static/media/setting-v2.084dedda.svg);
}
.Icon.menu-settings.layout-FM7KRRTz4m91VPnWq.menu-settings-small {
  width: 20px;
  height: 20px;
}
.Icon.menu-logout {
  width: 20px;
  height: 20px;
  background: url(/static/media/log-out.9290ff95.svg);
}
.Icon.menu-logout.layout-FM7KRRTz4m91VPnWq {
  width: 24px;
  height: 24px;
  background: url(/static/media/logout-v2.f173ba45.svg);
}
.Icon.cardSlideWhite {
  width: 60px;
  height: 42px;
  background: url(/static/media/card-slide-white.6f31eb2e.png);
}
.Icon.brand-mastercard {
  background-image: url(/static/media/brand-mastercard.b720e3b5.svg);
  background-position: center center;
  background-size: 120% !important;
}
.Icon.brand-visa {
  background-image: url(/static/media/brand-visa.be6c5e72.svg);
  background-position: center center;
  background-size: 170% !important;
}
.Icon.brand-visa-black {
  background-image: url(/static/media/brand-visa-black.bd409ed8.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,
.Icon.green_mastercard_plastic-FM7KRRTz4m91VPnWq,
.Icon.green_mastercard_virtual-FM7KRRTz4m91VPnWq,
.Icon.blue_mastercard_plastic-FM7KRRTz4m91VPnWq,
.Icon.yellow_mastercard_plastic-FM7KRRTz4m91VPnWq,
.Icon.white_mastercard_plastic-FM7KRRTz4m91VPnWq,
.Icon.white_mastercard_virtual-FM7KRRTz4m91VPnWq,
.Icon.blue_visa_virtual-FM7KRRTz4m91VPnWq,
.Icon.black_visa_plastic-FM7KRRTz4m91VPnWq {
  width: 80px;
  height: 50px;
}
.Icon.white_mastercard_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_Debit_white.54ef70c9.png);
}
.Icon.white_mastercard_virtual-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_Debit_white_virtual.a02fa93b.png);
}
.Icon.green_mastercard_plastic-W9HLLMx9b86NBfHv.design_id-13638 {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_Debit.c938adcd.png);
}
.Icon.green_mastercard_plastic-W9HLLMx9b86NBfHv.design_id-15424 {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_prepaid_plastic.b772c466.png);
}
.Icon.green_mastercard_virtual-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_prepaid_virtual.d777b98e.png);
}
.Icon.blue_mastercard_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_VISA_Debit.2ffabc40.png);
}
.Icon.yellow_mastercard_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_Mastercard_virtual.e7952b1f.png);
}
.Icon.blue_visa_virtual-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_VISA_virtual.a1378105.png);
}
.Icon.black_visa_plastic-W9HLLMx9b86NBfHv {
  background: url(/static/media/W9HLLMx9b86NBfHv_VISA_credit.3b4c8797.png);
}
.Icon.white_mastercard_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_Debit_white.04861d38.png);
}
.Icon.white_mastercard_virtual-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_Debit_white_virtual.e01327f5.png);
}
.Icon.green_mastercard_plastic-MVgLbTyYF67Agh7.design_id-13638 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_Debit.343a305b.png);
}
.Icon.green_mastercard_plastic-MVgLbTyYF67Agh7.design_id-15424 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_prepaid_plastic.956526ca.png);
}
.Icon.green_mastercard_virtual-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_prepaid_virtual.550da420.png);
}
.Icon.blue_mastercard_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_VISA_Debit.6370e3fe.png);
}
.Icon.yellow_mastercard_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_Mastercard_virtual.96125052.png);
}
.Icon.blue_visa_virtual-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_VISA_virtual.57cadfd7.png);
}
.Icon.black_visa_plastic-MVgLbTyYF67Agh7 {
  background: url(/static/media/MVgLbTyYF67Agh7_VISA_credit.603e93d5.png);
}
.Icon.green_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.white_mastercard_plastic-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_MASTERCARD.0f5728b4.png);
}
.Icon.yellow_mastercard_plastic-J6GA6BTRj9T6yYA,
.Icon.green_mastercard_virtual-J6GA6BTRj9T6yYA,
.Icon.white_mastercard_virtual-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_MASTERCARD_virtual.7b5d9b00.png);
}
.Icon.black_visa_plastic-J6GA6BTRj9T6yYA,
.Icon.blue_mastercard_plastic-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_VISA.712241b0.png);
}
.Icon.blue_visa_virtual-J6GA6BTRj9T6yYA {
  background: url(/static/media/J6GA6BTRj9T6yYA_VISA_virtual.3aacb7d6.png);
}
.Icon.green_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.white_mastercard_plastic-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_MASTERCARD.31d33ee6.png);
}
.Icon.yellow_mastercard_plastic-A8KX5JdPq7B1tVML,
.Icon.green_mastercard_virtual-A8KX5JdPq7B1tVML,
.Icon.white_mastercard_virtual-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_MASTERCARD_virtual.f7ca6a4e.png);
}
.Icon.black_visa_plastic-A8KX5JdPq7B1tVML,
.Icon.blue_mastercard_plastic-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_VISA.859d3a89.png);
}
.Icon.blue_visa_virtual-A8KX5JdPq7B1tVML {
  background: url(/static/media/A8KX5JdPq7B1tVML_VISA_virtual.7a3056ba.png);
}
.Icon.green_mastercard_plastic-FM7KRRTz4m91VPnWq,
.Icon.white_mastercard_plastic-FM7KRRTz4m91VPnWq {
  background: url(/static/media/FM7KRRTz4m91VPnWq_MASTERCARD.f4eb3432.png);
}
.Icon.yellow_mastercard_plastic-FM7KRRTz4m91VPnWq,
.Icon.green_mastercard_virtual-FM7KRRTz4m91VPnWq,
.Icon.white_mastercard_virtual-FM7KRRTz4m91VPnWq {
  background: url(/static/media/FM7KRRTz4m91VPnWq_MASTERCARD_virtual.767b4131.png);
}
.Icon.black_visa_plastic-FM7KRRTz4m91VPnWq,
.Icon.blue_mastercard_plastic-FM7KRRTz4m91VPnWq {
  background: url(/static/media/FM7KRRTz4m91VPnWq_VISA.c4f1a626.png);
}
.Icon.blue_visa_virtual-FM7KRRTz4m91VPnWq {
  background: url(/static/media/FM7KRRTz4m91VPnWq_VISA_virtual.f5dc99e5.png);
}

.RequestIdMessage .Icon {
  margin: 0 0 0 4px !important;
}
.RequestIdMessage .clickable {
  cursor: pointer;
}

.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);
  }
}

.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: var(--primary-color);
  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), sans-serif;
  -webkit-text-security: none;
}
.Input.error {
  color: var(--error-input);
}
.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: var(--primary-color);
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family), sans-serif;
  font-size: 13px;
}
.Input input:invalid {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.Input input::-moz-placeholder {
  color: var(--tertiary-color);
}
.Input input::placeholder {
  color: var(--tertiary-color);
}
.Input .borderWrapper {
  position: absolute;
  bottom: -1px;
  height: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.Input .borderWrapper .border {
  height: 100%;
  width: 0px;
  background: var(--primary-color);
  transition: all 0.3s ease;
}
.Input .placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 7px;
  left: 25px;
  font-size: 14px;
  color: var(--tertiary-color);
  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: var(--error-text);
  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: var(--error-text);
}

.Loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.Loader .spin {
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--primary-color);
  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), sans-serif;
  cursor: pointer;
}
.Button::-moz-focus-inner {
  border: 0;
}
.Button.primary {
  background: var(--primary-button-color);
  height: 40px;
  border-radius: 5px;
  color: var(--primary-button-text-color);
  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.primary .Loader .spin {
  border-color: var(--primary-button-text-color);
  border-top-color: transparent;
}
.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(--ghost-button-color);
  height: 40px;
  border-radius: 5px;
  color: var(--ghost-button-color);
  font-size: 17px;
  font-weight: 300;
  transition: all 0.3s ease-in-out;
}
.Button.primaryGhost:hover,
.Button.primaryGhost.active {
  background: var(--ghost-button-hover-color);
  color: var(--ghost-button-text-color);
}
.Button.primaryGhost.active {
  pointer-events: none;
}
.Button.dashedGhost {
  border: 1px dashed #bdbdbd99;
  height: 32px;
  border-radius: 10px;
  color: var(--primary-color);
  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: var(--error-input);
}
.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: var(--primary-color);
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family), sans-serif;
  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), sans-serif;
  color: var(--primary-color);
}
.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: var(--primary-color);
  transition: all 0.3s ease;
}
.Select .selectWrapper .placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 7px;
  left: 25px;
  font-size: 14px;
  color: var(--tertiary-color);
  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: var(--error-text);
  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: var(--error-text);
}
.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: var(--primary-color);
}
.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: var(--tertiary-color);
  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: var(--tertiary-color);
  line-height: 16px;
}
.GAuthDialog .sub {
  font-weight: 500;
  color: var(--primary-color);
}
.GAuthDialog .resendCode {
  display: inline-block;
  position: relative;
  color: var(--secondary-color);
  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: var(--primary-color);
}
@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: var(--tertiary-color);
  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: var(--tertiary-color);
  line-height: 16px;
  margin-bottom: 30px;
}
.ChangePasswordDialog .sub {
  font-weight: 500;
  color: var(--primary-color);
}
.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: var(--tertiary-color);
  line-height: 16px;
}
.ChangePinDialog .sub {
  font-weight: 500;
  color: var(--primary-color);
}
.ChangePinDialog .link {
  font-size: 13px;
  color: var(--secondary-color);
  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: var(--tertiary-color);
  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: var(--secondary-color);
  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: var(--error-input);
}
.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: var(--primary-color);
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family), sans-serif;
  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: var(--primary-color);
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-family: var(--font-family), sans-serif;
  padding-bottom: 4px;
}
.SelectAsync .selectWrapper .box input::-moz-placeholder {
  font-size: 12px;
  color: var(--primary-color);
  font-family: var(--font-family), sans-serif;
}
.SelectAsync .selectWrapper .box input::placeholder {
  font-size: 12px;
  color: var(--primary-color);
  font-family: var(--font-family), sans-serif;
}
.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: var(--primary-color);
  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: var(--tertiary-color);
  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: var(--error-text);
  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: var(--error-text);
}
.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: var(--primary-color);
}

.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: var(--tertiary-color);
}
.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 .cardIcon.white_mastercard_plastic.white_mastercard_plastic-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.white_mastercard_virtual.white_mastercard_virtual-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.green_mastercard_plastic.green_mastercard_plastic-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.green_mastercard_virtual.green_mastercard_virtual-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.blue_mastercard_plastic.blue_mastercard_plastic-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.yellow_mastercard_plastic.yellow_mastercard_plastic-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.blue_visa_virtual.blue_visa_virtual-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.black_visa_plastic.black_visa_plastic-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.creditCard.creditCard-FM7KRRTz4m91VPnWq,
.AccountCard .cardIcon.virtualCard.virtualCard-FM7KRRTz4m91VPnWq {
  background: #1C3245;
}
.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: var(--tertiary-color);
  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: var(--error-text);
}
.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: var(--primary-color);
  border-color: var(--primary-color);
}
.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: var(--primary-color);
  color: var(--primary-color);
  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: var(--tertiary-color);
  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: var(--primary-color);
}
.GAuthEnableForm .steps .step .sub2 {
  display: inline-block;
  color: var(--secondary-color);
  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: var(--secondary-color);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.GAuthEnableForm .important {
  color: var(--tertiary-color);
  font-size: 12px;
  line-height: 13px;
  margin-bottom: 20px;
}
.GAuthEnableForm .important .label {
  color: var(--primary-color);
  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: var(--tertiary-color);
  line-height: 16px;
  margin-bottom: 20px;
}
.ActivateTotpDialog .footer {
  font-size: 12px;
  color: var(--tertiary-color);
  line-height: 16px;
  margin: 20px 0 30px;
}
.ActivateTotpDialog .link {
  font-size: 13px;
  color: var(--secondary-color);
  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: var(--tertiary-color);
  line-height: 16px;
}
.Enable3DSDialog .footer {
  font-size: 12px;
  color: var(--tertiary-color);
  line-height: 16px;
  margin-bottom: 30px;
}
.Enable3DSDialog .sub {
  font-weight: 500;
  color: var(--primary-color);
}
.Enable3DSDialog .link {
  font-size: 13px;
  color: var(--secondary-color);
  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: var(--tertiary-color);
  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: var(--primary-color);
  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: var(--primary-color);
  animation: gradient-progress 1.5s linear infinite;
}
.FileInput .error {
  color: var(--error-input);
  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 var(--success-color);
}
.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: var(--success-color);
  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: var(--tertiary-color);
  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: var(--tertiary-color);
  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: var(--tertiary-color);
  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: var(--primary-color);
}
.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: var(--tertiary-color);
  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: var(--secondary-color);
  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: var(--secondary-color);
  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: var(--secondary-color);
  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: var(--secondary-color);
}
.Notification.error {
  border-color: var(--error-notification);
}
.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.ce61b8b6.ttf);
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/static/media/Roboto-Regular.6bede58e.ttf);
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/static/media/Roboto-Medium.0fcd45fb.ttf);
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/static/media/Roboto-Bold.17451a4c.ttf);
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url(/static/media/Manrope-Light.8e695585.ttf);
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url(/static/media/Manrope-Regular.3d92b643.ttf);
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url(/static/media/Manrope-Medium.7466db90.ttf);
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url(/static/media/Manrope-Bold.8ff9467e.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: var(--primary-color);
  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), sans-serif;
}
html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: var(--font-family), sans-serif;
}
.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: var(--primary-color);
  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: var(--primary-color-light);
}
.ClientSelectOption .UserAvatar {
  flex-shrink: 0;
  margin-right: 10px;
}
.ClientSelectOption .title {
  line-height: 1.2;
}
.ClientSelectOption.clickable:hover {
  background: var(--primary-background);
  color: var(--primary-color);
}
.ClientSelectOption.active {
  color: var(--primary-color);
}
.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: var(--primary-color-light) !important;
}

.ClientSelect .active-client {
  display: flex;
  align-items: center;
}
.ClientSelect .active-client.clickable {
  cursor: pointer;
}
.ClientSelect .active-client.clickable .title {
  color: var(--secondary-color);
}
.ClientSelect .active-client.clickable:hover .title {
  color: var(--primary-color);
}
.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: var(--primary-color);
  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: var(--secondary-color);
}
.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: var(--primary-color);
}
.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: var(--primary-color);
  cursor: pointer;
  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: var(--primary-color);
}
@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;
  }
}

.Messages {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 1;
}
.Message {
  width: 100%;
  z-index: 2;
  margin-bottom: 2px;
}
.Message .message {
  background: rgba(63, 76, 105, 0.75);
  color: #FFF;
  font-size: 14px;
}
.Message .message .wrapper {
  width: 1180px;
  min-height: 30px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px 25px 5px 0;
}
.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;
  white-space: nowrap;
}
.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: 50%;
  right: 0;
  transform: translate(0, -50%);
}
.Message .Icon.times:hover {
  opacity: 0.8;
}
@media (max-width: 1200px) {
  .Message .message .wrapper {
    padding: 10px 25px 10px 0;
    width: unset;
    height: unset;
    display: block;
  }
  .Message .text {
    margin-bottom: 10px;
  }
  .Message .actions {
    margin-left: 0;
  }
  .Message .Icon.times {
    position: absolute;
    top: 7px;
    transform: translate(0, 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: var(--tertiary-color);
}
.LoginPage .form .forgot > span {
  color: var(--secondary-color);
  font-weight: 500;
  cursor: pointer;
}
.LoginPage .form .errorBlock {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-size: 11.2px;
  color: var(--error-text);
}
.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: var(--primary-color);
}
.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: var(--primary-color);
}
.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.e33c0e53.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: var(--primary-color);
  font-weight: 500;
  font-family: var(--font-family), sans-serif;
  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: var(--error-text);
}
.Account .content .center .name:hover .pencil {
  background: url(/static/media/pencilActive.b1f2ca4d.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.6114da39.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.2e6577d7.svg);
  background-color: rgba(99, 119, 164, 0.2);
}
.Account .content .center .pan .clipboard.layout-FM7KRRTz4m91VPnWq {
  top: 2px;
  background-repeat: no-repeat !important;
}
.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: var(--primary-color);
}
.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: var(--primary-color);
  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: var(--secondary-color);
}
.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.2e466907.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.d54262be.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: var(--primary-color);
}
.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: var(--primary-color);
  margin-right: auto;
  gap: 6px;
  display: flex;
  align-items: center;
}
.CollapsibleGroup .group-header .title .pointer {
  cursor: pointer;
}
.CollapsibleGroup .group-header .title .pointer:hover {
  color: var(--tertiary-color);
}
.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.f2c3cae0.svg);
  }
  .CollapsibleGroup .group-header .select .arrow {
    background: url(/static/media/arrowWhite.3ffb5737.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.75c23eef.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(--templates-background, 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: var(--primary-color);
  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: var(--primary-color);
  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: var(--primary-color-light);
  width: 68px;
  flex-shrink: 0;
}
.Template .content .rows .row .value {
  color: var(--secondary-color);
  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.8db863f9.svg);
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
  .Templates .group-header:not(.showGradient) {
    background-color: var(--templates-background, 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.FM7KRRTz4m91VPnWq {
  background: #1C3245;
}
.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.white_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardIcon.white_mastercard_virtual.FM7KRRTz4m91VPnWq,
.CardIcon.green_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardIcon.green_mastercard_virtual.FM7KRRTz4m91VPnWq,
.CardIcon.blue_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardIcon.yellow_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardIcon.blue_visa_virtual.FM7KRRTz4m91VPnWq,
.CardIcon.black_visa_plastic.FM7KRRTz4m91VPnWq {
  background: #1C3245;
}
.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: var(--tertiary-color);
}
.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 var(--primary-color);
  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: var(--table-hover-color);
}
.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: var(--account-symbol-color);
  font-weight: 700;
}
.AccountIcon .base.layout-FM7KRRTz4m91VPnWq {
  font-size: 14px;
  font-weight: 600;
}
.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-icon-color);
  -webkit-mask-image: url(/static/media/boxRed.1816dcf7.svg);
  mask-image: url(/static/media/boxRed.1816dcf7.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-icon-color);
  -webkit-mask-image: url(/static/media/boxRed.1816dcf7.svg);
  mask-image: url(/static/media/boxRed.1816dcf7.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.b1f2ca4d.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: var(--primary-color);
  font-family: var(--font-family), sans-serif;
  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: var(--error-text);
}
.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.e33c0e53.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.75c23eef.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: var(--tertiary-color);
}
.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.6114da39.svg);
}
.AccountsTable .BaseTable .iban .icon:hover {
  background: rgba(99, 119, 164, 0.2);
}
.AccountsTable .BaseTable .iban .icon:hover .Icon {
  background: url(/static/media/clipboard.2e6577d7.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: var(--primary-color);
}
.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 .base.layout-FM7KRRTz4m91VPnWq {
  font-size: 14px;
  font-weight: 600;
}
.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.15792c5e.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.8db863f9.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.TemplatesTable .header:not(.showGradient) {
  background-color: var(--templates-background, var(--account-background-2));
}
.TemplatesTable .header .title {
  font-size: 16px;
  color: #FFF;
}
.TemplatesTable .BaseTable tr.body-row:hover td {
  background-color: var(--template-table-hover-color);
}
.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: var(--secondary-color);
  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: var(--primary-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.AccountSlide .obverse .DropDown .menu .title {
  font-weight: 600;
  color: var(--secondary-color);
  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: var(--secondary-color);
}
.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.5f88bc98.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.a4d69313.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.f6257727.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.a4d69313.svg);
  background-color: #ffffff;
}
.AccountSlide .card .cardTitle .pencil.layout-FM7KRRTz4m91VPnWq {
  bottom: -6px;
  right: -36px;
  width: 30px;
  height: 30px;
  box-shadow: unset;
  border: 1px solid transparent;
  background-color: #FFFFFF33 !important;
  background-image: url(/static/media/pencilWhite-v2.98478262.svg) !important;
  background-size: 22px 22px !important;
  background-position: center center !important;
}
.AccountSlide .card .cardTitle .save {
  position: absolute;
  bottom: -3px;
  right: -28px;
  height: 24px;
  width: 24px;
  background-image: url(/static/media/saveWhite.47d6f795.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.45d945fa.svg);
  background-color: #ffffff;
}
.AccountSlide .card .cardTitle .save.layout-FM7KRRTz4m91VPnWq {
  box-shadow: unset;
  border: 1px solid transparent;
  background-color: #FFFFFF33 !important;
}
.AccountSlide .card .cardTitle .save.layout-FM7KRRTz4m91VPnWq:hover {
  background-image: url(/static/media/saveWhite.47d6f795.svg);
}
.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), sans-serif;
  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: var(--error-text);
}
.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 .FM7KRRTz4m91VPnWq {
  background: #1C3245;
}
.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_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_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 .slide-container.white_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardSlide .slide-container.white_mastercard_virtual.FM7KRRTz4m91VPnWq,
.CardSlide .slide-container.green_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardSlide .slide-container.green_mastercard_virtual.FM7KRRTz4m91VPnWq,
.CardSlide .slide-container.blue_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardSlide .slide-container.yellow_mastercard_plastic.FM7KRRTz4m91VPnWq,
.CardSlide .slide-container.blue_visa_virtual.FM7KRRTz4m91VPnWq,
.CardSlide .slide-container.black_visa_plastic.FM7KRRTz4m91VPnWq {
  background: #1C3245;
}
.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.73aa4b36.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.da12c544.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: var(--secondary-color);
  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: var(--primary-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.CardSlide .obverse .DropDown .menu .title {
  font-weight: 600;
  color: var(--secondary-color);
  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: var(--secondary-color);
}
.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.5f88bc98.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.new::after {
  background-image: url(/static/media/statusNew.f65e4e25.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.inactive::after {
  background-image: url(/static/media/statusInactive.9ed94051.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.blocked::after {
  background-image: url(/static/media/statusBlocked.f49bb831.svg);
}
.CardSlide .obverse .decorationsWrapper .soft-blocked.soft_blocked::after {
  background-image: url(/static/media/statusSoftBlocked.43e661a0.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.a4d69313.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.f6257727.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.a4d69313.svg);
  border-color: #000;
}
.CardSlide .card .cardTitle .pencil-dark.layout-FM7KRRTz4m91VPnWq {
  background-image: url(/static/media/pencil-v2.dcddceac.svg) !important;
}
.CardSlide .card .cardTitle .pencil.layout-FM7KRRTz4m91VPnWq {
  bottom: -6px;
  right: -36px;
  width: 30px;
  height: 30px;
  box-shadow: unset;
  border: 1px solid transparent;
  background-color: #FFFFFF33 !important;
  background-image: url(/static/media/pencilWhite-v2.98478262.svg) !important;
  background-size: 22px 22px !important;
  background-position: center center !important;
}
.CardSlide .card .cardTitle .save {
  position: absolute;
  bottom: -3px;
  right: -28px;
  height: 24px;
  width: 24px;
  background-image: url(/static/media/saveWhite.47d6f795.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.45d945fa.svg);
  background-color: #FFF;
}
.CardSlide .card .cardTitle .save-dark {
  background-image: url(/static/media/saveBlack.45d945fa.svg);
  border-color: #000;
}
.CardSlide .card .cardTitle .save-dark:hover {
  background-image: url(/static/media/saveWhite.47d6f795.svg);
  background-color: #000;
}
.CardSlide .card .cardTitle .save.layout-FM7KRRTz4m91VPnWq {
  box-shadow: unset;
  border: 1px solid transparent;
  background-color: #FFFFFF33 !important;
}
.CardSlide .card .cardTitle .save.layout-FM7KRRTz4m91VPnWq:hover {
  background-image: url(/static/media/saveWhite.47d6f795.svg);
}
.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), sans-serif;
  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: var(--error-text);
}
.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.f8bd2272.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.f6257727.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.5f88bc98.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: var(--primary-button-text-color);
  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: var(--primary-button-text-color);
  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: var(--switcher-color-active);
}
.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: var(--error-text);
}
.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: var(--switcher-color);
  transition: background-color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  cursor: pointer;
}
.Switcher.checked {
  background-color: var(--switcher-color-active);
}
.Switcher.disabled {
  background-color: var(--switcher-color);
  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 var(--switcher-color-active);
}
.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: var(--primary-color-light);
}
.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 .value .clipboard.layout-FM7KRRTz4m91VPnWq {
  left: -24px;
  top: -4px;
}
.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: var(--secondary-color);
  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: var(--secondary-color);
  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: var(--primary-color);
  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: var(--primary-button-text-color);
  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: var(--secondary-color);
  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: var(--secondary-color);
  background: var(--secondary-color);
  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: var(--primary-color);
}
.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: var(--secondary-color);
}
.Tabs .tabs-bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--secondary-color);
  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: var(--error-text);
}
.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: var(--primary-color-light);
}
.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: var(--error-text);
}
.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: var(--primary-button-text-color);
  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: var(--primary-button-text-color);
  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: var(--primary-color-light);
}
.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;
}
.Statement .info-block .row .value .clipboard.layout-FM7KRRTz4m91VPnWq {
  left: -24px;
  top: -4px;
}
@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: var(--primary-color);
}
.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: var(--primary-color);
}
.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.dedd44b9.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: var(--success-color);
  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.b1f2ca4d.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.b1f2ca4d.svg);
  background-color: rgba(99, 119, 164, 0.2);
}
.Profile .content .inputs .password {
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  color: var(--secondary-color);
  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;
}
.Profile .content .inputs .redirectLink {
  margin-top: 18px;
  font-size: 12.5px;
  padding: 0;
  color: var(--secondary-color);
  font-weight: 500;
  cursor: pointer;
  gap: 4px;
  display: flex;
  align-items: center;
}
.Profile .content .inputs .redirectLink span {
  max-width: calc(100% - 24px);
}

.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: var(--primary-color);
}
.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: var(--success-color);
}
.GAuth .header .actions .status.disabled {
  color: var(--error-input);
}
.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: var(--tertiary-color);
  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: var(--primary-color);
}
.Requisites .header .copy-btn {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--secondary-color);
  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: var(--tertiary-color);
  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;

        }*/
  /*.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: var(--tertiary-color);
}
.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: var(--error-input);
}
.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: var(--primary-color);
  border: none;
  outline: none;
  transition: color 0.25s linear;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-family), sans-serif;
  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: var(--primary-color);
  transition: all 0.3s ease;
}
.TextArea .placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  top: 23px;
  left: 25px;
  font-size: 14px;
  color: var(--tertiary-color);
  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: var(--error-text);
}
.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: var(--error-text);
}

.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: var(--primary-color);
  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: var(--primary-color);
}
.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: var(--error-text);
}
.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: var(--primary-color);
  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: var(--primary-button-text-color);
  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: var(--error-text);
}
.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: var(--primary-color-light);
}
.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: var(--primary-color);
}
.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: var(--primary-color);
}
.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: var(--error-text);
}
.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: var(--primary-color-light);
}
.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: var(--primary-color);
}
.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;
  }
}