первая версия

adaptation.css

@@ -0,0 +1,749 @@
+/* общие стили */
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 1440px;
+}
+
+
+
+
+/* шапка */
+
+header {
+    z-index: 1;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 60px;
+    width: 100%;
+    padding-top: 10px;
+    background: #fff;
+    box-shadow: 0px 4px 25px rgba(205, 205, 205, 0.25);   
+}
+
+ .header__container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 40px;
+    margin-right: 40px;
+
+}
+
+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 .link_active {
+    margin-left: 0;
+    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: linear-gradient(226.01deg, #00A4FF -13.24%, #0076C7 119.18%);
+    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: #11344C;
+}
+
+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;
+}
+ /* адаптация */
+
+@media all and (max-width: 1460px){
+    /* (((((((((((((((((( */
+    .container {
+        width: 1146px;
+    }
+}
+
+
+@media all and (max-width: 1240px) {
+    .header__container {
+        position: relative;
+        top: 6px;
+    }
+    .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: 90%;
+
+    }
+    .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;
+    }
+}

css/adaptation.css

@@ -0,0 +1,749 @@
+/* общие стили */
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 1440px;
+}
+
+
+
+
+/* шапка */
+
+header {
+    z-index: 1;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 60px;
+    width: 100%;
+    padding-top: 10px;
+    background: #fff;
+    box-shadow: 0px 4px 25px rgba(205, 205, 205, 0.25);   
+}
+
+ .header__container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 40px;
+    margin-right: 40px;
+
+}
+
+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 .link_active {
+    margin-left: 0;
+    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: linear-gradient(226.01deg, #00A4FF -13.24%, #0076C7 119.18%);
+    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: #11344C;
+}
+
+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;
+}
+ /* адаптация */
+
+@media all and (max-width: 1460px){
+    /* (((((((((((((((((( */
+    .container {
+        width: 1146px;
+    }
+}
+
+
+@media all and (max-width: 1240px) {
+    .header__container {
+        position: relative;
+        top: 6px;
+    }
+    .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: 90%;
+
+    }
+    .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;
+    }
+}

css/style.css

@@ -0,0 +1,729 @@
+/* общие стили */
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 1440px;
+}
+
+
+
+
+/* шапка */
+
+header {
+    z-index: 1;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 60px;
+    width: 100%;
+    padding-top: 10px;
+    background: #fff;
+    box-shadow: 0px 4px 25px rgba(205, 205, 205, 0.25);   
+}
+
+ .header__container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 40px;
+    margin-right: 40px;
+
+}
+
+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 .link_active {
+    margin-left: 0;
+    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;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.orders_table .heading li  {
+    font-weight: 700;
+    font-size: 14px;
+    padding-bottom: 16px;
+    
+}
+
+.orders_table .order {
+    border: 1px solid transparent;
+    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;
+}
+
+.order_total {
+    padding-right: 14px;
+}
+
+.order_car {
+    padding-left: 2px;
+}
+
+.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: linear-gradient(226.01deg, #00A4FF -13.24%, #0076C7 119.18%);
+    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: #11344C;
+}
+
+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;
+}
+.fixedcol {
+    background-color: white;
+    position: sticky;
+    left: -1px;
+}
+
+main  {
+    margin-top: 120px;
+    
+}
+.main h1 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    color: #11344C;
+    margin-bottom: 40px;
+}
+.main ul{
+    margin-top: 40px;
+    list-style-type: none;
+}
+.main li {
+    padding-top: 15px;
+    border-top: 1px solid #E5E5E5;
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 400;
+    font-size: 14px;
+    color: #0066FF;
+    cursor: pointer;
+}
+.main li:last-child {
+    border-bottom: 1px solid #E5E5E5;
+}
+.main .circle {
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    border-radius: 8px;
+    margin-right: 5px;
+}
+
+
+.main .green {
+    color: #27AE60;
+}
+.main .yellow {
+    color: #F2C94C;
+}
+.main .red {
+    color: #EE1010;
+}
+.main .green span {
+    background: #27AE60;
+}
+.main .yellow span {
+    background: #F2C94C;
+}
+.main .red span {
+    background: #EE1010;
+}
+
+
+.mainTwo {
+    margin-left: 200px;
+    width: 472px;
+    
+} 
+
+.mainTwo h1 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    color: #000000;
+
+}
+
+.mainTwoThree li {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    border-bottom: 1px solid #E5E5E5;
+    color: #000000;
+
+}
+
+
+.mainTwoThree ul{
+    margin-top: 30px;
+    list-style-type: none;
+}
+
+.mainTwoThree .font {
+    font-weight: bold;
+    text-align: right;
+}
+.mainTwoThree .poz {
+    text-align: right;
+}
+
+.mainThree {
+    width: 281px;
+
+    
+}
+
+.mainThree h1 {
+
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+.btn {
+    background: #11344C;
+    color: #FFFFFF;
+    border: none;
+    border-radius: 6px;
+    padding: 8px 28px;
+    font-weight: 700;
+    font-size: 14px;
+    margin-left: auto;
+    display: block;
+    margin-top: 40px;
+}
+.mainTwoThree {
+    display: flex;
+    flex-direction: row;
+    gap: 287px;
+    margin-top: 40px;
+
+}
+.email {
+    color: #0066FF;
+}
+.accordion-item__trigger .link-item{
+    color: #0066FF;
+    
+}
+.files-item a {
+    color: #0066FF;
+    text-decoration: none;
+}
+.accordion-item {
+    font-size: 14px;
+    padding: 0 7px;
+    border-top: 1px solid #E5E5E5;
+    border-bottom: 1px solid #E5E5E5;
+    border-left: 1px solid #FFFFFF;
+    border-right: 1px solid #FFFFFF;
+}
+.accordion-item__trigger {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    cursor: pointer;
+}
+.accordion-item--active .accordion-item__trigger {
+   
+}
+.accordion-item--active .accordion-item__content {
+    display: block;
+}
+.accordion-item--active {
+    border: 1px solid black;
+    border-radius: 4px;
+}
+.accordion-item__content {
+    display: none;
+}
+.btn-centered {
+    margin-right: auto;
+    margin-left: auto;
+    margin-bottom: 40px;
+}
+
+.files {
+    width: 315px;
+    margin-left: 86px;
+    margin-top: 46px;
+}
+.files-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+}
+.nonedisplay {
+    display: none;
+}

documents_page.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="img/logo.png">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/adaptation.css">
+
+    
+  </head>
+  <body>
+
+
+    <header class="header">
+      <div class="header__container" >
+
+        <nav class="header__nav">
+          <div class="user">
+            <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
+            <p>Антон Должанский</p>
+           </div>
+          <ul class="menu header__menu">
+            <li class="link_active"><a href="list_of_orders.html">Список заказов</a><img src="img/link-active.svg"></li>
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Машины</a></li>
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Карта</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Исполнители</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Активные заявки</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Оборудование</a></li> 
+            <div class="line_hidden"></div> 
+            <li><a href="" class="menu__item">Финансы</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Схема услуг</a></li>
+            <div class="line_hidden"></div>  
+            <li><a href="" class="menu__item">Помощь</a></li>  
+        </ul>
+        
+        </nav>
+         <div class="user_image">
+          <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
+         </div>
+
+         <div class="menu-burger__header">
+          <span></span>
+        </div
+
+         
+      </div>
+  </header>
+
+  <main>
+    <div class="container">
+     <div class="main">
+        <h1>Документы</h1>
+        <div class="accordion-item">
+          <div class="accordion-item__trigger">
+            <p class="link-item">Свидетельство о регистрации в качестве ИП</p>
+            <p class="green"><span class="circle"></span>Утвержден</p>
+          </div>
+          <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
+            <div class="files">
+              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
+              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
+            </div>
+            <button class="btn btn-centered">Заменить</button>
+          </div>
+        </div>
+        <!-- <div  class = "line" style="width: 100%; height: 1px; background-color: black;"></div> -->
+        <div class="accordion-item">
+          <div class="accordion-item__trigger">
+            <p class="link-item">Договор на предрейсовый медицинский осмотр водителя</p>
+            <p class="green"><span class="circle"></span>Утвержден</p>
+          </div>
+          <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
+            <div class="files">
+              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
+              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
+            </div>
+            <button class="btn btn-centered">Заменить</button>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <div class="accordion-item__trigger">
+            <p class="link-item">Документ, подтверждающий систему налогообложения</p>
+            <p class="green"><span class="circle"></span>Утвержден</p>
+          </div>
+          <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
+            <div class="files">
+              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
+              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
+            </div>
+            <button class="btn btn-centered">Заменить</button>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <div class="accordion-item__trigger">
+            <p class="link-item">Уведомление о деятельности по перевозкам пассажиров</p>
+            <p class="green"><span class="circle"></span>Утвержден</p>
+          </div>
+          <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
+            <div class="files">
+              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
+              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
+            </div>
+            <button class="btn btn-centered">Заменить</button>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <div class="accordion-item__trigger">
+            <p class="link-item">Доверенность на заключение ОСГОП</p>
+            <p class="green"><span class="circle"></span>Утвержден</p>
+          </div>
+          <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
+            <div class="files">
+              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
+              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
+            </div>
+            <button class="btn btn-centered">Заменить</button>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <div class="accordion-item__trigger">
+            <p class="link-item">Соглашение по агентскому договору</p>
+            <p class="yellow"><span class="circle"></span>Ожидает подтверждения</p>
+          </div>
+          <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
+            <div class="files">
+              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
+              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
+            </div>
+            <button class="btn btn-centered">Заменить</button>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <div class="accordion-item__trigger">
+            <p class="link-item">Соглашение по пользовательскому договору</p>
+            <p class="red"><span class="circle"></span >Документов нет</p>
+          </div>
+          <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
+            <div class="files">
+              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
+              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
+            </div>
+            <button class="btn btn-centered">Заменить</button>
+          </div>
+        </div> 
+     
+     <div class="mainTwoThree">
+     <div class="mainTwo">
+       <h1>Информация о компании</h1>
+       <ul>
+         <li>
+           <p class="font">Тип компании</p>
+           <p>ИП</p>
+         </li>
+         <li>
+           <p class="font">Юр. адрес</p>
+           <p class="poz">54138 г. Челябинск,<br> пр-кт Комсомольский, дом 36, кв. 160</p>
+         </li>
+         <li>
+           <p class="font">Является ли компания плательщиком НДС?</p>
+           <p>Нет</p>
+         </li>
+         <li>
+           <p class="font">ИНН</p>
+           <p>744811430253</p>
+         </li>
+         <li>
+           <p class="font">ОГРН/ОГРНИП</p>
+           <p>317745600090980</p>
+         </li>
+         <li>
+           <p class="font">Расчетный счет</p>
+           <p>40802810938000000117</p>
+         </li>
+         <li>
+           <p class="font">Корреспондентский счет</p>
+           <p>30101810145250000411</p>
+         </li>
+         <li>
+           <p class="font">БИК</p>
+           <p>044525411</p>
+         </li>
+         <li>
+           <p class="font">Банк</p>
+           <p>Филиал "ЦЕНТРАЛЬНЫЙ" Банка ВТБ ПАО Г. МОСКВА</p>
+         </li>
+       </ul>
+
+       <button class="btn">Редактировать</button>
+     </div>
+
+    
+     <div class="mainThree">
+     <h1>Контактная информация</h1>
+     <ul>
+       <li>
+         <p class="font" >e-mail</p>
+         <p class="email">alexandra@panyukova.info</p>
+       </li>
+       <li>
+         <p class="font">Телефон</p>
+         <p>+7 (916) 657 69 59</p>
+       </li>
+     </ul>
+     <button class="btn">Редактировать</button>
+   </div>
+ </div>
+  </main>
+  
+  <footer>
+    <div class="container">
+      
+      <ul>
+          <li><a href="">Контакты</a></li>
+          <li><a href="">Условия использования</a></li>
+          <li><a href="">Политика конфиденциальности</a></li>  
+      </ul>
+    </div>
+  </footer>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+  <script defer src="js/document.min.js"></script>
+  <script src="js/menu.js"></script> 
+  
+
+  </body>
+
+</html>

img/link-active.svg

@@ -0,0 +1,3 @@
+<svg width="107" height="4" viewBox="0 0 107 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H103C105.209 0 107 1.79086 107 4H0Z" fill="#11344C"/>
+</svg>

js/document.min.js

@@ -0,0 +1,18 @@
+$(document).ready(function() {
+    $('.accordion-item__trigger').click(function(){
+        const parent = $(this).parent();
+        // var line = $('div.line');
+
+        if (parent.hasClass('accordion-item--active')){
+            parent.removeClass('accordion-item--active');
+        } else {
+            $('.accordion-item').removeClass('accordion-item--active')
+            parent.addClass('accordion-item--active');
+            // line.addClass('nonedisplay');
+
+        }
+        
+
+    });
+   
+});

js/menu.js

@@ -0,0 +1,8 @@
+$(document).ready(function() {
+	$('.menu-burger__header').click(function(){
+        $('.menu-burger__header').toggleClass('open-menu');
+        $('.header__nav').toggleClass('open-menu');
+        $('.filter').toggleClass('select_not_active');
+        $('body').toggleClass('fixed-page');
+	});
+});

js/script.js

@@ -0,0 +1,45 @@
+let table = document.querySelector('.orders_table');
+let footings = document.querySelectorAll('.footing');
+let headings = document.querySelector('.heading')
+let backBtn = document.querySelector('.back');
+let divOrder = document.querySelector('div.order');
+let scroller = document.querySelector('.scrollmenu');
+let scrollersquare = document.querySelector('.scrollersquare');
+
+table.addEventListener('click', function(e) {
+    let target = e.target;
+    if (target.classList.contains('heading') || target.parentElement.classList.contains('heading') || target == table) {
+        return;
+    }
+    let order = target.closest('.order');
+    let footing = order.querySelector('.footing');
+    
+    footing.style.display = 'flex';
+
+    backBtn.classList.remove('disabled');
+});
+
+backBtn.addEventListener('click', function() { 
+    if (backBtn.classList.contains('disabled')) {
+        return;
+    } else {
+        footings.forEach(function(footing) {
+            footing.style.display = 'none';
+            backBtn.classList.add('disabled');
+          });
+    }
+});
+
+
+table.onmouseover = function() {
+    headings.style.borderColor = 'white';
+  };
+
+table.onmouseout = function() {
+    headings.style.border = '';
+    
+};
+
+// scroller.addEventListener('scroll', function() {
+//     scrollersquare.style.display = 'block';
+//   });

js/select.min.js

@@ -0,0 +1,27 @@
+jQuery(($) => {
+    $('.select').on('click', '.select__head', function () {
+        if ($(this).hasClass('open')) {
+            $(this).removeClass('open');
+            $(this).next().fadeOut();
+        } else {
+            $('.select__head').removeClass('open');
+            $('.select__list').fadeOut();
+            $(this).addClass('open');
+            $(this).next().fadeIn();
+        }
+    });
+
+    $('.select').on('click', '.select__item', function () {
+        $('.select__head').removeClass('open');
+        $(this).parent().fadeOut();
+        $(this).parent().prev().text($(this).text());
+        $(this).parent().prev().prev().val($(this).text());
+    });
+
+    $(document).click(function (e) {
+        if (!$(e.target).closest('.select').length) {
+            $('.select__head').removeClass('open');
+            $('.select__list').fadeOut();
+        }
+    });
+});

list_of_orders.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="img/logo.png">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/adaptation.css">
+
+    
+  </head>
+  <body>
+
+
+    <header class="header">
+      <div class="header__container" >
+
+        <nav class="header__nav">
+          <div class="user">
+            <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
+            <p>Антон Должанский</p>
+           </div>
+          <ul class="menu header__menu">
+            <li class="link_active"><a href="list_of_orders.html">Список заказов</a><img src="img/link-active.svg"></li>
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Машины</a></li>
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Карта</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Исполнители</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Активные заявки</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Оборудование</a></li> 
+            <div class="line_hidden"></div> 
+            <li><a href="" class="menu__item">Финансы</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Схема услуг</a></li>
+            <div class="line_hidden"></div>  
+            <li><a href="" class="menu__item">Помощь</a></li>  
+        </ul>
+        
+        </nav>
+         <div class="user_image">
+          <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
+         </div>
+
+         <div class="menu-burger__header">
+          <span></span>
+        </div
+
+         
+      </div>
+  </header>
+
+  <main>
+    <div class="container">
+      
+      <div class="filters-container">
+        <div class="filter">
+          <p>Поиск по номеру заказа</p>
+          <input id="number" name="number" type="text" placeholder="Поиск">
+        </div>
+        <div class="filter">
+          <p>С</p>
+          <input id="dateFrom" name="dateFrom" type="text" placeholder="ДД.ММ.ГГГГ">
+        </div>
+        <div class="filter">
+          <p>По</p>
+          <input id="dateTo" name="dateTo" type="text" placeholder="ДД.ММ.ГГГГ">
+        </div>
+        <div class="filter">
+          <p>Заказы</p>
+          <div class="select">
+            <input class="select__input" type="hidden" name="">
+            <div class="select__head">Все</div>
+            <ul class="select__list" style="display: none;">
+                <li class="select__item">1</li>
+                <div></div>
+                <li class="select__item">2</li>
+                <div></div>
+                <li class="select__item">3</li>
+            </ul>
+        </div>
+        </div>
+        <div class="filter">
+          <p>Заказчик</p>
+          <div class="select">
+            <input class="select__input" type="hidden" name="">
+            <div class="select__head">Все</div>
+            <ul class="select__list" style="display: none;">
+                <li class="select__item">ИП Панюкова А. А.</li>
+                <div></div>
+                <li class="select__item">ООО КОЛЕСА</li>
+                <div></div>
+                <li class="select__item">ООО КОЛЕСНИЦА</li>
+            </ul>
+        </div>
+        </div>
+      </div>
+
+    
+
+      <div class="scrollmenu">
+        <div class="orders_table"> 
+          <!-- <div class="scrollersquare"> </div> -->
+          <!-- <div class="shadowsquare"> </div> -->
+          <ul class="heading">
+            <li class="heading_num fixedcol" >№</li>
+            <li class="heading_status">Статус</li>
+            <li class="heading_date">Период аренды</li>
+            <li class="heading_duration">Время аренды</li>
+            <li class="heading_tariff">Тариф</li>
+            <li class="heading_cust">Заказчик</li>
+            <li class="heading_exec">Исполнитель</li>
+            <li class="heading_car">Автомобиль</li>
+            <li class="heading_total">Стоимость</li>
+          </ul>
+          <div class="order">
+            <ul> 
+              <li class="order_num fixedcol">12324124</li>
+              <li class="order_status"><div class="green_circle"></div>Завершен</li>
+              <li class="order_date"><span class="from">02.04.2021, 06:10</span><p>–</p><span class="to">02.04.2021, 12:23</span></li>
+              <li class="order_duration">6 часов 13 минут</li>
+              <li class="order_tariff"><div class="gray_circle"></div>Суточный</li>
+              <li class="order_cust">ИП Панюкова А. А.</li>
+              <li class="order_exec">ООО "ШЭРИКС"</li>
+              <li class="order_car">X537OK 178</li>
+              <li class="order_total">5000,34 &#8381;</li>
+            </ul>
+            <ul class="footing">
+              <li class="text-bold">Особые пожелания: <span class="wishes">–</span></li>
+              <li class="text-bold">Рейтинг: <span class="rate">5</span></li>
+              <li class=""><a href="">Посмотреть автомобиль на карте</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="empty-list">
+        
+      </div> 
+
+      <div class="pages">
+        <div>
+          <p>Страница 1 из 1</p>
+          <p class="total">Всего: 2</p>
+        </div>
+        <div class="buttons">
+          <a href="#" class="back disabled">Назад</a>
+          <button class="next disabled">Далее</button>
+        </div>
+      </div>
+       
+    </div>
+
+    
+  </main>
+  
+  <footer>
+    <div class="container">
+      <ul>
+          <li><a href="">Контакты</a></li>
+          <li><a href="">Условия использования</a></li>
+          <li><a href="">Политика конфиденциальности</a></li>  
+      </ul>
+    </div>
+  </footer>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+  <script defer src="js/select.min.js"></script>
+  <script src="js/menu.js"></script> 
+  <script src="js/script.js"></script>
+  
+
+  </body>
+
+</html>

list_of_orders_2.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="img/logo.png">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/adaptation.css">
+
+    
+  </head>
+  <body>
+    <header class="header">
+      <div class="header__container" >
+
+        <nav class="header__nav">
+          <div class="user">
+            <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
+            <p>Антон Должанский</p>
+           </div>
+          <ul class="menu header__menu">
+            <li class="link_active"><a href="list_of_orders.html">Список заказов</a><img src="img/link-active.svg"></li>
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Машины</a></li>
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Карта</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Исполнители</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Активные заявки</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Оборудование</a></li> 
+            <div class="line_hidden"></div> 
+            <li><a href="" class="menu__item">Финансы</a></li>  
+            <div class="line_hidden"></div>
+            <li><a href="" class="menu__item">Схема услуг</a></li>
+            <div class="line_hidden"></div>  
+            <li><a href="" class="menu__item">Помощь</a></li>  
+        </ul>
+        
+        </nav>
+         <div class="user_image">
+          <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
+         </div>
+
+         <div class="menu-burger__header">
+          <span></span>
+        </div
+
+         
+      </div>
+  </header>
+
+  <main>
+    <div class="container">
+      
+      <div class="filters-container">
+        <div class="filter">
+          <p>Поиск по номеру заказа</p>
+          <input id="number" name="number" type="text" placeholder="Поиск">
+        </div>
+        <div class="filter">
+          <p>С</p>
+          <input id="dateFrom" name="dateFrom" type="text" placeholder="ДД.ММ.ГГГГ">
+        </div>
+        <div class="filter">
+          <p>По</p>
+          <input id="dateTo" name="dateTo" type="text" placeholder="ДД.ММ.ГГГГ">
+        </div>
+        <div class="filter">
+          <p>Заказы</p>
+          <div class="select">
+            <input class="select__input" type="hidden" name="">
+            <div class="select__head">Все</div>
+            <ul class="select__list" style="display: none;">
+                <li class="select__item">1</li>
+                <div></div>
+                <li class="select__item">2</li>
+                <div></div>
+                <li class="select__item">3</li>
+            </ul>
+        </div>
+        </div>
+        <div class="filter">
+          <p>Заказчик</p>
+          <div class="select">
+            <input class="select__input" type="hidden" name="">
+            <div class="select__head">Все</div>
+            <ul class="select__list" style="display: none;">
+                <li class="select__item">ИП Панюкова А. А.</li>
+                <div></div>
+                <li class="select__item">ООО КОЛЕСА</li>
+                <div></div>
+                <li class="select__item">ООО КОЛЕСНИЦА</li>
+            </ul>
+        </div>
+        </div>
+      </div>
+
+      <div class="scrollmenu">
+        <div class="orders_table">
+          <ul class="heading">
+            <li class="heading_num">№</li>
+            <li class="heading_status">Статус</li>
+            <li class="heading_date">Период аренды</li>
+            <li class="heading_duration">Время аренды</li>
+            <li class="heading_tariff">Тариф</li>
+            <li class="heading_cust">Заказчик</li>
+            <li class="heading_exec">Исполнитель</li>
+            <li class="heading_car">Автомобиль</li>
+            <li class="heading_total">Стоимость</li>
+          </ul>
+      </div>
+      </div>
+
+      <div class="empty-list">
+        <p>Заказов нет.</p>
+      </div> 
+
+      <div class="pages">
+        <div>
+          <p>Страница 1 из 1</p>
+          <p class="total">Всего: 2</p>
+        </div>
+        <div class="buttons">
+          <a href="#" class="back disabled">Назад</a>
+          <button class="next disabled">Далее</button>
+        </div>
+      </div>
+       
+    </div>
+
+    
+  </main>
+  
+  <footer>
+    <div class="container">
+      
+      <ul>
+          <li><a href="">Контакты</a></li>
+          <li><a href="">Условия использования</a></li>
+          <li><a href="">Политика конфиденциальности</a></li>  
+      </ul>
+    </div>
+  </footer>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+  <script defer src="js/select.min.js"></script>
+  <script src="js/menu.js"></script> 
+  <script src="js/script.js"></script>
+  
+
+  </body>
+
+</html>

style.css

@@ -0,0 +1,729 @@
+/* общие стили */
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 1440px;
+}
+
+
+
+
+/* шапка */
+
+header {
+    z-index: 1;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 60px;
+    width: 100%;
+    padding-top: 10px;
+    background: #fff;
+    box-shadow: 0px 4px 25px rgba(205, 205, 205, 0.25);   
+}
+
+ .header__container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 40px;
+    margin-right: 40px;
+
+}
+
+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 .link_active {
+    margin-left: 0;
+    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;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.orders_table .heading li  {
+    font-weight: 700;
+    font-size: 14px;
+    padding-bottom: 16px;
+    
+}
+
+.orders_table .order {
+    border: 1px solid transparent;
+    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;
+}
+
+.order_total {
+    padding-right: 14px;
+}
+
+.order_car {
+    padding-left: 2px;
+}
+
+.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: linear-gradient(226.01deg, #00A4FF -13.24%, #0076C7 119.18%);
+    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: #11344C;
+}
+
+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;
+}
+.fixedcol {
+    background-color: white;
+    position: sticky;
+    left: -1px;
+}
+
+main  {
+    margin-top: 120px;
+    
+}
+.main h1 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    color: #11344C;
+    margin-bottom: 40px;
+}
+.main ul{
+    margin-top: 40px;
+    list-style-type: none;
+}
+.main li {
+    padding-top: 15px;
+    border-top: 1px solid #E5E5E5;
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 400;
+    font-size: 14px;
+    color: #0066FF;
+    cursor: pointer;
+}
+.main li:last-child {
+    border-bottom: 1px solid #E5E5E5;
+}
+.main .circle {
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    border-radius: 8px;
+    margin-right: 5px;
+}
+
+
+.main .green {
+    color: #27AE60;
+}
+.main .yellow {
+    color: #F2C94C;
+}
+.main .red {
+    color: #EE1010;
+}
+.main .green span {
+    background: #27AE60;
+}
+.main .yellow span {
+    background: #F2C94C;
+}
+.main .red span {
+    background: #EE1010;
+}
+
+
+.mainTwo {
+    margin-left: 200px;
+    width: 472px;
+    
+} 
+
+.mainTwo h1 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    color: #000000;
+
+}
+
+.mainTwoThree li {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    border-bottom: 1px solid #E5E5E5;
+    color: #000000;
+
+}
+
+
+.mainTwoThree ul{
+    margin-top: 30px;
+    list-style-type: none;
+}
+
+.mainTwoThree .font {
+    font-weight: bold;
+    text-align: right;
+}
+.mainTwoThree .poz {
+    text-align: right;
+}
+
+.mainThree {
+    width: 281px;
+
+    
+}
+
+.mainThree h1 {
+
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+.btn {
+    background: #11344C;
+    color: #FFFFFF;
+    border: none;
+    border-radius: 6px;
+    padding: 8px 28px;
+    font-weight: 700;
+    font-size: 14px;
+    margin-left: auto;
+    display: block;
+    margin-top: 40px;
+}
+.mainTwoThree {
+    display: flex;
+    flex-direction: row;
+    gap: 287px;
+    margin-top: 40px;
+
+}
+.email {
+    color: #0066FF;
+}
+.accordion-item__trigger .link-item{
+    color: #0066FF;
+    
+}
+.files-item a {
+    color: #0066FF;
+    text-decoration: none;
+}
+.accordion-item {
+    font-size: 14px;
+    padding: 0 7px;
+    border-top: 1px solid #E5E5E5;
+    border-bottom: 1px solid #E5E5E5;
+    border-left: 1px solid #FFFFFF;
+    border-right: 1px solid #FFFFFF;
+}
+.accordion-item__trigger {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    cursor: pointer;
+}
+.accordion-item--active .accordion-item__trigger {
+   
+}
+.accordion-item--active .accordion-item__content {
+    display: block;
+}
+.accordion-item--active {
+    border: 1px solid black;
+    border-radius: 4px;
+}
+.accordion-item__content {
+    display: none;
+}
+.btn-centered {
+    margin-right: auto;
+    margin-left: auto;
+    margin-bottom: 40px;
+}
+
+.files {
+    width: 315px;
+    margin-left: 86px;
+    margin-top: 46px;
+}
+.files-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+}
+.nonedisplay {
+    display: none;
+}