@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');

.hidden-modal { opacity: 0; position: absolute; z-index: -999; }

#search-scanner {
    position: absolute;
    width: 50px;
    height: calc(100% - 4px);
    margin: 2px 5px;
    padding: 0;
    border-radius: 7px;
    transition: color .2s, background .2s, background-color .2s, border .2s, border-color .2s;
}
#search-scanner span { font-family: 'Libre Barcode 128 Text', sans-serif; font-size: 24px; }

@media only screen and (max-width: 1200px) {
    #search-scanner + .search-category { right: 100px !important; }
    #search-scanner {
        right: 40px;
        background: none;
    }
    #search-scanner:hover { color: #777; }
}

@media only screen and (max-width: 991px) {
    #search-scanner + .search-category { right: 41px !important; }
    #search-scanner { right: unset; }
    #search-scanner:hover { color: white; background: #EE2D43; }
}

@media only screen and (max-width: 856px) {
    #search-scanner + .search-category { display: none; }
    #search-scanner {
        right: 40px;
        background: none;
    }
    #search-scanner:hover { color: #777; background: none; }
}

@media only screen and (max-width: 768px) {
    #search-scanner {
        right: 130px;
        height: 40px;
        background: none;
        border: 0px;
    }
}