[FIX] Improved styling datetime picker

common/sass/styles/datetimepicker.scss

@@ -17,6 +17,7 @@ $datetimepicker-border: 2px solid $border-color;
 .pika-button, .pika-prev, .pika-next {
 	@extend .btn;
 	@extend .btn-sm;
+  background-color: #fff;
 }
 :not(.is-disabled) > .pika-button:hover, .pika-prev:hover, .pika-next:hover {
 	@extend .btn-primary;
@@ -28,18 +29,30 @@ $datetimepicker-border: 2px solid $border-color;
 
 .pika-time-container {
 	margin-top: 20px;
+  width:100%;
+  height:100%;
+}
+
+.pika-time {
+  margin: 0 auto;
 }
 
 .pika-label {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
+  font-size: 0;
+  max-width: 180px;
+  position: relative;
 }
-.pika-label select {
-	@extend .pull-right;
+
+.pika-title .pika-label {
+  @extend .col-md-6;
 }
 
 .pika-title {
+  @extend .row;
 	margin-bottom: 20px;
 	border-bottom: $datetimepicker-border;
+  max-width: 400px;
 }
 
 .pika-lendar {
@@ -48,4 +61,40 @@ $datetimepicker-border: 2px solid $border-color;
 
 tr.pika-row > td.is-disabled {
 	color: $border-color;
-}
+}
+
+.pika-select {
+  width: 100%;
+  font-size: 1rem;
+  border: 1px solid #e5ecf3;
+  border-radius: 2px;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.pika-label .pika-select {
+  padding: 5px 15px;
+}
+.pika-time .pika-select {
+  padding: 10px;
+}
+.pika-time td {
+  padding: 2px;
+}
+
+.pika-label::after {
+  content: '';
+  display: block;
+  width: 10px;
+  right: 26px;
+  position: absolute;
+  top: 15px;
+  border-color: #999 transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 2.5px;
+}
+
+.pika-select::-ms-expand {
+    display: none;
+}