.navbar-badge {
    font-size: .7rem;
    font-weight: 300;
    padding: 2px 4px;
    position: relative;
    right: 9px;
    top: -15px;
}

.header-cart {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.header-cart-info {
    margin: 0 0 0 6px;
    transition: background-color .3s ease-in-out;
    white-space: nowrap;
    text-align: left;
}

.header-cart-cost {
    font-size: .75rem;
    line-height: 1rem;
    display: block;
}

.header-delivery-place {
    font-size: .75rem;
    line-height: 1rem;
    display: block;
}

.max-15-ch {
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.max-30-ch {
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-cart-items {
    font-size: .625rem;
    line-height: .75rem;
    display: block;
}

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

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

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

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

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

.font-light {
    font-weight: 300 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

textarea:focus,
input:focus {
    box-shadow: 0 0 0 0 !important;
    outline: 0 !important;
}

/* textarea:read-only,
input:read-only {
    background-color: white !important
} */


/* The moving element */

.loading::after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    /* Adding animation */
    animation: loading 0.8s infinite;
}


/* Loading Animation */

@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}

input {
    font-size: 20px;
    padding: 6px;
}

input[type=number]::-webkit-inner-spin-button {
    all: unset;
    min-width: 21px;
    min-height: 45px;
    margin: 17px;
    padding: 0px;
    background-image: linear-gradient(to top, transparent 0px, transparent 16px, #fff 16px, #fff 26px, transparent 26px, transparent 35px, #000 35px, #000 36px, transparent 36px, transparent 40px), linear-gradient(to right, transparent 0px, transparent 10px, #000 10px, #000 11px, transparent 11px, transparent 21px);
    transform: rotate(90deg) scale(0.8, 0.9);
    cursor: pointer;
}

.movie--isloading {
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
}

.movie--isloading .loading-image {
    height: 100%;
    background-image: linear-gradient(90deg, #ececec 0px, #f4f4f4 40px, #ececec 80px);
    background-size: 250px;
    animation: shine-loading-image 2s infinite ease-out;
}

.movie--isloading .loading-content {
    background: #f7f7f7;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.movie--isloading .loading-content .loading-text-container {
    flex-basis: 100%;
}

.movie--isloading .loading-content .loading-main-text {
    height: 10px;
    width: 65%;
    margin-bottom: 10px;
    background: #ececec;
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    border-radius: 10px;
    animation: shine-loading-container-items 2s infinite ease-out;
}

.movie--isloading .loading-content .loading-sub-text {
    height: 10px;
    width: 50%;
    background: #ececec;
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    border-radius: 10px;
    animation: shine-loading-container-items 2s infinite ease-out;
}

.movie--isloading .loading-content .loading-btn {
    width: 60px;
    height: 25px;
    background: #ececec;
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    border-radius: 3px;
    animation: shine-loading-container-items 2s infinite ease-out;
}

.skeleton {
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    border-radius: 3px;
    animation: shine-loading-container-items 2s infinite ease-out;
}

@keyframes shine-loading-image {
    0% {
        background-position: -32px;
    }

    40%,
    100% {
        background-position: 208px;
    }
}

@keyframes shine-loading-container-items {
    0% {
        background-position: -100px;
    }

    40%,
    100% {
        background-position: 140px;
    }
}

.container-custom {
    max-width: 1400px !important;
  }

  .card-header{
    background-color: #fff !important;
}
.card-footer{
    background-color: #fff !important;
}

.modal-header{
    background-color: #fff !important;
}
.modal-footer{
    background-color: #fff !important;
}