prvi

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_accordion.scss

@@ -0,0 +1,39 @@
+// Accordions
+//
+
+.collapse-icon {
+  position: relative;
+  display: block;
+  align-self: center;
+  width: .875rem;
+  height: .875rem;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    margin-top: -.25rem;
+    margin-left: -.25rem;
+    width: .5rem;
+    height: .5rem;
+    border-bottom: .0625rem solid $gray-400;
+    border-left: .0625rem solid $gray-400;
+    transition: all .3s;
+    transform: rotate(-45deg);
+
+    [aria-expanded="true"] & {
+      transform: rotate(135deg);
+    }
+  }
+}
+
+.accordion > .card {
+  border-radius: $border-radius !important;
+  border: $border-width solid $border-color !important;
+
+  .card-header:last-child {
+    border-bottom: 0;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_alert.scss

@@ -0,0 +1,24 @@
+// Alerts
+//
+
+@each $color, $value in $theme-colors {
+  @if $color != primary and $color != light {
+    @include appwork-alert-variant('.alert-#{$color}', $value);
+    @include appwork-alert-dark-variant('.alert-dark-#{$color}', $value);
+  }
+}
+
+// *******************************************************************************
+// * RTL
+
+@include rtl-only {
+  .alert-dismissible {
+    padding-right: $alert-padding-x;
+    padding-left: ($close-font-size + $alert-padding-x * 2);
+  }
+
+  .alert-dismissible .close {
+    right: auto;
+    left: 0;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_app-brand.scss

@@ -0,0 +1,72 @@
+.app-brand {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  line-height: 1;
+  min-height: 1px;
+}
+
+.app-brand-logo {
+  display: block;
+  overflow: hidden;
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-height: 1px;
+
+  img,
+  svg {
+    display: block;
+  }
+}
+
+.app-brand-text {
+  display: block;
+  flex-shrink: 0;
+}
+
+.app-brand .layout-sidenav-toggle {
+  display: block;
+}
+
+// Within sidenav
+
+@mixin appwork-app-brand-collapsed() {
+  .app-brand {
+    padding-right: 0;
+    padding-left: 0;
+    width: $sidenav-collapsed-width;
+  }
+
+  .app-brand-logo,
+  .app-brand-text {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .app-brand-logo ~ .app-brand-text,
+  .app-brand .layout-sidenav-toggle {
+    display: none;
+  }
+}
+
+.sidenav-vertical .app-brand {
+  padding-right: $sidenav-vertical-link-padding-x - .25rem;
+  padding-left: $sidenav-vertical-link-padding-x - .25rem;
+}
+
+.sidenav-horizontal .app-brand,
+.sidenav-horizontal .app-brand + .sidenav-divider {
+  display: none !important;
+}
+
+:not(.layout-sidenav) > .sidenav-vertical.sidenav-collapsed:not(.layout-sidenav):not(:hover) {
+  @include appwork-app-brand-collapsed();
+}
+
+@media (min-width: map-get($grid-breakpoints, lg)) {
+  .layout-collapsed:not(.layout-sidenav-hover):not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav {
+    @include appwork-app-brand-collapsed();
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_badge.scss

@@ -0,0 +1,57 @@
+// Badges
+//
+
+@each $color, $value in $theme-colors {
+  @if $color != primary and $color != light {
+    @include appwork-badge-variant('.badge-#{$color}', $value);
+    @include appwork-badge-outline-variant('.badge-outline-#{$color}', $value);
+  }
+}
+
+@include appwork-badge-variant('.badge-default', $badge-default-bg, $body-color);
+@include appwork-badge-outline-variant('.badge-outline-default', $badge-default-bg, $badge-outline-default-color);
+
+// *******************************************************************************
+// * Dots
+
+.badge.badge-dot {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: .5em;
+  height: .5em;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+// *******************************************************************************
+// * Indicators
+
+.badge.indicator {
+  position: absolute;
+  top: auto;
+  display: inline-block;
+  margin: 0;
+  transform: translate(-50%, 25%);
+
+  @include rtl-style {
+    transform: translate(50%, 25%);
+  }
+
+  &:not(.badge-dot) {
+    padding: 0 .2em;
+    font-size: .6em;
+    line-height: 1.2em;
+    transform: translate(-50%, -10%);
+
+    @include rtl-style {
+      transform: translate(50%, -10%);
+    }
+  }
+}
+
+@if $material-style {
+  .btn .badge.indicator:not(.badge-dot) {
+    font-size: .75em;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_base.scss

@@ -0,0 +1,208 @@
+// Base
+//
+
+body {
+  -moz-font-feature-settings: "liga" on;
+  -webkit-font-smoothing: antialiased;
+          font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+@include media-breakpoint-up(md) {
+  button.list-group-item {
+    outline: none;
+  }
+}
+
+@if $material-style {
+  .waves-ripple {
+    position: absolute !important;
+  }
+}
+
+// *******************************************************************************
+// * IE Fixes
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  // Fix IE parent container height bug when containing image with fluid width
+  .card,
+  .card-body,
+  .media,
+  .flex-column,
+  .tab-content {
+    min-height: 1px;
+  }
+
+  img {
+    min-height: 1px;
+    height: auto;
+  }
+}
+
+// *******************************************************************************
+// * Containers
+
+.container,
+.container-fluid {
+  padding-right: $container-padding-x-sm;
+  padding-left: $container-padding-x-sm;
+
+  @include media-breakpoint-up(lg) {
+    padding-right: $container-padding-x;
+    padding-left: $container-padding-x;
+  }
+}
+
+// *******************************************************************************
+// * Thumbnails
+
+.img-thumbnail {
+  position: relative;
+  display: block;
+}
+
+.img-thumbnail img {
+  z-index: 1;
+}
+
+.img-thumbnail-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  display: block;
+  opacity: 0;
+  transition: all .2s ease-in-out;
+  transform: translate(-50%, -50%);
+
+  .img-thumbnail:hover &,
+  .img-thumbnail:focus & {
+    opacity: 1;
+  }
+}
+
+// Overlay effect
+.img-thumbnail-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  transition: all .2s ease-in-out;
+
+  .img-thumbnail:not(:hover):not(:focus) & {
+    opacity: 0 !important;
+  }
+}
+
+.img-thumbnail-shadow {
+  transition: box-shadow .2s;
+
+  @include hover-focus {
+    box-shadow: 0 5px 20px rgba($black, .4);
+  }
+}
+
+// Zoom-in effect
+.img-thumbnail-zoom-in {
+  overflow: hidden;
+
+  img {
+    transition: all .3s ease-in-out;
+    transform: translate3d(0);
+  }
+
+  .img-thumbnail-content {
+    transform: translate(-50%, -50%) scale(.6);
+  }
+
+  @include hover-focus {
+    img {
+      transform: scale(1.1);
+    }
+
+    .img-thumbnail-content {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+}
+
+// *******************************************************************************
+// * Material animations
+
+@if not $material-style {
+  @include keyframes(dropdownAnimation) {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+} @else {
+  @include keyframes(dropdownAnimation) {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    80% {
+      transform: scale(1);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @include keyframes(topTooltipAnimation) {
+    0% {
+      opacity: 0;
+      transform: translateY(3px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @include keyframes(bottomTooltipAnimation) {
+    0% {
+      opacity: 0;
+      transform: translateY(-3px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @include keyframes(leftTooltipAnimation) {
+    0% {
+      opacity: 0;
+      transform: translateX(3px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @include keyframes(rightTooltipAnimation) {
+    0% {
+      opacity: 0;
+      transform: translateX(-3px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
+// *******************************************************************************
+// * RTL
+
+@if $rtl-support {
+  [dir=rtl] body {
+    text-align: right;
+    direction: rtl;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_breadcrumb.scss

@@ -0,0 +1,36 @@
+// Breadcrumbs
+//
+
+.breadcrumb-item,
+.breadcrumb-item a {
+  color: $breadcrumb-color;
+
+  @include hover-focus {
+    color: $breadcrumb-active-color;
+  }
+}
+
+.breadcrumb-item.active a {
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    color: inherit;
+  }
+}
+
+// *******************************************************************************
+// * RTL
+
+@include rtl-only {
+  .breadcrumb-item +.breadcrumb-item {
+    padding-left: 0;
+    padding-right: $breadcrumb-item-padding;
+
+    &::before {
+      padding-left: $breadcrumb-item-padding;
+      padding-right: 0;
+      content: "#{$breadcrumb-divider-rtl}";
+    }
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_button-group.scss

@@ -0,0 +1,128 @@
+// Button groups
+//
+
+@if not $material-style {
+  :not(.btn-group):not(.input-group-prepend):not(.input-group-append)>.btn-group>.btn:not(.btn-default):not([class*="btn-outline-"]):first-child,
+  .btn-group>.btn-group:first-child>.btn:not(.btn-default):not([class*="btn-outline-"]):first-child,
+  .input-group-prepend>.btn:not(.btn-default):not([class*="btn-outline-"]):first-child,
+  .input-group-append>.btn:not(.btn-default):not([class*="btn-outline-"]):first-child,
+  .input-group-prepend>.btn-group:first-child>.btn:not(.btn-default):not([class*="btn-outline-"]):first-child,
+  .input-group-append>.btn-group:first-child>.btn:not(.btn-default):not([class*="btn-outline-"]):first-child {
+    @include ltr-style {
+      border-left-color: transparent;
+    }
+    @include rtl-style {
+      border-right-color: transparent;
+    }
+  }
+
+  :not(.btn-group):not(.input-group-prepend):not(.input-group-append)>.btn-group>.btn:not(.btn-default):not([class*="btn-outline-"]):last-of-type,
+  .btn-group>.btn-group:last-child>.btn:not(.btn-default):not([class*="btn-outline-"]):last-of-type,
+  .input-group-append>.btn:not(.btn-default):not([class*="btn-outline-"]):last-of-type,
+  .input-group-prepend>.btn:not(.btn-default):not([class*="btn-outline-"]):last-of-type,
+  .input-group-append>.btn-group:last-child>.btn:not(.btn-default):not([class*="btn-outline-"]):last-of-type,
+  .input-group-prepend>.btn-group:last-child>.btn:not(.btn-default):not([class*="btn-outline-"]):last-of-type {
+    @include ltr-style {
+      border-right-color: transparent;
+    }
+    @include rtl-style {
+      border-left-color: transparent;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Sizing
+
+.btn-group-xs > .btn {
+  @extend .btn-xs;
+}
+
+.btn-group-xl > .btn {
+  @extend .btn-xl;
+}
+
+// *******************************************************************************
+// * Split button
+
+.dropdown-toggle-split,
+.btn-lg + .dropdown-toggle-split,
+.btn-group-lg > .btn + .dropdown-toggle-split,
+.input-group-lg .btn + .dropdown-toggle-split,
+.btn-xl + .dropdown-toggle-split,
+.btn-group-xl > .btn + .dropdown-toggle-split {
+  padding-right: .7em;
+  padding-left: .7em;
+}
+
+.btn-sm + .dropdown-toggle-split,
+.btn-group-sm > .btn + .dropdown-toggle-split,
+.input-group-sm .btn + .dropdown-toggle-split {
+  padding-right: .6em;
+  padding-left: .6em;
+}
+
+.btn-xs + .dropdown-toggle-split,
+.btn-group-xs > .btn + .dropdown-toggle-split {
+  padding-right: .5em;
+  padding-left: .5em;
+}
+
+// *******************************************************************************
+// * RTL
+
+@include rtl-only {
+  .btn-group .btn[class] {
+    @include border-radius($border-radius);
+  }
+
+  .btn-group .btn-xs[class],
+  .btn-group-xs .btn[class] {
+    @include border-radius($border-radius-xs);
+  }
+
+  .btn-group .btn-sm[class],
+  .btn-group-sm .btn[class] {
+    @include border-radius($border-radius-sm);
+  }
+
+  .btn-group .btn-lg[class],
+  .btn-group-lg .btn[class] {
+    @include border-radius($border-radius-lg);
+  }
+
+  .btn-group .btn-xl[class],
+  .btn-group-xl .btn[class] {
+    @include border-radius($border-radius-xl);
+  }
+
+  .btn-group {
+    > .btn:not(:first-child),
+    > .btn-group:not(:first-child) {
+      margin-left: 0;
+      margin-right: -$btn-border-width;
+    }
+
+    > .btn:not(:last-child):not(.dropdown-toggle),
+    > .btn-group:not(:last-child) > .btn {
+      @include border-left-radius(0);
+    }
+
+    > .btn:not(:first-child),
+    > .btn-group:not(:first-child) > .btn {
+      @include border-right-radius(0);
+    }
+  }
+
+  .btn-group-vertical {
+    > .btn:not(:last-child):not(.dropdown-toggle),
+    > .btn-group:not(:last-child) > .btn {
+      @include border-bottom-radius(0);
+    }
+
+    > .btn:not(:first-child),
+    > .btn-group:not(:first-child) > .btn {
+      @include border-top-radius(0);
+    }
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_buttons.scss

@@ -0,0 +1,123 @@
+// Buttons
+//
+
+.btn {
+  cursor: pointer;
+
+  &.disabled,
+  &:disabled {
+    cursor: default;
+  }
+}
+
+@if $material-style {
+  .btn {
+    text-transform: uppercase;
+  }
+}
+
+// Babge within button
+.btn .badge {
+  @include transition($btn-transition);
+}
+
+label.btn {
+  margin-bottom: 0;
+}
+
+// *******************************************************************************
+// * Alternate buttons
+
+@each $color, $value in $theme-colors {
+  @if $color != primary {
+    @if $material-style {
+      @include appwork-material-button-variant('.btn-#{$color}', $value);
+      @include appwork-material-button-outline-variant('.btn-outline-#{$color}', $value);
+    } @else {
+      @include appwork-button-variant('.btn-#{$color}', $value);
+      @include appwork-button-outline-variant('.btn-outline-#{$color}', $value);
+    }
+  }
+}
+
+// Default button
+@if $material-style {
+  @include appwork-material-button-variant('.btn-default', $btn-default-bg, $btn-default-color, $btn-default-color);
+  @include appwork-material-button-outline-variant('.btn-outline-default', $btn-default-border, $btn-default-color);
+} @else {
+  @include appwork-button-variant('.btn-default', $btn-default-bg, $btn-default-color, $btn-default-border);
+  @include appwork-button-outline-variant('.btn-outline-default', $btn-default-border, $btn-default-color);
+}
+
+// *******************************************************************************
+// * Sizes
+
+.btn-xl {
+  @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $btn-font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
+}
+
+.btn-xs {
+  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-line-height-xs, $btn-border-radius-xs);
+}
+
+// *******************************************************************************
+// * Link buttons
+
+.btn.btn-link {
+  font-size: inherit;
+
+  @if $material-style {
+    text-transform: none;
+
+    .waves-ripple {
+      display: none !important;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Icon button
+
+.icon-btn {
+  $icon-btn-size:    ($btn-font-size    * $btn-line-height)    + ($btn-padding-y    * 2);
+  $icon-btn-size-xl: ($btn-font-size-xl * $btn-line-height-xl) + ($btn-padding-y-xl * 2);
+  $icon-btn-size-lg: ($btn-font-size-lg * $btn-line-height-lg) + ($btn-padding-y-lg * 2);
+  $icon-btn-size-sm: ($btn-font-size-sm * $btn-line-height-sm) + ($btn-padding-y-sm * 2);
+  $icon-btn-size-xs: ($btn-font-size-xs * $btn-line-height-xs) + ($btn-padding-y-xs * 2);
+  $borders-width:    $btn-border-width * 2;
+
+  width: calc(#{$icon-btn-size} + #{$borders-width});
+  padding: 0;
+  line-height: $icon-btn-size;
+
+  &.btn-xl {
+    width: calc(#{$icon-btn-size-xl} + #{$borders-width});
+    line-height: $icon-btn-size-xl;
+  }
+
+  &.btn-lg {
+    width: calc(#{$icon-btn-size-lg} + #{$borders-width});
+    line-height: $icon-btn-size-lg;
+  }
+
+  &.btn-sm {
+    width: calc(#{$icon-btn-size-sm} + #{$borders-width});
+    line-height: $icon-btn-size-sm;
+  }
+
+  &.btn-xs {
+    width: calc(#{$icon-btn-size-xs} + #{$borders-width});
+    line-height: $icon-btn-size-xs;
+  }
+}
+
+// *******************************************************************************
+// * Without border
+
+.btn.borderless {
+  &:not(.active):not(:active):not(:hover):not(:focus),
+  :not(.show) > &.dropdown-toggle:not(:hover):not(:focus) {
+    border-color: transparent;
+    box-shadow: none;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_card.scss

@@ -0,0 +1,198 @@
+// Cards
+//
+
+.card {
+  background-clip: padding-box;
+  box-shadow: $card-shadow;
+}
+
+.card-link {
+  display: inline-block;
+}
+
+@include rtl-only {
+  .card-link + .card-link {
+    margin-right: $card-spacer-x;
+    margin-left: 0;
+  }
+}
+
+.card-header {
+  line-height: $component-line-height;
+}
+
+@if $material-style {
+  .card-header {
+    border-bottom-width: 1px;
+  }
+
+  .card-footer {
+    border-top-width: 1px;
+  }
+}
+
+// Inner borders
+
+.card-header,
+.card-footer,
+.card hr {
+  border-color: $card-inner-border-color;
+}
+
+.card .list-group-item {
+  border-color: rgba-to-hex($card-inner-border-color);
+}
+
+.card .row-bordered > [class^="col-"],
+.card .row-bordered > [class*=" col-"],
+.card .row-bordered > [class^="col "],
+.card .row-bordered > [class*=" col "],
+.card .row-bordered > [class$=" col"],
+.card .row-bordered > [class="col"] {
+  &::before,
+  &::after {
+    border-color: $card-inner-border-color;
+  }
+}
+
+// *******************************************************************************
+// * Header / Title with elements(controls)
+
+.card-header.with-elements,
+.card-title.with-elements {
+  display: flex;
+
+  width: 100%;
+
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.card-header.with-elements {
+  padding-top: $card-spacer-y / 2;
+  padding-bottom: $card-spacer-y / 2;
+}
+
+.card-header-elements,
+.card-title-elements {
+  display: flex;
+
+  align-items: center;
+  flex-wrap: wrap;
+
+  & + &,
+  > * + * {
+    margin-left: .25rem;
+
+    @include rtl-style {
+      margin-right: .25rem;
+      margin-left: 0;
+    }
+  }
+}
+
+.card-header-title {
+  padding: ($card-spacer-y / 2) 0;
+}
+
+.card-header-elements {
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+}
+
+// *******************************************************************************
+// * List groups
+
+.card > .list-group .list-group-item {
+  padding-right: $card-spacer-x;
+  padding-left: $card-spacer-x;
+}
+
+// *******************************************************************************
+// * Condenced
+
+.card-condenced {
+  .card-header,
+  .card-footer,
+  > .list-group .list-group-item {
+    padding-right: $card-spacer-x-sm;
+    padding-left: $card-spacer-x-sm;
+  }
+
+  .card-body,
+  .card-img-overlay {
+    padding: $card-spacer-x-sm;
+  }
+}
+
+// *******************************************************************************
+// * Hoverable
+
+html:not([dir=rtl]) .card-hover[class],
+html[dir=rtl] .card-hover[class] {
+  transition: all .2s;
+
+  &:not(:hover) {
+    color: $body-color !important;
+    border-color: transparent !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+}
+
+// *******************************************************************************
+// * RTL
+
+@include rtl-only {
+  @include media-breakpoint-up(sm) {
+    .card-group > .card {
+      border: $card-border-width solid $card-border-color;
+      border-radius: $card-border-radius;
+
+      .card-img-top,
+      .card-header:first-child {
+        @include border-top-radius($card-inner-border-radius);
+      }
+
+      .card-img-bottom,
+      .card-footer:last-child {
+        @include border-bottom-radius($card-inner-border-radius);
+      }
+
+      + .card {
+        border-right: 0;
+      }
+    }
+
+    // Handle rounded corners
+    @if $enable-rounded {
+      .card-group > .card {
+        &:not(:last-child) {
+          @include border-left-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-left-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-right-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-right-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_carousel.scss

@@ -0,0 +1,50 @@
+// Carousel
+//
+
+@include rtl-only {
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    transform: translateX(0);
+
+    @supports (transform-style: preserve-3d) {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .carousel-item-next:not(.carousel-item-left),
+  .active.carousel-item-right {
+    transform: translateX(-100%);
+
+    @supports (transform-style: preserve-3d) {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  .carousel-item-prev:not(.carousel-item-right),
+  .active.carousel-item-left {
+    transform: translateX(100%);
+
+    @supports (transform-style: preserve-3d) {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+
+  .carousel-control-prev {
+    right: 0;
+    left: auto;
+  }
+
+  .carousel-control-next {
+    right: auto;
+    left: 0;
+  }
+
+  .carousel-indicators {
+    padding-right: 0; // override <ol> default
+  }
+
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    transform: scaleX(-1);
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_close.scss

@@ -0,0 +1,12 @@
+// Close buttons
+//
+
+.close:focus {
+  outline: 0;
+}
+
+@include rtl-only {
+  .close {
+    float: left;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_custom-forms.scss

@@ -0,0 +1,369 @@
+// Custom forms
+//
+
+// *******************************************************************************
+// * Custom control
+
+.custom-control {
+  min-height: $custom-control-indicator-size;
+  cursor: default;
+
+  @include rtl-style {
+    padding-right: $custom-control-gutter + $custom-control-indicator-size;
+    padding-left: 0;
+  }
+}
+
+.custom-control-label {
+  position: static;
+  @include rtl-style {
+    &::before,
+    &::after {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  // Indicator
+  &::before {
+    top: px-to-rem(floor(rem-to-px(((($line-height-base * $font-size-base) - $custom-control-indicator-size) / 2))));
+    left: 0;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-clip: padding-box;
+    transition: all .2s;
+    pointer-events: auto;
+
+    @include rtl-style {
+      transform: scaleX(-1);
+    }
+
+    @if $material-style {
+      z-index: 2;
+      box-shadow: none !important;
+    }
+  }
+
+  // Material shadow
+  &::after {
+    @if not $material-style {
+      display: none;
+    } @else {
+      content: '';
+      position: absolute;
+      top: px-to-rem(floor(rem-to-px(((($line-height-base * $font-size-base) - $custom-control-indicator-size) / 2))));
+      left: 0;
+      z-index: 1;
+      display: block;
+      width: $custom-control-indicator-size;
+      height: $custom-control-indicator-size;
+      border-radius: 50%;
+      background: rgba($black, .08);
+      opacity: 0;
+      transition: all .2s;
+      transform-origin: center;
+      transform: scale(0) translateZ(0);
+    }
+  }
+}
+
+// Checkbox indicator
+.custom-checkbox .custom-control-label::before {
+  background-size: $custom-checkbox-indicator-bg-size;
+}
+
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
+  background-size: $custom-checkbox-indeterminate-bg-size;
+}
+
+// Radio indicator
+.custom-radio .custom-control-label::before {
+  background-size: $custom-radio-indicator-bg-size;
+}
+
+// Indicator states
+.custom-control-label::before {
+  .custom-control-input:active ~ & {
+    box-shadow: none;
+  }
+
+  .custom-control-input:not(:checked):active ~ & {
+    background-color: $custom-control-indicator-bg;
+  }
+
+  .custom-control-input:disabled ~ & {
+    border-color: $custom-control-indicator-border-color !important;
+    background-color: $custom-control-indicator-disabled-bg !important;
+  }
+
+  .custom-control.custom-checkbox .custom-control-input:disabled:indeterminate ~ & {
+    background-image: url(str-replace(str-replace($custom-checkbox-indeterminate-bg, '_COLOR_', $custom-control-label-disabled-color), "#", "%23"));
+  }
+
+  .custom-control.custom-checkbox .custom-control-input:disabled:checked ~ & {
+    background-image: url(str-replace(str-replace($custom-checkbox-indicator-bg, '_COLOR_', $custom-control-label-disabled-color), "#", "%23"));
+  }
+
+  .custom-control.custom-radio .custom-control-input:disabled:checked ~ & {
+    background-image: url(str-replace(str-replace($custom-radio-indicator-bg, '_COLOR_', $custom-control-label-disabled-color), "#", "%23"));
+  }
+}
+
+// Material states
+@if $material-style {
+  .custom-control-input[class]:active ~ .custom-control-label::before,
+  .custom-control-input[class]:not(:checked):focus ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-border-color;
+  }
+
+  // Shadow
+  .custom-control-label::after {
+    .custom-control-input:focus ~ & {
+      opacity: 1;
+      transform: scale(2.25) translateZ(0);
+    }
+
+    .custom-control-input:active ~ & {
+      opacity: 0;
+      transform: scale(0) translateZ(0);
+    }
+
+    .custom-control-input:disabled ~ & {
+      display: none;
+    }
+  }
+
+  // Hide radio bullet
+  .custom-radio .custom-control-input:not(:checked) ~ .custom-control-label::before {
+    background-size: 0;
+  }
+
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
+    background-color: $custom-control-indicator-bg;
+  }
+}
+
+.custom-controls-stacked .custom-control {
+  display: block;
+  margin-bottom: .5rem;
+}
+
+@include rtl-only {
+  .custom-control-inline {
+    margin-right: 0;
+    margin-left: $custom-control-spacer-x;
+  }
+}
+
+// *******************************************************************************
+// * Custom select
+
+.custom-select {
+  display: block;
+  background-clip: padding-box;
+
+  @include rtl-style {
+    background-image: $custom-select-indicator-rtl;
+    padding-right: $custom-select-padding-x;
+    padding-left: $custom-select-padding-x + $custom-select-indicator-padding;
+    background-position: left $custom-select-padding-x center;
+  }
+
+  @if $material-style {
+    border-bottom-width: 1px;
+    border-radius: 0 !important;
+
+    &:disabled {
+      border-bottom: 1px dotted $material-input-disabled-border-color;
+      color: $material-input-disabled-color;
+    }
+  }
+}
+
+// Inverted
+.custom-select-inverted {
+  background-image: $custom-select-indicator-inverted;
+
+  @include rtl-style {
+    background-image: $custom-select-indicator-inverted-rtl;
+  }
+
+  &,
+  &:focus {
+    background-color: $input-inverted-bg;
+    color: $input-inverted-color;
+    border-color: $input-inverted-border-color;
+  }
+
+  &:disabled {
+    background-color: $custom-select-inverted-disabled-bg;
+    color: $custom-select-inverted-disabled-color;
+    border-color: if($material-style, $material-input-inverted-disabled-border-color, $input-inverted-disabled-bg);
+  }
+
+  &::placeholder {
+    color: $input-inverted-placeholder-color;
+  }
+
+  option {
+    color: $body-color;
+  }
+}
+
+// Sizing
+@include appwork-custom-select-size('sm', $custom-select-padding-x-sm, $line-height-sm, $custom-select-font-size-sm);
+@include appwork-custom-select-size('lg', $custom-select-padding-x-lg, $line-height-lg, $custom-select-font-size-lg);
+
+// Material style
+@if $material-style {
+  @include ltr-only {
+    :not(.input-group) > .custom-select {
+      padding-left: 0;
+      padding-right: $custom-select-padding-x;
+      background-position: right center;
+    }
+  }
+  @include rtl-only {
+    :not(.input-group) > .custom-select {
+      padding-right: 0;
+      padding-left: $custom-select-padding-x;
+      background-position: left center;
+    }
+  }
+}
+
+// Multiple select
+//
+
+@include rtl-only {
+  .custom-select[multiple],
+  .custom-select[size]:not([size="1"]) {
+    background-image: none;
+  }
+}
+
+@if not $material-style {
+  .custom-select[multiple],
+  .custom-select[size]:not([size="1"]) {
+    padding-right: $custom-select-padding-x;
+    padding-left: $custom-select-padding-x;
+  }
+
+  .custom-select-sm,
+  .input-group-sm .custom-select {
+    &[multiple],
+    &[size]:not([size="1"]) {
+      padding-right: $custom-select-padding-x-sm;
+      padding-left: $custom-select-padding-x-sm;
+    }
+  }
+
+  .custom-select-lg,
+  .input-group-lg .custom-select {
+    &[multiple],
+    &[size]:not([size="1"]) {
+      padding-right: $custom-select-padding-x-lg;
+      padding-left: $custom-select-padding-x-lg;
+    }
+  }
+} @else {
+  .custom-select[multiple],
+  .custom-select[size]:not([size="1"]) {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+}
+
+// *******************************************************************************
+// * File input
+
+.custom-file {
+  display: block;
+}
+
+.custom-file-label {
+  background-clip: padding-box;
+  transition: $input-transition;
+
+  @include rtl-style {
+    &::after {
+      right: auto;
+      left: 0;
+      border-right: $custom-file-border-width solid $custom-file-border-color;
+      border-left: 0;
+
+      @include border-radius($custom-file-border-radius 0 0 $custom-file-border-radius);
+    }
+  }
+
+  @if $material-style {
+    padding-right: 0;
+    padding-left: 0;
+    border-bottom-width: 1px;
+  }
+
+  .custom-file-input:disabled ~ & {
+    background: $input-disabled-bg;
+
+    @if $material-style {
+      border-bottom: 1px dotted $material-input-disabled-border-color;
+      color: $material-input-disabled-color;
+    }
+
+    &::before {
+      opacity: .65;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Range select
+
+.custom-range {
+  &::-webkit-slider-thumb {
+    box-shadow: $custom-range-thumb-box-shadow;
+    transition: transform .2s;
+    transform-origin: center;
+
+    &:active {
+      transform: scale(1.4, 1.4);
+    }
+  }
+
+  &::-moz-range-thumb {
+    box-shadow: $custom-range-thumb-box-shadow;
+    transition: transform .2s;
+    transform-origin: center;
+
+    &:active {
+      transform: scale(1.4, 1.4);
+    }
+  }
+
+  &::-ms-thumb {
+    box-shadow: $custom-range-thumb-box-shadow;
+    transition: transform .2s;
+    transform-origin: center;
+
+    &:active {
+      transform: scale(1.4, 1.4);
+    }
+  }
+
+  &:disabled {
+    &::-webkit-slider-runnable-track {
+      background-color: $custom-range-disabled-track-bg;
+    }
+    &::-moz-range-track {
+      background-color: $custom-range-disabled-track-bg;
+    }
+
+    &::-ms-fill-lower {
+      background-color: $custom-range-disabled-track-bg;
+    }
+
+    &::-ms-fill-upper {
+      background-color: $custom-range-disabled-track-bg;
+    }
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_dropdown.scss

@@ -0,0 +1,241 @@
+// Dropdowns
+//
+
+[data-trigger=hover] {
+  outline: 0;
+}
+
+.dropdown-menu {
+  margin: $dropdown-spacer 0;
+  box-shadow: $dropdown-box-shadow;
+
+  @include rtl-style {
+    text-align: right;
+  }
+
+  // Animations
+  @if not $material-style {
+    animation: dropdownAnimation .1s;
+  } @else {
+    transform-origin: top left;
+    animation: dropdownAnimation .25s;
+
+    &.dropdown-menu-right,
+    &.dropdown-menu-right .dropdown-menu {
+      transform-origin: top right;
+    }
+
+    .dropup & {
+      transform-origin: bottom left;
+    }
+
+    .dropup &.dropdown-menu-right,
+    .dropup &.dropdown-menu-right .dropdown-menu {
+      transform-origin: bottom right;
+    }
+  }
+
+  .mega-dropdown > & {
+    left: 0 !important;
+    right: 0 !important;
+  }
+}
+
+.dropdown-item {
+  line-height: $dropdown-link-line-height;
+}
+
+// Badge within dropdown menu
+.dropdown-menu .badge[class^="float-"],
+.dropdown-menu .badge[class*=" float-"] {
+  position: relative;
+  top: .071em;
+}
+
+@if $material-style {
+  .dropdown-item,
+  .dropdown-menu > li {
+    display: block;
+
+    // Ripple
+    .waves-ripple {
+      background: rgba(0, 0, 0, .1);
+    }
+    &.active .waves-ripple,
+    &.disabled .waves-ripple {
+      display: none;
+    }
+  }
+}
+
+// Hidden dropdown toggle arrow
+.dropdown-toggle.hide-arrow,
+.dropdown-toggle-hide-arrow > .dropdown-toggle {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+// *******************************************************************************
+// * Make Bootstrap 3 pagination compatible with Bootstrap 4
+
+.dropdown-menu > li:not(.dropdown-item) {
+   > a:not(.dropdown-item) {
+    display: block;
+    clear: both;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    width: 100%;
+    border: 0;
+    background: none;
+    color: $dropdown-link-color;
+    text-align: inherit;
+    white-space: nowrap;
+    font-weight: $font-weight-normal;
+    line-height: $dropdown-link-line-height;
+
+    @include hover-focus {
+      background-color: $dropdown-link-hover-bg;
+      color: $dropdown-link-hover-color;
+      text-decoration: none;
+    }
+  }
+
+  &.active > a:not(.dropdown-item),
+  > a:not(.dropdown-item):active {
+    background-color: $dropdown-link-active-bg;
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+  }
+
+  &.disabled > a:not(.dropdown-item) {
+    background-color: transparent;
+    color: $dropdown-link-disabled-color;
+
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Dropdown toggle
+
+@if $enable-caret {
+  .dropleft .dropdown-toggle::before,
+  .dropright .dropdown-toggle::after {
+    vertical-align: $caret-vertical-align;
+  }
+
+  @include rtl-only {
+    .dropdown-toggle::after {
+      margin-right: $caret-spacing;
+      margin-left: 0;
+    }
+
+    .dropleft .dropdown-toggle::before,
+    .dropright .dropdown-toggle::after {
+      display: none;
+    }
+
+    .dropleft .dropdown-toggle::after {
+      content: "";
+      display: inline-block;
+      margin-right: $caret-spacing;
+      margin-left: 0;
+
+      @include caret-left;
+    }
+
+    .dropright .dropdown-toggle::before {
+      content: "";
+      display: inline-block;
+      margin-right: 0;
+      margin-left: $caret-spacing;
+      vertical-align: $caret-vertical-align;
+
+      @include caret-right;
+    }
+  }
+}
+
+.dropdown-toggle-split::after,
+.dropdown-toggle-split::before {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+// *******************************************************************************
+// * Nested dropdowns
+
+.dropdown-menu .dropdown-toggle {
+  position: relative;
+
+  &::after {
+    display: none;
+  }
+}
+
+.dropdown-menu .dropdown-toggle > .dropdown-item {
+ position: relative;
+ cursor: default;
+}
+
+@media (max-width: (map-get($grid-breakpoints, md) - 1)) {
+  .dropdown-menu .dropdown-menu {
+    position: static;
+    display: block;
+    margin: 0;
+    padding-left: $dropdown-item-padding-x;
+    width: 100%;
+    border-width: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    @include rtl-style {
+      padding-right: $dropdown-item-padding-x;
+      padding-left: 0;
+    }
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, md)) {
+  .dropdown-menu .dropdown-toggle > .dropdown-item::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: $dropdown-item-padding-x / 2;
+    display: block;
+    width: .375rem;
+    height: .375rem;
+    border: 1px solid $text-muted;
+    border-top: 0;
+    border-left: 0;
+    transform: rotate(-45deg) translate(0, -50%);
+
+    @include rtl-style {
+      right: auto;
+      left: $dropdown-item-padding-x / 2;
+      transform: rotate(45deg) translate(0, -50%) scaleX(-1);
+    }
+  }
+
+  .dropdown-menu .dropdown-toggle:hover > .dropdown-item:not(.disabled) {
+    background: $dropdown-link-hover-bg;
+    color: $dropdown-link-hover-color;
+
+     + .dropdown-menu {
+      display: block;
+    }
+  }
+
+  .dropdown-menu .dropdown-menu {
+    top: 0;
+    left: 100%;
+  }
+
+  .dropdown-menu-right .dropdown-menu {
+    right: 100%;
+    left: auto;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_footer.scss

@@ -0,0 +1,70 @@
+// Footer
+//
+
+.footer-link {
+  display: inline-block;
+}
+
+// Dark footer
+.footer-dark {
+  color: $navbar-dark-color;
+
+  .footer-link {
+    color: $navbar-dark-color;
+
+    @include hover-focus {
+      color: $navbar-dark-hover-color;
+    }
+
+    &.disabled {
+      color: $navbar-dark-disabled-color !important;
+    }
+  }
+
+  .footer-text {
+    color: $navbar-dark-active-color;
+  }
+
+  .show > .footer-link,
+  .active > .footer-link,
+  .footer-link.show,
+  .footer-link.active {
+    color: $navbar-dark-active-color;
+  }
+
+  hr {
+    border-color: $sidenav-dark-border-color;
+  }
+}
+
+// Light footer
+.footer-light {
+  color: $navbar-light-color;
+
+  .footer-link {
+    color: $navbar-light-color;
+
+    @include hover-focus {
+      color: $navbar-light-hover-color;
+    }
+
+    &.disabled {
+      color: $navbar-light-disabled-color !important;
+    }
+  }
+
+  .footer-text {
+    color: $navbar-light-active-color;
+  }
+
+  .show > .footer-link,
+  .active > .footer-link,
+  .footer-link.show,
+  .footer-link.active {
+    color: $navbar-light-active-color;
+  }
+
+  hr {
+    border-color: $sidenav-light-border-color;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_forms.scss

@@ -0,0 +1,172 @@
+// Forms
+//
+
+@if $material-style {
+  .form-control {
+    $material-input-disabled-color: null !default;
+    $material-input-disabled-border-color: null !default;
+
+    border-bottom-width: 1px;
+    border-radius: 0 !important;
+
+    &:disabled {
+      border-bottom: 1px dotted $material-input-disabled-border-color !important;
+      color: $material-input-disabled-color !important;
+    }
+  }
+
+  :not(.input-group) > .form-control {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+// *******************************************************************************
+// * Sizing
+
+select.form-control[size="0"]:not([multiple]) {
+  height: $input-height;
+}
+
+select.form-control-sm[size="0"]:not([multiple]) {
+  height: $input-height-sm;
+}
+
+select.form-control-lg[size="0"]:not([multiple]) {
+  height: $input-height-lg;
+}
+
+@if $material-style {
+  @include appwork-material-form-control-size('', $input-btn-padding-y);
+  @include appwork-material-form-control-size('sm', $input-btn-padding-y-sm);
+  @include appwork-material-form-control-size('lg', $input-btn-padding-y-lg);
+}
+
+// *******************************************************************************
+// * Inverted
+
+.form-control-inverted {
+  border-color: $input-inverted-border-color;
+
+  @include plain-hover-focus {
+    background-color: $input-inverted-bg;
+    color: $input-inverted-color;
+  }
+
+  &::placeholder {
+    color: $input-inverted-placeholder-color;
+  }
+
+  &:disabled {
+    background-color: $input-inverted-disabled-bg !important;
+    color: $input-inverted-disabled-color !important;
+
+    @if $material-style != true {
+      border-color: $input-inverted-disabled-bg !important;
+    } @else {
+      $material-input-inverted-disabled-border-color: null !default;
+
+      border-color: $material-input-inverted-disabled-border-color !important;
+    }
+  }
+
+  option {
+    color: $body-color !important;
+  }
+}
+
+// *******************************************************************************
+// * Labels
+
+.form-label,
+.col-form-label {
+  @if not $material-style {
+    margin-bottom: calc(#{$input-padding-y} - #{$input-border-width * 2});
+  } @else {
+    margin-bottom: 0;
+  }
+  font-weight: $label-font-weight;
+  font-size: $label-font-size;
+  padding-bottom: 0;
+}
+
+.form-label-sm,
+.col-form-label-sm {
+  font-size: $font-size-sm;
+}
+
+.form-label-lg,
+.col-form-label-lg {
+  font-size: $font-size-lg;
+}
+
+// *******************************************************************************
+// * Checkboxes and radios
+
+.form-check {
+  min-height: $font-size-base * $line-height-base;
+
+  @include rtl-style {
+    padding-right: $form-check-input-gutter;
+    padding-left: 0;
+  }
+}
+
+@include rtl-only {
+  .form-check-input {
+    margin-right: -$form-check-input-gutter;
+    margin-left: 0;
+  }
+
+  .form-check-inline {
+    margin-right: 0;
+    margin-left: $form-check-inline-margin-x;
+    padding-right: 0;
+  }
+
+  .form-check-inline .form-check-input {
+    margin-right: 0;
+    margin-left: $form-check-inline-input-margin-x;
+  }
+}
+
+// *******************************************************************************
+// * Validation states
+
+@each $state, $data in $form-validation-states {
+  @if $material-style {
+    @include appwork-material-form-validation-state($state, map-get($data, color), map-get($data, icon), map-get($data, icon-rtl));
+  } @else {
+    @include appwork-form-validation-state($state, map-get($data, color), map-get($data, icon), map-get($data, icon-rtl));
+  }
+}
+
+// *******************************************************************************
+// * Inline forms
+
+.form-inline .custom-control {
+  width: 100%;
+}
+
+@include media-breakpoint-up(sm) {
+  @include rtl-only {
+    .form-inline .form-check {
+      padding-right: 0;
+    }
+
+    .form-inline .form-check-input {
+      margin-right: 0;
+      margin-left: $form-check-input-margin-x;
+    }
+  }
+
+  .form-inline .custom-control,
+  .form-inline .custom-select,
+  .form-inline .form-control-plaintext {
+    width: auto;
+  }
+
+  .form-inline .form-text {
+    margin-top: 0;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_functions.scss

@@ -0,0 +1,262 @@
+// Functions
+//
+
+// *******************************************************************************
+// * Math
+
+$pi: 3.14159265359;
+$_precision: 10;
+
+@function pow($base, $exp) {
+  $value: $base;
+  @if $exp > 1 {
+    @for $i from 2 through $exp {
+      $value: $value * $base;
+    }
+  }
+  @if $exp < 1{
+    @for $i from 0 through -$exp {
+      $value: $value / $base;
+    }
+  }
+  @return $value;
+}
+
+@function sqrt($r) {
+  $x0: 1;
+  $x1: $x0;
+
+  @for $i from 1 through 10 {
+    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+    $x0: $x1;
+  }
+
+  @return $x1;
+}
+
+@function fact($num) {
+  $fact: 1;
+  @if $num > 0{
+    @for $i from 1 through $num {
+      $fact: $fact * $i;
+    }
+  }
+  @return $fact;
+}
+
+@function _to_unitless_rad($angle) {
+  @if unit($angle) == "deg" {
+    $angle: $angle / 180deg * $pi;
+  }
+  @if unit($angle) == "rad" {
+    $angle: $angle / 1rad;
+  }
+  @return $angle;
+}
+
+@function sin($angle){
+  $a: _to_unitless_rad($angle);
+  $sin: $a;
+  @for $n from 1 through $_precision {
+    $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1) ) * pow($a, (2 * $n + 1));
+  }
+  @return $sin;
+}
+
+@function cos($angle){
+  $a: _to_unitless_rad($angle);
+  $cos: 1;
+  @for $n from 1 through $_precision {
+    $cos: $cos + ( pow(-1,$n) / fact(2*$n) ) * pow($a,2*$n);
+  }
+  @return $cos;
+}
+
+@function tan($angle){
+  @return sin($angle) / cos($angle);
+}
+
+// *******************************************************************************
+// * Lists
+
+@function slice-list($list, $start: 1, $end: length($list)) {
+  $result: null;
+
+  @if type-of($start) != number or type-of($end) != number {
+    @warn "Either $start or $end are not a number for `slice`.";
+  }
+
+  @else if $start > $end {
+    @warn "The start index has to be lesser than or equals to the end index for `slice`.";
+  }
+
+  @else if $start < 1 or $end < 1 {
+    @warn "List indexes must be non-zero integers for `slice`.";
+  }
+
+  @else if $start > length($list) {
+    @warn "List index is #{$start} but list is only #{length($list)} item long for `slice`.";
+  }
+
+  @else if $end > length($list) {
+    @warn "List index is #{$end} but list is only #{length($list)} item long for `slice`.";
+  }
+
+  @else {
+    $result: ();
+
+    @for $i from $start through $end {
+      $result: append($result, nth($list, $i));
+    }
+  }
+
+  @return $result;
+}
+
+// *******************************************************************************
+// * Strings
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// *******************************************************************************
+// * Colors
+
+@function rgba-to-hex($color, $background: #fff) {
+  @if $color and alpha($color) != 1 {
+    $percent: alpha($color) * 100%;
+    $opaque: opacify($color, 1);
+
+    @return mix($opaque, $background, $percent);
+  }
+  @else {
+    @return $color;
+  }
+}
+
+@function yiq-value($color) {
+  @if $color == transparent {
+    @return $body-color;
+  } @else if alpha($color) != 1 {
+    $color: rgba-to-hex($color);
+  }
+
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  @return (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+}
+
+// Color contrast
+@function yiq($color) {
+  $yiq: yiq-value($color);
+
+  @if ($yiq >= 160) {
+    @return rgba-to-hex(rgba($color, .40), #000);
+  } @else {
+    @return #fff;
+  }
+}
+
+// *******************************************************************************
+// * Units
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+@function px-to-rem($value) {
+  // Assumes the browser default font size = `16px`
+  @return (strip-unit($value) / 16) * 1rem;
+}
+
+@function rem-to-px($value) {
+  // Assumes the browser default font size = `16px`
+  @return (strip-unit($value) * 16) * 1px;
+}
+
+// *******************************************************************************
+// * Utilities
+
+@function get-btn-colors($background, $border) {
+  @if $background == transparent {
+    $btn-shadow: rgba(rgba-to-hex($border, #000), .05);
+
+    @return (
+      bg-hover:  rgba($border, .06),
+      bg-active: rgba($border, .12),
+      border:    $border,
+      shadow:    if($enable-shadows, ($btn-box-shadow, 0 0 0 $component-focus-shadow-width $btn-shadow), 0 0 0 $component-focus-shadow-width $btn-shadow)
+    );
+  } @else if alpha($background) != 1 {
+    $bg-alpha:   alpha($background);
+    $btn-shadow: rgba($background, $bg-alpha - ($bg-alpha * 55 / 100) );
+
+    @return (
+      bg-hover:  rgba($background, $bg-alpha + 0.05),
+      bg-active: rgba($background, $bg-alpha + 0.13),
+      border:    transparent,
+      shadow:    if($enable-shadows, ($btn-box-shadow, 0 0 0 $component-focus-shadow-width $btn-shadow), 0 0 0 $component-focus-shadow-width $btn-shadow)
+    );
+  } @else {
+    @return (
+      bg-hover:  rgba-to-hex(rgba($background, .95), #000),
+      bg-active: rgba-to-hex(rgba($background, .87), #000),
+      border:    transparent,
+      shadow:    if($enable-shadows, ($btn-box-shadow, 0 0 0 $component-focus-shadow-width rgba($background, .4)), 0 0 0 $component-focus-shadow-width rgba($background, .4))
+    );
+  }
+}
+
+@function get-material-btn-colors($background) {
+  @if alpha($background) != 1 {
+    $background: rgba-to-hex($background);
+  }
+
+  @return (
+    bg-hover:  rgba-to-hex(rgba($background, .95), #fff),
+    bg-active: rgba-to-hex(rgba($background, .87), #fff),
+  );
+}
+
+@function get-nav-colors($bg, $active-color: null, $inactive-color: null, $border: null) {
+  $bg: rgba-to-hex($bg);
+  $active-color: rgba-to-hex($active-color);
+  $active-color: if($active-color, $active-color, yiq($bg));
+  $yiq-percent: yiq-value($bg) / 255;
+  $yiq-percent-inverted: 1 - $yiq-percent;
+
+  $opacity: if($active-color == #fff, .6 + (.4 * $yiq-percent), .6 + (.4 * (1 - $yiq-percent)));
+
+  $color: if($inactive-color, rgba-to-hex($inactive-color, $bg), rgba-to-hex(rgba($active-color, if($yiq-percent < .25, $opacity - .15, $opacity)), $bg));
+  $disabled-color: rgba-to-hex(rgba($color, .6), $bg);
+  $muted-color: rgba-to-hex(rgba($color, .75), $bg);
+  $border: if($border, $border, if($yiq-percent > .75, rgba($active-color, $opacity / 8), if($yiq-percent < .25, rgba($active-color, .06), rgba($active-color, .15))));
+
+  @return (
+    // Metadata
+    opacity: $opacity,
+    yiq-percent: $yiq-percent,
+    yiq-percent-inverted: $yiq-percent-inverted,
+
+    // Colors
+    bg: $bg,
+    color: $color,
+    active-color: $active-color,
+    disabled-color: $disabled-color,
+    muted-color: $muted-color,
+    border: $border
+  );
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_include-material.scss

@@ -0,0 +1,7 @@
+@import '../../../../node_modules/bootstrap/scss/functions';
+@import 'functions';
+@import '../_custom-variables/appwork-material';
+@import 'variables-material';
+@import '../../../../node_modules/bootstrap/scss/variables';
+@import '../../../../node_modules/bootstrap/scss/mixins';
+@import 'mixins';

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_include.scss

@@ -0,0 +1,7 @@
+@import '../../../../node_modules/bootstrap/scss/functions';
+@import 'functions';
+@import '../_custom-variables/appwork';
+@import 'variables';
+@import '../../../../node_modules/bootstrap/scss/variables';
+@import '../../../../node_modules/bootstrap/scss/mixins';
+@import 'mixins';

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_input-group.scss

@@ -0,0 +1,230 @@
+// Input groups
+//
+
+.input-group .custom-select {
+  flex: 0 1 auto;
+  width: auto;
+}
+
+.input-group-text {
+  background-clip: padding-box;
+}
+
+// *******************************************************************************
+// * Button groups within input group addon
+
+.input-group>.input-group-append>.btn-group>.btn,
+.input-group>.input-group-prepend:first-child>.btn-group:not(:first-child)>.btn,
+.input-group>.input-group-prepend:not(:first-child)>.btn-group>.btn {
+  @include border-left-radius(0);
+}
+
+.input-group>.input-group-prepend>.btn-group>.btn,
+.input-group>.input-group-append:last-child>.btn-group:not(:last-child)>.btn,
+.input-group>.input-group-append:not(:last-child)>.btn-group>.btn {
+  @include border-right-radius(0);
+}
+
+.input-group-append,
+.input-group-prepend {
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group+.btn-group,
+  .btn-group+.input-group-text,
+  .input-group-text+.btn-group {
+    margin-left: -1 * $input-border-width;
+  }
+}
+
+// *******************************************************************************
+// * Material
+
+@if $material-style {
+  .input-group-text {
+    border-bottom-width: 1px;
+  }
+
+  .input-group-text+.input-group-text,
+  .input-group-prepend .input-group-text:first-child,
+  .input-group-append .input-group-text:first-child,
+  .input-group>.form-control:first-child,
+  .input-group>.custom-select:first-child,
+  .input-group>.form-control+.form-control,
+  .input-group>.form-control+.custom-select,
+  .input-group>.custom-select+.form-control,
+  .input-group>.custom-select+.custom-select {
+    @include ltr-style {
+      padding-left: 0;
+    }
+
+    @include rtl-style {
+      padding-right: 0;
+    }
+  }
+
+  .input-group-prepend .input-group-text:last-child,
+  .input-group-append .input-group-text:last-child,
+  .input-group>.form-control:last-child {
+    @include ltr-style {
+      padding-right: 0;
+    }
+
+    @include rtl-style {
+      padding-left: 0;
+    }
+  }
+
+  .input-group>.custom-select:last-child {
+    @include ltr-style {
+      padding-right: $custom-select-padding-x;
+      background-position: right center;
+    }
+
+    @include rtl-style {
+      padding-left: $custom-select-padding-x;
+      background-position: left center;
+    }
+  }
+}
+
+// *******************************************************************************
+// * RTL
+
+@include rtl-only {
+  // Reset border radius
+
+  .input-group>.form-control,
+  .input-group>.custom-select,
+  .input-group>.input-group-prepend>.input-group-text,
+  .input-group>.input-group-append>.input-group-text,
+  .input-group>.custom-file .custom-file-label,
+  .input-group>.custom-file .custom-file-label::before {
+    @include border-radius($input-border-radius);
+  }
+  .input-group>.input-group-prepend>.btn,
+  .input-group>.input-group-append>.btn,
+  .input-group>.input-group-prepend>.btn-group>.btn,
+  .input-group>.input-group-append>.btn-group>.btn {
+    @include border-radius($btn-border-radius);
+  }
+
+  .input-group-lg>.form-control,
+  .input-group-lg>.custom-select,
+  .input-group-lg>.input-group-prepend>.input-group-text,
+  .input-group-lg>.input-group-append>.input-group-text,
+  .input-group-lg>.custom-file .custom-file-label,
+  .input-group-lg>.custom-file .custom-file-label::before {
+    @include border-radius($input-border-radius-lg);
+  }
+  .input-group-lg>.input-group-prepend>.btn,
+  .input-group-lg>.input-group-append>.btn,
+  .input-group-lg>.input-group-prepend>.btn-group>.btn,
+  .input-group-lg>.input-group-append>.btn-group>.btn {
+    @include border-radius($btn-border-radius-lg);
+  }
+
+  .input-group-sm>.form-control,
+  .input-group-sm>.custom-select,
+  .input-group-sm>.input-group-prepend>.input-group-text,
+  .input-group-sm>.input-group-append>.input-group-text,
+  .input-group-sm>.custom-file .custom-file-label,
+  .input-group-sm>.custom-file .custom-file-label::before {
+    @include border-radius($input-border-radius-sm);
+  }
+  .input-group-sm>.input-group-prepend>.btn,
+  .input-group-sm>.input-group-append>.btn-group>.btn,
+  .input-group-sm>.input-group-prepend>.btn-group>.btn,
+  .input-group-sm>.input-group-append>.btn {
+    @include border-radius($btn-border-radius-sm);
+  }
+
+  // Remove border radius
+
+  .input-group>.form-control,
+  .input-group>.custom-select {
+    &:not(:last-child) {
+      @include border-left-radius(0);
+    }
+
+    &:not(:first-child) {
+      @include border-right-radius(0);
+    }
+  }
+
+  .input-group>.custom-file {
+
+    &:not(:last-child) .custom-file-label,
+    &:not(:last-child) .custom-file-label::after {
+      @include border-left-radius(0);
+    }
+
+    &:not(:first-child) .custom-file-label {
+      @include border-right-radius(0);
+    }
+  }
+
+  .input-group>.input-group-prepend>.btn,
+  .input-group>.input-group-prepend>.input-group-text,
+  .input-group>.input-group-append:not(:last-child)>.btn,
+  .input-group>.input-group-append:not(:last-child)>.input-group-text,
+  .input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
+  .input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
+  .input-group>.input-group-prepend>.btn-group>.btn,
+  .input-group>.input-group-append>.btn-group>.btn:not(:last-of-type),
+  .input-group>.input-group-append:last-child>.btn-group:not(:last-child)>.btn {
+    @include border-left-radius(0);
+  }
+
+  .input-group>.input-group-append>.btn,
+  .input-group>.input-group-append>.input-group-text,
+  .input-group>.input-group-prepend:not(:first-child)>.btn,
+  .input-group>.input-group-prepend:not(:first-child)>.input-group-text,
+  .input-group>.input-group-prepend:first-child>.btn:not(:first-child),
+  .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),
+  .input-group>.input-group-append>.btn-group>.btn,
+  .input-group>.input-group-prepend>.btn-group>.btn:not(:first-of-type),
+  .input-group>.input-group-prepend:first-child>.btn-group:not(:first-child)>.btn {
+    @include border-right-radius(0);
+  }
+
+  // Margins
+
+  .input-group>.form-control,
+  .input-group>.form-control-plaintext,
+  .input-group>.custom-select,
+  .input-group>.custom-file {
+
+    +.form-control,
+    +.custom-select,
+    +.custom-file {
+      margin-right: -$input-border-width;
+      margin-left: 0;
+    }
+  }
+
+  .input-group-prepend,
+  .input-group-append {
+    .btn+.btn,
+    .btn+.input-group-text,
+    .input-group-text+.input-group-text,
+    .input-group-text+.btn,
+    .btn+.btn-group,
+    .btn-group+.btn,
+    .btn-group+.btn-group,
+    .btn-group+.input-group-text,
+    .input-group-text+.btn-group {
+      margin-right: -$input-border-width;
+      margin-left: 0;
+    }
+  }
+
+  .input-group-prepend {
+    margin-right: 0;
+    margin-left: -$input-border-width;
+  }
+
+  .input-group-append {
+    margin-right: -$input-border-width;
+    margin-left: 0;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_layout.scss

@@ -0,0 +1,738 @@
+// Layouts
+//
+
+.layout-wrapper,
+.layout-inner {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.layout-offcanvas .layout-wrapper,
+.layout-fixed-offcanvas .layout-wrapper {
+  overflow: hidden;
+}
+
+.layout-inner {
+  min-height: 100vh;
+}
+
+.layout-container,
+.layout-content,
+.layout-content > *,
+.layout-sidenav {
+  min-height: 1px;
+}
+
+.layout-container {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  padding: 0;
+
+  .layout-without-sidenav & {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+}
+
+.layout-content {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.layout-navbar,
+.layout-footer {
+  flex: 0 0 auto;
+}
+
+.layout-navbar {
+  position: relative;
+  z-index: 2;
+
+  .navbar {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.layout-sidenav {
+  position: relative;
+  flex: 1 0 auto;
+
+  .sidenav {
+    transform: translate3d(0, 0, 0);
+  }
+
+  .sidenav-vertical {
+    height: 100%;
+  }
+}
+
+// *******************************************************************************
+// * Layout 1
+
+.layout-1 {
+  .layout-inner {
+    flex-direction: column;
+  }
+
+  .layout-content {
+    flex-basis: 100%;
+    width: 0;
+    min-width: 0;
+    max-width: 100%;
+  }
+}
+
+// *******************************************************************************
+// * Layout 2
+
+.layout-2 {
+  .layout-container {
+    flex-basis: 100%;
+    flex-direction: column;
+    width: 0;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .layout-content {
+    // flex-basis: 100%;
+    width: 100%;
+  }
+}
+
+// *******************************************************************************
+// * Reversed layout
+
+.layout-reversed {
+  .layout-1 .layout-container {
+    flex-direction: row-reverse;
+  }
+
+  .layout-2 .layout-inner {
+    flex-direction: row-reverse;
+  }
+}
+
+// *******************************************************************************
+// * Toggle
+
+.layout-sidenav-toggle {
+  display: block;
+}
+
+// *******************************************************************************
+// * Small screens layout
+
+@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
+  .layout-sidenav {
+    position: fixed !important;
+    top: 0 !important;
+    height: 100% !important;
+    left: 0 !important;
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+    transform: translate3d(-100%, 0, 0);
+    will-change: transform, -webkit-transform;
+
+    @include rtl-style {
+      right: 0 !important;
+      left: auto !important;
+      transform: translate3d(100%, 0, 0);
+    }
+
+    .layout-reversed & {
+      right: 0 !important;
+      left: auto !important;
+      transform: translate3d(100%, 0, 0);
+    }
+
+    .layout-expanded & {
+      transform: translate3d(0, 0, 0) !important;
+    }
+  }
+
+  .layout-expanded body {
+    overflow: hidden;
+  }
+
+  @include rtl-only {
+    &.layout-reversed .layout-sidenav {
+      right: auto !important;
+      left: 0 !important;
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  .layout-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100% !important;
+    left: 0;
+    display: none;
+    background: $modal-backdrop-bg;
+    opacity: $modal-backdrop-opacity;
+    cursor: pointer;
+
+    .layout-expanded & {
+      display: block;
+    }
+  }
+
+  .layout-sidenav-100vh .layout-sidenav,
+  .layout-sidenav-100vh .layout-overlay {
+    height: 100vh !important;
+  }
+}
+
+// *******************************************************************************
+// * Collapsed layout
+
+@include media-breakpoint-up(lg) {
+  // Sidenav style
+
+  .layout-collapsed:not(.layout-sidenav-hover):not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
+    .layout-sidenav .sidenav-vertical,
+    .layout-sidenav.sidenav-vertical {
+      @include sidenav-collapsed();
+    }
+  }
+
+  @include rtl-only {
+    &.layout-collapsed:not(.layout-sidenav-hover):not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
+      .layout-sidenav .sidenav-vertical,
+      .layout-sidenav.sidenav-vertical {
+        @include sidenav-collapsed-rtl();
+      }
+    }
+  }
+
+  // Sidenav position
+
+  .layout-sidenav-hover.layout-collapsed {
+    .layout-sidenav {
+      margin-right: -$sidenav-width + $sidenav-collapsed-width;
+    }
+
+    &.layout-reversed .layout-sidenav {
+      margin-right: 0;
+      margin-left: -$sidenav-width + $sidenav-collapsed-width;
+    }
+  }
+
+  @include rtl-only {
+    &.layout-sidenav-hover.layout-collapsed {
+      .layout-sidenav {
+        margin-right: 0;
+        margin-left: -$sidenav-width + $sidenav-collapsed-width;
+      }
+
+      &.layout-reversed .layout-sidenav {
+        margin-right: -$sidenav-width + $sidenav-collapsed-width;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Off-canvas layout
+
+@include media-breakpoint-up(lg) {
+  .layout-collapsed.layout-offcanvas {
+    .layout-sidenav {
+      margin-right: -$sidenav-width;
+      transform: translateX(-100%);
+    }
+
+    &.layout-reversed .layout-sidenav {
+      margin-right: 0;
+      margin-left: -$sidenav-width;
+      transform: translateX(100%);
+    }
+  }
+
+  @include rtl-only {
+    &.layout-collapsed.layout-offcanvas {
+      .layout-sidenav {
+        margin-right: 0;
+        margin-left: -$sidenav-width;
+        transform: translateX(100%)
+      }
+
+      &.layout-reversed .layout-sidenav {
+        margin-right: -$sidenav-width;
+        margin-left: 0;
+        transform: translateX(-100%)
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Fixed and fixed off-canvas layout
+
+@include media-breakpoint-up(lg) {
+  // Sidenav
+
+  .layout-fixed,
+  .layout-fixed-offcanvas {
+    .layout-sidenav {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      margin-right: 0 !important;
+      margin-left: 0 !important;
+    }
+
+    &.layout-reversed .layout-sidenav {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  @include rtl-only {
+    &.layout-fixed,
+    &.layout-fixed-offcanvas {
+      .layout-sidenav {
+        right: 0;
+        left: auto;
+      }
+
+      &.layout-reversed .layout-sidenav {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
+
+  // Fixed off-canvas
+
+  .layout-fixed-offcanvas.layout-collapsed {
+    .layout-sidenav {
+      transform: translateX(-100%);
+    }
+
+    &.layout-reversed .layout-sidenav {
+      transform: translateX(100%);
+    }
+  }
+
+  @include rtl-only {
+    &.layout-fixed-offcanvas.layout-collapsed {
+      .layout-sidenav {
+        transform: translateX(100%);
+      }
+
+      &.layout-reversed .layout-sidenav {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  // Container
+
+  .layout-fixed:not(.layout-collapsed),
+  .layout-fixed-offcanvas:not(.layout-collapsed) {
+    .layout-container {
+      padding-left: $sidenav-width;
+    }
+
+    &.layout-reversed .layout-container {
+      padding-right: $sidenav-width;
+      padding-left: 0;
+    }
+  }
+
+  @include rtl-only {
+    &.layout-fixed:not(.layout-collapsed),
+    &.layout-fixed-offcanvas:not(.layout-collapsed) {
+      .layout-container {
+        padding-right: $sidenav-width;
+        padding-left: 0;
+      }
+
+      &.layout-reversed .layout-container {
+        padding-right: 0;
+        padding-left: $sidenav-width;
+      }
+    }
+  }
+
+  .layout-fixed.layout-collapsed {
+    .layout-container {
+      padding-left: $sidenav-collapsed-width;
+    }
+
+    &.layout-reversed .layout-container {
+      padding-right: $sidenav-collapsed-width;
+      padding-left: 0;
+    }
+  }
+
+  @include rtl-only {
+    &.layout-fixed.layout-collapsed {
+      .layout-container {
+        padding-right: $sidenav-collapsed-width;
+        padding-left: 0;
+      }
+
+      &.layout-reversed .layout-container {
+        padding-right: 0;
+        padding-left: $sidenav-collapsed-width;
+      }
+    }
+  }
+}
+
+// Reset paddings
+html:not(.layout-navbar-fixed):not(.layout-fixed):not(.layout-fixed-offcanvas) .layout-container,
+html:not(.layout-navbar-fixed) .layout-2 .layout-container {
+  padding-top: 0 !important;
+}
+html:not(.layout-footer-fixed) .layout-content {
+  padding-bottom: 0 !important;
+}
+@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
+  .layout-fixed .layout-wrapper.layout-1 .layout-sidenav,
+  .layout-fixed-offcanvas .layout-wrapper.layout-1 .layout-sidenav {
+    top: 0 !important;
+  }
+
+  html:not(.layout-navbar-fixed) .layout-1 .layout-container {
+    padding-top: 0 !important;
+  }
+}
+
+// *******************************************************************************
+// * Fixed navbar layout
+
+.layout-navbar-fixed .layout-navbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+@include media-breakpoint-up(lg) {
+  // Fix navbar within layout 1 in fixed mode
+  .layout-fixed .layout-1 .layout-navbar,
+  .layout-fixed-offcanvas .layout-1 .layout-navbar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  // Layout fixed
+
+  .layout-navbar-fixed:not(.layout-collapsed),
+  .layout-fixed.layout-navbar-fixed:not(.layout-collapsed),
+  .layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed) {
+    .layout-2 .layout-navbar {
+      left: $sidenav-width;
+    }
+
+    &.layout-reversed .layout-2 .layout-navbar {
+      right: $sidenav-width;
+      left: 0;
+    }
+  }
+
+  @include rtl-only {
+    &.layout-navbar-fixed:not(.layout-collapsed),
+    &.layout-fixed.layout-navbar-fixed:not(.layout-collapsed),
+    &.layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed) {
+      .layout-2 .layout-navbar {
+        right: $sidenav-width;
+        left: 0;
+      }
+
+      &.layout-reversed .layout-2 .layout-navbar {
+        right: 0;
+        left: $sidenav-width;
+      }
+    }
+  }
+
+  // Layout fixed off-canvas
+
+  .layout-navbar-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas),
+  .layout-fixed.layout-navbar-fixed.layout-collapsed {
+    .layout-2 .layout-navbar {
+      left: $sidenav-collapsed-width;
+    }
+
+    &.layout-reversed .layout-2 .layout-navbar {
+      right: $sidenav-collapsed-width;
+      left: 0;
+    }
+  }
+
+  @include rtl-only {
+    &.layout-navbar-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas),
+    &.layout-fixed.layout-navbar-fixed.layout-collapsed {
+      .layout-2 .layout-navbar {
+        right: $sidenav-collapsed-width;
+        left: 0;
+      }
+
+      &.layout-reversed .layout-2 .layout-navbar {
+        right: 0;
+        left: $sidenav-collapsed-width;
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Fixed footer
+
+.layout-footer-fixed .layout-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+@include media-breakpoint-up(lg) {
+  .layout-footer-fixed:not(.layout-collapsed) {
+    .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+      left: $sidenav-width;
+    }
+
+    &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+      right: $sidenav-width;
+      left: 0;
+    }
+  }
+
+  .layout-footer-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
+    .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+      left: $sidenav-collapsed-width;
+    }
+
+    &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+      right: $sidenav-collapsed-width;
+      left: 0;
+    }
+  }
+
+  @include rtl-only {
+    &.layout-footer-fixed:not(.layout-collapsed) {
+      .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+        left: 0;
+        right: $sidenav-width;
+      }
+
+      &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+        left: $sidenav-width;
+        right: 0;
+      }
+    }
+
+    &.layout-footer-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
+      .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+        left: 0;
+        right: $sidenav-collapsed-width;
+      }
+
+      &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
+        right: 0;
+        left: $sidenav-collapsed-width;
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Z-Indexes
+
+// Navbar
+.layout-navbar-fixed body:not(.modal-open),
+.layout-fixed body:not(.modal-open),
+.layout-fixed-offcanvas body:not(.modal-open) {
+  .layout-1 .layout-navbar {
+    z-index: $zindex-layout-fixed;
+  }
+
+  .layout-2 .layout-navbar {
+    z-index: $zindex-layout-fixed - 5;
+  }
+}
+
+.layout-footer-fixed .layout-footer {
+  z-index: $zindex-fixed;
+}
+
+.layout-sidenav-horizontal {
+  z-index: 9;
+}
+
+@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
+  .layout-sidenav {
+    z-index: $zindex-layout-mobile;
+  }
+
+  .layout-overlay {
+    z-index: $zindex-layout-mobile - 1;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .layout-1 {
+    .layout-navbar {
+      z-index: 10;
+    }
+
+    .layout-sidenav {
+      z-index: 9;
+    }
+  }
+
+  .layout-2 {
+    .layout-navbar {
+      z-index: 9;
+    }
+
+    .layout-sidenav {
+      z-index: 10;
+    }
+  }
+
+  // Collapsed
+
+  .layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
+    &.layout-sidenav-hover .layout-1 .layout-sidenav {
+      z-index: $zindex-layout-fixed - 5 !important;
+    }
+
+    .layout-2 .layout-sidenav {
+      z-index: $zindex-layout-fixed + 5 !important;
+    }
+  }
+
+  // Fixed
+
+  .layout-fixed body:not(.modal-open) .layout-1 .layout-sidenav,
+  .layout-fixed-offcanvas body:not(.modal-open) .layout-1 .layout-sidenav {
+    z-index: $zindex-layout-fixed - 5;
+  }
+
+  .layout-navbar-fixed body:not(.modal-open) .layout-2 .layout-sidenav,
+  .layout-fixed body:not(.modal-open) .layout-2 .layout-sidenav,
+  .layout-fixed-offcanvas body:not(.modal-open) .layout-2 .layout-sidenav {
+    z-index: $zindex-layout-fixed;
+  }
+}
+
+// *******************************************************************************
+// * Transitions and animations
+
+.layout-sidenav-link-no-transition {
+  .layout-sidenav .sidenav-link,
+  .layout-sidenav-horizontal .sidenav-link {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+.layout-no-transition .layout-sidenav,
+.layout-no-transition .layout-sidenav-horizontal {
+  &,
+  & .sidenav,
+  & .sidenav-item {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
+  .layout-transitioning {
+    .layout-overlay {
+      animation: layoutSidenavAnimation $sidenav-animation-duration;
+    }
+
+    .layout-sidenav {
+      transition-duration: $sidenav-animation-duration;
+      transition-property: transform, -webkit-transform;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .layout-collapsed:not(.layout-transitioning):not(.layout-offcanvas):not(.layout-fixed):not(.layout-fixed-offcanvas) .layout-sidenav {
+    transition-duration: $sidenav-animation-duration;
+    transition-property: margin-left, margin-right, width;
+  }
+
+  .layout-transitioning {
+    &.layout-offcanvas .layout-sidenav {
+      transition-duration: $sidenav-animation-duration;
+      transition-property: margin-left, margin-right, transform, -webkit-transform;
+    }
+
+    &.layout-fixed,
+    &.layout-fixed-offcanvas {
+      .layout-container {
+        transition-duration: $sidenav-animation-duration;
+        transition-property: padding-left, padding-right;
+      }
+    }
+
+    &.layout-fixed {
+      .layout-sidenav {
+        transition: width $sidenav-animation-duration;
+      }
+    }
+
+    &.layout-fixed-offcanvas {
+      .layout-sidenav {
+        transition-duration: $sidenav-animation-duration;
+        transition-property: transform, -webkit-transform;
+      }
+    }
+
+    &.layout-navbar-fixed .layout-2 .layout-navbar,
+    &.layout-footer-fixed .layout-footer {
+      transition-duration: $sidenav-animation-duration;
+      transition-property: left, right;
+    }
+
+    &:not(.layout-offcanvas):not(.layout-fixed):not(.layout-fixed-offcanvas) .layout-sidenav {
+      transition-duration: $sidenav-animation-duration;
+      transition-property: margin-left, margin-right, width;
+    }
+  }
+}
+
+// Disable transitions/animations in IE 10-11
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .sidenav,
+  .layout-sidenav,
+  .layout-container,
+  .layout-navbar,
+  .layout-footer {
+    transition: none !important;
+    transition-duration: 0s !important;
+  }
+  .layout-overlay {
+    animation: none !important;
+  }
+}
+
+@include keyframes(layoutSidenavAnimation) {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: $modal-backdrop-opacity;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_list-group.scss

@@ -0,0 +1,17 @@
+// List groups
+//
+
+@each $color, $value in $theme-colors {
+  @if $color != primary and $color != light {
+    @include appwork-list-group-item-variant('.list-group-item-#{$color}', $value);
+  }
+}
+
+// *******************************************************************************
+// * RTL
+
+@include rtl-only {
+  .list-group {
+    padding-right: 0;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_modal.scss

@@ -0,0 +1,246 @@
+// Modals
+//
+
+.modal {
+  z-index: $zindex-modal-top;
+}
+
+.modal-backdrop {
+  z-index: $zindex-modal-top - 1;
+}
+
+.modal-content {
+  box-shadow: $modal-content-box-shadow-xs;
+}
+
+.modal-header {
+  position: relative;
+  padding-right: $modal-header-padding-x + 1rem;
+
+  @include rtl-style {
+    padding-right: $modal-header-padding-x;
+    padding-left: $modal-header-padding-x + 1rem;
+  }
+}
+
+.modal-footer {
+  padding: $modal-footer-padding;
+
+  @include rtl-style {
+    > :not(:first-child) {
+      margin-left: 0;
+      margin-right: .25rem;
+    }
+    > :not(:last-child) {
+      margin-right: 0;
+      margin-left: .25rem;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Close button
+
+.modal-header .close,
+.modal-slide .close {
+  position: absolute;
+  top: 50%;
+  right: $modal-header-padding-x;
+  margin: 0;
+  padding: 0;
+  line-height: $modal-title-line-height;
+  transform: translate(0, -50%);
+
+  @include rtl-style {
+    right: auto;
+    left: $modal-header-padding-x;
+  }
+}
+
+// *******************************************************************************
+// * Responsive
+
+@include media-breakpoint-up(sm) {
+  .modal-content {
+    box-shadow: $modal-content-box-shadow-sm-up;
+  }
+
+  ngb-modal-window.modal-sm {
+    max-width: none;
+  }
+  .modal-sm .modal-dialog {
+    max-width: $modal-sm;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  ngb-modal-window.modal-lg,
+  ngb-modal-window.modal-xl {
+    max-width: none;
+  }
+  .modal-lg .modal-dialog,
+  .modal-xl .modal-dialog {
+    max-width: $modal-lg;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  ngb-modal-window.modal-xl {
+    max-width: none;
+  }
+  .modal-xl .modal-dialog {
+    max-width: $modal-xl;
+  }
+}
+
+// *******************************************************************************
+// * Top modals
+
+.modal-top {
+  .modal-dialog {
+    margin-top: 0;
+  }
+
+  .modal-content {
+    @include border-top-radius(0);
+  }
+}
+
+// *******************************************************************************
+// * Slide modals
+
+.modal-slide,
+.modal-slide .modal {
+  overflow: hidden !important;
+  padding: 0 !important;
+}
+
+.modal-slide {
+  .modal-dialog {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: auto;
+    margin: 0;
+    max-width: none;
+    width: 100%;
+
+    @include rtl-style {
+      right: auto;
+      left: 0;
+    }
+
+    @media (min-width: (map-get($grid-breakpoints, sm))) {
+      width: $modal-slide-width;
+    }
+  }
+
+  .modal-content {
+    overflow: auto;
+    padding-top: ($modal-title-line-height * $close-font-size) + $modal-header-padding-y;
+    padding-bottom: ($modal-title-line-height * $close-font-size) + $modal-header-padding-y;
+    height: 100%;
+    border-radius: 0;
+  }
+
+  .modal-body {
+    flex-grow: 0;
+    margin: auto 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .close {
+    top: $modal-header-padding-y / 2;
+    z-index: 10;
+    transform: none;
+  }
+}
+
+// *******************************************************************************
+// * Fill-In modals
+
+.modal-fill-in {
+  .modal-dialog {
+    display: flex;
+    margin: 0 auto;
+    padding-top: ($modal-title-line-height * $close-font-size) + $modal-header-padding-y;
+    padding-bottom: ($modal-title-line-height * $close-font-size) + $modal-header-padding-y;
+    min-height: 100vh;
+  }
+
+  .modal-content {
+    margin: auto;
+    width: 100%;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .close {
+    position: absolute;
+    top: -2rem;
+    right: $modal-header-padding-x;
+    font-size: 2rem;
+    transform: none;
+
+    @include rtl-style {
+      right: auto;
+      left: $modal-header-padding-x;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Animations
+
+// Default
+
+.modal.fade .modal-dialog {
+  transform: translateY(150px) scale(.8);
+}
+
+.modal.show .modal-dialog {
+  transform: translateY(0) scale(1);
+}
+
+// Top
+
+.modal-top.fade .modal-dialog,
+.modal-top .modal.fade .modal-dialog {
+  transform: translateY(-100%);
+}
+
+.modal-top.show .modal-dialog,
+.modal-top .modal.show .modal-dialog {
+  transform: translateY(0);
+}
+
+// Slide
+
+.modal-slide.fade .modal-dialog,
+.modal-slide .modal.fade .modal-dialog {
+  transform: translateX(100%);
+
+  @include rtl-style {
+    transform: translateX(-100%);
+  }
+}
+
+.modal-slide.show .modal-dialog,
+.modal-slide .modal.show .modal-dialog {
+  transform: translateX(0) !important;
+}
+
+// Fill-In
+
+.modal-fill-in.fade .modal-dialog,
+.modal-fill-in .modal.fade .modal-dialog {
+  transform: scale(.5, .5);
+}
+
+.modal-fill-in.show .modal-dialog,
+.modal-fill-in .modal.show .modal-dialog {
+  transform: scale(1, 1);
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_nav.scss

@@ -0,0 +1,457 @@
+// Nav
+//
+
+@include rtl-only {
+  .nav {
+    padding-right: 0;
+  }
+}
+
+.nav-link {
+  line-height: $nav-link-line-height;
+
+  &.disabled {
+    border-color: transparent !important;
+    background: transparent !important;
+    color: $nav-link-disabled-color !important;
+  }
+}
+
+.nav .nav-item,
+.nav .nav-link,
+.tab-pane,
+.tab-pane .card-body {
+  outline: none !important;
+}
+
+// Tab and pills link
+.nav-tabs,
+.nav-pills {
+  @if $material-style {
+    .nav-link {
+      text-transform: uppercase;
+      font-weight: $btn-font-weight;
+      font-size: $btn-font-size;
+    }
+  }
+
+  .nav-link:not(.active) {
+    color: $nav-link-color;
+
+    @include hover-focus {
+      color: $nav-tabs-link-active-color;
+    }
+  }
+
+  &:not(.nav-fill):not(.nav-justified) .nav-link {
+    margin-right: $nav-spacer;
+
+    @include rtl-style {
+      margin-right: 0;
+      margin-left: $nav-spacer;
+    }
+  }
+
+  .nav-link .badge {
+    position: relative;
+    top: -1px;
+  }
+
+  .nav-item.show .nav-link:not(.active) {
+    background-color: transparent;
+  }
+}
+
+@if $material-style {
+  .nav-tabs .nav-link {
+    background-position: bottom;
+    background-size: 0 2px;
+    background-repeat: no-repeat;
+  }
+
+  .nav-tabs .nav-link.active,
+  .nav-tabs .nav-item.show .nav-link {
+    background-color: transparent;
+    background-size: 100% 2px;
+    transition: background .3s ease-out;
+  }
+}
+
+// Tab link
+.nav-tabs .nav-link {
+  background-clip: padding-box;
+
+  @include hover-focus {
+    border-bottom-color: transparent;
+  }
+
+  &.active {
+    border-bottom-color: $nav-tabs-link-active-bg;
+  }
+}
+
+// *******************************************************************************
+// * Alternative tabs
+
+.nav-tabs.tabs-alt .nav-link,
+.tabs-alt > .nav-tabs .nav-link {
+  &,
+  &.active {
+    border-width: 0;
+    border-radius: 0;
+    background-color: transparent;
+  }
+}
+
+// *******************************************************************************
+// * Light navs (material only)
+
+@if $material-style {
+  $material-light-nav-link-color: null !default;
+  $material-light-nav-link-disabled-color: null !default;
+  $material-light-nav-tabs-link-active-color: null !default;
+  $material-light-nav-pills-link-active-bg: null !default;
+
+  .nav-tabs.md-tabs-light,
+  .md-tabs-light > .nav-tabs,
+  .md-tabs-light > div > .nav-tabs,
+  .nav-pills.md-pills-light,
+  .md-pills-light > .nav-pills,
+  .md-pills-light > div > .nav-pills {
+    .nav-link {
+      color: $material-light-nav-link-color;
+    }
+
+    .nav-link:hover,
+    .nav-link:focus,
+    .nav-link.focus,
+    .nav-item.show .nav-link {
+      color: $material-light-nav-tabs-link-active-color;
+    }
+
+    .nav-link.disabled {
+      background-image: none !important;
+      color: $material-light-nav-link-disabled-color !important;
+    }
+  }
+
+  .nav-tabs.md-tabs-light,
+  .md-tabs-light > .nav-tabs,
+  .md-tabs-light > div > .nav-tabs {
+    .nav-link {
+      background-image: linear-gradient($material-light-nav-tabs-link-active-color, $material-light-nav-tabs-link-active-color) !important;
+
+      &.active {
+        color: $material-light-nav-tabs-link-active-color;
+      }
+    }
+  }
+
+  .material-style .nav-pills.md-pills-light,
+  .material-style .md-pills-light > .nav-pills,
+  .material-style .md-pills-light > div > .nav-pills {
+    .nav-link.active {
+      @include plain-hover-focus {
+        background: $material-light-nav-tabs-link-active-color;
+        color: $nav-tabs-link-active-color;
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Sizing
+
+.nav-lg {
+  @include appwork-nav-size($nav-link-padding-y-lg, $nav-link-padding-x-lg, $font-size-lg, $nav-link-line-height-lg);
+}
+.nav-sm {
+  @include appwork-nav-size($nav-link-padding-y-sm, $nav-link-padding-x-sm, $font-size-sm, $nav-link-line-height-sm);
+}
+
+// *******************************************************************************
+// * Tabbed panels
+
+.nav-tabs-top,
+.nav-tabs-right,
+.nav-tabs-bottom,
+.nav-tabs-left {
+  display: flex;
+
+   > .nav,
+   > div > .nav {
+    position: relative;
+    z-index: 1;
+    border: 0;
+  }
+
+   > .nav .nav-link,
+   > div > .nav .nav-link {
+    @include hover-focus {
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+
+    &.active {
+      border-color: $nav-tabs-link-active-border-color;
+    }
+  }
+
+  .row-bordered > [class^="col-"],
+  .row-bordered > [class*=" col-"],
+  .row-bordered > [class^="col "],
+  .row-bordered > [class*=" col "],
+  .row-bordered > [class$=" col"],
+  .row-bordered > [class="col"] {
+    &::before,
+    &::after {
+      border-color: $card-inner-border-color;
+    }
+  }
+}
+
+.nav-tabs-right,
+.nav-tabs-left {
+  align-items: stretch;
+
+   > .nav,
+   > div > .nav {
+    flex-direction: column;
+    flex-grow: 0;
+  }
+
+   > .nav .nav-link,
+   > div > .nav .nav-link {
+    margin: 0 0 $nav-spacer 0 !important;
+  }
+
+   > .tab-content {
+    flex-grow: 1;
+  }
+}
+
+// Top tabs
+.nav-tabs-top {
+  flex-direction: column;
+
+   > .nav .nav-link,
+   > div > .nav .nav-link {
+    @include hover-focus {
+      border-bottom-color: transparent;
+    }
+
+    &.active {
+      border-bottom-color: $nav-tabs-link-active-bg;
+    }
+  }
+}
+
+// Right tabs
+.nav-tabs-right {
+  flex-direction: row-reverse;
+
+   > .nav .nav-item,
+   > div > .nav .nav-item {
+    margin-bottom: 0;
+    margin-left: -1px;
+
+    @include rtl-style {
+      margin-right: -1px;
+      margin-left: 0;
+    }
+  }
+
+   > .nav .nav-link,
+   > div > .nav .nav-link {
+    @if $material-style != true {
+      @include border-radius(0 $border-radius $border-radius 0);
+
+      @include rtl-style {
+        @include border-radius($border-radius 0 0 $border-radius);
+      }
+    }
+
+    @include hover-focus {
+      border-left-color: transparent;
+
+      @include rtl-style {
+        border-right-color: transparent;
+        border-left-color: $nav-tabs-link-hover-border-color;
+      }
+    }
+
+    &.active {
+      border-left-color: $nav-tabs-link-active-bg;
+
+      @include rtl-style {
+        border-right-color: $nav-tabs-link-active-bg;
+        border-left-color: $nav-tabs-link-active-border-color;
+      }
+    }
+  }
+}
+
+// Bottom tabs
+.nav-tabs-bottom {
+  flex-direction: column-reverse;
+
+   > .nav .nav-item,
+   > div > .nav .nav-item {
+    margin-top: -1px;
+    margin-bottom: 0;
+  }
+
+   > .nav .nav-link,
+   > div > .nav .nav-link {
+    @if $material-style != true {
+      @include border-radius(0 0 $border-radius $border-radius);
+    }
+
+    @include hover-focus {
+      border-top-color: transparent;
+    }
+
+    &.active {
+      border-top-color: $nav-tabs-link-active-bg;
+    }
+  }
+}
+
+// Left tabs
+.nav-tabs-left {
+   > .nav .nav-item,
+   > div > .nav .nav-item {
+    margin-right: -1px;
+    margin-bottom: 0;
+
+    @include rtl-style {
+      margin-right: 0;
+      margin-left: -1px;
+    }
+  }
+
+   > .nav .nav-link,
+   > div > .nav .nav-link {
+     @if $material-style != true {
+       @include border-radius($border-radius 0 0 $border-radius);
+
+       @include rtl-style {
+         @include border-radius(0 $border-radius $border-radius 0);
+       }
+     }
+
+    @include hover-focus {
+      border-right-color: transparent;
+
+      @include rtl-style {
+        border-right-color: $nav-tabs-link-hover-border-color;
+        border-left-color: transparent;
+      }
+    }
+
+    &.active {
+      border-right-color: $nav-tabs-link-active-bg;
+
+      @include rtl-style {
+        border-right-color: $nav-tabs-link-active-border-color;
+        border-left-color: $nav-tabs-link-active-bg;
+      }
+    }
+  }
+}
+
+// Tab content
+
+.nav-tabs-top > .tab-content,
+.nav-tabs-right > .tab-content,
+.nav-tabs-bottom > .tab-content,
+.nav-tabs-left > .tab-content {
+  flex-shrink: 1;
+  border: $card-border-width solid $border-color;
+  background: $nav-tabs-link-active-bg;
+  background-clip: padding-box;
+  box-shadow: $card-shadow;
+}
+
+.nav-tabs-top > .tab-content {
+  @include border-radius(0 0 $border-radius $border-radius);
+}
+
+.nav-tabs-right > .tab-content {
+  @include border-radius($border-radius 0 0 $border-radius);
+  @include rtl-style {
+    @include border-radius(0 $border-radius $border-radius 0);
+  }
+}
+
+.nav-tabs-bottom > .tab-content {
+  @include border-radius($border-radius $border-radius 0 0);
+}
+
+.nav-tabs-left > .tab-content {
+  @include border-radius(0 $border-radius $border-radius 0);
+  @include rtl-style {
+    @include border-radius($border-radius 0 0 $border-radius);
+  }
+}
+
+// *******************************************************************************
+// * Responsive nav
+
+@include responsive-loop-before('.nav-responsive') {
+   > .nav,
+   > div > .nav {
+    flex-direction: column;
+    border: 0;
+
+    .nav-item {
+      flex-basis: auto;
+    }
+
+    &.card-header-tabs,
+    &.card-header-pills {
+      margin-bottom: -1 * $nav-spacer;
+    }
+  }
+
+   > .nav-tabs,
+   > .nav-pills,
+   > div > .nav-tabs,
+   > div > .nav-pills {
+    .nav-item {
+      margin: 0 !important;
+    }
+
+    .nav-link {
+      margin: 0 0 $nav-spacer 0 !important;
+    }
+  }
+
+   > .nav-tabs:not(.tabs-alt),
+   > div > .nav-tabs:not(.tabs-alt) {
+    .nav-link {
+      @if not $material-style {
+        @include border-radius($border-radius);
+      }
+      @include hover-focus {
+        border-color: $nav-tabs-link-hover-border-color;
+      }
+    }
+
+    .nav-link.active {
+      border-color: $nav-tabs-link-active-border-color;
+    }
+  }
+
+  &.nav-tabs-top > .tab-content,
+  &.nav-tabs-right > .tab-content,
+  &.nav-tabs-bottom > .tab-content,
+  &.nav-tabs-left > .tab-content {
+    border-radius: $border-radius;
+  }
+
+  &.nav-tabs-bottom,
+  &.nav-tabs-right,
+  &.nav-tabs-left {
+    flex-direction: column;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_navbar.scss

@@ -0,0 +1,169 @@
+// Navbar
+//
+
+.navbar {
+  z-index: 2;
+}
+
+.fixed-top {
+  z-index: $zindex-fixed;
+}
+
+@include rtl-only {
+  .navbar-nav {
+    padding-right: 0;
+  }
+
+  .navbar-brand {
+    margin-right: 0;
+    margin-left: $navbar-padding-x;
+  }
+}
+
+.navbar.navbar-dark {
+  color: $navbar-dark-color;
+}
+
+.navbar-dark .navbar-nav .nav-link.disabled {
+  color: $navbar-dark-disabled-color !important;
+}
+
+.navbar.navbar-light {
+  color: $navbar-light-color;
+}
+
+.navbar-light .navbar-nav .nav-link.disabled {
+  color: $navbar-light-disabled-color !important;
+}
+
+// IE fix
+.navbar-collapse,
+.navbar-brand,
+.navbar-text {
+  flex-shrink: 1;
+}
+
+// *******************************************************************************
+// * Rulers
+
+.navbar-dark hr {
+  border-color: rgba(255, 255, 255, .1);
+}
+
+.navbar-light hr {
+  border-color: $gray-100;
+}
+
+// *******************************************************************************
+// * Icons
+
+.navbar-icon {
+  font-size: 130%;
+}
+
+// *******************************************************************************
+// * Search box
+
+.navbar-search-box {
+  display: flex;
+  align-items: center;
+  margin: 0;
+
+  &:not(.active) {
+    cursor: pointer;
+  }
+}
+
+.navbar-search-input {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  max-width: 0;
+  transition: max-width .3s ease-in-out;
+
+  .navbar-search-box.active & {
+    max-width: 100vw;
+  }
+
+  .form-control {
+    padding-right: 0;
+    padding-left: 0;
+    width: auto;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit !important;
+
+    .navbar-dark &::placeholder {
+      color: $navbar-dark-disabled-color;
+    }
+
+    .navbar-light &::placeholder {
+      color: $navbar-light-disabled-color;
+    }
+  }
+}
+
+.navbar-search-cancel {
+  color: inherit !important;
+  font-weight: 100;
+  font-size: 1.55em;
+  line-height: 1;
+  opacity: .5;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-up($breakpoint) {
+        .navbar-search-box.nav-link {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+      @include media-breakpoint-down($breakpoint) {
+        .navbar-search-input {
+          max-width: 100vw;
+          width: 100%;
+        }
+
+        .navbar-search-input .form-control {
+          width: 100% !important;
+        }
+
+        .navbar-search-cancel {
+          display: none;
+        }
+
+        &.navbar-dark .navbar-search-box {
+          color: $navbar-dark-active-color !important;
+        }
+
+        &.navbar-light .navbar-search-box {
+          color: $navbar-light-active-color !important;
+        }
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Mega dropdown
+
+.mega-dropdown {
+  .dropdown-menu {
+    width: 100%;
+  }
+
+  .dropdown-toggle {
+    outline: 0;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_pagination.scss

@@ -0,0 +1,111 @@
+// Pagination
+//
+
+@include rtl-only {
+  .pagination {
+    padding-right: 0;
+  }
+}
+
+// Add spacing between pagination items
+.page-item + .page-item .page-link,
+.pagination li + li > a:not(.page-link) {
+  margin-left: $pagination-spacer;
+
+  @include rtl-style {
+    margin-right: $pagination-spacer;
+    margin-left: 0;
+  }
+}
+
+.page-link,
+.page-link > a {
+  min-width: calc(#{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)} + #{$pagination-border-width * 2}"});
+  text-align: center;
+  line-height: $pagination-line-height;
+
+  @include border-radius($border-radius);
+
+  @if $material-style {
+    font-weight: $btn-font-weight;
+  }
+
+  &:focus {
+    color: $pagination-hover-color;
+  }
+}
+
+.page-link.btn-primary {
+  box-shadow: none !important;
+}
+
+// *******************************************************************************
+// * Make Bootstrap 3 pagination compatible with Bootstrap 4
+
+.pagination > li > a:not(.page-link) {
+  position: relative;
+  display: block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  min-width: calc(#{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)} + #{$pagination-border-width * 2}"});
+  border: $pagination-border-width solid $pagination-border-color;
+  background-color: $pagination-bg;
+  color: $pagination-color;
+  text-align: center;
+  line-height: $pagination-line-height !important;
+
+  @include border-radius($border-radius);
+  @include hover-focus {
+    border-color: $pagination-hover-border-color;
+    background-color: $pagination-hover-bg;
+    color: $pagination-hover-color;
+    text-decoration: none;
+  }
+
+  @if $material-style {
+    font-weight: $btn-font-weight;
+  }
+
+  &:focus {
+    color: $pagination-hover-color;
+  }
+}
+
+// *******************************************************************************
+// * Material ripple
+
+@if $material-style {
+  .page-link .waves-ripple,
+  .pagination > li .waves-ripple {
+    background: rgba(0, 0, 0, .1);
+  }
+
+  .page-link.waves-effect {
+    display: block;
+  }
+
+  .page-item.active .page-link .waves-ripple,
+  .page-item.disabled .page-link .waves-ripple,
+  .pagination > li.active .waves-ripple,
+  .pagination > li.disabled .waves-ripple {
+    display: none;
+  }
+}
+
+// *******************************************************************************
+// * Sizing
+
+.pagination-lg .page-link,
+.pagination-lg > li > a:not(.page-link) {
+  min-width: calc(#{"#{($font-size-lg * $pagination-line-height) + ($pagination-padding-y-lg * 2)} + #{$pagination-border-width * 2}"});
+  line-height: 1;
+
+  @include border-radius($border-radius-lg);
+}
+
+.pagination-sm .page-link,
+.pagination-sm > li > a:not(.page-link) {
+  min-width: calc(#{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + #{$pagination-border-width * 2}"});
+  line-height: 1;
+
+  @include border-radius($border-radius-sm);
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_popover.scss

@@ -0,0 +1,53 @@
+// Popovers
+//
+
+.popover {
+  box-shadow: $popover-box-shadow;
+
+  .arrow {
+    z-index: 1;
+  }
+}
+
+.modal-open .popover {
+  z-index: $zindex-modal-top + 1;
+}
+
+@each $color, $value in $theme-colors {
+  @if $color != primary and $color != light {
+    @include appwork-popover-variant('.popover-#{$color}, .popover-#{$color} > .popover, .ngb-popover-#{$color} + ngb-popover-window', rgba-to-hex($value));
+  }
+}
+
+// *******************************************************************************
+// * Material
+
+@if $material-style {
+  .popover {
+    transition: none;
+  }
+
+  .popover-header {
+    border-bottom-width: 1px;
+  }
+
+  .bs-popover-top,
+  .bs-popover-auto[x-placement^="top"] {
+    animation: topTooltipAnimation .25s;
+  }
+
+  .bs-popover-right,
+  .bs-popover-auto[x-placement^="right"] {
+    animation: rightTooltipAnimation .25s;
+  }
+
+  .bs-popover-bottom,
+  .bs-popover-auto[x-placement^="bottom"] {
+    animation: bottomTooltipAnimation .25s;
+  }
+
+  .bs-popover-left,
+  .bs-popover-auto[x-placement^="left"] {
+    animation: leftTooltipAnimation .25s;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_reboot.scss

@@ -0,0 +1,16 @@
+// Reboot
+//
+
+b,
+strong {
+  font-weight: $font-weight-bold;
+}
+
+@include rtl-only {
+  dd {
+    margin-right: 0;
+  }
+  caption {
+    text-align: right;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_sidenav.scss

@@ -0,0 +1,702 @@
+.sidenav {
+  display: flex;
+
+  .ps__thumb-y,
+  .ps__rail-y {
+    width: .125rem !important;
+  }
+
+  .ps__rail-y {
+    right: .25rem !important;
+    left: auto !important;
+    background: none !important;
+
+    @include rtl-style {
+      right: auto !important;
+      left: .25rem !important;
+    }
+  }
+
+  .ps__rail-y:hover,
+  .ps__rail-y:focus,
+  .ps__rail-y.ps--clicking,
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y,
+  .ps__rail-y.ps--clicking > .ps__thumb-y {
+    width: .375rem !important;
+  }
+}
+
+.sidenav-inner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+}
+
+.sidenav-item,
+.sidenav-header,
+.sidenav-divider,
+.sidenav-block {
+  flex: 0 0 auto;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sidenav-item {
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &.sidenav-item-animating {
+    transition: height $sidenav-animation-duration ease-in-out;
+  }
+}
+
+.sidenav-item .sidenav-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
+
+  .sidenav-item.active > & {
+    font-weight: $font-weight-semibold;
+  }
+
+  .sidenav-item.disabled & {
+    cursor: default !important;
+  }
+
+  .sidenav:not(.sidenav-no-animation) & {
+    transition-duration: $sidenav-animation-duration;
+    transition-property: color, background-color;
+  }
+
+   > :not(.sidenav-icon) {
+    flex: 0 1 auto;
+  }
+}
+
+.sidenav-toggle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  display: block;
+  width: $caret-width;
+  height: $caret-width;
+  border: 1px solid;
+  border-top: 0;
+  border-right: 0;
+  transform: translateY(-50%) rotate(45deg);
+
+  @include rtl-style {
+    border-right: 1px solid;
+    border-left: 0;
+    transform: translateY(-50%) rotate(-45deg);
+  }
+
+  .sidenav-item.open:not(.sidenav-item-closing) > & {
+    transform: translateY(-50%) rotate(-45deg);
+
+    @include rtl-style {
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+
+  .sidenav:not(.sidenav-no-animation) & {
+    transition-duration: $sidenav-animation-duration;
+    transition-property: -webkit-transform, transform;
+  }
+}
+
+.sidenav-menu {
+  display: none;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  .sidenav:not(.sidenav-no-animation) & {
+    transition: background-color $sidenav-animation-duration;
+  }
+
+  .sidenav-item.open > & {
+    display: flex;
+  }
+}
+
+.sidenav-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: $sidenav-icon-expanded-spacer;
+  font-size: $sidenav-icon-expanded-font-size;
+
+  @include rtl-style {
+    margin-right: 0;
+    margin-left: $sidenav-icon-expanded-spacer;
+  }
+}
+
+.sidenav-divider {
+  width: 100%;
+  border: 0;
+  border-top: 1px solid;
+}
+
+// *******************************************************************************
+// * Vertical
+
+.sidenav-vertical {
+  overflow: hidden;
+  flex-direction: column;
+
+  &:not(.sidenav-no-animation) {
+    transition: width $sidenav-animation-duration;
+  }
+
+  &,
+  .sidenav-block,
+  .sidenav-inner > .sidenav-item,
+  .sidenav-inner > .sidenav-header {
+    width: $sidenav-width;
+  }
+
+  .sidenav-inner {
+    flex-direction: column;
+    flex: 1 1 auto;
+
+     > .sidenav-item {
+      margin: $sidenav-item-spacer 0;
+    }
+  }
+
+  .sidenav-item .sidenav-link,
+  .sidenav-header,
+  .sidenav-block {
+    padding: $sidenav-vertical-link-padding-y $sidenav-vertical-link-padding-x;
+  }
+
+  .sidenav-divider {
+    margin-top: $sidenav-vertical-link-padding-y;
+    margin-bottom: $sidenav-vertical-link-padding-y;
+    padding: 0;
+  }
+
+  .sidenav-item .sidenav-toggle {
+    padding-right: calc(#{$sidenav-vertical-link-padding-x} + #{$caret-width * 3});
+
+    @include rtl-style {
+      padding-right: $sidenav-vertical-link-padding-x;
+      padding-left: calc(#{$sidenav-vertical-link-padding-x} + #{$caret-width * 3});
+    }
+
+    &::after {
+      right: $sidenav-vertical-link-padding-x;
+
+      @include rtl-style {
+        right: auto;
+        left: $sidenav-vertical-link-padding-x;
+      }
+    }
+  }
+
+  .sidenav-menu {
+    padding-top: $sidenav-vertical-menu-link-padding-y;
+    padding-bottom: $sidenav-vertical-menu-link-padding-y;
+
+    .sidenav-link {
+      padding-top: $sidenav-vertical-menu-link-padding-y;
+      padding-bottom: $sidenav-vertical-menu-link-padding-y;
+    }
+  }
+
+  .sidenav-icon {
+    width: $sidenav-icon-expanded-width;
+  }
+
+  .sidenav-menu .sidenav-icon {
+    margin-right: 0;
+
+    @include rtl-style {
+      margin-left: 0;
+    }
+  }
+
+  // Levels
+  //
+
+  $sidenav-first-level-spacer: $sidenav-vertical-link-padding-x + $sidenav-icon-expanded-width + $sidenav-icon-expanded-spacer;
+
+  .sidenav-menu .sidenav-link {
+    padding-left: $sidenav-first-level-spacer;
+
+    @include rtl-style {
+      padding-right: $sidenav-first-level-spacer;
+      padding-left: $sidenav-vertical-link-padding-x;
+    }
+  }
+
+  @for $i from 2 through $sidenav-max-levels {
+    $selector: '';
+
+    @for $l from 1 through $i {
+      $selector: "#{$selector} .sidenav-menu";
+    }
+
+    #{$selector} .sidenav-link {
+      padding-left: $sidenav-first-level-spacer + ($sidenav-vertical-menu-level-spacer * ($i - 1));
+
+      @include rtl-style {
+        padding-right: $sidenav-first-level-spacer + ($sidenav-vertical-menu-level-spacer * ($i - 1));
+        padding-left: $sidenav-vertical-link-padding-x;
+      }
+    }
+  }
+}
+
+
+// *******************************************************************************
+// * Horizontal
+
+.sidenav-horizontal {
+  flex-direction: row;
+  width: 100%;
+
+  .sidenav-inner {
+    overflow: hidden;
+    flex-direction: row;
+    flex: 0 1 100%;
+  }
+
+  .sidenav-item .sidenav-link {
+    padding: $sidenav-horizontal-link-padding-y $sidenav-horizontal-link-padding-x;
+  }
+
+  .sidenav-item .sidenav-toggle {
+    padding-right: calc(#{$sidenav-horizontal-link-padding-x} + #{$caret-width * 3});
+
+    @include rtl-style {
+      padding-right: $sidenav-horizontal-link-padding-x;
+      padding-left: calc(#{$sidenav-horizontal-link-padding-x} + #{$caret-width * 3});
+    }
+
+    &::after {
+      right: $sidenav-horizontal-link-padding-x;
+
+      @include rtl-style {
+        right: auto;
+        left: $sidenav-horizontal-link-padding-x;
+      }
+
+    }
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-toggle::after {
+    transform: translateY(-50%) rotate(-45deg);
+
+    @include rtl-style {
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+
+  .sidenav-inner > .sidenav-item:not(.sidenav-item-closing).open > .sidenav-toggle::after {
+    transform: translateY(-50%) rotate(135deg);
+
+    @include rtl-style {
+      transform: translateY(-50%) rotate(-135deg);
+    }
+  }
+
+  .sidenav-header,
+  .sidenav-divider {
+    display: none !important;
+  }
+
+  .sidenav-menu {
+    position: absolute;
+    width: $sidenav-menu-width;
+
+    .sidenav-menu {
+      position: static;
+      width: auto;
+    }
+
+    .sidenav-link {
+      padding-top: $sidenav-horizontal-menu-link-padding-y;
+      padding-bottom: $sidenav-horizontal-menu-link-padding-y;
+    }
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-menu {
+    @include border-bottom-radius($border-radius);
+  }
+
+  &:not(.sidenav-no-animation) .sidenav-inner > .sidenav-item.open > .sidenav-menu {
+    animation: sidenavDropdownShow $sidenav-animation-duration ease-in-out;
+  }
+
+  // Levels
+  @for $i from 2 through $sidenav-max-levels {
+    $selector: '';
+
+    @for $l from 1 through $i {
+      $selector: "#{$selector} .sidenav-menu";
+    }
+
+    #{$selector} .sidenav-link {
+      padding-left: $sidenav-horizontal-menu-level-spacer * $i;
+
+      @include rtl-style {
+        padding-right: $sidenav-horizontal-menu-level-spacer * $i;
+        padding-left: $sidenav-horizontal-link-padding-x;
+      }
+    }
+  }
+}
+
+.sidenav-horizontal-wrapper {
+  overflow: hidden;
+  flex: 0 1 100%;
+  width: 0;
+
+  .sidenav:not(.sidenav-no-animation) & .sidenav-inner {
+    transition: margin $sidenav-animation-duration;
+  }
+}
+
+.sidenav-horizontal-prev,
+.sidenav-horizontal-next {
+  position: relative;
+  display: block;
+  flex: 0 0 auto;
+  width: $sidenav-control-width;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: $sidenav-control-arrow-size;
+    height: $sidenav-control-arrow-size;
+    border: 1px solid;
+    border-top: 0;
+  }
+
+  &.disabled {
+    cursor: default !important;
+  }
+}
+
+.sidenav-horizontal-prev::after {
+  border-right: 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+
+  @include rtl-style {
+    transform: translate(-50%, -50%) rotate(-135deg);
+  }
+}
+
+.sidenav-horizontal-next::after {
+  border-left: 0;
+  transform: translate(-50%, -50%) rotate(-45deg);
+
+  @include rtl-style {
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+}
+
+@include keyframes(sidenavDropdownShow) {
+  0% {
+    opacity: 0;
+    transform: translateY(-.5rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// *******************************************************************************
+// * Universal coloring
+
+.sidenav-dark {
+  color: $navbar-dark-color;
+
+  .sidenav-link,
+  .sidenav-horizontal-prev,
+  .sidenav-horizontal-next {
+    color: $navbar-dark-color;
+
+    @include hover-focus {
+      color: $navbar-dark-hover-color;
+    }
+
+    &.active {
+      color: $navbar-dark-active-color;
+    }
+  }
+
+  .sidenav-item.disabled .sidenav-link {
+    color: $navbar-dark-disabled-color !important;
+  }
+
+  .sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle,
+  .sidenav-item.active > .sidenav-link {
+    color: $navbar-dark-active-color;
+  }
+
+  .sidenav-item.active > .sidenav-link:not(.sidenav-toggle) {
+    background: $sidenav-dark-menu-bg;
+  }
+
+  .sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-menu,
+  .sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-toggle {
+    color: $navbar-dark-color;
+  }
+
+  .sidenav-text {
+    color: $navbar-dark-active-color;
+  }
+
+  .sidenav-header {
+    color: $navbar-dark-color;
+  }
+
+  hr,
+  .sidenav-divider,
+  .sidenav-inner > .sidenav-item.open > .sidenav-menu::before {
+    border-color: $sidenav-dark-border-color !important;
+  }
+
+  .sidenav-inner > .sidenav-header::before,
+  .sidenav-block::before {
+    background-color: $navbar-dark-disabled-color;
+  }
+
+  .sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before {
+    background-color: $sidenav-dark-border-color;
+  }
+
+  .sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
+    background-color: $navbar-dark-active-color;
+  }
+
+  .ps__thumb-y {
+    background: $navbar-dark-color !important;
+  }
+}
+
+.sidenav-light {
+  color: $navbar-light-color;
+
+  .sidenav-link,
+  .sidenav-horizontal-prev,
+  .sidenav-horizontal-next {
+    color: $navbar-light-color;
+
+    @include hover-focus {
+      color: $navbar-light-hover-color;
+    }
+
+    &.active {
+      color: $navbar-light-active-color;
+    }
+  }
+
+  .sidenav-item.disabled .sidenav-link {
+    color: $navbar-light-disabled-color !important;
+  }
+
+  .sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle,
+  .sidenav-item.active > .sidenav-link {
+    color: $navbar-light-active-color;
+  }
+
+  .sidenav-item.active > .sidenav-link:not(.sidenav-toggle) {
+    background: $sidenav-light-menu-bg;
+  }
+
+  .sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-menu,
+  .sidenav-inner > .sidenav-item.sidenav-item-closing .sidenav-item.open .sidenav-toggle {
+    color: $navbar-light-color;
+  }
+
+  .sidenav-text {
+    color: $navbar-light-active-color;
+  }
+
+  .sidenav-header {
+    color: $navbar-light-color;
+  }
+
+  hr,
+  .sidenav-divider,
+  .sidenav-inner > .sidenav-item.open > .sidenav-menu::before {
+    border-color: $sidenav-light-border-color !important;
+  }
+
+  .sidenav-inner > .sidenav-header::before,
+  .sidenav-block::before {
+    background-color: $navbar-light-disabled-color;
+  }
+
+  .sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before {
+    background-color: $sidenav-light-border-color;
+  }
+
+  .sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
+    background-color: $navbar-light-active-color;
+  }
+
+  .ps__thumb-y {
+    background: $navbar-light-color !important;
+  }
+}
+
+// *******************************************************************************
+// * Collapsed
+
+@mixin sidenav-collapsed() {
+  width: $sidenav-collapsed-width;
+
+  .sidenav-inner > .sidenav-item {
+    width: $sidenav-width + ($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width);
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-link {
+    padding-left: $sidenav-collapsed-width;
+  }
+
+  .sidenav-inner > .sidenav-header,
+  .sidenav-block {
+    position: relative;
+    margin-left: $sidenav-collapsed-width;
+    padding-right: ($sidenav-vertical-link-padding-x * 2) - $sidenav-icon-expanded-spacer;
+    padding-left: $sidenav-icon-expanded-spacer;
+    width: $sidenav-width;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: $sidenav-vertical-link-padding-y;
+      bottom: $sidenav-vertical-link-padding-y;
+      left: -1 * ($sidenav-collapsed-width * .75);
+      display: block;
+      width: $sidenav-collapsed-width / 2;
+    }
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-menu,
+  .sidenav-inner > .sidenav-item.open > .sidenav-menu {
+    position: relative;
+    margin-left: $sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width;
+    background: none !important;
+
+    .sidenav-link {
+      background: none !important;
+      transition: none !important;
+    }
+  }
+
+  .sidenav-inner > .sidenav-item.open > .sidenav-menu {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(#{$sidenav-collapsed-width / 2} - 1px);
+      display: block;
+      margin-left: -($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width);
+      width: 0;
+      border-left: 2px solid;
+    }
+  }
+
+  .sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle,
+  .sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      display: block;
+      margin-top: -4px;
+      margin-left: calc(#{($sidenav-collapsed-width / 2) - ($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width)} - 4px);
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-toggle::after {
+    right: auto;
+    left: $sidenav-collapsed-width - $sidenav-control-arrow-size - .375rem;
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-link .sidenav-icon {
+    margin-left: -$sidenav-collapsed-width;
+    width: $sidenav-collapsed-width;
+    text-align: center;
+  }
+}
+
+@mixin sidenav-collapsed-rtl() {
+  .sidenav-inner > .sidenav-item > .sidenav-link {
+    padding-right: $sidenav-collapsed-width;
+    padding-left: $sidenav-vertical-link-padding-x;
+  }
+
+  .sidenav-inner > .sidenav-header,
+  .sidenav-block {
+    margin-right: $sidenav-collapsed-width;
+    margin-left: 0;
+    padding-right: $sidenav-icon-expanded-spacer;
+    padding-left: ($sidenav-vertical-link-padding-x * 2) - $sidenav-icon-expanded-spacer;
+
+    &::before {
+      right: -1 * ($sidenav-collapsed-width * .75);
+      left: auto;
+    }
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-menu,
+  .sidenav-inner > .sidenav-item.open > .sidenav-menu {
+    margin-right: $sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width;
+    margin-left: 0;
+  }
+
+  .sidenav-inner > .sidenav-item.open > .sidenav-menu::before {
+    right: calc(#{$sidenav-collapsed-width / 2} - 1px);
+    left: auto;
+    margin-right: -($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width);
+    margin-left: 0;
+  }
+
+  .sidenav-inner > .sidenav-item.open .sidenav-item.open > .sidenav-toggle::before,
+  .sidenav-inner > .sidenav-item.open .sidenav-item.active > .sidenav-link::before {
+    right: 0;
+    left: auto;
+    margin-right: calc(#{($sidenav-collapsed-width / 2) - ($sidenav-collapsed-width - $sidenav-vertical-link-padding-x - $sidenav-icon-expanded-width)} - 4px);
+    margin-left: 0;
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-toggle::after {
+    right: $sidenav-collapsed-width - $sidenav-control-arrow-size - .375rem;
+    left: auto;
+  }
+
+  .sidenav-inner > .sidenav-item > .sidenav-link .sidenav-icon {
+    margin-right: -$sidenav-collapsed-width;
+    margin-left: $sidenav-icon-expanded-spacer;
+  }
+}
+
+.sidenav-collapsed:not(:hover) {
+  @include sidenav-collapsed();
+
+  @include rtl-style {
+    @include sidenav-collapsed-rtl();
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_spinners.scss

@@ -0,0 +1,29 @@
+// Spinners
+//
+
+@include keyframes('spinner-border-rtl') {
+  to { transform: rotate(-360deg); }
+}
+
+@include rtl-only {
+  .spinner-border {
+    animation-name: spinner-border-rtl;
+  }
+}
+
+// *******************************************************************************
+// * Within button
+
+.btn {
+  .spinner-border,
+  .spinner-grow {
+    height: 1em;
+    width: 1em;
+    top: -.0625rem;
+    position: relative;
+  }
+
+  .spinner-border {
+    border-width: .15em;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_switcher.scss

@@ -0,0 +1,280 @@
+// Switchers
+//
+
+.switcher {
+  position: relative;
+  display: inline-block;
+  margin-right: $switcher-spacer-x;
+  margin-bottom: 0;
+  border-radius: 60rem;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: default;
+
+  @include appwork-switcher-size-base($switcher-width, $switcher-height, $switcher-font-size, $switcher-label-font-size, $switcher-label-line-height);
+
+  @include rtl-style {
+    margin-right: 0;
+    margin-left: $switcher-spacer-x;
+  }
+
+  .form-inline & {
+    @include media-breakpoint-up(sm) {
+      display: block;
+      margin-right: 0;
+
+      @include rtl-style {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Input
+
+.switcher-input {
+  position: absolute;
+  z-index: -1;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+}
+
+// *******************************************************************************
+// * Indicator
+
+.switcher-indicator {
+  position: absolute;
+  left: 0;
+  overflow: hidden;
+  border-radius: 60rem;
+  background: $switcher-off-bg;
+  color: $switcher-off-color;
+  font-weight: bold;
+  cursor: default;
+  transition-duration: .2s;
+  transition-property: left, right, background, box-shadow;
+  user-select: none;
+
+  @if $material-style {
+    overflow: visible;
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      border-radius: 50%;
+      background: rgba($black, .08);
+      opacity: 0;
+      transition: all .2s;
+      transform: scale(0) translateZ(0);
+
+      .switcher-input:focus ~ & {
+        opacity: 1;
+        transform: scale(2.25) translateZ(0);
+      }
+
+      .switcher-input:active ~ & {
+        opacity: 0;
+        transform: scale(0) translateZ(0);
+      }
+
+      .switcher-input:disabled ~ & {
+        display: none;
+      }
+    }
+  }
+}
+
+// *******************************************************************************
+// * Description
+
+.switcher-label {
+  position: relative;
+  display: inline-block;
+  padding-left: $switcher-gutter;
+  color: $switcher-label-color;
+  font-weight: 400;
+  cursor: default;
+}
+
+// *******************************************************************************
+// * Checked / Unchecked states
+
+.switcher-no,
+.switcher-yes {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition-duration: .2s;
+  transition-property: left, right;
+
+  @include rtl-style {
+     > * {
+      transform: scaleX(-1);
+    }
+  }
+
+  @if $material-style {
+    display: none;
+  }
+}
+
+.switcher-no {
+  left: 0;
+
+  @include rtl-style {
+    right: 0;
+    left: auto;
+  }
+}
+
+.switcher-yes {
+  left: -100%;
+
+  @include rtl-style {
+    right: -100%;
+    left: auto;
+  }
+
+  .switcher-input:not(:checked) ~ .switcher-indicator & {
+    color: transparent;
+  }
+}
+
+// Checked state
+.switcher-input:checked ~ .switcher-indicator {
+  .switcher-no {
+    left: 100%;
+    color: transparent;
+
+    @include rtl-style {
+      right: 100%;
+      left: auto;
+    }
+  }
+
+  .switcher-yes {
+    left: 0;
+
+    @include rtl-style {
+      right: 0;
+      left: auto;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Holder
+
+.switcher-indicator::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  display: block;
+  border-radius: 999px;
+  background: $switcher-holder-bg;
+  box-shadow: $switcher-holder-shadow;
+  transition-duration: .2s;
+  transition-property: left, right, background;
+
+  @include rtl-style {
+    right: 0;
+    left: auto;
+  }
+}
+
+// *******************************************************************************
+// * Disabled
+
+.switcher-input:disabled {
+   ~ .switcher-indicator {
+    opacity: .5;
+
+    &::after {
+      box-shadow: none;
+    }
+  }
+
+   ~ .switcher-label {
+    color: $switcher-label-disabled-color;
+  }
+}
+
+// *******************************************************************************
+// * Stacked
+
+.switchers-stacked {
+  @include clearfix;
+
+  .switcher {
+    display: block;
+    margin-right: 0;
+    margin-bottom: $switcher-spacer-y;
+
+    @include rtl-style {
+      margin-left: 0;
+      float: right;
+      max-width: 100%;
+      clear: both;
+    }
+  }
+}
+
+// *******************************************************************************
+// * Square
+
+.switcher-square,
+.switcher-square .switcher-indicator {
+  @if $enable-rounded {
+    border-radius: $switcher-square-border-radius;
+  } @else {
+    border-radius: 0;
+  }
+}
+
+.switcher-square .switcher-indicator::after {
+  @if $enable-rounded {
+    border-radius: if($material-style, $switcher-square-border-radius, calc(#{$switcher-square-border-radius} - 2px));
+  } @else {
+    border-radius: 0;
+  }
+}
+
+// *******************************************************************************
+// * Sizes
+
+@include appwork-switcher-size("sm", $switcher-width-sm, $switcher-height-sm, $switcher-font-size, $switcher-label-font-size-sm, $switcher-label-line-height-sm);
+@include appwork-switcher-size("lg", $switcher-width-lg, $switcher-height-lg, $switcher-font-size, $switcher-label-font-size-lg, $switcher-label-line-height-lg);
+
+// *******************************************************************************
+// * Variations
+
+@each $color, $value in $theme-colors {
+  @if $color != primary and $color != light {
+    @if $material-style {
+      @include appwork-material-switcher-variant('.switcher-#{$color}', $value);
+    } @else {
+      @include appwork-switcher-variant('.switcher-#{$color}', $value);
+    }
+  }
+}
+
+// *******************************************************************************
+// * Validation states
+
+.switcher .valid-feedback,
+.switcher .invalid-feedback {
+  padding-left: $switcher-gutter;
+}
+
+@if $material-style {
+  @include appwork-material-switcher-validation-state("valid", $form-feedback-valid-color);
+  @include appwork-material-switcher-validation-state("invalid", $form-feedback-invalid-color);
+} @else {
+  @include appwork-switcher-validation-state("valid", $form-feedback-valid-color);
+  @include appwork-switcher-validation-state("invalid", $form-feedback-invalid-color);
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_tables.scss

@@ -0,0 +1,134 @@
+// Tables
+//
+
+@each $color, $value in $theme-colors {
+  @if $color != primary and $color != light {
+    @include appwork-table-row-variant('.table-#{$color}', $value);
+  }
+}
+
+.table.table-fixed {
+  table-layout: fixed;
+}
+
+.table th {
+  font-weight: $font-weight-semibold;
+}
+
+// *******************************************************************************
+// * Active
+
+.table-active,
+.table-active > th,
+.table-active > td {
+  border-color: rgba($black, .035);
+  background-color: $table-active-bg;
+}
+
+.table-hover .table-active:hover,
+.table-hover .table-active:hover > td,
+.table-hover .table-active:hover > th {
+  background-color: rgba-to-hex(rgba($table-active-bg, .99), #000);
+}
+
+// *******************************************************************************
+// * Within card
+
+.card-table {
+  margin-bottom: 0;
+}
+
+.card,
+.nav-tabs-top,
+.nav-tabs-right,
+.nav-tabs-bottom,
+.nav-tabs-left {
+  .table:not(.table-dark),
+  .table:not(.table-dark) thead:not(.thead-dark) th,
+  .table:not(.table-dark) td {
+    border-color: rgba-to-hex($card-inner-border-color);
+  }
+}
+
+.card-table > thead:first-child > tr:first-child,
+.card-table > tbody:first-child > tr:first-child,
+.card-table > tfoot:first-child > tr:first-child {
+   > td,
+   > th {
+    border-top: 0;
+  }
+}
+
+@include ltr-only {
+  .card-table > thead > tr,
+  .card-table > tbody > tr,
+  .card-table > tfoot > tr {
+     > td,
+     > th {
+      &:first-child {
+        padding-left: $card-spacer-x;
+        border-left: 0;
+      }
+
+      &:last-child {
+        padding-right: $card-spacer-x;
+        border-right: 0;
+      }
+    }
+  }
+
+  // Condenced
+  .card-condenced .card-table > thead > tr,
+  .card-condenced .card-table > tbody > tr,
+  .card-condenced .card-table > tfoot > tr {
+     > td,
+     > th {
+      &:first-child {
+        padding-left: $card-spacer-x-sm;
+        border-left: 0;
+      }
+
+      &:last-child {
+        padding-right: $card-spacer-x-sm;
+        border-right: 0;
+      }
+    }
+  }
+}
+
+@include rtl-only {
+  .card-table > thead > tr,
+  .card-table > tbody > tr,
+  .card-table > tfoot > tr {
+     > td,
+     > th {
+      &:first-child {
+        padding-right: $card-spacer-x;
+        border-right: 0;
+      }
+
+      &:last-child {
+        padding-left: $card-spacer-x;
+        border-left: 0;
+      }
+    }
+  }
+
+  // Condenced
+  .card-condenced .card-table > thead > tr,
+  .card-condenced .card-table > tbody > tr,
+  .card-condenced .card-table > tfoot > tr {
+     > td,
+     > th {
+      &:first-child {
+        padding-right: $card-spacer-x;
+        border-right: 0;
+      }
+
+      &:last-child {
+        padding-left: $card-spacer-x;
+        border-left: 0;
+      }
+    }
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_toasts.scss

@@ -0,0 +1,18 @@
+// Toasts
+//
+
+.toast.bs4-toast {
+  background-color: $toast-background-color;
+  background-clip: padding-box;
+}
+
+.bs4-toast[class^="bg-"],
+.bs4-toast[class*=" bg-"] {
+  border: none;
+}
+
+@each $color, $value in $theme-colors {
+  @if $color != primary {
+    @include appwork-toast-variant('.bg-#{$color}', $value);
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_tooltip.scss

@@ -0,0 +1,45 @@
+// Tooltips
+//
+
+.tooltip-inner {
+  box-shadow: $tooltip-box-shadow;
+}
+
+.modal-open .tooltip {
+  z-index: $zindex-modal-top + 2;
+}
+
+@each $color, $value in $theme-colors {
+  @if $color != primary and $color != light {
+    @include appwork-tooltip-variant('.tooltip-#{$color}, .tooltip-#{$color} > .tooltip, .ngb-tooltip-#{$color} + ngb-tooltip-window', rgba-to-hex($value));
+  }
+}
+
+// *******************************************************************************
+// * Material
+
+@if $material-style {
+  .tooltip {
+    transition: none;
+  }
+
+  .tooltip.bs-tooltip-top,
+  .bs-tooltip-auto[x-placement^="top"] {
+    animation: topTooltipAnimation .25s;
+  }
+
+  .tooltip.bs-tooltip-right,
+  .bs-tooltip-auto[x-placement^="right"] {
+    animation: rightTooltipAnimation .25s;
+  }
+
+  .tooltip.bs-tooltip-bottom,
+  .bs-tooltip-auto[x-placement^="bottom"] {
+    animation: bottomTooltipAnimation .25s;
+  }
+
+  .tooltip.bs-tooltip-left,
+  .bs-tooltip-auto[x-placement^="left"] {
+    animation: leftTooltipAnimation .25s;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_type.scss

@@ -0,0 +1,13 @@
+// Type
+//
+
+@include rtl-only {
+  .list-unstyled,
+  .list-inline {
+    padding-right: 0;
+  }
+  .list-inline-item:not(:last-child) {
+    margin-right: 0;
+    margin-left: $list-inline-padding;
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_utilities.scss

@@ -0,0 +1,422 @@
+// Utilities
+//
+
+.opacity-25            { opacity: .25 !important; }
+.opacity-50            { opacity: .5 !important; }
+.opacity-75            { opacity: .75 !important; }
+.opacity-100           { opacity: 1 !important; }
+
+.text-tiny             { font-size: $tiny-font-size !important; }
+.text-big              { font-size: $big-font-size !important; }
+.text-large            { font-size: $large-font-size !important; }
+.text-xlarge           { font-size: $xlarge-font-size !important; }
+
+.line-height-1         { line-height: 1 !important; }
+.line-height-condenced { line-height: 1.3 !important; }
+.line-height-inherit   { line-height: inherit !important; }
+
+.text-expanded         { letter-spacing: ((1 / (strip-unit($font-size-base) * 16)) * 1em) !important; }
+
+.font-weight-semibold  { font-weight: $font-weight-semibold !important; }
+.text-transform-none   { text-transform: none !important; }
+
+.text-sans-serif       { font-family: $font-family-sans-serif !important; }
+.text-serif            { font-family: $font-family-serif !important; }
+
+.cursor-pointer        { cursor: pointer !important; }
+.cursor-move {
+  cursor: move !important; // Fallback
+  cursor: grab !important;
+}
+
+// *******************************************************************************
+// * Layout containers
+
+.container-p-x {
+  padding-right: $container-padding-x-sm !important;
+  padding-left: $container-padding-x-sm !important;
+
+  @include media-breakpoint-up(lg) {
+    padding-right: $container-padding-x !important;
+    padding-left: $container-padding-x !important;
+  }
+}
+.container-m-nx {
+  margin-right: -$container-padding-x-sm !important;
+  margin-left: -$container-padding-x-sm !important;
+
+  @include media-breakpoint-up(lg) {
+    margin-right: -$container-padding-x !important;
+    margin-left: -$container-padding-x !important;
+  }
+}
+
+.container-p-y {
+  &:not([class^="pt-"]):not([class*=" pt-"]) {
+    padding-top: $container-padding-y !important;
+  }
+  &:not([class^="pb-"]):not([class*=" pb-"]) {
+    padding-bottom: $container-padding-y !important;
+  }
+}
+.container-m-ny {
+  &:not([class^="mt-"]):not([class*=" mt-"]) {
+    margin-top: -$container-padding-y !important;
+  }
+  &:not([class^="mb-"]):not([class*=" mb-"]) {
+    margin-bottom: -$container-padding-y !important;
+  }
+}
+
+// *******************************************************************************
+// * Transforms
+
+.rotate-90 { transform: rotate(90deg); }
+.rotate-180 { transform: rotate(180deg); }
+.rotate-270 { transform: rotate(270deg); }
+.rotate--90 { transform: rotate(-90deg); }
+.rotate--180 { transform: rotate(-180deg); }
+.rotate--270 { transform: rotate(-270deg); }
+.rotate-0 { transform: rotate(0deg) !important; }
+
+.scaleX--1 { transform: scaleX(-1); }
+.scaleY--1 { transform: scaleY(-1); }
+
+@include rtl-only {
+  .rotate-90 { transform: rotate(-90deg); }
+  .rotate-180 { transform: rotate(-180deg); }
+  .rotate-270 { transform: rotate(-270deg); }
+  .rotate--90 { transform: rotate(90deg); }
+  .rotate--180 { transform: rotate(180deg); }
+  .rotate--270 { transform: rotate(270deg); }
+
+  .scaleX--1 { transform: scaleX(1); }
+  .scaleY--1 { transform: scaleY(1); }
+
+  .scaleX--1-rtl { transform: scaleX(-1); }
+  .scaleY--1-rtl { transform: scaleY(-1); }
+}
+
+// *******************************************************************************
+// * Bordered rows
+
+.row-bordered {
+  overflow: hidden;
+
+   > .col,
+   > [class^="col-"],
+   > [class*=" col-"],
+   > [class^="col "],
+   > [class*=" col "],
+   > [class$=" col"],
+   > [class="col"] {
+    position: relative;
+    padding-top: 1px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      bottom: -1px;
+      left: 0;
+      display: block;
+      height: 0;
+      border-top: 1px solid $bordered-row-border-color;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -1px;
+      display: block;
+      width: 0;
+      border-left: 1px solid $bordered-row-border-color;
+    }
+  }
+
+  &.row-border-light {
+     > .col,
+     > [class^="col-"],
+     > [class*=" col-"],
+     > [class^="col "],
+     > [class*=" col "],
+     > [class$=" col"],
+     > [class="col"] {
+      &::before,
+      &::after {
+        border-color: $gray-100;
+      }
+    }
+  }
+}
+
+@include rtl-only {
+  .row-bordered > .col::after,
+  .row-bordered > [class^="col-"]::after,
+  .row-bordered > [class*=" col-"]::after,
+  .row-bordered > [class^="col "]::after,
+  .row-bordered > [class*=" col "]::after,
+  .row-bordered > [class$=" col"]::after,
+  .row-bordered > [class="col"]::after {
+    left: auto;
+    right: -1px;
+  }
+}
+
+// *******************************************************************************
+// * Width
+
+@each $breakpoint in slice-list(map-keys($grid-breakpoints), 2) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .w#{$infix}-100 { width: 100% !important; }
+    .w#{$infix}-auto { width: auto !important; }
+  }
+}
+
+// *******************************************************************************
+// * Table cell
+
+.cell-fit {
+  width: .1%;
+  white-space: nowrap;
+}
+
+// *******************************************************************************
+// * Flex
+
+.flex-truncate  { min-width: 0 !important; }
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .flex-basis#{$infix}-100 { flex-basis: 100% !important; }
+    .flex-basis#{$infix}-auto { flex-basis: auto !important; }
+  }
+}
+
+// IE fix
+.d-flex,
+.d-inline-flex,
+.media,
+.media > :not(.media-body),
+.jumbotron,
+.card {
+  flex-shrink: 1;
+}
+// Fix IE parent container height bug when containing image with fluid width
+.ie-mh-1 {
+  min-height: 1px;
+}
+
+// *******************************************************************************
+// * Text color
+
+.text-body[href]:hover {
+  color: $link-hover-color !important;
+}
+
+.text-muted[href] {
+  @include hover-focus { color: $text-muted-hover !important; }
+}
+
+.text-light {
+  color: $text-light !important;
+
+  &[href] {
+    @include hover-focus { color: $text-muted-hover !important; }
+  }
+}
+
+.text-lighter {
+  color: $text-lighter !important;
+
+  &[href] {
+    @include hover-focus { color: $text-muted-hover !important; }
+  }
+}
+
+.text-lightest {
+  color: $text-lightest !important;
+
+  &[href] {
+    @include hover-focus { color: $text-muted-hover !important; }
+  }
+}
+
+
+// *******************************************************************************
+// * Background color
+
+.bg-dark { background-color: $gray-900 !important; }
+a.bg-dark {
+  @include hover-focus { background-color: $gray-900 !important; }
+}
+
+.bg-light { background-color: $gray-100 !important; }
+a.bg-light {
+  @include hover-focus { background-color: $gray-200 !important; }
+}
+
+.bg-lighter { background-color: $gray-50 !important; }
+a.bg-lighter {
+  @include hover-focus { background-color: $gray-100 !important; }
+}
+
+.bg-lightest { background-color: $gray-25 !important; }
+a.bg-lightest {
+  @include hover-focus { background-color: $gray-50 !important; }
+}
+
+.bg-transparent {
+  background-image: none !important;
+}
+
+// *******************************************************************************
+// * Border color
+
+.border-light {
+  border-color: $gray-100 !important;
+}
+
+.border-transparent {
+  border-color: transparent !important;
+}
+
+// *******************************************************************************
+// * RTL
+
+@include rtl-only {
+  // Border
+  .border         { border: $border-width solid $border-color !important; }
+  .border-top     { border-top: $border-width solid $border-color !important; }
+  .border-right   { border-left: $border-width solid $border-color !important; }
+  .border-bottom  { border-bottom: $border-width solid $border-color !important; }
+  .border-left    { border-right: $border-width solid $border-color !important; }
+  .border-0        { border: 0 !important; }
+  .border-top-0    { border-top: 0 !important; }
+  .border-right-0  { border-left: 0 !important; }
+  .border-bottom-0 { border-bottom: 0 !important; }
+  .border-left-0   { border-right: 0 !important; }
+  @each $color, $value in $theme-colors {
+    .border-#{$color} { border-color: $value !important; }
+  }
+  .border-white { border-color: $white !important; }
+
+  // Border-radius
+  .rounded {
+    border-radius: $border-radius !important;
+  }
+  .rounded-top {
+    border-top-left-radius: $border-radius !important;
+    border-top-right-radius: $border-radius !important;
+  }
+  .rounded-right {
+    border-top-left-radius: $border-radius !important;
+    border-bottom-left-radius: $border-radius !important;
+  }
+  .rounded-bottom {
+    border-bottom-right-radius: $border-radius !important;
+    border-bottom-left-radius: $border-radius !important;
+  }
+  .rounded-left {
+    border-top-right-radius: $border-radius !important;
+    border-bottom-right-radius: $border-radius !important;
+  }
+  .rounded-circle { border-radius: 50% !important; }
+  .rounded-pill { border-radius: $rounded-pill !important; }
+  .rounded-0 { border-radius: 0 !important; }
+
+  // Float
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .float#{$infix}-left  { float: right !important; }
+      .float#{$infix}-right { float: left !important; }
+    }
+  }
+
+  // Responsive alignment
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .text#{$infix}-left   { text-align: right !important; }
+      .text#{$infix}-right  { text-align: left !important; }
+    }
+  }
+
+  // Margin and Padding
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      @each $prop, $abbrev in (margin: m, padding: p) {
+        @each $size, $length in $spacers {
+          .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+          .#{$abbrev}t#{$infix}-#{$size},
+          .#{$abbrev}y#{$infix}-#{$size} {
+            #{$prop}-top: $length !important;
+          }
+          .#{$abbrev}r#{$infix}-#{$size},
+          .#{$abbrev}x#{$infix}-#{$size} {
+            #{$prop}-left: $length !important;
+          }
+          .#{$abbrev}b#{$infix}-#{$size},
+          .#{$abbrev}y#{$infix}-#{$size} {
+            #{$prop}-bottom: $length !important;
+          }
+          .#{$abbrev}l#{$infix}-#{$size},
+          .#{$abbrev}x#{$infix}-#{$size} {
+            #{$prop}-right: $length !important;
+          }
+        }
+      }
+
+      // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
+      @each $size, $length in $spacers {
+        @if $size != 0 {
+          .m#{$infix}-n#{$size} { margin: -$length !important; }
+          .mt#{$infix}-n#{$size},
+          .my#{$infix}-n#{$size} {
+            margin-top: -$length !important;
+          }
+          .mr#{$infix}-n#{$size},
+          .mx#{$infix}-n#{$size} {
+            margin-left: -$length !important;
+          }
+          .mb#{$infix}-n#{$size},
+          .my#{$infix}-n#{$size} {
+            margin-bottom: -$length !important;
+          }
+          .ml#{$infix}-n#{$size},
+          .mx#{$infix}-n#{$size} {
+            margin-right: -$length !important;
+          }
+        }
+      }
+
+      // Some special margin utils
+      .m#{$infix}-auto { margin: auto !important; }
+      .mt#{$infix}-auto,
+      .my#{$infix}-auto {
+        margin-top: auto !important;
+      }
+      .mr#{$infix}-auto,
+      .mx#{$infix}-auto {
+        margin-left: auto !important;
+      }
+      .mb#{$infix}-auto,
+      .my#{$infix}-auto {
+        margin-bottom: auto !important;
+      }
+      .ml#{$infix}-auto,
+      .mx#{$infix}-auto {
+        margin-right: auto !important;
+      }
+    }
+  }
+}

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_variables-material.scss

@@ -0,0 +1,703 @@
+// Variables - Material style
+//
+
+// *******************************************************************************
+// * Colors
+
+$white:        #fff !default;
+$black:        #181C21 !default;
+$gray-25:      rgba($black, .015) !default;
+$gray-50:      rgba($black, .03) !default;
+$gray-100:     rgba($black, .06) !default;
+$gray-200:     rgba($black, .1) !default;
+$gray-300:     rgba($black, .2) !default;
+$gray-400:     rgba($black, .3) !default;
+$gray-500:     rgba($black, .4) !default;
+$gray-600:     rgba($black, .5) !default;
+$gray-700:     rgba($black, .6) !default;
+$gray-800:     rgba($black, .8) !default;
+$gray-900:     rgba($black, .9) !default;
+
+$grays: (
+  "25": $gray-25,
+  "50": $gray-50
+) !default;
+
+$blue:         #1e70cd !default;
+$indigo:       #6610f2 !default;
+$purple:       #6f42c1 !default;
+$pink:         #e83e8c !default;
+$red:          #d9534f !default;
+$orange:       #FEB744 !default;
+$yellow:       #FFD950 !default;
+$green:        #02BC77 !default;
+$teal:         #20c997 !default;
+$cyan:         #28c3d7 !default;
+
+$theme-colors: (
+  "primary":   $indigo,
+  "secondary": #8897AA,
+  "success":   $green,
+  "info":      $cyan,
+  "warning":   $yellow,
+  "danger":    $red,
+  "dark":      $gray-900
+) !default;
+
+$body-color:       #4E5155 !default; //#4a4a4a
+
+$link-color:       $blue !default;
+$link-hover-color: lighten($link-color, 10%) !default;
+
+$spacer: 1rem !default;
+
+// *******************************************************************************
+// * Fonts
+
+$font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !default;
+$font-family-serif:      Georgia, "Times New Roman", serif;
+$font-family-monospace:  "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:       $font-family-sans-serif !default;
+
+$font-size-base:         .894rem !default;
+$font-size-xl:           1.25rem !default;
+$font-size-lg:           1rem !default;
+$font-size-sm:           .75rem !default;
+$font-size-xs:           $font-size-sm !default;
+
+$font-weight-semibold:   500 !default;
+$font-weight-bolder:     900 !default;
+$font-weight-lighter:    100 !default;
+
+$line-height-base:       1.47 !default;
+$line-height-xl:         1.5 !default;
+$line-height-lg:         1.5 !default;
+$line-height-sm:         1.5 !default;
+$line-height-xs:         1.5 !default;
+
+$h1-font-size:           2.25rem !default;
+$h2-font-size:           1.813rem !default;
+$h3-font-size:           1.563rem !default;
+$h4-font-size:           1.313rem !default;
+$h5-font-size:           1rem !default;
+$h6-font-size:           $font-size-base !default;
+
+$headings-font-weight:   $font-weight-semibold !default;
+$headings-line-height:   1.1 !default;
+$headings-margin-bottom: $spacer !default;
+
+$display1-size:          4rem !default;
+$display2-size:          3.5rem !default;
+$display3-size:          3rem !default;
+$display4-size:          2rem !default;
+
+$tiny-font-size:         70% !default;
+$small-font-size:        85% !default;
+$big-font-size:          112% !default;
+$large-font-size:        150% !default;
+$xlarge-font-size:       170% !default;
+
+$text-muted:             rgba-to-hex($gray-500) !default;
+$text-muted-hover:       rgba-to-hex($gray-600) !default;
+$blockquote-small-color: rgba-to-hex($gray-500) !default;
+$text-light:             rgba-to-hex($gray-400) !default;
+$text-lighter:           rgba-to-hex($gray-300) !default;
+$text-lightest:          rgba-to-hex($gray-200) !default;
+
+$link-hover-decoration:  none !default;
+
+// *******************************************************************************
+// * Grid
+
+$grid-gutter-width: 1.5rem !default;
+
+$container-padding-x: 2rem !default;
+$container-padding-x-sm: 1rem !default;
+$container-padding-y: 1.5rem !default;
+
+// *******************************************************************************
+// * Components
+
+$border-color:                    $gray-100 !default;
+$border-inner-color:              rgba($black, .075) !default;
+$border-width:                    0px !default;
+
+$border-radius:                   .125rem !default;
+$border-radius-xl:                $border-radius !default;
+$border-radius-lg:                $border-radius !default;
+$border-radius-sm:                $border-radius !default;
+$border-radius-xs:                $border-radius !default;
+
+$component-line-height:           1.54 !default;
+$component-focus-shadow-width:    0 !default;
+
+$material-component-shadow:       0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.03) !default;
+
+$floating-component-border-color: rgba($black, .05) !default;
+$floating-component-shadow:       $material-component-shadow !default;
+
+$hr-border-width:                 1px !default;
+$hr-border-color:                 $border-color !default;
+
+$bordered-row-border-color:       $hr-border-color !default;
+
+$caret-width:                     .42em !default;
+$caret-vertical-align:            middle !default;
+$caret-spacing:                   .5em !default;
+
+$overflows: auto, hidden, scroll, visible !default;
+
+// *******************************************************************************
+// * Z-index master list
+
+$zindex-layout-fixed:  1080 !default;
+$zindex-modal-top:     1090 !default;
+$zindex-layout-mobile: 1100 !default;
+$zindex-notification:  999999 !default;
+
+// *******************************************************************************
+// * Tables
+
+$table-cell-padding:      .625rem !default;
+$table-cell-padding-sm:   .3125rem !default;
+
+$table-accent-bg:         rgba($black, .025) !default;
+$table-hover-bg:          rgba($black, .035) !default;
+$table-active-bg:         rgba-to-hex($table-hover-bg) !default;
+
+$table-border-width:      1px !default;
+$table-border-color:      rgba-to-hex($gray-200) !default;
+
+$table-head-bg:           $gray-50 !default;
+$table-head-color:        $body-color !default;
+
+$table-dark-bg:           $gray-900 !default;
+$table-dark-accent-bg:    rgba($white, .03) !default;
+$table-dark-hover-bg:     rgba($white, .05) !default;
+$table-dark-border-color: lighten(rgba-to-hex($gray-900), 7%) !default;
+$table-dark-color:        $white !default;
+
+// *******************************************************************************
+// * Buttons + Forms
+
+$input-btn-padding-y:      .5rem !default;
+$input-btn-padding-x:      1rem !default;
+$input-btn-font-size:      .8125rem !default;
+$input-btn-line-height:    1.47 !default;
+
+$input-btn-padding-y-xs:   .0625rem !default;
+$input-btn-padding-x-xs:   .5rem !default;
+$input-btn-font-size-xs:   .6875rem !default;
+$input-btn-line-height-xs: 1.55 !default;
+
+$input-btn-padding-y-sm:   .25rem !default;
+$input-btn-padding-x-sm:   .6875rem !default;
+$input-btn-font-size-sm:   .6875rem !default;
+$input-btn-line-height-sm: 1.55 !default;
+
+$input-btn-padding-y-lg:   .8125rem !default;
+$input-btn-padding-x-lg:   1.5rem !default;
+$input-btn-font-size-lg:   $font-size-lg !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+
+$input-btn-padding-y-xl:   .9375rem !default;
+$input-btn-padding-x-xl:   2.125rem !default;
+$input-btn-font-size-xl:   $font-size-xl !default;
+$input-btn-line-height-xl: $line-height-xl !default;
+
+// *******************************************************************************
+// * Buttons
+
+$btn-font-weight:       $font-weight-semibold !default;
+
+$btn-padding-y-xs:      $input-btn-padding-y-xs !default;
+$btn-padding-x-xs:      $input-btn-padding-x-xs !default;
+$btn-font-size-xs:      $input-btn-font-size-xs !default;
+$btn-line-height-xs:    $input-btn-line-height-xs !default;
+
+$btn-padding-y-xl:      $input-btn-padding-y-xl !default;
+$btn-padding-x-xl:      $input-btn-padding-x-xl !default;
+$btn-font-size-xl:      $input-btn-font-size-xl !default;
+$btn-line-height-xl:    $input-btn-line-height-xl !default;
+
+$btn-border-radius-xs:  $border-radius-xs !default;
+$btn-border-radius-xl:  $border-radius-xl !default;
+
+$btn-box-shadow:        $material-component-shadow !default;
+$btn-focus-box-shadow:  0px 2px 4px -1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.10), 0px 1px 10px 0px rgba(0, 0, 0, 0.06) !default;
+$btn-active-box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.15), 0px 8px 10px 1px rgba(0, 0, 0, 0.10), 0px 3px 14px 2px rgba(0, 0, 0, 0.06) !default;
+
+$btn-default-bg:        #fff !default;
+$btn-default-border:    $gray-200 !default;
+$btn-default-color:     $body-color !default;
+
+$btn-transition:        all .2s ease-in-out !default;
+
+// *******************************************************************************
+// * Forms
+
+$enable-validation-icons:                       false !default;
+
+$label-font-size:                               .83125rem !default;
+$label-font-weight:                             $font-weight-semibold !default;
+
+$input-border-radius:                           0px !default;
+$input-border-radius-lg:                        0px !default;
+$input-border-radius-sm:                        0px !default;
+
+$input-padding-x:                               .875rem !default;
+$input-padding-x-lg:                            1.25rem !default;
+$input-padding-x-sm:                            .625rem !default;
+
+$input-line-height:                             1.33 !default;
+$input-line-height-sm:                          1.417 !default;
+$input-line-height-lg:                          $line-height-lg !default;
+$input-font-size:                               $font-size-base !default;
+$input-font-size-sm:                            $font-size-sm !default;
+
+$input-bg:                                      transparent !default;
+$input-disabled-bg:                             transparent !default;
+
+$input-focus-box-shadow:                        none !default;
+
+$material-input-disabled-color:                 $text-muted !default;
+$material-input-disabled-border-color:          $gray-400 !default;
+
+$input-color:                                   $body-color !default;
+$input-border-color:                            $gray-200 !default;
+$input-placeholder-color:                       $text-light !default;
+
+$input-height-inner:                            px-to-rem(floor(rem-to-px(($input-font-size * $input-line-height) + ($input-btn-padding-y * 2)))) !default;
+$input-height:                                  $input-height-inner !default;
+$input-height-inner-sm:                         px-to-rem(floor(rem-to-px(($input-font-size-sm * $input-line-height-sm) + ($input-btn-padding-y-sm * 2)))) !default;
+$input-height-sm:                               $input-height-inner-sm !default;
+$input-height-inner-lg:                         px-to-rem(floor(rem-to-px(($input-btn-font-size-lg * $input-line-height-lg) + ($input-btn-padding-y-lg * 2)))) !default;
+$input-height-lg:                               $input-height-inner-lg !default;
+
+$input-inverted-bg:                             transparent !default;
+$input-inverted-color:                          #fff !default;
+$input-inverted-border-color:                   rgba($white, .25) !default;
+$input-inverted-placeholder-color:              rgba(#fff, .7) !default;
+$input-inverted-disabled-bg:                    transparent !default;
+$input-inverted-disabled-color:                 rgba($white, .7) !default;
+$material-input-inverted-disabled-border-color: rgba($white, .35) !default;
+
+$input-group-addon-color:                       $input-color !default;
+$input-group-addon-bg:                          $input-bg !default;
+$input-group-addon-border-color:                $input-border-color !default;
+
+$custom-control-indicator-size:                 1.125rem !default;
+$custom-control-indicator-bg:                   $input-bg !default;
+$custom-control-indicator-border-width:         2px !default;
+$custom-control-indicator-border-color:         $input-border-color !default;
+
+$custom-control-gutter:                         .438rem !default;
+
+$custom-checkbox-indicator-bg:                  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 7.5'%3E%3Cpolyline points='0.25 4.35 4.18 6.75 9.25 0.75' style='fill:none;stroke:_COLOR_;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px'/%3E%3C/svg%3E" !default;
+$custom-checkbox-indicator-bg-size:             75% !default;
+$custom-checkbox-indeterminate-bg:              "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='_COLOR_' d='M0 2h4'/%3E%3C/svg%3E" !default;
+$custom-checkbox-indeterminate-bg-size:         .625rem !default;
+$custom-radio-indicator-bg:                     "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='_COLOR_'/%3E%3C/svg%3E" !default;
+$custom-radio-indicator-bg-size:                .75rem !default;
+
+$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
+$custom-control-label-disabled-color:           $text-muted !default;
+
+$custom-checkbox-indicator-icon-checked:        none !default;
+$custom-radio-indicator-icon-checked:           none !default;
+
+$custom-select-padding-y:                       $input-btn-padding-y !default;
+$custom-select-padding-x:                       $input-padding-x !default;
+$custom-select-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$custom-select-padding-x-sm:                    $input-padding-x-sm !default;
+$custom-select-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$custom-select-padding-x-lg:                    $input-padding-x-lg !default;
+
+$custom-select-indicator-padding:               1rem !default;
+$custom-select-indicator-padding-sm:            1rem !default;
+$custom-select-indicator-padding-lg:            1rem !default;
+
+$custom-select-font-size-sm:                    $input-font-size-sm !default;
+
+$custom-select-bg:                              $input-bg !default;
+$custom-select-disabled-color:                  $body-color !default;
+$custom-select-disabled-bg:                     $input-disabled-bg !default;
+$custom-select-inverted-disabled-color:         $input-inverted-disabled-color !default;
+$custom-select-inverted-disabled-bg:            $input-inverted-disabled-bg !default;
+
+$custom-select-bg-size:                         17px 12px !default;
+$custom-select-indicator:                       url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAIhJREFUSA1jYBgFoyEwGgKjIUBZCDBSph2h28PHr+H/v3/1CBHiWYxMTI3MxCvHr/LOrZsHVNU1GBn+/3fArxJVFuSIHVs2NVDNISDjSXUMzBEgvVR1CCmOQXYETRxCjGPQHUEzh+BzDDZH0NQh2ByDyxEgtXQBoKwNwnSxbNSS0RAYDYERGwIA4dM/HkySu9UAAAAASUVORK5CYII=') !default;
+$custom-select-indicator-inverted:              url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAHZJREFUSA1jYBgFoyEwGgKjIUBZCDBSph2h+////+lAXipChCTWbKo5BGQtmY6ZzcjIOJOqDiHDMWBHgPRR3SEkOAbuCJo5hAjHoDiCpg7B4xgMR4DU0hyAEjAQn4FiUM4aOAB1zMA6YuC8P2rzaAiMhgCdQgAA02oyjcgUOR4AAAAASUVORK5CYII=') !default;
+$custom-select-indicator-rtl:                   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAIJJREFUSA1jYBgFoyEwGgKjIUBZCDB6+Pg1/P/3r54cYxiZmBp3bNnUQI5edD3Md27dPKCqrsHI8P+/A7okPj41HQGyhxlEkOoYajsC7hBSHEMLR6A4hBjH0MoRGA7B5xhaOgKrQ7A5htaOANmJF4CyNgjjVTQqORoCoyEwGgKDJAQAWiVBvP+3F2UAAAAASUVORK5CYII=') !default;
+$custom-select-indicator-inverted-rtl:          url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAHVJREFUSA1jYBgFoyEwGgKjIUBZCDD+//8/HWhEKpnGzGZkZJxJpl4UbYwgHpmOoZojQG4AO4QMx1DVESgOIcExVHcEhkOIcAxNHIHVIXgcQzNHgOzECUAJGIjPQDEoZw0cgDpmYB0xcN4ftXk0BEZDYIiFAAAYnDMpp1mm+AAAAABJRU5ErkJggg==') !default;
+$custom-select-border-radius:                   0px !default;
+
+$custom-file-padding-x:                         0 !default;
+
+$custom-range-track-height:                     .125rem !default;
+$custom-range-thumb-width:                      .75rem !default;
+$custom-range-track-bg:                         $gray-200 !default;
+$custom-range-disabled-track-bg:                $gray-50 !default;
+$custom-range-track-box-shadow:                 none !default;
+$custom-range-thumb-bg:                         $white !default;
+$custom-range-thumb-active-bg:                  $custom-range-thumb-bg !default;
+$custom-range-thumb-box-shadow:                 0 0 0 1px rgba(0,0,0,.1), $floating-component-shadow !default;
+$custom-range-thumb-focus-box-shadow:           $custom-range-thumb-box-shadow !default;
+$custom-range-thumb-disabled-bg:                $custom-range-thumb-bg !default;
+
+$form-feedback-valid-color:                     theme-color("success") !default;
+$form-feedback-invalid-color:                   theme-color("danger") !default;
+$form-feedback-icon-valid-color:                $form-feedback-valid-color !default;
+$form-feedback-icon-invalid-color:              $form-feedback-invalid-color !default;
+$form-feedback-icon-valid:                      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-valid-rtl:                  str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z' transform='scale(-1, 1) translate(-8, 0)'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-invalid:                    str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
+$form-feedback-icon-invalid-rtl:                str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
+$custom-select-feedback-icon-padding:           $custom-select-indicator-padding + 1.25rem !default;
+$custom-select-feedback-icon-padding-sm:        $custom-select-indicator-padding + 1.25rem !default;
+$custom-select-feedback-icon-padding-lg:        $custom-select-indicator-padding + 1.25rem !default;
+
+$form-validation-states: (
+  "valid": (
+    "color":    $form-feedback-valid-color,
+    "icon":     $form-feedback-icon-valid,
+    "icon-rtl": $form-feedback-icon-valid-rtl
+  ),
+  "invalid": (
+    "color":    $form-feedback-invalid-color,
+    "icon":     $form-feedback-icon-invalid,
+    "icon-rtl": $form-feedback-icon-invalid-rtl
+  ),
+) !default;
+
+// *******************************************************************************
+// * Dropdowns
+
+$dropdown-padding-y:           .3125rem !default;
+$dropdown-divider-bg:          $floating-component-border-color !default;
+$dropdown-box-shadow:          $floating-component-shadow !default;
+$dropdown-font-size:           $font-size-base !default;
+
+$dropdown-inner-border-radius: 0 !default;
+
+$dropdown-item-padding-y:      .5rem !default;
+$dropdown-item-padding-x:      1.25rem !default;
+
+$dropdown-link-color:          $body-color !default;
+$dropdown-link-hover-color:    $dropdown-link-color !default;
+$dropdown-link-hover-bg:       $gray-50 !default;
+$dropdown-link-line-height:    $component-line-height !default;
+$dropdown-link-active-color:   $body-color !default;
+$dropdown-link-active-bg:      $gray-50 !default;
+
+$dropdown-link-disabled-color: $text-lighter !default;
+
+$dropdown-header-color:        $text-muted !default;
+
+// *******************************************************************************
+// * Navs
+
+$nav-spacer:                                .125rem !default;
+$nav-tabs-border-width:                     0 !default;
+
+$nav-link-padding-y:                        .75rem !default;
+$nav-link-padding-x:                        1.0625rem !default;
+$nav-link-line-height:                      $input-btn-line-height !default;
+
+$nav-link-padding-y-lg:                     .75rem !default;
+$nav-link-padding-x-lg:                     1.3125rem !default;
+$nav-link-line-height-lg:                   $line-height-lg !default;
+
+$nav-link-padding-y-sm:                     .4375rem !default;
+$nav-link-padding-x-sm:                     .875rem !default;
+$nav-link-line-height-sm:                   $line-height-sm !default;
+
+$nav-link-color:                            $text-muted-hover !default;
+$nav-link-disabled-color:                   $text-lighter !default;
+
+$nav-tabs-link-active-color:                $body-color !default;
+$nav-tabs-link-active-bg:                   $white !default;
+
+$material-light-nav-link-color:             rgba($white, .7);
+$material-light-nav-link-disabled-color:    rgba($white, .4);
+$material-light-nav-tabs-link-active-color: $white !default;
+$material-light-nav-pills-link-active-bg:   $white !default;
+
+// *******************************************************************************
+// * Navbar
+
+$navbar-toggler-padding-y:          .5rem !default;
+$navbar-toggler-padding-x:          .7rem !default;
+$navbar-toggler-font-size:          .625rem !default;
+
+$navbar-dark-color:                 rgba($white, .8) !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-dark-active-color:          $white !default;
+$navbar-dark-disabled-color:        rgba($white, .4) !default;
+
+$navbar-light-color:                $gray-500 !default;
+$navbar-light-hover-color:          $body-color !default;
+$navbar-light-active-color:         $body-color !default;
+$navbar-light-disabled-color:       $gray-300 !default;
+$navbar-light-toggler-border-color: rgba($black, .06) !default;
+
+// *******************************************************************************
+// * Pagination
+
+$pagination-padding-y:        .625rem !default;
+$pagination-padding-x:        .3125rem !default;
+$pagination-padding-y-sm:     .375rem !default;
+$pagination-padding-x-sm:     .25rem !default;
+$pagination-padding-y-lg:     .9375rem !default;
+$pagination-padding-x-lg:     .5rem !default;
+$pagination-line-height:      1 !default;
+
+$pagination-bg:               transparent !default;
+
+$pagination-color:            $text-muted !default;
+$pagination-hover-color:      $body-color !default;
+$pagination-hover-bg:         $pagination-bg !default;
+
+$pagination-disabled-color:   $text-lighter !default;
+$pagination-disabled-bg:      $pagination-bg !default;
+
+$pagination-focus-box-shadow: none !default;
+
+$pagination-spacer:           .0625rem !default;
+
+// *******************************************************************************
+// * Cards
+
+$card-spacer-y:            .875rem !default;
+$card-spacer-x:            1.5rem !default;
+$card-spacer-x-sm:         1rem !default;
+$card-border-color:        $border-color !default;
+$card-inner-border-color:  $border-inner-color !default;
+$card-cap-bg:              transparent !default;
+
+$card-img-overlay-padding: 1.5rem !default;
+
+$card-columns-gap:         1.5rem !default;
+$card-shadow:              0 2px 3px 0px rgba(0, 0, 0, 0.03), 0 1px 4px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.04) !default;
+
+// *******************************************************************************
+// * Tooltips
+
+$tooltip-color:      #fff !default;
+$tooltip-bg:         rgba-to-hex($gray-800) !default;
+$tooltip-opacity:    1 !default;
+$tooltip-box-shadow: $floating-component-shadow !default;
+
+// *******************************************************************************
+// * Popovers
+
+$popover-border-color:     $gray-100 !default;
+$popover-box-shadow:       $floating-component-shadow !default;
+
+$popover-header-bg:        $gray-50 !default;
+$popover-header-color:     $body-color !default;
+
+$popover-header-padding-y: .625rem !default;
+
+$popover-body-color:       $body-color !default;
+
+// *******************************************************************************
+// * Badges
+
+$badge-font-size:             .858em !default;
+$badge-font-weight:           $font-weight-semibold !default;
+$badge-padding-y:             .25em !default;
+$badge-padding-x:             .417em !default;
+$badge-border-radius:         .125rem !default;
+
+$badge-pill-padding-x:        .583em !default;
+$badge-pill-border-radius:    10rem !default;
+
+$badge-default-bg:            $gray-200 !default;
+$badge-outline-default-color: $body-color !default;
+
+// *******************************************************************************
+// * Modals
+
+$modal-inner-padding:            1.5625rem !default;
+$modal-header-padding-y:         1.25rem !default;
+$modal-header-padding-x:         $modal-inner-padding !default;
+$modal-header-padding:           $modal-header-padding-y $modal-header-padding-x 0 $modal-header-padding-x !default;
+$modal-footer-padding:           0 1.5rem 1rem 1.5rem !default;
+
+$modal-header-border-color:      $border-inner-color !default;
+$modal-footer-border-color:      $modal-header-border-color !default;
+$modal-content-box-shadow-xs:    0px 11px 15px -7px rgba(0, 0, 0, 0.15), 0px 24px 38px 3px rgba(0, 0, 0, 0.1), 0px 9px 46px 8px rgba(0, 0, 0, 0.08) !default;
+$modal-content-box-shadow-sm-up: 0px 11px 15px -7px rgba(0, 0, 0, 0.15), 0px 24px 38px 3px rgba(0, 0, 0, 0.1), 0px 9px 46px 8px rgba(0, 0, 0, 0.08) !default;
+$modal-content-border-radius:    0px !default;
+
+$modal-md:                       35rem !default;
+$modal-lg:                       50rem !default;
+$modal-sm:                       22.5rem !default;
+
+$modal-backdrop-opacity:         .2 !default;
+
+$modal-slide-width:              20rem !default;
+
+$modal-transition-duration:      .15s !default;
+$modal-transition:               transform $modal-transition-duration ease-out !default;
+
+// *******************************************************************************
+// * Alerts
+
+$alert-padding-y:    1rem !default;
+$alert-padding-x:    1rem !default;
+$alert-border-width: 1px !default;
+
+// *******************************************************************************
+// * Progress bars
+
+$progress-height:        .25rem !default;
+$progress-font-size:     .0px !default;
+$progress-bg:            $gray-50 !default;
+$progress-border-radius: 0 !default;
+$progress-bar-color:     transparent !default;
+
+// *******************************************************************************
+// * List group
+
+$list-group-bg:                  transparent !default;
+$list-group-border-color:        rgba-to-hex($gray-200) !default;
+$list-group-border-width:        1px !default;
+
+$list-group-item-padding-y:      .625rem !default;
+$list-group-item-padding-x:      .9375rem !default;
+
+$list-group-hover-bg:            $gray-25 !default;
+
+$list-group-disabled-color:      $text-lighter !default;
+$list-group-disabled-bg:         $list-group-bg !default;
+
+$list-group-action-color:        $text-muted-hover !default;
+$list-group-action-hover-color:  $body-color !default;
+
+$list-group-action-active-color: $list-group-action-hover-color !default;
+$list-group-action-active-bg:    $gray-50 !default;
+
+// *******************************************************************************
+// * Image thumbnails
+
+$thumbnail-padding:       0 !default;
+$thumbnail-bg:            transparent !default;
+$thumbnail-border-width:  0px !default;
+$thumbnail-border-radius: 0px !default;
+$thumbnail-box-shadow:    none !default;
+
+// *******************************************************************************
+// * Figures
+
+$figure-caption-color: $text-muted !default;
+
+// *******************************************************************************
+// * Breadcrumbs
+
+$breadcrumb-padding-y:     0 !default;
+$breadcrumb-padding-x:     0 !default;
+$breadcrumb-item-padding:  .5rem !default;
+
+$breadcrumb-margin-bottom: 1rem !default;
+
+$breadcrumb-color:         $text-muted !default;
+$breadcrumb-bg:            transparent !default;
+$breadcrumb-divider-color: $text-lighter !default;
+$breadcrumb-active-color:  $body-color !default;
+$breadcrumb-divider:       "/" !default;
+$breadcrumb-divider-rtl:   "/" !default;
+
+// *******************************************************************************
+// * Switchers
+
+$switcher-spacer-x:             .75rem !default;
+$switcher-spacer-y:             .5rem !default;
+$switcher-gutter:               .5rem !default;
+$switcher-inner-spacer:         0rem !default;
+
+$switcher-square-border-radius: .125rem !default;
+
+$switcher-label-color:          $body-color !default;
+$switcher-label-disabled-color: $custom-control-label-disabled-color !default;
+
+$switcher-width:                2.25rem !default;
+$switcher-height:               1.25rem !default;
+$switcher-font-size:            .625rem !default;
+$switcher-label-font-size:      $font-size-base !default;
+$switcher-label-line-height:    1.4 !default;
+
+$switcher-width-sm:             1.75rem !default;
+$switcher-height-sm:            1rem !default;
+$switcher-label-font-size-sm:   $font-size-sm !default;
+$switcher-label-line-height-sm: 1.486 !default;
+
+$switcher-width-lg:             2.75rem !default;
+$switcher-height-lg:            1.5rem !default;
+$switcher-label-font-size-lg:   $font-size-lg !default;
+$switcher-label-line-height-lg: 1.47 !default;
+
+$switcher-off-color:            $gray-400 !default;
+$switcher-off-bg:               $gray-200 !default;
+$switcher-holder-bg:            #fff !default;
+$switcher-holder-shadow:        $material-component-shadow !default;
+
+// *******************************************************************************
+// * Close
+
+$close-font-weight: 300 !default;
+$close-text-shadow: none !default;
+$close-color: inherit !default;
+
+// *******************************************************************************
+// * Jumbotron
+
+$jumbotron-padding: 3rem !default;
+
+// *******************************************************************************
+// * Sidenav
+
+$sidenav-width:                          15.625rem !default; //250px;
+$sidenav-collapsed-width:                4.375rem !default; //70px;
+
+$sidenav-item-spacer:                    .125rem !default;
+
+$sidenav-vertical-link-padding-y:        .75rem !default;
+$sidenav-vertical-link-padding-x:        2rem !default;
+$sidenav-vertical-menu-link-padding-y:   .625rem !default;
+$sidenav-vertical-menu-level-spacer:     1rem !default;
+
+$sidenav-horizontal-link-padding-y:      1rem !default;
+$sidenav-horizontal-link-padding-x:      1rem !default;
+$sidenav-horizontal-menu-link-padding-y: .625rem !default;
+$sidenav-horizontal-menu-level-spacer:   1rem !default;
+
+$sidenav-menu-width:                     12.5rem !default; //200px;
+$sidenav-control-width:                  2.25rem !default;
+$sidenav-control-arrow-size:             .5rem !default;
+
+$sidenav-icon-expanded-width:            1.75rem !default;
+$sidenav-icon-expanded-font-size:        1rem !default;
+$sidenav-icon-expanded-spacer:           .25rem !default;
+
+$sidenav-animation-duration:             .2s !default;
+
+$sidenav-max-levels:                     5 !default;
+
+$sidenav-dark-border-color:              rgba(255, 255, 255, .1) !default;
+$sidenav-dark-menu-bg:                   rgba(0, 0, 0, .1) !default;
+$sidenav-light-border-color:             rgba(255, 255, 255, .2) !default;
+$sidenav-light-menu-bg:                  rgba(0, 0, 0, .2) !default;
+
+// *******************************************************************************
+// * Toasts
+
+$toast-border-color:        $gray-100 !default;
+$toast-border-radius:       $border-radius !default;
+$toast-box-shadow:          $floating-component-shadow !default;
+$toast-header-border-color: $card-inner-border-color !default;
+
+// Config
+$rtl-support: false !default;
+$material-style: true;

ZpcBulletinBoard/wwwroot/vendor/css/_appwork/_variables.scss

@@ -0,0 +1,681 @@
+// Variables
+//
+
+// *******************************************************************************
+// * Colors
+
+$white:        #fff !default;
+$black:        #181C21 !default;
+$gray-25:      rgba($black, .015) !default;
+$gray-50:      rgba($black, .03) !default;
+$gray-100:     rgba($black, .06) !default;
+$gray-200:     rgba($black, .1) !default;
+$gray-300:     rgba($black, .2) !default;
+$gray-400:     rgba($black, .3) !default;
+$gray-500:     rgba($black, .4) !default;
+$gray-600:     rgba($black, .5) !default;
+$gray-700:     rgba($black, .6) !default;
+$gray-800:     rgba($black, .8) !default;
+$gray-900:     rgba($black, .9) !default;
+
+$grays: (
+  "25": $gray-25,
+  "50": $gray-50
+) !default;
+
+$blue:         #1e70cd !default;
+$indigo:       #6610f2 !default;
+$purple:       #6f42c1 !default;
+$pink:         #e83e8c !default;
+$red:          #d9534f !default;
+$orange:       #FEB744 !default;
+$yellow:       #FFD950 !default;
+$green:        #02BC77 !default;
+$teal:         #20c997 !default;
+$cyan:         #28c3d7 !default;
+
+$theme-colors: (
+  "primary":   $indigo,
+  "secondary": #8897AA,
+  "success":   $green,
+  "info":      $cyan,
+  "warning":   $yellow,
+  "danger":    $red,
+  "dark":      $gray-900
+) !default;
+
+$body-color:       #4E5155 !default; //#4a4a4a
+
+// #06c
+$link-color:       $blue !default;
+$link-hover-color: lighten($link-color, 10%) !default;
+
+$spacer: 1rem !default;
+
+// *******************************************************************************
+// * Fonts
+
+$font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !default;
+$font-family-serif:      Georgia, "Times New Roman", serif;
+$font-family-monospace:  "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:       $font-family-sans-serif !default;
+
+$font-size-base:         .894rem !default;
+$font-size-xl:           1.25rem !default;
+$font-size-lg:           1rem !default;
+$font-size-sm:           .75rem !default;
+$font-size-xs:           $font-size-sm !default;
+
+$font-weight-semibold:   500 !default;
+$font-weight-bolder:     900 !default;
+$font-weight-lighter:    100 !default;
+
+$line-height-base:       1.47 !default;
+$line-height-xl:         1.5 !default;
+$line-height-lg:         1.5 !default;
+$line-height-sm:         1.5 !default;
+$line-height-xs:         1.5 !default;
+
+$h1-font-size:           2.25rem !default;
+$h2-font-size:           1.813rem !default;
+$h3-font-size:           1.563rem !default;
+$h4-font-size:           1.313rem !default;
+$h5-font-size:           1rem !default;
+$h6-font-size:           $font-size-base !default;
+
+$headings-font-weight:   $font-weight-semibold !default;
+$headings-line-height:   1.1 !default;
+$headings-margin-bottom: $spacer !default;
+
+$display1-size:          4rem !default;
+$display2-size:          3.5rem !default;
+$display3-size:          3rem !default;
+$display4-size:          2rem !default;
+
+$tiny-font-size:         70% !default;
+$small-font-size:        85% !default;
+$big-font-size:          112% !default;
+$large-font-size:        150% !default;
+$xlarge-font-size:       170% !default;
+
+$text-muted:             rgba-to-hex($gray-500) !default;
+$text-muted-hover:       rgba-to-hex($gray-600) !default;
+$blockquote-small-color: rgba-to-hex($gray-500) !default;
+$text-light:             rgba-to-hex($gray-400) !default;
+$text-lighter:           rgba-to-hex($gray-300) !default;
+$text-lightest:          rgba-to-hex($gray-200) !default;
+
+$link-hover-decoration:  none !default;
+
+// *******************************************************************************
+// * Grid
+
+$grid-gutter-width: 1.5rem !default;
+
+$container-padding-x: 2rem !default;
+$container-padding-x-sm: 1rem !default;
+$container-padding-y: 1.5rem !default;
+
+// *******************************************************************************
+// * Components
+
+$border-color:                    rgba($black,.06) !default;
+$border-inner-color:              rgba($black, .075) !default;
+$border-width:                    1px !default;
+
+$border-radius:                   .25rem !default;
+$border-radius-xl:                $border-radius !default;
+$border-radius-lg:                $border-radius !default;
+$border-radius-sm:                $border-radius !default;
+$border-radius-xs:                $border-radius !default;
+
+$component-line-height:           1.54 !default;
+$component-focus-shadow-width:    2px !default;
+
+$floating-component-border-color: rgba($black, .05) !default;
+$floating-component-shadow:       0 1px 6px rgba(0, 0, 0, .09) !default;
+
+$hr-border-color:                 $border-color !default;
+
+$bordered-row-border-color:       $hr-border-color !default;
+
+$caret-width:                     .42em !default;
+$caret-vertical-align:            middle !default;
+$caret-spacing:                   .5em !default;
+
+$overflows: auto, hidden, scroll, visible !default;
+
+// *******************************************************************************
+// * Z-index master list
+
+$zindex-layout-fixed:  1080 !default;
+$zindex-modal-top:     1090 !default;
+$zindex-layout-mobile: 1100 !default;
+$zindex-notification:  999999 !default;
+
+// *******************************************************************************
+// * Tables
+
+$table-cell-padding:      .625rem !default;
+$table-cell-padding-sm:   .3125rem !default;
+
+$table-accent-bg:         rgba($black, .025) !default;
+$table-hover-bg:          rgba($black, .035) !default;
+$table-active-bg:         rgba-to-hex($table-hover-bg) !default;
+
+$table-border-color:      rgba-to-hex($gray-200) !default;
+
+$table-head-bg:           $gray-50 !default;
+$table-head-color:        $body-color !default;
+
+$table-dark-bg:           $gray-900 !default;
+$table-dark-accent-bg:    rgba($white, .03) !default;
+$table-dark-hover-bg:     rgba($white, .05) !default;
+$table-dark-border-color: lighten(rgba-to-hex($gray-900), 7%) !default;
+$table-dark-color:        $white !default;
+
+// *******************************************************************************
+// * Buttons + Forms
+
+$input-btn-padding-y:      .438rem !default;
+$input-btn-padding-x:      1.125rem !default;
+$input-btn-font-size:      $font-size-base !default;
+$input-btn-line-height:    1.54 !default;
+
+$input-btn-padding-y-xs:   0 !default;
+$input-btn-padding-x-xs:   .5rem !default;
+$input-btn-font-size-xs:   $font-size-xs !default;
+$input-btn-line-height-xs: $line-height-xs !default;
+
+$input-btn-padding-y-sm:   .188rem !default;
+$input-btn-padding-x-sm:   .6875rem !default;
+$input-btn-font-size-sm:   $font-size-sm !default;
+$input-btn-line-height-sm: $line-height-sm !default;
+
+$input-btn-padding-y-lg:   .75rem !default;
+$input-btn-padding-x-lg:   1.5rem !default;
+$input-btn-font-size-lg:   $font-size-lg !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+
+$input-btn-padding-y-xl:   .875rem !default;
+$input-btn-padding-x-xl:   2.125rem !default;
+$input-btn-font-size-xl:   $font-size-xl !default;
+$input-btn-line-height-xl: $line-height-xl !default;
+
+// *******************************************************************************
+// * Buttons
+
+$btn-padding-y-xs:      $input-btn-padding-y-xs !default;
+$btn-padding-x-xs:      $input-btn-padding-x-xs !default;
+$btn-font-size-xs:      $input-btn-font-size-xs !default;
+$btn-line-height-xs:    $input-btn-line-height-xs !default;
+
+$btn-padding-y-xl:      $input-btn-padding-y-xl !default;
+$btn-padding-x-xl:      $input-btn-padding-x-xl !default;
+$btn-font-size-xl:      $input-btn-font-size-xl !default;
+$btn-line-height-xl:    $input-btn-line-height-xl !default;
+
+$btn-border-radius-xs:  $border-radius-xs !default;
+$btn-border-radius-xl:  $border-radius-xl !default;
+
+$btn-box-shadow:        none !default;
+$btn-focus-box-shadow:  0 0 0 $component-focus-shadow-width rgba(theme-color("primary"), .25) !default;
+$btn-active-box-shadow: none !default;
+
+$btn-default-bg:        transparent !default;
+$btn-default-border:    $gray-200 !default;
+$btn-default-color:     $body-color !default;
+
+$btn-transition:        all .2s ease-in-out !default;
+
+// *******************************************************************************
+// * Forms
+
+$enable-validation-icons:                   false !default;
+
+$label-font-size:                           .83125rem !default;
+$label-font-weight:                         $font-weight-semibold !default;
+
+$input-padding-x:                           .875rem !default;
+$input-padding-x-lg:                        1.25rem !default;
+$input-padding-x-sm:                        .625rem !default;
+
+$input-line-height:                         $input-btn-line-height !default;
+$input-line-height-sm:                      $input-btn-line-height-sm !default;
+$input-line-height-lg:                      $input-btn-line-height-lg !default;
+
+$input-bg:                                  $white !default;
+$input-disabled-bg:                         rgba-to-hex($gray-100) !default;
+
+$input-focus-box-shadow:                    none !default;
+
+$input-color:                               $body-color !default;
+$input-border-color:                        $gray-200 !default;
+$input-placeholder-color:                   $text-light !default;
+
+$input-height-inner:                        px-to-rem(floor(rem-to-px(($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2)))) !default;
+$input-height-inner-sm:                     px-to-rem(floor(rem-to-px(($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)))) !default;
+$input-height-inner-lg:                     px-to-rem(floor(rem-to-px(($font-size-lg * $line-height-lg) + ($input-btn-padding-y-lg * 2)))) !default;
+
+$input-inverted-bg:                         rgba(#fff, .3) !default;
+$input-inverted-color:                      #fff !default;
+$input-inverted-border-color:               $input-inverted-bg !default;
+$input-inverted-placeholder-color:          rgba(#fff, .7) !default;
+$input-inverted-disabled-bg:                rgba(#fff, .1) !default;
+$input-inverted-disabled-color:             $input-inverted-color !default;
+
+$input-group-addon-color:                   $input-color !default;
+$input-group-addon-bg:                      $input-bg !default;
+$input-group-addon-border-color:            $input-border-color !default;
+
+$custom-control-indicator-size:             1.125rem !default;
+$custom-control-indicator-bg:               $input-bg !default;
+$custom-control-indicator-border-width:     1px !default;
+$custom-control-indicator-border-color:     $input-border-color !default;
+
+$custom-control-gutter:                     .438rem !default;
+
+$custom-checkbox-indicator-bg:              "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 7.5'%3E%3Cpolyline points='0.75 4.35 4.18 6.75 8.75 0.75' style='fill:none;stroke:_COLOR_;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px'/%3E%3C/svg%3E" !default;
+$custom-checkbox-indicator-bg-size:         65% !default;
+$custom-checkbox-indeterminate-bg:          "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='_COLOR_' d='M0 2h4'/%3E%3C/svg%3E" !default;
+$custom-checkbox-indeterminate-bg-size:     .5rem !default;
+$custom-radio-indicator-bg:                 "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='_COLOR_'/%3E%3C/svg%3E" !default;
+$custom-radio-indicator-bg-size:            .5rem !default;
+
+$custom-control-indicator-disabled-bg:      $input-disabled-bg !default;
+$custom-control-label-disabled-color:       $text-muted !default;
+
+$custom-checkbox-indicator-icon-checked:    none !default;
+$custom-radio-indicator-icon-checked:       none !default;
+
+$custom-select-padding-y:                   $input-btn-padding-y !default;
+$custom-select-padding-x:                   $input-padding-x !default;
+$custom-select-padding-y-sm:                $input-btn-padding-y-sm !default;
+$custom-select-padding-x-sm:                $input-padding-x-sm !default;
+$custom-select-padding-y-lg:                $input-btn-padding-y-lg !default;
+$custom-select-padding-x-lg:                $input-padding-x-lg !default;
+
+$custom-select-indicator-padding:           $custom-select-padding-x + 1rem !default;
+$custom-select-focus-box-shadow:            none !default;
+
+$custom-select-bg:                          $input-bg !default;
+$custom-select-disabled-color:              $body-color !default;
+$custom-select-disabled-bg:                 $input-disabled-bg !default;
+$custom-select-inverted-disabled-color:     $input-inverted-disabled-color !default;
+$custom-select-inverted-disabled-bg:        $input-inverted-disabled-bg !default;
+
+$custom-select-bg-size:                     17px 12px !default;
+$custom-select-indicator:                   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAKBJREFUSA3t1kEKgCAQBVCTDtciulJ2pWjRiapTaPwokUEjRW0zgaHSOI9PQWLbD4Mhfr7kz/1te4bYKO4JJ8KJ0ATouqUbqeuuH5TRekypb6Scsr2s6zIrHBgLQQ1qs0EAiMU8CNRmhcRgXEQRyBcMRRSDvGF8iKIQHyaEwLOixm8APm2Mq2HoVgMS6u3uZ/9q3MNj5gyhaXEinAhNgK5PpzhEO/hSMK4AAAAASUVORK5CYII=') !default;
+$custom-select-indicator-inverted:          url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAJ5JREFUSA3t1G0KgCAMBuCMDtZlojOFhzVfUaFlH44N/0yIspw+vGhTCGHFNQ1u8+D16/IGqVHkB0vEEqEJ0P5CX3D78V+0x9qNWe/FNqtz7ogIz4B41IpBAGBgEgK1opBOTEWoQH5iLgg1yAfmhlCFPGCaCIwVO76YrNWwgePRTp/yZm4N04dg1TdAUYmfmjJx790gNDFLxBKhCdD+CQ3GHngvJTGKAAAAAElFTkSuQmCC') !default;
+$custom-select-indicator-rtl:               url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAKdJREFUSA3tllEKgCAMhlM6XA/RlbIrRQ+dqDqFxR8ptEwNFHuYD+Lc3D5+HCqqwmNZtx0IsjCHLc8gVoprwYqwIlQBatdN26ld6546Ymwh5TBPo4qJDcVIJELCUCD1p4RA7rNrvsKkhrAgWMTC5IC4gcTA5IJ4gPhgckI4QVwwuSFQU2B6G2ht+FK1qKuO+QZ4QVwHU+8ZEH70qLKsCCtCFaD2b+7IAZGdPPxuWYGMAAAAAElFTkSuQmCC') !default;
+$custom-select-indicator-inverted-rtl:      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAABGdBTUEAALGPC/xhBQAAAJtJREFUSA3tllEKwCAIhmd0sF1m7Eyjw7aMCHLWWhjtwR4iU34/fhKCbfHy3u+IYBZz5PYKkq1IB3VEHaEO0NiGOT7D5UETnbEDgKuztllmkpBrVvFJMQiUj1MzACMKkUHw8AFGHKIA6YSZAvEAeYGZBsGCVGCmQmBPixu38M2E0Y6p9H64MrE7EFMaFNL/SM04/QZQZ9SR3zpyA1iYHnbSLPIQAAAAAElFTkSuQmCC') !default;
+
+$custom-file-padding-x:                     $input-padding-x !default;
+
+$custom-range-track-height:                 .125rem !default;
+$custom-range-thumb-width:                  .75rem !default;
+$custom-range-track-bg:                     $gray-200 !default;
+$custom-range-disabled-track-bg:            $gray-50 !default;
+$custom-range-track-box-shadow:             none !default;
+$custom-range-thumb-bg:                     $white !default;
+$custom-range-thumb-active-bg:              $custom-range-thumb-bg !default;
+$custom-range-thumb-box-shadow:             0 0 0 1px rgba(0,0,0,.1), $floating-component-shadow !default;
+$custom-range-thumb-focus-box-shadow:       $custom-range-thumb-box-shadow !default;
+$custom-range-thumb-disabled-bg:            $custom-range-thumb-bg !default;
+
+$form-feedback-valid-color:                 theme-color("success") !default;
+$form-feedback-invalid-color:               theme-color("danger") !default;
+$form-feedback-icon-valid-color:            $form-feedback-valid-color !default;
+$form-feedback-icon-invalid-color:          $form-feedback-invalid-color !default;
+$form-feedback-icon-valid:                  str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-valid-rtl:              str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z' transform='scale(-1, 1) translate(-8, 0)'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-invalid:                str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
+$form-feedback-icon-invalid-rtl:            str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
+$custom-select-feedback-icon-padding:       $custom-select-indicator-padding + $input-height-inner !default;
+$custom-select-feedback-icon-padding-sm:    $custom-select-indicator-padding + $input-height-inner-sm !default;
+$custom-select-feedback-icon-padding-lg:    $custom-select-indicator-padding + $input-height-inner-lg !default;
+
+$form-validation-states: (
+  "valid": (
+    "color":    $form-feedback-valid-color,
+    "icon":     $form-feedback-icon-valid,
+    "icon-rtl": $form-feedback-icon-valid-rtl
+  ),
+  "invalid": (
+    "color":    $form-feedback-invalid-color,
+    "icon":     $form-feedback-icon-invalid,
+    "icon-rtl": $form-feedback-icon-invalid-rtl
+  ),
+) !default;
+
+// *******************************************************************************
+// * Dropdowns
+
+$dropdown-padding-y:           .3125rem !default;
+$dropdown-border-color:        $floating-component-border-color !default;
+$dropdown-divider-bg:          $dropdown-border-color !default;
+$dropdown-box-shadow:          $floating-component-shadow !default;
+$dropdown-font-size:           $font-size-base !default;
+
+$dropdown-inner-border-radius: 0 !default;
+
+$dropdown-item-padding-y:      .438rem !default;
+$dropdown-item-padding-x:      1.25rem !default;
+
+$dropdown-link-color:          $body-color !default;
+$dropdown-link-hover-color:    $dropdown-link-color !default;
+$dropdown-link-hover-bg:       $gray-50 !default;
+$dropdown-link-line-height:    $component-line-height !default;
+
+$dropdown-link-disabled-color: $text-lighter !default;
+
+$dropdown-header-color:        $text-muted !default;
+
+// *******************************************************************************
+// * Navs
+
+$nav-spacer:                        .125rem !default;
+
+$nav-link-padding-y:                .625rem !default;
+$nav-link-padding-x:                1.25rem !default;
+$nav-link-line-height:              $component-line-height !default;
+
+$nav-link-padding-y-lg:             .875rem !default;
+$nav-link-padding-x-lg:             1.3125rem !default;
+$nav-link-line-height-lg:           $line-height-lg !default;
+
+$nav-link-padding-y-sm:             .3125rem !default;
+$nav-link-padding-x-sm:             .875rem !default;
+$nav-link-line-height-sm:           $line-height-sm !default;
+
+$nav-link-color:                    $text-muted-hover !default;
+$nav-link-disabled-color:           $text-lighter !default;
+
+$nav-tabs-border-color:             $border-color !default;
+$nav-tabs-link-hover-border-color:  $gray-100 !default;
+$nav-tabs-link-active-color:        $body-color !default;
+$nav-tabs-link-active-bg:           $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+$nav-pills-link-active-color:       #fff !default;
+$nav-pills-link-active-bg:          transparent !default;
+
+// *******************************************************************************
+// * Navbar
+
+$navbar-toggler-padding-y:          .5rem !default;
+$navbar-toggler-padding-x:          .7rem !default;
+$navbar-toggler-font-size:          .625rem !default;
+
+$navbar-dark-color:                 rgba($white, .8) !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-dark-active-color:          $white !default;
+$navbar-dark-disabled-color:        rgba($white, .4) !default;
+
+$navbar-light-color:                $gray-500 !default;
+$navbar-light-hover-color:          $body-color !default;
+$navbar-light-active-color:         $body-color !default;
+$navbar-light-disabled-color:       $gray-300 !default;
+$navbar-light-toggler-border-color: rgba($black, .06) !default;
+
+// *******************************************************************************
+// * Pagination
+
+$pagination-padding-y:             .625rem !default;
+$pagination-padding-x:             .3125rem !default;
+$pagination-padding-y-sm:          .375rem !default;
+$pagination-padding-x-sm:          .25rem !default;
+$pagination-padding-y-lg:          .9375rem !default;
+$pagination-padding-x-lg:          .5rem !default;
+$pagination-line-height:           1 !default;
+
+$pagination-bg:                    transparent !default;
+$pagination-border-color:          $border-inner-color !default;
+
+$pagination-color:                 $text-muted !default;
+$pagination-hover-color:           $body-color !default;
+$pagination-hover-bg:              $pagination-bg !default;
+$pagination-hover-border-color:    $gray-200 !default;
+
+$pagination-disabled-color:        $text-lighter !default;
+$pagination-disabled-bg:           $pagination-bg !default;
+$pagination-disabled-border-color: $gray-100 !default;
+
+$pagination-focus-box-shadow:      none !default;
+
+$pagination-spacer:                .1875rem !default;
+
+// *******************************************************************************
+// * Cards
+
+$card-spacer-y:            .875rem !default;
+$card-spacer-x:            1.5rem !default;
+$card-spacer-x-sm:         1rem !default;
+$card-border-color:        $border-color !default;
+$card-inner-border-color:  $border-inner-color !default;
+$card-cap-bg:              transparent !default;
+
+$card-img-overlay-padding: 1.5rem !default;
+
+$card-columns-gap:         1.5rem !default;
+$card-shadow:              0 1px 4px rgba($black, .012) !default;
+
+// *******************************************************************************
+// * Tooltips
+
+$tooltip-color:      #fff !default;
+$tooltip-bg:         rgba-to-hex($gray-800) !default;
+$tooltip-opacity:    1 !default;
+$tooltip-box-shadow: none !default;
+
+// *******************************************************************************
+// * Popovers
+
+$popover-border-color:     $gray-100 !default;
+$popover-box-shadow:       $floating-component-shadow !default;
+
+$popover-header-bg:        $gray-50 !default;
+$popover-header-color:     $body-color !default;
+
+$popover-header-padding-y: .625rem !default;
+
+$popover-body-color:       $body-color !default;
+
+// *******************************************************************************
+// * Badges
+
+$badge-font-size:             .858em !default;
+$badge-font-weight:           $font-weight-semibold !default;
+$badge-padding-y:             .25em !default;
+$badge-padding-x:             .417em !default;
+$badge-border-radius:         .125rem !default;
+
+$badge-pill-padding-x:        .583em !default;
+$badge-pill-border-radius:    10rem !default;
+
+$badge-default-bg:            $gray-200 !default;
+$badge-outline-default-color: $body-color !default;
+
+// *******************************************************************************
+// * Modals
+
+$modal-inner-padding:            1.5625rem !default;
+$modal-header-padding-y:         1.25rem !default;
+$modal-header-padding-x:         $modal-inner-padding !default;
+$modal-footer-padding:           1.25rem $modal-inner-padding !default;
+
+$modal-content-border-width:     0px !default;
+$modal-header-border-width:      1px !default;
+$modal-header-border-color:      $border-inner-color !default;
+$modal-footer-border-color:      $modal-header-border-color !default;
+$modal-content-box-shadow-xs:    $floating-component-shadow !default;
+$modal-content-box-shadow-sm-up: $floating-component-shadow !default;
+
+$modal-md:                       35rem !default;
+$modal-lg:                       50rem !default;
+$modal-sm:                       22.5rem !default;
+
+$modal-backdrop-opacity:         .5 !default;
+
+$modal-slide-width:              20rem !default;
+
+$modal-transition-duration:      .15s !default;
+$modal-transition:               transform $modal-transition-duration ease-out !default;
+
+// *******************************************************************************
+// * Alerts
+
+$alert-padding-y: 1rem !default;
+$alert-padding-x: 1rem !default;
+
+// *******************************************************************************
+// * Progress bars
+
+$progress-height:        .75rem !default;
+$progress-font-size:     .625rem !default;
+$progress-bg:            $gray-50 !default;
+$progress-border-radius: 10rem !default;
+$progress-bar-color:     #fff !default;
+
+// *******************************************************************************
+// * List group
+
+$list-group-bg:                  transparent !default;
+$list-group-border-color:        rgba-to-hex($gray-200) !default;
+
+$list-group-item-padding-y:      .625rem !default;
+$list-group-item-padding-x:      .9375rem !default;
+
+$list-group-hover-bg:            $gray-25 !default;
+
+$list-group-disabled-color:      $text-lighter !default;
+$list-group-disabled-bg:         $list-group-bg !default;
+
+$list-group-action-color:        $text-muted-hover !default;
+$list-group-action-hover-color:  $body-color !default;
+
+$list-group-action-active-color: $list-group-action-hover-color !default;
+$list-group-action-active-bg:    $gray-50 !default;
+
+// *******************************************************************************
+// * Image thumbnails
+
+$thumbnail-padding:       0 !default;
+$thumbnail-bg:            transparent !default;
+$thumbnail-border-width:  0px !default;
+$thumbnail-border-radius: 0px !default;
+$thumbnail-box-shadow:    none !default;
+
+// *******************************************************************************
+// * Figures
+
+$figure-caption-color: $text-muted !default;
+
+// *******************************************************************************
+// * Breadcrumbs
+
+$breadcrumb-padding-y:     0 !default;
+$breadcrumb-padding-x:     0 !default;
+$breadcrumb-item-padding:  .5rem !default;
+
+$breadcrumb-margin-bottom: 1rem !default;
+
+$breadcrumb-color:         $text-muted !default;
+$breadcrumb-bg:            transparent !default;
+$breadcrumb-divider-color: $text-lighter !default;
+$breadcrumb-active-color:  $body-color !default;
+$breadcrumb-divider:       "/" !default;
+$breadcrumb-divider-rtl:   "/" !default;
+
+// *******************************************************************************
+// * Switchers
+
+$switcher-spacer-x:             .75rem !default;
+$switcher-spacer-y:             .5rem !default;
+$switcher-gutter:               .5rem !default;
+$switcher-inner-spacer:         .25rem !default;
+
+$switcher-square-border-radius: $border-radius !default;
+
+$switcher-label-color:          $body-color !default;
+$switcher-label-disabled-color: $custom-control-label-disabled-color !default;
+
+$switcher-width:                2.375rem !default;
+$switcher-height:               1.375rem !default;
+$switcher-font-size:            .625rem !default;
+$switcher-label-font-size:      $font-size-base !default;
+$switcher-label-line-height:    1.4 !default;
+
+$switcher-width-sm:             2rem !default;
+$switcher-height-sm:            1.125rem !default;
+$switcher-label-font-size-sm:   $font-size-sm !default;
+$switcher-label-line-height-sm: 1.486 !default;
+
+$switcher-width-lg:             3.25rem !default;
+$switcher-height-lg:            1.75rem !default;
+$switcher-label-font-size-lg:   $font-size-lg !default;
+$switcher-label-line-height-lg: 1.47 !default;
+
+$switcher-off-color:            $gray-400 !default;
+$switcher-off-bg:               $gray-200 !default;
+$switcher-holder-bg:            #fff !default;
+$switcher-holder-shadow:        0 0 0 1px rgba($black, .04), 0 1px 6px rgba($black, .09) !default;
+
+// *******************************************************************************
+// * Close
+
+$close-font-weight: 300 !default;
+$close-text-shadow: none !default;
+$close-color: inherit !default;
+
+// *******************************************************************************
+// * Jumbotron
+
+$jumbotron-padding: 3rem !default;
+
+// *******************************************************************************
+// * Sidenav
+
+$sidenav-width:                          15.625rem !default; //250px
+$sidenav-collapsed-width:                4.375rem !default; //70px
+
+$sidenav-item-spacer:                    .0625rem !default;
+
+$sidenav-vertical-link-padding-y:        .75rem !default;
+$sidenav-vertical-link-padding-x:        2rem !default;
+$sidenav-vertical-menu-link-padding-y:   .625rem !default;
+$sidenav-vertical-menu-level-spacer:     1rem !default;
+
+$sidenav-horizontal-link-padding-y:      1rem !default;
+$sidenav-horizontal-link-padding-x:      1rem !default;
+$sidenav-horizontal-menu-link-padding-y: .625rem !default;
+$sidenav-horizontal-menu-level-spacer:   1rem !default;
+
+$sidenav-menu-width:                     12.5rem !default;; //200px
+$sidenav-control-width:                  2.25rem !default;
+$sidenav-control-arrow-size:             .5rem !default;
+
+$sidenav-icon-expanded-width:            1.75rem !default;
+$sidenav-icon-expanded-font-size:        1rem !default;
+$sidenav-icon-expanded-spacer:           .25rem !default;
+
+$sidenav-animation-duration:             .2s !default;
+
+$sidenav-max-levels:                     5 !default;
+
+$sidenav-dark-border-color:              rgba(255, 255, 255, .2) !default;
+$sidenav-dark-menu-bg:                   rgba(0, 0, 0, .06) !default;
+$sidenav-light-border-color:             rgba(0, 0, 0, .06) !default;
+$sidenav-light-menu-bg:                  rgba(0, 0, 0, .05) !default;
+
+// *******************************************************************************
+// * Toasts
+
+$toast-border-color:        $gray-100 !default;
+$toast-border-radius:       $border-radius !default;
+$toast-box-shadow:          $floating-component-shadow !default;
+$toast-header-border-color: $card-inner-border-color !default;
+
+// Config
+$rtl-support: false !default;
+$material-style: false;