/*
Loading animation
Animation modified from StackOverflow answer
https://stackoverflow.com/a/23985078
*/

/* @keyframes opacityAnimation {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}
@-o-keyframes opacityAnimation {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}
@-moz-keyframes opacityAnimation {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}
@-webkit-keyframes opacityAnimation {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}

.ui-autocomplete-loading {
    -webkit-animation: opacityAnimation 0.5s infinite;
    -moz-animation: opacityAnimation 0.5s infinite;
    -o-animation: opacityAnimation 0.5s infinite;
    animation: opacityAnimation 0.5s infinite;
} */

.ticket-search #loading-indicator {
    position: absolute;
    top: 58%;
    left: calc(100% - 21px);
    transform: translate(-50%, -50%);
    z-index: 1; /* Make sure it's above the input field */
}
 

.with-border {
    border-bottom: 0.3px solid rgba(198, 198, 198, 1);
}

.ui-menu {
    border-radius: 0.6875rem;
    background: #FFFF;
}

.ui-menu-item-wrapper {
    border-radius: 0.6875rem;
    border: none !important;
    width: 100% !important;
}

.header-category {
    font-weight: 700 !important;
    /* margin-left: 28px !important; */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90% !important;
    font-size: 18px !important;
    color: #121317 !important;
    padding-top: 26px !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.header-category-last {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90% !important;
    color: #121317 !important;
    padding-top: 18px !important;
    padding-bottom: 0px !important;
    margin-bottom: 10px !important;
}

/* Hover styling from:
https://stackoverflow.com/a/50972711
*/
.ui-menu-item-wrapper.ui-state-active {
    background: transparent;
}

#ui-id-1 {
    max-height: 388px;
    overflow-y: auto; /* Add vertical scrollbar if needed */
    z-index: 1000;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25) !important;
}

#ui-id-1::-webkit-scrollbar {
    width: 8px;
}

#ui-id-1::-webkit-scrollbar-track {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

#ui-id-1::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px; 
}

#ui-id-1::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* end here */

.autocomp-label {
    color: #4E4E4E;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.autocomp-category {
    color: rgba(10, 17, 88, 0.47);
    font-style: italic;
    font-size: 0.6em;
}

/*
Responsive logo imaging from the following link:
https://stackoverflow.com/a/11860417
*/
.autocomp-img {
    /* max-width: 50px;
    height: auto; */
    max-height: 50px;
    width: auto;
}

/* @media (min-width: 1024px) {
    .autocomp-img {
        width: 15%;
        height: auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .autocomp-img {
        width: 30%;
        height: auto;
    }
}

@media (max-width: 767px) {
    .autocomp-img {
        width: 60%;
        height: auto;
    }
} */

.autocomp-link {
    text-decoration: none;
}

/* .image-div {
    width: 20%;
    height: 100%;
}

.text-div {
    width: 80%;
    height: 100%;
}

.text-div * {
    width: 100%;
    height: 100%;
} */

.image-div, .text-div {
    min-height: 40px;
}

/* Media query here */
@media screen and (max-width: 500px) {
    .autocomp-label {
        color: #121317;
        /* text-transform: uppercase; */
        font-weight: 400;
        font-size: 14px;
    }

    .autocomp-img {
        width: 34px !important;
        height: 34px !important;

    }
}