/* Global bootstrap override -> bootstrap class and html tags  */
/* Typo */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */


/* Font scale in product list
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
*/

/* @media screen and (max-width: 45rem) and (orientation: portrait) {
    .textTruncateTwoLine{
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       line-clamp: 2;
       overflow: hidden;
       height: 2rem !important;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
} */

body{
    background-color: rgb(250, 250, 250) !important;
}

/* .shadowListandGrid{
    -webkit-box-shadow: 0px 0px 18px -12px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0px 0px 18px -12px rgba(66, 68, 90, 1);
    box-shadow: 0px 0px 18px -12px rgba(66, 68, 90, 1);
    border: 0 !important;
}
.shadowListandGrid:hover{
    -webkit-box-shadow: inset 0px 0px 18px -12px rgba(66, 68, 90, 1);
    -moz-box-shadow: inset 0px 0px 18px -12px rgba(66, 68, 90, 1);
    box-shadow: inset 0px 0px 18px -12px rgba(66, 68, 90, 1);
    border: 0;
} */



.btn-circle {
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem 0;
    border-radius: 1.3rem;
    text-align: center;
    -webkit-border-radius: 1.3rem;
    -moz-border-radius: 1.3rem;
    -ms-border-radius: 1.3rem;
    -o-border-radius: 1.3rem;
}


.oneOfThree{
    font-size: .8rem !important;
}
.oneOfThree span{
    font-weight: bold;
}


.microTypographyDescryptionInBody{
    font-size: .9rem !important;
    line-height: 1.5rem !important;
    word-wrap: break-word;
}



.modalFilter{
    max-width: 1200px !important;
}


.modalCompare{
    width: fit-content;
    max-width: 900px !important;
}


/* Absolutely no display in mobile */
@media screen and (max-width: 48em) and (orientation: portrait) {
.andim{
    display: none !important;
}
}

/* Name Category Same Height Display */
@media screen and (min-width: 48em)  {
.ncshd{
    height: calc(5.5rem - 1vw) !important;
}
}

/* Name Category Same Height Display Simple Tile */
@media screen and (min-width: 48em)  {
    .ncshd-simple{
        height: calc(3.8rem - 1vw) !important;
    }
    }


@media screen and (max-width: 48em) and (orientation: portrait) {
    .fontsInCatCalc{
        font-size:calc(1.3rem) !important;
        }
    .fontsInCatCalc.btn{
        font-size:calc(0.7rem) !important;
        }

}

/* Lewy */
.warrningGradientYellowToWhiteOdd{
    background: rgb(255,255,255);
    background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,254,194,1) 90%);
}

/* prawy */
.warrningGradientYellowToWhiteEven{
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,254,194,1) 90%);
}


.warrningGradientYellowToWhiteTop{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,254,194,1) 90%);
}

.warrningGradientYellowToWhiteBottom{
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,254,194,1) 90%);
}




.row-transition [data-list-class] {
    transition: all 0.25s ease-in-out;
}

.collapse-container-parametr-list {
    max-height:  35vh;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.collapse-container-parametr-list::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15vh;
    /* Wysokość obszaru wygaszenia */
    background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(250,250,250,1) 80%);
    pointer-events: none;
    /* Zapobiega interakcji z myszą */
}







.collapse-container-parametr-list.expanded-parametr-list {
    max-height: 100%; /* Można dostosować do maksymalnej oczekiwanej wysokości */

}


.collapse-container-parametr-list.expanded-parametr-list::after{
    background-image: none !important;
    transition: min-height 0.5s ease;
    -webkit-transition: min-height 0.5s ease;
    -moz-transition: min-height 0.5s ease;
    -ms-transition: min-height 0.5s ease;
    -o-transition: min-height 0.5s ease;
}


.parametrsZebra:nth-of-type(even) {
    background-color: rgba(255,255,0,.1 ) !important;

}



@media screen and (max-width: 45rem) and (orientation: portrait) {
    .partFont{
        font-size: .9rem !important;
    }
    .responsivD-none{
        display: none !important;
    }

}

.boxRemCeo {
    --width-box: 12rem;
    --height-box: 12rem;
    object-fit: cover;
}



.boxRemDwa {
    --width-box: 2rem;
    --height-box: 2rem
}


.boxRemHeight{

    height: var(--height-box) !important;
            position:relative;
            text-align: center;
    }

.boxRem{
width: var(--width-box) !important;
height: var(--height-box) !important;
        position:relative;
        text-align: center;
}
.boxRem div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) ;
        -webkit-transform: translate(-50%, -50%) ;
        -moz-transform: translate(-50%, -50%) ;
        -ms-transform: translate(-50%, -50%) ;
        -o-transform: translate(-50%, -50%) ;
    }



/* Color Theme Swatches in Hex */
.Architektura-1-hex { color: #B4C4D9; }
.Architektura-2-hex { color: #D9D382; }
.Architektura-3-hex { color: #73664F; }
.Architektura-4-hex { color: #594A38; }
.Architektura-5-hex { color: #A69B8D; }

/* Color Theme Swatches in RGBA */
.Architektura-1-rgba { color: rgba(179, 195, 216, 1); }
.Architektura-2-rgba { color: rgba(216, 210, 130, 1); }
.Architektura-3-rgba { color: rgba(114, 102, 79, 1); }
.Architektura-4-rgba { color: rgba(89, 74, 56, 1); }
.Architektura-5-rgba { color: rgba(165, 154, 140, 1); }

/* Color Theme Swatches in HSLA */
.Architektura-1-hsla { color: hsla(213, 32, 77, 1); }
.Architektura-2-hsla { color: hsla(56, 53, 68, 1); }
.Architektura-3-hsla { color: hsla(39, 18, 38, 1); }
.Architektura-4-hsla { color: hsla(33, 22, 28, 1); }
.Architektura-5-hsla { color: hsla(33, 12, 60, 1); }









    * {
    --ComplementaryWarrningFirst: rgba(118, 109, 98, 1) !important;
    --ComplementaryWarrningFirstSubtle: rgba(118, 109, 98, 0.5) !important;
}

.bgComplementaryWarrningFirst {
    background-color: var(--ComplementaryWarrningFirst);
}

.bgComplementaryWarrningFirstSubtle {
    background-color: var(--ComplementaryWarrningFirstSubtle);
}

.borderComplementaryWarrningFirst {
    border-color: var(--ComplementaryWarrningFirst) !important;
}

.borderComplementaryWarrningFirstSubtle {
    border-color: var(--ComplementaryWarrningFirstSubtle) !important;
}


* {
    --ComplementaryWarrningSecond: rgba(165, 154, 140, 1 ) !important;
    --ComplementaryWarrningSecondSubtle: rgba(165, 154, 140, .5) !important;
}

.bgComplementaryWarrningSecond {
    background-color: var(--ComplementaryWarrningSecond);
}

.bgComplementaryWarrningSecondSubtle {
    background-color: var(--ComplementaryWarrningSecondSubtle);
}

.borderComplementaryWarrningSecond {
    border-color: var(--ComplementaryWarrningSecond) !important;
}

.borderComplementaryWarrningSecondSubtle {
    border-color: var(--ComplementaryWarrningSecondSubtle) !important;
}




* {
    --ComplementaryWarrningThird: rgba(255, 228, 1, 1)  !important;
    --ComplementaryWarrningThirdSubtle: rgba(255, 228, 1, .5) !important;
}

.bgComplementaryWarrningThird {
    background-color: var(--ComplementaryWarrningThird);
}

.bgComplementaryWarrningThirdSubtle {
    background-color: var(--ComplementaryWarrningThirdSubtle);
}

.borderComplementaryWarrningThird {
    border-color: var(--ComplementaryWarrningThird) !important;
}

.borderComplementaryWarrningThirdSubtle {
    border-color: var(--ComplementaryWarrningThirdSubtle) !important;
}








.bgRomerWhiteParts {
    background-image: url('/tpl/assets/img/r-bg-white.svg');
    background-size: 15rem;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bgRomerYellowParts {
    background-image: url('/tpl/assets/img/r-bg-white.svg');
    background-size: 15rem;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}



.hardCodeHeight9rem {
    height: 9rem !important;
}

.blur {
    filter: blur(7px);

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.spinnerCustomHalfHeight {
    margin-top: 50vh;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.spinnerCustomBefore {
    display: inline-block;
    height: 1.1rem !important;
    width: 1.1rem !important;
}

.spinnerCustom {
    background-size: cover;
    animation: SpinnerPlayAnimation 1s steps(10) infinite;
    -webkit-animation: SpinnerPlayAnimation 1s steps(10) infinite;
}

.spinnerCustomWhite {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

.spinnerCustomXs {
    width: 1.5rem;
    height: 1.5rem;
}


.spinnerCustomSm {
    width: 5rem;
    height: 5rem;
}

.spinnerCustomMd {
    width: 10rem;
    height: 10rem;
}


@keyframes SpinnerPlayAnimation {
    0% {
        background-image: url('/tpl/assets/img/spinner/0.svg');
    }
    10% {
        background-image: url('/tpl/assets/img/spinner/1.svg');
    }
    20% {
        background-image: url('/tpl/assets/img/spinner/2.svg');
    }
    30% {
        background-image: url('/tpl/assets/img/spinner/3.svg');
    }
    40% {
        background-image: url('/tpl/assets/img/spinner/4.svg');
    }
    50% {
        background-image: url('/tpl/assets/img/spinner/5.svg');
    }
    60% {
        background-image: url('/tpl/assets/img/spinner/6.svg');
    }
    70% {
        background-image: url('/tpl/assets/img/spinner/7.svg');
    }
    80% {
        background-image: url('/tpl/assets/img/spinner/8.svg');
    }
    90% {
        background-image: url('/tpl/assets/img/spinner/9.svg');
    }
    100% {
        background-image: url('/tpl/assets/img/spinner/9.svg');
    }
}

/* Customowy spinner animacja*/


#spinner, #loadingSpinner {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    /*Spinnernawierzchu*/
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .85);
    /*Półprzezroczystetło*/
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.blur-and-gray {
    filter: blur(5px) grayscale(50%);
    pointer-events: none; /* Zapobiega interakcji z rozmytą zawartością */
}

.modal-sm {
    word-wrap: break-word !important;
}


@media screen and (max-width: 539px) {
    .widthWithoutCol {
        font-size: calc(1vw + .6rem) !important;
    }

    .widthWithoutCol button {
        font-size: calc(1vw + .5rem) !important;
    }
}

@media screen and (min-width: 540px) {
    .widthWithoutCol {
        font-size: calc(1vw + .7rem) !important;
    }

    .widthWithoutCol button {
        font-size: calc(1vw + .6rem) !important;
    }
}

@media screen and (min-width: 720px) {
    .widthWithoutCol {
        font-size: calc(1vw + .55rem) !important;
    }

    .widthWithoutCol button {
        font-size: calc(1vw + .3rem) !important;
    }
}

@media screen and (min-width: 960px) {
    .widthWithoutCol {
        font-size: calc(1vw + .5rem) !important;
    }

    .widthWithoutCol button {
        font-size: calc(1vw + .2rem) !important;
    }
}

@media screen and (min-width: 1140px) {
    .widthWithoutCol {
        font-size: calc(1vw + .4rem) !important;
    }

    .widthWithoutCol button {
        font-size: calc(1rem) !important;
    }
}

@media screen and (min-width: 1320px) {
    .widthWithoutCol {
        font-size: calc(1vw + .2rem) !important;
    }

    .widthWithoutCol button {
        font-size: calc(1rem) !important;
    }
}

@media screen and (min-width: 1900px) {
    .widthWithoutCol {
        font-size: calc(1.4rem) !important;
    }

    .widthWithoutCol button {
        font-size: calc(1rem) !important;
    }
}


.gridTitle {
    height: 3rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 575px) {
    ._gridMobileMargin {
        padding-left: calc(3em + 10vw) !important;
        padding-right: calc(3rem + 10vw) !important;
    }
}


/* Tempy */

.top-15 {
    top: 15% !important;
}

.start-70 {
    left: 70% !important;
}

@media screen and (max-width: 760px) {
    .basketMobBg {
        background-color: rgba(255, 255, 0, .5);
        margin-top: .4rem;
        margin-bottom: .2rem;
    }
}


@media screen and (max-width: 760px) {
    .basketMobBg2 {
        background-color: rgba(255, 255, 0, .1);
        border-top: .1rem solid rgba(0, 0, 0, .2)

    }
}

@media screen and (max-width: 760px) {
    .basketMobBg2blue {
        background-color: rgba(0, 85, 255, 0.1);
        border-top: .1rem solid rgba(0, 0, 0, .2)

    }
}

@media screen and (max-width: 760px) {
    .basketMobBg3 {
        border-right: .1rem dashed rgba(0, 0, 0, .2);
        border-top: .1rem solid rgba(0, 0, 0, .2)
    }
}


.clearDiv img {
    max-width: 100% !important;
    height: auto !important;
}

.clearDiv iframe {
    display: none;
}

.foto_page img {
    visibility: visible !important;
}


:root {
    --bs-font-sans-serif: Poppins;

}

.noUnderline {
    text-decoration: none !important;
}

@media screen and (min-width: 1400px) {
    .modalDialogBasket {
        margin-right: 2rem !important;
        margin-top: 4rem !important;
    }
}

@media screen and (max-width: 36em) and (orientation: portrait) {
    #productPage h1 {
        font-size: clamp(1rem, 1.3rem, 2rem);
    }
}

h1 {
    display: flex;
    height: 5rem;
    align-items: center;
    justify-content: center;
}


h5 {
    display: flex;
    height: 4rem;
    align-items: center;
    justify-content: center;
}


input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Usuwa domyślny styl dla WebKit/Blink */
    width: 1rem;
    /* Szerokość kciuka */
    height: 1rem;
    /* Wysokość kciuka */
    background: black !important;
    /* Kolor tła kciuka */
    cursor: pointer;
    /* Kursor w formie wskaźnika */
}

input[type=range]::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background: black !important;
    /* Kolor tła kciuka */
    cursor: pointer;
}


.dropdown-item:active {
    background-color: black !important;
}

.focus-ring-warning {
    --bs-focus-ring-color: rgba(255, 255, 0, .5);

}


.form-check-input:checked {
    background-color: rgba(var(--bs-success-rgb));
    border-color: rgba(var(--bs-success-rgb));
}


@media screen and (max-width: 36em) and (orientation: portrait) {

    .filtersInMobileView .btn {
        /* color: white !important; */
    }

    .filtersInMobileView {
        position: fixed;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, 50%);
        z-index: 1030;
        background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
        backdrop-filter: blur(.088rem);
        border-radius: 2rem;
        padding: 7% 100%;
        -webkit-transform: translate(-50%, 50%);
        -moz-transform: translate(-50%, 50%);
        -ms-transform: translate(-50%, 50%);
        -o-transform: translate(-50%, 50%);
        -webkit-border-radius: 2rem;
        -moz-border-radius: 2rem;
        -ms-border-radius: 2rem;
        -o-border-radius: 2rem;
    }
}


/* Standard bootstrap color */

.text-warning {
    color: rgba(255, 255, 0, 1) !important;
}

.border-warning {
    border-color: rgba(255, 255, 0, 1) !important;
}

.bg-warning {
    background-color: rgba(255, 255, 0, 1) !important;
}


.btn-outline-warning {
    --bs-btn-color: rgba(255, 255, 0, 1);
    --bs-btn-border-color: rgba(255, 255, 0, 1);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: rgba(255, 255, 0, 1);
    --bs-btn-hover-border-color: rgba(255, 255, 0, 1);
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: rgba(255, 255, 0, 1);
    --bs-btn-active-border-color: rgba(255, 255, 0, 1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: rgba(255, 255, 0, 1);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(255, 255, 0, 1);
    --bs-gradient: none;
}


.btn-outline-warning {
    color: black;
}

.bg-warning-subtle {
    background-color: rgba(255, 255, 0, .3) !important;
}



.shadow-sm {
    border: .01rem solid #ccc !important;
}

.shadow-sm:hover {
    border: .01rem solid #ccc !important;
    /* border: .001rem solid rgba(255, 255, 255, 1) !important; */
    box-shadow: var(--bs-box-shadow) !important;
}

/* Product Page */
/* Product page style */
/* Product page style product details  */
.fading-text-container {
    position: relative;
}

.fading-text-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5rem;
    /* Wysokość obszaru wygaszenia */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    /* Zapobiega interakcji z myszą */
}


/* Basket Page */

/* Basket Zebra */


.bgCardWarning {
    background: rgb(255, 255, 255);
    background-image: url('/tpl/assets/img/r-bg.svg');
    background-size: 15rem;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bgCardWarning:hover {
    background-image: url('/tpl/assets/img/r-bg2.svg');
}

.bgCardWarningGrid {
    background: rgb(255, 255, 255);
    background-image: url('/tpl/assets/img/r-bg-g.svg');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.bgCardWarningGrid:hover {
    background-image: url('/tpl/assets/img/r-bg2-g.svg');
}


@media screen and (min-width: 760px) {
    .basketZebra .basketZebraItem:nth-child(odd) .basketZebraItemBg {
        background: rgb(255, 255, 255);
        background-image: url('/tpl/assets/img/r-bg-cart.svg');
        background-size: contain;
        /* background-position: right center; */
        background-repeat: repeat-x;
    }

    /* Basket Return Pay */
    .basketReturnPayItem:nth-child(odd) .basketZebraItemBg {
        background: rgb(255, 255, 255);
        background-image: url('/tpl/assets/img/r-bg-cart-blue.svg');
        background-size: contain;
        /* background-position: right center; */
        background-repeat: repeat-x;
    }

}


.basketPreview .basketPreviewItem:first-of-type {
    border: 0;
}

.basketPreview .basketPreviewItem:nth-of-type(even) {
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 30%, rgba(254, 255, 223, 1) 60%);
}

.basketPreview .basketPreviewItem {
    border-top: .2rem solid rgba(255, 255, 0, .3)
}


/* to use when needed - desktop scroll sidebar and product list  */
/* @media screen and (min-width:85em) and (orientation:landscape) {
  .noVisibleScroll{
    height: 100vh !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }
} */


@media screen and (max-width: 36em) and (orientation: portrait) {

    /* .smallPriceAndButtonOnlyMobList,
    .smallPriceAndButtonOnlyMobList strong{
    font-size: .7rem !important;
   } */
    /* Basket Return Pay */
    .basketReturnPayItem .basketZebraItemBg {
        background: rgb(255, 255, 255);
        background-image: url('/assets/img/r-bg-blue.svg');
        background-size: 15rem;
        background-position: right center;
        background-repeat: repeat-x;
    }

    .basketReturnPayItem .shadow-sm:hover {
        border: .1rem solid rgba(218, 218, 218, 1) !important;
        box-shadow: var(--bs-box-shadow) !important;
    }


}


/* Footer + go to top button */

/* background-color: var(--bs-light-bg-subtle) !important; */

.footerContainerDynamic {
    background-color: #181b21 !important;
    color: #9aa0ac;
}

.footerContainerDynamic h5 {
    font-size: 1rem;
    color: white;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: left;
    display: block;
    height: auto;
    padding-bottom: .5rem;
}

.footerContainerDynamic a {
    color: #9aa0ac;
    text-decoration: none;
}


.footerContainerDynamic a:hover {
    color: #ffe401;
}

.footerContainerDynamic ul li, .footerContainerDynamic ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-bottom: .5rem;
}

.footerImportantLinks ul li {
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;


}

.lastFooter {
    background-color: #15181d;
    color: #9aa0ac;
}

#toTopBtn {
    z-index: 1000;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: #ffe401;
    border: 0;
}

#toTopBtn i {
    color: #000;
    font-size: 1.5rem;
    font-weight: 900;
}


@media screen and (max-width: 36em) and (orientation: portrait) {
    #toTopBtn {
        display: none !important;
    }
}

/* Animation steps label Bagckground */


.basketAnimationContainer {
    -webkit-animation: color-change-2x 2s ease-in-out infinite alternate both;
    animation: color-change-2x 2s ease-in-out infinite alternate both;
}


.basketAnimationContainer span,
.nonBasketAnimationContainer span {
    font-size: .9rem;
    margin: 0;
    padding: 0;
}

@-webkit-keyframes color-change-2x {
    0% {
        background: rgba(255, 255, 0, 1)
    }

    100% {
        background: var(--bs-dark-bg-subtle)
    }
}

@keyframes color-change-2x {
    0% {
        background: rgba(255, 255, 0, 1)
    }

    100% {
        background: var(--bs-dark-bg-subtle)
    }
}


.dangerAnimationContainer,
.dangerAnimationContainer span {
    -webkit-animation: danger-color-change-2x 2s ease-in-out infinite alternate both;
    animation: danger-color-change-2x 2s ease-in-out infinite alternate both;
}


@-webkit-keyframes danger-color-change-2x {
    0% {
        background: white;
        color: var(--bs-danger);
    }

    100% {
        background: var(--bs-danger);
        color: white;
    }
}

@keyframes danger-color-change-2x {
    0% {
        border: .2rem solid;
        border-color: var(--bs-danger);
    }

    100% {
        border: .2rem solid;
        border-color: white;
    }
}


/* Form Labels */

.form-label-basket {
    position: absolute;
    background-color: white;
    top: .3rem;
    left: 1.5rem;
    padding: 0 1rem;
    transform: translateY(-1rem);
    font-size: small;
    color: #888;
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.formLabelReq::before {
    content: '* ';
    color: red
}


/* Category list group zebra and hover */

.categoryListGroupZebra:nth-child(odd) .categoryListGroupHover {
    background-color: var(--bs-light-bg-subtle) !important;
    border-color: var(--bs-dark-bg-subtle) !important;
}

.categoryListGroupHover:hover {
    box-shadow: var(--bs-box-shadow) !important;
}


/* Illustartion - Animation :) */
/* thanks and basket animation*/
.svg-container {
    position: relative;
    width: 100%;
    height: 40rem;
    overflow: hidden;
}

.svg-object {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%) translateX(100%);
    will-change: transform;
    visibility: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(-50%) translateX(100%);
    -moz-transform: translateY(-50%) translateX(100%);
    -ms-transform: translateY(-50%) translateX(100%);
    -o-transform: translateY(-50%) translateX(100%);
}


@keyframes slideInFromLeft {
    0% {
        transform: translateY(-50%) translateX(-100%);
        visibility: visible;
        -webkit-transform: translateY(-50%) translateX(-100%);
        -moz-transform: translateY(-50%) translateX(-100%);
        -ms-transform: translateY(-50%) translateX(-100%);
        -o-transform: translateY(-50%) translateX(-100%);
    }

    100% {
        transform: translateY(-50%) translateX(50%);
        visibility: visible;
        -webkit-transform: translateY(-50%) translateX(50%);
        -moz-transform: translateY(-50%) translateX(50%);
        -ms-transform: translateY(-50%) translateX(50%);
        -o-transform: translateY(-50%) translateX(50%);
    }
}

.animate-svg-from-left {
    animation: slideInFromLeft 1.5s ease forwards;
    -webkit-animation: slideInFromLeft 1.5s ease forwards;
}


@keyframes slideInFromRight {
    0% {
        transform: translateY(-50%) translateX(300%);
        visibility: visible;
        -webkit-transform: translateY(-50%) translateX(300%);
        -moz-transform: translateY(-50%) translateX(300%);
        -ms-transform: translateY(-50%) translateX(300%);
        -o-transform: translateY(-50%) translateX(300%);
    }

    100% {
        transform: translateY(-50%) translateX(50%);
        visibility: visible;
        -webkit-transform: translateY(-50%) translateX(50%);
        -moz-transform: translateY(-50%) translateX(50%);
        -ms-transform: translateY(-50%) translateX(50%);
        -o-transform: translateY(-50%) translateX(50%);
    }
}

.animate-svg-from-right {
    animation: slideInFromRight 1.5s ease forwards;
    -webkit-animation: slideInFromRight 1.5s ease forwards;
}


@keyframes slideInFromTop {
    0% {
        transform: translateY(-150%) translateX(50%);
        visibility: visible;
        -webkit-transform: translateY(-150%) translateX(50%);
        -moz-transform: translateY(-150%) translateX(50%);
        -ms-transform: translateY(-150%) translateX(50%);
        -o-transform: translateY(-150%) translateX(50%);
    }

    100% {
        transform: translateY(-50%) translateX(50%);
        visibility: visible;
        -webkit-transform: translateY(-50%) translateX(50%);
        -moz-transform: translateY(-50%) translateX(50%);
        -ms-transform: translateY(-50%) translateX(50%);
        -o-transform: translateY(-50%) translateX(50%);
    }
}

.animate-svg-from-top {
    animation: slideInFromTop 1.5s ease forwards;
    -webkit-animation: slideInFromTop 1.5s ease forwards;
}


@keyframes slideInFromBottom {
    0% {
        transform: translateY(200%) translateX(50%);
        visibility: visible;
        -webkit-transform: translateY(200%) translateX(50%);
        -moz-transform: translateY(200%) translateX(50%);
        -ms-transform: translateY(200%) translateX(50%);
        -o-transform: translateY(200%) translateX(50%);
    }

    100% {
        transform: translateY(-50%) translateX(50%);
        visibility: visible;
        -webkit-transform: translateY(-50%) translateX(50%);
        -moz-transform: translateY(-50%) translateX(50%);
        -ms-transform: translateY(-50%) translateX(50%);
        -o-transform: translateY(-50%) translateX(50%);
    }
}

.animate-svg-from-bottom {
    animation: slideInFromBottom 1.5s ease forwards;
    -webkit-animation: slideInFromBottom 1.5s ease forwards;
}


.svg-object.second {
    animation-delay: .2s;
    z-index: -1;
}

.svg-object.third {
    animation-delay: 1.1s;
    z-index: 2;
}

.svg-object.fourth {
    animation-delay: 1.3s;
    z-index: 3;
}

.svg-object.fifth {
    animation-delay: 1.3s;
    z-index: 4;
}

.svg-object.sixth {
    animation-delay: 3.2s;
    z-index: 5;
}


/* Thanks for register page -> text animation */
@media screen and (max-width: 36em) and (orientation: portrait) {

}

/*  to trzebe ustawić na piechotę*/
/* Dla każdego breakpointu i każdej animacji - >=1400px  */
/* @media screen and (min-width:87.5rem) and (orientation:landscape) { */
.text-object {
    position: absolute;
    visibility: hidden;
    text-align: left;
}

.object-fade-reg-page-txt {
    top: 6%;
    left: 11%;
    font-size: 1.25rem;
    will-change: transform;
    width: 10rem;
    height: 4rem;
    margin: 0;
}

.object-fade-reg-page-txt2 {
    top: 10%;
    left: 66%;
    line-height: 2.3rem;
    font-size: 2.5rem;
    will-change: transform;
    width: 12rem;
    height: 5rem;
    margin: 0;
}

.object-fade-reg-page-txt2 span {
    font-size: 1.4rem;
    padding-left: 1.3rem;
}

.object-fade-reg-page-txt3 {
    top: 63.5%;
    left: 8%;
    font-size: .75rem;
    will-change: transform;
    width: 26rem;
    height: 3rem;
    margin: 0;
}

/* } */
.fade-in-txt {
    animation: fade-in-txt 2s ease-in forwards;
    -webkit-animation: fade-in-txt 2s ease-in forwards;
}

@keyframes fade-in-txt {
    0% {
        visibility: visible;
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}

.delayAnimObject4s {
    animation-delay: 2s;
}


/* Empty basket page -> animation    */
.svg-object-fade {
    position: absolute;
    visibility: hidden;
    top: 0%;
    right: 0%;
    will-change: transform;
    width: 100%;
    height: 100%;

}

.svg-object-fade.thirdFade {
    animation-delay: 3.4s;
    z-index: 2;
}

.fade-in-out {
    opacity: 0;
    animation: fade-in .7s ease-in forwards;
    animation-iteration-count: 2;
    -webkit-animation: fade-in .7s ease-in forwards;
    -webkit-animation-iteration-count: 2;
}


@keyframes fade-in {
    100% {
        visibility: visible;
        opacity: 1;
    }
}


/* Thanks for shoping page -> text animation */
.thanksForShoping_1_object {
    animation-delay: .5s;
}

.thanksForShoping_2_object {
    animation-delay: .5s;
    z-index: 2;
}

.thanksForShoping_3_object {
    animation-delay: 1.5s;
    z-index: 1;
}

.thanksForShoping_4_object {
    animation-delay: 4s;
}


.object-fade-shop-page-txt {
    top: 24%;
    left: 44%;
    font-size: 2.25rem;
    will-change: transform;
    width: 26rem;
    height: 4rem;
    margin: 0;
}

.object-fade-shop-page-txt2 {
    top: 31.5%;
    left: 54.5%;
    font-size: 1.40rem;
    will-change: transform;
    width: 18rem;
    height: 4rem;
    margin: 0;
}


.object-fade-emptybasket-page-txt {
    top: 44%;
    left: 35%;
    font-size: 2.25rem;
    will-change: transform;
    width: 26rem;
    height: 4rem;
    margin: 0;
}

.object-fade-emptybasket-page-txt2 {
    top: 52%;
    left: 46%;
    font-size: 1.40rem;
    will-change: transform;
    width: 18rem;
    height: 4rem;
    margin: 0;
}


/* __________________________________________________ADMIN___________________________________ */

.widthRoleInAdmin {
    min-width: 17rem;
}

@media screen and (min-width: 85em) and (orientation: landscape) {
    .noVisibleScrollInAdmin {

        position: sticky !important;
        top: 7rem;
        display: block !important;
        height: calc(100vh - 7rem);
        padding-left: .25rem;
        margin-left: -.25rem;
        overflow-y: auto;
        scrollbar-width: none;
    }
}


.bgAdmin {

    /* background: rgb(255,253,155);
    background: linear-gradient(130deg, rgba(255,253,155,1) 18%, rgba(255,222,109,1) 48%, rgba(255,253,155,1) 85%);
    background: url(/assets/img/adminBg.svg); */


    background-image: url('/tpl/assets/img/adminBg.svg'), linear-gradient(130deg, rgba(255, 253, 155, 1) 18%, rgba(255, 222, 109, 1) 48%, rgba(255, 253, 155, 1) 85%);
    /* background-repeat: no-repeat; */

}


@media screen and (max-width: 36em) and (orientation: portrait) {
    .adminTable {
        border: 0;
    }

    .adminTable thead {
        display: none;
    }

    .adminTable tr {
        border-bottom: 3px solid #ddd;
        display: block;

    }

    .adminTable td {

        display: block;
        font-size: .8em;
        text-align: right;
    }

    .adminTable td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }

    .adminTable td:last-child {
        border-bottom: 0;
    }
}


.ble:target {
    padding-top: 190px !important;
    margin-top: -190px !important;
}


.bgMenuAdmin {
    /* background-color: #331817a9; */
    background-color: #603c39;
}


.navbar-toggler:focus {
    box-shadow: none;
}


/* ___________________________distributorAdmin_______________________________ */

#distributorAdmin {


    .bgAdmin {
        background-image: url('/tpl/assets/img/adminBg.svg'), linear-gradient(130deg, rgb(166, 222, 158) 18%, rgb(156, 189, 144) 48%, rgb(224, 239, 222) 85%);
    }

    .bgMenuAdmin {
        background-color: #0a3821;
    }

}


.w-5 {
    width: 5% !important;
    height: auto !important;
}


.w-10 {
    width: 10% !important;
    height: auto !important;
}

.w-20 {
    width: 20% !important;
    height: auto !important;
}

.w-33 {
    width: 33% !important;
    height: auto !important;
}


.w-40{
    width: 40% !important;
    height: auto !important;
}



.w-80 {
    width: 80% !important;
    height: auto !important;
}