primeng 11.1.0 → 11.2.3

package/resources/themes/md-dark-deeppurple/theme.css

@@ -56,7 +56,7 @@
   opacity: 0.38;
 }
 
-.p-error, .p-invalid {
+.p-error {
   color: #f44435;
 }
 
@@ -117,9 +117,6 @@
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
   margin-left: 0.5rem;
 }
-.p-autocomplete.p-error > .p-inputtext, .p-autocomplete.p-invalid > .p-inputtext {
-  border-color: #f44435;
-}
 
 p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   border-color: #f44435;
@@ -152,9 +149,12 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   color: #CE93D8;
   background: rgba(206, 147, 216, 0.16);
 }
-
-.p-calendar.p-error > .p-inputtext, .p-calendar.p-invalid > .p-inputtext {
-  border-color: #f44435;
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
 }
 
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
@@ -386,9 +386,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
-  border-color: #f44435;
-}
 
 .p-cascadeselect-panel {
   background: #2b2b2b;
@@ -428,6 +425,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   font-size: 0.875rem;
 }
 
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+  border-color: #f44435;
+}
+
 .p-input-filled .p-cascadeselect {
   background: rgba(255, 255, 255, 0.06);
 }
@@ -474,9 +475,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   background: #CE93D8;
   color: #121212;
 }
-.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
-  border-color: #f44435;
-}
 
 p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   border-color: #f44435;
@@ -531,9 +529,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   padding: 0;
   margin: 0;
 }
-.p-chips.p-error > .p-inputtext, .p-chips.p-invalid > .p-inputtext {
-  border-color: #f44435;
-}
 
 p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44435;
@@ -654,9 +649,6 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   background: transparent;
   font-weight: 400;
 }
-.p-dropdown-panel.p-error, .p-dropdown-panel.p-invalid {
-  border-color: #f44435;
-}
 
 p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
   border-color: #f44435;
@@ -879,9 +871,6 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: rgba(206, 147, 216, 0.5);
 }
-.p-inputswitch.p-error, .p-inputswitch.p-invalid {
-  border-color: #f44435;
-}
 
 p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   border-color: #f44435;
@@ -907,7 +896,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   box-shadow: none;
   border-color: #CE93D8;
 }
-.p-inputtext.p-error, .p-inputtext.p-invalid, .p-inputtext.ng-dirty.ng-invalid {
+.p-inputtext.ng-dirty.ng-invalid {
   border-color: #f44435;
 }
 .p-inputtext.p-inputtext-sm {
@@ -1035,13 +1024,17 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
 .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
-.p-listbox.p-error, .p-listbox.p-invalid {
-  border-color: #f44435;
-}
 
 p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-color: #f44435;
@@ -1086,9 +1079,6 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-multiselect.p-error, .p-multiselect.p-invalid {
-  border-color: #f44435;
-}
 
 .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
   padding: 0.5rem 1rem;
@@ -1168,6 +1158,13 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1237,9 +1234,6 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background: #121212;
   color: #CE93D8;
 }
-.p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
-  border-color: #f44435;
-}
 
 p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
   border-color: #f44435;
@@ -1326,9 +1320,6 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
 .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-selectbutton.p-error > .p-button, .p-selectbutton.p-invalid > .p-button {
-  border-color: #f44435;
-}
 
 p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
   border-color: #f44435;
@@ -1423,9 +1414,6 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
 .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-togglebutton.p-button.p-error, .p-togglebutton.p-button.p-invalid {
-  border-color: #f44435;
-}
 
 p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-color: #f44435;
@@ -1869,13 +1857,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 
 .p-button.p-button-link {
-  color: transparent;
+  color: #CE93D8;
   background: transparent;
   border: transparent;
 }
 .p-button.p-button-link:enabled:hover {
   background: transparent;
-  color: transparent;
+  color: #CE93D8;
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:hover .p-button-label {
@@ -1888,7 +1876,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 .p-button.p-button-link:enabled:active {
   background: transparent;
-  color: transparent;
+  color: #CE93D8;
   border-color: transparent;
 }
 
@@ -5378,34 +5366,6 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
   box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16);
 }
 
-/*p-calendar.ng-dirty.ng-invalid {
-    .p-inputtext {
-        &:enabled:focus {
-            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
-        }
-    }
-
-    .p-calendar-w-btn {
-        border-color: $inputErrorBorderColor;
-
-        &:not(.p-disabled):hover {
-            border-color: $inputErrorBorderColor;
-        }
-
-        .p-inputtext {
-            &:enabled:focus {
-                box-shadow: none;
-            }
-        }
-    }
-
-    &.p-inputwrapper-focus {
-        .p-calendar-w-btn {
-            border-color: $inputErrorBorderColor;
-            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
-        }
-    }
-}*/
 p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled: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;
 }
@@ -5472,6 +5432,66 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
   background-image: none;
 }
 
+.p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-inputtext {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+}
+
+.p-cascadeselect-item .p-ink {
+  background-color: rgba(206, 147, 216, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background-color: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  border: 0 none;
+}
+.p-input-filled p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect: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-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background: #A5D6A7;
   color: #121212;

package/resources/themes/md-dark-indigo/theme.css

@@ -56,7 +56,7 @@
   opacity: 0.38;
 }
 
-.p-error, .p-invalid {
+.p-error {
   color: #f44435;
 }
 
@@ -117,9 +117,6 @@
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
   margin-left: 0.5rem;
 }
-.p-autocomplete.p-error > .p-inputtext, .p-autocomplete.p-invalid > .p-inputtext {
-  border-color: #f44435;
-}
 
 p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   border-color: #f44435;
@@ -152,9 +149,12 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   color: #9FA8DA;
   background: rgba(159, 168, 218, 0.16);
 }
-
-.p-calendar.p-error > .p-inputtext, .p-calendar.p-invalid > .p-inputtext {
-  border-color: #f44435;
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
 }
 
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
@@ -386,9 +386,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
-  border-color: #f44435;
-}
 
 .p-cascadeselect-panel {
   background: #2b2b2b;
@@ -428,6 +425,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   font-size: 0.875rem;
 }
 
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+  border-color: #f44435;
+}
+
 .p-input-filled .p-cascadeselect {
   background: rgba(255, 255, 255, 0.06);
 }
@@ -474,9 +475,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   background: #9FA8DA;
   color: #121212;
 }
-.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
-  border-color: #f44435;
-}
 
 p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   border-color: #f44435;
@@ -531,9 +529,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   padding: 0;
   margin: 0;
 }
-.p-chips.p-error > .p-inputtext, .p-chips.p-invalid > .p-inputtext {
-  border-color: #f44435;
-}
 
 p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #f44435;
@@ -654,9 +649,6 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   background: transparent;
   font-weight: 400;
 }
-.p-dropdown-panel.p-error, .p-dropdown-panel.p-invalid {
-  border-color: #f44435;
-}
 
 p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
   border-color: #f44435;
@@ -879,9 +871,6 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: rgba(159, 168, 218, 0.5);
 }
-.p-inputswitch.p-error, .p-inputswitch.p-invalid {
-  border-color: #f44435;
-}
 
 p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   border-color: #f44435;
@@ -907,7 +896,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   box-shadow: none;
   border-color: #9FA8DA;
 }
-.p-inputtext.p-error, .p-inputtext.p-invalid, .p-inputtext.ng-dirty.ng-invalid {
+.p-inputtext.ng-dirty.ng-invalid {
   border-color: #f44435;
 }
 .p-inputtext.p-inputtext-sm {
@@ -1035,13 +1024,17 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
 .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
-.p-listbox.p-error, .p-listbox.p-invalid {
-  border-color: #f44435;
-}
 
 p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-color: #f44435;
@@ -1086,9 +1079,6 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-multiselect.p-error, .p-multiselect.p-invalid {
-  border-color: #f44435;
-}
 
 .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
   padding: 0.5rem 1rem;
@@ -1168,6 +1158,13 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1237,9 +1234,6 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background: #121212;
   color: #9FA8DA;
 }
-.p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
-  border-color: #f44435;
-}
 
 p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
   border-color: #f44435;
@@ -1326,9 +1320,6 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
 .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-selectbutton.p-error > .p-button, .p-selectbutton.p-invalid > .p-button {
-  border-color: #f44435;
-}
 
 p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
   border-color: #f44435;
@@ -1423,9 +1414,6 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
 .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-togglebutton.p-button.p-error, .p-togglebutton.p-button.p-invalid {
-  border-color: #f44435;
-}
 
 p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-color: #f44435;
@@ -1869,13 +1857,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 
 .p-button.p-button-link {
-  color: transparent;
+  color: #9FA8DA;
   background: transparent;
   border: transparent;
 }
 .p-button.p-button-link:enabled:hover {
   background: transparent;
-  color: transparent;
+  color: #9FA8DA;
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:hover .p-button-label {
@@ -1888,7 +1876,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 .p-button.p-button-link:enabled:active {
   background: transparent;
-  color: transparent;
+  color: #9FA8DA;
   border-color: transparent;
 }
 
@@ -5378,34 +5366,6 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
   box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16);
 }
 
-/*p-calendar.ng-dirty.ng-invalid {
-    .p-inputtext {
-        &:enabled:focus {
-            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
-        }
-    }
-
-    .p-calendar-w-btn {
-        border-color: $inputErrorBorderColor;
-
-        &:not(.p-disabled):hover {
-            border-color: $inputErrorBorderColor;
-        }
-
-        .p-inputtext {
-            &:enabled:focus {
-                box-shadow: none;
-            }
-        }
-    }
-
-    &.p-inputwrapper-focus {
-        .p-calendar-w-btn {
-            border-color: $inputErrorBorderColor;
-            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
-        }
-    }
-}*/
 p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled: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;
 }
@@ -5472,6 +5432,66 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
   background-image: none;
 }
 
+.p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-inputtext {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+}
+
+.p-cascadeselect-item .p-ink {
+  background-color: rgba(159, 168, 218, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background-color: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  border: 0 none;
+}
+.p-input-filled p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect: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-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background: #F48FB1;
   color: #121212;