* {
    font-family: 'Poppins', sans-serif;
  }


 
.sidebar svg.fa-buffer{
    font-size: 20px !important;
}

.sidebar a.nav-link{
    white-space: normal !important;
}

.custom-input-grp-salary-summary .input-group-prepend{
  width: 120px;
}

.custom-input-grp-salary-summary .input-group-text{
  width: 122px;
}

.custom-calender-grp-salary-summary .dp__input_wrap{
  width: 96% !important;
}

.custom-list-group-item {
  width: 100%;
}

.custom-design .dp__main .dp__input_wrap .dp__input {
  padding: 9px 30px !important;
}


.sidebar svg.fa-cog{
    font-size: 20px !important;
}

.csv-button {
  border: none;
  background-color: #138b08;
  padding: 2px 17px;
  color: white;
  font-size: 16px;
  border: rgba(0,0,0,0) 2px solid;
  margin-right: 4px;
  margin-bottom: 0px;
  position: relative;
  top: 32px;
}

.csv-button:hover {
  background-color: white;
  color: black;
  border: #138b08 2px solid;
  font-weight: bold;
  position: relative;
  top: 32px;}

.print-button {
  border: none;
  background-color: #49b93f;
  padding: 2px 15px;
  color: white;
  font-size: 16px;
  border: rgba(0,0,0,0) 2px solid;
  margin-right: 5px;
  position: relative;
  top: 32px;
}

.print-button:hover {
  background-color: white;
  color: black;
  border: #49b93f 2px solid;
  font-weight: bold;
  position: relative;
  top: 32px;
}

.p-button {
  border: none;
  background-color: #49b93f;
  padding: 2px 15px;
  color: white;
  font-size: 16px;
  border: rgba(0,0,0,0) 2px solid;
  margin-left: -3px;
  position: relative;
  top: 32px;
}

.p-button:hover {
  background-color: white;
  color: black;
  border: #49b93f 2px solid;
  font-weight: bold;
  position: relative;
  top: 32px;
}

.table thead th {
  background: none !important;
  color: white !important;
}

.thead-bg {
  background-color: #009688;
}

.thead-bg th{
  color: white !important;
}


/* Promotion */
.promotion .multiselect{
  width: calc( 100% - 110px);
}
.promotion .input-group-text{
  width: 110px;
}

.form-control.p-input{
  padding: 19px;
}

.nav-sidebar .nav-item svg{
  font-size: 20px !important;
  width: 24px !important;
}
.router-link-active.router-link-exact-active.nav-link{
  background-color: rgba(255,255,255,.2) !important;
  color: #fff !important;
}




.salaryEntryForm div.input-group span.input-group-text{
  width:100px
}

.selectImp div.input-group div.multiselect{
  width: calc( 100% - 150px);
}

.selectImp div.input-group .multiselect__tags{
  border-radius:0px 5px 5px 0px !important; 
}

.input-group.process-date div.dp__main{
  width: calc( 100% - 110px);
}
.year div.dp__main{
  width: calc( 100% - 51px);
}

.month div.dp__main{
  width: calc( 100% - 112px);
}

.month div.dp__input_wrap input{
  height: 40px;
}

.export-icon{
  position: relative;
  font-size: 22px;
}



/* Style for the entire v-pagination-3 component */
.v-pagination-3 {
  background-color: #64748b;
}

/* Style for the pagination list */
.v-pagination-3 .Pagination {
  list-style: none;
  display: flex;
  align-items: left;
}

/* Style for the pagination controls (arrows) */
.v-pagination-3 .PaginationControl {
  cursor: pointer;
}

/* Style for the active control (arrow) */
.v-pagination-3 .Control-active {
  fill: #000; /* Change the color as per your design */
}

/* Style for the individual page button */
.v-pagination-3 .Page {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

/* Style for the active page button */
.v-pagination-3 .Page-active {
  background-color: rgb(20, 50, 82) !important; /* Change the color as per your design */
}

/* Style for the ellipsis holder */
.v-pagination-3 .DotsHolder {
  margin: 0 0.5rem;
}

/* Style for the ellipsis dots */
.v-pagination-3 .Dots {
  width: 8px;
  height: 2px;
  fill: #000000; /* Change the color as per your design */
}