.dataTables_filter{
    margin-bottom: 10px;
}
.table{
    border: 1px solid #F2F2F2;
}
.title-button{
    padding:20px 0px 15px 0px
}
.login-background{
    background-image: url('/assets/img/login-bg.jpeg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    height: 100%
}
.preview-product{
    height: 150px !important;
    width: 100%;
}
.transaction-product{
    width: 100%;
    height: 185px !important;
}
.product-name{
    height: 100px !important;
    text-align: center;
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.time-ago {
    width: 100px;
}
.card-value {
    font-size: 22px !important;
}
.paginate_button{
    border-radius: 50px !important;
    background-color: white !important;
    border-color: white !important;
}
.dataTables_wrapper select {
    border: 1px solid slategray;
    background-color: white;
    border-radius: 5px;
}
/* Spinner Styling */
.spinner-border {
    width: 6rem;
    height: 6rem;
    border-width: 5px;
    animation: spin 1.5s linear infinite;
}

.loading-info {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
}

.loading-message {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1rem;
}
.day{ padding: 7px }
.month{ margin: 10px }
.year{ margin: 10px }

.selectize-control.single .selectize-input {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    line-height: 1.5;
    background-color: #fff;
}

.selectize-control.single .selectize-input.focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 1280px ~ 1439px = Custom "md" */
@media (min-width: 1280px) and (max-width: 1439px) {
  .col-aura {
    width: 33.3333%;
    float: left;
  }

  .card-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
  }

  body {
    font-size: 12px;
  }

  .card-value {
    font-size: 15px !important;
  }

  .card-title {
    font-size: 16px !important;
  }

  select {
    font-size: 12px !important;
  }

  input {
    font-size: 12px !important;
  }

  .nav-link {
    font-size: 14px !important;
  }

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

  textarea {
    font-size: 12px !important;
  }

  a {
    font-size: 12px !important;
  }

  table {
    font-size: 12px !important;
  }

  .d-lg-block {
    font-size: 20px !important;
  }

  .product-name {
    height: 75px !important;
  }

  .transaction-product {
    height: 165px !important;
  }
}

/* 1920px+ = Custom "xl" */
@media (min-width: 1440px) {
  .col-aura {
    width: 25%;
    float: left;
  }
}

@media (min-width: 720px) and (max-width: 1279px) {
  .col-aura {
    width: 33%;
    float: left;
  }

  body {
    font-size: 14px;
  }

  .card-value {
    font-size: 15px !important;
  }

   select {
    font-size: 12px !important;
  }

  input {
    font-size: 12px !important;
  }

  .nav-link {
    font-size: 14px !important;
  }

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

  textarea {
    font-size: 12px !important;
  }

  a {
    font-size: 12px !important;
  }
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #f8f9fa !important; /* Solid background */
    color: #212529 !important;
    border: 1px solid #dee2e6;
    border-radius: 50px;
    border: 1px solid #583432 !important;
    box-shadow: none !important;
    margin: 4px 4px !important;  /* Adjust spacing as needed */
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #583432 !important;
    color: white !important;
    border: 1px solid #583432 !important;
    box-shadow: none !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #583432 !important;  /* Darker green on hover */
    color: white !important;
    cursor: default;  /* Optional: keep default cursor */
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled {
    background-color: white !important;  /* Gray background */
    color: #6c757d !important;             /* Muted text */
    border: 1px solid #583432 !important;
    cursor: not-allowed;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
    background-color: white !important;  /* Gray background */
    color: #6c757d !important;             /* Muted text */
    border: 1px solid #583432 !important;
    cursor: not-allowed;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #583432 !important; /* Active button color */
    color: white !important;
    border: 1px solid #583432 !important;
    box-shadow: none !important;
    font-weight: bold;
  }