* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "poppins";
}

body,
html {
    height: 100%;
    width: 100%;
}

::-webkit-scrollbar {
    width: 0px;
}

.table-container ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgb(210, 210, 210);
    border-radius: 50px;
}

.table-container ::-webkit-scrollbar-thumb {
    background-color: rgb(225, 68, 68);
    border-radius: 50px;
}

.login {
    background-image: url('https://images.pexels.com/photos/439416/pexels-photo-439416.jpeg?auto=compress&cs=tinysrgb&w=1900');
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    position: relative;

    .form {
        position: relative;
        z-index: 2;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #500e0d90;
        /* background: linear-gradient(to right, #793f3edd, #541211, #500e0dea, #00000085); */
        height: 100%;
        width: 100%;
    }

    .login-content {
        background: linear-gradient(to right, #202020c8, #202020c8);
        width: 50%;
    }

    button {
        background: #bc1c1c;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        /* transition: all ease .4s; */
    }

    button:hover {
        background: linear-gradient(to right, #e73835f5, #500e0d, #500e0dea, #e73835f5);
    }

    .forget-pass {
        color: rgb(97, 97, 250);
        font-size: 13px !important;
    }

    .forget-pass:hover {
        text-decoration: underline !important;
        transition: all ease-in-out .4s;
    }
}

@media (max-width: 1024px) {
    .login-content {
        width: 80% !important;
    }
}

@media (max-width: 776px) {
    .login-content {
        width: 90% !important;
    }

}

.clear-btn {
    border: none !important;
    color: red;
}

.edit-user {
    display: none;
}

a {
    color: #fff !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer;
}

button {
    font-size: 14px !important;
}

.nav-link:hover {
    color: #fff !important;
}

.nav-item .nav-link.active {
    color: red !important;
    font-weight: 600;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.counters {
    /* background-color: #fff1f1; */
    /* background-color: #fff; */
    /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
    border-radius: 8px;

    h6 {
        font-size: 14px;
        color: #4e4e4e;
    }

    small {
        font-size: 14px;
        font-weight: 600;
    }
}

.collapse-btn {
    background-color: transparent;
    border: none;
}

.add-btn {
    background-color: #DC2F2B;
    color: #fff;
    border: none;
}

.filter button,
.exp-btn {
    background-color: #DC2F2B;
    border: none;
}

input::placeholder,
textarea::placeholder {
    font-size: 12px;
    color: #a4a4a4;
}

h6 {
    font-weight: 600 !important;
}

.rotate {
    transform: rotate(90deg);
    transition: transform 0.4s ease;
}

.table-container {
    overflow-x: auto;
}

/* .table-responsive {
    border: 1.5px solid #0000001d;
} */

div.dt-container div.dt-layout-row.dt-layout-table {
    overflow-x: auto;
}


@media (max-width: 776px) {

    div.dt-container .dt-length,
    div.dt-container .dt-search,
    div.dt-container .dt-info,
    div.dt-container .dt-processing,
    div.dt-container .dt-paging {
        text-align: left !important;
    }
}

div.dt-container.dt-empty-footer tbody>tr:last-child>* {
    border-bottom: none !important;
}

tr,
th,
td {
    font-size: 10px;
    border-bottom: none !important;
    padding: 20px 10px !important;
}


/* tbody tr:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;  
    scale: 0.99;
    transition: all ease .4s;
} */

div.dt-container .dt-search input {
    border-radius: 50px !important;
}

.edit,
.del {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: .2rem .4rem;
    border-radius: 4px;
    cursor: pointer;
}

div.dt-container select.dt-input {
    margin-right: 7px;
}

.dt-info {
    font-size: 12px;
}

table.dataTable thead>tr>th.dt-orderable-asc,
table.dataTable thead>tr>th.dt-orderable-desc {
    white-space: nowrap;
}

input:focus {
    outline: none !important;
}

table.dataTable>tbody>tr:first-child>* {
    white-space: nowrap;
}