#filter { position: relative; } #filter .container { position: relative; } #filter.filter_in_catalog:not(.visible) { display: none; } #filter.filter_in_catalog .container { padding-top: 0; padding-bottom: 0; margin-bottom: 40px; } @media all and (max-width: 1420px) { #filter.filter_in_catalog .container { margin-left: 0; margin-right: 0; width: 100%; } #filter.filter_in_catalog .container .filter_header .button { bottom: 10px; } } @media all and (max-width: 768px) { #filter.filter_in_catalog .container { bottom: 40px; } } #filter .filter_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } #filter .filter_header .button { width: calc(33.333% - 21px); } @media all and (max-width: 1279px) { #filter .filter_header .button { width: calc(50% - 15px); position: absolute; right: 0; bottom: 90px; } } @media all and (max-width: 1280px) { #filter .filter_header .button { bottom: 50px; } } @media all and (max-width: 768px) { #filter .filter_header .button { width: 100%; bottom: 60px; } } #filter .filter_body { display: flex; flex-wrap: wrap; justify-content: space-between; } #filter .filter_body .filter_column { width: calc(33.333% - 21px); } @media all and (max-width: 1279px) { #filter .filter_body .filter_column { width: calc(50% - 15px); margin-bottom: 35px; } #filter .filter_body .filter_column:nth-child(3) { margin-bottom: 0; } } @media all and (max-width: 768px) { #filter .filter_body .filter_column { width: 100%; margin-bottom: 24px; } #filter .filter_body .filter_column:last-child { margin-bottom: 100px; } } #filter .filter_body .form_field { width: 100%; margin-bottom: 10px; } #filter .filter_body .fieldgroup { width: 100%; } #filter .filter_body .fieldgroup .form_field { width: calc(50% - 20px); } @media all and (max-width: 768px) { #filter .filter_body .fieldgroup .form_field { width: calc(50% - 4px); } } #catalog_small_filter { margin-bottom: 40px; } #catalog_small_filter.hidden { display: none; } #catalog_small_filter .filter_body { display: flex; justify-content: flex-end; } #catalog_small_filter .filter_body select { margin-right: 30px; width: 306px; } #catalog_small_filter .filter_body button { width: 220px; } @media all and (max-width: 1280px) { #catalog_small_filter .filter_body { justify-content: space-between; } #catalog_small_filter .filter_body .form_field { width: calc(33.333% - 30px); } #catalog_small_filter .filter_body .form_field select { width: 100%; } #catalog_small_filter .filter_body button { width: 33.3333%; } } @media all and (max-width: 768px) { #catalog_small_filter .filter_body { display: block; } #catalog_small_filter .filter_body .form_field, #catalog_small_filter .filter_body button { width: 100%; margin-bottom: 8px; } } #order .order_form { position: relative; margin: 0 -25px; } @media all and (max-width: 960px) { #order .order_form { margin-top: -60px; } } @media all and (max-width: 768px) { #order .order_form { margin: 0; } } #order .order_form .order_email { display: flex; align-items: center; position: absolute; z-index: 1; background: #EDEFF5; height: 235px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #order .order_form .order_email p { width: 320px; font-size: 24px; line-height: 45px; padding: 0 20px; } @media all and (max-width: 1280px) { #order .order_form .order_email p { width: 220px; font-size: 13px; line-height: 20px; } } @media all and (max-width: 768px) { #order .order_form .order_email { position: relative; height: auto; margin-bottom: 25px; } #order .order_form .order_email p { padding: 0; } } #order .order_form form { width: 750px; background: var(--blue); box-sizing: border-box; padding: 55px 90px; margin: auto; margin-left: 390px; position: relative; z-index: 2; } @media all and (max-width: 1420px) { #order .order_form form { width: 550px; margin-left: 320px; } } @media all and (max-width: 960px) { #order .order_form form { width: 50%; padding: 15px 25px; margin-left: 285px; } } @media all and (max-width: 768px) { #order .order_form form { width: auto; margin-left: -16px; margin-right: -16px; padding: 25px 16px; } } #order .order_form form input { margin-bottom: 32px; background: rgba(255, 255, 255, 0.2); color: #fff; } #order .order_form form input::placeholder { color: #fff; } @media all and (max-width: 1280px) { #order .order_form form input { margin-bottom: 15px; } } #order .order_form form .policy { position: relative; z-index: 2; margin: -16px 25px 45px 25px; } @media all and (max-width: 1280px) { #order .order_form form .policy { margin-top: -5px; margin-bottom: 25px; margin-left: 0; margin-right: 0; } } #order .order_form form .policy label { color: #fff; font-weight: 300; } #order .order_form form .policy label:before { background: #fff; border-radius: 0; } #order .order_form form .policy input:checked + label:before { border-color: #fff; background: url("/assets/images/icons/checkbox_blue.svg") no-repeat center #fff; } #order .order_form form .button { display: inherit; margin-left: auto; } .login { max-width: 610px; } .login .login_with { display: flex; align-items: center; margin-bottom: 50px; justify-content: flex-start; } .login .login_with p { margin-right: 20px; } .login .login_with .tabs .tab { margin-right: 0; } .login .login_with .tabs .tab:not(.active) { background-color: var(--inactive); } .login .button-group { display: flex; align-items: center; justify-content: flex-end; } .login .button-group .button { margin-left: 30px; display: flex; } .login .button-group .button:first-child { width: auto; } .login .form_field { margin-bottom: 15px; } .login input[name="login"] { padding-left: 32px; background: url("/assets/images/icons/icon-login.svg") no-repeat 8px 50%; } .login input[name="pass"] { padding-left: 32px; background: url("/assets/images/icons/icon-pass.svg") no-repeat 8px 50%; } .login .button { width: 90px; display: block; margin-left: auto; } @media all and (max-width: 960px) { .login { max-width: 440px; } .login form { max-width: 400px; } } @media all and (max-width: 768px) { .login .login_with { display: block; margin-bottom: 30px; } .login .login_with p { margin-bottom: 10px; } .login .login_with .tabs { width: 100%; } .login .login_with .tabs .tab { width: 50%; text-align: center; } .login .button-group { flex-wrap: wrap; justify-content: center; } .login .button-group .button { margin-left: 0; } .login .button-group button { order: 1; width: 100%; } .login .button-group a { order: 2; display: inline-flex; } } .login.recovery { max-width: 815px; } .login.recovery .message { margin-bottom: 15px; } .login.recovery form { display: flex; justify-content: space-between; } .login.recovery form .form_field { width: calc(100% - 205px); } .login.recovery form .button { width: 175px; } .login.recovery form.newPass_form { flex-wrap: wrap; } .login.recovery .resend { display: flex; align-items: center; justify-content: flex-start; } .login.recovery .resend p { margin-right: 30px; } .login.recovery .resend .button { margin-left: 0; width: auto; } @media all and (max-width: 960px) { .login.recovery form { max-width: 100%; } } @media all and (max-width: 768px) { .login.recovery form { display: block; } .login.recovery form .form_field, .login.recovery form .button { width: 100%; } .login.recovery .resend { display: block; text-align: center; margin-top: 15px; } .login.recovery .resend p { margin-right: 0; } .login.recovery .resend .button { margin-left: auto; margin-right: auto; } } .contract_search { margin-bottom: 55px; } .contract_search form { display: flex; align-items: center; justify-content: space-between; } .contract_search form .form_field:first-child { width: calc(50% - 15px); min-width: calc(50% - 15px); margin-right: 15px; } .contract_search form .form_field:nth-child(2), .contract_search form .form_field:nth-child(3) { width: 100%; margin-right: 15px; } .contract_search form .form_field.single { width: 100%; margin-right: 80px; } .contract_search form .form_field .button { width: 158px; min-width: 158px; } .contract_search form .form_field input + label { display: none; } @media all and (max-width: 960px) { .contract_search { margin-bottom: 40px; } .contract_search form { flex-wrap: wrap; justify-content: flex-start; } .contract_search form .form_field:first-child { margin-bottom: 15px; width: 100%; } .contract_search form .form_field:first-child.single { width: calc(100% - 105px); margin-right: 30px; margin-bottom: 0; } .contract_search form .form_field:nth-child(2), .contract_search form .form_field:nth-child(3) { width: 25%; margin-right: 30px; } .contract_search form .button { margin-left: auto; } } @media all and (max-width: 768px) { .contract_search form { justify-content: space-between; } .contract_search form .form_field { margin-right: 0; } .contract_search form .form_field:first-child { margin-right: 0; margin-bottom: 15px; width: 100%; } .contract_search form .form_field:first-child.single { width: 100%; margin-right: 0px; } .contract_search form .form_field:nth-child(2), .contract_search form .form_field:nth-child(3) { width: calc(50% - 4px); margin-right: 0px; } .contract_search form .form_field .date_input, .contract_search form .form_field input[type="date"] { height: 55px; background-position: 8px 14px; position: relative; padding-bottom: 8px; } .contract_search form .form_field .date_input::placeholder, .contract_search form .form_field input[type="date"]::placeholder { color: transparent; } .contract_search form .form_field .date_input[value=""] + label, .contract_search form .form_field input[type="date"][value=""] + label { display: inline-block; position: absolute; left: 32px; top: 10px; z-index: 2; font-size: 13px; line-height: 20px; color: #919399; } .contract_search form .button { margin-left: auto; width: 100%; margin-top: 15px; background: var(--blue); color: #fff; } .contract_search form .button:disabled { opacity: 0.48; } } .reconciliation_form:not(.small) { margin-bottom: 35px; display: flex; flex-wrap: wrap; justify-content: space-between; } .reconciliation_form:not(.small) p { width: 100%; font-weight: 700; margin-bottom: 20px; } .reconciliation_form:not(.small) .form_group { width: calc(65% - 8px); display: flex; flex-wrap: wrap; justify-content: space-between; } .reconciliation_form:not(.small) .form_group:last-child { width: calc(35% - 8px); } .reconciliation_form:not(.small) .form_field { width: calc(50% - 8px); } .reconciliation_form:not(.small) .button { width: calc(40% - 8px); } .reconciliation_form:not(.small) .button:last-child { width: calc(60% - 8px); } @media all and (max-width: 1279px) { .reconciliation_form:not(.small) .form_group, .reconciliation_form:not(.small) .form_group:last-child { width: calc(50% - 8px); } } @media all and (max-width: 768px) { .reconciliation_form:not(.small) p { margin-bottom: 8px; } .reconciliation_form:not(.small) .form_group, .reconciliation_form:not(.small) .form_group:last-child { width: 100%; } .reconciliation_form:not(.small) .form_field { margin-bottom: 15px; } .reconciliation_form:not(.small) .button, .reconciliation_form:not(.small) .form_field { width: calc(50% - 4px); } .reconciliation_form:not(.small) .button:last-child, .reconciliation_form:not(.small) .form_field:last-child { width: calc(50% - 4px); } } .reconciliation_form.small { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 420px; } @media all and (max-width: 768px) { .reconciliation_form.small { max-width: 100%; } } .reconciliation_form.small .form_field { width: calc(50% - 8px); } @media all and (max-width: 768px) { .reconciliation_form.small .form_field { width: calc(50% - 4px); } } .reconciliation_form.small .form_field .date_input_wrapper > .rw-widget .rw-widget-container { display: block; } .reconciliation_form.small .form_field .date_input_wrapper > .rw-widget .rw-widget-container > button { margin: 0; width: 100%; } .reconciliation_form.small button.button { margin-top: 35px; width: calc(45% - 8px); } .reconciliation_form.small button.button:last-child { width: calc(55% - 8px); } @media all and (max-width: 768px) { .reconciliation_form.small button.button { width: calc(50% - 4px) !important; margin-top: 15px; } } .fade { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.5); display: block; } .fade:not(.opened) { display: none; } .fade .modal { max-width: 640px; width: 100%; background: #fff; margin: 100px auto; padding: 45px 40px; } .fade .modal .modal_footer { text-align: right; margin-top: 30px; } .fade .modal .modal_footer .button { margin-left: auto; } @media all and (max-width: 768px) { .fade .modal { padding: 25px 20px; margin: 0; } } .reconciliation_form.small { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 420px; } .reconciliation_form.small .form_field { width: calc(50% - 8px); } @media all and (max-width: 768px) { .reconciliation_form.small .form_field { width: calc(50% - 4px); } } .reconciliation_form.small button.button { margin-top: 15px; width: calc(45% - 8px); } .reconciliation_form.small button.button:last-child { width: calc(55% - 8px); } @media all and (max-width: 768px) { .reconciliation_form.small button.button { width: calc(50% - 4px); } } .fade { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.5); display: block; } .fade:not(.opened) { display: none; } .fade .modal { max-width: 640px; width: 100%; background: #fff; margin: 100px auto; padding: 45px 40px; } .fade .modal .modal_footer { text-align: right; margin-top: 30px; } .fade .modal .modal_footer .button { margin-left: auto; }