/* 

      General Styling 

      - Transition effect applied for smooth filter panel expansion/collapse

   */


.dataTables_info { 
    display: none !important;
}

   .chart-container {
      background-color: #f9f9f9; /* light background */
      border: 2px solid #36A2EB; /* blue border */
      border-radius: 10px; /* rounded corners */
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* subtle shadow */
      width: calc(50% - 20px) !important;
      margin-right: 10px;
      margin-left: 10px;
  }
   .chart-container-xl {
      background-color: #f9f9f9; /* light background */
      border: 2px solid #36A2EB; /* blue border */
      border-radius: 10px; /* rounded corners */
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* subtle shadow */
      width: calc(100% - 20px) !important;
      margin-right: 10px;
      margin-left: 10px;
  }
  
  .chart-container h5 {
      text-align: center;
      font-weight: 600;
      margin-bottom: 15px;
      color: #333;
  }

   .dialerActive{

      cursor: pointer !important;
      margin: -4px 5px 0 0;
   }

   #filterPanel {

      transition: all 1.3s ease-in-out;
      background-color: #F8F8F8 !important;
   
   }
   #filterPanel h6{
      color : #34445C !important;
      font-weight: bold;
      font-size: 21px;
   }
   #filterPanel label{
      color : #34445C !important;
      font-weight: 500;
      font-size: 16px;
   }

   #applyFilters{
      background-color: #906A01 !important;
      color: #ffffff !important;
      border: 1px solid #906A01 !important;
      margin-bottom: 10px;
   }
   .cust_kpi{
      background-color: #F8F8F8;
   }

   .cust_updatestatus_sec{
      text-align: left !important;
      height: 50px;
      padding-left: 0px !important;
   }
   
   
   
   /* 
   
         Button container styling 
   
         - Uses flexbox for responsiveness
   
         - Ensures proper alignment and spacing
   
      */
   
   #buttonContainer {
   
      display: flex;
   
      flex-wrap: wrap;
   
      justify-content: center;
   
      align-items: center;
   
      gap: 15px;
   
   }
   
   
   
   /* 
   
         Active filter button styling 
   
         - Background color changes when a filter is applied to indicate an active state
   
      */
   
   .active-filter {
   
      background-color: #28a745 !important;
   
      color: white !important;
   
   }
   
   
   
   /* 
   
         Pagination controls styling 
   
         - Aligned to the right on larger screens for better layout
   
      */
   
   .pagination-container {
   
      margin-left: auto;
   
   }
   
   
   
   /* 
   
         Responsive adjustments for smaller screens 
   
         - Stacks elements vertically for improved readability
   
      */
   
   @media (max-width: 768px) {
   
      #buttonContainer {
   
         flex-direction: column;
   
         text-align: center;
   
      }
   
   
   
      .pagination-container {
   
         justify-content: center;
   
         margin-top: 10px;
   
      }
   
   }
   
   
   
   /* 
   
         AG Grid custom styling 
   
         - Adjusts font size for a compact view
   
         - Reduces padding and height of cells for better data visibility
   
      */
   
   .ag-theme-alpine {
   
      font-size: 12px;
   
      width: calc(99% - 24px);
   
      height: 600px !important;
   
      margin-left:20px;
   
   }
   
   
   
   .ag-theme-alpine .ag-header-cell {
   
      padding: 5px !important;
   
      font-size: 13px;
   
   }
   
   
   
   .ag-theme-alpine .ag-header-row {
   
      height: 52px !important;
   
   }
   
   
   
   .ag-theme-alpine .ag-row {
   
      /* height: 45px !important; */
   }
   
   
   
   /* 
   
         Dropdown menu for toggling column visibility
   
         - Initially hidden, displayed on button click
   
         - Absolute positioning for proper placement
   
      */
   
   #columnToggleMenu {
   
      display: none;
   
      position: absolute;
   
      background: white;
   
      padding: 10px;
   
      border: 1px solid #ccc;
   
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   
      z-index: 1000;
   
      border-radius: 5px;
   
      width: 220px;
   
      /* Adjusted for better spacing */
   
      right: 20px;
   
      top: 50px;
   
   }
   
   
   
   /* Ensure each checkbox appears on its own line */
   
   #columnCheckboxes label {
   
      display: block;
   
      margin-bottom: 5px;
   
      /* Adds spacing between checkboxes */
   
      cursor: pointer;
   
   }
   
   
   
   /* 
   
         Multi-select dropdown styling for lawyer selection 
   
         - Allows selection of multiple lawyers
   
         - Displays selected lawyers with removable tags
   
      */
   
   .multi-select-container {
   
      position: relative;
   
      width: 100%;
   
   }
   
   
   
   .selected-items {
   
      display: flex;
   
      flex-wrap: wrap;
   
      gap: 5px;
   
      margin-top: 5px;
   
   }
   
   
   
   .selected-items .selected-item {
   
      background-color: #007bff;
   
      color: white;
   
      padding: 5px 10px;
   
      border-radius: 15px;
   
      display: flex;
   
      align-items: center;
   
      gap: 5px;
   
   }
   
   
   
   .selected-items .remove-item {
   
      cursor: pointer;
   
      font-weight: bold;
   
   }
   
   
   
   /* Fix column toggle menu styling */
   
   #columnToggleMenu {
   
      display: none;
   
      position: absolute;
   
      background: white;
   
      padding: 10px;
   
      border: 1px solid #ccc;
   
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   
      z-index: 1000;
   
      border-radius: 5px;
   
      width: 220px;
   
      /* Adjusted for better spacing */
   
      right: 20px;
   
      top: 50px;
   
   }
   
   
   
   /* Ensure each checkbox appears on its own line */
   
   #columnCheckboxes label {
   
      display: block;
   
      margin-bottom: 5px;
   
      /* Adds spacing between checkboxes */
   
      cursor: pointer;
   
   }
   
   .mr-1_5{
   
      margin-right: 1.5rem !important;
   
   }
   
   table.dataTable thead th, table.dataTable thead td{
   
      font-size: 13px !important;
   
      background: #537690 !important;
      text-align: center !important;
   
   }
   
   table.dataTable tbody td{
   
      font-size: 14px !important;
   
   }
   
   .d-none{
   
   
   
      display: none !important;
   
   }
   
   .dataTables_length{
   
   
   
      margin-bottom: 15px;
   
   }
   
   .ag-header.ag-header-allow-overflow .ag-header-row{
   
      background-color: #537690 !important;
   
      color: #ffffff !important;
   
   }
   
   #agGridTable{
   
      /* height: 600px !important; */
      /* height: 100% !important; */
   
   }
   
   #agGridTable .btn.btn-sm.btn-primary{
   
      background: #ffffff;
   
      border: none;
   
      color: #906A01;
   
      font-weight: 650;
   
   }
   
   
   
   #filterPracticeArea {
   
      /* width: 100% !important; */
   
      min-width: auto;
   
   }
   
   #filterPracticeArea .select2-container {
   
      width: 100% !important;
   
      min-width: auto !important;
   
   }
   
   
   
   .ml-10{
   
      margin-left: 10px;
   
   }
   
   .mr-10{
   
      margin-right: 10px;;
   
   }
   
   .select2-container .select2-selection--multiple{
   
      min-height: 37px !important;
   
   }
   
   .justify-center{
   
   
   
      justify-content: center;
   
   }
   
   .mb-10{
   
      margin-bottom: 10px;
   
   }
   
   .float-left{
   
      float: left !important;
   
   }
   
   .float-right{
   
   
   
      float: right !important;
   
   }
   
   .addPresetBtn,.setDefault,.updatePresetBtn,.createStatement{
   
      cursor: pointer !important;
      font-size: 14px !important;
      color: #906A01 !important;
      font-weight: 700 !important;
   
   }
   .createStatement,.common-btn {
      color: #ffffff !important;
      background-color: #906A01 !important;
      border: 1px solid #906A01;
   }
   .form-select {
      --bs-form-select-bg-img: none !important;
   }
   .updateStatus{
      font-size: 14.5px !important;
   }
   
   .err_msg{
   
      color: red;
   
      font-weight: 700;
   
   }
   
   .mr-10{
   
   
   
      margin-right: 10px;
   
   }
   
   .justify-items-center{
   
      justify-items : center !important;
   
   }
   
   .wd-50{
   
      width: 50%;
   
   }
   
   .pl-10{
   
      padding-left: 10px;
   
   }
   .related_select .select2-container{
      width: 150px !important;
   }
   
   /* AM New */
   
   .presetFilteDropDown{
   
      border: 1px solid #906A01 !important;
   
   }
   
   .ag-ltr .ag-header-cell-resize{
   
      /* display: none !important; */
   
   }
   
   .ag-cell-label-container{
   
      padding-left: 0px;
   
   }
   .ag-theme-alpine .ag-cell{
      line-height: 2.5 !important;
      padding: 0px 5px !important;
   }
   .ag-header-cell-text{
      font-weight: bold;
      font-size: 16px;
   }
   
   .ag-ltr .ag-cell{
   
      text-align: center;
   
   }
   
   .ag-header-cell-sortable .ag-header-cell-label {
   
      align-items: center;
   
      justify-content: center;
   
   }

   select{
      -webkit-appearance: menulist !important;
   }

   .tr_cust_des{
      /* padding-left: 2%;
      line-height: 2.5; */
   }

   .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 35px !important;
   }
   .select .select2-container--default .select2-selection--single .select2-selection__rendered{

      text-align: center !important;
   }

   #startDate,#endDate,#dateRangeSelect{
      width : 100%;
      margin-right: 15px !important;
      border-radius: 0px !important;
   }
   #prevRange{
      margin-right: 15px !important;
   }
   .st_date,.en_date{
      margin-right: 15px !important;
   }
   .cust_preset_sec{
      background-color: #F8F8F8;
      padding: 10px 10px;
      margin-left: 10px !important;
      width: calc(25% - 10px) !important;
   }
   
   #filterPanel .sm-des{
      font-size:8px
   }
   div[col-id="Timer_Running"] {
      /* top: 6px !important; */
   }
   .display-flex{
      display: flex;
   }
   .dollar_sign{
      margin-right: 10px;
      margin-top: 5px;
   }

   /* Style for spell check suggestions */
   .spellchecker-suggestbox {
      z-index: 10000 !important;
   }
   
   /* Misspelled word highlighting */
   .spellchecker-misspelled {
      border-bottom: 2px dashed red;
      cursor: pointer;
   }
   
   /* AG-Grid cell specific styles */
   .ag-theme-alpine .spell-check-display {
      white-space: normal;
      line-height: 1.4;
      padding: 8px;
      overflow-y: auto;
      max-height: 100px;
   }

   

   
   /* AM New */
   
   
   
   
   
   /* Rimon */

   .select2-container .select2-selection--single {
      min-height: 37px !important;
   }
   .select2-container--default .select2-selection--single .select2-selection__arrow{
      height: 37px!important;
   }
   .select2-container--default .select2-selection--single .select2-selection__clear{
      height: 37px!important;
   }
   .paddingTop-5{
      padding-top: 5px;
   }

   /* Rimon */
   
   .range-icon {
   
      color: #906A01 !important;
   
      padding: 2px 0px 4px 0px !important;
   
      width: 38px !important;
   
      height: 36px !important;
   
      border: 2px solid #906A01 !important;
   
      display: flex !important;
   
      align-items: center !important;
   
      justify-content: center !important;
   
      border-radius: 6px !important;
   
      font-size: 18px !important;
   
      font-weight: bold !important;
   
    }
   
   
   
    .range-icon:focus,
   
    .range-icon:hover {
   
      color: #ffffff !important;
   
      background-color: #906A01 !important;
   
      border: 2px solid #906A01 !important;
   
    }
   
   
   
    #filterBtn.active {
   
      background-color: #906A01 !important;
   
      color: #ffffff !important;
   
    }
   
    #filterMyLogs{
   
      color: #906A01 !important;
   
      background-color: #ffffff !important;
   
      border: 1px solid #906A01 !important;
   
    }
   
    #filterMyLogs:active,
   
    #filterMyLogs:focus,
   
    #filterMyLogs:hover,
   
    #filterMyLogs.active{
   
      color: #ffffff !important;
   
      background-color: #906A01 !important;
   
      border: 1px solid #906A01 !important;
      border-right: 0px!important;
   
   
   
    }
   
    #filterSupervisorLogs{
   
      color: #906A01 !important;
   
      background-color: #ffffff !important;
   
      border: 1px solid #906A01 !important;
   
    }
   
    #filterTable:active,
   
    #filterTable:focus,
   
    #filterTable:hover,
   
    #filterTable.active{
   
      color: #ffffff !important;
      background-color: #906A01 !important;
      border: 1px solid #906A01 !important;
      border-right: 0px!important;
    }

   .filterTab{

      color: #906A01 !important;
      background-color: #ffffff !important;
      border: 1px solid #906A01 !important;
    }

    #filterReport:active,
   
    #filterReport:focus,
   
    #filterReport:hover,
   
    #filterReport.active{
   
      color: #ffffff !important;
      background-color: #906A01 !important;
      border: 1px solid #906A01 !important;
      border-right: 0px!important;
    }
   
    #filterAllLogs{
   
      color: #906A01 !important;
   
      background-color: #ffffff !important;
   
      border: 1px solid #906A01 !important;
   
    }
   
    #filterAllLogs:active,
   
    #filterAllLogs:focus,
   
    #filterAllLogs:hover,
   
    #filterAllLogs.active{
   
      color: #ffffff !important;
   
      background-color: #906A01 !important;
   
      border: 1px solid #906A01 !important;
   
   
   
    }
   
    #optionsBtn{
   
      color: #906A01 !important;
   
      background-color: #ffffff !important;
   
      border: 2px solid #906A01 !important;
   
    }
   
    #optionsBtn:active,
   
    #optionsBtn:focus,
   
    #optionsBtn:hover{
   
      color: #ffffff !important;
   
      background-color: #906A01 !important;
   
      border: 2px solid #906A01 !important;
   
   
   
    }
   
   
   
    #filterBtn{
   
      color: #906A01 !important;
   
      background-color: #ffffff !important;
   
      border: 2px solid #906A01 !important;
   
    }
   
    #filterBtn:active,
   
    #filterBtn:hover{
   
      color: #ffffff !important;
   
      background-color: #906A01 !important;
   
      border: 2px solid #906A01 !important;
   
   
   
    }
   
    .logo img{
   
      max-height: 50px;;
   
    }
   
   
   
    /* Jahirul*/
   #footer-total-logged-time, #footer-Part-Billable-time, #footer-total-logged-time-value, #footer-total-Total-statement{
      color: #000;
      font-weight: 700;
   }
   /* .label-valu{
      color: #333;
      padding: 10px;
   } */

   .label-valu {
      color: #333;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      position: relative;
   }

   .label-valu:not(:last-child)::after {
      content: "";
      display: inline-block;
      width: 2px;
      height: 15px;
      background-color: #333;
      position: absolute;
      right: 0px;
      top: 28%;
      transform: translateY(3px);
   }

   .updatePresetBtn, .addPresetBtn, .setDefault{
      text-decoration: none;
      margin-right: 10px;

   }
   #filterMyLogs, #filterSupervisorLogs, #filterAllLogs{
      border: 1px solid #906A01 !important;
      padding: 5px 30px;
   }
   #filterMyLogs, #filterSupervisorLogs{
      border-right: 0px!important;
   }
   .select{position: relative;}
   /* .select::after{
      content: '\25BC';
      position: absolute;
      top: 13px;
      right: -0px;
      padding: 0 1em;
      cursor: pointer;
      pointer-events: none;
      transition: .25s allease;
      color: #906a01c9 !important;
      font-size: 10px;
   } */

   #callModal .btn-close{

      float: right;
   }

   #callModal .modal-content {
      background: #fff;
      margin: 10% auto;
      padding: 20px;
      width: 350px;
      border-radius: 12px;
      text-align: center;
   
   }

   #callModal .status {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      gap: 8px;
   }

   #callModal .dot {
      height: 10px;
      width: 10px;
      background-color: #0070d2;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
   }

   

   #callModal .buttons button {
      margin: 5px;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
   }

   /* call modal css End */

   @media only screen and (min-width: 1200px) and (max-width: 1440px) {
      /* For portrait layouts only */
      .top-section .col-md-cus-8{flex: 0 0 auto;width: 66.66666667%;}
      .top-section .col-md-cus-1{flex: 0 0 auto;width: 8.33333333%;}

      /* Remon */
      /* .label-valu{
         padding: 10px 9px!important;
      } */

      /* .cust_updatestatus_sec {
         margin-top: 2% !important;
      } */
      /* Remon */
   }

   @media only screen and (min-width: 1200px) {
      /* .top-section .col-md-cus-8{flex: 0 0 auto;width: 66.66666667%;}
      .top-section .col-md-cus-1{flex: 0 0 auto;width: 8.33333333%;} */
   }

   @media only screen and (min-width: 768px) and (max-width: 1024px){
      .cust_date_section{

         width: 68% !important;
   
      }
      #filterMyLogs, #filterSupervisorLogs, #filterAllLogs {
         padding: 5px 7px !important;
      }
      .cust_preset_sec{
         flex: 0 0 auto;
         width: 38.333333% !important;
      }
      .cust_preset_sec .mr-10 {
         margin-right: 5px !important;
      }
      .cust_option_sec{

         flex: 0 0 auto;
         width: 20% !important;
      }

      #startDate,#endDate,#dateRangeSelect{
         width : 120px !important;
         margin-right: 15px !important;
      }
      .st_date,.en_date{
         margin-right: 15px !important;
      }
      #prevRange{
         margin-right: 10px !important; 
      }
      .cust_logo_section{
         width: 31% !important;
      }
      .cust_preset_sec{
         width: 35% !important;
      }
      .cust_tab_sec {
         width: 43.99% !important;
         padding-left: 30px !important;
         padding-right: 0 !important;
      }
      .cust_preset_sec .select{
         width: 40% !important;
      }
      .cust_preset_sec .cust_all_btn{
         width: 60% !important;
      }
      .cust_option_sec{
         padding-right: 9px !important;
      }

      /* Remon */
      .label-valu {
         padding: 10px 20px!important;
         display: inline!important;
      }

      .label-valu:not(:last-child)::after {
         height: 40px!important;
         top: 18%!important;
      }

      /* Remon */


      
   }



   @media only screen and (min-width: 1024.99px) and (max-width: 1440px){
      .cust_preset_sec{
         width: calc(29.7% - 10px) !important;
      }
      .cust_option_sec{
         width: 20.30% !important;
      }
      
   }

   /* Jahirul*/

   /* Remon */
   @media only screen and (min-width: 1368px){
      .mr-10 {
         margin-right: 5px!important;
      }
   }
      /* 24-07-2025 */
   @media only screen and (max-width: 900px){

      body{
         width: 425px!important;
      }

      .top-section{
         display: block!important;
      }

      .cust_logo_section{
         width: 100% !important;
         margin-bottom: 20px;
      }

      .cust_logo_section .logo{
         text-align: center;
      }

      .cust_date_section{
         width: 100% !important;
         display: block;
      }

      .cust_date_section .d-flex {
         flex-direction: column;
         align-items: stretch;
         gap: 8px;
      }

      .cust_date_section div #prevRange{
         /* margin-left: 50px!important; */
         margin-bottom: 15px!important;

      }

      .cust_date_section div #nextRange{
         /* margin-left: 50px!important; */
      }

      .cust_date_section div label{
         margin-bottom: 15px!important;
      }

      .cust_date_section div #startDate,
      .cust_date_section div #endDate,
      .cust_date_section div #dateRangeSelect{
         width: 260px!important;
         margin-bottom: 15px!important;
      }

      .cust_preset_sec{
         width: 98% !important;
         margin-left: 10px !important;
         margin-bottom: 15px !important;

      }

      .cust_preset_sec .select{
         width: 52% !important;
      }

      .cust_preset_sec .select .select2-container{
         width: 100% !important;
      }

      .cust_preset_sec .cust_all_btn {
         width: 48% !important;
      }



      .cust_tab_sec {
         width: 100%!important;
         padding-left: 10px!important;
         margin: 15px 0px!important;
      }

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



      .cust_option_sec {
         width: 100%!important;
         padding-right: 0px!important;
      }

      #filterPanel .row .col-md-3{
         width: 100%!important;
      }

      #filterPanel .sm-des{
         font-size: 9px!important;
      }

      #filterPanel .row .col-md-3 label{
         width: 100%!important;
      }

      #filterPanel .row .col-md-3 .select2-container {
         width: 100%!important;
      }

      .cust_kpi .d-flex{
         display: block !important;
      }
      .cust_kpi .d-flex .label-valu{
         padding: 5px 5px!important;
         display: block !important;
         width: 100%;
      }

      .cust_kpi .d-flex .label-valu:not(:last-child)::after {
         height: auto !important;
         top: 0px !important;
      }
      
      #health-bar-wrapper{
         width:100%!important;
      }

      #health-bar-wrapper .health-bar-heading{
         text-align: start!important;
         margin-bottom: 10px;
      }

      #health-bar-wrapper .health-container{
         width: 100%!important;
      }


      .row.mx-3 .cust_updatestatus_sec{
         width: 68%!important;
      }

      .row.mx-3 .col-md-2{
         width: 32%!important;
      }

      .ag-input{
         width: 100%!important;

      }

   }
   /* Remon */

   /* @media only screen and (min-width: 375px) and (max-width:425px){

      .top-section{
         display: block !important;
      }
      .cust_logo_section,
      .cust_date_section
      {
         width: 100% !important;
      }
      .cust_date_section .justify-content-center{
         justify-content: left !important;
      }
   } */

   /* Shahrukh */

   /* Statement table row color according to status start */
   .row-color-one{
      background-color: #f0f0f0 !important;
   }

   .row-color-two{
      background-color: #f8ffe8 !important;
   }

   .row-color-three{
      background-color: #ffe8e8 !important;
   }

   .row-color-four{
      background-color: #e8ffec !important;
   }

   .row-color-five{
      background-color: #fff7e8 !important;
   }

   .row-color-six{
      background-color: #ede8ff !important;
   }
   /* Statement table row color according to status end */

   /* Final Statement table  start */

   .header-blue {
      background-color: #537690 !important;
      color: white !important;
   }
   .ag-theme-alpine .text-left {
      text-align: left;
   }
   .ag-theme-alpine .clamp-2-lines {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal !important;
      line-height: 1.2em !important;
      max-height: 2.4em I !important;
   }

   .ag-theme-alpine .custom_header_designs{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal !important;
      line-height: 1.2em !important;
      max-height: 2.4em I !important;
   }

   /* Health Bar Color Code Start */
         
   .health-container {
      width: 600px !important;
      height: 18px;
      background: white;
      border: 2px solid #ccc;
      overflow: hidden;
      position: relative;
      box-sizing: content-box !important;
      top: -40px;
   }
   
   .health-segment {
      height: 100%;
      width: 0;
      float: left;
      transition: width 0.3s ease;
   }
   
   .green {
      background-color: green;
   }
   
   .orange {
      background-color: orange;
   }
   
   .red {
      background-color: red;
   }
   
   .black {
      background-color: black;
   }

   .green-text {
      color: green !important;
   }
   
   .orange-text {
      color: orange !important;
   }
   
   .red-text {
      color: red !important;
   }
   
   .black-text {
      color: black !important;
   }

   .healthbar-text{
      position: relative;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      top: -3px;
      z-index: 1;
   }

   .health-bar-heading{
      text-align: center;
   }
   /* Health Bar Color Code End */

/* AM Mobile */



/* AM Mobile */