/*
    |--------------------------------------------------------------------------
    | 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!
    |
    */

  .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;
  }

  /* 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;
  }