From b93c06d30d673ff417531ea4866fa4085edbc973 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 13 Jan 2021 14:27:52 +0300
Subject: [PATCH] Fixed #853

---
 public/themes/arya-blue/theme.css               |  2 +-
 public/themes/arya-green/theme.css              |  2 +-
 public/themes/arya-orange/theme.css             |  2 +-
 public/themes/arya-purple/theme.css             |  2 +-
 public/themes/bootstrap4-dark-blue/theme.css    |  2 +-
 public/themes/bootstrap4-dark-purple/theme.css  |  2 +-
 public/themes/bootstrap4-light-blue/theme.css   |  2 +-
 public/themes/bootstrap4-light-purple/theme.css |  2 +-
 public/themes/fluent-light/theme.css            |  2 +-
 public/themes/luna-amber/theme.css              |  2 +-
 public/themes/luna-blue/theme.css               |  2 +-
 public/themes/luna-green/theme.css              |  2 +-
 public/themes/luna-pink/theme.css               |  2 +-
 public/themes/md-dark-deeppurple/theme.css      | 17 ++++++++++++++++-
 public/themes/md-dark-indigo/theme.css          | 17 ++++++++++++++++-
 public/themes/md-light-deeppurple/theme.css     | 17 ++++++++++++++++-
 public/themes/md-light-indigo/theme.css         | 17 ++++++++++++++++-
 public/themes/mdc-dark-deeppurple/theme.css     | 17 ++++++++++++++++-
 public/themes/mdc-dark-indigo/theme.css         | 17 ++++++++++++++++-
 public/themes/mdc-light-deeppurple/theme.css    | 17 ++++++++++++++++-
 public/themes/mdc-light-indigo/theme.css        | 17 ++++++++++++++++-
 public/themes/nova-accent/theme.css             |  2 +-
 public/themes/nova-alt/theme.css                |  2 +-
 public/themes/nova-vue/theme.css                |  2 +-
 public/themes/nova/theme.css                    |  2 +-
 public/themes/rhea/theme.css                    |  2 +-
 public/themes/saga-blue/theme.css               |  2 +-
 public/themes/saga-green/theme.css              |  2 +-
 public/themes/saga-orange/theme.css             |  2 +-
 public/themes/saga-purple/theme.css             |  2 +-
 public/themes/vela-blue/theme.css               |  2 +-
 public/themes/vela-green/theme.css              |  2 +-
 public/themes/vela-orange/theme.css             |  2 +-
 public/themes/vela-purple/theme.css             |  2 +-
 src/views/cascadeselect/CascadeSelectDemo.vue   |  2 +-
 35 files changed, 155 insertions(+), 35 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 185062e77..62b7689f6 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 11fd61e66..660983bd7 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index c365532ce..8331740e2 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index c8cb6c60b..180570e86 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 1acfd5e7b..8f31ee3c6 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f19ea6;
 }
 
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 74887e8c6..287c2988e 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f19ea6;
 }
 
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 5b11cc9b2..ab2bcdd66 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #dc3545;
 }
 
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 6fb6eb9dd..4e895e62f 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #dc3545;
 }
 
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index f4f25d0b4..18d7f32e1 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a4252c;
 }
 
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 8551a587b..d1645e2e4 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 2744dcf23..56a783027 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 53da96efb..ca1f1785b 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 035b14a9c..ada10512a 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 6bd900449..5d50cce5d 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index adb3f0ec9..dd303d43d 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 99f7b9aad..026aab42e 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 9f78fad14..bb6e38fc4 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index a24b74eda..623550b43 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 0f6b1e7bf..277fdcd9f 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 4f9feef5f..aeb891640 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index f574974f3..8622d3ec3 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index b043094c6..3cf0a7656 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 56ba3440a..a96e04f21 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index d05803004..e7cfd9f17 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index ad2c36e19..5cb6234ab 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index da2609bf4..057b144fc 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e7a3a3;
 }
 
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 65fb7c43d..409bb57cd 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 9faf19103..2c4be7061 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index f92513e95..db6f89425 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 644a69d1c..9603af9d7 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index a378efb44..26c4543ac 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 9e4680bb9..b64cebcc7 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index fdf16433f..acf3daeed 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 15dafb706..8712614fd 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 
diff --git a/src/views/cascadeselect/CascadeSelectDemo.vue b/src/views/cascadeselect/CascadeSelectDemo.vue
index 66ab69822..3ecde1ea0 100644
--- a/src/views/cascadeselect/CascadeSelectDemo.vue
+++ b/src/views/cascadeselect/CascadeSelectDemo.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+                <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" class="p-invalid"
                         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
 
                 <h5>Templating</h5>