#modelFilter, #serialFilter{
    display:block;
    width:100%;
    background-image: url('/css/searchicon.png');
    background-position: 10px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
}

.filterClear{
    cursor:pointer;
    color:red;
}

#modelList, #serialList {
    list-style-type: none;
    padding: 0;
    margin: 0;
    cursor:pointer;
}

#modelList li, #serialList li {    
    border-radius:0.25em;
    margin-top: 0.25em;
    background-color: #f6f6f6;
    padding: 6px;
    text-decoration: none;
    font-size: 14px;
    color: black;
    display: block;
}

#unitDisplay{
    background-color:#e6e6e6;
    padding: 1em;
    border-radius: .25em;
}

.ownersDetails{
    border-radius:0.25em;
}

button.btn.btn-primary.m-1:active{
    border:4px solid orange;
}

/* Hide all steps by default: */
.tab {
    display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

/* Mark the active step: */
.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #04AA6D;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}

ul.ownersDetails {
    list-style-type: none;
    margin: 0;
    padding: 1rem;                               
    }

.active-unit{
    border: 5px solid #17a2b8 !important;
    border-radius:.5rem;
}

.borderBlink{    
    border: 2px solid red;
    /* add 'border-color: transparent' if you wish no border to show initially */  
}

#brandsBtns{                
    animation: borderBlink 1s step-end infinite;
}

/* Brands */

@media (max-width: 40em) {
.brand-button-wrap {
    margin-top: -1.5em;
}
}

.button-label {
display: inline-block;
padding: .2em 1em;
margin: 0.5em;
cursor: pointer;
color: #292929;
border-radius: 0.25em;
background: #efefef;
transition: 0.5s;
-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}
.button-label h1 {
font-size: 1em;
/*   font-family: "Lato", sans-serif; */
}
.button-label:hover {
background: #d6d6d6;
color: #101010;
/* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32); */
}
.button-label:active {
transform: translateY(2px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}
@media (max-width: 40em) {
.button-label {
    padding: 0em 1em 3px;
    margin: 0.25em;
}
}

.button:checked + .button-label {
background: #007bff;            
color: #efefef;
}
.button:checked + .button-label:hover {
background: #2c75d2;
color: #e2e2e2;
}

.hidden {
display: none;
}

.green{
    background-color:#04AA6D;
}