/* Stepper */
.stepper-bullet-box{
        position: relative;
    }

    .stepper-bullet-box:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        top: 50%;
        transform: translateY(-1px);
        left: 0;
        background-color: #f2f3f5;
        z-index: -1;
    }

    .stepper-line-dynamic{
        position: absolute;
        height: 2px;
        top: 50%;
        transform: translateY(-1px);
        left: 0;
        background-color: #212529;
        z-index: 0;
        transition: width .3s ease;
    }
    .stepper-bullet-box.step-1 .stepper-line-dynamic{ width: 0%; }
    .stepper-bullet-box.step-2 .stepper-line-dynamic{ width: 50%; }
    .stepper-bullet-box.step-3 .stepper-line-dynamic{ width: 100%; }

    .stepper-bullet-box.step-2 > div:nth-child(2){
        background-color: #212529;
    }
    .stepper-bullet-box.step-3 > div:nth-child(2),
    .stepper-bullet-box.step-3 > div:nth-child(3){
        background-color: #212529;
    }

    
    .stepper-bullet{
        width: 24px;
        height: 24px;
        background-color: #f2f3f5;
        border-radius: 50px;
    }

    .stepper-bullet-dynamic{
        background-color: #212529;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .3s ease;
    }

    .stepper-bullet-box.step-2 .stepper-bullet-dynamic{
        left: 50%;
        transform: translateX(-50%);
    }

    .stepper-bullet-box.step-3 .stepper-bullet-dynamic{
        left: 100%;
        transform: translateX(-100%);
    }

/* Alert */
.alert{
    border-radius: 10px;
}

/* Dropdown menu */
.currency-select .dropdown-menu{
    padding: .3rem;
}

.currency-select .dropdown-menu li{
    border-radius: 5px;
    padding: 0rem .5rem;
    cursor: pointer;
}

.currency-select .dropdown-menu li:hover{
    background-color: #f2f3f5;
}

/* Result */
@media (max-width: 767.98px){
    #result-box .card{
        border: 1px solid #CECECE;
    }

    .result-amount-date{
        width: 100%;
    }
}

/* Input */
.transaction-status input.form-control{
    border: 1px solid #949494;
    font-size: 24px;
    font-weight: 500;
    padding: 1.5rem;
    border-radius: 10px;
}

.transaction-status input.form-control:focus{
    border: 1px solid #949494;
    box-shadow: 0 0 0 .25rem rgb(242 243 245);
}

.transaction-status input.form-control::placeholder{
    color: #9FA0A2;
}

input#insert-number.form-control.p24-number,
input#insert-number.form-control.blik-number{
    background-repeat: no-repeat;
    background-position: 95% center;
    background-size: 80px auto;
}

input:-internal-autofill-selected#insert-number.p24-number,
input#insert-number.p24-number{
    background-image: url('/themes/przelewy24/assets/img/base/przelewy24_logo_2022.svg')!important;
}

input:-internal-autofill-selected#insert-number.blik-number,
input#insert-number.blik-number{
    background-image: url('/themes/przelewy24/assets/img/metody-platnosci/glowne/blik.svg') !important;
}

/* Button grey */
.btn-grey{
    background-color: #f2f3f5;
    border-radius: 50px;
    font-weight: 600;
}
.btn-grey:hover{
    background-color: #f2f3f5ad;
}

.btn-grey:focus{
    box-shadow: 0 0 0 .25rem rgb(242 243 245 / 30%);
}

/* Button input */
.btn-input{
    border: 1px solid #949494;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 600;
    height: 100%;
}

/* Action buttons */
.action-buttons > button{ width: 230px; }
.action-buttons > button > span{ font-size: 16px; margin: 0 .25rem; }

/* Card grey */
.card-grey{ background-color: #f2f3f5; }
.card-grey > .card-body{ padding: 2rem; }