/**
 * Fonts
 */
@font-face {
    font-family: 'Casper-Regular';
    src: url('../fonts/Casper-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Casper-Bold';
    src: url('../fonts/Casper-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Casper-BoldItalic';
    src: url('../fonts/Casper-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Casper-RegularItalic';
    src: url('../fonts/Casper-RegularItalic.ttf') format('truetype');
}

/**
 * Common
 */
html,
body {
    font-size: 16px;
    width: 100%;
    height: auto;
}

body {
	background-color: #fff;
    font-family: 'Casper-Regular', Arial, sans-serif;
}

* {
    outline: none;
}

.page-wrapper {
    max-width: 820px;
    margin: 0 auto;
}

.for-smalltouch {
    display: none;
}

#google_overlay {
    display: none;
    z-index: 10000 !important;
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    background-color: rgba(32, 33, 36, 0.6) !important;
    opacity: 1 !important;
}

h1.maintitle {
    color: #000 !important;
}

h1.mainsubtitle {
    border: none !important;
    font-size: 1.62rem !important;
}

.st-only,
.dt-only {
    display: none;
}

/**
 * Header
 */
.header {
    height: 35px;
}

.header .left {
    line-height: 100px;
    padding-left: 0;
}

.header .right {
    font-size: 1.8rem;
    text-align: right;
    line-height: 120px;
    padding-right: 0;
}

a.phone-link {
	text-decoration: none;
	color: #3c3d40;
	cursor: default;
}

.shop-logo {
    max-width: 265px;
    max-height: 55px;
}

.vchelper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/**
 * Content
 */
.content {
    background-color: #f5f3f3;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    font-size: 1.1rem;
}

.content-wrapper {
    padding: 30px 29px;
    color: #4f544e;
}

.content-wrapper .col {
    padding-left: 0;
    padding-right: 0;
}

.transinfo {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 18px;
}

.transinfo .left {
    float: left;
    font-size: 2.1rem;
}

.transinfo .right {
    float: right;
    text-align: right;
    font-size: 1.3rem;
}

.shopinfo,
.timercountdown {
    font-size: 1.27rem;
}

.timercountdown {
    margin-bottom: 18px;
}

.timercountdown .timertext {
    color: #979796;
}

.card-wrapper{
	margin: 0 auto;
}

.pay__text-block {
    margin: 22px 0;
    text-align: center;
}

.white-block {
    background-color: #fff;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    border: 1px solid #edecec;
    -webkit-box-shadow: 1px 1px 1px 0 #c5c4c3, -1px 1px 1px 0 #e0dfdf;
    -moz-box-shadow: 1px 1px 1px 0 #c5c4c3, -1px 1px 1px 0 #e0dfdf;
    box-shadow: 1px 1px 1px 0 #c5c4c3, -1px 1px 1px 0 #e0dfdf;
}

.white-block.qrcode-commission-info.dt-only {
    margin-bottom: 0;
}

.qrcode-scan-msg {
    padding: 2px 0;
}

.qrcode-container .qrcode-scan-msg {
    padding-bottom: 10px;
}

fieldset.card-item input[name='cardSwitcher'] {
    display: none;
}

fieldset.card-item {
    height: 70px;
    border-bottom: 1px solid #edecec;
	cursor: pointer;
    line-height: 70px;
    padding: 0 16px;
}

fieldset.card-item:first-of-type {
    -webkit-border-radius: 17px 17px 0 0;
    -moz-border-radius: 17px 17px 0 0;
    border-radius: 17px 17px 0 0;
}

fieldset.card-item:last-of-type {
    -webkit-border-radius: 0 0 17px 17px;
    -moz-border-radius: 0 0 17px 17px;
    border-radius: 0 0 17px 17px;
    border-bottom: none;
}

fieldset.card-item.active {
	background: #fafafa;
}

fieldset.card-item.disabled {
    cursor: default;
}

fieldset.card-item label.radio {
    width: 100%;
    cursor: pointer;
}

fieldset.card-item.disabled label.radio {
    cursor: default;
}

.rubsign {
    font-size: 1.89rem;
}

.tran-num {
    font-family: Arial, sans-serif;
}

.linked-cards-type-img {
    width: 56px;
    height: 56px;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    margin-top: 6px;
    float: left;
    background-color: #fff;
}

.linked-cards-pan {
    float: left;
    padding-left: 10px;
    font-size: 1.76rem;
    font-family: Arial, sans-serif;
}

.linked-cards-pan .cardnum-prefix,
.line .cardnum-prefix {
    font-size: 2rem;
    padding: 0 1px 0 0;
}

.cardtype-image {
    width: 42px;
    display: block;
}

.cardtype-mastercard-style {
    margin: 14px auto 0 auto;
}

.cardtype-mir-style {
	height: 12px;
}

.cardtype-mir-style,
.cardtype-visa-style {
    margin: 20px auto 0 auto;
}

.new-card-style {
    display: block;
    width: 37px;
    margin: 14px auto 0 auto;
}

.linked-cards-name {
    float: left;
    color: #bababa;
    padding: 1px 0 0 10px;
}

.linked-cards-disabled-text {
    float: left;
    color: #8e1a1a;
    padding: 1px 0 0 10px;
}

.new-card-title {
    float: left;
    font-size: 1.45rem;
    padding-left: 10px;
    color: #656a6c;
}

.linked-cards-typename {
    float: right;
    font-size: 1.25rem;
    color: #999a99;
    text-transform: capitalize;
    padding: 3px 3px 0 0;
}

.form-fields {
	margin: 22px 0 0 0;
}

.card-pan-img {
    position: absolute;
    top: 12px;
    right: 12px;
}

.card-pan-img img {
    display: none;
    width: 42px;
}

.card-pan-img .pan-img-mir {
    margin: 2px 0 0 0;
	height: 13px;
}

.card-pan-img .pan-img-visa {
    margin: 5px 0 0 0;
}

.card-pan-img .pan-img-default {
    width: 37px;
    margin: 0 0 0 4px;
}

.psevdo-lnk,
.btn-link {
	color: #ef7a1a;
	border: none;
	font: inherit;
	line-height: 1.2;
	text-decoration: underline !important;
}

.btn-link {
	padding: 0;
	margin: 0;
	height: auto;
}

.psevdo-lnk:hover,
.psevdo-lnk:focus,
.btn-link:hover,
.btn-link:focus {
	border-bottom-color: transparent !important;
}

.line {
	border-bottom: 1px solid #f0f0f0;
	padding: 0;
    margin: 0;
    height: 60px;
    line-height: 60px;
    font-family: Arial, sans-serif;
    color: #595c6a;
}

.line:last-of-type {
    border-bottom: none;
}

.line .head {
	color: #4e4e4e;
	font-size: 1.25rem;
}

.line .value {
	color: #acafb2;
	font-size: 1.4rem;
    padding-left: 0;
}

.line .value .rubsign {
    font-size: 1.4rem;
}

.success-info {
    margin: 18px 0 25px 0;
}

/**
 * Card
 */
.back-side,
.front-side {
	width: 72%;
	min-height: 186px !important;
	position: relative;
	padding: 25px;
	display: block;
	position: relative;
	min-width: 260px;
	height: 305px;
	border-radius: 17px;
	margin-bottom: 0.5rem;
    border: 1px solid #edecec;
    -webkit-box-shadow: 1px 1px 1px 0 #c5c4c3, -1px 1px 1px 0 #e0dfdf;
    -moz-box-shadow: 1px 1px 1px 0 #c5c4c3, -1px 1px 1px 0 #e0dfdf;
    box-shadow: 1px 1px 1px 0 #c5c4c3, -1px 1px 1px 0 #e0dfdf;
}

.front-side {
	background-color: #fff;
	float: left;
    z-index: 2;
    padding-top: 25px;
}

.front-side .control-group {
	width: 100%;
}

.back-side {
	margin-top: -280px;
	padding-left: 220px;
	padding: 90px 45px;
	float: right;
    z-index: 1;
    background-color: #fafafa;
}

.cvv2-wrapper {
    float: right;
}

.controls {
	position: relative;
	margin-bottom:15px;
}

.form-fields label {
    font-size: 1.45rem;
    color: #656a6c;
    margin-bottom: 1px;
}

.exp-delimiter {
    font-size: 1.8rem;
    color: #abacae;
}

.form-fields .element-cvv2 {
    float: right;
}

.help-block {
    font-size: 0.85rem;
    color: #656a6c;
    font-family: Arial, sans-serif;
}

.card-ms-logo {
    padding: 0 5px;
}

.card-ms-logo-visa {
    width: 72px;
    height: 23px;
}

.card-ms-logo-mastercard {
    width: 48px;
    height: 30px;
}

.card-ms-logo-mir {
    width: 78px;
    height: 23px;
}

.card-ms-logos-container {
    text-align: right;
}

.visible-pan {
    width: 60%;
}

.summField {
    width: 25%;
}

.another-card-form,
.form-line,
.phone-pay-form {
    margin: 5px 0 22px 0;
}

.another-card-form {
    margin-top: 20px;
}

#visible_card_pan,
.element-holder input {
    width: 100%;
}

.element-cardexp,
.element-holder {
    margin: 20px 0;
}

.element-cardexp input {
    width: 6em;
    float: right;
}

.cardexpfield-container,
.holderfield-container {
    float: right;
}

.cheque-link {
    margin: 20px 0;
}

/**
 * Inputs
 */
input,
select {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding: 0 16px;
	background: #fff;
	color: #5e6163;
	border: 1px solid #e5e5e5;
    height: 50px;
    font-size: 1.72rem;
    font-family: Arial, sans-serif;
}

input:focus {
	border: 1px solid #fe9544;
}

input:disabled,
select:disabled {
	background: #fafafa;
    color: #abacae;
}

input::-moz-placeholder {
    color: #bfc1c2;
}

input::-webkit-input-placeholder {
    color: #bfc1c2;
}

input:-ms-input-placeholder {
    color: #bfc1c2;
}

input::-ms-input-placeholder {
    color: #bfc1c2;
}

input::placeholder {
    color: #bfc1c2;
}

.four-figures {
    width: 100%;
}

select.month,
select.year {
    position: relative;
	width: 5.6em;
    z-index: 1;
}

.input-for-select-month,
.input-for-select-year {
    position: absolute;
    width: 4.85em;
    z-index: 2;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topleft: 8px;
    -moz-border-top-right-radius: 0;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-bottom-right-radius: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 0;
}

.input-for-select-month {
    left: 0;
}

.input-for-select-year {
    left: 6.52em;
}

.element-exp .controls {
    float: right;
}

.element-exp:after {
    display: block;
    clear: both;
    content: '';
}

.element-holder input {
    text-transform: uppercase;
}

.element-holder .controls {
    float: right;
}

.element-holder label,
.element-cardexp label {
    float: left;
    padding-top: 12px;
}

.element-cvv2 input {
    width: 5em;
    background-color: #fff;
}

.element-cvv2 .controls {
    margin-bottom: 10px;
}

fieldset.phone-field {
    margin-top: 16px;
}

#terms_block input {
    height: auto;
    margin-right: 10px;
}

.hiddenPhone {
    display: none;
}

.authorizerPhone {
    background-color: #fff;
    width: 12.1em;
    margin-left: 0.2em;
}

.help-inline-img {
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 98%;
}

.phone-with-help {
    width: 10.8em;
}

.dropdown-help {
    display: none;
    position: absolute;
    background-color: #fefff1;
    font-size: 0.9em;
    padding: 14px 18px 2px 18px;
    width: 20em;
    left: 11em;
    -webkit-box-shadow: 0px 0px 2px 1px #666666;
    -moz-box-shadow: 0px 0px 2px 1px #666666;
    box-shadow: 0px 0px 2px 1px #666666;
    z-index: 100;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.help-block-corner {
    position: absolute;
    top: -6px;
    left: 46%;
    width: 12px;
    height: 12px;
    -webkit-box-shadow: 1px -1px 0 0 #666666;
    -moz-box-shadow: 1px -1px 0 0 #666666;
    box-shadow: 1px -1px 0 0 #666666;
    background-color: #fefff1;
    transform: rotate(-45deg);
}

.phone-block {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
}

.phone-block-phone {
    float: left;
    width: 66%;
}

.phone-block-cancellink {
    float: right;
    width: 33%;
    text-align: right;
    font-size: 1.25rem;
    padding-top: 28px;
}

.offer-block {
    text-align: center;
    padding-bottom: 26px;
    float: left;
    width: 100%;
}

.offer-block label {
    margin-top: 8px;
    font-size: 1.25rem;
    margin-left: -1.6em;
}

.offer_conds a {
    color: #ef7a1a;
    border: none;
    text-decoration: underline;
}

/**
 * Messages
 */
.tip-yellowsimple {
    margin: 0;
    z-index: 1001;
}

.tip-yellowsimple .tip-inner {
    font-size: 14px;
    color: red;
}

#cardMsgsContainer {
    position: relative;
    top: 6px;
    left: 10px;
}

/**
 * Buttons
 */
button:focus {
    outline: none;
}

.buttons {
    margin: 22px 0 0 0;
}

.btn {
	outline: none;
	padding: 5px 10px;
	font: inherit;
	font-size: 1.2em;
	line-height: 1.5;
	min-width: 115px;
}

.btn,
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    border-color: #ef7a1a;
	background-color: #ef7a1a;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	color: #ffffff;
	padding: 8px 18px;
	font-size: 1.65rem;
	vertical-align: middle;
    box-shadow: none;
    outline: none;
    border: none;
    box-shadow: none;
}

.btn:hover,
.btn:disabled,
.btn-primary:hover,
.btn-primary:disabled {
    border-color: #de7016;
	background-color: #de7016;
	color: #fff;
}

.btn-primary:active,
.btn-primary:focus {
	outline: none;
    border-color: #de921f;
	background-color: #de921f;
	color: #fff;
}

.submit-button {
    float: left;
    font-size: 1.655rem;
    margin: 20px 0 6px 0;
    height: 60px;
    padding: 0 60px;
}

.buttons .btn-link {
	color: #949494;
	border-bottom-color: #949494;
}

.cancelLink .cancellink-button {
    border: none;
    font-size: 1.65rem;
    line-height: 60px;
    float: left;
    height: 60px;
    border: 2px solid #949494;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    width: 49%;
    text-align: center;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.cancelLink .cancellink-button:hover {
    border-color: #7c7c7c;
	background-color: #e5e5e5;
}

.checkbox_cond {
    vertical-align: top;
    width: 17px;
    height: 17px;
    margin: 0 3px 0 0;
}

.checkbox_cond + label {
    cursor: pointer;
}

.checkbox_cond:not(checked) {
    position: absolute;
    opacity: 0;
}

.checkbox_cond:not(checked) + label {
    position: relative;
    padding: 0 0 0 35px;
}

.checkbox_cond:not(checked) + label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: -1px;
    width: 24px;
    height: 24px;
    border: 1px solid #e5e5e5;
    background: #fff;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.checkbox_cond:not(checked) + label:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 0.9rem;
    height: .6rem;
    background: none;
    border: 3px solid #f3f2f2;
    border-top-style: none;
    border-right-style: none;
    opacity: 0;
    transition: all .1s;
}

.checkbox_cond:checked + label:before {
    background: #828181;
}

.checkbox_cond:checked + label:after {
    opacity: 1;
}

.checkbox_cond_error + label:before {
    border-color: #d72630 !important;
}

/**
 * Errors
 */
.error input,
.error select,
.error .input-holder {
	border-color: #D72630;
}

h3.error {
    text-align: left;
    font-size: 2rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

h4.error-comment {
    padding: 5px 0 20px 0;
}

.error-msg {
	clear: both;
	margin: 15px 0px;
	color: #d9534f;
	text-transform: none;
}

/**
 * Headings
 */
h1 {
	font-family: inherit;
	font-size: 1.75rem;
	color: #000;
	padding: 0;
    margin: 0;
}

h1.success {
	color: #00ab00;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/**
 * Popup
 */
.popup-text {
    font-size: 25px;
}

@media (max-width: 1300px) {
    .b-popup {
        width: 60%;
        height: 50%;
        left: 20%;
        top: 25%;
    }
}

@media (max-width: 1000px) {
    .b-popup {
        padding: 8% 2%;
    }
}

@media (max-width: 680px) {
    .b-popup {
        width: 80%;
        height: 50%;
        left: 10%;
        top: 25%;
        padding: 10% 2%;
    }
    .popup-text {
        font-size: 20px;
    }
}

/**
 * Footer
 */
.footer-pcidss {
    height: 70px;
}

.footer-pcidss .text {
    text-align: center;
    line-height: 70px;
    color: #9b9c9b;
    font-size: 1.22rem;
}

.footer-icons {
    height: 80px;
    width: 540px;
    margin: 0 auto 20px auto;
}

.footer-icons div {
    line-height: 42px;
    text-align: center;
}

.footer-icons .iconwrap {
    width: 116px;
    height: 48px;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    margin: 0 auto;
}

.footer-icons .col-sm {
    padding: 0 2px;
}

.ms-icon {
    display: inline-block;
    height: 100%;
    width: 72px;
}

/**
 * Cardnum format
 */
.cardscheme-image {
    position: relative;
    width: 37px;
    top: -2px;
}

.cardnum-prefix {
    font-weight: bold;
    padding: 0 2px 0 1px;
}

.qrcode-container {
    text-align: center;
    margin-top: -20px;
}

.qrcode-scan-msg {
    font-size: 1.25rem;
}

.qrcode-wrapper {
    margin: 0 auto 25px auto;
    padding: 4px;
}

.qrcode-scan-msg span {
    font-size: 1.2rem;
    position: relative;
    top: 5px;
}

.qrcode-bank {
    padding: 6px 10px;
    margin: 8px 0;
    background-color: transparent;
    box-shadow: none;
    flex: 0 0 auto;
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid #f0f0f0;
}

.qrcode-bank span {
    position: relative;
    top: 7px;
}

#qrcodefindbank {
    padding: 4px 14px;
}

.qrcode-scan-sbp-logo {
    margin-right: 12px;
}

.qrcode-scan-msg p {
    margin-top: 25px;
    font-size: 1.1rem;
}

.qrcode-scan-msg .qrcode-bankslist-title {
    font-size: 1.2rem;
    height: 36px;
    line-height: 36px;
}

.contract-info.dt-only {
    padding-top: 6px;
}

.qrcode-bankimg {
    width: 38px;
    position: relative;
    top: -1px;
}

.date-line {
    border-bottom: none;
}

/**
 * Tablet and smalltouch
 */
@media (max-width: 991px) {

    .form-fields label {
        font-size: 1.35rem;
    }
    
    select.month,
    select.year {
        width: 4.6em;
    }
    
    .input-for-select-month,
    .input-for-select-year {
        width: 3.9em;
    }
    
    .input-for-select-year {
        left: 5.5em;
    }
    
    .element-holder input {
        width: 10.1em;
    }

    .element-cvv2 input {
        width: 4em;
    }

    .back-side {
        padding-right: 45px;
    }
    
    input,
    select {
        font-size: 1.55rem;
    }
    
    .element-phone label {
        width: 50%;
    }

    .element-phone .controls {
        width: 50%;
    }

    .authorizerPhone {
        width: 10.1em;
        margin-left: 0.6em;
    }

    .phone-with-help {
        width: 9em;
    }
    
    .offer-block label {
        font-size: 1.1rem;
        margin-left: 3em;
    }
    
    .dropdown-help {
        left: 7em;
    }

}

@media (max-width: 767px) {

    .container {
        max-width: 575px;
    }
    
    fieldset.card-item {
        font-size: 1rem;
        padding: 0 8px;
    }
    
    .front-side {
        padding-left: 12px;
        padding-right: 12px;
    }

    input,
    select {
        font-size: 1.3rem;
    }

    .form-fields label {
        font-size: 1.15rem;
    }

    .element-holder input {
        width: 11.58em;
    }
    
    select.month,
    select.year {
        width: 5.2em;
        visibility: hidden;
    }
    
    .input-for-select-month,
    .input-for-select-year {
        width: 5.2em;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-top-right-radius: 8px;
        -moz-border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    
    .input-for-select-year {
        left: 6.4em;
    }

    .element-cvv2 input {
        width: 4.3em;
    }

    .back-side {
        padding-right: 15px;
    }

    .samsungpay-button img {
        width: 67%;
    }

    .element-phone label {
        width: 42%;
    }

    .element-phone .controls {
        width: 58%;
    }

    .authorizerPhone {
        width: 11.58em;
        margin-left: 0.3em;
    }

    .phone-with-help {
        width: 10em;
    }

    .errorbox-container .btn-primary.submit-button,
    .element-returnshop .btn-primary,
    .errorbox-container .btn-primary:not(:disabled):not(.disabled):active,
    .errorbox-container .btn-primary.submit-button:active,
    .element-returnshop .btn-primary:not(:disabled):not(.disabled):active,
    .element-returnshop .btn-primary:active {
        font-size: 1.2rem;
    }

    .offer-block label {
        margin-left: 2.1em;
    }

    .dropdown-help {
        left: 5.6em;
    }

    .googlePayContainerThreeButtons .gpay-button {
        background-size: 60% !important;
    }
    
    .samsungPayContainerThreeButtons .samsungpay-button img {
        width: 86%;
    }

    .line .head {
        font-size: 1.05rem;
    }

    .qrcode-scan-msg .qrcode-bankslist-title {
        font-size: 1.2rem;
        height: 36px;
        line-height: 36px;
    }

}

@media (max-width: 575px) {

    .btn-fl,
    .submit-button,
    .visible-pan,
    .phoneMask,
    .summField {
        width: 100%;
    }

    .header .right,
    .transinfo .right,
    .linked-cards-name,
    .phone-block-cancellink {
        display: none;
    }

    .for-smalltouch {
        display: block;
    }
    
    .content {
        -webkit-border-radius: 0;
       -moz-border-radius: 0;
        border-radius: 0;
    }
    
    .content-wrapper {
        padding: 12px 18px;
    }
    
    .header {
        height: 0;
    }
    
    .header .left {
        line-height: 92px;
        text-align: center;
    }

    .transinfo .left {
        width: auto;
        font-size: 1.9rem;
    }
    
    .transinfo .transinfo-cancellink {
        float: right;
        width: auto;
        text-align: right;
    }

    fieldset.card-item {
        padding: 0 16px;
    }
    
    .shopinfo,
    .timercountdown,
    .linked-cards-typename {
        font-size: 1.15rem;
    }
    
    .timercountdown {
        margin-top: 8px;
    }

    .linked-cards-pan {
        font-size: 1.58rem;
    }
    
    .linked-cards-pan .cardnum-prefix,
    .line .cardnum-prefix {
        font-size: 1.8rem;
    }

    .new-card-title {
        font-size: 1.35rem;
    }

    .cvv2-wrapper {
        float: left;
    }

    .front-side,
    .back-side {
        width: 100%;
        height: 276px;
        padding: 30px 18px 20px 18px;
    }
    
    .back-side {
        margin-top: -195px;
    }
    
    .element-holder,
    .element-cardexp {
        margin: 12px 0;
    }

    .element-holder input,
    .element-cardexp input {
        width: 10em;
    }

    .element-cvv2 {
        float: left;
        width: 50%;
        padding-top: 168px;
    }

    .cvv2-wrapper {
        width: 100%;
    }
    
    .element-cvv2 label {
        float: left;
        line-height: 50px;
        text-align: right;
        padding-right: 22px;
        margin-left: 3.5em;
    }

    .element-cvv2 .controls {
        float: left;
        position: absolute;
        right: 9.8em;
    }

    .element-cvv2 .help-block {
        float: right;
        margin-top: 7px;
    }
    
    input,
    select {
        height: 45px;
    }
    
    .card-pan-img {
        top: 9px;
    }
    
    .exp-delimiter {
        position: relative;
        top: 3px;
    }

    .phone-block-phone {
        width: 100%;
    }

    .element-phone label {
        width: auto;
        text-align: left;
        margin-left: 1.1em;
    }

    .element-phone .controls {
        width: auto;
        float: right;
    }

    .authorizerPhone {
        float: right;
        margin-right: 1em;
    }
    
    .phone-with-help {
        margin-right: 2.6em;
    }
    
    .help-inline-img {
        top: 8px;
        left: 83%;
    }

    .footer-pcidss,
    .footer-icons {
        background-color: #f5f3f3;
        height: auto;
    }
    
    .footer-pcidss .text {
        line-height: 100%;
        font-size: 1.1rem;
        padding: 30px;
        margin: 0 auto;
        max-width: 400px;
    }
    
    .footer-icons {
        width: auto;
        padding: 5px 10px 40px 10px;
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .footer-icons .col-sm {
        width: 25%;
        float: left;
        padding: 0 3px;
    }
    
    .footer-icons .iconwrap {
        width: 100%;
        background-color: #fff;
    }
    
    .footer-phone {
        font-size: 1.8rem;
        text-align: center;
        height: 100px;
        line-height: 75px;
    }

    .line .head {
        width: 52%;
        font-size: 1rem;
    }

    .line .value {
        width: 47%;
        font-size: 1rem;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    .line .value .rubsign {
        font-size: 1rem;
    }
    
    .linked-cards-pan .cardnum-prefix,
    .line .cardnum-prefix {
        font-size: 1.3rem;
    }
    
    h1 {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 8px;
    }

    .btn-primary.submit-button,
    .cancelLink .cancellink-button,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary.submit-button:active,
    .cancelLink .cancellink-button:active {
        font-size: 1.2rem;
        height: 50px;
    }

    .cancelLink .cancellink-button {
        line-height: 50px;
    }
    
    .samsungpay-button {
        height: 50px !important;
        line-height: 50px !important;
    }

	.apple-pay-button,    
    .gpay-button {
        height: 50px !important;
    }

	.applePayContainer {
		padding-top: 12px;
		width: 100% !important;
	}

    .btn-primary.submit-button.single-submit-button,
    .btn-primary.submit-button.three-submit-buttons {
        width: 100% !important;
    }
    
    .googlePayContainerThreeButtons,
    .samsungPayContainerThreeButtons {
        width: 49% !important;
        margin-top: 12px !important;
    }
    
    .googlePayContainerThreeButtons .gpay-button {
        background-size: 32% !important;
    }
    
    .samsungPayContainerThreeButtons .samsungpay-button img {
        width: 70%;
    }

    .errorbox-container .btn-primary.submit-button,
    .element-returnshop .btn-primary,
    .errorbox-container .btn-primary:not(:disabled):not(.disabled):active,
    .errorbox-container .btn-primary.submit-button:active,
    .element-returnshop .btn-primary:not(:disabled):not(.disabled):active,
    .element-returnshop .btn-primary:active {
        font-size: 1.4rem;
        width: 100%;
    }
    
    .offer-block {
        text-align: left;
        margin-left: 1em;
    }

    .offer-block label {
        margin-left: 0;
    }

    .dropdown-help {
        top: 3.5em;
        left: -4em;
    }
    
    .help-block-corner {
        left: 94%;
    }

    .sbp-result-container .qrcode-container {
        margin-top: 0;
    }

}

@media (max-width: 440px) {

    .qrcode-scan-msg .qrcode-bankslist-title {
        font-size: 1.1rem;
        height: 36px;
        line-height: 22px;
    }

}

@media (max-width: 420px) {

    input,
    select {
        font-size: 1.1rem;
    }

    fieldset.card-item {
        padding: 0 8px;
    }
    
    .front-side,
    .back-side {
        padding: 30px 10px 20px 10px;
    }
 
    .element-phone label {
        margin-left: 0.7em;
    }

    .authorizerPhone {
        margin-right: 0.6em;
        width: 13.58em;
    }

    .phone-with-help {
        margin-right: 2.65em;
        width: 10.6em;
    }

    select.month,
    select.year {
        width: 6em;
    }
    
    .input-for-select-month,
    .input-for-select-year {
        width: 6em;
    }
    
    .input-for-select-year {
        left: 7.35em;
    }
    
    .element-holder input {
        width: 13.45em;
    }

    .form-fields label {
        font-size: 1rem;
    }

    .line .head,
    .line .value {
        font-size: 0.94rem;
        padding-left: 14px;
        padding-right: 8px;
    }

    .line .value {
        padding-left: 6px;
    }

    h1.success {
        font-size: 1.35rem;
    }

    .offer-block {
        margin-left: 0.5em;
    }

    .dropdown-help {
        left: -5em;
    }
    
    .help-block-corner {
        left: 91%;
    }

    .submit-button {
        padding: 0 40px;
    }

    .qrcode-scan-msg p {
        font-size: 1rem;
    }

    .contract-info.st-only {
        font-size: 1rem;
    }

    .line {
        height: 44px;
        line-height: 44px;
    }

    .qrcode-scan-findbank .field-wrapper {
        padding: 2px 0;
    }

    .white-block.qrcode-commission-info.st-only {
        margin: 16px 0 20px 0;
    }

}

@media (max-width: 382px) {

    .tip-yellowsimple .tip-inner {
        font-size: 11px;
    }

    .front-side {
        height: 350px;
    }

    .back-side {
        height: 272px;
    }

    .element-cardexp label,
    .element-cardexp input,
    .holderfield-title,
    .holderfield-container,
    .cardexpfield-title,
    .cardexpfield-container,
    .element-holder label,
    .element-holder .controls,
    .element-holder input {
        width: 100%;
    }

    .element-holder label,
    .element-exp label {
        padding-top: 0;
        margin-top: -5px;
    }

    .element-exp .controls,
    .element-phone label,
    .element-phone .controls,
    .element-phone input {
        float: left;
        width: 100%;
    }

    .phone-with-help {
        width: 88% !important;
    }
    
    .help-inline-img {
        left: 90%;
    }
    
    .element-phone label,
    .element-phone input {
        margin: 0;
    }

    select.month,
    select.year {
        width: 45%;
    }
    
    select.year {
        float: right;
    }
    
    .input-for-select-month,
    .input-for-select-year {
        width: 45%;
    }
    
    .input-for-select-year {
        left: 54%;
    }
    
    .exp-delimiter {
        left: 3px;
    }
    
    .footer-icons .iconwrap img {
        width: 56px;
    }
    
    .element-cvv2 label {
        margin-left: 0;
    }

    .transinfo .left {
        font-size: 1.5rem;
    }
    
    .rubsign,
    .linked-cards-pan {
        font-size: 1.46rem;
    }
    
    .new-card-title {
        font-size: 1.1rem;
    }

    .samsungpay-button img {
        width: 85%;
    }

    .card-pan-img {
        right: 4px;
    }

    .line .head,
    .line .value {
        font-size: 0.83rem;
    }

    .offer-block label {
        margin-left: -0.45em;
    }
    
    .linked-cards-disabled-text {
        font-size: 0.65em;
        padding-left: 4px;
    }

    .linked-cards-typename {
        font-size: 1em;
    }
    
    .linked-cards-pan {
        padding-left: 4px;
    }
    
    .timercountdown .timertext {
        font-size: 1.05rem;
    }

    .btn-primary.submit-button {
        line-height: 20px;
    }

    .googlePayContainerThreeButtons,
    .samsungPayContainerThreeButtons {
        margin-top: 8px !important;
    }

    .googlePayContainerThreeButtons .gpay-button {
        background-size: 42% !important;
    }

    .dropdown-help {
        left: inherit;
        right: 0.2em;
        top: 3.7em;
    }
    
    .help-block-corner {
        left: 93%;
    }

    .element-cvv2 .controls {
        right: 9.4em;
    }

    .submit-button {
        padding: 0 20px;
        font-size: 1.2rem;
    }

    .line .head,
    .line .value {
        padding-left: 6px;
        padding-right: 1px;
    }

    .line .value {
        padding-left: 2px;
    }

}