Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
    <link rel="stylesheet" href="extra.css">


    <div class="container ul-container ">
        <h1 class="payment-title">Lorem ipsum dolor sit amet consectetur</h1>
        <div class="payment-text">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, excepturi?
        </div>
        <form class="payment-form" action="" style="position: relative">
            <div class="details-block">
                    <div class="calc-panel-status">
                        <div class="calc-panel-status-item" data-type="1">
                            <div class="calc-panel-status-text">Шаг 1</div>
                            <div class="calc-panel-status-icon panel-status-ok"></div>
                        </div>
                        <div class="calc-panel-status-item" data-type="2">
                            <div class="calc-panel-status-text">Шаг 2</div>
                            <div class="calc-panel-status-icon panel-status-note"></div>
                        </div>
                        <div class="calc-panel-status-item" data-type="3">
                            <div class="calc-panel-status-text">Шаг 3</div>
                            <div class="calc-panel-status-icon panel-status-note"></div>
                        </div>
                        <div class="calc-panel-status-item" data-type="4">
                            <div class="calc-panel-status-text">Шаг 4</div>
                            <div class="calc-panel-status-icon panel-status-note"></div>
                        </div>
                        <div class="calc-panel-status-item" data-type="5">
                            <div class="calc-panel-status-text">Шаг 5</div>
                            <div class="calc-panel-status-icon panel-status-opt"></div>
                        </div>
                        <div class="calc-panel-status-item" data-type="6">
                            <div class="calc-panel-status-text">Шаг 6</div>
                            <div class="calc-panel-status-icon panel-status-note"></div>
                        </div>

                    </div>
                  
              <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat doloribus tempore vel fugit ipsa eius accusamus, nihil nisi id? Eveniet repudiandae voluptas impedit sed illum. Suscipit corporis assumenda officia ipsa.
              Sint fuga adipisci tempora quaerat explicabo! Omnis, pariatur tempore excepturi vero deserunt voluptatem sequi aliquam eveniet laboriosam fugit, dolore quis ut. Sunt rem eum nobis inventore commodi exercitationem nostrum placeat.
              Obcaecati ea unde maiores quis officia ex mollitia tenetur vitae soluta blanditiis eos veritatis eius cum nihil sequi dolorem iste commodi dolores iure possimus, dolorum, voluptatibus atque fugiat. Voluptatum, molestiae!
              Architecto laborum nulla nostrum sit officia labore autem ratione quasi porro temporibus, tenetur omnis incidunt dolorem impedit quae, numquam quas. Cupiditate illo, sapiente quidem totam nostrum excepturi. Reprehenderit, distinctio obcaecati!
              Necessitatibus quibusdam, ducimus corrupti quos voluptate, dolore debitis cupiditate voluptates illo veritatis alias doloribus ratione, eligendi beatae nulla! Cum necessitatibus culpa quos officiis quae ut quibusdam velit ipsum vel exercitationem.
              Laborum quia, omnis, autem adipisci unde nisi corporis molestias debitis doloribus dignissimos consequuntur cumque exercitationem error itaque! Dolorem distinctio eum vel. Dolorum consequatur vero veritatis modi illum atque repellat error?
              Quibusdam quasi nihil culpa dicta animi est, impedit quisquam sunt esse provident repellendus? Quaerat maxime voluptatem repudiandae numquam excepturi culpa ipsam dolores est, pariatur doloremque perspiciatis, in aut nulla assumenda.
              Quo sequi voluptates, repellendus illo nam deleniti obcaecati id aliquid, praesentium veniam officia doloribus. Nihil dolorem molestiae laudantium dolorum rem animi ipsum natus totam. Blanditiis quod perferendis nobis laboriosam earum.
              Minima et deserunt modi expedita consequuntur quam vitae ea hic? Ducimus, molestias eius assumenda laborum tempora voluptate impedit, inventore quia in animi facilis? Hic sed at ipsum officiis totam natus.
              Nostrum tenetur labore sint doloremque voluptates cupiditate saepe ea error ipsum ut est aliquam, nisi quibusdam nemo consequatur mollitia itaque voluptas laudantium alias ipsa. Error consequatur enim cumque accusamus necessitatibus.
              Veritatis, modi odit saepe expedita quis vitae, placeat in quo facilis tempora minus perspiciatis velit! Maxime illo recusandae explicabo placeat, corrupti, quas, odio incidunt sit sapiente quibusdam deleniti ex praesentium!
              Magni aliquam non velit, alias quibusdam excepturi nesciunt laudantium vel, molestiae quod voluptates hic necessitatibus. Atque mollitia tempore quisquam, tempora harum, officia repellendus cum magni similique culpa, eos saepe aliquid?
              Perferendis qui pariatur tempore quam facilis sed accusamus repudiandae quo in! Sint soluta ea culpa dolorem non molestias? Deleniti corrupti distinctio perferendis deserunt eveniet illo harum eum consequuntur debitis quisquam.
              Qui quo necessitatibus fuga similique, numquam suscipit dolore quia neque repudiandae, perferendis nisi, fugiat vel quos doloribus temporibus eligendi delectus atque et? Inventore tempore, earum assumenda quos nam harum fugit?
              Sunt voluptatibus ullam doloribus nihil reiciendis, molestiae iusto tempore voluptatem! Ratione officiis dolorem aut nihil maxime, aspernatur similique perspiciatis fugit, illum laborum nisi quis. Voluptatum tempore animi magnam beatae et!
              Iste eveniet sint, perspiciatis ea assumenda quisquam? Corrupti magnam consectetur, officiis iusto fugit nostrum aperiam voluptate ipsam ea totam ipsum commodi eius omnis consequuntur nesciunt, quidem, cupiditate animi reiciendis inventore.
              Officia explicabo a aspernatur aliquam sit minima sint molestiae aut dignissimos molestias vitae vel rerum quis deleniti accusantium qui, fugiat, ipsum odio ut corrupti sunt hic unde necessitatibus at? Alias.
              Ducimus possimus non atque facere molestias quisquam nemo fugiat. Possimus minus accusantium repudiandae consectetur! Quod, dolorem, fugit hic sunt non blanditiis labore aperiam veritatis ducimus officiis sapiente fugiat porro dolor?
              Totam ipsum, dignissimos aliquid ab tempore, tempora corrupti deleniti quidem sunt facilis enim ratione, nulla eaque suscipit? Deserunt sunt asperiores iusto necessitatibus, similique quasi amet officia at suscipit nihil illo?
              Qui nobis eum magni ea ex, aut odio eligendi quam quo dolore dolores possimus cumque consequatur officia aliquid? Numquam mollitia excepturi impedit eligendi aspernatur tenetur repudiandae hic voluptatum eaque fugiat.
              Vel quis laboriosam alias libero ipsa error ad tempora aliquid delectus, optio ipsam adipisci assumenda inventore ea atque quae, necessitatibus facere accusamus beatae unde culpa, sit nemo fuga. Nemo, possimus.
              Unde illum aperiam, inventore blanditiis quos nostrum libero error velit? Repudiandae, voluptatum placeat repellendus laboriosam explicabo molestiae amet quae perspiciatis quod id rem tempora error perferendis voluptatem distinctio eos ab.
              Ex aperiam adipisci ab eos tenetur assumenda praesentium repellat nostrum eligendi suscipit corporis quae similique aliquid veniam laborum, voluptate, quaerat voluptatem! Fuga et exercitationem beatae placeat dolor magni expedita saepe!
              Explicabo quis eum sint tenetur corrupti eos, quod iste neque sequi atque vero officiis repellat reprehenderit itaque illo, iusto inventore labore nobis asperiores deserunt unde consequuntur exercitationem quos blanditiis. Molestiae.
              Sit pariatur fugiat id perferendis accusamus tempora doloribus, voluptas nostrum omnis consequuntur, et, qui sunt laudantium hic iure repellendus obcaecati nulla repellat! Aspernatur, aliquid eveniet! Magnam est molestiae fugit ab!
              Saepe voluptatibus rem dignissimos similique repellat magni at impedit aspernatur libero, aperiam corporis quo iusto fugiat optio possimus magnam ducimus iste architecto velit! Assumenda laboriosam laudantium praesentium natus a aut.
              Laudantium, obcaecati reprehenderit aspernatur, repellendus suscipit ullam officia voluptatem voluptas impedit dolorem quae quod a optio hic expedita. Ab ipsum fugiat ipsa qui tempora a velit maiores cupiditate error blanditiis?
              Inventore voluptatum similique doloribus eligendi, omnis dolorum minus enim eos? Temporibus provident hic ab eaque consequatur voluptatum eius quia. Quas et ut vero quam ullam illum minima porro assumenda aspernatur.
              Dignissimos vitae tempore beatae veniam, soluta ipsam nesciunt accusantium iusto veritatis provident! Voluptate ad reiciendis adipisci repudiandae ullam sed tempore soluta excepturi commodi alias! Facere laudantium cupiditate minus veniam eaque?
              Non consectetur ducimus nesciunt assumenda soluta, reiciendis, magni ex impedit, dolorum eveniet officia accusantium. Debitis vel ipsam commodi ipsa accusantium itaque! Error accusamus beatae, atque commodi vitae molestiae mollitia. Debitis!
              Accusamus ea dolores ex repellat deserunt, voluptatum quaerat tempore suscipit quis quisquam nisi aspernatur numquam provident fugit. Consequatur quasi accusamus dolores deserunt tenetur consequuntur iure voluptas maiores, rerum eos ipsum.
              Quos natus harum quisquam vitae exercitationem. Optio maxime incidunt ducimus animi, quo reprehenderit a porro provident, corporis consequatur expedita mollitia ipsa obcaecati vero eveniet, vitae sit ipsam eligendi aspernatur adipisci?
              Necessitatibus vero, reiciendis incidunt porro et distinctio iure animi omnis architecto autem, officia ab inventore dolores unde exercitationem minus maxime perspiciatis nostrum! Ea adipisci reprehenderit ipsum voluptatem veritatis repellendus sed.
              Maiores ducimus quam soluta beatae quo exercitationem consequuntur repellat, repudiandae quaerat inventore commodi ea nobis dolore, facilis quae laudantium. Laboriosam, tempora optio et quisquam error soluta iusto nam minima quasi!
              Amet, magni labore dolorum nam laborum fuga, iure, nisi nobis blanditiis quo commodi nihil officia ex facere velit obcaecati accusamus illum? Maiores nulla laborum quas nostrum dolorum ea ipsam ducimus.
              Voluptate consequuntur rem iste magnam maiores sunt facilis repudiandae iure deserunt veritatis? Voluptatem maiores a possimus laudantium illo vero aut tenetur asperiores, fugiat qui blanditiis iure ratione dicta! Ab, odio!
              Perferendis quis quidem quisquam, odit laborum, deserunt labore nostrum mollitia laboriosam voluptatem, temporibus doloribus sapiente est assumenda fugit officia quibusdam. Ipsam corporis, earum velit aut distinctio neque similique accusantium beatae.
              Quo numquam at laboriosam cum provident, porro odio praesentium sint aut molestias, sit dolores sequi. Dolores aut, deleniti nihil sequi autem, maiores ducimus cupiditate possimus, laudantium officia enim harum reprehenderit.
              Quo ut excepturi, numquam fugiat velit impedit sunt dolorum inventore vero temporibus sequi quisquam fuga magnam itaque sit quibusdam fugit recusandae quis quos quasi vel voluptatem. Unde esse temporibus maxime!
              Cupiditate dolorum eligendi fuga veritatis esse odit ut illo, quae suscipit nulla numquam ex ducimus neque nostrum, laborum dolores illum sapiente repellat accusantium quidem aspernatur laboriosam veniam error voluptatem. Libero.
              Molestiae rerum, voluptatibus nesciunt harum sint quaerat voluptate repudiandae repellat nihil rem distinctio porro odit soluta, animi asperiores molestias? Reiciendis, culpa odit. Neque libero nisi ea. Laborum repudiandae optio eveniet.
              Exercitationem ipsam, sed laudantium reiciendis corporis deserunt quod? Atque dolore perspiciatis eaque ipsam tempore corporis accusantium ut eligendi. Culpa distinctio nisi voluptates nam at nulla magnam voluptatum voluptatem incidunt aliquid?
              Obcaecati dolores magnam non sapiente. Earum voluptatibus ex exercitationem asperiores dolor similique est enim quis a commodi, atque eius dolorum tempora, ipsum quia, sit officiis deleniti reprehenderit. Earum, soluta provident!
              Id eveniet voluptas non quisquam pariatur aperiam. Expedita officia, facilis assumenda optio voluptatum ipsam dolore, quasi molestiae quod id quae dolores nisi quos, exercitationem suscipit error natus nostrum aperiam reiciendis!
              In, eligendi iure. Voluptates nisi animi tenetur praesentium cupiditate, neque, ab eum quo deleniti beatae, adipisci tempore repudiandae! Maxime, blanditiis. Impedit praesentium fugiat explicabo voluptatum, eveniet consequuntur iure magnam amet?
              Quis minus eum reprehenderit in magni quo eligendi. Explicabo molestias laudantium aliquid delectus nisi hic, consectetur maiores adipisci consequatur similique, ducimus accusamus exercitationem possimus accusantium in soluta! Similique, ipsum optio.
              Sequi, voluptas quam voluptatum esse reprehenderit, cum debitis ipsa quia suscipit deserunt, delectus non! Corporis voluptas nostrum aliquam sed nobis, similique possimus perferendis alias sequi quisquam natus ipsam itaque assumenda!
              Similique dolores ab reprehenderit quia officiis minima nam voluptatum magnam! Laboriosam, quasi. Aliquid fugiat voluptatibus, corporis cum, reprehenderit voluptate id sit quisquam vel quas, expedita quasi blanditiis voluptates enim libero!
              Sit consectetur delectus cum possimus porro ea nihil minus quae perspiciatis nostrum veritatis blanditiis ratione temporibus laudantium similique, ipsa asperiores nam optio consequuntur eius deleniti? Vero, accusamus? Vitae, dolore ad?
              Iste, facilis voluptatum laudantium ad ipsum quia fugiat molestias hic vel cumque eaque amet minus omnis placeat impedit reiciendis? Voluptate enim, fugit repellat reprehenderit mollitia voluptatem tempore illum delectus expedita!</div>
                
                    <div class="ul-recalculate">
                        <a class="ul-recalculate__link" href="#">Lorem, ipsum.</a>
                    </div>
                </div>

            <!--Modal Window start-->
            <div class="ul-modal__window">
                <div class="ul-modal__window-inner">
                    <div class="ul-modal__window-top">
                        <div class="ul-modal__window-text">
Lorem ipsum dolor sit.
                        </div>
                        <div class="ul-modal__window-sum">
                            lorem <span>lorem</span>
                        </div>
                        <div class="ul-modal__window-line"></div>
                        <div class="ul-chose">Lorem, ipsum dolor.</div>
                        <div class="ul-glasshouse">
                           Lorem, ipsum dolor.
                            <span class="ul-glasshouse__name"> Lorem, ipsum dolor.</span>
                            <span class="ul-glasshouse__size">Lorem, ipsum dolor.</span>
                            <span class="ul-glasshouse__sum">Lorem2.</span>
                        </div>
                        <div class="ul-glasshouse__protect">
                            Lorem, ipsum.
                            <span class="ul-glasshouse__frame">lorem</span>
                        </div>
                        <div class="ul-glasshouse__material">
                            Lorem, ipsum.
                            <span class="ul-glasshouse__composition">Lorem, ipsum.</span>
                            <span class="ul-glasshouse__sum">lorem.</span>
                        </div>
                    </div>
                    <div class="ul-input__box">
                        <input class="notifi-input" type="checkbox" id="confirm-checkbox">
                        <label class="notifi-label" for="confirm-checkbox">Lorem, ipsum.</label>
                        <a class="ul-question__link" href="#">
                            <img class="ul-question__img" src="/images/calc/question-img.svg" alt="question">
                        </a>
                    </div>
                    <div class="ul-info__box">
                        <!--Для того, чтобы  placeholder смещался вверх, атрибут placeholder у данного input должен иметь значение пробел.-->
                        <input class="" type="text" placeholder=" ">
                        <label class="" for="">Lorem, ipsum dolor.</label>
                    </div>
                    <div class="ul-info__box">
                        <input class="jmp__input_tel" type="tel" placeholder=" ">
                        <label class="" for="">Lorem, ipsum.</label>
                    </div>
                    <div class="ul-info__box">
                        <input class="" type="text" placeholder=" ">
                        <label class="" for="">Lorem</label>
                    </div>
                    <div class="ul-link__block">
                        <button class="ul-send__btn">Lorem, ipsum.</button>
                        <a class="ul-privacy__link" href="#">Lorem<br>lorem</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script src="calc.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>


              
            
!

CSS

              
                
.ul-container{
    max-width: 1330px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.details-block{
    max-width: 890px;
    width: 100%;
    margin-right: 19px;
    position: relative;
}
.ul-modal__window{
    max-width: 390px;
    width: 100%;
}

/*.panel-status__block{*/
/*    position: sticky;*/
/*    top: 0;*/
/*}*/

/*.calc-panel-status {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    left: -168px!important;*/
/*    font-style: normal;*/
/*    font-weight: bold;*/
/*    font-size: 12px;*/
/*    line-height: 40px;*/
/*    color: #929AAB;*/
/*}*/

.calc-panel-status-item {
    display: flex;
    align-items: flex-start;
    height: 58px;
    overflow: hidden;
}

.calc-panel-status-icon {
    background-color: #E1B950;
    width: 18px;
    height: 18px;
    border-radius: 20px;
}

.calc-panel-status-text {
    margin-right: 9px;
    padding-top: 3px;
    line-height: 1;
    width: 40px;
}

.calc-panel-status {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0px;
    left: -120px;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 40px;
    color: #929AAB;
}

.calc-panel-status-item {
    display: flex;
    align-items: flex-start;
    height: 58px;
}

.calc-panel-status-icon {
    background-color: #E1B950;
    width: 18px;
    height: 18px;
    border-radius: 20px;
}

.calc-panel-status-text {
    margin-right: 9px;
    padding-top: 3px;
    line-height: 1;
    width: 40px;
}


.calc-panel-status-icon.panel-status-ok {
    background-color: #7DB546;
    position: relative;
}

.calc-panel-status-icon:before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
    width: 4px;
    height: 100px;
    background-color: #E8E8E8;
}

.calc-panel-status-item:last-child .calc-panel-status-icon:before {
    content: none;
}

.calc-panel-status-icon.panel-status-ok:before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
    width: 4px;
    height: 100px;
    background-color: #7DB546;
}

.calc-panel-status-icon.panel-status-ok:after {
    content: '';
    background: url('/local/templates/kreml/img-new/icon-status-ok-white.svg') no-repeat center;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.calc-panel-status-icon.panel-status-note {
    position: relative;
}

.calc-panel-status-icon.panel-status-opt {
    background-color: #929AAB;
    position: relative;
}

.calc-panel-status-icon.panel-status-opt:after {
    content: '';
    background: url('/local/templates/kreml/img-new/icon-minus.svg') no-repeat center;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #929AAB;
    border-radius: 20px;
}

.calc-panel-status-icon.panel-status-note:after {
    content: '';
    background: url('/local/templates/kreml/img-new/icon-status-note-w.svg') no-repeat center;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #E1B950;
    border-radius: 20px;
}

.payment-title{
    font-weight: bold;
    font-size: 72px;
    line-height: 53px;
    color: #140A00;
    font-family: Arsenal,sans-serif;
    margin-top: 90px;
    margin-bottom: 20px;
}

.payment-form{
    display: flex;
}

.payment-text{
    font-family: Arsenal,sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
    color: #333333;
    margin-bottom: 32px;
    max-width: 820px;
}

el.accept{
    background: #F0FEE2;
}

.ul-step__label.accept::before{
    background-color: #F0FEE2;
    content: url("/images/calc/accept.svg");
    width: 17px;
    height: 11px;
    bottom: -3px;
    position: relative;
    left: -6px;
}


.ul-step__label.attention::before{
    content: "!";
    background: #FDFEE2;
    font-size: 18px;
    vertical-align: middle;
    color: #E1B950;
    position: relative;
    left: -3px;

}

.ul-size__block{
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 20px 31px;
    display: flex;
    margin-bottom: 50px;
}

.ul-size__value-box{
    display: flex;
}

.ul-size__title{
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #333333;
}

.ul-size__value{
    background: #F7F7F7;
    border-radius: 3px;
    width: 60px;
    padding-top: 15px;
    font-size: 14px;
    line-height: 18px;
    padding-bottom: 14px;
    text-align: center;
    margin-right: 5px;
    cursor: pointer;
}

.ul-size__value.active{
    background: #FFFFFF;
    box-shadow: 0 4.83451px 9.66901px rgba(0, 0, 0, 0.15);
    color: #7DB546;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    transition: 0.3s;
}

.ul-size__item + .ul-size__item{
    margin-left: 35px;
}

.ul-modal__window-inner{
    padding: 24px 20px 20px;
    position: sticky;
    top: 0;
}

/*Modal Window start*/
.ul-modal__window-inner{
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.10);
    border-radius: 4px;
}

.ul-modal__window-top{
    background: #FFDC28;
    border-radius: 17px;
}
.ul-modal__window-text{
    font-size: 14px;
    line-height: 40px;
    color: #140A00;
    padding-top: 27px;
    padding-left: 20px;
    margin-bottom: 5px;
}

.ul-modal__window-sum{
    font-weight: bold;
    font-size: 72px;
    line-height: 40px;
    color: #140A00;
    padding-bottom: 44px;
    padding-left: 20px;

}

.ul-modal__window-sum span{
    font-size: 36px;
    line-height: 40px;
    position: relative;
    top: -30px;
}

.ul-modal__window-line{
    width: 100%;
    height: 1px;
    background-color: #000000;
}

.ul-chose{
    padding: 15px 0 0 20px;
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    color: #140A00;;
}

.ul-glasshouse,
.ul-glasshouse__material,
.ul-glasshouse__protect{
    padding-left: 20px;
    font-size: 14px;
    line-height: 30px;
    color: #442A10;
}

.ul-glasshouse__material{
    padding-bottom: 30px;
}

.ul-glasshouse__sum{
    font-weight: bold;
}

.notifi-label{
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    color: #140A00;
    cursor: pointer;
}

.notifi-input[type=checkbox]{
    display: none;
}

.notifi-input[type=checkbox] + label::before {
    content: '';
    color: #FE0400;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid #E7E7E7;
    background: #ffffff;
    margin-right: 20px;
    cursor: pointer;
    pointer-events: revert;
    vertical-align: text-bottom;
}

.ul-input__box {
    margin-top: 22px;
    margin-bottom: 15px;
}

.notifi-input[type=checkbox] + label:hover:before{
    border: 1px solid #7DB546;
    background: #FFFFFF;
}

.notifi-input[type=checkbox]:checked + label::before{
    background-color: #F0FEE2;
    background-image: url("/images/calc/accept.svg");
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #7DB546;
}

.ul-question__link{
    margin-left: 5px;
}
.ul-info__box{
    position: relative;
    width: 100%;
}

.ul-info__box:not(:last-child){
    margin-bottom: 15px;
}

.ul-info__box input{
    width: 100%;
    outline: none;
    height: 54px;
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    font-size: 16px;
    line-height: 19px;
    padding: 30px 16px 16px 23px;
}

.ul-info__box label{
    position: absolute;
    left: 23px;
    top: 7px;
    font-size: 18px;
    line-height: 40px;
    color: #929AAB;
    pointer-events: none;
    font-family: Arsenal,sans-serif;
    font-style: normal;
    font-weight: normal;
    transition: 0.3s;
}

.ul-info__box input:focus~label,
.ul-info__box input:not(:focus):not(:placeholder-shown)~label {
    top: 7px;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: 0.005em;
    transition: 0.3s;
}

.ul-link__block{
    width: 100%;
    display: flex;
    align-items: center;
}

.ul-send__btn{
    max-width: 225px;
    width: 100%;
    background: #F4F4F4;
    border-radius: 4px;
    border: none;
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    color: #929AAB;
    cursor: pointer;
    padding: 7px 0;
}

.ul-send__btn:hover{
    color: #fff;
    background: #7DB546;
    transition: all 0.3s;
}

.ul-privacy__link{
    font-size: 12px;
    line-height: 13px;
    text-decoration-line: underline !important;
    color: #929AAB !important;
    margin-left: 17px;
}

/*Modal Window end*/


              
            
!

JS

              
                
              
            
!
999px

Console