/* Custom Select Box Styling */
.custom-dropdown .custom-select-box {
    appearance: none;
    border-radius: 5px;
    padding: 12px;
    font-size: 15px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;

}
.custom-dropdown-title{
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}
.custom-checkbox .custom-checkbox-container {
    appearance: none;
    border-radius: 5px;
    padding: 12px;
    font-size: 15px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.custom-date-filter .custom-input-box,
.custom-search .custom-input-box,
.custom-btn-con .custom_btn_add {
    width: 100%;
    border-radius: 5px;
    padding: 12px;
    font-size: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    background-color: white;
}

.custom_btn_add {
    background-image: linear-gradient(195deg, #EF5350 0%, #E53935 100%)  !important;
    cursor: pointer;
    color: white !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.custom_btn_add:hover {
    background-color: #2ab63f;
    transform: scale(1.05);
    color:  white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.search-wrapper {
    position: relative;
}


.custom-select-box:focus,
.custom-input-box:focus {
    outline: none !important;
    /* border-color: #4DAC51; */
}

input.custom-color-input:focus {
    background-color: rgba(232, 240, 254, 1);
    outline: none;
}

@media (max-width: 768px) {

    .custom-dropdown .custom-select-box,
    .custom-date-filter .custom-input-box,
    .custom-search .custom-input-box {
        margin-bottom: 10px;
    }
}

.custom-dropdown,
.custom-date-filter,
.custom-search,
.custom-btn-con {
    padding: 0;
    margin-bottom: 15px;
    margin-right: 15px;
}

/* button style */
.mc_status {
    display: inline-block;
    padding: 12px 14px;
    border-radius: 20px;
    width: 100px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}

/* Active Status */
.mc_status.mc_active {
    background-color: #e6f7e9; /* Light green background */
    color: #4caf50; /* Green text */
}

/* Pending Status */
.mc_status.mc_pending {
    background-color: #fff4e5; /* Light orange background */
    color: #ff9800; /* Orange text */
}

/* Warning Status */
.mc_status.mc_warning {
    background-color: #ffe5f0; /* Light pink background */
    color: #f50057; /* Pinkish-red text */
}

/* Danger Status */
.mc_status.mc_danger {
    background-color: #ffd6d6; /* Soft red background */
    color: #e53935; /* Bold red text */
}

/* Info Status */
.mc_status.mc_info {
    background-color: #d9ecff; /* Soft blue background */
    color: #2196f3; /* Blue text */
}

/* Secondary Status */
.mc_status.mc_secondary {
    background-color: #f0f0f0; /* Neutral gray background */
    color: #757575; /* Dark gray text */
}

/* Success Status */
.mc_status.mc_success {
    background-color: #e0ffe6; /* Light mint green */
    color: #2e7d32; /* Forest green */
}

/* Neutral Status */
.mc_status.mc_neutral {
    background-color: #f7f7f7; /* Ultra-light gray */
    color: #6b6b6b; /* Muted gray */
}

/* Highlighted Status */
.mc_status.mc_highlight {
    background-color: #fff8e1; /* Pale yellow */
    color: #f9a825; /* Amber */
}

/* Inactive Status */
.mc_status.mc_inactive {
    background-color: #e0e0e0; /* Light gray */
    color: #9e9e9e; /* Dim gray */
}

/* Attention Status */
.mc_status.mc_attention {
    background-color: #fff3e0; /* Peach background */
    color: #ff7043; /* Coral text */
}

/* Optional: Hover effect for statuses */
.mc_status:hover {
    opacity: 0.9;
    cursor: default; /* Maintains default cursor */
}


.mc_action-btn {
    color: #f44336;
    cursor: pointer;
    font-weight: bold;
  }
    .mc_view {
    background-color: rgb(65, 105, 225); /* Royal Blue */
    padding: 10px auto;
    font-weight: 900;
    color: aliceblue;
    border: 1px solid rgb(65, 105, 225);
    border-radius: 20px;
    width: 80px;
}

.mc_view:hover {
    border: 1px solid rgb(65, 105, 225); /* Royal Blue */
    color: rgb(65, 105, 225); /* Royal Blue */
    background-color: aliceblue;
}

/* table css */

    .mc_table-container {
      width: 100%;
      margin: 10px auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      overflow-y: auto;
     
    }
    
    /* Scrollbar Styling for WebKit Browsers */
    .mc_table-container::-webkit-scrollbar {
      width: 10px;
    }
    
    .mc_table-container::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 8px;
    }
    
    .mc_table-container::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 8px;
      border: 2px solid transparent;
      background-clip: content-box;
    }
    
    .mc_table-container::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }
    
    /* Scrollbar Styling for Firefox */
    .mc_table-container {
      scrollbar-width: thin;
      scrollbar-color: #888 #f1f1f1;
    }

    .mc_table {
      width: 100%;
      border-collapse: collapse;
    }

    .mc_caption {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
    }

    .mc_thead {
      background-color: #ffffff;
      border-bottom: 3px solid #e4e7eb;
    }

    .mc_thead th {
      padding: 20px 5px ;
      width: 150px;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }

    .mc_tbody {
      padding: 0px;
    }

    .mc_tbody tr {
      border-bottom: 1px solid #e4e7eb;
      width: 100%;
    }

    .mc_tbody tr:hover {
      background-color: #f9fafc;
    }

    .mc_tbody td {
      padding: 16px;
      text-align: center;
      color: #555;
      font-size: 12px;
      font-weight: 600;
    }
.setWidth{
    width: 300px;
}
   /* Disabled button styles */
#prevPage:disabled, #nextPage:disabled {
    background-color: rgb(219, 218, 218); /* Gray */
    color: white;
    cursor: not-allowed;
}

/* Hover effects for active buttons */
#prevPage:hover:not(:disabled), #nextPage:hover:not(:disabled) {
    transition: background-color 0.3s;
}
  
 

    .mc_tfoot {
      background-color: #ffffff;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      border-top: 3px solid #e4e7eb;
    }

    .mc_tfoot td {
      padding: 20px;
      color: #333;
    }

    .mc_pagination-container {
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 10px;
    }

    .mc_pagination-btn {
      padding: 8px 16px;
      background-color: #2ab63f;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s ease;
    }

    .mc_pagination-btn:hover:enabled {
      background-color: #45a049;
    }

    .mc_pagination-btn:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    .mc_page-number {
      font-size: 16px;
      font-weight: normal;
    }

    /* Responsive Styling */
    @media only screen and (max-width: 768px) {
      .mc_table-container {
        width: 100%;
        margin: 20px auto;
      }

      .mc_table {
        width: 100%;
        overflow-x: auto;
      }

      .mc_thead {
        display: none;
      }

      .mc_tbody td {
        display: block;
        padding: 15px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        width: 100%;
      }

      .mc_tbody tr {
        display: block;
        width: 100%;
        margin-bottom: 10px;
      }
  .mc_tbody tr:first-of-type {
   border-top: 1px solid #e4e7eb;
  }
  .mc_tbody td:before {
      content: attr(data-label) ": ";
      font-weight: bold;
      display: inline-block;
      margin-bottom: 5px;
      color: #333;
    }
      .mc_pagination-container {
        flex-direction: column;
        align-items: center;
      }

      .mc_pagination-btn {
        padding: 10px 20px;
        font-size: 16px;
        margin: 5px;
      }

      .mc_page-number {
        font-size: 18px;
      }
    }

    @media only screen and (max-width: 480px) {
      .mc_pagination-btn {
        padding: 10px 15px;
        font-size: 14px;
      }

      .mc_page-number {
        font-size: 14px;
      }

      .mc_tbody td {
        padding: 10px;
        font-size: 14px;
      }

      .mc_pagination-container {
        text-align: center;
      }
    }

.vh-45{
    /* padding: 100px !important; */
    height: 45vh;
}
.max-320{
  min-width: 240px;
  max-width: 300px !important;
}
.min-200{
  min-width: 200px;
}
.min-120{
  min-width: 120px;
}

.actionbutton {
  width: 28%;
  max-width: 100%;
  margin: 0.8%;
  font-size: 12px;
  transition: transform 0.3s ease-in-out;
  padding: 15px !important;
}

/* Hover styles */
.actionbutton:hover {
  background-color: #25D366 !important;
  border: none;
  cursor: pointer;
  transform: scale(0.9);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive styling for smaller screens */
@media screen and (max-width: 868px) {
  .actionbutton {
    width: 45%; /* More room for buttons side-by-side */
    font-size: 14px;
    padding: 12px !important;
  }
  .flex-center{
    justify-content: start !important;
  }
  .mc_custom-dropdown {
    min-width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  .actionbutton {
    width: 100%; /* Stack buttons vertically */
    font-size: 16px;
    padding: 14px !important;
    margin: 5px auto;
    display: block;
  }
  
}

.flex-center{
  justify-content: center;
  align-items: center;
}
/* drop Down */
    .mc_select_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  align-items: flex-end;
  font-family: "Segoe UI", sans-serif;
  margin-top: 10px;
}

.mc_custom-dropdown {
  position: relative;
  min-width: 20%;
}

.mc_label {
  font-size: 15px;
  font-weight: 600;
  color: #444;
  margin-bottom: 8px;
  display: block;
}

.mc_dropdown {
  position: relative;
  cursor: pointer;
}

.mc_dropdown-selected {
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  color: #333;
  position: relative;
  transition: border-color 0.3s;
}

.mc_dropdown-selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 10px;
  border: solid #666;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(135deg);
  transition: transform 0.3s;
  pointer-events: none;
}

.mc_dropdown.open .mc_dropdown-selected::after {
  transform: translateY(-50%) rotate(-45deg);
}

.mc_dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  margin: 0px;
  padding: 0px;
  margin-top: 6px;
  display: none;
  z-index: 99;
  max-height: 240px;
  overflow-y: auto;
  transition: all 0.3s;
}

.mc_dropdown-options li {
    margin: 0px;
  padding: 12px 16px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.mc_dropdown-options li:hover {
  background-color: #f0f0f0;
}

.mc_dropdown-options li.active {
  background-color: #e4efff;
  font-weight: 600;
  color: #2d7ef8;
}

/* page header */

  .mc_page-header {
    background-color: #ffffff;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e4e4e4;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .mc_back-button i {
    color: #2ab63f;
    font-size: 20px;
    transition: color 0.3s ease;
  }

  .mc_back-button:hover i {
    color: #219233;
  }

  .mc_page-title {
    font-size: 18px;
    font-weight: 600;
    color: #2ab63f;
    margin: 0;
  }

 .mc_insight_btn,
 .mc_delete_btn,
 .mc_edit_btn,
 .mc_view_btn {
     padding: 6px 12px;
     font-size: 10px;
     font-weight: 600;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: all 0.3s ease;
 }
 
 .mc_btn_group {
     display: flex;
     gap: 6px;
 }
 
 /* Insight button */
 .mc_insight_btn {
     background-color: #3498db;
     color: white;
 }
 .mc_insight_btn:hover {
     background-color: #2980b9;
     opacity: 0.9;
 }
 .mc_edit_btn{
    background-color: #074670;
    color: white;
 }
 .mc_edit_btn:hover {
    background-color: #084c79;
    opacity: 0.9;
}
 /* Delete button */
 .mc_delete_btn {
     background-color: #e74c3c;
     color: white;
 }
 .mc_delete_btn:hover {
     background-color: #c0392b;
     opacity: 0.9;
 }
 
 /* View button */
 .mc_view_btn {
     background-color: #25d366;
     color: white;
     font-size: 12px;
     margin-left: 6px;
     text-decoration: none;
 }
 .mc_view_btn:hover {
     background-color: #1ca94e;
     opacity: 0.9;
 }