:root{
  --si-blue: #3399CC;
  --si-blue-darker: #2a84b1;
  --si-blue-accent: #2883e0;
  --si-gray-1: #f9f9f9;
  --si-gray-2: #f7f7f7;
  --si-gray-3: #eaeaea;
  --si-gray-4: #e6e9ef;
  --si-text: #111;
  --si-border: #9b9b9b;
  --si-shadow: 0 8px 24px rgba(0,0,0,.06);
  --btn-grad: linear-gradient(to bottom, var(--si-gray-1) 0%, var(--si-gray-2) 40%, var(--si-gray-3) 100%);
}
* {
    font-family: 'Open Sans', Arial, sans-serif;
}
/* унифицированные состояния кнопок внутри fieldset/form */
form fieldset button,
fieldset button,
fieldset div.payment-actions button{
  background: var(--btn-grad);
  border: 1px solid var(--si-border);
  color: var(--si-text);
  text-shadow: 0 1px 2px #fff;
}
form fieldset button:hover,
form fieldset button:target,
fieldset button:hover,
fieldset button:target,
fieldset div.payment-actions button:hover,
fieldset div.payment-actions button:target{
  background: var(--si-blue);
  border-color: var(--si-blue);
  color:#fff;
  text-shadow: none;
}

section.payments div.wrapper h1,
section.payments div.wrapper h2.paymentMethodHeader,
section.payments div.wrapper h2.invoiceHeader,
section.payments div.wrapper h2.bankAccountHeader,
section.payments div.wrapper h2.billingHeader,
section.payments div.wrapper h2.paymentCompleteHeader,
section.payments div.wrapper h2.generateQRHeader,
section.payments div.wrapper h2.paymentByQR {
    margin: 0;
    padding-top: 30px;    
    font-size: 28px;
    font-weight: 300;
    text-align: center;
}
div.progressBar {
    position: relative;
    z-index: 1;
    float: left;
    display: block;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border: none;
    border-radius: 18px;
}
ul.progressBar {
    float: left;
    display: block;
    width: 100%;
    height: 25px;
    min-height: 25px;
    margin: 40px 0 20px 0;
    padding: 0;
    border-top: 3px solid #d4d4d4;
    list-style: none;
    vertical-align: top;
}
ul.progressBar li {
    display: inline-block;
    width: 25%;
    margin-right: -5px;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}
ul.progressBar li span:first-letter {
    text-transform: uppercase;
}
ul.progressBar li.active {
    color: #0078d7;
    cursor: default;
}
ul.progressBar li span.stepHeader {
    position: relative;
    top: -5px;
    display: block;
    margin: 2px 0 10px 0;
    font-size: 15px;
    font-weight: 300;
    font-style: normal;
}
ul.progressBar li.active.HalfStep:before {
    content: "";
    position: relative;
    top: 30px;
    left: 0;
    display: block;
    width: 50% !important;
    height: 5px;
    margin-top: -5px;
    padding-bottom: 0;
    background-color: #0984e3 !important;
}
ul.progressBar li.HalfStep:before, 
ul.progressBar li.productsStep:before, 
ul.progressBar li.methodStep:before, 
ul.progressBar li.billingStep:before, 
ul.progressBar li.paymentComplete:before,
ul.progressBar li.paymentCompleteStep:before {
    content: " ";
    position: relative;
    top: -8px;
    left: calc(50% - 7.5px);
    z-index: 3;
    display: block;
    width: 15px !important;
    height: 15px;
    background: url('../img/svg/dots.svg') no-repeat 0 0 / 15px 30px;
}
form fieldset {
    position: relative;
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 0 auto;
    padding: 20px;
    border: none;
    border-radius: 4px;
    vertical-align: top;
    text-align: center;
}
.form {
    position: relative;
    z-index: 1;
}
.hintBox {
    position: relative;
    z-index: 10;
    display: block;
    text-align: left;
    vertical-align: top;
}
div#agreement div.hintBox {
    margin: 0 0 0 20px;
}
div#qrStep.hintBox,
div#generatedQRstep.hintBox,
div#bitcoinHintBox.hintBox,
div#ethHintBox.hintBox {
    text-align: center;
}
form fieldset .buttons {
    position: relative;
    bottom: 0;
    display: block;
    width: 100%;
    max-width: 582px;
    margin: 30px auto 0;
}
form fieldset.confirmation .buttons {
    margin-top: 20px;
}
fieldset {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(100% - 10px);
    min-height: 180px;
    padding: 30px 0;
    border: none;
    text-align: center;
    vertical-align: top;
}
form fieldset h3,
form fieldset h2.invoice,
.confirmation h4 {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 21px;
    font-weight: 300 !important;
    color: #161616;
    text-align: center;
}
form fieldset h3 {
    margin-bottom: 20px;
}
.confirmation h4 {
    padding-bottom: 10px;
}
fieldset#chosenProducts.stepI .field label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-align: left;
}
fieldset#chosenProducts.stepI .field label.choose {
    font-weight: 400;
}
fieldset#chosenProductsStep.stepI div.row {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;    
}
fieldset#chosenProductsStep.stepI div.row div.field {
    display: inline-block;
    max-width: 360px;
    margin: 0 auto;
    padding: 0;    
}
fieldset#chosenProductsStep.stepI div.row div.field label.choose {
    display: inline-block;
    width: auto;
    padding-bottom: 10px;
    text-align: left;
}
select#chosenProductsSelect.products, 
select#cost {
    display: block;
    width: 360px;
    max-width: 360px;
    border-radius: 4px;
    height: 42px;
    margin: 0 0 5px 0;
    padding: 0 0 0 10px;
    font-size: 15px;
    font-weight: 300;
}
select#chosenProductsSelect.products option,
select#cost option {
    height: 42px;
    padding: 10px 0 0 5px;
    font-weight: 300;
}
fieldset#chosenProductsStep.stepI div#agreement input#iAgreeRules {
    float: left;
    width: 14px;
    height: 14px;
    margin: 5px 5px 0 0;
    border: 1px solid #444;
}
fieldset#chosenProductsStep.stepI div#agreement label {
    display: inline-block;
    float: left;
    width: calc(100% - 20px);
    height: auto;
    padding-top: 2px;
}
fieldset#chosenProductsStep.stepI div#agreement label,
fieldset#chosenProductsStep.stepI div#agreement label a {
    display: inline-block;
    padding-top: 1px;
    font-size: 13px;
    line-height: 1.54em;
    font-weight: 300;
    text-align: left;    
}
fieldset#chosenProductsStep.stepI div#agreement label span {
    display: inline-block;
    width: calc(100% - 20px);
    padding-top: 2px;
    font-size: 14px;
    letter-spacing: -0.02em;
}
fieldset#chosenProductsStep.stepI div#agreement {
    position: relative;
    display: block;
    max-width: 360px;
    min-height: 40px;
    height: auto;
    margin: 20px auto;
    line-height: 1.5em;
    text-align: left;
}
fieldset#chosenProductsStep.stepI button.continue, 
fieldset button.continue.stepInvoicePreview, 
fieldset button.continue.bankDataStep, 
fieldset button.continue.invoicePreviewStep, 
fieldset button#invoicePreviewStep, 
fieldset button#downloadInvoiceBtn, 
fieldset button.confirmPayment, 
fieldset button.backToInvoice,
fieldset button.continue.generateQR,
fieldset div.payment-actions button,
fieldset button#payMethods.back {
    position: relative;
    z-index: 0;
    display: block;
    width: 150px;
    height: 40px;
    max-height: 40px;
    margin: 30px auto;
    padding: 0 10px;
    line-height: 22px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}
fieldset div.payment-actions button {
    display: inline-block;
}
section fieldset div.payment-actions button#copyIbanBtn {
    width: 170px !important;
    margin-right: 20px;
}
section fieldset div.payment-actions button#copyIbanBtn, 
section fieldset div.payment-actions button#confirmPayment {
    width: auto;
    max-width: max-content;
    padding-left: 15px;
    padding-right: 15px;
}
fieldset div.payment-actions button#confirmPayment {
    width: 170px;
    margin: 0;
    border: 1px solid #1a1a1a;
}
fieldset button.generateQR {
    width: 200px;
    max-width: 200px;
}
fieldset#chosenProductsStep.stepI button.continue:hover,
fieldset#chosenProductsStep.stepI button.continue:target,
fieldset button.continue.stepInvoicePreview:hover,
fieldset button.continue.stepInvoicePreview:target,
fieldset button.continue.bankDataStep:hover,
fieldset button.continue.bankDataStep:target,
fieldset button#invoicePreviewStep:hover,
fieldset button#invoicePreviewStep:target,
fieldset button#downloadInvoiceBtn:hover,
fieldset button#downloadInvoiceBtn:target,
fieldset button.confirmPayment:hover,
fieldset button.confirmPayment:target,
fieldset button.backToInvoice:hover,
fieldset button.backToInvoice:target,
fieldset button.continue.generateQR:hover,
fieldset button.continue.generateQR:target,
fieldset div.payment-actions button:hover,
fieldset div.payment-actions button:target,
fieldset div.payment-actions button#copyIbanBtn:hover,
fieldset div.payment-actions button#copyIbanBtn:target,
fieldset div.payment-actions button#confirmPayment:hover,
fieldset div.payment-actions button#confirmPayment:target,
div.qrPaymentData button#qrText:hover,
div.qrPaymentData button#qrText:target,
button.goMainPage:hover,
button.goMainPage:target,
.confirmation button.backToInvoice:hover,
.confirmation button.backToInvoice:target,
.confirmation button#sendReceiptBtn.confirmPayment:hover,
.confirmation button#sendReceiptBtn.confirmPayment:target,
fieldset .form.bitcoin ul li button:hover,
fieldset .form.bitcoin ul li button:target {
    background: #3399CC;
    border: 1px solid #3399CC;
    color: #fff;
    text-shadow: none;
}
ul.progressBar li.productsStep.complete:before,
ul.progressBar li.methodStep.complete:before,
ul.progressBar li.billingStep.complete:before {
    content:"";
    display:block;
    width:13px !important;
    height:13px !important;
    background:none;
    background-color: var(--si-blue-accent);
    border-radius:100px;
    border:1px solid #f7f7f7;
}
ul.progressBar li.productsStep.complete span.stepHeader,
ul.progressBar li.methodStep.complete span.stepHeader,
ul.progressBar li.billingStep.complete span.stepHeader,
ul.progressBar li.complete i {
    font-weight: 400;
    color: #306eae;
}
.form.bitcoin {
    display: block;
    padding-top: 10px;
}
form fieldset h2 {
    margin: 0;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 300;
}
fieldset#method.stepII ul,
fieldset .form.bitcoin ul {
    list-style: none;
    display: block;
    width: 340px;
    height: auto;
    margin: 0 auto;
    padding: 0;
}
fieldset#method.stepII ul li,
fieldset .form.bitcoin ul li {
    display: block;
    width: 100%;
    height: 54px;
    margin-bottom: 10px;
}
fieldset#method.stepII ul li button,
fieldset .form.bitcoin ul li button{
  display:block;
  width:100%;
  height:54px;
  padding-left:10px;
  border:1px solid #777;
  border-top:1px solid #b7b7b7;
  border-radius:6px;
  text-shadow:0 1px 2px #fff;
  text-align:left;
  background: linear-gradient(to bottom, var(--si-gray-1) 0%, var(--si-gray-2) 40%, #f1f1f1 100%);
}
fieldset .form.bitcoin ul li button {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
}
fieldset .form.bitcoin ul li button i {
    float: left;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border: none;
}
fieldset .form.bitcoin ul li button.telegram i {
    background-image: url('../img/svg/telegram_sprite.svg');
    background-size: 36px auto;
    background-position: -6px -42px;
    background-repeat: no-repeat;
}
fieldset .form.bitcoin ul li button.telegram:hover i, 
fieldset .form.bitcoin ul li button.telegram:target i {
    background-position: -6px -6px;
}
fieldset .form.bitcoin ul li button.whatsApp i {
    background-image: url('../img/svg/whatsapp-sprite.svg');
    background-size: 31px auto;
    background-position: -3px -35px;
    background-repeat: no-repeat;
}
fieldset .form.bitcoin ul li button.whatsApp:hover i, 
fieldset .form.bitcoin ul li button.whatsApp:target i {
    background-position: -3px -1px;
}
fieldset .form.bitcoin ul li button.emailSupport i {
    background-image: url('../img/svg/comment_sprite.svg');
    background-size: 24px auto;
    background-position: 0 1px;
    background-repeat: no-repeat;
}
fieldset .form.bitcoin ul li button.emailSupport:hover i, 
fieldset .form.bitcoin ul li button.emailSupport:target i {
    background-position: 0 -23px;
}
form fieldset.stepII button span {
    display: inline-block;
    padding-top: 5px;
}
fieldset .form.bitcoin ul li button span {
    display: inline-block;
    margin-top: 2px;
    vertical-align: top;
    letter-spacing: 0.02em;
}
fieldset#method.stepII ul li button:hover span,
fieldset#method.stepII ul li button:target span,
fieldset .form.bitcoin ul li button:hover span,
fieldset .form.bitcoin ul li button:target span {
    color: #fff;
}
fieldset#method.stepII ul li button i{
  display:inline-block;width:32px;height:32px;margin-right:10px;border:none;vertical-align:top;
  background-image:url('../img/svg/payment-methods-sprite.svg'); background-size:64px 64px; background-repeat:no-repeat;
}
fieldset#method.stepII ul li button.bitcoinStep i {
  background-image:url('../img/bitcoin-sprite.png'); background-size:64px 64px; background-repeat:no-repeat; background-position:1px 0;
}
fieldset#method.stepII ul li button.ethStep i {
  background-image:url('../img/bitcoin-sprite.png'); background-size:64px 64px; background-repeat:no-repeat; background-position:1px -32px;
}
fieldset#method.stepII ul li button.invoiceStep i{ background-position:1px 0; }
fieldset#method.stepII ul li button.qrStep i{      background-position:1px -32px; }

fieldset#method.stepII ul li button:hover,
fieldset#method.stepII ul li button:target{
  background: var(--si-blue); border:1px solid var(--si-blue); text-shadow:none; color:#fff;
}
fieldset#method.stepII ul li button.invoiceStep:hover i,
fieldset#method.stepII ul li button.invoiceStep.selected i{ background-position:-32px 0; }
fieldset#method.stepII ul li button.qrStep:hover i,
fieldset#method.stepII ul li button.qrStep.selected i{ background-position:-32px -32px; }

fieldset#method.stepII ul li button.bitcoinStep:hover i,
fieldset#method.stepII ul li button.bitcoinStep.selected i{ background-position:-32px 0; } 
fieldset#method.stepII ul li button.ethStep:hover i,
fieldset#method.stepII ul li button.ethStep.selected i{ background-position:-32px -32px; }

fieldset#method.stepII ul li button.invoiceStep.selected,
fieldset#method.stepII ul li button.qrStep.selected{
  background: var(--si-blue-darker);
  border-color: var(--si-blue-darker);
  color:#fff;
}
.secured {
    display: block;
    width: 420px;    
    margin: 80px auto 0 auto;
    font-size: 13px;
    font-weight: 300;
    color: #6c6c6c;
}
.personalData {
    min-height: 255px;    
}
.form.personalData.qr {
    min-height: auto;
    height: auto;
    max-height: fit-content;
    padding-top: 15px;    
}
i.hint {
    position: relative;
    top: 12px;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    width: 16px;
    height: 16px;
    border: none;
    background-color: transparent;
    background-image: url('../img/svg/hint-info-sprite.svg');
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: 0 -1px;
    cursor: pointer;
    opacity: .65;
    cursor: help;    
}
div.hintBox i.hint {
    --hint-arrow-offset: 8px;
}
i.hint:hover,
i.hint:target {
    background-color: transparent;
    background-image: url('../img/svg/hint-info-sprite.svg');
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: 0 -17px;
    cursor: pointer;
    opacity: 1;
}
.hint.hidden {
    display: none !important;
}
div.hint.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.button.switcher[aria-pressed="true"] .switch-text::after { 
    content: " (on)"; 
}
div.hint,
div.hint.is-open {
    position: absolute;
    left: 0;
    right: auto;
    top: calc(100% - 2px);
    z-index: 3000;
    width: 250px;
    padding: 10px 12px;
    background: rgba(220, 236, 220, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(208 228 208);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
}
div#countryHint.hint {
    width: 160px;
    max-width: 160px;
}
div#bankCurrencyHint.hint:before {
    left: 90%;
}
div#bankCurrencyHint.hint {
    position: absolute;
    z-index: 100;
    left: calc(100% - 275px);
}
div.hint b,
div.hint.is-open b {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;    
}
i.hint:hover,
i.hint:target,
i.hint:focus{ 
	opacity: 1; 
	outline: none; 
    background-position: 0 -17px;	
}
div.hint.visible,
div.hint[aria-hidden="false"] { 
    display:block; 
}
div.hint.is-open::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 20px; 
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent rgba(220, 236, 220, 0.7) transparent;
  filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.05));
}
div.hint.is-open::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 20px;
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  opacity: 0.3;
}
.form.qrCode .row,
.form.personalData .row,
.form.capacity .row {
    display: block;
    width: 100%;
    height: 75px;
    margin-bottom: 20px;
    vertical-align: top;
}
.form .row .field,
.form .row .fieldBox {
    position: relative;
    z-index: 1;    
    display: inline-block;
    width: 280px;
    max-width: 280px;
    margin-bottom: 10px;
    text-align: left;
    vertical-align: top;
}
.form .row .field.firstName,
.form .row .field.lasstName,
.form .row .field.country,
.form .row .field.email,
.form .row .field.clientBankData,
.form .row .fieldBox,
.form .row .field.fullName {
    margin-right: 30px;
}
.form .row .field label {
    position: relative;
    z-index: 1;    
    display: inline-block;
    width: auto;
    height: 16px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 300;
    text-align: left;
    letter-spacing: -0.02em;
}
fieldset .form.personalData.qr .field .fullName,
fieldset .form.personalData.qr .field .clientEmail,
fieldset .form.personalData.qr .field label {
    text-align: left !important;
}
.personalData .field input,
.personalData .field select,
form fieldset input.bankTitle, 
form fieldset input.swift, 
form fieldset input.country, 
form fieldset select.bankCurrency, 
form fieldset select#countrySelect,
form fieldset input.country, 
form fieldset input.clientBankAccount,
form fieldset input.client_fullname,
form fieldset input.client_email {
    position: relative;
    z-index: 0;    
    display: block;
    width: 100%;
    max-width: 260px;
    height: 42px;
    padding: 0 10px;
    background: #fff;    
    border: 1px solid #8e8e8e;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 300;
    color: #000;
}
.form .row .field.country {
    position: relative;
    z-index: 10;
    display: inline-block;
    width: 175px;
    margin-right: 15px;
}
.form .row .field.bankCurrency {
    position: relative;
    z-index: 10;    
    display: inline-block;
    width: 84px;
}
form fieldset select#countrySelect {
    position: relative;
    z-index: 1;    
    display: inline-block;
    width: 175px;
    margin-right: 15px;
    padding-right: 20px; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
    vertical-align: middle;
    appearance: none;
    box-sizing: border-box;
}
form fieldset select.bankCurrency {
    display: inline-block;
    width: 83px;
}
.personalData .field input::placeholder {
    color: #000;
}
div.row {
    position: relative;
    z-index: 1;
    display: block;
}
div.row.bankData {
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
}
article.invoice div.headerLine {
    float: left;
    width: 100%;
    text-align: left;
}
article.invoice div.headerLine h1 {
    margin: 0;
    padding: 23px 0 0 0;
    font-size: 17px;
    font-weight: 400;
    text-align: left;
}
article.invoicePreview {
    margin-top: 12px;
    padding: 10px 25px 45px;
    background: transparent;
    border: 1px solid #000;
    box-shadow: 0 2px 4px #ddd;
}
.invoicePreview h2 {
    margin: 15px 0 0 0;
    padding: 0;
}
fieldset button#downloadInvoiceBtn, 
fieldset button.confirmPayment {
    display: inline-block;
    width: 195px;
}
fieldset button#downloadInvoiceBtn i {
    position: relative;
    top: -2px;
    right: -5px;
    margin: 0;
    padding: 1px 4px 2px;
    background: #8BC34A;
    border-radius: 4px;
    font-style: normal;
    font-size: 10px;
    font-weight: 400;
    text-shadow: none;
    color: #fff;
}
fieldset button.confirmPayment span {
    position: relative;
    float: right;
    display: inline-block;
    width: calc(100% - 27px);
    height: 14px;
    margin-top: 2px;
    margin-left: 4px;
    line-height: 14px;
    text-align: left;
    vertical-align: top;
}
fieldset button.confirmPayment:hover,
fieldset button.confirmPayment:target,
fieldset button.confirmPayment:hover span,
fieldset button.confirmPayment:target span {
    background-color: #3399CC;
    color: #fff;
}
.invoicePreview td span {
    font-size: 13px;
    line-height: 1.75em;
}
.invoicePreview td span#invPrice {
    font-size: 15px;
}
.invoicePreview td small {
    display: block;
    padding-top: 4px;
    font-size: 12px;
}
.invoicePreview td small.purpose, 
.invoicePreview td small.purpose strong {
    margin: 0;
    padding: 0;    
    font-size: 12px;
}
.invoicePreview p {
    font-size: 13px !important;
    text-align: left;
}
.invoicePreview .row { 
    margin-bottom: 10px; 
}
.invoicePreview .two-cols { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 16px; 
}
.no-print { margin: 8px 0; }
div.footer {
    display: block;
    padding-top: 10px;
}
.invoiceActions.no-print,
form fieldset#qrStep.qrStep div.hintBox,
section.payments fieldset.invoicePreview div.hintBox,
section.payments fieldset.confirmation div.hintBox,
section.payments div#qrSwiftHint.hintBox,
section.payments div#confirmHint.hintBox,
div#bitcoinHintBox.hintBox,
div#ethHintBox.hintBox {
    position: relative;
    text-align: center;
}
.invoiceActions.no-print .downloadInvoice {
    margin: 15px auto 20px auto !important;
}
div#personalContactHint.hintBox,
section.payments div#qrSwiftHint.hintBox,
form fieldset#qrStep.qrStep div.hintBox.enterFullData,
div#bitcoinHintBox.hintBox,
div#ethHintBox.hintBox {
    padding: 0 0 15px 0;
    text-align: center;
}
div.form.qrCode div.row div.field div.hintBox {
    text-align: left;
}
div.footer, div.footer a {
    font-size: 11px;
    font-weight: 300;
    text-align: left;
}

/* кнопка */
.downloadInvoice {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #808080;
    background: linear-gradient(to bottom, #f0f0f0 0%, #f7f7f7 40%, #e2e2e2 100%);
    cursor: pointer;
}
img.print-logo {
    margin: 0;
    text-align: left;
}

.confirmation {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fafafa;
  text-align: center;
}

.confirmation h4 {
  margin-bottom: .5rem;
}

.confirmation .hintBox {
    position: relative;
    margin: 0 auto;
    padding-top: 0;
}

.confirmation input[type="file"] {
  display: block;
  margin: 1rem auto;
}

.confirmation button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.confirmation button#sendReceiptBtn:disabled {
    background: linear-gradient(to bottom, #efefef 0%, #f0f0f0 40%, #eaeaea 100%);
    border: 1px solid #c9c9c9;
    text-shadow: none;
    color: #8e8e8e;
}
.confirmation button#sendReceiptBtn.confirmPayment {
    display: inline-block;
    width: 160px;
    max-width: 200px;
    margin-left: 20px;    
    color: #111;
}
div#confirmationBlock h4 {
    margin: 0;    
    font-size: 20px;
    font-weight: 330;
    text-align: center;
}
div#personalContactHint.hintBox p,
section.payments fieldset.invoicePreview .hintBox,
section.payments div#receiptHint .hintBox,
section.payments div.wrapper div#generatedQRstep.hintBox p,
div#bitcoinHintBox.hintBox p,
div#ethHintBox.hintBox p {
    text-align: center;
}
section.payments div#receiptHint.hint {
    width: 240px;
    margin: 0 calc(50% - 132.5px);
    text-align: left;    
}
div#personalContactHint.hintBox p,
section.payments div#qrSwiftHint.hintBox p,
section.account div.wrapper div#confirmationBlock p,
section.payments div.wrapper div#generatedQRstep.hintBox p,
div#bitcoinHintBox.hintBox p,
div#ethHintBox.hintBox p {
    display: inline-block;
    margin: 0 auto;
    font-size: 15px !important;
    text-align: center;
}
section.payments form fieldset#qrStep.qrStep .hintBox p,
section.account div.wrapper div#confirmationBlock div.hintBox p,
section.payments fieldset.invoicePreview div.hintBox p,
section.payments div#qrSwiftHint.hintBox p {
    position: relative;    
    display: inline-block;
    width: 100%;
    max-width: fit-content;
    margin: 0 auto;
    padding: 0;
    font-size: 15px !important;    
}
section.payments form fieldset.qrStep .hintBox div#qrCodeHint.hint,
section.payments fieldset.invoicePreview .hintBox div#invoiceHint.hint,
section.payments fieldset .hintBoxdiv#receiptHint.hint,
section.payments div#qrSwiftHint.hintBox div#qrSwift.hint,
section.payments div.wrapper div#generatedQRstep.hintBox div#qrCodeHint.hint,
div#bitcoinHintBox.hintBox div#bitcoinHint.hint,
div#ethHintBox.hintBox div#ethHint.hint,
div#englishHint.hint {
    position: absolute;
    left: calc(50% - 120px);
    z-index: 1000;
    width: 240px;
    text-align: left;
}
section.payments form fieldset.qrStep div.hintBox i.hint,
section.account div.wrapper div#confirmationBlock div.hintBox i.hint,
section.payments div#qrSwiftHint.hintBox i.hint,
div#bitcoinHintBox.hintBox i.hint,
div#ethHintBox.hintBox i.hint,
div#personalContactHint.hintBox i.hint {
    position: relative;
    display: inline-block;
}
/* === Drag & Drop File Upload === */
.dropzone {
    position: relative;
    margin: 20px auto 0;
    padding: 2rem;
    text-align: center;
    background: #f9fbff;
    border: 2px dashed #2883e0;
    border-radius: 10px;    
    transition: all 0.3s ease;
    cursor: pointer;
}
.dropzone:hover {
  background: #eef5ff;
}
.dropzone.dragover {
  background: #d8e7ff;
  border-color: #0056b3;
}
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone .dz-preview { 
    margin-top:10px; 
    font-size:14px; 
    color:#111;
}
section.account div.wrapper div#confirmationBlock .dropzone-content p {
    text-align: center !important;
}
.dropzone .dz-status { 
    margin-top:6px; 
    font-size:12px; 
    color:#555; 
}
.confirmation.hidden { 
    display:none; 
}
.upload-icon {
    display: block;
    width: 48px;
    margin: 0 auto 10px auto;
    opacity: 0.7;
}
.file-name {
  display: block;
  margin-top: 0.8rem;
  color: #666;
  font-size: 0.9rem;
  font-style: italic;
}
.upload-status {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #007bff;
  font-weight: 500;
}
.upload-status.success {
  color: #28a745;
}
.upload-status.error {
  color: #dc3545;
}
.confirmation button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.confirmation button.backToInvoice, 
.confirmation button#sendReceiptBtn.confirmPayment {
    display: inline-block;
}
fieldset.confirmation.current div.buttons {
    margin-top: 10px;
}

.receipt-preview {
  margin-top: 8px;
  font-size: 13px;
  color: #333;
}
.receipt-preview img {
    display: block;
    width: 260px;    
    margin: 4px auto;
    border: 1px solid #ddd;
    border-radius: 6px;
}
article.paymentComplete {
  display:block;
  width:calc(100% - 30px);
  max-width:900px;
  margin:0 5px 10px 0;
  padding:20px;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--si-gray-4);
  box-shadow: var(--si-shadow);
  text-align:left;
  vertical-align:top;
}
label.badge {
    display: block;
    width: fit-content;
    margin: 15px auto 25px auto;
    padding: 2px 8px;
    zoom: 100%;
    background: rgb(215 245 180 / 75%);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(182 223 135 / 80%);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 300;
    color: #444; 
}
section.payments div.wrapper article.paymentComplete h1 {
    margin: 15px auto 10px auto;
    padding: 0;
    font-size: 24px;
    font-weight: 300;
}
section.payments fieldset.qrStep div#qrStep.hintBox p,
section.payments fieldset.invoicePreview p,
section.payments div.wrapper article.paymentComplete p,
section.payments div#confirmHint.hintBox p {
    display: inline-block;
    width: 100%;
    max-width: fit-content;
    margin: 0 auto 15px;
    padding: 0;
    text-align: left !important;
    vertical-align: top;
}
section.payments div.wrapper article.paymentComplete div.textBlock {
    display: block;
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}
section.payments div.wrapper article.paymentComplete div.textBlock p {
    display: block;
    margin: 0 0 15px;
    text-align: left;
}
button.goMainPage {
    position: relative;
    display: block;
    width: 170px;
    height: 40px;
    max-height: 40px;
    margin: 30px auto;
    padding: 0 10px 0 10px;
    line-height: 22px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #f9f9f9 0%, #f7f7f7 40%, #eaeaea 100%);
    border: 1px solid #9b9b9b;
    text-shadow: 0px 1px 2px #fff;
    font-size: 15px;
    color: #111;
    cursor: pointer;
}
.button.showHint.switcher .switch {
    --sw: 24px;
    --sh: 12px;
    --on: #2196F3;
    --off: rgb(255, 255, 255);
    --knob: calc(var(--sh) - 5px);
    --dx: calc(var(--sw) - var(--knob) - 4px);
    position: relative;
    width: var(--sw);
    height: var(--sh);
    flex: 0 0 var(--sw);
    border-radius: 9999px;
    background: var(--off);
    border: 2px solid var(--on);
    transition: background .2s ease, border-color .2s ease;
    box-sizing: content-box;
}
.button.showHint.switcher .switch-text {
    user-select: none;
    outline: none;
    border: none;
    font-size: 14px;
    font-weight: 300;
}
.button.showHint.switcher {
    -webkit-tap-highlight-color: transparent;
}
.button.showHint.switcher[aria-pressed="true"] .switch {
    background: var(--on);
}
.button.showHint.switcher .switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--on);
    transition: transform .2s ease, background .2s ease;
}
.button.showHint.switcher[aria-pressed="true"] .switch::after {
    background: rgb(255, 255, 255);
    transform: translateX(var(--dx));
}

.hintBox p,
section.payments div#confirmHint.hintBox p {
    width: auto;
    max-width: fit-content;
    text-align: center;
}
#qrText {
  background: #f6f8f6;
  padding: 10px;
  border-radius: 8px 8px 0 0;
  font-family: monospace;
  white-space: pre-wrap;
}
div.qrPaymentData div.qrText pre#qrText {
    margin: 0;
    background: #f6f8f6;
    border: 1px solid #c3c3c3;
    font-size: 13px;
}
div.qrCode {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid #c2c2c2;
    border-radius: 8px;
}
div.qrCode img {
    display: block;
    width: 100%;
    height: 100%;
}
#qrCode canvas {
    display: block;
    margin: 12px auto;
}
.payment-actions {
    display: block;
    gap: 20px;
    justify-content: center;
    margin-top: 10px;
    padding: 15px 0 0 0;
}
div.qrPaymentData {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 30px;
    vertical-align: top;
    text-align: left;
}
div#qrCode, 
div#qrCode img {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 0 30px 0 0;
}
div.qrPaymentData div.qrText {
    display: inline-block;
    width: calc(100% - 240px);
    vertical-align: top;
}
div.qrPaymentData button#qrText {
    display: block;
    width: 100%;
    padding: 4px 0;
    border-radius: 0 0 8px 8px;
    border: 1px solid #8d8d8d;
    border-top: 1px solid #e7e4e4;
    cursor: pointer;
}
fieldset div.payment-actions button {
    margin: 0;
    margin-right: 20px;
    vertical-align: top;    
}
div.qrPaymentData button#copyInvoiceBtn{
  display:block; width:100%; padding:4px 0;
  border-radius:0 0 8px 8px;
  border:1px solid #8d8d8d; border-top:1px solid #e7e4e4;
  cursor:pointer;
}
div.qrPaymentData button#copyInvoiceBtn:hover,
div.qrPaymentData button#copyInvoiceBtn:target{
  background: var(--si-blue); border-color: var(--si-blue); color:#fff; text-shadow:none;
}
button#copyInvoiceBtn.copied {
    background-color: #4CAF50 !important; /* зелёный */
    border-color: #4CAF50 !important;
    color: white !important;    
    transition: background-color 0.3s ease;
}
button.copied {
  transition: all 0.3s ease;
}
.paymentService {
    display: block;
    width: 100%;
    padding: 0 0 30px 0;
    background-color: #fcfcfc;
    border-radius: 12px;
    border: 1px solid #e6e9ef;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
@media (min-width:900px) {
    .paymentService {
        max-width: 900px;
        margin: 30px auto;
    }
    .button.showHint.switcher {
        position: absolute;
        top: 233px;
        right: calc(50% - 400px);
        float: right;
        display: inline-flex;
        align-items: center;
        width: 115px;
        gap: 10px;
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        font: inherit;
        line-height: 1;
        white-space: nowrap;
    }
    .button.showHint.switcher {
        position: absolute;
        top: 233px;
        right: calc(50% - 400px);
        float: right;
        display: inline-flex;
        align-items: center;
        width: 115px;
        gap: 10px;
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        font: inherit;
        line-height: 1;
        white-space: nowrap;
    } 
    ul.progressBar li span.stepHeader i.hidden {
        display: inline-block !important;
        font-style: normal;
        padding-right: 5px;
    }
}
@media (max-width:899px) {
    section.payments {
        margin: 55px 0 0 0;
        padding: 0;
    }
    .button.showHint.switcher {
        position: absolute;
        top: 163px;
        right: 20px;
        float: right;
        display: inline-flex;
        align-items: center;
        width: 115px;
        gap: 10px;
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        font: inherit;
        line-height: 1;
        white-space: nowrap;
    }
    section.payments div.wrapper {
        width: 100%;
        padding: 0;
    }
    section.payments div.wrapper h1 {
        margin: 0;
        padding-top: 30px;
        font-size: 24px;
        font-weight: 300;
        text-align: center;
    }
    .paymentService {
        max-width: 100%;
        margin: 0;
        padding-bottom: 0;
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
}
@media (max-width:640px) {
    form fieldset {
        position: relative;
        display: block;
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
    }
    form fieldset.confirmation {
        border-top: 1px solid #e0e0e0;
        border-radius: 0;
    }
    fieldset#chosenProductsStep.stepI div.row {
        display: block;
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        margin: 0;
        padding: 0;
    }
    fieldset#chosenProductsStep.stepI div.row
    section.payments div.wrapper h1, section.payments div.wrapper h2.paymentMethodHeader, section.payments div.wrapper h2.invoiceHeader, section.payments div.wrapper h2.bankAccountHeader, section.payments div.wrapper h2.billingHeader, section.payments div.wrapper h2.paymentCompleteHeader, section.payments div.wrapper h2.generateQRHeader, section.payments div.wrapper h2.paymentByQR {
        font-size: 24px;
    }
    .form.qrCode .row, .form.personalData .row, .form.capacity .row {
        height: auto;
    }
    .form .row .field, .form .row .fieldBox {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 0 20px;
        text-align: left;
        vertical-align: top;
    }
    .form .row .field.firstName, .form .row .field.lasstName, .form .row .field.country, .form .row .field.email, .form .row .field.clientBankData, .form .row .fieldBox, .form .row .field.fullName {
        margin-right: auto;
        margin-bottom: 20px;
    }
    .form .row .field, .form .row .fieldBox {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        text-align: left;
        vertical-align: top;
    }
    .form .row .field.country {
        margin-right: 17px;
    }
    .personalData .field input, .personalData .field select, form fieldset input.bankTitle, form fieldset input.swift, form fieldset input.country, form fieldset select.bankCurrency, form fieldset select#countrySelect, form fieldset input.country, form fieldset input.clientBankAccount, form fieldset input.client_fullname, form fieldset input.client_email {
        margin: 0 auto;
    }
    .hintBox {
        max-width: 100%;
        position: relative;
        display: block;
        margin: 0 auto;
        text-align: left;
        vertical-align: top;
    }
    div.iAgree div.hintBox {
        max-width: calc(100% - 40px);
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 1px 0 0 0;
        text-align: left;
        vertical-align: top;
    }
    fieldset#chosenProductsStep.stepI div#agreement label {
        width: calc(100% - 20px);
    }
    .invoice, .invoicePreview {
        position: relative;
        width: calc(100% - 80px);
        max-width: calc(100% - 80px);
        margin: 30px auto;
        padding: 0 20px 20px;
        background: transparent;
        border: none;
        border-radius: 4px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #222;
    }
    article.invoicePreview.printPDF {
        width: 330px !important;
        max-width: calc(100% - 40px) !important;
        margin: 20px 0;
        zoom: 100%;
    }
    section.payments form fieldset#qrStep.qrStep .hintBox p, section.account div.wrapper div#confirmationBlock div.hintBox p, section.payments fieldset.invoicePreview div.hintBox p, section.payments div#qrSwiftHint.hintBox p {
        position: relative;
        display: inline-block;
        width: calc(100% - 20px);
        max-width: fit-content;
        margin: 0 auto;
        padding: 0;
        font-size: 15px !important;
    }
    .hintBox p, section.payments div#confirmHint.hintBox p {
        width: calc(100% - 20px);
    }
    .upload-icon {
        margin: 0 auto;
    }
    .dropzone {
        padding: 15px 0 20px;
    }
    .dropzone-content p {
        margin: 0 !important;
        padding: 0;
    }
    article.paymentComplete {
        display: block;
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        margin: 0;
        padding: 20px;
        background: #fff;
        border-radius: 0;
        border: 1px solid var(--si-gray-4);
        box-shadow: var(--si-shadow);
        text-align: left;
        vertical-align: top;
    }
}

@media (max-width: 640px) {
      .button.showHint.switcher {
        position: absolute;
        top: 195px;
        right: calc(50% - 57.5px);
        float: right;
        display: inline-flex;
        align-items: center;
        width: 115px;
        gap: 10px;
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        font: inherit;
        line-height: 1;
        white-space: nowrap;
    }
    div.progressBar {
      position: relative;
      z-index: 1;
      float: left;
      display: block;
      width: 100%;
      height: 100px;
      margin: 30px auto 0;
      border: none;
      border-radius: 18px;
  }
  div.qrPaymentData {
      padding-top: 20px;
  }
  div.qrCode {
      display: block;
      width: 180px;
      height: 180px;
      margin: 0 auto;
      border: 1px solid #c2c2c2;
      border-radius: 8px;
  }
  div.qrPaymentData div.qrText {
      display: block;
      width: 100%;
      margin-top: 20px;
      vertical-align: top;
  }
}
@media (max-width: 480px) {
    section.payments fieldset.qrStep div#qrStep.hintBox p, section.payments fieldset.invoicePreview p, section.payments div.wrapper article.paymentComplete p, section.payments div#confirmHint.hintBox p {
        display: inline-block;
        width: calc(100% - 20px);
    }
    form fieldset.stepI {
        position: relative;
        display: block;
        width: calc(100% - 40px);
        max-width: 320px;
    }
    fieldset#method.stepII ul {
        display: block;
        width: calc(100% - 5px);
        max-width: 300px;
        list-style: none;     
    }
    fieldset#method.stepII ul li button i {
        margin-right: 5px;
    }
    .secured {
        display: block;
        width: calc(100% - 40px);
        margin: 80px auto 0 auto;
        font-size: 13px;
        font-weight: 300;
        color: #6c6c6c;
    }
    article.invoicePreview.printPDF {
        zoom: 80%;
    }
    fieldset#chosenProductsStep.stepI div.row {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    fieldset#chosenProductsStep.stepI div.row div.field {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    select#chosenProductsSelect.products, select#cost {
        display: block;
        width: 100%;
        max-width: 100%;
    }
}
@media (max-width: 380px) {
    .invoice, fieldset.invoicePreview {
        position: relative;
        max-width: calc(100% - 80px);
        margin: 30px auto;
        padding: 0 20px 40px;
    }
    fieldset#chosenProductsStep.stepI button.continue, fieldset button.continue.stepInvoicePreview, fieldset button.continue.bankDataStep, fieldset button.continue.invoicePreviewStep, fieldset button#invoicePreviewStep, fieldset button#downloadInvoiceBtn, fieldset button.confirmPayment, fieldset button.backToInvoice, fieldset button.continue.generateQR, fieldset div.payment-actions button,.confirmation button#sendReceiptBtn.confirmPayment {
        width: 140px;
    }
    form fieldset .buttons {
        position: relative;
        bottom: 0;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto !important;
        padding: 0;
    }
    fieldset button#downloadInvoiceBtn {
        width: 185px;
    }
    main section article.invoicePreview.printPDF {
        width: 325px;
    }
}
/* Ошибка под полем */
.field-error {
    position: absolute;
    top: 64px;
    left: -1px;
    z-index: 1000;
    display: block;
    min-width: 120px;
    max-width: 262px;
    margin: 6px 0 0;
    padding: 8px 10px;
    background: rgb(255 240 239);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(239 159 177);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.35;
    color: #000;
}

/* Подсветка самого поля при ошибке */
.field.invalid input,
.field.invalid select {
  border-color: #b00020 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 0, 32, 0.15);
}

/* Чтобы иконки-подсказки не попадали в таб, если не нужно */
.hint[role="button"][tabindex="0"] { outline: none; }

/* === Ошибки: рисуем ВЫШЕ поля и поверх соседних ячеек === */

/* сам контейнер поля — чтобы поднимался над соседями, когда есть ошибка */
.form .row .field.invalid {
  z-index: 100;              /* выше соседних .field (у них z-index:1) */
  overflow: visible;         /* на всякий случай */
}

/* пузырь ошибки: рисуем НАД полем */
.field-error {
    position: absolute;
    bottom: calc(100% + 8px);
    top: auto;
    left: -1px;
    z-index: 1000;
    display: none;
    min-width: auto;
    max-width: 300px;
    margin: 0 0 -39px 0;
    padding: 8px 10px;
    background: rgb(255 240 239);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(239 159 177);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.35;
    color: #000;
    pointer-events: none;
}
.field-error:not(.is-hidden) { 
    display:block;
}

/* стрелочка вниз (к полю) */
.field-error::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 18px;                /* подправь при желании */
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgb(239 159 177) transparent transparent transparent;
}

/* внутренний «белый» треугольник, чтобы края были аккуратные */
.field-error::before {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 18px;
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: rgb(255 240 239) transparent transparent transparent;
}
.field-error.is-hidden { 
    display: none !important;
}

/* подсветка поля при ошибке (оставляем) */
.field.invalid input,
.field.invalid select {
  border-color: #b00020 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 0, 32, 0.15);
}

/* На очень узких экранах можно вернуть подсказку под поле, чтобы не упиралась в заголовки/край экрана */
@media (max-width: 480px) {
  .field-error {
    position: relative;
    z-index: 10000;
    top: 0;
    bottom: 24px;    
    min-height: fit-content !important;
    height: auto !important;
    margin: 0;
  }
  .field-error::after,
  .field-error::before {
    top: auto;
    bottom: 100%;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgb(239 159 177) transparent;
  }
  .field-error::before {
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgb(255 240 239) transparent;
  }
}
/* подсказки скрыты по умолчанию */
.hint[role="tooltip"].hidden { display: none; }
.hint[role="tooltip"].visible { display: block; }

/* на всякий случай, если где-то остались inline-стили/transition */
#bankData .hint[role="tooltip"] { visibility: visible; opacity: 1; }
#bankData .hint[role="tooltip"].hidden { display: none !important; }