/* Variables
-------------------------------------------------- */
@import './constants.css';


* {
    color: inherit;
    box-sizing: border-box;   
    font-size: 100%;
    text-align: inherit;
}

/* General elements
-------------------------------------------------- */

    /* Common - table
    -------------------------------------------------- */
    .common--table {
        width: 100%;
        border: none; border-collapse: collapse;
        background-color: white;
        display: table;
    }

    /* Common - Input
    -------------------------------------------------- */
    .common--input {
        width: 100%; height: var(--input_height_mid);
        border: solid 1px var(--color_contrastPurple); border-radius: var(--border_normal);
        background-color: white;
        margin-bottom: 8px;
        box-sizing: border-box;

        font-family: var(--text_font_main);
        font-size: var(--text_size_normal);
        color: var(--color_blackLight);
        text-align: center;
    }
    .common--input:hover{ box-shadow: 0 0 10px 0 var(--color_action); border: solid 2px var(--color_action); }
    .common--input:focus{ box-shadow: 0 0 10px 0 var(--color_action); border: solid 2px var(--color_action); }
    .common--input.inactive{ display:none; }
    .common--input.invisible{ visibility: hidden; }
    .common--input[readonly], .common--input[disabled]{ background-color: var(--color_grayLight); cursor:not-allowed }

    /* Common - Button
    -------------------------------------------------- */
    .common--button {
        width: 100%; height: var(--input_height_mid);
        border: none; border-radius: var(--border_normal);
        background-color: var(--color_action);
        box-shadow: -2px 2px 0px 0px var(--shadow_normal);
        margin: 5px 0;

        font-family: var(--text_font_main);
        font-size: var(--text_size_button);
        color: white;
        text-align: center;
        font-weight: bold;
    }
    .common--button:hover{ box-shadow: none; background-color: var(--color_actionStrong); }
    .common--button.inactive{ display: none; }
    .common--button.invisible{ visibility: hidden; }
    .common--button[disabled]{ cursor: not-allowed; background-color: var(--color_actionLight); color: var(--color_grayLight); }
    .common--button.loading[disabled], .common--button.loading {
        background: linear-gradient(86deg, var(--color_action), #ffffff); background-size: 400% 400%; box-shadow: none;
        animation: buttonLoading 3s ease infinite;
        color: white;

        cursor: not-allowed;
    }
    .common--button.shake{animation: shake 0.5s;}

    /* Common - afirmative button
    -------------------------------------------------- */
    .common--buttonAfirmative {
        background-color: var(--color_afirmative);
        box-shadow: -2px 2px 0px 0px var(--shadow_normal);
    }
    .common--buttonAfirmative:hover{  box-shadow: none; background-color: var(--color_afirmativeStrong) }
    .common--buttonAfirmative.inactive{ display: none; }
    .common--buttonAfirmative.invisible{ visibility: hidden; }
    .common--buttonAfirmative[disabled]{ cursor: not-allowed; background-color: var(--color_afirmativeLight); color: var(--color_blackLight); }
    .common--buttonAfirmative.loading[disabled], .common--buttonAfirmative.loading {
        background: linear-gradient(86deg, var(--color_afirmative), #ffffff); background-size: 400% 400%; box-shadow: none;
        animation: buttonAfirmativeLoading 3s ease infinite;
        color: white;
    }
    .common--buttonAfirmative.press { 
        background: linear-gradient(to right, var(--color_afirmative) 100%, white 100%);
        animation: pressAfirmativeAnimation 1.40s; 
        box-shadow: 0px 0px 25px 0 var(--color_afirmative);
    }
    
    /* Common - negative button
    -------------------------------------------------- */
    .common--buttonNegative {
        background-color: var(--color_negative);
        box-shadow: -2px 2px 0px 0px var(--shadow_normal);
    }
    .common--buttonNegative:hover{box-shadow: none; background-color: var(--color_negativeStrong);}
    .common--buttonNegative.inactive{display: none;}
    .common--buttonNegative.invisible{visibility: hidden;}
    .common--buttonNegative[disabled]{cursor: not-allowed; background-color: var(--color_negativeLight); color: var(--color_blackLight);}
    .common--buttonNegative.loading[disabled], .common--buttonNegative.loading {
        background: linear-gradient(86deg, var(--color_negative), #ffffff); background-size: 400% 400%; box-shadow: none;
        animation: buttonNegativeLoading 3s ease infinite;
        color: white;
    }
    .common--buttonNegative.press { 
        background: linear-gradient(to right, var(--color_negative) 100%, white 100%);
        animation: pressNegativeAnimation 1.40s; 
        box-shadow: 0px 0px 25px 0 var(--color_negative);
    }


/* Table general
-------------------------------------------------- */

    /* Table parts
    -------------------------------------------------- */  
    .common--table thead {
        background-color: white;
        height: 50px;
        padding: 0 10px;
        border-bottom: solid 5px var(--color_contrastPurple);
        position: sticky;
        top: 0px;
        z-index:1;

        font-family: var(--text_font_main);
        font-size: var(--text_size_tableHead);
        font-weight: bold;
        color: var(--color_contrastPurple);
        text-align: center;
        line-height: var(--text_size_tableHead);
    }

    .common--table td {     
        height: 50px;
        padding: 0 2px;
        width: auto;
        border-right: solid 3px white;
        word-wrap: break-word; word-break: break-all;

        font-family: var(--text_font_main);
        color: var(--color_blackLight);
        font-size: var(--text_size_tableBody);
        text-align: center;
    }
    .common--table tr:nth-child(even) { background-color: #f5f5f5; }
    .common--table tbody tr:hover{ background-color: #9be0d8; } /* POR CORREGIR */

    /* Table elements - zeroRows
    -------------------------------------------------- */
    .common--table td.zeroRows{ height: 100px; background-color: white; color: var(--color_grayStrong); font-size: 1.2rem; }
    .common--table td.zeroRows:hover{ color: var(--color_grayStrong); } /* POR CORREGIR */

    /* Table elements - groupBy
    -------------------------------------------------- */
    .common--table td.groupBy{
        background-color: var(--color_contrastPurple); 
        height: 30px;
        padding-left: 20px; 

        font-size: var(--text_size_tableBody);
        color: #fff; 
        font-weight: bold; 
        text-align: left; 
    }

    /* Custom Checkbox
    -------------------------------------------------- */
    .common--checkbox {
        display: flex;
        cursor: pointer;
        margin: auto;
        padding: 0px;
    }

        /* Hide the browser's default checkbox */
        .common--checkbox input {
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .common--checkbox .checkmark {
            display: block;
            top: 0; left: 0;
            height: 30px; width: 30px;
            background-color: transparent;
            border: solid 3px var(--color_action);
            margin: auto;
        }

            /* On mouse-over, add a grey background color */
            .common--checkbox:hover input ~ .checkmark {
                background-color: var(--color_action);
            }

            /* When the checkbox is checked, add a blue background */
            .common--checkbox input:checked ~ .checkmark {
                position:relative;
                background-color: transparent;
                border: solid 3px var(--color_action);
            }

            /* Create the checkmark/indicator (hidden when not checked) */
            .common--checkbox .checkmark:after {
                content: "";
                position: absolute;
                display: none;
            }

            /* Show the checkmark when checked */
            .common--checkbox input:checked ~ .checkmark:after {
                display: block;
            }

            /* Style the checkmark/indicator */
            .common--checkbox .checkmark:after {
                left: 7px; top: 0px;
                width: 10px; height: 20px;
                border: solid var(--color_action); border-width: 0 3px 3px 0;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

    /* Table elements - Input
    -------------------------------------------------- */
    .common--table .table--input{
        width: 100%; height: 50px;
        background-color: white;
        margin: -1px 0 0; padding: 0;
        border: solid 1px var(--color_action);

        font-family: var(--text_font_main);
        font-size: var(--text_size_tableBody);
        color: var(--color_blackLight);
        text-align: center;
    }
    .common--table .table--input:hover{box-shadow: 0 0 10px 0 var(--color_action); border: solid 2px var(--color_action);}
    .common--table .table--input:focus{box-shadow: 0 0 10px 0 var(--color_action); border: solid 2px var(--color_action);}
    .common--table .table--input[readonly], .common--table .table--input[readonly]:hover, .common--table .table--input[readonly]:focus{
        box-shadow: none; 
        border: none;
        background-color: transparent;
    }

    /* Table elements - action button
    -------------------------------------------------- */
    .table--roundButton{
        box-shadow: -2px 2px 0px 0px var(--shadow_normal);
        border-radius: 50%;
        width: 40px; height: 40px;
        font-size: 20px;
        border:none;
        color:white;
    }



/* Dialog de corte
-------------------------------------------------- */
.common--dialogCorte {
    width: 100%; min-height: 100vh;
    margin-bottom: -20px; padding: 20px;
    display: flex; flex-wrap: wrap;

    background-color: var(--color_grayLight);
}
.common--dialogCorte.inactive{ display: none; }

    .common--dialogCorte .dialogCorte--outPage {
        margin-bottom: 10px;
        display: flex; flex-basis: 100%;
    }

        .common--dialogCorte .dialogCorte--outPage p {
            margin: auto auto 0 auto; padding-top: 7px;
            width: 400px; height: var(--input_height_mid);

            border-radius: var(--border_normal);
            background-color: rgb(33, 33, 33, 0.5);
            cursor: pointer;

            font-family: var(--text_font_main);
            font-size: var(--text_size_normal);
            color: white;
            text-align: center;
        }
        .common--dialogCorte .dialogCorte--outPage p:hover{
            background-color: rgb(33, 33, 33, 0.8);

            color: var(--color_link);
            font-weight: bold;
        }

    /* Cuerpo
    -------------------------------------------------- */
    .common--dialogCorte .dialogCorte--body {
        width: 400px;
        margin: 0 auto auto auto; padding: 10px;
        border-radius: var(--border_normal);
        display: block;

        background-color: var(--color_contrastBlue);
        box-shadow: -7px 7px 0px 0px var(--shadow_normal);
    }
    .common--dialogCorte .dialogCorte--body.inactive{ display:none; }

        .common--dialogCorte .dialogCorte--title {
            width: 100%;

            font-family: var(--text_font_main);
            font-size: var(--text_size_title);
            color: white;
            text-align: center;
            font-weight: bold;
        }

        /* Escena: Waiting
        -------------------------------------------------- */
        .common--dialogCorte .dialogCorte--waitingScene {
            height: 100%; width: 100%;
            display: flex;

            font-family: var(--text_font_main);
            font-size: var(--text_size_title);
            color: white;
            text-align: center;
            font-weight: bold;
        }
        .common--dialogCorte .dialogCorte--waitingScene.inactive{ display: none; }

            .common--dialogCorte .dialogCorte--waitingScene p {
                margin: auto;

                font-family: var(--text_font_main);
                font-size: var(--text_size_subtitle);
                color: white;
                text-align: center;
                font-weight: bold;
            }
        
        /* Escena: Mostrando contenido
        -------------------------------------------------- */      
        .common--dialogCorte .dialogCorte--content { height: 100%; width: 100%; }
        .common--dialogCorte .dialogCorte--content.inactive { display: none; }

            .common--dialogCorte .dialogCorte--subtitle{
                margin: 5px 0 2px;

                font-family: var(--text_font_main);
                font-size: var(--text_size_subtitle);
                color: white;
                text-align: left;
                font-weight: bold;
            }

            .common--dialogCorte .dialogCorte--text{
                margin: 0px 0 8px;

                font-family: var(--text_font_main);
                font-size: var(--text_size_normal);
                color: white;
                text-align: left;
                line-height: var(--text_size_normal);
            }


/* Dialog normal
-------------------------------------------------- */
.common--dialog {
    width: 100%; min-height: 100vh;
    margin-bottom: -20px; padding: 20px;
    display: flex; flex-wrap: wrap;

    background-color: var(--color_grayLight);
}
.common--dialog.inactive{ display: none; }

    /* Cuerpo
    -------------------------------------------------- */
    .common--dialog .dialog--body {
        width: 400px;
        margin: auto auto auto auto; padding: 10px;
        border-radius: var(--border_normal);
        display: block;

        background-color: var(--color_contrastBlue);
        box-shadow: -7px 7px 0px 0px var(--shadow_normal);
    }
    .common--dialog .dialog--body.inactive{ display:none; }

        .common--dialog .dialog--title {
            width: 100%;

            font-family: var(--text_font_main);
            font-size: var(--text_size_title);
            color: white;
            text-align: center;
            font-weight: bold;
        }

        /* Escena: Waiting
        -------------------------------------------------- */
        .common--dialog .dialog--waitingScene {
            height: 100%; width: 100%;
            display: flex;

            font-family: var(--text_font_main);
            font-size: var(--text_size_title);
            color: white;
            text-align: center;
            font-weight: bold;
        }
        .common--dialog .dialog--waitingScene.inactive{ display: none; }

            .common--dialog .dialog--waitingScene p {margin: auto;}
        
        /* Escena: Mostrando contenido
        -------------------------------------------------- */      
        .common--dialog .dialog--content { height: 100%; width: 100%; }
        .common--dialog .dialog--content.inactive { display: none; }

            .common--dialog .dialog--subtitle{
                margin: 5px 0 2px;

                font-family: var(--text_font_main);
                font-size: var(--text_size_subtitle);
                color: white;
                text-align: left;
                font-weight: bold;
            }

            .common--dialog .dialog--text{
                margin: 0px 0 8px;

                font-family: var(--text_font_main);
                font-size: var(--text_size_normal);
                color: white;
                text-align: left;
                line-height: var(--text_size_normal);
            }



/* Animaciones
-------------------------------------------------- */

    /* Animación cargando: Mostrar proceso en curso */
    @keyframes buttonLoading {
        0%{background-position:0% 49%}
        50%{background-position:100% 52%; color: #000;}
        100%{background-position:0% 49%;}
    }
    @keyframes buttonAfirmativeLoading {
        0%{background-position:0% 49%}
        50%{background-position:100% 52%; color: #000;}
        100%{background-position:0% 49%;}
    }
    @keyframes buttonNegativeLoading {
        0%{background-position:0% 49%}
        50%{background-position:100% 52%; color: #000;}
        100%{background-position:0% 49%;}
    }


    /* Animación sacudir: Llamar atención */
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); box-shadow: 0px 0px 25px 0 var(--color_grayLight);}
        10% { transform: translate(-1px, -2px) rotate(-1deg);}
        20% { transform: translate(-3px, 0px) rotate(1deg); box-shadow: 0px 0px 25px 0 var(--color_grayLight);}
        30% { transform: translate(3px, 2px) rotate(0deg);}
        40% { transform: translate(1px, -1px) rotate(1deg); box-shadow: 0px 0px 25px 0 var(--color_grayLight);}
        50% { transform: translate(-1px, 2px) rotate(-1deg);}
        60% { transform: translate(-3px, 1px) rotate(0deg); box-shadow: 0px 0px 25px 0 var(--color_grayLight);}
        70% { transform: translate(3px, 1px) rotate(-1deg);}
        80% { transform: translate(-1px, -1px) rotate(1deg); box-shadow: 0px 0px 25px 0 var(--color_grayLight);}
        90% { transform: translate(1px, 2px) rotate(0deg);}
        100% { transform: translate(1px, -2px) rotate(-1deg); box-shadow: 0px 0px 25px 0 var(--color_grayLight);}
    }

    /* Animación presionar: Presion mantenida para confirmación */
    @keyframes pressAfirmativeAnimation {
        0% {background: linear-gradient(to right, var(--color_afirmativeStrong) 5%, white 5%); color: var(--color_blackLight); box-shadow: none;}
        2% {background: linear-gradient(to right, var(--color_afirmativeStrong) 7%, white 7%); color: var(--color_blackLight); box-shadow: none;}
        5% {background: linear-gradient(to right, var(--color_afirmativeStrong) 10%, white 10%); color: var(--color_blackLight); box-shadow: none;}
        7% {background: linear-gradient(to right, var(--color_afirmativeStrong) 12%, white 12%); color: var(--color_blackLight); box-shadow: none;}
        10% {background: linear-gradient(to right, var(--color_afirmativeStrong) 15%, white 15%); color: var(--color_blackLight); box-shadow: none;}
        12% {background: linear-gradient(to right, var(--color_afirmativeStrong) 17%, white 17%); color: var(--color_blackLight); box-shadow: none;}
        15% {background: linear-gradient(to right, var(--color_afirmativeStrong) 20%, white 20%); color: var(--color_blackLight); box-shadow: none;}
        17% {background: linear-gradient(to right, var(--color_afirmativeStrong) 22%, white 22%);box-shadow: none;}
        20% {background: linear-gradient(to right, var(--color_afirmativeStrong) 25%, white 25%);box-shadow: none;}
        22% {background: linear-gradient(to right, var(--color_afirmativeStrong) 27%, white 27%);box-shadow: none;}
        25% {background: linear-gradient(to right, var(--color_afirmativeStrong) 30%, white 30%);box-shadow: none;}
        27% {background: linear-gradient(to right, var(--color_afirmativeStrong) 32%, white 32%);box-shadow: none;}
        30% {background: linear-gradient(to right, var(--color_afirmativeStrong) 35%, white 35%);box-shadow: none;}
        32% {background: linear-gradient(to right, var(--color_afirmativeStrong) 37%, white 37%);box-shadow: none;}
        35% {background: linear-gradient(to right, var(--color_afirmativeStrong) 40%, white 40%);box-shadow: none;}
        37% {background: linear-gradient(to right, var(--color_afirmativeStrong) 42%, white 42%);box-shadow: none;}
        40% {background: linear-gradient(to right, var(--color_afirmativeStrong) 45%, white 45%);box-shadow: none;}
        42% {background: linear-gradient(to right, var(--color_afirmativeStrong) 47%, white 47%);box-shadow: none;}
        45% {background: linear-gradient(to right, var(--color_afirmativeStrong) 50%, white 50%);box-shadow: none;}
        47% {background: linear-gradient(to right, var(--color_afirmativeStrong) 52%, white 52%);box-shadow: none;}
        50% {background: linear-gradient(to right, var(--color_afirmativeStrong) 55%, white 55%);box-shadow: none;}
        52% {background: linear-gradient(to right, var(--color_afirmativeStrong) 57%, white 57%);box-shadow: none;}
        55% {background: linear-gradient(to right, var(--color_afirmativeStrong) 60%, white 60%);box-shadow: none;}
        57% {background: linear-gradient(to right, var(--color_afirmativeStrong) 62%, white 62%);box-shadow: none;}
        60% {background: linear-gradient(to right, var(--color_afirmativeStrong) 65%, white 65%);box-shadow: none;}
        62% {background: linear-gradient(to right, var(--color_afirmativeStrong) 67%, white 67%);box-shadow: none;}
        65% {background: linear-gradient(to right, var(--color_afirmativeStrong) 70%, white 70%);box-shadow: none;}
        67% {background: linear-gradient(to right, var(--color_afirmativeStrong) 72%, white 72%);box-shadow: none;}
        70% {background: linear-gradient(to right, var(--color_afirmativeStrong) 75%, white 75%);box-shadow: none;}
        72% {background: linear-gradient(to right, var(--color_afirmativeStrong) 77%, white 77%);box-shadow: none;}
        75% {background: linear-gradient(to right, var(--color_afirmativeStrong) 80%, white 80%);box-shadow: none;}
        77% {background: linear-gradient(to right, var(--color_afirmativeStrong) 82%, white 82%);box-shadow: none;}
        80% {background: linear-gradient(to right, var(--color_afirmativeStrong) 85%, white 85%);box-shadow: none;}
        82% {background: linear-gradient(to right, var(--color_afirmativeStrong) 87%, white 87%);box-shadow: none;}
        85% {background: linear-gradient(to right, var(--color_afirmativeStrong) 90%, white 90%);box-shadow: none;}
        87% {background: linear-gradient(to right, var(--color_afirmativeStrong) 92%, white 92%);box-shadow: none;}
        92% {background: linear-gradient(to right, var(--color_afirmativeStrong) 94%, white 94%);box-shadow: none;}
        95% {background: linear-gradient(to right, var(--color_afirmativeStrong) 96%, white 96%);box-shadow: none;}
        97% {background: linear-gradient(to right, var(--color_afirmativeStrong) 98%, white 98%);box-shadow: none;}
        100% {background: linear-gradient(to right, var(--color_afirmativeStrong) 100%, white 100%); box-shadow: none;}
    }
    @keyframes pressNegativeAnimation {
        0% {background: linear-gradient(to right, var(--color_negativeStrong) 5%, white 5%); color: var(--color_blackLight); box-shadow: none;}
        2% {background: linear-gradient(to right, var(--color_negativeStrong) 7%, white 7%); color: var(--color_blackLight); box-shadow: none;}
        5% {background: linear-gradient(to right, var(--color_negativeStrong) 10%, white 10%); color: var(--color_blackLight); box-shadow: none;}
        7% {background: linear-gradient(to right, var(--color_negativeStrong) 12%, white 12%); color: var(--color_blackLight); box-shadow: none;}
        10% {background: linear-gradient(to right, var(--color_negativeStrong) 15%, white 15%); color: var(--color_blackLight); box-shadow: none;}
        12% {background: linear-gradient(to right, var(--color_negativeStrong) 17%, white 17%); color: var(--color_blackLight); box-shadow: none;}
        15% {background: linear-gradient(to right, var(--color_negativeStrong) 20%, white 20%); color: var(--color_blackLight); box-shadow: none;}
        17% {background: linear-gradient(to right, var(--color_negativeStrong) 22%, white 22%);box-shadow: none;}
        20% {background: linear-gradient(to right, var(--color_negativeStrong) 25%, white 25%);box-shadow: none;}
        22% {background: linear-gradient(to right, var(--color_negativeStrong) 27%, white 27%);box-shadow: none;}
        25% {background: linear-gradient(to right, var(--color_negativeStrong) 30%, white 30%);box-shadow: none;}
        27% {background: linear-gradient(to right, var(--color_negativeStrong) 32%, white 32%);box-shadow: none;}
        30% {background: linear-gradient(to right, var(--color_negativeStrong) 35%, white 35%);box-shadow: none;}
        32% {background: linear-gradient(to right, var(--color_negativeStrong) 37%, white 37%);box-shadow: none;}
        35% {background: linear-gradient(to right, var(--color_negativeStrong) 40%, white 40%);box-shadow: none;}
        37% {background: linear-gradient(to right, var(--color_negativeStrong) 42%, white 42%);box-shadow: none;}
        40% {background: linear-gradient(to right, var(--color_negativeStrong) 45%, white 45%);box-shadow: none;}
        42% {background: linear-gradient(to right, var(--color_negativeStrong) 47%, white 47%);box-shadow: none;}
        45% {background: linear-gradient(to right, var(--color_negativeStrong) 50%, white 50%);box-shadow: none;}
        47% {background: linear-gradient(to right, var(--color_negativeStrong) 52%, white 52%);box-shadow: none;}
        50% {background: linear-gradient(to right, var(--color_negativeStrong) 55%, white 55%);box-shadow: none;}
        52% {background: linear-gradient(to right, var(--color_negativeStrong) 57%, white 57%);box-shadow: none;}
        55% {background: linear-gradient(to right, var(--color_negativeStrong) 60%, white 60%);box-shadow: none;}
        57% {background: linear-gradient(to right, var(--color_negativeStrong) 62%, white 62%);box-shadow: none;}
        60% {background: linear-gradient(to right, var(--color_negativeStrong) 65%, white 65%);box-shadow: none;}
        62% {background: linear-gradient(to right, var(--color_negativeStrong) 67%, white 67%);box-shadow: none;}
        65% {background: linear-gradient(to right, var(--color_negativeStrong) 70%, white 70%);box-shadow: none;}
        67% {background: linear-gradient(to right, var(--color_negativeStrong) 72%, white 72%);box-shadow: none;}
        70% {background: linear-gradient(to right, var(--color_negativeStrong) 75%, white 75%);box-shadow: none;}
        72% {background: linear-gradient(to right, var(--color_negativeStrong) 77%, white 77%);box-shadow: none;}
        75% {background: linear-gradient(to right, var(--color_negativeStrong) 80%, white 80%);box-shadow: none;}
        77% {background: linear-gradient(to right, var(--color_negativeStrong) 82%, white 82%);box-shadow: none;}
        80% {background: linear-gradient(to right, var(--color_negativeStrong) 85%, white 85%);box-shadow: none;}
        82% {background: linear-gradient(to right, var(--color_negativeStrong) 87%, white 87%);box-shadow: none;}
        85% {background: linear-gradient(to right, var(--color_negativeStrong) 90%, white 90%);box-shadow: none;}
        87% {background: linear-gradient(to right, var(--color_negativeStrong) 92%, white 92%);box-shadow: none;}
        92% {background: linear-gradient(to right, var(--color_negativeStrong) 94%, white 94%);box-shadow: none;}
        95% {background: linear-gradient(to right, var(--color_negativeStrong) 96%, white 96%);box-shadow: none;}
        97% {background: linear-gradient(to right, var(--color_negativeStrong) 98%, white 98%);box-shadow: none;}
        100% {background: linear-gradient(to right, var(--color_negativeStrong) 100%, white 100%); box-shadow: none;}
    }