.pizza_modal_cart { display: block; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ .dialog { /* Modal Content */ .content { background-color: #fefefe; margin: auto; @media (max-width:760px) { height: 533px; width: 400px; margin: 0 auto; } @media (min-width:780px) { height: 100vh; min-height: 600px; width: 430px; position: absolute; right: 0; left: unset !important; } .button_close{ right: 450px; position: absolute; font-size: 40px; top: 45%; border: 0px solid #fff; color: #FFFFFF; background-color: rgba(255, 255, 255, 0); } .header{ width: 430px; height: 49px; padding: 15px; background-color: #FFFFFF; } .body{ height: calc(100vh - 690px); width: 100%; } .body_order{ width: 100%; height: 200%; position: relative; overflow-y: scroll; @import './product_box.scss'; } .body_additionally{ width: 100%; position: relative; } .body_additionally_text{ font-size: 18px; line-height: 21px; letter-spacing: 0.02em; padding: 10px; } .basket_footer{ position: inherit; bottom: 0; width: 430px; background-color: #FFFFFF; margin-bottom: 10px; .promo_code_box{ flex: none; padding: 5px; order: 0; flex-grow: 1; margin: 0px 12px; border: 1px solid #8E8E93; border-radius: 10px; .input{ border: none; margin: 0; outline: none; -webkit-appearance: none; color: #252A48; font-size: 18px; padding: 0px 20px 0 20px; height: 38px; } .button{ border: none; margin: 0; padding: 0; font-size: 18px; line-height: 30px; color: #1C80E3; cursor: pointer; transition: color .2s; &:hover{ color: lighten(#000000, 10%); } } } .check{ font-size: 18px; line-height: 28px; padding: 15px; .box{ border-bottom: 1px dashed #8E8E93; display: flex; .text{ right: 30px; position: absolute; } } } } } } }