.vr-xform { max-width: 375px; width: auto; background: #fff; }
.vr-xform ._vr-contents { padding: 25px 0 1px 0 /* 1px - fix bottom margin */ }
.vr-xform ._vr-header { font: 700 22px/26px geometria, arial; text-align: center; box-shadow: none;  }


@media screen and (min-width:501px) {
  .vr-xform { border-radius: 5px; }
  .vr-xform ._vr-header { border-radius: 5px 5px 0 0; }
}


.xform__field { margin: 0 0 21px 0; font: 0/0 a; padding: 0 35px 0 35px; position: relative; }
.xform__field--required:before { content: "*"; left: 17px; font: 17px/40px geometria, arial; color: #FF5A5A; position: absolute; }

.xform__field--warn-android { display: none; }

.xform__input { width: 100%; height: 35px; border-radius: 3px; font: 500 17px/18px geometria, arial; padding: 0 11px; border: 1px solid #ddd }
.xform__input:focus { border-color: #79befc; box-shadow: 0 0 0 1px #79befc; outline: none; }
textarea.xform__input { font-weight: 400; padding: 7px 11px 10px 11px; min-height: 75px; }

.xform__input-hint { font: 300 14px/17px geometria, arial; margin: 5px 0 -5px 12px; color: #666; }


.xform__ios-checkbox-label { display: inline-block; vertical-align: middle; font: 500 17px/18px geometria, arial; cursor: pointer; overflow: hidden;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}
.xform__ios-checkbox-name {  color: #999; margin: 0 0 0 5px; }
.xform__ios-checkbox { position: absolute; left: -9999px; }
.xform__ios-checkbox-i { position: relative; display: inline-block; width: 44px; height: 23px; border-radius: 30px; background: #ccc; vertical-align: middle; }
.xform__ios-checkbox-i:before { transition: left ease 150ms, background-color 200ms; content: ""; position: absolute; top: 1px; left: 1px; width: 21px; height: 21px; background: #fff; border-radius: 50%;  }
.xform__ios-checkbox:checked + .xform__ios-checkbox-i { background: #7CEA6E; }
.xform__ios-checkbox:checked + .xform__ios-checkbox-i:before { left: 22px; }
.xform__ios-checkbox:checked ~ .xform__ios-checkbox-name { color: #4FBF40; }

.xform__field--info { background: #eee; font: 400 14px/17px geometria, arial; text-align: center; padding: 12px 0; }
.xform__field--info > a { text-decoration: underline; }

.xform__field--min > textarea.xform__input { min-height: 155px; }


@supports (transform: rotate(-90deg)) {
  .xform__field--min:after { content: attr(data-min); white-space: nowrap; transform: rotate(-90deg); transform-origin: top left; text-align: right; position: absolute; left: 18px; bottom: 0; font: 300 12px/14px geometria, arial; color: #666; }
}

.xform__field--images { margin: 0; min-height: 86px; padding-right: 15px; text-align: center; }
.xform__field--images.xform__field--required:before { line-height: 78px; }

.xform__image { border-radius: 3px; position: relative; width: 85px; margin: 0 16px 16px 0; height: 70px;  display: inline-block; vertical-align: top }
.xform__image--empty, .xform__image--uploading { background: url(i/image.svg); }
.xform__image--empty { cursor: pointer; transition: background-color 300ms; }
.xform__image--empty.xform__image--start:before { content: "главная"; text-align: center; position: absolute; left: 0; right: 0; bottom: 6px; font: 13px/18px geometria, arial; color: #B5B5B5; }
.xform__image--empty.xform__image--receipt:before { content: "фото чека"; text-align: center; position: absolute; left: 0; right: 0; bottom: 6px; font: 13px/18px geometria, arial; color: #B5B5B5; }
.xform__image--empty.xform__image--selfie:before { content: "селфи"; text-align: center; position: absolute; left: 0; right: 0; bottom: 6px; font: 13px/18px geometria, arial; color: #B5B5B5; }
.xform__image--empty:hover { background-color: #fafafa; }
.xform__image--uploading { text-align: center; padding: 28px 0 0 0; }


@keyframes xform-preloader {
  to{transform:rotate(1turn) translatez(0)}
}

.xform__image--uploading:after { content: ""; height: 26px; width: 26px; border-width: 2px; border-style: solid; border-color: #00aeef #00aeef rgba(0,174,239,.32) rgba(0,174,239,.32); border-radius: 100%; animation: _preloader .5s linear infinite; position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px; z-index: 1;}

.xform__image--uploading:before { content: attr(data-percent); font: 500 11px/18px geometria, arial; background: #fff; padding: 10px 10px 10px 13px; }
.xform__image--uploaded { background-size:cover }

.xform__image-remove { position: absolute; border-radius: 0 3px 0 0; right: 0; top: 0; width: 25px; height: 25px; background: rgba(0,0,0,0.3) url(i/remove.svg) no-repeat 50% 50%; cursor: pointer; }


.xform__sms-phone {  width: 50%; }
.xform__sms-wrap { width: 50%; display: inline-block; vertical-align: top; padding: 0 0 0 10px; }
.xform__sms-code { display: none; }
.xform__sms-send { background: #FFEA6B; transition: background-color 300ms; border-radius: 3px; font: 500 17px/18px geometria, arial; text-align: center; width: 100%; border: 0; cursor: pointer; height: 35px; }
.xform__sms-send:hover { background-color: #F6E169; }

.xform__sms-hint { text-align: center; }

.vr-xform-resend { color: #0066ff; text-decoration: underline; cursor: pointer; }
.vr-xform-resend:hover { color: #ff0000; }

.xform__field--sms-sent .xform__sms-send { display: none; }
.xform__field--sms-sent .xform__sms-code { display: block; }

.xform__save { transition: background-color 200ms; cursor: pointer; background: var(--button-bg-hover); height: 42px; width: 100%; font: 700 22px/27px geometria, arial; color: #fff; border: 0; border-radius: 3px; }

@media screen and (min-width:501px) {
  .xform__input:hover { border-color: #79befc; box-shadow: 0 0 0 1px #79befc; }
  .xform__save:hover { background: var(--button-bg-hover); }
  .xform__save:active { line-height: 45px; }
}



/* mark */

@keyframes xform__mark-animation {
  50% { box-shadow: 0 0 20px rgba(0,0,0,0.2); }
}

.xform__field--mark { margin-bottom: 26px; }
.xform__field--mark-hidden { position: absolute; left: -9999px; top: -9999px; }

.xform__mark-show-all { display: block; text-align: center; padding: 15px 0 25px 0; margin: -25px 0 0 0; cursor: pointer }
.xform__mark-show-text { display: inline-block; font: 15px/15px geometria, arial; border-bottom: 1px dashed; color: #0066ff; }

.xform__marks { margin-bottom: 35px; }
.xform__mark-title { font: 400 15px/15px geometria, arial; text-align: center; margin: 0 0 18px 0;}
.xform__mark-title--required:after { content: "*"; font: 17px/13px geometria, arial; color: #FF5A5A; position: absolute; margin: 0 0 0 5px; }

.xform__mark { position: relative; height: 7px; border-radius: 3px; background: #ccc; }

.xform__mark-slider {  position: absolute; margin: -32px 0 0 0; padding: 20px 0; }
.xform__mark-slider-text, .xform__mark-dummy {  width: 90px; white-space: nowrap; overflow: hidden; transition: background-color 300ms, width 150ms; text-align: center; font: 400 15px/28px geometria, arial; border-radius: 100px; padding: 0 7px; border: 1px solid #ddd;  height: 30px; cursor: pointer; background: #fff; }
html:not(.xform--mark-grabbing) .xform__mark-slider { transition: left ease 200ms; }
.xform__mark-slider-text:before { content: attr(data-default); }
.xform__mark--glue .xform__mark-slider-text { animation: xform__mark-animation ease 2000ms infinite; }


.xform__mark-dummy { position: absolute; left: -999999px !important; top: -99999px !important; width: auto !important; }


.xform__mark[data-mark="default"] > .xform__mark-slider { left: 30%; left: calc(50% - 90px / 2); }




.xform__mark[data-mark="1"] .xform__mark-slider-text { background: #FF1B00; color: #fff; border: 1px solid #fff; box-shadow: 0 0 0 1px #fff; }
.xform__mark[data-mark="2"] .xform__mark-slider-text { background: #ff6c00; color: #fff; border: 1px solid #fff; box-shadow: 0 0 0 1px #fff;  }
.xform__mark[data-mark="3"] .xform__mark-slider-text { background: #ffcc00; color: #fff; border: 1px solid #fff; box-shadow: 0 0 0 1px #fff;  }
.xform__mark[data-mark="4"] .xform__mark-slider-text { background: #b0e020; color: #fff; border: 1px solid #fff; box-shadow: 0 0 0 1px #fff;  }
.xform__mark[data-mark="5"] .xform__mark-slider-text { background: #33cc00; color: #fff; border: 1px solid #fff; box-shadow: 0 0 0 1px #fff;  }


.xform__mark[data-mark="1"] .xform__mark-slider-text:before { content: attr(data-mark1) }
.xform__mark[data-mark="2"] .xform__mark-slider-text:before { content: attr(data-mark2) }
.xform__mark[data-mark="3"] .xform__mark-slider-text:before { content: attr(data-mark3) }
.xform__mark[data-mark="4"] .xform__mark-slider-text:before { content: attr(data-mark4) }
.xform__mark[data-mark="5"] .xform__mark-slider-text:before { content: attr(data-mark5) }



@media screen and (min-width:501px) {
  .xform--mark-grabbing { cursor: grabbing !important; cursor: -webkit-grabbing !important; }
  .xform--mark-grabbing .xform__mark-slider-text { cursor: grabbing; cursor: -webkit-grabbing !important;}
}

@media screen and (min-width:375px) {
  .xform__field--mark { padding-left: 50px; padding-right: 50px; }
}

.xform__field--left { padding-left: 35px; padding-right: 45px; }
.xform__field--left .xform__mark-title { text-align: left; padding-left: 11px; }
.xform__field--left .xform__mark[data-mark="default"] > .xform__mark-slider { left: 0 }


/* mobile */


@media screen and (max-width:500px) {
  .vr-xform { max-width: 100%; width: 100%; margin: 0 !important; padding-bottom: 80px; }
}

@media screen and (max-width:374px) {
  .xform__field { padding-left: 20px; padding-right: 20px; }
  .xform__field--required:before { left: 7px; }
  .xform__field--info br { display: none; }
  .xform__field--images { padding-right: 0; }
  .xform__image { margin-right: 12px; }

  .xform__field--left { padding-left: 20px; padding-right: 30px; }

}