._site_search_wrapper {
    position: relative;
    display: inline-block;
}

_site_search {
    border: none;
    background-color: transparent;
    padding: 8px;
    font-size: 16px;
}

span#text-mirror {
    padding-left: 0.5em;
    color: transparent;
    top: 43px;
}

#text-mirror {
    position: absolute;
    bottom: 0;
    left: 0;
    white-space: pre;
    pointer-events: none;
    visibility: hidden;

}

#text-mirror::after {
    content: '';
    display: block;
    border-bottom: 4px solid #6d5fff;
    /* Your desired border */
}

._site_search_progress {
    width: 100%;
    background: #1e1578;
    height: 5px;
}

._site_search_fill {
    z-index: 10;
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 0;
    overflow: hidden;
    color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    max-width: 100%;
    border-radius: 2px;
    min-width: 3px;
}

._site_search_container {
    min-width: 101px;
}

._search_label i,
._search_close_label i {
    transform: rotateZ(0deg);
    transition: 0.2s cubic-bezier(0.87, 0, 0.13, 1);

}

._search_label.active i,
._search_close_label.active i {
    transform: rotateZ(90deg);
    transition: 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}

._search_label,
._search_close_label {
    transform: scale(1);
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.87, 0, 0.13, 1);
    border-radius: 50px;
    padding: .5em 1em;
}

._search_label span,
._search_close_label span {
    transition: 0.2s cubic-bezier(0.87, 0, 0.13, 1);
    opacity: 0;
    color: white;
    padding-right: 1em;
}

._search_label.active,
._search_close_label.active {
    transform: scale(105%);
    transition: 0.2s cubic-bezier(0.87, 0, 0.13, 1);

    background: #1a1a1a;
}

._search_label.active span,
._search_close_label.active span {
    opacity: 1;
}

._search_icon {
    color: white;
}

._site_search_field {
    z-index: 99;
    position: fixed;
    width: 100%;
    top: -100px;
    left: 0;
    background: #3b2ae5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

._site_search_field.active {
    top: 0px;
    transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

._site_search_field i {

    cursor: pointer;
    color: white;
    font-size: 1.25em;
}

._search_results {
    z-index: 98;
    width: 100%;
    background: #3b2ae5;
    top: -80vh;
    position: fixed;
    left: 0;
    padding-left: 1em;
    padding-bottom: 2.5em;
    max-height: 400px;
    overflow-y: scroll;
    transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

._search_results.active {
    z-index: 100;
    top: 67px;
    padding-top: 2em;
    transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

._search_result {
    padding: .25em 0;
}

._search_result span.highlight {
    border-bottom: 2px dotted;
}

/* This styles the scrollbar track (the part the thumb moves along) */
._search_results::-webkit-scrollbar-track {
    background: #27225b;
}

/* This styles the scrollbar thumb (the part that you drag) */
._search_results::-webkit-scrollbar-thumb {
    background: #5f51e5;
}

/* Changes the thumb color on hover or when active */
._search_results::-webkit-scrollbar-thumb:hover {
    background: #abb1c5;
}

/* This styles the scrollbar itself (width and height) */
._search_results::-webkit-scrollbar {
    width: 8px;
    /* Width of the vertical scrollbar */
    height: 8px;
    /* Height of the horizontal scrollbar */
}

._search_result a,
.no-results {
    color: white;
    opacity: .7;
    text-decoration: none;
    font-size: 1.4em;
    display: flex;
    align-items: center;
}

._search_result a:hover {
    opacity: 1;
    transition: .2s ease-in-out;
}

._search_subtitle {
    color: white;
    opacity: 0;
    top: -22px;
    position: relative;
    transition: 0.2s cubic-bezier(0.87, 0, 0.13, 1);
    min-height: 18.5px;
}

._search_result:hover ._search_subtitle {
    top: 0px;
    opacity: 1;
    transition: 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}

._site_search_wrapper {
    padding: 1em;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

._site_search,
#text-mirror {
    background: transparent;
    border: none;
    color: white;
    flex: 1;
    font-size: 1em
}



._site_search::placeholder {
    color: white;
    opacity: .5;
}

._site_search:focus {
    border: none;
    outline: none;
}

._search_loader_indefinite {
    z-index: 100;
    visibility: hidden;
    width: 100%;
    height: 4px;
    background-color: #41e0ff;
    position: absolute;
    top: 0;
}

._search_loader_indefinite.active {
    visibility: visible;
    animation: indefinite_loading 2s infinite;

}

@keyframes indefinite_loading {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@media screen and (min-width: 768px) {

    ._site_search,
    #text-mirror {
        font-size: 2em;
    }

    ._search_result {
        padding: 0.5em 0;
    }

    ._search_result a,
    .no-results {
        font-size: 2em;
    }

    ._search_results.active {
        padding-top: 2em;
    }
}