diff --git a/dashboard_pos/static/src/css/pos_dashboard.css b/dashboard_pos/static/src/css/pos_dashboard.css
index ec1b234cc..d2dc2a8e4 100644
--- a/dashboard_pos/static/src/css/pos_dashboard.css
+++ b/dashboard_pos/static/src/css/pos_dashboard.css
@@ -1,106 +1,124 @@
-.oh_dashboards{
-    padding-top :15px;
-    background-color: #f8faff !important;
+.oh_dashboards {
+  padding-top: 15px;
+  background-color: #f8faff !important;
 }
 
 .oh-card h4 {
-    font-size: 1.1rem;
+  font-size: 1.1rem;
 }
 .breadcrumbs {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .buttons button {
-  margin: 2px 0; }
+  margin: 2px 0;
+}
 
 /* Button Reset */
-.btn, .button {
+.btn,
+.button {
   display: inline-block;
   font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   border-radius: 0;
-  cursor: pointer; }
-
+  cursor: pointer;
+}
 
 /*    Widget One
 ---------------------------*/
 .stat-content {
-    display: inline-block;
-    width: 66%;
+  display: inline-block;
+  width: 66%;
 }
-.stat-icon{
-    display: inline-block;
+.stat-icon {
+  display: inline-block;
 }
 
 .stat-widget-one .stat-icon {
-    vertical-align: top;
-    margin: auto;
-    width: 100%;
-    color: #01c490;
+  vertical-align: top;
+  margin: auto;
+  width: 100%;
+  color: #01c490;
 }
 
 .stat-widget-one .stat-icon i {
   font-size: 30px;
   font-weight: 900;
   display: inline-block;
-  color: #01c490;}
+  color: #01c490;
+}
 
 .stat-widget-one .stat-text {
-    font-size: 14px;
-    color: #868e96;
-    font-weight: bold;
+  font-size: 14px;
+  color: #868e96;
+  font-weight: bold;
 }
 
 .stat-widget-one .stat-digit {
   font-size: 24px;
-  color: #02448b; }
+  color: #02448b;
+}
 
 .stat-count {
   font-size: 20px;
   text-align: center;
-  color: #00438b;}
+  color: #00438b;
+}
 
 .stat-title {
   font-size: 17px;
   text-align: center;
-  color: #00438b; }
+  color: #00438b;
+}
 
-.mb-0{
-    font-size: 20px;
-    position: relative;
-    text-align: center;
+.mb-0 {
+  font-size: 20px;
+  position: relative;
+  text-align: center;
 }
 .mb-0 .dash-title {
-    font-size: 20px;
-    text-align: center;
-    color: rgba(255, 255, 255, 0.81);
+  font-size: 20px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.81);
 }
 .hr_birthday {
-    font-size: 28px;
-    text-align: center;
-    padding: 20px 0;
-    color: #00438b;
-    font-weight: 600;
+  font-size: 28px;
+  text-align: center;
+  padding: 20px 0;
+  color: #00438b;
+  font-weight: 600;
 }
 body .text-color {
-    color: #00438b;
+  color: #00438b;
 }
 .slice {
-    stroke: #fff;
-    stroke-width: 0px;
+  stroke: #fff;
+  stroke-width: 0px;
 }
 
 /* Leave graph */
 
-path {  stroke: #fff; }
-path:hover {  opacity:0.9; }
-rect:hover {  fill:#934da5; }
-.axis {  font: 10px sans-serif; }
-.legend tr{    border-bottom:1px solid grey; }
-.legend tr:first-child{    border-top:1px solid grey; }
+path {
+  stroke: #fff;
+}
+path:hover {
+  opacity: 0.9;
+}
+rect:hover {
+  fill: #934da5;
+}
+.axis {
+  font: 10px sans-serif;
+}
+.legend tr {
+  border-bottom: 1px solid grey;
+}
+.legend tr:first-child {
+  border-top: 1px solid grey;
+}
 
 .axis path,
 .axis line {
@@ -109,806 +127,760 @@ rect:hover {  fill:#934da5; }
   shape-rendering: crispEdges;
 }
 
-.x.axis path {  display: none; }
-.legend{
-    border-collapse: collapse;
-    border-spacing: 0px;
-    display: inline-block;
+.x.axis path {
+  display: none;
+}
+.legend {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  display: inline-block;
 }
-.legend td, .legend .legend_col{
-    padding:4px 5px;
-    vertical-align:bottom;
+.legend td,
+.legend .legend_col {
+  padding: 4px 5px;
+  vertical-align: bottom;
 }
-.legendFreq, .legendPerc{
-    align:right;
-    width:50px;
+.legendFreq,
+.legendPerc {
+  align: right;
+  width: 50px;
 }
 
 /* Leave broadfactor graph */
 
 .broad_factor_graph .axis path,
 .broad_factor_graph .axis line {
-	fill: none;
-	stroke: black;
-	shape-rendering: crispEdges;
+  fill: none;
+  stroke: black;
+  shape-rendering: crispEdges;
 }
 .broad_factor_graph .axis text {
-	font-family: sans-serif;
-	font-size: 11px;
+  font-family: sans-serif;
+  font-size: 11px;
 }
 
 .broad_factor_graph rect {
-	-moz-transition: all 0.3s;
-	-webkit-transition: all 0.3s;
-	-o-transition: all 0.3s;
-	transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  transition: all 0.3s;
 }
-.broad_factor_graph rect:hover{
-	fill: #ff618a;
+.broad_factor_graph rect:hover {
+  fill: #ff618a;
 }
 
 #broad_factor_pdf {
-    background-color: #ffffff;
-    border: 0;
-    color : #000000;
-    float: right;
+  background-color: #ffffff;
+  border: 0;
+  color: #000000;
+  float: right;
 }
 #broad_factor_pdf i {
-    color: red;
+  color: red;
 }
 
-.leave_broad_factor{
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
-    height: auto;
+.leave_broad_factor {
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  height: auto;
 }
 
 /*=====================New Dashboard===========================*/
 
 .oh_dashboards {
-    background-color: #f8faff !important;
-    padding: 0px !important;
-
+  background-color: #f8faff !important;
+  padding: 0px !important;
 }
 .container-fluid.o_pos_dashboard {
-    padding: 0px !important;
+  padding: 0px !important;
 }
 .employee-prof {
-
-    padding: 0px;
-    height: 100%;
-    background-color: #3e6282;
-    /*background-image: linear-gradient(180deg, #3e6282, #41666f);*/
-    position: fixed;
-    z-index: 999;
+  padding: 0px;
+  height: 100%;
+  background-color: #3e6282;
+  position: fixed;
+  z-index: 999;
 }
 .employee-prof .oh-card:hover {
-
-    transform:none !important;
-    box-shadow: none !important;
-
+  transform: none !important;
+  box-shadow: none !important;
 }
 
-/*.dummy{
-    height:130vh;
-}*/
 .oh-card {
-
-    padding-top: 0px;
-    padding: 0px;
-    margin-bottom: 1.5rem;
-    border-radius: 0px;
-    box-shadow: none;
-    background: none;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-
+  padding-top: 0px;
+  padding: 0px;
+  margin-bottom: 1.5rem;
+  border-radius: 0px;
+  box-shadow: none;
+  background: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
 }
 .oh-card:hover {
-
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
-
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 .employee-prof .employee-icon {
-
-    float: left;
-    padding-right: 0px;
-    width: 100%;
-    height: 185px;
-    overflow: hidden;
-    background: #fff;
-
+  float: left;
+  padding-right: 0px;
+  width: 100%;
+  height: 185px;
+  overflow: hidden;
+  background: #fff;
 }
-.employee-prof .employee-icon img{
-    width: 100%;
-    background: #fff;
+.employee-prof .employee-icon img {
+  width: 100%;
+  background: #fff;
 }
 
 .employee-prof .employee-name h2 {
-
-    text-align: center;
-    font-weight: 300;
-    text-transform: uppercase;
-    font-size: 17px;
-    margin-top: 12px;
-    margin-bottom: 2px;
-    color: #fff;
-
+  text-align: center;
+  font-weight: 300;
+  text-transform: uppercase;
+  font-size: 17px;
+  margin-top: 12px;
+  margin-bottom: 2px;
+  color: #fff;
 }
 .media-body.employee-name {
-
-    background: #466b8d;
-    float: left;
-    margin: 0;
-    width: 100%
-
+  background: #466b8d;
+  float: left;
+  margin: 0;
+  width: 100%;
 }
 .employee-prof .employee-name p {
-
-    margin: 0 0 9px;
-    text-align: center;
-    font-size: 12px;
-    color: #f3f3f3;
-
+  margin: 0 0 9px;
+  text-align: center;
+  font-size: 12px;
+  color: #f3f3f3;
 }
 .employee-prof p {
-    margin: 0 0 9px;
-    color: #fff;
+  margin: 0 0 9px;
+  color: #fff;
 }
 .employee-gender {
-    width: 40%;
-    margin-left: 10%;
-    padding: 8% 10% 4%;
-    text-align: center;
-    border-right: 1px solid #4d769b;
-    margin-top: 14%;
-    float: left;
-    border-bottom: 1px solid #4d769b;
+  width: 40%;
+  margin-left: 10%;
+  padding: 8% 10% 4%;
+  text-align: center;
+  border-right: 1px solid #4d769b;
+  margin-top: 14%;
+  float: left;
+  border-bottom: 1px solid #4d769b;
 }
 .employee-gender p {
-    margin: 0px 0 4px !important;
-    color: #fff;
+  margin: 0px 0 4px !important;
+  color: #fff;
 }
 .employee-age {
-    width: 40%;
-    margin-right: 10%;
-    padding: 4% 10% 7%;
-    text-align: center;
-    margin-top: 18%;
-    float: left;
-    border-bottom: 1px solid #4d769b;
+  width: 40%;
+  margin-right: 10%;
+  padding: 4% 10% 7%;
+  text-align: center;
+  margin-top: 18%;
+  float: left;
+  border-bottom: 1px solid #4d769b;
 }
 .employee-age p {
-    margin: 0 0 1px;
-    color: #fff;
+  margin: 0 0 1px;
+  color: #fff;
 }
 .employee-experience {
-
-    width: 100%;
-    text-align: center;
-    padding-top: 8%;
-    float: left;
-    padding-bottom: 3%;
-
+  width: 100%;
+  text-align: center;
+  padding-top: 8%;
+  float: left;
+  padding-bottom: 3%;
 }
 .employee-country {
-    width: 40%;
-    margin-left: 10%;
-    padding: 9% 0% 4%;
-    text-align: center;
-    border-right: 1px solid #4d769b;
-    margin-top: 2%;
-    float: left;
-    border-top: 1px solid #4d769b;
-
+  width: 40%;
+  margin-left: 10%;
+  padding: 9% 0% 4%;
+  text-align: center;
+  border-right: 1px solid #4d769b;
+  margin-top: 2%;
+  float: left;
+  border-top: 1px solid #4d769b;
 }
 .employee-country p {
-    margin: 0px 0 1px !important;
-    color: #fff;
+  margin: 0px 0 1px !important;
+  color: #fff;
 }
 .employee-mobile {
-    width: 40%;
-    margin-right: 10%;
-    padding: 9% 0% 7%;
-    text-align: center;
-    margin-top: 2%;
-    float: left;
-    border-top: 1px solid #4d769b;
+  width: 40%;
+  margin-right: 10%;
+  padding: 9% 0% 7%;
+  text-align: center;
+  margin-top: 2%;
+  float: left;
+  border-top: 1px solid #4d769b;
 }
 .employee-mobile p {
-    margin: 0 0 1px;
-    color: #fff;
+  margin: 0 0 1px;
+  color: #fff;
 }
 .oh-payslip {
-
-    margin-top: 4.5%;
-
+  margin-top: 4.5%;
 }
 .oh-payslip .stat-icon {
-
-    width: 30%;
-    height: 85px;
-    text-align: center;
-    background: #ff8762;
-    color: #fff;
-    width: 32%;
-    padding-top: 2%;
-    font-size: xxx-large;
-
+  width: 30%;
+  height: 85px;
+  text-align: center;
+  background: #ff8762;
+  color: #fff;
+  width: 32%;
+  padding-top: 2%;
+  font-size: xxx-large;
 }
 .oh-payslip .oh-card {
-
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
 }
 .stat-widget-one .stat-text {
-
-    font-size: 14px;
-    color: #ff8762;
-    margin-top: 2.3rem;
-    margin-left: 1rem;
-
+  font-size: 14px;
+  color: #ff8762;
+  margin-top: 2.3rem;
+  margin-left: 1rem;
 }
 .stat-widget-one .stat-digit {
-    font-size: 26px;
-    color:#993232;
-    margin-left: 1rem;
-    margin-top: -1px;
-    font-family: initial
+  font-size: 26px;
+  color: #993232;
+  margin-left: 1rem;
+  margin-top: -1px;
+  font-family: initial;
 }
 
 .stat-widget-one .stat-icon i {
-
-    font-size: 25px;
-    font-weight: 900;
-    display: inline-block;
-    color: #fff;
-
+  font-size: 25px;
+  font-weight: 900;
+  display: inline-block;
+  color: #fff;
 }
 .stat-widget-one {
-
-    background-color: white;
-    text-align: left;
-
+  background-color: white;
+  text-align: left;
 }
 .stat-widget-one {
-    width: 100%;
+  width: 100%;
 }
 .oh-payslip .stat-icon {
-
-    width: 30%;
-    height: 85px;
-    text-align: center;
-    padding-top: 2%;
-
+  width: 30%;
+  height: 85px;
+  text-align: center;
+  padding-top: 2%;
 }
-.oh-timesheets .stat-icon{
-    background: #5ebade !important;
+.oh-timesheets .stat-icon {
+  background: #5ebade !important;
 }
-.oh-contracts .stat-icon{
-    background: #b298e1 !important;
+.oh-contracts .stat-icon {
+  background: #b298e1 !important;
 }
-.oh-broad-factor .stat-icon{
-    background: #70cac1 !important;
+.oh-broad-factor .stat-icon {
+  background: #70cac1 !important;
 }
 .oh-timesheets .stat-widget-one .stat-text {
-    color: #5ebade;
+  color: #5ebade;
 }
 .oh-contracts .stat-widget-one .stat-text {
-    color: #b298e1;
+  color: #b298e1;
 }
 .oh-broad-factor .stat-widget-one .stat-text {
-    color: #70cac1;
+  color: #70cac1;
 }
 .leave-manager {
-
-    background-color: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    padding: 0px;
-    margin: 15px;
-
+  background-color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  padding: 0px;
+  margin: 15px;
 }
 .hr_leave_request_approve {
-    padding: 0;
-    padding-bottom: 0em;
-    padding-top: 0em;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
+  padding: 0;
+  padding-bottom: 0em;
+  padding-top: 0em;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
 }
 .leaves_request_month {
-    padding: 0;
-        padding-top: 0px;
-        padding-bottom: 0px;
-    padding-bottom: 0em;
-    padding-top: 0em;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    border-bottom: 1px solid #f1f1f133;
-}
-.leaves_request_today{
-    padding: 0;
-    padding-bottom: 0em;
-    padding-top: 0em;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-
-}
-.hr_leave_request_approve:hover, .leaves_request_month:hover, .leaves_request_today:hover{
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+  padding: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-bottom: 0em;
+  padding-top: 0em;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  border-bottom: 1px solid #f1f1f133;
+}
+.leaves_request_today {
+  padding: 0;
+  padding-bottom: 0em;
+  padding-top: 0em;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+}
+.hr_leave_request_approve:hover,
+.leaves_request_month:hover,
+.leaves_request_today:hover {
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 .hr_leave_request_approve p {
-    font-size: 14px;
-    color: #ff8762;
-    margin-left: 1rem;
-    margin-bottom: 0px;
-    text-align: left;
-    width: 64%;
-    font-weight: bold;
-    float: left;
+  font-size: 14px;
+  color: #ff8762;
+  margin-left: 1rem;
+  margin-bottom: 0px;
+  text-align: left;
+  width: 64%;
+  font-weight: bold;
+  float: left;
 }
 .leaves_request_today p {
-    font-size: 14px;
-    color: #5ebade;
-    margin-left: 1rem;
-    margin-bottom: 0px;
-    text-align: left;
-    width:64%;
-    float:left;
-    font-weight: bold;
-}
-.leaves_request_month p{
-    font-size: 14px;
-    color: #b298e1;
-    margin-left: 1rem;
-    margin-bottom:0px;
-    text-align: left;
-    width:64%;
-    float:left;
-    font-weight: bold;
+  font-size: 14px;
+  color: #5ebade;
+  margin-left: 1rem;
+  margin-bottom: 0px;
+  text-align: left;
+  width: 64%;
+  float: left;
+  font-weight: bold;
+}
+.leaves_request_month p {
+  font-size: 14px;
+  color: #b298e1;
+  margin-left: 1rem;
+  margin-bottom: 0px;
+  text-align: left;
+  width: 64%;
+  float: left;
+  font-weight: bold;
 }
 h4 .stat-count {
-    font-size: 17px;
-    text-align: center;
-    color: #000 !important;
-    margin-top: 0px;
-    width: 100%;
-    float: left;
-    margin: 0;
+  font-size: 17px;
+  text-align: center;
+  color: #000 !important;
+  margin-top: 0px;
+  width: 100%;
+  float: left;
+  margin: 0;
 }
 .leave-manager h4 {
-    float: left;
-    width: 23%;
-
+  float: left;
+  width: 23%;
 }
 .hr_leave_request_approve h4 {
-
-    padding: 5.2rem 0;
-    margin: 0;
-    background: #ff8762;
-    color: #fff;
-
+  padding: 5.2rem 0;
+  margin: 0;
+  background: #ff8762;
+  color: #fff;
 }
 .leaves_request_today h4 {
-
-    padding: 2.2rem 0;
-    margin: 0 !important;
-    background: #5ebade;
-    color: #fff;
-
+  padding: 2.2rem 0;
+  margin: 0 !important;
+  background: #5ebade;
+  color: #fff;
 }
 .leaves_request_month h4 {
-
-    padding: 2.1rem 0;
-    margin: 0 !important;
-    background: #b298e1;
-    color: #fff;
-
+  padding: 2.1rem 0;
+  margin: 0 !important;
+  background: #b298e1;
+  color: #fff;
 }
-.leaves_request_today  h4 .stat-count ,.leaves_request_month h4 .stat-count , .hr_leave_request_approve h4 .stat-count
-{
-    color:#fff !important;
+.leaves_request_today h4 .stat-count,
+.leaves_request_month h4 .stat-count,
+.hr_leave_request_approve h4 .stat-count {
+  color: #fff !important;
 }
 .graph_view .legend {
-    margin-bottom: 27px;
-    display: inline-block;
-    border-collapse: collapse;
-    border-spacing: 0px;
-    margin-left: 29px;
-}
-.hr-chart-1{
-    margin: 15px 0px;
-    background: #fff;
-    padding: 0px !important;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-}
-.hr-chart-1:hover{
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+  margin-bottom: 27px;
+  display: inline-block;
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin-left: 29px;
+}
+.hr-chart-1 {
+  margin: 15px 0px;
+  background: #fff;
+  padding: 0px !important;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+}
+.hr-chart-1:hover {
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 .stat-head {
-    text-align: left !important;
-    font-weight: 300;
-    font-size: 15px;
-    margin-bottom: 25px;
-    margin-left: 24px;
-    width: 100%;
+  text-align: left !important;
+  font-weight: 300;
+  font-size: 15px;
+  margin-bottom: 25px;
+  margin-left: 24px;
+  width: 100%;
 }
 .emp_graph {
-    padding-left: 90px;
-    height: auto;
-    padding-bottom: 65px;
-    text-align: center !important;
+  padding-left: 90px;
+  height: auto;
+  padding-bottom: 65px;
+  text-align: center !important;
 }
 .hr_leave_allocations_approve p {
-    font-size: 14px;
-    color: #ff8762;
-    margin-left: 1rem;
-    margin-bottom: 0px;
-    text-align: left;
-    width: 70%;
-    float: left;
-    font-weight: bold;
+  font-size: 14px;
+  color: #ff8762;
+  margin-left: 1rem;
+  margin-bottom: 0px;
+  text-align: left;
+  width: 70%;
+  float: left;
+  font-weight: bold;
 }
 .hr_leave_allocations_approve h4 {
-
-    padding: 2.5rem 0;
-    margin: 0;
-    background: #ff8762;
-    color: #fff;
-    width: 26%;
-    float: left;
+  padding: 2.5rem 0;
+  margin: 0;
+  background: #ff8762;
+  color: #fff;
+  width: 26%;
+  float: left;
 }
 .hr_leave_allocations_approve .stat-count {
-
-    font-size: 17px;
-    text-align: center;
-    color: #fff !important;
-    margin-top: 0px;
-    width: 100%;
-    float: left;
-    margin: 0;
-
+  font-size: 17px;
+  text-align: center;
+  color: #fff !important;
+  margin-top: 0px;
+  width: 100%;
+  float: left;
+  margin: 0;
 }
 .hr_leave_allocations_approve {
-
-    padding: 0;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    padding-bottom: 0em;
-    padding-top: 0em;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    background: #fff;
-    height: 80px;
-
-}
-.hr_leave_allocations_approve:hover{
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+  padding: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-bottom: 0em;
+  padding-top: 0em;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  background: #fff;
+  height: 80px;
+}
+.hr_leave_allocations_approve:hover {
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 .leave-manager {
-
-    background-color: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    padding: 0px;
-    margin: 15px;
-        margin-right: 15px;
-    margin-right: 0px;
-    width: 95% !important;
-    padding: 0;
-
+  background-color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  padding: 0px;
+  margin: 15px;
+  margin-right: 15px;
+  margin-right: 0px;
+  width: 95% !important;
+  padding: 0;
 }
 .hr_job_application_approve {
-    padding: 0;
-        padding-top: 0px;
-        padding-bottom: 0px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    padding-bottom: 0em;
-    padding-top: 0em;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    background: #fff;
-    margin-top: 15px;
-    height: 80px;
-
+  padding: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-bottom: 0em;
+  padding-top: 0em;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  background: #fff;
+  margin-top: 15px;
+  height: 80px;
 }
 .hr_job_application_approve p {
-    font-size: 14px;
-    color: #70cac1;
-    margin-left: 1rem;
-    margin-bottom: 0px;
-    text-align: left;
-    width: 70%;
-    float: left;
-    font-weight: bold;
+  font-size: 14px;
+  color: #70cac1;
+  margin-left: 1rem;
+  margin-bottom: 0px;
+  text-align: left;
+  width: 70%;
+  float: left;
+  font-weight: bold;
 }
 .hr_job_application_approve h4 {
-
-    padding: 2.5rem 0;
-    margin: 0;
-    background: #70cac1;
-    color: #fff;
-    width: 26%;
-    float: left;
-
+  padding: 2.5rem 0;
+  margin: 0;
+  background: #70cac1;
+  color: #fff;
+  width: 26%;
+  float: left;
 }
 .hr_job_application_approve .stat-count {
-
-    font-size: 17px !important;
-    color: #fff !important;
-    margin-top: 0px !important;
-    width: 100%;
-    float: left;
-    margin: 0;
-    margin: 0px !important;
-    text-align: center !important;
-    width: 100% !important;
-
-}
-.hr_job_application_approve:hover{
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+  font-size: 17px !important;
+  color: #fff !important;
+  margin-top: 0px !important;
+  width: 100%;
+  float: left;
+  margin: 0;
+  margin: 0px !important;
+  text-align: center !important;
+  width: 100% !important;
+}
+.hr_job_application_approve:hover {
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 .hr_attendance_login .oh-card {
-    margin: 0;
-        margin-bottom: 0px;
-    margin-bottom: 0px;
-    background: #134c8a;
-    padding-bottom: 7px;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
+  margin: 0;
+  margin-bottom: 0px;
+  margin-bottom: 0px;
+  background: #134c8a;
+  padding-bottom: 7px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
 }
 .hr_attendance_login .stat-widget-one {
-    background: none;
+  background: none;
 }
 .hr_attendance_login .stat-widget-one .stat-icon {
-    text-align: center;
-    padding-top: 9px;
+  text-align: center;
+  padding-top: 9px;
 }
 .hr_attendance_login .stat-content {
-    width: 100%;
-    color: #fff !important;
+  width: 100%;
+  color: #fff !important;
 }
 .hr_attendance_login .stat-widget-one .stat-text {
-    margin: 0;
-    text-align: center;
-    width: 100% !important;
-    padding: 0;
-    color: #fff;
+  margin: 0;
+  text-align: center;
+  width: 100% !important;
+  padding: 0;
+  color: #fff;
 }
 .hr_attendance_login .stat-widget-one .stat-icon .fa {
-    font-size: 50px;
+  font-size: 50px;
 }
 .hr_attendance_login .stat-widget-one .stat-icon .fa {
-    font-size: 50px;
-    margin: 0px;
-    box-shadow: none;
+  font-size: 50px;
+  margin: 0px;
+  box-shadow: none;
 }
 .hr_attendance_login {
-    margin-top: 1.5%;
+  margin-top: 1.5%;
 }
 .monthly_leave_graph_view .oh-card {
-    background: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    padding: 15px;
+  background: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  padding: 15px;
 }
 .broad_factor_graph .oh-card {
-    padding: 15px !important;
-    background: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    padding: 15px;
+  padding: 15px !important;
+  background: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  padding: 15px;
 }
 .leave_broad_factor {
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
-    height: 336px;
-    padding: 0px;
-        padding-left: 0px;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  height: 336px;
+  padding: 0px;
+  padding-left: 0px;
 }
 #broad_factor_pdf {
-
-    background-color: #ffffff;
-    float: right;
-    border-radius: 30px;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    border: 1px solid #4ec3b7;
-    color: #757575;
-    padding-top: 9px;
-    color: #4ec3b7;
-
-}
-#broad_factor_pdf:hover{
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+  background-color: #ffffff;
+  float: right;
+  border-radius: 30px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  border: 1px solid #4ec3b7;
+  color: #757575;
+  padding-top: 9px;
+  color: #4ec3b7;
+}
+#broad_factor_pdf:hover {
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 .hr_birthday {
-    font-size: 17px;
-    text-align: center;
-    padding: 20px 0;
-    color: #00438b;
-    font-weight: 300;
+  font-size: 17px;
+  text-align: center;
+  padding: 20px 0;
+  color: #00438b;
+  font-weight: 300;
 }
 .hr_notification img {
-    width: 40px;
-    height: 40px;
-    border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
 }
 .hr_notification {
-    background: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    height: 316px;
-    overflow-y: auto;
-    margin-bottom: 15px;
+  background: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  height: 316px;
+  overflow-y: auto;
+  margin-bottom: 15px;
 }
 .hr_notification .media {
-    border-bottom: 1px solid #e6e6e6;
-    padding-bottom: 6px;
-    margin-bottom: 10px;
+  border-bottom: 1px solid #e6e6e6;
+  padding-bottom: 6px;
+  margin-bottom: 10px;
 }
 .hr_notification .text-color.display-6 {
-    margin: 0px 0 3px;
-    color: #2d2d2d;
+  margin: 0px 0 3px;
+  color: #2d2d2d;
 }
 .hr_notification p {
-    margin: 0 0 1px;
-    color: #666;
-    font-size: 10px;
+  margin: 0 0 1px;
+  color: #666;
+  font-size: 10px;
 }
 .hr_notification_head {
-    font-size: 17px;
-    text-align: center;
-    padding: 12px 0;
-    color: #fff;
-    font-weight: 300;
-    background: #de6a5e;
-    margin-bottom: 9px;
-}
-.monthly_leave_trend .oh-card{
-    background: #fff;
-    transition: none !important;
-    will-change: none !important;
-    box-shadow: none !important;
-    margin-bottom: 5px;
+  font-size: 17px;
+  text-align: center;
+  padding: 12px 0;
+  color: #fff;
+  font-weight: 300;
+  background: #de6a5e;
+  margin-bottom: 9px;
+}
+.monthly_leave_trend .oh-card {
+  background: #fff;
+  transition: none !important;
+  will-change: none !important;
+  box-shadow: none !important;
+  margin-bottom: 5px;
 }
 
 .monthly_leave_trend path {
-    stroke: #70cac1;
-    stroke-width: 2;
-    fill: none;
+  stroke: #70cac1;
+  stroke-width: 2;
+  fill: none;
 }
 
 .monthly_leave_trend .axis path,
 .monthly_leave_trend .axis line {
-    fill: none;
-    stroke: grey;
-    stroke-width: 1;
-    shape-rendering: crispEdges;
+  fill: none;
+  stroke: grey;
+  stroke-width: 1;
+  shape-rendering: crispEdges;
 }
-.monthly_leave_trend circle{
-    fill: #ffffff;
-    stroke: #44b7ac;
-    stroke-width: 1.5;
+.monthly_leave_trend circle {
+  fill: #ffffff;
+  stroke: #44b7ac;
+  stroke-width: 1.5;
 }
 .hr-chart-1 {
-    margin: 15px 0px;
-    background: #fff;
-    padding: 0px !important;
-        padding-top: 0px;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    padding-top: 3px !important;
+  margin: 15px 0px;
+  background: #fff;
+  padding: 0px !important;
+  padding-top: 0px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  padding-top: 3px !important;
 }
 .monthly_leave_trend {
-    background: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
+  background: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
 }
-.monthly_leave_trend:hover{
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+.monthly_leave_trend:hover {
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 
-
-/*----------------------*/
-.monthly_join_resign_trend{
-    padding-right: 0px !important;
+.monthly_join_resign_trend {
+  padding-right: 0px !important;
 }
 
 .monthly_join_resign_trend .oh-card {
-    background: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    padding: 15px;
+  background: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  padding: 15px;
 }
 
 .monthly_join_resign_trend .axis path,
 .monthly_join_resign_trend .axis line {
-      fill: none;
-      shape-rendering: crispEdges;
-    }
+  fill: none;
+  shape-rendering: crispEdges;
+}
 
 .monthly_join_resign_trend .line {
-      fill: none;
-      stroke-width: 3px;
-
-    }
+  fill: none;
+  stroke-width: 3px;
+}
 
 .monthly_join_resign_trend .area {
-      fill: steelblue;
-      opacity: 0.5;
-    }
+  fill: steelblue;
+  opacity: 0.5;
+}
 
 .monthly_join_resign_trend .dot {
-      fill: steelblue;
-      stroke: steelblue;
-      stroke-width: 1.5px;
-    }
-
-/*----------------------------------------*/
-
+  fill: steelblue;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
 
 .monthly_attrition_rate path {
-    stroke: #70cac1;
-    stroke-width: 2;
-    fill: none;
+  stroke: #70cac1;
+  stroke-width: 2;
+  fill: none;
 }
 
 .monthly_attrition_rate .axis path,
 .monthly_attrition_rate .axis line {
-    fill: none;
-    stroke: grey;
-    stroke-width: 1;
-    shape-rendering: crispEdges;
+  fill: none;
+  stroke: grey;
+  stroke-width: 1;
+  shape-rendering: crispEdges;
 }
-.monthly_attrition_rate circle{
-    fill: #ffffff;
-    stroke: #44b7ac;
-    stroke-width: 1.5;
+.monthly_attrition_rate circle {
+  fill: #ffffff;
+  stroke: #44b7ac;
+  stroke-width: 1.5;
 }
 
 .monthly_attrition_rate .oh-card {
-    background: #fff;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform, box-shadow;
-    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07), 0 2px 9px 0 rgba(62,57,107,0.06);
-    padding: 15px;
+  background: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  will-change: transform, box-shadow;
+  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+    0 2px 9px 0 rgba(62, 57, 107, 0.06);
+  padding: 15px;
 }
 
-.monthly_attrition_rate .oh-card:hover{
-    transform: translateY(-2px) translateZ(0) !important;
-    box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+.monthly_attrition_rate .oh-card:hover {
+  transform: translateY(-2px) translateZ(0) !important;
+  box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
 }
 
-
 .row.main-section {
-    margin-right: 0px; !important;
+  margin-right: 0px !important;
 }
 /* width */
 .hr_notification::-webkit-scrollbar {
@@ -931,40 +903,44 @@ h4 .stat-count {
 }
 
 .oh-card-body {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .oh-ribbon {
   position: absolute;
-  left: -5px; top: -5px;
+  left: -5px;
+  top: -5px;
   z-index: 1;
   overflow: hidden;
-  width: 150px; height: 150px;
+  width: 150px;
+  height: 150px;
   text-align: right;
 }
 .oh-ribbon span {
-    font-size: 10px;
-    font-weight: bold;
-    color: #FFF;
-    text-transform: uppercase;
-    text-align: center;
-    line-height: 20px;
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-    width: 200px;
-    display: block;
-    background: #79A70A;
-    background: linear-gradient(#2989d8 0%, #1e5799 100%);
-    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
-    position: absolute;
-    top: 56px;
-    left: -35px;
+  font-size: 10px;
+  font-weight: bold;
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 20px;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  width: 200px;
+  display: block;
+  background: #79a70a;
+  background: linear-gradient(#2989d8 0%, #1e5799 100%);
+  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
+  position: absolute;
+  top: 56px;
+  left: -35px;
 }
 .oh-ribbon span::before {
   content: "";
-  position: absolute; left: 0px; top: 100%;
+  position: absolute;
+  left: 0px;
+  top: 100%;
   z-index: -1;
   border-left: 3px solid #1e5799;
   border-right: 3px solid transparent;
@@ -973,7 +949,9 @@ h4 .stat-count {
 }
 .oh-ribbon span::after {
   content: "";
-  position: absolute; right: 0px; top: 100%;
+  position: absolute;
+  right: 0px;
+  top: 100%;
   z-index: -1;
   border-left: 3px solid transparent;
   border-right: 3px solid #1e5799;
@@ -981,29 +959,27 @@ h4 .stat-count {
   border-top: 3px solid #1e5799;
 }
 
-.o_action_manager{
-     overflow-y: scroll !important;
-    max-width:100%;
- }
-
- .hr_notification {
-
-    margin-top: 20px;
+.o_action_manager {
+  overflow-y: scroll !important;
+  max-width: 100%;
 }
 
-.stat_count{
-    margin-top: -111px;
-    margin-left: 35px;
-    font-size: 48px;
+.hr_notification {
+  margin-top: 20px;
 }
 
+.stat_count {
+  margin-top: -111px;
+  margin-left: 35px;
+  font-size: 48px;
+}
 
 .stat-head {
-    text-align: left !important;
-    font-weight: 300;
-    font-size: 18px;
-    margin-bottom: 25px;
-    margin-left: 24px;
-    width: 100%;
-    margin-top: 57px;
-}
\ No newline at end of file
+  text-align: left !important;
+  font-weight: 300;
+  font-size: 18px;
+  margin-bottom: 25px;
+  margin-left: 24px;
+  width: 100%;
+  margin-top: 57px;
+}