diff --git a/web/public/static/css/spectre-exp.css b/web/public/static/css/spectre-exp.css
deleted file mode 100644
index 67f4ad9b1..000000000
--- a/web/public/static/css/spectre-exp.css
+++ /dev/null
@@ -1,1227 +0,0 @@
-/*! Spectre.css Experimentals v0.5.8 | MIT License | github.com/picturepan2/spectre */
-.form-autocomplete {
-  position: relative;
-}
-
-.form-autocomplete .form-autocomplete-input {
-  align-content: flex-start;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-line-pack: start;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  height: auto;
-  min-height: 1.6rem;
-  padding: .1rem;
-}
-
-.form-autocomplete .form-autocomplete-input.is-focused {
-  border-color: #448aff; 
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.form-autocomplete .form-autocomplete-input .form-input {
-  border-color: transparent;
-  box-shadow: none;
-  display: inline-block;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  height: 1.2rem;
-  line-height: .8rem;
-  margin: .1rem;
-  width: auto;
-}
-
-.form-autocomplete .menu {
-  left: 0;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-}
-
-.form-autocomplete.autocomplete-oneline .form-autocomplete-input {
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-}
-
-.form-autocomplete.autocomplete-oneline .chip {
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-.calendar {
-  border: .05rem solid #d7e5fd;
-  border-radius: .1rem;
-  display: block;
-  min-width: 280px;
-}
-
-.calendar .calendar-nav {
-  align-items: center;
-  background: white;
-  border-top-left-radius: .1rem;
-  border-top-right-radius: .1rem;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  font-size: .9rem;
-  padding: .4rem;
-}
-
-.calendar .calendar-header,
-.calendar .calendar-body {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-pack: center;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding: .4rem 0;
-}
-
-.calendar .calendar-header .calendar-date,
-.calendar .calendar-body .calendar-date {
-  -ms-flex: 0 0 14.28%;
-  flex: 0 0 14.28%;
-  max-width: 14.28%;
-}
-
-.calendar .calendar-header {
-  background: white;
-  border-bottom: .05rem solid #d7e5fd;
-  color: #a6c6fc;
-  font-size: .7rem;
-  text-align: center;
-}
-
-.calendar .calendar-body {
-  color: #1267f6;
-}
-
-.calendar .calendar-date {
-  border: 0;
-  padding: .2rem;
-}
-
-.calendar .calendar-date .date-item {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  border: .05rem solid transparent;
-  border-radius: 50%;
-  color: #1267f6;
-  cursor: pointer;
-  font-size: .7rem;
-  height: 1.4rem;
-  line-height: 1rem;
-  outline: none;
-  padding: .1rem;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
-  vertical-align: middle;
-  white-space: nowrap;
-  width: 1.4rem;
-}
-
-.calendar .calendar-date .date-item.date-today {
-  border-color: #f7f7f7;
-  color: #448aff;
-}
-
-.calendar .calendar-date .date-item:focus {
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.calendar .calendar-date .date-item:focus,
-.calendar .calendar-date .date-item:hover {
-  background: white;
-  border-color: #f7f7f7;
-  color: #448aff;
-  text-decoration: none;
-}
-
-.calendar .calendar-date .date-item:active,
-.calendar .calendar-date .date-item.active {
-  background: #3580ff;
-  border-color: #1b70ff;
-  color: #fff;
-}
-
-.calendar .calendar-date .date-item.badge::after {
-  position: absolute;
-  right: 3px;
-  top: 3px;
-  transform: translate(50%, -50%);
-}
-
-.calendar .calendar-date .date-item:disabled,
-.calendar .calendar-date .date-item.disabled,
-.calendar .calendar-date .calendar-event:disabled,
-.calendar .calendar-date .calendar-event.disabled {
-  cursor: default;
-  opacity: .25;
-  pointer-events: none;
-}
-
-.calendar .calendar-date.prev-month .date-item,
-.calendar .calendar-date.prev-month .calendar-event,
-.calendar .calendar-date.next-month .date-item,
-.calendar .calendar-date.next-month .calendar-event {
-  opacity: .25;
-}
-
-.calendar .calendar-range {
-  position: relative;
-}
-
-.calendar .calendar-range::before {
-  background: white;
-  content: "";
-  height: 1.4rem;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.calendar .calendar-range.range-start::before {
-  left: 50%;
-}
-
-.calendar .calendar-range.range-end::before {
-  right: 50%;
-}
-
-.calendar .calendar-range.range-start .date-item,
-.calendar .calendar-range.range-end .date-item {
-  background: #3580ff;
-  border-color: #1b70ff;
-  color: #fff;
-}
-
-.calendar .calendar-range .date-item {
-  color: #448aff;
-}
-
-.calendar.calendar-lg .calendar-body {
-  padding: 0;
-}
-
-.calendar.calendar-lg .calendar-body .calendar-date {
-  border-bottom: .05rem solid #d7e5fd;
-  border-right: .05rem solid #d7e5fd;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 5.5rem;
-  padding: 0;
-}
-
-.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
-  border-right: 0;
-}
-
-.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) {
-  border-bottom: 0;
-}
-
-.calendar.calendar-lg .date-item {
-  align-self: flex-end;
-  -ms-flex-item-align: end;
-  height: 1.4rem;
-  margin-right: .2rem;
-  margin-top: .2rem;
-}
-
-.calendar.calendar-lg .calendar-range::before {
-  top: 19px;
-}
-
-.calendar.calendar-lg .calendar-range.range-start::before {
-  left: auto;
-  width: 19px;
-}
-
-.calendar.calendar-lg .calendar-range.range-end::before {
-  right: 19px;
-}
-
-.calendar.calendar-lg .calendar-events {
-  flex-grow: 1;
-  -ms-flex-positive: 1;
-  line-height: 1;
-  overflow-y: auto;
-  padding: .2rem;
-}
-
-.calendar.calendar-lg .calendar-event {
-  border-radius: .1rem;
-  display: block;
-  font-size: .7rem;
-  margin: .1rem auto;
-  overflow: hidden;
-  padding: 3px 4px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
-.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
-.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
-.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4),
-.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-container .carousel-item:nth-of-type(5),
-.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-container .carousel-item:nth-of-type(6),
-.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-container .carousel-item:nth-of-type(7),
-.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-container .carousel-item:nth-of-type(8) {
-  animation: carousel-slidein .75s ease-in-out 1;
-  opacity: 1;
-  z-index: 100;
-}
-
-.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
-.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
-.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
-.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4),
-.carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-nav .nav-item:nth-of-type(5),
-.carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6),
-.carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7),
-.carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) {
-  color: white;
-}
-
-.carousel {
-  background: white;
-  display: block;
-  overflow: hidden;
-  -webkit-overflow-scrolling: touch;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-}
-
-.carousel .carousel-container {
-  height: 100%;
-  left: 0;
-  position: relative;
-}
-
-.carousel .carousel-container::before {
-  content: "";
-  display: block;
-  padding-bottom: 56.25%;
-}
-
-.carousel .carousel-container .carousel-item {
-  animation: carousel-slideout 1s ease-in-out 1;
-  height: 100%;
-  left: 0;
-  margin: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.carousel .carousel-container .carousel-item:hover .item-prev,
-.carousel .carousel-container .carousel-item:hover .item-next {
-  opacity: 1;
-}
-
-.carousel .carousel-container .item-prev,
-.carousel .carousel-container .item-next {
-  background: rgba(255, 255, 255, .25);
-  border-color: rgba(255, 255, 255, .5);
-  color: white;
-  opacity: 0;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: all .4s;
-  z-index: 100;
-}
-
-.carousel .carousel-container .item-prev {
-  left: 1rem;
-}
-
-.carousel .carousel-container .item-next {
-  right: 1rem;
-}
-
-.carousel .carousel-nav {
-  bottom: .4rem;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-pack: center;
-  justify-content: center;
-  left: 50%;
-  position: absolute;
-  transform: translateX(-50%);
-  width: 10rem;
-  z-index: 100;
-}
-
-.carousel .carousel-nav .nav-item {
-  color: rgba(255, 255, 255, .5);
-  display: block;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  height: 1.6rem;
-  margin: .2rem;
-  max-width: 2.5rem;
-  position: relative;
-}
-
-.carousel .carousel-nav .nav-item::before {
-  background: currentColor;
-  content: "";
-  display: block;
-  height: .1rem;
-  position: absolute;
-  top: .5rem;
-  width: 100%;
-}
-
-@keyframes carousel-slidein {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-@keyframes carousel-slideout {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(-50%);
-  }
-}
-
-.comparison-slider {
-  height: 50vh;
-  overflow: hidden;
-  -webkit-overflow-scrolling: touch; 
-  position: relative;
-  width: 100%;
-}
-
-.comparison-slider .comparison-before,
-.comparison-slider .comparison-after {
-  height: 100%;
-  left: 0;
-  margin: 0;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-}
-
-.comparison-slider .comparison-before img,
-.comparison-slider .comparison-after img {
-  height: 100%;
-  object-fit: cover;
-  object-position: left center;
-  position: absolute;
-  width: 100%;
-}
-
-.comparison-slider .comparison-before {
-  width: 100%;
-  z-index: 1;
-}
-
-.comparison-slider .comparison-before .comparison-label {
-  right: .8rem;
-}
-
-.comparison-slider .comparison-after {
-  max-width: 100%;
-  min-width: 0;
-  z-index: 2;
-}
-
-.comparison-slider .comparison-after::before {
-  background: transparent;
-  content: "";
-  cursor: default;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  right: .8rem;
-  top: 0;
-  z-index: 1;
-}
-
-.comparison-slider .comparison-after::after {
-  background: currentColor;
-  border-radius: 50%;
-  box-shadow: 0 -5px, 0 5px;
-  color: #fff;
-  content: "";
-  height: 3px;
-  position: absolute;
-  right: .4rem;
-  top: 50%;
-  transform: translate(50%, -50%);
-  width: 3px;
-}
-
-.comparison-slider .comparison-after .comparison-label {
-  left: .8rem;
-}
-
-.comparison-slider .comparison-resizer {
-  animation: first-run 1.5s 1 ease-in-out;
-  cursor: ew-resize;
-  height: .8rem;
-  left: 0;
-  max-width: 100%;
-  min-width: .8rem;
-  opacity: 0;
-  outline: none;
-  position: relative;
-  resize: horizontal;
-  top: 50%;
-  transform: translateY(-50%) scaleY(30);
-  width: 0;
-}
-
-.comparison-slider .comparison-label {
-  background: rgba(5, 52, 132, .5);
-  bottom: .8rem;
-  color: #fff;
-  padding: .2rem .4rem;
-  position: absolute;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@keyframes first-run {
-  0% {
-    width: 0;
-  }
-  25% {
-    width: 2.4rem;
-  }
-  50% {
-    width: .8rem;
-  }
-  75% {
-    width: 1.2rem;
-  }
-  100% {
-    width: 0;
-  }
-}
-
-.filter .filter-tag#tag-0:checked ~ .filter-nav .chip[for="tag-0"],
-.filter .filter-tag#tag-1:checked ~ .filter-nav .chip[for="tag-1"],
-.filter .filter-tag#tag-2:checked ~ .filter-nav .chip[for="tag-2"],
-.filter .filter-tag#tag-3:checked ~ .filter-nav .chip[for="tag-3"],
-.filter .filter-tag#tag-4:checked ~ .filter-nav .chip[for="tag-4"],
-.filter .filter-tag#tag-5:checked ~ .filter-nav .chip[for="tag-5"],
-.filter .filter-tag#tag-6:checked ~ .filter-nav .chip[for="tag-6"],
-.filter .filter-tag#tag-7:checked ~ .filter-nav .chip[for="tag-7"],
-.filter .filter-tag#tag-8:checked ~ .filter-nav .chip[for="tag-8"] {
-  background: #448aff;
-  color: #fff;
-}
-
-.filter .filter-tag#tag-1:checked ~ .filter-body .filter-item:not([data-tag~="tag-1"]),
-.filter .filter-tag#tag-2:checked ~ .filter-body .filter-item:not([data-tag~="tag-2"]),
-.filter .filter-tag#tag-3:checked ~ .filter-body .filter-item:not([data-tag~="tag-3"]),
-.filter .filter-tag#tag-4:checked ~ .filter-body .filter-item:not([data-tag~="tag-4"]),
-.filter .filter-tag#tag-5:checked ~ .filter-body .filter-item:not([data-tag~="tag-5"]),
-.filter .filter-tag#tag-6:checked ~ .filter-body .filter-item:not([data-tag~="tag-6"]),
-.filter .filter-tag#tag-7:checked ~ .filter-body .filter-item:not([data-tag~="tag-7"]),
-.filter .filter-tag#tag-8:checked ~ .filter-body .filter-item:not([data-tag~="tag-8"]) {
-  display: none;
-}
-
-.filter .filter-nav {
-  margin: .4rem 0;
-}
-
-.filter .filter-body {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.meter {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: white;
-  border: 0;
-  border-radius: .1rem;
-  display: block;
-  height: .8rem; 
-  width: 100%;
-}
-
-.meter::-webkit-meter-inner-element {
-  display: block;
-}
-
-.meter::-webkit-meter-bar,
-.meter::-webkit-meter-optimum-value,
-.meter::-webkit-meter-suboptimum-value,
-.meter::-webkit-meter-even-less-good-value {
-  border-radius: .1rem;
-}
-
-.meter::-webkit-meter-bar {
-  background: white;
-}
-
-.meter::-webkit-meter-optimum-value {
-  background: #448aff;
-}
-
-.meter::-webkit-meter-suboptimum-value {
-  background: #ff5252;
-}
-
-.meter::-webkit-meter-even-less-good-value {
-  background: #ff5252;
-}
-
-.meter::-moz-meter-bar,
-.meter:-moz-meter-optimum,
-.meter:-moz-meter-sub-optimum,
-.meter:-moz-meter-sub-sub-optimum {
-  border-radius: .1rem;
-}
-
-.meter:-moz-meter-optimum::-moz-meter-bar {
-  background: #448aff;
-}
-
-.meter:-moz-meter-sub-optimum::-moz-meter-bar {
-  background: #ff5252;
-}
-
-.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-  background: #ff5252;
-}
-
-.off-canvas {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-flow: nowrap;
-  flex-flow: nowrap;
-  height: 100%;
-  position: relative;
-  width: 100%;
-}
-
-.off-canvas .off-canvas-toggle {
-  display: block;
-  left: .4rem; 
-  position: absolute;
-  top: .4rem;
-  transition: none;
-  z-index: 1;
-}
-
-.off-canvas .off-canvas-sidebar {
-  background: white;
-  bottom: 0;
-  left: 0;
-  min-width: 10rem;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  transform: translateX(-100%); 
-  transition: transform .25s;
-  z-index: 200;
-}
-
-.off-canvas .off-canvas-content {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  height: 100%;
-  padding: .4rem .4rem .4rem 4rem;
-}
-
-.off-canvas .off-canvas-overlay {
-  background: rgba(5, 52, 132, .1);
-  border-color: transparent;
-  border-radius: 0;
-  bottom: 0;
-  display: none;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
-}
-
-.off-canvas .off-canvas-sidebar:target,
-.off-canvas .off-canvas-sidebar.active {
-  transform: translateX(0);
-}
-
-.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay,
-.off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay {
-  display: block;
-  z-index: 100;
-}
-
-@media (min-width: 960px) {
-  .off-canvas.off-canvas-sidebar-show .off-canvas-toggle {
-    display: none;
-  }
-  .off-canvas.off-canvas-sidebar-show .off-canvas-sidebar {
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    position: relative;
-    transform: none;
-  }
-  .off-canvas.off-canvas-sidebar-show .off-canvas-overlay {
-    display: none !important;
-  }
-}
-
-.parallax {
-  display: block;
-  height: auto;
-  position: relative;
-  width: auto;
-}
-
-.parallax .parallax-content {
-  box-shadow: 0 1rem 2.1rem rgba(5, 52, 132, .3);
-  height: auto;
-  transform: perspective(1000px);
-  transform-style: preserve-3d;
-  transition: all .4s ease;
-  width: 100%;
-}
-
-.parallax .parallax-content::before {
-  content: "";
-  display: block;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.parallax .parallax-front {
-  align-items: center;
-  color: #fff;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  -ms-flex-pack: center;
-  height: 100%;
-  justify-content: center;
-  left: 0;
-  position: absolute;
-  text-align: center;
-  text-shadow: 0 0 20px rgba(5, 52, 132, .75);
-  top: 0;
-  transform: translateZ(50px) scale(.95);
-  transition: transform .4s;
-  width: 100%;
-  z-index: 1;
-}
-
-.parallax .parallax-top-left {
-  height: 50%;
-  left: 0;
-  outline: none;
-  position: absolute;
-  top: 0; 
-  width: 50%;
-  z-index: 100;
-}
-
-.parallax .parallax-top-left:focus ~ .parallax-content,
-.parallax .parallax-top-left:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
-}
-
-.parallax .parallax-top-left:focus ~ .parallax-content::before,
-.parallax .parallax-top-left:hover ~ .parallax-content::before {
-  background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
-}
-
-.parallax .parallax-top-left:focus ~ .parallax-content .parallax-front,
-.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(4.5px, 4.5px, 50px) scale(.95);
-}
-
-.parallax .parallax-top-right {
-  height: 50%;
-  outline: none;
-  position: absolute;
-  right: 0;
-  top: 0; 
-  width: 50%;
-  z-index: 100;
-}
-
-.parallax .parallax-top-right:focus ~ .parallax-content,
-.parallax .parallax-top-right:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
-}
-
-.parallax .parallax-top-right:focus ~ .parallax-content::before,
-.parallax .parallax-top-right:hover ~ .parallax-content::before {
-  background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
-}
-
-.parallax .parallax-top-right:focus ~ .parallax-content .parallax-front,
-.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(-4.5px, 4.5px, 50px) scale(.95);
-}
-
-.parallax .parallax-bottom-left {
-  bottom: 0;
-  height: 50%;
-  left: 0; 
-  outline: none;
-  position: absolute;
-  width: 50%;
-  z-index: 100;
-}
-
-.parallax .parallax-bottom-left:focus ~ .parallax-content,
-.parallax .parallax-bottom-left:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg);
-}
-
-.parallax .parallax-bottom-left:focus ~ .parallax-content::before,
-.parallax .parallax-bottom-left:hover ~ .parallax-content::before {
-  background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
-}
-
-.parallax .parallax-bottom-left:focus ~ .parallax-content .parallax-front,
-.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(4.5px, -4.5px, 50px) scale(.95);
-}
-
-.parallax .parallax-bottom-right {
-  bottom: 0;
-  height: 50%;
-  outline: none;
-  position: absolute;
-  right: 0; 
-  width: 50%;
-  z-index: 100;
-}
-
-.parallax .parallax-bottom-right:focus ~ .parallax-content,
-.parallax .parallax-bottom-right:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(-3deg) rotateY(3deg);
-}
-
-.parallax .parallax-bottom-right:focus ~ .parallax-content::before,
-.parallax .parallax-bottom-right:hover ~ .parallax-content::before {
-  background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
-}
-
-.parallax .parallax-bottom-right:focus ~ .parallax-content .parallax-front,
-.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(-4.5px, -4.5px, 50px) scale(.95);
-}
-
-.progress {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #f7f7f7;
-  border: 0;
-  border-radius: .1rem;
-  color: #448aff;
-  height: .2rem;
-  position: relative;
-  width: 100%;
-}
-
-.progress::-webkit-progress-bar {
-  background: transparent;
-  border-radius: .1rem;
-}
-
-.progress::-webkit-progress-value {
-  background: #448aff;
-  border-radius: .1rem;
-}
-
-.progress::-moz-progress-bar {
-  background: #448aff;
-  border-radius: .1rem;
-}
-
-.progress:indeterminate {
-  animation: progress-indeterminate 1.5s linear infinite;
-  background: #f7f7f7 linear-gradient(to right, #448aff 30%, #f7f7f7 30%) top left/150% 150% no-repeat;
-}
-
-.progress:indeterminate::-moz-progress-bar {
-  background: transparent;
-}
-
-@keyframes progress-indeterminate {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  display: block;
-  height: 1.2rem; 
-  width: 100%;
-}
-
-.slider:focus {
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-  outline: none;
-}
-
-.slider.tooltip:not([data-tooltip])::after {
-  content: attr(value);
-}
-
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #448aff;
-  border: 0;
-  border-radius: 50%;
-  height: .6rem;
-  margin-top: -.25rem;
-  transition: transform .2s;
-  width: .6rem;
-}
-
-.slider::-moz-range-thumb {
-  background: #448aff;
-  border: 0;
-  border-radius: 50%;
-  height: .6rem;
-  transition: transform .2s;
-  width: .6rem;
-}
-
-.slider::-ms-thumb {
-  background: #448aff;
-  border: 0;
-  border-radius: 50%;
-  height: .6rem;
-  transition: transform .2s;
-  width: .6rem;
-}
-
-.slider:active::-webkit-slider-thumb {
-  transform: scale(1.25);
-}
-
-.slider:active::-moz-range-thumb {
-  transform: scale(1.25);
-}
-
-.slider:active::-ms-thumb {
-  transform: scale(1.25);
-}
-
-.slider:disabled::-webkit-slider-thumb,
-.slider.disabled::-webkit-slider-thumb {
-  background: white;
-  transform: scale(1);
-}
-
-.slider:disabled::-moz-range-thumb,
-.slider.disabled::-moz-range-thumb {
-  background: white;
-  transform: scale(1);
-}
-
-.slider:disabled::-ms-thumb,
-.slider.disabled::-ms-thumb {
-  background: white;
-  transform: scale(1);
-}
-
-.slider::-webkit-slider-runnable-track {
-  background: #f7f7f7;
-  border-radius: .1rem;
-  height: .1rem;
-  width: 100%;
-}
-
-.slider::-moz-range-track {
-  background: #f7f7f7;
-  border-radius: .1rem;
-  height: .1rem;
-  width: 100%;
-}
-
-.slider::-ms-track {
-  background: #f7f7f7;
-  border-radius: .1rem;
-  height: .1rem;
-  width: 100%;
-}
-
-.slider::-ms-fill-lower {
-  background: #448aff;
-}
-
-.timeline .timeline-item {
-  display: flex;
-  display: -ms-flexbox;
-  margin-bottom: 1.2rem;
-  position: relative;
-}
-
-.timeline .timeline-item::before {
-  background: #d7e5fd;
-  content: "";
-  height: 100%;
-  left: 11px;
-  position: absolute;
-  top: 1.2rem;
-  width: 2px;
-}
-
-.timeline .timeline-item .timeline-left {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-
-.timeline .timeline-item .timeline-content {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  padding: 2px 0 2px .8rem;
-}
-
-.timeline .timeline-item .timeline-icon {
-  align-items: center;
-  border-radius: 50%;
-  color: #fff;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  -ms-flex-pack: center;
-  height: 1.2rem;
-  justify-content: center;
-  text-align: center;
-  width: 1.2rem;
-}
-
-.timeline .timeline-item .timeline-icon::before {
-  border: .1rem solid #448aff;
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: .4rem;
-  left: .4rem;
-  position: absolute;
-  top: .4rem;
-  width: .4rem;
-}
-
-.timeline .timeline-item .timeline-icon.icon-lg {
-  background: #448aff;
-  line-height: 1.2rem;
-}
-
-.timeline .timeline-item .timeline-icon.icon-lg::before {
-  content: none;
-}
-
-.viewer-360 {
-  align-items: center;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="1"] + .viewer-image {
-  background-position-y: 0;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="2"] + .viewer-image {
-  background-position-y: 2.8571428571%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="3"] + .viewer-image {
-  background-position-y: 5.7142857143%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="4"] + .viewer-image {
-  background-position-y: 8.5714285714%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="5"] + .viewer-image {
-  background-position-y: 11.4285714286%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="6"] + .viewer-image {
-  background-position-y: 14.2857142857%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="7"] + .viewer-image {
-  background-position-y: 17.1428571429%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="8"] + .viewer-image {
-  background-position-y: 20%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="9"] + .viewer-image {
-  background-position-y: 22.8571428571%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="10"] + .viewer-image {
-  background-position-y: 25.7142857143%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="11"] + .viewer-image {
-  background-position-y: 28.5714285714%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="12"] + .viewer-image {
-  background-position-y: 31.4285714286%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="13"] + .viewer-image {
-  background-position-y: 34.2857142857%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="14"] + .viewer-image {
-  background-position-y: 37.1428571429%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="15"] + .viewer-image {
-  background-position-y: 40%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="16"] + .viewer-image {
-  background-position-y: 42.8571428571%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="17"] + .viewer-image {
-  background-position-y: 45.7142857143%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="18"] + .viewer-image {
-  background-position-y: 48.5714285714%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="19"] + .viewer-image {
-  background-position-y: 51.4285714286%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="20"] + .viewer-image {
-  background-position-y: 54.2857142857%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="21"] + .viewer-image {
-  background-position-y: 57.1428571429%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="22"] + .viewer-image {
-  background-position-y: 60%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="23"] + .viewer-image {
-  background-position-y: 62.8571428571%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="24"] + .viewer-image {
-  background-position-y: 65.7142857143%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="25"] + .viewer-image {
-  background-position-y: 68.5714285714%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="26"] + .viewer-image {
-  background-position-y: 71.4285714286%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="27"] + .viewer-image {
-  background-position-y: 74.2857142857%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="28"] + .viewer-image {
-  background-position-y: 77.1428571429%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="29"] + .viewer-image {
-  background-position-y: 80%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="30"] + .viewer-image {
-  background-position-y: 82.8571428571%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="31"] + .viewer-image {
-  background-position-y: 85.7142857143%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="32"] + .viewer-image {
-  background-position-y: 88.5714285714%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="33"] + .viewer-image {
-  background-position-y: 91.4285714286%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="34"] + .viewer-image {
-  background-position-y: 94.2857142857%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="35"] + .viewer-image {
-  background-position-y: 97.1428571429%;
-}
-
-.viewer-360 .viewer-slider[max="36"][value="36"] + .viewer-image {
-  background-position-y: 100%;
-}
-
-.viewer-360 .viewer-slider {
-  cursor: ew-resize;
-  -ms-flex-order: 2;
-  margin: 1rem;
-  order: 2;
-  width: 60%;
-}
-
-.viewer-360 .viewer-image {
-  background-position-y: 0;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  -ms-flex-order: 1;
-  max-width: 100%;
-  order: 1;
-}
\ No newline at end of file
diff --git a/web/public/static/css/spectre.css b/web/public/static/css/spectre.css
deleted file mode 100644
index 472a36a12..000000000
--- a/web/public/static/css/spectre.css
+++ /dev/null
@@ -1,3710 +0,0 @@
-/*! Spectre.css v0.5.8 | MIT License | github.com/picturepan2/spectre */
-/* Manually forked from Normalize.css */
-/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
-/** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
-/* Document ========================================================================== */
-html {
-  font-family: sans-serif; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 3 */ 
-  -ms-text-size-adjust: 100%; /* 3 */
-}
-
-/* Sections ========================================================================== */
-/** Remove the margin in all browsers (opinionated). */
-body {
-  margin: 0;
-}
-
-/** Add the correct display in IE 9-. */
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
-}
-
-/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
-h1 {
-  font-size: 2em;
-  margin: .67em 0;
-}
-
-/* Grouping content ========================================================================== */
-/** Add the correct display in IE 9-. 1. Add the correct display in IE. */
-figcaption,
-figure,
-main {
-  /* 1 */ display: block;
-}
-
-/** Add the correct margin in IE 8 (removed). */
-/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/** 1. Correct the inheritance and scaling of font size in all browsers. (removed) 2. Correct the odd `em` font sizing in all browsers. */
-/* Text-level semantics ========================================================================== */
-/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-/** Modify default styling of address. */
-address {
-  font-style: normal;
-}
-
-/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) */
-/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
-b,
-strong {
-  font-weight: inherit;
-}
-
-/** Add the correct font weight in Chrome, Edge, and Safari. */
-b,
-strong {
-  font-weight: bolder;
-}
-
-/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
-code,
-kbd,
-pre,
-samp {
-  font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; /* 1 (changed) */
-  font-size: 1em; /* 2 */
-}
-
-/** Add the correct font style in Android 4.3-. */
-dfn {
-  font-style: italic;
-}
-
-/** Add the correct background and color in IE 9-. (Removed) */
-/** Add the correct font size in all browsers. */
-small {
-  font-size: 80%;
-  font-weight: 400; /* (added) */
-}
-
-/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -.25em;
-}
-
-sup {
-  top: -.5em;
-}
-
-/* Embedded content ========================================================================== */
-/** Add the correct display in IE 9-. */
-audio,
-video {
-  display: inline-block;
-}
-
-/** Add the correct display in iOS 4-7. */
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/** Remove the border on images inside links in IE 10-. */
-img {
-  border-style: none;
-}
-
-/** Hide the overflow in IE. */
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Forms ========================================================================== */
-/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 (changed) */
-  font-size: inherit; /* 1 (changed) */
-  line-height: inherit; /* 1 (changed) */
-  margin: 0; /* 2 */
-}
-
-/** Show the overflow in IE. 1. Show the overflow in Edge. */
-button,
-input {
-  /* 1 */ overflow: visible;
-}
-
-/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
-button,
-select {
-  /* 1 */ text-transform: none;
-}
-
-/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/** Remove the inner border and padding in Firefox. */
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/** Restore the focus styles unset by the previous rule (removed). */
-/** Change the border, margin, and padding in all browsers (opinionated) (changed). */
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
-progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/** Remove the default vertical scrollbar in IE. */
-textarea {
-  overflow: auto;
-}
-
-/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/** Correct the cursor style of increment and decrement buttons in Chrome. */
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive ========================================================================== */
-/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */
-details,
-menu {
-  display: block;
-}
-
-/* Add the correct display in all browsers. */
-summary {
-  display: list-item;
-  outline: none;
-}
-
-/* Scripting ========================================================================== */
-/** Add the correct display in IE 9-. */
-canvas {
-  display: inline-block;
-}
-
-/** Add the correct display in IE. */
-template {
-  display: none;
-}
-
-/* Hidden ========================================================================== */
-/** Add the correct display in IE 10-. */
-[hidden] {
-  display: none;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-html {
-  box-sizing: border-box;
-  font-size: 20px;
-  line-height: 1.5;
-  -webkit-tap-highlight-color: transparent;
-}
-
-body {
-  background: #fff;
-  color: #063e9d;
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size: .8rem;
-  overflow-x: hidden;
-  text-rendering: optimizeLegibility;
-}
-
-a {
-  color: #448aff;
-  outline: none;
-  text-decoration: none;
-}
-
-a:focus {
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-a:focus,
-a:hover,
-a:active,
-a.active {
-  color: #116aff;
-  text-decoration: underline;
-}
-
-a:visited {
-  color: #7af;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: inherit;
-  font-weight: 500;
-  line-height: 1.2;
-  margin-bottom: .5em;
-  margin-top: 0;
-}
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  font-weight: 500;
-}
-
-h1,
-.h1 {
-  font-size: 2rem;
-}
-
-h2,
-.h2 {
-  font-size: 1.6rem;
-}
-
-h3,
-.h3 {
-  font-size: 1.4rem;
-}
-
-h4,
-.h4 {
-  font-size: 1.2rem;
-}
-
-h5,
-.h5 {
-  font-size: 1rem;
-}
-
-h6,
-.h6 {
-  font-size: .8rem;
-}
-
-p {
-  margin: 0 0 1.2rem;
-}
-
-a,
-ins,
-u {
-  -webkit-text-decoration-skip: ink edges;
-  text-decoration-skip: ink edges;
-}
-
-abbr[title] {
-  border-bottom: .05rem dotted;
-  cursor: help;
-  text-decoration: none;
-}
-
-kbd {
-  background: #053484;
-  border-radius: .1rem;
-  color: #fff;
-  font-size: .7rem; 
-  line-height: 1.25;
-  padding: .1rem .2rem;
-}
-
-mark {
-  background: #ffe9b3;
-  border-bottom: .05rem solid #ffd367;
-  border-radius: .1rem;
-  color: #063e9d;
-  padding: .05rem .1rem 0;
-}
-
-blockquote {
-  border-left: .1rem solid #d7e5fd;
-  margin-left: 0;
-  padding: .4rem .8rem;
-}
-
-blockquote p:last-child {
-  margin-bottom: 0;
-}
-
-ul,
-ol {
-  margin: .8rem 0 .8rem .8rem;
-  padding: 0;
-}
-
-ul ul,
-ul ol,
-ol ul,
-ol ol {
-  margin: .8rem 0 .8rem .8rem;
-}
-
-ul li,
-ol li {
-  margin-top: .4rem;
-}
-
-ul {
-  list-style: disc inside;
-}
-
-ul ul {
-  list-style-type: circle;
-}
-
-ol {
-  list-style: decimal inside;
-}
-
-ol ol {
-  list-style-type: lower-alpha;
-}
-
-dl dt {
-  font-weight: bold;
-}
-
-dl dd {
-  margin: .4rem 0 .8rem 0;
-}
-
-html:lang(zh),
-html:lang(zh-Hans),
-.lang-zh,
-.lang-zh-hans {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
-}
-
-html:lang(zh-Hant),
-.lang-zh-hant {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
-}
-
-html:lang(ja),
-.lang-ja {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
-}
-
-html:lang(ko),
-.lang-ko {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
-}
-
-:lang(zh) ins,
-:lang(zh) u,
-:lang(ja) ins,
-:lang(ja) u,
-.lang-cjk ins,
-.lang-cjk u {
-  border-bottom: .05rem solid;
-  text-decoration: none;
-}
-
-:lang(zh) del + del,
-:lang(zh) del + s,
-:lang(zh) ins + ins,
-:lang(zh) ins + u,
-:lang(zh) s + del,
-:lang(zh) s + s,
-:lang(zh) u + ins,
-:lang(zh) u + u,
-:lang(ja) del + del,
-:lang(ja) del + s,
-:lang(ja) ins + ins,
-:lang(ja) ins + u,
-:lang(ja) s + del,
-:lang(ja) s + s,
-:lang(ja) u + ins,
-:lang(ja) u + u,
-.lang-cjk del + del,
-.lang-cjk del + s,
-.lang-cjk ins + ins,
-.lang-cjk ins + u,
-.lang-cjk s + del,
-.lang-cjk s + s,
-.lang-cjk u + ins,
-.lang-cjk u + u {
-  margin-left: .125em;
-}
-
-.table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  text-align: left; 
-  width: 100%;
-}
-
-.table.table-striped tbody tr:nth-of-type(odd) {
-  background: white;
-}
-
-.table tbody tr.active,
-.table.table-striped tbody tr.active {
-  background: #f7f7f7;
-}
-
-.table.table-hover tbody tr:hover {
-  background: #f7f7f7;
-}
-
-.table.table-scroll {
-  display: block;
-  overflow-x: auto;
-  padding-bottom: .75rem;
-  white-space: nowrap;
-}
-
-.table td,
-.table th {
-  border-bottom: .05rem solid #d7e5fd;
-  padding: .6rem .4rem;
-}
-
-.table th {
-  border-bottom-width: .1rem;
-}
-
-.btn {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #fff;
-  border: .05rem solid #448aff;
-  border-radius: .1rem;
-  color: #448aff;
-  cursor: pointer;
-  display: inline-block;
-  font-size: .8rem;
-  height: 1.8rem;
-  line-height: 1.2rem;
-  outline: none;
-  padding: .25rem .4rem;
-  text-align: center;
-  text-decoration: none;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.btn:focus {
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.btn:focus,
-.btn:hover {
-  background: white;
-  border-color: #3580ff;
-  text-decoration: none;
-}
-
-.btn:active,
-.btn.active {
-  background: #3580ff;
-  border-color: #1b70ff;
-  color: #fff;
-  text-decoration: none;
-}
-
-.btn:active.loading::after,
-.btn.active.loading::after {
-  border-bottom-color: #fff;
-  border-left-color: #fff;
-}
-
-.btn[disabled],
-.btn:disabled,
-.btn.disabled {
-  cursor: default;
-  opacity: .5;
-  pointer-events: none;
-}
-
-.btn.btn-primary {
-  background: #448aff;
-  border-color: #3580ff;
-  color: #fff;
-}
-
-.btn.btn-primary:focus,
-.btn.btn-primary:hover {
-  background: #2b7aff;
-  border-color: #1b70ff;
-  color: #fff;
-}
-
-.btn.btn-primary:active,
-.btn.btn-primary.active {
-  background: #2074ff;
-  border-color: #116aff;
-  color: #fff;
-}
-
-.btn.btn-primary.loading::after {
-  border-bottom-color: #fff;
-  border-left-color: #fff;
-}
-
-.btn.btn-success {
-  background: #448aff;
-  border-color: #3580ff;
-  color: #fff;
-}
-
-.btn.btn-success:focus {
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.btn.btn-success:focus,
-.btn.btn-success:hover {
-  background: #3a84ff;
-  border-color: #2b7aff;
-  color: #fff;
-}
-
-.btn.btn-success:active,
-.btn.btn-success.active {
-  background: #2074ff;
-  border-color: #116aff;
-  color: #fff;
-}
-
-.btn.btn-success.loading::after {
-  border-bottom-color: #fff;
-  border-left-color: #fff;
-}
-
-.btn.btn-error {
-  background: #ff5252;
-  border-color: #ff4343;
-  color: #fff;
-}
-
-.btn.btn-error:focus {
-  box-shadow: 0 0 0 .1rem rgba(255, 82, 82, .2);
-}
-
-.btn.btn-error:focus,
-.btn.btn-error:hover {
-  background: #ff4848;
-  border-color: #ff3939;
-  color: #fff;
-}
-
-.btn.btn-error:active,
-.btn.btn-error.active {
-  background: #ff2e2e;
-  border-color: #ff1f1f;
-  color: #fff;
-}
-
-.btn.btn-error.loading::after {
-  border-bottom-color: #fff;
-  border-left-color: #fff;
-}
-
-.btn.btn-link {
-  background: transparent;
-  border-color: transparent;
-  color: #448aff;
-}
-
-.btn.btn-link:focus,
-.btn.btn-link:hover,
-.btn.btn-link:active,
-.btn.btn-link.active {
-  color: #116aff;
-}
-
-.btn.btn-sm {
-  font-size: .7rem;
-  height: 1.4rem;
-  padding: .05rem .3rem;
-}
-
-.btn.btn-lg {
-  font-size: .9rem;
-  height: 2rem;
-  padding: .35rem .6rem;
-}
-
-.btn.btn-block {
-  display: block;
-  width: 100%;
-}
-
-.btn.btn-action {
-  padding-left: 0;
-  padding-right: 0; 
-  width: 1.8rem;
-}
-
-.btn.btn-action.btn-sm {
-  width: 1.4rem;
-}
-
-.btn.btn-action.btn-lg {
-  width: 2rem;
-}
-
-.btn.btn-clear {
-  background: transparent;
-  border: 0;
-  color: currentColor;
-  height: 1rem;
-  line-height: .8rem;
-  margin-left: .2rem;
-  margin-right: -2px;
-  opacity: 1;
-  padding: .1rem;
-  text-decoration: none;
-  width: 1rem;
-}
-
-.btn.btn-clear:focus,
-.btn.btn-clear:hover {
-  background: rgba(255, 255, 255, .5);
-  opacity: .95;
-}
-
-.btn.btn-clear::before {
-  content: "\2715";
-}
-
-.btn-group {
-  display: inline-flex;
-  display: -ms-inline-flexbox;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.btn-group .btn {
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-.btn-group .btn:first-child:not(:last-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.btn-group .btn:not(:first-child):not(:last-child) {
-  border-radius: 0;
-  margin-left: -.05rem;
-}
-
-.btn-group .btn:last-child:not(:first-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  margin-left: -.05rem;
-}
-
-.btn-group .btn:focus,
-.btn-group .btn:hover,
-.btn-group .btn:active,
-.btn-group .btn.active {
-  z-index: 1;
-}
-
-.btn-group.btn-group-block {
-  display: flex; 
-  display: -ms-flexbox;
-}
-
-.btn-group.btn-group-block .btn {
-  -ms-flex: 1 0 0;
-  flex: 1 0 0;
-}
-
-.form-group:not(:last-child) {
-  margin-bottom: .4rem;
-}
-
-fieldset {
-  margin-bottom: .8rem;
-}
-
-legend {
-  font-size: .9rem;
-  font-weight: 500;
-  margin-bottom: .8rem;
-}
-
-.form-label {
-  display: block;
-  line-height: 1.2rem;
-  padding: .3rem 0;
-}
-
-.form-label.label-sm {
-  font-size: .7rem;
-  padding: .1rem 0;
-}
-
-.form-label.label-lg {
-  font-size: .9rem;
-  padding: .4rem 0;
-}
-
-.form-input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #fff;
-  background-image: none;
-  border: .05rem solid #a6c6fc;
-  border-radius: .1rem;
-  color: #063e9d;
-  display: block;
-  font-size: .8rem;
-  height: 1.8rem;
-  line-height: 1.2rem;
-  max-width: 100%;
-  outline: none;
-  padding: .25rem .4rem;
-  position: relative;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
-  width: 100%;
-}
-
-.form-input:focus {
-  border-color: #448aff; 
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.form-input:-ms-input-placeholder {
-  color: #a6c6fc;
-}
-
-.form-input::-ms-input-placeholder {
-  color: #a6c6fc;
-}
-
-.form-input::placeholder {
-  color: #a6c6fc;
-}
-
-.form-input.input-sm {
-  font-size: .7rem;
-  height: 1.4rem;
-  padding: .05rem .3rem;
-}
-
-.form-input.input-lg {
-  font-size: .9rem;
-  height: 2rem;
-  padding: .35rem .6rem;
-}
-
-.form-input.input-inline {
-  display: inline-block;
-  vertical-align: middle;
-  width: auto;
-}
-
-.form-input[type="file"] {
-  height: auto;
-}
-
-textarea.form-input,
-textarea.form-input.input-lg,
-textarea.form-input.input-sm {
-  height: auto;
-}
-
-.form-input-hint {
-  color: #a6c6fc;
-  font-size: .7rem;
-  margin-top: .2rem;
-}
-
-.has-success .form-input-hint,
-.is-success + .form-input-hint {
-  color: #448aff;
-}
-
-.has-error .form-input-hint,
-.is-error + .form-input-hint {
-  color: #ff5252;
-}
-
-.form-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #fff; 
-  border: .05rem solid #a6c6fc;
-  border-radius: .1rem;
-  color: inherit;
-  font-size: .8rem;
-  height: 1.8rem;
-  line-height: 1.2rem;
-  outline: none;
-  padding: .25rem .4rem;
-  vertical-align: middle;
-  width: 100%;
-}
-
-.form-select:focus {
-  border-color: #448aff; 
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.form-select::-ms-expand {
-  display: none;
-}
-
-.form-select.select-sm {
-  font-size: .7rem;
-  height: 1.4rem;
-  padding: .05rem 1.1rem .05rem .3rem;
-}
-
-.form-select.select-lg {
-  font-size: .9rem;
-  height: 2rem;
-  padding: .35rem 1.4rem .35rem .6rem;
-}
-
-.form-select[size],
-.form-select[multiple] {
-  height: auto;
-  padding: .25rem .4rem;
-}
-
-.form-select[size] option,
-.form-select[multiple] option {
-  padding: .1rem .2rem;
-}
-
-.form-select:not([multiple]):not([size]) {
-  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
-  padding-right: 1.2rem;
-}
-
-.has-icon-left,
-.has-icon-right {
-  position: relative;
-}
-
-.has-icon-left .form-icon,
-.has-icon-right .form-icon {
-  height: .8rem;
-  margin: 0 .25rem;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: .8rem;
-  z-index: 2;
-}
-
-.has-icon-left .form-icon {
-  left: .05rem;
-}
-
-.has-icon-left .form-input {
-  padding-left: 1.3rem;
-}
-
-.has-icon-right .form-icon {
-  right: .05rem;
-}
-
-.has-icon-right .form-input {
-  padding-right: 1.3rem;
-}
-
-.form-checkbox,
-.form-radio,
-.form-switch {
-  display: block;
-  line-height: 1.2rem;
-  margin: .2rem 0;
-  min-height: 1.4rem;
-  padding: .1rem .4rem .1rem 1.2rem;
-  position: relative;
-}
-
-.form-checkbox input,
-.form-radio input,
-.form-switch input {
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.form-checkbox input:focus + .form-icon,
-.form-radio input:focus + .form-icon,
-.form-switch input:focus + .form-icon {
-  border-color: #448aff; 
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.form-checkbox input:checked + .form-icon,
-.form-radio input:checked + .form-icon,
-.form-switch input:checked + .form-icon {
-  background: #448aff;
-  border-color: #448aff;
-}
-
-.form-checkbox .form-icon,
-.form-radio .form-icon,
-.form-switch .form-icon {
-  border: .05rem solid #a6c6fc;
-  cursor: pointer;
-  display: inline-block;
-  position: absolute;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
-}
-
-.form-checkbox.input-sm,
-.form-radio.input-sm,
-.form-switch.input-sm {
-  font-size: .7rem;
-  margin: 0;
-}
-
-.form-checkbox.input-lg,
-.form-radio.input-lg,
-.form-switch.input-lg {
-  font-size: .9rem;
-  margin: .3rem 0;
-}
-
-.form-checkbox .form-icon,
-.form-radio .form-icon {
-  background: #fff;
-  height: .8rem;
-  left: 0;
-  top: .3rem;
-  width: .8rem;
-}
-
-.form-checkbox input:active + .form-icon,
-.form-radio input:active + .form-icon {
-  background: #f7f7f7;
-}
-
-.form-checkbox .form-icon {
-  border-radius: .1rem;
-}
-
-.form-checkbox input:checked + .form-icon::before {
-  background-clip: padding-box;
-  border: .1rem solid #fff;
-  border-left-width: 0;
-  border-top-width: 0;
-  content: "";
-  height: 9px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
-  transform: rotate(45deg);
-  width: 6px;
-}
-
-.form-checkbox input:indeterminate + .form-icon {
-  background: #448aff;
-  border-color: #448aff;
-}
-
-.form-checkbox input:indeterminate + .form-icon::before {
-  background: #fff;
-  content: "";
-  height: 2px;
-  left: 50%;
-  margin-left: -5px;
-  margin-top: -1px;
-  position: absolute;
-  top: 50%;
-  width: 10px;
-}
-
-.form-radio .form-icon {
-  border-radius: 50%;
-}
-
-.form-radio input:checked + .form-icon::before {
-  background: #fff;
-  border-radius: 50%;
-  content: "";
-  height: 6px;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 6px;
-}
-
-.form-switch {
-  padding-left: 2rem;
-}
-
-.form-switch .form-icon {
-  background: #a6c6fc;
-  background-clip: padding-box;
-  border-radius: .45rem;
-  height: .9rem;
-  left: 0;
-  top: .25rem;
-  width: 1.6rem;
-}
-
-.form-switch .form-icon::before {
-  background: #fff;
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: .8rem;
-  left: 0;
-  position: absolute;
-  top: 0;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
-  width: .8rem;
-}
-
-.form-switch input:checked + .form-icon::before {
-  left: 14px;
-}
-
-.form-switch input:active + .form-icon::before {
-  background: white;
-}
-
-.input-group {
-  display: flex; 
-  display: -ms-flexbox;
-}
-
-.input-group .input-group-addon {
-  background: white;
-  border: .05rem solid #a6c6fc;
-  border-radius: .1rem;
-  line-height: 1.2rem;
-  padding: .25rem .4rem;
-  white-space: nowrap;
-}
-
-.input-group .input-group-addon.addon-sm {
-  font-size: .7rem;
-  padding: .05rem .3rem;
-}
-
-.input-group .input-group-addon.addon-lg {
-  font-size: .9rem;
-  padding: .35rem .6rem;
-}
-
-.input-group .form-input,
-.input-group .form-select {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  width: 1%;
-}
-
-.input-group .input-group-btn {
-  z-index: 1;
-}
-
-.input-group .form-input:first-child:not(:last-child),
-.input-group .form-select:first-child:not(:last-child),
-.input-group .input-group-addon:first-child:not(:last-child),
-.input-group .input-group-btn:first-child:not(:last-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.input-group .form-input:not(:first-child):not(:last-child),
-.input-group .form-select:not(:first-child):not(:last-child),
-.input-group .input-group-addon:not(:first-child):not(:last-child),
-.input-group .input-group-btn:not(:first-child):not(:last-child) {
-  border-radius: 0;
-  margin-left: -.05rem;
-}
-
-.input-group .form-input:last-child:not(:first-child),
-.input-group .form-select:last-child:not(:first-child),
-.input-group .input-group-addon:last-child:not(:first-child),
-.input-group .input-group-btn:last-child:not(:first-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  margin-left: -.05rem;
-}
-
-.input-group .form-input:focus,
-.input-group .form-select:focus,
-.input-group .input-group-addon:focus,
-.input-group .input-group-btn:focus {
-  z-index: 2;
-}
-
-.input-group .form-select {
-  width: auto;
-}
-
-.input-group.input-inline {
-  display: inline-flex; 
-  display: -ms-inline-flexbox;
-}
-
-.has-success .form-input,
-.form-input.is-success,
-.has-success .form-select,
-.form-select.is-success {
-  background: white;
-  border-color: #448aff;
-}
-
-.has-success .form-input:focus,
-.form-input.is-success:focus,
-.has-success .form-select:focus,
-.form-select.is-success:focus {
-  box-shadow: 0 0 0 .1rem rgba(68, 138, 255, .2);
-}
-
-.has-error .form-input,
-.form-input.is-error,
-.has-error .form-select,
-.form-select.is-error {
-  background: white;
-  border-color: #ff5252;
-}
-
-.has-error .form-input:focus,
-.form-input.is-error:focus,
-.has-error .form-select:focus,
-.form-select.is-error:focus {
-  box-shadow: 0 0 0 .1rem rgba(255, 82, 82, .2);
-}
-
-.has-error .form-checkbox .form-icon,
-.form-checkbox.is-error .form-icon,
-.has-error .form-radio .form-icon,
-.form-radio.is-error .form-icon,
-.has-error .form-switch .form-icon,
-.form-switch.is-error .form-icon {
-  border-color: #ff5252;
-}
-
-.has-error .form-checkbox input:checked + .form-icon,
-.form-checkbox.is-error input:checked + .form-icon,
-.has-error .form-radio input:checked + .form-icon,
-.form-radio.is-error input:checked + .form-icon,
-.has-error .form-switch input:checked + .form-icon,
-.form-switch.is-error input:checked + .form-icon {
-  background: #ff5252;
-  border-color: #ff5252;
-}
-
-.has-error .form-checkbox input:focus + .form-icon,
-.form-checkbox.is-error input:focus + .form-icon,
-.has-error .form-radio input:focus + .form-icon,
-.form-radio.is-error input:focus + .form-icon,
-.has-error .form-switch input:focus + .form-icon,
-.form-switch.is-error input:focus + .form-icon {
-  border-color: #ff5252; 
-  box-shadow: 0 0 0 .1rem rgba(255, 82, 82, .2);
-}
-
-.has-error .form-checkbox input:indeterminate + .form-icon,
-.form-checkbox.is-error input:indeterminate + .form-icon {
-  background: #ff5252;
-  border-color: #ff5252;
-}
-
-.form-input:not(:placeholder-shown):invalid {
-  border-color: #ff5252;
-}
-
-.form-input:not(:placeholder-shown):invalid:focus {
-  background: white; 
-  box-shadow: 0 0 0 .1rem rgba(255, 82, 82, .2);
-}
-
-.form-input:not(:placeholder-shown):invalid + .form-input-hint {
-  color: #ff5252;
-}
-
-.form-input:disabled,
-.form-input.disabled,
-.form-select:disabled,
-.form-select.disabled {
-  background-color: #f7f7f7;
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.form-input[readonly] {
-  background-color: white;
-}
-
-input:disabled + .form-icon,
-input.disabled + .form-icon {
-  background: #f7f7f7;
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.form-switch input:disabled + .form-icon::before,
-.form-switch input.disabled + .form-icon::before {
-  background: #fff;
-}
-
-.form-horizontal {
-  padding: .4rem 0;
-}
-
-.form-horizontal .form-group {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.form-inline {
-  display: inline-block;
-}
-
-.label {
-  background: #f7f7f7;
-  border-radius: .1rem;
-  color: #0747b5;
-  display: inline-block; 
-  line-height: 1.25;
-  padding: .1rem .2rem;
-}
-
-.label.label-rounded {
-  border-radius: 5rem;
-  padding-left: .4rem;
-  padding-right: .4rem;
-}
-
-.label.label-primary {
-  background: #448aff;
-  color: #fff;
-}
-
-.label.label-secondary {
-  background: white;
-  color: #448aff;
-}
-
-.label.label-success {
-  background: #448aff;
-  color: #fff;
-}
-
-.label.label-warning {
-  background: #ff5252;
-  color: #fff;
-}
-
-.label.label-error {
-  background: #ff5252;
-  color: #fff;
-}
-
-code {
-  background: #fcf2f2;
-  border-radius: .1rem;
-  color: #d73e48;
-  font-size: 85%; 
-  line-height: 1.25;
-  padding: .1rem .2rem;
-}
-
-.code {
-  border-radius: .1rem;
-  color: #063e9d;
-  position: relative;
-}
-
-.code::before {
-  color: #a6c6fc;
-  content: attr(data-lang);
-  font-size: .7rem;
-  position: absolute;
-  right: .4rem;
-  top: .1rem;
-}
-
-.code code {
-  background: white;
-  color: inherit;
-  display: block;
-  line-height: 1.5;
-  overflow-x: auto;
-  padding: 1rem;
-  width: 100%;
-}
-
-.img-responsive {
-  display: block;
-  height: auto;
-  max-width: 100%;
-}
-
-.img-fit-cover {
-  object-fit: cover;
-}
-
-.img-fit-contain {
-  object-fit: contain;
-}
-
-.video-responsive {
-  display: block;
-  overflow: hidden;
-  padding: 0;
-  position: relative;
-  width: 100%;
-}
-
-.video-responsive::before {
-  content: "";
-  display: block;
-  padding-bottom: 56.25%;
-}
-
-.video-responsive iframe,
-.video-responsive object,
-.video-responsive embed {
-  border: 0;
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100%;
-}
-
-video.video-responsive {
-  height: auto;
-  max-width: 100%;
-}
-
-video.video-responsive::before {
-  content: none;
-}
-
-.video-responsive-4-3::before {
-  padding-bottom: 75%;
-}
-
-.video-responsive-1-1::before {
-  padding-bottom: 100%;
-}
-
-.figure {
-  margin: 0 0 .4rem 0;
-}
-
-.figure .figure-caption {
-  color: #1267f6;
-  margin-top: .4rem;
-}
-
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: .4rem;
-  padding-right: .4rem;
-  width: 100%;
-}
-
-.container.grid-xl {
-  max-width: 1296px;
-}
-
-.container.grid-lg {
-  max-width: 976px;
-}
-
-.container.grid-md {
-  max-width: 856px;
-}
-
-.container.grid-sm {
-  max-width: 616px;
-}
-
-.container.grid-xs {
-  max-width: 496px;
-}
-
-.show-xs,
-.show-sm,
-.show-md,
-.show-lg,
-.show-xl {
-  display: none !important;
-}
-
-.columns {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-left: -.4rem;
-  margin-right: -.4rem;
-}
-
-.columns.col-gapless {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.columns.col-gapless > .column {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.columns.col-oneline {
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-}
-
-.column {
-  -ms-flex: 1;
-  flex: 1;
-  max-width: 100%;
-  padding-left: .4rem;
-  padding-right: .4rem;
-}
-
-.column.col-12,
-.column.col-11,
-.column.col-10,
-.column.col-9,
-.column.col-8,
-.column.col-7,
-.column.col-6,
-.column.col-5,
-.column.col-4,
-.column.col-3,
-.column.col-2,
-.column.col-1,
-.column.col-auto {
-  -ms-flex: none;
-  flex: none;
-}
-
-.col-12 {
-  width: 100%;
-}
-
-.col-11 {
-  width: 91.66666667%;
-}
-
-.col-10 {
-  width: 83.33333333%;
-}
-
-.col-9 {
-  width: 75%;
-}
-
-.col-8 {
-  width: 66.66666667%;
-}
-
-.col-7 {
-  width: 58.33333333%;
-}
-
-.col-6 {
-  width: 50%;
-}
-
-.col-5 {
-  width: 41.66666667%;
-}
-
-.col-4 {
-  width: 33.33333333%;
-}
-
-.col-3 {
-  width: 25%;
-}
-
-.col-2 {
-  width: 16.66666667%;
-}
-
-.col-1 {
-  width: 8.33333333%;
-}
-
-.col-auto {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  max-width: none;
-  width: auto;
-}
-
-.col-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.col-ml-auto {
-  margin-left: auto;
-}
-
-.col-mr-auto {
-  margin-right: auto;
-}
-
-@media (max-width: 1280px) {
-  .col-xl-12,
-  .col-xl-11,
-  .col-xl-10,
-  .col-xl-9,
-  .col-xl-8,
-  .col-xl-7,
-  .col-xl-6,
-  .col-xl-5,
-  .col-xl-4,
-  .col-xl-3,
-  .col-xl-2,
-  .col-xl-1,
-  .col-xl-auto {
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-xl-12 {
-    width: 100%;
-  }
-  .col-xl-11 {
-    width: 91.66666667%;
-  }
-  .col-xl-10 {
-    width: 83.33333333%;
-  }
-  .col-xl-9 {
-    width: 75%;
-  }
-  .col-xl-8 {
-    width: 66.66666667%;
-  }
-  .col-xl-7 {
-    width: 58.33333333%;
-  }
-  .col-xl-6 {
-    width: 50%;
-  }
-  .col-xl-5 {
-    width: 41.66666667%;
-  }
-  .col-xl-4 {
-    width: 33.33333333%;
-  }
-  .col-xl-3 {
-    width: 25%;
-  }
-  .col-xl-2 {
-    width: 16.66666667%;
-  }
-  .col-xl-1 {
-    width: 8.33333333%;
-  }
-  .col-xl-auto {
-    width: auto;
-  }
-  .hide-xl {
-    display: none !important;
-  }
-  .show-xl {
-    display: block !important;
-  }
-}
-
-@media (max-width: 960px) {
-  .col-lg-12,
-  .col-lg-11,
-  .col-lg-10,
-  .col-lg-9,
-  .col-lg-8,
-  .col-lg-7,
-  .col-lg-6,
-  .col-lg-5,
-  .col-lg-4,
-  .col-lg-3,
-  .col-lg-2,
-  .col-lg-1,
-  .col-lg-auto {
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-lg-12 {
-    width: 100%;
-  }
-  .col-lg-11 {
-    width: 91.66666667%;
-  }
-  .col-lg-10 {
-    width: 83.33333333%;
-  }
-  .col-lg-9 {
-    width: 75%;
-  }
-  .col-lg-8 {
-    width: 66.66666667%;
-  }
-  .col-lg-7 {
-    width: 58.33333333%;
-  }
-  .col-lg-6 {
-    width: 50%;
-  }
-  .col-lg-5 {
-    width: 41.66666667%;
-  }
-  .col-lg-4 {
-    width: 33.33333333%;
-  }
-  .col-lg-3 {
-    width: 25%;
-  }
-  .col-lg-2 {
-    width: 16.66666667%;
-  }
-  .col-lg-1 {
-    width: 8.33333333%;
-  }
-  .col-lg-auto {
-    width: auto;
-  }
-  .hide-lg {
-    display: none !important;
-  }
-  .show-lg {
-    display: block !important;
-  }
-}
-
-@media (max-width: 840px) {
-  .col-md-12,
-  .col-md-11,
-  .col-md-10,
-  .col-md-9,
-  .col-md-8,
-  .col-md-7,
-  .col-md-6,
-  .col-md-5,
-  .col-md-4,
-  .col-md-3,
-  .col-md-2,
-  .col-md-1,
-  .col-md-auto {
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-md-12 {
-    width: 100%;
-  }
-  .col-md-11 {
-    width: 91.66666667%;
-  }
-  .col-md-10 {
-    width: 83.33333333%;
-  }
-  .col-md-9 {
-    width: 75%;
-  }
-  .col-md-8 {
-    width: 66.66666667%;
-  }
-  .col-md-7 {
-    width: 58.33333333%;
-  }
-  .col-md-6 {
-    width: 50%;
-  }
-  .col-md-5 {
-    width: 41.66666667%;
-  }
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-  .col-md-3 {
-    width: 25%;
-  }
-  .col-md-2 {
-    width: 16.66666667%;
-  }
-  .col-md-1 {
-    width: 8.33333333%;
-  }
-  .col-md-auto {
-    width: auto;
-  }
-  .hide-md {
-    display: none !important;
-  }
-  .show-md {
-    display: block !important;
-  }
-}
-
-@media (max-width: 600px) {
-  .col-sm-12,
-  .col-sm-11,
-  .col-sm-10,
-  .col-sm-9,
-  .col-sm-8,
-  .col-sm-7,
-  .col-sm-6,
-  .col-sm-5,
-  .col-sm-4,
-  .col-sm-3,
-  .col-sm-2,
-  .col-sm-1,
-  .col-sm-auto {
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-sm-12 {
-    width: 100%;
-  }
-  .col-sm-11 {
-    width: 91.66666667%;
-  }
-  .col-sm-10 {
-    width: 83.33333333%;
-  }
-  .col-sm-9 {
-    width: 75%;
-  }
-  .col-sm-8 {
-    width: 66.66666667%;
-  }
-  .col-sm-7 {
-    width: 58.33333333%;
-  }
-  .col-sm-6 {
-    width: 50%;
-  }
-  .col-sm-5 {
-    width: 41.66666667%;
-  }
-  .col-sm-4 {
-    width: 33.33333333%;
-  }
-  .col-sm-3 {
-    width: 25%;
-  }
-  .col-sm-2 {
-    width: 16.66666667%;
-  }
-  .col-sm-1 {
-    width: 8.33333333%;
-  }
-  .col-sm-auto {
-    width: auto;
-  }
-  .hide-sm {
-    display: none !important;
-  }
-  .show-sm {
-    display: block !important;
-  }
-}
-
-@media (max-width: 480px) {
-  .col-xs-12,
-  .col-xs-11,
-  .col-xs-10,
-  .col-xs-9,
-  .col-xs-8,
-  .col-xs-7,
-  .col-xs-6,
-  .col-xs-5,
-  .col-xs-4,
-  .col-xs-3,
-  .col-xs-2,
-  .col-xs-1,
-  .col-xs-auto {
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-xs-12 {
-    width: 100%;
-  }
-  .col-xs-11 {
-    width: 91.66666667%;
-  }
-  .col-xs-10 {
-    width: 83.33333333%;
-  }
-  .col-xs-9 {
-    width: 75%;
-  }
-  .col-xs-8 {
-    width: 66.66666667%;
-  }
-  .col-xs-7 {
-    width: 58.33333333%;
-  }
-  .col-xs-6 {
-    width: 50%;
-  }
-  .col-xs-5 {
-    width: 41.66666667%;
-  }
-  .col-xs-4 {
-    width: 33.33333333%;
-  }
-  .col-xs-3 {
-    width: 25%;
-  }
-  .col-xs-2 {
-    width: 16.66666667%;
-  }
-  .col-xs-1 {
-    width: 8.33333333%;
-  }
-  .col-xs-auto {
-    width: auto;
-  }
-  .hide-xs {
-    display: none !important;
-  }
-  .show-xs {
-    display: block !important;
-  }
-}
-
-.hero {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  padding-bottom: 4rem;
-  padding-top: 4rem;
-}
-
-.hero.hero-sm {
-  padding-bottom: 2rem;
-  padding-top: 2rem;
-}
-
-.hero.hero-lg {
-  padding-bottom: 8rem;
-  padding-top: 8rem;
-}
-
-.hero .hero-body {
-  padding: .4rem;
-}
-
-.navbar {
-  align-items: stretch;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: stretch;
-  -ms-flex-pack: justify;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.navbar .navbar-section {
-  align-items: center;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex: 1 0 0;
-  flex: 1 0 0; 
-  -ms-flex-align: center;
-}
-
-.navbar .navbar-section:not(:first-child):last-child {
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.navbar .navbar-center {
-  align-items: center;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto; 
-  -ms-flex-align: center;
-}
-
-.navbar .navbar-brand {
-  font-size: .9rem;
-  text-decoration: none;
-}
-
-.accordion input:checked ~ .accordion-header .icon,
-.accordion[open] .accordion-header .icon {
-  transform: rotate(90deg);
-}
-
-.accordion input:checked ~ .accordion-body,
-.accordion[open] .accordion-body {
-  max-height: 50rem;
-}
-
-.accordion .accordion-header {
-  display: block;
-  padding: .2rem .4rem;
-}
-
-.accordion .accordion-header .icon {
-  transition: transform .25s;
-}
-
-.accordion .accordion-body {
-  margin-bottom: .4rem;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height .25s;
-}
-
-summary.accordion-header::-webkit-details-marker {
-  display: none;
-}
-
-.avatar {
-  background: #448aff;
-  border-radius: 50%;
-  color: rgba(255, 255, 255, .85);
-  display: inline-block;
-  font-size: .8rem;
-  font-weight: 300;
-  height: 1.6rem;
-  line-height: 1.25;
-  margin: 0;
-  position: relative;
-  vertical-align: middle; 
-  width: 1.6rem;
-}
-
-.avatar.avatar-xs {
-  font-size: .4rem;
-  height: .8rem;
-  width: .8rem;
-}
-
-.avatar.avatar-sm {
-  font-size: .6rem;
-  height: 1.2rem;
-  width: 1.2rem;
-}
-
-.avatar.avatar-lg {
-  font-size: 1.2rem;
-  height: 2.4rem;
-  width: 2.4rem;
-}
-
-.avatar.avatar-xl {
-  font-size: 1.6rem;
-  height: 3.2rem;
-  width: 3.2rem;
-}
-
-.avatar img {
-  border-radius: 50%;
-  height: 100%;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-}
-
-.avatar .avatar-icon,
-.avatar .avatar-presence {
-  background: #fff;
-  bottom: 14.64%;
-  height: 50%;
-  padding: .1rem;
-  position: absolute;
-  right: 14.64%;
-  transform: translate(50%, 50%);
-  width: 50%;
-  z-index: 2;
-}
-
-.avatar .avatar-presence {
-  background: #a6c6fc;
-  border-radius: 50%;
-  box-shadow: 0 0 0 .1rem #fff;
-  height: .5em;
-  width: .5em;
-}
-
-.avatar .avatar-presence.online {
-  background: #448aff;
-}
-
-.avatar .avatar-presence.busy {
-  background: #ff5252;
-}
-
-.avatar .avatar-presence.away {
-  background: #ff5252;
-}
-
-.avatar[data-initial]::before {
-  color: currentColor;
-  content: attr(data-initial);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-}
-
-.badge {
-  position: relative;
-  white-space: nowrap;
-}
-
-.badge[data-badge]::after,
-.badge:not([data-badge])::after {
-  background: #448aff;
-  background-clip: padding-box;
-  border-radius: .5rem;
-  box-shadow: 0 0 0 .1rem #fff;
-  color: #fff;
-  content: attr(data-badge);
-  display: inline-block;
-  transform: translate(-.05rem, -.5rem);
-}
-
-.badge[data-badge]::after {
-  font-size: .7rem;
-  height: .9rem;
-  line-height: 1;
-  min-width: .9rem;
-  padding: .1rem .2rem;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.badge:not([data-badge])::after,
-.badge[data-badge=""]::after {
-  height: 6px;
-  min-width: 6px;
-  padding: 0;
-  width: 6px;
-}
-
-.badge.btn::after {
-  position: absolute;
-  right: 0;
-  top: 0;
-  transform: translate(50%, -50%);
-}
-
-.badge.avatar::after {
-  position: absolute;
-  right: 14.64%;
-  top: 14.64%;
-  transform: translate(50%, -50%);
-  z-index: 100;
-}
-
-.breadcrumb {
-  list-style: none;
-  margin: .2rem 0;
-  padding: .2rem 0;
-}
-
-.breadcrumb .breadcrumb-item {
-  color: #1267f6;
-  display: inline-block;
-  margin: 0;
-  padding: .2rem 0;
-}
-
-.breadcrumb .breadcrumb-item:not(:last-child) {
-  margin-right: .2rem;
-}
-
-.breadcrumb .breadcrumb-item:not(:last-child) a {
-  color: #1267f6;
-}
-
-.breadcrumb .breadcrumb-item:not(:first-child)::before {
-  color: #1267f6;
-  content: "/";
-  padding-right: .4rem;
-}
-
-.bar {
-  background: #f7f7f7;
-  border-radius: .1rem;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  height: .8rem;
-  width: 100%;
-}
-
-.bar.bar-sm {
-  height: .2rem;
-}
-
-.bar .bar-item {
-  background: #448aff;
-  color: #fff;
-  display: block;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-size: .7rem;
-  height: 100%;
-  line-height: .8rem;
-  position: relative;
-  text-align: center;
-  width: 0;
-}
-
-.bar .bar-item:first-child {
-  border-bottom-left-radius: .1rem;
-  border-top-left-radius: .1rem;
-}
-
-.bar .bar-item:last-child {
-  border-bottom-right-radius: .1rem;
-  border-top-right-radius: .1rem;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-}
-
-.bar-slider {
-  height: .1rem;
-  margin: .4rem 0;
-  position: relative;
-}
-
-.bar-slider .bar-item {
-  left: 0;
-  padding: 0;
-  position: absolute;
-}
-
-.bar-slider .bar-item:not(:last-child):first-child {
-  background: #f7f7f7;
-  z-index: 1;
-}
-
-.bar-slider .bar-slider-btn {
-  background: #448aff;
-  border: 0;
-  border-radius: 50%;
-  height: .6rem;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translate(50%, -50%);
-  width: .6rem;
-}
-
-.bar-slider .bar-slider-btn:active {
-  box-shadow: 0 0 0 .1rem #448aff;
-}
-
-.card {
-  background: #fff;
-  border: .05rem solid #d7e5fd;
-  border-radius: .1rem;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.card .card-header,
-.card .card-body,
-.card .card-footer {
-  padding: .8rem;
-  padding-bottom: 0;
-}
-
-.card .card-header:last-child,
-.card .card-body:last-child,
-.card .card-footer:last-child {
-  padding-bottom: .8rem;
-}
-
-.card .card-body {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-.card .card-image {
-  padding-top: .8rem;
-}
-
-.card .card-image:first-child {
-  padding-top: 0;
-}
-
-.card .card-image:first-child img {
-  border-top-left-radius: .1rem;
-  border-top-right-radius: .1rem;
-}
-
-.card .card-image:last-child img {
-  border-bottom-left-radius: .1rem;
-  border-bottom-right-radius: .1rem;
-}
-
-.chip {
-  align-items: center;
-  background: #f7f7f7;
-  border-radius: 5rem;
-  display: inline-flex;
-  display: -ms-inline-flexbox;
-  -ms-flex-align: center;
-  font-size: 90%;
-  height: 1.2rem;
-  line-height: .8rem;
-  margin: .1rem;
-  max-width: 320px;
-  overflow: hidden;
-  padding: .2rem .4rem;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.chip.active {
-  background: #448aff;
-  color: #fff;
-}
-
-.chip .avatar {
-  margin-left: -.4rem;
-  margin-right: .2rem;
-}
-
-.chip .btn-clear {
-  border-radius: 50%;
-  transform: scale(.75);
-}
-
-.dropdown {
-  display: inline-block;
-  position: relative;
-}
-
-.dropdown .menu {
-  animation: slide-down .15s ease 1;
-  display: none;
-  left: 0;
-  max-height: 50vh;
-  overflow-y: auto;
-  position: absolute;
-  top: 100%;
-}
-
-.dropdown.dropdown-right .menu {
-  left: auto;
-  right: 0;
-}
-
-.dropdown.active .menu,
-.dropdown .dropdown-toggle:focus + .menu,
-.dropdown .menu:hover {
-  display: block;
-}
-
-.dropdown .btn-group .dropdown-toggle:nth-last-child(2) {
-  border-bottom-right-radius: .1rem;
-  border-top-right-radius: .1rem;
-}
-
-.empty {
-  background: white;
-  border-radius: .1rem;
-  color: #1267f6;
-  padding: 3.2rem 1.6rem; 
-  text-align: center;
-}
-
-.empty .empty-icon {
-  margin-bottom: .8rem;
-}
-
-.empty .empty-title,
-.empty .empty-subtitle {
-  margin: .4rem auto;
-}
-
-.empty .empty-action {
-  margin-top: .8rem;
-}
-
-.menu {
-  background: #fff;
-  border-radius: .1rem;
-  box-shadow: 0 .05rem .2rem rgba(5, 52, 132, .3);
-  list-style: none;
-  margin: 0;
-  min-width: 180px;
-  padding: .4rem;
-  transform: translateY(.2rem);
-  z-index: 300;
-}
-
-.menu.menu-nav {
-  background: transparent;
-  box-shadow: none;
-}
-
-.menu .menu-item {
-  margin-top: 0;
-  padding: 0 .4rem;
-  position: relative;
-  text-decoration: none;
-}
-
-.menu .menu-item > a {
-  border-radius: .1rem;
-  color: inherit;
-  display: block;
-  margin: 0 -.4rem;
-  padding: .2rem .4rem;
-  text-decoration: none;
-}
-
-.menu .menu-item > a:focus,
-.menu .menu-item > a:hover {
-  background: white;
-  color: #448aff;
-}
-
-.menu .menu-item > a:active,
-.menu .menu-item > a.active {
-  background: white;
-  color: #448aff;
-}
-
-.menu .menu-item .form-checkbox,
-.menu .menu-item .form-radio,
-.menu .menu-item .form-switch {
-  margin: .1rem 0;
-}
-
-.menu .menu-item + .menu-item {
-  margin-top: .2rem;
-}
-
-.menu .menu-badge {
-  align-items: center;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.menu .menu-badge .label {
-  margin-right: .4rem;
-}
-
-.modal {
-  align-items: center;
-  bottom: 0;
-  display: none;
-  -ms-flex-align: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  left: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: .4rem;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-.modal:target,
-.modal.active {
-  display: flex;
-  display: -ms-flexbox;
-  opacity: 1;
-  z-index: 400;
-}
-
-.modal:target .modal-overlay,
-.modal.active .modal-overlay {
-  background: rgba(255, 255, 255, .75);
-  bottom: 0;
-  cursor: default;
-  display: block;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.modal:target .modal-container,
-.modal.active .modal-container {
-  animation: slide-down .2s ease 1;
-  z-index: 1;
-}
-
-.modal.modal-sm .modal-container {
-  max-width: 320px;
-  padding: 0 .4rem;
-}
-
-.modal.modal-lg .modal-overlay {
-  background: #fff;
-}
-
-.modal.modal-lg .modal-container {
-  box-shadow: none;
-  max-width: 960px;
-}
-
-.modal-container {
-  background: #fff;
-  border-radius: .1rem;
-  box-shadow: 0 .2rem .5rem rgba(5, 52, 132, .3);
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  max-height: 75vh;
-  max-width: 640px;
-  padding: 0 .8rem;
-  width: 100%;
-}
-
-.modal-container.modal-fullheight {
-  max-height: 100vh;
-}
-
-.modal-container .modal-header {
-  color: #053484;
-  padding: .8rem;
-}
-
-.modal-container .modal-body {
-  overflow-y: auto;
-  padding: .8rem;
-  position: relative;
-}
-
-.modal-container .modal-footer {
-  padding: .8rem;
-  text-align: right;
-}
-
-.nav {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  list-style: none;
-  margin: .2rem 0;
-}
-
-.nav .nav-item a {
-  color: #1267f6;
-  padding: .2rem .4rem;
-  text-decoration: none;
-}
-
-.nav .nav-item a:focus,
-.nav .nav-item a:hover {
-  color: #448aff;
-}
-
-.nav .nav-item.active > a {
-  color: #0851ce;
-  font-weight: bold;
-}
-
-.nav .nav-item.active > a:focus,
-.nav .nav-item.active > a:hover {
-  color: #448aff;
-}
-
-.nav .nav {
-  margin-bottom: .4rem;
-  margin-left: .8rem;
-}
-
-.pagination {
-  display: flex;
-  display: -ms-flexbox;
-  list-style: none;
-  margin: .2rem 0;
-  padding: .2rem 0;
-}
-
-.pagination .page-item {
-  margin: .2rem .05rem;
-}
-
-.pagination .page-item span {
-  display: inline-block;
-  padding: .2rem .2rem;
-}
-
-.pagination .page-item a {
-  border-radius: .1rem;
-  display: inline-block;
-  padding: .2rem .4rem;
-  text-decoration: none;
-}
-
-.pagination .page-item a:focus,
-.pagination .page-item a:hover {
-  color: #448aff;
-}
-
-.pagination .page-item.disabled a {
-  cursor: default;
-  opacity: .5;
-  pointer-events: none;
-}
-
-.pagination .page-item.active a {
-  background: #448aff;
-  color: #fff;
-}
-
-.pagination .page-item.page-prev,
-.pagination .page-item.page-next {
-  -ms-flex: 1 0 50%;
-  flex: 1 0 50%;
-}
-
-.pagination .page-item.page-next {
-  text-align: right;
-}
-
-.pagination .page-item .page-item-title {
-  margin: 0;
-}
-
-.pagination .page-item .page-item-subtitle {
-  margin: 0;
-  opacity: .5;
-}
-
-.panel {
-  border: .05rem solid #d7e5fd;
-  border-radius: .1rem;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.panel .panel-header,
-.panel .panel-footer {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding: .8rem;
-}
-
-.panel .panel-nav {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-
-.panel .panel-body {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: 0 .8rem;
-}
-
-.popover {
-  display: inline-block;
-  position: relative;
-}
-
-.popover .popover-container {
-  left: 50%;
-  opacity: 0;
-  padding: .4rem;
-  position: absolute;
-  top: 0;
-  transform: translate(-50%, -50%) scale(0);
-  transition: transform .2s;
-  width: 320px;
-  z-index: 300;
-}
-
-.popover *:focus + .popover-container,
-.popover:hover .popover-container {
-  display: block;
-  opacity: 1;
-  transform: translate(-50%, -100%) scale(1);
-}
-
-.popover.popover-right .popover-container {
-  left: 100%;
-  top: 50%;
-}
-
-.popover.popover-right *:focus + .popover-container,
-.popover.popover-right:hover .popover-container {
-  transform: translate(0, -50%) scale(1);
-}
-
-.popover.popover-bottom .popover-container {
-  left: 50%;
-  top: 100%;
-}
-
-.popover.popover-bottom *:focus + .popover-container,
-.popover.popover-bottom:hover .popover-container {
-  transform: translate(-50%, 0) scale(1);
-}
-
-.popover.popover-left .popover-container {
-  left: 0;
-  top: 50%;
-}
-
-.popover.popover-left *:focus + .popover-container,
-.popover.popover-left:hover .popover-container {
-  transform: translate(-100%, -50%) scale(1);
-}
-
-.popover .card {
-  border: 0; 
-  box-shadow: 0 .2rem .5rem rgba(5, 52, 132, .3);
-}
-
-.step {
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  list-style: none;
-  margin: .2rem 0;
-  width: 100%;
-}
-
-.step .step-item {
-  -ms-flex: 1 1 0;
-  flex: 1 1 0;
-  margin-top: 0;
-  min-height: 1rem;
-  position: relative; 
-  text-align: center;
-}
-
-.step .step-item:not(:first-child)::before {
-  background: #448aff;
-  content: "";
-  height: 2px;
-  left: -50%;
-  position: absolute;
-  top: 9px;
-  width: 100%;
-}
-
-.step .step-item a {
-  color: #448aff;
-  display: inline-block;
-  padding: 20px 10px 0;
-  text-decoration: none;
-}
-
-.step .step-item a::before {
-  background: #448aff;
-  border: .1rem solid #fff;
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: .6rem;
-  left: 50%;
-  position: absolute;
-  top: .2rem;
-  transform: translateX(-50%);
-  width: .6rem;
-  z-index: 1;
-}
-
-.step .step-item.active a::before {
-  background: #fff;
-  border: .1rem solid #448aff;
-}
-
-.step .step-item.active ~ .step-item::before {
-  background: #d7e5fd;
-}
-
-.step .step-item.active ~ .step-item a {
-  color: #a6c6fc;
-}
-
-.step .step-item.active ~ .step-item a::before {
-  background: #d7e5fd;
-}
-
-.tab {
-  align-items: center;
-  border-bottom: .05rem solid #d7e5fd;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: .2rem 0 .15rem 0;
-}
-
-.tab .tab-item {
-  margin-top: 0;
-}
-
-.tab .tab-item a {
-  border-bottom: .1rem solid transparent;
-  color: inherit;
-  display: block;
-  margin: 0 .4rem 0 0;
-  padding: .4rem .2rem .3rem .2rem;
-  text-decoration: none;
-}
-
-.tab .tab-item a:focus,
-.tab .tab-item a:hover {
-  color: #448aff;
-}
-
-.tab .tab-item.active a,
-.tab .tab-item a.active {
-  border-bottom-color: #448aff;
-  color: #448aff;
-}
-
-.tab .tab-item.tab-action {
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  text-align: right;
-}
-
-.tab .tab-item .btn-clear {
-  margin-top: -.2rem;
-}
-
-.tab.tab-block .tab-item {
-  -ms-flex: 1 0 0;
-  flex: 1 0 0;
-  text-align: center;
-}
-
-.tab.tab-block .tab-item a {
-  margin: 0;
-}
-
-.tab.tab-block .tab-item .badge[data-badge]::after {
-  position: absolute;
-  right: .1rem;
-  top: .1rem;
-  transform: translate(0, 0);
-}
-
-.tab:not(.tab-block) .badge {
-  padding-right: 0;
-}
-
-.tile {
-  align-content: space-between;
-  align-items: flex-start;
-  display: flex; 
-  display: -ms-flexbox;
-  -ms-flex-align: start;
-  -ms-flex-line-pack: justify;
-}
-
-.tile .tile-icon,
-.tile .tile-action {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-
-.tile .tile-content {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-.tile .tile-content:not(:first-child) {
-  padding-left: .4rem;
-}
-
-.tile .tile-content:not(:last-child) {
-  padding-right: .4rem;
-}
-
-.tile .tile-title,
-.tile .tile-subtitle {
-  line-height: 1.2rem;
-}
-
-.tile.tile-centered {
-  align-items: center; 
-  -ms-flex-align: center;
-}
-
-.tile.tile-centered .tile-content {
-  overflow: hidden;
-}
-
-.tile.tile-centered .tile-title,
-.tile.tile-centered .tile-subtitle {
-  margin-bottom: 0; 
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.toast {
-  background: rgba(5, 52, 132, .95);
-  border: .05rem solid #053484;
-  border-color: #053484;
-  border-radius: .1rem;
-  color: #fff;
-  display: block;
-  padding: .4rem;
-  width: 100%;
-}
-
-.toast.toast-primary {
-  background: rgba(68, 138, 255, .95);
-  border-color: #448aff;
-}
-
-.toast.toast-success {
-  background: rgba(68, 138, 255, .95);
-  border-color: #448aff;
-}
-
-.toast.toast-warning {
-  background: rgba(255, 82, 82, .95);
-  border-color: #ff5252;
-}
-
-.toast.toast-error {
-  background: rgba(255, 82, 82, .95);
-  border-color: #ff5252;
-}
-
-.toast a {
-  color: #fff;
-  text-decoration: underline;
-}
-
-.toast a:focus,
-.toast a:hover,
-.toast a:active,
-.toast a.active {
-  opacity: .75;
-}
-
-.toast .btn-clear {
-  margin: .1rem;
-}
-
-.toast p:last-child {
-  margin-bottom: 0;
-}
-
-.tooltip {
-  position: relative;
-}
-
-.tooltip::after {
-  background: rgba(5, 52, 132, .95);
-  border-radius: .1rem;
-  bottom: 100%;
-  color: #fff;
-  content: attr(data-tooltip);
-  display: block;
-  font-size: .7rem;
-  left: 50%;
-  max-width: 320px;
-  opacity: 0;
-  overflow: hidden;
-  padding: .2rem .4rem;
-  pointer-events: none;
-  position: absolute;
-  text-overflow: ellipsis;
-  transform: translate(-50%, .4rem);
-  transition: opacity .2s, transform .2s;
-  white-space: pre;
-  z-index: 300;
-}
-
-.tooltip:focus::after,
-.tooltip:hover::after {
-  opacity: 1;
-  transform: translate(-50%, -.2rem);
-}
-
-.tooltip[disabled],
-.tooltip.disabled {
-  pointer-events: auto;
-}
-
-.tooltip.tooltip-right::after {
-  bottom: 50%;
-  left: 100%;
-  transform: translate(-.2rem, 50%);
-}
-
-.tooltip.tooltip-right:focus::after,
-.tooltip.tooltip-right:hover::after {
-  transform: translate(.2rem, 50%);
-}
-
-.tooltip.tooltip-bottom::after {
-  bottom: auto;
-  top: 100%;
-  transform: translate(-50%, -.4rem);
-}
-
-.tooltip.tooltip-bottom:focus::after,
-.tooltip.tooltip-bottom:hover::after {
-  transform: translate(-50%, .2rem);
-}
-
-.tooltip.tooltip-left::after {
-  bottom: 50%;
-  left: auto;
-  right: 100%;
-  transform: translate(.4rem, 50%);
-}
-
-.tooltip.tooltip-left:focus::after,
-.tooltip.tooltip-left:hover::after {
-  transform: translate(-.2rem, 50%);
-}
-
-@keyframes loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes slide-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-1.6rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.text-primary {
-  color: #448aff !important;
-}
-
-a.text-primary:focus,
-a.text-primary:hover {
-  color: #2b7aff;
-}
-
-a.text-primary:visited {
-  color: #5e9aff;
-}
-
-.text-secondary {
-  color: #f7f7f7 !important;
-}
-
-a.text-secondary:focus,
-a.text-secondary:hover {
-  color: #ebebeb;
-}
-
-a.text-secondary:visited {
-  color: white;
-}
-
-.text-gray {
-  color: #a6c6fc !important;
-}
-
-a.text-gray:focus,
-a.text-gray:hover {
-  color: #8db6fb;
-}
-
-a.text-gray:visited {
-  color: #bed5fd;
-}
-
-.text-light {
-  color: #fff !important;
-}
-
-a.text-light:focus,
-a.text-light:hover {
-  color: #f2f2f2;
-}
-
-a.text-light:visited {
-  color: white;
-}
-
-.text-dark {
-  color: #063e9d !important;
-}
-
-a.text-dark:focus,
-a.text-dark:hover {
-  color: #053484;
-}
-
-a.text-dark:visited {
-  color: #0747b5;
-}
-
-.text-success {
-  color: #448aff !important;
-}
-
-a.text-success:focus,
-a.text-success:hover {
-  color: #2b7aff;
-}
-
-a.text-success:visited {
-  color: #5e9aff;
-}
-
-.text-warning {
-  color: #ff5252 !important;
-}
-
-a.text-warning:focus,
-a.text-warning:hover {
-  color: #ff3939;
-}
-
-a.text-warning:visited {
-  color: #ff6c6c;
-}
-
-.text-error {
-  color: #ff5252 !important;
-}
-
-a.text-error:focus,
-a.text-error:hover {
-  color: #ff3939;
-}
-
-a.text-error:visited {
-  color: #ff6c6c;
-}
-
-.bg-primary {
-  background: #448aff !important;
-}
-
-.bg-secondary {
-  background: white !important;
-}
-
-.bg-dark {
-  background: #053484 !important;
-  color: #fff;
-}
-
-.bg-gray {
-  background: white !important;
-}
-
-.bg-success {
-  background: #448aff !important;
-}
-
-.bg-warning {
-  background: #ff5252 !important;
-}
-
-.bg-error {
-  background: #ff5252 !important;
-}
-
-.c-hand {
-  cursor: pointer;
-}
-
-.c-move {
-  cursor: move;
-}
-
-.c-zoom-in {
-  cursor: zoom-in;
-}
-
-.c-zoom-out {
-  cursor: zoom-out;
-}
-
-.c-not-allowed {
-  cursor: not-allowed;
-}
-
-.c-auto {
-  cursor: auto;
-}
-
-.d-block {
-  display: block;
-}
-
-.d-inline {
-  display: inline;
-}
-
-.d-inline-block {
-  display: inline-block;
-}
-
-.d-flex {
-  display: flex; 
-  display: -ms-flexbox;
-}
-
-.d-inline-flex {
-  display: inline-flex; 
-  display: -ms-inline-flexbox;
-}
-
-.d-none,
-.d-hide {
-  display: none !important;
-}
-
-.d-visible {
-  visibility: visible;
-}
-
-.d-invisible {
-  visibility: hidden;
-}
-
-.text-hide {
-  background: transparent;
-  border: 0;
-  color: transparent;
-  font-size: 0;
-  line-height: 0;
-  text-shadow: none;
-}
-
-.text-assistive {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.divider,
-.divider-vert {
-  display: block;
-  position: relative;
-}
-
-.divider[data-content]::after,
-.divider-vert[data-content]::after {
-  background: #fff;
-  color: #a6c6fc;
-  content: attr(data-content);
-  display: inline-block;
-  font-size: .7rem;
-  padding: 0 .4rem;
-  transform: translateY(-.65rem);
-}
-
-.divider {
-  border-top: .05rem solid #feffff;
-  height: .05rem;
-  margin: .4rem 0;
-}
-
-.divider[data-content] {
-  margin: .8rem 0;
-}
-
-.divider-vert {
-  display: block;
-  padding: .8rem;
-}
-
-.divider-vert::before {
-  border-left: .05rem solid #d7e5fd;
-  bottom: .4rem;
-  content: "";
-  display: block;
-  left: 50%;
-  position: absolute;
-  top: .4rem;
-  transform: translateX(-50%);
-}
-
-.divider-vert[data-content]::after {
-  left: 50%;
-  padding: .2rem 0;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.loading {
-  color: transparent !important;
-  min-height: .8rem;
-  pointer-events: none;
-  position: relative;
-}
-
-.loading::after {
-  animation: loading 500ms infinite linear;
-  border: .1rem solid #448aff;
-  border-radius: 50%;
-  border-right-color: transparent;
-  border-top-color: transparent;
-  content: "";
-  display: block;
-  height: .8rem;
-  left: 50%;
-  margin-left: -.4rem;
-  margin-top: -.4rem;
-  position: absolute;
-  top: 50%;
-  width: .8rem;
-  z-index: 1;
-}
-
-.loading.loading-lg {
-  min-height: 2rem;
-}
-
-.loading.loading-lg::after {
-  height: 1.6rem;
-  margin-left: -.8rem;
-  margin-top: -.8rem;
-  width: 1.6rem;
-}
-
-.clearfix::after {
-  clear: both;
-  content: "";
-  display: table;
-}
-
-.float-left {
-  float: left !important;
-}
-
-.float-right {
-  float: right !important;
-}
-
-.p-relative {
-  position: relative !important;
-}
-
-.p-absolute {
-  position: absolute !important;
-}
-
-.p-fixed {
-  position: fixed !important;
-}
-
-.p-sticky {
-  position: sticky !important; 
-  position: -webkit-sticky !important;
-}
-
-.p-centered {
-  display: block;
-  float: none;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.flex-centered {
-  align-items: center;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.m-0 {
-  margin: 0 !important;
-}
-
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-
-.ml-0 {
-  margin-left: 0 !important;
-}
-
-.mr-0 {
-  margin-right: 0 !important;
-}
-
-.mt-0 {
-  margin-top: 0 !important;
-}
-
-.mx-0 {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.my-0 {
-  margin-bottom: 0 !important;
-  margin-top: 0 !important;
-}
-
-.m-1 {
-  margin: .2rem !important;
-}
-
-.mb-1 {
-  margin-bottom: .2rem !important;
-}
-
-.ml-1 {
-  margin-left: .2rem !important;
-}
-
-.mr-1 {
-  margin-right: .2rem !important;
-}
-
-.mt-1 {
-  margin-top: .2rem !important;
-}
-
-.mx-1 {
-  margin-left: .2rem !important;
-  margin-right: .2rem !important;
-}
-
-.my-1 {
-  margin-bottom: .2rem !important;
-  margin-top: .2rem !important;
-}
-
-.m-2 {
-  margin: .4rem !important;
-}
-
-.mb-2 {
-  margin-bottom: .4rem !important;
-}
-
-.ml-2 {
-  margin-left: .4rem !important;
-}
-
-.mr-2 {
-  margin-right: .4rem !important;
-}
-
-.mt-2 {
-  margin-top: .4rem !important;
-}
-
-.mx-2 {
-  margin-left: .4rem !important;
-  margin-right: .4rem !important;
-}
-
-.my-2 {
-  margin-bottom: .4rem !important;
-  margin-top: .4rem !important;
-}
-
-.p-0 {
-  padding: 0 !important;
-}
-
-.pb-0 {
-  padding-bottom: 0 !important;
-}
-
-.pl-0 {
-  padding-left: 0 !important;
-}
-
-.pr-0 {
-  padding-right: 0 !important;
-}
-
-.pt-0 {
-  padding-top: 0 !important;
-}
-
-.px-0 {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.py-0 {
-  padding-bottom: 0 !important;
-  padding-top: 0 !important;
-}
-
-.p-1 {
-  padding: .2rem !important;
-}
-
-.pb-1 {
-  padding-bottom: .2rem !important;
-}
-
-.pl-1 {
-  padding-left: .2rem !important;
-}
-
-.pr-1 {
-  padding-right: .2rem !important;
-}
-
-.pt-1 {
-  padding-top: .2rem !important;
-}
-
-.px-1 {
-  padding-left: .2rem !important;
-  padding-right: .2rem !important;
-}
-
-.py-1 {
-  padding-bottom: .2rem !important;
-  padding-top: .2rem !important;
-}
-
-.p-2 {
-  padding: .4rem !important;
-}
-
-.pb-2 {
-  padding-bottom: .4rem !important;
-}
-
-.pl-2 {
-  padding-left: .4rem !important;
-}
-
-.pr-2 {
-  padding-right: .4rem !important;
-}
-
-.pt-2 {
-  padding-top: .4rem !important;
-}
-
-.px-2 {
-  padding-left: .4rem !important;
-  padding-right: .4rem !important;
-}
-
-.py-2 {
-  padding-bottom: .4rem !important;
-  padding-top: .4rem !important;
-}
-
-.s-rounded {
-  border-radius: .1rem;
-}
-
-.s-circle {
-  border-radius: 50%;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-justify {
-  text-align: justify;
-}
-
-.text-lowercase {
-  text-transform: lowercase;
-}
-
-.text-uppercase {
-  text-transform: uppercase;
-}
-
-.text-capitalize {
-  text-transform: capitalize;
-}
-
-.text-normal {
-  font-weight: normal;
-}
-
-.text-bold {
-  font-weight: bold;
-}
-
-.text-italic {
-  font-style: italic;
-}
-
-.text-large {
-  font-size: 1.2em;
-}
-
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.text-clip {
-  overflow: hidden;
-  text-overflow: clip;
-  white-space: nowrap;
-}
-
-.text-break {
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-  word-break: break-word;
-  word-wrap: break-word;
-}
\ No newline at end of file
diff --git a/web/src/components/Imjoy.vue b/web/src/components/Imjoy.vue
index f282a49d1..c63a8176b 100644
--- a/web/src/components/Imjoy.vue
+++ b/web/src/components/Imjoy.vue
@@ -1308,7 +1308,7 @@ export default {
       if(this.plugin_dialog_promise){
         let [resolve, reject] = this.plugin_dialog_promise
         if (ok) {
-          resolve(this.$refs.plugin_dialog_joy.joy.get_config())
+          resolve()
         } else {
           reject()
         }
@@ -1549,7 +1549,14 @@ export default {
         if(config.ui){
           this.plugin_dialog_config = config
           this.showPluginDialog = true
-          this.plugin_dialog_promise = [resolve, reject]
+          this.plugin_dialog_promise = [()=>{
+              if(this.$refs.plugin_dialog_joy.joy){
+                resolve(this.$refs.plugin_dialog_joy.joy.get_config())
+              }
+              else{
+                reject('joy not found.')
+              }
+            }, reject]
         }
         else if(config.type){
           config.window_container = 'window_dialog_container'
diff --git a/web/src/pluginManager.js b/web/src/pluginManager.js
index 0fee66556..5911192a4 100644
--- a/web/src/pluginManager.js
+++ b/web/src/pluginManager.js
@@ -115,6 +115,34 @@ export class PluginManager {
     }
   }
 
+  _sendToServiceWorker(message) {
+    // This wraps the message posting/response in a promise, which will resolve if the response doesn't
+    // contain an error, and reject with the error if it does. If you'd prefer, it's possible to call
+    // controller.postMessage() and set up the onmessage handler independently of a promise, but this is
+    // a convenient wrapper.
+    return new Promise(function(resolve, reject) {
+      if (!navigator.serviceWorker || !navigator.serviceWorker.register) {
+       reject("This browser doesn't support service workers")
+       return;
+      }
+      var messageChannel = new MessageChannel();
+      messageChannel.port1.onmessage = function(event) {
+        if (event.data.error) {
+          reject(event.data.error);
+        } else {
+          resolve(event.data);
+        }
+      };
+
+      // This sends the message data as well as transferring messageChannel.port2 to the service worker.
+      // The service worker can then use the transferred port to reply via postMessage(), which
+      // will in turn trigger the onmessage handler on messageChannel.port1.
+      // See https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage
+      navigator.serviceWorker.controller.postMessage(message,
+        [messageChannel.port2]);
+    });
+  }
+
   showMessage(msg, duration){
     if(this.show_message_callback){
       this.show_message_callback(msg, duration)
@@ -807,6 +835,7 @@ export class PluginManager {
             this.installed_plugins.push(template)
             resolve(template)
             this.showMessage(`${template.name } has been successfully saved.`)
+            // this._sendToServiceWorker(template)
           }).catch((err) => {
             this.showMessage('Failed to save the plugin.', 15)
             console.error(err)
diff --git a/web/src/registerServiceWorker.js b/web/src/registerServiceWorker.js
index 76cede074..3a210f64a 100644
--- a/web/src/registerServiceWorker.js
+++ b/web/src/registerServiceWorker.js
@@ -19,8 +19,10 @@ if (process.env.NODE_ENV === 'production') {
     updatefound () {
       console.log('New content is downloading.')
     },
-    updated () {
-      console.log('New content is available; please refresh.')
+    updated (registration) {
+      console.log("New content is available; please refresh.");
+      let worker = registration.waiting
+      worker.postMessage({action: 'skipWaiting'})
     },
     offline () {
       console.log('No internet connection found. App is running in offline mode.')
diff --git a/web/src/service-worker.js b/web/src/service-worker.js
new file mode 100644
index 000000000..7c471ea04
--- /dev/null
+++ b/web/src/service-worker.js
@@ -0,0 +1,60 @@
+if (workbox) {
+    console.log(`Workbox is loaded`);
+    /**
+     * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+     * requests for URLs in the manifest.
+     * See https://goo.gl/S9QRab
+     */
+
+    // workbox.setConfig({
+    //   debug: true
+    // });
+
+    workbox.core.setCacheNameDetails({prefix: "ImJoy.io"});
+    self.__precacheManifest = [
+      '_pluginWebIframe.js',
+      '/manifest.json',
+      'https://raw.githubusercontent.com/oeway/ImJoy-Plugins/master/manifest.imjoy.json',
+      'https://raw.githubusercontent.com/oeway/ImJoy-Demo-Plugins/master/manifest.imjoy.json'
+    ].concat(self.__precacheManifest || []);
+
+    workbox.precaching.suppressWarnings();
+    workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+    workbox.routing.registerRoute(
+      new RegExp('/static/.*'),
+      new workbox.strategies.CacheFirst()
+    );
+
+    //communitations
+    workbox.routing.registerRoute(
+      new RegExp('(http|https)://.*/socket.io/.*'),
+      new workbox.strategies.NetworkOnly()
+    );
+
+    workbox.routing.registerRoute(
+      new RegExp('https://static.imjoy.io/.*'),
+      new workbox.strategies.CacheFirst()
+    );
+
+    // manifest.imjoy.json etc.
+    workbox.routing.registerRoute(
+      new RegExp('https://raw.githubusercontent.com/.*'),
+      new workbox.strategies.NetworkFirst()
+    );
+
+    workbox.routing.registerRoute(
+      new RegExp('https://gist.githubusercontent.com/.*'),
+      new workbox.strategies.NetworkFirst()
+    );
+
+    workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());
+
+    self.addEventListener("message", (e)=>{
+      if (e.data.action=='skipWaiting') self.skipWaiting()
+    })
+
+}
+else {
+    console.log(`Workbox didn't load`);
+}
diff --git a/web/vue.config.js b/web/vue.config.js
index 4c6d054ea..a34e0b69c 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -13,6 +13,14 @@ module.exports = {
     compress: true,
     port: 8000
   },
+  pwa: {
+      // configure the workbox plugin
+      workboxPluginMode: 'InjectManifest',
+      workboxOptions: {
+          // swSrc is required in InjectManifest mode.
+          swSrc: 'src/service-worker.js',
+      }
+  },
   configureWebpack: {
     module: {
       // for supressing webpack warnings