html {
      scroll-behavior: smooth;
    }
    .validation{
      color:red;
    }
    .breadcrumb-custom{
      background-color: #fff !important; 
      width: 100%; 
      padding-left: 10px !important;
    }
    .success-header{
      background-color: #28a745 !important;
      color:#fff;
    }
    .failure-header{
      background-color: #dc3545 !important;
      color:#fff;
    }
    .info-header{
      background-color: #17a2b8 !important;
      color:#fff;
    }
    .secondary-header{
      background-color: #6c757d !important;
      color:#fff;
    }

    .teal-header{
      background-color: #39cccc !important;
      color:#fff;
    }

    .purple-header{
      background-color: #6f42c1 !important;
      color:#fff;
    }

    .lime-header{
      background-color: #01ff70 !important;
    }

    .light-purple-header{
      background-color: #a09dcb !important;
      color:#fff;
    }

    .light-secondary-header{
      background-color: #b6babe !important;
      color:#fff !important;
    }

    .light-failure-header{
      background-color: #e7727d !important;
      color:#fff;
    }

    .light-success-header{
      background-color: #7eca8f !important;
      color:#fff;
    }

    .light-warning-header{
      background-color: #ffc107 !important;
      color:#000;
    }

    .warning-header{
      background-color: #ffc107 !important;
      /*color:#ccc;*/
    }

    .content  .card{
      overflow-x: auto !important;
    }
    .card-title{
      font-weight: bolder !important;
    }
    .footer_data{
      font-size: 20px;
    }

    label.required::after {
      content: ' *';
      color: red;
    }

    /* Paste this css to your style sheet file or under head tag */
    /* This only works with JavaScript, 
    if it's not present, don't show loader */
    .no-js #loader { display: none;  }
    .js #loader { display: block; position: absolute; left: 100px; top: 0; }
    .se-pre-con {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999999 !important;
      background: url('assets/plugins/simple-pre-loader/Preloader_7.gif') center no-repeat #fff;
    }

    .datepicker{
      z-index: 1000000 !important;
    }

    /* scollbar css */

    ::-webkit-scrollbar {
      width: 10px;
    }
     
    ::-webkit-scrollbar-track {
      background-color: white;
      border-radius: 5px;
    }
     
    ::-webkit-scrollbar-thumb {
      background-color: #20c997;
      border-radius: 5px;
    }

    .btn:focus{
      border-color: 1px solid #fff !important;
    }

    .financial-year-dropdown-menu{
      left: -126px !important;
    }

    /*change the select2 results background color*/
    .select2-results { background-color: #E0FFFA; }

    .daterangepicker{
      z-index: 9999999 !important;
    }
    .cursor-pointer{
      cursor: pointer;
    }
    textarea{
      white-space: pre-wrap;
    }

    /*
    .dataTables_wrapper table.dataTable tbody tr {
        padding: 5px 0 !important; 
        line-height: 1.2 !important; 
        font-size:14px !important;
    }

    .dataTables_wrapper table.dataTable tbody td,
    .dataTables_wrapper table.dataTable thead th,
    .dataTables_wrapper table.dataTable tfoot th {
        padding: 5px !important; 
        font-size:14px !important;
    }
    */

    /* Adjusting the height and padding to match form-control-sm */
    .select2-container--bootstrap4 .select2-selection--single {
      height: calc(1.8125rem + 2px) !important; /* Matches form-control-sm height */
      padding: 0.25rem 0.5rem !important;       /* Padding to align text */
      font-size: 0.875rem !important;           /* Match small font size */
      line-height: 1.5 !important;
      border-radius: 0.2rem !important;
      display: flex;
      align-items: center;                      /* Ensures text is vertically aligned */
    }

    /* Adjusting the arrow to vertically align within the Select2 */
    .select2-container--bootstrap4 .select2-selection__arrow {
      height: calc(1.8125rem + 2px) !important; /* Matches form-control-sm height */
      top: 50%;
      transform: translateY(-50%);              /* Centers the arrow vertically */
      right: 0.5rem !important;                 /* Adjust the arrow position */
    }

    /* Ensuring multiple select items follow the same alignment */
    .select2-container--bootstrap4 .select2-selection--multiple {
      min-height: calc(1.8125rem + 2px) !important;
      padding: 0.25rem 0.5rem !important;
      font-size: 0.875rem !important;
      border-radius: 0.2rem !important;
      display: flex;
      align-items: center;                      /* Ensures text and items are aligned */
    }