:root {
    --ls-loading-color: var(--ls-form-background-color);
}
.ls-loading {
    --ls-loading-color: var(--ls-form-background-color);
    pointer-events: none;
    color: transparent;
}
.ls-loading .ls-box-scrollable-y,
.ls-loading .ls-box-scrollable-x {
    overflow: hidden;
}
.ls-loading h1:not(.ls-block-header *),
.ls-loading h2:not(.ls-block-header *),
.ls-loading h3:not(.ls-block-header *),
.ls-loading h4:not(.ls-block-header *),
.ls-loading h5:not(.ls-block-header *),
.ls-loading span,
.ls-loading p,
.ls-loading img,
.ls-loading .ls-button,
.ls-loading .ls-button-style,
.ls-loading .ls-button-full-width,
.ls-loading .ls-block-carousel-control-bar,
.ls-loading .ls-bx-tag,
.ls-loading .ls-div-loader-normal,
.ls-loading .opac-global-template-component-comment-bubble,
.ls-loading .calendar,
.ls-loading .opac-global-template-component-notice-availability-dot{
    position: relative;
    overflow: hidden;
    color: transparent;
    border-color: var(--ls-loading-color);
    user-select: none;
    cursor: default;
    border: 2px solid;
    opacity: 70%;
    text-shadow: none;
    background: none;
    background-image: none;
    background-color: var(--ls-loading-color);
}

.ls-owl-carousel-loading {
    position: relative;
    display:flex;
}
  
.ls-owl-carousel-loading > * {
    flex: 1;
    position: relative;
    display: flex;
}
.ls-loading .calendar > em{
    background: none;
    background-image: none;
    background-color: var(--ls-loading-color);
    color: transparent;
    text-shadow: none
}
.ls-loading .opac-global-template-medal-ribbon {
    background-color: var(--ls-loading-color);
}
.ls-loading .opac-global-template-component-comment-bubble::before{
    display: none;
}
.ls-loading img {
    margin: 0.5rem;
}
.ls-loading .opac-global-template-star-full-color{
    color: var(--ls-loading-color);
}
.ls-loading .ls-block-content {
    border-color: var(--ls-loading-color);
    color: transparent;
}
.ls-loading h1:not(.ls-block-header *),
.ls-loading h2:not(.ls-block-header *),
.ls-loading h3:not(.ls-block-header *),
.ls-loading h4:not(.ls-block-header *),
.ls-loading h5:not(.ls-block-header *),
.ls-loading span,
.ls-loading p {
    width: max-content;
    max-width: 100%;
}


.ls-loading .ls-box-banner:before,
.ls-loading .ls-box-puce:before,
.ls-loading .ls-div-loader:before {
    content: '';
    background-color: var(--ls-loading-color);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 70%;
    z-index: 1;
}
.ls-loading .ls-box-puce:before {
    border-radius: 50%;
}
.ls-loading .ls-box-banner,
.ls-loading .ls-box-puce,
.ls-loading .ls-div-loader{
    position: relative;
    overflow: hidden;
    color: transparent;
    user-select: none;
    cursor: default;
}
.ls-loading h1:not(.ls-block-header *):after,
.ls-loading h2:not(.ls-block-header *):after,
.ls-loading h3:not(.ls-block-header *):after,
.ls-loading h4:not(.ls-block-header *):after,
.ls-loading h5:not(.ls-block-header *):after,
.ls-loading img:after,
.ls-loading p:after,
.ls-loading span:after,
.ls-loading .ls-box-banner:after,
.ls-loading .ls-box-puce:after,
.ls-loading .ls-button::after,
.ls-loading .ls-button-style::after,
.ls-loading .ls-button-full-width::after,
.ls-loading .ls-block-carousel-control-bar:after,
.ls-loading .ls-bx-tag:after,
.ls-loading .opac-global-template-star-full-color:after,
.ls-loading .ls-div-loader-normal::after,
.ls-loading .opac-global-template-component-comment-bubble::after,
.ls-loading .calendar::after
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
    );
    animation: loading-anim 2s infinite;
    content: "";
    z-index: 1;
}
.ls-loading .calendar::after
{
    width: 100%;
    height: 100%;
    background:none;
    border-radius: unset;
    box-shadow: unset;
}
.ls-loading .calendar *::after, .ls-loading .calendar *::before, .ls-loading .calendar::before
{
    content: unset;
}

.delete-node-buttons.ls-loading {
    pointer-events: none;
    cursor: wait;
    opacity: 0.5;
}

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