ul.step-errors.text-danger.small.mb-3.ps-3 {
    width: max-content;
    text-align: left;
    margin: 0 auto;
}

.btn-outline-primary {
    background-color: #fff !important;
    border-color: #004c96 !important;
    color: #004c96 !important;
}

.btn-check:checked+.btn {
    background-color: #004c96 !important;
    border-color: #004c96 !important;
    color: #fff !important;
}
.barcode-input {position: absolute !important;bottom:6%;left: 0;right: 0;}
.barcode-scan-bg {
    background-image: url(/assets/img/barcode-scan-img.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.showcase-bg {
    background-image: url(/assets/img/show-case-bg-img.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    height: calc(100vh - 72px);
}

.showcase-btn {
    right: 10px;
    top: 10px;
}

.h-60vh {
    height: 60vh;
}

.step-admin .barcode-input {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
}

.step-admin .barcode-input img {
    top: 6px;
    right: 2px;
}

.barcode-scan-bg .barcode-box,
.blue-input .barcode-box {
    background-color: #fff !important;
    border-color: #004c96 !important;
}

.barcode-input img {
    position: absolute;
    right: 55px;
    top: 54px;
}

.step {
    height: auto;
    min-height: calc(100vh - 58px);
}
h4.admin-side strong {
    margin: 0 !important;
}
.w-165px{width: 165px !important;}
.step-admin {
    height: auto;
    min-height: calc(84vh - 72px);
}

/* .admin-step {
    height: auto;
    min-height: calc(84vh - 72px)!important;
} */
#virtualKeyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #004a8f;
    padding: 10px;
    z-index: 1000;
}

#virtualKeyboard button {
    margin: 5px;
    padding: 10px 20px;
    background: white;
    border: none;
    font-size: 16px;
    color: #004585;
    border-radius: 4px;
}

.btn-width button {
    width: 72px;
}

.number-width button {
    width: 64px;
}

.next-width button {
    width: 90px;
}

img.bearballon {
    position: absolute;
    width: 16%;
    transform: rotate(350deg);
    left: 10%;
}

img.television {
    width: 35vw;
    margin: 0 auto;height: 55vh;
}

img.tagbranded {
    position: absolute;
    left: 18%;
    right: 0;
    margin: 0 auto;
    width: 15vw;
    top: 40%;
}

img.footer-image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

img.castle {
    position: absolute;
    width: 25%;
    right: 0;
    bottom: 30px;
}

img.cloundonepng {
    position: absolute;
    right: 15%;
    top: 45%;
}

img.cloundtwo {
    position: absolute;
    right: 5%;
}

img.cloundballon {
    position: absolute;
    left: 6%;
    top: 35%;
}

img.clound-small {
    position: absolute;
    left: 26%;
    top: 40vh;
}

.keyboard-open img.bearballon {
    top: 20%;
}

.keyboard-open img.television {
    top: 17%;
}

.keyboard-open img.cloundtwo {
    top: 20%;
}

.keyboard-open img.cloundonepng {
    top: 30%;
}

.keyboard-open img.castle {
    bottom: 130px;
}

.keyboard-open img.television {
    width: 29vw;
    margin-top:-2%;
}

.keyboard-open img.tagbranded {
        width: 11%;
    top: 41%;
}

.keyboard-open .barcode-row {
    padding-top: 160px;
}

.keyboard-open .barcode-input {
    bottom: 20%;
    position: absolute !important;
    left: 0;
    right: 0;
    
}

.furry-btn{position: absolute;left: 0;right: 0;top: 40%;}
.step h4.small-heading strong{font-size: 2.4vw !important;margin-top: 6% !important;}

@media (min-width: 1920px) and (max-width: 2560px)  {
    .step h4 strong{font-size: 4.8vw;margin-top: 6% !important;}
    img.television{height: 54vh;width: 34vw;}
    img.tagbranded, .keyboard-open img.tagbranded{top:40vh;left: 16%;width: 15%;}
    img.cloundballon {left: 3%;top: 41%;}
    img.bearballon{left: 7%;}
    img.clound-small {left: 23%;top: 50%;}
    .keyboard-open img.television{height: 56vh;width: 37vw;    margin-top:3%;}
    .keyboard-open .barcode-input{bottom: 12%;}
    .transform-scale{transform: scale(1.4); margin-top: 6%;}
}



@media (max-width: 767px) {
    .m-w-100 {
        width: 100% !important;
    }
}

.product-img-div {
    position: fixed;
    top: 10px;
    right: 50px;
    z-index: 9999;
}

.product-img-div-admin {
    position: absolute;
    top: 40px;
    right: 10px;
}

.product-img {
    height: 180px;
    width: auto;
}

.product-img-admin {
    height: 130px;
    width: auto;
}

.product-img-div p {
    font-size: 16px;
    font-weight: 600;
    color: #004c96;
    font-family: "sofia_prosemi_bold";
    text-transform: uppercase;
}

.product-img-div-admin p {
    font-size: 16px;
    font-weight: 600;
    color: #004c96;
    font-family: "sofia_prosemi_bold";
    text-transform: uppercase;
}

.btn-width-admin button {
    width: 72px;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

.mt-5rem {
    margin-top: 5rem !important;
}

.mt-7rem {
    margin-top: 7rem !important;
}

.mt-12rem {
    margin-top: 12rem !important;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-18 {
    font-size: 24px !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-65 {
    width: 65% !important;
}

.w-45 {
    width: 45% !important;
}

.w-55 {
    width: 55% !important;
}

/* Hide header when keyboard is open */
.keyboard-open #scan-header,
.keyboard-open-admin #scan-header {
    display: none;
}

/* Adjust input positioning */
.keyboard-open .barcode-row {
    margin-top: -8%;
}

.keyboard-open-admin .barcode-row {
    margin-top: -14%;
}


.w-90 {
    width: 90% !important;
}

.p-6px {
    padding: 6px !important;
}

.barcode-required {
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    list-style: none;
}

.lil-disclaimer-text {
    position: absolute;
    bottom: 50px;
    font-size: 9px;
    color: #838383;
    right: 40px;
}

.select-lg-menu li {
    border-bottom: 1px solid #c5c5c5;
}

.select-lg-menu li:last-child {
    border-bottom: 0px solid #c5c5c5;
}

.select-lg-menu li a {
    font-weight: 600;
    text-transform: uppercase;
}

.large-input {
    padding: 15px 20px ;
    border-radius: 99px !important;
    font-size: 1.8rem;
}

::placeholder {
    /* For most modern browsers (Chrome, Firefox, Opera) */
    color: #8d8d8d !important;
    /* Replace '#8d8d8d !important' with your desired !important color */
    opacity: 1;
    /* Ensures consistent opacity across browsers, especially for Firefox */
}

::-webkit-input-placeholder {
    /* For older Chrome, Safari, and Opera */
    color: #8d8d8d !important;
}

:-moz-placeholder {
    /* For Firefox 18- */
    color: #8d8d8d !important;
}

::-moz-placeholder {
    /* For Firefox 19+ */
    color: #8d8d8d !important;
}

:-ms-input-placeholder {
    /* For Internet Explorer 10+ */
    color: #8d8d8d !important;
}

::-ms-input-placeholder {
    /* For Microsoft Edge */
    color: #8d8d8d !important;
}

.back-step-btn {
    background: #fff;
    border: none;
    padding: 4px 20px 4px 10px !important;

}

.back-step-btn:hover,
.back-step-btn:focus {
    background: #fff;
    border: none;
    padding: 4px 20px 4px 10px !important;
    border: none;

}
.btn-text{    font-weight: 700;
    color: #004c96;}
.input-icon {
    right: 18px !important;
}

.width28 {
    width: 24% !important;
}

.width30 {
    width: 30% !important;
}

.dark-blue-color{
    color: #004c96 !important;
}

.w-24 {
    width: 24% !important;
}
.w-28 {
    width: 28% !important;
}

.certificate .label {
    font-weight: 700;
}