:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
    :root { font-family: 'Inter var', sans-serif; }
}
* {
    color: #0D1017;
    font-family: Inter, serif !important;
    font-size: 14px;
    font-weight: 400;
}
.btn{
    border-radius: 12px !important;
}
a {
    color: #0D1017 !important;
    text-decoration: none !important;
}
hr{
    background: #F2F3F5;
    margin: 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 0.05;
}
h5{
    font-size: 20px !important;
}
.cnt_item , .form-check{
    display: none !important;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}

#flexCheckDefault{
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.breadcrumb{
    padding: 20px 4px;
}
a:hover {
    /*
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
    border-radius: 12px;
    */
    color: #0077FF !important;
}

.bi {
    width: 20px;
    height: 20px;
    font-size: 16px;
}

main {
    background: #F1F2F4;
}

main > .container {
    padding: 16px 15px 20px;
}

.page-link.active, .active > .page-link {
    z-index: 3;
    color: #0D1017;
    background-color: #FFFFFF !important;
    border-radius: 12px;
    font-weight: 500;
}

.page-item .page-link, .page-item:first-child .page-link{
    width: 42px;
    font-size: 14px;
    font-weight: 400;
    border: none !important;
    background-color: #F1F2F4;
    height: 42px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 2px;
    border-radius: 12px !important;
}
.active .page-link{
    color: #0D1017 !important;
}
.nactive .page-link{
    color: #61646B !important;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.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-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
    .nav li > form > button.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.form-group {
    margin-bottom: 1rem;
}

.img-logo-m {
    width: 145px;
    height: 28px;
    flex-shrink: 0;
    padding-top: 8px;
    padding-right: 24px;
}

.l-busket {
    border-radius: var(--spacing-25, 10px) !important;
    background: var(--Button-Primary, #07F) !important;
    display: flex;
    width: 132px;
    height: 42px;

}

.l-busket .l-price {
    color: #FFF;
    padding-left: 10px;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}

.l-busket .l-count {

    color: var(--Text-Primary-Inverse, #F7F7F8);
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
}

.l-iin {
    display: flex;
    text-align: left;
    height: 42px;
    align-items: center;
}

.l-iin .iin-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid #07F;
    border-radius: 50%;
    overflow: hidden !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.l-iin .iin-avatar.img-logo-a {
    border-radius: inherit;
    height: inherit;
    width: inherit;
}

.l-iin .l-price {
    padding-left: 10px;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}

.l-iin .l-count {
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
}

.nav-link {
    color: #45484F;
}

.nav-item, .nav-item-active {
    height: 40px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.nav-item-active{
    border-radius: 10px;
    color: #0077FF !important;
    background-color:  #EFF8FE;
}
.nav-item-active a{
    color: #0077FF !important;
}
.nav-item-active img{
    filter: invert(29%) sepia(70%) saturate(2680%) hue-rotate(201deg) brightness(101%) contrast(109%);
}
.nav-item:hover,.nav-item-active {
    border-radius: 10px;
    background-color:#EFF8FE;
}

.p-title {
    color: var(--Text-Primary, #0D1017);
    /* Inter Bold/28 Display sm */
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 128.571% */
}

h1 {
    color: var(--Text-Primary, #0D1017);
    /* Inter Bold/28 Display sm */
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 128.571% */
}

.dropdown-toggle::after {
    border-radius: var(--Corner-Rounded, 999px);
    background: var(--System-colors-Gray-50, #F7F7F8);
}

.prod_item {
    margin-top: 15px;
}

.prod {
    margin: 0px 0 0 5px;
    padding: var(--spacing-35, 14px) var(--Spacing-6, 14px) var(--spacing-35, 14px) var(--spacing-35, 14px);
    align-self: stretch;
    border-radius: var(--Corner-6, 24px);
    background: var(--Background-Primary, #FFF);
}
.prod:hover{
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0px 6px 16px rgba(13, 16, 23, 0.08), 0px 2px 4px rgba(13, 16, 23, 0.04);
}
.prod-logo {
    width: 140px;
    height: 140px;
    border: 1px solid #f2f3f5;
    border-radius: 14px;
    flex-shrink: 0;
    overflow: hidden;
    background: #ffffff;
}
.prod-logo_grid {
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 14px;
    border: 1px solid #F2F3F5;
    align-content: center;
    display: flex;
    justify-content: end;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
}
.prod-href-grid{
    margin-top: 15px;
    display: block;
    min-height: 75px;
}



.cat-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
    border-radius: 8px;
}
.cat-logo img {
    border: none;
    background-color: #ffffff00 !important;
}
.m-cats {
    padding-left: 5px !important;
    align-items: center;
    flex-shrink: 0;
    padding-right: 5px !important;
}

.m-cat {
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--Spacing-3, 12px);
    border: 1px solid var(--Background-Primary, #FFF);
    background: rgba(255, 255, 255, 0.80);
    padding: 12px;
    margin-top: 20px;
    margin-right: 5px;
    margin-left: 5px;
}
.m-cat:hover{
    transform: translateY(-2px);
    box-shadow: 0px 6px 16px rgba(13, 16, 23, 0.08), 0px 2px 4px rgba(13, 16, 23, 0.04);
}
.catalog_items {
    padding: 12px 16px;
    margin-top: var(--spacing-35, 14px);
    border-radius: var(--Spacing-3, 12px);
    background: #FFF;
    height: max-content;
}

.prod-href, .cat-href {
    text-decoration: none;
}

.catalog_item {
    display: flex;
    color: var(--Text-Tertiary, #61646B);
    line-height: 15px;
    padding: 5px 10px;
    gap: var(--Spacing-6, 24px);
    align-items: flex-end;
}

.ctalog_item a {
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
}

.cat-m-title {
    justify-content: start;
    align-items: center;
    display: flex;
    text-align: left;
    color: var(--Text-Secondary, #45484F);

    /* Inter Medium/14 Text sm */
    font-family: Inter, serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.h-filters {
    margin: 10px 0 0 0;
    display: flex;
    padding: 15px 0;
    /*   justify-content: space-between;*/
    align-items: center;
    align-self: stretch;
    color: #45484F;
    /* Inter Normal/16 Text md */
}

.h-items {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 0 !important;
}

.select-sort {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p_price {
    text-align: right;
}
.p_price-grid {
    display: block;
    margin-top: 18px;
}

.m_price {
    font-family: Inter;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    vertical-align: middle;

}

.p_count,.p_count_out {
    font-family: Inter;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0%;
    vertical-align: bottom;

}
.p_count{
    color: #16A24A;
}
.p_count_out{
    color: #F27128;
}

.p_vat {
    color: #ff0000;
    font-family: Inter;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0%;
    vertical-align: bottom;

}

.bt_card, .bt_card_out {
    width: 120px;
    height: 40px;
    /*display: flex;*/
}
.cnt_item{
    align-items: center;
    text-align: center;
}
.cnt_item input{
    width: auto !important;
}
.h1sp{
    color: var(--Text-Primary, #0D1017);
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}
.h1spt{
    color: var(--Text-Primary, #0D1017);
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
}

.bt_card input[type="button"] {
    border-radius: 12px;
    border: 1px solid #0077FF;
    background-color: #0077FF;
    width: 100%;
    height: 100%;
}
.bt_card_out input[type="button"] {
    border-radius: 12px;
    border: 1px solid #F27128;
    background-color: #F27128;
    width: 100%;
    height: 100%;
}

.calc_card {
    border-radius: 12px;
    border: 1px solid #0077FF;
    background: #F1F7FE;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
}
.calc_card_out {
    border-radius: 12px;
    border: 1px solid #FD9B28;
    background: #FFF7EF;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
}

.calc_item {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    width: 33%;
    text-align: center;
}

.dropdown-item a {
    text-decoration: none;
    cursor: pointer;
}

#tabProfiles {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
}

.prof-kpp {
    display: block;
    cursor: pointer;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid grey;
    border-radius: 12px;
    min-height: 100px;
}
.prof-kpp-active {
    border: 1px solid var(--Border-Interactive, #0077FF);
}

.order_item {
    min-height: 75px;
    display: flex;
    align-items: center;
    background: white;
    margin: 15px 0;
    padding: 10px;
    border-radius: 12px;
}

.order_item:hover {
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
    color: rgba(5, 5, 5, 0.72);
    border-radius: 12px;
    cursor: pointer;
}
input:hover,select:hover,option:hover{
    cursor: pointer;
}
.order_status {
    display: flex;
}

.order_status b {
    font-size: 16px;
}

.order_status div {
    margin-left: 5px;
    font-size: 12px;
    width: max-content;
    color: white;
    padding: 3px 10px;
    border-radius: 16px;
    line-height: 18px;
    font-weight: 500;
}

#ordsrch {
    width: 100%;
    min-height: 42px;
    border: none;
    text-align: left;
    padding: 0 25px 0 40px;
    background-color: white !important;
    background: url(/img/icons/search.svg) no-repeat !important;
    background-size: 18px 18px !important;
    background-position: 13px 13px !important;
}

#order_date{
    width: 100%;
    min-height: 42px;
    padding: 0 25px 0 40px;
    background-color: white;
    background: url(/img/icons/calendar.svg) no-repeat;
    background-size: 18px 18px;
    background-position: 13px 13px;
    border: none;
}
#order_date:focus, #order_date:focus-visible {
    width: 100%;
    min-height: 42px;
    padding: 0 25px 0 40px;
    background-color: white !important;
    background: url(/img/icons/calendar.svg) no-repeat;
    background-size: 18px 18px;
    background-position: 13px 13px;
    border: none;
    outline: none !important;
}

.s_order_search{
    min-height: 42px;
    color: #61646B;
    border-radius: 12px;
    background-color: white;
    min-width: 110px;
}
.s_order_search option{
    border: none;
}
.f_order_search{
    min-height: 42px;
    color: #0D1017;
    border-radius: 12px;
    background-color: white;
    min-width: 110px;
    padding: 0 25px 0 40px;
    border: none;
    outline: none !important;
    background: url(/img/icons/filter.svg) no-repeat;
    background-size: 18px 18px;
    background-position: 13px 13px;
}

.f_order_search_f{
    min-height: 42px;
    color: #0D1017;
    border-radius: 12px;
    background-color: white;
    min-width: 110px;
    padding: 0 25px 0 40px;
    border: none;
    outline: none !important;
    background: url(/img/icons/filter_f.svg) no-repeat;
    background-size: 18px 18px;
    background-position: 13px 13px;
}
#ordsrch:focus, #ordsrch:focus-visible {
    border: none;
    outline: none !important;
    background: url(/img/icons/search.svg) no-repeat;
    background-size: 18px 18px;
    background-position: 13px 13px;
}
.l_order_search{
    border-radius: 12px;
    border: 1px solid #EDEFF0 !important;
    background-color: white;
    min-width: 230px;
}
.p_order_search{
    border-radius: 12px;
    border: 1px solid #EDEFF0 !important;
    background-color: white;
}
.empty_basket{
    display: flex;
    min-height: 480px;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: space-around;
}
.empty_info{
    width: 330px;
    margin: 0 auto;
    text-align: center;
}
.fav_item,.fav_item_act{
    cursor: pointer;
}
.fav_item_act{
    color: red;
}

.ord_prod{
    padding: 10px;
}
.ord_prod:hover{
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
    color: rgba(5, 5, 5, 0.72);
    border-radius: 12px;
    cursor: pointer;
}
.t_ord_inf{
    margin-bottom: 20px;
}
.t_ord{
    margin-bottom: 5px;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 22px;
    letter-spacing: 0%;
    color: #94979E;
}

.r_ord{
    font-family: Inter, serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 22px;
    letter-spacing: 0%;
    color: #0D1017;
}
.ord_p_img{
    width: 70px;
    height: 70px;
}
.ord_quant{
    position: relative;
    text-align: right;
    width: max-content;
    float: right;
    top: -20px;
    background-color: #EDEFF0;
    border-radius: 12px;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 600;
}
.item-tabs{
    margin-bottom: 15px;
    border-radius: 12px;
    background: white;
    padding: 15px;
}
.time_lime_status {
    background-color: white;
    display: flex;
    align-content: center;
    border-radius: 15px;
    margin: 5px;
}

:root {
    --prm-color: #0381ff;
    --prm-gray: #b1b1b1;
}

/* CSS */
.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 25px;
}

.step-button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--prm-color);
    background-color: white;
    transition: .4s;
}

.done {
    background-color: var(--prm-color);
    color: #fff;
}

.step-item {
    z-index: 10;
    text-align: center;
}

#progress {
    -webkit-appearance: none;
    position: absolute;
    width: 96%;
    z-index: 5;
    height: 1px;
    /* margin-left: 7px; */
    margin-bottom: 25px;
}

/* to customize progress bar */
#progress::-webkit-progress-value {
    background-color: var(--prm-color);
    transition: .5s ease;
}

#progress::-webkit-progress-bar {
    background-color: var(--prm-gray);

}
.ord_p_price , .ord_p_title{
 text-align: left;
}
.text-center{
    align-items: center;
    text-align: center !important;
    display: flex;
    justify-content: center;
}
.mfilt{
    font-family: Inter;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    vertical-align: middle;
}
.cttl{
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: bottom;

}
.cat-href b{
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    vertical-align: middle;
}
.b-cat-view{
    float: right;
    justify-content: center;
    background: #EDEFF0;
    width: 82px;
    gap: 10px;
    padding: 5px;
    border-radius: 22px;
    display: flex;
}
.cat-view{
    cursor: pointer;
    width: 32px;
    height: 32px;
    gap: 8px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    border-radius: 58px;
}
.cat-ite-f{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}
.cat-ite-f label{
    margin-left: 10px;
    line-height: 22px;
}
.cat-href .form-check-input{
    width: 18px;
    height: 18px;
}
.form-check-label{
    display: flex;
    cursor: pointer;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.add-more-prod{
    display: block;
    text-align: center;
    cursor: pointer;
    align-items: center;
    font-family: Inter;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

#scroll_top {
    display: none;
    background-position: center;
    filter: revert-layer;
    position: fixed;
    bottom: 75px;
    left: 75px;
    color: bisque;
    z-index: 1000;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(rgb(0 63 255 / 47%), rgb(0 119 255 / 0%)), url(https://snipp.ru/img/scroll_top.png);
    border-radius: 50%;
    background-repeat: no-repeat;
 opacity: 0.5;
}
#scroll_top:hover {
opacity: 1;
}
.sharr , .sharrContr{
    float: right;
}
.srt {
    cursor: pointer;
}

.filter_items {
    padding: 10px;
    /* margin-top: var(--spacing-35, 14px); */
    border-radius: 0;
    background: #FFF;
    height: max-content;
    border-bottom: 1px solid #F2F3F5;
}

.filter_items input {
    border: 1px solid #EDEFF0 !important;
}

.srt:hover {
    font-weight: bold;
}

.filter_title {
    margin: 10px 0;
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: bottom;
}

.filter_menu {
    width: 400px;
    gap: 20px;
    border-radius: 15px;
    padding: 20px;

}

.filter_close {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: #F9F9FA;
    align-content: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.filter_close i {
    cursor: pointer;
    padding-top: 0;
    color: #45484F;
    font-size: 23px;
    padding-left: 3px;
    transform: rotateY(0deg) rotate(45deg);
}
.dropstart .dropdown-toggle::before {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: 0.255em;
    content: none;
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid;
    border-bottom: 0.3em solid transparent;
}
.filter_check{
    width: 18px;
    height: 18px;
    color: #D3D6DB;
}
.filter_label{
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    vertical-align: middle;
}
.filter_item{
    height: 42px;
    border-radius: 12px;
    gap: 10px;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;

}
.filter_set{
    float: right;
    width: 177px;
    height: 42px;
    border-radius: 12px;
    color: #FFFFFF;
    background-color: #0077FF;
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    margin-top: 10px;
}
.daterangepicker td.active , .daterangepicker .ranges li.active{
    background-color: #0077FF;
}
.daterangepicker .ranges li.active{
    border-radius: 4px;
}
#pills-tabContent{
    min-height: 300px;
}
.prod-sub-info, .order-sub-info{
    display: flex;
    border-radius: 20px;
    background: #F2F3F5;
    /* height: 44px; */
    justify-content: space-around;
    padding: 11px;
}
.prod-sub-info .nav-item , .order-sub-info .nav-item , {
    justify-content: center;
    width: 25%;
    text-align: center
}
.prod-sub-info .nav-item .nav-link{
    width: 100%;
}
.pnav-link:hover, .pnav-link:focus, .pnav-item:hover, .pnav:hover , .pnav:focus , .pnav {
    color: #0D1017 !important;
    border-color: #F2F3F5;
    background-color: #F2F3F5 !important;
    transition:none !important;
}
.prod-sub-info .nav-item .active,.order-sub-info .nav-item .active{
    width: 100%;
    color: #0D1017;
    background-color: #FFFFFF !important;
    border-radius: 14px;
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    vertical-align: bottom;

}
.prod-info , .order-info {
    background-color: white;
    border-radius: 12px;
    padding: 25px;
}

#cart-badge {
    position: relative;
    top: -8px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: var(--figma-badge-red);
    border: 1px solid var(--figma-button-tertiary);
    border-radius: 999px;
}
.left_link{
    height: 42px !important;
    flex-direction: row !important;
    display: flex;
    align-items: center;
}
.left_link a{

}
.fav_com_icon{
    padding: 0 10px;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}
.fav_item_div{
    height: 100%;
    justify-content: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}
.fav_com_icon_m{
    cursor: pointer;
    border-radius: 14px;
    background-color: #F9F9FA;
    display: contents;
    width: 40px;
    height: 40px;
}
.fav_com_icon_m img.in_fav, .fav_com_icon_m img.in_comp, .grid_icon img.in_fav, .grid_icon img.in_comp{
    filter: invert(13%) sepia(98%) saturate(5346%) hue-rotate(2deg) brightness(94%) contrast(118%);
}
.grid-fav{
    position: relative;
    gap: 6px;
}
.grid_icon{
    margin-bottom: 5px;
    width: 40px;
    height: 40px;
    border-radius: 25%;
    background: #F9F9FA;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}
.grid_icon i{
    font-size: 16px;
    height: 20px;
    width: 16px;
}

.breadcrumb div a , .breadcrumb-item.active{
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    height: 16px;
    line-height: 20px;
}

.pag_b{
    height: 42px;
    display: flex;
    float: right;
    flex-wrap: wrap;
    align-content: center;
}
.pag_prev{
    margin-right: 5px;
}
.ord_action{
    cursor:pointer;
    display: flex;
    width: 36px;
    height: 36px;
    padding: 8px 16px;
    border: 1px;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    background: #F9F9FA;
    border-radius: 12px;
}
.pag_dis{
    color: #0D101729 !important;
    border-color: #EDEFF0 !important;
}
.pag_b button{
    padding: 10px 20px;
    border: 1px #D3D6DB solid;
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 22px;
    letter-spacing: 0%;
    color: #45484F;
    border-radius: 12px;
}
:root {
    --figma-text-primary: #0d1017;
    --figma-text-secondary: #45484f;
    --figma-text-tertiary: #61646b;
    --figma-text-quaternary: #94979e;
    --figma-primary-blue: #0077ff;
    --figma-primary-blue-bg: #eff8fe;
    --figma-badge-red: #f23f5d;
    --figma-background-primary: #ffffff;
    --figma-button-tertiary: #ffffff;
    --figma-gray-50: #f9f9fa;
    --figma-border-100: #f2f3f5;
    --figma-spacing-20: 20px;
    --figma-spacing-28: 28px;
    --figma-spacing-32: 32px;
    --figma-corner-sm: 12px;
    --figma-corner-md: 14px;
    --figma-corner-lg: 16px;
    --figma-shadow-header: 0px 1px 2px rgba(13, 16, 23, 0.06);
}
:root{
    --epotos-blue: #0077FF;
    --text-primary: #0d1017;
    --text-secondary: #45484f;
    --text-tertiary: #61646b;
    --text-quaternary: #94979e;
    --background-primary: #ffffff;
    --fields-disabled: #f9f9fa;
    --border-disabled: #edeff0;
    --system-gray-300: #d3d6db;
    --corner-xs: 10px;
    --corner-sm: 12px;
    --corner-rounded: 999px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-2-5: 10px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
}
.sub_title{
    color: #45484F !important;
}
.basket-btn{
    display: flex;
    width: 100%;
    background-color: #0077FF !important;
    /* padding: 10px; */
    border-radius: 12px !important;
    height: 54px;
    color: white !important;
    gap: 12px;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.basket-btn:hover{
    color: #FFFFFF !important;
}