.brand-logo img {
  width: 170px;
  height: auto;
  object-fit: contain;
}
.custom-uploader {
  background-color: #efefef;
  padding: 32px;
  border-radius: 20px;
}
 
input[type=file] {
  padding: 4px;
  margin: -4px;
  position: relative;
  outline: none;
  /* File Selector Button Styles */
  /* Faked label styles and icon */
  /* Handle Component Focus */
}
input[type=file]::file-selector-button {
  border-radius: 4px;
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  /*
    This is a hack to change the button label. 
    I'm hiding the default label and then 
    manually applying the width based on 
    updated icon and label.
  */
  width: 132px;
  color: transparent;
  /*
    Firefox doesn't support the pseudo ::before 
    or ::after elements on this input field so 
    we need to use the @supports rule to enable 
    default styles fallback for Firefox.
  */
}
@supports (-moz-appearance: none) {
  input[type=file]::file-selector-button {
    color: var(--primary-color);
  }
}
input[type=file]::file-selector-button:hover {
  background-color: #f3f4f6;
}
input[type=file]::file-selector-button:active {
  background-color: #e5e7eb;
}
input[type=file]::before {
  position: absolute;
  pointer-events: none;
  top: 14px;
  left: 16px;
  height: 20px;
  width: 20px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}
input[type=file]::after {
  position: absolute;
  pointer-events: none;
  top: 16px;
  left: 40px;
  color: var(--primary-color);
  content: "Upload File";
}
input[type=file]:focus-within::file-selector-button, input[type=file]:focus::file-selector-button {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.card.todo-container {
  padding: 50px 30px;
}

/*Date table*/
        .dataTables_filter {
            position: relative;
            flex: 1;
        }
        .dataTables_filter input {
       
            padding: 7px 35px !important;
            border: 2px solid #ddd !important;
            border-radius: 07px !important;
            font-size: 16px !important;
            transition: all 0.3s ease !important;
            outline: none !important;
            color: #2c3e50 !important;
        }
         
        .dataTables_filter input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            background-color: #fff;
        }
        
        .dataTables_filter::before {
            content: '\f002';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 65px;
            top: 50%;
            transform: translateY(-50%);
            color: #7f8c8d;
            z-index: 1;
        }
        #DataTables_Table_0_filter label{
          visibility: hidden;
        }
        #DataTables_Table_0_filter{
         margin-bottom: 20px;
        }
        #DataTables_Table_0_filter label input{
            display: inline-block !important;
            visibility: visible;
        }
        div.dataTables_wrapper div.dataTables_filter input {
  margin: 0px !important;
}
#DataTables_Table_0_length{
    margin-top: 10px;
}
.odd{
    background-color: white !important;
}
table.dataTable.display > tbody > tr.odd > .sorting_1, table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {
  box-shadow: none !important;
}
table tbody  tr.odd  *, table.dataTable.display  tbody  tr.odd  {
     box-shadow: none !important;
}

table td{
    box-shadow: none !important;
    background-color: white !important;
}
.btn-link{
    border: none !important;
}
table i{
    color: #0099f6 !important;
    font-size: 16px !important;
}
table .btn-link:hover{
    background-color: transparent !important;
}

.app-menu ul li a {
  text-decoration: none;
  color: #40475c;
  font-size: 14px;
  margin: 3px 15px;
  padding: 10px 15px;
  display: block;
  border-radius: 3px;
  line-height: 20px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.app-menu ul li a i:not(.has-sub-menu) {
  margin-right: 13px;
  vertical-align: top;
  line-height: 20px;
  filter: invert(41%) sepia(17%) saturate(674%) hue-rotate(182deg) brightness(95%) contrast(89%);
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.btn i {
  vertical-align: text-top;
  line-height: initial !important;
  margin-right: 6px;
  margin-left: -8px;
  font-size: 20px;
}