html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

html, body { width: 100%; margin: 0; padding: 0;
    background: #191919; color: #ffffff;
    font-family: 'Kanit', sans-serif;
}


.wrapper { width: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.wrapper__inner { width: 100%; padding-top: 100px; }

.pacer { width: 100%; }
.pacer__inner { width: 100%; max-width: 400px; margin: 0 auto; padding: 0 30px; }

.field { width: 100%; margin: 10px 0 0; position: relative; }
.field__label {
    position: absolute; right: 0; top: 50%; transform: translate(0, -50%); z-index: 2;
    text-transform: uppercase; font-size: 10px; line-height: 1; opacity: 0.5; letter-spacing: 2px;
    pointer-events: none;
}

input { width: 100%; background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
    padding: 15px 75px 15px 0; text-transform: uppercase;
    font-family: 'Kanit', sans-serif; font-size: 18px; line-height: 1.2; font-weight: 400;
    outline: none; appearance: none; -webkit-appearance: none; border-radius: 0px;
}
input:focus, input:active { border-bottom-color: #39FF14; outline: none; }


.heading { font-weight: 900; font-style: italic; margin: 0; padding: 0; }
.heading.size-l { font-size: 55px; line-height: 0.95; }
.heading.size-l span { color: #39FF14; font-size: 35px; }
.heading.size-s { font-size: 16px; line-height: 0.95; font-weight: 600; }


.scheme { width: 100%; margin: 25px 0 0 0;
    text-transform: uppercase; font-size: 12px; line-height: 1;
}

.scheme__item { width: 100%; position: relative;
    display: flex; align-items: center; justify-content: space-between;
    letter-spacing: 1px; margin: 12px 0 0 0;
}
.scheme__item:first-child { margin-top: 0; }
.scheme__result { text-align: right; color: #39FF14; font-size: 20px; font-style: italic; font-weight: 900; padding: 0 22px 0 0;
    letter-spacing: 0px;

}
.scheme button { position: absolute; right: 0; top: 50%; transform: translate(0, -50%);
    background: none; color: #ccc; border: none;
    appearance: none; -webkit-appearance: none; outline: none; cursor: pointer;
    padding: 20px 0px 20px 20px;
}

.actions { width: 100%; display: flex; align-items: center; margin: 20px 0 0 0; }

.btn { background: #39FF14; color: #000; border: none; font-style: italic;
    padding: 18px 25px; font-family: 'Kanit', sans-serif; font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase;
    appearance: none; -webkit-appearance: none; outline: none; cursor: pointer;
}

.link { background: none; color: #ccc; border: none; font-style: italic;
    padding: 18px 15px; font-family: 'Kanit', sans-serif; font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase;
    appearance: none; -webkit-appearance: none; outline: none; cursor: pointer;
    display: none;
}
.pacer--has-list .link { display: block; }






::-webkit-input-placeholder {
    text-transform: uppercase; font-size: 10px; line-height: 1; color: #ccc; letter-spacing: 2px;
}
::-moz-placeholder {
    text-transform: uppercase; font-size: 10px; line-height: 1; color: #ccc; letter-spacing: 2px;
}
:-ms-input-placeholder {
    text-transform: uppercase; font-size: 10px; line-height: 1; color: #ccc; letter-spacing: 2px;
}
:-moz-placeholder {
    text-transform: uppercase; font-size: 10px; line-height: 1; color: #ccc; letter-spacing: 2px;
}