.glass-effect {
    position: relative;
    z-index: 1;
    cursor: wait;
    background-color: #ffffff3d;
    animation: pulse 1.3s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
    border-radius: 7px;
}

.glass-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff00;
    backdrop-filter: blur(1px);
    z-index: 9998;
}

@keyframes shimmering {
    0% {
        background-position: -1300px 0;
    }
    100% {
        background-position: 1300px 0;
    }
}

:root {
    --shimmer-light: rgba(238, 238, 238, 1);
    --shimmer-dark: rgba(226, 226, 226, 1);
}

.shimmer {
    animation: shimmering 3.1s linear infinite;
    background: var(--shimmer-dark);
    background: linear-gradient(90deg, var(--shimmer-dark) 9%, var(--shimmer-light) 18%, var(--shimmer-dark) 31%);
    background-size: 1300px 100%;
}

@keyframes pulse {
    to {
        opacity: .2;
    }
}

.smiling-loading *,
.smiling-loading {
    z-index: 9999 !important;
}

.smiling-loading {
    position: absolute;
    top: 50%;
    right: 50%;
}

.loader {
    width: 8em;
    height: 8em;
}

.loader__eye1,
.loader__eye2,
.loader__mouth1,
.loader__mouth2 {
    animation: eye1 3s ease-in-out infinite;
}

.loader__eye1,
.loader__eye2 {
    transform-origin: 64px 64px;
}

.loader__eye2 {
    animation-name: eye2;
}

.loader__mouth1 {
    animation-name: mouth1;
}

.loader__mouth2 {
    animation-name: mouth2;
    visibility: hidden;
}

.smiling-loading {
    --bg: var(--layout-color);
    --fg: var(--layout-color);
}

@keyframes eye1 {
    from {
        transform: rotate(-260deg) translate(0, -56px);
    }
    50%,
    60% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.58, 1);
        transform: rotate(-40deg) translate(0, -56px) scale(1);
    }
    to {
        transform: rotate(225deg) translate(0, -56px) scale(0.35);
    }
}

@keyframes eye2 {
    from {
        transform: rotate(-260deg) translate(0, -56px);
    }
    50% {
        transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
    }
    52.5% {
        transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1, 0);
    }
    55%,
    70% {
        animation-timing-function: cubic-bezier(0, 0, 0.28, 1);
        transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
    }
    to {
        transform: rotate(150deg) translate(0, -56px) scale(0.4);
    }
}

@keyframes eyeBlink {
    from,
    25%,
    75%,
    to {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0);
    }
}

@keyframes mouth1 {
    from {
        animation-timing-function: ease-in;
        stroke-dasharray: 0 351.86;
        stroke-dashoffset: 0;
    }
    25% {
        animation-timing-function: ease-out;
        stroke-dasharray: 175.93 351.86;
        stroke-dashoffset: 0;
    }
    50% {
        animation-timing-function: steps(1, start);
        stroke-dasharray: 175.93 351.86;
        stroke-dashoffset: -175.93;
        visibility: visible;
    }
    75%,
    to {
        visibility: hidden;
    }
}

@keyframes mouth2 {
    from {
        animation-timing-function: steps(1, end);
        visibility: hidden;
    }
    50% {
        animation-timing-function: ease-in-out;
        visibility: visible;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -351.86;
    }
}

.cr-loading,
.cr-loading * {
    z-index: 9999 !important;
}

.cr-loading {
    display: flex;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #666;
    position: absolute;
    width: 100%;
    height: 100%;
}

.cr-loading div.cr-loader {
    background: #fff;
    padding: 20px;
    border-radius: 1em;
}

.cr-loading i {
    margin-bottom: 15px;
}

.cr-spinner {
    display: block;
    width: 50px;
    height: 50px;
    border: 4px solid #ddd;
    border-top-color: #8ed557;
    border-radius: 100%;
    margin: 0 auto;
    -webkit-animation: SpinnerRotate .5s linear infinite;
    animation: SpinnerRotate .5s linear infinite;
}

@-webkit-keyframes SpinnerRotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes SpinnerRotate {
    to {
        transform: rotate(1turn)
    }
}

table.spa-form-confirmation-datas th,
table.spa-form-confirmation-datas td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%;
}

table.spa-form-confirmation-datas th:hover,
table.spa-form-confirmation-datas td:hover {
    white-space: normal;
    overflow: visible;
    max-width: none;
}

@media not all and (pointer: coarse) {
    table.hide-text-overflow th,
    table.hide-text-overflow td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 10em;
    }
    
    table.hide-text-overflow th:hover,
    table.hide-text-overflow td:hover {
        white-space: normal;
        overflow: visible;
        max-width: none;
    }
}