/* общие стили */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/OpenSans-Regular.ttf'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('../fonts/OpenSans-Medium.ttf'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/OpenSans-SemiBold.ttf'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/OpenSans-Bold.ttf'); } *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } .container { margin-left: auto; margin-right: auto; width: 1440px; } .open-logo { width: 150px; } /* шапка */ header ul { /* margin-right: 50px; */ list-style: none; display: flex; justify-content: space-between; } header ul li { margin-left: 27px; } header a { text-decoration: none; font-size: 14px; font-weight: 400; color: #000; } header ul li:first-child { margin-left: 0; } header ul .link_active { padding-top: 2px; display: flex; flex-direction: column; justify-content: space-between; } header ul .link_active img { position: relative; top: 14px; } header ul .link_active a{ font-weight: 600; color: #11344C; } /* фильтры заказов */ .filters-container { width: 1146px; margin-right: auto; margin-left: auto; margin-top: 95px; display: flex; justify-content: space-between; flex-wrap: wrap; } .filter p { font-size: 14px; } .filter input, .filter select { width: 247px; height: 36px; margin-top: 6px; padding-left: 10px; border: 1px solid #C4C4C4; border-radius: 3px; font-weight: 400; font-size: 14px; } .filter select { padding-left: 5px; } .filter #dateFrom, .filter #dateTo { width: 103px; } .filter input::placeholder { color: #C4C4C4; } select option{ padding: 10px 10px; color:#0066FF; display: block; } /* таблица с заказами */ .orders_table { width: 1360px; margin-top: 40px; margin-left: auto; margin-right: auto; } .orders_table-container { min-height: 69vh; } .orders_table ul { width: 100%; list-style: none; display: flex; justify-content: space-between; } .orders_table .heading { border-bottom: 1px solid #E5E5E5; } .orders_table .heading li { font-weight: 700; font-size: 14px; padding-bottom: 16px; } .orders_table .order { padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #E5E5E5; padding: 15px 10px; } .orders_table .order li { font-weight: 400; font-size: 14px; } .orders_table .order:hover { border: 1px solid #000; border-radius: 4px; cursor: pointer; } .orders_table .heading_num, .orders_table .order_num { width: 65px; } .orders_table .heading_status, .orders_table .order_status { width: 100px; } .orders_table .order .order_status { font-weight: 600; font-size: 14px; color: #27AE60; } .orders_table .order_status .green_circle { display: inline-block; margin-right: 5px; height: 8px; width: 8px; border-radius: 5px; background: #27AE60; } .orders_table .heading_date, .orders_table .order_date { width: 120px; text-align: center; } .orders_table .order_date p { margin-bottom: 5px; margin-top: 5px; } .orders_table .heading_duration, .orders_table .order_duration { width: 120px; } .orders_table .heading_tariff, .orders_table .order_tariff { width: 95px; } .orders_table .order .order_tariff { font-weight: 600; font-size: 14px; color: #A0A0A0; } .orders_table .order_tariff .gray_circle { display: inline-block; margin-right: 5px; height: 8px; width: 8px; border-radius: 5px; background: #A0A0A0; } .orders_table .heading_cust, .orders_table .order_cust { width: 130px; } .orders_table .heading_exec, .orders_table .order_exec { width: 110px; } .orders_table .heading_car, .orders_table .order_car { width: 95px; } .orders_table .heading_total, .orders_table .order_total { width: 80px; text-align: end; } .orders_table .footing { display: none; padding-top: 40px; } .text-bold { font-weight: 700 !important; } .orders_table .rate { color: #27AE60; } .orders_table .footing a { font-size: 14px; color: #0066FF; text-decoration: none; } .orders_table .footing .wishes { font-weight: 400; color: #9D9D9D; } .empty-list { width: auto; height: 614px; text-align: center; vertical-align: 100%; vertical-align: middle; } .empty-list p { line-height: 614px; font-weight: 400; font-size: 14px; } /* переключение страниц */ .pages { margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; } .pages p { font-weight: 400; font-size: 14px; } .pages .total { margin-top: 15px; } .pages .back { margin-right: 40px; text-decoration: none; font-weight: 600; font-size: 14px; color: #0066FF; } .pages .back.disabled { color: #A6A6A6; } .pages .next { width: 103px; height: 35px; background: #4c555e; border: none; cursor: pointer; border-radius: 6px; font-weight: 700; font-size: 14px; color: #fff; } .pages .next.disabled { background: #A6A6A6; } /* подвал */ footer { height: 60px; width: 100%; margin-top: 55px; padding-top: 15px; background: #1b1e20; } footer .container { display: flex; align-items: center; } footer ul { margin-left: auto; list-style: none; display: flex; justify-content: space-between; align-items: center; } footer ul li { margin-left: 20px; } footer a { text-decoration: none; font-size: 14px; font-weight: 400; color: #fff; } /* SELECT */ .select { position: relative; display: block; min-width: 220px; width: 100%; min-width: 247px; max-height: 36px; margin-top: 6px; } .select_not_active { z-index: -1; } .select__head { width: 100%; max-width: 100%; border: 1px solid #C4C4C4; border-radius: 3px; padding: 8px 10px; font-size: 14px; line-height: 18px; cursor: pointer; } .select__head::after { width: 9px; height: 6px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDQuNSA1TDggMSIgc3Ryb2tlPSIjQTZBNkE2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K") ; position: absolute; right: 10px; bottom: 50%; transform: translateY(50%); content: ''; display: block; transition: .2s ease-in; } .select__head.open::after { width: 9px; height: 2px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgOSAyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDQuNSAxTDggMSIgc3Ryb2tlPSIjQTZBNkE2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K") ; } .select__list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #C4C4C4; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; margin-top: 5px; max-height: 205px; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; font-size: 14px; scrollbar-color: dark; scrollbar-width: thin; overscroll-behavior: contain; } .select__list::-webkit-scrollbar { width: 7px; background-color: #F8F9FA; padding: 5px; } .select__list::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #D9D9D9; } .select__list .select__item { position: relative; padding: 10px 12px; cursor: pointer; list-style-type: none; } .select__list .select__item:hover { background-color: rgba(224, 229, 231, 0.5); } .select__list div { max-width: 106px; border-bottom: 1px solid #C4C4C4; margin-left: 12px; } .menu-burger__header { display: none; } .header_nav { display: flex; } .header_nav ul { height: 26px; } .logo_hidden, .user_image_hidden, .user { display: none; } .line_hidden { display: none; height: 1px; width: 106px; background: #C4C4C4; margin-bottom: 16px; } div.scrollmenu { overflow: auto; white-space: nowrap; } div.scrollmenu a { display: inline-block; color: white; text-align: center; padding: 14px; text-decoration: none; } .header { padding-left: 40px; padding-right: 40px; } /* адаптация */ @media all and (max-width: 1460px){ /* (((((((((((((((((( */ .container { width: 1146px; } .header__container { width: 1146px; } } @media all and (max-width: 1240px) { .header__container { position: relative; top: 6px; max-width: 98%; } .user_image { display: none; } .logo_hidden, .menu-burger__header { display: flex; } .link_active img { display: none; } .header__nav { font-size: 14px; } ul.menu { margin: 0; margin-left: 20px; } ul.menu li { margin: 0; margin-bottom: 16px; padding: 0; } header ul .link_active a{ font-weight:lighter; color: #000; } .line_hidden { display: block; } .user { display: flex; justify-content: center; margin-left: 20px; margin-top: 19px; margin-bottom: 15px; } .user img { margin-right: 10px; } .header__nav { display: block; position: absolute; top: 45px; right: 0; background: #fff; width: 177px; transition: all 0.4s ease; right:-100%; border: 1px solid #C4C4C4; border-radius: 6px; } .header__menu { display: block; } .header__nav.open-menu{ right:0; } .header__menu li { margin: 40px 0px 40px 33px; font-size: 14px; } .menu-burger__header { position: relative; width: 40px; height: 35px; display: block; margin-left: 10px; } .menu-burger__header span, .menu-burger__header:after, .menu-burger__header:before{ height: 3px; width: 100%; position: absolute; background: #11344C; margin: 0 auto; border-radius: 10px; } .menu-burger__header span{ top: 16px; } .menu-burger__header:after, .menu-burger__header:before{ content: ''; } .menu-burger__header:after{ bottom: 5px; } .menu-burger__header:before{ top: 5px; } .menu-burger__header.open-menu span { opacity:0; transition: 0.5s; } .menu-burger__header.open-menu:before { transform: rotate(38deg); top: 16px; transition: 0.4s; } .menu-burger__header.open-menu:after { transform: rotate(-38deg); bottom: 16px; transition: 0.4s; } header { height: 60px; } .content-wrapper { margin-top: 48px; } .fixed-pade { overflow: hidden; } .link_active { display: none; } .container { /* margin-left: 40px; */ margin-right: auto; max-width: 87%; } .header__container { margin-right: auto; margin-left: auto; max-width: 96%; } .filters-container { width: 535px; } .filters-container .filter { margin-bottom: 40px; } } @media all and (max-width: 744px) and (min-width: 565px) { /* .container { width: fit-content; } */ .filters-container { width: 535px; } .filters-container .filter { margin-bottom: 40px; } footer .container{ display: block; } footer ul { display: block; margin-top: 32px; margin-bottom: 16px; } footer ul li{ display: flex; margin: 0; margin-bottom: 16px; } footer { height: 190px; } } @media all and (max-width: 565px) { .container { margin-left: auto; margin-right: auto; width: 575px; } .filters-container { width: 247px; margin-right: auto; margin-left: auto; margin-top: 95px; } .filters-container .filter { margin-bottom: 19px; } div.scrollmenu { overflow: auto; white-space: nowrap; } .pages { display: block; } .pages .buttons{ display: flex; justify-content: flex-end; align-items: center; margin-top: 48px; } footer .container{ display: block; } footer ul { display: block; margin-top: 32px; margin-bottom: 16px; } footer ul li{ display: flex; margin: 0; margin-bottom: 16px; } footer { height: 190px; } }