/*
    |--------------------------------------------------------------------------
    | Global css
    |--------------------------------------------------------------------------
    |
    | This section contains custom global css accessible to all users.
    | These scripts are loaded globally and are available for use throughout the application.
    | Let's create something amazing!
    |
    */

  @media (min-width: 768px) {
    #sidebar .navbar-brand-img {
      width: 80px;
      height: auto;
      max-height: none;
    }
  }

  .is-invalid {
    color: var(--bs-form-invalid-color);
    font-size: .8125rem;
    margin-top: 0;
    width: 100%;
  }

  .invalid-feedback {
    display: block;
  }

  .dataTables_filter {
    display: none;
  }

  .dataTables_paginate {
    margin-top: 20px;
    float: right;
  }

  .dataTables_info {
    margin: 20px;
  }

  .table-responsive {
    min-height: 350px;
  }


  body {

    overflow-x: hidden;
  }
.navbar li a{
    color: #fff !important;
    text-decoration: none;
}
#sidebarUser{
    border-color:#1F2937 !important;
}
  /* Media query for screens 2560px and above */
  @media screen and (min-width: 2560px) {
    .table-responsive {
      overflow-x: hidden;
    }

    .modal {
      --bs-modal-card-body-max-height: 650px !important;
    }
  }

  /* Initially hide the submenu */
  .sub-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    /* Background color of submenu */
    padding: 10px;
    /* Adjust padding as needed */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Add shadow for a better look */
    min-width: 150px;
    /* Set a minimum width for the submenu */
    z-index: 1000;
    /* Ensure the submenu appears above other elements */
  }

  /* Position the submenu below the parent nav item */
  .nav-item {
    position: relative;
  }

  /* Show the submenu when hovering over the parent nav item */
  .nav-item:hover .sub-menu {
    display: block;
  }

  /* Style the links inside the submenu */
  .sub-menu a {
    display: block;
    color: #333;
    /* Text color */
    text-decoration: none;
    padding: 5px 10px;
    /* Adjust padding as needed */
  }

  /* Add hover effect for the submenu links */
  .sub-menu a:hover {
    background-color: #f5f5f5;
    /* Hover background color */
  }

  .card {
    position: relative;
    /* Ensure cards are positioned relative to their container */
  }

  .card.dragging {
    position: absolute;
    /* Position dragged card absolutely */
    z-index: 1000;
    /* Ensure dragged card appears above other cards */
  }

  .card {
    margin-bottom: 0.5rem;
    /* Adjust this value as needed */
  }

  .column {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Make the column take full height */
  }

  .card {
    margin-bottom: 10px;
    /* Adjust the margin as needed */

  }

  .inner-card {
    height: 1%;
  }

  .product_nav {
    cursor: pointer;
  }

  .product_category {
    margin-top: -25px;
    /* margin-bottom: 5px; */
  }

  .col button {
    margin-right: 5px;
    /* Adjust this value to your preference */
  }


  /* custom style css for sidebar */

  .navbar-vertical.navbar-expand-md .navbar-nav .nav .nav-link {
    padding-left: 10px;
    margin-left: 5px;
  }

  .navbar-vertical.navbar-expand-md .navbar-nav .nav {
    border-left: 2px solid rgba(31, 38, 44, .6);
    margin-left: 2.25rem;
  }

  .navbar-vertical.navbar-expand-md .navbar-nav .nav .nav-link.active:before {
    border-left: 0;
  }

  .navbar-vertical.navbar-expand-md .navbar-nav a.nav-link.active {
    color: #2c7be5 !important;
    background: aliceblue;
  }

  #dashboard-table tbody tr {
    cursor: pointer;
  }

  .dynamic_category_div {
    /* margin-bottom: 30px; */
    color: #95aac9;

  }

  .dynamic_category_div .product_category .nav-tabs .nav-item:hover .nav-link:not(.active) {
    color: #6e84a3;
    padding-bottom: 10px;
  }


  .dynamic_category_div .product_category .nav-tabs .nav-item .nav-link {
    padding-bottom: 10px;
  }

  .dynamic_category {
    border-bottom: 1px solid #e3ebf6;
  }

  .dynamic_products_list {
    color: #95aac9;

  }

  .dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    margin-top: 20px;
  }

  .form-select option[value="add_new"] {
    background-color: lightgrey;
  }

  .form-select option[value="add_new"]::before {
    content: "\f067";
    /* FontAwesome plus icon */
    font-family: "FontAwesome";
    padding-right: 8px;
  }

  /* Ensure the plus icon displays properly */
  .form-select option {
    display: flex;
    align-items: center;
  }

  .hidden {
    display: none;
  }

  @media (min-width: 992px) {
    .login-form-panel {
      position: relative;
      z-index: 1;
      background-color: #fff;
      box-shadow: -10px 0 20px -8px rgba(7, 38, 82, 0.45);
    }
  }

/* Keep Settings children smaller and inset from their parent menu. */
.navbar-vertical #sidebarBasics > .nav {
    margin: .3rem .5rem .5rem 1.25rem;
    padding: 0;
    border: 0;
}
.navbar-vertical #sidebarBasics .collapse > .nav {
    margin: .15rem 0 .4rem .8rem;
    padding: 0 0 0 .4rem;
    border-left: 1px solid rgba(255, 255, 255, .18);
}
.navbar-vertical #sidebarBasics .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 2px 0;
    padding: .4rem .5rem;
    min-height: 32px;
    border-radius: .375rem;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}
.navbar-vertical #sidebarBasics .settings-menu-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}
.navbar-vertical #sidebarBasics .nav-link .fe {
    flex: 0 0 14px;
    width: 14px;
    min-width: 14px;
    margin: 0;
    text-align: center;
    font-size: 13px;
}
.navbar-vertical #sidebarBasics .nav-link[data-bs-toggle="collapse"]::after {
    margin-left: 0;
    flex-shrink: 0;
}
.navbar-vertical #sidebarBasics .nav-link:hover,
.navbar-vertical #sidebarBasics .nav-link:focus-visible {
    background: rgba(255, 255, 255, .08);
}
.navbar-vertical #sidebarBasics .nav-link.active {
    color: #082652 !important;
    background: #e6f0ff;
    font-weight: 700;
    box-shadow: inset 3px 0 #2c7be5;
}
.navbar-vertical .settings-section-active { font-weight: 700; color: #fff; }

/* Fit planned jobs to the available pane, including beside the Create Job form. */
#jobs .client-planned-jobs-table {
    min-width: 0;
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
}
#jobs .client-planned-jobs-table th,
#jobs .client-planned-jobs-table td {
    padding-left: .4rem;
    padding-right: .4rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}
#jobs .client-planned-jobs-table th { letter-spacing: .025em; }
#jobs .client-planned-jobs-table td { font-size: .8125rem; }
#jobs .client-planned-jobs-table td .badge { white-space: normal; }
#jobs .jobs-table-responsive { overflow-x: auto !important; min-width: 0; }
#jobs .vehicle-section .dt-bottom { flex-wrap: wrap; gap: .5rem; padding-right: 1rem; }
#jobs .vehicle-section .dataTables_paginate .pagination { flex-wrap: wrap; }

/* Centre status switches within list-page headers. */
.list-status-header > .row { position: relative; }
.list-status-switcher { display: flex; width: max-content; order: 10; margin: 1rem auto 0; padding: 4px; gap: 4px; background: #e9eef5; border-radius: 9px; }
.list-status-switcher a { padding: .45rem 1.1rem; border-radius: 6px; color: #52647a; font-size: 13px; font-weight: 600; text-decoration: none; }
.list-status-switcher a:hover { color: #082652; background: #fff; }
.list-status-switcher a.active { color: #fff; background: #082652; }
.list-status-switcher a:focus-visible { outline: 2px solid #2c7be5; outline-offset: 2px; }
@media (min-width: 1200px) {
    .list-status-switcher { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
}