.width-restriction {
    width: 280px;
}

.recommendations {
    max-height: 400px;
    overflow-y: scroll;
}

.recommendations::-webkit-scrollbar {
    width: 10px;
}

.recommendations::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.recommendations::-webkit-scrollbar-thumb {
    background: #888;
}

.recommendations::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.recommendations .material__title {
    font-family: "IBM Plex Serif", serif;
    font-size: 14px;
}

.recommendations .material__metadata {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

.recommendations .material {
    color: #000d32;
}

.recommendations .material:hover {
    text-decoration: none;
}

.recommendations .material-content {
    background-color: transparent;
    font-size: 13px;
    padding: 7px;
    transition: background-color .2s;
    width: 100%;
}

.recommendations .material-content:hover {
    background-color: #e6e6e6;
}

.recommendations .material-content .fa-circle {
    color: #5b95a5;
}

.recommendations .material-content .badge {
    background-color: #5b95a5;
}

.recommendations .material-content small {
    color: rgb(71, 71, 71);
}

.footer {
    font-style: italic;
    background-color: transparent;
}
.footer a {
    color: #5b95a5;
}
.footer a:hover {
    color: #456f7a;
    text-decoration: none;
}

#search-input {
    margin-top: 160px;
    text-align: center;
    margin-bottom: 20px;
}

#search-input img {
    width: 80%;

}

#search-options-elements,
#search-container {
    width: 600px;
}

#search-options-elements {
    margin-left: 156px;
    font-size: 12px;
}

@media screen and (max-width: 576px) {
    #search-options-elements {
        margin-left: 0px;
    }
}

#search-options-elements .navigation {
    background-color: transparent;
    display: inline-block;
    text-align: center;
}
#search-options-elements a {
    font-weight: 600;
    color: #5b95a5;
}

#search-options-elements .link:hover {
    text-decoration: none;
}

#search-options-elements .active .link {
    border-bottom: 3px solid #5b95a5;
}

#search-results-container {
    padding-left: 176px;
    padding-right: 16px;
    width: 100%;
}

#search-results {
    width: 600px;
}

@media screen and (max-width: 1360px) {
    #search-results-container {
        width: 789px;
    }
}

@media screen and (max-width: 804px) {
    #search-results-container {
        width: auto;
    }
    #search-results {
        width: auto;
    }
}

@media screen and (max-width: 576px) {
    #search-results-container {
        padding-left: 16px;
        width: auto;
    }
}

#search-results .recommendations {
    max-height: inherit;
    overflow: inherit;
}

#search-results .recommendations .material {
    font-size: 18px;
    color: #5b95a5;
}

#search-results .recommendations .material-content {
    background-color: transparent;
}

#search-results .recommendations .material-content .material-description {
    color: #3A3A3A;
}


#search-results .recommendations .material-content small {
    color: #5b95a5;
}

#search-results .recommendations .material:hover,
#search-results .recommendations .material-content .material-link {
    color: #6c757d;
}
#search-results .recommendations .material-content .material-link {
    word-break: break-all;
}

#search-results .navigation-buttons .btn {
    border-radius: 0px;
    border: 0px;

}

#search-results .navigation-buttons .page-item .btn-secondary {
    background-color: #5b95a5;
}

#search-results .navigation-buttons .page-item .btn-secondary:hover {
    background-color: #456f7a;
}

#search-results .navigation-buttons .btn.btn-tertiary {
    background-color: #eaeaea;
    color: #6c757d;
    font-weight: 600;
}

#search-results .navigation-buttons .btn.btn-tertiary.active {
    background-color: #c1c1c1;
    color: #1A1A1A;
}
#search-results .navigation-buttons .btn.btn-tertiary:hover {
    background-color: #d1d1d1;
    color: #3A3A3A;
}

#search-results-container .material-inspect-container {
    display: table-cell;
}

#search-results-container .material-inspect-container .material-title {
    font-size: 18px;
}



@media screen and (max-width: 1360px) {
    #search-results-container .material-inspect-container {
        display: none;
    }
    #search-results .inspect {
        display: none;
    }
}

#search-results .inspect {
    cursor: pointer;
}

#material-inspect {
    height: 600px;
    width: 100%;
    border: 0px;
}

.btn-rounded-border {
    border-radius: 50px;
    background-color: #eaeaea;
    font-weight: 600;
    font-size: 12px;
    width: 100%;
    color: #3a3a3a;
}

.btn-rounded-border:hover {
    background-color: #cacaca;
    color: #3a3a3a;
}