diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index 946cfb7f3..116a9ee8e 100644
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -5,7 +5,7 @@
             <div :class="['p-accordion-header', {'p-highlight': tab.d_active, 'p-disabled': tab.disabled}]">
                 <a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'"
                     :aria-expanded="tab.d_active" :id="ariaId + i + '_header'" :aria-controls="ariaId + i + '_content'">
-                    <span :class="['p-accordion-toggle-icon pi pi-fw', {'pi-caret-right': !tab.d_active, 'pi-caret-down': tab.d_active}]"></span>
+                    <span :class="['p-accordion-toggle-icon pi', {'pi-caret-right': !tab.d_active, 'pi-caret-down': tab.d_active}]"></span>
                     <span class="p-accordion-header-text" v-if="tab.header">{{tab.header}}</span>
                     <AccordionTabSlot :tab="tab" type="header" v-if="tab.$scopedSlots.header" />
                 </a>
@@ -95,40 +95,17 @@ export default {
 </script>
 
 <style>
-.p-accordion {
-    width: 100%;
-}
-
-.p-accordion .p-accordion-header {
+.p-accordion-header a {
     cursor: pointer;
-    position: relative;
-    margin-top: 1px;
-    zoom: 1;
+    display: flex;
+    align-items: center;
 }
 
-.p-accordion .p-accordion-header a {
-    display: block;
-    padding: .5em;
-}
-
-.p-accordion .p-accordion-toggle-icon,
-.p-accordion .p-accordion-header-text {
-    vertical-align: middle;
-}
-
-.p-accordion .p-accordion-header a > span {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-accordion .p-accordion-content {
-    padding: 1em;
-    border-top: 0;
-    zoom: 1;
-}
-
-.p-accordion .p-accordion-header.p-disabled,
-.p-accordion .p-accordion-header.p-disabled a {
+.p-accordion-header.p-disabled a {
     cursor: default;
 }
+
+.p-accordion-header-text {
+    line-height: 1;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 70c04a695..618835f14 100644
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -451,7 +451,7 @@ export default {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
- 
+
 .p-autocomplete-dd .p-autocomplete-dropdown {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0px;
diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
index 06acbabd3..39239d93f 100644
--- a/src/components/card/Card.vue
+++ b/src/components/card/Card.vue
@@ -17,34 +17,11 @@
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style>
 .p-card-header img {
     width: 100%;
 }
-
-.p-card-body {
-    padding: 1em;
-}
-
-.p-card-title {
-    font-size: 1.5em;
-    font-weight: bold;
-    margin-bottom: .5em;
-}
-
-.p-card-subtitle {
-    opacity: .7;
-    margin-bottom: .5em;
-    margin-top: -.25em;
-    font-weight: bold;
-}
-
-.p-card-footer {
-    padding-top: 1em;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 16f30dfec..943d6de7c 100644
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -204,48 +204,4 @@ export default {
         'DVPaginator': Paginator
     }
 }
-</script>
-
-<style>
-.p-dataview .p-paginator {
-	text-align: center;
-}
-
-.p-dataview-column {
-	padding: .25em;
-}
-
-.p-dataview-content-empty {
-	padding: .25em .625em;
-}
-
-.p-dataview .p-dataview-header,
-.p-dataview .p-dataview-footer {
-	text-align: center;
-	padding: .5em .75em;
-}
-
-.p-dataview .p-dataview-header {
-	border-bottom: 0 none;
-}
-
-.p-dataview .p-dataview-footer {
-	border-top: 0 none;
-}
-
-.p-dataview .p-paginator-top {
-	border-bottom: 0 none;
-}
-
-.p-dataview .p-paginator-bottom {
-	border-top: 0 none;
-}
-
-.p-dataview.p-dataview-list > .p-dataview-content > div.p-grid > div {
-	width: 100%;
-}
-
-.p-dataview-loading-icon {
-	font-size: 2em;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/fieldset/Fieldset.vue b/src/components/fieldset/Fieldset.vue
index 758b7b5fc..86291f69a 100644
--- a/src/components/fieldset/Fieldset.vue
+++ b/src/components/fieldset/Fieldset.vue
@@ -12,8 +12,8 @@
                 </slot>
             </a>
         </legend>
-        <transition name="p-fieldset-content-wrapper">
-            <div class="p-fieldset-content-wrapper" v-show="!d_collapsed"
+        <transition name="p-toggleable-content">
+            <div class="p-toggleable-content" v-show="!d_collapsed"
                 role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
                 <div class="p-fieldset-content">
                     <slot></slot>
@@ -62,49 +62,14 @@ export default {
 </script>
 
 <style>
-.p-fieldset,
-.p-fieldset .p-fieldset-legend {
-    padding: 0.5em 1em;
-}
-
-.p-fieldset-toggleable .p-fieldset-legend {
-    padding: 0;
+.p-fieldset-legend > a,
+.p-fieldset-legend > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .p-fieldset-toggleable .p-fieldset-legend a {
-    padding: 0.5em 1em;
-    cursor:pointer;
-    white-space: nowrap;
-    display: block;
-}
-
-.p-fieldset .p-fieldset-toggler {
-    margin-right: .1em;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-fieldset .p-fieldset-legend-text {
-    vertical-align: middle;
-}
-
-.p-fieldset-content-wrapper-enter,
-.p-fieldset-content-wrapper-leave-to {
-    max-height: 0;
-}
-
-.p-fieldset-content-wrapper-enter-to,
-.p-fieldset-content-wrapper-leave {
-    max-height: 1000px;
-}
-
-.p-fieldset-content-wrapper-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-fieldset-content-wrapper-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
+    cursor: pointer;
 }
 </style>
diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index e2e876df1..0df69c449 100644
--- a/src/components/orderlist/OrderList.vue
+++ b/src/components/orderlist/OrderList.vue
@@ -300,82 +300,30 @@ export default {
 
 <style>
 .p-orderlist {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
 }
 
-.p-orderlist-controls-left {
-    flex-direction: row;
-}
-
-.p-orderlist-controls-right {
-    flex-direction: row-reverse;
-}
-
-.p-orderlist-controls,
-.p-orderlist-list-container {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-}
 .p-orderlist-controls {
-    padding: 0 .25em;
-    width: 16.66666%;
-    align-self: center;
-}
-
-.p-orderlist-controls .p-button.p-button-icon-only {
-    display: block;
-    margin-bottom: 0.25em;
-    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .p-orderlist-list-container {
-    width: 83.33333%;
+    flex: 1 1 auto;
 }
 
 .p-orderlist-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
-    overflow:auto;
-    height: 12.5em;
-}
-
-.p-orderlist-caption {
-    text-align: center;
-	padding: .5em .75em;
-    border-bottom: 0 none;
+    overflow: auto;
+    min-height: 12em;
+    max-height: 24em;
 }
 
 .p-orderlist-item {
-    margin: 1px;
-    padding: .125em;
     cursor: pointer;
-    border: 0 none;
-    font-weight: inherit;
-}
-
-.p-orderlist-filter-container {
-    position: relative;
-    width: 100%;
-    padding: .5em .6em;
-    border-bottom: 0 none;
-}
-
-.p-orderlist-filter-container .p-inputtext {
-    text-indent: 1.1em;
-    width: 100%;
-}
-
-.p-orderlist-filter-container .p-orderlist-filter-icon {
-    position: absolute;
-    top: 50%;
-    left: 1em;
-    margin-top: -.6em;
 }
 
 .p-orderlist.p-state-disabled .p-orderlist-item,
@@ -387,25 +335,13 @@ export default {
     overflow: hidden;
 }
 
-.p-orderlist .p-orderlist-droppoint {
-    height: 6px;
-    list-style-type: none;
-}
-
 @media (max-width: 767px) {
+    .p-orderlist {
+        flex-direction: column;
+    }
+
     .p-orderlist-controls {
-        width: 100%;
-        text-align: center;
-    }
-
-    .p-orderlist .p-orderlist-list-container {
-        width: 100%;
-    }
-
-    .p-orderlist .p-orderlist-controls .p-button.p-button.p-button-icon-only {
-        display: inline-block;
-        width: 20%;
-        margin-right: .25em;
+        flex-direction: row;
     }
 }
 </style>
diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
index f90d6362e..59c9b5678 100644
--- a/src/components/panel/Panel.vue
+++ b/src/components/panel/Panel.vue
@@ -57,41 +57,16 @@ export default {
 </script>
 
 <style>
-.p-panel {
-	padding: 0.2em;
+.p-panel-titlebar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.p-panel .p-panel-titlebar {
-	padding: .5em .75em;
-}
-
-.p-panel .p-panel-titlebar-icon {
-	float: right;
+.p-panel-titlebar-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
-    height: 1.25em;
-    width: 1.25em;
-    line-height: 1.25em;
-    text-align: center;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-
-.p-panel .p-panel-titlebar-icon span {
-    line-height: inherit;
-}
-
-.p-panel .p-panel-content {
-	border: 0;
-    background: none;
-    padding: .5em .75em;
-}
-
-.p-panel .p-panel-footer {
-	border-width: 1px 0 0;
-	padding: .25em .5em;
-	text-align:left;
 }
 </style>
diff --git a/src/components/picklist/PickList.vue b/src/components/picklist/PickList.vue
index 21e676239..f7ae582df 100644
--- a/src/components/picklist/PickList.vue
+++ b/src/components/picklist/PickList.vue
@@ -1,12 +1,10 @@
 <template>
     <div class="p-picklist p-component p-picklist-responsive">
         <div class="p-picklist-buttons p-picklist-source-controls">
-            <div class="p-picklist-buttons-cell">
-                <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
-            </div>
+            <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
             <div class="p-picklist-caption" v-if="$slots.sourceHeader">
@@ -22,12 +20,10 @@
             </transition-group>
         </div>
         <div class="p-picklist-buttons">
-            <div class="p-picklist-buttons-cell">
-                <PLButton type="button" icon="pi pi-angle-right" @click="moveToTarget"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
-            </div>
+            <PLButton type="button" icon="pi pi-angle-right" @click="moveToTarget"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
             <div class="p-picklist-caption" v-if="$slots.targetHeader">
@@ -43,12 +39,10 @@
             </transition-group>
         </div>
         <div class="p-picklist-buttons p-picklist-target-controls">
-            <div class="p-picklist-buttons-cell">
-                <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
-                <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
-            </div>
+            <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
+            <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
         </div>
     </div>
 </template>
@@ -484,50 +478,29 @@ export default {
 <style>
 .p-picklist {
     display: flex;
-    flex-wrap: wrap;
-}
-
-.p-picklist-buttons,
-.p-picklist-list-wrapper {
-    flex: 0 0 auto;
 }
 
 .p-picklist-buttons {
-    padding: 0 .25em;
-    width: 10%;
-    align-self: center;
-}
-
-.p-picklist-buttons .p-button.p-button-icon-only {
-    display: block;
-    margin-bottom: 0.25em;
-    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .p-picklist-list-wrapper {
-    width: 35%;
+    flex: 1 1 auto;
 }
 
 .p-picklist-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
-    overflow:auto;
-    height: 12.5em;
-}
-
-.p-picklist-caption {
-    text-align: center;
-	padding: .5em .75em;
-    border-bottom: 0 none;
+    overflow: auto;
+    min-height: 12em;
+    max-height: 24em;
 }
 
 .p-picklist-item {
-    margin: 1px;
-    padding: .125em;
     cursor: pointer;
-    border: 0 none;
-    font-weight: inherit;
 }
 
 .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
@@ -536,19 +509,12 @@ export default {
 }
 
 @media (max-width: 767px) {
+    .p-picklist {
+        flex-direction: column;
+    }
+
     .p-picklist-buttons {
-        width: 100%;
-        text-align: center;
-    }
-
-    .p-picklist-list-wrapper {
-        width: 100%;
-    }
-
-    .p-picklist-buttons .p-button.p-button-icon-only {
-        display: inline-block;
-        width: 20%;
-        margin-right: .25em;
+        flex-direction: row;
     }
 }
 
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index 64ad51d9d..712ca8063 100644
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="p-tabview p-component p-tabview-top">
-        <ul class="p-tabview-nav p-reset" role="tablist">
-            <li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="['p-unselectable-text', {'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
+    <div class="p-tabview p-component">
+        <ul class="p-tabview-nav" role="tablist">
+            <li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="[{'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
                 <a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'" :aria-selected="tab.d_active">
                     <span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
                     <TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
@@ -91,151 +91,21 @@ export default {
 </script>
 
 <style>
-.p-tabview {
-    padding: .25em;
-}
-
-.p-tabview .p-tabview-nav {
+.p-tabview-nav {
+    display: flex;
     margin: 0;
-}
-
-.p-tabview .p-tabview-nav:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.p-tabview .p-tabview-nav li {
-    list-style: none;
-    float: left;
-    position: relative;
-    margin: 0 .125em 1px 0;
     padding: 0;
-    white-space: nowrap;
+    list-style-type: none;
 }
 
-.p-tabview .p-tabview-nav li a {
-    float: left;
-    padding: .5em 1em;
-    text-decoration: none;
-}
-
-.p-tabview .p-tabview-nav li.p-tabview-selected a,
-.p-tabview .p-tabview-nav li.p-disabled a,
-.p-tabview .p-tabview-nav li.p-state-processing a {
-    cursor: text;
-}
-
-.p-tabview .p-tabview-nav li a,
-.p-tabview.p-tabview-collapsible .p-tabview-nav li.p-tabview-selected a {
+.p-tabview-nav a {
     cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
 }
 
-.p-tabview .p-tabview-panel {
-    border-width: 0;
-    padding: 1em;
-    background: none;
-}
-
-.p-tabview .p-tabview-nav li {
-    display: block;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-left-icon,
-.p-tabview .p-tabview-nav li .p-tabview-right-icon,
-.p-tabview .p-tabview-nav li .p-tabview-title {
-    vertical-align: middle;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-left-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-right-icon {
-    margin-left: .25em;
-    vertical-align: middle;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-close {
-    margin: 0.5em 0.3em 0 0;
-    cursor: pointer;
-}
-
-/* per orientation settings */
-/* top and bottom */
-.p-tabview.p-tabview-top > .p-tabview-nav li {
-    border-bottom: 0;
-    top: 1px;
-}
-
-.p-tabview.p-tabview-top > .p-tabview-nav {
-    padding: .2em .2em 0;
-}
-
-.p-tabview.p-tabview-bottom > .p-tabview-nav {
-    padding: 0 .2em .2em;
-}
-
-.p-tabview.p-tabview-bottom > .p-tabview-nav li {
-    border-top: 0;
-}
-
-/* left and right*/
-.p-tabview-left:after,
-.p-tabview-right:after {
-    clear:both;
-    content: ".";
-    display: block;
-    height: 0;
-    visibility: hidden;
-}
-
-.p-tabview-left > .p-tabview-nav {
-    float:left;
-    width: 25%;
-    height: 300px;
-    background-image: none;
-    padding-top: 1px;
-}
-
-.p-tabview-left > .p-tabview-panels {
-    float:right;
-    width: 75%;
-}
-
-.p-tabview.p-tabview-left > .p-tabview-nav li,
-.p-tabview.p-tabview-right > .p-tabview-nav li{
-    display: block;
-    float: right;
-    white-space: normal;
-    width: 99%;
-}
-
-.p-tabview.p-tabview-left > .p-tabview-nav li {
-    margin: 0 0 1px 0;
-    border-right:0 none;
-}
-
-.p-tabview.p-tabview-right > .p-tabview-nav {
-    float:right;
-    width: 25%;
-    height: 300px;
-    background-image: none;
-    padding-top: 1px;
-}
-
-.p-tabview.p-tabview-right > .p-tabview-panels {
-    float:left;
-    width: 75%;
-}
-
-.p-tabview.p-tabview-right > .p-tabview-nav li {
-    margin: 0 0 1px 0;
-    border-left:0 none;
-}
-/* RTL */
-.p-rtl .p-tabview .p-tabview-nav li {
-    float: right;
+.p-tabview-nav li.p-disabled a {
+    cursor: auto;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/toolbar/Toolbar.vue b/src/components/toolbar/Toolbar.vue
index 8b3dda626..eaefda793 100644
--- a/src/components/toolbar/Toolbar.vue
+++ b/src/components/toolbar/Toolbar.vue
@@ -17,20 +17,8 @@ export default {
 
 <style>
 .p-toolbar {
-    padding: .25em .5em;
-}
-
-.p-toolbar:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.p-toolbar-group-left {
-    float:left
-}
-
-.p-toolbar-group-right {
-    float:right
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index 010d756cb..d13f5cf91 100644
--- a/src/components/tree/Tree.vue
+++ b/src/components/tree/Tree.vue
@@ -1,15 +1,14 @@
 <template>
     <div :class="containerClass">
         <template v-if="loading">
-            <div class="p-tree-loading-mask p-component-overlay"></div>
-            <div class="p-tree-loading-content">
+            <div class="p-tree-loading-mask p-component-overlay">
                 <i :class="loadingIconClass" />
             </div>
         </template>
         <div class="p-tree-filter-container" v-if="filter">
             <input type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder"
                 @keydown="onFilterKeydown" v-model="filterValue" />
-                <span class="p-tree-filter-icon pi pi-search"></span>
+            <span class="p-tree-filter-icon pi pi-search"></span>
         </div>
         <ul class="p-tree-container" role="tree">
             <TreeNode v-for="node of valueToRender" :key="node.key" :node="node" :templates="$scopedSlots"
@@ -280,136 +279,59 @@ export default {
 </script>
 
 <style>
-.p-tree {
-    width: 24em;
-}
-
-.p-tree .p-treenode-selectable.p-treenode-content {
-    cursor: pointer;
-}
-
-.p-tree .p-tree-container {
-    height: 100%;
+.p-tree-container {
     margin: 0;
+    padding: 0;
+    list-style-type: none;
     overflow: auto;
-    padding: .25em;
-    white-space: nowrap;
 }
 
-.p-tree .p-treenode-children {
+.p-treenode-children {
     margin: 0;
-    padding: 0 0 0 1em;
-}
-
-.p-tree .p-treenode {
-    background-attachment: scroll;
-    background-color: transparent;
-    background-image: none;
-    background-position: 0 0;
-    background-repeat: repeat-y;
-    list-style: none outside none;
-    margin: 0;
-    padding: .125em 0 0 0;
-}
-
-.p-tree .p-treenode-droppoint {
-    height: 4px;
+    padding: 0;
     list-style-type: none;
 }
 
-.p-tree .p-treenode-droppoint-active {
-    border: 0 none;
-}
-
-.p-tree .p-tree-toggler {
+.p-treenode-selectable {
     cursor: pointer;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-tree .p-tree-toggler .p-tree-toggler-icon {
-    vertical-align: middle;
-}
-
-.p-tree .p-treenode-icon {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-tree .p-treenode-label {
-    display: inline-block;
-    padding: 0 .25em;
-    vertical-align: middle;
     user-select: none;
 }
 
-.p-tree .p-treenode.p-treenode-leaf > .p-treenode-content > .p-tree-toggler {
+.p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
     visibility: hidden;
 }
 
-.p-tree .p-checkbox-box {
-    cursor: pointer;
-}
-
-.p-tree .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-tree .p-checkbox .p-checkbox-icon {
-    margin-left: 1px;
-}
-
-.p-tree .p-tree-filter {
+.p-tree-filter {
     width: 100%;
-    box-sizing: border-box;
-    padding-right: 1.5em;
 }
 
-.p-tree .p-tree-filter-container {
+.p-tree-filter-container {
     position: relative;
-    margin: 0;
-    padding: 0.4em;
-    display: inline-block;
+    display: block;
     width: 100%;
 }
 
-.p-tree .p-tree-filter-container .p-tree-filter-icon {
+.p-tree-filter-icon {
     position: absolute;
-    top: .8em;
-    right: 1em;
+    top: 50%;
+    margin-top: -.5em;
 }
 
-/** Fluid **/
-.p-fluid .p-tree {
-    width: 100%;
-}
-
-/** Loading **/
-.p-tree.p-tree-loading {
+.p-tree-loading {
     position: relative;
     min-height: 4em;
 }
 
-.p-tree .p-tree-loading-mask {
+.p-tree-loading-mask {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
     z-index: 1;
-}
-
-.p-tree .p-tree-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-tree .p-tree-loading-content .p-tree-loading-icon {
-    font-size: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 </style>