app-header {
   position: sticky;
   top: 0;
   z-index: 1000
}

.pipe{
margin: 0 12px;
    color: #E0E0E0;
}

    .opaq{
  opacity: 0.4;
}

svg.loader {
 width: 3.25em;
 transform-origin: center;
 animation: rotate4 2s linear infinite;
     position: fixed;
    top: 50vh;
    right: 45vw;
}

circle {
 fill: none;
 stroke: var(--green);
 stroke-width: 2;
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
 100% {
  transform: rotate(360deg);
 }
}

@keyframes dash4 {
 0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
 }

 50% {
  stroke-dasharray: 90, 200;
  stroke-dashoffset: -35px;
 }

 100% {
  stroke-dashoffset: -125px;
 }
}

main {
   flex: 1 0 auto
}

main .row {
   display: flex;
   flex-direction: column;
   gap: 25px 0
}

main .main_breadcrumbs {
   margin-top: 20px;
   min-height: 22px;
   width: 100%;
}

@media print {
   main .main_breadcrumbs {
      display: none
   }
}

main .main_title {
   display: flex;
   flex-direction: column;
   gap: 5px 0
}

@media print {
   main .main_title {
      margin-top: 25px
   }
}

main .main_title h2 {
   margin-bottom: 0
}

main .main_title .sub-title {
   display: flex;
   align-items: center;
   gap: 0 15px
}

main .main_title .sub-title p {
   font-size: var(--smallFontSize)
}

main .main_title .sub-title #product_isNSI .product-status {
   display: flex;
    align-items: center;
    white-space: nowrap;
    border-radius: var(--borderRadiusInputs);
    gap: 0 5px;
    font-size: 12px;
}

main .main_title .sub-title .nsi-product-status .name {
   color: #e79c48;
    padding: 5px 8px 5px 0;
}

main .main_title .sub-title .cataloged-product-status .name {
   color: var(--mainActiveColor);
    padding: 5px 8px 5px 0;
}

main .main_title .sub-title #product_isNSI .icon-nsi {
   font-size: 17px;
    color: #e79c48;
    padding-left: 8px;
}

main .main_title .sub-title #product_isNSI .icon-catalog {
   font-size: 17px;
}


.nsi-product-status{
  background: rgba(245, 181, 107, .1607843137254902);
}

.cataloged-product-status{
  background: #e8f5e9;
}


main .main_title .sub-title .regNumber {
   cursor: pointer;
   color: var(--mainActiveColor);
   text-decoration: underline
}

main .main_title .sub-title .status {
   background: var(--lightGrayBackgroungColor);
   border-radius: var(--borderRadiusInputs);
   padding: 5px 8px;
   font-size: var(--smallFontSize)
}

main .main_title .sub-title .status.active {
   color: var(--mainActiveColor)
}

main .main_title .sub-title .status.rejected {
   color: #e64646
}

main .main_title .sub-title .status.canceled {
   color: #d9a300
}

main .main_title .title_status {
   display: flex;
   gap: 0 20px;
   margin-top: 15px
}

main .main_title .title_status .status {
   background: var(--lightGrayBackgroungColor);
   border-radius: var(--borderRadiusInputs);
   padding: 5px 8px;
   font-size: var(--smallFontSize);
   font-weight: 600
}

main .main_title .title_status .status.activeTradingPhase {
   color: #0058df
}

main .main_title .title_status .status.closedTradingPeriod {
   color: #b13b9f
}

main .main_title .title_status .status.admissionToBidding {
   color: #d97921
}

main .main_title .title_status .status.directionOfOffers {
   color: #d9a300
}

main .main_title .title_status .status.acceptanceOfOffersClosed {
   color: #ff8400
}

main .main_title .title_status .status.deactivated,
main .main_title .title_status .status.tradingFailed {
   color: #e64646
}

main .main_title .title_status .status.tradingResults {
   color: #4daa59
}

main .main_title .title_status .status.acceptanceOfTheLeadingOffer {
   color: #10741d
}

main .main_tabs {
   border-bottom: 1px solid var(--borderColor)
}

main .main_tabs ul {
   display: flex;
   gap: 0 30px
}

main .main_tabs ul li a {
   display: flex;
   font-weight: 400;
   font-size: var(--smallFontSize);
   padding-bottom: 8px;
   border-bottom: 2px solid transparent
}

main .main_tabs ul li.active a {
   color: var(--mainActiveColor);
   border-bottom: 2px solid var(--mainActiveColor)
}

main .main_content {
   margin-bottom: 60px;
   display: flex;
   gap: 0 25px;
      /* margin-top: 25px;*/
}

main #substitution_page .main_content {
       margin-top: 25px;
}

main .main_content .catalog-list {
   width: calc(100% - 285px)
}

main .main_content .catalog-list .global-message {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   background: #fdf7e4;
   margin-bottom: 15px;
   position: relative
}

main .main_content .catalog-list .global-message .text {
   display: flex;
   align-items: center;
   gap: 0 10px
}

main .main_content .catalog-list .global-message .text i {
   font-size: var(--regularFontSize)
}

main .main_content .catalog-list .global-message .text i.icon-asks {
   color: #f7bc00
}

main .main_content .catalog-list .global-message .btns {
   display: flex;
   align-items: center;
   gap: 0 10px
}

main .main_content .noData {
   flex: 1 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   align-self: baseline;
   background: var(--lightGrayBackgroungColor);
   padding: 15px 0
}



  header {
   font-size: var(--smallFontSize);
   box-shadow: var(--shadowHeader);
   position: relative;
   z-index: 3
}

header .header_top-stripe {
   background-color: #F6F7F8;
   padding: 6px 0
}

@media print {
   header .header_top-stripe {
      display: none
   }
}

header .header_top-stripe .top-stripe_wrapper {
   display: flex;
   justify-content: space-between;
   width: 100%;
   color: #616161;
   font-weight: 400
}

header .header_top-stripe .top-stripe_wrapper .server-time {
       display: flex;
}

header .header_top-stripe .top-stripe_wrapper .server-time span+span, header .header_top-stripe .top-stripe_wrapper .server-time div {
   /*margin-left: 10px;*/
}

header .header_middle-stripe {
   padding: 8px 0;
   border-bottom: 1px solid var(--borderColorLight);
   background-color: var(--white)
}

header .header_middle-stripe .middle-stripe_wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0 30px;
   width: 100%;
   max-height: 44px;
}

header .header_middle-stripe .middle-stripe_wrapper .logo {
   max-width: 190px;
   display: flex;
}

.logoBars{

   display: flex;
}



header .header_middle-stripe .middle-stripe_wrapper .logo #logo{
   width: 100%
}

header .header_middle-stripe .middle-stripe_wrapper .logo #logo_short{
   width: 0
}

header .header_middle-stripe .middle-stripe_wrapper .search {
   position: relative;
   flex: 1 0 auto
}

#searchHeading2{
  font-size: 24px;
    color: #616161;
    display: none;
}

.searchLabel{
  display: block;
}



@media print {
   header .header_middle-stripe .middle-stripe_wrapper .search {
      display: none
   }
}

header .header_middle-stripe .middle-stripe_wrapper .search label {
    position: relative;
    width: 100%;
}

header .header_middle-stripe .middle-stripe_wrapper .search label:hover {
   background-color: var(--mainActiveColorHover)
}

header .header_middle-stripe .middle-stripe_wrapper .search input {
   border-color: var(--borderColor);
   width: 100%;
   padding-left: 40px;
}

header .header_middle-stripe .middle-stripe_wrapper .search label:before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    content: "";
    font-family: tpiptIcons,serif;
    color: var(--placeholderColor);
}

.default-container mat-dialog-container .modal-header .icon{
  color: #424242;
  font-size: 20px;
  padding: 0;
    width: unset;
}

.default-container mat-dialog-container, .reject-container mat-dialog-container {
    position: relative;
    min-width: 770px;
    margin: 0 auto;
    padding: 0;
    overflow: auto;
}

.modal {
    display: block;
    width: 750px;
    height: 700px;
    margin-bottom: -120px;
}

.modal .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.modal .content .search-string label {
    position: relative;
    width: 100%;
        display: flex;
}

.modal .content .chooser label .text{
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
}

.icon-close {
    font-weight: 400;
    margin: auto;
    font-size: 20px;
}

.menu-catalog .icon-close {
    margin: unset;
    float: right;
}



.modal .content .search-string label #search-button {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    height: 100%;
    width: 68px;
    background-color: var(--mainActiveColor);
    border-radius: var(--borderRadiusInputs);
    transition: .4s ease;
}

.modal .content .search-string label #search-button.btn-disabled {
    cursor: not-allowed;
    opacity: .5;
    background-color: #e0e0e0;
    color: #9e9e9e;
    border-radius: 2px;
}

.modal .content .search-results .main_items .block-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 15px;
}

.media_info {
    display: none;
    flex-direction: column;
    align-items: flex-start;
}

.media_info .price {
    display: inline;
    text-align: left;
}


.media_info .price .title {
    color: rgba(68,68,68,.8);
    font-weight: 400;
    line-height: 20px;
    margin: 2px 0;
}

/*.modal .content .search-results .main_items .block-item:last-child {
    border-bottom: 1px solid var(--borderColor);
}*/

.modal .content .search-results .main_items .block-item .product-categories-list{
  display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 16px;
        border-bottom: 1px solid var(--borderColor);
}


.modal .content .search-results .main_items .block-item .product-categories-list .productCategory{
    flex-direction: row;
    justify-content: space-between;
    padding: 16px;
    border: none;
    border-top: 1px solid var(--borderColor);
    font-size: var(--smallFontSize);
    font-weight: 400;
    line-height: 18px;
        width: 100%;
        display: flex;
        cursor: pointer;
}


.modal .content .search-results .main_items .block-item .product-categories-list .productCategory:hover{
background-color: var(--hoverItemCatalogList);
}

.modal .content .search-results .main_items .block-item .product-categories-list .productCategory .text{
    align-items: center;
}

.modal .content .search-results .main_items .block-item .product-categories-list .productCategory .icon-arrow-left{
    margin-left: 5px;
    margin-top: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.modal .content .search-results .main_items .block-item .item {
    cursor: pointer;
    display: flex;
    background: var(--white);
    border-top: 1px solid var(--borderColor);
    border-bottom: none;
    border-left: none;
    padding: 16px 0;
    transition: .4s ease;
}

.modal .content .search-results .main_items .block-item a:hover.item {
        background-color: var(--hoverItemCatalogList);
}

.modal .content .search-results .main_items .block-item .item .item_info {
    display: flex;
    padding-right: 15px;
    padding-left: 15px;
    width: calc(100% - 200px);
    border-right: 1px solid var(--borderColor);
    position: relative;
    gap: 0 16px;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_photo {
    margin: auto 0;
    width: 140px;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_photo img {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
    max-height: 150px;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_photo + .item-info_main {
    width: calc(100% - 200px);
    margin-left: 0;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_main .main-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_main .main-text .application {
    margin-bottom: 0;
    font-size: 12px;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_main .main-text h4 {
    line-height: 24px;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 0;
}

.modal .content .search-results .main_items .block-item a:hover.item .item_info .item-info_main .main-text h4 {
    color: var(--mainTextColor) !important;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_main .main-text h5 {
    color: rgba(68,68,68,.8);
    font-weight: 400;
    line-height: 20px;
    margin: 2px 0;
    text-align: left;

}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_main .main-text h5 span {
    color: var(--mainTextColor);
}

.modal .content .search-results .main_items .block-item .item .item-additional {
    width: 200px;
    padding: 0 0 0 15px;
}

.modal .content .search-results .main_items .block-item .item .item-additional .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.modal .content .search-results .main_items .block-item .item .item-additional .price h5 {
    color: rgba(68,68,68,.8);
    font-weight: 400;
    line-height: 20px;
}

.modal .content .search-results .main_items .block-item .item .item-additional .price p {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}

.modal .content .search-string label  {
    position: relative;
    width: 100%;
    display: flex;
    border: 1px solid var(--mainActiveColor);
}

.modal .content .search-string label input {
    border: none;
    padding-right: 75px;
    padding-left: 35px;
    width: calc(100% - 68px);
}

.modal .content .search-string label input:focus {
    -webkit-tap-highlight-color: transparent;
}

.modal .content .search-string label button {
    position: absolute;
    top: 25%;
    right: 70px;
    color: #666;
    border: 0;
    padding: 0 10px;
    border-radius: 50%;
    background-color: #fff;
    transition: background .2s;
    outline: none;
}

.modal .content .search-string label:before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    content: "";
    font-family: tpiptIcons,serif;
    color: var(--placeholderColor);
}

.modal .content .search-string #search-hint {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: #616161;
    text-align: left;
    display: block;
    margin-top: 4px;
}

.modal .content .chooser .field_flex {
    display: flex;
    align-items: flex-start;
    gap: 0 20px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: 2px;
    scrollbar-height: none;
}

.modal .content .chooser .field_flex::-webkit-scrollbar {
    width: 0;
    height: 0
}

.modal .content .chooser .field_flex .radio {
    max-width: 50%;
}

.modal .content .chooser .field_flex .radio label {
    align-items: flex-start;
    display: inline-flex;
    gap: 0 5px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.modal .content .search-results .button {
    margin: 24px 0;
    width: 100%;
}

.modal .content .search-results .button a {
    width: 100%;
    justify-content: center;
    background-color: var(--mainActiveColor);
    color: var(--white) !important;
}
.modal .content .search-results .button a:hover {
    background-color: var(--mainActiveColorHover);
}

header .header_middle-stripe .middle-stripe_wrapper .actions {
   display: flex;
   gap: 0 30px;
   align-items: center
}

.actions .btn.btn-fill.btn-withIcon .icon-plus {
   font-size: 16px;
}


@media print {
   header .header_middle-stripe .middle-stripe_wrapper .actions {
      display: none
   }
}

header .header_middle-stripe .middle-stripe_wrapper .actions>div {
   position: relative
}

header .header_middle-stripe .middle-stripe_wrapper .actions .create_order a:hover, 
header .header_middle-stripe .middle-stripe_wrapper .actions .logIn a#sign_in_rang:hover {
   color: #fff !important;
}



a.icon-contacts {
  display: none;
}

header .header_middle-stripe .middle-stripe_wrapper .actions .dropdown {
   cursor: pointer;
   display: flex;
   align-items: center;
   color: var(--mainTextColor);
   font-weight: 600;
   min-width: 37px;
   display: none;
}

header .header_middle-stripe .middle-stripe_wrapper .actions .dropdown i {
   margin-left: 5px;
   font-size: 7px
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account {
   display: flex;
   align-items: center;
   gap: 0 15px
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a {
   opacity: .8
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.messages,
header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.notifications {
   position: relative
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.messages i.new:after,
header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.notifications i.new:after {
   content: "";
   position: absolute;
   right: -3px;
   top: -1px;
   background-color: red;
   border-radius: 50%;
   width: 5px;
   height: 5px
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.account-link {
   max-width: 120px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   opacity: 1;
   transition: .2s ease-in
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.account-link:hover {
   cursor: pointer;
   color: var(--mainActiveColor)
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.account-link:hover .icon {
   background-color: var(--white);
   border-color: var(--mainActiveColor)
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.account-link .icon {
   background-color: var(--borderColorLight);
   padding: 10px;
   border-radius: 50%;
   border: 1px solid var(--borderColor);
   margin-right: 10px;
   transition: .2s ease-in
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.account-link .icon i {
   font-size: var(--regularFontSize)
}

header .header_middle-stripe .middle-stripe_wrapper .actions .account>a.account-link span {
   font-size: var(--smallFontSize)
}

header .header_bottom-stripe {
   background-color: var(--white)
}

@media print {
   header .header_bottom-stripe {
      display: none
   }
}

header .header_bottom-stripe div ul {
   display: flex;
   align-items: center;
   gap: 0 30px;
}

header .header_bottom-stripe div ul li {
   display: inline-flex
}

header .header_bottom-stripe div ul li a {
   padding: 10px 0;
   border-bottom: 2px solid transparent
}
/*
header .header_bottom-stripe div ul li.active a,
header .header_bottom-stripe div ul li:active a {
   color: var(--mainActiveColor);
   border-bottom: 2px solid var(--mainActiveColor)
}
*/





.bars{
  margin-right: 8px;
  display: none;
}

.media-main-menu{
  display: flex;
    position: fixed;
        width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: var(--white);
    z-index: 1;
    overflow: auto;
}

.media-main-menu ul{
  width: 100%
}

.media-main-menu_header{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 14px 0;
    box-shadow: var(--shadowHeader);
}

.menu-text{
  margin: auto;
}

.menu-text a{
  font-size: 20px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}

.menu-text a:hover{
     color: inherit !important;
     cursor: default !important;
}

.menu-close{
      padding: 8px 0;
    margin-right: 16px;
}



.catalog{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 16px;
    padding: 16px 0;
}

.catalog:not(:last-child){
    border-bottom: 1px solid var(--borderColor);
}

.catalog .catalog-name{
    width: 100%
}

.catalog .catalog-name a{
    width: 100%;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

.arrow{
  transform: scale(1.25);
}

.colored{
  width: 100%;
    height: 8px;
    background-color: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
}

.menu-others{
  display: flex;
    flex-direction: column;
}

.other{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 16px;
        padding: 16px 0;
}

.other:not(:last-child){
    border-bottom: 1px solid var(--borderColor);
}

.menu-others .other .icon{
      padding-right: 8px;
}

.menu-others .other .icon {
  transform: scale(1.45);
      transform: scale(1.45);
    width: 25px;
    padding: 0;
}


.menu-catalogs-1-level, .menu-catalogs-2-level, .menu-catalogs-3-level, .menu-catalogs-4-level,.menu-catalogs-5-level, .menu-catalogs-6-level, .menu-catalogs-7-level, .menu-catalogs-8-level,
 .menu-catalogs-9-level, .menu-catalogs-10-level, .menu-catalogs-11-level, .menu-catalogs-12-level, .menu-catalogs-13-level, .menu-catalogs-14-level, .menu-catalogs-15-level{
  display: flex;
    position: fixed;
        width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: var(--white);
    
    overflow: auto;
    flex-direction: column;
}

.menu-catalogs-1-level, .menu-catalogs-5-level, .menu-catalogs-9-level, .menu-catalogs-10-level, .menu-catalogs-11-level, .menu-catalogs-12-level{
  z-index: 2;
}

.menu-catalogs-2-level, .menu-catalogs-6-level, .menu-catalogs-13-level{
  z-index: 3;
}

.menu-catalogs-3-level, .menu-catalogs-7-level, .menu-catalogs-14-level{
  z-index: 4;
}

.menu-catalogs-4-level, .menu-catalogs-8-level, .menu-catalogs-15-level{
  z-index: 5;
}



.media-main-menu ul{
  width: 100%
}

 .menu-catalog-mobile .menu, .menu-import .menu, .menu-participant .menu{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--borderColor);
}


.menu-contacts .menu{
  display: flex;
    flex-direction: column;
    margin: 0 16px;
    padding: 16px 0;
}

.menu-contacts .menu .menu-name h5{
  font-weight: 500;
}

.menu-contacts .menu .content{
      margin: 4px 0;
}

.menu-catalog_header, .menu-contacts_header{
      display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 14px 0;
    box-shadow: var(--shadowHeader);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: white;
}

.media-main-menu .icon-close{
font-size: 20px
}

.menu-catalog_header .menu-back, .menu-contacts_header .menu-back{
  position: relative;
    top: 3px;
    transform: scale(1.25);
    padding: 8px 0;
    margin-left: 16px;
    margin-right: 16px;
    font-size: 17px
}

.menu-catalog_header .menu-text{
      margin: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-catalog_header .menu-text a{
      -webkit-tap-highlight-color: transparent;
      font-size: 20px;
    font-weight: 500;
}

.menu-catalog_header .menu-text a:hover{
     color: inherit !important;
     cursor: default !important;
}

.menu-catalog_header .menu-close{
    padding: 8px 0;
    margin-right: 16px;
    margin-left: 16px;
    font-size: 20px
}

.menu-catalog_header .menu-catalog-mobile {
  width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    max-height: calc(100vh - 80px);
    overflow: auto;
}

.menu-catalog_header .menu-catalog-mobile{
  padding: 16px 0 16px 16px;
    border-bottom: 1px solid var(--borderColor);
}

 .menu-catalog-mobile .catalog-name{
  width: 100%;
}

.menu-catalog-mobile a{
  font-size: 14px;
    font-weight: 400;
        width: 100%;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

.menu-catalog-mobile a.unlinkable:hover{
  color: inherit !important;
  cursor: default !important: 
}


 .menu-catalog-mobile a.head_block{
  
    font-weight: 500;
    color: #4caf50;
}

.menu-others .other a{
width: 100%
}





app-header {
  position: sticky;
  top: 0;
  z-index: 1000
}

 {
  flex: 1 0 auto
}

.row {
  display: flex;
  flex-direction: column;
  gap: 25px 0
}

.row.block {
    display: flex;
    flex-direction: column;
    gap:25px 0;
}

app-catalogs .row.block {
    gap: 25px 0;
}

.main_breadcrumbs {
  margin-top: 20px;
  min-height: 22px
}

@media print {
   .main_breadcrumbs {
    display: none
  }
}


 .main_title {
  display: flex;
  flex-direction: column;
  gap: 5px 0
}

#substitution_page .main_title {
margin-top: 20px;
  }

@media print {
   .main_title {
    margin-top: 25px
  }
}

 .main_title h2 {
  margin-bottom: 0
}

 .main_title .sub-title {
  display: flex;
  align-items: center;
  gap: 0 15px
}

 .main_title .sub-title p {
  font-size: var(--smallFontSize)
}

 .main_title .sub-title .regNumber {
  cursor: pointer;
  color: var(--mainActiveColor);
  text-decoration: underline
}

 .main_title .sub-title .status {
  background: var(--lightGrayBackgroungColor);
  border-radius: var(--borderRadiusInputs);
  padding: 5px 8px;
  font-size: var(--smallFontSize)
}

 .main_title .sub-title .status.active {
  color: var(--mainActiveColor)
}

 .main_title .sub-title .status.rejected {
  color: #e64646
}

 .main_title .sub-title .status.canceled {
  color: #d9a300
}

 .main_title .title_status {
  display: flex;
  gap: 0 20px;
  margin-top: 15px
}

 .main_title .title_status .status {
  background: var(--lightGrayBackgroungColor);
  border-radius: var(--borderRadiusInputs);
  padding: 5px 8px;
  font-size: var(--smallFontSize);
  font-weight: 600
}

 .main_title .title_status .status.activeTradingPhase {
  color: #0058df
}

 .main_title .title_status .status.closedTradingPeriod {
  color: #b13b9f
}

 .main_title .title_status .status.admissionToBidding {
  color: #d97921
}

 .main_title .title_status .status.directionOfOffers {
  color: #d9a300
}

 .main_title .title_status .status.acceptanceOfOffersClosed {
  color: #ff8400
}

 .main_title .title_status .status.deactivated,
 .main_title .title_status .status.tradingFailed {
  color: #e64646
}

 .main_title .title_status .status.tradingResults {
  color: #4daa59
}

 .main_title .title_status .status.acceptanceOfTheLeadingOffer {
  color: #10741d
}

 .main_tabs {
  border-bottom: 1px solid var(--borderColor);
  overflow-x: auto;
    white-space: nowrap;
}

.main_tabs::-webkit-scrollbar {
    width: 0;
    height: 0
}


 .main_tabs ul {
  display: flex;
  gap: 0 30px
}

 .main_tabs ul li a {
  display: flex;
  font-weight: 400;
  font-size: var(--smallFontSize);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent
}

 .main_tabs ul li.active a {
  color: var(--mainActiveColor);
  border-bottom: 2px solid var(--mainActiveColor)
}

.modal .content .noData {
    margin-top: 32px;
}

.modal .content .noData-enter {
    margin-top: 16px;
    background: var(--lightGrayBackgroungColor);
    padding: 16px 0;
}

.modal .content .noData span {
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 14px;
}

.modal .content .noData p {
    color: #616161;
}

.modal .content .search-string label.search_not_enough {
    border-color: var(--red);
}

 .main_content {
  margin-bottom: 60px;
  display: flex;
  gap: 0 25px
}

 .main_content .catalog-list {
  width: calc(100% - 285px)
}

 .main_content .catalog-list .global-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #fdf7e4;
  margin-bottom: 15px;
  position: relative
}

 .main_content .catalog-list .global-message .text {
  display: flex;
  align-items: center;
  gap: 0 10px
}

 .main_content .catalog-list .global-message .text i {
  font-size: var(--regularFontSize)
}

 .main_content .catalog-list .global-message .text i.icon-asks {
  color: #f7bc00
}

 .main_content .catalog-list .global-message .btns {
  display: flex;
  align-items: center;
  gap: 0 10px
}

 .main_content .noData {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: baseline;
  background: var(--lightGrayBackgroungColor);
  padding: 15px 0
}









app-header {
  position: sticky;
  top: 0;
  z-index: 2
}

 {
  flex: 1 0 auto
}

 .row {
  display: flex;
  flex-direction: column;
  gap: 25px 0
}

 .main_breadcrumbs {
  margin-top: 20px;
  min-height: 22px
}

@media print {
   .main_breadcrumbs {
    display: none
  }
}

 .main_title {
  display: flex;
  flex-direction: column;
  gap: 5px 0
}

@media print {
   .main_title {
    margin-top: 25px
  }
}

 .main_title h2 {
  margin-bottom: 0
}

 .main_title .sub-title {
  display: flex;
  align-items: center;
  gap: 0 15px
}

 .main_title .sub-title p {
  font-size: var(--smallFontSize)
}

 .main_title .sub-title .regNumber {
  cursor: pointer;
  color: var(--mainActiveColor);
  text-decoration: underline
}

 .main_title .sub-title .status {
  background: var(--lightGrayBackgroungColor);
  border-radius: var(--borderRadiusInputs);
  padding: 5px 8px;
  font-size: var(--smallFontSize)
}

 .main_title .sub-title .status.active {
  color: var(--mainActiveColor)
}

 .main_title .sub-title .status.rejected {
  color: #e64646
}

 .main_title .sub-title .status.canceled {
  color: #d9a300
}

 .main_title .title_status {
  display: flex;
  gap: 0 20px;
  margin-top: 15px
}

 .main_title .title_status .status {
  background: var(--lightGrayBackgroungColor);
  border-radius: var(--borderRadiusInputs);
  padding: 5px 8px;
  font-size: var(--smallFontSize);
  font-weight: 600
}

 .main_title .title_status .status.activeTradingPhase {
  color: #0058df
}

 .main_title .title_status .status.closedTradingPeriod {
  color: #b13b9f
}

 .main_title .title_status .status.admissionToBidding {
  color: #d97921
}

 .main_title .title_status .status.directionOfOffers {
  color: #d9a300
}

 .main_title .title_status .status.acceptanceOfOffersClosed {
  color: #ff8400
}

 .main_title .title_status .status.deactivated,
 .main_title .title_status .status.tradingFailed {
  color: #e64646
}

 .main_title .title_status .status.tradingResults {
  color: #4daa59
}

 .main_title .title_status .status.acceptanceOfTheLeadingOffer {
  color: #10741d
}

 

 .main_tabs ul {
  display: flex;
  gap: 0 30px
}

 .main_tabs ul li a {
  display: flex;
  font-weight: 400;
  font-size: var(--smallFontSize);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent
}

 .main_tabs ul li.active a {
  color: var(--mainActiveColor);
  border-bottom: 2px solid var(--mainActiveColor)
}

 .main_content {
  margin-bottom: 60px;
  display: flex;
  gap: 0 25px
}

 .main_content .catalog-list {
  width: calc(100% - 285px)
}

 .main_content .catalog-list .global-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #fdf7e4;
  margin-bottom: 15px;
  position: relative
}

 .main_content .catalog-list .global-message .text {
  display: flex;
  align-items: center;
  gap: 0 10px
}

 .main_content .catalog-list .global-message .text i {
  font-size: var(--regularFontSize)
}

 .main_content .catalog-list .global-message .text i.icon-asks {
  color: #f7bc00
}

 .main_content .catalog-list .global-message .btns {
  display: flex;
  align-items: center;
  gap: 0 10px
}

 .main_content .noData {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: baseline;
  background: var(--lightGrayBackgroungColor);
  padding: 15px 0
}









 mat-select.bg {
   background: var(--lightGrayBackgroungColor);
   border-radius: 4px
}

mat-select.bg::placeholder {
   color: var(--mainTextColor)
}

mat-select.header-dropdown .mat-select-value {
   max-width: 145px
}


mat-menu {
   display: none
}

.mat-menu-panel {
   min-width: 112px;
   max-width: 280px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   max-height: calc(100vh - 48px);
   border-radius: 4px;
   outline: 0;
   min-height: 64px
}

.mat-menu-panel.ng-animating {
   pointer-events: none
}

.cdk-high-contrast-active .mat-menu-panel {
   outline: solid 1px
}

.mat-menu-content:not(:empty) {
   padding-top: 8px;
   padding-bottom: 8px
}

.mat-menu-item {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: pointer;
   outline: none;
   border: none;
   -webkit-tap-highlight-color: transparent;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   line-height: 48px;
   height: 48px;
   padding: 0 16px;
   text-align: left;
   text-decoration: none;
   max-width: 100%;
   position: relative
}

.mat-menu-item::-moz-focus-inner {
   border: 0
}

.mat-menu-item[disabled] {
   cursor: default
}

[dir=rtl] .mat-menu-item {
   text-align: right
}

.mat-menu-item .mat-icon {
   margin-right: 16px;
   vertical-align: middle
}

.mat-menu-item .mat-icon svg {
   vertical-align: top
}

[dir=rtl] .mat-menu-item .mat-icon {
   margin-left: 16px;
   margin-right: 0
}

.mat-menu-item[disabled] {
   pointer-events: none
}

.cdk-high-contrast-active .mat-menu-item {
   margin-top: 1px
}

.cdk-high-contrast-active .mat-menu-item.cdk-program-focused,
.cdk-high-contrast-active .mat-menu-item.cdk-keyboard-focused,
.cdk-high-contrast-active .mat-menu-item-highlighted {
   outline: dotted 1px
}

.mat-menu-item-submenu-trigger {
   padding-right: 32px
}

.mat-menu-item-submenu-trigger::after {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 5px 0 5px 5px;
   border-color: transparent transparent transparent currentColor;
   content: "";
   display: inline-block;
   position: absolute;
   top: 50%;
   right: 16px;
   transform: translateY(-50%)
}

[dir=rtl] .mat-menu-item-submenu-trigger {
   padding-right: 16px;
   padding-left: 32px
}

[dir=rtl] .mat-menu-item-submenu-trigger::after {
   right: auto;
   left: 16px;
   transform: rotateY(180deg) translateY(-50%)
}

button.mat-menu-item {
   width: 100%
}

.mat-menu-item .mat-menu-ripple {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none
}


 nav {
   padding: 10px 0;
   margin-top: -8px;
   background-color: var(--white);
   border-radius: 0 0 4px 4px;
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, .02)) drop-shadow(0 2px 16px rgba(0, 0, 0, .24))
}

nav ul {
   display: flex;
   flex-direction: column;
   gap: 5px 0
}

nav ul li {
   cursor: pointer;
   display: flex
}

nav ul li.active,
nav ul li:hover {
   background-color: var(--lightGrayBackgroungColor)
}

nav ul li.active a,
nav ul li:hover a {
   color: var(--mainActiveColor)
}

nav ul li a {
   padding: 10px 30px 10px 20px;
   width: 100%;
   font-size: var(--smallFontSize)
}






nav {
   padding: 10px 0;
   margin-top: -8px;
   background-color: var(--white);
   border-radius: 0 0 4px 4px;
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, .02)) drop-shadow(0 2px 16px rgba(0, 0, 0, .24))
}

nav ul {
   display: flex;
   flex-direction: column;
   gap: 5px 0
}

nav ul li {
   cursor: pointer;
   display: flex
}

nav ul li.active,
nav ul li:hover {
   background-color: var(--lightGrayBackgroungColor)
}

nav ul li.active a,
nav ul li:hover a {
   color: var(--mainActiveColor)
}

nav ul li a {
   padding: 10px 30px 10px 20px;
   width: 100%;
   font-size: var(--smallFontSize)
}

</style><style>.mat-select {
   display: inline-block;
   width: 100%;
   outline: none
}

.mat-select-trigger {
   display: inline-table;
   cursor: pointer;
   position: relative;
   box-sizing: border-box
}

.mat-select-disabled .mat-select-trigger {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default
}

.mat-select-value {
   display: table-cell;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}

.mat-select-value-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.mat-select-arrow-wrapper {
   display: table-cell;
   vertical-align: middle
}

.mat-form-field-appearance-fill .mat-select-arrow-wrapper {
   transform: translateY(-50%)
}

.mat-form-field-appearance-outline .mat-select-arrow-wrapper {
   transform: translateY(-25%)
}

.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper {
   transform: translateY(-50%)
}

.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper {
   transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)
}

._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper {
   transition: none
}

.mat-select-arrow {
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid;
   margin: 0 4px
}

.mat-select-panel-wrap {
   flex-basis: 100%
}

.mat-select-panel {
   min-width: 112px;
   max-width: 280px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   padding-top: 0;
   padding-bottom: 0;
   max-height: 256px;
   min-width: 100%;
   border-radius: 4px;
   outline: 0
}

.cdk-high-contrast-active .mat-select-panel {
   outline: solid 1px
}

.mat-select-panel .mat-optgroup-label,
.mat-select-panel .mat-option {
   font-size: inherit;
   line-height: 3em;
   height: 3em
}

.mat-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-form-field-flex {
   cursor: pointer
}

.mat-form-field-type-mat-select .mat-form-field-label {
   width: calc(100% - 18px)
}

.mat-select-placeholder {
  /* transition: color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)*/
}

._mat-animation-noopable .mat-select-placeholder {
   transition: none
}

.mat-form-field-hide-placeholder .mat-select-placeholder {
   color: transparent;
   -webkit-text-fill-color: transparent;
   transition: none;
   display: block
}

.mat-select-min-line:empty::before {
   content: " ";
   white-space: pre;
   width: 1px
}


.mat-option {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   line-height: 48px;
   height: 48px;
   padding: 0 16px;
   text-align: left;
   text-decoration: none;
   max-width: 100%;
   position: relative;
   cursor: pointer;
   outline: none;
   display: flex;
   flex-direction: row;
   max-width: 100%;
   box-sizing: border-box;
   align-items: center;
   -webkit-tap-highlight-color: transparent
}

.mat-option[disabled] {
   cursor: default
}

[dir=rtl] .mat-option {
   text-align: right
}

.mat-option .mat-icon {
   margin-right: 16px;
   vertical-align: middle
}

.mat-option .mat-icon svg {
   vertical-align: top
}

[dir=rtl] .mat-option .mat-icon {
   margin-left: 16px;
   margin-right: 0
}

.mat-option[aria-disabled=true] {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default
}

.mat-optgroup .mat-option:not(.mat-option-multiple) {
   padding-left: 32px
}

[dir=rtl] .mat-optgroup .mat-option:not(.mat-option-multiple) {
   padding-left: 16px;
   padding-right: 32px
}

.cdk-high-contrast-active .mat-option {
   margin: 0 1px
}

.cdk-high-contrast-active .mat-option.mat-active {
   border: solid 1px currentColor;
   margin: 0
}

.cdk-high-contrast-active .mat-option[aria-disabled=true] {
   opacity: .5
}

.mat-option-text {
  /* display: inline-block;
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis*/
}

.mat-option .mat-option-ripple {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none
}

.mat-option-pseudo-checkbox {
   margin-right: 8px
}

[dir=rtl] .mat-option-pseudo-checkbox {
   margin-left: 8px;
   margin-right: 0
}


.img-check {
    width: 15px;
    margin-right: 5px;
}







#offersCatalog.active, #demandsCatalog.active, #goodsCatalog.active, #general_data_import_substitution.active {
   color: var(--mainActiveColor);
    border-bottom-width: 1px;
    border-bottom-color: var(--mainActiveColor);
}



.level-substitution, .level-information, .level-phones, .level-languges, .show-tooltip {
   position: absolute;
   top: 140px;
   padding: 10px 0;
    margin-top: -8px;
    background-color: var(--white);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    display: none !important;
    width: max-content;
    z-index: 1;
}

.show-tooltip{
  width: 240px;
    font: inherit;
    padding: 10px;
    font-size: smaller;
    top: -15px;
    left: 270px;
}

.adapt-tooltip{
  left: unset;
  right: 20px;
}

.level-substitution, .level-information {
   top: 134px;
}
.level-information {
   max-width: 280px;
}
.level-phones, .level-languges{
   position: absolute;
   top: 30px;
    right: 0px;
   padding: 10px 0;
    margin-top: -8px;
    background-color: var(--white);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    display: none;
        z-index: 1;
}


.level-substitution.active, .level-information.active, .level-phones.active, .level-languges.active, .show-tooltip.active{
    display: block !important;
}


.level-substitution li, .level-information li, .level-phones li, .level-languges li{
       background-color: inherit;
       cursor: pointer;
    display: flex !important;
}

.level-substitution li.active, .level-substitution li:hover, .level-information li.active, .level-information li:hover, .level-phones li.active, .level-phones li:hover, .level-languges li.active, .level-languges li:hover{
       background-color: var(--lightGrayBackgroungColor);
       
}

.level-substitution li a, .level-information li a, .level-phones li a, .level-languges li a{
padding: 10px 16px 10px 16px !important;
    width: 100%;
    font-size: var(--smallFontSize);
        color: inherit;
    outline: 0;
    text-decoration: none;
}

.level-substitution li a, .level-information li a{
padding: 10px 30px 10px 20px !important;
}

.level-substitution li a.active, .level-substitution a:hover, .level-information li a.active, .level-information a:hover, .level-phones li a.active, .level-phones a:hover, .level-languges li a.active, .level-languges a:hover{

        color: var(--mainActiveColor);
}

#overlay{
   display: none;
}

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #000;
    opacity: .5;
}

#overlay.active-offers, #overlay.active-demands, #overlay.active-goods{
   display: block;
}

.title .icon-close{
   padding: 8px;
   cursor: pointer;
}

.menu-catalog {
    width: 100%;
    position: absolute;
    z-index: 2;
    background: #fff;
    background: linear-gradient(90deg,var(--lightGrayBackgroungColor) 50%,var(--white) 0);
}

.menu-catalog .flex {
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
    background-color: var(--white);
}

.menu-catalog .flex .categories {
    width: 270px;
    padding: 25px 0;
    background-color: var(--lightGrayBackgroungColor);
    height: 100%;
    min-height: 100%;
    max-height: calc(100vh - 250px);
    overflow: auto;
}

.menu-catalog .flex .categories div .main-catalog {
    padding: 10px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mainActiveColor);
    font-weight: 500;
    margin-bottom: 5px;
}

.menu-catalog .flex .categories div ul li {
    padding: 10px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
        font-weight: 500;
}

.menu-catalog .flex .categories div ul li span{
    background-color: #524e4e;
    padding: 10px 8px;
    color: white;
    border-radius: 4px;
    position: absolute;
    left: calc(((100% - 1200px) / 2) + 282px);
    font-weight: 400;
    font-size: 13px;
    z-index: 1;
    margin-top: -7px;
}
.menu-catalog .flex .categories div ul li a {
    font-size: var(--smallFontSize);
    line-height: 18px;
    position: relative;
}

.menu-catalog .flex .categories div ul li.active, .menu-catalog .flex .categories div ul li:hover, .menu-catalog .flex .categories div .main-catalog:hover {
    background-color: var(--white);
    cursor: pointer;

}

.menu-catalog .flex .categories div ul li.active a, .menu-catalog .flex .categories div ul li:hover a {
    color: var(--mainTextColor);
}


/*.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

 .tooltiptext {
  visibility: visible;
}
*/

.menu-catalog .flex .items {
    width: calc(100% - 22% - 25px);
    padding-bottom: 55px;
    padding-top: 30px;
    min-height: 100%;
    max-height: calc(100vh - 300px);
    overflow: auto;
}

.menu-catalog .flex .items .title{
    position: relative;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    width: 100%;

}

.menu-catalog .flex .items .title h2 {
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 0;
        line-height: 30px;
}

.menu-catalog .flex .items.title .icon-close {
    cursor: pointer;
    color: var(--placeholderColor);
}

i.icon-close:before {
    content: "";
}

.menu-catalog .flex .items div > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 50px;
}

.menu-catalog .flex .items div > ul > li {
    width: calc(100% / 2 - 25px);
}

.menu-catalog .flex .items div > ul > li h4 {
    cursor: pointer;
    min-height: 32px;
}

ol, ul {
    list-style: none;
}

.menu-catalog .flex .items div > ul > li .sub-menu li.expandable {
    margin: 12px 0 12px 5px;
}

.menu-catalog .flex .items div > ul > li .sub-menu li.expandable > a {
    display: flex;
    align-items: flex-start;
    font-weight: 400;
}

.menu-catalog .flex .items div > ul > li .sub-menu li.expandable > a ~ ul {
    display: none;
}

.menu-catalog .flex .items div > ul > li .sub-menu li.expandable > a.active ~ ul {
    display: block;
}


.menu-catalog .flex .items div > ul > li .sub-menu li.expandable > a:before {
    content: "";
    font-family: tpiptIcons,serif;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 8px;
    color: var(--mainActiveColor);
    margin-right: 10px;
    margin-top: 5px;
    transform: rotate(270deg);
}

.menu-catalog .flex .items div > ul > li .sub-menu li.expandable > a.active:before {
    transform: rotate(0deg);
}

.menu-catalog .flex .items div > ul > li .sub-menu .links {
    padding: 8px 0 0 35px;
}

.menu-catalog .flex .items div > ul > li .sub-menu li.links > a {
    font-weight: 400;
}

.menu-catalog .flex .items div > ul > li .sub-menu li a {
    font-size: var(--smallFontSize);
}

.menu-catalog .flex .items div > ul > li a, .menu-catalog .flex .items div > ul > li i {
    font-weight: 500;
    line-height: 20px;
}

.menu-catalog .flex .items h4.item-menu  >a.unlinkable:hover, .menu-catalog .flex .items .title h2 >a.unlinkable:hover, .menu-catalog .flex .items h4, .menu-catalog .flex .items .title h2 {
    color: inherit;
    cursor: default;
}


*, :after, :before {
    box-sizing: border-box;
}

 a:hover.card-product  {
  color: inherit !important;
}


 mat-select.bg {
   background: var(--lightGrayBackgroungColor);
   border-radius: 4px
}

mat-select.bg::placeholder {
   color: var(--mainTextColor)
}

mat-select.header-dropdown .mat-select-value {
   max-width: 145px
}


mat-menu {
   display: none
}

.mat-menu-panel {
   min-width: 112px;
   max-width: 280px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   max-height: calc(100vh - 48px);
   border-radius: 4px;
   outline: 0;
   min-height: 64px
}

.mat-menu-panel.ng-animating {
   pointer-events: none
}

.cdk-high-contrast-active .mat-menu-panel {
   outline: solid 1px
}

.mat-menu-content:not(:empty) {
   padding-top: 8px;
   padding-bottom: 8px
}

.mat-menu-item {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: pointer;
   outline: none;
   border: none;
   -webkit-tap-highlight-color: transparent;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   line-height: 48px;
   height: 48px;
   padding: 0 16px;
   text-align: left;
   text-decoration: none;
   max-width: 100%;
   position: relative
}

.mat-menu-item::-moz-focus-inner {
   border: 0
}

.mat-menu-item[disabled] {
   cursor: default
}

[dir=rtl] .mat-menu-item {
   text-align: right
}

.mat-menu-item .mat-icon {
   margin-right: 16px;
   vertical-align: middle
}

.mat-menu-item .mat-icon svg {
   vertical-align: top
}

[dir=rtl] .mat-menu-item .mat-icon {
   margin-left: 16px;
   margin-right: 0
}

.mat-menu-item[disabled] {
   pointer-events: none
}

.cdk-high-contrast-active .mat-menu-item {
   margin-top: 1px
}

.cdk-high-contrast-active .mat-menu-item.cdk-program-focused,
.cdk-high-contrast-active .mat-menu-item.cdk-keyboard-focused,
.cdk-high-contrast-active .mat-menu-item-highlighted {
   outline: dotted 1px
}

.mat-menu-item-submenu-trigger {
   padding-right: 32px
}

.mat-menu-item-submenu-trigger::after {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 5px 0 5px 5px;
   border-color: transparent transparent transparent currentColor;
   content: "";
   display: inline-block;
   position: absolute;
   top: 50%;
   right: 16px;
   transform: translateY(-50%)
}

[dir=rtl] .mat-menu-item-submenu-trigger {
   padding-right: 16px;
   padding-left: 32px
}

[dir=rtl] .mat-menu-item-submenu-trigger::after {
   right: auto;
   left: 16px;
   transform: rotateY(180deg) translateY(-50%)
}

button.mat-menu-item {
   width: 100%
}

.mat-menu-item .mat-menu-ripple {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none
}








footer {
   border-top: 1px solid var(--borderColor)
}

@media print {
   footer {
      display: none
   }
}

footer .footer_wrapper {
   width: 100%
}

footer .footer_wrapper .footer_top-line {
   padding: 25px 0;
   display: grid;
   width: 100%;
   grid-template-columns: auto auto auto auto;
   justify-content: space-between
}

@media (max-width:991px) {
   footer .footer_wrapper .footer_top-line {
      gap: 0 25px
   }
}

footer .footer_wrapper .footer_top-line .info_block h5 {
   font-size: var(--smallFontSize);
    font-weight: 500;
    font-family: Roboto;
}

i.footer_icon{
  display: none;
}

i.open_icon{
  transform: rotate(180deg);
}



.footer_info_block{
  display: flex;
    justify-content: space-between;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer {
   display: flex;
   flex-direction: column;
   gap: 15px 0;
   margin-top: 20px
}

footer .footer_wrapper .footer_top-line .info_block .content_footer a,
footer .footer_wrapper .footer_top-line .info_block .content_footer p {
   font-size: 13px;
}



footer .footer_wrapper .footer_top-line .info_block .content_footer {
       display: flex;
    flex-direction: column;
    gap: 15px 0;
    margin-top: 20px;
}



footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row {
   display: flex;
   gap: 0 25px;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row2 {
   display: flex;
   justify-content: left;
   column-gap: 25px
}

footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row3 #footer_metal_products{
   width: 40%
}


footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row3 {
   display: flex;
   justify-content: left;
   column-gap: 30px
}

footer .footer_wrapper .footer_bottom-line {
   border-top: 1px solid rgba(68, 68, 68, .2)
}

footer .footer_wrapper .footer_bottom-line .wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
       gap: 20px;
}

footer .footer_wrapper .footer_bottom-line .wrapper .copyright {
   font-size: var(--xsmallFontSize);
   color: var(--mainTextColor);
   padding: 10px 0
}

footer .footer_wrapper .footer_bottom-line .wrapper .version {
   font-size: var(--xsmallFontSize);
   color: var(--mainTextColor)
}

footer #media_connect_with_us{
  display: none;
  background-color: var(--mainGrayBackgorundColor);
    color: #616161;
    font-size: 14px;

}

.section-error {
    width: 660px;
    margin: 80px auto 50px;
}

.section-error .error_photo {
    display: flex;
    justify-content: center;
}

.section-error .error_inf {
    max-width: 660px;
    margin: 50px auto 0 auto;
    text-align: center;
}

.section-error .error_inf h1 {
    line-height: 22px;
}

.section-error .error_inf h5 {
    margin: 15px 0 25px;
    opacity: .8;
    font-weight: 400;
    line-height: 24px;
}

.section-error .error_inf a {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: var(--mainActiveColor);
}



@media screen and (max-width: 1279px) {

.scroll-out{
  overflow: hidden;
}

main .main_content .catalog-list {
    width: 100%;
}



.level-information {
   max-width: unset;
}

.bars{
  display: block;
}

.pipe {
    margin: 0 6px;
    color: #F6F7F8;
}



  header .header_bottom-stripe {
    display: none;
}

header .header_middle-stripe .middle-stripe_wrapper .logo #logo{
   width: 0;
}

header .header_middle-stripe .middle-stripe_wrapper .logo #logo_short{
   width: 100%;
   max-width: 44px;
}

/*header .header_middle-stripe .middle-stripe_wrapper .actions {
     width: 103px; 
     justify-content: end; 
}*/

#searchLayer .cdk-overlay-pane.default-container{
  max-width: unset;
  width: 100%;
}

#searchLayer .default-container mat-dialog-container{
  max-width: unset;
    width: 100vw;
        height: 100vh;
        min-width: unset;
}

#searchLayer .modal{
      width: 100%;
      height: fit-content;
}

.create_order{
  display: none;
}

#searchLayer .default-container mat-dialog-container .modal-header .icon {
    margin-right: 20px;
}


 #searchLayer .default-container mat-dialog-container .modal-header h5{
  font-size: 20px;
    font-weight: 500;
            width: 100%;
        text-align: center;
 }

 #searchLayer .modal .modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 21px 0;
    box-shadow: var(--shadowHeader);
    position: fixed;
    width: 100%;
    top: 0;
        z-index: 2;
    background-color: white;
}



.default-container mat-dialog-container .modal-body{
  margin-top: 100px;
}

.show-tooltip {
    top: -75px;
    left: 200px;
}



i.footer_icon{
  display: block;
  color: #616161;
}

.section-error, .section-error img {
    width: 100%;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer {
  display: none;
    gap: 10px 0;
     margin: 5px 0;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer.active{
   display: block;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer a,
footer .footer_wrapper .footer_top-line .info_block .content_footer p {
   margin: 3px 0;
   font-size: 13px;
}

footer .footer_wrapper .footer_top-line .info_block:not(:first-child) .content_footer .content_row {
    display: inline-table;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row3 {
    justify-content: start;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row3 #footer_metal_products, footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row3 #footer_agricultural_products,
footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row2 a:first-child
{
   width: 150px;
}

footer #media_connect_with_us{
  display: block;
  width: fit-content;
    display: inline-flex;
    border-radius: var(--borderRadiusInputs);
    padding: 9px 1em;
    cursor: pointer;
    transition: .4s ease;
    border: 1px solid transparent;
    font-weight: 400;
        margin-top: 20px;
}


.info_block{
    margin-bottom: 15px;
}

footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row2, footer .footer_wrapper .footer_top-line .info_block .content_footer .content_row3 {
    column-gap: 30px;
}


  }

  @media screen and (max-width: 767px) {

header .header_top-stripe .top-stripe_wrapper {
    font-size: 12px;
}

.header_phones{
  display: none;
}

header .header_top-stripe .top-stripe_wrapper {
    justify-content: end;
}

a.icon-contacts {
  display: initial;
  font-size: 24px;
    color: #616161;
    background-color: white;
    border: 0;
    padding-right: 16px;
    top: 4px;
    position: relative;
}

#searchHeading2{
    display: block;
    float: right;
}

.searchLabel{
  display: none;
}

header .header_middle-stripe .middle-stripe_wrapper {
    gap: 0 16px;
}


.section-trading-floor h1, .section-user-information h1, .section-popular-goods h1, .section-new-applications h1, .section-statistics h1 {
    font-size: 16px;
}

.media_info {
    display: flex;
}

.modal .content .search-results .main_items .block-item .item .item-additional {
    display: none;
}

.modal .content .search-results .main_items .block-item .item .item_info {
    width: 100%;
    border-right: none;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_photo + .item-info_main {
    width: 100%;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_photo {
    margin: unset;
    margin-top: 12px;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_main .main-text .name {
    height: 70px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
            max-width: 100%;
}

.modal .content .search-results .main_items .block-item .item .item_info .item-info_main .main-text .name h4{
    line-height: 24px;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.media_info .price {
    font-weight: 500;
}

.show-tooltip {
    top: -75px;
    left: 200px;
}

#substitution_page .main_title {
    margin-top: 20px;
}

main .main_title .sub-title {
    flex-direction: column;
    align-items: baseline;
    gap: 5px;
        margin: 0;
}

  }


    @media screen and (max-width: 470px) {
.show-tooltip {
    top: -20px;
    left: 0;
}

    }

    @media print{
      header {
        display: none;
      }
    }