/* DataTables.net Style Overrides */
.datatable-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 1rem;
}

.projects-table table {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Align to the right */
    float: none !important;
    text-align: left !important;
    flex-grow: 1; /* Allow the filter to take up available space */
}

.dataTables_wrapper .dataTables_filter input {
    margin-right: 0.5rem !important;
    display: inline-block !important;
}

.dataTables_wrapper .projects-filter-container {
    margin-left: 10px;
}

.dataTables_wrapper .new-project-btn-container {
    margin-left: 10px;
}

.dataTables_paginate {
    float: right !important;
    padding-top: 0.5em;
}

.dataTables_info {
    float: left !important;
    padding-top: 0.85em;
}

/* Correct border-bottom for DataTables.net */
.dataTable td, .dataTable th {
    padding: 0.75rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #e0e5ec;
    border-right: 0;
}

.dataTable td:last-child, .dataTable th:last-child {
    border-right: 1px solid #e0e5ec;
}
.dataTable > thead > tr > th {
    cursor: pointer;
    border-bottom-width: 1px;
}

.dataTable thead tr th {
    position: relative;
}

.dataTable thead tr th:after,
.dataTable thead tr th:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    right: 10px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.2;
}

.dataTable thead tr th:before {
    border-top: 4px solid #000;
    bottom: 12px;
}

.dataTable thead tr th:after {
    border-bottom: 4px solid #000;
    border-top: 4px solid transparent;
    top: 5px;
}

.dataTable thead tr th.sorting_asc:after {
    opacity: 0.6;
}

.dataTable thead tr th.sorting_desc:before {
    opacity: 0.6;
}

table.dataTable thead>tr>th.sorting:after {
    margin-top: 5px;
}

.projects-table input.form-control {
    width: 280px;
    height: 44px;
}

button#project-status-filter-btn {
    width: 40px;
    border: none !important;
}

#project-status-filter-btn i {
    border-radius: 20px;
    border: 1px solid #c8c8c8;
    padding: 10px;
    font-size: 1.2em;
    color: #9c9c9c;
}

.projects-filter-container .dropdown-menu {
    width: 180px;
}