body {
    background: #e6e5e5;
  }
  
  .ck-editor__editable,
  textarea {
    min-height: 150px;
  }
  
  .datatable {
    width: 100% !important;
  }
  
  .dataTables_length,
  .dataTables_filter,
  .dt-buttons {
    margin-bottom: 0.333em;
  }
  
  .dt-buttons .btn {
    margin-left: 0.333em;
    border-radius: 0;
  }
  
  .table.datatable {
    box-sizing: border-box;
    border-collapse: collapse;
  }
  
  table.dataTable thead th {
    border-bottom: 2px solid #dee2e6;
  }
  
  .required-label::after {
    content: " *";
    color: red;
  }
  
  .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #dee2e6;
  }
  
  .select2 {
    max-width: 100%;
    width: 100%;
  }
  
  table.dataTable thead .sorting,
  table.dataTable thead .sorting_asc,
  table.dataTable thead .sorting_desc {
    background-image: none;
  }
  
  .btn-group-xs > .btn,
  .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
  
  .searchable-title {
    font-weight: bold;
  }
  
  .select2-container--open {
    z-index: 9999;
  }
  
  .searchable-fields {
    padding-left: 5px;
  }
  
  .searchable-link {
    padding: 0 5px 0 5px;
  }
  
  .searchable-link:hover {
    cursor: pointer;
    background: #eaeaea;
  }
  
  .select2-results__option {
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .form-group .required::after {
    content: " *";
    color: red;
  }
  
  .form-check.is-invalid ~ .invalid-feedback {
    display: block;
  }
  
  .main-sidebar {
    border-radius: 8px;
    background: #4d5357;
    box-shadow: none;
    margin: 10px;
  }
  
  .nav-sidebar > .nav-item .nav-icon {
    color: #ffb612;
  }
  
  .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: #ffb612;
    border-radius: 4px;
    color: #4d5357;
  }
  
  .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    color: #4d5357;
  }
  
  .content-wrapper {
    background-color: #e6e5e5;
  }
  
  .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .btn {
    padding: 8px 12px;
    font-size: 14px;
    margin: 4px;
    white-space: nowrap;
  }
  
  .button-group .btn {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  @media (min-width: 768px) {
    .main-footer,
    .main-header {
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
      border-radius: 0.25rem;
      margin: 11px 10px 10px 270px;
    }
    .content-wrapper {
      margin-left: 263px;
    }
  }
  
  @media (max-width: 991.98px) {
    .main-sidebar,
    .main-sidebar:before {
      box-shadow: none !important;
      margin-left: -250px;
    }
  }
  
  button.btn.btn-primary.btn-block.btn-flat {
    background-color: #ffb612;
    border: 0px;
    border-radius: 3px;
    color: #4d5357;
    text-align: center;
    font-size: 16px;
    position: absolute;
    right: 10px;
    min-width: 160px;
    font-weight: 600;
  }
  
  .login-page,
  .register-page {
    background: #4d5357;
  }
  
  .login-logo a,
  .register-logo a,
  a.brand-link span {
    color: #444;
    content: url(/logo.png);
  }
  
  #recover {
    color: #ffb612;
    text-decoration: underline;
    text-decoration-color: #ffb612;
    text-decoration-thickness: 2px;
  }
  
  p.login-box-msg {
    font-size: 23px;
    text-transform: uppercase;
    font-weight: 500;
  }
  
  li.nav-item.dropdown.notifications-menu a {
    background: #ffb612;
    border-radius: 100px;
    font-size: 16px;
    line-height: 18px;
    padding: 11px 15px;
    color: #4d5357;
  }
  
  button.btn.btn-warning {
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #4d5357;
    font-weight: 600;
    font-size: 14px;
  }
  
  button.btn.btn-info {
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: white;
    font-weight: 600;
    font-size: 14px;
  }
  
  a.btn.btn-success {
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-weight: 600;
    font-size: 14px;
  }
  
  .fa-envelope:before {
    content: "\f0e0";
    color: 4d5357;
  }
  
  .page-link {
    color: #4d5357;
  }
  
  .fa-bars:before {
    font-size: 23px;
  }
  
  .actions {
    color: #4d5357;
    border: 0;
    font-size: 20px;
    display: block;
    text-align: center;
    background-color: transparent !important;
  }
  
  #base_imponible,
  #total {
    border: none;
    background-color: transparent;
    font-size: inherit;
    font-weight: inherit;
  }
  
  #items-container {
    display: flex;
    flex-direction: column;
  }
  
  #items-container .item {
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
  }
  
  #items-container .item input,
  #items-container .item button {
    padding: 0.375rem 0.75rem;
    border: 1px solid #dee2e6;
    margin: 0;
  }
  
  #items-container .item button {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .add-item-container {
    display: block;
    padding-top: 10px;
  }
  
  .add-item-container button {
    width: auto;
    padding: 8px 12px;
    font-size: 14px;
    margin: 4px;
    float: right;
  }
  
  .input-hora {
    width: auto; /* Ajusta este valor según sea necesario */
  }
  
  /* Estilo para eliminar las flechas de incremento/decremento en los campos numéricos */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  @media only screen and (max-width: 600px) {
    .info-box-content {
      padding: 5px 10px;
      flex: 0;
      position: absolute;
      color: white;
      font-size: 16px;
      left: auto;
      width: 86%;
      top: 43%;
      text-align: center;
    }
    span.info-box-icon {
      width: 100%;
      padding-bottom: 13px;
    }
    .card-header {
      background-color: #ffb612;
      font-size: 22px;
    }
    .dataTables_wrapper .dataTables_scroll {
      overflow: scroll !important;
    }
  
    .content {
      padding: 10px;
    }
    .card-body {
      padding: 10px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    input[type="text"],
    input[type="number"],
    input[type="date"],
    .form-control {
      width: 100%;
      box-sizing: border-box;
    }
    .btn,
    .btn-group .btn {
      flex: 1 1 auto;
      margin-right: 0;
      text-align: center;
      max-width: auto;
      min-width: 15%;
      width: 100%;
      margin-top: 10px;
    }
    .btn-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 8px;
    }
    .form-group label {
      display: block;
    }
    .row {
      margin: 0;
    }
    dl.row {
      margin: 0;
    }
    dt.col-sm-4,
    dd.col-sm-8 {
      padding: 0;
      display: block;
      width: 100%;
      margin-bottom: 5px;
    }
    table {
      width: 100%;
      margin-bottom: 10px;
    }
    thead th,
    tbody td {
      white-space: nowrap;
      padding: 8px;
    }
    .table-responsive {
      border: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .card-header h5 {
      font-size: 18px;
      text-align: center;
      margin-bottom: 10px;
    }
    .btn-secondary.btn-sm,
    .btn-danger {
      width: 100%;
      margin-bottom: 10px;
    }
  
    #items-container .item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
    }
  
    #items-container .item input,
    #items-container .item button {
      width: 100%;
      margin: 5px 0;
    }
    .input-hora {
        width: auto; /* Ajusta este valor según sea necesario */
      }
  }