.stepper{
    --normal-backround: #ddd;/**c4c4c4 */
    --success-background: #5cb85c;/*#3c9247;*/
    --active-background: #337ab7;/*#3c6fb2;*//*#e67e22;*//*#FFAA22*//*#f0ad4e */
    --error-background: #bb002f;
    --normal-border-color:gray;/*#999;*//*#b3b3b3; *//* #74777f */

    --step-circle-size: 28px; /*orig 24px; */
    --step-num-size: 16px; /*orig 14px;*/

    --step-label-font-size : 17px; /*orig 17px; */
}



@keyframes fadeInRightBig {
    from {
        opacity: 0;
        transform: translateX(2000px);/* 100vw viewportWidth*/
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        transform: translateX(-2000px)
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes shake {
    0% {
        margin-left: 0;
    }
    6.5% {
        margin-left: -6px;
    }
    18.5% {
        margin-left: 5px;
    }
    31.5% {
        margin-left: -3px;
    }
    43.5% {
        margin-left: 2px;
    }

    50% {
        margin-left:0;
    }
}

.stepper .stepper-header .step.error, .stepper-header-vertical.stepper-header .step.error {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;

                -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-animation-fill-mode: none;
            animation-fill-mode: none;

            position: relative;
}

.stepper .step-label{
    font-size: var(--step-label-font-size);
}

.stepper .stepper-header-horizontal.stepper-header .step.active, .stepper .stepper-header-vertical.stepper-header:has(.step.active){
    background-color: #1a1b1f1f;
    border-radius: 10px;
}


.stepper .stepper-header-horizontal{
        display:none;
    }

    .stepper .step .stepper-header-vertical.stepper-header{/**ez .vertical volt */
        display: flex;
        align-items: center;
        height: 24px;
        padding: 24px;

        overflow: hidden;
        outline: none;
        position: relative;
        box-sizing: content-box;

        white-space: nowrap;
    }

    .stepper .step .stepper-body{
        display: grid;
        grid-template-rows: 0fr;
        grid-template-columns: 100%;
        margin-left: 36px;
        border: 0;
        position: relative;
    /*
    grid-template-rows: 1fr;
            */
        
    }
    .stepper .step .stepper-body{
        transition: grid-template-rows 500ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .stepper .step .stepper-body:has(.step-content.active){
        grid-template-rows: 1fr;
    }
    
    
    .stepper .step .stepper-body .step-content{
        overflow: hidden;
        outline: 0;
        padding-left: 24px;
        padding-right: 24px;
        visibility: hidden;
    }
    .stepper .step .stepper-body .step-content.active{
        visibility: visible;
    }

    .stepper .step:not(:last-of-type) .stepper-body::before{/** ez .vertical volt */
        content: "";
        position: absolute;
        left: 0;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: var(--normal-border-color);
        top: -16px;
        bottom: -16px;
    }

        .stepper .stepper-header-vertical.stepper-header .step {
        display: flex;
        overflow: hidden;
        align-items: center;
        padding: 0 24px;
        
        min-width: 50px;

        padding: 0 24px;
        padding: 0 0;
        height: 72px;
    }
    .stepper .stepper-header-vertical.stepper-header .step .step-num{
        margin-right: 8px;
        flex: none;

        background-color: var(--normal-backround);/*#44474e;*/

        border-radius: 50%;
        height: var(--step-circle-size, 24px);
        width: var(--step-circle-size, 24px);
        position: relative;
        font-weight: bold;
    }
    .stepper .stepper-header-vertical.stepper-header .step .step-num>div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        font-size: var(--step-num-size);
    }
    .stepper .stepper-header-vertical.stepper-header .step.active .step-num{
        background-color: var(--active-background);
        color: white;
    }
    .stepper .stepper-header-vertical.stepper-header .step.success .step-num{
        background-color: var(--success-background);
        color: white;
    }
    .stepper .stepper-header-vertical.stepper-header .step.error .step-num{
        background-color: var(--error-background);
        color: white;
    }

    .stepper .content-container{
        /*padding:24px;*/
    }

    @media (min-width: 768px) {
        .stepper .step:not(:last-of-type) .stepper-body::before{
                content: none;
        }
        .stepper .stepper-body .step-content.active.animate-right-in {

            -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;

            -webkit-animation-name: fadeInRightBig;
            animation-name: fadeInRightBig;

        }


        .stepper .stepper-body .step-content.active.animate-left-in {

            -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;

            -webkit-animation-name: fadeInLeftBig;
            animation-name: fadeInLeftBig;
        }


    
        .stepper .step .stepper-body{
            visibility: hidden;
        }
        .stepper .step .stepper-body:has(.step-content.active){
            visibility: visible;
        }



        .stepper .stepper-header-horizontal.stepper-header {
            display:flex;
            justify-content: center;
            align-items: center;
        }
        .stepper .step .stepper-header-vertical.stepper-header {
            display:none !important;
        }
        .stepper .stepper-header .step{
            display: flex;
            overflow: hidden;
            align-items: center;
            padding: 0 24px;
            
            min-width: 50px;

            padding: 0 24px;
            height: 72px;
        }
        .stepper .stepper-header .step .step-num{
            margin-right: 8px;
            flex: none;

            background-color: var(--normal-backround);/*#44474e;*/

                border-radius: 50%;
            height: var(--step-circle-size, 24px);
            width: var(--step-circle-size, 24px);
            position: relative;
            font-weight: bold;
        }
        .stepper .stepper-header .step .step-num>div{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            font-size: var(--step-num-size);
        }
        .stepper .stepper-header .step.active .step-num{
            background-color: var(--active-background);
            color: white;
        }
        .stepper .stepper-header .step.success .step-num{
            background-color: var(--success-background);
            color: white;
        }
        .stepper .stepper-header .step.error .step-num{
            background-color: var(--error-background);
            color: white;
        }
        .stepper .stepper-header .separator{
            border-top-width: 1px;
            border-top-style: solid;
            flex: auto;
            height: 0;
            margin: 0 -16px;
            min-width: 32px;
            border-top-color: var(--normal-border-color);
        }








            @supports (anchor-name: --test) and (top: anchor(--test top)){
                .stepper .stepper-header-horizontal.stepper-header .step.active, .stepper .stepper-header-vertical.stepper-header:has(.step.active){
                    background-color: transparent;
                }



                .stepper .stepper-header-horizontal.stepper-header{
                    isolation: isolate;
                    anchor-name: --horizontal-step;
                    contain: layout; /*ez fontos hogy ne lógjon túl amikor változás van*/
                }
                .stepper .stepper-header-horizontal.stepper-header .step:first-of-type{
                    anchor-name:  --horizontal-step;
                }
                .stepper .stepper-header-horizontal.stepper-header .step.active{
                    anchor-name:  --horizontal-step;
                }
                .stepper .stepper-header-horizontal.stepper-header::before, .stepper .stepper-header-horizontal.stepper-header::after {
                    content: "";
                    position: absolute;
                /* top: calc(anchor( bottom) - 10px);
                    left: calc(anchor(left) + 1rem);
                    right: calc(anchor(right) + 1rem);
                    bottom: calc(anchor(bottom) + 5px);*/
                    position-anchor: --horizontal-step;
                    top: anchor(top);
                    left: anchor(left);
                    right: anchor(right);
                    bottom: anchor(bottom);

                    border-radius: 10px;
                    transition: 1000ms linear(0, 0.029 1.6%, 0.123 3.5%, 0.651 10.6%, 0.862 14.1%, 1.002 17.7%, 1.046 19.6%, 1.074 21.6%, 1.087 23.9%, 1.086 26.6%, 1.014 38.5%, 0.994 46.3%, 1);

                }

                .stepper .stepper-header-horizontal.stepper-header::before  {
                    z-index: -1;
                    background: #1a1b1f1f;
                    /*background: rgb(0 0 0 / 0.2);
                    backdrop-filter: blur(2px);*/ 
                }
                /*.stepper .stepper-header-horizontal.stepper-header::after{
                    z-index: -2;
                }*/




            }
            
                
            




    }

     .stepper .stepper-actions button.next:not(.submit){
        padding: 0 40px;
     }
    @media(max-width: 500px){
        .stepper .stepper-actions button.prev, .stepper .stepper-actions button.next{
            padding: 0 25px;
        }
    }