1 files changed, 25 insertions, 9 deletions
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
index 593bb09d7d..d51a1b690e 100644
--- a/openecomp-ui/resources/scss/components/_datepicker.scss
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -1,5 +1,6 @@
 .customized-date-picker {
 	margin-bottom: 24px;
+	display: flex;
 	.date-picker-label {
 		&.required {
 			&:before {
@@ -13,27 +14,38 @@
 		color: $dark-gray;
 		margin-bottom: 8px;
 	}
+	.react-datepicker__input-container {
+		flex: 1;
+		cursor: pointer;
+	}
 	.datepicker-custom-input {
 		display: flex;
 		justify-content: space-between;
-		width: 243px;
+		align-items: center;
 		height: 30px;
 		border-radius: 2px;
 		color: $dark-gray;
 		border: 1px solid $light-gray;
-		padding: 6px 12px;
+		padding: 6px 8px 6px 12px;
+		.clear-input {
+				margin-left: auto;
+				margin-right: 8px;
+				.svg-icon {
+					fill: transparent;
+					height: 8px;
+					width: 8px;
+				}
+			}
 		&:hover {
 			border-color: $gray;
 			.clear-input {
-				&:before {
-					cursor: pointer;
-					content: 'x';
+				.svg-icon {
+					fill: initial;
 				}
 			}
 		}
 		.datepicker-text {
 			cursor: pointer;
-			width: 170px;
 			@extend .body-1;
 			&.placeholder {
 				color: $light-gray;
@@ -43,9 +55,13 @@
 		.calendar-input {
 			fill: $light-gray;
 		}
+		.svg-icon-wrapper.calendar {
+			.svg-icon {
+				fill: $dark-gray;
+				width: 17px;
+				height: 17px;
+			}
+		}
 	}
-
-
-
 }