.filter-result {
    display: flex;
    justify-content: start;
}

.showPRO-ordered-qty.data-changed {
    border-color: var(--bs-warning)
}

span {
    font-style: inherit;
    font-weight: inherit;
}

.bi-list::before, .bi-list-ul::before {
    font-size: x-large !important;
}

.showPRO-table-icon {
    display: inline-block;
    height: 22px;
    font-size: 1rem;
    margin: 0 6px 0 0;
    align-content: center;
    align-items: center;
}

.showPRO-scroll-bar-x {
    overflow-x: scroll;
    scrollbar-color: #888 #f1f1f1;
}

.showPRO-scroll-bar-y {
    overflow-y: scroll;
    scrollbar-color: #888 #f1f1f1;
}

.showPRO-scroll-bar-x[thin] {
    scrollbar-width: thin; /*~ 2px*/
}

.showPRO-lazy-img {
    display: block;
    aspect-ratio: 5/7;
    object-fit: contain;
    width: 100%
}

.showPRO-img-wrapper {
    position: relative;
}

.showPRO-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
        
.showPRO-ordered-qty {
    transform: rotate(25deg) translate(-120%, 30%) !important;
    font-size: small !important;
    cursor: pointer;
}

    .showPRO-ordered-qty[modern] {
        transform: rotate(25deg) translate(-75%, 30%) !important
    }

    .showPRO-ordered-qty.data-changed {
        border-color: var(--bs-warning)
    }

.showPRO-ordered-flat {
    font-size: 22px !important;
}


.showPRO-pop {
    transition: ease-out 0.5s;
}

    .showPRO-pop:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

.showPRO-pop-table {
    transition: ease-out 0.5s;
}

    .showPRO-pop-table:hover, .showPRO-pop-table:active {
        transform: scale(1.01);
        z-index: 1;
    }

.bi-currency-dollar, .bi-cash {
    color: mediumseagreen;
}

.showPRO-bold {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: .4px;
}


.grid-header {
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: .4px;
}

.showPRO-net {
    color: mediumseagreen;
    font-weight: 700;
}

.showPRO-bg-primary {
    background-color: RGBA(55, 148, 209, var(--bs-bg-opacity, 1)) !important;
}

.showPRO-filters-btn {
    padding: 0.8em;
    overflow: visible;
    min-width: fit-content;
    max-height: fit-content;
    border-radius: 20px !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    letter-spacing: 0.8px
}

    .showPRO-filters-btn[closeFilters] {
        display: none;
    }

    .showPRO-filters-btn[small] {
        padding: 0.4rem;
    }

    .showPRO-filters-btn[icon] {
        padding: 0.7em;
    }

    .showPRO-filters-btn:hover, .showPRO-filters-btn.show {
        color: #fff;
        background-color: rgb(55, 148, 209, 0.75) !important;
    }

    .showPRO-filters-btn.all:hover span {
        border-color: unset !important;
        color: #fff !important;
        background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
    }

    .showPRO-filters-btn:after {
        font-size: larger;
        font-weight: 400 !important;
    }

    .showPRO-filters-btn.show:after {
        transform: rotate(180deg);
        /* Include vendor prefixes for older browser compatibility if needed */
        -webkit-transform: rotate(180deg); /* Safari and Chrome */
        -moz-transform: rotate(180deg); /* Firefox */
        -o-transform: rotate(180deg); /* Opera */
        -ms-transform: rotate(180deg); /* Internet Explorer */
    }

    .showPRO-filters-btn.active {
        color: #fff;
        background-color: rgb(55, 148, 209, 0.75) !important;
    }



.filter-results {
    min-width: 300px;
    max-width: 300px;
    height: fit-content;
    max-height: 275px;
    border-radius: 20px !important;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
}

    .filter-results[small] {
        min-width: 150px;
        max-width: 150px;
    }

@media screen and (max-width: 1300px) {
    .filters-container > .left {
        flex-wrap: wrap;
    }
}

#mobile-placeholder, .showPRO-mobile-page-conatiner {
    display: none;
}

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

    #mobile-placeholder {
        display: inline-block;
    }
}

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

    #mobile-placeholder {
        display: inline-block;
    }
}

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

    .button-text {
        display: none;
    }
}

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

    .breadcrumb-button-text {
        display: none;
    }
}

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

    .showPRO-filters-btn[closeFilters] {
        display: inherit;
    }
}

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

    .filters-container > .right {
        flex-wrap: wrap;
    }
}

.showPRO-offcanvas-start-rounded {
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}

.showPRO-search[nav] {
    width: 238px;
    height: 38px;
}

.showPRO-storeNumber[modern] {
    color: #767676;
    font-weight: 500;
    font-size: inherit;
}

.showPRO-qty:not([floating]), .showPRO-date {
    display: inline;
    min-width: 72px !important;
    max-width: 72px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0.2rem;
    text-align: center;
    border-color: #3794d1;
    font-size: 11pt;
    font-weight: lighter;
}

    .showPRO-qty.focus-ring-success, .showPRO-date.focus-ring-success {
        border-color: var(--bs-form-valid-border-color);
    }

    .showPRO-qty.focus-ring-danger, .showPRO-date.focus-ring-danger {
        border-color: var(--bs-form-invalid-border-color);
    }

.showPRO-qty[range] {
    display: inline !important;
    min-width: 127px !important;
    max-width: 127px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0.2rem;
    text-align: center;
}


.contains-row {
    --bs-table-bg: #3ba2e555;
    --bs-table-striped-bg: #3ba2e555;
    --bs-table-color: black !important;
    --bs-table-striped-color: black !important;
    font-weight: 500;
    letter-spacing: 1px;
}

/* 
    Bootstrap counts contains rows and theres not 
    a good way to select around them >.> 
*/
.table-even > * {
    --bs-table-color-type: var(--bs-table-striped-color) !important;
    --bs-table-bg-type: white !important;
}

.table-odd > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}


.showPRO-sm-retro-header[showpro-dp="Price"] {
    width: calc(100% / 35);
}

.showPRO-sm-retro-header:not([showpro-dp="Price"]) {
    width: fit-content;
}