:root, .sis-theme-light {
    --start-animation-background: #fdfdfd;
    --loader-background: #e9e9e9;
    --loaderBar-background: #34537f;
    --start-animation-visible: block;
    --start-animation-dark-visible: none;
}
.sis-theme-dark {
    --start-animation-background: #17202A;
    --loader-background: #283852;
    --loaderBar-background: #A6CFED;
    --start-animation-visible: none;
    --start-animation-dark-visible: block;
}

body {
    margin: 0px;
    background: var(--start-animation-background);
    height: 100%;
}

    /*grandezza elementi del sito*/
    body.sis-zoom-small {
        zoom: 0.9;
    }

    body.sis-zoom-big {
        zoom: 1.1;
    }

body::-webkit-scrollbar {
    display: none;
}

.sis-app-animation-start .sis-app-animation-logo {
    width: 80px;
    height: 100px;
    background-repeat: no-repeat;
}

.sis-app-animation-logo-display {
    display: var(--start-animation-visible);
}

.sis-app-animation-logo-dark-display {
    display: var(--start-animation-dark-visible);
}

.sis-app-animation-start {
    background: var(--start-animation-background);
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    box-sizing: border-box;
    row-gap: 20px;
    z-index: 110001;
    position: absolute;
    top: 0;
    /*animation: sis-keyf-loading-start 0.5s forwards;*/
}

    .sis-app-animation-start.sis-app-animation-end {
        animation: sis-keyf-loading-end 0.5s forwards;
    }


    .sis-app-animation-start .sis-app-loader {
        width: 200px;
        position: relative;
        padding: 3px;
        background: var(--loader-background);
    }

        .sis-app-animation-start .sis-app-loader:before {
            content: '';
            border: 1px solid var(--loader-background);
            border-radius: 10px;
            position: absolute;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
        }

        .sis-app-animation-start .sis-app-loader .sis-app-loader-bar {
            position: absolute;
            border-radius: 10px;
            top: 0;
            left: 0px;
            right: 2px;
            bottom: 0;
            left: 0;
            background: var(--loaderBar-background);
            width: calc(100% * 2/8);
            animation: sis-keyf-loading-bar 1.5s 0.3s ease-in-out infinite;
        }

.sisst0 {
    fill: #A71930;
}

.sisst1 {
    fill: #FFFFFF;
}

@keyframes sis-keyf-loading-bar {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(calc(3*100%), 0)
    }
}


@keyframes sis-keyf-loading-start {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 100;
        transform: scale(100%);
    }
}

@keyframes sis-keyf-loading-end {
    0% {
        opacity: 100;
        transform: scale(100%);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.sis-progress-wait {
    background: var(--start-animation-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    box-sizing: border-box;
    row-gap: 20px;
    margin-top: 20px;
}

.sis-progress-wait.sis-progress-wait-anim-end {
    animation: sis-keyf-loading-end 0.5s forwards;
}

.sis-progress-wait .sis-progress-wait-loader {
    width: 100%;
    position: relative;
    padding: 3px;
    background: var(--loader-background);
}

.sis-progress-wait .sis-progress-wait-loader:before {
    content: '';
    border: 1px solid var(--loader-background);
    border-radius: 10px;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
}

.sis-progress-wait .sis-progress-wait-loader .sis-progress-wait-loader-bar {
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0px;
    right: 2px;
    bottom: 0;
    left: 0;
    background: var(--loaderBar-background);
    width: calc(100% * 2/8);
    animation: sis-keyf-loading-bar 1.5s 0.3s ease-in-out infinite;
}

.sis-progress-adv {
    background: var(--start-animation-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    box-sizing: border-box;
    row-gap: 20px;
    margin-top: 20px;
}

.sis-progress-adv .sis-progress-adv-loader {
    width: 350px;
    position: relative;
    padding: 3px;
    background: var(--loader-background);
}

.sis-progress-adv .sis-progress-adv-loader:before {
    content: '';
    border: 1px solid var(--loader-background);
    border-radius: 10px;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
}

.sis-progress-adv .sis-progress-adv-loader .sis-progress-adv-loader-bar {
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0px;
    right: 2px;
    bottom: 0;
    left: 0;
    background: var(--loaderBar-background);
    width: 0%;
    transition: all 1s ease;
}

.sis-progress-adv .sis-progress-adv-text {
    text-align: center;
    margin-top: 2px;
    color: var(--default-color);
}

.sis-skeleton {
    display: none;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
}

.sis-skeleton .sis-skeleton-bar {
    display: flex;
    column-gap: 16px;
}

.sis-skeleton .sis-skeleton-bar .sis-skeleton-button {
    width: 80px;
    height: 28px;
}

.sis-skeleton .sis-skeleton-bar .sis-skeleton-help {
    margin-left: auto;
    margin-right: 22px;
    margin-top: 8px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    order: 5;
}

.sis-skeleton .sis-skeleton-body {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

    .sis-skeleton .sis-skeleton-body .sis-skeleton-text {
        margin-bottom: 15px;
        font-size: revert;
        font-weight: revert;
    }

.sis-skeleton .sis-skeleton-body .sis-skeleton-inner1 {
    width: 70%;
    height: 28px;
}

.sis-skeleton .sis-skeleton-body .sis-skeleton-inner2 {
    width: 95%;
    height: 28px;
}

.sis-skeleton .sis-skeleton-body .sis-skeleton-inner3 {
    width: 75%;
    height: 28px;
}

.sis-skeleton .sis-skeleton-body .sis-skeleton-inner4 {
    width: 85%;
    height: 28px;
}

.sis-skeleton .sis-skeleton-hide-text, .sis-skeleton .sis-skeleton-hide-text-inner {
    background: var(--skeleton-background);
    color: transparent;
    position: relative;
    overflow: hidden;
}

.sis-skeleton .sis-skeleton-hide-text::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0;
    height: 50px;
    width: 50px;
    background: linear-gradient(to right, var(--skeleton-prog1-background) 25%, var(--skeleton-prog2-background) 50%, var(--skeleton-prog3-background) 100%);
    animation-name: sis-keyf-skeleton-load;
    animation-duration: 2s;
    animation-delay: 0.25s;
    animation-iteration-count: infinite;
    filter: blur(5px);
    will-change: left;
}

.sis-skeleton .sis-skeleton-hide-text-inner::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0;
    height: 50px;
    width: 50px;
    background: linear-gradient(to right, var(--skeleton-prog1-background) 25%, var(--skeleton-prog2-background) 50%, var(--skeleton-prog3-background) 100%);
    animation-duration: 2s;
    animation-delay: 0.25s;
    animation-iteration-count: infinite;
    filter: blur(5px);
    will-change: left;
}

.sis-skeleton .sis-skeleton-body .sis-skeleton-hide-text-inner:nth-child(n+6) {
    opacity: 0.5;
}

.sis-skeleton .sis-skeleton-body .sis-skeleton-hide-text-inner:nth-child(n+8) {
    opacity: 0.4 !important;
}

.sis-skeleton .sis-skeleton-inner1::before, .sis-skeleton .sis-skeleton-inner2::before,
.sis-skeleton .sis-skeleton-inner3::before, .sis-skeleton .sis-skeleton-inner4::before {
    animation-name: sis-keyf-skeleton-load-inner;
}

@keyframes sis-keyf-skeleton-load {
    100% {
        transform: translateX(calc(2*100%));
    }
}

@keyframes sis-keyf-skeleton-load-inner {
    100% {
        transform: translateX(calc(35*100%));
    }
}