:root{
    --render-loader-width: 50px;
    --render-loader-height: 50px;
    --render-loader-margin: -25px 0 0 -25px;
    --render-loader-border: none;
    --render-loader-border-radius: 50%;
    --render-loader-background: black;
    --render-loader-color: white;

    --render-licon-loader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg id='Groupe_1' data-name='Groupe 1' transform='translate(-470 -116)'%3E%3Crect id='Rectangle_1' data-name='Rectangle 1' width='32' height='32' transform='translate(470 116)' fill='none'/%3E%3Cpath id='fi-rr-arrow-up-left-from-circle' d='M14,4a9.969,9.969,0,0,0-3.333.569,1,1,0,1,0,.667,1.885,7.991,7.991,0,1,1-4.878,4.878,1,1,0,0,0-1.885-.667A10,10,0,1,0,14,4Z' transform='translate(471.998 118)'/%3E%3C/g%3E%3C/svg%3E%0A");
    --render-licon-turn-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg id='Groupe_2' data-name='Groupe 2' transform='translate(-309 -79)'%3E%3Crect id='Rectangle_1' data-name='Rectangle 1' width='32' height='32' transform='translate(309 79)' fill='none'/%3E%3Cpath id='fi-rr-arrow-turn-down-left' d='M23,2a1,1,0,0,0-1,1v8a3.009,3.009,0,0,1-3,3H2.58L7.72,8.7A1,1,0,0,0,6.29,7.31L.88,12.88a3,3,0,0,0-.01,4.23L6.28,22.7A1.015,1.015,0,0,0,7,23a.995.995,0,0,0,.72-1.69l-5.14-5.3H19a5,5,0,0,0,5-5V3A1,1,0,0,0,23,2Z' transform='translate(312.999 82.5)'/%3E%3C/g%3E%3C/svg%3E%0A");
    --render-licon-turn-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg id='Groupe_1' data-name='Groupe 1' transform='translate(-346 -79)'%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='32' height='32' transform='translate(346 79)' fill='none'/%3E%3Cpath id='fi-rr-arrow-turn-down-right' d='M23.13,12.89,17.72,7.3a1,1,0,0,0-1.43,1.39l5.14,5.3H5a3.009,3.009,0,0,1-3-3V3A1,1,0,0,0,0,3v8a5,5,0,0,0,5,5H21.42l-5.14,5.3a1,1,0,0,0,.02,1.41.974.974,0,0,0,.7.28,1.015,1.015,0,0,0,.72-.3l5.4-5.58a3,3,0,0,0,.01-4.23Z' transform='translate(350.001 82.51)'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.render-canvas-wrapper{
    position: relative;
    display: block;
    width: 100%;
}
.render-canvas{
    outline: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.render-loader{
    z-index: 99;
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: var(--render-loader-width);
    height: var(--render-loader-height);
    margin: var(--render-loader-margin);
    border: var(--render-loader-border);
    border-radius: var(--render-loader-border-radius);
    background: var(--render-loader-background);
    color: var(--render-loader-color);
    -webkit-animation: render-rotate 3s linear infinite;
    animation: render-rotate 3s linear infinite;
}

.render-loader::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    background: currentColor;
    -webkit-mask: var(--render-licon-loader);
    mask: var(--render-licon-loader);
}

.licon{
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    background: currentColor;
}
.licon.licon-render-turn-left{
    width: 32px;
    height: 32px;
    -webkit-mask: var(--render-licon-turn-left);
    mask: var(--render-licon-turn-left);
}
.licon.licon-render-turn-right{
    width: 32px;
    height: 32px;
    -webkit-mask: var(--render-licon-turn-right);
    mask: var(--render-licon-turn-right);
}

@-webkit-keyframes render-rotate {
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes render-rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}