/* -------- POSIZIONAMENTI --------- */
.centerRelativeX {
    margin-left: auto;
    margin-right: auto;
}

.centerRelativeY {
    margin-top: auto;
    margin-bottom: auto;
}

.centerRelative {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.centerAbsolute_left_y {
    --absoluteX: 0;
    --absoluteY: 50%;
    --absoluteXTranslation: 0;
    --absoluteYTranslation: -50%;
}

.centerAbsolute_top_x {
    --absoluteX: 50%;
    --absoluteY: 0;
    --absoluteXTranslation: -50%;
    --absoluteYTranslation: 0;
}

.centerAbsolute_bottom_x {
    --absoluteX: 50%;
    --absoluteY: 100%;
    --absoluteXTranslation: -50%;
    --absoluteYTranslation: -100%;
}

.centerAbsolute_right_y {
    --absoluteX: 100%;
    --absoluteY: 50%;
    --absoluteXTranslation: -100%;
    --absoluteYTranslation: -50%;
}

.centerAbsolute_center {
    --absoluteX: 50%;
    --absoluteY: 0;
    --absoluteXTranslation: -50%;
    --absoluteYTranslation: 0;
}

.centerAbsolute {
    left: var(--absoluteX);
    top: var(--absoluteY);
    transform: translate(var(--absoluteXTranslation),var(--absoluteYTranslation));
}

/* -------- GRIGLIE DI POSIZIONAMENTO --------- */
.doubleColumns {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 85% 1fr;
}

/*LAMPEGGIO*/
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.blink_next_position {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
    background: #25b1b1d2 !important;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/*LAMPEGGIO*/
.screwRotation {
    animation: screwRotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
    -webkit-animation: screwRotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
}

.screwRotationCcw {
    animation: screwRotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite reverse;
    -webkit-animation: screwRotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite reverse;
}

@keyframes screwRotation-animation {
    0% {
        background-image: repeating-linear-gradient(-225deg, transparent 0%, transparent 10%, black 10%, black 20%);
    }

    100% {
        background-image: repeating-linear-gradient(-225deg, black 0%, black 10%, transparent 10%, transparent 20%);
    }
}

@-webkit-keyframes screwRotation-animation {
    0% {
        background-image: repeating-linear-gradient(-225deg, transparent 0%, transparent 10%, black 10%, black 20%);
    }

    100% {
        background-image: repeating-linear-gradient(-225deg, black 0%, black 10%, transparent 10%, transparent 20%);
    }
}

/*LAMPEGGIO*/
.rotation {
    transform-origin: 0 0;
    animation: rotation-animation 1s linear infinite;
    -webkit-animation: rotation-animation 1s linear infinite;
}

@keyframes rotation-animation {

    0% {
        transform: rotate(0deg) translate(-50%,-50%);
    }

    100% {
        transform: rotate(360deg) translate(-50%,-50%);
    }

}

@-webkit-keyframes rotation-animation {

    0% {
        transform: rotate(0deg) translate(-50%,-50%);
    }

    100% {
        transform: rotate(360deg) translate(-50%,-50%);
    }

}

.rotate {
    left: 50%;
    top: 50%;
    animation: rotate-animation linear 1s infinite;
    -webkit-animation: rotate-animation linear 1.5s infinite;
    font-size: 150% !important;
}

@keyframes rotate-animation {

    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }

}

@-webkit-keyframes rotate-animation {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/*EFFETTO VIBRAZIONE CON POSIZIONAMENTO ASSOLUTO CENTRATO */
.vibrateCalm {
    -webkit-animation: vibrateCalm 0.15s linear infinite;
    animation: vibrateCalm 0.15s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 300px;
    perspective: 300px;
}

@keyframes vibrateCalm {

    0.50%, 90% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }

    0.50%, 80% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }

    30%, 50%, 70% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }

    0.50%, 60% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }

}

.vibrate {
    -webkit-animation: vibrate 0.15s linear infinite;
    animation: vibrate 0.15s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 300px;
    perspective: 300px;
}

@keyframes vibrate {

    0.50%, 90% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }

    0.50%, 80% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }

    30%, 50%, 70% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }

    0.50%, 60% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }

}

/*EFFETTO BARRA CARICAMENTO*/
.progress_line, .progress_line:before {
    height: 100%;
    width: 100%;
    margin: 0;
}

.progress_line {
    background-color: #b3d4fc;
    display: -webkit-flex;
    display: flex;
}

.progress_line:before {
    background-color: #3f51b5;
    content: '';
    -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@-webkit-keyframes running-progress {

    0% {
        margin-left: 0px;
        margin-right: 100%;
    }

    50% {
        margin-left: 25%;
        margin-right: 0%;
    }

    100% {
        margin-left: 100%;
        margin-right: 0;
    }

}

@keyframes running-progress {

    0% {
        margin-left: 0px;
        margin-right: 100%;
    }

    50% {
        margin-left: 25%;
        margin-right: 0%;
    }

    100% {
        margin-left: 100%;
        margin-right: 0;
    }

}

@keyframes slide {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -120px 60px;
    }

}

#InfoBanner {
    margin-bottom: 10px;
    position: absolute;
    left: -15px;
    top: 115px;
    text-align: center;
    width: 100%;
}

.reversed {
    display: inline-block;
    padding: 0.3em;
    padding-left: 0.3em;
    margin-left: 0.8em;
    position: relative;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
    color: #fff;
    font-size: 15px;
    background-color: #ef5350;
}

.reversed:before, .reversed:after {
    content: '';
    width: 0;
    height: 0;
    right: -0.8em;
    position: absolute;
    top: 0;
    border-top: 0.8em solid #ef5350;
}

.reversed:after {
    top: auto;
    bottom: 0;
    border-top: none;
    border-bottom: 0.8em solid #ef5350;
}

.reversedRight:before, .reversedRight:after {
    border-right: 0.8em solid transparent;
    right: -0.8em;
}

.reversedRight {
    width: 17px;
    border-radius: 5px 0px 0px 5px;
    animation: tilt 2s infinite;
}

@keyframes tilt {

    0% {
        left: 0%;
    }

    50% {
        left: 9px;
    }

    100% {
        left: 0px;
    }

}

.reversedLeft {
    margin-left: 15px;
    border-radius: 0px 5px 5px 0px;
}

.reversedLeft:before, .reversedLeft:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.8em solid transparent;
    left: -0.8em;
    position: absolute;
}

.reversedLeft:after {
    top: auto;
    bottom: 0;
    border-top: 0.8em solid #ef5350;
    border-bottom: none;
}

.reversedLeft:before {
    bottom: auto;
    top: 0;
    border-bottom: 0.8em solid #ef5350;
    border-top: none;
}

.bgAnimation {
    background-color: #ef5350;
    background-image: linear-gradient( 45deg, #e57373 25%, transparent 25%, transparent 75%, #e57373 75%, #e57373 ),linear-gradient( -45deg, #e57373 25%, transparent 25%, transparent 75%, #e57373 75%, #e57373 );
    background-size: 60px 60px;
    animation: slide 4s infinite linear;
}

.Message {
    display: table;
    margin: 40px auto 0;
    background-color: #e44b4b;
    color: #fff;
    transition: all 0.2s ease;
    width: max-content;
    z-index: 9999;
    height: max-content;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

.Message-icon {
    display: table-cell;
    vertical-align: middle;
    width: 60px;
    padding: 30px;
    text-align: center;
    background-color: rgb(0 0 0 / 41%);
    font-size: 5rem;
}

.Message-body {
    display: table-cell;
    vertical-align: middle;
    padding: 1rem;
}

.Message-button {
    position: relative;
    margin: 15px 5px -10px;
    background-color: #0808087d;
    box-shadow: 0 3px black;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    font-family: 'Source Sans Pro';
    color: #fff;
    outline: none;
    cursor: pointer;
}

.Message-button:hover {
    background-color: #0000007d;
}

.Message-close {
    position: absolute;
    background-color: rgba(black, 0.3);
    color: #fff;
    border: none;
    outline: none;
    font-size: 20px;
    right: 5px;
    top: 5px;
    opacity: 0;
    cursor: pointer;
}

.notification-box {
    /* position: absolute; */
    z-index: 99;
    /* top: 11rem; */
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
}

.notification-bell {
    animation: bell 1s 1s both infinite;
    float: right;
}

.notification-bell * {
    display: block;
    margin: 0 auto;
    background-color: red;
    box-shadow: 0px 0px 15px white;
}

.bell-top {
    width: 6px;
    height: 6px;
    border-radius: 3px 3px 0 0;
}

.bell-middle {
    width: 25px;
    height: 25px;
    margin-top: -1px;
    border-radius: 12.5px 12.5px 0 0;
}

.bell-bottom {
    position: relative;
    z-index: 0;
    width: 32px;
    height: 2px;
}

.bell-bottom::before,

.bell-bottom::after {
    content: '';
    position: absolute;
    top: -4px;
}

.bell-bottom::before {
    left: 1px;
    border-bottom: 4px solid red;
    border-right: 0 solid transparent;
    border-left: 4px solid transparent;
}

.bell-bottom::after {
    right: 1px;
    border-bottom: 4px solid red;
    border-right: 4px solid transparent;
    border-left: 0 solid transparent;
}

.bell-rad {
    width: 8px;
    height: 4px;
    margin-top: 2px;
    border-radius: 0 0 4px 4px;
    animation: rad 1s 2s both infinite;
}

.notification-count {
    position: absolute;
    z-index: 1;
    top: -6px;
    right: -6px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    border-radius: 50%;
    background-color: #ff4927;
    color: #fff;
    animation: zoom 3s 3s both infinite;
}

.fixed_header {
    border-collapse: collapse;
}

    .fixed_header tbody {
        display: block;
        width: 100%;
        overflow: auto;
        height: 100%;
    }

    .fixed_header thead tr {
        display: block;
    }

    .fixed_header thead {
        background: #fafafa;
        color: #999999;
    }

    .fixed_header th, .fixed_header td {
        padding: 2rem;
        text-align: center;
        width: 200px;
    }

.toggle {
    cursor: pointer;
    display: contents;
}

.toggle-switch {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

    .toggle-switch:before, .toggle-switch:after {
        content: "";
    }

    .toggle-switch:before {
        display: block;
        background: linear-gradient(to bottom, #fff 0%, #eee 100%);
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        width: 24px;
        height: 24px;
        position: absolute;
        top: 4px;
        left: 4px;
        transition: left 0.25s;
    }

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.toggle-checkbox:checked + .toggle-switch {
    background: #56c046;
}

    .toggle-checkbox:checked + .toggle-switch:before {
        left: 30px;
    }

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.toggle-label {
    margin-left: 5px;
    position: relative;
    top: 2px;
}

@keyframes bell {

    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(30deg);
    }

    20% {
        transform: rotate(0);
    }

    80% {
        transform: rotate(0);
    }

    90% {
        transform: rotate(-30deg);
    }

    100% {
        transform: rotate(0);
    }

}

@keyframes rad {

    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(6px);
    }

    20% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(0);
    }

    90% {
        transform: translateX(-6px);
    }

    100% {
        transform: translateX(0);
    }

}

@keyframes zoom {

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

    10% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
    }

    51% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

@keyframes moon-moving {

    0% {
        transform: translate(-200%, 600%);
    }

    100% {
        transform: translate(800%, -200%);
    }

}