html,
body {
    height: 100%;
}
#scrollUp {
    position: fixed; z-index: 2147483647; display: none;
}
.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}
.wrap > .container {
    padding: 70px 15px 20px;
}
.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
.jumbotron {
    text-align: center;
    background-color: transparent;
}
.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}
.not-set {
    color: #c55;
    font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

/*
a.asc:after {
    content:  "\f15d";
}

a.desc:after {
    content:  "\e152";
}


.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

*/
.grid-view th {
    white-space: nowrap;
}
.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}
.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}
@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}
.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}
.nav > li > form > button.logout:focus {
    outline: none;
}
.tt-menu { width: auto; }
/*.search_form{ width: 40%; }*/
#data-something {
    display: none;
}
.data-something {
    display: none;
}
.table td {text-align: center;vertical-align: middle !important;}
.table th {text-align: center;vertical-align: middle;background-color: #7cd8e6;border: 1px solid #5f8da8;}
.fa-cart-arrow-down {
    display: inline-block;
}
.price {
    display: inline-block;
    white-space: nowrap;
}
.fa-cart-plus {
    margin-top: 2.5px;
}
.add_to_cart, .add_to_order, .make_order_from_search, .add_to_cart_from_products {
    cursor: pointer;
/*    white-space: nowrap;*/
    float: right;
    display:flex;
    clear:both;
    overflow-x: auto;
    font-size: 14px;
    /*clear:both;*/
    /*display: inline-block;*/
}
.make_order_from_search {
    margin-left: 5px;
    margin-top: 2.5px;
}
.add_to_cart_for_sup, .add_to_cart_api_sup, .api_order {
    cursor: pointer;
    white-space: nowrap;
    float: right;
    clear:both;
}
.bold {
    font-weight:bold;
}
.not_bold {
    font-weight:normal;
}
.brand {
    max-width: 130px;
    max-height: 20px;
}
.search_links {
    font-size: 12px;
    margin-left: 5px;
}
/*.layout-navbar-fixed .wrapper .main-header {
    height: 50px;
}*/
.modal-dialog-my {
    max-width : 80% ;
}
#create-modal-make-order{
    max-width : 80% ;
}
.errors, #errors_catalogs, #errors_products, #errors_analogs {
    color: red;
    font-size: 0.9rem;
}
.search_text, .cart_text {
    font: 12px/18px Arial,Sans-serif;
    font-weight: 700;
}

.brand_catalog {
    white-space: nowrap;
}
.search_analogs {
    float: right;
    white-space: nowrap;
}
.country_img {
    width:80%;
}
.country_h {
    max-width: 30px;
    float: left;
}
.country_catalog {
    max-width: 32px;
}
.country_brand {
    max-width: 20px;
    float: left;
}

.white_card {
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.card_height_100 {
    height: calc(100% - 20px);
}
.mb_30 {
    margin-bottom: 30px;
}
.mb_30 {
    margin-bottom: 30px !important;
}

.btn-success::after {
    transform: rotate(180deg);
}
.btn-success:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}
.btn-letter-catalog.btn-success {
    cursor: default !important;
}
.btn-country {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 0.8rem;
    min-width: 180px;
    font-weight: 600;
}
.btn-brand {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 0.8rem;
    min-width: 200px;
    font-weight: 600;
}
.btn-letter, .btn-letter-catalog {
    margin-top: 10px;
    margin-left: 7px;
    font-size: 0.8rem;
    min-width: 10px;
    font-weight: 600;
}
.btn-country:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}
.e9o {
    float: right;
    margin-left: 5px;
    /*margin-top: 2px;*/
}

.best-data {
    background-color: #beedca !important;
}
.less_price {
    background-color: #81d89b !important;
}
.not_show_analog {
    display: none;
}
#scrollUp {
    bottom: 20px;
    right: 20px;
    height: 38px;
    width: 38px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1N0RENUJFNTk4QkExMUUyOUI2NkUxNzQyMUQ5RDM3RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1N0RENUJFNjk4QkExMUUyOUI2NkUxNzQyMUQ5RDM3RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU3REQ1QkUzOThCQTExRTI5QjY2RTE3NDIxRDlEMzdEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU3REQ1QkU0OThCQTExRTI5QjY2RTE3NDIxRDlEMzdEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+uCzm/wAAA0dJREFUeNrMmD1MU1EUx08/CKSxkkjSDrRDQ5Wk6QeJQ2PZQOJinHQwOmjasGiiQxdAJktDBxNNXDSBaNS1GBcWXbUflkYMpbhAYthQbBQCgbae8zivVj7fu+9RepJ/0r7envPLPffde88xDAwMgID5UP2oEOocyok6xb/9QX1HfUN9RH1AfVUbwKxiLAUeRIVRnkPGnWEFUNf4WQE1gXrO4EeaUSH8PdQS6tERUAeZh/+7xL7MWsHOolKox6gO0G4d7CvFvoXALqM+o86D/kY+cxxDFdgN1BTqNByfWTnGTaVgV1AvVb4YokYxXnDMQ8G6Ua9RJmicmThm90FgRP+Gp7jRZuXY5v3A7hzTQlfzQtzdDUab5yicvD2QTxAZbFCnfUqPfW6wHiwMzWNhGcwveMz8Z4FAAEZGRsBs1rzLEIufvPTpARWLxaC1tRXK5TIkEgmoVqtaXPaburq67uMHr6gHv98PY2NjEhSZy+UCi8UCuVxOC1iJwOhttAtdynw+iMfjNahaLjwe2NjYgEKhIApWpjXWqSeUbJFIBPr6hFdJp1Fkp98Pam5uDpLJZO27wWCAaDQKwWBQ6CSQU2lSA0Vrqq2trfaMUkZvZCqVApvNBm63e2f3Nhqht7cX8vk8rKysqEqlvPgtSkZ7vV5ppnZDDQ8Pw/r6uvQ9nU4D+gSn07lzAOP2EQqFIJPJQKlUUgr2i1K5rHQ0peYwKLJKpSLB1y/89vZ2GBoaUjNjywRWVDq6paVlT/rqoWTb3NyUfltcXKw9czgcasCKlEqa80uKRheLYLfbpYU+Pj4Oa2trB47d2tqS1lxPTw9YrVaYnp6GbDarFGzCgHUlHUlfoLksQKmc5bqvWYxYZuXbxWQTgU3WX3ueoX40AdRPZqmBUdkeawKwh3ILof7O/5SL0JOyPDPsKUa2udD9fQJQNEvXmWHfunKBK+NyA6HKPCELR1Xi71C3GgRHMW5zTEW9C6qMryrtZWlIH/XPXqnt9rzlInTmGKBm2PeUaH+M2pV006Or0aoOQKvsK8i+QRRMflufUJ1BNx/UvADQPP/Xxb62lbSBFFcusNOuJFFz+CLqAvxrDstXdNpu5ObwJ9R7EGgO/xVgAApa34qsLbcEAAAAAElFTkSuQmCC") no-repeat;
}
.left {
    float: left;
    padding-left: 10px;
}
.right {
    float: right;
}
.content-header h1 {
    font-size: 1.3rem;
    color: black;
}
.text-dark {
    font-size: 1.3rem;
}
h3 {
    font-size: 1.3rem;
}
.tablesorter-default td {
    border: 1px solid #b2c9d7;
    font-weight: bold;
    /*font-size: 16px !important;*/
}
/*table.catalog {
    font-size: 16px !important;
}

 */
td.analog_info {
    font-size: 16px !important;
}
/*a.table-brand {
    font-size: 15px;
}*/


.btn {
    /*padding: 0.27rem 0.42rem;*/
    padding: 0.17rem 0.25rem;
    font-size: 0.95rem;
}
.btn_small {
    font-size: 0.8rem;
    line-height: 1;
}
.btn_catalog {
    margin-top: -11px;
}
.pointer, .supplier_info {
    cursor: pointer;
    color: #007bff;
}
.point {
    cursor: pointer;
}
.info {
    position: relative;
    top: 2px;
    margin-left: 3px;
}
.info_table {
    transform: scale(1.2)
}
.info_margin {
    margin-left: 7px;
}
#search_suppliers, #analogs_suppliers, #catalog_suppliers {
    color: #ca3c3c;
    display: none;
}
#add_suppliers {
    font-weight: bold;
}
.search_ico {
    font-size: 14px;
}
.show_model, .hide_model {
    font-size: 16px;
    font-weight: bold;
}
.notbr {
    white-space: nowrap;
}
.show_all_analogs {
    font-size: 14px;
}
.analog_info, .analog_img {
    display: none;
}
.add_info, .delivery_percent, .update_info {
    display: none;
}

.CheckBoxOverlay{
    position:relative;
    display:inline;
}
.CheckBoxOverlay div{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    cursor: pointer;
}
.stop_find {
    width : 28px;
    padding-left: 10px;
    padding-bottom: 5px;
    cursor: pointer;
}
.fa-shopping-cart {
    color: #19d719;
}
.fa-truck {
    color: #2b9bfd;
}
.cart_price {
    white-space: nowrap;
    font-size: 16px;
    margin-left: 5px;
    color: #0c7535;
}
.cart_zakup_price {
    color: #db4a4a;
}
.not_show {
    background-color: #c4c3be;
}
.delivery_date {
    white-space: preserve nowrap;
    /*display: block;*/
    width: 100%;
    height: 100%;
}
.total-cart-info {
    font-weight:bold;
    font-size: 20px;
    margin-bottom: 10px;
}
.search_url {
    display: block;
}
/*.search_url {
    position: relative;
    width: 12%;
}
.search_url_catalog {
    position: relative;
}
.search_url a, .search_url_catalog a {
    position: absolute;
    left: 0; right: 0;
    top: 1px; bottom: 1px;
    padding-top: 5px;
}*/
.cards-item__stars {
    display: flex;
    gap: 2px;
    color: #FF9F1C;
}
.cards-item__stars:hover, .stars:hover {
    color: #E89C35 !important;;
}
.product__rating {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}
/*.fa-star:hover {
    color : #FF9F1C;
    opacity: 0.4;
}*/
.my_button {
    color: #138496;
    border-color: #117a8b;
}
.copy {
    padding-left: 5px;
    color: #819f8e;
    cursor: pointer;
}
.cross_info {
    cursor: pointer;
}

.copy:hover {
    color: #698977 !important;
}
.copy:active:after {
    content:attr(my-tytle);
}

/*.copy:active:after {
    content: 'ssss';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0;
    box-shadow: inset 0 0 0 35px rgba(0,0,0,0.1);
    display: none;
}*/
.green {
    color: #0c7535;
}
.yellow {
    color: #99620c;
}
.red {
    color: red;
}
.sunday {
    color: red !important;
}
.saturday {
    color: #ff6868 !important;
}
.day {
    font-weight:bold;
}

.not_brand_top {
    font-weight: normal !important;
}


/*.main_search_field_clear {
    background-image: url('/img/delete.svg');
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 16px;
    padding-right: 25px;
}*/


.show_not_show {
    background-color: #c4c3be !important;
}

.e9o {
    color: palevioletred;
}
/*.cancel_filter {
    cursor: pointer;

}*/


.zbz-input-clearable {
    /* ставим инпуту фоновую картинку, но отображаем ее за пределами инпута - 150% в background-position */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTQzOEVEQkZFMjRDMTFFM0JDMDVDMjFEMDk4MTc0QTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTQzOEVEQzBFMjRDMTFFM0JDMDVDMjFEMDk4MTc0QTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNDM4RURCREUyNEMxMUUzQkMwNUMyMUQwOTgxNzRBMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNDM4RURCRUUyNEMxMUUzQkMwNUMyMUQwOTgxNzRBMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqwf5ocAAACpSURBVHjaYvT09GRjYGAQAuIXDISBBBC/3rZt219cCpighq0GYjkChslB1YniU8QEdVk0EC/FY6gcVD6akE+YoPQjPIYiG/aIUJgwIbGxGUqSYegGohtqQ6phIMCCRQykuRKIDwOxLSmGYXMhzJvtUMPaiYh9vAYih9kRImIfr4HYIuARqYYyERGbJBnKBM1OhGIT2VAJQrH8DohDicjLj6DqXuNTBBBgAL/OL+VnHD9pAAAAAElFTkSuQmCC");
    background-position: 150% 50%;
    background-repeat: no-repeat;
    transition: background 0.4s;
    /* добавляем справа небольшой padding, чтоб текст не залазил поверх крестика */
    padding-right: 27px;
}
.zbz-input-clearable--x {
    /* когда нужно отобразить крестик, перемещаем в правый конец инпута */
    background-position: 100% 50%;
}
.zbz-input-clearable--x-over {
    /* и подготовим стиль для ховера по крестику */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI2QjEyRDJFMjRDMTFFMzgyRUZCRkUwOTc4ODc4NzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI2QjEyRDNFMjRDMTFFMzgyRUZCRkUwOTc4ODc4NzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQjZCMTJEMEUyNEMxMUUzODJFRkJGRTA5Nzg4Nzg3NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQjZCMTJEMUUyNEMxMUUzODJFRkJGRTA5Nzg4Nzg3NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiaX4hIAAACpSURBVHjaYvwVws7GwMAgBMQvGAgDCSB+zbr6x19cCpighq0GYjkChslB1YniU8QEdVk0EC/FY6gcVD6akE+YoPQjPIYiG/aIUJgwIbGxGUqSYegGohtqQ6phIMCCRQykuRKIDwOxLSmGYXMhzJvtUMPaiYh9vAYih9kRImIfr4HYIuARqYYyERGbJBnKBM1OhGIT2VAJQrH8DohDicjLj6DqXuNTBBBgANiWL+VbATXyAAAAAElFTkSuQmCC");
    cursor: pointer;
}
.zbz-input-clearable::-ms-clear {
    /* убираем родной крестик очистки в IE */
    display: none;
}

span.diff_price {
    float: right;
    clear: both;
    font-size: 14px;
}


.datepicker {
    z-index: 1151 !important;
}
/* Отступ появится только МЕЖДУ ссылками, независимо от их порядка */
.analog_info a + a {
    margin-left: 10px;
}
.parent {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.api_order{
    color: #146c43;
}

.delivery-time {
    font-size: 10px;
}




.table-custom-autoparts thead th {
    background-color: #f4f6f9 !important; /* Легкий благородный серо-голубой оттенок */
    color: #495057 !important;            /* Темно-серый мягкий текст вместо чисто черного */
    font-weight: 600 !important;          /* Полужирный шрифт */
    text-transform: uppercase;            /* Текст заглавными буквами */
    font-size: 11px;                      /* Компактный размер для авто-каталогов */
    letter-spacing: 0.5px;                /* Небольшой шаг между буквами */
    border-bottom: 2px solid #dee2e6 !important; /* Четкая нижняя грань шапки */
    padding: 12px 8px !important;
}

/* 2. Мягкие горизонтальные разделители строк */
.table-custom-autoparts tbody td {
    padding: 14px 8px !important;         /* Чуть больше пространства между строками для воздуха */
    border-top: 1px solid #edf2f7 !important; /* Тонкая, едва заметная линия между товарами */
    font-size: 13.5px;                    /* Оптимальный шрифт для чтения */
    color: #333333;
    vertical-align: middle !important;    /* Строго по центру по вертикали */
}

/* 3. Премиальный эффект наведения (Hover) */
.table-custom-autoparts tbody tr:hover {
    background-color: #f8fafc !important; /* Очень мягкий, дорогой оттенок при наведении */
    transition: background-color 0.15s ease-in-out; /* Плавное появление подсветки */
}

/* 4. Выделение важных элементов автозапчастей */
.table-custom-autoparts tbody tr td strong.text-navy {
    color: #2b4c7e !important;            /* Красивый глубокий синий цвет для Артикула */
    font-size: 14px;
    letter-spacing: 0.3px;
}

/* 5. Красивое оформление строки Итого (Page Summary) */
.table-custom-autoparts tfoot td {
    background-color: #fafbfc !important; /* Выделяем футер отдельным фоном */
    border-top: 2px solid #3c8dbc !important; /* Синяя фирменная полоса AdminLTE сверху футера */
    font-weight: bold;
    padding: 15px 8px !important;
}




/* Базовые стили для ссылки "перейти к поставщику" */
.add_to_cart_for_sup {
    font-weight: 600;
    font-size: 14px;
    color: #3c8dbc; /* Фирменный синий цвет AdminLTE */
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease;
}

/* Цвет при наведении */
.add_to_cart_for_sup:hover {
    color: #245580; /* Более глубокий синий */
    text-decoration: none;
}

/* Анимация самой стрелочки */
.btn-with-arrow .arrow-icon {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
    vertical-align: middle;
}

/* При наведении на ссылку стрелочка мягко сдвигается вправо */
.add_to_cart_for_sup:hover .arrow-icon {
    transform: translateX(4px);
}


.api_order {
    font-weight: 600;
    font-size: 14px;
    color: #28a745 !important;
    display: inline-block;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

/* Цвет текста при наведении */
.api_order:hover {
    color: #1e7e34 !important;
}

/* Настройка иконки плюса */
.api_order .plus-icon {
    display: inline-block !important;
    /* ИСПРАВЛЕНО: translateY(-1px) приподнимает плюс чуть выше, убирая провисание вниз */
    transform: translateY(-1px);
    /* Плавный переход для анимации изменения размера */
    transition: transform 0.2s ease-in-out !important;
}

/* ДВИЖУХА + ВЫРАВНИВАНИЕ ПРИ НАВЕДЕНИИ */
.api_order:hover .plus-icon {
    /* При наведении плюс увеличивается (scale), но СОХРАНЯЕТ приподнятое положение (translateY) */
    transform: translateY(-1px) scale(1.3) !important;
}

.table-brand {
    color: #000000 !important; /* Делает текст строго черным */
}
.analog_article {
    font-size : 10px
}

.cart_article {
    font-size : 12px
}





/* Выравниваем всю группу в один компактный ряд */
.bootstrap-touchspin.input-group {
    width: 90px !important;    /* Маленькая аккуратная ширина всего блока */
    margin: 0 auto !important;  /* Центрируем внутри ячейки таблицы */
    display: flex !important;   /* Включаем флексбокс Bootstrap 4 */
    flex-wrap: nowrap !important;
}

/* Принудительно делаем кнопки маленькими и квадратными */
.bootstrap-touchspin .btn-sm {
    width: 28px !important;     /* Ширина кнопки */
    height: 28px !important;    /* Высота кнопки */
    padding: 0 !important;      /* Сбрасываем внутренние отступы */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Подгоняем поле ввода под высоту кнопок */
.bootstrap-touchspin input.cart_count {
    height: 28px !important;    /* Высота как у кнопок */
    padding: 0 !important;
    font-size: 14px !important;
}



.grid-view {
    position: relative !important;
}

/* Фон-затемнение на всю сетку */
.table-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* белый полупрозрачный фон */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Крутящийся круг (спиннер) */
.table-spinner {
    width: 45px;
    height: 45px;
    border: 4px solid #1e7e34; /* зеленый цвет, который мы настраивали кнопке */
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* Анимация вращения */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/*.kv-grid-table thead.kv-table-header th,
.floatThead-container thead th {
    background-color: #d3ded6 !important;
    color: #28362c !important;
    border-bottom: 2px solid #bdcbd0 !important;
}
.kv-grid-table thead.kv-table-header th a,
.floatThead-container thead th a {
    color: #28362c !important;
    font-weight: 600 !important;
}*/

.kv-grid-table,
.floatThead-container table {
    font-size: 13px !important; /* Было ~15px-16px. Можно поставить 12px, если нужно ещё мельче */
}

/* 2. Делаем строки тонкими (сжимаем отступы сверху и снизу) */
.kv-grid-table td,
.kv-grid-table th,
.floatThead-container th {
    padding: 6px 4px !important; /* Первая цифра - отступ сверху/снизу (было 12px), вторая - слева/справа */
    vertical-align: middle !important; /* Выравниваем текст строго по центру сжатой строки */
}

/* 3. Уменьшаем элементы управления внутри ячеек, чтобы они не распирали строки */
.kv-grid-table .input-group-sm > .form-control,
.kv-grid-table .btn-sm {
    padding: 2px 6px !important;
    font-size: 12px !important;
}

.tablesorter-default {
    margin: 0 !important;
}
.my-btn {
    font-size: 75%; line-height: 1.2; border: none; border-radius: 0.25rem;
}

/* Фикс для корректного отображения крестика очистки в Select2 */
/*.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 0.5rem !important; /* Даем тексту больше места *
    padding-top: 0.2rem !important; /* Даем тексту больше места *
}*/
.select2-container .select2-results > .select2-results__options {
    max-height: 600px !important; /* По умолчанию там 200px. Можно поставить 400px или 500px */
}
/* Уменьшаем шрифт и отступы между элементами в выпадающем списке */
.select2-container .select2-dropdown .select2-results__option {
    font-size: 13px !important;    /* Делаем шрифт чуть kompaktнее */
    padding: 4px 8px !important;   /* Минимальные отступы (сверху/снизу 4px, слева/справа 8px) */
    line-height: 1.2 !important;   /* Плотная высота строки */
}

/* Уменьшаем отступы для служебных сообщений (например, "Поиск...", "Ничего не найдено") */
.select2-container .select2-dropdown .select2-results__message {
    font-size: 13px !important;
    padding: 6px 8px !important;
}

/* Уменьшаем шрифт и отступы в главном поле выбора (в самой таблице GridView) */
.select2-container--krajee-bs4 .select2-selection--single,
.select2-container--default .select2-selection--single {
    font-size: 13px !important;     /* Такой же аккуратный размер шрифта */
    height: 30px !important;        /* Делаем само поле чуть ниже и аккуратнее */
    padding-top: 2px !important;    /* Выравниваем текст по центру высоты */
}

/* Уменьшаем шрифт и высоту текста внутри поля выбора */
/*.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;   /* Соответствует новой высоте поля *
}*/

/* На случай, если открыто дополнительное поле поиска внутри выпадающего списка */
.select2-container .select2-search--dropdown .select2-search__field {
    font-size: 13px !important;
    padding: 4px 6px !important;
}

/* Центрируем плейсхолдер и выбранный текст по вертикали */
.select2-container--krajee-bs4 .select2-selection--single,
.select2-container--default .select2-selection--single {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important; /* Выравнивание строго по центру */
}

/* Сбрасываем лишние верхние отступы у самого текста */
/*.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important; /* Должно строго совпадать с высотой height: 30px *****
    padding-top: 0 !important;
    margin-top: 0 !important;
}*/

/* Универсальный жирный шрифт для всего виджета Select2 */
.select2-container,
.select2-container .select2-selection,
.select2-container .select2-dropdown {
    font-weight: bold !important;
}

/* ================================================================= */
/* СМЕЩЕНИЕ КРЕСТИКА ВНИЗ БЕЗ ИЗМЕНЕНИЯ СТАРЫХ СТИЛЕЙ               */
/* ================================================================= */
.select2-container .select2-selection__clear {
    margin-top: 2px !important; /* Сдвигает сам крестик ниже. Настройте пиксели, если нужно ниже */
    margin-right: 20px !important;
    position: relative !important;
    z-index: 999 !important;
}



.fa-cart-arrow-down {
    transform: translateY(5px) !important; /* Настройте пиксели: 2px, 3px или 4px, пока не встанет ровно */
}

/* Автоматическая ширина: растягивается, но НЕ уменьшается меньше инпута */
/*.select2-container .select2-dropdown {
    width: auto !important;
    max-width: 500px !important;    /* Защита: чтобы список не улетел за край экрана, если текст огромный *
    min-width: 100% !important;     /* ГАРАНТИЯ: список никогда не станет уже, чем поле Select2 *
    display: table !important;      /* Помогает браузеру правильно рассчитать min/max width для контента *
}*/

/* Запрет переноса строк для правильного расчета ширины */
.select2-container .select2-dropdown .select2-results__option {
    white-space: nowrap !important; /* Текст идет строго в одну строку и толкает рамки вширь */
}

.c_img {
    width: 20px;
}
.brand-in-search {
    color : #0056b3;
}
.tt-suggestion:hover .brand-in-search {
    color: #edf7ff /* Укажите здесь цвет, КОТОРЫЙ ДОЛЖЕН БЫТЬ при наведении */
}




/* Элементы списка + меняем курсор на палец при наведении */
.tt-suggestion {
    background-color: #f4f6f9 !important;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    background-color: #007bff !important; /* Синий цвет (поменяйте на свой) */
    color: #ffffff !important;            /* Белый текст */
    cursor: pointer !important;
}

/* Верх, низ и общая обертка выпадающего списка */
.tt-menu,
.tt-dropdown-menu,
.dropdown-menu {
    background-color: #f4f6f9 !important;
    padding: 0 !important; /* Убирает зазоры сверху и снизу */
}
.info-text {
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 6px;
    border-radius: 4px;
}


.status-instock {
    background-color: #28a745; /* Цвет изменен: стал темнее, глубже и спокойнее */
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;           /* Размер изменен: стал меньше и аккуратнее */
    letter-spacing: 0.5px;

    padding: 4px 8px;          /* Отступы изменены: стали меньше под новый размер */
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    margin-left: 6px;
    box-shadow: 0 1px 3px rgba(30, 90, 34, 0.25); /* Тень уменьшена под новый размер */
    transform: translateY(-2px);
}

/* Стили для иконки галочки */
.status-instock svg {
    width: 13px;               /* Размер иконки изменен под новый шрифт */
    height: 13px;
    fill: #ffffff;
}

.status-supplier {
    background-color: #1e467a;
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: baseline; /* Меняем middle на baseline, чтобы элемент привязался к базовой линии текста */
    margin-left: 6px;
    transform: translateY(-0.2px); /* Смещаем вверх на 1-2 пикселя. Подберите значение на свой вкус */
    box-shadow: 0 1px 3px rgba(30, 70, 122, 0.25);
}


/* Стили для новой иконки грузовика */
.status-supplier svg {
    width: 13px;               /* РАЗМЕР ИКОНКИ ИЗМЕНЕН под новый шрифт */
    height: 13px;
    fill: #ffffff;
}

.search-text {
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 4px;
    border-radius: 4px;
}
.search-photo {
    max-height: 100px;
    max-width: 100px;
    /*min-width: 100px;*/
    /*min-height: 100px;*/
}
td.catalog_img {
    width: 120px;
}




.photo-preview-box {
    display: flex;
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center;     /* Центрируем по вертикали */

    width: 100px;
    height: 100px;
    background-color: #ffffff; /* Белый фон */
    /*border: 1px solid #ddd;    /* Легкая серая рамка, чтобы квадрат выделялся на белом */
    /*box-sizing: border-box;    /* Чтобы рамка не увеличивала размер квадрата */
    /*overflow: hidden;          /* Обрезаем все, что случайно вылезет */
    margin: 0 auto;
}

/* Настраиваем саму картинку внутри квадрата */
.photo-preview-box .search-photo {
    /*max-width: 90%;  /* Картинка не займет больше 90% ширины квадрата (оставляем отступы) */
    /*max-height: 90%; /* Картинка не займет больше 90% высоты */
    /*object-fit: contain; /* Сохраняет пропорции изображения, не растягивая его */
    /*display: block;*/
}

td.preview-cell {
    padding: 0;
    background-color: #ffffff !important; /* Дополнительно страхуем фон самой ячейки */
}


/*.catalog_img {
    width: 70px; max-width: 70px; overflow: hidden;
}*/

.btn-secondary {
    background-color: #e9ecef;
    color: #495057;
}



/* 1. Делаем контейнер тултипа на 100% видимым (убираем прозрачность) */
.tooltip.show {
    opacity: 1 !important;
}

/* 2. Светло-серый плотный фон окошка и крупный темный текст */
.tooltip-inner {
    background-color: #f4f6f9 !important; /* Светло-серый фон AdminLTE */
    color: #2c3e50 !important;           /* Глубокий темно-серый цвет текста */
    font-size: 13px !important;          /* Крупный размер шрифта */
    font-weight: 700 !important;         /* Жирный и четкий */
    border: 1px solid #ced4da !important; /* Сделали рамку чуть темнее и четче */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; /* Слегка усилили тень для объема */
    border-radius: 4px !important;       /* Закругление углов */
    padding: 8px 12px !important;        /* Комфортные внутренние отступы */
}

/* 3. Цвет стрелочки СНИЗУ (для placement: 'bottom') */
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #f4f6f9 !important;
}

/* 4. Цвет стрелочки СВЕРХУ (для placement: 'top') */
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #f4f6f9 !important;
}

/* 5. Цвет стрелочки СПРАВА (для placement: 'right') */
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #f4f6f9 !important;
}

/* 6. Цвет стрелочки СЛЕВА (для placement: 'left') */
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #f4f6f9 !important;
}

.country_image {
    width: 21px;
    height: 16px;
    margin-left: 5px;
    display: inline-block !important;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);

}




/* ==========================================
   1. КОНТЕЙНЕРЫ И ХОФЕР-ЭФФЕКТЫ
   ========================================== */
.photo-hover-container {
    position: relative;
    display: inline-block;
}

/* Скрытый по умолчанию большой блок превью */
.photo-hover-container .large-preview {
    display: none;
    position: absolute;
    z-index: 999999 !important; /* Гарантированно поверх строк */
    top: -50px;      /* Смещаем окно чуть выше курсора */
    left: 115px;     /* Выносим строго вправо от миниатюры */
    background: #ffffff;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Красивая тень */
    border: 1px solid #dcdcdc;
    /* ПОЛНОСТЬЮ УДАЛЕНО pointer-events: none; теперь на окно можно наводить мышь! */
}

/*
   МАГИЯ: Создаем невидимый мостик между маленьким квадратом и большим окном.
   Благодаря этому ховер НЕ прервется, если плавно перевести мышку на большую картинку.
*/
.photo-hover-container .large-preview::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;     /* Перекрывает зазор в 15px между окнами */
    width: 25px;     /* Запас ширины мостика */
    height: 100%;
    background: transparent; /* Полностью невидимый */
}

/* Окно показывается и остается открытым, если мышка либо на контейнере, либо на самом превью */
.photo-hover-container:hover .large-preview,
.photo-hover-container .large-preview:hover {
    display: block;
}

/* ==========================================
   2. ЕСЛИ У ТОВАРA ТОЛЬКО ОДНА КАРТИНКА
   ========================================== */
/* Настройки для одиночного большого изображения */
.photo-hover-container .large-preview img {
    max-width: 280px;  /* Оптимальный размер превью */
    max-height: 280px;
    object-fit: contain;
    display: block;
}

/* ==========================================
   3. ЕСЛИ У ТОВАРA ГАЛЕРЕЯ (НЕСКОЛЬКО КАРТИНОК)
   ========================================== */
/* Лента, которая выстраивает картинки строго горизонтально в ряд */
.large-preview .preview-gallery {
    display: flex;
    flex-direction: row;
    gap: 10px;           /* Красивый зазор в 10px между фотографиями */
}

/* Настраиваем размер для КАЖДОЙ картинки внутри этой ленты */
.large-preview .preview-gallery img {
    width: 220px;        /* Жесткая ширина для элементов галереи */
    height: 220px;       /* Жесткая высота */
    max-width: none;     /* Сбрасываем ограничение в 280px одиночного режима */
    max-height: none;    /* Сбрасываем ограничение одиночного режима */
    object-fit: contain;
    border: 1px solid #eee; /* Легкая рамочка вокруг каждого фото */
    border-radius: 4px;
    background-color: #ffffff;
}

/* ==========================================
   4. ПРОБИТИЕ СТЕНЫ OVERFLOW И АКТИВАЦИЯ КЛИКОВ
   ========================================== */
/* Разрешаем ячейкам и строкам таблицы выпускать абсолютные элементы наружу */
td, tr, .table-responsive {
    overflow: visible !important;
}

/*
   Принудительно поднимаем маленькую рабочую ссылку-квадрат на передний план,
   чтобы она ВСЕГДА была доступна для клика мышкой и легко открывала Fancybox!
*/
.photo-preview-box {
    position: relative;
    z-index: 10;
}


.my-custom-tooltip {
    position: absolute;
    display: none;
    padding: 14px 18px;
    min-width: 380px;
    max-width: 650px;
    width: max-content;
    box-sizing: border-box;

    /* СТИЛИ ОФОРМЛЕНИЯ AdminLTE */
    background-color: #f4f6f9 !important;
    color: #2c3e50 !important;
    font-size: 14px;
    line-height: 1.5;
    font-family: sans-serif;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    word-break: break-word;

    /* ========================================================
       ИСПРАВЛЕНО ДЛЯ РАБОТЫ СКРОЛЛА
       ======================================================== */
    overflow-y: auto;          /* Браузер сам добавит скролл, если окно зажмет по высоте */
    pointer-events: auto;      /* ИЗМЕНИЛИ: теперь пользователь может водить мышкой ВНУТРИ тултипа и крутить скролл */

    /* Плавное проявление */
    transition: opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}
.my-custom-tooltip.visible {
    opacity: 1;
}

/* Тонкий красивый скроллбар для Webkit-браузеров (Chrome, Edge, Safari) */
.my-custom-tooltip::-webkit-scrollbar {
    width: 6px; /* Очень тонкая полоска */
}
.my-custom-tooltip::-webkit-scrollbar-track {
    background: #e4e6e9; /* Светлый трек */
    border-radius: 8px;
}
.my-custom-tooltip::-webkit-scrollbar-thumb {
    background: #a1a8ae; /* Серый бегунок */
    border-radius: 8px;
}
.my-custom-tooltip::-webkit-scrollbar-thumb:hover {
    background: #7e858c;
}