body { font-family: 'Muller', sans-serif; }
.container {max-width: 980px;margin: 60px auto;padding: 60px 60px;background: #fff;}
.color { color: #1E92FD; }
.red {color:red}
.green {color:green}
.blue {color:blue}
.opacity { opacity: 0.6; }
p { font-weight: 400; margin-bottom: 12px; }
p:last-child { margin-bottom: 0; }
.text a { color: #FFAA2A; text-decoration: underline; }
.text a:hover { text-decoration: none; }
sup { position: absolute; margin-top: -2px; }
.center { text-align: center; }

.editor::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); border-radius: 4px; background-color: #ffffff; }
.editor::-webkit-scrollbar{ width: 4px; background-color: #F5F5F5; }
.editor::-webkit-scrollbar-thumb{ border-radius: 4px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2); background-color: #e8e8e8; }

a.btn.btn-inverse { background: transparent; border: 1px solid #1E92FD; height: 56px; }
a.btn.btn-inverse span { font-size: 14px; line-height: 19px; color: #1E92FD; padding: 0 39px; text-transform: uppercase; }
a.btn.btn-inverse:hover { background: #1E92FD; }
a.btn.btn-inverse:hover span { color: #fff; }

/* H1 */
h1 {font-weight: 400;color: #000;font-size: 28px;line-height: 34px;display: flex;align-items: center;justify-content: center;text-align: center;}
h1 img {margin-right: 16px;max-width: 110px;max-height: 80px;}

/* BTN */
a.btn {background: #1E92FD;border-radius: 8px;display: inline-block;position: relative;height: 68px;transition: 0.25s ease;overflow: hidden;}
a.btn:hover {box-shadow: 0px 4px 12px #1e92fd;}
.mini { font-size: 16px; line-height: 19px; font-weight: 500; display: block; margin-top: 8px; margin-bottom: -5px; }
a.btn > span {display: flex;height: 100%;width: 100%;align-items: center;justify-content: center;flex-direction: column;font-weight: bold;font-size: 17px;text-align: center;color: #fff;padding: 0;padding: 0 34px;t: 19px;}
a.btn:active { box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); transition: 0.2s; }
a.btn:before {content: '';background: url(/static/img/icon-btn-light.svg);background-size: auto 100%;background-repeat: no-repeat;position: absolute;left: -70px;height: 100%;width: 77px;-webkit-animation: slide 3s ease-in-out .4s infinite;animation: slide 3s ease-in-out .4s infinite;}
@-webkit-keyframes slide { 0% { left: -70px } 40% { left: 100%; } to { left: 100%; } }
@keyframes slide { 0% { left: -70px } 40% { left: 100%; } to { left: 100%; } }

/* END */
.end { display: none; }
.after-send .container > form { display: none; }
.after-send .end { display: block; text-align: center; }


#site {background: #F5F9FC;overflow: hidden;min-height: 100%;}
#site:not(.main-active) .main-btn a.btn { filter: grayscale(1); opacity: 0.6; }
.header {text-align: center;margin-bottom: 60px;}
h3 {line-height: 28px;font-size: 21px;font-weight: 400;margin-top: 20px;}
.title {color: #5BBB4F;font-size: 26px;line-height: 30px;font-weight: 500;}
.subtitle {font-weight: 400;margin-top: 12px;}
.num span { display: flex; width: 44px; height: 44px; background: #dddddd; border-radius: 50%; align-items: center; justify-content: center; font-size: 22px; color: #fff; padding: 2px 0 0 0; position: relative; z-index: 1; }
.step { display: flex; }
.num { margin-right: 29px; position: relative; }
.content {padding-top: 8px;margin-bottom: 50px;flex: 1 0;}
.num:before {content: '';width: 2px;height: 100%;background: #ddd;position: absolute;left: 0;right: 0;margin: auto;}
.step:last-child .num:before { display: none; }
.input input {width: 100%;padding: 16px 20px 14px;margin: 0 0 0 0;border: 1px solid #ddd;border-radius: 5px;transition: 0.3s ease;font-weight: 400;font-size: 18px;width: 265px;font-family: 'Muller', sans-serif;}
.input-or {text-align: center;margin: 8px 0;}
.input input:hover, .input input:focus, textarea:hover, textarea:focus { border-color: #5bbb4f; }
.step-good .num::before { background: #5bbb4f; }
.step-good .num span {background-color: #5bbb4f;font-size: 0;background-image: url(/static/img/good.svg);background-size: 19px;background-position: center;background-repeat: no-repeat;}

.content-container { position: relative; }
.red-error {position: absolute;bottom: -38px;display: none;color: #f70808;left: 0;}
.need-select .red-error { display: block; }
.need-select .content-container {margin-bottom: 35px;}

.info { flex: 1 0; }
.step[data-type="input"] .content-container, .step[data-type="stars"] .content-container { display: flex; }
.step[data-type="input"] .info, .step[data-type="stars"] .info {margin-right: 16px;}


.stars {display: flex;margin-right: 12px;}
.stars > input { display: none; }
.star-name {display: none;position: absolute;bottom: -38px;white-space: nowrap;left: calc(50% - 6px);transform: translate(-50%, 0px);}
.star-start {display: none;position: absolute;bottom: -60px;white-space: nowrap;left: 50%;transform: translate(-50%, 0px);text-align: center;}
.star-icon {width: 50px;height: 48px;background: url(/static/img/grey.png);}

.star {padding-right: 12px;cursor: pointer;position: relative;}
.star:last-child { margin: 0; }
.star.hover .star-icon,
.stars:not(.hovered) .star.active .star-icon { background: url(/static/img/gold.png); }
.star:hover .star-name { display: block; }
.hover-start .star-start { display: block; }


.input-radio { display: flex; margin-bottom: 16px; cursor: pointer; }
label.input-radio:last-child { margin: 0; }
.input-radio input { display: none; }
.input-left { display: inline-block; vertical-align: top; width: 28px; height: 28px; border: 1px solid #5BBB4F; box-sizing: border-box; border-radius: 50%; margin-right: 12px; position: relative; top: -1px; flex-basis: 28px; flex-grow: 0; flex-shrink: 0; }
.input-left:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; background: #5BBB4F; border-radius: 50%; transition: ease 0.1s; width: 6px; height: 6px; opacity: 0; }
input[type='radio']:checked + .input-left:before { width: 16px; height: 16px; opacity: 1; }
.input-text {display: inline-block;margin-top: 3px;}
.variable {margin-top: 22px;}
.step[data-type="input"] .variable,
.step[data-type="stars"] .variable { margin: 0; }
.input-left svg { display: none; width: 65%; }
input:checked + .input-left svg { display: block; }
.input-left path { fill: #5BBB4F; }
.checkbox .input-left,
.big-checkbox .input-left { display: flex; align-items: center; justify-content: center; border-radius: 4px; }


.stars-good { text-align: center; display: none; }
.stars-bad { display: none; }
textarea {width: 100%;padding: 16px 20px 14px;margin: 0 0 0 0;border: 1px solid #ddd;border-radius: 5px;transition: 0.3s ease;font-weight: 400;font-size: 18px;line-height: 24px;font-family: 'Muller', sans-serif;min-width: 100%;max-width: 100%;height: 100px;min-height: 80px;}
.stars-bad, .stars-good {margin-top: 29px;}
.stars-good-text {margin-bottom: 26px;}
.stars-active-bad .stars-bad,
.stars-active-good .stars-good { display: block; }
.stars-btns svg { position: absolute; transform: scale(0.8) rotate(26deg) translate(-23px, -30px); }


.big-input-content {display: flex;min-height: 60px;align-items: center;}
label.big-input-radio { border: 1px solid #5bbb4f; display: block;position: relative; margin-bottom: 20px; border-radius: 6px; padding: 18px; transition: 0.2s ease; cursor: pointer; }
.big-title { font-weight: 500; }
.big-img {width: 120px;height: 100%;min-width: 120px;flex-basis: 120px;display: flex;align-items: center;justify-content: center;}
.big-val { white-space: nowrap; text-align: center; font-weight: 500; flex: 1 0; }
.big-input-content > *:not(:last-child) { margin-right: 19px; }
label.big-input-radio:not(.big-input-haveval) .big-text { flex: 1 0; }
.big-input-content input { display: none; }
.big-input-radio:not(.big-input-havetext):not(.big-input-haveval) .big-title { flex: 1 0; }
label.big-input-radio:hover { box-shadow: 0px 0px 16px rgb(0 0 0 / 30%); }


.step[data-type="bigcheckbox"] .input-radio, .bottext { margin: 36px 0; }
.step[data-type="bigcheckbox"] .input-radio:last-child, .bottext:last-child { margin-bottom: 0 !important; }
.main-btn { text-align: center; margin: 16px 0 36px; }
.garantiya { margin: 14px 0 0; }


.d-2 { color: #5BBB4F; border-bottom: 1px dashed #5BBB4F; display: inline-block; line-height: 15px; position: relative; top: 2px; }
.dop-add:hover .d-2 { border-color: transparent !important; }
.d-1 {display: inline-block;width: 24px;height: 24px;border-radius: 50%;border: 1px solid  #5BBB4F;vertical-align: middle;margin-right: 7px;position: relative;}
.dop-add { display: inline-block; cursor: pointer; vertical-align: middle; }
.line-textarea {display: flex;margin-bottom: 8px;align-items: flex-start;}
.dop-textarea { width: 100%; }
.dop-textarea + .dop-textarea { margin-left: 16px; }
.dops-textarea { margin: 28px 0 0 0; display: none; }
.dops-textarea.active { display: block; }
.dop-remove svg { width: 12px; height: 12px; }
.dop-remove { padding: 8px 3px 0 11px; cursor: pointer; }
.dop-remove:hover { opacity: 0.7; }
span.d-1 svg { width: 12px; height: 12px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }
.line-textarea:first-child .dop-remove { opacity: 0; visibility: hidden; pointer-events: none; }
.dop-remove path { fill: red; }

input + * + .big-active { border: 2px solid #5bbb4f; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 6px; opacity: 0; }
input:checked + * + .big-active { opacity: 1; }

@media (max-width: 1020px) {
    .container {margin-top: 0;border-radius: 0 !important;max-width: none;}
}
@media (max-width: 1000px) {
    .container { padding: 50px 30px; }
}
@media (max-width: 890px) {
    body { line-height: 20px; font-size: 16px; }
    .title { font-size: 24px; line-height: 28px; }
    .num { margin-right: 18px; }
    h1 { font-size: 24px; line-height: 30px; }
    h3 { line-height: 26px; font-size: 20px; margin-top: 16px; }
    .header { margin-bottom: 48px; }
    .star-icon {width: 36px;height: 34px;background-size: 100% auto !important;}
    .content {margin-bottom: 36px;}
    .big-img {width: 90px;min-width: 90px;flex-basis: 90px;}
    .main-btn { margin: 36px 0 42px; }
    .step[data-type="bigcheckbox"]:last-child .variable { width: calc(100% + 62px); left: -62px; position: relative; }
    .stars-btns a.btn > span { font-size: 16px; padding: 0 25px; }
    .stars-btns .btn { height: 60px; }
    .stars-btns svg { transform: scale(0.7) rotate( 26deg ) translate(-36px, -35px); }
    .star-start { bottom: -53px; }
    .star-name { bottom: -33px; }
    .input-text { margin-top: 4px; }
    .input input { font-size: 16px; }
    textarea { font-size: 16px; line-height: 22px; }
    .big-text { text-align: left; }
}
@media (max-width: 840px) {
    .line-textarea { flex-direction: column; margin-right: 20px; position: relative; margin-bottom: 11px; }
    .dop-textarea + .dop-textarea { margin: 0; }
    .dop-remove { position: absolute; right: -21px; top: 0; }
    .dop-textarea textarea { height: 80px; }
}
@media (max-width: 870px) {
    .big-input-content {margin-left: 28px;flex-direction: column;text-align: center;}
    .big-input-content .input-left { position: absolute; left: 10px; top: 0; bottom: 0; margin: auto !important; }
    label.big-input-radio { position: relative; }
    .big-img { height: auto; flex-basis: auto; }
    .big-input-content > * { margin: 0 0 12px 0 !important; }
    .big-input-content > *:last-child { margin: 0 !important; }
    .big-title { display: flex; align-items: center; }
}
@media (max-width: 680px) {
    .step[data-type="input"] .content-container,
    .step[data-type="stars"] .content-container { display: block; }
    .step[data-type="input"] .info,
    .step[data-type="stars"] .info { margin: 0; }
    .variable { margin-top: 22px !important; }
    .step[data-type="input"] .variable { display: inline-block; }
    .title { font-size: 22px; line-height: 25px; }
    .num span {width: 40px;height: 40px;font-size: 20px;background-size: 17px !important;}
    .step[data-type="stars"] .variable { margin-bottom: 59px; }
}
@media (max-width: 590px) {
    .container { padding: 40px 16px; }
    .num span {width: 32px;height: 32px;font-size: 18px;background-size: 14px !important;}
    .num { margin-right: 10px; }
    .content { padding-top: 6px; }
    .title { font-size: 20px; line-height: 23px; } h3 { line-height: 22px; font-size: 18px; margin-top: 13px; } h1 { font-size: 20px; line-height: 24px; display: flex; flex-direction: column; }
    h1 img { margin: 0 0 10px 0; max-width: 90px; max-height: 50px; }
    .step[data-type="bigcheckbox"]:last-child .variable { width: calc(100% + 48px); left: -48px; }
    label.big-input-radio { margin-bottom: 12px; }
    .step[data-type="bigcheckbox"] .input-radio, .bottext { margin: 26px 0; }
    .main-btn { margin: 22px 0 38px; }
    .stars-btns .btn { height: 54px; }
    .stars-btns a.btn > span { font-size: 15px; padding: 0 23px; }
    .step[data-type="bigcheckbox"]:last-child .variable { width: calc(100% + 42px); left: -42px; }
    a.btn { height: 62px; }
    a.btn > span { font-size: 16px; }
    textarea { padding: 12px 14px 12px; font-size: 14px; line-height: 20px; }
}
@media (max-width: 480px) {
    .container { padding: 30px 12px; }
    .num span {width: 28px;height: 28px;font-size: 16px;background-size: 12px !important;}
    .title { font-size: 19px; line-height: 20px; }
    h3 { line-height: 21px; font-size: 17px; margin-top: 8px; }
    .variable { margin-top: 18px !important; }
    .stars-btns .btn { height: 50px; }
    .stars-btns a.btn > span { font-size: 14px; padding: 0 21px; }
    .stars-btns svg { display: none; }
    .step[data-type="bigcheckbox"]:last-child .variable { width: calc(100% + 38px); left: -38px; }
    .stars { font-size: 13px; line-height: 16px; }
    .star-start { margin-left: -5px; bottom: -47px; }
    .star-name { bottom: -31px; }

    .input input { width: 100%; }
    .variable { width: 100%; }
}