.modal_header{ height: 450px; } .position_basket{ padding-top: 80px; position: absolute; right: 0; } .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 { @media (max-width:760px) { height: 533px; width: 400px; margin: 0 auto; } @media (min-width:780px) { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 533px; width: 900px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } /* Modal Content */ .content { background-color: #fefefe; margin: auto; @media (max-width:760px) { } @media (min-width:780px) { border-radius: 20px; } /*border: 1px solid #888;*/ .body{ height: 100%; flex-wrap: wrap; display: flex; } } } height: 100vh; min-height: 600px; width: 430px; position: absolute; right: 0; left: unset !important; background-color: #F7F7F7; .body_left{ margin: 0 auto; float: left; position: static; display: flex; justify-content: center; /*Центрирование по горизонтали*/ align-items: center; /*Центрирование по вертикали */ width: 400px; } .body_right{ background: #F7F7F7; width: 450px; display: table; float: left; position: static; } .button_close{ right: 90px; position: relative; font-size: 40px; color: azure; } .header{ width: 430px; height: 49px; position: absolute; padding: 15px; background-color: #FFFFFF; } .body{ height: calc(100vh - 670px); width: 100%; } .body_order{ width: 100%; height: 200%; position: relative; overflow: scroll; } .body_additionally{ width: 100%; position: absolute; bottom: 210px; } .body_additionally_text{ font-size: 18px; line-height: 21px; letter-spacing: 0.02em; padding: 10px; } .basket_footer{ position: absolute; bottom: 0; width: 430px; background-color: #FFFFFF; height: 197px; } .check{ font-size: 18px; line-height: 28px; padding: 15px; } .check_box{ border-bottom: 1px dashed #8E8E93; display: flex; } .check_text{ right: 30px; position: absolute; } .promo_input{ border: none; margin: 0; outline: none; -webkit-appearance: none; color: #252A48; font-size: 18px; padding: 0px 20px 0 20px; height: 38px; } .promo_code_box{ flex: none; padding: 5px; order: 0; flex-grow: 1; margin: 0px 12px; border: 1px solid #8E8E93; border-radius: 10px; } .promo_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%); } } }