diff --git a/apps/react/src/styles/_banners.scss b/apps/react/src/styles/_banners.scss
new file mode 100644
index 000000000..2ae664766
--- /dev/null
+++ b/apps/react/src/styles/_banners.scss
@@ -0,0 +1,45 @@
+.banner--top {
+    width: 100%;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding-left: $space-xl;
+    padding-right: $space-xl;
+
+    @media (max-width: $media-breakpoint-mobile) {
+        padding-left: $space-m;
+        padding-right: $space-m;
+    }
+}
+
+.banner--bottom {
+    width: 100%;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding-left: $space-xl;
+    padding-right: $space-xl;
+    margin-top: 40px;
+
+    @media (max-width: $media-breakpoint-mobile) {
+        padding-left: $space-m;
+        padding-right: $space-m;
+    }
+
+    &__content {
+        width: calc(100% - #{$left-aside-width} - #{$column-spacing});
+        margin-left: calc(#{$left-aside-width} + #{$column-spacing});
+
+        @media (max-width: $media-breakpoint-desktop) {
+            width: calc(
+                100% - #{$left-aside-width-desktop} - #{$column-spacing}
+            );
+            margin-left: calc(
+                #{$left-aside-width-desktop} + #{$column-spacing}
+            );
+        }
+
+        @media (max-width: $media-breakpoint-tablet) {
+            width: 100%;
+            margin-left: 0;
+        }
+    }
+}
diff --git a/apps/react/src/styles/_buttons.scss b/apps/react/src/styles/_buttons.scss
new file mode 100644
index 000000000..3a7d7d2c9
--- /dev/null
+++ b/apps/react/src/styles/_buttons.scss
@@ -0,0 +1,217 @@
+button {
+    min-height: 35px;
+}
+button,
+a {
+    cursor: pointer;
+    transition-duration: 0.2s;
+
+    .p-button-label {
+        @include font-small();
+        font-weight: $font-medium;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    &.color {
+        border: none !important;
+
+        .p-button-label {
+            color: $white;
+        }
+
+        &.blue {
+            background-color: $blue;
+
+            &:hover {
+                background-color: $blue--hover;
+            }
+        }
+
+        &.white {
+            background-color: $white;
+            border: 1.3px solid $border !important;
+
+            &:hover {
+                background-color: $blue-extra-light;
+            }
+
+            .p-button-label {
+                color: $gray;
+            }
+        }
+
+        &.download-button {
+            border: 1.3px solid $border-blue !important;
+            height: $medium-button-height;
+            border-radius: $border-radius 0 0 $border-radius;
+            width: 100%;
+            transition-duration: 0.2s;
+
+            .p-button-label {
+                font-weight: $font-medium;
+                font-size: 14px;
+                text-align: left;
+            }
+        }
+
+        &.download-button-options {
+            border: 1.3px solid $border-blue !important;
+            height: $medium-button-height;
+            border-radius: 0 $border-radius $border-radius 0;
+            background-image: url('~src/assets/img/arr-down.svg');
+            background-position: center center;
+            background-repeat: no-repeat;
+            margin-left: -1px;
+            width: $medium-button-height;
+        }
+
+        &.orange {
+            background-color: $orange;
+
+            &:hover {
+                background-color: $orange--hover;
+            }
+        }
+
+        &.blue-light {
+            background-color: $blue-light;
+
+            &:hover {
+                background-color: $blue-light--hover;
+            }
+
+            &.text-only {
+                border-color: none;
+                background-color: $white;
+
+                .p-button-label {
+                    color: $blue-light;
+                }
+
+                &:hover {
+                    background-color: $blue-extra-light;
+                    border-color: $blue-light--hover;
+
+                    .p-button-label {
+                        color: $blue-light--hover;
+                    }
+                }
+            }
+        }
+
+        &.blue-glow {
+            background: white;
+
+            .p-button-label {
+                padding: 0px;
+                font-size: $font-size-m;
+                color: $blue-light;
+            }
+
+            padding: 0px;
+            margin: 0px;
+
+            &:hover {
+                padding: $space-s;
+                margin: -$space-s;
+                background: $blue-icon;
+            }
+        }
+
+        &.blue-home {
+            background: transparent;
+            border: 1.3px solid $blue-light !important;
+
+            .p-button-label {
+                color: $blue-light;
+            }
+
+            padding: 0px;
+            margin: 0px;
+
+            &:hover {
+                border: 1.3px solid $blue !important;
+
+                .p-button-label {
+                    color: $blue;
+                }
+            }
+        }
+    }
+
+    &.square {
+        .p-button-label {
+            visibility: hidden;
+            display: none;
+        }
+
+        .p-button-icon-left {
+            display: inline-block;
+            top: 0;
+            left: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        &.small {
+            width: $small-button-height;
+            height: $small-button-height;
+        }
+
+        &.medium {
+            width: $medium-button-height;
+            height: $medium-button-height;
+        }
+
+        &.standart {
+            width: $standard-button-height;
+            height: $standard-button-height;
+        }
+
+        &.big {
+            width: $big-button-height;
+            height: $big-button-height;
+        }
+    }
+
+    &.transparent {
+        background-color: transparent;
+        border: 1px solid transparent;
+
+        &:hover {
+            background-color: transparent !important;
+            border-color: $border !important;
+        }
+    }
+
+    &.close {
+        .p-button-label {
+            display: none;
+        }
+    }
+
+    &.icon-left {
+        padding-left: 30px;
+        background-position: 1em center;
+        background-repeat: no-repeat;
+
+        @include font-overflow();
+    }
+
+    &.button--spinner {
+        display: flex;
+        align-items: center;
+
+        .pi {
+            display: none;
+            color: $gray;
+            margin-left: $space-m + $space-s;
+
+            &.show-spinner {
+                display: inline-block;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/_colors.scss b/apps/react/src/styles/_colors.scss
new file mode 100644
index 000000000..a43941822
--- /dev/null
+++ b/apps/react/src/styles/_colors.scss
@@ -0,0 +1,38 @@
+$white: #ffffff;
+
+$text-color: #333333;
+
+$extra-blue: #065398;
+$blue-dark: #022040;
+
+$blue: #1b62b4;
+$blue-light: #4a90e2;
+$blue-light2: #d1dcea;
+$blue-link: #0074D9;
+$blue-extra-light: #f3f9ff;
+$dark-blue-opacity: rgba(32, 32, 32, 0.2);
+$blue-icon: #e3f0fd;
+
+$blue--hover: #1a5ba6;
+$blue-light--hover: #4286d5;
+$orange--hover: #e2740b;
+
+$focus-shadow: #8dcdff;
+
+$gray: #333333;
+$light-gray: #657282;
+
+$orange: #f37b09;
+$orange-light: #fbf0e5;
+$green: #25a24e;
+$red: #c8102e;
+
+$border: #d1dcea;
+$border-input: #dcdcdc;
+$border-blue: #bdccde;
+
+$day-color: #e6f1fb;
+$day-color-inactive: #f6f6f6;
+
+$breadcrumb-item-active-color: hsla(0, 0%, 100%, 0.75);
+$breadcrumb-item-separator: hsla(0, 0%, 100%, 0.3);
diff --git a/apps/react/src/styles/_common.scss b/apps/react/src/styles/_common.scss
new file mode 100644
index 000000000..c783e707f
--- /dev/null
+++ b/apps/react/src/styles/_common.scss
@@ -0,0 +1,47 @@
+@use 'sass:math';
+
+.expanded-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+
+    width: math.div($space-xl, 3);
+    background-color: $blue-light;
+
+    @media (max-width: $media-breakpoint-mobile) {
+        width: math.div($space-xl, 6);
+    }
+}
+
+.flight-list-item {
+    cursor: pointer;
+    border-top: 1px solid $border;
+
+    &:hover {
+        background-color: $blue-extra-light;
+    }
+
+    &.selected {
+        background: $blue-extra-light;
+        position: relative;
+    }
+}
+
+.hide-button-label {
+    .p-button-label {
+        display: none;
+    }
+}
+
+.hidden {
+    display: none;
+}
+
+.banner--top {
+    z-index: 1001;
+}
+
+.wrapper-header {
+    z-index: 1002;
+}
diff --git a/apps/react/src/styles/_fonts.classes.scss b/apps/react/src/styles/_fonts.classes.scss
new file mode 100644
index 000000000..d5ae2d42a
--- /dev/null
+++ b/apps/react/src/styles/_fonts.classes.scss
@@ -0,0 +1,39 @@
+// moved from _fonts.scss
+
+h1 {
+    font-family: $font-family;
+    font-size: $font-size-xxxl;
+    font-weight: $font-regular;
+}
+
+h2 {
+    font-family: $font-family;
+    font-size: $font-size-xxl;
+    font-weight: $font-regular;
+}
+
+h3 {
+    font-family: $font-family;
+    font-size: $font-size-xl;
+    font-weight: $font-bold;
+}
+
+h4 {
+    font-family: $font-family;
+    font-size: $font-size-l;
+    font-weight: $font-regular;
+}
+
+h5 {
+    font-family: $font-family;
+    font-size: $font-size-m;
+    font-weight: $font-regular;
+}
+
+.text--white {
+    color: $white;
+}
+
+.embolded {
+    font-weight: 500;
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/_fonts.scss b/apps/react/src/styles/_fonts.scss
new file mode 100644
index 000000000..e481a256c
--- /dev/null
+++ b/apps/react/src/styles/_fonts.scss
@@ -0,0 +1,48 @@
+// dont' put classes here, only variables and mixins.
+// this is needed until we migration to @use/@forward
+@use './colors' as colors;
+/* Font size */
+$font-size-xs: 10px;
+$font-size-s: 12px;
+$font-size-m: 14px;
+$font-size-l: 16px;
+$font-size-xl: 18px;
+$font-size-xl1: 20px;
+$font-size-xl2: 22px;
+$font-size-xl3: 26px;
+$font-size-xxl: 30px;
+$font-size-xxxl: 42px;
+$font-size-xxxl--tablet: 36px;
+$font-size-xxxl--mobile: 22px;
+
+$font-family: 'Roboto', Arial, Helvetica, sans-serif;
+
+$font-light: 300;
+$font-regular: 400;
+$font-medium: 500;
+$font-bold: 700;
+
+// 44 usages
+@mixin font-small($color-font-small: colors.$gray) {
+    font-size: $font-size-s;
+    font-family: $font-family;
+    font-weight: $font-regular;
+    color: $color-font-small;
+    line-height: normal;
+}
+
+@mixin font-overflow {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@mixin link {
+    color: $blue-light;
+    text-decoration: none;
+    border-bottom: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
diff --git a/apps/react/src/styles/_grid-sizes.scss b/apps/react/src/styles/_grid-sizes.scss
new file mode 100644
index 000000000..82393a6ff
--- /dev/null
+++ b/apps/react/src/styles/_grid-sizes.scss
@@ -0,0 +1,7 @@
+$time-group-width: 120px; // time group which can have day change
+$time-width: 100px; // time groups without day change
+$title-column-width: 195px; // first column in boarding/registrations sections
+$title-column-width-tablets: 145px;
+$status-width: 100px; // flight status width
+$gap-small: 10px;
+$gap-medium: 15px;
diff --git a/apps/react/src/styles/_icons.scss b/apps/react/src/styles/_icons.scss
new file mode 100644
index 000000000..4fe9cefc2
--- /dev/null
+++ b/apps/react/src/styles/_icons.scss
@@ -0,0 +1,94 @@
+.p-accordion-header.p-highlight {
+    arrow-down-icon svg {
+        transform: rotate(0deg) !important;
+    }
+}
+
+.svg--plane {
+    width: 19px;
+    height: 19px;
+    fill: $blue;
+}
+
+.svg--change-city {
+    width: 25px;
+    height: 12px;
+    fill: $blue;
+
+    transform: rotate(90deg);
+}
+
+.svg--details__body {
+    width: 47.488px;
+    min-width: 47.488px;
+    height: 46.928px;
+}
+
+.flight-icon {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+}
+
+.svg--share {
+    background-image: url('~src/assets/img/share.svg');
+}
+
+.svg--print {
+    background-image: url('~src/assets/img/print.svg');
+}
+
+.svg--pin {
+    background-image: url('~src/assets/img/pin-24.svg');
+}
+
+.svg--expand {
+    background-image: url('~src/assets/img/expand.svg');
+}
+
+svg {
+    &.green {
+        fill: $green;
+    }
+
+    &.red {
+        fill: $red;
+    }
+
+    &.orange {
+        fill: $orange;
+    }
+
+    &.blue {
+        fill: $blue;
+    }
+}
+
+.svg--calendar {
+    background-image: url('~src/assets/img/calendar.svg');
+}
+
+.svg--arrow {
+    width: 6.667px;
+    height: 3.333px;
+}
+
+.svg--close {
+    width: 14px;
+    height: 14px;
+}
+
+svg.flight-transfer {
+    width: 19.5px !important;
+    height: 6.5px !important;
+}
+
+svg.icon-return {
+    width: 13px;
+    height: 8px;
+}
+
+svg.icon-change {
+    width: 22px;
+    height: 12px;
+}
diff --git a/apps/react/src/styles/_layout-print.scss b/apps/react/src/styles/_layout-print.scss
new file mode 100644
index 000000000..85b5d0602
--- /dev/null
+++ b/apps/react/src/styles/_layout-print.scss
@@ -0,0 +1,81 @@
+.p-d-none {
+    display: none !important;
+}
+
+@media print {
+    * {
+        -webkit-print-color-adjust: exact;
+        color-adjust: exact !important;
+    }
+
+    .p-print-none {
+        display: none !important;
+    }
+
+    .p-tooltip {
+        display: none;
+    }
+
+    .p-print-block {
+        display: block !important;
+    }
+
+    body {
+        background-image: none !important;
+        background-color: #fff !important;
+    }
+
+    schedule-flight-details-view,
+    online-board-flight-details-page {
+        .flight-route,
+        .full-route__icons-status,
+        .details-accordion__header.flight-info {
+            background-color: transparent;
+        }
+
+        section.frame {
+            box-shadow: none !important;
+            padding: 0;
+        }
+
+        .flight-route,
+        .full-route__icons-status,
+        .details-accordion__header {
+            padding: 20px 0 !important;
+        }
+
+        .left__part2.departure--time,
+        .right__part2.arrival--time {
+            margin-top: 20px !important;
+        }
+
+        note {
+            padding-left: 0 !important;
+        }
+
+        .status--texts {
+            justify-content: center !important;
+        }
+
+        .details-accordion__body {
+            padding: 0 !important;
+            padding-bottom: 20px !important;
+        }
+
+        .details__body__row {
+            svg {
+                display: none;
+            }
+        }
+
+        .details__data {
+            .icon {
+                display: none;
+            }
+        }
+
+        .page-title {
+            color: #000 !important;
+        }
+    }
+}
diff --git a/apps/react/src/styles/_layout.scss b/apps/react/src/styles/_layout.scss
new file mode 100644
index 000000000..3e222d71d
--- /dev/null
+++ b/apps/react/src/styles/_layout.scss
@@ -0,0 +1,378 @@
+@use 'sass:math';
+
+@mixin custom-input {
+    @include flex-center-align();
+    @include control-border-shadow();
+    height: $standard-button-height;
+    padding: 0 $space-l;
+    font-size: $font-size-l;
+    font-weight: $font-regular;
+    color: $text-color;
+    transition-duration: 0.2s;
+    @include font-overflow();
+
+    &:enabled:hover:not(.p-state-error) {
+        border-color: $blue-light;
+    }
+
+    &:enabled:focus:not(.p-state-error) {
+        box-shadow: 0 0 0 0.2em $focus-shadow;
+        border-color: $blue-light;
+    }
+}
+
+html {
+    overflow: auto;
+}
+
+body,
+html {
+    height: 100%;
+}
+
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
+
+body {
+    background-color: $blue-dark !important;
+    background-image: url('~src/assets/img/background.jpg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    font-size: $font-size-m;
+    font-family: $font-family;
+    font-weight: $font-regular;
+    color: $text-color;
+    line-height: normal;
+
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+
+    display: flex;
+    flex-direction: column;
+
+    span.pi {
+        display: none !important;
+    }
+
+    overflow: auto;
+}
+
+.header {
+    flex: 0 0 auto;
+}
+
+flights-root {
+    display: block;
+    flex: 1 0 auto;
+    padding: 0 24px;
+}
+
+.footer {
+    flex: 0 0 auto;
+
+    .main-module__footer {
+        margin-top: $space-xxxl;
+    }
+}
+
+.page-title {
+    width: auto;
+    display: inline-block;
+    max-width: 100%;
+    white-space: normal !important;
+}
+
+p-breadcrumb {
+    display: block;
+}
+
+section.frame {
+    background-color: $white;
+    @include box-shadow-small;
+    border-radius: $border-radius;
+    padding: 0;
+}
+
+.sr-text-hide {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.description {
+    @include font-small();
+    @include font-overflow();
+}
+
+@mixin flex-center-align {
+    @warn 'dont use flex-center-align; use just "display: flex; align-items: center;';
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+
+.scroll--panel--custom {
+    width: 100%;
+    min-height: 100px;
+    height: 400px; //window-height
+
+    .p-scrollpanel {
+        padding: 3px 0;
+    }
+
+    .p-scrollpanel-bar {
+        background-color: $blue-light;
+        transition: background-color 0.3s, opacity 0.3s;
+        width: 5px;
+        margin-left: -3px;
+    }
+
+    .p-scrollpanel-bar:hover,
+    .p-scrollpanel-grabbed {
+        background-color: $blue;
+    }
+
+    .p-scrollpanel-bar-x {
+        display: none;
+    }
+
+    .p-scrollpanel-content {
+        padding-right: 0px;
+        padding-bottom: 0px;
+        overflow: scroll !important;
+    }
+}
+
+.you-search-panel {
+    height: auto !important;
+    min-height: 20px;
+}
+
+@mixin scrollBarY {
+    opacity: 1;
+    background-color: $blue-light;
+    width: 4px;
+    margin-left: -5px;
+    border-radius: 5px;
+
+    &:hover {
+        background-color: $blue;
+    }
+}
+
+.content--scroll-panel {
+    .p-scrollpanel {
+        padding: $space-s 0;
+
+        .p-scrollpanel-wrapper {
+            padding: $space-xl - $space-s 0;
+
+            .row {
+                display: flex;
+                padding: 0 0 0 $space-xl;
+
+                &.country-start-row {
+                    margin-top: $space-xl;
+
+                    &:first-child {
+                        margin-top: 0;
+                    }
+
+                    .contry {
+                        position: sticky;
+                    }
+                }
+            }
+        }
+
+        .p-scrollpanel-bar-y {
+            @include scrollBarY();
+        }
+    }
+}
+
+.p-tooltip {
+    z-index: 100001 !important;
+}
+
+p-checkbox {
+    display: flex;
+    align-items: center;
+
+    .p-checkbox div.p-checkbox-box {
+        @include control-border-shadow();
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-image: url('~src/assets/img/check.svg');
+        background-size: 0 auto;
+
+        &.p-highlight {
+            border-color: $blue-light;
+            background-color: $blue-extra-light;
+            background-size: 13.65px auto;
+
+            &:hover {
+                background-color: $blue-extra-light !important;
+            }
+        }
+    }
+
+    .p-checkbox .p-checkbox-box:not(.p-state-disabled):hover {
+        background-color: $blue-extra-light;
+        border-color: $blue-light;
+    }
+
+    &:hover {
+        .p-checkbox-box:not(.p-state-disabled):hover {
+            border-color: $blue-light;
+        }
+    }
+}
+
+body {
+    .p-overlaypanel {
+        border: 1px solid $border-blue;
+        box-shadow: 0 2px 2px #b1b1b125;
+        border-radius: 3px;
+
+        &:before {
+            border-bottom-color: $border-blue;
+        }
+
+        .p-overlaypanel-content {
+            padding: 20px;
+
+            .share-elements {
+                display: flex;
+                align-items: flex-start;
+
+                > div + div {
+                    margin-left: $space-m;
+                }
+
+                .share-element {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: flex-end;
+                    align-items: center;
+                    text-align: center;
+                    @include font-small();
+                    font-size: 10px;
+                    width: 60px;
+                    height: 55px;
+                    margin-right: 15px;
+                    background-position: center top;
+                    background-repeat: no-repeat;
+                    cursor: pointer;
+                    transition-duration: 0.2s;
+
+                    &:hover {
+                        color: $blue-light;
+                    }
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+
+                    &.facebook {
+                        background-image: url('~src/assets/img/share/facebook.svg');
+                    }
+
+                    &.vk {
+                        background-image: url('~src/assets/img/share/vk.svg');
+                    }
+
+                    &.twitter {
+                        background-image: url('~src/assets/img/share/twitter.svg');
+                    }
+
+                    &.copy {
+                        background-image: url('~src/assets/img/share/copy.svg');
+                    }
+
+                    &.weibo {
+                        background-image: url('~src/assets/img/share/weibo.svg');
+                        background-size: 29px;
+                    }
+                }
+            }
+        }
+    }
+}
+p-accordion .p-accordion-content button.button-clear {
+    display: none;
+    position: absolute;
+    right: $buttons-width;
+    top: 0px;
+    bottom: 0px;
+    width: $buttons-width !important;
+    border: none;
+    border-radius: 0;
+    background: rgb(255, 255, 255);
+    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
+
+    .p-button-label {
+        background-image: url('~src/assets/img/close.svg');
+        background-repeat: no-repeat;
+        background-size: 10px 10px;
+        height: 100%;
+        background-position: center center;
+        transition-duration: 0.2s;
+        position: relative;
+
+        &:before {
+            display: none;
+            position: absolute;
+            content: '';
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 1px;
+            background-color: $border-input;
+        }
+    }
+
+    &-opened {
+        .p-button-label {
+            transform: rotate(180deg);
+        }
+    }
+
+    &:hover {
+        background-color: $white !important;
+
+        .p-button-label {
+            &:before {
+                display: block;
+            }
+        }
+    }
+}
+
+.app-show-debug {
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    border: none;
+    background-color: #e2740b;
+    padding: 3px 10px 4px 10px;
+    margin-bottom: 5px;
+    color: #fff;
+    border-radius: 3px;
+    font-size: 12px;
+    margin-bottom: 10px;
+    height: 25px;
+    margin-right: 10px;
+}
+
+.app-hide-debug {
+    width: auto;
+    margin-bottom: 10px;
+    height: 25px;
+}
+
+@import '~src/styles/pages/adaptive/layout-adaptive';
+@import '~src/styles/_layout-print';
diff --git a/apps/react/src/styles/_layouts.scss b/apps/react/src/styles/_layouts.scss
new file mode 100644
index 000000000..6d833a636
--- /dev/null
+++ b/apps/react/src/styles/_layouts.scss
@@ -0,0 +1,70 @@
+@use './screen' as screen;
+
+@mixin h-spacing($size, $withLast: false) {
+    @if $withLast {
+        & > * {
+            margin-right: $size;
+        }
+    } @else {
+        & > *:not(:last-child) {
+            margin-right: $size;
+        }
+    }
+}
+
+@mixin h-deep-spacing($size, $withLast: false) {
+    @if $withLast {
+        &::ng-deep > * {
+            margin-right: $size;
+        }
+    } @else {
+        &::ng-deep > *:not(:last-child) {
+            margin-right: $size;
+        }
+    }
+}
+
+@mixin v-deep-spacing($size, $withLast: false) {
+    @if $withLast {
+        &::ng-deep > * {
+            margin-bottom: $size;
+        }
+    } @else {
+        &::ng-deep > *:not(:last-child) {
+            margin-bottom: $size;
+        }
+    }
+}
+
+@mixin v-spacing($size, $withLast: false) {
+    @if $withLast {
+        & > * {
+            margin-bottom: $size;
+        }
+    } @else {
+        & > *:not(:last-child) {
+            margin-bottom: $size;
+        }
+    }
+}
+
+@mixin gap($size) {
+    // dont' remove, wip
+    @supports (gap: $size) {
+        gap: $size;
+    }
+
+    @supports not (gap: $size) {
+        @include screen.mobile() {
+            flex-direction: column;
+            & > *:not(:last-child) {
+                margin-bottom: $size;
+            }
+        }
+        @include screen.gt-mobile() {
+            & > *:not(:last-child) {
+                margin-right: $size;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/_leaflet-popup.scss b/apps/react/src/styles/_leaflet-popup.scss
new file mode 100644
index 000000000..2b22e5bfd
--- /dev/null
+++ b/apps/react/src/styles/_leaflet-popup.scss
@@ -0,0 +1,51 @@
+
+.leaflet-tooltip.city-label {
+  background : transparent;   
+  border     : none;
+  box-shadow : none;
+
+  font-family: 'Inter', 'Roboto', Arial, sans-serif;
+  color      : #1f1f1f;          
+  font-size  : 12px;
+  font-weight: 500;
+  letter-spacing: 1px;
+
+
+  text-shadow:
+    -1px  0   #ffffff88,
+     1px  0   #ffffff88,
+     0    1px #ffffff88,
+     0   -1px #ffffff88;
+
+  pointer-events: none;      
+}
+
+/* убираем треугольный «хвостик» */
+.leaflet-tooltip.city-label::before {
+  display: none;
+}
+
+.popup-header-test{
+  //display: none;
+}
+
+.leaflet-popup-content-wrapper{
+  border-radius: 3px !important;
+
+  .popup-buy-ticket{
+    display: inline-block;
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
+    background-color: #F37B09;
+
+    color: white;
+    text-decoration: none;
+    text-align: center;
+    border: none;
+    border-radius: 2px;
+    font-weight: bold;
+    user-select: none;
+    cursor: pointer;
+  }
+}
diff --git a/apps/react/src/styles/_logos.scss b/apps/react/src/styles/_logos.scss
new file mode 100644
index 000000000..db20bcb8b
--- /dev/null
+++ b/apps/react/src/styles/_logos.scss
@@ -0,0 +1,356 @@
+@use 'sass:math';
+@use './screen' as *;
+
+$height-base: 36px;
+$width-base: 120px;
+
+@mixin scale($base, $ratio: 0.25, $scale: 1.5) {
+    width: $base;
+    height: $base * $ratio;
+
+    &.large {
+        width: $base * $scale;
+        height: $base * $scale * $ratio;
+    }
+
+    @include tablets() {
+        width: $base * 0.75;
+        height: $base * $ratio * 0.75;
+
+        &.large {
+            width: $base * $scale * 0.75;
+            height: $base * $scale * $ratio * 0.75;
+        }
+    }
+}
+
+.company-logo {
+    @include scale($width-base);
+
+    &.round {
+        width: $height-base !important;
+        height: $height-base !important;
+    }
+
+    &--SU {
+        @include scale($width-base, 0.258);
+
+        background-image: url('~src/assets/img/airlines-logo/aeroflot/large/en.png') !important;
+
+        &.ru {
+            background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
+        }
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/aeroflot/round.png') !important;
+        }
+    }
+
+    &--HZ {
+        @include scale(80px, 0.5556);
+
+        background-image: url('~src/assets/img/airlines-logo/aurora/large/en.svg') !important;
+
+        &.ru {
+            background-image: url('~src/assets/img/airlines-logo/aurora/large/ru.svg') !important;
+        }
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/aurora/round.png') !important;
+        }
+    }
+
+    &--F7 {
+        @include scale($width-base, 0.258);
+
+        background-image: url('~src/assets/img/airlines-logo/aeroflot/large/en.png') !important;
+
+        &.ru {
+            background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
+        }
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/aeroflot/round.png') !important;
+        }
+    }
+
+    &--FV {
+        @include scale(90px, 0.1667);
+
+        background-image: url('~src/assets/img/airlines-logo/rossiya/large/en.svg') !important;
+
+        &.ru {
+            background-image: url('~src/assets/img/airlines-logo/rossiya/large/ru.svg') !important;
+        }
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/rossiya/round.png') !important;
+        }
+    }
+
+    &--RO {
+        @include scale($width-base, 0.3334);
+
+        background-image: url('~src/assets/img/airlines-logo/tarom/large.png') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/tarom/round.svg') !important;
+        }
+    }
+
+    &--DP {
+        @include scale($width-base, 0.1889);
+        background-image: url('~src/assets/img/airlines-logo/pobeda/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/pobeda/round.png') !important;
+        }
+    }
+
+    &--OM {
+        background-image: url('~src/assets/img/airlines-logo/miat/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/miat/round.svg') !important;
+        }
+    }
+
+    &--KL {
+        @include scale($width-base, 0.4444);
+        background-image: url('~src/assets/img/airlines-logo/klm/large.png') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/klm/round.png') !important;
+        }
+    }
+
+    &--AY {
+        background-image: url('~src/assets/img/airlines-logo/finnair/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/finnair/round.png') !important;
+        }
+    }
+
+    &--DL {
+        background-image: url('~src/assets/img/airlines-logo/delta/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/delta/round.png') !important;
+        }
+    }
+
+    &--OK {
+        background-image: url('~src/assets/img/airlines-logo/czech-airline/large.png') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/czech-airline/round.svg') !important;
+        }
+    }
+
+    &--JU {
+        background-image: url('~src/assets/img/airlines-logo/air-serbia/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/air-serbia/round.svg') !important;
+        }
+    }
+
+    &--UX {
+        background-image: url('~src/assets/img/airlines-logo/air-europa/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/air-europa/round.svg') !important;
+        }
+    }
+
+    &--BT {
+        background-image: url('~src/assets/img/airlines-logo/air-baltic/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/air-baltic/round.svg') !important;
+        }
+    }
+
+    &--AM {
+        background-image: url('~src/assets/img/airlines-logo/aeromexico/large.svg') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/aeromexico/round.svg') !important;
+        }
+    }
+
+    &--AR {
+        background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/large.png') !important;
+
+        &.round {
+            background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/round.svg') !important;
+        }
+    }
+
+    &--KM {
+        background-image: url('~src/assets/img/airlines-logo/airmalta/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--AF {
+        @include scale($width-base, 0.1222);
+        background-image: url('~src/assets/img/airlines-logo/airfrance/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--AZ {
+        @include scale($width-base, 0.2444);
+        background-image: url('~src/assets/img/airlines-logo/alitalia/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--PG {
+        background-image: url('~src/assets/img/airlines-logo/bangkok-airways/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--SN {
+        @include scale($width-base, 0.1667);
+        background-image: url('~src/assets/img/airlines-logo/brussels-airlines/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--FB {
+        @include scale($width-base, 0.296);
+        background-image: url('~src/assets/img/airlines-logo/bulgaria-air/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--CI {
+        @include scale($width-base, 0.1556);
+        background-image: url('~src/assets/img/airlines-logo/china-airlines/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--MU {
+        background-image: url('~src/assets/img/airlines-logo/china-eastern/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--CZ {
+        background-image: url('~src/assets/img/airlines-logo/china-southern/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--GA {
+        background-image: url('~src/assets/img/airlines-logo/garuda-indonesia/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--FI {
+        background-image: url('~src/assets/img/airlines-logo/icelandair/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--KO {
+        background-image: url('~src/assets/img/airlines-logo/kenya-airways/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--KE {
+        background-image: url('~src/assets/img/airlines-logo/korean-air/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--JL {
+        background-image: url('~src/assets/img/airlines-logo/japan-airlines/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--LO {
+        background-image: url('~src/assets/img/airlines-logo/polish-airlines/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--ME {
+        background-image: url('~src/assets/img/airlines-logo/mea/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--S7 {
+        @include scale($width-base, 0.3333);
+        background-image: url('~src/assets/img/airlines-logo/s7/large.svg') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--SV {
+        background-image: url('~src/assets/img/airlines-logo/saudi-arabian-airlines/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--VN {
+        background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+
+    &--MF {
+        background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
+
+        &.round {
+            background-image: none !important;
+        }
+    }
+}
diff --git a/apps/react/src/styles/_mixins.scss b/apps/react/src/styles/_mixins.scss
new file mode 100644
index 000000000..0599cca41
--- /dev/null
+++ b/apps/react/src/styles/_mixins.scss
@@ -0,0 +1,45 @@
+@use 'src/styles/colors';
+@use 'src/styles/shadows';
+@use 'src/styles/fonts';
+@use 'src/styles/variables' as vars;
+
+@mixin button($background-color: colors.$blue-light) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 16px 0;
+
+  border: none;
+  outline: 0 none;
+  background-color: $background-color;
+  border-radius: vars.$border-radius;
+
+  &:focus {
+    box-shadow: 0 0 0 0.2em colors.$focus-shadow;
+  }
+}
+
+@mixin input {
+  display: flex;
+  align-items: center;
+
+  @include shadows.control-border-shadow();
+
+  height: vars.$standard-button-height;
+  padding: 0 vars.$space-l;
+  font-size: fonts.$font-size-l;
+  font-weight: fonts.$font-regular;
+  color: colors.$text-color;
+  transition-duration: 0.2s;
+  @include fonts.font-overflow();
+
+  &:enabled:hover:not(.ui-state-error) {
+    border-color: colors.$blue-light;
+  }
+
+  &:enabled:focus:not(.ui-state-error) {
+    box-shadow: 0 0 0 0.2em colors.$focus-shadow;
+    border-color: colors.$blue-light;
+  }
+}
diff --git a/apps/react/src/styles/_overrides.scss b/apps/react/src/styles/_overrides.scss
new file mode 100644
index 000000000..070bc4c11
--- /dev/null
+++ b/apps/react/src/styles/_overrides.scss
@@ -0,0 +1,5 @@
+a:focus {
+  // !important to reset styles in https://aeroflot.ru/frontend/static/css/afl-frontend-loader.bundle.css
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
diff --git a/apps/react/src/styles/_positioning.scss b/apps/react/src/styles/_positioning.scss
new file mode 100644
index 000000000..5a9bed50a
--- /dev/null
+++ b/apps/react/src/styles/_positioning.scss
@@ -0,0 +1,4 @@
+$base-z-index: 1000;
+$sticky-elements-z-index: $base-z-index;
+
+$sticky-threshold: 20px;
diff --git a/apps/react/src/styles/_prime-calendar.scss b/apps/react/src/styles/_prime-calendar.scss
new file mode 100644
index 000000000..dbe9e6bda
--- /dev/null
+++ b/apps/react/src/styles/_prime-calendar.scss
@@ -0,0 +1,184 @@
+p-calendar {
+    .p-calendar {
+        cursor: pointer;
+
+        .p-datepicker-header {
+            .p-datepicker-prev {
+                background-image: url('~src/assets/img/arrow-left.svg');
+                background-position: center center;
+                background-repeat: no-repeat;
+
+                span {
+                    display: none;
+                }
+            }
+
+            .p-datepicker-title {
+                .p-datepicker-month,
+                .p-datepicker-year {
+                    border: none;
+                    color: $blue;
+                    font-weight: $font-bold;
+                    -webkit-appearance: none;
+                    background: transparent !important;
+                }
+
+                .p-datepicker-year {
+                    margin-left: $space-m;
+                }
+            }
+
+            .p-datepicker-next {
+                background-image: url('~src/assets/img/arrow-right.svg');
+                background-position: center center;
+                background-repeat: no-repeat;
+
+                span {
+                    display: none;
+                }
+            }
+
+            .p-datepicker-prev,
+            .p-datepicker-next {
+            	width: 1.8em;
+            	height: 1.8em;
+            }
+        }
+
+        .p-datepicker-calendar-container {
+            .p-datepicker-calendar {
+                margin-top: $space-m;
+
+                th {
+                    font-size: 10px;
+                    font-weight: $font-medium;
+                    padding: 2px;
+                    padding-bottom: $space-m;
+                    color: $gray;
+                }
+
+                td {
+                    padding: 2px;
+
+                    &.p-datepicker-today {
+                        a,
+                        span {
+                            border: 1px solid $blue;
+                            background-color: $white;
+
+                            &:hover {
+                                background-color: $blue-icon;
+                            }
+
+                            &.p-highlight {
+                                background-color: $blue-icon;
+                                color: $extra-blue;
+                            }
+                        }
+                    }
+
+                    a,
+                    span {
+                        padding: 5px 6px;
+                        font-size: 12px;
+                        font-weight: $font-medium;
+                        color: $extra-blue;
+
+                        &.p-highlight {
+                            background-color: $blue-icon;
+                            color: $extra-blue;
+                        }
+
+                        &.p-highlight {
+                            background-color: $white;
+                        }
+
+                        &:not(.p-highlight):hover {
+                            background-color: $blue-icon;
+                        }
+                    }
+
+                    span.p-disabled {
+                        color: $gray;
+                        opacity: 0.5;
+
+                        &:hover {
+                            background-color: transparent;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.calendar--mobile {
+    display: none;
+
+    @media (max-width: $media-breakpoint-mobile) {
+        display: flex;
+    }
+
+    margin-bottom: $space-m;
+    justify-content: space-between;
+
+    .digit {
+        width: 100%;
+        @include control-border-shadow();
+        display: flex;
+        flex-direction: column;
+        padding: $space-m;
+        background-color: $white;
+        @include font-overflow();
+
+        &.selected {
+            background-color: $blue-extra-light;
+            border-color: $border-blue;
+
+            &:focus,
+            &:hover {
+                background-color: $blue-extra-light !important;
+                border-color: $border-blue !important;
+            }
+        }
+
+        &:focus,
+        &:hover {
+            border: 1px solid $border-input !important;
+            background-color: $white !important;
+        }
+
+        .p-button-label {
+            display: none;
+        }
+
+        .date-day {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+
+            .date {
+                color: $text-color;
+                font-size: $font-size-xl3;
+            }
+
+            .day {
+                @include font-small();
+                margin-bottom: $text-margin-bottom;
+                margin-left: $space-s;
+            }
+        }
+
+        .month {
+            @include font-overflow();
+            margin-top: $text-margin-bottom;
+            @include font-small();
+            width: 100%;
+            text-align: left;
+        }
+
+        & + .digit {
+            margin-left: $space-m;
+        }
+    }
+}
diff --git a/apps/react/src/styles/_prime-styles.scss b/apps/react/src/styles/_prime-styles.scss
new file mode 100644
index 000000000..96e714bbc
--- /dev/null
+++ b/apps/react/src/styles/_prime-styles.scss
@@ -0,0 +1,5511 @@
+.p-dropdown .p-dropdown-label  {
+    display: block;
+    border: none;
+    white-space: nowrap;
+    overflow: hidden;
+    font-weight: normal;
+    width: 100%;
+    padding-right: 2.5em;
+    font-weight: normal;
+}
+
+.p-dropdown .p-dropdown-trigger {
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+    cursor: pointer;
+    width: 1.5em;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0 .25em;
+}
+
+
+
+body .p-button {
+    align-items: normal;
+    display: inline-block;
+}
+
+body .p-component {
+    text-decoration: none;
+}
+
+body .p-widget-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+body .p-widget-content p {
+    line-height: 1.5;
+    margin: 0;
+}
+
+body .p-corner-all {
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+
+body .p-corner-top {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+body .p-corner-bottom {
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+body .p-corner-left {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+body .p-corner-right {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+body a {
+    color: #007ad9;
+    text-decoration: none;
+}
+
+body a:hover {
+    color: #116fbf;
+}
+
+body a:active {
+    color: #005b9f;
+}
+
+body .p-helper-reset {
+    line-height: normal;
+}
+
+body .p-disabled,
+body .p-component:disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+}
+
+body .pi {
+    font-size: 1.25em;
+}
+
+body .p-link {
+    border-radius: 3px;
+}
+
+body .p-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body ::-webkit-input-placeholder {
+    color: #666666;
+}
+
+body :-moz-placeholder {
+    color: #666666;
+}
+
+body ::-moz-placeholder {
+    color: #666666;
+}
+
+body :-ms-input-placeholder {
+    color: #666666;
+}
+
+body .p-autocomplete .p-autocomplete-input {
+    padding: 0.429em;
+}
+
+body
+    .p-autocomplete.p-autocomplete-multiple
+    .p-autocomplete-multiple-container {
+    padding: 0.2145em 0.429em;
+}
+
+body
+    .p-autocomplete.p-autocomplete-multiple
+    .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #212121;
+}
+
+body
+    .p-autocomplete.p-autocomplete-multiple
+    .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    border-color: #007ad9;
+}
+
+body
+    .p-autocomplete.p-autocomplete-multiple
+    .p-autocomplete-multiple-container
+    .p-autocomplete-input-token {
+    margin: 0;
+    padding: 0.2145em 0;
+    color: #333333;
+}
+
+body
+    .p-autocomplete.p-autocomplete-multiple
+    .p-autocomplete-multiple-container
+    .p-autocomplete-input-token
+    input {
+    font-size: 14px;
+    padding: 0;
+    margin: 0;
+}
+
+body
+    .p-autocomplete.p-autocomplete-multiple
+    .p-autocomplete-multiple-container
+    .p-autocomplete-token {
+    font-size: 14px;
+    padding: 0.2145em 0.429em;
+    margin: 0 0.286em 0 0;
+    background: #007ad9;
+    color: #ffffff;
+}
+
+body .p-autocomplete-panel {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+}
+
+body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
+    margin: 0;
+    padding: 0.429em 0.857em;
+    border: 0 none;
+    color: #333333;
+    background-color: transparent;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body
+    .p-autocomplete-panel
+    .p-autocomplete-items
+    .p-autocomplete-list-item.p-highlight {
+    color: #ffffff;
+    background-color: #007ad9;
+}
+
+body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
+    padding: 0.429em 0.857em;
+    background-color: #d8dae2;
+    color: #333333;
+}
+
+body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
+    width: 2.357em;
+}
+
+body
+    .p-fluid
+    .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd
+    .p-autocomplete-multiple-container {
+    border-right: 0 none;
+    width: calc(100% - 2.357em);
+}
+
+body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
+    border-right: 0 none;
+    width: calc(100% - 2.357em);
+}
+
+body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
+    border: 1px solid #a80000;
+}
+
+body .p-datepicker {
+    padding: 0.857em;
+    min-width: 20em;
+    background-color: #ffffff;
+    color: #333333;
+    border: 1px solid #a6a6a6;
+}
+
+body .p-datepicker:not(.p-datepicker-inline) {
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body
+    .p-datepicker:not(.p-disabled)
+    .p-datepicker-header
+    .p-datepicker-prev:hover,
+body
+    .p-datepicker:not(.p-disabled)
+    .p-datepicker-header
+    .p-datepicker-next:hover {
+    color: #007ad9;
+}
+
+body
+    .p-datepicker:not(.p-disabled)
+    .p-datepicker-header
+    .p-datepicker-prev:focus,
+body
+    .p-datepicker:not(.p-disabled)
+    .p-datepicker-header
+    .p-datepicker-next:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-datepicker:not(.p-disabled)
+    table
+    td
+    a:not(.p-highlight):hover {
+    background-color: #eaeaea;
+}
+
+body
+    .p-datepicker:not(.p-disabled)
+    .p-monthpicker
+    a.p-monthpicker-month:not(.p-highlight):hover {
+    background-color: #eaeaea;
+}
+
+body .p-datepicker .p-datepicker-header {
+    padding: 0.429em 0.857em 0.429em 0.857em;
+    background-color: #ffffff;
+    color: #333333;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body .p-datepicker .p-datepicker-header .p-datepicker-prev,
+body .p-datepicker .p-datepicker-header .p-datepicker-next {
+    cursor: pointer;
+    top: 0;
+    color: #a6a6a6;
+    -moz-transition: color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, box-shadow 0.2s;
+}
+
+body .p-datepicker .p-datepicker-header .p-datepicker-title {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+}
+
+body .p-datepicker .p-datepicker-header .p-datepicker-title select {
+    margin-top: -0.35em;
+    margin-bottom: 0;
+    -moz-transition: color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, box-shadow 0.2s;
+}
+
+body .p-datepicker .p-datepicker-heade .p-datepicker-title select:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-datepicker table {
+    font-size: 14px;
+    margin: 0.857em 0 0 0;
+}
+
+body .p-datepicker table th {
+    padding: 0.5em;
+}
+
+body .p-datepicker table th.p-datepicker-weekheader {
+    border-right: 1px solid #a6a6a6;
+}
+
+body .p-datepicker table td {
+    padding: 0.5em;
+}
+
+body .p-datepicker table td > a,
+body .p-datepicker table td > span {
+    display: block;
+    text-align: center;
+    color: #333333;
+    padding: 0.5em;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+
+body .p-datepicker table td > a.p-highlight,
+body .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background-color: #007ad9;
+}
+
+body .p-datepicker table td > a {
+    cursor: pointer;
+}
+
+body .p-datepicker table td > a:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-datepicker table td.p-datepicker-today > a,
+body .p-datepicker table td.p-datepicker-today > span {
+    background-color: #d0d0d0;
+    color: #333333;
+}
+
+body .p-datepicker table td.p-datepicker-today > a.p-highlight,
+body .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background-color: #007ad9;
+}
+
+body .p-datepicker table td.p-datepicker-weeknumber {
+    border-right: 1px solid #a6a6a6;
+}
+
+body .p-datepicker .p-datepicker-buttonbar {
+    border-top: 1px solid #d8dae2;
+}
+
+body .p-datepicker .p-timepicker {
+    border: 0 none;
+    border-top: 1px solid #d8dae2;
+    padding: 0.857em;
+}
+
+body .p-datepicker .p-timepicker a {
+    color: #333333;
+    font-size: 1.286em;
+}
+
+body .p-datepicker .p-timepicker a:hover {
+    color: #007ad9;
+}
+
+body .p-datepicker .p-timepicker span {
+    font-size: 1.286em;
+}
+
+body .p-datepicker .p-monthpicker .p-monthpicker-month {
+    color: #333333;
+}
+
+body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background-color: #007ad9;
+}
+
+body .p-datepicker.p-datepicker-timeonly {
+    padding: 0;
+}
+
+body .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+}
+
+body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-right: 1px solid #d8dae2;
+    padding-right: 0.857em;
+    padding-left: 0.857em;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+body
+    .p-datepicker.p-datepicker-multiple-month
+    .p-datepicker-group:first-child {
+    padding-left: 0;
+}
+
+body
+    .p-datepicker.p-datepicker-multiple-month
+    .p-datepicker-group:last-child {
+    padding-right: 0;
+    border-right: 0 none;
+}
+
+body .p-calendar.p-calendar-w-btn .p-inputtext {
+    -moz-border-radius-topright: 0;
+    -webkit-border-top-right-radius: 0;
+    border-top-right-radius: 0;
+    -moz-border-radius-bottomright: 0;
+    -webkit-border-bottom-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0 none;
+}
+
+body
+    .p-calendar.p-calendar-w-btn
+    .p-inputtext:enabled:hover:not(.p-state-error),
+body
+    .p-calendar.p-calendar-w-btn
+    .p-inputtext:enabled:focus:not(.p-state-error) {
+    border-right: 0 none;
+}
+
+body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
+    width: 2.357em;
+    -moz-border-radius-topleft: 0;
+    -webkit-border-top-left-radius: 0;
+    border-top-left-radius: 0;
+    -moz-border-radius-bottomleft: 0;
+    -webkit-border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+body .p-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
+    width: calc(100% - 2.357em);
+}
+
+body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
+    border: 1px solid #a80000;
+}
+
+body .p-checkbox {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+}
+
+body .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background-color: #ffffff;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, border-color 0.2s,
+        box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
+    border-color: #212121;
+}
+
+body .p-checkbox .p-checkbox-box.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    border-color: #007ad9;
+}
+
+body .p-checkbox .p-checkbox-box.p-highlight {
+    border-color: #007ad9;
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+    border-color: #005b9f;
+    background-color: #005b9f;
+    color: #ffffff;
+}
+
+body .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    overflow: hidden;
+    position: relative;
+    font-size: 18px;
+}
+
+body .p-checkbox-label {
+    margin: 0 0 0 0.5em;
+}
+
+body p-checkbox.ng-dirty.ng-invalid .p-checkbox-box {
+    border: 1px solid #a80000;
+}
+
+body .p-chips > ul.p-inputtext {
+    padding: 0.2145em 0.429em;
+    display: inline-block;
+}
+
+body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
+    border-color: #212121;
+}
+
+body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    border-color: #007ad9;
+}
+
+body .p-chips > ul.p-inputtext .p-chips-input-token {
+    padding: 0.2145em 0;
+}
+
+body .p-chips > ul.p-inputtext .p-chips-input-token input {
+    padding: 0;
+    margin: 0;
+    color: #333333;
+}
+
+body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
+    border: 0 none;
+}
+
+body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
+    border: 0 none;
+}
+
+body .p-chips > ul.p-inputtext .p-chips-token {
+    font-size: 14px;
+    padding: 0.2145em 0.429em;
+    margin: 0 0.286em 0 0;
+    background: #007ad9;
+    color: #ffffff;
+}
+
+body p-chips.ng-dirty.ng-invalid > .p-inputtext {
+    border: 1px solid #a80000;
+}
+
+body .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    -moz-transition: border-color 0.2s, box-shadow 0.2s;
+    -o-transition: border-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-dropdown:not(.p-disabled):hover {
+    border-color: #212121;
+}
+
+body .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    border-color: #007ad9;
+}
+
+body .p-dropdown .p-dropdown-label {
+    padding-right: 2em;
+}
+
+body .p-dropdown .p-dropdown-label .p-placeholder {
+    color: #666666;
+}
+
+body .p-dropdown .p-dropdown-trigger {
+    background-color: #ffffff;
+    width: 2em;
+    line-height: 2em;
+    text-align: center;
+    padding: 0;
+    color: #848484;
+}
+
+body .p-dropdown .p-dropdown-clear-icon {
+    color: #848484;
+}
+
+body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 4em;
+}
+
+body .p-dropdown-panel {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-dropdown-panel .p-dropdown-filter-container {
+    padding: 0.429em 0.857em 0.429em 0.857em;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background-color: #ffffff;
+    margin: 0;
+}
+
+body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
+    width: 100%;
+    padding-right: 2em;
+}
+
+body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
+    top: 50%;
+    margin-top: -0.5em;
+    right: 1.357em;
+    color: #007ad9;
+}
+
+body .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+}
+
+body .p-dropdown-panel .p-dropdown-items .p-dropdown-item,
+body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.429em 0.857em;
+    border: 0 none;
+    color: #333333;
+    background-color: transparent;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
+body
+    .p-dropdown-panel
+    .p-dropdown-items
+    .p-dropdown-item-group.p-highlight {
+    color: #ffffff;
+    background-color: #007ad9;
+}
+
+body
+    .p-dropdown-panel
+    .p-dropdown-items
+    .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
+body
+    .p-dropdown-panel
+    .p-dropdown-items
+    .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background-color: #eaeaea;
+}
+
+body p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    border: 1px solid #a80000;
+}
+
+body .p-editor-container .p-editor-toolbar {
+    border: 1px solid #c8c8c8;
+    background-color: #f4f4f4;
+}
+
+body .p-editor-container .p-editor-content {
+    border: 1px solid #c8c8c8;
+}
+
+body .p-editor-container .p-editor-content .ql-editor {
+    background-color: #ffffff;
+    color: #333333;
+}
+
+body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
+    color: #333333;
+}
+
+body .p-editor-container .ql-stroke {
+    stroke: #333333;
+}
+
+body .p-editor-container .ql-picker-label {
+    color: #333333;
+}
+
+body .p-editor-container .ql-snow.ql-toolbar button:hover,
+body .p-editor-container .ql-snow .ql-toolbar button:hover,
+body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
+body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
+body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
+body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
+body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
+body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
+body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
+body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+    color: #007ad9;
+}
+
+body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
+body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
+body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    .ql-picker-label:hover
+    .ql-stroke,
+body
+    .p-editor-container
+    .ql-snow.ql-toolbar
+    .ql-picker-label.ql-active
+    .ql-stroke,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    .ql-picker-label.ql-active
+    .ql-stroke,
+body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+body
+    .p-editor-container
+    .ql-snow.ql-toolbar
+    .ql-picker-item.ql-selected
+    .ql-stroke,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    .ql-picker-item.ql-selected
+    .ql-stroke,
+body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    button.ql-active
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow.ql-toolbar
+    .ql-picker-label:hover
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    .ql-picker-label:hover
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow.ql-toolbar
+    .ql-picker-label.ql-active
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    .ql-picker-label.ql-active
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow.ql-toolbar
+    .ql-picker-item:hover
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    .ql-picker-item:hover
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow.ql-toolbar
+    .ql-picker-item.ql-selected
+    .ql-stroke-miter,
+body
+    .p-editor-container
+    .ql-snow
+    .ql-toolbar
+    .ql-picker-item.ql-selected
+    .ql-stroke-miter {
+    stroke: #007ad9;
+}
+
+body .p-inputgroup .p-inputgroup-addon {
+    border-color: #a6a6a6;
+    background-color: #eaeaea;
+    color: #848484;
+    padding: 0.429em;
+    min-width: 2em;
+}
+
+body .p-inputgroup .p-inputgroup-addon:first-child {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+body .p-inputgroup .p-inputgroup-addon:last-child {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
+    position: relative;
+}
+
+body
+    .p-inputgroup
+    .p-inputgroup-addon.p-inputgroup-addon-checkbox
+    .p-checkbox {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+}
+
+body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
+    position: relative;
+}
+
+body
+    .p-inputgroup
+    .p-inputgroup-addon.p-inputgroup-addon-radiobutton
+    .p-radiobutton {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+}
+
+body .p-inputgroup .p-button:first-child {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+body .p-inputgroup .p-button:last-child {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+body .p-fluid .p-inputgroup .p-button {
+    width: auto;
+}
+
+body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357em;
+}
+
+body .p-inputswitch {
+    width: 3em;
+    height: 1.75em;
+}
+
+body .p-inputswitch .p-inputswitch-slider {
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    background: #cccccc;
+}
+
+body .p-inputswitch .p-inputswitch-slider:before {
+    background-color: #ffffff;
+    height: 1.25em;
+    width: 1.25em;
+    left: 0.25em;
+    bottom: 0.25em;
+    border-radius: 50%;
+    -webkit-transition: 0.2s;
+    transition: 0.2s;
+}
+
+body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
+    -webkit-transform: translateX(1.25em);
+    -ms-transform: translateX(1.25em);
+    transform: translateX(1.25em);
+}
+
+body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
+    background: #b7b7b7;
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
+    background-color: #b7b7b7;
+}
+
+body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+    background-color: #007ad9;
+}
+
+body
+    .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover
+    .p-inputswitch-slider {
+    background-color: #116fbf;
+}
+
+body
+    .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus
+    .p-inputswitch-slider {
+    background: #005b9f;
+}
+
+body p-inputswitch.ng-dirty.ng-invalid .p-inputswitch {
+    border: 1px solid #a80000;
+}
+
+body .p-inputtext {
+    font-size: 14px;
+    color: #333333;
+    background: #ffffff;
+    padding: 0.429em;
+    border: 1px solid #a6a6a6;
+    -moz-transition: border-color 0.2s, box-shadow 0.2s;
+    -o-transition: border-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+body .p-inputtext.ng-dirty.ng-invalid {
+    border: 1px solid #a80000;
+}
+
+body .p-inputtext:enabled:hover:not(.p-state-error) {
+    border-color: #212121;
+}
+
+body .p-inputtext:enabled:focus:not(.p-state-error) {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    border-color: #007ad9;
+}
+
+body p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
+    border: 1px solid #a80000;
+}
+
+body .p-listbox {
+    padding: 0;
+    min-width: 12em;
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+}
+
+body .p-listbox .p-checkbox {
+    margin: 0 0.5em 0 0;
+}
+
+body .p-listbox .p-listbox-header {
+    padding: 0.429em 0.857em 0.429em 0.857em;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background-color: #ffffff;
+    margin: 0;
+}
+
+body .p-listbox .p-listbox-header .p-listbox-filter-container {
+    width: calc(100% - (0.857em + 0.857em + 0.5em));
+}
+
+body .p-listbox .p-listbox-header .p-listbox-filter-container input {
+    padding: 0.429em;
+    padding-right: 2em;
+}
+
+body
+    .p-listbox
+    .p-listbox-header
+    .p-listbox-filter-container
+    .p-listbox-filter-icon {
+    top: 50%;
+    left: auto;
+    margin-top: -0.5em;
+    right: 0.5em;
+    color: #007ad9;
+}
+
+body .p-listbox .p-listbox-list {
+    background-color: #ffffff;
+}
+
+body .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429em 0.857em;
+    border: 0 none;
+    color: #333333;
+    background-color: transparent;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #ffffff;
+    background-color: #007ad9;
+}
+
+body .p-listbox .p-listbox-list .p-listbox-item:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
+    position: static;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 0.5em 0 0;
+}
+
+body .p-listbox .p-listbox-list .p-listbox-item label {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+body
+    .p-listbox:not(.p-disabled)
+    .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background-color: #eaeaea;
+}
+
+body
+    .p-listbox.p-disabled
+    .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
+    border: 1px solid #a6a6a6;
+}
+
+body .p-listbox .p-listbox-footer {
+    padding: 0.429em 0.857em 0.429em 0.857em;
+    border-top: 1px solid #eaeaea;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+body p-listbox.ng-dirty.ng-invalid .p-inputtext {
+    border: 1px solid #a80000;
+}
+
+body .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    -moz-transition: border-color 0.2s, box-shadow 0.2s;
+    -o-transition: border-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-multiselect:not(.p-disabled):hover {
+    border-color: #212121;
+}
+
+body .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    border-color: #007ad9;
+}
+
+body .p-multiselect .p-multiselect-label {
+    padding: 0.429em;
+    padding-right: 2em;
+    color: #333333;
+}
+
+body .p-multiselect .p-multiselect-label .p-placeholder {
+    color: #666666;
+}
+
+body .p-multiselect .p-multiselect-trigger {
+    background-color: #ffffff;
+    width: 2em;
+    line-height: 2em;
+    text-align: center;
+    padding: 0;
+    color: #848484;
+}
+
+body .p-multiselect-panel {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429em 0.857em 0.429em 0.857em;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background-color: #ffffff;
+    margin: 0;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-header
+    .p-multiselect-filter-container {
+    float: none;
+    width: 70%;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 0;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-header
+    .p-multiselect-filter-container
+    .p-inputtext {
+    padding: 0.429em;
+    padding-right: 2em;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-header
+    .p-multiselect-filter-container
+    .p-multiselect-filter-icon {
+    color: #007ad9;
+    top: 50%;
+    margin-top: -0.5em;
+    right: 0.5em;
+    left: auto;
+}
+
+body .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5em;
+    float: none;
+    vertical-align: middle;
+}
+
+body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    color: #848484;
+    top: 50%;
+    margin-top: -0.5em;
+    line-height: 1;
+    -moz-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-multiselect-panel .p-multiselect-header .p-multiselect-close:hover {
+    color: #333333;
+}
+
+body .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+}
+
+body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429em 0.857em;
+    border: 0 none;
+    color: #333333;
+    background-color: transparent;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item.p-highlight {
+    color: #ffffff;
+    background-color: #007ad9;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background-color: #eaeaea;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item.p-disabled
+    .p-checkbox-box {
+    cursor: auto;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item.p-disabled
+    .p-checkbox-box:hover {
+    border: 1px solid #a6a6a6;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item.p-disabled
+    .p-checkbox-box.p-highlight:hover {
+    border-color: #007ad9;
+}
+
+body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item
+    .p-checkbox {
+    position: static;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 0.5em 0 0;
+}
+
+body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+body p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
+    border: 1px solid #a80000;
+}
+
+body .p-password-panel {
+    padding: 12px;
+    background-color: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-radiobutton {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+}
+
+body .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #a6a6a6;
+    background-color: #ffffff;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    position: relative;
+    -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, border-color 0.2s,
+        box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+
+body
+    .p-radiobutton
+    .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+    border-color: #212121;
+}
+
+body .p-radiobutton .p-radiobutton-box.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    border-color: #007ad9;
+}
+
+body .p-radiobutton .p-radiobutton-box.p-highlight {
+    border-color: #007ad9;
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    background-color: #ffffff;
+}
+
+body
+    .p-radiobutton
+    .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+    border-color: #005b9f;
+    background-color: #005b9f;
+    color: #ffffff;
+}
+
+body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    background: transparent;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -5px;
+    margin-top: -5px;
+    -moz-transition: background-color 0.2s;
+    -o-transition: background-color 0.2s;
+    -webkit-transition: background-color 0.2s;
+    transition: background-color 0.2s;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+
+body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
+    display: none;
+}
+
+body .p-radiobutton-label {
+    margin: 0 0 0 0.5em;
+}
+
+body p-radiobutton.ng-dirty.ng-invalid .p-radiobutton-box {
+    border: 1px solid #a80000;
+}
+
+body .p-rating a {
+    text-align: center;
+    display: inline-block;
+    color: #333333;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    line-height: 1;
+    -moz-transition: color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, box-shadow 0.2s;
+}
+
+body .p-rating a.p-rating-cancel {
+    color: #e4018d;
+}
+
+body .p-rating a .p-rating-icon {
+    font-size: 20px;
+}
+
+body .p-rating:not(.p-disabled):not(.p-rating-readonly) a:hover {
+    color: #007ad9;
+}
+
+body
+    .p-rating:not(.p-disabled):not(.p-rating-readonly)
+    a.p-rating-cancel:hover {
+    color: #b5019f;
+}
+
+body .p-rating:not(.p-disabled):not(.p-rating-readonly) a:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-selectbutton .p-button {
+    background-color: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    overflow: hidden;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-selectbutton .p-button .p-button-icon-left {
+    color: #666666;
+}
+
+body
+    .p-selectbutton
+    .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background-color: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+}
+
+body
+    .p-selectbutton
+    .p-button:not(.p-disabled):not(.p-highlight):hover
+    .p-button-icon-left {
+    color: #212121;
+}
+
+body
+    .p-selectbutton
+    .p-button:not(.p-disabled):not(.p-highlight).p-focus {
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    z-index: 1;
+}
+
+body .p-selectbutton .p-button.p-highlight {
+    background-color: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
+    color: #ffffff;
+}
+
+body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
+    background-color: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+}
+
+body
+    .p-selectbutton
+    .p-button.p-highlight:not(.p-disabled):hover
+    .p-button-icon-left {
+    color: #ffffff;
+}
+
+body .p-selectbutton .p-button:first-child {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+body .p-selectbutton .p-button:last-child {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+body p-selectbutton.ng-dirty.ng-invalid .p-button {
+    border: 1px solid #a80000;
+}
+
+body .p-slider {
+    background-color: #c8c8c8;
+    border: 0 none;
+}
+
+body .p-slider.p-slider-horizontal {
+    height: 0.286em;
+}
+
+body .p-slider.p-slider-horizontal .p-slider-handle {
+    top: 50%;
+    margin-top: -0.5715em;
+}
+
+body .p-slider.p-slider-vertical {
+    width: 0.286em;
+}
+
+body .p-slider.p-slider-vertical .p-slider-handle {
+    left: 50%;
+    margin-left: -0.5715em;
+}
+
+body .p-slider .p-slider-handle {
+    height: 1.143em;
+    width: 1.143em;
+    background-color: #ffffff;
+    border: 2px solid #666666;
+    -moz-border-radius: 100%;
+    -webkit-border-radius: 100%;
+    border-radius: 100% !important;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-slider .p-slider-range {
+    background-color: #007ad9;
+}
+
+body .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background-color: 2px solid #666666;
+    border: 2px solid #007ad9;
+}
+
+body .p-slider.p-slider-animate .p-slider-handle {
+    -moz-transition: box-shadow 0.2s, left 0.2s;
+    -o-transition: box-shadow 0.2s, left 0.2s;
+    -webkit-transition: box-shadow 0.2s, left 0.2s;
+    transition: box-shadow 0.2s, left 0.2s;
+}
+
+body .p-spinner .p-spinner-input {
+    padding-right: 2.429em;
+}
+
+body .p-spinner .p-spinner-button {
+    width: 2em;
+}
+
+body .p-spinner .p-spinner-button.p-spinner-up {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+body .p-spinner .p-spinner-button.p-spinner-down {
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+body .p-spinner .p-spinner-button .p-spinner-button-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -0.5em;
+    margin-left: -0.5em;
+    width: 1em;
+}
+
+body .p-fluid .p-spinner .p-spinner-input {
+    padding-right: 2.429em;
+}
+
+body .p-fluid .p-spinner .p-spinner-button {
+    width: 2em;
+}
+
+body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
+    left: 50%;
+}
+
+body p-spinner.ng-dirty.ng-invalid > .p-inputtext {
+    border: 1px solid #a80000;
+}
+
+body .p-togglebutton {
+    background-color: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-togglebutton .p-button-icon-left {
+    color: #666666;
+}
+
+body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
+    background-color: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+}
+
+body
+    .p-togglebutton:not(.p-disabled):not(.p-highlight):hover
+    .p-button-icon-left {
+    color: #212121;
+}
+
+body
+    .p-togglebutton:not(.p-disabled):not(.p-highlight).p-focus {
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-togglebutton.p-highlight {
+    background-color: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-togglebutton.p-highlight .p-button-icon-left {
+    color: #ffffff;
+}
+
+body .p-togglebutton.p-highlight:hover {
+    background-color: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+}
+
+body .p-togglebutton.p-highlight:hover .p-button-icon-left {
+    color: #ffffff;
+}
+
+body p-togglebutton.ng-dirty.ng-invalid .p-button {
+    border: 1px solid #a80000;
+}
+
+body .p-button {
+    margin: 0;
+    color: #ffffff;
+    background-color: #007ad9;
+    border: 1px solid #007ad9;
+    font-size: 14px;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-button:enabled:hover {
+    background-color: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+}
+
+body .p-button:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0px;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-button:enabled:active {
+    background-color: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+}
+
+body .p-button .p-button-label {
+    padding: 0.429em 1em;
+}
+
+body .p-button.p-button-text-icon-left .p-button-label {
+    padding: 0.429em 1em 0.429em 2em;
+}
+
+body .p-button.p-button-text-icon-right .p-button-label {
+    padding: 0.429em 2em 0.429em 1em;
+}
+
+body .p-button.p-button-icon-only {
+    width: 2.357em;
+}
+
+body .p-button.p-button-icon-only .p-button-label {
+    padding: 0.429em;
+}
+
+body .p-button.p-button-raised {
+    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+}
+
+body .p-button.p-button-rounded {
+    -moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
+    border-radius: 15px;
+}
+
+body .p-fluid .p-button-icon-only {
+    width: 2.357em;
+}
+
+@media (max-width: 640px) {
+    body .p-buttonset:not(.p-splitbutton) .p-button {
+        margin-bottom: 1px;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+    }
+}
+
+body .p-splitbutton.p-buttonset .p-button {
+    border: 1px solid transparent;
+}
+
+body .p-splitbutton.p-buttonset .p-menu {
+    min-width: 100%;
+}
+
+body .p-button.p-state-default.p-button-secondary,
+body .p-buttonset.p-button-secondary > .p-button.p-state-default {
+    color: #333333;
+    background-color: #f4f4f4;
+    border: 1px solid #f4f4f4;
+}
+
+body .p-button.p-state-default.p-button-secondary:enabled:hover,
+body
+    .p-buttonset.p-button-secondary
+    > .p-button.p-state-default:enabled:hover {
+    background-color: #c8c8c8;
+    color: #333333;
+    border-color: #c8c8c8;
+}
+
+body .p-button.p-state-default.p-button-secondary:enabled:focus,
+body
+    .p-buttonset.p-button-secondary
+    > .p-button.p-state-default:enabled:focus {
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-button.p-state-default.p-button-secondary:enabled:active,
+body
+    .p-buttonset.p-button-secondary
+    > .p-button.p-state-default:enabled:active {
+    background-color: #a0a0a0;
+    color: #333333;
+    border-color: #a0a0a0;
+}
+
+body .p-button.p-state-default.p-button-info,
+body .p-buttonset.p-button-info > .p-button.p-state-default {
+    color: #ffffff;
+    background-color: #007ad9;
+    border: 1px solid #007ad9;
+}
+
+body .p-button.p-state-default.p-button-info:enabled:hover,
+body .p-buttonset.p-button-info > .p-button.p-state-default:enabled:hover {
+    background-color: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+}
+
+body .p-button.p-state-default.p-button-info:enabled:focus,
+body .p-buttonset.p-button-info > .p-button.p-state-default:enabled:focus {
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-button.p-state-default.p-button-info:enabled:active,
+body .p-buttonset.p-button-info > .p-button.p-state-default:enabled:active {
+    background-color: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+}
+
+body .p-button.p-state-default.p-button-success,
+body .p-buttonset.p-button-success > .p-button.p-state-default {
+    color: #ffffff;
+    background-color: #34a835;
+    border: 1px solid #34a835;
+}
+
+body .p-button.p-state-default.p-button-success:enabled:hover,
+body
+    .p-buttonset.p-button-success
+    > .p-button.p-state-default:enabled:hover {
+    background-color: #107d11;
+    color: #ffffff;
+    border-color: #107d11;
+}
+
+body .p-button.p-state-default.p-button-success:enabled:focus,
+body
+    .p-buttonset.p-button-success
+    > .p-button.p-state-default:enabled:focus {
+    -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
+    -moz-box-shadow: 0 0 0 0.2em #aae5aa;
+    box-shadow: 0 0 0 0.2em #aae5aa;
+}
+
+body .p-button.p-state-default.p-button-success:enabled:active,
+body
+    .p-buttonset.p-button-success
+    > .p-button.p-state-default:enabled:active {
+    background-color: #0c6b0d;
+    color: #ffffff;
+    border-color: #0c6b0d;
+}
+
+body .p-button.p-state-default.p-button-warning,
+body .p-buttonset.p-button-warning > .p-button.p-state-default {
+    color: #333333;
+    background-color: #ffba01;
+    border: 1px solid #ffba01;
+}
+
+body .p-button.p-state-default.p-button-warning:enabled:hover,
+body
+    .p-buttonset.p-button-warning
+    > .p-button.p-state-default:enabled:hover {
+    background-color: #ed990b;
+    color: #333333;
+    border-color: #ed990b;
+}
+
+body .p-button.p-state-default.p-button-warning:enabled:focus,
+body
+    .p-buttonset.p-button-warning
+    > .p-button.p-state-default:enabled:focus {
+    -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
+    -moz-box-shadow: 0 0 0 0.2em #ffeab4;
+    box-shadow: 0 0 0 0.2em #ffeab4;
+}
+
+body .p-button.p-state-default.p-button-warning:enabled:active,
+body
+    .p-buttonset.p-button-warning
+    > .p-button.p-state-default:enabled:active {
+    background-color: #d38b10;
+    color: #333333;
+    border-color: #d38b10;
+}
+
+body .p-button.p-state-default.p-button-danger,
+body .p-buttonset.p-button-danger > .p-button.p-state-default {
+    color: #ffffff;
+    background-color: #e91224;
+    border: 1px solid #e91224;
+}
+
+body .p-button.p-state-default.p-button-danger:enabled:hover,
+body
+    .p-buttonset.p-button-danger
+    > .p-button.p-state-default:enabled:hover {
+    background-color: #c01120;
+    color: #ffffff;
+    border-color: #c01120;
+}
+
+body .p-button.p-state-default.p-button-danger:enabled:focus,
+body
+    .p-buttonset.p-button-danger
+    > .p-button.p-state-default:enabled:focus {
+    -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
+    -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
+    box-shadow: 0 0 0 0.2em #f9b4ba;
+}
+
+body .p-button.p-state-default.p-button-danger:enabled:active,
+body
+    .p-buttonset.p-button-danger
+    > .p-button.p-state-default:enabled:active {
+    background-color: #a90000;
+    color: #ffffff;
+    border-color: #a90000;
+}
+
+body .p-splitbutton.p-buttonset .p-button {
+    border: 1px solid transparent;
+}
+
+body .p-splitbutton.p-buttonset .p-menu {
+    min-width: 100%;
+}
+
+body .p-carousel .p-carousel-content .p-carousel-prev,
+body .p-carousel .p-carousel-content .p-carousel-next {
+    background-color: #ffffff;
+    border: solid 1px rgba(178, 193, 205, 0.64);
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    margin: 0.2em;
+    color: #333333;
+    -moz-transition: color 0.2s;
+    -o-transition: color 0.2s;
+    -webkit-transition: color 0.2s;
+    transition: color 0.2s;
+}
+
+body
+    .p-carousel
+    .p-carousel-content
+    .p-carousel-prev:not(.p-disabled):hover,
+body
+    .p-carousel
+    .p-carousel-content
+    .p-carousel-next:not(.p-disabled):hover {
+    background-color: #ffffff;
+    color: #007ad9;
+    border-color: solid 1px rgba(178, 193, 205, 0.64);
+}
+
+body
+    .p-carousel
+    .p-carousel-dots-container
+    .p-carousel-dot-item
+    > .p-button {
+    border-color: transparent;
+    background-color: transparent;
+}
+
+body
+    .p-carousel
+    .p-carousel-dots-container
+    .p-carousel-dot-item
+    .p-carousel-dot-icon {
+    width: 20px;
+    height: 6px;
+    background-color: #b2c1cd;
+    margin: 0 0.2em;
+}
+
+body
+    .p-carousel
+    .p-carousel-dots-container
+    .p-carousel-dot-item
+    .p-carousel-dot-icon::before {
+    content: ' ';
+}
+
+body
+    .p-carousel
+    .p-carousel-dots-container
+    .p-carousel-dot-item.p-highlight
+    .p-carousel-dot-icon {
+    background-color: #007ad9;
+}
+
+body .p-dataview .p-dataview-header {
+    background-color: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    font-weight: 700;
+    border-bottom: 0 none;
+}
+
+body .p-dataview .p-dataview-content {
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.571em 1em;
+}
+
+body .p-dataview .p-dataview-footer {
+    background-color: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    border-top: 0 none;
+}
+
+body .p-dataview .p-dataview-layout-options .p-button {
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-dataview .p-dataview-layout-options .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0px;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+    z-index: 1;
+}
+
+body .fc th {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    padding: 0.571em 1em;
+}
+
+body .fc td.p-widget-content {
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+}
+
+body .fc td.fc-head-container {
+    border: 1px solid #c8c8c8;
+}
+
+body .fc .fc-row {
+    border-right: 1px solid #c8c8c8;
+}
+
+body .fc .fc-event {
+    background-color: #116fbf;
+    border: 1px solid #116fbf;
+    color: #ffffff;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .fc .fc-event:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .fc .fc-toolbar .fc-button {
+    color: #ffffff;
+    background-color: #007ad9;
+    border: 1px solid #007ad9;
+    font-size: 14px;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+
+body .fc .fc-toolbar .fc-button:enabled:hover {
+    background-color: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+}
+
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
+    font-family: 'PrimeIcons' !important;
+    text-indent: 0;
+}
+
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
+    content: '';
+}
+
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
+    font-family: 'PrimeIcons' !important;
+    text-indent: 0;
+}
+
+body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
+    content: '';
+}
+
+body .fc .fc-toolbar .fc-button:focus {
+    outline: 0 none;
+    outline-offset: 0px;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .fc .fc-toolbar .fc-button-group .fc-button {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+body .fc .fc-divider {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+}
+
+body .p-fluid .fc .fc-toolbar .fc-button {
+    width: auto;
+}
+
+body .p-orderlist .p-orderlist-controls {
+    padding: 0.571em 1em;
+}
+
+body .p-orderlist .p-orderlist-controls button {
+    font-size: 16px;
+}
+
+body .p-orderlist .p-orderlist-caption {
+    background-color: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    font-weight: 700;
+    border-bottom: 0 none;
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+body .p-orderlist .p-orderlist-filter-container {
+    padding: 0.429em 0.857em 0.429em 0.857em;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    background-color: #ffffff;
+    margin: 0;
+    border-bottom: 0 none;
+}
+
+body .p-orderlist .p-orderlist-filter-container input.p-inputtext {
+    width: 100%;
+    padding-right: 2em;
+    text-indent: 0;
+}
+
+body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    top: 50%;
+    margin-top: -0.5em;
+    left: auto;
+    right: 1.357em;
+    color: #007ad9;
+}
+
+body .p-orderlist .p-orderlist-list {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0;
+}
+
+body .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429em 0.857em;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background-color: transparent;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body
+    .p-orderlist
+    .p-orderlist-list
+    .p-orderlist-item:not(.p-highlight):hover {
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
+    background-color: #007ad9;
+}
+
+body
+    .p-organizationchart
+    .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body
+    .p-organizationchart
+    .p-organizationchart-node-content.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body
+    .p-organizationchart
+    .p-organizationchart-node-content.p-highlight
+    .p-node-toggler
+    i {
+    color: #00325a;
+}
+
+body .p-organizationchart .p-organizationchart-line-down {
+    background-color: #c8c8c8;
+}
+
+body .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+}
+
+body .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+}
+
+body .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.571em 1em;
+}
+
+body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    bottom: -0.7em;
+    margin-left: -0.46em;
+    color: #848484;
+    overflow: hidden;
+    line-height: 1;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body
+    .p-organizationchart
+    .p-organizationchart-node-content
+    .p-node-toggler:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-paginator {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+    padding: 0;
+}
+
+body .p-paginator .p-paginator-first,
+body .p-paginator .p-paginator-prev,
+body .p-paginator .p-paginator-next,
+body .p-paginator .p-paginator-last {
+    color: #848484;
+    height: 2.286em;
+    min-width: 2.286em;
+    border: 0 none;
+    line-height: 2.286em;
+    padding: 0;
+    margin: 0;
+    vertical-align: top;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body
+    .p-paginator
+    .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+body
+    .p-paginator
+    .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+body
+    .p-paginator
+    .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+body
+    .p-paginator
+    .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background-color: #e0e0e0;
+    color: #333333;
+}
+
+body .p-paginator .p-paginator-first:focus,
+body .p-paginator .p-paginator-prev:focus,
+body .p-paginator .p-paginator-next:focus,
+body .p-paginator .p-paginator-last:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-paginator .p-paginator-current {
+    color: #333333;
+    height: 2.286em;
+    min-width: 2.286em;
+    line-height: 2.286em;
+}
+
+body .p-paginator .p-dropdown {
+    border: 0 none;
+}
+
+body .p-paginator .p-dropdown .p-dropdown-trigger,
+body .p-paginator .p-dropdown .p-dropdown-label {
+    color: #848484;
+}
+
+body .p-paginator .p-dropdown:hover .p-dropdown-trigger,
+body .p-paginator .p-dropdown:hover .p-dropdown-label {
+    color: #333333;
+}
+
+body .p-paginator .p-paginator-first:before {
+    position: relative;
+    top: 1px;
+}
+
+body .p-paginator .p-paginator-prev:before {
+    position: relative;
+}
+
+body .p-paginator .p-paginator-next:before {
+    position: relative;
+    top: 1px;
+}
+
+body .p-paginator .p-paginator-last:before {
+    position: relative;
+    top: 1px;
+}
+
+body .p-paginator .p-paginator-pages {
+    vertical-align: top;
+    display: inline-block;
+    padding: 0;
+}
+
+body .p-paginator .p-paginator-pages .p-paginator-page {
+    color: #848484;
+    height: 2.286em;
+    min-width: 2.286em;
+    border: 0 none;
+    line-height: 2.286em;
+    padding: 0;
+    margin: 0;
+    vertical-align: top;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body
+    .p-paginator
+    .p-paginator-pages
+    .p-paginator-page:not(.p-highlight):hover {
+    background-color: #e0e0e0;
+    color: #333333;
+}
+
+body .p-paginator .p-paginator-pages .p-paginator-page:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-paginator .p-dropdown {
+    margin-left: 0.5em;
+    height: 2.286em;
+    min-width: auto;
+}
+
+body .p-picklist .p-picklist-buttons button {
+    font-size: 16px;
+}
+
+body .p-picklist .p-picklist-caption {
+    background-color: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    font-weight: 700;
+    border-bottom: 0 none;
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+body .p-picklist .p-picklist-filter-container {
+    padding: 0.429em 0.857em 0.429em 0.857em;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    background-color: #ffffff;
+    margin: 0;
+    border-bottom: 0 none;
+}
+
+body .p-picklist .p-picklist-filter-container input.p-picklist-filter {
+    width: 100%;
+    padding-right: 2em;
+    text-indent: 0;
+}
+
+body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    top: 50%;
+    margin-top: -0.5em;
+    left: auto;
+    right: 1.357em;
+    color: #007ad9;
+}
+
+body .p-picklist .p-picklist-buttons {
+    padding: 0.571em 1em;
+}
+
+body .p-picklist .p-picklist-list {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0;
+}
+
+body .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429em 0.857em;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background-color: transparent;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body
+    .p-picklist
+    .p-picklist-list
+    .p-picklist-item:not(.p-highlight):hover {
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-picklist .p-picklist-list .p-picklist-item:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
+    background-color: #007ad9;
+}
+
+@media (max-width: 40em) {
+    body .p-picklist.p-picklist-responsive .p-picklist-buttons {
+        padding: 0.571em 1em;
+    }
+}
+
+body .p-table .p-table-caption,
+body .p-table .p-table-summary {
+    background-color: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    text-align: center;
+}
+
+body .p-table .p-table-caption {
+    border-bottom: 0 none;
+    font-weight: 700;
+}
+
+body .p-table .p-table-summary {
+    border-top: 0 none;
+    font-weight: 700;
+}
+
+body .p-table .p-table-thead > tr > th {
+    padding: 0.571em 0.857em;
+    border: 1px solid #c8c8c8;
+    font-weight: 700;
+    color: #333333;
+    background-color: #f4f4f4;
+}
+
+body .p-table .p-table-tbody > tr > td {
+    padding: 0.571em 0.857em;
+}
+
+body .p-table .p-table-tfoot > tr > td {
+    padding: 0.571em 0.857em;
+    border: 1px solid #c8c8c8;
+    font-weight: 700;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+body .p-table .p-sortable-column {
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-table .p-sortable-column:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-table .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+}
+
+body .p-table .p-sortable-column:not(.p-highlight):hover {
+    background-color: #e0e0e0;
+    color: #333333;
+}
+
+body
+    .p-table
+    .p-sortable-column:not(.p-highlight):hover
+    .p-sortable-column-icon {
+    color: #333333;
+}
+
+body .p-table .p-sortable-column.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-table .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffffff;
+}
+
+body .p-table .p-editable-column input:focus {
+    outline: 1px solid #007ad9;
+    outline-offset: 2px;
+}
+
+body .p-table .p-table-tbody > tr {
+    background-color: #ffffff;
+    color: #333333;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-table .p-table-tbody > tr > td {
+    background-color: inherit;
+    border: 1px solid #c8c8c8;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-table .p-table-tbody > tr.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-table .p-table-tbody > tr.p-highlight a {
+    color: #ffffff;
+}
+
+body .p-table .p-table-tbody > tr.p-table-dragpoint-top > td {
+    -webkit-box-shadow: inset 0 2px 0 0 #007ad9;
+    -moz-box-shadow: inset 0 2px 0 0 #007ad9;
+    box-shadow: inset 0 2px 0 0 #007ad9;
+}
+
+body .p-table .p-table-tbody > tr.p-table-dragpoint-bottom > td {
+    -webkit-box-shadow: inset 0 -2px 0 0 #007ad9;
+    -moz-box-shadow: inset 0 -2px 0 0 #007ad9;
+    box-shadow: inset 0 -2px 0 0 #007ad9;
+}
+
+body .p-table .p-table-tbody > tr:focus {
+    outline: none;
+}
+
+body .p-table .p-table-tbody > tr:focus + tr > td {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow;
+}
+
+body .p-table .p-table-tbody > tr:focus > td {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow, 0 0.2em 0 0 $focus-shadow;
+}
+
+body .p-table .p-table-tbody > tr:focus > td:first-child {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow, 0 0.2em 0 0 $focus-shadow,
+        -0.1em -0.1em 0 0.1em $focus-shadow;
+}
+
+body .p-table .p-table-tbody > tr:focus > td:last-child {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow, 0 0.2em 0 0 $focus-shadow,
+        0.1em -0.1em 0 0.1em $focus-shadow;
+}
+
+body .p-table .p-table-tbody > tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+body .p-table .p-table-tbody > tr:nth-child(even).p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-table .p-table-tbody > tr:nth-child(even).p-highlight a {
+    color: #ffffff;
+}
+
+body
+    .p-table
+    .p-table-virtual-scrollable-body
+    .p-table-tbody
+    > tr:nth-child(even) {
+    background-color: #ffffff;
+}
+
+body
+    .p-table
+    .p-table-virtual-scrollable-body
+    .p-table-tbody
+    > tr:nth-child(even).p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body
+    .p-table
+    .p-table-virtual-scrollable-body
+    .p-table-tbody
+    > tr:nth-child(even).p-highlight
+    a {
+    color: #ffffff;
+}
+
+body
+    .p-table.p-table-hoverable-rows
+    .p-table-tbody
+    > tr.p-selectable-row:not(.p-highlight):hover {
+    cursor: pointer;
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-table .p-column-resizer-helper {
+    background-color: #007ad9;
+}
+
+@media screen and (max-width: 40em) {
+    body .p-table.p-table-responsive .p-paginator-top {
+        border-bottom: 1px solid #c8c8c8;
+    }
+
+    body .p-table.p-table-responsive .p-paginator-bottom {
+        border-top: 1px solid #c8c8c8;
+    }
+
+    body .p-table.p-table-responsive .p-table-tbody > tr td {
+        border: 0 none;
+    }
+
+    body .p-table.p-table-responsive .p-table-tbody > tr:focus + tr > td {
+        box-shadow: none;
+    }
+
+    body .p-table.p-table-responsive .p-table-tbody > tr:focus > td {
+        box-shadow: none;
+    }
+
+    body
+        .p-table.p-table-responsive
+        .p-table-tbody
+        > tr:focus
+        > td:first-child {
+        box-shadow: none;
+    }
+
+    body
+        .p-table.p-table-responsive
+        .p-table-tbody
+        > tr:focus
+        > td:last-child {
+        box-shadow: none;
+    }
+}
+
+body .p-tree {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.571em 1em;
+}
+
+body .p-tree .p-tree-container {
+    padding: 0.286em;
+    margin: 0;
+}
+
+body .p-tree .p-tree-container .p-treenode {
+    padding: 0.143em 0;
+}
+
+body .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    padding: 0;
+    border: 1px solid transparent;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-tree-toggler {
+    vertical-align: middle;
+    display: inline-block;
+    float: none;
+    margin: 0 0.143em 0 0;
+    color: #848484;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-treenode-icon {
+    vertical-align: middle;
+    display: inline-block;
+    margin: 0 0.143em 0 0;
+    color: #848484;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-treenode-label {
+    margin: 0;
+    vertical-align: middle;
+    display: inline-block;
+    padding: 0.286em;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-treenode-label.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
+    margin: 0 0.5em 0 0;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-checkbox
+    .p-checkbox-icon {
+    margin: 1px 0 0 0;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content.p-treenode-selectable
+    .p-treenode-label:not(.p-highlight):hover {
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
+    line-height: inherit;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content.p-treenode-dragover {
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-tree
+    .p-tree-container
+    .p-treenode-droppoint.p-treenode-droppoint-active {
+    background-color: #007ad9;
+}
+
+body .p-tree.p-tree-horizontal {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.571em 1em;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body
+    .p-tree.p-tree-horizontal
+    .p-treenode
+    .p-treenode-content.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body
+    .p-tree.p-tree-horizontal
+    .p-treenode
+    .p-treenode-content
+    .p-checkbox
+    .p-icon {
+    color: #007ad9;
+}
+
+body
+    .p-tree.p-tree-horizontal
+    .p-treenode
+    .p-treenode-content
+    .p-treenode-label:not(.p-highlight):hover {
+    background-color: inherit;
+    color: inherit;
+}
+
+body
+    .p-tree.p-tree-horizontal
+    .p-treenode
+    .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 2em;
+}
+
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    top: 50%;
+    left: auto;
+    margin-top: -0.5em;
+    right: 0.8em;
+    color: #007ad9;
+}
+
+body .p-treetable .p-treetable-caption,
+body .p-treetable .p-treetable-summary {
+    background-color: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    text-align: center;
+}
+
+body .p-treetable .p-treetable-caption {
+    border-bottom: 0 none;
+    font-weight: 700;
+}
+
+body .p-treetable .p-treetable-summary {
+    border-top: 0 none;
+    font-weight: 700;
+}
+
+body .p-treetable .p-treetable-thead > tr > th {
+    padding: 0.571em 0.857em;
+    border: 1px solid #c8c8c8;
+    font-weight: 700;
+    color: #333333;
+    background-color: #f4f4f4;
+}
+
+body .p-treetable .p-treetable-tbody > tr > td {
+    padding: 0.571em 0.857em;
+}
+
+body .p-treetable .p-treetable-tfoot > tr > td {
+    padding: 0.571em 0.857em;
+    border: 1px solid #c8c8c8;
+    font-weight: 700;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+body .p-treetable .p-sortable-column {
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-treetable .p-sortable-column:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+}
+
+body .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background-color: #e0e0e0;
+    color: #333333;
+}
+
+body
+    .p-treetable
+    .p-sortable-column:not(.p-highlight):hover
+    .p-sortable-column-icon {
+    color: #333333;
+}
+
+body .p-treetable .p-sortable-column.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body
+    .p-treetable
+    .p-sortable-column.p-highlight
+    .p-sortable-column-icon {
+    color: #ffffff;
+}
+
+body .p-treetable .p-editable-column input:focus {
+    outline: 1px solid #007ad9;
+    outline-offset: 2px;
+}
+
+body .p-treetable .p-treetable-tbody > tr {
+    background-color: #ffffff;
+    color: #333333;
+}
+
+body .p-treetable .p-treetable-tbody > tr > td {
+    background-color: inherit;
+    border: 1px solid #c8c8c8;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    color: #848484;
+    vertical-align: middle;
+}
+
+body .p-treetable .p-treetable-tbody > tr > td .p-treetable-checkbox {
+    vertical-align: middle;
+    margin-right: 0.5em;
+}
+
+body .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background-color: #007ad9;
+    color: #ffffff;
+}
+
+body .p-treetable .p-treetable-tbody > tr.p-highlight > td {
+    background-color: inherit;
+    border: 1px solid #c8c8c8;
+}
+
+body
+    .p-treetable
+    .p-treetable-tbody
+    > tr.p-highlight
+    > td
+    .p-treetable-toggler {
+    color: #ffffff;
+}
+
+body .p-treetable .p-treetable-tbody > tr:focus {
+    outline: none;
+}
+
+body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow;
+}
+
+body .p-treetable .p-treetable-tbody > tr:focus > td {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow, 0 0.2em 0 0 $focus-shadow;
+}
+
+body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow, 0 0.2em 0 0 $focus-shadow,
+        -0.1em -0.1em 0 0.1em $focus-shadow;
+}
+
+body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
+    box-shadow: 0 -0.2em 0 0 $focus-shadow, 0 0.2em 0 0 $focus-shadow,
+        0.1em -0.1em 0 0.1em $focus-shadow;
+}
+
+body
+    .p-treetable.p-treetable-hoverable-rows
+    .p-treetable-tbody
+    > tr:not(.p-highlight):hover {
+    cursor: pointer;
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-treetable .p-column-resizer-helper {
+    background-color: #007ad9;
+}
+
+body .p-virtualscroller .p-virtualscroller-header {
+    background-color: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    font-weight: 700;
+    border-bottom: 0 none;
+}
+
+body .p-virtualscroller .p-virtualscroller-content {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+}
+
+body
+    .p-virtualscroller
+    .p-virtualscroller-content
+    .p-virtualscroller-list
+    .p-virtualscroller-item {
+    border-bottom: 1px solid #d8dae2;
+}
+
+body .p-virtualscroller .p-virtualscroller-footer {
+    background-color: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    border-top: 0 none;
+}
+
+body .p-accordion .p-accordion-header a {
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
+    color: #848484;
+}
+
+body .p-accordion .p-accordion-header a:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-accordion .p-accordion-content {
+    background-color: #ffffff;
+    color: #333333;
+}
+
+.p-accordion .p-accordion-header a { 
+    display: block; 
+    padding: .5em;
+}
+
+.p-accordion .p-accordion-content { 
+    padding: 1em;
+    border-top: 0; 
+    overflow: visible;
+}
+
+body .p-card {
+    background-color: #ffffff;
+    color: #333333;
+    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
+        0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
+        0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+        0 2px 1px -1px rgba(0, 0, 0, 0.12);
+}
+
+body .p-fieldset {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+}
+
+body .p-fieldset .p-fieldset-legend a {
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    background-color: #f4f4f4;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
+    float: none;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 0.5em;
+    color: #848484;
+}
+
+body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
+    padding: 0;
+}
+
+body .p-fieldset .p-fieldset-legend a:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
+    background-color: #dbdbdb;
+    border: 1px solid #dbdbdb;
+    color: #333333;
+}
+
+body
+    .p-fieldset.p-fieldset-toggleable
+    .p-fieldset-legend
+    a:hover
+    .p-fieldset-toggler {
+    color: #333333;
+}
+
+body .p-fieldset .p-fieldset-content {
+    padding: 0;
+}
+
+body .p-panel {
+    padding: 0;
+    border: 0 none;
+}
+
+body .p-panel .p-panel-titlebar {
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+    background-color: #f4f4f4;
+    color: #333333;
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomleft: 0;
+    -webkit-border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+    -moz-border-radius-bottomright: 0;
+    -webkit-border-bottom-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+body .p-panel .p-panel-titlebar .p-panel-title {
+    vertical-align: middle;
+    font-weight: 700;
+}
+
+body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
+    margin: 0;
+    position: relative;
+    font-size: 14px;
+    color: #848484;
+    border: 1px solid transparent;
+    line-height: 1;
+    -moz-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
+    color: #333333;
+}
+
+body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-panel .p-panel-content {
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.571em 1em;
+    border-top: 0 none;
+}
+
+body .p-panel .p-panel-footer {
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    border-top: 0 none;
+    margin: 0;
+}
+
+body .p-tabview.p-tabview-top,
+body .p-tabview.p-tabview-bottom,
+body .p-tabview.p-tabview-left,
+body .p-tabview.p-tabview-right {
+    border: 0 none;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav,
+body .p-tabview.p-tabview-bottom .p-tabview-nav,
+body .p-tabview.p-tabview-left .p-tabview-nav,
+body .p-tabview.p-tabview-right .p-tabview-nav {
+    padding: 0;
+    background: transparent;
+    border: 0 none;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li,
+body .p-tabview.p-tabview-left .p-tabview-nav li,
+body .p-tabview.p-tabview-right .p-tabview-nav li {
+    border: 1px solid #c8c8c8;
+    background-color: #f4f4f4;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li a,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li a,
+body .p-tabview.p-tabview-left .p-tabview-nav li a,
+body .p-tabview.p-tabview-right .p-tabview-nav li a {
+    float: none;
+    display: inline-block;
+    color: #333333;
+    padding: 0.571em 1em;
+    font-weight: 700;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon,
+body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon,
+body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
+    margin-right: 0.5em;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon,
+body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon,
+body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
+    margin-left: 0.5em;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close,
+body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close,
+body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
+    color: #848484;
+    margin: 0 0.5em 0 0;
+    vertical-align: middle;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close:focus,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close:focus,
+body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close:focus,
+body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-tabview.p-tabview-top
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover,
+body
+    .p-tabview.p-tabview-bottom
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover,
+body
+    .p-tabview.p-tabview-left
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover,
+body
+    .p-tabview.p-tabview-right
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover {
+    background-color: #dbdbdb;
+    border: 1px solid #dbdbdb;
+}
+
+body
+    .p-tabview.p-tabview-top
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    a,
+body
+    .p-tabview.p-tabview-bottom
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    a,
+body
+    .p-tabview.p-tabview-left
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    a,
+body
+    .p-tabview.p-tabview-right
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    a {
+    color: #333333;
+}
+
+body
+    .p-tabview.p-tabview-top
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    .p-tabview-close,
+body
+    .p-tabview.p-tabview-bottom
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    .p-tabview-close,
+body
+    .p-tabview.p-tabview-left
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    .p-tabview-close,
+body
+    .p-tabview.p-tabview-right
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    .p-tabview-close {
+    color: #333333;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight,
+body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight,
+body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight {
+    background-color: #007ad9;
+    border: 1px solid #007ad9;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a,
+body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a,
+body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
+    color: #ffffff;
+}
+
+body
+    .p-tabview.p-tabview-top
+    .p-tabview-nav
+    li.p-highlight
+    .p-tabview-close,
+body
+    .p-tabview.p-tabview-bottom
+    .p-tabview-nav
+    li.p-highlight
+    .p-tabview-close,
+body
+    .p-tabview.p-tabview-left
+    .p-tabview-nav
+    li.p-highlight
+    .p-tabview-close,
+body
+    .p-tabview.p-tabview-right
+    .p-tabview-nav
+    li.p-highlight
+    .p-tabview-close {
+    color: #ffffff;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover,
+body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover,
+body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover {
+    border: 1px solid #005b9f;
+    background-color: #005b9f;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a,
+body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a,
+body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
+    color: #ffffff;
+}
+
+body
+    .p-tabview.p-tabview-top
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-left-icon,
+body
+    .p-tabview.p-tabview-top
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-right-icon,
+body
+    .p-tabview.p-tabview-bottom
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-left-icon,
+body
+    .p-tabview.p-tabview-bottom
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-right-icon,
+body
+    .p-tabview.p-tabview-left
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-left-icon,
+body
+    .p-tabview.p-tabview-left
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-right-icon,
+body
+    .p-tabview.p-tabview-right
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-left-icon,
+body
+    .p-tabview.p-tabview-right
+    .p-tabview-nav
+    li.p-highlight:hover
+    a
+    .p-tabview-right-icon {
+    color: #ffffff;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a,
+body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a,
+body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
+    cursor: pointer;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li:focus,
+body .p-tabview.p-tabview-bottom .p-tabview-nav li:focus,
+body .p-tabview.p-tabview-left .p-tabview-nav li:focus,
+body .p-tabview.p-tabview-right .p-tabview-nav li:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav {
+    margin-bottom: -1px;
+}
+
+body .p-tabview.p-tabview-top .p-tabview-nav li {
+    margin-right: 2px;
+}
+
+body .p-tabview.p-tabview-bottom .p-tabview-nav {
+    margin-top: -1px;
+}
+
+body .p-tabview.p-tabview-bottom .p-tabview-nav li {
+    margin-right: 2px;
+}
+
+body .p-tabview.p-tabview-left .p-tabview-nav {
+    margin-right: -px;
+}
+
+body .p-tabview.p-tabview-left .p-tabview-nav li {
+    margin-bottom: 2px;
+}
+
+body .p-tabview.p-tabview-right .p-tabview-nav {
+    margin-right: -1px;
+}
+
+body .p-tabview.p-tabview-right .p-tabview-nav li {
+    margin-bottom: 2px;
+}
+
+body .p-tabview .p-tabview-panels {
+    background-color: #ffffff;
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+}
+
+body .p-tabview .p-tabview-panels .p-tabview-panel {
+    padding: 0;
+}
+
+body .p-toolbar {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+}
+
+body .p-toolbar button {
+    vertical-align: middle;
+}
+
+body .p-toolbar .p-toolbar-separator {
+    vertical-align: middle;
+    color: #848484;
+    margin: 0 0.5em;
+}
+
+body .p-dialog {
+    padding: 0;
+    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-dialog .p-dialog-titlebar {
+    border: 1px solid #c8c8c8;
+    background-color: #f4f4f4;
+    color: #333333;
+    padding: 1em;
+    font-weight: 700;
+    border-bottom: 0 none;
+}
+
+body .p-dialog .p-dialog-titlebar .p-dialog-title {
+    margin: 0;
+    float: none;
+}
+
+body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
+    color: #848484;
+    border: 0 none;
+    padding: 0;
+    margin-left: 0.5em;
+    -moz-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon span {
+    width: auto;
+}
+
+body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
+    color: #333333;
+}
+
+body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-dialog .p-dialog-content {
+    background-color: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+}
+
+body .p-dialog .p-dialog-footer {
+    border: 1px solid #c8c8c8;
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.571em 1em;
+    margin: 0;
+    text-align: right;
+    position: relative;
+    border-top: 0 none;
+}
+
+body .p-dialog .p-dialog-footer button {
+    margin: 0 0.5em 0 0;
+    width: auto;
+}
+
+body .p-dialog.p-confirm-dialog .p-dialog-content {
+    padding: 1.5em;
+}
+
+body .p-dialog.p-confirm-dialog .p-dialog-content > span {
+    float: none;
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 14px;
+    margin: 0;
+}
+
+body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
+    margin-right: 0.35em;
+    font-size: 16px;
+}
+
+body .p-lightbox {
+    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-lightbox .p-lightbox-caption {
+    border: 1px solid #c8c8c8;
+    background-color: #f4f4f4;
+    color: #333333;
+    padding: 0.571em 1em;
+    font-weight: 700;
+}
+
+body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
+    color: #333333;
+    margin: 0;
+}
+
+body .p-lightbox .p-lightbox-caption .p-lightbox-close {
+    padding: 0;
+    color: #848484;
+    overflow: hidden;
+    line-height: 1;
+    -moz-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
+    color: #333333;
+}
+
+body .p-lightbox .p-lightbox-caption .p-lightbox-close:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-lightbox .p-lightbox-content-wrapper {
+    overflow: hidden;
+    background-color: #ffffff;
+    color: #333333;
+    border: 0 none;
+    padding: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left,
+body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
+    -moz-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    transition: all 0.2s;
+    font-size: 3em;
+    color: #ffffff;
+    margin-top: -0.5em;
+}
+
+body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover,
+body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    -o-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2);
+}
+
+body
+    .p-lightbox
+    .p-lightbox-content-wrapper
+    .p-lightbox-content.p-lightbox-loading
+    ~ a {
+    display: none;
+}
+
+body .p-overlaypanel {
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
+
+body .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571em 1em;
+}
+
+body .p-overlaypanel .p-overlaypanel-close {
+    background-color: #007ad9;
+    color: #ffffff;
+    width: 1.538em;
+    height: 1.538em;
+    line-height: 1.538em;
+    text-align: center;
+    position: absolute;
+    top: -0.769em;
+    right: -0.769em;
+    -moz-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -o-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-overlaypanel .p-overlaypanel-close .p-overlaypanel-close-icon {
+    line-height: inherit;
+}
+
+body .p-overlaypanel .p-overlaypanel-close:hover {
+    background-color: #005b9f;
+    color: #ffffff;
+}
+
+body .p-overlaypanel .p-overlaypanel-close:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-overlaypanel:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+}
+
+body .p-overlaypanel:before {
+    border-color: rgba(200, 200, 200, 0);
+    border-bottom-color: #c8c8c8;
+}
+
+body .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+}
+
+body .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #c8c8c8;
+}
+
+body .p-sidebar {
+    background-color: #ffffff;
+    color: #333333;
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-sidebar .p-sidebar-close {
+    color: #848484;
+}
+
+body .p-sidebar .p-sidebar-close:hover {
+    color: #333333;
+}
+
+body .p-tooltip .p-tooltip-text {
+    background-color: #333333;
+    color: #ffffff;
+    padding: 0.429em;
+    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #333333;
+}
+
+body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #333333;
+}
+
+body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #333333;
+}
+
+body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #333333;
+}
+
+body .p-fileupload .p-fileupload-buttonbar {
+    background-color: #f4f4f4;
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom: 0 none;
+}
+
+body .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 8px;
+}
+
+body .p-fileupload .p-fileupload-content {
+    background-color: #ffffff;
+    padding: 0.571em 1em;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+}
+
+body .p-fileupload .p-progressbar {
+    top: 0;
+}
+
+body .p-fileupload-choose:not(.p-disabled):hover {
+    background-color: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+}
+
+body .p-fileupload-choose:not(.p-disabled):active {
+    background-color: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+}
+
+body .p-fileupload-choose.p-focus {
+    outline: 0 none;
+    outline-offset: 0px;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-breadcrumb {
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+}
+
+body .p-breadcrumb ul li .p-menuitem-link {
+    color: #333333;
+    margin: 0;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-breadcrumb ul li .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-breadcrumb ul li.p-breadcrumb-chevron {
+    margin: 0 0.5em 0 0.5em;
+    color: #848484;
+}
+
+body .p-breadcrumb ul li:first-child a {
+    color: #848484;
+    margin: 0;
+}
+
+body .p-breadcrumb ul li .p-menuitem-icon {
+    color: #848484;
+}
+
+body .p-contextmenu {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-contextmenu .p-menuitem-link {
+    padding: 0.714em 0.857em;
+    color: #333333;
+    font-weight: normal;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-contextmenu .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-contextmenu .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5em;
+}
+
+body .p-contextmenu .p-menuitem-link:hover {
+    background-color: #eaeaea;
+}
+
+body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon {
+    color: #333333;
+}
+
+body .p-contextmenu .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-contextmenu
+    .p-menuitem-link.p-menuitem-link-active
+    .p-menuitem-text {
+    color: #007ad9;
+}
+
+body
+    .p-contextmenu
+    .p-menuitem-link.p-menuitem-link-active
+    .p-menuitem-icon {
+    color: #007ad9;
+}
+
+body .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-contextmenu .p-menuitem {
+    margin: 0;
+}
+
+body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
+    right: 0.429em;
+}
+
+body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
+    background-color: #eaeaea;
+}
+
+body
+    .p-contextmenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-text {
+    color: #333333;
+}
+
+body
+    .p-contextmenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-icon,
+body
+    .p-contextmenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-submenu-icon {
+    color: #333333;
+}
+
+body .p-contextmenu .p-menu-separator {
+    border: 1px solid #c8c8c8;
+    border-width: 1px 0 0 0;
+}
+
+body .p-megamenu {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+}
+
+body .p-megamenu .p-menuitem-link {
+    padding: 0.714em 0.857em;
+    color: #333333;
+    font-weight: normal;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-megamenu .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-megamenu .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5em;
+}
+
+body .p-megamenu .p-menuitem-link:hover {
+    background-color: #eaeaea;
+}
+
+body .p-megamenu .p-menuitem-link:hover .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon {
+    color: #333333;
+}
+
+body .p-megamenu .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-megamenu .p-menuitem-link.p-menuitem-link-active .p-menuitem-text {
+    color: #007ad9;
+}
+
+body .p-megamenu .p-menuitem-link.p-menuitem-link-active .p-menuitem-icon {
+    color: #007ad9;
+}
+
+body .p-megamenu .p-megamenu-submenu-header {
+    margin: 0;
+    padding: 0.571em 1em;
+    color: #333333;
+    background-color: #f4f4f4;
+    font-weight: 700;
+    border: 0 none;
+}
+
+body .p-megamenu .p-megamenu-panel {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-megamenu .p-menuitem {
+    margin: 0;
+}
+
+body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
+    right: 0.429em;
+}
+
+body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
+    background-color: #eaeaea;
+}
+
+body
+    .p-megamenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-text {
+    color: #333333;
+}
+
+body
+    .p-megamenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-icon,
+body
+    .p-megamenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-submenu-icon {
+    color: #333333;
+}
+
+body
+    .p-megamenu.p-megamenu-vertical
+    .p-megamenu-root-list
+    > .p-menuitem
+    > .p-menuitem-link
+    > .p-submenu-icon {
+    right: 0.429em;
+}
+
+body .p-menu {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+}
+
+body .p-menu .p-menuitem-link {
+    padding: 0.714em 0.857em;
+    color: #333333;
+    font-weight: normal;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-menu .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-menu .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5em;
+}
+
+body .p-menu .p-menuitem-link:hover {
+    background-color: #eaeaea;
+}
+
+body .p-menu .p-menuitem-link:hover .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-menu .p-menuitem-link:hover .p-menuitem-icon {
+    color: #333333;
+}
+
+body .p-menu .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-menu .p-menuitem-link.p-menuitem-link-active .p-menuitem-text {
+    color: #007ad9;
+}
+
+body .p-menu .p-menuitem-link.p-menuitem-link-active .p-menuitem-icon {
+    color: #007ad9;
+}
+
+body .p-menu .p-menuitem {
+    margin: 0;
+}
+
+body .p-menu.p-shadow {
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.714em 0.857em;
+    color: #333333;
+    background-color: #f4f4f4;
+    font-weight: 700;
+    border: 0 none;
+}
+
+body .p-menu .p-menu-separator {
+    border: 1px solid #c8c8c8;
+    border-width: 1px 0 0 0;
+}
+
+body .p-menubar {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+}
+
+body .p-menubar .p-menuitem-link {
+    padding: 0.714em 0.857em;
+    color: #333333;
+    font-weight: normal;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-menubar .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-menubar .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5em;
+}
+
+body .p-menubar .p-menuitem-link:hover {
+    background-color: #eaeaea;
+}
+
+body .p-menubar .p-menuitem-link:hover .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-menubar .p-menuitem-link:hover .p-menuitem-icon {
+    color: #333333;
+}
+
+body .p-menubar .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-menubar .p-menuitem-link.p-menuitem-link-active .p-menuitem-text {
+    color: #007ad9;
+}
+
+body .p-menubar .p-menuitem-link.p-menuitem-link-active .p-menuitem-icon {
+    color: #007ad9;
+}
+
+body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+    padding: 0.714em 0.857em;
+}
+
+body .p-menubar .p-menubar-root-list > .p-menu-separator {
+    border: 1px solid #c8c8c8;
+    border-width: 0 0 0 1px;
+}
+
+body .p-menubar .p-submenu-list {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-menubar .p-submenu-list .p-menuitem {
+    margin: 0;
+}
+
+body .p-menubar .p-submenu-list .p-menu-separator {
+    border: 1px solid #c8c8c8;
+    border-width: 1px 0 0 0;
+}
+
+body .p-menubar .p-menuitem {
+    margin: 0;
+}
+
+body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
+    background-color: #eaeaea;
+}
+
+body
+    .p-menubar
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-text {
+    color: #333333;
+}
+
+body
+    .p-menubar
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-icon,
+body
+    .p-menubar
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-submenu-icon {
+    color: #333333;
+}
+
+body .p-panelmenu .p-icon {
+    position: static;
+}
+
+body .p-panelmenu .p-panelmenu-header {
+    padding: 0;
+}
+
+body .p-panelmenu .p-panelmenu-header > a {
+    border: 1px solid #c8c8c8;
+    background-color: #f4f4f4;
+    color: #333333;
+    padding: 0.714em 0.857em;
+    font-weight: 700;
+    position: static;
+    font-size: 14px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
+    color: #848484;
+}
+
+body .p-panelmenu .p-panelmenu-header > a:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
+    outline: 0 none;
+    border: 1px solid #dbdbdb;
+    background-color: #dbdbdb;
+    color: #333333;
+}
+
+body
+    .p-panelmenu
+    .p-panelmenu-header:not(.p-highlight)
+    > a:hover
+    .p-panelmenu-icon {
+    color: #333333;
+}
+
+body .p-panelmenu .p-panelmenu-header.p-highlight > a {
+    border: 1px solid #007ad9;
+    background-color: #007ad9;
+    color: #ffffff;
+    -moz-border-radius-bottomleft: 0;
+    -webkit-border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+    -moz-border-radius-bottomright: 0;
+    -webkit-border-bottom-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
+    color: #ffffff;
+}
+
+body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
+    outline: 0 none;
+    border: 1px solid #005b9f;
+    background-color: #005b9f;
+    color: #ffffff;
+}
+
+body
+    .p-panelmenu
+    .p-panelmenu-header.p-highlight
+    > a:hover
+    .p-panelmenu-icon {
+    color: #ffffff;
+}
+
+body .p-panelmenu .p-panelmenu-panel {
+    margin-top: 2px;
+}
+
+body .p-panelmenu .p-panelmenu-panel:first-child {
+    margin-top: 0;
+}
+
+body .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    margin-top: 0;
+    position: static;
+    border-top: 0 none;
+}
+
+body .p-panelmenu .p-panelmenu-content .p-menuitem {
+    margin: 0;
+}
+
+body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
+    padding: 0.714em 0.857em;
+    color: #333333;
+}
+
+body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
+    background-color: #eaeaea;
+}
+
+body
+    .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    .p-menuitem-link:hover
+    .p-menuitem-icon,
+body
+    .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    .p-menuitem-link:hover
+    .p-panelmenu-icon {
+    color: #333333;
+}
+
+body
+    .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    .p-menuitem-link:hover
+    .p-menuitem-text {
+    color: #333333;
+}
+
+body
+    .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    .p-menuitem-link.p-menuitem-link-active
+    .p-menuitem-text {
+    color: #007ad9;
+}
+
+body
+    .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    .p-menuitem-link.p-menuitem-link-active
+    .p-menuitem-icon {
+    color: #007ad9;
+}
+
+body .p-slidemenu {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+}
+
+body .p-slidemenu .p-menuitem-link {
+    padding: 0.714em 0.857em;
+    color: #333333;
+    font-weight: normal;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-slidemenu .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5em;
+}
+
+body .p-slidemenu .p-menuitem-link:hover {
+    background-color: #eaeaea;
+}
+
+body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
+    color: #333333;
+}
+
+body .p-slidemenu .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-slidemenu .p-menuitem-link.p-menuitem-link-active .p-menuitem-text {
+    color: #007ad9;
+}
+
+body .p-slidemenu .p-menuitem-link.p-menuitem-link-active .p-menuitem-icon {
+    color: #007ad9;
+}
+
+body .p-slidemenu .p-submenu-list {
+    padding: 0;
+    background-color: #ffffff;
+    border: 0 none;
+}
+
+body .p-slidemenu .p-menuitem {
+    margin: 0;
+}
+
+body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
+    right: 0.429em;
+}
+
+body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
+    background-color: #eaeaea;
+}
+
+body
+    .p-slidemenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-text {
+    color: #333333;
+}
+
+body
+    .p-slidemenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-icon,
+body
+    .p-slidemenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-submenu-icon {
+    color: #333333;
+}
+
+body .p-slidemenu .p-slidemenu-backward {
+    margin: 0;
+    padding: 0.571em 1em;
+    color: #333333;
+    background-color: #f4f4f4;
+    font-weight: 700;
+    border: 0 none;
+}
+
+body .p-slidemenu .p-slidemenu-backward:hover {
+    background-color: #dbdbdb;
+    color: #333333;
+}
+
+body .p-slidemenu .p-menu-separator {
+    border: 1px solid #c8c8c8;
+    border-width: 1px 0 0 0;
+}
+
+body .p-steps {
+    position: relative;
+}
+
+body .p-steps .p-steps-item {
+    background-color: transparent;
+    text-align: center;
+}
+
+body .p-steps .p-steps-item .p-menuitem-link {
+    display: inline-block;
+    text-align: center;
+    background-color: transparent;
+    overflow: hidden;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-steps .p-steps-item .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    display: inline-block;
+    color: #333333;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    position: relative;
+    top: 16px;
+    margin-bottom: 14px;
+    width: 28px;
+    height: 28px;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
+
+body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    display: block;
+    margin-top: 6px;
+    color: #848484;
+}
+
+body .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #007ad9;
+    color: #ffffff;
+}
+
+body .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #333333;
+}
+
+body .p-steps:before {
+    content: ' ';
+    border-top: 1px solid #c8c8c8;
+    width: 100%;
+    top: 45%;
+    left: 0;
+    display: block;
+    position: absolute;
+}
+
+body .p-tabmenu {
+    border: 0 none;
+}
+
+body .p-tabmenu .p-tabmenu-nav {
+    padding: 0;
+    background: transparent;
+    border-bottom: 1px solid #c8c8c8;
+}
+
+body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    position: static;
+    border: 1px solid #c8c8c8;
+    background-color: #f4f4f4;
+    margin-right: 2px;
+    margin-bottom: -1px;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    color: #333333;
+    padding: 0.571em 1em;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body
+    .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #333333;
+    margin-right: 0.5em;
+}
+
+body
+    .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem
+    .p-menuitem-link
+    .p-menuitem-icon {
+    color: #848484;
+    margin-right: 0.5em;
+}
+
+body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover {
+    background-color: #dbdbdb;
+    border: 1px solid #dbdbdb;
+}
+
+body
+    .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #333333;
+}
+
+body
+    .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover
+    .p-menuitem-link
+    .p-menuitem-icon {
+    color: #333333;
+}
+
+body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
+    background-color: #007ad9;
+    border: 1px solid #007ad9;
+}
+
+body
+    .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem.p-highlight
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #ffffff;
+}
+
+body
+    .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem.p-highlight
+    .p-menuitem-link
+    .p-menuitem-icon {
+    color: #ffffff;
+}
+
+body .p-tieredmenu {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+}
+
+body .p-tieredmenu .p-menuitem-link {
+    padding: 0.714em 0.857em;
+    color: #333333;
+    font-weight: normal;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-tieredmenu .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5em;
+}
+
+body .p-tieredmenu .p-menuitem-link:hover {
+    background-color: #eaeaea;
+}
+
+body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text {
+    color: #333333;
+}
+
+body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon {
+    color: #333333;
+}
+
+body .p-tieredmenu .p-menuitem-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: inset 0 0 0 0.2em $focus-shadow;
+    box-shadow: inset 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-tieredmenu
+    .p-menuitem-link.p-menuitem-link-active
+    .p-menuitem-text {
+    color: #007ad9;
+}
+
+body
+    .p-tieredmenu
+    .p-menuitem-link.p-menuitem-link-active
+    .p-menuitem-icon {
+    color: #007ad9;
+}
+
+body .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background-color: #ffffff;
+    border: 1px solid #c8c8c8;
+    -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+body .p-tieredmenu .p-menuitem {
+    margin: 0;
+}
+
+body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
+    right: 0.429em;
+}
+
+body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
+    background-color: #eaeaea;
+}
+
+body
+    .p-tieredmenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-text {
+    color: #333333;
+}
+
+body
+    .p-tieredmenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-menuitem-icon,
+body
+    .p-tieredmenu
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-link
+    .p-submenu-icon {
+    color: #333333;
+}
+
+body .p-tieredmenu .p-menu-separator {
+    border: 1px solid #c8c8c8;
+    border-width: 1px 0 0 0;
+}
+
+body .p-message {
+    padding: 0.429em;
+    margin: 0;
+}
+
+body .p-message.p-message-info {
+    background-color: #7fbcec;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-message.p-message-info .p-message-icon {
+    color: #212121;
+}
+
+body .p-message.p-message-success {
+    background-color: #b7d8b7;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-message.p-message-success .p-message-icon {
+    color: #212121;
+}
+
+body .p-message.p-message-warn {
+    background-color: #ffe399;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+}
+
+body .p-message.p-message-error {
+    background-color: #f8b7bd;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-message.p-message-error .p-message-icon {
+    color: #212121;
+}
+
+body .p-message .p-message-icon {
+    font-size: 1.25em;
+}
+
+body .p-message .p-message-text {
+    font-size: 1em;
+}
+
+body .p-messages {
+    padding: 1em;
+    margin: 1em 0;
+}
+
+body .p-messages.p-messages-info {
+    background-color: #7fbcec;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-messages.p-messages-info .p-messages-icon {
+    color: #212121;
+}
+
+body .p-messages.p-messages-info .p-messages-close {
+    color: #212121;
+}
+
+body .p-messages.p-messages-success {
+    background-color: #b7d8b7;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-messages.p-messages-success .p-messages-icon {
+    color: #212121;
+}
+
+body .p-messages.p-messages-success .p-messages-close {
+    color: #212121;
+}
+
+body .p-messages.p-messages-warn {
+    background-color: #ffe399;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-messages.p-messages-warn .p-messages-icon {
+    color: #212121;
+}
+
+body .p-messages.p-messages-warn .p-messages-close {
+    color: #212121;
+}
+
+body .p-messages.p-messages-error {
+    background-color: #f8b7bd;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-messages.p-messages-error .p-messages-icon {
+    color: #212121;
+}
+
+body .p-messages.p-messages-error .p-messages-close {
+    color: #212121;
+}
+
+body .p-messages .p-messages-close {
+    top: 0.25em;
+    right: 0.5em;
+    font-size: 1.5em;
+    overflow: hidden;
+    line-height: 1;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: box-shadow 0.2s;
+    -o-transition: box-shadow 0.2s;
+    -webkit-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+body .p-messages .p-messages-close:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body .p-messages .p-messages-icon {
+    font-size: 2em;
+}
+
+body .p-toast .p-toast-message {
+    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    margin: 0 0 1em 0;
+}
+
+body .p-toast .p-toast-message.p-toast-message-info {
+    background-color: #7fbcec;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+    color: #212121;
+}
+
+body .p-toast .p-toast-message.p-toast-message-success {
+    background-color: #b7d8b7;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+    color: #212121;
+}
+
+body .p-toast .p-toast-message.p-toast-message-warn {
+    background-color: #ffe399;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+    color: #212121;
+}
+
+body .p-toast .p-toast-message.p-toast-message-error {
+    background-color: #f8b7bd;
+    border: 0 none;
+    color: #212121;
+}
+
+body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+    color: #212121;
+}
+
+body .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+}
+
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+}
+
+body .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+}
+
+body .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon,
+body .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
+    font-size: 2rem;
+}
+
+body .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+}
+
+body .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+}
+
+body .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+}
+
+body .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #f4f4f4;
+    width: 1rem;
+    height: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+}
+
+body .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #eaeaea;
+}
+
+body
+    .p-galleria
+    .p-galleria-indicators
+    .p-galleria-indicator.p-highlight
+    button {
+    background: #007ad9;
+    color: #ffffff;
+}
+
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator,
+body .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
+    margin-right: 0.5em;
+}
+
+body .p-galleria.p-galleria-indicators-left .p-galleria-indicator,
+body .p-galleria.p-galleria-indicators-right .p-galleria-indicator {
+    margin-bottom: 0.5em;
+}
+
+body .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+body
+    .p-galleria.p-galleria-indicator-onitem
+    .p-galleria-indicators
+    .p-galleria-indicator
+    button {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+body
+    .p-galleria.p-galleria-indicator-onitem
+    .p-galleria-indicators
+    .p-galleria-indicator
+    button:hover {
+    background: rgba(255, 255, 255, 0.6);
+}
+
+body
+    .p-galleria.p-galleria-indicator-onitem
+    .p-galleria-indicators
+    .p-galleria-indicator.p-highlight
+    button {
+    background: #007ad9;
+    color: #ffffff;
+}
+
+body .p-galleria .p-galleria-thumbnail-container {
+    background: rgba(0, 0, 0, 0.9);
+    padding: 1rem 0.25rem;
+}
+
+body .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+    margin: 0.5em;
+    background-color: transparent;
+    color: #aeb6bf;
+    width: 2rem;
+    height: 2rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+}
+
+body
+    .p-galleria
+    .p-galleria-thumbnail-container
+    .p-galleria-thumbnail-prev:hover,
+body
+    .p-galleria
+    .p-galleria-thumbnail-container
+    .p-galleria-thumbnail-next:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #aeb6bf;
+}
+
+body .p-galleria-mask {
+    background: rgba(0, 0, 0, 0.9);
+}
+
+body .p-inplace {
+    min-height: 2.357em;
+}
+
+body .p-inplace .p-inplace-display {
+    padding: 0.429em;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-transition: background-color 0.2s, box-shadow 0.2s;
+    -o-transition: background-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+body .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background-color: #eaeaea;
+    color: #333333;
+}
+
+body .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    -webkit-box-shadow: 0 0 0 0.2em $focus-shadow;
+    -moz-box-shadow: 0 0 0 0.2em $focus-shadow;
+    box-shadow: 0 0 0 0.2em $focus-shadow;
+}
+
+body
+    .p-fluid
+    .p-inplace.p-inplace-closable
+    .p-inplace-content
+    > :first-child {
+    display: inline-block;
+    width: calc(100% - 2.357em);
+}
+
+body .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background-color: #eaeaea;
+}
+
+body .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #007ad9;
+}
+
+body .p-progressbar .p-progressbar-label {
+    margin-top: 0;
+    color: #333333;
+    line-height: 24px;
+}
+
+body .p-terminal {
+    background-color: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571em 1em;
+}
+
+body .p-terminal .p-terminal-command {
+    height: 16px;
+}
+
+/* Add your customizations of theme here */
+
+.p-button:enabled:focus {
+    @include box-shadow--focus-inset;
+}
+
+body .p-accordion-header-link {
+    display: inline;
+}
diff --git a/apps/react/src/styles/_reset.scss b/apps/react/src/styles/_reset.scss
new file mode 100644
index 000000000..03f3e7a10
--- /dev/null
+++ b/apps/react/src/styles/_reset.scss
@@ -0,0 +1,342 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0-modified | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+:focus,
+*:focus {
+    outline: 0 none !important;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+input[type='search'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+    resize: vertical;
+}
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    max-width: 100%;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+[hidden] {
+    display: none;
+}
+
+html {
+    font-size: 100%;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+a:focus {
+    // !important to reset styles in https://aeroflot.ru/frontend/static/css/afl-frontend-loader.bundle.css
+    outline: 0 none !important;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+img {
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
+
+figure {
+    margin: 0;
+}
+
+form {
+    margin: 0;
+}
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+    border: 0;
+    padding: 0;
+    white-space: normal;
+    *margin-left: -7px;
+}
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%;
+    margin: 0;
+    vertical-align: baseline;
+    *vertical-align: middle;
+}
+
+body,
+button,
+input {
+    line-height: normal;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+    -webkit-appearance: button;
+    cursor: pointer;
+    *overflow: visible;
+}
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+    box-sizing: border-box;
+    padding: 0;
+    *height: 13px;
+    *width: 13px;
+}
+
+input[type='search'] {
+    -webkit-appearance: textfield;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+img {
+    vertical-align: middle;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+.chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+*,
+*:before,
+*:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.wrapper-header {
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+
+    &:before,
+    &:after,
+    *,
+    *:before,
+    *:after {
+        -moz-box-sizing: content-box;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+    }
+}
diff --git a/apps/react/src/styles/_screen.scss b/apps/react/src/styles/_screen.scss
new file mode 100644
index 000000000..ad5ba67b2
--- /dev/null
+++ b/apps/react/src/styles/_screen.scss
@@ -0,0 +1,55 @@
+@use './variables' as variables;
+
+
+// $media-breakpoint-desktop: 1300px;
+// $media-breakpoint-tablet: 1050px;
+// $media-breakpoint-tablet-2: 768px;
+// $media-breakpoint-mobile: 640px;
+
+@mixin mobile() {
+    @media (max-width: variables.$media-breakpoint-mobile) {
+        @content();
+    }
+}
+
+@mixin desktop() {
+    @media (min-width: variables.$media-breakpoint-desktop-min) {
+        @content();
+    }
+}
+
+@mixin gt-mobile() {
+    @media (min-width: variables.$media-breakpoint-small-tablet-min) {
+        @content();
+    }
+}
+
+@mixin smTablet() {
+    @media (max-width: variables.$media-breakpoint-tablet) {
+        @content();
+    }
+}
+
+@mixin tablet() {
+    @media (min-width: variables.$media-breakpoint-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
+        @content();
+    }
+}
+
+@mixin tablet-small() {
+    @media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-small-tablet) {
+        @content();
+    }
+}
+
+@mixin tablets() {
+    @media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
+        @content();
+    }
+}
+
+@mixin print() {
+    @media print {
+        @content();
+    }
+}
diff --git a/apps/react/src/styles/_scrollbar.scss b/apps/react/src/styles/_scrollbar.scss
new file mode 100644
index 000000000..a767d703e
--- /dev/null
+++ b/apps/react/src/styles/_scrollbar.scss
@@ -0,0 +1,38 @@
+.afl-scrollbar,
+.ui-autocomplete-panel {
+    /* width */
+    &::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: none;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        border: 2px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+        border-radius: 1000px;
+        background-color: $blue-light;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        border: 2px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+        border-radius: 1000px;
+        background-color: $blue--hover;
+    }
+
+    .wrapper::-webkit-scrollbar-track-piece:end {
+        background: transparent;
+        margin-bottom: 10px;
+    }
+
+    .wrapper::-webkit-scrollbar-track-piece:start {
+        background: transparent;
+        margin-top: 10px;
+    }
+}
diff --git a/apps/react/src/styles/_shadows.scss b/apps/react/src/styles/_shadows.scss
new file mode 100644
index 000000000..ecc30af38
--- /dev/null
+++ b/apps/react/src/styles/_shadows.scss
@@ -0,0 +1,20 @@
+@use './colors' as colors;
+@use './variables' as variables;
+
+@mixin box-shadow-small {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+@mixin box-shadow-big {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+@mixin box-shadow--focus-inset {
+    box-shadow: inset 0 0 0 0.2em $focus-shadow !important;
+}
+
+@mixin control-border-shadow {
+    border: 1px solid colors.$border-input;
+    border-radius: variables.$border-radius;
+    box-shadow: 0 2px 2px transparentize($color: #b1b1b1, $amount: 0.84);
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/_tooltips.scss b/apps/react/src/styles/_tooltips.scss
new file mode 100644
index 000000000..e4c5753c9
--- /dev/null
+++ b/apps/react/src/styles/_tooltips.scss
@@ -0,0 +1,24 @@
+.afl-tooltip {
+    .p-tooltip-text {
+        @include font-small();
+        color: $gray !important;
+        background-color: $white !important;
+        line-height: 1.5;
+    }
+
+    .p-tooltip-arrow {
+        border-top-color: $white !important;
+    }
+
+    @include smTablet {
+        display: none !important;
+    }
+}
+
+.tooltip--one-line {
+    max-width: 100% !important;
+    .p-tooltip-text {
+        @include font-overflow();
+        white-space: nowrap !important;
+    }
+}
diff --git a/apps/react/src/styles/_variables.scss b/apps/react/src/styles/_variables.scss
new file mode 100644
index 000000000..41dfcbaf9
--- /dev/null
+++ b/apps/react/src/styles/_variables.scss
@@ -0,0 +1,68 @@
+$border-radius: 3px;
+
+/* Paddings and Margins */
+$space-s: 5px;
+$space-s2: 8px;
+$space-m: 10px;
+$space-m2: 12px;
+$space-l: 15px;
+$space-xl: 20px;
+$space-xxl: 40px;
+$space-xxxl: 80px;
+
+$space-top-site: 32px;
+
+// SITE WIDTH
+$site-width: 1440px;
+$left-aside-width: 285px;
+$left-aside-width-desktop: 23.875%;
+$column-spacing: 1.5%;
+
+// MEDIA
+// When changing the size of breakpoints, you also need to change in the file screen-size.service.ts
+$media-breakpoint-desktop: 1300px;
+$media-breakpoint-desktop-min: 1051px;
+$media-breakpoint-tablet: 1050px;
+$media-breakpoint-tablet-min: 769px;
+$media-breakpoint-small-tablet: 768px;
+$media-breakpoint-small-tablet-min: 641px;
+$media-breakpoint-mobile: 640px;
+
+//BUTTON
+$button-height: 48px;
+$button-height--mobile: 38px;
+$button-sort-height: 12px;
+$small-button-height: 35px;
+$medium-button-height: 40px;
+$standard-button-height: 48px;
+$big-button-height: 56px;
+$slider-handle-size: 16px;
+$buttons-width: 32px;
+
+// MEDIA
+$desktopHeaderHeight: 103px;
+$tabletHeaderHeight: 103px;
+$mobileHeaderHeight: 103px;
+
+// FLIGHT
+$text-margin-bottom: 2px;
+$flight-height: 40px;
+$width-flight-number: 60px;
+$width-background-company: 120px;
+$width-dep-arr: 40%;
+$width-status: 20%;
+$width-flight-time: 75px;
+$width-flight-day-change: 25px;
+$button-expand-size: 32px;
+$label-shift-width: 20px;
+$label-shift-height: 18px;
+$status-indicator-size: 8px;
+$status-width: 100px;
+$flight-details-fit: 2%;
+//FLIGHT-DETAILS
+$margin-details-title: 20%;
+
+// FILTERS
+$label-margin-bottom: 10px;
+
+$scroll-width: 6px;
diff --git a/apps/react/src/styles/components/flights-map/flights-map-body.component.scss b/apps/react/src/styles/components/flights-map/flights-map-body.component.scss
new file mode 100644
index 000000000..918209c98
--- /dev/null
+++ b/apps/react/src/styles/components/flights-map/flights-map-body.component.scss
@@ -0,0 +1,12 @@
+.map-wrapper {
+  position: relative;
+  height: 800px;
+  width: 100%;
+}
+
+.map {
+  height: 100%;
+  width: 100%;
+}
+
+
diff --git a/apps/react/src/styles/components/flights-map/flights-map-filter.component.scss b/apps/react/src/styles/components/flights-map/flights-map-filter.component.scss
new file mode 100644
index 000000000..d2c9c2598
--- /dev/null
+++ b/apps/react/src/styles/components/flights-map/flights-map-filter.component.scss
@@ -0,0 +1,22 @@
+.flights-map-filter-header{
+    padding: 10px 0;
+}
+
+.flights-map-filter-info{
+    padding: 10px 0;
+}
+
+.mt2{
+    margin-top: 20px;
+}
+
+// .svg--change-city {
+//     transform: rotate(180deg) !important;
+// }
+
+// .change-container {
+//     justify-content: right !important;
+// }
+
+
+
diff --git a/apps/react/src/styles/components/flights-map/flights-map-meta-tags.component.scss b/apps/react/src/styles/components/flights-map/flights-map-meta-tags.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/components/flights-map/flights-map-start-page-title.component.scss b/apps/react/src/styles/components/flights-map/flights-map-start-page-title.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/components/flights-map/flights-map-start-page.component.scss b/apps/react/src/styles/components/flights-map/flights-map-start-page.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/components/flights-map/loader-sheet.component.scss b/apps/react/src/styles/components/flights-map/loader-sheet.component.scss
new file mode 100644
index 000000000..aed94d618
--- /dev/null
+++ b/apps/react/src/styles/components/flights-map/loader-sheet.component.scss
@@ -0,0 +1,67 @@
+:host {
+  --loader-color: #2b62ab;
+}
+
+.loading-sheet {
+  position: absolute;
+  inset: 0;                       // top:0; right:0; bottom:0; left:0;
+  background: rgba(180, 180, 180, 0.302); // затемнение карты
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;                  // поверх карты
+  pointer-events: all;            // блокирует клики по карте
+}
+
+.page-loader__loader {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  color: var(--loader-color); // для svg
+
+  .loader-circle {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--loader-color);
+    transition-duration: 0.3s;
+  }
+
+  .loader-line-mask {
+    position: absolute;
+    inset: 0;
+    width: 30px;
+    height: 60px;
+    margin: 0;
+    overflow: hidden;
+    transform-origin: 30px 30px;
+    animation: rotate 1.2s infinite linear;
+
+    .loader-line {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/flights-map/no-directions-sheet.component.scss b/apps/react/src/styles/components/flights-map/no-directions-sheet.component.scss
new file mode 100644
index 000000000..e8e24d983
--- /dev/null
+++ b/apps/react/src/styles/components/flights-map/no-directions-sheet.component.scss
@@ -0,0 +1,29 @@
+.no-directions-sheet {
+  position: absolute;
+  inset: 0;
+  background: rgba(180, 180, 180, 0.302);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  pointer-events: all;
+  padding: 16px; // чтобы не прилипало к краям на мобилках
+}
+
+.no-directions-card {
+  background: #fff;
+  padding: 16px 18px;
+  border-radius: 5px;
+  max-width: 520px;
+  width: min(520px, 100%);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.no-directions-card p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: rgba(0, 0, 0, 0.78);
+  text-align: center;
+}
diff --git a/apps/react/src/styles/components/online-board/online-board-details.component.scss b/apps/react/src/styles/components/online-board/online-board-details.component.scss
new file mode 100644
index 000000000..4da7380aa
--- /dev/null
+++ b/apps/react/src/styles/components/online-board/online-board-details.component.scss
@@ -0,0 +1,28 @@
+@use 'src/styles/variables' as *;
+@use 'src/styles/screen';
+
+:host {
+  ::ng-deep .flight-props-caption {
+    width: 30%;
+  }
+
+  // todo: remove after removing all usages of flight-props component
+  ::ng-deep .flight-details-section__caption {
+    width: calc(30% - #{$space-xl}) !important;
+  }
+
+  online-board-flights-mini-list {
+    @include screen.smTablet {
+      display: none;
+    }
+  }
+
+  .board-details-day-selector {
+    @include screen.mobile {
+      display: flex;
+      flex-direction: column;
+
+      padding: $space-xl;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/online-board/online-board-search.component.scss b/apps/react/src/styles/components/online-board/online-board-search.component.scss
new file mode 100644
index 000000000..f97f9adb1
--- /dev/null
+++ b/apps/react/src/styles/components/online-board/online-board-search.component.scss
@@ -0,0 +1,11 @@
+@use 'src/styles/variables' as vars;
+@use 'src/styles/screen';
+
+.board-day-selector {
+  @include screen.mobile {
+    display: flex;
+    flex-direction: column;
+
+    padding: vars.$space-xl;
+  }
+}
diff --git a/apps/react/src/styles/components/popular-requests/popular-request.component.scss b/apps/react/src/styles/components/popular-requests/popular-request.component.scss
new file mode 100644
index 000000000..d7b262208
--- /dev/null
+++ b/apps/react/src/styles/components/popular-requests/popular-request.component.scss
@@ -0,0 +1,8 @@
+@use "src/styles/variables" as vars;
+@use "src/styles/fonts";
+@use "src/styles/screen";
+
+.popular-request {
+  font-size: fonts.$font-size-m;
+  padding-bottom: vars.$space-xl;
+}
diff --git a/apps/react/src/styles/components/popular-requests/popular-requests.component.scss b/apps/react/src/styles/components/popular-requests/popular-requests.component.scss
new file mode 100644
index 000000000..2ccbc5f6a
--- /dev/null
+++ b/apps/react/src/styles/components/popular-requests/popular-requests.component.scss
@@ -0,0 +1,37 @@
+@use "src/styles/colors";
+@use "src/styles/variables" as vars;
+@use "src/styles/fonts";
+@use "src/styles/screen";
+
+.popular-requests {
+  background-color: colors.$blue-extra-light;
+  border-top: 1px solid colors.$border;
+  padding: 50px 50px 30px;
+  border-radius: 0 0 vars.$border-radius vars.$border-radius;
+
+  @include screen.mobile {
+    padding: 20px !important;
+    padding-bottom: 10px !important;
+  }
+
+  &__title {
+    font-size: 20px;
+    margin: 0;
+    padding-bottom: 50px;
+    font-weight: fonts.$font-regular;
+
+    @include screen.mobile {
+      padding-bottom: 20px !important;
+    }
+  }
+
+  &__item {
+    display: inline-flex;
+    flex-wrap: wrap;
+    width: 50%;
+
+    @include screen.mobile {
+      width: 100% !important;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/popular-requests/request-info.component.scss b/apps/react/src/styles/components/popular-requests/request-info.component.scss
new file mode 100644
index 000000000..fe0f5071b
--- /dev/null
+++ b/apps/react/src/styles/components/popular-requests/request-info.component.scss
@@ -0,0 +1,6 @@
+@use 'src/styles/colors';
+
+.request-info {
+  color: colors.$blue-link;
+  cursor: pointer;
+}
diff --git a/apps/react/src/styles/components/schedule/bottom-description.component.scss b/apps/react/src/styles/components/schedule/bottom-description.component.scss
new file mode 100644
index 000000000..1af0dedbe
--- /dev/null
+++ b/apps/react/src/styles/components/schedule/bottom-description.component.scss
@@ -0,0 +1,30 @@
+@use "src/styles/colors";
+@use "src/styles/variables" as vars;
+@use "src/styles/fonts";
+@use "src/styles/screen";
+
+.bottom-description-frame{
+    margin-top: 20px;   
+}
+.bottom-description-container{
+    padding: 40px;
+}
+
+.bottom-description-title{
+    font-size: 20px;
+    font-weight: fonts.$font-regular;
+}
+
+.bottom-description-text{
+    margin-top: 20px;
+    line-height: 20px;
+}
+
+.bottom-description-text p {
+  margin: 0 0 8px;
+}
+
+.bottom-description-text p:last-child {
+  margin-bottom: 0;
+}
+
diff --git a/apps/react/src/styles/components/schedule/schedule-direction-switch.component.scss b/apps/react/src/styles/components/schedule/schedule-direction-switch.component.scss
new file mode 100644
index 000000000..ab1fc3e9d
--- /dev/null
+++ b/apps/react/src/styles/components/schedule/schedule-direction-switch.component.scss
@@ -0,0 +1,47 @@
+@use './src/styles/framework' as *;
+
+.schedule-direction-switch {
+  display: flex;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 130px;
+    height: 40px;
+
+    background-color: $white;
+    border-radius: 0;
+
+    line-height: 16px !important;
+    font-weight: 500 !important;
+    border: 1px solid $extra-blue;
+
+    @include font-small($extra-blue);
+  }
+
+  &__button--direct {
+    border-right: none;
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+
+  &__button--return {
+    border-left: none;
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  &__button--active {
+    background-color: $extra-blue;
+
+    color: $white;
+  }
+
+  &__icon {
+    margin-right: 5px;
+    width: 19px;
+    height: 19px;
+  }
+}
diff --git a/apps/react/src/styles/components/schedule/schedule-filter.component.scss b/apps/react/src/styles/components/schedule/schedule-filter.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/components/schedule/schedule-flight-details-view.component.scss b/apps/react/src/styles/components/schedule/schedule-flight-details-view.component.scss
new file mode 100644
index 000000000..86ac5c508
--- /dev/null
+++ b/apps/react/src/styles/components/schedule/schedule-flight-details-view.component.scss
@@ -0,0 +1,30 @@
+@use './src/styles/variables' as *;
+@use './src/styles/screen';
+
+:host {
+  ::ng-deep .flight-props-caption {
+    width: 30%;
+  }
+
+  // todo: remove after removing all usages of flight-props component
+  ::ng-deep .flight-details-section__caption {
+    @include screen.gt-mobile {
+      width: calc(30% - #{$space-xl}) !important;
+    }
+  }
+
+  schedule-flights-mini-list {
+    @include screen.smTablet {
+      display: none;
+    }
+  }
+
+  .schedule-day-selector {
+    @include screen.mobile {
+      display: flex;
+      flex-direction: column;
+
+      padding: $space-xl;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/schedule/schedule-flights-mini-list.component.scss b/apps/react/src/styles/components/schedule/schedule-flights-mini-list.component.scss
new file mode 100644
index 000000000..c6bf95c4e
--- /dev/null
+++ b/apps/react/src/styles/components/schedule/schedule-flights-mini-list.component.scss
@@ -0,0 +1,7 @@
+@use './src/styles/colors' as *;
+
+:host {
+  & > section:last-child {
+    background-color: $blue-extra-light;
+  }
+}
diff --git a/apps/react/src/styles/components/schedule/schedule-search-view.component.scss b/apps/react/src/styles/components/schedule/schedule-search-view.component.scss
new file mode 100644
index 000000000..79dc59b8a
--- /dev/null
+++ b/apps/react/src/styles/components/schedule/schedule-search-view.component.scss
@@ -0,0 +1,55 @@
+@use './src/styles/variables' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/colors' as *;
+
+:host {
+  .schedule-home-page-header {
+    display: flex;
+
+    schedule-direction-switch {
+      @include gt-mobile() {
+        width: 50%;
+      }
+
+      @include mobile() {
+        flex: 1;
+      }
+    }
+  }
+
+  .schedule-controls {
+    ::ng-deep .card {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .schedule-home-page-header {
+      margin: $space-xl;
+    }
+
+    .schedule-home-page-header-border {
+      border-bottom: 1px solid $border;
+    }
+
+    @include mobile {
+      .schedule-home-page-header {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .schedule-home-page-header-border {
+        display: none;
+      }
+
+      ::ng-deep .card {
+        padding: $space-xl $space-xl 0;
+      }
+
+      &__tabs {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/shared/city-autocomplete-item.component.scss b/apps/react/src/styles/components/shared/city-autocomplete-item.component.scss
new file mode 100644
index 000000000..a2b688a62
--- /dev/null
+++ b/apps/react/src/styles/components/shared/city-autocomplete-item.component.scss
@@ -0,0 +1,33 @@
+@use "src/styles/framework" as *;
+
+.city-autocomplete__item {
+  white-space: nowrap;
+  height: $button-height;
+  border-bottom: 1.5px solid $border-input !important;
+  display: flex;
+  align-items: center;
+  padding-left: 0.429em;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--airport {
+    padding-left: $space-xl;
+  }
+
+  .city {
+    white-space: nowrap;
+    font-weight: $font-bold;
+  }
+
+  .country {
+    white-space: nowrap;
+    color: $gray;
+  }
+
+  .airport {
+    white-space: nowrap;
+    color: $gray;
+  }
+}
diff --git a/apps/react/src/styles/components/shared/city-autocomplete.component.scss b/apps/react/src/styles/components/shared/city-autocomplete.component.scss
new file mode 100644
index 000000000..8b603a0a9
--- /dev/null
+++ b/apps/react/src/styles/components/shared/city-autocomplete.component.scss
@@ -0,0 +1,60 @@
+@use "src/styles/framework" as *;
+
+.city-autocomplete {
+  display: flex;
+  flex-direction: column;
+
+  &__labels-container {
+    justify-content: space-between;
+    margin-bottom: $space-m;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+  }
+
+  &__label {
+    @include font-overflow();
+    @include font-small($gray);
+  }
+
+  &__input {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    align-items: center;
+    width: 100%;
+
+    @include control-border-shadow();
+  }
+
+  &__search-button {
+    width: $buttons-width !important;
+    min-width: $buttons-width;
+    border-radius: 0 $border-radius $border-radius 0 !important;
+    border: none !important;
+    border-left: 1px solid white !important;
+    background-color: transparent !important;
+    height: $standard-button-height - 2px;
+
+    &:hover {
+      background-color: $white !important;
+      border-left-color: $border-input !important;
+    }
+  }
+
+  &__input--has-value {
+    .button-clear {
+      display: block !important;
+    }
+
+    .city-autocomplete__search-button {
+      border-left: 1px solid $border-input !important;
+    }
+  }
+
+  &__input--has-error {
+    border-color: $red;
+  }
+}
+
diff --git a/apps/react/src/styles/components/shared/city-select.component.scss b/apps/react/src/styles/components/shared/city-select.component.scss
new file mode 100644
index 000000000..855f15112
--- /dev/null
+++ b/apps/react/src/styles/components/shared/city-select.component.scss
@@ -0,0 +1,136 @@
+@use 'sass:math';
+@use "src/styles/framework" as *;
+
+.city-autocomplete-popup {
+  position: absolute;
+  width: 630px;
+  background: #ffffff;
+  border-radius: $border-radius;
+  opacity: 1;
+  @include control-border-shadow();
+  z-index: 10000;
+  margin-top: $space-s;
+
+  .tabs {
+    display: flex;
+    align-items: stretch;
+
+    .tab-button {
+      height: auto;
+      flex-grow: 1;
+      border-radius: 0;
+      background-color: $blue-extra-light;
+      border: none;
+      border-right: 1px solid $border;
+      border-bottom: 1px solid $border;
+
+      &:hover {
+        background-color: $blue-extra-light;
+        border-right: 1px solid $border;
+        border-bottom: 1px solid $border;
+
+        .p-button-label {
+          color: $text-color;
+        }
+      }
+
+      &.active {
+        background-color: $white;
+        border-bottom: 1px solid $white;
+
+        .p-button-label {
+          color: $text-color;
+        }
+      }
+
+      &:first-child {
+        border-radius: $border-radius 0 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 $border-radius 0 0;
+        border-right: none;
+      }
+
+      .p-button-label {
+        color: $blue;
+        font-weight: $font-bold;
+        font-size: 14px;
+        padding: 10px !important;
+      }
+    }
+  }
+
+  .city-autocomplete-popup-footer {
+    width: 100%;
+    background: #f3f9ff;
+
+    .gps-contaner {
+      width: 100%;
+      padding: $space-xl;
+      border-top: 1px solid $border;
+
+      .gps-button {
+        height: $standard-button-height;
+        width: 100%;
+        background-color: $blue-light;
+
+        .p-button-label {
+          font-size: $font-size-m;
+        }
+      }
+
+      .gps-label-help {
+        margin-top: $space-l;
+        @include font-small($gray);
+      }
+    }
+  }
+
+  .cell {
+    &.contry {
+      align-self: flex-start;
+      color: $text-color;
+      font-weight: $font-bold;
+      padding: 7.5px $space-m 7.5px 7.5px;
+      width: 30%;
+    }
+
+    &.city {
+      flex: 1;
+      padding-right: $space-m;
+      @include font-overflow();
+
+      .city--item {
+        width: auto;
+        max-width: 100%;
+        cursor: pointer;
+        @include font-overflow();
+        display: inline-block;
+        border-radius: $border-radius;
+        padding: math.div($space-l, 2) math.div($space-l, 2);
+        transition-duration: 0.1s;
+
+        &:hover {
+          background-color: $blue-extra-light;
+        }
+      }
+
+      .airports-column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: $space-m;
+
+        .city--item {
+          color: $light-gray;
+          margin-right: $space-m;
+        }
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/shared/feedback-button.component.scss b/apps/react/src/styles/components/shared/feedback-button.component.scss
new file mode 100644
index 000000000..9b6268aa1
--- /dev/null
+++ b/apps/react/src/styles/components/shared/feedback-button.component.scss
@@ -0,0 +1,21 @@
+@use 'src/styles/framework' as *;
+
+.feedback-button {
+  box-sizing: border-box;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 3px 10px;
+  height: 25px;
+  min-height: 25px;
+
+  border-radius: 3px;
+  border: none;
+  background-color: $orange--hover;
+  color: $white;
+
+  font-size: $font-size-s;
+  line-height: 1.6;
+}
diff --git a/apps/react/src/styles/components/shared/feedback-form.component.scss b/apps/react/src/styles/components/shared/feedback-form.component.scss
new file mode 100644
index 000000000..15ec83380
--- /dev/null
+++ b/apps/react/src/styles/components/shared/feedback-form.component.scss
@@ -0,0 +1,58 @@
+@use "src/styles/framework" as *;
+
+.feedback-form {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+
+  z-index: 1009;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 24px;
+
+  background-color: $dark-blue-opacity;
+
+  @include mobile() {
+    padding: $space-m;
+  }
+
+  &__iframe {
+    width: 640px;
+    height: 480px;
+
+    @include mobile() {
+      height: 100%;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+
+    display: none;
+    width: 40px;
+    height: 40px;
+
+    background-color: transparent;
+
+    border: none;
+    color: white;
+
+    @include mobile() {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    svg {
+      width: 28px;
+      height: 28px;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/shared/page-layout.component.scss b/apps/react/src/styles/components/shared/page-layout.component.scss
new file mode 100644
index 000000000..584b8ca2c
--- /dev/null
+++ b/apps/react/src/styles/components/shared/page-layout.component.scss
@@ -0,0 +1,164 @@
+@use "src/styles/framework" as *;
+@use "src/styles/positioning";
+
+.page-layout {
+  &__row {
+    position: relative;
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
+
+    margin: 0 auto;
+    width: 100%;
+    max-width: $site-width;
+
+    @include print {
+      width: 100% !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+    }
+
+    @include smTablet {
+      flex-flow: column wrap;
+    }
+  }
+
+  &__column-left {
+    position: sticky;
+    top: 20px;
+    bottom: 20px;
+    z-index: 1001;
+
+    flex-shrink: 0;
+    margin-left: 0;
+    margin-right: 1.5%;
+    width: $left-aside-width;
+
+    @media (max-width: $media-breakpoint-desktop) {
+      width: $left-aside-width-desktop;
+    }
+
+    @media (max-width: $media-breakpoint-tablet) {
+      position: relative;
+      top: 0;
+
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+
+  &__column-right {
+    position: relative;
+    width: calc(100% - #{$left-aside-width} - #{$column-spacing});
+
+    @include print {
+      width: 100% !important;
+      margin-top: 20px !important;
+    }
+
+    @media (max-width: $media-breakpoint-desktop) {
+      width: calc(100% - #{$left-aside-width-desktop} - 1.5%);
+    }
+
+    @media (max-width: $media-breakpoint-tablet) {
+      width: 100%;
+    }
+  }
+
+  &__header-right {
+    margin-top: auto;
+    display: flex;
+    justify-content: space-between;
+
+    @include smTablet {
+      flex-direction: column;
+      order: 1;
+    }
+  }
+
+  &__header-left {
+    margin-top: auto;
+
+    @include smTablet {
+      order: 2;
+    }
+  }
+
+  &__title {
+    width: calc(100% - 120px);
+  }
+
+  &__title--fullwidth {
+    width: 100%;
+  }
+
+  &__header {
+    position: relative;
+    z-index: 1001;
+
+    padding-top: $space-top-site;
+    margin-bottom: $space-xl;
+
+    @include mobile {
+      margin-bottom: $space-m;
+    }
+  }
+
+  &__content &__column-left{
+    @include smTablet {
+      margin-bottom: $space-xl;
+    }
+
+    @include mobile {
+      margin-bottom: $space-m;
+    }
+  }
+
+  &__content &__column-left:empty {
+    @include smTablet {
+      margin-bottom: 0;
+    }
+  }
+
+  &__feedback-button {
+    margin-top: auto;
+    flex-shrink: 0;
+
+    @include smTablet {
+      margin-bottom: $space-m;
+    }
+
+    @include print {
+      display: none;
+    }
+  }
+
+  &__scroll-overlay {
+    @include mobile {
+      display: none;
+    }
+
+    position: fixed;
+    z-index: positioning.$sticky-elements-z-index - 1;
+    top: 0;
+    left: 0;
+
+    width: calc(100% - 20px); // set width less than viewport to prevent scroll clipping on windows
+    height: positioning.$sticky-threshold + 5px; // increase height to prevent content revealing when sticky element corners rounded
+
+    background-color: $blue-dark !important;
+    background-image: url('~src/assets/img/background.jpg');
+    background-repeat: no-repeat;
+    background-size: 100vw;
+  }
+
+  &__sticky-content {
+    @include gt-mobile {
+      position: sticky;
+      z-index: positioning.$sticky-elements-z-index;
+      top: positioning.$sticky-threshold;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/shared/scroll-up-button.component.scss b/apps/react/src/styles/components/shared/scroll-up-button.component.scss
new file mode 100644
index 000000000..10b1e0350
--- /dev/null
+++ b/apps/react/src/styles/components/shared/scroll-up-button.component.scss
@@ -0,0 +1,45 @@
+@use "./src/styles/colors";
+@use "./src/styles/screen";
+
+.scroll-up {
+  display: none;
+
+  &--visible {
+    display: block;
+    position: fixed;
+    right: 30px;
+    bottom: 80px;
+    z-index: 2000;
+  }
+
+  &__button {
+    position: static;
+    margin: 0;
+
+    width: 40px;
+    height: 40px;
+
+    background-color: colors.$extra-blue;
+    background-image: url("~src/assets/img/arrow-up.svg");
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    border-radius: 50%;
+    border: 1px solid colors.$blue-extra-light;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+}
+
+#observer-target {
+  position: absolute;
+
+  @include screen.gt-mobile {
+    top: -20px;
+
+    width: 10px;
+    height: 70px;
+    
+    visibility: hidden;
+  }
+}
diff --git a/apps/react/src/styles/components/shared/search-history.component.scss b/apps/react/src/styles/components/shared/search-history.component.scss
new file mode 100644
index 000000000..a9538cd15
--- /dev/null
+++ b/apps/react/src/styles/components/shared/search-history.component.scss
@@ -0,0 +1,21 @@
+@use "src/styles/variables" as *;
+@use "src/styles/screen" as *;
+
+.search-history {
+  margin: $space-xl 0;
+
+  @include tablets() {
+    margin-bottom: 0;
+  }
+
+  @include mobile() {
+    margin-top: $space-m;
+    margin-bottom: 0;
+  }
+
+  &__content {
+    max-height: 600px;
+
+    overflow-y: scroll;
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/additional-services-icon.component.scss b/apps/react/src/styles/components/toolkit/additional-services-icon.component.scss
new file mode 100644
index 000000000..d5a02df61
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/additional-services-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.additional-services-svg {
+  width: 48px;
+  height: 48px;
+}
diff --git a/apps/react/src/styles/components/toolkit/alarm-clock-icon.component.scss b/apps/react/src/styles/components/toolkit/alarm-clock-icon.component.scss
new file mode 100644
index 000000000..c049820fb
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/alarm-clock-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.alarm-clock-svg {
+  width: 19px;
+  height: 19px;
+}
diff --git a/apps/react/src/styles/components/toolkit/arrow-down-icon.component.scss b/apps/react/src/styles/components/toolkit/arrow-down-icon.component.scss
new file mode 100644
index 000000000..bf5af8c42
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/arrow-down-icon.component.scss
@@ -0,0 +1,25 @@
+@use 'src/styles/colors' as *;
+
+.arrow-svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 24px;
+    height: 24px;
+
+    transform: rotate(180deg);
+    transform-origin: center;
+
+    &--blue {
+        fill: $blue;
+    }
+
+    &--gray {
+        opacity: 0.5;
+    }
+
+    &--rotated {
+        transform: rotate(0deg);
+    }
+}
diff --git a/apps/react/src/styles/components/toolkit/card.component.scss b/apps/react/src/styles/components/toolkit/card.component.scss
new file mode 100644
index 000000000..1a189d76a
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/card.component.scss
@@ -0,0 +1,21 @@
+@use 'src/styles/colors' as *;
+@use 'src/styles/variables' as *;
+@use 'src/styles/shadows' as *;
+
+.card {
+  background-color: $white;
+
+  @include box-shadow-small;
+
+  &--rounded {
+    border-radius: $border-radius;
+  }
+
+  &--rounded-top {
+    border-radius: $border-radius $border-radius 0 0;
+  }
+
+  &--rounded-bottom {
+    border-radius: 0 0 $border-radius $border-radius;
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/change-icon.component.scss b/apps/react/src/styles/components/toolkit/change-icon.component.scss
new file mode 100644
index 000000000..1f17b3d98
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/change-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.change-route-svg {
+  width: 19px;
+  height: 12px;
+}
diff --git a/apps/react/src/styles/components/toolkit/chat-bot.component.scss b/apps/react/src/styles/components/toolkit/chat-bot.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/components/toolkit/date-select.component.scss b/apps/react/src/styles/components/toolkit/date-select.component.scss
new file mode 100644
index 000000000..799ca15ed
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/date-select.component.scss
@@ -0,0 +1,35 @@
+@use 'src/styles/variables' as vars;
+@use 'src/styles/layouts';
+@use 'src/styles/mixins';
+@use 'src/styles/fonts';
+@use 'src/styles/colors';
+
+.select {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  @include layouts.v-spacing(vars.$space-s2);
+
+  ::ng-deep .p-dropdown {
+    width: 100%;
+    overflow: visible;
+
+    @include mixins.input();
+
+    .p-dropdown-label {
+      font-size: fonts.$font-size-l;
+      font-weight: fonts.$font-regular;
+      color: colors.$text-color;
+      padding: 0;
+    }
+
+    .p-dropdown-trigger {
+      background-image: url('~src/assets/img/arr-down.svg');
+      background-repeat: no-repeat;
+      background-size: 9px 4px;
+      background-position: center center;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/date-tabs.component.scss b/apps/react/src/styles/components/toolkit/date-tabs.component.scss
new file mode 100644
index 000000000..28b9751a1
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/date-tabs.component.scss
@@ -0,0 +1,103 @@
+@use "src/styles/variables" as vars;
+@use "src/styles/colors";
+@use "src/styles/screen";
+
+@mixin prevIcon($url) {
+  display: flex !important;
+
+  &::before {
+    content: "";
+
+    width: 24px;
+    height: 24px;
+
+    background-image: $url;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  &::after {
+    content: "";
+
+    position: absolute;
+
+    width: 25px;
+    height: 48px;
+
+    opacity: 0.5;
+  }
+}
+
+.date-tabs {
+  @include screen.mobile {
+    display: none;
+  }
+
+  ::ng-deep .p-carousel-content {
+    padding: 0;
+  }
+
+  ::ng-deep .p-carousel-indicators {
+    display: none;
+  }
+
+  ::ng-deep .p-carousel-next,
+  ::ng-deep .p-carousel-prev {
+    margin: 0 !important;
+    width: 50px;
+    max-height: 48px;
+
+    border: none !important;
+    opacity: 1 !important;
+  }
+
+  ::ng-deep .p-carousel-next {
+    border-radius: 0 vars.$border-radius 0 0 !important;
+
+    &.p-state-disabled {
+      .p-carousel-next-icon {
+        &::before {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  ::ng-deep .p-carousel-prev {
+    border-radius: vars.$border-radius 0 0 0 !important;
+
+    &.p-state-disabled {
+      .p-carousel-prev-icon {
+        &::before {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  ::ng-deep .p-carousel-prev-icon.pi-chevron-left {
+    @include prevIcon(url("~src/assets/img/arrow-left.svg"));
+
+    &::after {
+      right: -25px;
+      background: transparent linear-gradient(270deg, transparent 0%, colors.$border 100%) 0 0 no-repeat padding-box;
+      z-index: 1000;
+    }
+  }
+
+  ::ng-deep .p-carousel-next-icon.pi-chevron-right,
+  ::ng-deep .p-carousel-prev-icon.pi-chevron-right {
+    @include prevIcon(url("~src/assets/img/arrow-right.svg"));
+
+    &::after {
+      left: -25px;
+      background: transparent linear-gradient(90deg, transparent 0%, colors.$border 100%) 0 0 no-repeat padding-box;
+    }
+  }
+}
+
+.date-select {
+  @include screen.gt-mobile {
+    display: none;
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/dining-icon.component.scss b/apps/react/src/styles/components/toolkit/dining-icon.component.scss
new file mode 100644
index 000000000..3372c239b
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/dining-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.dining-svg {
+  width: 44px;
+  height: 34px;
+}
diff --git a/apps/react/src/styles/components/toolkit/flight-transfer-icon.component.scss b/apps/react/src/styles/components/toolkit/flight-transfer-icon.component.scss
new file mode 100644
index 000000000..1fb3e6269
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/flight-transfer-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.flight-transfer-svg {
+  width: 21px;
+  height: 7px;
+}
diff --git a/apps/react/src/styles/components/toolkit/intermediate-landing-icon.component.scss b/apps/react/src/styles/components/toolkit/intermediate-landing-icon.component.scss
new file mode 100644
index 000000000..264eaab07
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/intermediate-landing-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.intermediate-landing-svg {
+  width: 21px;
+  height: 5px;
+}
diff --git a/apps/react/src/styles/components/toolkit/multi-landings-icon.component.scss b/apps/react/src/styles/components/toolkit/multi-landings-icon.component.scss
new file mode 100644
index 000000000..6ad849bd4
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/multi-landings-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.multi-landings-svg {
+  width: 21px;
+  height: 5px;
+}
diff --git a/apps/react/src/styles/components/toolkit/plane-icon.component.scss b/apps/react/src/styles/components/toolkit/plane-icon.component.scss
new file mode 100644
index 000000000..982d43544
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/plane-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.plane-svg {
+  width: 19px;
+  height: 19px;
+}
diff --git a/apps/react/src/styles/components/toolkit/return-icon.component.scss b/apps/react/src/styles/components/toolkit/return-icon.component.scss
new file mode 100644
index 000000000..fb5d6f80b
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/return-icon.component.scss
@@ -0,0 +1,8 @@
+:host {
+  font-size: 0;
+}
+
+.return-svg {
+  width: 12px;
+  height: 6px;
+}
diff --git a/apps/react/src/styles/components/toolkit/tab-button.component.scss b/apps/react/src/styles/components/toolkit/tab-button.component.scss
new file mode 100644
index 000000000..fe071607c
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/tab-button.component.scss
@@ -0,0 +1,23 @@
+@use 'src/styles/mixins';
+@use 'src/styles/colors';
+
+.tab-button {
+  @include mixins.button(colors.$blue-extra-light);
+
+  padding-bottom: 15px;
+  max-height: 48px;
+  width: 100%;
+
+  border-right: 1px solid colors.$border;
+  border-bottom: 1px solid colors.$border;
+  border-radius: 0;
+
+  &--active {
+    background-color: colors.$white;
+    border-bottom-color: colors.$white;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/text.component.scss b/apps/react/src/styles/components/toolkit/text.component.scss
new file mode 100644
index 000000000..340072ffd
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/text.component.scss
@@ -0,0 +1,130 @@
+@use "sass:map";
+@use "src/styles/colors";
+@use "src/styles/fonts";
+@use "src/styles/screen";
+
+$sizes: (
+        "10": fonts.$font-size-xs,
+        "12": fonts.$font-size-s,
+        "14": fonts.$font-size-m,
+        "16": fonts.$font-size-l,
+        "18": fonts.$font-size-xl,
+        "20": fonts.$font-size-xl1,
+        "22": fonts.$font-size-xl2,
+        "24": 24px,
+        "26": fonts.$font-size-xl3,
+        "30": fonts.$font-size-xxl,
+        "36": fonts.$font-size-xxxl--tablet,
+        "42": fonts.$font-size-xxxl,
+);
+
+$line-heights: (
+        "10": 13px,
+        "12": 16px,
+        "14": 19px,
+        "16": 21px,
+        "18": 24px,
+        "20": 26px,
+        "22": 29px,
+        "24": 31px,
+        "26": 34px,
+        "30": 39px,
+        "36": 47px,
+        "42": 55px,
+);
+
+$weights: (
+        "light": fonts.$font-light,
+        "regular": fonts.$font-regular,
+        "medium": fonts.$font-medium,
+        "bold": fonts.$font-bold,
+);
+
+$colors: (
+        "default": colors.$text-color,
+        "dark-blue": colors.$blue-dark,
+        "blue": colors.$blue,
+        "light-gray": colors.$light-gray,
+        "light-blue": colors.$blue-light,
+        "red": colors.$red,
+        "orange": colors.$orange,
+        "white": colors.$white,
+);
+
+// name from ITextAlign; text-align value; isMobile;
+$aligns:
+        "left" start false,
+        "right" end false,
+        "center" center false,
+        "justify" justify false,
+        "mobile-left" start true,
+        "mobile-right" end true;
+
+:host {
+  font-size: 0;
+}
+
+.text {
+  display: inline-block;
+
+  font-size: fonts.$font-size-m;
+  font-family: fonts.$font-family;
+  font-weight: fonts.$font-regular;
+  line-height: map.get($line-heights, "14");
+  text-decoration: inherit;
+  color: colors.$text-color;
+
+  &--ellipsis {
+    @include screen.desktop {
+      @include fonts.font-overflow;
+
+      max-width: 100%;
+    }
+  }
+}
+
+@each $name, $value in $sizes {
+  .text--#{$name} {
+    @include screen.gt-mobile {
+      font-size: $value;
+      line-height: map.get($line-heights, $name);
+    }
+  }
+
+  .text--mobile-#{$name} {
+    @include screen.mobile {
+      font-size: $value;
+      line-height: map.get($line-heights, $name);
+    }
+  }
+}
+
+@each $name, $value in $weights {
+  .text--#{$name} {
+    font-weight: $value;
+  }
+
+  .text--mobile-#{$name} {
+    @include screen.mobile {
+      font-weight: $value;
+    }
+  }
+}
+
+@each $name, $value in $colors {
+  .text--#{$name} {
+    color: $value;
+  }
+}
+
+@each $name, $value, $isMobile in $aligns {
+  .text--#{$name} {
+    @if $isMobile {
+      @include screen.mobile {
+        text-align: $value;
+      }
+    } @else {
+      text-align: $value;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/time-selector.component.scss b/apps/react/src/styles/components/toolkit/time-selector.component.scss
new file mode 100644
index 000000000..2d469287c
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/time-selector.component.scss
@@ -0,0 +1,158 @@
+@use "src/styles/framework" as *;
+
+time-selector {
+  .p-carousel {
+    .p-carousel-content {
+      padding: 0px;
+      height: $button-height + 1px;
+
+      .p-carousel-container {
+        padding: 0;
+        height: 100%;
+
+        .p-carousel-items-content {
+          border-left: 1px solid $border;
+          border-right: 1px solid $border;
+
+          border-radius: 0 0 $border-radius $border-radius;
+          background-color: $blue-extra-light;
+
+          .sticky-panel--active & {
+            border-top: 1px solid $border;
+            border-radius: $border-radius;
+          }
+
+          .p-carousel-items-container {
+            height: 100%;
+
+            .p-carousel-item {
+              height: 100%;
+              position: relative;
+              overflow: visible;
+
+              &:after {
+                content: '';
+                position: absolute;
+                top: 0px;
+                right: -1px;
+                bottom: 0px;
+                width: 1px;
+                background-color: $border;
+              }
+
+              button.tab-button {
+                width: 100%;
+                height: 100%;
+                background-color: transparent;
+                border-radius: 0px;
+                border: none;
+                cursor: pointer;
+                position: relative;
+                border-bottom: 1px solid $border;
+                transition-duration: 0.2s;
+
+                &:hover {
+                  .p-button-label {
+                    color: $text-color;
+                  }
+                }
+
+                &--active {
+                  background-color: $white !important;
+                  border-bottom: 1px solid $white;
+                  cursor: initial;
+
+                  .p-button-label {
+                    color: #333333 !important;
+                  }
+
+                  &:before {
+                    content: '';
+                    position: absolute;
+                    top: 0px;
+                    left: -1px;
+                    bottom: 0px;
+                    width: 1px;
+                    background-color: $border;
+                  }
+                }
+
+                .p-button-label {
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  font-weight: $font-bold;
+                  color: $blue;
+                  font-size: $font-size-s;
+                }
+              }
+
+              &:last-child {
+                border-right: none;
+              }
+            }
+          }
+        }
+
+        .p-carousel-prev,
+        .p-carousel-next {
+          margin: 0px;
+          width: $button-height;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 0px;
+          border: none;
+          background-repeat: no-repeat;
+          background-position: center center;
+          background-size: 7.41px 12px;
+          position: relative;
+          z-index: 100;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0px;
+            background-size: cover;
+            background-repeat: no-repeat;
+            width: 21px;
+            height: 100%;
+          }
+        }
+
+        .p-carousel-prev.p-state-disabled,
+        .p-carousel-next.p-state-disabled {
+          &::before {
+            display: none;
+          }
+        }
+
+        .p-carousel-next {
+          // margin-left: -1px;
+          background-image: url('~src/assets/img/arrow-right.svg');
+          border-radius: 0 $border-radius 0 0;
+
+          &::before {
+            left: -21px;
+            background-image: url('~src/assets/img/tabs-shadow-right.svg');
+          }
+        }
+
+        .p-carousel-prev {
+          background-image: url('~src/assets/img/arrow-left.svg');
+          border-radius: $border-radius 0 0 0;
+
+          &::before {
+            right: -21px;
+            background-image: url('~src/assets/img/tabs-shadow-left.svg');
+          }
+        }
+      }
+
+      .p-carousel-dots-container {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/title.component.scss b/apps/react/src/styles/components/toolkit/title.component.scss
new file mode 100644
index 000000000..cc7c8b823
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/title.component.scss
@@ -0,0 +1,28 @@
+@use "src/styles/framework" as *;
+
+:host {
+  h1 {
+    @include font-overflow();
+  }
+
+  @include smTablet {
+    h1 {
+      font-size: $font-size-xxxl--tablet;
+      margin-bottom: $space-m + $space-s;
+
+      overflow: visible;
+      white-space: normal;
+    }
+  }
+
+  @include mobile {
+    h1 {
+      font-size: $font-size-xxxl--mobile;
+      margin-bottom: $space-m + $space-s;
+      margin-top: $space-m;
+
+      overflow: visible;
+      white-space: normal;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/toggle-switch.component.scss b/apps/react/src/styles/components/toolkit/toggle-switch.component.scss
new file mode 100644
index 000000000..f0946fd5a
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/toggle-switch.component.scss
@@ -0,0 +1,68 @@
+// ==== константы ====
+$switch-width : 42px;
+$switch-height: 24px;
+$thumb-size   : 20px;
+$padding      : 2px;
+$anim         : .25s ease;
+
+:host {
+  display: block;
+  /* опционально: тот же вертикальный зазор, что у PrimeNG .p-field */
+  margin: 0 0 .5rem 0;
+}
+// ==== контейнер ====
+.toggle-container {
+  display: inline-flex;          // в одну строку
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+
+  &.disabled {
+    cursor: default;
+    opacity: .4;
+    pointer-events: none;
+  }
+
+  &:focus-visible .switch {
+    box-shadow: 0 0 0 3px rgba(#3f51b5, .3);
+  }
+}
+
+// ==== дорожка тумблера ====
+.switch {
+    width: $switch-width;
+  min-width: $switch-width;     // фиксируем минимум
+  flex: 0 0 $switch-width;      // запрещаем рост/сжатие
+  height: $switch-height;
+  border-radius: $switch-height;
+  background: #9e9e9e;           // «выкл»
+  position: relative;
+  transition: background $anim;
+
+  &.checked {
+    background: #3f51b5;         // «вкл»
+
+    .thumb {
+      transform: translateX(calc(#{$switch-width - $thumb-size - 2 * $padding}));
+    }
+  }
+
+  .thumb {
+    position: absolute;
+    top: $padding;
+    left: $padding;
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(#000, .4);
+    transition: transform $anim;
+  }
+}
+
+// ==== подпись ====
+.label {
+  display: inline-block;         // перекрываем global .p-field label {display:block;}
+  margin-left: .5em;             // как у PrimeNG p-checkbox
+  user-select: none;
+}
diff --git a/apps/react/src/styles/components/toolkit/tooltip.component.scss b/apps/react/src/styles/components/toolkit/tooltip.component.scss
new file mode 100644
index 000000000..0c50f0216
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/tooltip.component.scss
@@ -0,0 +1,23 @@
+@use "src/styles/colors" as *;
+
+.tooltip {
+  position: relative;
+  width: 100%;
+
+  &__text {
+    position: absolute;
+    text-align: left;
+    color: $light-gray;
+    border-left: 4px solid $red;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 5px;
+    width: 100%;
+    background: $white 0 0 no-repeat padding-box;
+    box-shadow: 0 4px 10px #2424243b;
+    opacity: 1;
+    z-index: 10000;
+    bottom: 100%;
+    left: 0;
+  }
+}
diff --git a/apps/react/src/styles/framework.scss b/apps/react/src/styles/framework.scss
new file mode 100644
index 000000000..71a57401a
--- /dev/null
+++ b/apps/react/src/styles/framework.scss
@@ -0,0 +1,6 @@
+@forward './colors';
+@forward './variables';
+@forward './fonts';
+@forward './shadows';
+@forward './screen';
+@forward './layouts';
\ No newline at end of file
diff --git a/apps/react/src/styles/index.scss b/apps/react/src/styles/index.scss
index d8c60b97a..2261123e7 100644
--- a/apps/react/src/styles/index.scss
+++ b/apps/react/src/styles/index.scss
@@ -1,41 +1,25 @@
-/* Main styles for Aeroflot Flights React App */
+/* Global styles for Aeroflot Flights React App */
+/* Imported from Angular migration */
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+// Import framework styles from Angular
+@import './framework';
+@import './reset';
+@import './common';
+@import './mixins';
+@import './buttons';
+@import './icons';
+@import './logos';
+@import './banners';
+@import './layouts';
+@import './layout';
+@import './layout-print';
+@import './positioning';
+@import './scrollbar';
+@import './tooltips';
+@import './prime-styles';
+@import './prime-calendar';
+@import './leaflet-popup';
 
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #f5f5f5;
-}
-
-#root {
-  width: 100%;
-  height: 100%;
-}
-
-.app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-    color: #333;
-  }
-
-  p {
-    font-size: 1.1rem;
-    color: #666;
-  }
-}
+// Page-specific styles
+@import './pages/board/index';
+@import './pages/schedule/index';
diff --git a/apps/react/src/styles/pages/adaptive/_flight_details-row.scss b/apps/react/src/styles/pages/adaptive/_flight_details-row.scss
new file mode 100644
index 000000000..a47c714a2
--- /dev/null
+++ b/apps/react/src/styles/pages/adaptive/_flight_details-row.scss
@@ -0,0 +1,25 @@
+@media (max-width: $media-breakpoint-small-tablet) {
+    schedule-days schedule-search-result-flight-body
+    .flight-details__full-route{
+        flex-wrap: wrap !important;
+        padding-bottom: 0px;
+
+        &::after {
+            display: none;
+        }
+
+        &__status {
+            width: 33%;
+            text-align: center;
+            margin-bottom: $space-xl;
+        }
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    schedule-days
+        schedule-search-result-flight-body
+        .flight-details__full-route {
+        display: none;
+    }
+}
diff --git a/apps/react/src/styles/pages/adaptive/_flights-board-details-page-adaptive.scss b/apps/react/src/styles/pages/adaptive/_flights-board-details-page-adaptive.scss
new file mode 100644
index 000000000..aa3a21867
--- /dev/null
+++ b/apps/react/src/styles/pages/adaptive/_flights-board-details-page-adaptive.scss
@@ -0,0 +1,35 @@
+@media (max-width: $media-breakpoint-small-tablet) {
+    @media screen {
+        online-board-flight-details-page {
+            flight-board-details,
+            flight-schedule-details
+                .details-accordion.flight-accordion
+                > .p-accordion
+                > p-accordiontab
+                > .p-accordion-content-wrapper
+                > .p-accordion-content
+                .details-accordion__body.flight-route {
+                padding-top: $space-m !important;
+            }
+        }
+
+        schedule-flight-details-view {
+            flight-board-details,
+            flight-schedule-details
+                .details-accordion.flight-accordion
+                > .p-accordion
+                > p-accordiontab
+                > .p-accordion-content-wrapper
+                > .p-accordion-content
+                .details-accordion__body.flight-route {
+                padding-top: $space-xxl !important;
+            }
+        }
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    .flight-details__full-route {
+        display: none !important;
+    }
+}
diff --git a/apps/react/src/styles/pages/adaptive/_layout-adaptive.scss b/apps/react/src/styles/pages/adaptive/_layout-adaptive.scss
new file mode 100644
index 000000000..83e3ae35e
--- /dev/null
+++ b/apps/react/src/styles/pages/adaptive/_layout-adaptive.scss
@@ -0,0 +1,98 @@
+flights-root {
+    @media (max-width: $media-breakpoint-tablet) {
+        padding: 0 24px;
+    }
+
+    @media (max-width: $media-breakpoint-mobile) {
+        padding: 0 10px;
+    }
+}
+
+.ap-d-desktop {
+    display: none !important;
+}
+.ap-d-tablet {
+    display: none !important;
+}
+.ap-d-tablet-2 {
+    display: none !important;
+}
+.ap-d-mobile {
+    display: none !important;
+}
+
+@media (max-width: 1000000px) and (min-width: $media-breakpoint-tablet) {
+    .ap-d-desktop {
+        display: block !important;
+    }
+}
+
+@media (max-width: $media-breakpoint-tablet) and (min-width: $media-breakpoint-tablet-min) {
+    .ap-d-tablet {
+        display: block !important;
+    }
+}
+
+@media (max-width: $media-breakpoint-small-tablet) and (min-width: $media-breakpoint-small-tablet-min) {
+    .ap-d-tablet-2 {
+        display: block !important;
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    .ap-d-mobile {
+        display: block !important;
+    }
+}
+
+@media (max-width: $media-breakpoint-tablet) {
+    .footer .main-module__footer {
+        margin-top: $space-xl;
+    }
+
+    .city-autocomplete-popup {
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% - 40px) !important;
+    }
+}
+
+@media (max-width: $media-breakpoint-desktop) {
+    .main-module__header__link-buy {
+        visibility: hidden;
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    flights-page-tabs .tabs,
+    schedule-direction-switch .tabs {
+        .tabs__tab {
+            height: $button-height--mobile;
+        }
+    }
+
+    .footer .main-module__footer {
+        margin-top: $space-m;
+    }
+
+    board-search-result section.frame {
+        border-radius: $border-radius !important;
+    }
+
+    page-empty-list section.empty-list {
+        padding: 40px;
+        padding-top: 150px;
+        border-radius: $border-radius;
+        background-position: center 40px;
+        background-size: 65px auto;
+
+        .text-header {
+            text-align: center;
+            margin-bottom: $space-m;
+        }
+
+        .text-info {
+            max-width: 100% !important;
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/adaptive/_page-filters-adaptive.scss b/apps/react/src/styles/pages/adaptive/_page-filters-adaptive.scss
new file mode 100644
index 000000000..5563d12e6
--- /dev/null
+++ b/apps/react/src/styles/pages/adaptive/_page-filters-adaptive.scss
@@ -0,0 +1,135 @@
+@media (min-width: $media-breakpoint-mobile) and (max-width: $media-breakpoint-tablet) {
+    online-board-filter,
+    schedule-filter,
+    flights-map-filter {
+        .filter-content {
+            display: flex;
+            flex-direction: row;
+
+            > * {
+                width: 50%;
+            }
+
+            > *:first-child {
+                padding-right: 0;
+            }
+
+            > *:last-child {
+                padding-left: $space-m;
+            }
+
+            .calendar {
+                margin-top: 0;
+            }
+
+            .change-container {
+                width: auto;
+                padding-right: $space-m;
+                padding-left: $space-m;
+
+                .button-change {
+                    margin-top: 14px;
+                    height: $standard-button-height;
+                    width: 45px;
+
+                    svg {
+                        transform: rotate(0deg);
+                    }
+                }
+            }
+        }
+
+        online-board-route-filter {
+            calendar-input {
+                padding-left: $space-m !important;
+            }
+        }
+
+        .filter-button {
+            display: flex;
+            justify-content: center;
+
+            .search-button {
+                max-width: 260px;
+            }
+        }
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    online-board-filter,
+    schedule-filter,
+    flights-map-filter {
+        .p-calendar {
+            width: 100%;
+
+            .p-datepicker-calendar-container .p-datepicker-calendar td a,
+            .p-datepicker-calendar-container .p-datepicker-calendar td span {
+                font-size: $font-size-m !important;
+            }
+        }
+
+        .city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs {
+            flex-wrap: wrap;
+        }
+
+        .city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button:first-child {
+            flex-grow: 4;
+            width: 100%;
+        }
+
+        .city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button {
+            height: $button-height--mobile;
+
+            &.active {
+                border-bottom: 1px solid $border;
+            }
+        }
+
+        .city-autocomplete-popup-wrapper
+            .city-autocomplete-popup
+            .content
+            .content--scroll-panel
+            .p-scrollpanel
+            .p-scrollpanel-wrapper
+            .row
+            .cell.contry {
+            display: none;
+        }
+
+        .city-autocomplete-popup-wrapper
+            .city-autocomplete-popup
+            .content
+            .content--scroll-panel
+            .p-scrollpanel
+            .p-scrollpanel-wrapper
+            .row.country-start-row {
+            display: flex;
+            flex-direction: column;
+
+            .cell.contry {
+                display: block;
+                width: 80%;
+            }
+        }
+
+        .city-autocomplete-popup-wrapper
+            .city-autocomplete-popup
+            .content
+            .content--scroll-panel
+            .p-scrollpanel
+            .p-scrollpanel-wrapper
+            .row
+            .cell.city
+            .airports-column {
+            flex-wrap: wrap;
+        }
+    }
+}
+
+@media (max-width: 360px) {
+    .city-autocomplete-popup-wrapper .city-autocomplete-popup .content .content--scroll-panel .p-scrollpanel .p-scrollpanel-wrapper .row {
+        display: flex;
+        flex-direction: column;
+    }
+}
diff --git a/apps/react/src/styles/pages/adaptive/_schedule-page-filters-adaptive.scss b/apps/react/src/styles/pages/adaptive/_schedule-page-filters-adaptive.scss
new file mode 100644
index 000000000..bafab528f
--- /dev/null
+++ b/apps/react/src/styles/pages/adaptive/_schedule-page-filters-adaptive.scss
@@ -0,0 +1,133 @@
+.mobile-view {
+    display: none;
+}
+
+.schedule-filter-content--checkboxes {
+    p-checkbox {
+        margin-top: $space-xl;
+    }
+}
+
+@media (min-width: $media-breakpoint-mobile) and (max-width: $media-breakpoint-tablet) {
+    schedule-filter {
+        .schedule-filter-content {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            @include h-spacing($space-xl);
+
+            city-autocomplete {
+                width: 100%;
+            }
+
+            .change-container {
+                width: auto;
+            }
+
+            &--direct,
+            &--checkboxes,
+            &--back {
+                margin-top: $space-xl;
+                flex-wrap: wrap;
+
+                .calendar {
+                    margin-top: 0;
+                }
+
+                time-selector
+                    .wrapper--time-selector.compact-view {
+                    margin-top: 0px;
+                    padding-bottom: $space-xl;
+                }
+
+                .checkbox-schedule {
+                    min-width: 220px;
+                    width: 100%;
+                    margin-top: 0px;
+                    margin-top: $space-xl;
+                }
+
+                calendar-input {
+                    width: calc(50% - 33px);
+                    margin-right: 66px;
+                }
+
+                time-selector {
+                    width: calc(50% - 33px);
+
+                    .wrapper--time-selector.compact-view
+                        .time-selector__label-value {
+                        margin-bottom: 27px;
+                        flex-wrap: nowrap;
+
+                        .time-selector__label {
+                            max-width: 100px;
+                            @include font-overflow();
+                        }
+                    }
+                }
+            }
+
+            &--checkboxes {
+                @include h-spacing($space-xl);
+
+                p-checkbox {
+                    margin-top: 0;
+                }
+            }
+
+            time-selector {
+                flex: 1;
+            }
+        }
+
+        .schedule-fiter-buttons {
+            display: flex;
+            justify-content: center;
+        }
+
+        .search-button {
+            max-width: 260px;
+        }
+
+        .change-container {
+            width: auto;
+            padding-right: $space-m;
+            padding-left: $space-m;
+
+            .button-change {
+                margin-top: 14px;
+                height: $standard-button-height;
+                width: 45px;
+
+                svg {
+                    transform: rotate(0deg);
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    .mobile-view {
+        display: block;
+    }
+
+    .sticky-panel {
+        position: relative !important;
+        top: auto !important;
+    }
+
+    schedule-search-view {
+        time-selector,
+        schedule-search-result-header {
+            display: none;
+        }
+
+        schedule-days {
+            .frame {
+                border-radius: 0 !important;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/adaptive/fligjts-map-filters-adaptive.scss b/apps/react/src/styles/pages/adaptive/fligjts-map-filters-adaptive.scss
new file mode 100644
index 000000000..7873140ef
--- /dev/null
+++ b/apps/react/src/styles/pages/adaptive/fligjts-map-filters-adaptive.scss
@@ -0,0 +1,131 @@
+.flights-map-filter-content-checkboxes {
+    p-checkbox {
+        margin-top: $space-l;
+    }
+}
+
+@media (min-width: $media-breakpoint-mobile) and (max-width: $media-breakpoint-tablet) {
+    flights-map-filter {
+        .flights-map-filter-content {
+
+            .flights-map-filter-header{
+                display: none;
+            }
+
+            .flights-map-filter-content-cities{
+                display: flex;
+                flex-direction: row;
+
+                > * {
+                    width: 50%;
+                }
+                
+
+                .change-container {
+                    width: auto;
+                    padding-right: $space-m;
+                    padding-left: $space-m;
+
+                    .button-change {
+                        margin-top: 14px;
+                        height: $standard-button-height;
+                        width: 45px;
+
+                        svg {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+            
+            .flights-map-filter-info{
+                margin-top: 10px;
+            }
+
+            .flights-map-filter-content-checkboxes{
+                @include h-spacing($space-xl);
+
+                
+
+                p-checkbox {
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+}
+
+
+@media (max-width: $media-breakpoint-mobile) {
+    flights-map-filter {
+        .p-calendar {
+            width: 100%;
+
+            .p-datepicker-calendar-container .p-datepicker-calendar td a,
+            .p-datepicker-calendar-container .p-datepicker-calendar td span {
+                font-size: $font-size-m !important;
+            }
+        }
+
+        .city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs {
+            flex-wrap: wrap;
+        }
+
+        .city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button:first-child {
+            flex-grow: 4;
+            width: 100%;
+        }
+
+        .city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button {
+            height: $button-height--mobile;
+
+            &.active {
+                border-bottom: 1px solid $border;
+            }
+        }
+
+        .city-autocomplete-popup-wrapper
+            .city-autocomplete-popup
+            .content
+            .content--scroll-panel
+            .p-scrollpanel
+            .p-scrollpanel-wrapper
+            .row
+            .cell.contry {
+            display: none;
+        }
+
+        .city-autocomplete-popup-wrapper
+            .city-autocomplete-popup
+            .content
+            .content--scroll-panel
+            .p-scrollpanel
+            .p-scrollpanel-wrapper
+            .row.country-start-row {
+            display: flex;
+            flex-direction: column;
+
+            .cell.contry {
+                display: block;
+                width: 80%;
+            }
+        }
+
+        .city-autocomplete-popup-wrapper
+            .city-autocomplete-popup
+            .content
+            .content--scroll-panel
+            .p-scrollpanel
+            .p-scrollpanel-wrapper
+            .row
+            .cell.city
+            .airports-column {
+            flex-wrap: wrap;
+        }
+
+        .flights-map-filter-header{
+            display: none;
+        }
+    }
+}
+
diff --git a/apps/react/src/styles/pages/adaptive/schedule-flight-select-adaptive.scss b/apps/react/src/styles/pages/adaptive/schedule-flight-select-adaptive.scss
new file mode 100644
index 000000000..5f282702b
--- /dev/null
+++ b/apps/react/src/styles/pages/adaptive/schedule-flight-select-adaptive.scss
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/react/src/styles/pages/board/board-flight-body.scss b/apps/react/src/styles/pages/board/board-flight-body.scss
new file mode 100644
index 000000000..583900065
--- /dev/null
+++ b/apps/react/src/styles/pages/board/board-flight-body.scss
@@ -0,0 +1,42 @@
+board-flight-body,
+board-multi-flight-body {
+    .flight-details,
+    flight-board-details,
+    flight-schedule-details {
+        padding: $text-margin-bottom $space-xl $space-m $space-xl;
+
+        &__full-route {
+            border: 1px solid $border;
+            border-radius: $border-radius;
+            background-color: $white;
+            padding: $space-xl;
+            margin-bottom: $space-xl;
+            position: relative;
+        }
+
+        &__container {
+            border-radius: $border-radius;
+            background-color: $white;
+            border: 1px dashed $border;
+        }
+
+        &__actions {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            padding-top: $space-m;
+            
+            &__left,
+            &__right {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+
+                & > *:not(:last-child) {
+                    margin-right: $space-m;
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/board-flight-header.scss b/apps/react/src/styles/pages/board/board-flight-header.scss
new file mode 100644
index 000000000..7e7d05b98
--- /dev/null
+++ b/apps/react/src/styles/pages/board/board-flight-header.scss
@@ -0,0 +1,17 @@
+board-flight-header {
+    $flight-height: 100%;
+
+    .flight-status {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        @include font-overflow();
+
+        .status {
+            @include font-overflow();
+            @include font-small();
+            width: 100%;
+            text-align: center;
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/board-search-result.scss b/apps/react/src/styles/pages/board/board-search-result.scss
new file mode 100644
index 000000000..5cccd1fdf
--- /dev/null
+++ b/apps/react/src/styles/pages/board/board-search-result.scss
@@ -0,0 +1,72 @@
+board-search-result {
+    section.frame {
+        border-radius: 0 0 $border-radius $border-radius;
+        padding-top: 3px;
+
+        p-accordiontab {
+            display: block;
+            position: relative;
+            transition-duration: 0.2s;
+
+            .p-accordion-header {
+                margin-top: 0px !important;
+                position: relative;
+                transition-duration: 0.2s;
+
+                a {
+                    border: none;
+                    background-color: transparent;
+                    border-radius: 0px;
+                    padding: 0 !important;
+                    position: relative;
+                    color: $text-color;
+                    transition-duration: 0.2s;
+
+                    &:hover {
+                        background-color: $blue-extra-light;
+                    }
+                }
+
+                &.p-highlight {
+                    background-color: $blue-extra-light;
+                }
+            }
+
+            .p-accordion-content-wrapper {
+                background-color: $blue-extra-light;
+
+                > .p-accordion-content {
+                    background-color: transparent;
+                    padding: 0px !important;
+                }
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                height: 1.3px;
+                left: $space-xl;
+                right: $space-xl;
+                background-color: $border;
+                transition-duration: 0.2s;
+            }
+
+            &:first-child::after {
+                display: none;
+            }
+
+            &:hover::after,
+            &.active::after {
+                left: 0;
+                right: 0;
+            }
+
+            &:hover + p-accordiontab::after,
+            &.active + p-accordiontab::after {
+                left: 0;
+                right: 0;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/city-autocomplite.scss b/apps/react/src/styles/pages/board/components/city-autocomplite.scss
new file mode 100644
index 000000000..17b898627
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/city-autocomplite.scss
@@ -0,0 +1,75 @@
+.city-autocomplete__search-button.p-button {
+        background-image: url('~src/assets/img/arr-down.svg');
+        background-repeat: no-repeat;
+        background-size: 9px 4px;
+        background-position: center center;
+        transform-origin: center center;
+        transition-duration: 0.2s;
+}
+
+city-autocomplete {
+    p-autocomplete,
+    .p-autocomplete {
+        width: 100%;
+    }
+
+    input.p-inputtext {
+        border-radius: $border-radius 0 0 $border-radius;
+        border: none;
+        box-shadow: none;
+    }
+
+    .p-autocomplete-panel {
+        min-width: calc(100% + #{$buttons-width}) !important;
+        max-width: 400px;
+        margin-top: $space-s;
+        @include control-border-shadow();
+
+        .mCSB_scrollTools {
+            width: 12px !important;
+        }
+
+        .mCSB_inside > .mCSB_container {
+            margin-right: 12px;
+        }
+
+        .mCSB_inside > .mCSB_container.mCS_y_hidden {
+            margin-right: 0px;
+        }
+
+        .mCSB_draggerContainer {
+            margin: 5px 0;
+        }
+
+        .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
+            display: none;
+        }
+
+        .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+            background-color: $blue-light;
+            width: $scroll-width;
+            border-radius: $border-radius;
+        }
+
+        .mCSB_scrollTools .mCSB_buttonUp,
+        .mCSB_scrollTools .mCSB_buttonDown {
+            height: $space-m !important;
+            background: none !important;
+        }
+
+        .p-autocomplete-list-item {
+            padding: 0px !important;
+
+            &.p-state-highlight {
+                .country,
+                .airport {
+                    color: #ffffffbb;
+                }
+            }
+        }
+    }
+}
+
+.city-active {
+    font-weight: $font-bold;
+}
diff --git a/apps/react/src/styles/pages/board/components/details/board-details.scss b/apps/react/src/styles/pages/board/components/details/board-details.scss
new file mode 100644
index 000000000..d1bb47fe7
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/board-details.scss
@@ -0,0 +1,92 @@
+@mixin details-accordion {
+    .details-accordion {
+        .p-accordion {
+            .p-accordion-header {
+                margin-top: 0px;
+                border-radius: 0px;
+                position: relative;
+                transition-duration: 0.2s;
+
+                a {
+                    padding: 0;
+
+                    .details-accordion__header {
+                        @include font-small();
+                        font-weight: $font-medium;
+                        padding: $space-xl;
+                        position: relative;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: flex-start;
+                        justify-content: flex-start;
+                        background-color: $white;
+
+                        .details-accordion__header__values {
+                            display: flex;
+                            flex-direction: row;
+                            transition-duration: 0.2s;
+                            opacity: 0;
+                            visibility: hidden;
+                            height: 0px;
+                        }
+                    }
+                }
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    height: 1px;
+                    left: $space-xl;
+                    right: $space-xl;
+                    border-top: 1.3px dotted $border;
+                    transition-duration: 0.2s;
+                }
+
+                &.p-state-active {
+                    .details-accordion__header__values {
+                        opacity: 1 !important;
+                        visibility: visible !important;
+                        height: auto !important;
+                    }
+
+                    &::after {
+                        left: 0;
+                        right: 0;
+                        border-top-style: solid;
+                    }
+                }
+            }
+        }
+
+        .p-accordion-content {
+            border-radius: 0 0 $border-radius $border-radius !important;
+            padding: 0px;
+            .details-accordion__body {
+                padding: $space-xl;
+                padding-top: 0;
+            }
+        }
+
+        .details-accordion__title {
+            white-space: normal;
+            width: $margin-details-title;
+        }
+    }
+
+    .accordion--open + flight-details-schedule {
+        .p-accordion-header {
+            &::after {
+                left: 0 !important;
+                right: 0 !important;
+                border-top-style: solid !important;
+            }
+        }
+    }
+}
+
+online-board-flight-details-page {
+    @include details-accordion();
+}
+
+@import '../../../adaptive/_flights-board-details-page-adaptive';
diff --git a/apps/react/src/styles/pages/board/components/details/details-back.scss b/apps/react/src/styles/pages/board/components/details/details-back.scss
new file mode 100644
index 000000000..9a91c3b90
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/details-back.scss
@@ -0,0 +1,19 @@
+.details-back {
+    height: $button-height;
+    width: 100%;
+    text-align: left !important;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+
+    .p-button-label {
+        font-size: 14px;
+        text-align: left;
+    }
+
+    .pi {
+        font-size: 13px;
+        margin-left: 15px;
+        display: inline-block !important;
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/details/flight-details-full-route.scss b/apps/react/src/styles/pages/board/components/details/flight-details-full-route.scss
new file mode 100644
index 000000000..9ea0c6654
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/flight-details-full-route.scss
@@ -0,0 +1,11 @@
+flight-details-full-route {
+    .frame {
+        border-radius: 0 0 $border-radius $border-radius !important;
+        margin-bottom: $space-xl;
+    }
+}
+@media screen and (max-width: 1400px) {
+    .aeroport-name {
+        max-width: 300px;
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/details/flight-details-icons-update-time.scss b/apps/react/src/styles/pages/board/components/details/flight-details-icons-update-time.scss
new file mode 100644
index 000000000..bdab3064a
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/flight-details-icons-update-time.scss
@@ -0,0 +1,22 @@
+.full-route__icons-status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    padding: $space-xl $space-xl 0 $space-xl;
+
+    .icons {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+    }
+
+    .last-update {
+        @include font-small();
+
+        .time {
+            font-weight: $font-medium;
+            @include font-overflow();
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/details/flight-details-info.scss b/apps/react/src/styles/pages/board/components/details/flight-details-info.scss
new file mode 100644
index 000000000..51c305a2d
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/flight-details-info.scss
@@ -0,0 +1,106 @@
+@mixin flight-number-company {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    @include h-spacing($space-xl);
+
+    .flight-number {
+        &__code {
+            font-size: $font-size-l;
+            font-weight: $font-medium;
+            color: $text-color;
+            white-space: nowrap;
+        }
+
+        &__code-sharing {
+            @include font-small();
+            display: flex;
+            white-space: nowrap;
+        }
+    }
+
+    .flight-company {
+        justify-content: center;
+    }
+
+    .flight-actions {
+        margin-left: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+
+        button {
+            height: $medium-button-height;
+        }
+
+        button + button {
+            margin-left: $space-xl;
+        }
+    }
+}
+
+$wcol: 7%;
+
+.block-route-update {
+    padding: 0px;
+    display: flex;
+    align-items: center;
+
+    .block-route {
+        display: block;
+        width: auto;
+        display: flex;
+        border: 1px solid #d0dcea;
+        padding: 8px;
+        border-radius: 3px;
+        justify-content: center;
+        min-width: $space-xxl;
+        min-height: $space-xl * 1.5;
+        @include h-spacing($space-s);
+    }
+    .date-block {
+        width: 110px;
+    }
+
+    svg {
+        &.icon-return {
+            width: 13px;
+            height: 7px;
+            margin-top: 3px;
+        }
+        &.icon-change {
+            width: 22px;
+            height: 12px;
+        }
+    }
+}
+.right-column,
+.left-column {
+    display: inline-flex;
+    min-width: $wcol * 4;
+}
+
+.center-column {
+    display: inline-flex;
+    min-width: $wcol * 6;
+}
+
+.date-container {
+    display: inline-flex;
+    justify-content: space-between;
+    width: -webkit-fill-available;
+    margin: 20px;
+    font-weight: $font-medium;
+}
+
+.divider {
+    margin: 40px 20px 0;
+}
+
+.hr-line {
+    margin: 0;
+    height: 0;
+    border: none;
+    border-top: 1.3px dotted $border;
+}
diff --git a/apps/react/src/styles/pages/board/components/details/flight-details-list.scss b/apps/react/src/styles/pages/board/components/details/flight-details-list.scss
new file mode 100644
index 000000000..98345fb83
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/flight-details-list.scss
@@ -0,0 +1,44 @@
+online-board-flights-mini-list,
+schedule-flights-mini-list,
+{
+    section.frame-left-panel,
+    section.frame-left-panel-accordion {
+        padding-bottom: $space-s;
+        padding-top: $space-s;
+        overflow-y: auto;
+    }
+    section.single-flights-details {
+        max-height: calc(100vh - 170px);
+    }
+    section.frame {
+        background-color: $white;
+        border-radius: $border-radius;
+
+        //max-height: calc(100vh - 220px);
+        overflow-y: auto;
+
+        flights-details-list-flight.selected
+            + flights-details-list-flight.selected {
+            .flight-card {
+                border-top: none;
+            }
+        }
+
+        .mCSB_draggerRail {
+            display: none;
+        }
+
+        .mCSB_inside > .mCSB_container {
+            margin-right: 0 !important;
+        }
+
+        .mCSB_dragger .mCSB_dragger_bar {
+            background-color: $blue-light !important;
+        }
+
+        .mCSB_scrollTools .mCSB_draggerContainer {
+            top: 10px !important;
+            bottom: 10px !important;
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/details/flight-details-schedule.scss b/apps/react/src/styles/pages/board/components/details/flight-details-schedule.scss
new file mode 100644
index 000000000..554ff00e8
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/flight-details-schedule.scss
@@ -0,0 +1,2 @@
+flight-details-schedule {
+}
diff --git a/apps/react/src/styles/pages/board/components/details/flight-details-wrapper.scss b/apps/react/src/styles/pages/board/components/details/flight-details-wrapper.scss
new file mode 100644
index 000000000..751d5ef64
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/flight-details-wrapper.scss
@@ -0,0 +1,95 @@
+flight-details-wrapper {
+    .boarding-status-Scheduled {
+        color: $gray;
+    }
+
+    .boarding-status-InProgress {
+        color: $green;
+    }
+
+    .boarding-status-Finished {
+        color: $red;
+    }
+
+    .details__body__row--wrapper {
+        display: flex;
+        flex-direction: column;
+
+        & + .details__body__row--wrapper {
+            margin-top: $space-xl;
+        }
+
+        .details__body__row {
+            @include flex-center-align();
+
+            .details__title {
+                min-width: 29%;
+                max-width: 29%;
+                margin-right: $space-xl;
+                @include flex-center-align();
+
+                svg {
+                    margin-right: $space-xl;
+                }
+            }
+
+            .details__data {
+                @include flex-center-align();
+                flex-grow: 1;
+            }
+        }
+
+        &.icons-component {
+            .details__body__row {
+                align-items: flex-start;
+
+                .details__data {
+                    flex-wrap: wrap;
+                    margin-bottom: -$space-xl;
+                }
+            }
+        }
+
+        .progress-wrapper.separator {
+            margin-top: $space-xl;
+            height: 3px;
+            @include flex-center-align();
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                height: 1px;
+                left: 0;
+                right: 0;
+                border-top: 1.3px dotted $border;
+            }
+
+            .progress {
+                display: none;
+                height: 2px;
+                position: absolute;
+                top: calc(50% - 1px);
+                left: 0px;
+                background-color: $green;
+                transition-duration: 0.2s;
+                z-index: 2;
+            }
+        }
+
+        &.row-with-progress {
+            .progress-wrapper.separator {
+                .progress {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    .details__body__row--wrapper:last-child {
+        .progress-wrapper.separator {
+            display: none;
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/details/flight-details.scss b/apps/react/src/styles/pages/board/components/details/flight-details.scss
new file mode 100644
index 000000000..5f3c9f9c0
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/details/flight-details.scss
@@ -0,0 +1,98 @@
+flight-board-details,
+flight-schedule-details {
+    .frame.single-flight {
+        border-radius: 0 0 $border-radius $border-radius;
+        overflow: hidden;
+    }
+
+    .p-accordion-header {
+        &.p-state-active {
+            background-color: transparent;
+        }
+
+        &::after {
+            display: none;
+        }
+
+        .details-accordion__header.flight-info {
+            @include flight-number-company();
+            padding: $space-xl;
+        }
+    }
+
+    .p-accordion-content {
+        background-color: transparent;
+
+        .flight-route {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: flex-start;
+            padding: $space-xl;
+            padding-bottom: 0;
+
+            .single-flight & {
+                padding-top: $space-xxl + $space-m;
+            }
+
+            .flight-route__status {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+
+                .status--line {
+                    height: $medium-button-height;
+                    position: relative;
+                    display: flex;
+                    align-items: stretch;
+
+                    .status--execute {
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                        min-width: 29px;
+                        position: relative;
+
+                        svg {
+                            padding: 0 $space-s;
+                            width: 29px;
+                            background-color: $white;
+                            position: relative;
+                            z-index: 3;
+                        }
+
+                        &::after {
+                            content: '';
+                            height: 2px;
+                            position: absolute;
+                            top: calc(50% - 1px);
+                            left: 0px;
+                            right: 0px;
+                            background-color: $green;
+                            z-index: 2;
+                        }
+                    }
+
+                    &::after {
+                        content: '';
+                        height: 1.3px;
+                        position: absolute;
+                        top: calc(50% - 1px);
+                        left: 0px;
+                        right: 0px;
+                        z-index: 1;
+                        background-color: #d1dcea;
+                    }
+                }
+
+                .status--texts {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/flight-details-row/flight-details-row.scss b/apps/react/src/styles/pages/board/components/flight-details-row/flight-details-row.scss
new file mode 100644
index 000000000..6af413211
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/flight-details-row/flight-details-row.scss
@@ -0,0 +1,21 @@
+property {
+    .status {
+        width: $status-indicator-size;
+        height: $status-indicator-size;
+        border-radius: 50%;
+        display: inline-block;
+        background-color: $border;
+        border: 1px solid $border;
+        margin-right: $space-s;
+
+        &--Finished {
+            background-color: $red;
+            border-color: $red;
+        }
+
+        &--InProgress {
+            background-color: $green;
+            border-color: $green;
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/flight-details-row/transfer-inline-extended.scss b/apps/react/src/styles/pages/board/components/flight-details-row/transfer-inline-extended.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/pages/board/components/flight-icons.scss b/apps/react/src/styles/pages/board/components/flight-icons.scss
new file mode 100644
index 000000000..d81b3dc29
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/flight-icons.scss
@@ -0,0 +1,115 @@
+@mixin intermediate-landing-size {
+    .svg {
+        width: 20.5px;
+        height: 6.5px;
+    }
+}
+
+transfer-inline {
+    display: flex;
+    margin-right: $space-m;
+    max-width: 100%;
+
+    &.flight-options-icon,
+    .flight-options-icon {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+        padding: $space-s 0;
+        width: 38px;
+        border-radius: $border-radius;
+        background-color: $blue-extra-light;
+        overflow: hidden;
+
+        flight-details-full-route &,
+        .single-flight & {
+            margin-bottom: 0px;
+        }
+
+        &__text {
+            @include font-small();
+            @include font-overflow();
+            display: none;
+            padding: 0;
+        }
+
+        &__icon {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+
+            .svg {
+                max-height: $label-shift-height;
+                max-width: 38px;
+            }
+        }
+
+        &.hit-rate {
+            background-color: transparentize($orange, 0.8);
+
+            .flight-options-icon__icon {
+                .svg {
+                    width: 14.935px;
+                    height: 15.11px;
+                }
+            }
+        }
+
+        &.stock {
+            background-color: $blue-icon;
+
+            .flight-options-icon__icon {
+                .svg {
+                    width: 14.935px;
+                    height: 15.11px;
+                }
+            }
+        }
+
+        
+
+        &.intermediate-landing {
+            background-color: transparent;
+            border: 1px solid $border;
+            width: auto;
+
+            .flight-options-icon__icon {
+                padding-left: $space-m;
+                padding-right: $space-m;
+
+                @include intermediate-landing-size();
+
+                svg {
+                    fill: $orange;
+                }
+            }
+        }
+
+        &.flight-transfer {
+            background-color: transparent;
+            border: 1px solid $border;
+            width: auto;
+
+            .flight-options-icon__icon {
+                padding-left: $space-m;
+                padding-right: $space-m;
+
+                .svg {
+                    width: 20.5px;
+                    height: 6.5px;
+                    fill: $orange;
+                }
+            }
+        }
+    }
+
+    .p-accordion-header.p-highlight &.intermediateLanding,
+    .p-accordion-header.p-highlight &.intermediateLandingMulti,
+    .p-accordion-header.p-highlight &.flightTransfer {
+        display: none;
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/flight-number-filter.scss b/apps/react/src/styles/pages/board/components/flight-number-filter.scss
new file mode 100644
index 000000000..318ffdd40
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/flight-number-filter.scss
@@ -0,0 +1,40 @@
+.number-input-composite {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    align-items: center;
+    width: 100%;
+
+    p-autocomplete,
+    .ui-autocomplete {
+        width: 100%;
+    }
+
+    @include control-border-shadow();
+
+    input.ui-inputtext {
+        border-radius: $border-radius 0 0 $border-radius;
+        border: none;
+        box-shadow: none;
+    }
+
+    &.number-input-composite {
+        .button-clear {
+            right: 0px;
+        }
+        .prefix {
+            border: none;
+            border-right: 1px solid #dcdcdc;
+        }
+    }
+
+    &.has-value {
+        .button-clear {
+            display: block;
+        }
+    }
+    
+    &.has-error {
+        border-color: $red;
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/page-breadcrumds.scss b/apps/react/src/styles/pages/board/components/page-breadcrumds.scss
new file mode 100644
index 000000000..abeb23c89
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/page-breadcrumds.scss
@@ -0,0 +1,35 @@
+flights-page-breadcrumbs {
+    .p-breadcrumb {
+        body & {
+            display: inline-flex;
+            align-items: center;
+            width: auto;
+            border: none;
+            background-color: $dark-blue-opacity;
+            padding: 3px 10px 4px 10px;
+            margin-bottom: $space-s;
+
+            ul li {
+                margin: 0;
+
+                & .p-menuitem-link {
+                    color: $white !important;
+                    @include font-small($white);
+                }
+
+                &:last-child a {
+                    color: $breadcrumb-item-active-color !important;
+                }
+
+                &.p-breadcrumb-chevron {
+                    margin: 0 $space-s;
+                    @include font-small($breadcrumb-item-separator);
+
+                    &:before {
+                        content: '/';
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/page-date-tab-selector.scss b/apps/react/src/styles/pages/board/components/page-date-tab-selector.scss
new file mode 100644
index 000000000..5f282702b
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/page-date-tab-selector.scss
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/react/src/styles/pages/board/components/page-filters.scss b/apps/react/src/styles/pages/board/components/page-filters.scss
new file mode 100644
index 000000000..aa299cfaf
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/page-filters.scss
@@ -0,0 +1,236 @@
+@mixin left-accordeon {
+    section.frame {
+        background-color: $blue-extra-light;
+    }
+
+    .p-accordion {
+        p-accordiontab {
+            // Header
+            .p-accordion-header {
+                border-radius: 0;
+                margin: 0;
+
+                a {
+                    background-color: transparent;
+                    border: none;
+                    color: $blue;
+                    border-radius: 0;
+                    padding: 0 $space-l 0 $space-xl;
+                    height: $button-height;
+                    display: flex;
+                    align-items: center;
+                    font-weight: $font-bold;
+
+                    p-header {
+                        width: 100%;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                    }
+                }
+
+                // Active header
+                &:not(.p-state-disabled).p-highlight {
+                    a {
+                        background-color: $white;
+                        border: none;
+                        color: $text-color;
+                    }
+
+                    border-bottom: none;
+                }
+            }
+
+            // Content
+            .p-accordion-content {
+                border-bottom: 1px solid $border;
+                @include box-shadow-small;
+                padding: $space-s $space-xl $space-xl $space-xl;
+            }
+
+            // First tab
+            &:first-child {
+                .p-accordion-header {
+                    a {
+                        border-radius: 3px 3px 0 0;
+                    }
+                }
+            }
+
+            // Not last tab
+            &:not(:nth-last-child(1)) {
+                .p-accordion-header {
+                    border-bottom: 1px solid $border;
+                }
+            }
+
+            // Last tab
+            &:nth-last-child(1) {
+                .p-accordion-content {
+                    border-radius: 0 0 3px 3px;
+                    border: none;
+                }
+            }
+        }
+    }
+
+    .label--filter {
+        display: block;
+        margin-right: $space-xl;
+        @include font-overflow();
+        @include font-small($gray);
+        margin-bottom: $label-margin-bottom;
+    }
+
+    .number-input-composite {
+        @include flex-center-align();
+
+        .prefix {
+            @include custom-input();
+            border-right: none;
+            border-radius: $border-radius 0 0 $border-radius;
+            color: $gray;
+        }
+    }
+
+    .input {
+        &--filter {
+            @include custom-input();
+            padding-left: $space-m !important;
+            width: 100%;
+        }
+
+        &--flight-number {
+            display: block !important;
+            border-left: 1px dotted $border-input;
+            border-radius: 0 $border-radius $border-radius 0;
+        }
+
+        &--calendar {
+            padding-right: 32px;
+            background-image: url('~src/assets/img/calendar.svg');
+            background-repeat: no-repeat;
+            background-size: 16px 16px;
+            background-position: right 8px center;
+            cursor: pointer;
+        }
+    }
+
+    .p-autocomplete-input {
+        @include custom-input();
+        width: 100%;
+        height: $standard-button-height - 2px;
+        padding-left: $space-m !important;
+    }
+
+    .calendar {
+        margin-top: $space-xl;
+
+        .calendar-controls-container {
+            display: flex;
+            flex-direction: column;
+            cursor: pointer;
+
+            position: relative;
+
+            .button-clear {
+                top: 1px !important;
+                bottom: 1px !important;
+                border-right: 1px solid $border-input;
+            }
+
+            .calendar-control-hidden {
+                padding: 0;
+                height: 0;
+                display: flex;
+
+                .p-inputtext {
+                    padding: 0;
+                    height: 0;
+                    display: none;
+                    z-index: 10;
+                }
+
+                .p-datepicker {
+                    @include control-border-shadow();
+                    top: $space-s !important;
+                }
+            }
+
+            &.has-value {
+                .button-clear {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    .change-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+
+        .button-change {
+            margin-top: $space-m;
+            margin-bottom: -$space-m;
+            display: inline-flex;
+            height: $medium-button-height;
+            width: 35px;
+            background-color: $white;
+            @include control-border-shadow();
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            border: none;
+            box-shadow: none;
+
+            .p-button-label {
+                display: none;
+            }
+
+            &:hover {
+                background-color: $white;
+            }
+        }
+    }
+
+    .search-button {
+        margin-top: $space-xl;
+        width: 100%;
+        height: $standard-button-height;
+
+        span {
+            font-weight: $font-bold;
+            font-size: $font-size-m;
+        }
+    }
+}
+
+.error-value {
+    border-color: red;
+    border-style: solid;
+    border-width: 1px;
+}
+
+online-board-filter,
+schedule-filter,
+flights-map-filter {
+    @include left-accordeon;
+}
+
+schedule-filter,
+flights-map-filter {
+    .p-accordion-header {
+        display: none;
+    }
+
+    .p-accordion-content {
+        border-radius: $border-radius !important;
+        padding: $space-xl !important;
+    }
+}
+
+@import '~src/styles/pages/adaptive/_page-filters-adaptive.scss';
+@import '~src/styles/pages/adaptive/fligjts-map-filters-adaptive.scss';
\ No newline at end of file
diff --git a/apps/react/src/styles/pages/board/components/page-loader.scss b/apps/react/src/styles/pages/board/components/page-loader.scss
new file mode 100644
index 000000000..690e7ba5d
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/page-loader.scss
@@ -0,0 +1,105 @@
+page-loader {
+    z-index: 10000000;
+    position: inherit;
+    width: 100%;
+    height: 100%;
+    .page-loader__button-area {
+        padding-bottom: 30px;
+    }
+    .page-loader__background {
+        background-color: #ffffff;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+
+        .page-loader__loader {
+            position: relative;
+            width: 120px;
+            height: 120px;
+            margin-top: 0px;
+
+            .loader-circle {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                width: 120px;
+                height: 120px;
+                border-radius: 50%;
+                box-shadow: inset 0 0 0 3px rgb(74, 144, 226);
+                margin-left: -60px;
+                margin-top: -60px;
+                transition-duration: 0.3s;
+            }
+
+            .loader-line-mask {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+
+                width: 60px;
+                height: 120px;
+                margin-left: -60px;
+                margin-top: -60px;
+                overflow: hidden;
+                transform-origin: 60px 60px;
+                //-webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+                animation: rotate 1.2s infinite linear;
+
+                .loader-line {
+                    width: 120px;
+                    height: 120px;
+                    border-radius: 50%;
+                    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5);
+                }
+            }
+
+            svg {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            @keyframes rotate {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+            transform: scale(0.5);
+        }
+
+        .search-cancel {
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 15px;
+            transition-duration: 0.2s;
+            height: $medium-button-height;
+
+            &:hover {
+                background-color: $white !important;
+                border-color: $white !important;
+                .p-button-label {
+                    color: $blue;
+                }
+            }
+
+            .p-button-label {
+                padding: 0 !important;
+                color: rgb(255, 255, 255);
+                font-size: $font-size-m;
+                font-weight: $font-medium;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition-duration: 0.2s;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/page-tabs.scss b/apps/react/src/styles/pages/board/components/page-tabs.scss
new file mode 100644
index 000000000..566cb8729
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/page-tabs.scss
@@ -0,0 +1,62 @@
+flights-page-tabs,
+schedule-direction-switch {
+    .tabs {
+
+        .tabs__row{
+            display: flex;
+            width: 100%;
+
+            &:not(:first-child) {
+                margin-top: 5px;
+            }
+
+        }
+
+        .tabs__tab {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            justify-content: center;
+            height: $button-height;
+            border: 1px solid $white;
+            color: $white;
+            text-decoration: none;
+            background-color: transparent;
+
+            @include font-overflow();
+ 
+            &:first-child {
+                border-radius: $border-radius 0 0 $border-radius;
+            }
+
+            &:last-child {
+                border-radius: 0 $border-radius $border-radius 0;
+            }
+
+            &.active {
+                background-color: $white;
+                font-weight: $font-bold;
+                color: $blue;
+
+                .p-button-label {
+                    font-weight: $font-bold;
+                    color: $blue;
+                }
+            }
+        }
+
+          &__tab--full {
+            border-radius: $border-radius $border-radius $border-radius $border-radius !important;
+        }
+    }
+}
+
+schedule-direction-switch {
+    .tabs__tab {
+        flex-basis: auto !important;
+    }
+
+    @media (max-width: $media-breakpoint-mobile) {
+        max-width: 100% !important;
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/page-time-selector.scss b/apps/react/src/styles/pages/board/components/page-time-selector.scss
new file mode 100644
index 000000000..a24106aa5
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/page-time-selector.scss
@@ -0,0 +1,87 @@
+@use 'sass:math';
+
+schedule-page-time-selector-component,
+time-selector {
+    .wrapper--time-selector {
+        padding: 0 $space-xl;
+        height: calc(#{$button-height} + 10px);
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        flex-wrap: nowrap;
+
+        .time-selector {
+            width: 100%;
+
+            .p-slider {
+                background-color: $blue-light2;
+
+                &.p-slider-horizontal {
+                    height: 6px;
+                }
+
+                .p-slider-range {
+                    background-color: $blue-light;
+                }
+
+                .p-slider-handle {
+                    background-color: $blue-light;
+                    height: $slider-handle-size;
+                    width: $slider-handle-size;
+                    border: 2px solid $white;
+                    margin-top: math.div(-$slider-handle-size, 2);
+                    transition-duration: 0.2s;
+                    cursor: pointer;
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: $blue;
+                    }
+                }
+            }
+        }
+
+        .time-selector__label {
+            margin-right: $space-xl;
+            white-space: nowrap;
+            @include font-small($gray);
+        }
+
+        .time-selector__value {
+            margin-left: $space-xl;
+            white-space: nowrap;
+            font-size: $font-size-l;
+        }
+
+        &.compact-view {
+            flex-direction: column;
+            height: auto;
+            padding: 0;
+            margin-top: $space-xl;
+            padding-bottom: $space-s;
+
+            .time-selector__label-value {
+                @include flex-center-align();
+                justify-content: space-between;
+                flex-wrap: wrap;
+                margin-bottom: $space-m;
+                width: 100%;
+
+                .time-selector__value {
+                    @include font-small($text-color);
+                    margin-bottom: $space-s;
+                    margin-left: 0px;
+                }
+
+                .time-selector__label {
+                    margin-bottom: $space-s;
+                }
+            }
+
+            .time-selector {
+                padding: 0 8px;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/components/page-your-search.scss b/apps/react/src/styles/pages/board/components/page-your-search.scss
new file mode 100644
index 000000000..97acdcd9f
--- /dev/null
+++ b/apps/react/src/styles/pages/board/components/page-your-search.scss
@@ -0,0 +1,80 @@
+search-history {
+    section.frame {
+        .p-accordion-content {
+            padding: 0 !important;
+        }
+
+        .malihu-scrollbar--afl {
+            .mCSB_scrollTools {
+                width: 12px !important;
+            }
+
+            .mCSB_inside > .mCSB_container {
+                margin-right: 12px;
+            }
+
+            .mCSB_inside > .mCSB_container.mCS_y_hidden {
+                margin-right: 0px;
+            }
+
+            .mCSB_draggerContainer {
+                margin: 0;
+            }
+
+            .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
+                display: none;
+            }
+
+            .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+                background-color: $blue-light;
+                width: $scroll-width;
+                border-radius: $border-radius;
+            }
+        }
+    }
+
+    @include left-accordeon;
+
+    .row {
+        display: inline-block;
+        width: 100%;
+        margin-top: 0;
+        cursor: pointer;
+        transition-duration: 0.2s;
+        padding: $space-m 0;
+
+        .svg--plane {
+            fill: $gray;
+        }
+
+        &:hover {
+            background-color: $blue-extra-light;
+
+            .description-row,
+            .row-city {
+                font-weight: $font-medium;
+            }
+
+            .svg--plane {
+                fill: #1b62b4;
+            }
+        }
+
+        .row-icon {
+            display: table-cell;
+            vertical-align: middle;
+            padding: 0 $space-xl;
+        }
+
+        .row-data {
+            display: table-cell;
+            vertical-align: middle;
+
+            .description-row {
+                margin-top: 3px;
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/board/index.scss b/apps/react/src/styles/pages/board/index.scss
new file mode 100644
index 000000000..50d731b54
--- /dev/null
+++ b/apps/react/src/styles/pages/board/index.scss
@@ -0,0 +1,26 @@
+@import 'components/page-time-selector';
+@import 'components/page-tabs';
+@import 'components/page-filters';
+@import 'components/page-your-search';
+@import 'components/page-date-tab-selector';
+@import 'components/page-breadcrumds';
+@import 'components/flight-icons';
+@import 'components/city-autocomplite.scss';
+@import 'components/page-loader';
+@import 'components/flight-number-filter.scss';
+@import 'board-search-result';
+@import 'board-flight-header';
+@import 'board-flight-body';
+@import 'start';
+@import 'components/flight-details-row/flight-details-row';
+@import 'components/details/board-details';
+@import 'components/details/flight-details-info';
+@import 'components/details/flight-details';
+@import 'components/details/flight-details-schedule';
+@import 'components/details/flight-details-wrapper';
+@import 'components/details/flight-details-full-route';
+@import 'components/details/flight-details-icons-update-time';
+@import 'components/details/flight-details-list';
+@import 'components/details/details-back.scss';
+@import '../adaptive/schedule-page-filters-adaptive';
+@import '../adaptive/flight_details-row';
diff --git a/apps/react/src/styles/pages/board/start.scss b/apps/react/src/styles/pages/board/start.scss
new file mode 100644
index 000000000..ef844e489
--- /dev/null
+++ b/apps/react/src/styles/pages/board/start.scss
@@ -0,0 +1,152 @@
+online-board-start-page,
+schedule-start {
+    section.frame {
+        padding: 0;
+
+        h2 {
+            padding: 50px;
+            padding-bottom: 20px;
+        }
+
+        .titles-container {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding: 0 50px;
+            padding-bottom: 50px;
+
+            .title {
+                width: 50%;
+                padding: 30px;
+                padding-right: 50px;
+                padding-left: 65px;
+                background-repeat: no-repeat;
+                background-position: left center;
+
+                a {
+                    cursor: default;
+                    font-size: $font-size-xl;
+                }
+
+                div {
+                    color: $gray;
+                    padding-top: $space-s;
+                }
+
+                &.title1 {
+                    background-image: url('~src/assets/img/title-icon-1.svg');
+                }
+
+                &.title2 {
+                    background-image: url('~src/assets/img/title-icon-2.svg');
+                }
+
+                &.title3 {
+                    background-image: url('~src/assets/img/title-icon-3.svg');
+                }
+
+                &.title4 {
+                    background-image: url('~src/assets/img/title-icon-4.svg');
+                }
+            }
+        }
+    }
+
+    .not-found-location {
+        background-repeat: no-repeat;
+        background-position: left center;
+        background-image: url('~src/assets/img/not-found-location.svg');
+        padding-left: 40px;
+        @include font-small();
+        color: transparentize($color: $white, $amount: 0.3);
+        font-size: $font-size-s;
+        max-width: 620px;
+        margin-top: $space-xl;
+        white-space: pre-line;
+        line-height: 1.4;
+    }
+
+    @media (max-width: $media-breakpoint-mobile) {
+        section.frame h2 {
+            font-size: 24px;
+        }
+    }
+
+    @media (max-width: $media-breakpoint-mobile) {
+        section.frame h2 {
+            padding: 20px;
+            font-size: 20px;
+            line-height: 28px;
+            padding-bottom: 0px;
+            padding-top: 30px;
+        }
+
+        .titles-container {
+            padding: 20px !important;
+            padding-top: 0 !important;
+
+            div.title {
+                width: 100% !important;
+                padding: 20px !important;
+                padding-left: 50px !important;
+                background-size: 35px auto !important;
+
+                a {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}
+
+schedule-start {
+    .titles-container {
+        .title {
+            &.title1 {
+                background-image: url('~src/assets/img/schedule-title-icon-1.svg') !important;
+            }
+
+            &.title2 {
+                background-image: url('~src/assets/img/schedule-title-icon-2.svg') !important;
+            }
+
+            &.title3 {
+                background-image: url('~src/assets/img/schedule-title-icon-3.svg') !important;
+            }
+
+            &.title4 {
+                background-image: url('~src/assets/img/schedule-title-icon-4.svg') !important;
+            }
+
+            &.title5 {
+                background-image: url('~src/assets/img/schedule-title-icon-5.svg') !important;
+            }
+
+            &.title6 {
+                background-image: url('~src/assets/img/schedule-title-icon-6.svg') !important;
+            }
+        }
+    }
+
+    .popular-chapters-container {
+        background-color: $blue-extra-light;
+        border-top: 1px solid $border;
+        padding: 50px 50px 30px;
+        border-radius: 0 0 $border-radius $border-radius;
+
+        h3 {
+            font-size: 20px;
+            margin: 0;
+            font-weight: $font-regular;
+            padding-bottom: 20px !important;
+
+            @media (max-width: $media-breakpoint-mobile) {
+                padding-bottom: 0px !important;
+            }
+        }
+
+        .titles-container {
+            padding: 0 !important;
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/schedule/details/schedule-details.scss b/apps/react/src/styles/pages/schedule/details/schedule-details.scss
new file mode 100644
index 000000000..f6da9526f
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/details/schedule-details.scss
@@ -0,0 +1,20 @@
+schedule-flight-details-view {
+    @include details-accordion();
+
+    p-accordiontab:not(:nth-last-child(1)) {
+        .p-accordion-header {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-bottom: 1px solid $border;
+        }
+    }
+
+    .multi-flight--details {
+        border-radius: 0 0 3px 3px !important;
+        overflow: hidden;
+    }
+
+    section.frame.sticky-panel {
+        border-radius: 3px 3px 0 0 !important;
+    }
+}
diff --git a/apps/react/src/styles/pages/schedule/download-schedule-dialog.scss b/apps/react/src/styles/pages/schedule/download-schedule-dialog.scss
new file mode 100644
index 000000000..e215ce105
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/download-schedule-dialog.scss
@@ -0,0 +1,186 @@
+$right-part-width: 200px;
+
+download-schedule-dialog {
+    .p-overlaypanel {
+        position: relative;
+        top: auto !important;
+        left: auto !important;
+        z-index: 100;
+        margin: 0;
+        margin-top: -1px;
+        border: 1.3px solid $border-blue;
+        box-shadow: 0 2px 2px #b1b1b134;
+        border-radius: 0 0 $border-radius $border-radius;
+
+        &:before,
+        &:after {
+            display: none;
+        }
+
+        .p-overlaypanel-content {
+            padding: 0 !important;
+
+            .p-tabview {
+                display: flex;
+                flex-direction: row-reverse;
+                padding: 0;
+
+                .p-tabview-nav {
+                    background-color: $blue-extra-light;
+                    margin-bottom: 0;
+                    border-left: 1.3px solid $border-blue;
+                    border-radius: 0;
+
+                    li {
+                        background-color: transparent;
+                        margin: 0;
+                        top: auto;
+                        border: none;
+                        float: none;
+                        border: none;
+                        border-radius: 0;
+                        border-top: 1px solid transparent;
+                        border-bottom: 1px solid transparent;
+                        margin-left: -1.3px;
+
+                        a {
+                            font-weight: $font-regular;
+                            color: $blue;
+                            padding: $space-l $space-xl;
+                            border: none;
+                            border-radius: 0;
+                        }
+
+                        &.p-tabview-selected {
+                            background-color: $white;
+                            border-top: 1px solid $border;
+                            border-bottom: 1px solid $border;
+
+                            &:hover {
+                                border-top: 1px solid $border !important;
+                                border-bottom: 1px solid $border !important;
+                                border-radius: 0;
+                                background-color: $white !important;
+                            }
+
+                            a {
+                                color: $text-color;
+                            }
+                        }
+
+                        &:hover {
+                            border: none !important;
+                            border-top: 1px solid transparent !important;
+                            border-bottom: 1px solid transparent !important;
+                            border-radius: 0;
+                            background-color: transparent !important;
+                        }
+                    }
+
+                    li:nth-child(1) {
+                        &.p-tabview-selected {
+                            border-top: 1px solid $white !important;
+                        }
+                    }
+                }
+
+                .p-tabview-panels {
+                    border: none;
+                    padding: 0;
+
+                    .p-calendar {
+                        padding: 20px;
+
+                        .p-datepicker-next,
+                        .p-datepicker-prev {
+                            display: none;
+                        }
+                    }
+
+                    .two-calendars {
+                        .p-datepicker-next,
+                        .p-datepicker-prev {
+                            display: block;
+                        }
+
+                        td:first-child {
+                            .p-calendar {
+                                padding-right: $space-m;
+                            }
+                        }
+
+                        td:last-child {
+                            .p-calendar {
+                                padding-left: $space-m;
+                            }
+                        }
+                    }
+
+                    .p-datepicker {
+                        border: none;
+                        padding: 0px;
+                    }
+                }
+            }
+
+            .panel-bottom {
+                padding: $space-xl;
+                border-top: 1.3px solid $border-blue;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+
+                .download-schedule-button {
+                    height: $small-button-height;
+                    width: $right-part-width - $space-xl;
+                    margin-left: $space-l;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: $media-breakpoint-small-tablet) {
+    download-schedule-dialog {
+        .p-overlaypanel {
+            .p-overlaypanel-content {
+                .p-tabview {
+                    flex-direction: column;
+
+                    .p-tabview-nav {
+                        border-left: none;
+                        border-bottom: 1.3px solid $border-blue;
+
+                        li {
+                            margin-left: 0 !important;
+                        }
+                    }
+                }
+
+                .panel-bottom {
+                    flex-direction: column;
+
+                    .download-schedule-button {
+                        width: 100%;
+                        margin-top: $space-xl;
+                        margin-left: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    .p-tabview-panel {
+        display: flex;
+        justify-content: center;
+    }
+
+    table.two-calendars {
+        > tr {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/schedule/flight/schedule-flight-body.scss b/apps/react/src/styles/pages/schedule/flight/schedule-flight-body.scss
new file mode 100644
index 000000000..246b4d905
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/flight/schedule-flight-body.scss
@@ -0,0 +1,40 @@
+connecting-flight-body,
+multi-flight-body,
+schedule-search-result-flight-body {
+    .flight-details,
+    flight-schedule-details {
+        padding: $text-margin-bottom $space-xl $space-m $space-xl;
+
+        &__full-route {
+            border: 1px solid $border;
+            border-radius: $border-radius;
+            background-color: $white;
+            padding: $space-xl;
+            margin-bottom: $space-xl;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-items: stretch;
+            position: relative;
+        }
+
+        &__container {
+            border-radius: $border-radius;
+            background-color: $white;
+            border: 1px dashed $border;
+            padding: $space-s 0;
+        }
+
+        flight-details-body-actions {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+            button + button,
+            a + button,
+            button + a {
+                margin-left: $space-m;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/schedule/flight/schedule-flight-header.scss b/apps/react/src/styles/pages/schedule/flight/schedule-flight-header.scss
new file mode 100644
index 000000000..5f282702b
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/flight/schedule-flight-header.scss
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/react/src/styles/pages/schedule/home.scss b/apps/react/src/styles/pages/schedule/home.scss
new file mode 100644
index 000000000..e886a9aa3
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/home.scss
@@ -0,0 +1,71 @@
+.schedule-view-button {
+    margin-top: $space-xl !important;
+    width: 100%;
+    height: $standard-button-height;
+}
+
+.schedule-title-tabs {
+    @include flex-center-align();
+    justify-content: space-between;
+
+    @media (max-width: $media-breakpoint-mobile) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+.schedule-tabs-desktop {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.checkbox-schedule {
+    margin-top: $space-xl;
+}
+
+.page-footer-note {
+    padding: $space-xl;
+    background-color: $blue-extra-light;
+    border-top: 1px solid $border;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 0 0 $border-radius $border-radius;
+
+    .page-footer-note--container {
+        max-width: 700px;
+        @include font-small();
+        line-height: 16px;
+
+        b {
+            font-weight: $font-bold;
+        }
+
+        .line:not(:last-child) {
+            margin-bottom: $space-m;
+        }
+
+        .line1 {
+            display: flex;
+            align-items: flex-start;
+
+            .sort-note {
+                font-size: 10px;
+                margin-right: 3px;
+                margin-top: -1px;
+            }
+        }
+    }
+}
+
+.time-note--container {
+    max-width: 700px;
+    @include font-small();
+    line-height: 16px;
+    display: flex;
+    align-items: flex-start;
+    .sort-note {
+        font-size: 10px;
+        margin-right: 3px;
+        margin-top: -1px;
+    }
+}
diff --git a/apps/react/src/styles/pages/schedule/index.scss b/apps/react/src/styles/pages/schedule/index.scss
new file mode 100644
index 000000000..3a8cc7f5e
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/index.scss
@@ -0,0 +1,9 @@
+@import 'schedule-search-result';
+@import 'schedule-search-result-day';
+@import 'schedule-search-result-header';
+@import 'flight/schedule-flight-header';
+@import 'flight/schedule-flight-body';
+@import 'schedule-flight-select';
+@import 'details/schedule-details';
+@import 'download-schedule-dialog';
+@import 'home';
diff --git a/apps/react/src/styles/pages/schedule/schedule-flight-select.scss b/apps/react/src/styles/pages/schedule/schedule-flight-select.scss
new file mode 100644
index 000000000..c12ef14e2
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/schedule-flight-select.scss
@@ -0,0 +1,29 @@
+schedule-flight-select {
+    section.frame {
+        margin-bottom: $space-xl;
+        padding: 0 $space-xl;
+
+        &.multi-flight-book {
+            position: relative;
+
+            flight-select-part:first-child {
+
+                .part-header__booking {
+                    transform: translate(0, 105%);
+                    padding: 0 $space-m;
+                    background-color: $white;
+                    height: 33px;
+                }
+            }
+
+            flight-select-part:last-child {
+                .part-header__booking {
+                    opacity: 0;
+                    padding: 0 10px;
+                }
+            }
+        }
+    }
+}
+
+@import '../adaptive/schedule-flight-select-adaptive.scss';
diff --git a/apps/react/src/styles/pages/schedule/schedule-search-result-day.scss b/apps/react/src/styles/pages/schedule/schedule-search-result-day.scss
new file mode 100644
index 000000000..03fcfc107
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/schedule-search-result-day.scss
@@ -0,0 +1,11 @@
+schedule-search-result-day {
+    @include flex-center-align();
+    justify-content: space-between;
+    padding: $space-xl;
+
+    h3 {
+        margin-top: $text-margin-bottom;
+        color: $text-color;
+        font-weight: $font-medium;
+    }
+}
diff --git a/apps/react/src/styles/pages/schedule/schedule-search-result-header.scss b/apps/react/src/styles/pages/schedule/schedule-search-result-header.scss
new file mode 100644
index 000000000..6c4aa8b59
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/schedule-search-result-header.scss
@@ -0,0 +1,102 @@
+
+schedule-search-result-header {
+    button {
+        min-height: 20px;
+        min-width: 20px;
+        border: none !important;
+    }
+
+    .schedule-search-result-header {
+        @include h-spacing($space-m);
+        align-items: center;
+        display: flex;
+        padding: 0 $space-xl;
+
+        > div {
+            @include font-small();
+            align-items: center;
+            display: flex;
+            height: $big-button-height;
+            text-transform: uppercase;
+            transition-duration: 0.1s;
+
+            .sort-label {
+                position: relative;
+
+                &.label-note {
+                    padding-right: $space-m;
+                }
+
+                .sort-note {
+                    @include font-small();
+                    font-size: $font-size-xs;
+                    position: absolute;
+                    top: -5px;
+                    right: 0;
+                }
+            }
+        }
+
+        &__flight {
+            width: 80px;
+        }
+
+        &__company {
+            width: 120px;
+            @include tablets() {
+                width: 90px;
+            }
+        }
+
+        &__departure {
+            flex: 1;
+        }
+
+        &__arrival {
+            flex: 1;
+        }
+
+        &__time {
+            width: 80px;
+            display: flex;
+            justify-content: center;
+        }
+
+        .sort-container {
+            margin-left: $space-s;
+            @include flex-center-align();
+            flex-direction: column;
+
+            > button.sort {
+                height: $button-sort-height;
+                width: $button-sort-height;
+                @include flex-center-align();
+                justify-content: center;
+                background-color: $white;
+                border: none;
+                border: 1px solid transparent;
+                opacity: 0.3;
+
+                &:hover {
+                    border-color: $border;
+                    opacity: 0.8;
+                }
+
+                &:focus {
+                    opacity: 1;
+                    border-top: 1px solid;
+                    border-right: 1px solid;
+                }
+
+                .p-button-label {
+                    display: none;
+                }
+            }
+            > button.active {
+                border: 1px solid #002776;
+                border-radius: 0;
+                opacity: 0.7;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/pages/schedule/schedule-search-result.scss b/apps/react/src/styles/pages/schedule/schedule-search-result.scss
new file mode 100644
index 000000000..c6507dfb8
--- /dev/null
+++ b/apps/react/src/styles/pages/schedule/schedule-search-result.scss
@@ -0,0 +1,108 @@
+@mixin flight-border-top($left: $space-xl, $right: $space-xl) {
+    position: absolute;
+    content: '';
+    display: block;
+    left: $left;
+    right: $right;
+    height: 1.3px;
+    background-color: $border;
+    top: 0;
+    transition-duration: 0.2s;
+}
+
+schedule-days {
+    .frame {
+        border-radius: 0;
+        margin-top: -1px;
+
+        p-accordion {
+            .p-accordion {
+                p-accordionTab {
+                    display: block;
+                    position: relative;
+
+                    &::before {
+                        @include flight-border-top();
+                        z-index: 100;
+                    }
+
+                    &:first-child {
+                        &::before {
+                            display: none;
+                        }
+                    }
+
+                    &.selected {
+                        &::before {
+                            left: 0;
+                            right: 0;
+                        }
+
+                        & + p-accordionTab {
+                            &::before {
+                                left: 0;
+                                right: 0;
+                            }
+                        }
+                    }
+
+                    .p-accordion-header {
+                        margin-top: 0;
+                        border-radius: 0;
+
+                        > a {
+                            padding: 0px;
+                        }
+                    }
+
+                    .p-accordion-content {
+                        padding: 0;
+
+                        .schedule-flights {
+                            p-accordiontab {
+                                &:first-child {
+                                    &::before {
+                                        display: block !important;
+                                    }
+                                }
+
+                                .p-accordion-header {
+                                    margin-top: 0px !important;
+                                    position: relative;
+                                    transition-duration: 0.2s;
+
+                                    & > a {
+                                        border: none;
+                                        background-color: transparent;
+                                        border-radius: 0px;
+                                        padding: 0 !important;
+                                        position: relative;
+                                        color: $text-color;
+                                        transition-duration: 0.2s;
+
+                                        &:hover {
+                                            background-color: $blue-extra-light;
+                                        }
+                                    }
+
+                                    &.p-highlight {
+                                        background-color: $blue-extra-light;
+                                    }
+                                }
+
+                                .p-accordion-content-wrapper {
+                                    background-color: $blue-extra-light;
+
+                                    > .p-accordion-content {
+                                        background-color: transparent;
+                                        padding: 0px !important;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}