diff --git a/frappe/public/build.json b/frappe/public/build.json
index f72ce0561e..7f30bfec60 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -91,7 +91,6 @@
 		"public/js/frappe/ui/dialog.js"
 	],
 	"css/desk.min.css": [
-		"public/js/lib/datepicker/datepicker.min.css",
 		"public/js/lib/summernote/summernote.css",
 		"public/js/lib/leaflet/leaflet.css",
 		"public/js/lib/leaflet/leaflet.draw.css",
@@ -360,8 +359,7 @@
 	"css/web_form.css": [
 		"public/less/list.less",
 		"website/css/web_form.css",
-		"public/js/lib/summernote/summernote.css",
-		"public/js/lib/datepicker/datepicker.min.css"
+		"public/js/lib/summernote/summernote.css"
 	],
 	"js/print_format_v3.min.js": [
 		"public/js/legacy/layout.js",
diff --git a/frappe/public/less/controls.less b/frappe/public/less/controls.less
index 19a86cdd74..f84f665dad 100644
--- a/frappe/public/less/controls.less
+++ b/frappe/public/less/controls.less
@@ -2,6 +2,7 @@
 @import "mixins.less";
 @import "common.less";
 @import "awesomplete.less";
+@import "datepicker.less";
 
 .unit-checkbox {
 	color: #36414c;
diff --git a/frappe/public/less/datepicker.less b/frappe/public/less/datepicker.less
new file mode 100644
index 0000000000..e3e60490ca
--- /dev/null
+++ b/frappe/public/less/datepicker.less
@@ -0,0 +1,62 @@
+@import "variables.less";
+@import (less) "../js/lib/datepicker/datepicker.min.css";
+
+.datepicker {
+	font-family: inherit;
+	z-index: 9999 !important;
+
+	&--time-current-hours, &--time-current-minutes, &--time-current-seconds {
+		font-family: inherit;
+	}
+
+	&--day-name {
+		color: @text-color;
+	}
+
+	&--cell {
+		&.-current- {
+			color: @brand-primary;
+
+			&.-in-range- {
+				color: @brand-primary;
+			}
+		}
+
+		&.-range-from-, &.-range-to- {
+			border: 1px solid fade(@brand-primary, 30%);
+			background: fade(@brand-primary, 10%);
+		}
+
+		&.-selected-, &.-current-.-selected- {
+			background: @brand-primary;
+		}
+
+		&.-in-range- {
+			background: fade(@brand-primary, 5%);
+		}
+
+		&.-in-range-.-focus- {
+			background: fade(@brand-primary, 10%);
+		}
+
+		&.-selected-.-focus- {
+			background: fade(@brand-primary, 90%);
+		}
+
+    }
+
+    &--time-row {
+        background-image: linear-gradient(to right, @border-color, @border-color);
+        background-repeat: no-repeat;
+        background-size: 100% 1px;
+        background-position: left 50%;
+    }
+
+    &--time-row:first-child {
+        margin: 0;
+    }
+}
+
+.datepicker--button {
+	color: @brand-primary;
+}
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less
index 5de3b2c86c..c0034af1fc 100644
--- a/frappe/public/less/desk.less
+++ b/frappe/public/less/desk.less
@@ -153,55 +153,6 @@ textarea.form-control {
 	border-bottom: 1px solid @light-border-color;
 }
 
-.datepicker {
-	font-family: inherit;
-	z-index: 9999 !important;
-
-	&--time-current-hours, &--time-current-minutes, &--time-current-seconds {
-		font-family: inherit;
-	}
-
-	&--day-name {
-		color: @text-color;
-	}
-
-	&--cell {
-		&.-current- {
-			color: @brand-primary;
-
-			&.-in-range- {
-				color: @brand-primary;
-			}
-		}
-
-		&.-range-from-, &.-range-to- {
-			border: 1px solid fade(@brand-primary, 30%);
-			background: fade(@brand-primary, 10%);
-		}
-
-		&.-selected-, &.-current-.-selected- {
-			background: @brand-primary;
-		}
-
-		&.-in-range- {
-			background: fade(@brand-primary, 5%);
-		}
-
-		&.-in-range-.-focus- {
-			background: fade(@brand-primary, 10%);
-		}
-
-		&.-selected-.-focus- {
-			background: fade(@brand-primary, 90%);
-		}
-
-	}
-}
-
-.datepicker--button {
-	color: @brand-primary;
-}
-
 .hidden-xs-inline, .hidden-xs-inline-block {
 	display: none;
 }