@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i&display=swap&subset=cyrillic-ext');

html{height:100%; background: #fff}
body{position:relative; margin: 0; padding: 0; width:100%; min-height:100%; font: 400 14px/1.5 'Roboto', serif}

html{display: flex; justify-content: center; align-items: center; min-height: 600px;}
body{margin: 0 auto; width: auto; max-width: 1000px; min-height: 0; }

a{cursor: pointer}

ul, ol{position:relative; margin: 7px 0; padding: 0}
ul li, ol li{ list-style-type:disc; margin:0px 0px 0 24px; padding: 7px 0; position:relative}
ol li{list-style-type:decimal}

nav ul, nav li{margin:0; padding:0; list-style:none}

sub, sup{display:inline; vertical-align:baseline; font-size:70%}
sup{position:relative; top:-4px; text-decoration:underline}

strong, b{font-weight:700}

table{border:solid 0px #CCC; margin:12px 0; width:100%; border-collapse: collapse}
table td{padding:7px 12px; vertical-align:middle; border:solid 1px #CCC}
table thead td{font-weight:bold; background:#EEE}
table tbody tr:nth-child(even){background:#faf9f6}
table table, table table td{border:none}

.loading{position: relative; cursor: default; text-shadow: none !important; color: transparent !important; opacity: 1; pointer-events: auto; transition: all 0s linear, opacity 0.1s ease}
.loading:before {position: absolute; content: ''; top: 50%; left: 50%; margin: -12px 0 0 -12px; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.17)}
.loading:after {position: absolute; content: ''; top: 50%; left: 50%; margin: -12px 0 0 -12px; box-sizing: border-box; width: 24px; height: 24px; animation: loading-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 50%; border-color: #000 transparent transparent; border-width: 2px; border-style: solid}

@keyframes loading-spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
    }

form .field{margin:0 0 17px; overflow:auto; position:relative}
form .field:last-child{margin: 0}
form .field .label-err{display:none; color:#d32f2f; padding:3px 0 0; padding-left:190px}
form .field .label-err.show{display: block;}
form .field .label{display:block; float:left; width:160px; padding-top:8px; text-align:right; font-weight: 400}
form .field .value{margin-left:190px}
form .field .value.text{padding-top:8px}
form .field .note{opacity: .5; margin-left:190px}

form .field.checkbox .checkbox-text{vertical-align:middle; display:inline; border-bottom:dotted 1px; cursor:pointer; opacity:.65; user-select: none; -moz-user-select: none}
form .field.checkbox input:checked + .checkbox-text{opacity:1}
form .field.checkbox label{display:inline-block; vertical-align:top; margin-bottom:0; margin-right: 7px}

form .buttons{padding-left: 190px; padding-top: 12px}
form .field.error input, form .field.error select, form .field.error textarea{border-color:#d32f2f; background: rgb(255, 235, 235)}


input, select, textarea{font:400 14px 'Roboto', Tahoma, Helvetica, Arial, sans-serif; color:#333; transition:all .2s linear; border-radius: 3px}
textarea{resize:vertical}
input[type=text], input[type=number], input[type=password], textarea, select{width:100%; padding:9px 17px; margin:0; box-sizing:border-box; border:solid 1px #526376}
input[type=text]:focus,input[type=number]:focus, input[type=password]:focus, textarea:focus, select:focus{border-color:#283747}
input[type=checkbox]{display:inline-block; vertical-align:top; margin:5px 5px 0 0}

.btn{cursor:pointer; display: inline-block; min-height: 1em; outline: none; border: solid 1px rgba(0, 0, 0, 0.1); vertical-align: top; background: #E0E1E2; color: rgba(0, 0, 0, 0.85); padding: 12px 22px; font-weight: bold; line-height: 1em; border-radius: 2px; font:400 15px/1 Roboto; text-decoration:none; transition:all .2s linear}
.btn:hover{opacity:.9}
.btn.primary{background:#c92747; color:#FFF; border-color:transparent}
.btn.primary:disabled{background:rgb(207, 96, 96); cursor:default}
.btn.primary:disabled:hover{opacity:1}
.btn.primary.loading:before {border-color: rgba(255,255,255,.5)}
.btn.primary.loading:after{border-color: rgba(163,0,2,1.00) transparent transparent}

.green{color:#009640}
.red{color:#e31e24}
.text-border{border:1px solid #eee; padding:22px}

.wr{position:relative; width:1300px; box-sizing:border-box; padding:0 20px; margin:0 auto}
.nobr{white-space:nowrap}

.justifyleft{float:left}
.justifyright{float:right}
.m-left{margin-left:12px}
.m-right{margin-right:12px}
.clear{clear: both;}
.img-responsive{width:100%; height: auto;}

.pay-select{padding: 12px 22px}
.pay-select .line{margin: 22px 0 52px; position: relative; padding-left: 50px}
.pay-select .line .icon{position: absolute; left: 0; top: 0; font-size: 26px; color: #333}
.pay-select .line .title a{color: #000; text-decoration: none; font-size: 17px; font-weight: 700; display: inline-block}
.pay-select .line .title .value{border-bottom: solid 1px rgba(0, 0, 0, .32)}
.pay-select .line .title .letter{font-size: 15px; font-weight: 300; display: block}
.pay-select .line:hover .icon{color: #c92747}
.pay-select .line:hover a{color: #c92747}

.pay-labels{height: 28px; margin: 22px 0; opacity: .75; background: url(images/payments.png) 22px center no-repeat; background-size: contain}

.payment-frm {display: block; margin: 0 0 20vh; padding: 32px; font-size: 15px; background: #f1f1f1; border-radius: 7px;}
.payment-frm select[name=street]{max-width: 320px}
.payment-frm select[name=house]{max-width: 210px}
.payment-frm input[name=flat]{max-width: 80px}
.payment-frm input[name=summ]{max-width: 110px}
.payment-frm input[name=keycode]{max-width: 220px}
.payment-frm input[name=keys]{max-width: 80px}
.payment-frm .error-message{color: #d32f2f; padding: 0 0 0 190px; display: none}
.payment-frm .error-message.nopadding{padding: 0}
.payment-frm .error-message.show{display: block}
.payment-frm .balance .value{font-weight: 700}
.payment-frm span.loading{width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin: -3px 12px 0 0}
.payment-frm .masked .hide-simbol{opacity: .35; margin: 0 1px}
.payment-frm .masked .value{font-size: 17px; }
.payment-frm .masked .value.text{padding-top: 5px}
.payment-frm .address.suggest{overflow: visible}

.payment-frm input[name=phone]{max-width: 210px}
.payment-frm input[name=name]{max-width: 320px}
.payment-frm .add-phones-link{display: inline-block; padding: 12px 0; text-decoration: none}
.payment-frm .add-phones-link span{border-bottom: dotted 1px}
.payment-frm .add-phones-template{display: none}
.payment-frm .add-phones-area .number{margin: 0 0 17px}
.payment-frm .add-phones-area .number:last-child{margin-bottom: 0}
.payment-frm .add-phones-area .number input{max-width: 210px}
.payment-frm .add-phones-area .number a.remove{display: inline-block; margin: 0 0 0 12px; opacity: .5}
.payment-frm .add-phones-area .number a.remove:hover{opacity: 1;}

.payment-frm .field.services label{display: block; margin: 0 0 12px;}
.payment-frm .field.services label:last-child{margin-bottom: 0;}

.payment-frm.extra .field.services .image{margin: 0 0 20px;}
.payment-frm.extra .field.services .image a{line-height: 0;}
.payment-frm.extra .field.services .image img{max-height: 80px; width: auto; position: relative;}

.pagination{display:block; margin:30px 0; padding:0; overflow:auto; font-size:15px; line-height:20px}
.pagination .right{float:right}
.pagination .right *{background:#fff; margin-right: 0}
.pagination .right span{color:#999; display:inline-block; padding:3px 8px 5px; margin:1px}
.pagination .right .prev{margin-right:3px}
.pagination a{display:inline-block; padding:4px 8px 4px; margin:1px 7px 1px 1px; border-radius:3px; text-decoration:none; color: #333; border: solid 1px #ccc}
.pagination a.cur{background:#e61e28; text-decoration:none; color:#FFF; border-color: #e61e28}
.pagination a:hover{background:#e61e28; color:#FFF; border-color: #e61e28}

#logo{text-align: center; display: block; line-height: 0; text-decoration: none; margin: 0 0 32px;}

@media screen and (max-width: 640px) {
    
    body{min-width: auto; width: auto}
    .wr{width: auto; padding: 0 12px}
    
    h1:first-child{font-size: 1.5em}
    
    table td{padding:2px 4px; vertical-align:middle; border:solid 1px #CCC; font-size: 12px}

    form .field .label{width: 100%; padding: 0 0 4px; text-align: left; float: none}
    form .field .value{margin: 0}
    form .field .note{margin: 0}
    form .field .value.text{padding: 0}
    form .buttons{padding-left: 0}
    form .field .label-err{padding-left: 0}


    .payment-frm .error-message{padding-left: 0}
    .payment-frm .error-message{padding-left: 0}
    }