/* this is a common css for all files . at tha last media query is write */

table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
  text-align: left;
}
.button {
  border: 1px solid #ccc;
  background-color: #f0f0f0;

}

.button:last-child {
  margin-right: 0;
}

.button:hover {
  background-color: #e0e0e0;
}

.btn.btn-primary {
  margin-left: auto;
  width: auto;
  margin-right: 2px;
}

.col-md-12.d-flex.justify-content-end {
  padding-right: 1%;
}

.col-md-6.left {

  padding-left: 2%;
}
.form-control.form-control-sm {
  width: 30%;
  margin-left: 5px;
}

/* Responsive table styling */


.form-control.pl {
  display: block;
  width: 9%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-form-control-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* paination of table style */
.col-sm-12.col-md-5 {
  padding-top: 1%;
  padding-left: 3%;

}

.container.mt-4 {
  width: 100%;
}

#projectTable_paginate {

  padding-left: 70%;
  padding-top: 3%;
}

label {
  display: flex;
  padding: 5px;
  margin: 5px;
  justify-content: center;
  padding-left: 5px;
}

.dataTables_filter {
  text-align: end;



}

/* paination of table style */
.col-sm-12.col-md-5 {
    padding-top: 1%;
    padding-left: 3%;

  }

  #customers_table_paginate {

    padding-left: 70%;
    padding-top: 3%;
  }

  label {
    display: flex;
    padding: 5px;
    margin: 5px;
  }


  .dataTables_filter {
    padding-right: 2%   ;
  }
   /* this style for customer page */

    .left-btn {
        width: 40px;
        font-size: 21px;
        margin: 10px;
    }

    .p-header {
        display: flex;
        margin-top: 25px;
    }

    .ml {
        font-size: 30px;
        font-weight: 500;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
    }

    th {
        color: dimgrey;

    }

    .rotate-icon {
        transform: rotate(90deg);
        /* Rotate the icon vertically */
        font-size: larger;
        width: 20px;
        color: #8c95a3;
        display: none;

    }

    .btn.btn-primary {
        margin-left: auto;
        width: auto;
    }

    .container.mt-4 {
        width: 80%;
    }

    .login-card {
        max-width: 400px;
        margin: 0 auto;
        margin-top: 100px;
    }

    .logo {
        text-align: center;
        margin-bottom: 20px;
    }

    .logo_panel {
        height: 40px;
        width: auto;
    }

    .btn.btn-primary {
        /* margin-left: auto; */
        width: auto;
        margin-right: 2px;
    }

    .col-md-12.d-flex.justify-content-end {
        padding-right: 1%;
    }

    .row {

        display: block;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    /* style for project.php .table */
    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
        /* background-color: transparent; */
    }
   
    #projectTable_length {
      margin-left: 2%;
    }
    
    .progress-bar {
        background-color: #319c42;
    }

    .col-sm-12.col-md-5 {
        padding-top: 1%;
        padding-left: 3%;

    }
    .navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
   --bs-nav-link-hover-color: var(--bs-navbar-hover-color) ,; 
   --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color); 
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
 list-style: none; 

}
/* 


*/







  .left-btn {
    width: 40px;
    font-size: 21px;
    margin: 10px;
  }

  .p-header {
    display: flex;
    margin-top: 25px;
  }

  .ml {
    font-size: 30px;
    font-weight: 500;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
  }

  th {
    color: dimgrey;

  }

  .rotate-icon {
    transform: rotate(90deg);
    /* Rotate the icon vertically */
    font-size: larger;
    width: 20px;
    color: #8c95a3;
    display: none;

  }

  .btn.btn-primary {
    margin-left: auto;
    width: auto;
  }

 

  .login-card {
    max-width: 400px;
    margin: 0 auto;
    margin-top: 100px;
  }

  .logo {
    text-align: center;
    margin-bottom: 20px;
  }

  .logo_panel {
    height: 40px;
    width: auto;
  }

  .btn.btn-primary {
    /* margin-left: auto; */
    width: auto;
    margin-right: 2px;
  }

  .col-md-12.d-flex.justify-content-end {
    padding-right: 1%;
  }

  .row {

    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

























/* this style for customer page */

.left-btn{
  width: 40px;
  font-size: 21px;
  margin: 10px;
  }
  .p-header{
  display: flex;
  margin-top: 25px;
  }
  .ml{
  font-size: 30px;
  font-weight: 500;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  }
  th{
  color: dimgrey;
  
  }
  .rotate-icon {
  transform: rotate(90deg); /* Rotate the icon vertically */
  font-size: larger;
  width: 20px;
  color: #8c95a3;
  display: none;
  
  }
  .btn.btn-primary{
  margin-left: auto;
  width: auto;
  }
 
  
.login-card {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 100px;
}
.logo {
  text-align: center;
  margin-bottom: 20px;
}
.logo_panel {
height: 40px;
width: auto;
}
.btn.btn-primary {
/* margin-left: auto; */
width: auto;
margin-right: 2px;
}


.btn.btn-primary.topbutton{
  margin-left: auto;
  width: 153px;
  margin-right: 2px;
}

.col-md-12.d-flex.justify-content-end{
padding-right: 1%;
}
.row {

 display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
} 




@media only screen and (max-width: 310px) {


  .col-md-6.pr {
    display: flex;
    padding-left: 2%;


  }

  .btn.btn-primary {


    padding: 5px;
    margin: 5px;
    width: 134px;
    margin-left: auto;

    margin-right: 2px;
  }

  .col-md-6.cl {
    display: none;
  }

  .navbar.navbar-expand-lg.navbar-light.bg-light {
    padding-left: 10px;
  }
}

@media only screen and (min-width: 310px) and (max-width: 500px){
  
  #projectTable_paginate {
    padding-left: 52%;
    padding-top: 3%;
  }
  .col-sm-12.col-md-5 {
    padding-top: 1%;
    padding-left: 10%;
}
  .custom-select.custom-select-sm.form-control.form-control-sm {
    width: 10%;
    margin-left: 1px;
}
  .form-control.form-control-sm {
    width: 70%;
    margin-left: 5px;
  }

  label {
    display: flex;
    padding: 5px;
    /* margin: 5px; */
    justify-content: center;
    /* padding-left: 5px; */
    margin-right: -1pc;

  }

  .custom-select.form-control.form-control-sm {
    width: 32%;

    margin-left: 5px;
    margin-right: 6px;
  }
  #projectTable_paginate {
  padding-left: 35%;
  padding-top: 3%;
  padding-right: 10%;
}



.custom-select.form-control.form-control-sm {
height: 20px;
width: 27%;
margin-left: 5px;
margin-right: 6px;
}
}

.department-list {
  display: flex;
  margin-left: 2px;
  padding-left: 28px;
}
.deptdemolist{
  padding-right: 35px;
  list-style: none;
}

#bar-chart {
  display: block;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

    /* Responsive table styling */
    @media (max-width: 768px) {
      .table-responsive {
          width: 100%;
          overflow-y: hidden;
          -ms-overflow-style: -ms-autohiding-scrollbar;
          border-collapse: collapse;
          border-spacing: 0;
          display: block;
          position: relative;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          -ms-overflow-style: -ms-autohiding-scrollbar;
      }

      .container.mt-4 {
        width: 99%;
    }
    
    
      .table {
          width: 95%;
          margin-bottom: 0;
          background-color: transparent;
          font-size: small;
      }

      .col-md-6.cl {
          display: none;
      }

      .button-group {
          display: flex;
      }

      .card-body {
          -ms-flex: 1 1 auto;
          flex: 1 0 auto;
          min-height: 1px;
          padding: 1px;
      }
  }

  @media (min-width: 768px) {
    .container.mt-4{
      width: 80%;
      }
    #projectTable_paginate {
  
      padding-top: 3%;
      padding-right: 10%;
    }
    
      .col-md-6.pr {

          text-align: end;
      }
      .custom-select.custom-select-sm.form-control.form-control-sm {
        width: -16%;
      margin-left: 5px;
      
      }
  }
  .custom-select.custom-select-sm.form-control.form-control-sm {
  
    width: 58px;
    margin-left: 5px;
    margin-right: 5px;
  }
  label {
    display: flex;
    font-weight: bold;
  }
  .table {
    --bs-table-bg: none;
    --bs-table-bg: none;
   }
  .nav-link.active {
    font-weight: bold;
    border-bottom: 2px solid red;
    padding-left: 200px;
    width :max-content;
    
    
    
  }
  #iframe102{
    padding-right: 2%;
    }