@media (max-width: 767px) {
    .offcanvasSearch
    {
        height:100%!important;
        transition: transform 0.4s ease-in-out; /* Adjust the timing here */
        overflow: hidden!important;
        position: fixed!important;
        touch-action: none!important;
    }
    .search-canvas-header
    {
        padding: 0px;
        border-bottom: 1px solid #D4D4D4
    }
    .search-canvas-input-container
    {
        flex-grow:1;
        padding:16px 16px 16px 0px;
    }
    .search-canvas-close
    {
        padding:16px;
    }
    .search-canvas-input
    {
        width:100%;
        border:none;
        outline:none;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        /* color: #7E7E7E; */
        /* padding: 0px 10px; */

    }
    .search-canvas-input::-webkit-search-cancel-button {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            background: url("../images/icons/close.svg") no-repeat 50% 50%;
            cursor: pointer;
        }
    
    .search-canvas-input:focus
    {
        outline:none;
    }
    .search-canvas-result-container
    {
        padding:0px;
        scrollbar-width: none;
    }
    .flex-container {
        padding: 12px!important;
    }
    li.ff-header__search-result:last-child {
        border-bottom: 1px solid #F2F2F2;
    }
    .ff-header__search-result-btn-overwrite
    {
        padding:0px! important;
        text-align: end !important;
    }
    .ff-button__plain-small.ff-button__plain-arrow::after {
        height: 9px;
    }
    .search-main-title
    {
        font-size: 14px!important;
        line-height: 22px!important;
        font-weight: 400!important;
        color: #3E3E3E!important;
    }
    .search-main-title b
    {
        font-weight: 600!important;
    }
    .search-sub-title
    {
        font-size: 12px!important;
        font-weight: 400!important;
        line-height: 20px!important;
        color:#51534F!important;
    }

    .search-modal-sheet
    {
        background:#fff;
        overflow: hidden!important;
        position: fixed!important;
        touch-action: none!important;
    }
    .search-modal-header .close {
        padding:16px;
        margin:0;
        opacity: 1;
    }
    .search-modal-dialog
    {
        margin:0px;
    }
    .search-modal-header
    {
        align-items: center;
        padding:0px;
    }
    .search-modal-result-body
    {
        border: none;
        height:100%;
        min-height:90vh;
    }
    .flex-container-row
    {
        overflow-x: scroll;
        scrollbar-width: none;
    }
}