#searchInput:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem #ffffff !important;
}

#button-addon4 {
    pointer-events: none;
}

#button-addon4:focus,
#button-addon4:active {
    outline: none !important;
    box-shadow: none;
}

#searchInput::-webkit-input-placeholder {
    color: rgb(147, 144, 144);
    font-size: 16px;
    font-weight: 400 !important;
}

.button-wrap {
    margin-right: 15px;
    pointer-events: none;
}

.button-wrap button {
    padding: 2px .4rem !important;
    font-size: .775rem !important;
    background-color: #005773 !important;
    border-color: #005773 !important;
}

/* Set the default styles for non-active elements */
.text-color {
    color: #000000;
    /* Default text color is dark */
    transition: color 0.3s ease;
}

/* Style the active element */
.search-wrap.active .text-color {
    color: #ffffff;
    /* Active element text color is white */
}

.search-wrap.active .search-content,
.search-wrap.active .search-content:hover {
    background-color: #005773;
}

/* Change the text color to light on hover */
.search-wrap:hover .text-color {
    color: #ffffff;
    /* Light text color on hover */
}

/* Change background color of the search-content on hover */
.search-wrap:hover .search-content {
    background-color: #005773;
    transition: background-color 0.3s ease;
}

.hamurger-btn span {
    height: 2px !important;
}

.search-wrap {
    position: unset;
    transform: unset;
}

#footerSearchModal i {
    background-color: var(--tg-primary-blue-color) !important;
}

@media only screen and (max-width: 768px) {
    #footerSearchModal {
        display: none !important;
    }
}


@media only screen and (min-width: 768px) {
    #mobileSearchButton {
        display: none !important;
    }
}