/* onstep */
.button-export,
.button-createAll,
.onstep-item {
    flex-shrink: 0;
}
.main-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.onstep-item {
    width: max-content;
}
.nav-item.red {
    border: 1px solid red;
}
.nav-item.nav-divider {
    border-top: 1px solid red;
    height: 0px;
}
.nav-item.fattura {
    display: none;
}
.nav-item.fattura.visible {
    display: block;
}

.app-body {
    border-top: 40px red solid;
}

#loader-onstep {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #00000070;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    &.hidden {
        display: none;
    }

    /* HTML: <div class="loader"></div> */
    .loader {
        width: 50px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 8px solid #ffffff;
        animation: l20-1 0.8s infinite linear alternate,
            l20-2 1.6s infinite linear;
    }
}

@keyframes l20-1 {
    0% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%
        );
    }
    12.5% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%
        );
    }
    25% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
    50% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    62.5% {
        clip-path: polygon(
            50% 50%,
            100% 0,
            100% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    75% {
        clip-path: polygon(
            50% 50%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    100% {
        clip-path: polygon(
            50% 50%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            0% 100%
        );
    }
}
@keyframes l20-2 {
    0% {
        transform: scaleY(1) rotate(0deg);
    }
    49.99% {
        transform: scaleY(1) rotate(135deg);
    }
    50% {
        transform: scaleY(-1) rotate(0deg);
    }
    100% {
        transform: scaleY(-1) rotate(-135deg);
    }
}

#onstep-modal,
#invoice {
    position: fixed;
    z-index: -100;
    opacity: 0;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
#onstep-modal.open,
#invoice.open {
    z-index: 999999;
    opacity: 1;
}

html.open-modal {
    overflow: hidden;
}

/* onstep */
.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-left: 50%;
    margin-top: 17%;
}
.loader-center {
    margin: 0 50%;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #3371c9;
    border-color: #3371c9 transparent #3371c9 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#tableLabel {
    text-align: center;
    margin: 0 auto;
    width: 120%;
}

.tr-header,
.tr-header th {
    background-color: #eceff3 !important;
}

.first-column {
    margin: 0 auto !important;
    text-align: center !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

#crudTable th,
#crudTable td {
        display: table-cell !important;

}

#crudTable_wrapper > .row:nth-child(2){
overflow-x: scroll;
}

#crudTable_wrapper #crudTable_processing{
    left: 81px;
    width: calc(100% + 40px);
}


#crudTable_wrapper > .row:nth-child(2) > .col-sm-12{
    position: static;
}