.searchbar a:link, .searchbar a:visited {
    background-color:#262626;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    width: 188px;
    border: 1px solid #5a5a5a; 
    border-radius: 7px;  
}

.searchbar a:hover, .searchbar a:active {
background-color: #3a3a3a;
color: white;
}

/* Styles for wrapping the search box */

.mainsearch {
    position: relative;
}

/* Bootstrap 4 text input with search icon */

.mainsearch .has-search .form-control {
    padding-left: 2.375rem;
}

.mainsearch .has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}
.spinner {
    position: relative;
    color:black;
    pointer-events: none;
    position: absolute !important;
    left: 7px;
    top: 6px;
    margin-top: 4px;
    
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-radius: 9999px;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: spinAround 500ms infinite linear;

}

.spinner::after {
    content: '';
    position: absolute !important;
    top: calc(50% - (1em / 2));
    left: calc(50% - (1em / 2));
    display: block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-radius: 9999px;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: spinAround 500ms infinite linear;
}

@keyframes spinAround {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}