/*!**********************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/style.scss ***! \**********************************************************************************************************************************************************/ input[type=text].form-control { display: block; color: #555; width: 100%; height: 34px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 2px; border: 1px solid #e0e0e0; font-size: 15px; line-height: 24px; padding: 6px 10px 4px; background-color: #f9f9f9; } input[type=text].form-control:focus { border-color: #00a6dc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 166, 220, 0.6); } .in-development { pointer-events: none; filter: grayscale(1); user-select: none; } @keyframes rotate180 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .ajaxButtonWrap { border: 1px solid #00a6dc; display: flex; align-items: center; justify-content: center; max-width: 30ch; margin-left: auto; margin-right: auto; width: auto; } .ajaxButton { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 10px; cursor: pointer; } .ajaxButton img { width: 40px; } .ajaxButton:hover { background-color: rgba(0, 166, 220, 0.0196078431); } .ajaxButton:hover img { animation: rotate180 3s infinite; } .ajaxButton-text { display: flex; flex-direction: column; align-items: flex-start; color: #00a6dc; } .ajaxButton-textTitle { font-weight: 600; font-size: 17px; line-height: 18px; } .ajaxButton-textCount { font-size: 14px; line-height: 16px; } .pagination-pages { display: flex; align-items: center; justify-content: center; } .pagination-pages .pagination-item { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 400; color: #6a707c; } .pagination-pages .pagination-item.--currentPage { color: #fff; background-color: #00a6dc; pointer-events: none; } .pagination-pages .pagination-item:hover { background-color: #00a6dc; color: #fff; } .pagination-pages .pagination-item:hover { text-decoration: none; } .pagination-wrap { width: fit-content; margin-left: auto; margin-right: auto; display: flex; gap: 10px 15px; flex-direction: column; margin-top: 16px; margin-bottom: 16px; } /*!***********************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/layout.scss ***! \***********************************************************************************************************************************************************/ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } .breadcrumbs-homeIcon { margin-right: 7px; } .breadcrumb { font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; display: flex; align-items: center; } .breadcrumb:not(:last-child):after { content: "\a"; width: 5px; height: 5px; border-radius: 50%; background: rgba(155, 157, 160, 0.8); display: inline-block; margin: 0 8px; } .breadcrumb:not(.breadcrumb-home) a { text-decoration: underline; color: #00a6dc; } .breadcrumb:not(.breadcrumb-home):not(.breadcrumb-current) a { text-decoration: underline; color: #9b9da0; } .breadcrumb.breadcrumb-home { display: flex; align-items: center; } .breadcrumb.breadcrumb-home:hover { color: #777; } .breadcrumb.breadcrumb-current { pointer-events: none; } .breadcrumb.breadcrumb-current span { font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; color: #00a6dc; } .breadcrumb:not(.breadcrumb-current) span { color: #9b9da0; } .breadcrumb:not(.breadcrumb-current) span:hover { color: #777; } .breadcrumbs-delimiter { margin-right: 4px; margin-left: 4px; fill: #6a707c; } a.breadcrumb-home { display: flex; color: #6a707c; text-decoration: none; } .breadcrumbs-homeIcon, .breadcrumbs-delimiter { margin-bottom: 3px; } .breadcrumbs { padding-top: 16px; padding-bottom: 16px; font-size: 14px; line-height: 17px; display: flex; align-items: center; flex-wrap: wrap; } .breadcrumbs .breadcrumb-item.current span { color: #0093c3; } .breadcrumbs .breadcrumb-dot { content: ""; height: 5px; width: 5px; background-color: #bbb; border-radius: 50%; display: inline-block; } .breadcrumbs .breadcrumb-item:not(.current) a, .breadcrumbs .breadcrumbs-home { transition: all 0.2s ease-in-out; text-decoration: none; color: #9b9da0; position: relative; } .breadcrumbs .breadcrumb-item:not(.current) a:after, .breadcrumbs .breadcrumbs-home:after { position: absolute; display: block; top: 100%; left: 0; width: 100%; height: 1px; background: #00a6dc; content: ""; opacity: 0; transition: height 0.3s, opacity 0.3s, transform 0.3s; transform: translateY(-10px); } .breadcrumbs .breadcrumb-item:not(.current) a:hover, .breadcrumbs .breadcrumbs-home:hover { color: #777; } .breadcrumbs .breadcrumb-item:not(.current) a:hover:after, .breadcrumbs .breadcrumbs-home:hover:after { height: 1px; opacity: 1; transform: translateY(0); background: #9b9da0; } .project-attributes-wrap { display: flex; margin-bottom: 15px; } .project-attributes { display: flex; flex-direction: column; width: 548px; max-width: 100%; padding: 15px; border: 1px solid #e0e0e0; background-color: #fff; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; font-size: 14px; } .project-attributes .attr-row { display: flex; align-items: center; margin-bottom: 3px; } .project-attributes .attr-name { background: #f3f3f3; flex-shrink: 0; line-height: 1.4; margin-bottom: 3px; color: #6a707c; padding: 8px; width: 50%; } .project-attributes .attr-value { padding: 8px 11px; } @media (max-width: 1024px) { .project-attributes-wrap { flex-direction: column; } .attr-row { flex-wrap: wrap; } .project-attributes .attr-name, .project-attributes .attr-value { width: 100%; } .attr-value { padding-left: 15px; } } .productBlocks-wrap { display: grid; grid-template-columns: 255px 255px 255px; column-gap: 10px; row-gap: 15px; margin-bottom: 30px; grid-template-columns: repeat(auto-fit, 255px); justify-content: center; } .productBlocks-heading { font-family: Fira\ Sans, Arial, sans-serif; color: #3e4148; font-size: 28px; line-height: 32px; font-weight: 300; margin-bottom: 15px; } .productInfo { display: flex; background: #fff; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; } .productInfo-mainImage { width: 300px; height: 300px; padding-right: 15px; padding-left: 15px; } .productInfo-info { flex-grow: 2; padding-right: 15px; padding-left: 15px; background-color: #fff; } .productInfo-info .productName { margin-top: 10px; font-size: 20px; line-height: 24px; font-weight: 400; margin-bottom: 4px; } .productInfo-info .productCode { font-weight: 500; font-size: 14px; line-height: 18px; } .productInfo-info .productCodeLabel { font-size: 14px; line-height: 18px; } .productInfo-info .productStatus { margin-bottom: 20px; } .productInfo-info .productStatus.inStock { font-size: 14px; line-height: 18px; color: #0ec02c; font-weight: 500; } .productInfo-info .productStatus .productStatus-inStockIcon { font-size: 16px; font-weight: 600; } .productInfo-info .productPriceLabel { font-size: 16px; line-height: 20px; font-weight: 500; color: #00a6dc; padding-bottom: 4px; } .productPriceValue { color: #3e4148; font-size: 24px; line-height: 28px; font-weight: 500; margin-left: 0; margin-right: auto; } .p-buy { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0; } .productInfo-tabButtons { display: flex; align-items: center; justify-content: space-evenly; border: 1px solid rgb(224, 224, 224); background-color: #fff; margin-bottom: 20px; } .productInfo-tabButtons .buttonIconWrap { width: 40px; height: 24px; } .productInfo-tabButtons .buttonIconWrap img { filter: contrast(100%) brightness(140%); } .productInfo-tabButtons .tabButton { display: flex; align-items: center; justify-content: center; padding: 20px; transition: all 0.2s ease-in-out; position: relative; z-index: 1; cursor: pointer; flex-grow: 2; text-decoration: none; } .productInfo-tabButtons .tabButton:before { transition: all 0.2s ease-in-out; content: ""; display: block; position: absolute; top: -6px; bottom: -6px; left: -16px; right: -15px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); z-index: -1; opacity: 0; } .productInfo-tabButtons .tabButton:not(:last-of-type):after { content: ""; display: block; width: 1px; top: 12px; bottom: 10px; right: -15px; position: absolute; background: #ddd; } .productInfo-tabButtons .tabButton:hover:before { opacity: 1; } .productInfo-tabButtons .buttonText { color: #00a6dc; text-transform: uppercase; font-size: 14px; line-height: 18px; font-weight: 500; } .productInfo-desc { line-height: 1.4; font-weight: 400; color: #3e4148; width: 100%; margin-bottom: 15px; padding: 20px 15px 20px; border: 1px solid rgb(224, 224, 224); background-color: #fff; font-size: 15px; line-height: 22px; } .productInfo-desc p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .productInfo-desc ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .productInfo-desc ol { padding-left: 15px; } .productInfo-desc li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } .our-benefits { display: flex; flex-direction: column; width: 274px; padding-top: 10px; padding-right: 15px; padding-left: 15px; } .our-benefits a { text-decoration: underline; } .our-benefits a:hover { color: #3e4148; } .our-benefits .benefit-item { display: flex; align-items: center; } .our-benefits .benefit-item + .benefit-item { margin-top: 20px; } .our-benefits .benefit-image-wrap { min-width: 65px; margin-right: 5px; display: flex; } .our-benefits .heading { font-size: 14px; line-height: 18px; font-weight: 600; color: #00a6dc; } .our-benefits .desc { color: #3e4148; font-size: 13px; line-height: 14px; } .project-attr-benefits-wrap { display: flex; } .productBuyButton { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; letter-spacing: -0.25px; text-transform: uppercase; font-size: 14px; line-height: 18px; color: #fff; max-width: 123px; } .productBuyButton:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .productBuyButton:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .productBuyButton:hover:before { transform: translate3d(0, 100%, 0); } .productBuyButton:hover:after { transform: translate3d(0, 100%, 0); } .reviewBlock { border: 1px solid rgb(224, 224, 224); background-color: #fff; padding-top: 20px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; } #productTabAttributes, #productTabDescription, #productTabReviews { scroll-behavior: smooth; } @media (max-width: 768px) { .productBlocks-heading { text-align: center; } } @media (max-width: 600px) { .productInfo { flex-direction: column; } .productPriceLabel { display: none; } .p-buy { flex-direction: column; border: none; } .productPriceValue { text-align: center; margin: auto; } .productInfo-tabButtons { flex-direction: column; } .productInfo-tabButtons .tabButton:not(:last-of-type):after { display: none; } .productName { text-align: center; } .productStatus { text-align: center; } .productCode-wrap { text-align: center; margin-bottom: 15px; } .productInfo-mainImage { margin-left: auto; margin-right: auto; } } .productList { display: grid; grid-template-columns: 255px 255px 255px; column-gap: 10px; row-gap: 15px; } @media (max-width: 992px) { .productList { grid-template-columns: 266px 266px; } } @media (max-width: 576px) { .productList { grid-template-columns: 266px; justify-content: center; } } .productList-item { padding-left: 5px; padding-right: 5px; border: 1px solid #e0e0e0; background: #fff; width: 245px; position: relative; display: flex; flex-direction: column; padding-bottom: 10px; } .productList-item .description { display: flex; flex-direction: column; flex-grow: 2; } .productList-item:before { content: ""; display: block; z-index: -1; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -24px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); opacity: 0; } .productList-item:hover:before { opacity: 1; } .productList-item:hover .productList-productCode { display: flex; } .productList-item:not(:hover) .productList-productCode { display: none; } .productList-item.withHover { z-index: 2; border: 1px solid rgba(0, 0, 0, 0); transition: all 0.2s ease-in-out; } .productList-buyButton { z-index: 1; text-transform: uppercase; font-weight: 400; text-align: center; cursor: pointer; border-radius: 2px; letter-spacing: -0.25px; font-size: 14px; line-height: 18px; padding: 10px 10px 7px; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; display: flex; align-items: center; position: relative; overflow: hidden; gap: 10px; } .productList-buyButton[disabled] { pointer-events: none; filter: grayscale(0.5); } .productList-buyButton:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .productList-buyButton:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .productList-buyButton:hover:before { transform: translate3d(0, 100%, 0); } .productList-buyButton:hover:after { transform: translate3d(0, 100%, 0); } .productList-buyButton img { width: 16px; height: 16px; } .productList-itemContent { display: flex; flex-direction: column; margin-top: auto; flex-grow: 2; } .productList-itemContent.stock_status_id_5 .productList-buyButton { filter: grayscale(1); pointer-events: none; } .productList-priceWrap { padding-top: 10px; margin-bottom: 0; margin-top: auto; } .productList-price { font-size: 16px; line-height: 20px; font-weight: 500; color: #00a6dc; margin-bottom: 8px; } .productList-desc { font-size: 14px; line-height: 1.4; transition: all 0.2s ease-in-out; color: #000; text-decoration: none; font-weight: 500; cursor: pointer; } .productList-desc:hover { color: #00a6dc; text-decoration: none; } .productList-delimiter { display: block; left: 10px; right: 10px; height: 1px; background: #e0e0e0; } .productList-image { padding: 5px; object-fit: contain; height: 245px; } .productList-name { overflow: hidden; margin-bottom: 10px; padding-right: 5px; padding-left: 5px; height: 78px; height: 3.8lh; } .productList-name a { font-size: 14px; line-height: 1.4; color: #000; text-decoration: none; font-weight: 500; transition: all 0.2s ease-in-out; } .productList-name a:hover { text-decoration: none; color: #00a6dc; } .productList-productCodeLabel { font-size: 14px; line-height: 18px; display: flex; align-items: center; justify-content: center; column-gap: 4px; } .productList-productCode { font-weight: 500; font-size: 14px; line-height: 18px; margin-top: 10px; margin-bottom: 10px; align-items: center; gap: 5px; padding-top: 5px; position: absolute; bottom: -24px; } .productList-productCode img { width: 16px; height: 16px; } .mainCategories { width: 770px; max-width: 100%; margin-bottom: 15px; margin-left: auto; margin-right: auto; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .mainCategories .mainCategories-item { width: 200px; line-height: 1.4; margin-bottom: 30px; padding: 15px; padding-bottom: 5px; background-color: #fff; } .mainCategories .mainCategories-cat { line-height: 20px; font-size: 18px; font-weight: 500; transition: all 0.2s ease-in-out; color: #00a6dc; } .mainCategories .mainCategories-cat:hover { text-decoration: underline; } .mainCategories .mainCategories-sub { display: flex; flex-direction: column; padding-top: 15px; } .mainCategories .mainCategories-sub a { transition: all 0.2s ease-in-out; font-size: 14px; line-height: 16px; color: #00a6dc; margin-bottom: 3px; } .mainCategories .mainCategories-sub a:hover { text-decoration: underline; } .js-bannerSlider-wrap { width: 691px; height: 295px; max-width: 100%; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide .productList-image { display: block; width: 100%; height: 220px; object-fit: contain; } @media (max-width: 661px) { .mainCategories { width: 100%; font-size: 18px; } .mainCategories .mainCategories-item { width: 100%; margin-bottom: 0; } } .categoryName { margin: 0.67em 0; margin-bottom: 15px; margin-top: 0; font-size: 28px; line-height: 32px; } .seo-description { font-weight: 400; color: #3e4148; margin-bottom: 45px; padding-top: 60px; border-top: 1px solid #c8c8c8; font-size: 15px; line-height: 22px; } .seo-description p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .seo-description ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .seo-description ol { padding-left: 15px; } .seo-description li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } .langSwitcher { display: flex; align-items: center; justify-content: center; } .langSwitcher-lang, .langSwitcher-other, .langSwitcher-current { font-style: normal; font-weight: 400; font-size: 14px; line-height: 22px; text-transform: uppercase; } .langSwitcher-other { color: #00a6dc; text-decoration: none; } .langSwitcher-divider { height: 22px; margin-left: 5px; margin-right: 5px; width: 1px; background-color: #00a6dc; } .topBar { display: flex; align-items: center; justify-content: space-between; } .topBar-wrap { background-color: #f9f9f9; border-bottom: 1px solid #eee; } .middleBar-wrap { background-color: #00a6dc; } .middleBar { display: flex; align-items: center; justify-content: space-between; } .middleBar .middleBar-item { width: 255px; display: flex; } .middleBar .middleBar-link { position: relative; z-index: 1; text-decoration: none; color: #fff; display: flex; align-items: center; padding-top: 25px; padding-bottom: 25px; margin: auto; justify-content: center; } .middleBar .middleBar-link:before { content: ""; display: block; position: absolute; top: -6px; bottom: -6px; left: -16px; right: -15px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); z-index: -1; opacity: 0; transition: opacity 0.2s; } .middleBar .middleBar-link:hover { color: #00a6dc; } .middleBar .middleBar-link:hover img { filter: contrast(100%) brightness(140%); } .middleBar .middleBar-link:hover:before { opacity: 1; } .middleBar .middleBar-textShort { font-weight: 500; } .middleBar a { color: #fff; text-decoration: none; } .middleBar img { filter: contrast(0) brightness(200%); margin-right: 16px; } .header-top-menu a { letter-spacing: -0.25px; font-size: 14px; line-height: 18px; display: block; padding: 12px 15px; color: #3e4148; text-decoration: none; align-items: center; } .langSwitcher-wrap { padding: 0 30px; } .langSwitcher-wrap .dropdown-item { font-size: 14px; } .langSwitcher-wrap .currentLang { opacity: 0.8; } .langSwitcher-wrap .langSwitcher .dropdown-menu { display: flex; column-gap: 10px; } .topBar-linksList { display: flex; align-items: center; justify-content: space-between; flex-grow: 2; letter-spacing: 0.15px; } .topBar-linksList .divider { background-color: #e0e0e0; padding: 15px 0; height: 30px; margin: auto; width: 1px; } .topBar-linksList a { font-family: Fira\ Sans, Arial, sans-serif; font-weight: 400; transition: all 0.2s ease-in-out; color: #3e4148; text-decoration: none; letter-spacing: -0.25px; font-size: 14px; line-height: 18px; display: block; padding: 12px 15px; } .topBar-linksList a:hover { color: #00a6dc; text-decoration: none; } header { border-bottom: 1px solid #e0e0e0; background-color: #fff; } .header-callback { display: flex; gap: 15px; align-self: center; } .header-callback .header-callback-button-wrap button { width: 221px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; display: block; outline: none; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; } .header-callback .header-callback-button-wrap button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header-callback .header-callback-button-wrap button:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .header-callback .header-callback-button-wrap button:hover:before { transform: translate3d(0, 100%, 0); } .header-callback .header-callback-button-wrap button:hover:after { transform: translate3d(0, 100%, 0); } .header-callback .header-cart-button-wrap { width: 201px; text-align: center; } .header-callback .header-cart-button-wrap button { vertical-align: middle; cursor: pointer; user-select: none; display: block; width: 100%; border: 1px solid #ccc; border-radius: 2px; background: #fff; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; position: relative; position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; } .header-callback .header-cart-button-wrap button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #f2f2f2; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header-callback .header-cart-button-wrap button:after { background-color: #e6e6e6; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .header-callback .header-cart-button-wrap button:hover:before { transform: translate3d(0, 100%, 0); } .header-callback .header-cart-button-wrap button:hover:after { transform: translate3d(0, 100%, 0); } .header-bars-2 { display: flex; } .header-bars-divider { width: 1px; background-color: #ccc; height: 70%; margin-top: 15px; margin-bottom: 15px; } .header-phones { position: relative; display: flex; align-self: center; padding-left: 15px; padding-right: 15px; padding-top: 0; padding-bottom: 0; } .header-phones .header-phones-links { margin-right: 30px; } .header-phones .header-phones-phone-icon { object-fit: contain; padding-right: 4px; } .header-phones img:not(.header-phones-phone-icon) { display: none; } .header-search { display: flex; align-items: center; justify-content: space-between; border: 1px solid #3e4148; width: 100%; height: 30px; font-size: 14px; color: #3e4148; padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; outline: none; background: #fff; width: 200px; } .header-search.--loading .header-search-list { align-items: center; border-bottom: 1px solid #e0e0e0; } .header-search.--loading .header-search-list-link { border: none; } .header-search-ico { width: 20px; height: 20px; right: 4px; position: absolute; } .header-bars { display: flex; justify-content: space-between; align-items: stretch; } .working-wrap { display: flex; align-items: center; padding-left: 15px; padding-right: 15px; padding-top: 0; padding-bottom: 0; } .working-wrap .workingHours { display: flex; flex-direction: column; } .working-wrap .working-title { font-size: 16px; line-height: 20px; font-weight: 600; } .working-wrap .working-text { font-size: 14px; line-height: 18px; } .working-wrap .working-clock-icon { width: 29px; height: 29px; margin-right: 15px; } .sidebar-title { display: block; margin-bottom: -1px; border: 1px solid #ddd; background: #fff; color: #3e4148; padding: 12px 15px; cursor: default; font-size: 18px; line-height: 22px; font-weight: 600; } .navbar-toggler { display: none; } .header-searchWrap { display: none; } .header-search-list { padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; background: #fff; width: 400px; top: 35px; left: 0; right: 0; transform: translateX(-50%); } .header-search-list ul { display: flex; flex-direction: column; gap: 0px; } .navbar-toggler { display: none; align-items: center; justify-content: space-between; background-color: #00a6dc; padding: 8px 15px; width: 100%; } .navbar-toggler .sidebar-toggle-title { font-weight: 400; color: #fff; font-size: 20px; line-height: 24px; } @media (min-width: 1400px) { .header-bars-1, .working-wrap, .header-phones, .header-callback { padding-bottom: 2px; padding-top: 2px; } } @media (max-width: 768px) { .navbar-toggler { display: flex; } .header-bars-divider { display: none; } .header-bars { flex-wrap: wrap; } .header-bars-2 { flex-wrap: wrap; align-items: center; justify-content: center; } .middleBar-wrap { display: none; } .topBar-linksList { display: none; } header { margin-top: 4px; } } @media (max-width: 576px) { .header-bars { flex-direction: column; align-items: center; justify-content: space-between; } .header-bars-1 { display: flex; align-items: center; justify-content: space-between; } .header-bars-2 { flex-direction: column; } .working-wrap, .header-bars-divider { display: none; } .header-phones, .header-callback { margin-bottom: 15px; } .header-callback .header-callback-button-wrap button, .header-callback .header-cart-button-wrap button { width: 160px; } } footer { background-color: #fff; } .footer-wrap { background-color: #fff; } @media (max-width: 768px) { .footer-wrap .footer-contacts-title { display: flex; } } .footer-contacts-title { display: none; } .footer-copyright { text-align: center; padding-top: 20px; font-size: 12px; line-height: 16px; border-top: 1px solid #e0e0e0; color: #bbb; padding-bottom: 20px; } .footer-row { display: flex; padding-top: 30px; justify-content: space-between; } .footer-row > div { width: 50%; } .footer-row li a { color: #6a707c; } .seo-breadcrumbs { margin-top: 30px; margin-bottom: 30px; } .footer-menuCol { display: flex; align-items: flex-start; justify-content: space-between; } .footer-contactsCol { display: flex; justify-content: flex-end; gap: 20px; } .footer-stay-in-touch { margin-bottom: 15px; font-size: 15px; line-height: 18px; font-weight: 500; color: #6a707c; } .footer-contacts-email-link, .contact-phone-link { font-size: 14px; line-height: 20px; transition: all 0.14s ease-in-out; color: #6a707c; } .footer-contacts-email-link:hover, .contact-phone-link:hover { color: #00a6dc; text-decoration: none; } .contact-phone-link { display: flex; align-items: center; justify-content: center; } .contact-phone-link img { width: 20px; height: 20px; margin-right: 5px; } .footer-socials { display: flex; flex-direction: column; } .footer-socials-links { display: flex; align-items: center; justify-items: center; column-gap: 8px; margin-top: 15px; } .footer-socials-links a:hover { filter: brightness(0.5) sepia(1) hue-rotate(150deg) saturate(6); } .footer-socials-links img { width: 32px; height: 32px; } .footer-contacts { display: flex; align-items: flex-start; flex-direction: column; } .footer-contacts-phones { display: flex; flex-direction: column; gap: 5px; } .footer-contacts-email { margin-top: 15px; } .footer-logo-wrap { width: 192px; height: 98px; } .sidebar-benefits { margin-top: calc(20px + 1rem); margin-bottom: 15px; } .sidebar-benefits .benefit-item { padding-bottom: 30px; padding-top: 30px; padding-left: 15px; padding-right: 15px; display: flex; align-items: center; background-color: #fff; border: 1px solid rgb(224, 224, 224); } .sidebar-benefits .benefit-item:not(:last-of-type) { margin-bottom: 20px; } .sidebar-benefits .benefit-image-wrap { width: 56px; height: 36px; display: flex; align-items: center; justify-content: flex-start; } .sidebar-benefits .heading { font-size: 16px; line-height: 20px; font-weight: 500; } .sidebar-benefits .desc { font-size: 12px; line-height: 16px; } .sidebar-popular-links { padding: 30px 15px; margin-top: 20px; background-color: #fff; border: 1px solid rgb(224, 224, 224); } .sidebar-popular-links .links-heading { font-size: 16px; line-height: 20px; font-weight: 500; } .sidebar-popular-links .link { font-size: 12px; line-height: 16px; color: #337ab7; text-decoration: none; transition: all 0.2s ease-in-out; } footer { margin-top: auto; } @media (max-width: 768px) { .footer-row { flex-direction: column; } .footer-stay-in-touch { margin-bottom: 0; } .footer-socials-links { margin-top: 0; } .footer-row > div { width: 100%; } .footer-contactsCol { display: flex; flex-direction: column; align-items: center; } .seo-breadcrumbs { margin-bottom: 15px; margin-top: 15px; } } @media (max-width: 480px) { .footer-menuCol { display: grid; grid-template-columns: 1fr 1fr; text-align: center; } .footer-logo-wrap { grid-column: 1/4; justify-self: center; } } .sidebar-menu { width: 290px; } .sidebar-menu .sidebar-menuItem { text-decoration: none; display: block; margin-bottom: -1px; border: 1px solid #ddd; transition: all 0.2s ease-in-out; font-size: 16px; line-height: 20px; background: #fff; color: #00a6dc; cursor: pointer; } .sidebar-menu .sidebar-menuItem.itemCat.active { padding: 0; } .sidebar-menu .sidebar-menuItem.itemCat a { padding: 10px 15px; display: block; } .sidebar-menu .sidebar-menuItem.itemSubCat { border-left: none; border-right: none; } .sidebar-menu .sidebar-menuItem.itemSubCat a, .sidebar-menu .sidebar-menuItem.itemSubCat .currentSubCat { padding: 10px 15px 10px 30px; } .sidebar-menu .sidebar-menuItem .itemSubCat .itemSubCat a, .sidebar-menu .sidebar-menuItem .itemSubCat .itemSubCat .currentSubCat { padding-left: 50px; } .sidebar-menu .sidebar-menuItem:hover { background: #f0f2f7; } .sidebar-menu .sidebar-menuItem:hover > a { color: #3e4148; text-decoration: none; } .sidebar-menu .sidebar-categoryName { font-size: 16px; line-height: 20px; color: #00a6dc; } .sidebar-menu .sidebar-categoryName.currentCategory { color: #fff; background: #00a6dc; border: 1px solid #00a6dc; padding: 10px 15px; } .sidebar-menu .itemSubCat .currentSubCat { font-weight: bold; cursor: default; } .form-control-radio { margin: 0.5rem; } .form-control-radio input[type=radio] { position: absolute; opacity: 0; } .form-control-radio input[type=radio] + .radio-label:before { content: ""; background: #f9f9f9; border-radius: 100%; border: 1px solid #b9b9b9; display: inline-block; width: 1.2em; height: 1.2em; position: relative; top: -0.05em; margin-right: 1em; vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease; } .form-control-radio input[type=radio]:checked + .radio-label:before { background-color: #00a6dc; box-shadow: inset 0 0 0 3px #f9f9f9; } .form-control-radio input[type=radio]:focus + .radio-label:before { outline: none; border-color: #00a6dc; } .form-control-radio input[type=radio]:disabled + .radio-label:before { box-shadow: inset 0 0 0 3px #f9f9f9; border-color: #b9b9b9; background: #b9b9b9; } .form-control-radio input[type=radio] + .radio-label:empty:before { margin-right: 0; } /**

Checked

Unchecked

Disabled

*/ /**

{{ text_dmv_page_cart_nova_poshta_courier }}
CSS Only
A disabled checkbox
Fourth option

*/ .m-1, .block-info, .heading-h5, .form-group:not(:first-child) { margin-top: 15px; } .m-3, .heading-h4:not(:first-child) { margin-top: 45px; } .heading-h4:not(:first-child) + .form-group, .heading-h5:not(:first-child) + .form-group { margin-top: 10px; } .block-info { font-size: 14px; line-height: 1.8; font-family: Fira\ Sans, Arial, sans-serif; font-weight: 400; color: #3e4148; box-sizing: inherit; min-height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); padding: 9px; border-radius: 3px; } textarea { display: block; color: #555; width: 100%; background-image: none; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; height: auto; border-radius: 2px; border: 1px solid #e0e0e0; font-size: 15px; line-height: 24px; padding: 6px 10px 4px; background-color: #fff; resize: none; } .form-group.disabled label { opacity: 0.6; } .form-group.disabled input { background-color: #e2e2e2; } .dmv-checkbox { display: flex; align-items: center; justify-content: start; } .dmv-checkbox.form-group { margin-top: 5px; } .dmv-checkbox.form-control { display: flex; align-items: center; } .dmv-checkbox input[type=checkbox], .dmv-checkbox input[type=radio] { box-sizing: border-box; width: 20px; height: 20px; margin: 6px; padding: 0; border: 2px solid rgba(0, 166, 220, 0.5); appearance: none; background-color: transparent; outline: none; transition: outline 0.1s; } .dmv-checkbox input[type=checkbox]:checked, .dmv-checkbox input[type=radio]:checked { background-size: cover; padding: 2px; border-color: rgba(0, 166, 220, 0.5); background-image: url('data:image/svg+xml;utf8,'); } .dmv-checkbox input[type=checkbox]:disabled, .dmv-checkbox input[type=radio]:disabled { background-color: #d9d9d9; } .dmv-checkbox input[type=checkbox]:disabled:checked, .dmv-checkbox input[type=radio]:disabled:checked { background-image: url('data:image/svg+xml;utf8,'); } @media (hover: hover) { .dmv-checkbox input[type=checkbox]:not(:disabled):hover, .dmv-checkbox input[type=radio]:not(:disabled):hover { background-color: rgba(0, 166, 220, 0.2); outline: 2px solid rgba(0, 166, 220, 0.2); transform: scale(1.02); } } .dmv-checkbox input[type=checkbox]:focus-visible, .dmv-checkbox input[type=radio]:focus-visible { outline: 6px solid rgba(0, 166, 220, 0.2); transform: scale(1.02); } @media (prefers-reduced-motion: reduce) { .dmv-checkbox input[type=checkbox], .dmv-checkbox input[type=radio] { transition: none; } } .dmv-checkbox input[type=radio] { border-radius: 50%; background-position: 50% 50%; background-repeat: no-repeat; } .dmv-checkbox input[type=radio]:checked { background-size: 75%; } body .-invalid-message { color: #FB5D4C; } .-invalid-wrapper label { color: #FB5D4C; } .-invalid-wrapper input, .-invalid-wrapper textarea { color: #FB5D4C; } .-invalid-wrapper input::placeholder, .-invalid-wrapper textarea::placeholder { color: #FB5D4C; } input[type=text].form-control.-invalid, textarea.-invalid { color: #FB5D4C; } input[type=text].form-control.-invalid::placeholder, textarea.-invalid::placeholder { color: #FB5D4C; } a { color: #337ab7; } a:hover { color: #23527c; text-decoration: underline; } picture img { height: auto; } textarea::placeholder { color: rgba(85, 85, 85, 0.6784313725); } .tempDev { padding: 2rem 1rem; width: 100%; border: 2px dashed #0b91d2; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } h1.pageHeading { font-weight: 300; text-align: left; } .container { width: 1140px; max-width: 100%; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; } ul { list-style-type: none; } ol, ul, dl { margin-top: 0; margin-bottom: 0; } ol, ul { padding-left: 0; } .left-menu-link { font-size: 16px; line-height: 20px; background: #fdfdfd; color: #00a6dc; } html { height: 100%; } body { background-color: #f9f9f9; font-family: "Fira Sans", sans-serif; display: flex; flex-direction: column; min-height: 100vh; } h1 { margin: 0.67em 0; font-weight: 500; font-size: 28px; line-height: 32px; margin-bottom: 15px; margin-top: 0; text-align: center; } h2 { font-weight: 500; margin-bottom: 15px; margin-top: 0; font-size: 22px; line-height: 26px; } h2 { display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0; margin-inline-end: 0; } .mainContent-wrap { display: flex; gap: 10px; } [data-productisinstock=false] { pointer-events: none; filter: grayscale(0.9); user-select: none; } .modal-overlay { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .modal-overlay:not(.open) { display: none; } .mfp-content { z-index: 1045; } #popup-callback-wrapper { width: 400px; max-width: 100%; } #popup-cart-wrapper { background: #fff; width: 800px; max-width: 100%; position: fixed; /* position: fixed; */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-wrapper { position: relative; z-index: 1043; margin: auto; } .popup-wrapper:not(.shown) { display: none; } .popup-wrapper .mfp-close { line-height: 44px; text-align: center; opacity: 0.65; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; overflow: visible; display: block; padding: 0; box-shadow: none; color: #333; text-indent: -9999px; width: 60px; height: 52px; background-color: #fff; background-image: url("/static/image/close.png"); background-repeat: no-repeat; right: 0; top: 0; position: absolute; z-index: 2; cursor: pointer !important; outline: none; border: 0; } .popup-wrapper .mfp-close:hover { background-position: 0 -60px; } .masked_loading { background: url(/extension/dmv_plus_theme/catalog/view/assets/ring-alt.svg) no-repeat center center; width: 100%; height: 100%; position: absolute; z-index: 10001; top: 0; left: 0; } .masked { position: absolute; z-index: 10000; width: 100%; height: 100%; background: #eee; opacity: 0.4; left: 0; top: 0; } .segment { font-weight: 400; color: #3e4148; box-sizing: inherit; margin-bottom: 30px; padding: 15px; background-color: #fff; border: 1px solid #e0e0e0; font-size: 14px; line-height: 18px; } .form-control.error { border-color: #e8302c; } .error { margin-top: 3px; display: block; color: #e8302c; font-size: 14px; line-height: 1.4; } .error .bg_color_white { background-color: #fff; padding: 0 3px; text-align: center; } .homeContent { width: 820px; max-width: 100%; } .fw_strong { font-weight: bold; } #menu .logo { display: none; } .sidebar-logo-wrap { display: flex; align-items: start; justify-content: space-between; } .sidebar-logo-wrap .navbar-toggler { background-color: unset; width: 50px; align-self: start; margin-left: auto; margin-right: 0; flex-shrink: 2; } .mob-phone { display: none; align-items: center; justify-content: center; position: fixed; bottom: 0; left: 0; width: 100%; height: 44px; background-color: #ffc54e; } h2 { font-size: 22px; line-height: 26px; } h3 { font-size: 18px; line-height: 22px; } h1.--light, h2.--light { font-weight: 300; } h1, h2 { margin-bottom: 5px; margin-top: 15px; } h3, h4 { margin-bottom: 5px; margin-top: 15px; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } .content-inner { margin-bottom: 30px; padding: 15px; background-color: #fff; border: 1px solid #e0e0e0; color: #3e4148; font-size: 15px; line-height: 22px; } .content-inner p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .content-inner ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .content-inner ol { padding-left: 15px; } .content-inner li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } #returnToTop { position: fixed; bottom: 20px; right: 20px; background: rgba(255, 197, 78, 0.9); width: 60px; height: 60px; text-decoration: none; border-radius: 50%; display: block; opacity: 0; z-index: 1000; } @media (max-width: 576px) { h1.pageHeading { text-align: center; } #menu:not(.--opened) { display: none; } #menu .logo { display: flex; } .productList-delimiter { display: none; } .productList-priceWrap { display: flex; width: 100%; align-items: center; justify-content: space-around; } .middleBar-wrap { display: none; } .mob-phone { display: flex; } footer { padding-bottom: 44px; } } /*!**************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/dmvplus/components/topSearch.scss ***! \**************************************************************************************************************************************************************************/ .header-search-list { display: flex; flex-direction: column; position: absolute; top: 30px; z-index: 2; left: 0; } .header-search { position: relative; } .header-search-list-link { box-sizing: inherit; text-decoration: none; display: block; margin-bottom: -1px; border: 1px solid #ddd; transition: all 0.2s ease-in-out; line-height: 20px; background: #fff; color: #00a6dc; cursor: pointer; padding: 4px 8px 5px 8px; font-size: 13px; } /*!*****************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/components/Elements/relinkBlock.scss ***! \*****************************************************************************************************************************************************************************/ .relinking { display: flex; justify-content: space-between; margin-top: 30px; margin-bottom: 30px; } .relinking-col { width: 24%; } .relinking-li { line-height: 1.4; } .relinking-title { font-size: 14px; line-height: 1.4; } .relinking-a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; } .relinking-title { font-weight: bold; } @media (max-width: 991px) { .relinking { flex-direction: column; margin-top: 30px; margin-bottom: 0; } .relinking-col { margin: 0 0 20px 0; width: 100%; } .relinking-title { margin-bottom: 7px; position: relative; } .relinking-title::after { content: ""; border-right: 2px solid black; border-bottom: 2px solid black; display: inline-block; transform: translate(5px, -2px) rotate(45deg); width: 8px; height: 8px; } .relinking-ul.active { display: none; } } /*!**************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/modules/subscribeForm.scss ***! \**************************************************************************************************************************************************************************/ .subscribeForm { position: relative; background-image: url("/static/image/main-subscribe-bg.webp"); background-size: cover; } .subscribeForm .subscribeForm-bgOverlay { background-color: rgba(0, 0, 0, 0.4); position: absolute; width: 100%; height: 100%; z-index: 0; } .subscribeForm button { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; padding: 8px 30px; line-height: 24px; width: 100%; } .subscribeForm button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .subscribeForm button:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .subscribeForm button:hover:before { transform: translate3d(0, 100%, 0); } .subscribeForm button:hover:after { transform: translate3d(0, 100%, 0); } .subscribeForm input { margin: 0; color: #555; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 2px; border: 1px solid #e0e0e0; padding: 6px 10px 4px; background-color: #fff; font-size: 15px; line-height: 30px; height: 40px; } .subscribeForm input:focus { border-color: #00a6dc; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 166, 220, 0.6); } .subscribeForm input.disabled { pointer-events: none; opacity: 0.9; background-color: #e8e8e8; } .subscribeForm .subscribeForm-text { width: 285px; margin-right: 20px; text-align: left; } .subscribeForm .subscribeForm-heading { color: #fff; font-size: 18px; line-height: 22px; font-weight: 600; } .subscribeForm .subscribeForm-desc { text-align: left; color: #fff; font-size: 14px; line-height: 18px; } .subscribeForm .subscribeForm-content { padding-top: 45px; padding-bottom: 45px; width: 1440px; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; align-items: center; position: relative; z-index: 1; justify-content: center; } .subscribeForm form { display: flex; align-items: center; justify-content: center; column-gap: 10px; } .subscribeForm .--success { font-size: 16px; background-color: #fff; padding: 10px; margin-bottom: 15px; color: green; text-align: center; } .subscribeForm .--error { font-size: 16px; background-color: #fff; padding: 10px; margin-bottom: 15px; text-align: center; } .subscribeForm .--error-query { font-size: 16px; background-color: #fff; padding: 10px; margin-bottom: 15px; color: red; text-align: center; } .subscribeForm input[type=text].form-control { height: 42px; } @media (max-width: 960px) { .subscribeForm .subscribeForm-content { flex-direction: column; } .subscribeForm form { flex-direction: column; gap: 15px; } .subscribeForm .subscribeForm-text { margin-bottom: 15px; } .subscribeForm .subscribeForm-heading { text-align: center; } .subscribeForm .subscribeForm-desc { text-align: center; } } /*!******************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/components/Blocks/Form/Validator.scss ***! \******************************************************************************************************************************************************************************/ [data-fieldvalidation] .js-errorMessage { color: #FB5D4C; font-style: normal; font-weight: 400; font-size: 12px; line-height: 15px; min-height: 19px; display: block; } [data-fieldvalidation]:not(.-invalid-wrapper) .js-errorMessage { opacity: 0; } /*!*************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/modules/callbackForm.scss ***! \*************************************************************************************************************************************************************************/ .callbackForm { position: relative; display: flex; flex-direction: column; width: 400px; max-width: 100%; background-color: #fff; } .callbackForm .callbackForm-submit { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; text-align: center; } .callbackForm .callbackForm-submit:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .callbackForm .callbackForm-submit:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .callbackForm .callbackForm-submit:hover:before { transform: translate3d(0, 100%, 0); } .callbackForm .callbackForm-submit:hover:after { transform: translate3d(0, 100%, 0); } .callbackForm .popup-heading { color: #3e4148; cursor: auto; box-sizing: inherit; padding: 15px; padding-top: 10px; padding-bottom: 10px; font-size: 20px; line-height: 32px; text-align: left; border-bottom: 1px solid #dfe4eb; } .callbackForm .popup-center { padding: 15px; } .callbackForm .popup-footer { padding: 15px; border-top: 1px solid #dfe4eb; } .callbackForm .form-group { width: 100%; margin-bottom: 15px; } .callbackForm form { display: flex; flex-direction: column; align-items: center; justify-content: center; column-gap: 10px; } /*!**************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/dmvplus/components/offcanvas.scss ***! \**************************************************************************************************************************************************************************/ #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3490196078); z-index: 10; } #overlay.--shown { display: block; } #menu.--opened { position: fixed; left: 0; top: 0; z-index: 100; background: #fff; } .navbar-toggler img { width: 40px; } .top-banner-overlay { display: flex; flex-direction: column; justify-content: center; width: 350px; padding: 20px; transition: transform 0.4s; color: white; background: rgba(0, 0, 0, 0.7); } .top-banner-overlay.is-moved { transform: translateX(350px); } .top-banner-overlay.is-moved:before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); } .top-banner-overlay p { font-size: 1rem; margin-top: 10px; } .top-nav li + li { margin-top: 8px; } .top-nav .menu-wrapper { position: fixed; top: 0; left: 0; bottom: 0; width: 60px; padding: 20px; transform: translateX(-350px); transition: tranform 0.4s; background: #A0F0ED; } .top-nav .menu-wrapper.is-opened { transform: translateX(60px); width: 350px; } .top-nav .menu-wrapper.is-opened .menu { opacity: 1; transition-delay: 0.4s; } .top-nav .menu-wrapper.is-opened a { font-size: 1.2rem; } .top-nav .menu { opacity: 0; transition: opacity 0.3s; } .top-nav .sub-menu { padding: 10px 0 0 8px; } .top-nav .menu-close { position: absolute; top: 0; right: 20px; font-size: 1.6rem; } .top-nav .fixed-menu { position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; width: 60px; padding: 20px; color: #20504F; background: #64D5CA; } .top-nav .fixed-menu .menu-open { display: inline-flex; align-items: center; text-align: left; margin: 0 0 auto; width: auto; cursor: pointer; color: #20504F; } .top-nav .fixed-menu .menu-open svg { fill: #20504F; } .top-nav .fixed-menu .menu-open:hover, .top-nav .fixed-menu .menu-open:focus { opacity: 0.9; } .top-nav .fixed-menu .menu-icon { margin-right: 10px; } .social-links svg { fill: #20504F; } /*!****************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/dmvplus/components/numberInput.scss ***! \****************************************************************************************************************************************************************************/ .input-number-button-minus { background: #f2f6f9 url("/static/image/number-minus.svg"); border-right: 1px solid rgba(197, 205, 216, 0.8); } .input-number-button-plus { background: #f2f6f9 url("/static/image/number-plus.svg"); border-left: 1px solid rgba(197, 205, 216, 0.8); } .number-field { display: flex; align-items: center; border: 1px solid rgba(197, 205, 216, 0.8); border-radius: 1px; width: fit-content; height: 36px; } .number-field [type=number] { border-top: 0; border-bottom: 0; outline: none; margin: auto 0; font-size: 18px; text-align: center; padding: 0; width: 40px; text-align: center; display: flex; align-items: center; justify-content: center; text-indent: 0px; appearance: none; letter-spacing: 1px; } .number-field input[type=number]::-webkit-inner-spin-button, .number-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .number-field button { width: 40px; height: 100%; display: inline-block; background-size: 40%; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; opacity: 0.7; transition: all 0.1s; filter: grayscale(0.8); } .number-field button:hover { opacity: 1; filter: grayscale(1); } .number-field button.input-number-button-minus { border-right: 1px solid #c5cdd8; } .number-field button.input-number-button-plus { border-left: 1px solid #c5cdd8; } /*!*********************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/modules/cartForm.scss ***! \*********************************************************************************************************************************************************************/ .cartForm { position: relative; display: flex; flex-direction: column; width: 800px; max-width: 100%; background-color: #fff; } .cartForm.--productsEmpty .cartForm-submit { visibility: hidden; } .cartForm .cartForm-submit { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; text-align: center; width: initial; padding: 10px 45px; display: flex; align-items: center; justify-content: center; gap: 8px; } .cartForm .cartForm-submit:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .cartForm .cartForm-submit:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .cartForm .cartForm-submit:hover:before { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-submit:hover:after { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-shopping { position: relative; overflow: hidden; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; border: 1px solid #ccc; border-radius: 2px; background: #fff; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; z-index: 1; color: #333; text-decoration: none; padding: 10px 45px; } .cartForm .cartForm-shopping:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #f2f2f2; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .cartForm .cartForm-shopping:after { background-color: #e6e6e6; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .cartForm .cartForm-shopping:hover:before { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-shopping:hover:after { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-emptyRow { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; } .cartForm input { display: block; color: #555; width: 100%; height: 34px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 2px; border: 1px solid #e0e0e0; font-size: 15px; line-height: 24px; padding: 6px 10px 4px; background-color: #f9f9f9; } .cartForm input:focus { border-color: #00a6dc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 166, 220, 0.6); } .cartForm .popup-heading { padding: 10px 15px; font-size: 20px; line-height: 32px; text-align: left; background-color: #f2f6f9; border-bottom: 1px solid #dfe4eb; position: relative; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; } .cartForm .popup-center { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; } .cartForm .popup-footer { border-top: 1px solid #dfe4eb; display: flex; justify-content: space-between; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; } .cartForm .form-group { width: 100%; margin-bottom: 15px; } .cartForm form { display: flex; flex-direction: column; align-items: center; justify-content: center; column-gap: 10px; } .cartForm .alert.alert-success { font-size: 14px; padding: 15px; margin-bottom: 20px; border-radius: 4px; color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .cartForm .alert.alert-success img { width: 14px; height: 14px; } .cartForm-totalRow { text-align: left; cursor: auto; box-sizing: inherit; padding-top: 15px; padding-bottom: 10px; border-top: 1px solid #ddd; display: flex; justify-content: space-between; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; font-size: 20px; line-height: 24px; font-weight: 500; } .cartForm-remove { cursor: pointer; line-height: 1.42857143; border: 1px solid transparent; padding: 0; padding-top: 5px; font-size: 12px; color: #3e4148; } .cartForm-remove:hover { text-decoration: underline; } .cartForm-listItem { display: flex; justify-content: space-around; padding: 0 15px 15px; } .cartForm-image { padding: 0 15px 15px; width: 200px; } .cartForm-productInfo { display: flex; flex-direction: column; width: 100%; } .cartForm-productName { transition: all 0.2s ease-in-out; font-size: 16px; line-height: 20px; color: #3e4148; cursor: pointer; } .cartForm-productName:hover { color: #00a6dc; } .cartForm-positionRow { display: flex; justify-content: space-between; margin-bottom: 10px; margin-top: 10px; gap: 20px; } .cartForm-totalValue { font-size: 20px; line-height: 24px; } .cartForm-colTitle { color: #3e4148; text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; margin-bottom: 3px; } .cartForm-priceColValue { font-size: 16px; line-height: 32px; } .cartForm-quantityCol { width: 33%; } .cartForm-priceCol { width: 33%; } .cartForm-productSumCol { width: 33%; } /*# sourceMappingURL=publicLayout.css-fb2020f49ddb794ab1a09dcbb54b12ac.map*/ /*!**********************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/style.scss ***! \**********************************************************************************************************************************************************/ input[type=text].form-control { display: block; color: #555; width: 100%; height: 34px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 2px; border: 1px solid #e0e0e0; font-size: 15px; line-height: 24px; padding: 6px 10px 4px; background-color: #f9f9f9; } input[type=text].form-control:focus { border-color: #00a6dc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 166, 220, 0.6); } .in-development { pointer-events: none; filter: grayscale(1); user-select: none; } @keyframes rotate180 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .ajaxButtonWrap { border: 1px solid #00a6dc; display: flex; align-items: center; justify-content: center; max-width: 30ch; margin-left: auto; margin-right: auto; width: auto; } .ajaxButton { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 10px; cursor: pointer; } .ajaxButton img { width: 40px; } .ajaxButton:hover { background-color: rgba(0, 166, 220, 0.0196078431); } .ajaxButton:hover img { animation: rotate180 3s infinite; } .ajaxButton-text { display: flex; flex-direction: column; align-items: flex-start; color: #00a6dc; } .ajaxButton-textTitle { font-weight: 600; font-size: 17px; line-height: 18px; } .ajaxButton-textCount { font-size: 14px; line-height: 16px; } .pagination-pages { display: flex; align-items: center; justify-content: center; } .pagination-pages .pagination-item { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 400; color: #6a707c; } .pagination-pages .pagination-item.--currentPage { color: #fff; background-color: #00a6dc; pointer-events: none; } .pagination-pages .pagination-item:hover { background-color: #00a6dc; color: #fff; } .pagination-pages .pagination-item:hover { text-decoration: none; } .pagination-wrap { width: fit-content; margin-left: auto; margin-right: auto; display: flex; gap: 10px 15px; flex-direction: column; margin-top: 16px; margin-bottom: 16px; } /*!***********************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/layout.scss ***! \***********************************************************************************************************************************************************/ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } .breadcrumbs-homeIcon { margin-right: 7px; } .breadcrumb { font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; display: flex; align-items: center; } .breadcrumb:not(:last-child):after { content: "\a"; width: 5px; height: 5px; border-radius: 50%; background: rgba(155, 157, 160, 0.8); display: inline-block; margin: 0 8px; } .breadcrumb:not(.breadcrumb-home) a { text-decoration: underline; color: #00a6dc; } .breadcrumb:not(.breadcrumb-home):not(.breadcrumb-current) a { text-decoration: underline; color: #9b9da0; } .breadcrumb.breadcrumb-home { display: flex; align-items: center; } .breadcrumb.breadcrumb-home:hover { color: #777; } .breadcrumb.breadcrumb-current { pointer-events: none; } .breadcrumb.breadcrumb-current span { font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; color: #00a6dc; } .breadcrumb:not(.breadcrumb-current) span { color: #9b9da0; } .breadcrumb:not(.breadcrumb-current) span:hover { color: #777; } .breadcrumbs-delimiter { margin-right: 4px; margin-left: 4px; fill: #6a707c; } a.breadcrumb-home { display: flex; color: #6a707c; text-decoration: none; } .breadcrumbs-homeIcon, .breadcrumbs-delimiter { margin-bottom: 3px; } .breadcrumbs { padding-top: 16px; padding-bottom: 16px; font-size: 14px; line-height: 17px; display: flex; align-items: center; flex-wrap: wrap; } .breadcrumbs .breadcrumb-item.current span { color: #0093c3; } .breadcrumbs .breadcrumb-dot { content: ""; height: 5px; width: 5px; background-color: #bbb; border-radius: 50%; display: inline-block; } .breadcrumbs .breadcrumb-item:not(.current) a, .breadcrumbs .breadcrumbs-home { transition: all 0.2s ease-in-out; text-decoration: none; color: #9b9da0; position: relative; } .breadcrumbs .breadcrumb-item:not(.current) a:after, .breadcrumbs .breadcrumbs-home:after { position: absolute; display: block; top: 100%; left: 0; width: 100%; height: 1px; background: #00a6dc; content: ""; opacity: 0; transition: height 0.3s, opacity 0.3s, transform 0.3s; transform: translateY(-10px); } .breadcrumbs .breadcrumb-item:not(.current) a:hover, .breadcrumbs .breadcrumbs-home:hover { color: #777; } .breadcrumbs .breadcrumb-item:not(.current) a:hover:after, .breadcrumbs .breadcrumbs-home:hover:after { height: 1px; opacity: 1; transform: translateY(0); background: #9b9da0; } .project-attributes-wrap { display: flex; margin-bottom: 15px; } .project-attributes { display: flex; flex-direction: column; width: 548px; max-width: 100%; padding: 15px; border: 1px solid #e0e0e0; background-color: #fff; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; font-size: 14px; } .project-attributes .attr-row { display: flex; align-items: center; margin-bottom: 3px; } .project-attributes .attr-name { background: #f3f3f3; flex-shrink: 0; line-height: 1.4; margin-bottom: 3px; color: #6a707c; padding: 8px; width: 50%; } .project-attributes .attr-value { padding: 8px 11px; } @media (max-width: 1024px) { .project-attributes-wrap { flex-direction: column; } .attr-row { flex-wrap: wrap; } .project-attributes .attr-name, .project-attributes .attr-value { width: 100%; } .attr-value { padding-left: 15px; } } .productBlocks-wrap { display: grid; grid-template-columns: 255px 255px 255px; column-gap: 10px; row-gap: 15px; margin-bottom: 30px; grid-template-columns: repeat(auto-fit, 255px); justify-content: center; } .productBlocks-heading { font-family: Fira\ Sans, Arial, sans-serif; color: #3e4148; font-size: 28px; line-height: 32px; font-weight: 300; margin-bottom: 15px; } .productInfo { display: flex; background: #fff; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; } .productInfo-mainImage { width: 300px; height: 300px; padding-right: 15px; padding-left: 15px; } .productInfo-info { flex-grow: 2; padding-right: 15px; padding-left: 15px; background-color: #fff; } .productInfo-info .productName { margin-top: 10px; font-size: 20px; line-height: 24px; font-weight: 400; margin-bottom: 4px; } .productInfo-info .productCode { font-weight: 500; font-size: 14px; line-height: 18px; } .productInfo-info .productCodeLabel { font-size: 14px; line-height: 18px; } .productInfo-info .productStatus { margin-bottom: 20px; } .productInfo-info .productStatus.inStock { font-size: 14px; line-height: 18px; color: #0ec02c; font-weight: 500; } .productInfo-info .productStatus .productStatus-inStockIcon { font-size: 16px; font-weight: 600; } .productInfo-info .productPriceLabel { font-size: 16px; line-height: 20px; font-weight: 500; color: #00a6dc; padding-bottom: 4px; } .productPriceValue { color: #3e4148; font-size: 24px; line-height: 28px; font-weight: 500; margin-left: 0; margin-right: auto; } .p-buy { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0; } .productInfo-tabButtons { display: flex; align-items: center; justify-content: space-evenly; border: 1px solid rgb(224, 224, 224); background-color: #fff; margin-bottom: 20px; } .productInfo-tabButtons .buttonIconWrap { width: 40px; height: 24px; } .productInfo-tabButtons .buttonIconWrap img { filter: contrast(100%) brightness(140%); } .productInfo-tabButtons .tabButton { display: flex; align-items: center; justify-content: center; padding: 20px; transition: all 0.2s ease-in-out; position: relative; z-index: 1; cursor: pointer; flex-grow: 2; text-decoration: none; } .productInfo-tabButtons .tabButton:before { transition: all 0.2s ease-in-out; content: ""; display: block; position: absolute; top: -6px; bottom: -6px; left: -16px; right: -15px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); z-index: -1; opacity: 0; } .productInfo-tabButtons .tabButton:not(:last-of-type):after { content: ""; display: block; width: 1px; top: 12px; bottom: 10px; right: -15px; position: absolute; background: #ddd; } .productInfo-tabButtons .tabButton:hover:before { opacity: 1; } .productInfo-tabButtons .buttonText { color: #00a6dc; text-transform: uppercase; font-size: 14px; line-height: 18px; font-weight: 500; } .productInfo-desc { line-height: 1.4; font-weight: 400; color: #3e4148; width: 100%; margin-bottom: 15px; padding: 20px 15px 20px; border: 1px solid rgb(224, 224, 224); background-color: #fff; font-size: 15px; line-height: 22px; } .productInfo-desc p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .productInfo-desc ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .productInfo-desc ol { padding-left: 15px; } .productInfo-desc li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } .our-benefits { display: flex; flex-direction: column; width: 274px; padding-top: 10px; padding-right: 15px; padding-left: 15px; } .our-benefits a { text-decoration: underline; } .our-benefits a:hover { color: #3e4148; } .our-benefits .benefit-item { display: flex; align-items: center; } .our-benefits .benefit-item + .benefit-item { margin-top: 20px; } .our-benefits .benefit-image-wrap { min-width: 65px; margin-right: 5px; display: flex; } .our-benefits .heading { font-size: 14px; line-height: 18px; font-weight: 600; color: #00a6dc; } .our-benefits .desc { color: #3e4148; font-size: 13px; line-height: 14px; } .project-attr-benefits-wrap { display: flex; } .productBuyButton { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; letter-spacing: -0.25px; text-transform: uppercase; font-size: 14px; line-height: 18px; color: #fff; max-width: 123px; } .productBuyButton:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .productBuyButton:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .productBuyButton:hover:before { transform: translate3d(0, 100%, 0); } .productBuyButton:hover:after { transform: translate3d(0, 100%, 0); } .reviewBlock { border: 1px solid rgb(224, 224, 224); background-color: #fff; padding-top: 20px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; } #productTabAttributes, #productTabDescription, #productTabReviews { scroll-behavior: smooth; } @media (max-width: 768px) { .productBlocks-heading { text-align: center; } } @media (max-width: 600px) { .productInfo { flex-direction: column; } .productPriceLabel { display: none; } .p-buy { flex-direction: column; border: none; } .productPriceValue { text-align: center; margin: auto; } .productInfo-tabButtons { flex-direction: column; } .productInfo-tabButtons .tabButton:not(:last-of-type):after { display: none; } .productName { text-align: center; } .productStatus { text-align: center; } .productCode-wrap { text-align: center; margin-bottom: 15px; } .productInfo-mainImage { margin-left: auto; margin-right: auto; } } .productList { display: grid; grid-template-columns: 255px 255px 255px; column-gap: 10px; row-gap: 15px; } @media (max-width: 992px) { .productList { grid-template-columns: 266px 266px; } } @media (max-width: 576px) { .productList { grid-template-columns: 266px; justify-content: center; } } .productList-item { padding-left: 5px; padding-right: 5px; border: 1px solid #e0e0e0; background: #fff; width: 245px; position: relative; display: flex; flex-direction: column; padding-bottom: 10px; } .productList-item .description { display: flex; flex-direction: column; flex-grow: 2; } .productList-item:before { content: ""; display: block; z-index: -1; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -24px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); opacity: 0; } .productList-item:hover:before { opacity: 1; } .productList-item:hover .productList-productCode { display: flex; } .productList-item:not(:hover) .productList-productCode { display: none; } .productList-item.withHover { z-index: 2; border: 1px solid rgba(0, 0, 0, 0); transition: all 0.2s ease-in-out; } .productList-buyButton { z-index: 1; text-transform: uppercase; font-weight: 400; text-align: center; cursor: pointer; border-radius: 2px; letter-spacing: -0.25px; font-size: 14px; line-height: 18px; padding: 10px 10px 7px; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; display: flex; align-items: center; position: relative; overflow: hidden; gap: 10px; } .productList-buyButton[disabled] { pointer-events: none; filter: grayscale(0.5); } .productList-buyButton:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .productList-buyButton:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .productList-buyButton:hover:before { transform: translate3d(0, 100%, 0); } .productList-buyButton:hover:after { transform: translate3d(0, 100%, 0); } .productList-buyButton img { width: 16px; height: 16px; } .productList-itemContent { display: flex; flex-direction: column; margin-top: auto; flex-grow: 2; } .productList-itemContent.stock_status_id_5 .productList-buyButton { filter: grayscale(1); pointer-events: none; } .productList-priceWrap { padding-top: 10px; margin-bottom: 0; margin-top: auto; } .productList-price { font-size: 16px; line-height: 20px; font-weight: 500; color: #00a6dc; margin-bottom: 8px; } .productList-desc { font-size: 14px; line-height: 1.4; transition: all 0.2s ease-in-out; color: #000; text-decoration: none; font-weight: 500; cursor: pointer; } .productList-desc:hover { color: #00a6dc; text-decoration: none; } .productList-delimiter { display: block; left: 10px; right: 10px; height: 1px; background: #e0e0e0; } .productList-image { padding: 5px; object-fit: contain; height: 245px; } .productList-name { overflow: hidden; margin-bottom: 10px; padding-right: 5px; padding-left: 5px; height: 78px; height: 3.8lh; } .productList-name a { font-size: 14px; line-height: 1.4; color: #000; text-decoration: none; font-weight: 500; transition: all 0.2s ease-in-out; } .productList-name a:hover { text-decoration: none; color: #00a6dc; } .productList-productCodeLabel { font-size: 14px; line-height: 18px; display: flex; align-items: center; justify-content: center; column-gap: 4px; } .productList-productCode { font-weight: 500; font-size: 14px; line-height: 18px; margin-top: 10px; margin-bottom: 10px; align-items: center; gap: 5px; padding-top: 5px; position: absolute; bottom: -24px; } .productList-productCode img { width: 16px; height: 16px; } .mainCategories { width: 770px; max-width: 100%; margin-bottom: 15px; margin-left: auto; margin-right: auto; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .mainCategories .mainCategories-item { width: 200px; line-height: 1.4; margin-bottom: 30px; padding: 15px; padding-bottom: 5px; background-color: #fff; } .mainCategories .mainCategories-cat { line-height: 20px; font-size: 18px; font-weight: 500; transition: all 0.2s ease-in-out; color: #00a6dc; } .mainCategories .mainCategories-cat:hover { text-decoration: underline; } .mainCategories .mainCategories-sub { display: flex; flex-direction: column; padding-top: 15px; } .mainCategories .mainCategories-sub a { transition: all 0.2s ease-in-out; font-size: 14px; line-height: 16px; color: #00a6dc; margin-bottom: 3px; } .mainCategories .mainCategories-sub a:hover { text-decoration: underline; } .js-bannerSlider-wrap { width: 691px; height: 295px; max-width: 100%; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide .productList-image { display: block; width: 100%; height: 220px; object-fit: contain; } @media (max-width: 661px) { .mainCategories { width: 100%; font-size: 18px; } .mainCategories .mainCategories-item { width: 100%; margin-bottom: 0; } } .categoryName { margin: 0.67em 0; margin-bottom: 15px; margin-top: 0; font-size: 28px; line-height: 32px; } .seo-description { font-weight: 400; color: #3e4148; margin-bottom: 45px; padding-top: 60px; border-top: 1px solid #c8c8c8; font-size: 15px; line-height: 22px; } .seo-description p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .seo-description ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .seo-description ol { padding-left: 15px; } .seo-description li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } .langSwitcher { display: flex; align-items: center; justify-content: center; } .langSwitcher-lang, .langSwitcher-other, .langSwitcher-current { font-style: normal; font-weight: 400; font-size: 14px; line-height: 22px; text-transform: uppercase; } .langSwitcher-other { color: #00a6dc; text-decoration: none; } .langSwitcher-divider { height: 22px; margin-left: 5px; margin-right: 5px; width: 1px; background-color: #00a6dc; } .topBar { display: flex; align-items: center; justify-content: space-between; } .topBar-wrap { background-color: #f9f9f9; border-bottom: 1px solid #eee; } .middleBar-wrap { background-color: #00a6dc; } .middleBar { display: flex; align-items: center; justify-content: space-between; } .middleBar .middleBar-item { width: 255px; display: flex; } .middleBar .middleBar-link { position: relative; z-index: 1; text-decoration: none; color: #fff; display: flex; align-items: center; padding-top: 25px; padding-bottom: 25px; margin: auto; justify-content: center; } .middleBar .middleBar-link:before { content: ""; display: block; position: absolute; top: -6px; bottom: -6px; left: -16px; right: -15px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); z-index: -1; opacity: 0; transition: opacity 0.2s; } .middleBar .middleBar-link:hover { color: #00a6dc; } .middleBar .middleBar-link:hover img { filter: contrast(100%) brightness(140%); } .middleBar .middleBar-link:hover:before { opacity: 1; } .middleBar .middleBar-textShort { font-weight: 500; } .middleBar a { color: #fff; text-decoration: none; } .middleBar img { filter: contrast(0) brightness(200%); margin-right: 16px; } .header-top-menu a { letter-spacing: -0.25px; font-size: 14px; line-height: 18px; display: block; padding: 12px 15px; color: #3e4148; text-decoration: none; align-items: center; } .langSwitcher-wrap { padding: 0 30px; } .langSwitcher-wrap .dropdown-item { font-size: 14px; } .langSwitcher-wrap .currentLang { opacity: 0.8; } .langSwitcher-wrap .langSwitcher .dropdown-menu { display: flex; column-gap: 10px; } .topBar-linksList { display: flex; align-items: center; justify-content: space-between; flex-grow: 2; letter-spacing: 0.15px; } .topBar-linksList .divider { background-color: #e0e0e0; padding: 15px 0; height: 30px; margin: auto; width: 1px; } .topBar-linksList a { font-family: Fira\ Sans, Arial, sans-serif; font-weight: 400; transition: all 0.2s ease-in-out; color: #3e4148; text-decoration: none; letter-spacing: -0.25px; font-size: 14px; line-height: 18px; display: block; padding: 12px 15px; } .topBar-linksList a:hover { color: #00a6dc; text-decoration: none; } header { border-bottom: 1px solid #e0e0e0; background-color: #fff; } .header-callback { display: flex; gap: 15px; align-self: center; } .header-callback .header-callback-button-wrap button { width: 221px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; display: block; outline: none; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; } .header-callback .header-callback-button-wrap button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header-callback .header-callback-button-wrap button:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .header-callback .header-callback-button-wrap button:hover:before { transform: translate3d(0, 100%, 0); } .header-callback .header-callback-button-wrap button:hover:after { transform: translate3d(0, 100%, 0); } .header-callback .header-cart-button-wrap { width: 201px; text-align: center; } .header-callback .header-cart-button-wrap button { vertical-align: middle; cursor: pointer; user-select: none; display: block; width: 100%; border: 1px solid #ccc; border-radius: 2px; background: #fff; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; position: relative; position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; } .header-callback .header-cart-button-wrap button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #f2f2f2; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header-callback .header-cart-button-wrap button:after { background-color: #e6e6e6; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .header-callback .header-cart-button-wrap button:hover:before { transform: translate3d(0, 100%, 0); } .header-callback .header-cart-button-wrap button:hover:after { transform: translate3d(0, 100%, 0); } .header-bars-2 { display: flex; } .header-bars-divider { width: 1px; background-color: #ccc; height: 70%; margin-top: 15px; margin-bottom: 15px; } .header-phones { position: relative; display: flex; align-self: center; padding-left: 15px; padding-right: 15px; padding-top: 0; padding-bottom: 0; } .header-phones .header-phones-links { margin-right: 30px; } .header-phones .header-phones-phone-icon { object-fit: contain; padding-right: 4px; } .header-phones img:not(.header-phones-phone-icon) { display: none; } .header-search { display: flex; align-items: center; justify-content: space-between; border: 1px solid #3e4148; width: 100%; height: 30px; font-size: 14px; color: #3e4148; padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; outline: none; background: #fff; width: 200px; } .header-search.--loading .header-search-list { align-items: center; border-bottom: 1px solid #e0e0e0; } .header-search.--loading .header-search-list-link { border: none; } .header-search-ico { width: 20px; height: 20px; right: 4px; position: absolute; } .header-bars { display: flex; justify-content: space-between; align-items: stretch; } .working-wrap { display: flex; align-items: center; padding-left: 15px; padding-right: 15px; padding-top: 0; padding-bottom: 0; } .working-wrap .workingHours { display: flex; flex-direction: column; } .working-wrap .working-title { font-size: 16px; line-height: 20px; font-weight: 600; } .working-wrap .working-text { font-size: 14px; line-height: 18px; } .working-wrap .working-clock-icon { width: 29px; height: 29px; margin-right: 15px; } .sidebar-title { display: block; margin-bottom: -1px; border: 1px solid #ddd; background: #fff; color: #3e4148; padding: 12px 15px; cursor: default; font-size: 18px; line-height: 22px; font-weight: 600; } .navbar-toggler { display: none; } .header-searchWrap { display: none; } .header-search-list { padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; background: #fff; width: 400px; top: 35px; left: 0; right: 0; transform: translateX(-50%); } .header-search-list ul { display: flex; flex-direction: column; gap: 0px; } .navbar-toggler { display: none; align-items: center; justify-content: space-between; background-color: #00a6dc; padding: 8px 15px; width: 100%; } .navbar-toggler .sidebar-toggle-title { font-weight: 400; color: #fff; font-size: 20px; line-height: 24px; } @media (min-width: 1400px) { .header-bars-1, .working-wrap, .header-phones, .header-callback { padding-bottom: 2px; padding-top: 2px; } } @media (max-width: 768px) { .navbar-toggler { display: flex; } .header-bars-divider { display: none; } .header-bars { flex-wrap: wrap; } .header-bars-2 { flex-wrap: wrap; align-items: center; justify-content: center; } .middleBar-wrap { display: none; } .topBar-linksList { display: none; } header { margin-top: 4px; } } @media (max-width: 576px) { .header-bars { flex-direction: column; align-items: center; justify-content: space-between; } .header-bars-1 { display: flex; align-items: center; justify-content: space-between; } .header-bars-2 { flex-direction: column; } .working-wrap, .header-bars-divider { display: none; } .header-phones, .header-callback { margin-bottom: 15px; } .header-callback .header-callback-button-wrap button, .header-callback .header-cart-button-wrap button { width: 160px; } } footer { background-color: #fff; } .footer-wrap { background-color: #fff; } @media (max-width: 768px) { .footer-wrap .footer-contacts-title { display: flex; } } .footer-contacts-title { display: none; } .footer-copyright { text-align: center; padding-top: 20px; font-size: 12px; line-height: 16px; border-top: 1px solid #e0e0e0; color: #bbb; padding-bottom: 20px; } .footer-row { display: flex; padding-top: 30px; justify-content: space-between; } .footer-row > div { width: 50%; } .footer-row li a { color: #6a707c; } .seo-breadcrumbs { margin-top: 30px; margin-bottom: 30px; } .footer-menuCol { display: flex; align-items: flex-start; justify-content: space-between; } .footer-contactsCol { display: flex; justify-content: flex-end; gap: 20px; } .footer-stay-in-touch { margin-bottom: 15px; font-size: 15px; line-height: 18px; font-weight: 500; color: #6a707c; } .footer-contacts-email-link, .contact-phone-link { font-size: 14px; line-height: 20px; transition: all 0.14s ease-in-out; color: #6a707c; } .footer-contacts-email-link:hover, .contact-phone-link:hover { color: #00a6dc; text-decoration: none; } .contact-phone-link { display: flex; align-items: center; justify-content: center; } .contact-phone-link img { width: 20px; height: 20px; margin-right: 5px; } .footer-socials { display: flex; flex-direction: column; } .footer-socials-links { display: flex; align-items: center; justify-items: center; column-gap: 8px; margin-top: 15px; } .footer-socials-links a:hover { filter: brightness(0.5) sepia(1) hue-rotate(150deg) saturate(6); } .footer-socials-links img { width: 32px; height: 32px; } .footer-contacts { display: flex; align-items: flex-start; flex-direction: column; } .footer-contacts-phones { display: flex; flex-direction: column; gap: 5px; } .footer-contacts-email { margin-top: 15px; } .footer-logo-wrap { width: 192px; height: 98px; } .sidebar-benefits { margin-top: calc(20px + 1rem); margin-bottom: 15px; } .sidebar-benefits .benefit-item { padding-bottom: 30px; padding-top: 30px; padding-left: 15px; padding-right: 15px; display: flex; align-items: center; background-color: #fff; border: 1px solid rgb(224, 224, 224); } .sidebar-benefits .benefit-item:not(:last-of-type) { margin-bottom: 20px; } .sidebar-benefits .benefit-image-wrap { width: 56px; height: 36px; display: flex; align-items: center; justify-content: flex-start; } .sidebar-benefits .heading { font-size: 16px; line-height: 20px; font-weight: 500; } .sidebar-benefits .desc { font-size: 12px; line-height: 16px; } .sidebar-popular-links { padding: 30px 15px; margin-top: 20px; background-color: #fff; border: 1px solid rgb(224, 224, 224); } .sidebar-popular-links .links-heading { font-size: 16px; line-height: 20px; font-weight: 500; } .sidebar-popular-links .link { font-size: 12px; line-height: 16px; color: #337ab7; text-decoration: none; transition: all 0.2s ease-in-out; } footer { margin-top: auto; } @media (max-width: 768px) { .footer-row { flex-direction: column; } .footer-stay-in-touch { margin-bottom: 0; } .footer-socials-links { margin-top: 0; } .footer-row > div { width: 100%; } .footer-contactsCol { display: flex; flex-direction: column; align-items: center; } .seo-breadcrumbs { margin-bottom: 15px; margin-top: 15px; } } @media (max-width: 480px) { .footer-menuCol { display: grid; grid-template-columns: 1fr 1fr; text-align: center; } .footer-logo-wrap { grid-column: 1/4; justify-self: center; } } .sidebar-menu { width: 290px; } .sidebar-menu .sidebar-menuItem { text-decoration: none; display: block; margin-bottom: -1px; border: 1px solid #ddd; transition: all 0.2s ease-in-out; font-size: 16px; line-height: 20px; background: #fff; color: #00a6dc; cursor: pointer; } .sidebar-menu .sidebar-menuItem.itemCat.active { padding: 0; } .sidebar-menu .sidebar-menuItem.itemCat a { padding: 10px 15px; display: block; } .sidebar-menu .sidebar-menuItem.itemSubCat { border-left: none; border-right: none; } .sidebar-menu .sidebar-menuItem.itemSubCat a, .sidebar-menu .sidebar-menuItem.itemSubCat .currentSubCat { padding: 10px 15px 10px 30px; } .sidebar-menu .sidebar-menuItem .itemSubCat .itemSubCat a, .sidebar-menu .sidebar-menuItem .itemSubCat .itemSubCat .currentSubCat { padding-left: 50px; } .sidebar-menu .sidebar-menuItem:hover { background: #f0f2f7; } .sidebar-menu .sidebar-menuItem:hover > a { color: #3e4148; text-decoration: none; } .sidebar-menu .sidebar-categoryName { font-size: 16px; line-height: 20px; color: #00a6dc; } .sidebar-menu .sidebar-categoryName.currentCategory { color: #fff; background: #00a6dc; border: 1px solid #00a6dc; padding: 10px 15px; } .sidebar-menu .itemSubCat .currentSubCat { font-weight: bold; cursor: default; } .form-control-radio { margin: 0.5rem; } .form-control-radio input[type=radio] { position: absolute; opacity: 0; } .form-control-radio input[type=radio] + .radio-label:before { content: ""; background: #f9f9f9; border-radius: 100%; border: 1px solid #b9b9b9; display: inline-block; width: 1.2em; height: 1.2em; position: relative; top: -0.05em; margin-right: 1em; vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease; } .form-control-radio input[type=radio]:checked + .radio-label:before { background-color: #00a6dc; box-shadow: inset 0 0 0 3px #f9f9f9; } .form-control-radio input[type=radio]:focus + .radio-label:before { outline: none; border-color: #00a6dc; } .form-control-radio input[type=radio]:disabled + .radio-label:before { box-shadow: inset 0 0 0 3px #f9f9f9; border-color: #b9b9b9; background: #b9b9b9; } .form-control-radio input[type=radio] + .radio-label:empty:before { margin-right: 0; } /**

Checked

Unchecked

Disabled

*/ /**

{{ text_dmv_page_cart_nova_poshta_courier }}
CSS Only
A disabled checkbox
Fourth option

*/ .m-1, .block-info, .heading-h5, .form-group:not(:first-child) { margin-top: 15px; } .m-3, .heading-h4:not(:first-child) { margin-top: 45px; } .heading-h4:not(:first-child) + .form-group, .heading-h5:not(:first-child) + .form-group { margin-top: 10px; } .block-info { font-size: 14px; line-height: 1.8; font-family: Fira\ Sans, Arial, sans-serif; font-weight: 400; color: #3e4148; box-sizing: inherit; min-height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); padding: 9px; border-radius: 3px; } textarea { display: block; color: #555; width: 100%; background-image: none; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; height: auto; border-radius: 2px; border: 1px solid #e0e0e0; font-size: 15px; line-height: 24px; padding: 6px 10px 4px; background-color: #fff; resize: none; } .form-group.disabled label { opacity: 0.6; } .form-group.disabled input { background-color: #e2e2e2; } .dmv-checkbox { display: flex; align-items: center; justify-content: start; } .dmv-checkbox.form-group { margin-top: 5px; } .dmv-checkbox.form-control { display: flex; align-items: center; } .dmv-checkbox input[type=checkbox], .dmv-checkbox input[type=radio] { box-sizing: border-box; width: 20px; height: 20px; margin: 6px; padding: 0; border: 2px solid rgba(0, 166, 220, 0.5); appearance: none; background-color: transparent; outline: none; transition: outline 0.1s; } .dmv-checkbox input[type=checkbox]:checked, .dmv-checkbox input[type=radio]:checked { background-size: cover; padding: 2px; border-color: rgba(0, 166, 220, 0.5); background-image: url('data:image/svg+xml;utf8,'); } .dmv-checkbox input[type=checkbox]:disabled, .dmv-checkbox input[type=radio]:disabled { background-color: #d9d9d9; } .dmv-checkbox input[type=checkbox]:disabled:checked, .dmv-checkbox input[type=radio]:disabled:checked { background-image: url('data:image/svg+xml;utf8,'); } @media (hover: hover) { .dmv-checkbox input[type=checkbox]:not(:disabled):hover, .dmv-checkbox input[type=radio]:not(:disabled):hover { background-color: rgba(0, 166, 220, 0.2); outline: 2px solid rgba(0, 166, 220, 0.2); transform: scale(1.02); } } .dmv-checkbox input[type=checkbox]:focus-visible, .dmv-checkbox input[type=radio]:focus-visible { outline: 6px solid rgba(0, 166, 220, 0.2); transform: scale(1.02); } @media (prefers-reduced-motion: reduce) { .dmv-checkbox input[type=checkbox], .dmv-checkbox input[type=radio] { transition: none; } } .dmv-checkbox input[type=radio] { border-radius: 50%; background-position: 50% 50%; background-repeat: no-repeat; } .dmv-checkbox input[type=radio]:checked { background-size: 75%; } body .-invalid-message { color: #FB5D4C; } .-invalid-wrapper label { color: #FB5D4C; } .-invalid-wrapper input, .-invalid-wrapper textarea { color: #FB5D4C; } .-invalid-wrapper input::placeholder, .-invalid-wrapper textarea::placeholder { color: #FB5D4C; } input[type=text].form-control.-invalid, textarea.-invalid { color: #FB5D4C; } input[type=text].form-control.-invalid::placeholder, textarea.-invalid::placeholder { color: #FB5D4C; } a { color: #337ab7; } a:hover { color: #23527c; text-decoration: underline; } picture img { height: auto; } textarea::placeholder { color: rgba(85, 85, 85, 0.6784313725); } .tempDev { padding: 2rem 1rem; width: 100%; border: 2px dashed #0b91d2; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } h1.pageHeading { font-weight: 300; text-align: left; } .container { width: 1140px; max-width: 100%; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; } ul { list-style-type: none; } ol, ul, dl { margin-top: 0; margin-bottom: 0; } ol, ul { padding-left: 0; } .left-menu-link { font-size: 16px; line-height: 20px; background: #fdfdfd; color: #00a6dc; } html { height: 100%; } body { background-color: #f9f9f9; font-family: "Fira Sans", sans-serif; display: flex; flex-direction: column; min-height: 100vh; } h1 { margin: 0.67em 0; font-weight: 500; font-size: 28px; line-height: 32px; margin-bottom: 15px; margin-top: 0; text-align: center; } h2 { font-weight: 500; margin-bottom: 15px; margin-top: 0; font-size: 22px; line-height: 26px; } h2 { display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0; margin-inline-end: 0; } .mainContent-wrap { display: flex; gap: 10px; } [data-productisinstock=false] { pointer-events: none; filter: grayscale(0.9); user-select: none; } .modal-overlay { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .modal-overlay:not(.open) { display: none; } .mfp-content { z-index: 1045; } #popup-callback-wrapper { width: 400px; max-width: 100%; } #popup-cart-wrapper { background: #fff; width: 800px; max-width: 100%; position: fixed; /* position: fixed; */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-wrapper { position: relative; z-index: 1043; margin: auto; } .popup-wrapper:not(.shown) { display: none; } .popup-wrapper .mfp-close { line-height: 44px; text-align: center; opacity: 0.65; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; overflow: visible; display: block; padding: 0; box-shadow: none; color: #333; text-indent: -9999px; width: 60px; height: 52px; background-color: #fff; background-image: url("/static/image/close.png"); background-repeat: no-repeat; right: 0; top: 0; position: absolute; z-index: 2; cursor: pointer !important; outline: none; border: 0; } .popup-wrapper .mfp-close:hover { background-position: 0 -60px; } .masked_loading { background: url(/extension/dmv_plus_theme/catalog/view/assets/ring-alt.svg) no-repeat center center; width: 100%; height: 100%; position: absolute; z-index: 10001; top: 0; left: 0; } .masked { position: absolute; z-index: 10000; width: 100%; height: 100%; background: #eee; opacity: 0.4; left: 0; top: 0; } .segment { font-weight: 400; color: #3e4148; box-sizing: inherit; margin-bottom: 30px; padding: 15px; background-color: #fff; border: 1px solid #e0e0e0; font-size: 14px; line-height: 18px; } .form-control.error { border-color: #e8302c; } .error { margin-top: 3px; display: block; color: #e8302c; font-size: 14px; line-height: 1.4; } .error .bg_color_white { background-color: #fff; padding: 0 3px; text-align: center; } .homeContent { width: 820px; max-width: 100%; } .fw_strong { font-weight: bold; } #menu .logo { display: none; } .sidebar-logo-wrap { display: flex; align-items: start; justify-content: space-between; } .sidebar-logo-wrap .navbar-toggler { background-color: unset; width: 50px; align-self: start; margin-left: auto; margin-right: 0; flex-shrink: 2; } .mob-phone { display: none; align-items: center; justify-content: center; position: fixed; bottom: 0; left: 0; width: 100%; height: 44px; background-color: #ffc54e; } h2 { font-size: 22px; line-height: 26px; } h3 { font-size: 18px; line-height: 22px; } h1.--light, h2.--light { font-weight: 300; } h1, h2 { margin-bottom: 5px; margin-top: 15px; } h3, h4 { margin-bottom: 5px; margin-top: 15px; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } .content-inner { margin-bottom: 30px; padding: 15px; background-color: #fff; border: 1px solid #e0e0e0; color: #3e4148; font-size: 15px; line-height: 22px; } .content-inner p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .content-inner ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .content-inner ol { padding-left: 15px; } .content-inner li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } #returnToTop { position: fixed; bottom: 20px; right: 20px; background: rgba(255, 197, 78, 0.9); width: 60px; height: 60px; text-decoration: none; border-radius: 50%; display: block; opacity: 0; z-index: 1000; } @media (max-width: 576px) { h1.pageHeading { text-align: center; } #menu:not(.--opened) { display: none; } #menu .logo { display: flex; } .productList-delimiter { display: none; } .productList-priceWrap { display: flex; width: 100%; align-items: center; justify-content: space-around; } .middleBar-wrap { display: none; } .mob-phone { display: flex; } footer { padding-bottom: 44px; } } /*!**************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/dmvplus/components/topSearch.scss ***! \**************************************************************************************************************************************************************************/ .header-search-list { display: flex; flex-direction: column; position: absolute; top: 30px; z-index: 2; left: 0; } .header-search { position: relative; } .header-search-list-link { box-sizing: inherit; text-decoration: none; display: block; margin-bottom: -1px; border: 1px solid #ddd; transition: all 0.2s ease-in-out; line-height: 20px; background: #fff; color: #00a6dc; cursor: pointer; padding: 4px 8px 5px 8px; font-size: 13px; } /*!*****************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/components/Elements/relinkBlock.scss ***! \*****************************************************************************************************************************************************************************/ .relinking { display: flex; justify-content: space-between; margin-top: 30px; margin-bottom: 30px; } .relinking-col { width: 24%; } .relinking-li { line-height: 1.4; } .relinking-title { font-size: 14px; line-height: 1.4; } .relinking-a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; } .relinking-title { font-weight: bold; } @media (max-width: 991px) { .relinking { flex-direction: column; margin-top: 30px; margin-bottom: 0; } .relinking-col { margin: 0 0 20px 0; width: 100%; } .relinking-title { margin-bottom: 7px; position: relative; } .relinking-title::after { content: ""; border-right: 2px solid black; border-bottom: 2px solid black; display: inline-block; transform: translate(5px, -2px) rotate(45deg); width: 8px; height: 8px; } .relinking-ul.active { display: none; } } /*!**************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/modules/subscribeForm.scss ***! \**************************************************************************************************************************************************************************/ .subscribeForm { position: relative; background-image: url("/static/image/main-subscribe-bg.webp"); background-size: cover; } .subscribeForm .subscribeForm-bgOverlay { background-color: rgba(0, 0, 0, 0.4); position: absolute; width: 100%; height: 100%; z-index: 0; } .subscribeForm button { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; padding: 8px 30px; line-height: 24px; width: 100%; } .subscribeForm button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .subscribeForm button:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .subscribeForm button:hover:before { transform: translate3d(0, 100%, 0); } .subscribeForm button:hover:after { transform: translate3d(0, 100%, 0); } .subscribeForm input { margin: 0; color: #555; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 2px; border: 1px solid #e0e0e0; padding: 6px 10px 4px; background-color: #fff; font-size: 15px; line-height: 30px; height: 40px; } .subscribeForm input:focus { border-color: #00a6dc; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 166, 220, 0.6); } .subscribeForm input.disabled { pointer-events: none; opacity: 0.9; background-color: #e8e8e8; } .subscribeForm .subscribeForm-text { width: 285px; margin-right: 20px; text-align: left; } .subscribeForm .subscribeForm-heading { color: #fff; font-size: 18px; line-height: 22px; font-weight: 600; } .subscribeForm .subscribeForm-desc { text-align: left; color: #fff; font-size: 14px; line-height: 18px; } .subscribeForm .subscribeForm-content { padding-top: 45px; padding-bottom: 45px; width: 1440px; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; align-items: center; position: relative; z-index: 1; justify-content: center; } .subscribeForm form { display: flex; align-items: center; justify-content: center; column-gap: 10px; } .subscribeForm .--success { font-size: 16px; background-color: #fff; padding: 10px; margin-bottom: 15px; color: green; text-align: center; } .subscribeForm .--error { font-size: 16px; background-color: #fff; padding: 10px; margin-bottom: 15px; text-align: center; } .subscribeForm .--error-query { font-size: 16px; background-color: #fff; padding: 10px; margin-bottom: 15px; color: red; text-align: center; } .subscribeForm input[type=text].form-control { height: 42px; } @media (max-width: 960px) { .subscribeForm .subscribeForm-content { flex-direction: column; } .subscribeForm form { flex-direction: column; gap: 15px; } .subscribeForm .subscribeForm-text { margin-bottom: 15px; } .subscribeForm .subscribeForm-heading { text-align: center; } .subscribeForm .subscribeForm-desc { text-align: center; } } /*!******************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/components/Blocks/Form/Validator.scss ***! \******************************************************************************************************************************************************************************/ [data-fieldvalidation] .js-errorMessage { color: #FB5D4C; font-style: normal; font-weight: 400; font-size: 12px; line-height: 15px; min-height: 19px; display: block; } [data-fieldvalidation]:not(.-invalid-wrapper) .js-errorMessage { opacity: 0; } /*!*************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/modules/callbackForm.scss ***! \*************************************************************************************************************************************************************************/ .callbackForm { position: relative; display: flex; flex-direction: column; width: 400px; max-width: 100%; background-color: #fff; } .callbackForm .callbackForm-submit { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; text-align: center; } .callbackForm .callbackForm-submit:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .callbackForm .callbackForm-submit:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .callbackForm .callbackForm-submit:hover:before { transform: translate3d(0, 100%, 0); } .callbackForm .callbackForm-submit:hover:after { transform: translate3d(0, 100%, 0); } .callbackForm .popup-heading { color: #3e4148; cursor: auto; box-sizing: inherit; padding: 15px; padding-top: 10px; padding-bottom: 10px; font-size: 20px; line-height: 32px; text-align: left; border-bottom: 1px solid #dfe4eb; } .callbackForm .popup-center { padding: 15px; } .callbackForm .popup-footer { padding: 15px; border-top: 1px solid #dfe4eb; } .callbackForm .form-group { width: 100%; margin-bottom: 15px; } .callbackForm form { display: flex; flex-direction: column; align-items: center; justify-content: center; column-gap: 10px; } /*!**************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/dmvplus/components/offcanvas.scss ***! \**************************************************************************************************************************************************************************/ #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3490196078); z-index: 10; } #overlay.--shown { display: block; } #menu.--opened { position: fixed; left: 0; top: 0; z-index: 100; background: #fff; } .navbar-toggler img { width: 40px; } .top-banner-overlay { display: flex; flex-direction: column; justify-content: center; width: 350px; padding: 20px; transition: transform 0.4s; color: white; background: rgba(0, 0, 0, 0.7); } .top-banner-overlay.is-moved { transform: translateX(350px); } .top-banner-overlay.is-moved:before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); } .top-banner-overlay p { font-size: 1rem; margin-top: 10px; } .top-nav li + li { margin-top: 8px; } .top-nav .menu-wrapper { position: fixed; top: 0; left: 0; bottom: 0; width: 60px; padding: 20px; transform: translateX(-350px); transition: tranform 0.4s; background: #A0F0ED; } .top-nav .menu-wrapper.is-opened { transform: translateX(60px); width: 350px; } .top-nav .menu-wrapper.is-opened .menu { opacity: 1; transition-delay: 0.4s; } .top-nav .menu-wrapper.is-opened a { font-size: 1.2rem; } .top-nav .menu { opacity: 0; transition: opacity 0.3s; } .top-nav .sub-menu { padding: 10px 0 0 8px; } .top-nav .menu-close { position: absolute; top: 0; right: 20px; font-size: 1.6rem; } .top-nav .fixed-menu { position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; width: 60px; padding: 20px; color: #20504F; background: #64D5CA; } .top-nav .fixed-menu .menu-open { display: inline-flex; align-items: center; text-align: left; margin: 0 0 auto; width: auto; cursor: pointer; color: #20504F; } .top-nav .fixed-menu .menu-open svg { fill: #20504F; } .top-nav .fixed-menu .menu-open:hover, .top-nav .fixed-menu .menu-open:focus { opacity: 0.9; } .top-nav .fixed-menu .menu-icon { margin-right: 10px; } .social-links svg { fill: #20504F; } /*!****************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/dmvplus/components/numberInput.scss ***! \****************************************************************************************************************************************************************************/ .input-number-button-minus { background: #f2f6f9 url("/static/image/number-minus.svg"); border-right: 1px solid rgba(197, 205, 216, 0.8); } .input-number-button-plus { background: #f2f6f9 url("/static/image/number-plus.svg"); border-left: 1px solid rgba(197, 205, 216, 0.8); } .number-field { display: flex; align-items: center; border: 1px solid rgba(197, 205, 216, 0.8); border-radius: 1px; width: fit-content; height: 36px; } .number-field [type=number] { border-top: 0; border-bottom: 0; outline: none; margin: auto 0; font-size: 18px; text-align: center; padding: 0; width: 40px; text-align: center; display: flex; align-items: center; justify-content: center; text-indent: 0px; appearance: none; letter-spacing: 1px; } .number-field input[type=number]::-webkit-inner-spin-button, .number-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .number-field button { width: 40px; height: 100%; display: inline-block; background-size: 40%; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; opacity: 0.7; transition: all 0.1s; filter: grayscale(0.8); } .number-field button:hover { opacity: 1; filter: grayscale(1); } .number-field button.input-number-button-minus { border-right: 1px solid #c5cdd8; } .number-field button.input-number-button-plus { border-left: 1px solid #c5cdd8; } /*!*********************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/modules/cartForm.scss ***! \*********************************************************************************************************************************************************************/ .cartForm { position: relative; display: flex; flex-direction: column; width: 800px; max-width: 100%; background-color: #fff; } .cartForm.--productsEmpty .cartForm-submit { visibility: hidden; } .cartForm .cartForm-submit { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; text-align: center; width: initial; padding: 10px 45px; display: flex; align-items: center; justify-content: center; gap: 8px; } .cartForm .cartForm-submit:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .cartForm .cartForm-submit:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .cartForm .cartForm-submit:hover:before { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-submit:hover:after { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-shopping { position: relative; overflow: hidden; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; border: 1px solid #ccc; border-radius: 2px; background: #fff; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; z-index: 1; color: #333; text-decoration: none; padding: 10px 45px; } .cartForm .cartForm-shopping:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #f2f2f2; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .cartForm .cartForm-shopping:after { background-color: #e6e6e6; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .cartForm .cartForm-shopping:hover:before { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-shopping:hover:after { transform: translate3d(0, 100%, 0); } .cartForm .cartForm-emptyRow { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; } .cartForm input { display: block; color: #555; width: 100%; height: 34px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 2px; border: 1px solid #e0e0e0; font-size: 15px; line-height: 24px; padding: 6px 10px 4px; background-color: #f9f9f9; } .cartForm input:focus { border-color: #00a6dc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 166, 220, 0.6); } .cartForm .popup-heading { padding: 10px 15px; font-size: 20px; line-height: 32px; text-align: left; background-color: #f2f6f9; border-bottom: 1px solid #dfe4eb; position: relative; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; } .cartForm .popup-center { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; } .cartForm .popup-footer { border-top: 1px solid #dfe4eb; display: flex; justify-content: space-between; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; } .cartForm .form-group { width: 100%; margin-bottom: 15px; } .cartForm form { display: flex; flex-direction: column; align-items: center; justify-content: center; column-gap: 10px; } .cartForm .alert.alert-success { font-size: 14px; padding: 15px; margin-bottom: 20px; border-radius: 4px; color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .cartForm .alert.alert-success img { width: 14px; height: 14px; } .cartForm-totalRow { text-align: left; cursor: auto; box-sizing: inherit; padding-top: 15px; padding-bottom: 10px; border-top: 1px solid #ddd; display: flex; justify-content: space-between; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; font-size: 20px; line-height: 24px; font-weight: 500; } .cartForm-remove { cursor: pointer; line-height: 1.42857143; border: 1px solid transparent; padding: 0; padding-top: 5px; font-size: 12px; color: #3e4148; } .cartForm-remove:hover { text-decoration: underline; } .cartForm-listItem { display: flex; justify-content: space-around; padding: 0 15px 15px; } .cartForm-image { padding: 0 15px 15px; width: 200px; } .cartForm-productInfo { display: flex; flex-direction: column; width: 100%; } .cartForm-productName { transition: all 0.2s ease-in-out; font-size: 16px; line-height: 20px; color: #3e4148; cursor: pointer; } .cartForm-productName:hover { color: #00a6dc; } .cartForm-positionRow { display: flex; justify-content: space-between; margin-bottom: 10px; margin-top: 10px; gap: 20px; } .cartForm-totalValue { font-size: 20px; line-height: 24px; } .cartForm-colTitle { color: #3e4148; text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; margin-bottom: 3px; } .cartForm-priceColValue { font-size: 16px; line-height: 32px; } .cartForm-quantityCol { width: 33%; } .cartForm-priceCol { width: 33%; } .cartForm-productSumCol { width: 33%; } /*!**********************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/components/Slider/slider.scss ***! \**********************************************************************************************************************************************************************/ .withSwiper { overflow: hidden; } .js-swiper-button-prev, .js-swiper-button-next { cursor: pointer; } /*!**********************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/components/Blocks/Banner/BlockBanner.scss ***! \**********************************************************************************************************************************************************************************/ .js-bannerSliderWrap { width: 790px; height: 352px; max-width: 100%; max-height: 60vh; } .swiper-pagination { position: absolute; bottom: 25px !important; right: 30px; top: auto; left: auto !important; display: flex; align-items: center; justify-content: flex-end; } .swiper-pagination-bullet { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; background: #fff; } .pagination-bullet-inner { background-color: #00a6dc; width: 8px; height: 8px; display: block; border-radius: 50%; } /*!********************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/entries/Pages/mainPage.scss ***! \********************************************************************************************************************************************************************/ .categoryProductsSliderWrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 52px; height: 14px; margin-bottom: 10px; } .categoryProductsSliderWrap img { border: 2px solid rgba(0, 0, 0, 0.4588235294); border-radius: 50%; padding: 1px; opacity: 0.8; cursor: pointer; transition: all 0.12s; } .categoryProductsSliderWrap img:hover { opacity: 1; } .categoryProductsSliderWrap .arrow-right img { transform: rotateY(180deg); } .mainCategorySlider { padding-top: 15px; padding-bottom: 5px; } .mainCategorySlider-heading { display: flex; justify-content: space-between; color: #00a6dc; font-size: 16px; line-height: 20px; font-weight: 600; } .mainCategorySlider-heading:hover { color: #00a6dc; } /*# sourceMappingURL=mainPage.css-f6e2eb6b46f2f953e7747b83258f0af5.map*//*!**********************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/style.scss ***! \**********************************************************************************************************************************************************/ input[type=text].form-control { display: block; color: #555; width: 100%; height: 34px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius: 2px; border: 1px solid #e0e0e0; font-size: 15px; line-height: 24px; padding: 6px 10px 4px; background-color: #f9f9f9; } input[type=text].form-control:focus { border-color: #00a6dc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 166, 220, 0.6); } .in-development { pointer-events: none; filter: grayscale(1); user-select: none; } @keyframes rotate180 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .ajaxButtonWrap { border: 1px solid #00a6dc; display: flex; align-items: center; justify-content: center; max-width: 30ch; margin-left: auto; margin-right: auto; width: auto; } .ajaxButton { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 10px; cursor: pointer; } .ajaxButton img { width: 40px; } .ajaxButton:hover { background-color: rgba(0, 166, 220, 0.0196078431); } .ajaxButton:hover img { animation: rotate180 3s infinite; } .ajaxButton-text { display: flex; flex-direction: column; align-items: flex-start; color: #00a6dc; } .ajaxButton-textTitle { font-weight: 600; font-size: 17px; line-height: 18px; } .ajaxButton-textCount { font-size: 14px; line-height: 16px; } .pagination-pages { display: flex; align-items: center; justify-content: center; } .pagination-pages .pagination-item { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 400; color: #6a707c; } .pagination-pages .pagination-item.--currentPage { color: #fff; background-color: #00a6dc; pointer-events: none; } .pagination-pages .pagination-item:hover { background-color: #00a6dc; color: #fff; } .pagination-pages .pagination-item:hover { text-decoration: none; } .pagination-wrap { width: fit-content; margin-left: auto; margin-right: auto; display: flex; gap: 10px 15px; flex-direction: column; margin-top: 16px; margin-bottom: 16px; } /*!***********************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./ClientApp/sources/styles/layout.scss ***! \***********************************************************************************************************************************************************/ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } .breadcrumbs-homeIcon { margin-right: 7px; } .breadcrumb { font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; display: flex; align-items: center; } .breadcrumb:not(:last-child):after { content: "\a"; width: 5px; height: 5px; border-radius: 50%; background: rgba(155, 157, 160, 0.8); display: inline-block; margin: 0 8px; } .breadcrumb:not(.breadcrumb-home) a { text-decoration: underline; color: #00a6dc; } .breadcrumb:not(.breadcrumb-home):not(.breadcrumb-current) a { text-decoration: underline; color: #9b9da0; } .breadcrumb.breadcrumb-home { display: flex; align-items: center; } .breadcrumb.breadcrumb-home:hover { color: #777; } .breadcrumb.breadcrumb-current { pointer-events: none; } .breadcrumb.breadcrumb-current span { font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; color: #00a6dc; } .breadcrumb:not(.breadcrumb-current) span { color: #9b9da0; } .breadcrumb:not(.breadcrumb-current) span:hover { color: #777; } .breadcrumbs-delimiter { margin-right: 4px; margin-left: 4px; fill: #6a707c; } a.breadcrumb-home { display: flex; color: #6a707c; text-decoration: none; } .breadcrumbs-homeIcon, .breadcrumbs-delimiter { margin-bottom: 3px; } .breadcrumbs { padding-top: 16px; padding-bottom: 16px; font-size: 14px; line-height: 17px; display: flex; align-items: center; flex-wrap: wrap; } .breadcrumbs .breadcrumb-item.current span { color: #0093c3; } .breadcrumbs .breadcrumb-dot { content: ""; height: 5px; width: 5px; background-color: #bbb; border-radius: 50%; display: inline-block; } .breadcrumbs .breadcrumb-item:not(.current) a, .breadcrumbs .breadcrumbs-home { transition: all 0.2s ease-in-out; text-decoration: none; color: #9b9da0; position: relative; } .breadcrumbs .breadcrumb-item:not(.current) a:after, .breadcrumbs .breadcrumbs-home:after { position: absolute; display: block; top: 100%; left: 0; width: 100%; height: 1px; background: #00a6dc; content: ""; opacity: 0; transition: height 0.3s, opacity 0.3s, transform 0.3s; transform: translateY(-10px); } .breadcrumbs .breadcrumb-item:not(.current) a:hover, .breadcrumbs .breadcrumbs-home:hover { color: #777; } .breadcrumbs .breadcrumb-item:not(.current) a:hover:after, .breadcrumbs .breadcrumbs-home:hover:after { height: 1px; opacity: 1; transform: translateY(0); background: #9b9da0; } .project-attributes-wrap { display: flex; margin-bottom: 15px; } .project-attributes { display: flex; flex-direction: column; width: 548px; max-width: 100%; padding: 15px; border: 1px solid #e0e0e0; background-color: #fff; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; font-size: 14px; } .project-attributes .attr-row { display: flex; align-items: center; margin-bottom: 3px; } .project-attributes .attr-name { background: #f3f3f3; flex-shrink: 0; line-height: 1.4; margin-bottom: 3px; color: #6a707c; padding: 8px; width: 50%; } .project-attributes .attr-value { padding: 8px 11px; } @media (max-width: 1024px) { .project-attributes-wrap { flex-direction: column; } .attr-row { flex-wrap: wrap; } .project-attributes .attr-name, .project-attributes .attr-value { width: 100%; } .attr-value { padding-left: 15px; } } .productBlocks-wrap { display: grid; grid-template-columns: 255px 255px 255px; column-gap: 10px; row-gap: 15px; margin-bottom: 30px; grid-template-columns: repeat(auto-fit, 255px); justify-content: center; } .productBlocks-heading { font-family: Fira\ Sans, Arial, sans-serif; color: #3e4148; font-size: 28px; line-height: 32px; font-weight: 300; margin-bottom: 15px; } .productInfo { display: flex; background: #fff; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; } .productInfo-mainImage { width: 300px; height: 300px; padding-right: 15px; padding-left: 15px; } .productInfo-info { flex-grow: 2; padding-right: 15px; padding-left: 15px; background-color: #fff; } .productInfo-info .productName { margin-top: 10px; font-size: 20px; line-height: 24px; font-weight: 400; margin-bottom: 4px; } .productInfo-info .productCode { font-weight: 500; font-size: 14px; line-height: 18px; } .productInfo-info .productCodeLabel { font-size: 14px; line-height: 18px; } .productInfo-info .productStatus { margin-bottom: 20px; } .productInfo-info .productStatus.inStock { font-size: 14px; line-height: 18px; color: #0ec02c; font-weight: 500; } .productInfo-info .productStatus .productStatus-inStockIcon { font-size: 16px; font-weight: 600; } .productInfo-info .productPriceLabel { font-size: 16px; line-height: 20px; font-weight: 500; color: #00a6dc; padding-bottom: 4px; } .productPriceValue { color: #3e4148; font-size: 24px; line-height: 28px; font-weight: 500; margin-left: 0; margin-right: auto; } .p-buy { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0; } .productInfo-tabButtons { display: flex; align-items: center; justify-content: space-evenly; border: 1px solid rgb(224, 224, 224); background-color: #fff; margin-bottom: 20px; } .productInfo-tabButtons .buttonIconWrap { width: 40px; height: 24px; } .productInfo-tabButtons .buttonIconWrap img { filter: contrast(100%) brightness(140%); } .productInfo-tabButtons .tabButton { display: flex; align-items: center; justify-content: center; padding: 20px; transition: all 0.2s ease-in-out; position: relative; z-index: 1; cursor: pointer; flex-grow: 2; text-decoration: none; } .productInfo-tabButtons .tabButton:before { transition: all 0.2s ease-in-out; content: ""; display: block; position: absolute; top: -6px; bottom: -6px; left: -16px; right: -15px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); z-index: -1; opacity: 0; } .productInfo-tabButtons .tabButton:not(:last-of-type):after { content: ""; display: block; width: 1px; top: 12px; bottom: 10px; right: -15px; position: absolute; background: #ddd; } .productInfo-tabButtons .tabButton:hover:before { opacity: 1; } .productInfo-tabButtons .buttonText { color: #00a6dc; text-transform: uppercase; font-size: 14px; line-height: 18px; font-weight: 500; } .productInfo-desc { line-height: 1.4; font-weight: 400; color: #3e4148; width: 100%; margin-bottom: 15px; padding: 20px 15px 20px; border: 1px solid rgb(224, 224, 224); background-color: #fff; font-size: 15px; line-height: 22px; } .productInfo-desc p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .productInfo-desc ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .productInfo-desc ol { padding-left: 15px; } .productInfo-desc li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } .our-benefits { display: flex; flex-direction: column; width: 274px; padding-top: 10px; padding-right: 15px; padding-left: 15px; } .our-benefits a { text-decoration: underline; } .our-benefits a:hover { color: #3e4148; } .our-benefits .benefit-item { display: flex; align-items: center; } .our-benefits .benefit-item + .benefit-item { margin-top: 20px; } .our-benefits .benefit-image-wrap { min-width: 65px; margin-right: 5px; display: flex; } .our-benefits .heading { font-size: 14px; line-height: 18px; font-weight: 600; color: #00a6dc; } .our-benefits .desc { color: #3e4148; font-size: 13px; line-height: 14px; } .project-attr-benefits-wrap { display: flex; } .productBuyButton { width: 221px; font-weight: 400; cursor: pointer; user-select: none; display: block; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; letter-spacing: -0.25px; text-transform: uppercase; font-size: 14px; line-height: 18px; color: #fff; max-width: 123px; } .productBuyButton:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .productBuyButton:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .productBuyButton:hover:before { transform: translate3d(0, 100%, 0); } .productBuyButton:hover:after { transform: translate3d(0, 100%, 0); } .reviewBlock { border: 1px solid rgb(224, 224, 224); background-color: #fff; padding-top: 20px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; } #productTabAttributes, #productTabDescription, #productTabReviews { scroll-behavior: smooth; } @media (max-width: 768px) { .productBlocks-heading { text-align: center; } } @media (max-width: 600px) { .productInfo { flex-direction: column; } .productPriceLabel { display: none; } .p-buy { flex-direction: column; border: none; } .productPriceValue { text-align: center; margin: auto; } .productInfo-tabButtons { flex-direction: column; } .productInfo-tabButtons .tabButton:not(:last-of-type):after { display: none; } .productName { text-align: center; } .productStatus { text-align: center; } .productCode-wrap { text-align: center; margin-bottom: 15px; } .productInfo-mainImage { margin-left: auto; margin-right: auto; } } .productList { display: grid; grid-template-columns: 255px 255px 255px; column-gap: 10px; row-gap: 15px; } @media (max-width: 992px) { .productList { grid-template-columns: 266px 266px; } } @media (max-width: 576px) { .productList { grid-template-columns: 266px; justify-content: center; } } .productList-item { padding-left: 5px; padding-right: 5px; border: 1px solid #e0e0e0; background: #fff; width: 245px; position: relative; display: flex; flex-direction: column; padding-bottom: 10px; } .productList-item .description { display: flex; flex-direction: column; flex-grow: 2; } .productList-item:before { content: ""; display: block; z-index: -1; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -24px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); opacity: 0; } .productList-item:hover:before { opacity: 1; } .productList-item:hover .productList-productCode { display: flex; } .productList-item:not(:hover) .productList-productCode { display: none; } .productList-item.withHover { z-index: 2; border: 1px solid rgba(0, 0, 0, 0); transition: all 0.2s ease-in-out; } .productList-buyButton { z-index: 1; text-transform: uppercase; font-weight: 400; text-align: center; cursor: pointer; border-radius: 2px; letter-spacing: -0.25px; font-size: 14px; line-height: 18px; padding: 10px 10px 7px; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; display: flex; align-items: center; position: relative; overflow: hidden; gap: 10px; } .productList-buyButton[disabled] { pointer-events: none; filter: grayscale(0.5); } .productList-buyButton:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .productList-buyButton:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .productList-buyButton:hover:before { transform: translate3d(0, 100%, 0); } .productList-buyButton:hover:after { transform: translate3d(0, 100%, 0); } .productList-buyButton img { width: 16px; height: 16px; } .productList-itemContent { display: flex; flex-direction: column; margin-top: auto; flex-grow: 2; } .productList-itemContent.stock_status_id_5 .productList-buyButton { filter: grayscale(1); pointer-events: none; } .productList-priceWrap { padding-top: 10px; margin-bottom: 0; margin-top: auto; } .productList-price { font-size: 16px; line-height: 20px; font-weight: 500; color: #00a6dc; margin-bottom: 8px; } .productList-desc { font-size: 14px; line-height: 1.4; transition: all 0.2s ease-in-out; color: #000; text-decoration: none; font-weight: 500; cursor: pointer; } .productList-desc:hover { color: #00a6dc; text-decoration: none; } .productList-delimiter { display: block; left: 10px; right: 10px; height: 1px; background: #e0e0e0; } .productList-image { padding: 5px; object-fit: contain; height: 245px; } .productList-name { overflow: hidden; margin-bottom: 10px; padding-right: 5px; padding-left: 5px; height: 78px; height: 3.8lh; } .productList-name a { font-size: 14px; line-height: 1.4; color: #000; text-decoration: none; font-weight: 500; transition: all 0.2s ease-in-out; } .productList-name a:hover { text-decoration: none; color: #00a6dc; } .productList-productCodeLabel { font-size: 14px; line-height: 18px; display: flex; align-items: center; justify-content: center; column-gap: 4px; } .productList-productCode { font-weight: 500; font-size: 14px; line-height: 18px; margin-top: 10px; margin-bottom: 10px; align-items: center; gap: 5px; padding-top: 5px; position: absolute; bottom: -24px; } .productList-productCode img { width: 16px; height: 16px; } .mainCategories { width: 770px; max-width: 100%; margin-bottom: 15px; margin-left: auto; margin-right: auto; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .mainCategories .mainCategories-item { width: 200px; line-height: 1.4; margin-bottom: 30px; padding: 15px; padding-bottom: 5px; background-color: #fff; } .mainCategories .mainCategories-cat { line-height: 20px; font-size: 18px; font-weight: 500; transition: all 0.2s ease-in-out; color: #00a6dc; } .mainCategories .mainCategories-cat:hover { text-decoration: underline; } .mainCategories .mainCategories-sub { display: flex; flex-direction: column; padding-top: 15px; } .mainCategories .mainCategories-sub a { transition: all 0.2s ease-in-out; font-size: 14px; line-height: 16px; color: #00a6dc; margin-bottom: 3px; } .mainCategories .mainCategories-sub a:hover { text-decoration: underline; } .js-bannerSlider-wrap { width: 691px; height: 295px; max-width: 100%; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide .productList-image { display: block; width: 100%; height: 220px; object-fit: contain; } @media (max-width: 661px) { .mainCategories { width: 100%; font-size: 18px; } .mainCategories .mainCategories-item { width: 100%; margin-bottom: 0; } } .categoryName { margin: 0.67em 0; margin-bottom: 15px; margin-top: 0; font-size: 28px; line-height: 32px; } .seo-description { font-weight: 400; color: #3e4148; margin-bottom: 45px; padding-top: 60px; border-top: 1px solid #c8c8c8; font-size: 15px; line-height: 22px; } .seo-description p { font-weight: 400; color: #3e4148; margin: 0 0 10px; margin-bottom: 10px; font-size: 15px; line-height: 22px; } .seo-description ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } .seo-description ol { padding-left: 15px; } .seo-description li { list-style-type: disc; padding-left: 10px; margin-bottom: 5px; font-size: 15px; line-height: 22px; } .langSwitcher { display: flex; align-items: center; justify-content: center; } .langSwitcher-lang, .langSwitcher-other, .langSwitcher-current { font-style: normal; font-weight: 400; font-size: 14px; line-height: 22px; text-transform: uppercase; } .langSwitcher-other { color: #00a6dc; text-decoration: none; } .langSwitcher-divider { height: 22px; margin-left: 5px; margin-right: 5px; width: 1px; background-color: #00a6dc; } .topBar { display: flex; align-items: center; justify-content: space-between; } .topBar-wrap { background-color: #f9f9f9; border-bottom: 1px solid #eee; } .middleBar-wrap { background-color: #00a6dc; } .middleBar { display: flex; align-items: center; justify-content: space-between; } .middleBar .middleBar-item { width: 255px; display: flex; } .middleBar .middleBar-link { position: relative; z-index: 1; text-decoration: none; color: #fff; display: flex; align-items: center; padding-top: 25px; padding-bottom: 25px; margin: auto; justify-content: center; } .middleBar .middleBar-link:before { content: ""; display: block; position: absolute; top: -6px; bottom: -6px; left: -16px; right: -15px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); z-index: -1; opacity: 0; transition: opacity 0.2s; } .middleBar .middleBar-link:hover { color: #00a6dc; } .middleBar .middleBar-link:hover img { filter: contrast(100%) brightness(140%); } .middleBar .middleBar-link:hover:before { opacity: 1; } .middleBar .middleBar-textShort { font-weight: 500; } .middleBar a { color: #fff; text-decoration: none; } .middleBar img { filter: contrast(0) brightness(200%); margin-right: 16px; } .header-top-menu a { letter-spacing: -0.25px; font-size: 14px; line-height: 18px; display: block; padding: 12px 15px; color: #3e4148; text-decoration: none; align-items: center; } .langSwitcher-wrap { padding: 0 30px; } .langSwitcher-wrap .dropdown-item { font-size: 14px; } .langSwitcher-wrap .currentLang { opacity: 0.8; } .langSwitcher-wrap .langSwitcher .dropdown-menu { display: flex; column-gap: 10px; } .topBar-linksList { display: flex; align-items: center; justify-content: space-between; flex-grow: 2; letter-spacing: 0.15px; } .topBar-linksList .divider { background-color: #e0e0e0; padding: 15px 0; height: 30px; margin: auto; width: 1px; } .topBar-linksList a { font-family: Fira\ Sans, Arial, sans-serif; font-weight: 400; transition: all 0.2s ease-in-out; color: #3e4148; text-decoration: none; letter-spacing: -0.25px; font-size: 14px; line-height: 18px; display: block; padding: 12px 15px; } .topBar-linksList a:hover { color: #00a6dc; text-decoration: none; } header { border-bottom: 1px solid #e0e0e0; background-color: #fff; } .header-callback { display: flex; gap: 15px; align-self: center; } .header-callback .header-callback-button-wrap button { width: 221px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; display: block; outline: none; position: relative; border-radius: 2px; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; background-color: #ffc54e; color: #fff; border: 1px solid #ffc54e; position: relative; overflow: hidden; } .header-callback .header-callback-button-wrap button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #ffb92a; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header-callback .header-callback-button-wrap button:after { background-color: #ffac02; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .header-callback .header-callback-button-wrap button:hover:before { transform: translate3d(0, 100%, 0); } .header-callback .header-callback-button-wrap button:hover:after { transform: translate3d(0, 100%, 0); } .header-callback .header-cart-button-wrap { width: 201px; text-align: center; } .header-callback .header-cart-button-wrap button { vertical-align: middle; cursor: pointer; user-select: none; display: block; width: 100%; border: 1px solid #ccc; border-radius: 2px; background: #fff; letter-spacing: -0.25px; font-size: 16px; line-height: 30px; padding: 10px; z-index: 1; position: relative; position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; } .header-callback .header-cart-button-wrap button:before { content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; display: block; left: 0; z-index: -1; transition: transform 0.3s; background-color: #f2f2f2; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header-callback .header-cart-button-wrap button:after { background-color: #e6e6e6; content: ""; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-delay: 0.2s; } .header-callback .header-cart-button-wrap button:hover:before { transform: translate3d(0, 100%, 0); } .header-callback .header-cart-button-wrap button:hover:after { transform: translate3d(0, 100%, 0); } .header-bars-2 { display: flex; } .header-bars-divider { width: 1px; background-color: #ccc; height: 70%; margin-top: 15px; margin-bottom: 15px; } .header-phones { position: relative; display: flex; align-self: center; padding-left: 15px; padding-right: 15px; padding-top: 0; padding-bottom: 0; } .header-phones .header-phones-links { margin-right: 30px; } .header-phones .header-phones-phone-icon { object-fit: contain; padding-right: 4px; } .header-phones img:not(.header-phones-phone-icon) { display: none; } .header-search { display: flex; align-items: center; justify-content: space-between; border: 1px solid #3e4148; width: 100%; height: 30px; font-size: 14px; color: #3e4148; padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; outline: none; background: #fff; width: 200px; } .header-search.--loading .header-search-list { align-items: center; border-bottom: 1px solid #e0e0e0; } .header-search.--loading .header-search-list-link { border: none; } .header-search-ico { width: 20px; height: 20px; right: 4px; position: absolute; } .header-bars { display: flex; justify-content: space-between; align-items: stretch; } .working-wrap { display: flex; align-items: center; padding-left: 15px; padding-right: 15px; padding-top: 0; padding-bottom: 0; } .working-wrap .workingHours { display: flex; flex-direction: column; } .working-wrap .working-title { font-size: 16px; line-height: 20px; font-weight: 600; } .working-wrap .working-text { font-size: 14px; line-height: 18px; } .working-wrap .working-clock-icon { width: 29px; height: 29px; margin-right: 15px; } .sidebar-title { display: block; margin-bottom: -1px; border: 1px solid #ddd; background: #fff; color: #3e4148; padding: 12px 15px; cursor: default; font-size: 18px; line-height: 22px; font-weight: 600; } .navbar-toggler { display: none; } .header-searchWrap { display: none; } .header-search-list { padding: 15px; border: 1px solid #e0e0e0; border-bottom: none; background: #fff; width: 400px; top: 35px; left: 0; right: 0; transform: translateX(-50%); } .header-search-list ul { display: flex; flex-direction: column; gap: 0px; } .navbar-toggler { display: none; align-items: center; justify-content: space-between; background-color: #00a6dc; padding: 8px 15px; width: 100%; } .navbar-toggler .sidebar-toggle-title { font-weight: 400; color: #fff; font-size: 20px; line-height: 24px; } @media (min-width: 1400px) { .header-bars-1, .working-wrap, .header-phones, .header-callback { padding-bottom: 2px; padding-top: 2px; } } @media (max-width: 768px) { .navbar-toggler { display: flex; } .header-bars-divider { display: none; } .header-bars { flex-wrap: wrap; } .header-bars-2 { flex-wrap: wrap; align-items: center; justify-content: center; } .middleBar-wrap { display: none; } .topBar-linksList { display: none; } header { margin-top: 4px; } } @media (max-width: 576px) { .header-bars { flex-direction: column; align-items: center; justify-content: space-between; } .header-bars-1 { display: flex; align-items: center; justify-content: space-between; } .header-bars-2 { flex-direction: column; } .working-wrap, .header-bars-divider { display: none; } .header-phones, .header-callback { margin-bottom: 15px; } .header-callback .header-callback-button-wrap button, .header-callback .header-cart-button-wrap button { width: 160px; } } footer { background-color: #fff; } .footer-wrap { background-color: #fff; } @media (max-width: 768px) { .footer-wrap .footer-contacts-title { display: flex; } } .footer-contacts-title { display: none; } .footer-copyright { text-align: center; padding-top: 20px; font-size: 12px; line-height: 16px; border-top: 1px solid #e0e0e0; color: #bbb; padding-bottom: 20px; } .footer-row { display: flex; padding-top: 30px; justify-content: space-between; } .footer-row > div { width: 50%; } .footer-row li a { color: #6a707c; } .seo-breadcrumbs { margin-top: 30px; margin-bottom: 30px; } .footer-menuCol { display: flex; align-items: flex-start; justify-content: space-between; } .footer-contactsCol { display: flex; justify-content: flex-end; gap: 20px; } .footer-stay-in-touch { margin-bottom: 15px; font-size: 15px; line-height: 18px; font-weight: 500; color: #6a707c; } .footer-contacts-email-link, .contact-phone-link { font-size: 14px; line-height: 20px; transition: all 0.14s ease-in-out; color: #6a707c; } .footer-contacts-email-link:hover, .contact-phone-link:hover { color: #00a6dc; text-decoration: none; } .contact-phone-link { display: flex; align-items: center; justify-content: center; } .contact-phone-link img { width: 20px; height: 20px; margin-right: 5px; } .footer-socials { display: flex; flex-direction: column; } .footer-socials-links { display: flex; align-items: center; justify-items: center; column-gap: 8px; margin-top: 15px; } .footer-socials-links a:hover { filter: brightness(0.5) sepia(1) hue-rotate(150deg) saturate(6); } .footer-socials-links img { width: 32px; height: 32px; } .footer-contacts { display: flex; align-items: flex-start; flex-direction: column; } .footer-contacts-phones { display: flex; flex-direction: column; gap: 5px; } .footer-contacts-email { margin-top: 15px; } .footer-logo-wrap { width: 192px; height: 98px; } .sidebar-benefits { margin-top: calc(20px + 1rem); margin-bottom: 15px; } .sidebar-benefits .benefit-item { padding-bottom: 30px; padding-top: 30px; padding-left: 15px; padding-right: 15px; display: flex; align-items: center; background-color: #fff; border: 1px solid rgb(224, 224, 224); } .sidebar-benefits .benefit-item:not(:last-of-type) { margin-bottom: 20px; } .sidebar-benefits .benefit-image-wrap { width: 56px; height: 36px; display: flex; align-items: center; justify-content: flex-start; } .sidebar-benefits .heading { font-size: 16px; line-height: 20px; font-weight: 500; } .sidebar-benefits .desc { font-size: 12px; line-height: 16px; } .sidebar-popular-links { padding: 30px 15px; margin-top: 20px; background-color: #fff; border: 1px solid rgb(224, 224, 224); } .sidebar-popular-links .links-heading { font-size: 16px; line-height: 20px; font-weight: 500; } .sidebar-popular-links .link { font-size: 12px; line-height: 16px; color: #337ab7; text-decoration: none; transition: all 0.2s ease-in-out; } footer { margin-top: auto; } @media (max-width: 768px) { .footer-row { flex-direction: column; } .footer-stay-in-touch { margin-bottom: 0; } .footer-socials-links { margin-top: 0; } .footer-row > div { width: 100%; } .footer-contactsCol { display: flex; flex-direction: column; align-items: center; } .seo-breadcrumbs { margin-bottom: 15px; margin-top: 15px; } } @media (max-width: 480px) { .footer-menuCol { display: grid; grid-template-columns: 1fr 1fr; text-align: center; } .footer-logo-wrap { grid-column: 1/4; justify-self: center; } } .sidebar-menu { width: 290px; } .sidebar-menu .sidebar-menuItem { text-decoration: none; display: block; margin-bottom: -1px; border: 1px solid #ddd; transition: all 0.2s ease-in-out; font-size: 16px; line-height: 20px; background: #fff; color: #00a6dc; cursor: pointer; } .sidebar-menu .sidebar-menuItem.itemCat.active { padding: 0; } .sidebar-menu .sidebar-menuItem.itemCat a { padding: 10px 15px; display: block; } .sidebar-menu .sidebar-menuItem.itemSubCat { border-left: none; border-right: none; } .sidebar-menu .sidebar-menuItem.itemSubCat a, .sidebar-menu .sidebar-menuItem.itemSubCat .currentSubCat { padding: 10px 15px 10px 30px; } .sidebar-menu .sidebar-menuItem .itemSubCat .itemSubCat a, .sidebar-menu .sidebar-menuItem .itemSubCat .itemSubCat .currentSubCat { padding-left: 50px; } .sidebar-menu .sidebar-menuItem:hover { background: #f0f2f7; } .sidebar-menu .sidebar-menuItem:hover > a { color: #3e4148; text-decoration: none; } .sidebar-menu .sidebar-categoryName { font-size: 16px; line-height: 20px; color: #00a6dc; } .sidebar-menu .sidebar-categoryName.currentCategory { color: #fff; background: #00a6dc; border: 1px solid #00a6dc; padding: 10px 15px; } .sidebar-menu .itemSubCat .currentSubCat { font-weight: bold; cursor: default; } .form-control-radio { margin: 0.5rem; } .form-control-radio input[type=radio] { position: absolute; opacity: 0; } .form-control-radio input[type=radio] + .radio-label:before { content: ""; background: #f9f9f9; border-radius: 100%; border: 1px solid #b9b9b9; display: inline-block; width: 1.2em; height: 1.2em; position: relative; top: -0.05em; margin-right: 1em; vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease; } .form-control-radio input[type=radio]:checked + .radio-label:before { background-color: #00a6dc; box-shadow: inset 0 0 0 3px #f9f9f9; } .form-control-radio input[type=radio]:focus + .radio-label:before { outline: none; border-color: #00a6dc; } .form-control-radio input[type=radio]:disabled + .radio-label:before { box-shadow: inset 0 0 0 3px #f9f9f9; border-color: #b9b9b9; background: #b9b9b9; } .form-control-radio input[type=radio] + .radio-label:empty:before { margin-right: 0; } /**

Checked

Unchecked

Disabled

*/ /**

{{ text_dmv_page_cart_nova_poshta_courier }}
CSS Only
A disabled checkbox
Fourth option