@keyframes popup-right-life {
    0% {
        left: 100%;
    }
    9.09091% {
        left: 0%;
    }
    90.90909% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

@keyframes popup-left-life {
    0% {
        left: -100%;
    }
    9.09091% {
        left: 0%;
    }
    90.90909% {
        left: 0%;
    }
    100% {
        left: -100%;
    }
}

.comagic-widget--hidden {
    visibility: hidden;
}

.comagic-unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[c-draggable="x"] [c-dragger] {
    cursor: ew-resize;
}

[c-draggable="x"] [c-dragger] *:not([c-nodragger]) {
    cursor: ew-resize;
    pointer-events: none;
}

[c-draggable="y"] [c-dragger] {
    cursor: ns-resize;
}

[c-draggable="y"] [c-dragger] *:not([c-nodragger]) {
    cursor: ns-resize;
    pointer-events: none;
}

[c-draggable="xy"] [c-dragger] {
    cursor: move;
}

[c-draggable="xy"] [c-dragger] *:not([c-nodragger]) {
    cursor: move;
    pointer-events: none;
}

.comagic-full-screen-mode {
    min-height: 100%;
    max-height: 100%;
}

.comagic-lead {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100005;
}

.comagic-lead__work-area {
    margin-top: 7.9%;
}

.comagic-lead__info-area {
    padding-left: 9.6%;
    padding-right: 9.6%;
    padding-top: 7.9%;
}

.comagic-lead__image {
    margin-bottom: 4.3%;
    text-align: center;
}

.comagic-lead__image img {
    height: 122px;
    border-width: 1px;
    border: solid white;
    border-radius: 50%;
    display: block;
    margin: auto;
}

.comagic-lead__title {
    font-family: "Open Sans Comagic", sans-serif;
    text-align: center;
    font-weight: 600;
    font-size: 144%;
    line-height: 110%;
    margin-bottom: 2.2%;
}

.comagic-lead__message {
    font-family: "Open Sans Comagic", sans-serif;
    text-align: center;
    font-size: 92.5%;
    line-height: 145%;
}

.comagic-lead__work-area--personal-form .comagic-lead__image--personal-form {
    text-align: center;
}

.comagic-lead__work-area--personal-form .comagic-lead__image--personal-form img {
    display: block;
    margin: auto;
    width: 100%;
}

.comagic-lead__work-area--personal-form .comagic-lead__title {
    font-family: "Open Sans Comagic", sans-serif;
    text-align: center;
    font-weight: 600;
    font-size: 5.6vmin;
    line-height: 6.1vmin;
    margin-bottom: 1.7vmin;
    padding-left: 9.6vmin;
    padding-right: 9.6vmin;
}

.comagic-lead__work-area--personal-form .comagic-lead__message {
    font-family: "Open Sans Comagic", sans-serif;
    text-align: center;
    font-size: 3.6vmin;
    line-height: 5.1vmin;
    padding-left: 9.6vmin;
    padding-right: 9.6vmin;
    padding-top: 7.9vmin;
}

.comagic-lead__invite-step {
    display: none;
}

.comagic-lead__fields-wrapper {
    padding-left: 9.6%;
    padding-right: 9.6%;
    padding-top: 9.1%;
}

.comagic-lead__field-container {
    padding-top: 5%;
    padding-bottom: 5%;
}

.comagic-lead__field-wrapper {
    position: relative;
}

.comagic-lead__error-icon, .comagic-lead__error-tooltip {
    display: none;
}

.comagic-lead__field__input--select {
    background: url("//app2.comagic.ru/widget/images/lead/mobile/trigger-combobox.png") no-repeat;
    background-position: right 12px center;
}

.comagic-lead__field__select {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.comagic-lead__field__input {
    font-size: 144%;
    padding-bottom: 4%;
    border-radius: 0;
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid;
    outline: none;
    font-family: "Open Sans Comagic", sans-serif;
    font-weight: 300;
    text-indent: 3px;
}

.comagic-lead__field__textarea {
    font-size: 144%;
    padding-bottom: 4%;
    overflow: hidden;
    height: 27px;
    resize: none;
    display: block;
    border-radius: 0;
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid;
    outline: none;
    font-family: "Open Sans Comagic", sans-serif;
    font-weight: 300;
    text-indent: 3px;
}

.comagic-lead__field-wrapper:not(.comagic-error--hidden) {
    position: relative;
}

.comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__error-icon {
    position: absolute;
    display: block;
    background-image: url("//app2.comagic.ru/widget/images/lead/mobile/error-icon.svg");
    height: 15px;
    width: 15px;
    background-size: 100%;
    bottom: 50%;
    right: 0;
}

.comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__error-tooltip {
    display: block;
    color: #ff5433;
    font-size: 92.5%;
    margin-top: 2.7%;
}

.comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-input-select {
    background: url("//app2.comagic.ru/widget/images/lead/mobile/trigger-combobox.png") no-repeat;
    background-position: right 12px center;
}

.comagic-lead__button-area {
    bottom: 0;
    width: 100%;
}

.comagic-lead__main-button {
    display: block;
    text-align: center;
    outline: none;
    position: static;
    float: none;
    color: white;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: baseline;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    background-image: none;
}

.comagic-lead__main-button span {
    font-size: 116%;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.comagic-lead__button-close.comagic-personal-form {
    border-radius: 50%;
    background-color: #E7E9E9;
}

.comagic-lead__footer-area {
    -webkit-text-size-adjust: 100%;
    min-height: 1px;
    font-size: 97.7%;
    line-height: 145%;
    text-align: center;
    font-family: "Open Sans Comagic", sans-serif;
}

.comagic-lead__footer-area a {
    text-decoration: underline;
}

.comagic-lead__button-close {
    position: absolute;
    background-image: url("//app2.comagic.ru/widget/images/lead/mobile/close-button.svg");
    background-repeat: no-repeat;
    background-position: center;
    top: 4%;
    right: 4%;
    height: 32px;
    width: 32px;
    background-size: 50%;
}

.comagic-lead__mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
}

.comagic-lead__content {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    min-height: 32%;
    max-height: 87%;
    transition-property: min-height, max-height;
    transition-duration: 0ms;
    overflow: auto;
}

.comagic-lead__content.comagic-full-screen-mode {
    min-height: 100%;
    max-height: 100%;
}

.comagic-lead__dark {
    background-color: #232323;
}

.comagic-lead__dark .comagic-lead__message {
    color: #fff;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea {
    border-bottom-color: #ff5433;
    color: #ff5433;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-webkit-input-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
    color: #ff5433;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-moz-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-moz-placeholder {
    color: #ff5433;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-moz-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-moz-placeholder {
    color: #ff5433;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-ms-input-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-ms-input-placeholder {
    color: #ff5433;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__label--personal-info {
    color: #ff5433;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-webkit-input-placeholder {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
    color: #fff;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-moz-placeholder {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-moz-placeholder {
    color: #fff;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-moz-placeholder {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-moz-placeholder {
    color: #fff;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-ms-input-placeholder {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-ms-input-placeholder {
    color: #fff;
}

.comagic-lead__dark .comagic-lead__footer-area a {
    color: rgba(255, 255, 255, 0.6);
}

.comagic-lead__dark .comagic-lead__field__label--personal-info {
    color: #fff;
}

.comagic-lead__light {
    background-color: #fff;
}

.comagic-lead__light .comagic-lead__message {
    color: #000;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea {
    border-bottom-color: #ff5433;
    color: #ff5433;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-webkit-input-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
    color: #ff5433;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-moz-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-moz-placeholder {
    color: #ff5433;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-moz-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-moz-placeholder {
    color: #ff5433;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-ms-input-placeholder {
    color: #ff5433;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-ms-input-placeholder {
    color: #ff5433;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__label--personal-info {
    color: #ff5433;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea {
    border-bottom-color: rgba(0, 0, 0, 0.25);
    color: #000;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-webkit-input-placeholder {
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
    color: #000;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-moz-placeholder {
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-moz-placeholder {
    color: #000;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-moz-placeholder {
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-moz-placeholder {
    color: #000;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-ms-input-placeholder {
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: 70%;
}

.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-ms-input-placeholder {
    color: #000;
}

.comagic-lead__light .comagic-lead__footer-area a {
    color: rgba(0, 0, 0, 0.6);
}

.comagic-lead__light .comagic-lead__field__label--personal-info {
    color: #000;
}

.comagic-lead__field__input--personal-info {
    float: left;
    width: 4vw;
    height: 4vw;
    margin: 3px 3px 3px 4px;
}

.comagic-lead__field__label {
    font-family: "Open Sans Comagic", sans-serif;
    font-size: 89%;
}

.comagic-call-generator__block-delayed-call {
    display: flex;
}

.comagic-call-generator__field-delayed-call-day {
    margin-right: 5px;
}

.comagic-call-generator__field-delayed-call-time {
    margin-left: 5px;
}

.comagic-call-generator__linkbutton-delayed-call {
    display: block;
    margin-bottom: 15px;
}

@media screen and (min-aspect-ratio: 13 / 9) {
    .comagic-lead__content {
        min-height: 100%;
        max-height: 100%;
    }

    .comagic-lead__mask {
        min-height: 100%;
        max-height: 100%;
    }

    .comagic-lead__image {
        display: none;
    }

    .comagic-lead__button-area .comagic-lead__main-button {
        height: 100%;
        margin: 0 25% 5vmin 25%;
        border-radius: 20vmin;
    }

    .comagic-lead__button-area span {
        line-height: 285%;
    }

    .comagic-lead__footer-area {
        margin-top: -15%;
        margin-bottom: 5%;
    }

    .comagic-lead__field__label--personal-info {
        line-height: 225%;
    }

    .comagic-lead__work-area, .comagic-lead__work-area--personal-form {
        margin-bottom: 15%;
    }

    .comagic-lead__work-area--personal-form .comagic-lead__image--personal-form {
        display: none;
    }

    .comagic-lead__work-area--personal-form .comagic-lead__title {
        padding-top: 15.8vmin;
    }
}

@media screen and (max-aspect-ratio: 13 / 9) {
    .comagic-lead__button-area {
        position: fixed;
    }

    .comagic-lead__button-area .comagic-lead__main-button {
        height: 100%;
    }

    .comagic-lead__button-area span {
        line-height: 400%;
    }

    .comagic-lead__field__label--personal-info {
        line-height: 155%;
    }

    .comagic-lead__footer-area {
        margin-top: -20%;
        margin-bottom: 28%;
    }

    .comagic-lead__work-area, .comagic-lead__work-area--personal-form {
        margin-bottom: 25%;
    }

    .comagic-lead__work-area--personal-form .comagic-lead__title {
        padding-top: 7.9vmin;
    }
}
Comagic.UI.registerViewController('call_generator', function (settings, tpls) {
    var callGenerator = Comagic.UI.createWidget('call_generator', {
        settings: settings,
        id: settings['id'],
        template: tpls['call_generator'],
        _fields: {},
        _delayedCallProps: {},
        _delayedCallBlockState: null,
        _setFieldError: function (field, error) {
            field.classList.toggle('comagic-error--hidden', !error);
            if (field.classList.contains('comagic-combobox-field')) field.querySelector('.comagic-lead__field__input').classList.toggle('comagic-lead__field__input--select', !error);
            field.value = error || null;
        },
        _isValid: function () {
            var errors = callGenerator.getErrors() || {},
                _isValid = true;
            callGenerator._fieldWrapperEl && callGenerator._fieldWrapperEl.forEach(function (field) {
                var input = field.querySelector('input') || field.querySelector('textarea'),
                    error = errors[input.getAttribute('c-name')];
                if (error) {
                    _isValid = false;
                    callGenerator._setFieldError(field, true);
                }
            });
            return _isValid;
        },
        _init: function () {
            var comboValue;

            callGenerator._closeButtonEl = callGenerator.getEl('.comagic-lead__button-close');
            callGenerator._mainButtonEl = callGenerator.getEl('.comagic-lead__main-button');
            callGenerator._contentEl = callGenerator.getEl('.comagic-lead__content');
            callGenerator._fieldWrapperEl = [].slice.apply(callGenerator.getEl().getElementsByClassName('comagic-lead__field-wrapper'));

            callGenerator.getEl('.comagic-lead__button-close').addEventListener('click', function () {
                if (!callGenerator.isSubmitted()) {
                    callGenerator.cancel();
                }
                callGenerator.hide();
                Comagic.UI.Mobile.unform();
            });

            callGenerator._fieldWrapperEl && callGenerator._fieldWrapperEl.forEach(function (field) {
                var input = field.querySelector('input') || field.querySelector('textarea');
                if (field.classList.contains('comagic-combobox-field--group')) {
                    var select = field.querySelector('select');
                    callGenerator._initSelectOption(select);
                    select.value = null;
                    select.addEventListener('change', function () {
                        callGenerator._removeEmptyOption(select);
                        var selectedValue = select.value,
                            selectedNode = [].slice.apply(select.children || []).filter(function (node) {
                                return node.value == selectedValue;
                            })[0];
                        input.value = selectedNode && selectedNode.text;
                        if (!isNaN(parseFloat(selectedValue)) && isFinite(selectedValue)) {
                            selectedValue = +selectedValue;
                        }
                        callGenerator._setFieldError(field, false);
                        comboValue = selectedValue;
                    });
                } else {
                    input.addEventListener('focus', function () {
                        callGenerator._setFieldError(field, false);
                        setTimeout(function () {
                            callGenerator._contentEl.scrollTop = input.parentElement.parentElement.offsetTop;
                        }, 500);
                    })
                }
            });

            callGenerator._mainButtonEl && callGenerator._mainButtonEl.addEventListener('click', function () {
                if (callGenerator._isValid()) {
                    var values = callGenerator.getValues();
                    if (comboValue) values.group_id = comboValue;
                    callGenerator.submit(values);
                    callGenerator.hide();
                    Comagic.UI.Mobile.unform();
                }
            });

            callGenerator._initDelayedCallBlock();
        },

        _initSelectOption: function (selectEl) {
            if (this.getEl().classList.contains('comagic-iphone')) {
                this._addEmptyOption(selectEl);
            }
        },
        _addEmptyOption: function (selectEl) {
            var emptyOption = document.createElement('option');
            emptyOption.setAttribute('value', '');
            selectEl.insertBefore(emptyOption, selectEl.firstChild);
        },
        _getEmptyOption: function (selectEl) {
            return selectEl.querySelector('option[value=""]');
        },
        _removeEmptyOption: function (selectEl) {
            var emptyOption = this._getEmptyOption(selectEl);
            if (emptyOption) {
                emptyOption.remove();
            }
        },

        _initDelayedCallBlock: function () {
            if (!callGenerator.settings.delayed_call_times) {
                return;
            }

            callGenerator.delayedCallBlockEl = callGenerator.getEl('.comagic-call-generator__block-delayed-call');
            callGenerator.delayedCallBlockButton = callGenerator.getEl('.comagic-call-generator__linkbutton-delayed-call');

            callGenerator._fields['delayed_call_day'] = callGenerator.getEl('.comagic-call-generator__field-delayed-call-day');
            callGenerator._delayedCallProps.dayFakeSelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-day__input');
            callGenerator._delayedCallProps.daySelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-day__select');

            callGenerator._fields['delayed_call_time'] = callGenerator.getEl('.comagic-call-generator__field-delayed-call-time');
            callGenerator._delayedCallProps.timeFakeSelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-time__input');
            callGenerator._delayedCallProps.timeSelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-time__select');

            if (callGenerator.delayedCallBlockButton) {
                callGenerator._setDelayedCallBlockState(false);
                callGenerator.delayedCallBlockButton.addEventListener('click', function () {
                    callGenerator._setDelayedCallBlockState(!callGenerator._delayedCallBlockState);
                });
            }

            callGenerator._delayedCallProps.daySelectField.addEventListener('change', function () {
                callGenerator._removeEmptyOption(callGenerator._delayedCallProps.daySelectField);
                var index = callGenerator._delayedCallProps.daySelectField.selectedIndex,
                    selectedOption = callGenerator._delayedCallProps.daySelectField.options[index];
                if (selectedOption && selectedOption.text !== callGenerator._delayedCallProps.dayFakeSelectField.value) {
                    callGenerator._delayedCallProps.dayFakeSelectField.value = selectedOption.text;
                    var options = '';
                    for (var i = 0; i < callGenerator.settings.delayed_call_times[index].times.length; i++) {
                        options += '<option value=' + callGenerator.settings.delayed_call_times[index].times[i] + '>' +
                            Comagic.UI.toTimeString(new Date(callGenerator.settings.delayed_call_times[index].times[i])) + '</option>';
                    }
                    callGenerator._delayedCallProps.timeSelectField.innerHTML = options;
                    callGenerator._initSelectOption(callGenerator._delayedCallProps.timeSelectField);
                    callGenerator._delayedCallProps.timeSelectField.value = null;
                    callGenerator._delayedCallProps.timeFakeSelectField.value = '';
                    callGenerator._setFieldError(callGenerator._fields['delayed_call_time'], false);
                }
                callGenerator._setFieldError(callGenerator._fields['delayed_call_day'], false);
            });

            callGenerator._delayedCallProps.timeSelectField.addEventListener('change', function () {
                callGenerator._removeEmptyOption(callGenerator._delayedCallProps.timeSelectField);
                var index = callGenerator._delayedCallProps.timeSelectField.selectedIndex,
                    selectedOption = callGenerator._delayedCallProps.timeSelectField.options[index];
                if (selectedOption) {
                    callGenerator._delayedCallProps.timeFakeSelectField.value = selectedOption.text;
                }
                callGenerator._setFieldError(callGenerator._fields['delayed_call_time'], false);
            });

            var options = '';
            for (var i = 0; i < callGenerator.settings.delayed_call_times.length; i++) {
                options += '<option>' + Comagic.UI.toDateString(new Date(callGenerator.settings.delayed_call_times[i].date)) + '</option>';
            }
            callGenerator._delayedCallProps.daySelectField.innerHTML = options;
            callGenerator._initSelectOption(callGenerator._delayedCallProps.daySelectField);
            callGenerator._delayedCallProps.daySelectField.value = null;
        },

        _setDelayedCallBlockState: function (enabled) {
            callGenerator._delayedCallBlockState = enabled;
            callGenerator.delayedCallBlockButton.innerText = enabled ? 'Звонок сейчас' : 'Выбрать другое время';
            callGenerator.delayedCallBlockEl.style.display = enabled ? 'flex' : 'none';
            callGenerator._delayedCallProps.timeFakeSelectField[enabled ? 'removeAttribute' : 'setAttribute']('c-disabled', '');
            callGenerator._delayedCallProps.timeSelectField.value = null;
            callGenerator._delayedCallProps.timeSelectField.innerHTML = '';
            callGenerator._delayedCallProps.timeFakeSelectField.value = '';
            callGenerator._delayedCallProps.daySelectField.value = null;
            callGenerator._delayedCallProps.dayFakeSelectField.value = '';
            callGenerator._delayedCallProps.dayFakeSelectField[enabled ? 'removeAttribute' : 'setAttribute']('c-disabled', '');
        }
    });
    callGenerator.render();
    callGenerator._init();
    callGenerator.show();
    Comagic.UI.Mobile.form();
    callGenerator.on('leadhide', function () {
        callGenerator.hide();
        Comagic.UI.Mobile.unform();
    });
});
<!DOCTYPE html>
<html>
    <head>
        <script>
            var __cs = __cs || [];
            __cs.push(['applyWidgetsOptions', {
                'call_generator': {
                    mobile: {
                        js: 'call_generator.js',
                        css: 'call_generator.css',
                        tpls: {
                            'call_generator': 'tpls/call_generator.html'
                        }
                    }
                }
            }]);
        </script>
        <script type="text/javascript" async src="https://app.comagic.ru/widget/js/preview.min.js"></script>
    </head>
    <body>
        <h1>Генератор звонка</h1>
    </body>
</html>
{
  "image_url": null,
  "allowed_groups": [
    {
      "id": 15846,
      "name": "Группа 1"
    },
    {
      "id": 15857,
      "name": "Группа 2"
    },
    {
      "id": 16305,
      "name": "Группа 3"
    }
  ],
  "group_title": "Группы",
  "fields": [],
  "delayed_call_times": false,
  "is_schedule_active": true,
  "banner_color": "FFD441",
  "available_connect_ways": [
    "sitephone",
    "chat",
    "offline_message"
  ],
  "site_id": 26760,
  "preferred_connect_way": "chat",
  "banner_skin": null,
  "id": 5217,
  "inactive_schedule_banner_text": "Мы ценим Ваше время и готовы помочь найти нужную Вам информацию. Если Вы готовы, мы обсудим это по телефону.",
  "banner_branding_text": "CoMagic.ru",
  "banner_branding_url": "http://www.comagic.ru/?utm_medium=widget&utm_campaign=link_widget",
  "is_answer_countdown_timeout": false,
  "banner_text": "Мы ценим Ваше время и готовы помочь найти нужную Вам информацию. Если Вы готовы, мы обсудим это по телефону.",
  "staff_group_title": "Группы",
  "inactive_schedule_banner_title": "Хотите, мы перезвоним в течение минуты?",
  "is_delayed_call_enabled": false,
  "answer_countdown_timeout": 60,
  "scenario_id": 13110,
  "button_color": "43A400",
  "image_id": null,
  "button_color_mobile": "00A500",
  "is_always_displayed": false,
  "banner_color_mobile": "FFFFFF",
  "banner_title": "Хотите, мы перезвоним в течение минуты?",
  "button_text": "Жду звонка",
  "is_image": false,
  "app_id": 1103,
  "widget_link_text": false,
  "widget_link_url": false,
  "is_groups_enabled": true
}
<div class="comagic-widget comagic-lead comagic-lead-call-generator">
    <div class="comagic-lead__mask"></div>
    <div class="comagic-lead__content <% if (banner_color_mobile === '232323') { %> comagic-lead__dark <% } else { %> comagic-lead__light <% } %>">
        <div class="comagic-lead__work-area">
            <div>
                <div class="comagic-lead__info-area">
                    <div>
                        <% if (is_image) { %>
                            <div class="comagic-lead__image">
                                <img src='<%- image_url %>'>
                            </div>
                        <% } %>
                        <div class="comagic-lead__title" style="color: #<%- button_color_mobile %>">
                            <%- banner_title %>
                        </div>
                        <div class="comagic-lead__message">
                            <%- banner_text %>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comagic-lead__fields-wrapper">
                <div class="comagic-lead__field-container">
                    <div class="comagic-lead__field-wrapper comagic-phone-field comagic-error--hidden">
                        <div class="comagic-lead__error-icon"></div>
                        <input class="comagic-lead__field__input" type="tel" c-mask="+7 (___) ___-__-__" c-name="phone" c-type="numberfield"
                            <% var fieldPlaceholder = 'Телефон' %>
                            <% var validator = 'phone' %>
                            <% if (validator) { %>
                                <%- validator+=" required" %> <%- fieldPlaceholder+="*" %>
                            <% } %>
                            c-validator="<%- validator %>"
                            placeholder="<%- fieldPlaceholder %>"
                        >
                        <div class="comagic-lead__error-tooltip">Введите номер</div>
                    </div>
                </div>
                <% if (is_groups_enabled) { %>
                    <div class="comagic-lead__field-container">
                        <div class="comagic-lead__field-wrapper comagic-combobox-field comagic-combobox-field--group comagic-error--hidden">
                            <div class="comagic-lead__error-icon"></div>
                            <input tabindex="-1" unselectable="on" class="comagic-lead__field__input comagic-lead__field__input--select"c-name="group_id" c-type="field" c-validator="required" readonly="readonly" placeholder="<%- group_title %>*">
                            <select tabindex="-1" unselectable="on" class="comagic-lead__field__select">
                                <% allowed_groups.forEach(function(group) { %><option value="<%- group.id %>"><%- group.name %></option><% }); %>
                            </select>
                            <div class="comagic-lead__error-tooltip">Необходимо заполнить</div>
                        </div>
                    </div>
                <% } %>
                <% if (delayed_call_times) { %>
                    <div class="comagic-call-generator__block-delayed-call">
                        <div class="comagic-lead__field-container">
                            <div class="comagic-lead__field-wrapper comagic-combobox-field comagic-call-generator__field-delayed-call-day comagic-error--hidden">
                                <div class="comagic-lead__error-icon"></div>
                                <input tabindex="-1" unselectable="on" c-name="delayed_call_day" class="comagic-lead__field__input comagic-lead__field__input--select comagic-call-generator__field-delayed-call-day__input" c-name="delayed_call_day" c-validator="required" readonly="readonly" placeholder="День*">
                                <select tabindex="-1" unselectable="on" c-name="delayed_call_day" c-type="field" class="comagic-lead__field__select comagic-call-generator__field-delayed-call-day__select" c-name="delayed_call_day" c-validator="required"></select>
                                <div class="comagic-lead__error-tooltip">Необходимо заполнить</div>
                            </div>
                        </div>

                        <div class="comagic-lead__field-container">
                            <div class="comagic-lead__field-wrapper comagic-combobox-field comagic-call-generator__field-delayed-call-time comagic-error--hidden">
                                <div class="comagic-lead__error-icon"></div>
                                <input tabindex="-1" unselectable="on" c-name="delayed_call_time" class="comagic-lead__field__input comagic-lead__field__input--select comagic-call-generator__field-delayed-call-time__input" c-name="delayed_call_time" c-validator="required" readonly="readonly" placeholder="Время*">
                                <select tabindex="-1" unselectable="on" c-name="delayed_call_time" c-type="field" class="comagic-lead__field__select comagic-call-generator__field-delayed-call-time__select" c-name="delayed_call_time" c-validator="required"></select>
                                <div class="comagic-lead__error-tooltip">Необходимо заполнить</div>
                            </div>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
        <div <% if (widget_link_text || (delayed_call_times && is_schedule_active)) { %> class="comagic-lead__footer-area" <% } %>>
            <% if (delayed_call_times && is_schedule_active) { %>
                <a class="comagic-lead__link comagic-call-generator__linkbutton-delayed-call"></a>
            <% } %>
        </div>
        <div class="comagic-lead__button-area">
            <a tabindex="0" class="comagic-lead__main-button" style="background-color: #<%- button_color_mobile %>">
                <span><%- button_text %></span>
            </a>
        </div>
        <div class="comagic-lead__button-close"></div>
    </div>
</div>