/*background-color: #1b1b1b;*/
/*background-color: red;
лого
верх #0099ff
низ #007be1 --
низ #0077ff
0,117,255
#0088cc
голубой
#008EF4 - > #008EF4
светлый голубой
для навигации
dodgerblue
*/
:root{
--muted : #999999 ;
--green-light: #5dc375;
/*--green-light: #a5deb2;*/
--green-light-very: #ecffec;
}
html {
/*position: relative;*/
min-height: 100%;
}
body {
font-family: "Segoe UI", Helvetica, Arial, "Sans-serif";
/*margin-bottom: 192px;*/
/*background: whitesmoke;*/
}
/* ny2021*/
body > .container {background: white}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Segoe UI", Helvetica, Arial, "Sans-serif";
font-weight: 400;
line-height: 1.1;
color: #6c757d;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
font-weight: normal;
line-height: 1;
color: #777;
}
a {
color: #0077ff!important;
text-decoration: none!important;
cursor: pointer;
}
a:hover {
text-decoration: underline!important;
}
li {
/*color: #007bff;*/
}
.text-muted, .disabled {
color: var(--muted)!important;
}
#jsonContent .page-header {
margin-bottom: 1.5rem;
}
.page-header {
padding: 1.5em 0 .5em;
margin-bottom: 1.5rem;
border-bottom: 1px solid #ced4da; /* class .swatch-400 */
}
/* ====================================== */
/* Menu */
header {margin: 0;
padding : 0
}
.navbar {
padding: 0rem .5rem;
}
.navbar-brand {
width: 140px;
}
.navbar-brand img {
height: 52px;
width: 140px;
position: absolute;
top: 8px;
z-index: 10000;
}
ul.navbar-nav li.nav-item {
padding: .5rem 0rem;
}
ul.navbar-nav li.nav-item a {
/*padding: .5em 1em;*/
padding: .5em .75em;
color: white !important;
font-size: 1rem;
display: flow-root;
}
ul.navbar-nav li.nav-item.active {
background-color: #0099ff;
}
/*19.2.19*/
ul.navbar-nav li.nav-item:hover {
background-color: #0099ff;
}
ul.navbar-nav li.nav-item a:hover {
text-decoration: none!important;
}
.dropdown-menu {
margin: 0;
}
/*19.2.19*/
ul.dropdown-menu li a.dropdown-item {
color: black !important;
/*font-size: .8rem;*/
font-size: .9rem;
}
/*
ul.dropdown-menu li a.dropdown-item.active {
color: white !important;
}
*/
nav div ul.navbar-nav li.nav-item a.dropdown-toggle {
color: white;
}
ul.dropdown-menu.multi-column.show {
position: absolute !important;
/*line-height: 1;*/
/*left:-150%;*/
}
/*
ul.dropdown-menu.multi-column i {
width: 2em;
color: gray;
}
*/
/*dropdown-item active*/
* {
border-radius: 0 !important;
}
/* end Menu */
/* ----------------------------------------------------------- */
/* begin Price */
#jsonContent{
font-size: 0.9rem;
}
.page-item .page-link{
border-radius: 50% !important;
border: 0;
/*padding: .3rem .45rem;*/
padding: .25rem .45rem;
}
.page-item.active .page-link{
font-size: 1.2em;
padding-top:.2em;
cursor: default;
text-decoration: none!important;
color: white !important;
background-color: #007bff !important;
border-radius: 50% !important;
}
.page-item .page-link div{
padding:auto;
text-align: center;
height:24px;
width:18px;
}
/*=================*/
.pointer {
cursor: pointer;
}
/*
#price .fa-truck {
color: #dc3545;
}
*/
/*
#price {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
*/
#price .col-1, #price .col-xs-1, #price .col-sm-1, #price .col-md-1, #price .col-lg-1, #jsonPrice .col-2, #price .col-xs-2, #price .col-sm-2, #price .col-md-2, #price .col-lg-2, #price .col-3, #price .col-xs-3, #price .col-sm-3, #price .col-md-3, #price .col-lg-3, #price .col-4, #price .col-xs-4, #price .col-sm-4, #price .col-md-4, #price .col-lg-4, #price .col-5, #price .col-xs-5, #price .col-sm-5, #price .col-md-5, #price .col-lg-5, #price .col-6, #price .col-xs-6, #price .col-sm-6, #price .col-md-6, #price .col-lg-6, #price .col-7, #price .col-xs-7, #price .col-sm-7, #price .col-md-7, #price .col-lg-7, #price .col-8, #price .col-xs-8, #price .col-sm-8, #price .col-md-8, #price .col-lg-8, #price .col-9, #price .col-xs-9, #price .col-sm-9, #price .col-md-9, #price .col-lg-9, #price .col-10, #price .col-xs-10, #price .col-sm-10, #price .col-md-10, #price .col-lg-10, #price .col-11, #price .col-xs-11, #price .col-sm-11, #price .col-md-11, #price .col-lg-11, #price .col-12, #price .col-xs-12, #price .col-sm-12, #price .col-md-12, #price .col-lg-12
{
padding-right: .5rem;
padding-left: .5rem;
}
#price .fa-plus-circle, #price .fa-minus-circle {
cursor: pointer;
padding: 7px 7px 8px;
color: #cccccc;
/*height: 32px;*/
/*background-color: gray*/
}
#price .fa-minus-circle:hover {background-color: #17a2b8; color: white;}
#price .fa-plus-circle:hover {background-color: #28a745; color: white;}
input[id^="Q"] {
width: 48px;
text-align: right;
padding: 5px 4px 6px;
font-size: .9rem;
border: solid 1px lightgrey;
}
input[id^="Q"][type="text"]{padding-top: 5px;}
x.amount, x.retail{
display: inline-block;
text-align: right;
width: 84px;
font-size: 1rem;
}
x.amount { background-color: white;}
x.retail {background-color: #ffff7e;}
x:after{
/*content: "\20BD\00A0\00A0\00A0";*/
content: "\20BD";
/*padding: 0.2em 0.5em 0em 0.2em ;*/
padding-left: 0.2em;
color: #cccccc;
font-size: 0.9rem;
}
xo.amount, xo.retail{
display: inline-block;
text-align: right;
font-size: 2rem;
}
xo.amount { background-color: white;}
xo.retail {background-color: #ffff7e;}
xo:after{
content: "\20BD";
padding-left: 0.1em;
color: #cccccc;
font-size: 1.6rem;
}
div[id^="div"] {
display: inline-block;
/*padding: 0 .75em;*/
/*float: right; кновки купить*/
}
div[id^="div"] button {
padding: .15rem .5rem;}
div[id^="div"] button.add {
color:grey;
background-color: transparent;
background-image: none;
border-color: lightgrey;
}
div[id^="div"] button.add:hover {
color:white;
background-color: #28a745;
border-color: #28a745;
}
div[id^="div"] button.upd{
padding: .15rem 1.31rem;}
/* варнинг кнопки когда ошибка, по наведению success */
div[id^="div"] button.warn {
color:grey;
background-color:#fff3cd;/* #ffe69a;*/
background-image: none;
border-color: #ffc109;
}
div[id^="div"] button.warn:hover {
color:white;
background-color: #28a745;
border-color: #28a745;
}
/* варнинг кнопки когда ошибка, по наведению success */
#price .fa-times {
cursor: pointer;
color: #cccccc;
}
#price .fa-times:hover {
color: #d9534f;
}
#jsonContent hr { margin-top: 5px; margin-bottom: 5px }
.tumb {
position: absolute;
z-index: 100;
margin-top: 0px;
margin-left: 0px;
background-color: white;
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
}
.tumb img {
padding: 8px 8px 16px 8px;
border: lightgrey solid 1px;
}
input.checkbox {
width: 0; height: 0; float: right;
/*
*/
}
/* end Price */
/* ----------------------------------------------------------- */
/* карусель */
.carousel-indicators {
position: static;
margin-top: 1rem;
}
.carousel-indicators li {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 30px;
height: 5px;
margin: 3px;
text-indent: -999px;
border: solid 1px #ced4da; /*#007bff;*/
background-color: white;
cursor: pointer;
}
.carousel-indicators .active{
border: solid 1px #007bff;
background-color: #007bff;
}
a.carousel-control-prev:hover, a.carousel-control-next:hover{
text-decoration: none!important;
}
/*
a:hover.carousel-item img{
border: solid 1px #007bff;
}
*/
.carousel-caption {
/*position: fixed !important;*/
bottom: 0px;
z-index: 10;
right: 0%;
left: 0%;
padding-top: 1rem;
padding-bottom: 0;
color: white;
font-size: 1.2rem;
/*background-color: rgb(0,102,255,0.6);*/
}
/* конец карусель */
/* ----------------------------------------------------------- */
/* ---- вниз ---- */
/*
.dropdown-toggle::after {
display: inline-block;
content: '';
content: "\003Сi class="fa fa-angle-up" aria-hidden="true"\003E\003C\/\003E";
---
width: 0;
height: 0;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
*/
/* ---- начало модальное ---- */
.modal-header {
background-color: #007bff;
padding: 1rem;
}
.modal-header i, .modal-title {color: white;}
/* ---- конец модальное ---- */
/*
buys
*/
.badge.rounded-circle {
height: 36px;
width: 36px;
padding-top: 10px;
font-size: 1rem;
color: #eee!important;
}
.step.badge.rounded-circle {
cursor: pointer;
}
.step.badge.bg-outline-light {
color: lightgrey!important;
background-color: white!important;
border: lightgrey 1px solid;
}
.step.badge.bg-primary.rounded-circle {
color: white!important;
}
.step.badge.bg-outline-primary {
color: #007bff!important;
background-color: white!important;
border: #007bff 1px solid;
}
.step.delimiter{
border-bottom: solid 1px lightgrey;
height: 20px;
width: 3rem;
padding: 0px;
}
/*
media
*/
.media {
font-size: 1rem;
}
.media-body a img{
border: solid 1px #eee;
}
.media-body a:hover img{
border: solid 1px #0077ff;
}
.media-body a div, .media-body span div {line-height: 1.25;}
/*div, .form-control {line-height: 1.25;}*/
div, .form-control {line-height: 1.25;}
.footer {
background:#ced4da;
color:black!important;
bottom: 0;
width: 100%;
padding -bottom: 6em;
}
.footer * a {
color: #0077ff!important;
}
.text-gray{
color: grey!important;
}
.footer .row{
padding-top: 10em;
background:URL('../img/footer_f1_dashed_line.png') top repeat-x;
}
/*
Уровень скидки
*/
span.rate, span.rate1, span.rate2, span.rate3, span.rate4 {
background: #eee;
color: white;
text-align: center;
vertical-align: bottom;
display: inline-block;
margin: 2px;
padding: 0px;
cursor: pointer;
}
span.rate.is, span.rate1.is, span.rate2.is, span.rate3.is, span.rate4.is { background: #d9534f;}
span.rate.is,
span.rate1 { font-size: 80%; height: 14px; width: 14px }
span.rate2 { font-size: 100%; height: 20px; width: 20px }
span.rate3 { font-size: 140%; height: 26px; width: 26px }
span.rate4 { font-size: 180%; height: 34px; width: 34px }
/* олимпиада */
/*
sup.o1 {color: #0066ff; margin: 0rem}
sub.o2 {color: #fcc304; margin: -.15rem; bottom: 0em}
sup.o3 {color: #666666; margin: 0rem}
sub.o4 {color: #029348; margin: -.15rem; bottom: 0em}
sup.o5 {color: #e0204f; margin: 0rem}
*/
.gprix, a.gprix {color:#ff2a2a!important}
/*
Levam
*/
#jsonCenterGroups div img {
border: solid 1px #eee;
}
#jsonCenterGroups div:hover img {
border: solid 1px #0066ff;
}
#jsonCenterGroups div div {
color: #0066ff;
}
#jsonCenterGroups div:hover div {
text-decoration: underline;
}
#accordion .card {
border: 0px;
}
#accordion .card-header {
padding: .25rem .5rem;
}
/*
шрифты в поиске
*/
.form-control::-moz-placeholder { color: #999; font-size: .8rem; opacity: 1;}
.form-control:-ms-input-placeholder { color: #999; font-size: .8rem;}
.form-control::-webkit-input-placeholder { color: #999; font-size: .8rem;}
/*
всплывающие подсказки
*/
.tooltip-inner {
color: black;
background-color: #ffc107;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: #ffc107;
}
/*
.container{
background-color: white;
}
*/
/* для какталога Лаксимо*/
#oemListCategories ul{
padding: 0;
list-style-type: none;
}
#oemListQuickGroup ul {
list-style-type: none;
padding-left: 1em;
}
/* 1-3 шаг*/
#picImg span.border {
font-size: .75em;
padding: 0.25em .5em;
line-height: 1;
}
.trUnit {
line-height: 1;
}
.badge-outline-primary {
border: solid 1px #007bff;
color: #007bff!important;
background-color: white;
}
/*.step.badge-primary:hover, */
.step.badge-outline-primary:hover { cursor: pointer}
#fullGroupMnu li span{
color: black;
cursor: pointer;
}
#fullGroupMnu li span:hover{
color: #007bff;
}
#fullGroupMnu li span::after{
content: " \f078";
font-family: Font Awesome\ 5 Pro;
color: lightgrey;
}
#oemListQuickGroup li[class^='p'] {
position: relative;
}
#oemListQuickGroup li[class^='p']::before {
position: absolute;
right: 0;
top: 3px;
display: inline-block;
vertical-align: 0;
content: "\f078";
font-family: Font Awesome\ 5 Pro;
border: 0;
}
label.error{
color: red;
font-size: 0.9em;
}
/*scroll*/
/* width */
::-webkit-scrollbar {
width: .5em;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #007bff;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0069ff;
}
/* удалить в 2020 году, анимация дней *
@-webkit-keyframes diffD {
0% {font-size:72px; color:#ff2a2a;}
50% {font-size:78px;color:white;}
100% {font-size:72px; color:#ff2a2a;}
}
@keyframes diffD {
0% {font-size:72px; color:#ff2a2a;}
50% {font-size:78px;color:white;}
100% {font-size:72px; color:#ff2a2a;}
}
*/
@media (max-width: 576px) {
.dropdown-menu{
height:400px;
overflow-y:auto;
}
}
#waitLogo {
width: 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
#waitLogo .circle {
border-radius: 50% !important;
background-color: #0d6efd66;
width: 150px;
height: 150px;
position: absolute;
opacity: 0;
text-align: center;
vertical-align: middle;
margin: auto;
padding: auto;
animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}
@keyframes scaleIn {
from {transform: scale(.5, .5); opacity: .5;}
to {transform: scale(2.5, 2.5); opacity: 0;}
}
.btn.btn-outline-light {
border-color: #9e9e9e;
}
/* start Top phone, toggle 2 phone number */
.phone-top {
color:#777;
font-size: 1.25rem;
font-weight: 400;
}
.toggleWord {
animation: scaleIn1 30s infinite;
position: absolute;
/*right: .75em;*/
}
.phone-top .small {
font-size:70%;
}
@keyframes scaleIn1 {
0% { opacity: 1; }
5%, 50% { opacity: 0; }
55%, 100% { opacity: 1; }
}
/* end Top phone, toggle 2 phone number */
/*=======================================================================*/
/*.col-3*/
.truckDayDelivery {
line-height: 1;
vertical-align: middle;
text-align: center;
margin-right: 8px;
width: 28px;
}
.countStoke {
/*color: var(--muted)!important;*/
vertical-align: middle;
text-align: right;
margin-right: 8px;
width: 28px;
}
/* -------------------------------------------------------------------*/
/* btn-filter */
.on-off-filter, .on-off-filter.active:hover{
border-color: lightgrey;
background-color: white;
color: #495057;
}
.on-off-filter:hover, .on-off-filter.active {
border-color: var(--success);
background-color: var(--success);
color: white;
}
.on-off-filter.active:after {
display: inline-block;
padding-left: 0.1rem;
vertical-align: 0;
content: "\f077";
font-family: Font Awesome\ 5 Pro;
border: 0;
}
/* tile */
.line-tile.btn-outline-tile {
border-color: lightgrey;
color: var(--muted);
}
.line-tile.btn-outline-tile:hover {
border-color: var(--primary);
color: var(--primary);
}
/* select */
select {
border: solid 1px var(--muted)
};
select:focus {
border-color: red!important;
/*box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;*/
}
/* retail */
.on-off-retail.btn-outline-warning{
border-right: solid 12px var(--warning);
color: grey!important;
background-color: #ffff7e!important;
}
.on-off-retail.btn-outline-warning:hover{
background-color: white!important;
}
.on-off-retail.btn-outline-light{
color: #495057!important;
border-color: lightgrey!important;
border-left: solid 12px lightgrey!important;
}
.on-off-retail.btn-outline-light:hover{
background-color: #ffff7e;
}
.fa-1-quarter {
font-size: 1.25em;
}
/* tile */
/*
media -> tile-div-image
*/
.tile-div-image {
display: flex;
height: 125px;
overflow-y: hidden;
}
.tile-div-image img{
width: 100% !important;
align-self: center !important;
vertical-align: middle;
border-style: none;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility 2024-10-16 */
/*#price .page .row {content-visibility: auto;}*/
h1, .h1 {font-size:1.8em!important}
h2, .h2 {font-size:1.5em!important}
h3, .h3 {font-size:1.4em!important}
h4, .h4 {font-size:1.3em!important}
h5, .h5 {font-size:1.25em!important}
h6, .h6 {font-size:1.15em!important}
@media (max-width: 576px) {
.multi-column3{
height:300px;
overflow-y:auto;
}
/* width */
.multi-column3::-webkit-scrollbar {
width: .5em;
}
/* Track */
.multi-column3::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.multi-column3::-webkit-scrollbar-thumb {
background: var(--green-light);
}
/* Handle on hover */
.multi-column3::-webkit-scrollbar-thumb:hover {
background: var(--green);
}
}
td > x.amount, td > x.retail {
text-align: right;
width: 150px;
font-size: 2rem !important;
}
/* custom icon */
.arrow-stop-turn {
width: .9em;
height: .9em;
//padding-top: 2px;
font-weight: 900;
background-image: url('data:image/svg+xml;utf8,');
}
i.favor.fa-star.far.true{
font-size: 1rem !important;
/*
color: #dc3545!important; alert
color: #007bff!important; primary
color: #e83e8c!important; red light
*/
color: #ffc107!important;
}
i.favor.fa-star.fal.false{
/*font-size: 1rem !important;*/
color: #cccccc !important;
}
i.favor.fa-star{
cursor: pointer !important;
}
/* custom icon */
.marquee0 img{
height: 42px; display: inline; vertical-align: top; border: solid 1px #eee;
}