.datatable-panel .dataTables_wrapper .dataTables_filter {
    padding: 10px 0;
    float: left;
    text-align: left;
}

    .datatable-panel .dataTables_wrapper .dataTables_filter label {
        position: relative;
        width: calc(100% - 28px); 
    }

    .datatable-panel .dataTables_wrapper .dataTables_filter input {
        height: 40px;
        padding: 11px 15px;
        margin: 0;
        background: transparent;
        border: 1px solid #D6D5E3;
        border-radius: var(--rnd-border-radius);
        color: var(--rnd-secondary-colour);
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        outline: none;
    }

        .datatable-panel .dataTables_wrapper .dataTables_filter input:hover {
            border-color: #6E67C1;
        }

        .datatable-panel .dataTables_wrapper .dataTables_filter input:focus {
            background: transparent;
            border-color: #6E67C1;
        }

        .datatable-panel .dataTables_wrapper .dataTables_filter input::placeholder {
            color: #84909F;
            opacity: 1;
        }

        .datatable-panel .dataTables_wrapper .dataTables_filter input:-ms-input-placeholder {
            color: #84909F;
        }

        .datatable-panel .dataTables_wrapper .dataTables_filter input::-ms-input-placeholder {
            color: #84909F;
        }

        .datatable-panel .dataTables_wrapper .dataTables_filter input[type=search] {
            padding: 7px 16px 7px 44px;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            width: 400px;
        }

            .datatable-panel .dataTables_wrapper .dataTables_filter input[type=search]::-ms-clear {
                display: none;
                width: 0;
                height: 0;
            }

            .datatable-panel .dataTables_wrapper .dataTables_filter input[type=search]::-ms-reveal {
                display: none;
                width: 0;
                height: 0;
            }

        .datatable-panel .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-decoration,
        .datatable-panel .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-cancel-button,
        .datatable-panel .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-results-button,
        .datatable-panel .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-results-decoration {
            display: none;
        }

    .datatable-panel .dataTables_wrapper .dataTables_filter label::before {
        content: '';
        width: 20px;
        height: 20px;
        mask-image: url(/assets/images/icons/search.svg);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: cover;
        -webkit-mask-image: url('/assets/images/icons/search.svg');
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: cover;
        background-color: rgba(17, 42, 70, 0.5);
        position: absolute;
        bottom: 10px;
        left: 15px;
    }


.datatable-panel .dataTables_scrollHead table.dataTable thead th.column-filter div:before {
    content: '';
    width: 16px;
    height: 16px;
    mask-image: url(/assets/images/icons/search.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    -webkit-mask-image: url('/assets/images/icons/search.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    background-color: rgb(82, 100, 122);
    position: absolute;
    top: 11.5px;
    left: 25px;
}

.datatable-panel .dataTables_scrollHead table.dataTable thead th.column-filter input {
    padding-left: 25px;
    color: var(--rnd-secondary-colour);
    width: 100%;
    height: 28px;
    background-color: transparent;
    border: none;
    border-radius: 2px;
}

    .datatable-panel .dataTables_scrollHead table.dataTable thead th.column-filter input:hover:not(:focus) {
        color: rgb(142, 160, 182);
    }

    .datatable-panel .dataTables_scrollHead table.dataTable thead th.column-filter input:focus {
        background-color: #FFFFFF;
        box-shadow: 2px 2px 16px rgba(38, 55, 67, 0.07);
        outline: none;
    }

    .datatable-panel .dataTables_scrollHead table.dataTable thead th.column-filter input:not(:focus)::placeholder {
        color: rgb(82, 100, 122);
    }

    .datatable-panel .dataTables_scrollHead table.dataTable thead th.column-filter input:hover:not(:focus)::placeholder {
        color: rgb(142, 160, 182);
    }


    @media (max-width: 280px) {
        .datatable-panel .dataTables_wrapper .dataTables_filter input[type=search] {
            width: 100%;
        }
    }

    @media (max-width: 600px) {
        .datatable-panel .dataTables_wrapper .dataTables_filter input[type=search] {
            width: 100%;
        }
    }

    @media (max-width: 991px) {
        .datatable-panel .dataTables_wrapper .dataTables_filter input[type=search] {
            width: 100%;
        }
    }

    @media (max-width: 462px) {
        .dataTables_filter {
            width: calc(100% - 121px);
        }
    }