* {
    min-width:0px;
}

body {
    /*-webkit-user-select: none;
    user-select: none;*/
}

.user-select-none {
    user-select: none;
}

.padding-0-75 {
    padding: 0.75rem;
}

button,
button:hover,
button:active,
button:focus {
    outline: none !important;
}

.hover-bg-color-light-gray:hover {
    background-color: #E1E1E1;
}

.textarea-none,
.textarea-none:hover,
.textarea-none:active,
.textarea-none:focus {
    outline: none !important;
    border: none;
}

.input-none,
.input-none:hover,
.input-none:active,
.input-none:focus,
.input-none:focus:hover,
.input-none:active:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-all {
    pointer-events: all !important;
}

.hover-bg-color-grey:hover {
    background-color: #dee2e6 !important;
}

.bg-color-505456 {
    background-color: #505456;
}

.bg-color-f5f5f5 {
    background-color: #f5f5f5;
}

.vertical-align-middle {
    vertical-align: middle;
}

.carousel-control-next,
.carousel-control-prev {
    opacity: 1 !important;
    width: 60px !important;
}

.carousel-control-prev-icon {
    width: 48px !important;
    height: 48px !important;
    padding: 2rem 1rem;
    border-radius: 5px;
    background-color: hsla(0, 0%, 45%, 0.6) !important;
    cursor: pointer;
}

.carousel-control-next-icon {
    width: 48px !important;
    height: 48px !important;
    padding: 2rem 1rem;
    border-radius: 5px;
    background-color: hsla(0, 0%, 45%, 0.6) !important;
    cursor: pointer;
}

#productGroup {
    transition: all ease .5s;
}

.scale-1-5 {
    scale: 1.5;
}

.object-position-rc {
    object-position: right center;
}

.transform-origin-left {
    transform-origin: left;
}

.underline {
    text-decoration: underline !important;
}

.mix-blend-multiply {
    mix-blend-mode: multiply;
}

.mix-blend-darken {
    mix-blend-mode: darken;
}

.box-shadow {
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2), 0 6px 14px 0 rgba(0, 0, 0, 0.19);
}

.strike-through {
    text-decoration: line-through;
}


.shadow-box-bottom {
    box-shadow: 0px 15px 10px -15px #111;
}

.shadow-box-bottom-light {
    box-shadow: 0px 15px 10px -15px #ccc;
}

.hover-color-blue:hover {
    color: var(--blue) !important;
}

.hover-color-menu:hover {
    color: var(--menu-hover-color) !important;
}

.hover-color-gray:hover {
    color: #6c7985 !important;
}

.hover-color-white:hover {
    color: white !important;
}

.hover-color-orange:hover {
    color: #f87d00 !important;
}

.hover-bg-color-gray:hover,
.hover-bg-color-gray:hover .hover-bg-color-gray {
    background-color: #beb9b5 !important;
    border-color: #beb9b5 !important;
}

.hover-bg-color-white {
    background-color: #ffffff;
}

.hover-bg-color-white:hover {
    background-color: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
}


@media (min-width:1250px) {
    .hover-scale {
        transition: scale .2s ease;
    }

    .hover-scale-5 {
        transition: scale .2s ease;
    }

    .hover-scale-5:hover {
        scale: 1.05;
    }

    .hover-scale:hover {
        scale: 1.02;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

@media(min-width: 1200px) {
    .overflow-xl-hidden {
        overflow: hidden !important;
    }
}

.max-line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

@media (min-width:767px) {
    .max-line-1-responsive {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
}

.max-line-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.max-line-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.max-line-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.max-line-5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.max-line-7 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.max-line-8 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}

.max-line-9 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
}

.max-textwidth-responsive {
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

@media (max-width:399px) {
    .max-textwidth-responsive {
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
}

@media (min-width:400px) and (max-width:500px) {
    .max-textwidth-responsive {
        max-width: 250px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
}

@media (min-width:501px) and (max-width:550px) {
    .max-textwidth-responsive {
        max-width: 350px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
}

@media (min-width:551px) and (max-width:600px) {
    .max-textwidth-responsive {
        max-width: 400px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
}

@media (min-width:601px) and (max-width:650px) {
    .max-textwidth-responsive {
        max-width: 450px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
}

@media (min-width:651px) and (max-width:700px) {
    .max-textwidth-responsive {
        max-width: 500px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
}

@media (min-width:701px) and (max-width:750px) {
    .max-textwidth-responsive {
        max-width: 550px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
}

@media (min-width:576px) {
    .height-100-p-responsive {
        height: 100%;
    }
}

.max-textwidth-300 {
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.pr-60-px {
    padding-right: 60px;
}

.letter-spacing-0-9 {
    letter-spacing: .9px;
}

.opacity-0-15 {
    opacity: .15;
}

.opacity-0-3 {
    opacity: .3;
}

.opacity-0-5 {
    opacity: .5;
}

.opacity-0-8 {
    opacity: .8;
}

.opacity-1 {
    opacity: 1 !important;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

.font-family-kaushan {
    font-family: 'Kaushan Script', cursive;
}

.font-family-ubuntu {
    font-family: 'Ubuntu', sans-serif;
}

.font-family-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-family-koho {
    font-family: 'KoHo', sans-serif;
}

.font-family-open {
    font-family: 'Open Sans', sans-serif;
}

.font-family-righteous {
    font-family: 'Righteous', sans-serif;
}

.font-family-bonheur {
   font-family: "Bonheur Royale", cursive;
}

.font-family-momo {
    font-family: 'Momo Trust Display', sans-serif;
}

.border-dashed {
    border-style: dashed !important;
}

.border-dee2e6 {
    border: solid 1px #dee2e6 !important;
}

.border-dee2e6 {
    border: solid 1px #dee2e6 !important;
}

.border-blue {
    border-color:var(--blue);
}

.border-blue-button {
    border: solid var(--blue) 1px !important;
}

.border-orange {
    border: solid #f87d00 1px !important;
}

.border-red {
    border: solid red 1px !important;
}

.border-lightgray {
    border: solid #f0f0f0 1px;
}

.border-dadada {
    border: solid #dadada 1px;
}

.border-dadada-dashed {
    border: dashed #dadada 1px;
}

.border-hsla-grey {
    border: 1px solid #f4f4f4;
}

.border-bottom {
    border-bottom: solid 1px #e0e0e0 !important;
}

.border-bottom-blue {

    border-bottom: solid #77bed2 2px;
}

.border-bottom-gray-2 {
    border-bottom: solid #dee2e6 2px !important;
}

.border-bottom-gray {
    border-bottom: solid #6c7985 2px;
}

.border-gray {
    border: solid #dee2e6 2px !important;
}

.border-gray-1 {
    border: solid #dee2e6 1px !important;
}

.border-bottom-gray {
    border-bottom: solid #dee2e6 1px !important;
}

.border-bottom-gray-3 {
    border-bottom: solid #dee2e6 3px !important;
}

.border-top-gray {
    border-top: solid #dee2e6 1px !important;
}

.border-top-gray-2 {
    border-top: solid #dee2e6 2px !important;
}

.border-top-gray-3 {
    border-top: solid #dee2e6 3px !important;
}

.border-left-gray {
    border-left: solid #dee2e6 1px !important;
}

.border-left-gray-2 {
    border-left: solid #dee2e6 2px !important;
}

.border-right-gray {
    border-right: solid #dee2e6 1px !important;
}

.border-right-gray-2 {
    border-right: solid #dee2e6 2px !important;
}

.border-top-lightgray {
    border-top: solid #a4a4a4 1px !important;
}

.hover-border-grey:hover {
    border: solid #ced4da 1px !important;
}

.line-height-1 {
    line-height: .25rem;
}

.line-height-2 {
    line-height: .5rem;
}

.line-height-2-5 {
    line-height: .8rem;
}

.line-height-3 {
    line-height: 1.20rem;
}

.gap-1 {
    gap: .25rem;
}

.gap-2 {
    gap: .5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

.gap-5 {
    gap: 3rem;
}

@media (min-width: 1200px) {
  .width-xl-auto {
    width: auto !important;
  }
}

.width-auto {
    width:auto !important;
}

.width-10 {
    width: 10px;
}

.width-20 {
    width: 20px;
}

.width-30 {
    min-width: 30px;
    width: 30px;
}

.width-35 {
    width: 35px;
}

.width-40 {
    min-width: 40px;
    width: 40px;
}

.width-35 {
    width: 35px;
}

.width-50 {
    min-width: 50px;
    width: 50px;
}

.width-60 {
    width: 60px;
    min-width: 60px;
}

.width-70 {
    width: 70px;
}

.width-80 {
    width: 80px;
}

.width-100 {
    min-width: 100px;
    width: 100px;
}

.width-110 {
    width: 110px;
}

.width-120 {
    width: 120px;
}

.width-130 {
    width: 130px;
}

.width-140 {
    width: 140px;
}

.width-146 {
    width: 146px;
}

.width-323 {
    width: 323px;
}

.width-200 {
    width: 200px !important;
}

.max-width-200 {
    max-width: 200px;
}

.width-250 {
    width: 250px;
}

.width-220 {
    width: 220px;
}

.width-230 {
    width: 230px;
}

.width-280 {
    width: 280px;
}

.width-350 {
    width: 350px;
}

.width-66-p {
    width: 66.666666666666%;
}

.width-33-p {
    width: 33.333333333333%;
}

@media (min-width: 768px) {
    .width-md-15-p {
        width: 15%;
    }

    .width-md-35-p {
        width: 35%;
    }

    .width-md-100 {
        width: 100px !important;
    }
}

@media (min-width: 992px) {
    .width-lg-200 {
        width: 200px;
    }
}

.max-width-15-p {
    max-width: 15%;
}

.width-15-p {
    width: 15%;
}

.width-35-p {
    width: 35%;
}

.max-width-60-p {
    max-width: 60%;
}

.width-50-p {
    width: 50%;
}

.width-50-p-gap-2 {
    width: calc(50% - 0.5rem);
}

.width-100-p {
    width: 100%;
}

.min-width-40 {
    min-width: 40px;
}

.min-width-150 {
    min-width: 150px;
}

.min-width-170 {
    min-width: 170px;
}

.width-150 {
    width: 150px;
}

.height-420 {
    height: 420px;
}

.height-390 {
    height: 390px;
}

.height-385 {
    height: 385px;
}

.height-35 {
    height: 35px;
}

.min-height-35 {
    min-height: 35px;
}

.min-height-40 {
    min-height: 40px;
}

.height-425 {
    height: 425px;
}

.max-height-60 {
    max-height: 60px !important;
}

.max-height-63 {
    max-height: 63px;
}

.max-height-84 {
    max-height: 84px;
}

.height-1375 {
    height: 1375px;
}

.min-height-800 {
    min-height: 800px !important;
}

.min-height-1500 {
    min-height: 1500px !important;
}

.min-height-1600 {
    min-height: 1600px !important;
}

.height-1025 {
    height: 1025px !important;
}

.height-15 {
    height: 15px;
}

.height-20 {
    height: 20px;
}

.height-25 {
    height: 25px;
}

.height-30 {
    height: 30px;
}

.height-29 {
    height: 29px;
}

.height-30-vh {
    height: 30vh;
}

.height-50-vh {
    height: 50vh;
}

.bg-color-00004d {
    background-color: #EDEDED;
}

.txt-color-bluegreen {
    color: #0C5D6A;
}

.height-550 {
    height: 550px;
}

.height-600 {
    height: 600px !important;
}

.height-63 {
    height: 63px;
}

.height-86 {
    height: 86px;
}

.height-300 {
    height: 300px
}

.height-400 {
    height: 400px;
}

.height-364 {
    height: 364px;
}

.height-40 {
    height: 40px;
}

.height-35 {
    height: 35px;
}

.height-40-vh {
    height: 40vh;
}

.height-45-vh {
    height: 45vh;
}

.height-50 {
    height: 50px;
}

.height-58 {
    height: 58px !important;
}

.height-60 {
    height: 60px !important;
}

.height-70 {
    height: 70px;
}

.height-80 {
    height: 80px;
}

.height-90 {
    height: 90px;
}

.height-100 {
    height: 100px;
}

.height-500 {
    height: 500px;
}

.height-101 {
    height: 101px;
}

.height-106 {
    height: 106px;
}

.height-130 {
    height: 130px;
}

.height-150 {
    height: 150px;
}

.height-100-p {
    height: 100% !important;
}

.height-156 {
    height: 156px;
}

.height-180 {
    height: 180px;
}

.height-200 {
    height: 200px;
}

.height-220 {
    height: 220px;
}

.height-230 {
    height: 230px;
}

.height-240 {
    height: 240px;
}

.height-250 {
    height: 250px;
}

.height-466 {
    height: 466px;
}

.height-480 {
    height: 480px;
}

.height-7 {
    height: 7px !important;
}

.min-height-480 {
    min-height: 480px;
}

.font-size-0-5 {
    font-size: .5rem;
}

.font-size-0-6 {
    font-size: .6rem;
}

.font-size-0-65 {
    font-size: .65rem;
}

.font-size-0-7 {
    font-size: .7rem;
}

.font-size-0-85 {
    font-size: .85rem;
}

.font-size-0-8 {
    font-size: .8rem;
}

.font-size-0-9 {
    font-size: .9rem;
}

.font-size-1 {
    font-size: 1rem;
}

.font-size-1-1 {
    font-size: 1.1rem !important;
}

.font-size-1-2 {
    font-size: 1.2rem !important;
}

.font-size-1-3 {
    font-size: 1.3rem !important;
}

.font-size-1-4 {
    font-size: 1.4rem !important;
}

.font-size-1-5 {
    font-size: 1.5rem !important;
}

.font-size-1-6 {
    font-size: 1.6rem;
}

.font-size-1-7 {
    font-size: 1.7rem;
}

.font-size-1-8 {
    font-size: 1.8rem;
}

.font-size-1-9 {
    font-size: 1.9rem;
}

.font-size-2 {
    font-size: 2rem;
}

.font-size-2-1 {
    font-size: 2.1rem;
}

.font-size-2-2 {
    font-size: 2.2rem;
}

.font-size-2-3 {
    font-size: 2.3rem;
}

.font-size-2-4 {
    font-size: 2.4rem;
}

.font-size-2-5 {
    font-size: 2.5rem;
}

.font-size-14-px {
    font-size: 14px;
}

.font-size-auto-2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.font-size-auto-1-5 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.font-size-auto-1-2 {
    font-size: clamp(1.0rem, 3vw, 1.2rem);
}

.font-style-italic {
    font-style: italic;
}

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

.font-weight-600 {
    font-weight: 600;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-450 {
    font-weight: 450;
}

.bg-color-light-green {
    background-color: var(--light-green);
}

.bg-color-brown {
    background-color: #d26644;
}

.bg-color-grey-green {
    background-color: #a8bfbb;
}

.txt-color-red-1 {
    color: #e61b23;
}

.txt-color-mossgreen {
    color: #9a9a57;
}

.txt-color-light-green {
    color: var(--light-green);
}

.txt-color-check-green {
    color: var(--light-green);
}

.txt-color-gray-1 {
    color: #4a5568;
}

.bg-color-blue-1 {
    background-color: hsl(193, 50%, 65%, .3);
}

.txt-color-green {
    color: green;
}

.bg-color-green-1 {
    background-color: green;
}

.bg-color-green {
    background-color: hsla(120, 100%, 25%, .2)
}

.txt-color-gray-1 {
    color: #B2B2B2;
}

.txt-color-red {
    color: #dd7361;
}

.bg-color-red {
    background-color: hsla(0, 100%, 65%, 0.2);
}

.bg-color-424554 {
    background-color: #424554;
}

.bg-color-505050 {
    background-color: #505050;
}

.bg-color-hsl-grey {
    background-color: hsl(0, 0%, 90%);
}

.txt-color-hsl-grey {
    color: hsl(0, 0%, 90%);
}

.bg-color-hsla-grey {
    background-color: #f5f5f5;
}

.bg-color-hsla-o-gray {
    background-color: hsla(0, 0%, 100%, 0.5);
}

.bg-color-transparent {
    background-color: transparent;
}

.bg-color-blue {
    background-color: var(--blue) !important;
}

.bg-color-yellow {
    background-color: #ffb321;
}

.bg-color-black {
    background-color: #000;
}

.bg-color-footer {
    background-color: var(--footer-bg-color);
}

.bg-color-white {
    background-color: #fff !important;
}

.bg-color-darkgrey {
    background-color: #313131;
}

.bg-color-grey {
    background-color: var(--grey);
}

.bg-color-orange {
    background-color: var(--orange) !important;
}

.bg-color-light-gray {
    background: #f4f4f4;
}

.bg-color-gray {
    background-color: #B2B2B2;
}

.border-round-50-rem-right {
    border-top-right-radius: 50rem;
    border-bottom-right-radius: 50rem;
}

.border-right-round {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.border-left-round {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.border-top-round {
    border-top-right-radius: 6px !important;
    border-top-left-radius: 6px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.border-bottom-round {
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.border-left-0 {
    border-left: none;
}

.border-right-0 {
    border-right: none;
}

.border-color-gray {
    border-color: #B2B2B2;
}

.border-color-green {
    border-color: green;
}

.border-color-orange {
    border-color: #f87d00;
}

.border-color-blue {
    border-color: #77bed2 !important;
}

.border-color-blue:hover {
    border-color: #dee2e6 !important;
}

.border-width-0 {
    border-width: 0 !important;
}

@media(min-width: 1200px) {
    .bg-color-xl-white {
        background: #fff !important;
    }

    .border-bottom-xl-1 {
        border-bottom-width: 1px;
    }
}

@media(max-width: 1350px) {
    .hide-1350 {
        display: none !important;
    }
}

.border-top-1 {
    border-top-width: 1px;
}

.border-top-5 {
    border-top: 5px solid #dee2e6;
}

.border-width-1 {
    border-width: 1px !important;
}

.border-width-2 {
    border-width: 2px;
}

.border-width-3 {
    border-width: 3px;
}

.border-width-5 {
    border-width: 5px;
}

.border-bottom-1 {
    border-bottom-width: 1px;
}

.bg-color-gray-1 {
    background-color: #cccccc;
}

.bg-color-gray-2 {
    background-color: #f8f8f8 !important;
}

.bg-color-footer-white {
    background-color: #F0F0F0
}

.txt-color-inherit,
.txt-color-inherit:hover,
.txt-color-inherit:visited {
    color: inherit;
}

.txt-color-dee2e6 {
    color: #dee2e6;
}

.txt-color-6c7985 {
    color: #6c7985;
}

.txt-color-f4692c {
    color: #f4692c;
}

.txt-color-blue-1 {
    color: #77b1d2 !important;
}

.txt-color-blue {
    color: var(--blue) !important;
}

.txt-color-blue-2 {
    color: #0e72cf !important;
}

.txt-color-blue-3 {
    color: #3584e4 !important;
}

.txt-color-blue-ad {
    color:#465068 !important;
}

.txt-color-yellow {
    color: #ffb321;
}

.txt-color-black {
    color: #000 !important;
}

.txt-color-darkgray {
    color: #454545 !important;
}

.txt-color-footer {
    color: #1d2328;
}

.txt-color-footer-white {
    color: #F0F0F0
}

.txt-color-white {
    color: #fff !important;
}

.txt-color-grey {
    color: var(--grey) !important;
}

.txt-color-orange {
    color: var(--orange);
}

.txt-color-orange-ad {
    color: #daa14c;
}

.txt-color-blue-gls {
    color: #0217b3;
}

.txt-color-light-gray {
    color: #f0f0ef;
}

.txt-color-gray-1 {
    color: #cccccc;
}

.txt-color-cart-text {
    color: var(--cart-text-color);
}

.flex-grow-1 {
    flex-grow: 1;
}

.top-40- {
    top: -40px;
}

.top-25- {
    top: -25px;
}

.top-15- {
    top: -15px;
}

.top-12- {
    top: -12px;
}

.top-10- {
    top: -10px;
}

.top-5- {
    top: -5px;
}

.top-0 {
    top: 0px;
}

.top-5 {
    top: 5px;
}

.top-6 {
    top: 6px;
}

.top-7 {
    top: 7px;
}

.top-8 {
    top: 8px;
}

.top-9 {
    top: 9px;
}

.top-10 {
    top: 10px;
}

.top-15 {
    top: 15px;
}

.top-16 {
    top: 16px;
}

.top-17 {
    top: 17px;
}

.top-18 {
    top: 18px;
}

.top-19 {
    top: 19px;
}

.top-20 {
    top: 20px;
}

.top-60 {
    top: 60px;
}

.top-96 {
    top: 96px;
}

.top-100 {
    top: 100px;
}

.top-30 {
    top: 30px;
}

.top-320 {
    top: 320px;
}

.top-300 {
    top: 300px;
}

.top-360 {
    top: 360px;
}

.top-120 {
    top: 120px;
}

.top-100 {
    top: 100px;
}

.left-30 {
    left: 30px;
}

.left-300- {
    left: -300px;
}

.left-25- {
    left: -25px;
}

.left-20- {
    left: -20px;
}

.left-7- {
    left: -7px;
}

.left-5- {
    left: -5px;
}

.left-0 {
    left: 0;
}

.left-5 {
    left: 5px;
}

.left-6 {
    left: 6px;
}

.left-7 {
    left: 7px;
}

.left-8 {
    left: 8px;
}

.left-9 {
    left: 9px;
}

.left-10 {
    left: 10px;
}

.left-20 {
    left: 20px;
}

.right-0 {
    right: 0px;
}

.right-5 {
    right: 5px;
}

.right-6 {
    right: 6px;
}

.right-7 {
    right: 7px;
}

.right-8 {
    right: 8px;
}

.right-9 {
    right: 9px;
}

.right-10 {
    right: 10px;
}

.right-20 {
    right: 20px;
}

.right-40 {
    right: 40px;
}

.right-25 {
    right: 25px;
}

.right-55 {
    right: 55px;
}

.right-56 {
    right: 56px;
}

.right-57 {
    right: 57px;
}

.right-58 {
    right: 58px;
}

.right-59 {
    right: 59px;
}

.right-60 {
    right: 60px;
}

.right-62 {
    right: 62px;
}

.right-64 {
    right: 64px;
}

.right-66 {
    right: 66px;
}

.right-68 {
    right: 68px;
}

.right-142 {
    right: 142px;
}

.right-150 {
    right: 150px;
}

.right-90 {
    right: 90px;
}

.right-85 {
    right: 85px;
}

.right-80 {
    right: 80px;
}

.right-70 {
    right: 70px;
}

.right-100 {
    right: 100px;
}

.right-110 {
    right: 110px;
}

.right-120 {
    right: 120px;
}

.right-130 {
    right: 130px;
}

.right-140 {
    right: 140px;
}

.bottom-20 {
    bottom: 20px;
}

.bottom-10 {
    bottom: 10px;
}

.bottom-30 {
    bottom: 30px;
}

.right-30 {
    right: 30px;
}


.bottom-25- {
    bottom: -25px;
}

.bottom-0 {
    bottom: 0px !important;
}



.z-index-1- {
    z-index: -1;
}

.m-none {
    margin: 0 !important;
}

.z-index-1 {
    z-index: 1 !important;
}

.z-index-3 {
    z-index: 3;
}

.z-index-499 {
    z-index: 499 !important;
}


.z-index-500 {
    z-index: 500;
}

.z-index-9999 {
    z-index: 99999;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-text {
    cursor: text !important;
}

.ui-slider-handle,
.ui-slider-handle:focus,
.ui-slider-handle:active,
.ui-slider-handle:hover {
    width: 26px !important;
    height: 26px !important;
    background-color: var(--slider-color) !important;
    border-color: var(--slider-color) !important;
    top: -10px !important;
    outline: none !important;
}

#filter .custom-control-label::before {
    transform: scale(1.4);
}

#filter .custom-control-label::after {
    transform: scale(1.5);
}

.index-tervezd-ujra-font-size {
    font-size: 1.4rem;
}

.index-tervezd-ujra-button {
    top: 120px;
}

@media(max-width: 350px) {
    .index-tervezd-ujra-font-size {
        font-size: 1rem !important;
    }

    .index-tervezd-ujra-button {
        top: 90px;
    }
}

a.disabled {
    pointer-events: none;
    opacity: .5;
    cursor: not-allowed;
    text-decoration: none;

}

.top-image {
    background-color: #B2B2B2 !important;
}

/*ribbon START*/

@import url(https://fonts.googleapis.com/css?family=Lato:700);


/* common */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 7px 0;
    background-color: var(--ribbon-bg-color);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    font: 700 16px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center;
}

/* top left*/
.ribbon-top-left {
    top: -5px;
    left: -10px;
}

.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon-top-left::before {
    top: 0;
    right: 0;
}

.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}

.ribbon-top-left span {
    right: -25px;
    top: 39px;
    transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
    width: 35px !important;
    height: 100px !important;
    top: -18px;
    right: 0px;
}

.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}

.ribbon-top-right::before {
    top: 0;
    left: 0;
}

.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}

.ribbon-top-right span {
    left: -76px;
    top: 12px;
    width: 228px !important;
    padding: 20px 4px 17px 50px;
    transform: rotate(45deg);
}

.ribbon-top-right span i {
    transform: rotate(45deg);
    position: absolute;
    top: 20px;
    right: 119px;
    font-size: .8rem;
}

/* bottom left*/
.ribbon-bottom-left {
    bottom: -10px;
    left: -10px;
}

.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.ribbon-bottom-left::before {
    bottom: 0;
    right: 0;
}

.ribbon-bottom-left::after {
    top: 0;
    left: 0;
}

.ribbon-bottom-left span {
    right: -25px;
    bottom: 30px;
    transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
    bottom: -10px;
    right: -10px;
}

.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.ribbon-bottom-right::before {
    bottom: 0;
    left: 0;
}

.ribbon-bottom-right::after {
    top: 0;
    right: 0;
}

.ribbon-bottom-right span {
    left: -25px;
    bottom: 30px;
    transform: rotate(-225deg);
}

/*ribbon END*/

.swal2-close:active,
.swal2-close:focus,
.swal2-close:hover,
.swal2-close {
    border: none !important;
    outline-color: white !important;
    box-shadow: none !important;
}

#animate-square-1 {
    animation: animate-1 2s ease infinite;
}

#animate-square-2 {
    animation: animate-2 2s ease .2s infinite;
}

#animate-square-3 {
    animation: animate-3 2s ease .4s infinite;
}

@keyframes animate-1 {
    0% {
        top: 110px;
        left: 110px;
        right: 30px;
        bottom: 30px;
    }

    12.5% {
        top: 110px;
        left: 110px;
        right: 30px;
        bottom: 30px;
    }


    25% {
        top: 110px;
        left: 30px;
        right: 110px;
        bottom: 30px;
    }

    37.5% {
        top: 110px;
        left: 30px;
        right: 110px;
        bottom: 30px;
    }


    50% {
        top: 30px;
        left: 30px;
        right: 110px;
        bottom: 110px;
    }

    62.5% {
        top: 30px;
        left: 30px;
        right: 110px;
        bottom: 110px;
    }


    75% {
        top: 30px;
        left: 110px;
        right: 30px;
        bottom: 110px;
    }

    87.5% {
        top: 30px;
        left: 110px;
        right: 30px;
        bottom: 110px;
    }


    100% {
        top: 110px;
        left: 110px;
        right: 30px;
        bottom: 30px;
    }
}

@keyframes animate-2 {
    0% {
        top: 30px;
        left: 110px;
        right: 30px;
        bottom: 110px;
    }

    12.5% {
        top: 30px;
        left: 110px;
        right: 30px;
        bottom: 110px;
    }

    25% {
        top: 110px;
        left: 110px;
        right: 30px;
        bottom: 30px;
    }

    37.5% {
        top: 110px;
        left: 110px;
        right: 30px;
        bottom: 30px;
    }

    50% {
        top: 110px;
        left: 30px;
        right: 110px;
        bottom: 30px;
    }

    62.5% {
        top: 110px;
        left: 30px;
        right: 110px;
        bottom: 30px;
    }

    75% {
        top: 30px;
        left: 30px;
        right: 110px;
        bottom: 110px;
    }

    87.5% {
        top: 30px;
        left: 30px;
        right: 110px;
        bottom: 110px;
    }

    100% {
        top: 30px;
        left: 110px;
        right: 30px;
        bottom: 110px;
    }
}

@keyframes animate-3 {
    0% {
        top: 30px;
        left: 30px;
        right: 110px;
        bottom: 110px;
    }

    12.5% {
        top: 30px;
        left: 30px;
        right: 110px;
        bottom: 110px;
    }

    25% {
        top: 30px;
        left: 110px;
        right: 30px;
        bottom: 110px;
    }

    37.5% {
        top: 30px;
        left: 110px;
        right: 30px;
        bottom: 110px;
    }

    50% {
        top: 110px;
        left: 110px;
        right: 30px;
        bottom: 30px;
    }

    62.5% {
        top: 110px;
        left: 110px;
        right: 30px;
        bottom: 30px;
    }

    75% {
        top: 110px;
        left: 30px;
        right: 110px;
        bottom: 30px;
    }

    87.5% {
        top: 110px;
        left: 30px;
        right: 110px;
        bottom: 30px;
    }

    100% {
        top: 30px;
        left: 30px;
        right: 110px;
        bottom: 110px;
    }
}

.homepage__categories {
    font-weight: 400 !important;
}

@media(max-width:768px) {
    .carousel-item-left {
        width: 100% !important;
        height: 200px !important;
    }

    .carousel-item-left img {
        height: 200px !important;
    }

    .carousel-item-right {
        width: 100% !important;
        gap: .5rem !important;
        height: 172.39px;
    }

    .carousel-title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .carousel-name {
        font-size: 1rem !important;
    }
}

.carousel-name {
    font-size: 1.2rem;
}

.carousel-item-left {
    width: 66.666%;
}

.carousel-item-right {
    width: 33.333%;
    gap: 1rem;
}

.hover-bgcolor-blue:hover {
    background-color: #1967d2 !important;
    color: white;
}

@media (min-width:576px) {
    .modal-xl {
        max-width: 80% !important;
        width: 80% !important;
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.width-calc100-20 {
    width: calc(100% - 20px) !important;
}

.table-layout-fixed {
    table-layout: fixed;
}

.row-gap-1 {
    row-gap: 0.25rem;   
}

.row-gap-2 {
    row-gap: 0.5rem;   
}

.row-gap-3 {
    row-gap: 1rem;   
}

@media (min-width: 576px) {
  .border-sm-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .gap-sm-2 {
    gap: .5rem;
  }
}

@media (min-width: 768px) {
  .border-md-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .border-lg-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 1200px) {
  .border-xl-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 1200px) and (max-width: 1600px) {
  .max-line-3-1200-1600 {
    -webkit-line-clamp: 3 !important;
  }

  .height-90-1200-1600 {
    height: 90px !important;
  }
}