body{
    overflow:hidden;
}
/*#region override bootstrap styles*/
/*#region modals*/
.modal-header {
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

.modal-footer {
    border-top: none;
}

.modal-title {
    width: 96%;
    padding-left: 4%;
}

.modal-header .btn-close {
    font-size: 1rem;
    padding: 8px;
    width: 4%;
}
/*#endregion*/
/*#endregion*/

a, a > p > span {
    text-decoration: none !important;
}

    a:hover, a > p > span:hover {
        text-decoration: underline;
    }


.ml-auto {
    margin-left: auto !important;
    display: flex;
}


.form-select{
    font-size:12px;
}

/*#region loading-ACS*/
.loading-ACS {
    position: relative;
    margin: 0 auto;
    margin-top: calc(50vh - 140px);
    text-align: center;
}

.loading-text {
    margin: 0;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.6;
    letter-spacing: 0.0075em;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 16px;
    animation: pulse 1.5s infinite;
}

.puzzle-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    overflow: visible;
}

    .puzzle-container.error .puzzle-piece {
        animation: separateToFloor 1.5s ease-in-out forwards;
    }

.puzzle-piece {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: pieceAnimation 2s ease-in-out infinite;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform-origin: center;
}

    .puzzle-piece.red {
        background-color: #d72025;
    }

    .puzzle-piece.orange {
        background-color: #f7a01b;
    }

    .puzzle-piece.blue {
        background-color: #2a5ba9;
    }

    .puzzle-piece.green {
        background-color: #aed23e;
    }

    .puzzle-piece.yellow {
        background-color: #ffeb3b;
    }

    .puzzle-piece:nth-child(1) {
        top: 16px;
        left: 16px;
    }

    .puzzle-piece:nth-child(2) {
        top: 16px;
        left: 57px;
    }

    .puzzle-piece:nth-child(3) {
        top: 55px;
        left: 15px;
    }

    .puzzle-piece:nth-child(4) {
        top: 55px;
        left: 57px;
    }

    .puzzle-piece:nth-child(5) {
        top: 35px;
        left: 40px;
    }

.puzzle-container.error .puzzle-piece {
    animation: separateToFloor 1.5s ease-in-out forwards;
}

@keyframes separateToFloor {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: translate(calc(var(--index) * 30px), calc(var(--index) * -20px)) rotate(calc(var(--index) * 15deg));
        opacity: 1;
    }

    100% {
        transform: translate(calc(var(--index) * 80px), calc(100px + var(--index) * 20px)) rotate(calc(var(--index) * 45deg));
        opacity: 0;
    }
}

@keyframes pieceAnimation {
    0% {
        transform: rotate(0deg) translate(0, 0);
        opacity: 0;
    }

    25% {
        transform: rotate(90deg) translate(20px, -20px);
        opacity: 1;
    }

    50% {
        transform: rotate(180deg) translate(0, 0);
        opacity: 1;
    }

    75% {
        transform: rotate(270deg) translate(-20px, 20px);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translate(0, 0);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}
/*#endregion*/