diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index eaba499..7ddda94 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -1,6 +1,10 @@
 /* Global variables. */
 :root,
 ::backdrop {
+  --quickbox-topbar-height: 50px;
+  --quickbox-footer-height: 64px;
+  --quickbox-send-width: 66px;
+
   /* Set sans-serif & mono fonts */
   --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
   "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
@@ -10,21 +14,6 @@
 
   /* Default (light) theme */
   --bg: #fff;
-  --accent-bg: #f5f7ff;
-  --text: #212121;
-  --text-light: #585858;
-  --border: #898EA4;
-  --accent: #0d47a1;
-  --accent-hover: #1266e2;
-  --accent-text: var(--bg);
-  --code: #d81b60;
-  --preformatted: #444;
-  --marked: #ffdd33;
-  --disabled: #efefef;
-/* BrainMinder */
-  --quickbox-topbar-height: 50px;
-  --quickbox-footer-height: 64px;
-  --quickbox-send-width: 66px;
   --bg-primary-color: #2b5797;
 }
 
@@ -56,974 +45,56 @@
 }
 */
 
-/* Reset box-sizing */
+/* Reset */
 *, *::before, *::after {
   box-sizing: border-box;
 }
 
-/* Reset default appearance */
-textarea,
-select,
-input,
-progress {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-html {
-  /* Set the font globally */
-  font-family: var(--sans-font), sans-serif;
-  scroll-behavior: smooth;
-}
-
-/* Make the body a nice central block */
-body {
-  color: var(--text);
-  background-color: var(--bg);
-  font-size: 0.9rem;
-  line-height: 1.5;
-  margin: 0;
-  /* BrainMinder */
-  /*
-  display: grid;
-  grid-template-columns: 1fr min(45rem, 90%) 1fr;
-  */
-  min-height: 100vh;
-}
-body > * {
-  grid-column: 2;
-}
-
-/* Make the header bg full width, but the content inline with body */
-body > header {
-  background-color: var(--accent-bg);
-  border-bottom: 1px solid var(--border);
-  text-align: center;
-  padding: 0 0.5rem 2rem 0.5rem;
-  grid-column: 1 / -1;
-}
-
-body > header > *:only-child {
-  margin-block-start: 2rem;
-}
-
-body > header h1 {
-  max-width: 1200px;
-  margin: 1rem auto;
-}
-
-body > header p {
-  max-width: 40rem;
-  margin: 1rem auto;
-}
-
-/* Add a little padding to ensure spacing is correct between content and header > nav */
-main {
-  padding-top: 1.5rem;
-}
-
-body > footer {
-  margin-top: 4rem;
-  padding: 2rem 1rem 1.5rem 1rem;
-  color: var(--text-light);
-  font-size: 0.9rem;
-  text-align: center;
-  border-top: 1px solid var(--border);
-}
-
-/* Format headers */
-h1 {
-  font-size: 3rem;
-}
-
-h2 {
-  font-size: 2.6rem;
-  margin-top: 3rem;
-}
-
-h3 {
-  font-size: 2rem;
-  margin-top: 3rem;
-}
-
-h4 {
-  font-size: 1.44rem;
-}
-
-h5 {
-  font-size: 1.15rem;
-}
-
-h6 {
-  font-size: 0.96rem;
-}
-
-p {
-  margin: 0.1rem 0;
-}
-
-/* Prevent long strings from overflowing container */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
-}
-
-/* Fix line height when title wraps */
-h1,
-h2,
-h3 {
-  line-height: 1.1;
-}
-
-/* Reduce header size on mobile */
-@media only screen and (max-width: 720px) {
-  h1 {
-    font-size: 2.5rem;
-  }
-
-  h2 {
-    font-size: 2.1rem;
-  }
-
-  h3 {
-    font-size: 1.75rem;
-  }
-
-  h4 {
-    font-size: 1.25rem;
-  }
-}
-
-/* Format links & buttons */
-/*
-BrainMinder
-a,
-a:visited {
-  color: var(--accent);
-}
-*/
-
-a:hover {
-  text-decoration: none;
-}
-
-button,
-.button,
-a.button, /* extra specificity to override a */
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-label[type="button"] {
-  border: 1px solid var(--accent);
-  background-color: var(--accent);
-  color: var(--accent-text);
-  padding: 0.5rem 0.9rem;
-  text-decoration: none;
-  line-height: normal;
-}
-
-.button[aria-disabled="true"],
-input:disabled,
-textarea:disabled,
-select:disabled,
-button[disabled] {
-  cursor: not-allowed;
-  background-color: var(--disabled);
-  border-color: var(--disabled);
-  color: var(--text-light);
-}
-
-input[type="range"] {
-  padding: 0;
-}
-
-/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
-abbr[title] {
-  cursor: help;
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-}
-
-button:enabled:hover,
-.button:not([aria-disabled="true"]):hover,
-input[type="submit"]:enabled:hover,
-input[type="reset"]:enabled:hover,
-input[type="button"]:enabled:hover,
-label[type="button"]:hover {
-  background-color: var(--accent-hover);
-  border-color: var(--accent-hover);
-  cursor: pointer;
-}
-
-.button:focus-visible,
-button:focus-visible:where(:enabled),
-input:enabled:focus-visible:where(
-  [type="submit"],
-  [type="reset"],
-  [type="button"]
-) {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-
-/* Format navigation */
-header > nav {
-  font-size: 1rem;
-  line-height: 2;
-  padding: 1rem 0 0 0;
-}
-
-/* Use flexbox to allow items to wrap, as needed */
-header > nav ul,
-header > nav ol {
-  align-content: space-around;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  list-style-type: none;
+h1,h2,h3,h4,h5,h6, form {
   margin: 0;
   padding: 0;
 }
 
-/* List items are inline elements, make them behave more like blocks */
-header > nav ul li,
-header > nav ol li {
-  display: inline-block;
-}
-
-header > nav a,
-header > nav a:visited {
-  margin: 0 0.5rem 1rem 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: var(--standard-border-radius);
-  color: var(--text);
-  display: inline-block;
-  padding: 0.1rem 1rem;
-  text-decoration: none;
-}
-
-header > nav a:hover,
-header > nav a.current,
-header > nav a[aria-current="page"],
-header > nav a[aria-current="true"] {
-  border-color: var(--accent);
-  color: var(--accent);
-  cursor: pointer;
-}
-
-/* Reduce nav side on mobile */
-@media only screen and (max-width: 720px) {
-  header > nav a {
-    border: none;
-    padding: 0;
-    text-decoration: underline;
-    line-height: 1;
-  }
-}
-
-/* Consolidate box styling */
-aside, details, pre, progress {
-  background-color: var(--accent-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--standard-border-radius);
-  margin-bottom: 1rem;
-}
-
-aside {
-  font-size: 1rem;
-  width: 30%;
-  padding: 0 15px;
-  margin-inline-start: 15px;
-  float: right;
-}
-*[dir="rtl"] aside {
-  float: left;
-}
-
-/* Make aside full-width on mobile */
-@media only screen and (max-width: 720px) {
-  aside {
-    width: 100%;
-    float: none;
-    margin-inline-start: 0;
-  }
-}
-
-article, fieldset, dialog {
-  border: 1px solid var(--border);
-  padding: 1rem;
-  border-radius: var(--standard-border-radius);
-  margin-bottom: 1rem;
-}
-
-article h2:first-child,
-section h2:first-child,
-article h3:first-child,
-section h3:first-child {
-  margin-top: 1rem;
-}
-
-section {
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-  padding: 2rem 1rem;
-  margin: 3rem 0;
-}
-
-/* Don't double separators when chaining sections */
-section + section,
-section:first-child {
-  border-top: 0;
-  padding-top: 0;
-}
-
-section + section {
-  margin-top: 0;
-}
-
-section:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-details {
-  padding: 0.7rem 1rem;
-}
-
-summary {
-  cursor: pointer;
-  font-weight: bold;
-  padding: 0.7rem 1rem;
-  margin: -0.7rem -1rem;
-  word-break: break-all;
-}
-
-details[open] > summary + * {
-  margin-top: 0;
-}
-
-details[open] > summary {
-  margin-bottom: 0.5rem;
-}
-
-details[open] > :last-child {
-  margin-bottom: 0;
-}
-
-/* Format tables */
-table {
-  border-collapse: collapse;
-  margin: 1.5rem 0;
-}
-
-figure > table {
-  width: max-content;
-  margin: 0;
-}
-
-td,
-th {
-  border: 1px solid var(--border);
-  text-align: start;
-  padding: 0.5rem;
-}
-
-th {
-  background-color: var(--accent-bg);
-  font-weight: bold;
-}
-
-tr:nth-child(even) {
-  /* Set every other cell slightly darker. Improves readability. */
-  background-color: var(--accent-bg);
-}
-
-table caption {
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-}
-
-/* Format forms */
-textarea,
-select,
-input,
-button,
-.button {
-  font-size: inherit;
-  font-family: inherit;
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-radius: var(--standard-border-radius);
-  box-shadow: none;
-  max-width: 100%;
-  display: inline-block;
-}
-textarea,
-select,
-input {
-  color: var(--text);
-  background-color: var(--bg);
-  border: 1px solid var(--border);
-}
-label {
-  display: block;
-}
-textarea:not([cols]) {
-  width: 100%;
-}
-
-/* Add arrow to drop-down */
-select:not([multiple]) {
-  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
-  linear-gradient(135deg, var(--text) 51%, transparent 49%);
-  background-position: calc(100% - 15px), calc(100% - 10px);
-  background-size: 5px 5px, 5px 5px;
-  background-repeat: no-repeat;
-  padding-inline-end: 25px;
-}
-*[dir="rtl"] select:not([multiple]) {
-  background-position: 10px, 15px;
-}
-
-/* checkbox and radio button style */
-input[type="checkbox"],
-input[type="radio"] {
-  vertical-align: middle;
-  position: relative;
-  width: min-content;
-}
-
-input[type="checkbox"] + label,
-input[type="radio"] + label {
-  display: inline-block;
-}
-
-input[type="radio"] {
-  border-radius: 100%;
-}
-
-input[type="checkbox"]:checked,
-input[type="radio"]:checked {
-  background-color: var(--accent);
-}
-
-input[type="checkbox"]:checked::after {
-  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
-  content: " ";
-  width: 0.18em;
-  height: 0.32em;
-  border-radius: 0;
-  position: absolute;
-  top: 0.05em;
-  left: 0.17em;
-  background-color: transparent;
-  border-right: solid var(--bg) 0.08em;
-  border-bottom: solid var(--bg) 0.08em;
-  font-size: 1.8em;
-  transform: rotate(45deg);
-}
-input[type="radio"]:checked::after {
-  /* creates a colored circle for the checked radio button  */
-  content: " ";
-  width: 0.25em;
-  height: 0.25em;
-  border-radius: 100%;
-  position: absolute;
-  top: 0.125em;
-  background-color: var(--bg);
-  left: 0.125em;
-  font-size: 32px;
-}
-
-/* Makes input fields wider on smaller screens */
-@media only screen and (max-width: 720px) {
-  textarea,
-  select,
-  input {
-    width: 100%;
-  }
-}
-
-/* Set a height for color input */
-input[type="color"] {
-  height: 2.5rem;
-  padding:  0.2rem;
-}
-
-/* do not show border around file selector button */
-input[type="file"] {
-  border: 0;
-}
-
-/* Misc body elements */
-hr {
-  border: none;
-  height: 1px;
-  background: var(--border);
-  margin: 1rem auto;
-}
-
-mark {
-  padding: 2px 5px;
-  border-radius: var(--standard-border-radius);
-  background-color: var(--marked);
-  color: black;
-}
-
-mark a {
-  color: #0d47a1;
-}
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--standard-border-radius);
-}
-
-figure {
-  margin: 0;
-  display: block;
-  overflow-x: auto;
-}
-
-figure > img,
-figure > picture > img {
-  display: block;
-  margin-inline: auto;
-}
-
-figcaption {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--text-light);
-  margin-block: 1rem;
-}
-
-blockquote {
-  margin-inline-start: 2rem;
-  margin-inline-end: 0;
-  margin-block: 2rem;
-  padding: 0.4rem 0.8rem;
-  border-inline-start: 0.35rem solid var(--accent);
-  color: var(--text-light);
-  font-style: italic;
-}
-
-cite {
-  font-size: 0.9rem;
-  color: var(--text-light);
-  font-style: normal;
-}
-
-dt {
-  color: var(--text-light);
-}
-
-/* Use mono font for code elements */
-/*
-BrainMinder
-code,
-pre,
-pre span,
-kbd,
-samp {
-  font-family: var(--mono-font);
-  color: var(--code);
-}
-*/
-
-
-kbd {
-  color: var(--preformatted);
-  border: 1px solid var(--preformatted);
-  border-bottom: 3px solid var(--preformatted);
-  border-radius: var(--standard-border-radius);
-  padding: 0.1rem 0.4rem;
-}
-
-pre {
-  padding: 1rem 1.4rem;
-  max-width: 100%;
-  overflow: auto;
-  color: var(--preformatted);
-}
-
-/* Fix embedded code within pre */
-pre code {
-  color: var(--preformatted);
-  background: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* Progress bars */
-/* Declarations are repeated because you */
-/* cannot combine vendor-specific selectors */
-progress {
-  width: 100%;
-}
-
-progress:indeterminate {
-  background-color: var(--accent-bg);
-}
-
-progress::-webkit-progress-bar {
-  border-radius: var(--standard-border-radius);
-  background-color: var(--accent-bg);
-}
-
-progress::-webkit-progress-value {
-  border-radius: var(--standard-border-radius);
-  background-color: var(--accent);
-}
-
-progress::-moz-progress-bar {
-  border-radius: var(--standard-border-radius);
-  background-color: var(--accent);
-  transition-property: width;
-  transition-duration: 0.3s;
-}
-
-progress:indeterminate::-moz-progress-bar {
-  background-color: var(--accent-bg);
-}
-
-dialog {
-  max-width: 40rem;
-  margin: auto;
-}
-
-dialog::backdrop {
-  background-color: var(--bg);
-  opacity: 0.8;
-}
-
-@media only screen and (max-width: 720px) {
-  dialog {
-    max-width: 100%;
-    margin: auto 1em;
-  }
-}
-
-/* Superscript & Subscript */
-/* Prevent scripts from affecting line-height. */
-sup, sub {
-  vertical-align: baseline;
-  position: relative;
-}
-
-sup {
-  top: -0.4em;
-}
-
-sub {
-  top: 0.3em;
-}
-
-/* Classes for notices */
-.notice {
-  background: var(--accent-bg);
-  border: 2px solid var(--border);
-  border-radius: var(--standard-border-radius);
-  padding: 1.5rem;
-  margin: 2rem 0;
-}
-
-/* BrainMinder */
-.editor-toolbar button {
- color: var(--text);
-}
-
-.editor-toolbar button:hover {
-  background:#fcfcfc;
-  border-color:#95a5a6
-}
-
-/* End Good */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section {
-  display: block
-}
-
-summary {
-  display: list-item
-}
-
-template {
-  display: none
-}
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block
-}
-
-progress {
-  vertical-align: baseline
-}
-
-audio:not([controls]) {
-  display: none;
-  height: 0
-}
-
 a {
-  background-color: transparent
+  text-decoration: none;
 }
 
-a:active,
-a:hover {
-  outline-width: 0
+/* End reset */
+
+html {
+  font-family: var(--sans-font), sans-serif;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline dotted;
+*,
+*:before,
+*:after {
+  box-sizing: inherit
 }
 
-b,
-strong {
-  font-weight: bolder
+body {
+  margin: 0;
+  min-height: 100vh;
 }
 
-small {
-  font-size: 80%
-}
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline
-}
-
-sub {
-  bottom: -0.25em
-}
-
-sup {
-  top: -0.5em
-}
-
-figure {
-  margin: 1em 40px
-}
-
-img {
-  border-style: none
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible
-}
-
-optgroup {
-  font-weight: bold
-}
-
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button
-}
-
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  border-style: none;
-  padding: 0
-}
-
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
-  outline: 1px dotted ButtonText
-}
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: .35em .625em .75em
-}
-
-legend {
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal
+input, select, textarea{
+  display: block;
+  border: 1px solid #ccc !important;
+  width: 100%;
+  font: inherit;
+  padding: 8px;
+  border-radius: 4px;
 }
 
 textarea {
-  overflow: auto
+  overflow: auto;
 }
 
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-  height: auto
-}
-
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px
-}
-
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none
-}
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit
-}
-
-h1 {
-  font-size: 36px
-}
-
-h2 {
-  font-size: 30px
-}
-
-h3 {
-  font-size: 24px
-}
-
-h4 {
-  font-size: 20px
-}
-
-h5 {
-  font-size: 16px
-}
-
-h6 {
-  font-size: 16px
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-  margin: 10px 0
-}
-
-.w3-wide {
-  letter-spacing: 4px
-}
-
-hr {
-  border: 0;
-  border-top: 1px solid #eee;
-  margin: 20px 0
-}
-
-.w3-image {
-  max-width: 100%;
-  height: auto
-}
-
-img {
-  vertical-align: middle
-}
-
-a {
-  color: inherit
-}
-
-.w3-table,
-.w3-table-all {
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-  display: table
-}
-
-.w3-table-all {
-  border: 1px solid #ccc
-}
-
-.w3-bordered tr,
-.w3-table-all tr {
-  border-bottom: 1px solid #ddd
-}
-
-.w3-striped tbody tr:nth-child(even) {
-  background-color: #f1f1f1
-}
-
-.w3-table-all tr:nth-child(odd) {
-  background-color: #fff
-}
-
-.w3-table-all tr:nth-child(even) {
-  background-color: #f1f1f1
-}
-
-.w3-hoverable tbody tr:hover,
-.w3-ul.w3-hoverable li:hover {
-  background-color: #ccc
-}
-
-.w3-centered tr th,
-.w3-centered tr td {
-  text-align: center
-}
-
-.w3-table td,
-.w3-table th,
-.w3-table-all td,
-.w3-table-all th {
-  padding: 8px 8px;
-  display: table-cell;
-  text-align: left;
-  vertical-align: top
-}
-
-.w3-table th:first-child,
-.w3-table td:first-child,
-.w3-table-all th:first-child,
-.w3-table-all td:first-child {
-  padding-left: 16px
-}
-
-.w3-btn,
-.w3-button {
+button, .button {
   border: none;
   display: inline-block;
-  padding: 8px 16px;
   vertical-align: middle;
   overflow: hidden;
   text-decoration: none;
@@ -1031,1583 +102,84 @@ a {
   background-color: inherit;
   text-align: center;
   cursor: pointer;
-  white-space: nowrap
-}
-
-.w3-btn:hover {
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
-}
-
-.w3-btn,
-.w3-button {
+  white-space: nowrap;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none
-}
-
-.w3-disabled,
-.w3-btn:disabled,
-.w3-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.3
-}
-
-.w3-disabled *,
-:disabled * {
-  pointer-events: none
-}
-
-.w3-btn.w3-disabled:hover,
-.w3-btn:disabled:hover {
-  box-shadow: none
-}
-
-.w3-badge,
-.w3-tag {
-  background-color: #000;
-  color: #fff;
-  display: inline-block;
-  padding-left: 8px;
-  padding-right: 8px;
-  text-align: center
-}
-
-.w3-badge {
-  border-radius: 50%
-}
-
-.w3-ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0
-}
-
-.w3-ul li {
-  padding: 8px 16px;
-  border-bottom: 1px solid #ddd
-}
-
-.w3-ul li:last-child {
-  border-bottom: none
-}
-
-.w3-tooltip,
-.w3-display-container {
-  position: relative
-}
-
-.w3-tooltip .w3-text {
-  display: none
-}
-
-.w3-tooltip:hover .w3-text {
-  display: inline-block
-}
-
-.w3-ripple:active {
-  opacity: 0.5
-}
-
-.w3-ripple {
-  transition: opacity 0s
-}
-
-.w3-input {
-  padding: 2px;
-  display: block;
-  border: none;
-  border-bottom: 1px solid #ccc;
-  width: 100%
-}
-
-.w3-select {
-  padding: 9px 0;
-  width: 100%;
-  border: none;
-  border-bottom: 1px solid #ccc
-}
-
-.w3-dropdown-click,
-.w3-dropdown-hover {
-  position: relative;
-  display: inline-block;
-  cursor: pointer
-}
-
-.w3-dropdown-hover:hover .w3-dropdown-content {
-  display: block
-}
-
-.w3-dropdown-hover:first-child,
-.w3-dropdown-click:hover {
-  background-color: #ccc;
-  color: #000
-}
-
-.w3-dropdown-hover:hover>.w3-button:first-child,
-.w3-dropdown-click:hover>.w3-button:first-child {
-  background-color: #ccc;
-  color: #000
-}
-
-.w3-dropdown-content {
-  cursor: auto;
-  color: #000;
-  background-color: #fff;
-  display: none;
-  position: absolute;
-  min-width: 160px;
-  margin: 0;
-  padding: 0;
-  z-index: 1
-}
-
-.w3-check,
-.w3-radio {
-  width: 18px;
-  height: 18px;
-  position: relative;
-  top: 6px;
-  accent-color: #2b5797;
-}
-
-.w3-sidebar {
-  height: 100%;
-  width: 200px;
-  background-color: #fff;
-  position: fixed !important;
-  z-index: 1;
-  overflow: auto
-}
-
-.w3-bar-block .w3-dropdown-hover,
-.w3-bar-block .w3-dropdown-click {
-  width: 100%
-}
-
-.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
-.w3-bar-block .w3-dropdown-click .w3-dropdown-content {
-  min-width: 100%
-}
-
-.w3-bar-block .w3-dropdown-hover .w3-button,
-.w3-bar-block .w3-dropdown-click .w3-button {
-  width: 100%;
-  text-align: left;
-  padding: 8px 16px
-}
-
-.w3-main,
-#main {
-  transition: margin-left .4s
-}
-
-.w3-modal {
-  z-index: 100;
-  padding-top: 100px;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgb(0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.4);
-  display: block;
-}
-
-.w3-modal-content {
-  margin: auto;
-  background-color: #fff;
-  position: relative;
-  padding: 0;
-  outline: 0;
-  width: 600px;
-  color: rgb(84, 84, 84);
-}
-
-.w3-modal-content h5 {
-  font-weight: 600 !important;
-}
-
-.w3-bar {
-  width: 100%;
-  overflow: hidden
-}
-
-.w3-center .w3-bar {
-  display: inline-block;
-  width: auto
-}
-
-.w3-bar .w3-bar-item {
-  padding: 6px 16px;
-  float: left;
-  width: auto;
-  border: none;
-  display: block;
-  outline: 0
-}
-
-.w3-bar .w3-dropdown-hover,
-.w3-bar .w3-dropdown-click {
-  position: static;
-  float: left
-}
-
-.w3-bar .w3-button {
-  white-space: normal
-}
-
-.w3-bar-block .w3-bar-item {
-  width: 100%;
-  display: block;
-  padding: 8px 16px;
-  text-align: left;
-  border: none;
-  white-space: normal;
-  float: none;
-  outline: 0
-}
-
-.w3-bar-block.w3-center .w3-bar-item {
-  text-align: center
-}
-
-.w3-block {
-  display: block;
-  width: 100%
-}
-
-.w3-responsive {
-  display: block;
-  overflow-x: auto
-}
-
-.w3-container:after,
-.w3-container:before,
-.w3-panel:after,
-.w3-panel:before,
-.w3-row:after,
-.w3-row:before,
-.w3-row-padding:after,
-.w3-row-padding:before,
-.w3-cell-row:before,
-.w3-cell-row:after,
-.w3-clear:after,
-.w3-clear:before,
-.w3-bar:before,
-.w3-bar:after {
-  content: "";
-  display: table;
-  clear: both
-}
-
-.w3-col,
-.w3-half,
-.w3-third,
-.w3-twothird,
-.w3-threequarter,
-.w3-quarter {
-  float: left;
-  width: 100%
-}
-
-.w3-col.s1 {
-  width: 8.33333%
-}
-
-.w3-col.s2 {
-  width: 16.66666%
-}
-
-.w3-col.s3 {
-  width: 24.99999%
-}
-
-.w3-col.s4 {
-  width: 33.33333%
-}
-
-.w3-col.s5 {
-  width: 41.66666%
-}
-
-.w3-col.s6 {
-  width: 49.99999%
-}
-
-.w3-col.s7 {
-  width: 58.33333%
-}
-
-.w3-col.s8 {
-  width: 66.66666%
-}
-
-.w3-col.s9 {
-  width: 74.99999%
-}
-
-.w3-col.s10 {
-  width: 83.33333%
-}
-
-.w3-col.s11 {
-  width: 91.66666%
-}
-
-.w3-col.s12 {
-  width: 99.99999%
-}
-
-@media (min-width:601px) {
-  .w3-col.m1 {
-    width: 8.33333%
-  }
-
-  .w3-col.m2 {
-    width: 16.66666%
-  }
-
-  .w3-col.m3,
-  .w3-quarter {
-    width: 24.99999%
-  }
-
-  .w3-col.m4,
-  .w3-third {
-    width: 33.33333%
-  }
-
-  .w3-col.m5 {
-    width: 41.66666%
-  }
-
-  .w3-col.m6,
-  .w3-half {
-    width: 49.99999%
-  }
-
-  .w3-col.m7 {
-    width: 58.33333%
-  }
-
-  .w3-col.m8,
-  .w3-twothird {
-    width: 66.66666%
-  }
-
-  .w3-col.m9,
-  .w3-threequarter {
-    width: 74.99999%
-  }
-
-  .w3-col.m10 {
-    width: 83.33333%
-  }
-
-  .w3-col.m11 {
-    width: 91.66666%
-  }
-
-  .w3-col.m12 {
-    width: 99.99999%
-  }
-}
-
-@media (min-width:993px) {
-  .w3-col.l1 {
-    width: 8.33333%
-  }
-
-  .w3-col.l2 {
-    width: 16.66666%
-  }
-
-  .w3-col.l3 {
-    width: 24.99999%
-  }
-
-  .w3-col.l4 {
-    width: 33.33333%
-  }
-
-  .w3-col.l5 {
-    width: 41.66666%
-  }
-
-  .w3-col.l6 {
-    width: 49.99999%
-  }
-
-  .w3-col.l7 {
-    width: 58.33333%
-  }
-
-  .w3-col.l8 {
-    width: 66.66666%
-  }
-
-  .w3-col.l9 {
-    width: 74.99999%
-  }
-
-  .w3-col.l10 {
-    width: 83.33333%
-  }
-
-  .w3-col.l11 {
-    width: 91.66666%
-  }
-
-  .w3-col.l12 {
-    width: 99.99999%
-  }
-}
-
-.w3-rest {
-  overflow: hidden
-}
-
-.w3-stretch {
-  margin-left: -16px;
-  margin-right: -16px
-}
-
-.w3-content,
-.w3-auto {
-  margin-left: auto;
-  margin-right: auto
-}
-
-.w3-content {
-  max-width: 980px
-}
-
-.w3-auto {
-  max-width: 1140px
-}
-
-.w3-cell-row {
-  display: table;
-  width: 100%
-}
-
-.w3-cell {
-  display: table-cell
-}
-
-.w3-cell-top {
-  vertical-align: top
-}
-
-.w3-cell-middle {
-  vertical-align: middle
-}
-
-.w3-cell-bottom {
-  vertical-align: bottom
-}
-
-.w3-hide {
-  display: none !important
-}
-
-.w3-show-block,
-.w3-show {
-  display: block !important
-}
-
-.w3-show-inline-block {
-  display: inline-block !important
-}
-
-@media (max-width:1205px) {
-  .w3-auto {
-    max-width: 95%
-  }
-}
-
-@media (max-width:600px) {
-  .w3-modal-content {
-    margin: 0 10px;
-    width: auto !important
-  }
-
-  .w3-modal {
-    padding-top: 30px
-  }
-
-  .w3-dropdown-hover.w3-mobile .w3-dropdown-content,
-  .w3-dropdown-click.w3-mobile .w3-dropdown-content {
-    position: relative
-  }
-
-  .w3-hide-small {
-    display: none !important
-  }
-
-  .w3-mobile {
-    display: block;
-    width: 100% !important
-  }
-
-  .w3-bar-item.w3-mobile,
-  .w3-dropdown-hover.w3-mobile,
-  .w3-dropdown-click.w3-mobile {
-    text-align: center
-  }
-
-  .w3-dropdown-hover.w3-mobile,
-  .w3-dropdown-hover.w3-mobile .w3-btn,
-  .w3-dropdown-hover.w3-mobile .w3-button,
-  .w3-dropdown-click.w3-mobile,
-  .w3-dropdown-click.w3-mobile .w3-btn,
-  .w3-dropdown-click.w3-mobile .w3-button {
-    width: 100%
-  }
-}
-
-@media (max-width:768px) {
-  #modal-confirm-dialog-content {
-    width: 400px;
-  }
-
-  .w3-modal-content {
-    width: 500px
-  }
-
-  .w3-modal {
-    padding-top: 50px
-  }
-}
-
-@media (min-width:993px) {
-
-  #modal-confirm-dialog-content {
-    width: 600px;
-  }
-
-  .w3-modal-content {
-    width: 900px
-  }
-
-  .w3-hide-large {
-    display: none !important
-  }
-
-  .w3-sidebar.w3-collapse {
-    display: block !important
-  }
-}
-
-@media (max-width:992px) and (min-width:601px) {
-  .w3-hide-medium {
-    display: none !important
-  }
-}
-
-@media (max-width:992px) {
-  .w3-sidebar.w3-collapse {
-    display: none
-  }
-
-  .w3-main {
-    margin-left: 0 !important;
-    margin-right: 0 !important
-  }
-
-  .w3-auto {
-    max-width: 100%
-  }
-}
-
-.w3-top,
-.w3-bottom {
-  position: fixed;
-  width: 100%;
-  z-index: 1
-}
-
-.w3-top {
-  top: 0
-}
-
-.w3-bottom {
-  bottom: 0
-}
-
-.w3-overlay {
-  position: fixed;
-  display: none;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 4;
-}
-
-.w3-display-topleft {
-  position: absolute;
-  left: 0;
-  top: 0
-}
-
-.w3-display-topright {
-  position: absolute;
-  right: 0;
-  top: 0
-}
-
-.w3-display-bottomleft {
-  position: absolute;
-  left: 0;
-  bottom: 0
-}
-
-.w3-display-bottomright {
-  position: absolute;
-  right: 0;
-  bottom: 0
-}
-
-.w3-display-middle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -ms-transform: translate(-50%, -50%)
-}
-
-.w3-display-left {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translate(0%, -50%);
-  -ms-transform: translate(-0%, -50%)
-}
-
-.w3-display-right {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translate(0%, -50%);
-  -ms-transform: translate(0%, -50%)
-}
-
-.w3-display-topmiddle {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  transform: translate(-50%, 0%);
-  -ms-transform: translate(-50%, 0%)
-}
-
-.w3-display-bottommiddle {
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  transform: translate(-50%, 0%);
-  -ms-transform: translate(-50%, 0%)
-}
-
-.w3-display-container:hover .w3-display-hover {
-  display: block
-}
-
-.w3-display-container:hover span.w3-display-hover {
-  display: inline-block
-}
-
-.w3-display-hover {
-  display: none
-}
-
-.w3-display-position {
-  position: absolute
-}
-
-.w3-circle {
-  border-radius: 50%
-}
-
-.w3-round-small {
-  border-radius: 2px
-}
-
-.w3-round,
-.w3-round-medium {
-  border-radius: 4px
-}
-
-.w3-round-large {
-  border-radius: 8px
-}
-
-.w3-round-xlarge {
-  border-radius: 16px
-}
-
-.w3-round-xxlarge {
-  border-radius: 32px
-}
-
-.w3-row-padding,
-.w3-row-padding>.w3-half,
-.w3-row-padding>.w3-third,
-.w3-row-padding>.w3-twothird,
-.w3-row-padding>.w3-threequarter,
-.w3-row-padding>.w3-quarter,
-.w3-row-padding>.w3-col {
-  padding: 0 8px
-}
-
-.w3-container,
-.w3-panel {
-  padding: 0.01em 4px
-}
-
-.w3-panel {
-  margin-top: 4px;
-  margin-bottom: 4px
-}
-
-.w3-code,
-.w3-codespan {
-  font-family: Consolas, "courier new";
-  font-size: 16px
-}
-
-.w3-code {
-  width: auto;
-  background-color: #fff;
-  padding: 8px 12px;
-  border-left: 4px solid #4CAF50;
-  word-wrap: break-word
-}
-
-.w3-codespan {
-  color: crimson;
-  background-color: #f1f1f1;
-  padding-left: 4px;
-  padding-right: 4px;
-  font-size: 110%
-}
-
-.w3-card,
-.w3-card-2 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
-}
-
-.w3-card-4,
-.w3-hover-shadow:hover {
-  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
-}
-
-.w3-spin {
-  animation: w3-spin 2s infinite linear
-}
-
-@keyframes w3-spin {
-  0% {
-    transform: rotate(0deg)
-  }
-
-  100% {
-    transform: rotate(359deg)
-  }
-}
-
-.w3-animate-fading {
-  animation: fading 10s infinite
-}
-
-@keyframes fading {
-  0% {
-    opacity: 0
-  }
-
-  50% {
-    opacity: 1
-  }
-
-  100% {
-    opacity: 0
-  }
-}
-
-.w3-animate-opacity {
-  animation: opac 0.8s
-}
-
-@keyframes opac {
-  from {
-    opacity: 0
-  }
-
-  to {
-    opacity: 1
-  }
-}
-
-.w3-animate-top {
-  position: relative;
-  animation: animatetop 0.4s
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.w3-animate-left {
-  position: relative;
-  animation: animateleft 0.4s
-}
-
-@keyframes animateleft {
-  from {
-    left: -300px;
-    opacity: 0
-  }
-
-  to {
-    left: 0;
-    opacity: 1
-  }
-}
-
-.w3-animate-right {
-  position: relative;
-  animation: animateright 0.4s
-}
-
-@keyframes animateright {
-  from {
-    right: -300px;
-    opacity: 0
-  }
-
-  to {
-    right: 0;
-    opacity: 1
-  }
-}
-
-.w3-animate-bottom {
-  position: relative;
-  animation: animatebottom 0.4s
-}
-
-@keyframes animatebottom {
-  from {
-    bottom: -300px;
-    opacity: 0
-  }
-
-  to {
-    bottom: 0;
-    opacity: 1
-  }
-}
-
-.w3-animate-zoom {
-  animation: animatezoom 0.6s
-}
-
-@keyframes animatezoom {
-  from {
-    transform: scale(0)
-  }
-
-  to {
-    transform: scale(1)
-  }
-}
-
-.w3-animate-input {
-  transition: width 0.4s ease-in-out
-}
-
-.w3-animate-input:focus {
-  width: 100% !important
-}
-
-.w3-opacity,
-.w3-hover-opacity:hover {
-  opacity: 0.60
-}
-
-.w3-opacity-off,
-.w3-hover-opacity-off:hover {
-  opacity: 1
-}
-
-.w3-opacity-max {
-  opacity: 0.25
-}
-
-.w3-opacity-min {
-  opacity: 0.75
-}
-
-.w3-greyscale-max,
-.w3-grayscale-max,
-.w3-hover-greyscale:hover,
-.w3-hover-grayscale:hover {
-  filter: grayscale(100%)
-}
-
-.w3-greyscale,
-.w3-grayscale {
-  filter: grayscale(75%)
-}
-
-.w3-greyscale-min,
-.w3-grayscale-min {
-  filter: grayscale(50%)
-}
-
-.w3-sepia {
-  filter: sepia(75%)
-}
-
-.w3-sepia-max,
-.w3-hover-sepia:hover {
-  filter: sepia(100%)
-}
-
-.w3-sepia-min {
-  filter: sepia(50%)
-}
-
-.w3-tiny {
-  font-size: 10px !important
-}
-
-.w3-small {
-  font-size: 12px !important
-}
-
-.w3-medium {
-  font-size: 15px !important
-}
-
-.w3-large {
-  font-size: 18px !important
-}
-
-.w3-xlarge {
-  font-size: 24px !important
-}
-
-.w3-xxlarge {
-  font-size: 36px !important
-}
-
-.w3-xxxlarge {
-  font-size: 48px !important
-}
-
-.w3-jumbo {
-  font-size: 64px !important
-}
-
-.w3-left-align {
-  text-align: left !important
-}
-
-.w3-right-align {
-  text-align: right !important
-}
-
-.w3-justify {
-  text-align: justify !important
-}
-
-.w3-center {
-  text-align: center !important
-}
-
-.w3-border-0 {
-  border: 0 !important
-}
-
-.w3-border {
-  border: 1px solid #ccc !important
-}
-
-.w3-border-top {
-  border-top: 1px solid #ccc !important
-}
-
-.w3-border-bottom {
-  border-bottom: 1px solid #ccc !important
-}
-
-.w3-border-left {
-  border-left: 1px solid #ccc !important
-}
-
-.w3-border-right {
-  border-right: 1px solid #ccc !important
-}
-
-.w3-topbar {
-  border-top: 6px solid #ccc !important
-}
-
-.w3-bottombar {
-  border-bottom: 6px solid #ccc !important
-}
-
-.w3-leftbar {
-  border-left: 6px solid #ccc !important
-}
-
-.w3-rightbar {
-  border-right: 6px solid #ccc !important
-}
-
-.w3-section,
-.w3-code {
-  margin-top: 16px !important;
-  margin-bottom: 16px !important
-}
-
-.w3-margin {
-  margin: 16px !important
-}
-
-.w3-margin-top {
-  margin-top: 16px !important
-}
-
-.w3-margin-bottom {
-  margin-bottom: 16px !important
-}
-
-.w3-margin-left {
-  margin-left: 16px !important
-}
-
-.w3-margin-right {
-  margin-right: 16px !important
-}
-
-.w3-padding-small {
-  padding: 4px 8px !important
-}
-
-.w3-padding {
-  padding: 8px 16px !important
-}
-
-.w3-padding-large {
-  padding: 12px 24px !important
-}
-
-.w3-padding-16 {
-  padding-top: 16px !important;
-  padding-bottom: 16px !important
-}
-
-.w3-padding-24 {
-  padding-top: 24px !important;
-  padding-bottom: 24px !important
-}
-
-.w3-padding-32 {
-  padding-top: 32px !important;
-  padding-bottom: 32px !important
-}
-
-.w3-padding-48 {
-  padding-top: 48px !important;
-  padding-bottom: 48px !important
-}
-
-.w3-padding-64 {
-  padding-top: 64px !important;
-  padding-bottom: 64px !important
-}
-
-.w3-padding-top-64 {
-  padding-top: 64px !important
-}
-
-.w3-padding-top-48 {
-  padding-top: 48px !important
-}
-
-.w3-padding-top-32 {
-  padding-top: 32px !important
-}
-
-.w3-padding-top-24 {
-  padding-top: 24px !important
-}
-
-.w3-left {
-  float: left !important
-}
-
-.w3-right {
-  float: right !important
-}
-
-.w3-button:hover {
-  color: #000 !important;
-  background-color: #ccc !important
-}
-
-.w3-transparent,
-.w3-hover-none:hover {
-  background-color: transparent !important
-}
-
-.w3-hover-none:hover {
-  box-shadow: none !important
-}
-
-/* Colors */
-.w3-amber,
-.w3-hover-amber:hover {
-  color: #000 !important;
-  background-color: #ffc107 !important
-}
-
-.w3-aqua,
-.w3-hover-aqua:hover {
-  color: #000 !important;
-  background-color: #00ffff !important
-}
-
-.w3-blue,
-.w3-hover-blue:hover {
-  color: #fff !important;
-  background-color: #2196F3 !important
-}
-
-.w3-light-blue,
-.w3-hover-light-blue:hover {
-  color: #000 !important;
-  background-color: #87CEEB !important
-}
-
-.w3-blue-grey,
-.w3-hover-blue-grey:hover,
-.w3-blue-gray,
-.w3-hover-blue-gray:hover {
-  color: #fff !important;
-  background-color: #607d8b !important
-}
-
-.w3-sand,
-.w3-hover-sand:hover {
-  color: #000 !important;
-  background-color: #fdf5e6 !important
-}
-
-.w3-white,
-.w3-hover-white:hover {
-  color: #000 !important;
-  background-color: #fff !important
-}
-
-.w3-black,
-.w3-hover-black:hover {
-  color: #fff !important;
-  background-color: #000 !important
-}
-
-.w3-grey,
-.w3-hover-grey:hover,
-.w3-gray,
-.w3-hover-gray:hover {
-  color: #000 !important;
-  background-color: #9e9e9e !important
-}
-
-.w3-light-grey,
-.w3-hover-light-grey:hover,
-.w3-light-gray,
-.w3-hover-light-gray:hover {
-  color: #000 !important;
-  background-color: #f1f1f1 !important
-}
-
-.w3-dark-grey,
-.w3-hover-dark-grey:hover,
-.w3-dark-gray,
-.w3-hover-dark-gray:hover {
-  color: #fff !important;
-  background-color: #616161 !important
-}
-
-.w3-text-blue,
-.w3-hover-text-blue:hover {
-  color: #2196F3 !important
-}
-
-.w3-text-blue-grey,
-.w3-hover-text-blue-grey:hover,
-.w3-text-blue-gray,
-.w3-hover-text-blue-gray:hover {
-  color: #607d8b !important
-}
-
-.w3-text-white,
-.w3-hover-text-white:hover {
-  color: #fff !important
-}
-
-.w3-text-black,
-.w3-hover-text-black:hover {
-  color: #000 !important
-}
-
-.w3-text-grey,
-.w3-hover-text-grey:hover,
-.w3-text-gray,
-.w3-hover-text-gray:hover {
-  color: #757575 !important
-}
-
-.w3-text-light-grey,
-.w3-hover-text-light-grey:hover,
-.w3-text-light-gray,
-.w3-hover-text-light-gray:hover {
-  color: #f1f1f1 !important
-}
-
-.w3-text-dark-grey,
-.w3-hover-text-dark-grey:hover,
-.w3-text-dark-gray,
-.w3-hover-text-dark-gray:hover {
-  color: #3a3a3a !important
-}
-
-.w3-border-blue,
-.w3-hover-border-blue:hover {
-  border-color: #2196F3 !important
-}
-
-.w3-border-blue-grey,
-.w3-hover-border-blue-grey:hover,
-.w3-border-blue-gray,
-.w3-hover-border-blue-gray:hover {
-  border-color: #607d8b !important
-}
-
-.w3-border-white,
-.w3-hover-border-white:hover {
-  border-color: #fff !important
-}
-
-.w3-border-black,
-.w3-hover-border-black:hover {
-  border-color: #000 !important
-}
-
-.w3-border-grey,
-.w3-hover-border-grey:hover,
-.w3-border-gray,
-.w3-hover-border-gray:hover {
-  border-color: #9e9e9e !important
-}
-
-.w3-border-light-grey,
-.w3-hover-border-light-grey:hover,
-.w3-border-light-gray,
-.w3-hover-border-light-gray:hover {
-  border-color: #f1f1f1 !important
-}
-
-.w3-border-dark-grey,
-.w3-hover-border-dark-grey:hover,
-.w3-border-dark-gray,
-.w3-hover-border-dark-gray:hover {
-  border-color: #616161 !important
-}
-
-.w3-border-pale-red,
-.w3-hover-border-pale-red:hover {
-  border-color: #ffe7e7 !important
-}
-
-.w3-border-pale-green,
-.w3-hover-border-pale-green:hover {
-  border-color: #e7ffe7 !important
-}
-
-.w3-border-pale-yellow,
-.w3-hover-border-pale-yellow:hover {
-  border-color: #ffffcc !important
-}
-
-.w3-border-pale-blue,
-.w3-hover-border-pale-blue:hover {
-  border-color: #e7ffff !important
-}
-
-.w3-metro-darken {
-  color: #fff !important;
-  background-color: #1d1d1d !important
-}
-
-.w3-metro-light-blue {
-  color: #000 !important;
-  background-color: #eff4ff !important
-}
-
-.w3-metro-blue {
-  color: #fff !important;
-  background-color: #2d89ef !important
-}
-
-.w3-metro-dark-blue {
-  color: #fff !important;
-  background-color: var(--bg-primary-color) !important
-}
-
-.w3-text-metro-dark-blue {
-  color: #2b5797;
-}
-
-.w3-hover-metro-dark-blue:hover {
-  color: #fff !important;
-  background-color: #2b5797 !important;
-}
-
-.w3-hover-round-large {
+  user-select: none;
+  font-size: 0.9rem;
   border-radius: 8px;
 }
 
-blockquote {
-  background: #f9f9f9;
-  margin: 0.6em 0;
-  padding: 0.1em 10px 0.1em;
-  quotes: "\201C" "\201D" "\2018" "\2019";
+button:hover, .button:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-pre {
-  overflow: auto;
+button {
+  padding: 8px 16px;
 }
 
-a {
-  text-decoration: none;
+.button {
+  padding: 10px 18px;
 }
 
-.alert-success {
-  color: #000;
-  background-color: #ccc;
+fieldset {
+  border-radius: 8px;
 }
 
-.alert-failure {
-  color: #fff;
-  background-color: #b91d47;
+.switch {
+  float: left;
 }
 
-.tab-bar>a {
-  margin-right: 6px;
+.switch input {
+  width: auto;
 }
 
-.tab-button {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  background-color: #ccc;
+input[type='checkbox'],
+input[type='radio'] {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  accent-color: var(--bg-primary-color);
 }
 
-.tab-button.active,
-.tab-button:hover {
-  background-color: #f1f1f1 !important;
+.label-checkbox {
+  top: 4px;
+  position: relative;
+  margin-left: 4px;
 }
 
-.links-list a:not(:last-of-type)::after {
-  content: " | "
-}
-
-.label-check {
-  margin-left: 5px;
-}
-
-#appTitle {
-  height: 50px;
-  background-color: #2b5797;
-  color: #ffffff;
-  font-size: 18px;
-  padding-left: 8px;
-  padding-top: 8px;
-  position: fixed;
+#main-sidebar {
   width: 300px;
+  z-index: 5;
+}
+
+#app-title {
+  height: 50px;
+  background-color: var(--bg-primary-color);
+  color: #ffffff;
+  font-size: 1.4rem;
+  padding-left: 8px;
+  width: 300px;
+  display: flex;
+  align-items: center;
+  position: fixed;
+}
+
+#main-sidebar-content {
+  margin-top: 50px;
+}
+
+#main-sidebar-content h5 {
+  font-size: 1rem;
+  margin-top: 10px;
   margin-bottom: 10px;
 }
 
-#searchBar {
-  padding-top: 3px;
-}
-
-#page-content {
-  padding: 48px 4px 10px;
-}
-
-.page-container {
-  padding-top: 10px;
-}
-
-#searchText {
-  margin-top: 5px;
-  padding: 4px 4px;
-  font-size: 12pt;
-}
-
-h5.title {
-  color: #2b5797;
-  font-weight: 400;
-  font-size: 18px;
-}
-
-.w3-row .threequarter {
-  width: 75%;
-  float: left;
-}
-
-.w3-row .quarter {
-  width: 25%;
-  float: left;
-}
-
-#form-login {
-  width: 600px;
-}
-
-.w3-button.w3-edit {
-  background-color: #f1f1f1;
-}
-
-.w3-button.w3-edit:hover {
-  background-color: var(--bg-primary-color);
-}
-
-.w3-button.w3-delete {
-  background-color: #f1f1f1;
-}
-
-.w3-button.w3-delete:hover {
-  background-color: #b91d47 !important;
-}
-
-.fields {
-  margin-bottom: 20px;
-}
-
-.fields li {
-  padding-left: 0;
-}
-
-.hidden {
-  display: none;
-}
-
-.accordion {
-  cursor: pointer;
-}
-
-.footerNavbar-container {
-  position: fixed;
-  bottom: 5px;
-  width: 100%;
-  padding-right: 8px;
-}
-
-.footerNavbar {
-  overflow: hidden;
-  width: 100%;
-  background-color: var(--bg-primary-color);
-}
-
-.footerNavbar .w3-bar-item {
-  padding: 3px;
-}
-
-.footerNavbar .w3-bar-item p {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 10pt;
-}
-
-.footerNavbar .w3-btn {
-  padding: 6px 4px;
-}
-
-#searchSidebar {
-  display: none;
-}
-
-#overlay {
-  position: fixed;
-  display: none;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 4;
-  cursor: pointer;
-}
-
-#message {
-  visibility: hidden;
-  min-width: 250px;
-  margin-left: -125px;
-  text-align: center;
-  border-radius: 2px;
-  padding: 16px;
-  position: fixed;
-  z-index: 1;
-  left: 50%;
-  bottom: 36px;
-}
-
-#message.show {
-  visibility: visible;
-}
-
-.tag {
-  display: inline-block;
-}
-
-.field-label {
-  font-weight: bold;
-}
-
-.summary {
-  background-color: #fff;
-  padding: 4px
-}
-
-.summary p {
-  padding: 0;
-  margin: 0;
-}
-
 #page-top-bar {
+  display: flex;
+  align-items: center;
   z-index: 1;
   height: 50px;
 }
@@ -2623,28 +195,116 @@ h5.title {
   overflow: hidden;
 }
 
-#main-sidebar {
-  width: 300px;
-  z-index: 5;
+#page-title {
+  float: left;
+  padding: 4px 4px;
+  font-size: 1.4rem;
 }
 
-#types_menu, #settings_menu {
-  margin-left: 2px !important;
+#search-bar {
+  float: right;
 }
 
-#main-sidebar-content {
-  margin-top: 50px;
+#search-text {
+  float: left;
+  width: auto;
+  padding: 4px;
 }
 
-tr.htmx-swapping td {
-  opacity: 0;
-  transition: opacity 1s ease-out;
+#search-bar button {
+  margin-top: 2px;
 }
 
-.label-checkbox {
-  top: 2px;
-  position: relative;
-  margin-left: 4px;
+.sidebar-block {
+  padding: 0.01em 4px;
+}
+
+.sidebar-menu a {
+  width: 100%;
+  display: block;
+  padding: 8px 16px;
+  text-align: left;
+  border: none;
+  white-space: normal;
+  float: none;
+  outline: 0;
+  font-size: 1rem;
+}
+
+#page-container {
+  padding: 0.01em 4px;
+}
+
+#dashboard h5 {
+  font-size: 1rem;
+  color: var(--bg-primary-color);
+}
+
+.tab-bar {
+  color: #000 !important;
+  background-color: #f1f1f1 !important;
+  width: 100%;
+  overflow: hidden;
+}
+
+.tab-button {
+  margin-right: 6px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  background-color: #ccc;
+  cursor: pointer;
+  padding: 6px 16px;
+  float: left;
+  width: auto;
+  display: block;
+  border-right: 1px solid #ccc !important;
+  border-left: 1px solid #ccc !important;
+  border-top: 1px solid #ccc !important;
+}
+
+.tab-button.active,
+.tab-button:hover {
+  background-color: #f1f1f1 !important;
+}
+
+.menu-item-title {
+  overflow: hidden;
+}
+
+.menu-item-title a {
+   text-align:left;
+   width: 100%;
+ }
+
+.menu-item-action {
+  float: right;
+  width: 50px;
+}
+
+.menu-item-title a {
+  font-size: 1rem;
+}
+
+.ss-main {
+  padding: 3px;
+}
+
+.ss-value {
+  padding: 4px;
+}
+
+.ss-main .ss-values .ss-value .ss-value-text {
+  font-size: 15px;
+}
+
+.ss-main .ss-values .ss-value {
+  background-color: var(--bg-primary-color);
+}
+
+.ss-content .ss-list .ss-option:hover,
+.ss-content .ss-list .ss-option.ss-highlighted,
+.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
+  background-color:var(--bg-primary-color);
 }
 
 #quickbox {
@@ -2723,351 +383,4 @@ tr.htmx-swapping td {
 
 #quickbox-content div:nth-child(2n+1) {
   background-color: #fafafa;
-}
-
-#items_search, #all_items_search {
-  position: sticky;
-  top: 50px;
-  z-index: 2;
-  background-color: #ddd;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.panel-search {
-  background-color: #fff;
-  padding: 4px;
-}
-
-table.stickyheader thead {
-  position: sticky;
-  top: 50px;
-  z-index: 2;
-}
-
-table.stickyheader.searchopened thead {
-  top: 180px;
-}
-
-.input-container {
-  display: flex;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.input-container .prefix {
-  margin-right: 8px;
-}
-
-.input-container input {
-  flex-grow: 1;
-  border: none;
-  outline: none;
-  padding: 8px;
-}
-
-.input-container:focus-within {
-  border-color: #777;
-}
-
-.ss-main .ss-values .ss-value .ss-value-text {
-  font-size: 14px;
-}
-
-.ss-main .ss-values .ss-value {
-  background-color: var(--bg-primary-color);
-}
-
-.ss-content .ss-list .ss-option:hover,
-.ss-content .ss-list .ss-option.ss-highlighted,
-.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
-  background-color:var(--bg-primary-color);
-}
-
-/* Small */
-@media (max-width:600px) {
-  i {
-    font-size: 20px;
-  }
-
-  fieldset {
-    margin-bottom: 10px;
-  }
-
-  #quickbox-content {
-    padding-top: var(--quickbox-topbar-height);
-  }
-
-  #message {
-    min-width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-    left: 0;
-  }
-
-  .page-container {
-    padding-bottom: 100px;
-  }
-
-  #page-title i {
-    font-size: 20px;
-  }
-
-  #searchBar #searchText {
-    width: 250px;
-  }
-
-  #form-login {
-    width: 96%;
-  }
-
-  #searchBar {
-    display: none;
-  }
-
-  #searchSidebar {
-    display: block;
-  }
-
-  .w3-table-all.responsive table,
-  .w3-table-all.responsive thead,
-  .w3-table-all.responsive tbody,
-  .w3-table-all.responsive th,
-  .w3-table-all.responsive td,
-  .w3-table-all.responsive tr {
-    display: block;
-  }
-
-  .w3-table-all thead tr {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-  }
-
-  .w3-table-all.responsive tr {
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
-  }
-
-  .w3-table-all.responsive td {
-    border: none;
-    position: relative;
-    padding-left: 30%;
-  }
-
-  .w3-table-all.responsive td.no-label {
-    padding-left: 6px;
-  }
-
-  .w3-table-all.responsive td.title {
-    color: #2b5797;
-    font-weight: 400;
-    font-size: 18px;
-  }
-
-  .w3-table-all.responsive td:before {
-    position: absolute;
-    left: 6px;
-    content: attr(data-label);
-    font-weight: bold;
-  }
-
-  .w3-table-all.responsive td.no-label:before {
-    position: absolute;
-    left: 6px;
-    content: "";
-    font-weight: bold;
-  }
-
-  .w3-modal-full {
-    width: 100vw !important;
-    height: 100vh !important;
-    padding-top:0 !important;
-    background-color: #fff;
-  }
-
-  .w3-modal-full .w3-modal-content {
-    margin:0 !important;
-  }
-}
-
-@media (max-width:992px) {
-  /* The switch - the box around the slider */
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 46px;
-    height: 24px;
-  }
-
-  /* Hide default HTML checkbox */
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  /* The slider */
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 16px;
-    width: 16px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-
-  input:checked+.slider {
-    background-color: #2b5797;
-  }
-
-  input:focus+.slider {
-    box-shadow: 0 0 1px #2b5797;
-  }
-
-  input:checked+.slider:before {
-    -webkit-transform: translateX(22px);
-    -ms-transform: translateX(22px);
-    transform: translateX(22px);
-  }
-
-  /* Rounded sliders */
-  .slider.round {
-    border-radius: 24px;
-  }
-
-  .slider.round:before {
-    border-radius: 50%;
-  }
-}
-
-/* Medium */
-@media (max-width:992px) and (min-width:601px) {
-  #page-title-container h5 {
-    padding-left: 0;
-  }
-}
-
-/* Min medium */
-@media (min-width:601px) {
-  .home-card-summary {
-    height: 250px;
-    overflow: auto;
-  }  
-
-  #quickbox {
-    width: 400px;
-    position: fixed;
-    top: 50px;
-    left: calc(100vw - 420px);
-    height: calc(100vh - 50px);
-    background-color: #fff !important;
-    border-left: 2px solid #fff;
-    border-top: 2px solid #fff;
-  }
-  #quickbox-top-bar {
-    position: relative;
-  }
-  #quickbox-footer {
-    position: relative;
-  }
-
-  #quickbox-content {
-    height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
-  }
-
-}
-
-/* Large */
-@media (min-width:993px) {
-  .w3-row > .w3-half:first-child {
-    padding-right: 4px;
-  }
-
-  .w3-row > .w3-half:nth-child(2) {
-    padding-left: 4px;
-  }
-
-  #page-main {
-    padding-left: 300px;
-  }
-
-  #page-top-bar {
-    padding-right: 300px;
-  }
-}
-
-[hidden],
-.hidden {
-  display: none !important;
-}
-/* Phone landscape and bigger */
-@media (min-width: 640px) {
-  .hidden\@s {
-    display: none !important;
-  }
-}
-/* Tablet landscape and bigger */
-@media (min-width: 960px) {
-  .hidden\@m {
-    display: none !important;
-  }
-}
-/* Desktop and bigger */
-@media (min-width: 1200px) {
-  .hidden\@l {
-    display: none !important;
-  }
-}
-/* Large screen and bigger */
-@media (min-width: 1600px) {
-  .hidden\@xl {
-    display: none !important;
-  }
-}
-/*
- * Visible
- */
-/* Phone portrait and smaller */
-@media (max-width: 639px) {
-  .visible\@s {
-    display: none !important;
-  }
-}
-/* Phone landscape and smaller */
-@media (max-width: 959px) {
-  .visible\@m {
-    display: none !important;
-  }
-}
-/* Tablet landscape and smaller */
-@media (max-width: 1199px) {
-  .visible\@l {
-    display: none !important;
-  }
-}
-/* Desktop and smaller */
-@media (max-width: 1599px) {
-  .visible\@xl {
-    display: none !important;
-  }
-}
-
-.invisible {
-  visibility: hidden !important;
 }
\ No newline at end of file
diff --git a/assets/static/css/orig.css b/assets/static/css/orig.css
new file mode 100644
index 0000000..982792a
--- /dev/null
+++ b/assets/static/css/orig.css
@@ -0,0 +1,2107 @@
+.w3-image {
+  max-width: 100%;
+  height: auto
+}
+
+img {
+  vertical-align: middle
+}
+
+a {
+  color: inherit
+}
+
+.w3-table,
+.w3-table-all {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  display: table
+}
+
+.w3-table-all {
+  border: 1px solid #ccc
+}
+
+.w3-bordered tr,
+.w3-table-all tr {
+  border-bottom: 1px solid #ddd
+}
+
+.w3-striped tbody tr:nth-child(even) {
+  background-color: #f1f1f1
+}
+
+.w3-table-all tr:nth-child(odd) {
+  background-color: #fff
+}
+
+.w3-table-all tr:nth-child(even) {
+  background-color: #f1f1f1
+}
+
+.w3-hoverable tbody tr:hover,
+.w3-ul.w3-hoverable li:hover {
+  background-color: #ccc
+}
+
+.w3-centered tr th,
+.w3-centered tr td {
+  text-align: center
+}
+
+.w3-table td,
+.w3-table th,
+.w3-table-all td,
+.w3-table-all th {
+  padding: 8px 8px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: top
+}
+
+.w3-table th:first-child,
+.w3-table td:first-child,
+.w3-table-all th:first-child,
+.w3-table-all td:first-child {
+  padding-left: 16px
+}
+
+.w3-disabled,
+.w3-btn:disabled,
+.w3-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.3
+}
+
+.w3-disabled *,
+:disabled * {
+  pointer-events: none
+}
+
+.w3-btn.w3-disabled:hover,
+.w3-btn:disabled:hover {
+  box-shadow: none
+}
+
+.w3-badge,
+.w3-tag {
+  background-color: #000;
+  color: #fff;
+  display: inline-block;
+  padding-left: 8px;
+  padding-right: 8px;
+  text-align: center
+}
+
+.w3-badge {
+  border-radius: 50%
+}
+
+.w3-ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0
+}
+
+.w3-ul li {
+  padding: 8px 16px;
+  border-bottom: 1px solid #ddd
+}
+
+.w3-ul li:last-child {
+  border-bottom: none
+}
+
+.w3-tooltip,
+.w3-display-container {
+  position: relative
+}
+
+.w3-tooltip .w3-text {
+  display: none
+}
+
+.w3-tooltip:hover .w3-text {
+  display: inline-block
+}
+
+.w3-ripple:active {
+  opacity: 0.5
+}
+
+.w3-ripple {
+  transition: opacity 0s
+}
+
+.w3-input {
+  padding: 2px;
+  display: block;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  width: 100%
+}
+
+.w3-select {
+  padding: 9px 0;
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc
+}
+
+.w3-dropdown-click,
+.w3-dropdown-hover {
+  position: relative;
+  display: inline-block;
+  cursor: pointer
+}
+
+.w3-dropdown-hover:hover .w3-dropdown-content {
+  display: block
+}
+
+.w3-dropdown-hover:first-child,
+.w3-dropdown-click:hover {
+  background-color: #ccc;
+  color: #000
+}
+
+.w3-dropdown-hover:hover>.w3-button:first-child,
+.w3-dropdown-click:hover>.w3-button:first-child {
+  background-color: #ccc;
+  color: #000
+}
+
+.w3-dropdown-content {
+  cursor: auto;
+  color: #000;
+  background-color: #fff;
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  margin: 0;
+  padding: 0;
+  z-index: 1
+}
+
+.w3-check,
+.w3-radio {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  top: 6px;
+  accent-color: #2b5797;
+}
+
+.w3-sidebar {
+  height: 100%;
+  width: 200px;
+  background-color: #fff;
+  position: fixed !important;
+  z-index: 1;
+  overflow: auto
+}
+
+.w3-bar-block .w3-dropdown-hover,
+.w3-bar-block .w3-dropdown-click {
+  width: 100%
+}
+
+.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
+.w3-bar-block .w3-dropdown-click .w3-dropdown-content {
+  min-width: 100%
+}
+
+.w3-bar-block .w3-dropdown-hover .w3-button,
+.w3-bar-block .w3-dropdown-click .w3-button {
+  width: 100%;
+  text-align: left;
+  padding: 8px 16px
+}
+
+.w3-main,
+#main {
+  transition: margin-left .4s
+}
+
+.w3-modal {
+  z-index: 100;
+  padding-top: 100px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+  display: block;
+}
+
+.w3-modal-content {
+  margin: auto;
+  background-color: #fff;
+  position: relative;
+  padding: 0;
+  outline: 0;
+  width: 600px;
+  color: rgb(84, 84, 84);
+}
+
+.w3-modal-content h5 {
+  font-weight: 600 !important;
+}
+
+.w3-bar {
+  width: 100%;
+  overflow: hidden
+}
+
+.w3-center .w3-bar {
+  display: inline-block;
+  width: auto
+}
+
+.w3-bar .w3-bar-item {
+  padding: 6px 16px;
+  float: left;
+  width: auto;
+  border: none;
+  display: block;
+  outline: 0
+}
+
+.w3-bar .w3-dropdown-hover,
+.w3-bar .w3-dropdown-click {
+  position: static;
+  float: left
+}
+
+.w3-bar .w3-button {
+  white-space: normal
+}
+
+.w3-bar-block .w3-bar-item {
+  width: 100%;
+  display: block;
+  padding: 8px 16px;
+  text-align: left;
+  border: none;
+  white-space: normal;
+  float: none;
+  outline: 0
+}
+
+.w3-bar-block.w3-center .w3-bar-item {
+  text-align: center
+}
+
+.w3-block {
+  display: block;
+  width: 100%
+}
+
+.w3-responsive {
+  display: block;
+  overflow-x: auto
+}
+
+.w3-container:after,
+.w3-container:before,
+.w3-panel:after,
+.w3-panel:before,
+.w3-row:after,
+.w3-row:before,
+.w3-row-padding:after,
+.w3-row-padding:before,
+.w3-cell-row:before,
+.w3-cell-row:after,
+.w3-clear:after,
+.w3-clear:before,
+.w3-bar:before,
+.w3-bar:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.w3-col,
+.w3-half,
+.w3-third,
+.w3-twothird,
+.w3-threequarter,
+.w3-quarter {
+  float: left;
+  width: 100%
+}
+
+.w3-col.s1 {
+  width: 8.33333%
+}
+
+.w3-col.s2 {
+  width: 16.66666%
+}
+
+.w3-col.s3 {
+  width: 24.99999%
+}
+
+.w3-col.s4 {
+  width: 33.33333%
+}
+
+.w3-col.s5 {
+  width: 41.66666%
+}
+
+.w3-col.s6 {
+  width: 49.99999%
+}
+
+.w3-col.s7 {
+  width: 58.33333%
+}
+
+.w3-col.s8 {
+  width: 66.66666%
+}
+
+.w3-col.s9 {
+  width: 74.99999%
+}
+
+.w3-col.s10 {
+  width: 83.33333%
+}
+
+.w3-col.s11 {
+  width: 91.66666%
+}
+
+.w3-col.s12 {
+  width: 99.99999%
+}
+
+@media (min-width:601px) {
+  .w3-col.m1 {
+    width: 8.33333%
+  }
+
+  .w3-col.m2 {
+    width: 16.66666%
+  }
+
+  .w3-col.m3,
+  .w3-quarter {
+    width: 24.99999%
+  }
+
+  .w3-col.m4,
+  .w3-third {
+    width: 33.33333%
+  }
+
+  .w3-col.m5 {
+    width: 41.66666%
+  }
+
+  .w3-col.m6,
+  .w3-half {
+    width: 49.99999%
+  }
+
+  .w3-col.m7 {
+    width: 58.33333%
+  }
+
+  .w3-col.m8,
+  .w3-twothird {
+    width: 66.66666%
+  }
+
+  .w3-col.m9,
+  .w3-threequarter {
+    width: 74.99999%
+  }
+
+  .w3-col.m10 {
+    width: 83.33333%
+  }
+
+  .w3-col.m11 {
+    width: 91.66666%
+  }
+
+  .w3-col.m12 {
+    width: 99.99999%
+  }
+}
+
+@media (min-width:993px) {
+  .w3-col.l1 {
+    width: 8.33333%
+  }
+
+  .w3-col.l2 {
+    width: 16.66666%
+  }
+
+  .w3-col.l3 {
+    width: 24.99999%
+  }
+
+  .w3-col.l4 {
+    width: 33.33333%
+  }
+
+  .w3-col.l5 {
+    width: 41.66666%
+  }
+
+  .w3-col.l6 {
+    width: 49.99999%
+  }
+
+  .w3-col.l7 {
+    width: 58.33333%
+  }
+
+  .w3-col.l8 {
+    width: 66.66666%
+  }
+
+  .w3-col.l9 {
+    width: 74.99999%
+  }
+
+  .w3-col.l10 {
+    width: 83.33333%
+  }
+
+  .w3-col.l11 {
+    width: 91.66666%
+  }
+
+  .w3-col.l12 {
+    width: 99.99999%
+  }
+}
+
+.w3-rest {
+  overflow: hidden
+}
+
+.w3-stretch {
+  margin-left: -16px;
+  margin-right: -16px
+}
+
+.w3-content,
+.w3-auto {
+  margin-left: auto;
+  margin-right: auto
+}
+
+.w3-content {
+  max-width: 980px
+}
+
+.w3-auto {
+  max-width: 1140px
+}
+
+.w3-cell-row {
+  display: table;
+  width: 100%
+}
+
+.w3-cell {
+  display: table-cell
+}
+
+.w3-cell-top {
+  vertical-align: top
+}
+
+.w3-cell-middle {
+  vertical-align: middle
+}
+
+.w3-cell-bottom {
+  vertical-align: bottom
+}
+
+.w3-hide {
+  display: none !important
+}
+
+.w3-show-block,
+.w3-show {
+  display: block !important
+}
+
+.w3-show-inline-block {
+  display: inline-block !important
+}
+
+@media (max-width:1205px) {
+  .w3-auto {
+    max-width: 95%
+  }
+}
+
+@media (max-width:600px) {
+  .w3-modal-content {
+    margin: 0 10px;
+    width: auto !important
+  }
+
+  .w3-modal {
+    padding-top: 30px
+  }
+
+  .w3-dropdown-hover.w3-mobile .w3-dropdown-content,
+  .w3-dropdown-click.w3-mobile .w3-dropdown-content {
+    position: relative
+  }
+
+  .w3-hide-small {
+    display: none !important
+  }
+
+  .w3-mobile {
+    display: block;
+    width: 100% !important
+  }
+
+  .w3-bar-item.w3-mobile,
+  .w3-dropdown-hover.w3-mobile,
+  .w3-dropdown-click.w3-mobile {
+    text-align: center
+  }
+
+  .w3-dropdown-hover.w3-mobile,
+  .w3-dropdown-hover.w3-mobile .w3-btn,
+  .w3-dropdown-hover.w3-mobile .w3-button,
+  .w3-dropdown-click.w3-mobile,
+  .w3-dropdown-click.w3-mobile .w3-btn,
+  .w3-dropdown-click.w3-mobile .w3-button {
+    width: 100%
+  }
+}
+
+@media (max-width:768px) {
+  #modal-confirm-dialog-content {
+    width: 400px;
+  }
+
+  .w3-modal-content {
+    width: 500px
+  }
+
+  .w3-modal {
+    padding-top: 50px
+  }
+}
+
+@media (min-width:993px) {
+
+  #modal-confirm-dialog-content {
+    width: 600px;
+  }
+
+  .w3-modal-content {
+    width: 900px
+  }
+
+  .w3-hide-large {
+    display: none !important
+  }
+
+  .w3-sidebar.w3-collapse {
+    display: block !important
+  }
+}
+
+@media (max-width:992px) and (min-width:601px) {
+  .w3-hide-medium {
+    display: none !important
+  }
+}
+
+@media (max-width:992px) {
+  .w3-sidebar.w3-collapse {
+    display: none
+  }
+
+  .w3-main {
+    margin-left: 0 !important;
+    margin-right: 0 !important
+  }
+
+  .w3-auto {
+    max-width: 100%
+  }
+}
+
+.w3-top,
+.w3-bottom {
+  position: fixed;
+  width: 100%;
+  z-index: 1
+}
+
+.w3-top {
+  top: 0
+}
+
+.w3-bottom {
+  bottom: 0
+}
+
+.w3-overlay {
+  position: fixed;
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 4;
+}
+
+.w3-display-topleft {
+  position: absolute;
+  left: 0;
+  top: 0
+}
+
+.w3-display-topright {
+  position: absolute;
+  right: 0;
+  top: 0
+}
+
+.w3-display-bottomleft {
+  position: absolute;
+  left: 0;
+  bottom: 0
+}
+
+.w3-display-bottomright {
+  position: absolute;
+  right: 0;
+  bottom: 0
+}
+
+.w3-display-middle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%)
+}
+
+.w3-display-left {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  transform: translate(0%, -50%);
+  -ms-transform: translate(-0%, -50%)
+}
+
+.w3-display-right {
+  position: absolute;
+  top: 50%;
+  right: 0%;
+  transform: translate(0%, -50%);
+  -ms-transform: translate(0%, -50%)
+}
+
+.w3-display-topmiddle {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0%);
+  -ms-transform: translate(-50%, 0%)
+}
+
+.w3-display-bottommiddle {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 0%);
+  -ms-transform: translate(-50%, 0%)
+}
+
+.w3-display-container:hover .w3-display-hover {
+  display: block
+}
+
+.w3-display-container:hover span.w3-display-hover {
+  display: inline-block
+}
+
+.w3-display-hover {
+  display: none
+}
+
+.w3-display-position {
+  position: absolute
+}
+
+.w3-circle {
+  border-radius: 50%
+}
+
+.w3-round-small {
+  border-radius: 2px
+}
+
+.w3-round,
+.w3-round-medium {
+  border-radius: 4px
+}
+
+.w3-round-large {
+  border-radius: 8px
+}
+
+.w3-round-xlarge {
+  border-radius: 16px
+}
+
+.w3-round-xxlarge {
+  border-radius: 32px
+}
+
+.w3-row-padding,
+.w3-row-padding>.w3-half,
+.w3-row-padding>.w3-third,
+.w3-row-padding>.w3-twothird,
+.w3-row-padding>.w3-threequarter,
+.w3-row-padding>.w3-quarter,
+.w3-row-padding>.w3-col {
+  padding: 0 8px
+}
+
+.w3-container,
+.w3-panel {
+  padding: 0.01em 4px
+}
+
+.w3-panel {
+  margin-top: 4px;
+  margin-bottom: 4px
+}
+
+.w3-card,
+.w3-card-2 {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+}
+
+.w3-card-4,
+.w3-hover-shadow:hover {
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
+}
+
+.w3-spin {
+  animation: w3-spin 2s infinite linear
+}
+
+@keyframes w3-spin {
+  0% {
+    transform: rotate(0deg)
+  }
+
+  100% {
+    transform: rotate(359deg)
+  }
+}
+
+.w3-animate-fading {
+  animation: fading 10s infinite
+}
+
+@keyframes fading {
+  0% {
+    opacity: 0
+  }
+
+  50% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+.w3-animate-opacity {
+  animation: opac 0.8s
+}
+
+@keyframes opac {
+  from {
+    opacity: 0
+  }
+
+  to {
+    opacity: 1
+  }
+}
+
+.w3-animate-top {
+  position: relative;
+  animation: animatetop 0.4s
+}
+
+@keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0
+  }
+
+  to {
+    top: 0;
+    opacity: 1
+  }
+}
+
+.w3-animate-left {
+  position: relative;
+  animation: animateleft 0.4s
+}
+
+@keyframes animateleft {
+  from {
+    left: -300px;
+    opacity: 0
+  }
+
+  to {
+    left: 0;
+    opacity: 1
+  }
+}
+
+.w3-animate-right {
+  position: relative;
+  animation: animateright 0.4s
+}
+
+@keyframes animateright {
+  from {
+    right: -300px;
+    opacity: 0
+  }
+
+  to {
+    right: 0;
+    opacity: 1
+  }
+}
+
+.w3-animate-bottom {
+  position: relative;
+  animation: animatebottom 0.4s
+}
+
+@keyframes animatebottom {
+  from {
+    bottom: -300px;
+    opacity: 0
+  }
+
+  to {
+    bottom: 0;
+    opacity: 1
+  }
+}
+
+.w3-animate-zoom {
+  animation: animatezoom 0.6s
+}
+
+@keyframes animatezoom {
+  from {
+    transform: scale(0)
+  }
+
+  to {
+    transform: scale(1)
+  }
+}
+
+.w3-animate-input {
+  transition: width 0.4s ease-in-out
+}
+
+.w3-animate-input:focus {
+  width: 100% !important
+}
+
+.w3-opacity,
+.w3-hover-opacity:hover {
+  opacity: 0.60
+}
+
+.w3-opacity-off,
+.w3-hover-opacity-off:hover {
+  opacity: 1
+}
+
+.w3-opacity-max {
+  opacity: 0.25
+}
+
+.w3-opacity-min {
+  opacity: 0.75
+}
+
+.w3-greyscale-max,
+.w3-grayscale-max,
+.w3-hover-greyscale:hover,
+.w3-hover-grayscale:hover {
+  filter: grayscale(100%)
+}
+
+.w3-greyscale,
+.w3-grayscale {
+  filter: grayscale(75%)
+}
+
+.w3-greyscale-min,
+.w3-grayscale-min {
+  filter: grayscale(50%)
+}
+
+.w3-sepia {
+  filter: sepia(75%)
+}
+
+.w3-sepia-max,
+.w3-hover-sepia:hover {
+  filter: sepia(100%)
+}
+
+.w3-sepia-min {
+  filter: sepia(50%)
+}
+
+.w3-left-align {
+  text-align: left !important
+}
+
+.w3-right-align {
+  text-align: right !important
+}
+
+.w3-justify {
+  text-align: justify !important
+}
+
+.w3-center {
+  text-align: center !important
+}
+
+.w3-border-0 {
+  border: 0 !important
+}
+
+.w3-border {
+  border: 1px solid #ccc !important
+}
+
+.w3-border-top {
+  border-top: 1px solid #ccc !important
+}
+
+.w3-border-bottom {
+  border-bottom: 1px solid #ccc !important
+}
+
+.w3-border-left {
+  border-left: 1px solid #ccc !important
+}
+
+.w3-border-right {
+  border-right: 1px solid #ccc !important
+}
+
+.w3-topbar {
+  border-top: 6px solid #ccc !important
+}
+
+.w3-bottombar {
+  border-bottom: 6px solid #ccc !important
+}
+
+.w3-leftbar {
+  border-left: 6px solid #ccc !important
+}
+
+.w3-rightbar {
+  border-right: 6px solid #ccc !important
+}
+
+.w3-section,
+.w3-code {
+  margin-top: 16px !important;
+  margin-bottom: 16px !important
+}
+
+.w3-margin {
+  margin: 16px !important
+}
+
+.w3-margin-top {
+  margin-top: 16px !important
+}
+
+.w3-margin-bottom {
+  margin-bottom: 16px !important
+}
+
+.w3-margin-left {
+  margin-left: 16px !important
+}
+
+.w3-margin-right {
+  margin-right: 16px !important
+}
+
+.w3-padding-small {
+  padding: 4px 8px !important
+}
+
+.w3-padding {
+  padding: 8px 16px !important
+}
+
+.w3-padding-large {
+  padding: 12px 24px !important
+}
+
+.w3-padding-16 {
+  padding-top: 16px !important;
+  padding-bottom: 16px !important
+}
+
+.w3-padding-24 {
+  padding-top: 24px !important;
+  padding-bottom: 24px !important
+}
+
+.w3-padding-32 {
+  padding-top: 32px !important;
+  padding-bottom: 32px !important
+}
+
+.w3-padding-48 {
+  padding-top: 48px !important;
+  padding-bottom: 48px !important
+}
+
+.w3-padding-64 {
+  padding-top: 64px !important;
+  padding-bottom: 64px !important
+}
+
+.w3-padding-top-64 {
+  padding-top: 64px !important
+}
+
+.w3-padding-top-48 {
+  padding-top: 48px !important
+}
+
+.w3-padding-top-32 {
+  padding-top: 32px !important
+}
+
+.w3-padding-top-24 {
+  padding-top: 24px !important
+}
+
+.w3-left {
+  float: left !important
+}
+
+.w3-right {
+  float: right !important
+}
+
+.w3-button:hover {
+  color: #000 !important;
+  background-color: #ccc !important
+}
+
+.w3-transparent,
+.w3-hover-none:hover {
+  background-color: transparent !important
+}
+
+.w3-hover-none:hover {
+  box-shadow: none !important
+}
+
+/* Colors */
+.w3-amber,
+.w3-hover-amber:hover {
+  color: #000 !important;
+  background-color: #ffc107 !important
+}
+
+.w3-aqua,
+.w3-hover-aqua:hover {
+  color: #000 !important;
+  background-color: #00ffff !important
+}
+
+.w3-blue,
+.w3-hover-blue:hover {
+  color: #fff !important;
+  background-color: #2196F3 !important
+}
+
+.w3-light-blue,
+.w3-hover-light-blue:hover {
+  color: #000 !important;
+  background-color: #87CEEB !important
+}
+
+.w3-brown,
+.w3-hover-brown:hover {
+  color: #fff !important;
+  background-color: #795548 !important
+}
+
+.w3-cyan,
+.w3-hover-cyan:hover {
+  color: #000 !important;
+  background-color: #00bcd4 !important
+}
+
+.w3-blue-grey,
+.w3-hover-blue-grey:hover,
+.w3-blue-gray,
+.w3-hover-blue-gray:hover {
+  color: #fff !important;
+  background-color: #607d8b !important
+}
+
+.w3-green,
+.w3-hover-green:hover {
+  color: #fff !important;
+  background-color: #4CAF50 !important
+}
+
+.w3-light-green,
+.w3-hover-light-green:hover {
+  color: #000 !important;
+  background-color: #8bc34a !important
+}
+
+.w3-indigo,
+.w3-hover-indigo:hover {
+  color: #fff !important;
+  background-color: #3f51b5 !important
+}
+
+.w3-khaki,
+.w3-hover-khaki:hover {
+  color: #000 !important;
+  background-color: #f0e68c !important
+}
+
+.w3-lime,
+.w3-hover-lime:hover {
+  color: #000 !important;
+  background-color: #cddc39 !important
+}
+
+.w3-orange,
+.w3-hover-orange:hover {
+  color: #000 !important;
+  background-color: #ff9800 !important
+}
+
+.w3-deep-orange,
+.w3-hover-deep-orange:hover {
+  color: #fff !important;
+  background-color: #ff5722 !important
+}
+
+.w3-pink,
+.w3-hover-pink:hover {
+  color: #fff !important;
+  background-color: #e91e63 !important
+}
+
+.w3-purple,
+.w3-hover-purple:hover {
+  color: #fff !important;
+  background-color: #9c27b0 !important
+}
+
+.w3-deep-purple,
+.w3-hover-deep-purple:hover {
+  color: #fff !important;
+  background-color: #673ab7 !important
+}
+
+.w3-red,
+.w3-hover-red:hover {
+  color: #fff !important;
+  background-color: #f44336 !important
+}
+
+.w3-sand,
+.w3-hover-sand:hover {
+  color: #000 !important;
+  background-color: #fdf5e6 !important
+}
+
+.w3-teal,
+.w3-hover-teal:hover {
+  color: #fff !important;
+  background-color: #009688 !important
+}
+
+.w3-yellow,
+.w3-hover-yellow:hover {
+  color: #000 !important;
+  background-color: #ffeb3b !important
+}
+
+.w3-white,
+.w3-hover-white:hover {
+  color: #000 !important;
+  background-color: #fff !important
+}
+
+.w3-black,
+.w3-hover-black:hover {
+  color: #fff !important;
+  background-color: #000 !important
+}
+
+.w3-grey,
+.w3-hover-grey:hover,
+.w3-gray,
+.w3-hover-gray:hover {
+  color: #000 !important;
+  background-color: #9e9e9e !important
+}
+
+.w3-light-grey,
+.w3-hover-light-grey:hover,
+.w3-light-gray,
+.w3-hover-light-gray:hover {
+  color: #000 !important;
+  background-color: #f1f1f1 !important
+}
+
+.w3-dark-grey,
+.w3-hover-dark-grey:hover,
+.w3-dark-gray,
+.w3-hover-dark-gray:hover {
+  color: #fff !important;
+  background-color: #616161 !important
+}
+
+.w3-pale-red,
+.w3-hover-pale-red:hover {
+  color: #000 !important;
+  background-color: #ffdddd !important
+}
+
+.w3-pale-green,
+.w3-hover-pale-green:hover {
+  color: #000 !important;
+  background-color: #ddffdd !important
+}
+
+.w3-pale-yellow,
+.w3-hover-pale-yellow:hover {
+  color: #000 !important;
+  background-color: #ffffcc !important
+}
+
+.w3-pale-blue,
+.w3-hover-pale-blue:hover {
+  color: #000 !important;
+  background-color: #ddffff !important
+}
+
+.w3-text-amber,
+.w3-hover-text-amber:hover {
+  color: #ffc107 !important
+}
+
+.w3-text-aqua,
+.w3-hover-text-aqua:hover {
+  color: #00ffff !important
+}
+
+.w3-text-blue,
+.w3-hover-text-blue:hover {
+  color: #2196F3 !important
+}
+
+.w3-text-light-blue,
+.w3-hover-text-light-blue:hover {
+  color: #87CEEB !important
+}
+
+.w3-text-brown,
+.w3-hover-text-brown:hover {
+  color: #795548 !important
+}
+
+.w3-text-cyan,
+.w3-hover-text-cyan:hover {
+  color: #00bcd4 !important
+}
+
+.w3-text-blue-grey,
+.w3-hover-text-blue-grey:hover,
+.w3-text-blue-gray,
+.w3-hover-text-blue-gray:hover {
+  color: #607d8b !important
+}
+
+.w3-text-green,
+.w3-hover-text-green:hover {
+  color: #4CAF50 !important
+}
+
+.w3-text-light-green,
+.w3-hover-text-light-green:hover {
+  color: #8bc34a !important
+}
+
+.w3-text-indigo,
+.w3-hover-text-indigo:hover {
+  color: #3f51b5 !important
+}
+
+.w3-text-khaki,
+.w3-hover-text-khaki:hover {
+  color: #b4aa50 !important
+}
+
+.w3-text-lime,
+.w3-hover-text-lime:hover {
+  color: #cddc39 !important
+}
+
+.w3-text-orange,
+.w3-hover-text-orange:hover {
+  color: #ff9800 !important
+}
+
+.w3-text-deep-orange,
+.w3-hover-text-deep-orange:hover {
+  color: #ff5722 !important
+}
+
+.w3-text-pink,
+.w3-hover-text-pink:hover {
+  color: #e91e63 !important
+}
+
+.w3-text-purple,
+.w3-hover-text-purple:hover {
+  color: #9c27b0 !important
+}
+
+.w3-text-deep-purple,
+.w3-hover-text-deep-purple:hover {
+  color: #673ab7 !important
+}
+
+.w3-text-red,
+.w3-hover-text-red:hover {
+  color: #f44336 !important
+}
+
+.w3-text-sand,
+.w3-hover-text-sand:hover {
+  color: #fdf5e6 !important
+}
+
+.w3-text-teal,
+.w3-hover-text-teal:hover {
+  color: #009688 !important
+}
+
+.w3-text-yellow,
+.w3-hover-text-yellow:hover {
+  color: #d2be0e !important
+}
+
+.w3-text-white,
+.w3-hover-text-white:hover {
+  color: #fff !important
+}
+
+.w3-text-black,
+.w3-hover-text-black:hover {
+  color: #000 !important
+}
+
+.w3-text-grey,
+.w3-hover-text-grey:hover,
+.w3-text-gray,
+.w3-hover-text-gray:hover {
+  color: #757575 !important
+}
+
+.w3-text-light-grey,
+.w3-hover-text-light-grey:hover,
+.w3-text-light-gray,
+.w3-hover-text-light-gray:hover {
+  color: #f1f1f1 !important
+}
+
+.w3-text-dark-grey,
+.w3-hover-text-dark-grey:hover,
+.w3-text-dark-gray,
+.w3-hover-text-dark-gray:hover {
+  color: #3a3a3a !important
+}
+
+.w3-border-amber,
+.w3-hover-border-amber:hover {
+  border-color: #ffc107 !important
+}
+
+.w3-border-aqua,
+.w3-hover-border-aqua:hover {
+  border-color: #00ffff !important
+}
+
+.w3-border-blue,
+.w3-hover-border-blue:hover {
+  border-color: #2196F3 !important
+}
+
+.w3-border-light-blue,
+.w3-hover-border-light-blue:hover {
+  border-color: #87CEEB !important
+}
+
+.w3-border-brown,
+.w3-hover-border-brown:hover {
+  border-color: #795548 !important
+}
+
+.w3-border-cyan,
+.w3-hover-border-cyan:hover {
+  border-color: #00bcd4 !important
+}
+
+.w3-border-blue-grey,
+.w3-hover-border-blue-grey:hover,
+.w3-border-blue-gray,
+.w3-hover-border-blue-gray:hover {
+  border-color: #607d8b !important
+}
+
+.w3-border-green,
+.w3-hover-border-green:hover {
+  border-color: #4CAF50 !important
+}
+
+.w3-border-light-green,
+.w3-hover-border-light-green:hover {
+  border-color: #8bc34a !important
+}
+
+.w3-border-indigo,
+.w3-hover-border-indigo:hover {
+  border-color: #3f51b5 !important
+}
+
+.w3-border-khaki,
+.w3-hover-border-khaki:hover {
+  border-color: #f0e68c !important
+}
+
+.w3-border-lime,
+.w3-hover-border-lime:hover {
+  border-color: #cddc39 !important
+}
+
+.w3-border-orange,
+.w3-hover-border-orange:hover {
+  border-color: #ff9800 !important
+}
+
+.w3-border-deep-orange,
+.w3-hover-border-deep-orange:hover {
+  border-color: #ff5722 !important
+}
+
+.w3-border-pink,
+.w3-hover-border-pink:hover {
+  border-color: #e91e63 !important
+}
+
+.w3-border-purple,
+.w3-hover-border-purple:hover {
+  border-color: #9c27b0 !important
+}
+
+.w3-border-deep-purple,
+.w3-hover-border-deep-purple:hover {
+  border-color: #673ab7 !important
+}
+
+.w3-border-red,
+.w3-hover-border-red:hover {
+  border-color: #f44336 !important
+}
+
+.w3-border-sand,
+.w3-hover-border-sand:hover {
+  border-color: #fdf5e6 !important
+}
+
+.w3-border-teal,
+.w3-hover-border-teal:hover {
+  border-color: #009688 !important
+}
+
+.w3-border-yellow,
+.w3-hover-border-yellow:hover {
+  border-color: #ffeb3b !important
+}
+
+.w3-border-white,
+.w3-hover-border-white:hover {
+  border-color: #fff !important
+}
+
+.w3-border-black,
+.w3-hover-border-black:hover {
+  border-color: #000 !important
+}
+
+.w3-border-grey,
+.w3-hover-border-grey:hover,
+.w3-border-gray,
+.w3-hover-border-gray:hover {
+  border-color: #9e9e9e !important
+}
+
+.w3-border-light-grey,
+.w3-hover-border-light-grey:hover,
+.w3-border-light-gray,
+.w3-hover-border-light-gray:hover {
+  border-color: #f1f1f1 !important
+}
+
+.w3-border-dark-grey,
+.w3-hover-border-dark-grey:hover,
+.w3-border-dark-gray,
+.w3-hover-border-dark-gray:hover {
+  border-color: #616161 !important
+}
+
+.w3-border-pale-red,
+.w3-hover-border-pale-red:hover {
+  border-color: #ffe7e7 !important
+}
+
+.w3-border-pale-green,
+.w3-hover-border-pale-green:hover {
+  border-color: #e7ffe7 !important
+}
+
+.w3-border-pale-yellow,
+.w3-hover-border-pale-yellow:hover {
+  border-color: #ffffcc !important
+}
+
+.w3-border-pale-blue,
+.w3-hover-border-pale-blue:hover {
+  border-color: #e7ffff !important
+}
+
+.w3-metro-darken {
+  color: #fff !important;
+  background-color: #1d1d1d !important
+}
+
+.w3-metro-light-blue {
+  color: #000 !important;
+  background-color: #eff4ff !important
+}
+
+.w3-metro-blue {
+  color: #fff !important;
+  background-color: #2d89ef !important
+}
+
+.w3-metro-dark-blue {
+  color: #fff !important;
+  background-color: var(--bg-primary-color) !important
+}
+
+.w3-text-metro-dark-blue {
+  color: #2b5797;
+}
+
+.w3-hover-metro-dark-blue:hover {
+  color: #fff !important;
+  background-color: #2b5797 !important;
+}
+
+.w3-hover-round-large {
+  border-radius: 8px;
+}
+
+.alert-success {
+  color: #000;
+  background-color: #ccc;
+}
+
+.alert-failure {
+  color: #fff;
+  background-color: #b91d47;
+}
+
+.links-list a:not(:last-of-type)::after {
+  content: " | "
+}
+
+.label-check {
+  margin-left: 5px;
+}
+
+#page-content {
+  padding-top: 48px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.page-container {
+  padding-top: 10px;
+}
+
+.w3-row .threequarter {
+  width: 75%;
+  float: left;
+}
+
+.w3-row .quarter {
+  width: 25%;
+  float: left;
+}
+
+#form-login {
+  width: 600px;
+}
+
+.w3-button.w3-edit {
+  background-color: #f1f1f1;
+}
+
+.w3-button.w3-edit:hover {
+  background-color: var(--bg-primary-color);
+}
+
+.w3-button.w3-delete {
+  background-color: #f1f1f1;
+}
+
+.w3-button.w3-delete:hover {
+  background-color: #b91d47 !important;
+}
+
+.fields {
+  margin-bottom: 20px;
+}
+
+.fields li {
+  padding-left: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.accordion {
+  cursor: pointer;
+}
+
+.footerNavbar-container {
+  position: fixed;
+  bottom: 5px;
+  width: 100%;
+  padding-right: 8px;
+}
+
+.footerNavbar {
+  overflow: hidden;
+  width: 100%;
+  background-color: var(--bg-primary-color);
+}
+
+.footerNavbar .w3-bar-item {
+  padding: 3px;
+}
+
+.footerNavbar .w3-bar-item p {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 10pt;
+}
+
+.footerNavbar .w3-btn {
+  padding: 6px 4px;
+}
+
+#searchSidebar {
+  display: none;
+}
+
+#overlay {
+  position: fixed;
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 4;
+  cursor: pointer;
+}
+
+#message {
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -125px;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 36px;
+}
+
+#message.show {
+  visibility: visible;
+}
+
+.tag {
+  display: inline-block;
+}
+
+.field-label {
+  font-weight: bold;
+}
+
+.summary {
+  background-color: #fff;
+  padding: 4px
+}
+
+.summary p {
+  padding: 0;
+  margin: 0;
+}
+
+#types_menu, #settings_menu {
+  margin-left: 2px !important;
+}
+
+tr.htmx-swapping td {
+  opacity: 0;
+  transition: opacity 1s ease-out;
+}
+
+
+
+#items_search, #all_items_search {
+  position: sticky;
+  top: 50px;
+  z-index: 2;
+  background-color: #ddd;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.panel-search {
+  background-color: #fff;
+  padding: 4px;
+}
+
+table.stickyheader thead {
+  position: sticky;
+  top: 50px;
+  z-index: 2;
+}
+
+table.stickyheader.searchopened thead {
+  top: 180px;
+}
+
+.input-container {
+  display: flex;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.input-container .prefix {
+  margin-right: 8px;
+}
+
+.input-container input {
+  flex-grow: 1;
+  border: none;
+  outline: none;
+  padding: 8px;
+}
+
+.input-container:focus-within {
+  border-color: #777;
+}
+
+/* Small */
+@media (max-width:600px) {
+  i {
+    font-size: 20px;
+  }
+
+  fieldset {
+    margin-bottom: 10px;
+  }
+
+  #quickbox-content {
+    padding-top: var(--quickbox-topbar-height);
+  }
+
+  #message {
+    min-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    left: 0;
+  }
+
+  .page-container {
+    padding-bottom: 100px;
+  }
+
+  #page-title i {
+    font-size: 20px;
+  }
+
+  #searchBar #searchText {
+    width: 250px;
+  }
+
+  #form-login {
+    width: 96%;
+  }
+
+  #searchBar {
+    display: none;
+  }
+
+  #searchSidebar {
+    display: block;
+  }
+
+  .w3-table-all.responsive table,
+  .w3-table-all.responsive thead,
+  .w3-table-all.responsive tbody,
+  .w3-table-all.responsive th,
+  .w3-table-all.responsive td,
+  .w3-table-all.responsive tr {
+    display: block;
+  }
+
+  .w3-table-all thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .w3-table-all.responsive tr {
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+  }
+
+  .w3-table-all.responsive td {
+    border: none;
+    position: relative;
+    padding-left: 30%;
+  }
+
+  .w3-table-all.responsive td.no-label {
+    padding-left: 6px;
+  }
+
+  .w3-table-all.responsive td.title {
+    color: #2b5797;
+    font-weight: 400;
+    font-size: 18px;
+  }
+
+  .w3-table-all.responsive td:before {
+    position: absolute;
+    left: 6px;
+    content: attr(data-label);
+    font-weight: bold;
+  }
+
+  .w3-table-all.responsive td.no-label:before {
+    position: absolute;
+    left: 6px;
+    content: "";
+    font-weight: bold;
+  }
+
+  .w3-modal-full {
+    width: 100vw !important;
+    height: 100vh !important;
+    padding-top:0 !important;
+    background-color: #fff;
+  }
+
+  .w3-modal-full .w3-modal-content {
+    margin:0 !important;
+  }
+}
+
+@media (max-width:992px) {
+
+  /* The switch - the box around the slider */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 46px;
+    height: 24px;
+  }
+
+  /* Hide default HTML checkbox */
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  input:checked+.slider {
+    background-color: #2b5797;
+  }
+
+  input:focus+.slider {
+    box-shadow: 0 0 1px #2b5797;
+  }
+
+  input:checked+.slider:before {
+    -webkit-transform: translateX(22px);
+    -ms-transform: translateX(22px);
+    transform: translateX(22px);
+  }
+
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 24px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
+}
+
+/* Medium */
+@media (max-width:992px) and (min-width:601px) {
+  #page-title-container h5 {
+    padding-left: 0px;
+  }
+}
+
+/* Min medium */
+@media (min-width:601px) {
+  .home-card-summary {
+    height: 250px;
+    overflow: auto;
+  }  
+
+  #quickbox {
+    width: 400px;
+    position: fixed;
+    top: 50px;
+    left: calc(100vw - 420px);
+    height: calc(100vh - 50px);
+    background-color: #fff !important;
+    border-left: 2px solid #fff;
+    border-top: 2px solid #fff;
+  }
+  #quickbox-top-bar {
+    position: relative;
+  }
+  #quickbox-footer {
+    position: relative;
+  }
+
+  #quickbox-content {
+    height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
+  }
+
+}
+
+/* Large */
+@media (min-width:993px) {
+  .w3-row > .w3-half:first {
+    padding-right: 4px;
+  }
+
+  .w3-row > .w3-half:nth-child(2) {
+    padding-left: 4px;
+  }
+
+  #page-main {
+    padding-left: 300px;
+  }
+
+  #page-top-bar {
+    padding-right: 300px;
+  }
+}
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index b22e4de..f297245 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -1,18 +1,15 @@
 {{define "base"}}
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" >
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" >
-    <meta http-equiv="Pragma" content="no-cache" >
-    <meta http-equiv="Expires" content="0" >
     <title>BrainMinder</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="/static/manifest.json" />
     <link rel="stylesheet" href="/static/bootstrap-icons/font/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/static/easymde/easymde.min.css" />
     <link rel="stylesheet" href="/static/css/slimselect.css" />
     <link rel="stylesheet" href="/static/css/main.css" />
+    <link rel="stylesheet" href="/static/css/orig.css" />
     <link rel="icon" type="image/svg+xml" href="/static/img/brainminder-icon.svg">
     
     {{block "page:meta" . }}
@@ -24,39 +21,21 @@
 
     {{template "partial:sidebar" .}}
 
-    <div
-      id="page-main"
-      class="w3-main"
-    >
-    <div class="w3-bar w3-top w3-metro-dark-blue w3-large" id="page-top-bar">
-      <div class="w3-bar-item" id="page-title-container">
-        <a
-          class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey"
-          onclick="bm_toggle_sidebar('main-sidebar'); return false"
-          href="#"
-          style="padding-left: 4px; padding-right: 10px;">
-          <img src="/static/img/brainminder.svg" style="height: 32px;" />
+    <div id="page-main" class="w3-main">
+    <div class="w3-top w3-metro-dark-blue w3-large" id="page-top-bar">
+      <div id="page-title-container">
+        <a class="w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-left: 4px; padding-right: 10px;">
+          <img src="/static/img/brainminder.svg" alt="BrainMinder" style="height: 32px;" />
         </a>
         <div id="page-title">{{template "page:title" .}}</div>
-        <div class="w3-bar-item w3-right w3-hide-small" id="searchBar">
-          <form
-          method="POST"
-          hx-post="/items/search"
-          hx-target="#page-content"
-          hx-push-url="true"
-          >
+        <div id="search-bar">
+          <form class="w3-hide-small" method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
           <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
-          <input
-            type="text"
-            id="searchText"
-            name="SearchText"
-            class="w3-bar-item w3-input"
-            placeholder="Search.."
-          />
-          <button type="submit" class="w3-bar-item w3-button w3-round-large" style="margin-left: 4px;padding: 4px 8px; margin-top: 4px; margin-right: 8px;"><i class="bi bi-search"></i></button>
-          <button type="button" onclick="bm_toggle_quickbox();" class="w3-bar-item w3-button w3-round-large" style="margin-left: 4px;padding: 4px 8px; margin-top: 4px; margin-right: 8px;"><i class="bi bi-inbox-fill"></i></button>
+          <input type="text" id="search-text" name="SearchText" class="w3-bar-item" placeholder="Search.." />
+          <button type="submit" style="margin-left: 4px;padding: 4px 8px;"><i class="bi bi-search"></i></button>
           </form>
-        </div>  
+          <button type="button" onclick="bm_toggle_quickbox();" style="margin-left: 4px;padding: 4px 8px; margin-right: 8px;"><i class="bi bi-inbox-fill"></i></button>
+        </div>
       </div>
     </div>  
 
@@ -73,8 +52,7 @@
     <div id="modal-confirm-dialog" class="w3-modal" style="display: none;">
       <div id="modal-confirm-dialog-content" class="w3-modal-content w3-round-large w3-padding w3-animate-top">
           <header class="w3-container">
-              <span _="on click hide #modal-confirm-dialog"
-              class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
+              <span _="on click hide #modal-confirm-dialog" class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
               <h5></h5>
             </header>
             <div class="w3-container">
@@ -93,21 +71,14 @@
     <div id="quickbox" class="w3-light-gray">
       <div class="w3-bar w3-top w3-metro-dark-blue w3-large noswipe" id="quickbox-top-bar">
         <div class="w3-bar-item" id="quickbox-title-container">
-          <button
-            type="button"
-            class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey"
-            onclick="bm_toggle_sidebar('main-sidebar');"
-            style="padding-left: 4px; padding-right: 10px;">
-            <img class="w3-hide-large" src="/static/img/brainminder.svg" style="height: 32px;">
+          <button type="button" class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey"
+            onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;">
+            <img class="w3-hide-large" alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
         </button>
           <div id="quickbox-title">
             <div class="w3-left"><h5>Quickbox</h5></div>
             <div class="w3-right" style="margin-top: 6px; margin-right: 12px;">
-              <button
-                  class="w3-button w3-medium w3-round-large"
-                  style="padding: 2px 6px;"
-                  onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i>
-              </button>
+              <button class="w3-button w3-medium w3-round-large" style="padding: 2px 6px;" onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i></button>
             </div>
           </div>
         </div>
diff --git a/assets/templates/full.tmpl b/assets/templates/full.tmpl
index b2343fc..b2eb676 100644
--- a/assets/templates/full.tmpl
+++ b/assets/templates/full.tmpl
@@ -1,16 +1,13 @@
 {{define "full"}}
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" >
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" >
-    <meta http-equiv="Pragma" content="no-cache" >
-    <meta http-equiv="Expires" content="0" >
     <title>BrainMinder</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="manifest" href="/static/manifest.json">
     <link rel="stylesheet" href="/static/bootstrap-icons/font/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/static/css/main.css" />
+    <link rel="stylesheet" href="/static/css/orig.css" />
     <link rel="icon" type="image/x-icon" href="/static/img/brainminder-icon.svg">
 
     {{block "page:meta" . }}
diff --git a/assets/templates/items/all_list_title.tmpl b/assets/templates/items/all_list_title.tmpl
index 3b39871..67bfdc5 100644
--- a/assets/templates/items/all_list_title.tmpl
+++ b/assets/templates/items/all_list_title.tmpl
@@ -1,9 +1,3 @@
 {{define "page:title"}}
-    <div class="w3-left">
-        <h5>All Items</h5>
-    </div>
-    <div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
-        <a class="w3-button w3-medium w3-round-large" href="#" onclick="bm_toggle_visibility('all_items_search'); return false;"><i class="bi bi-search"></i></a>
-        <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-    </div>
+    <h5>All Items</h5>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/items/create_title.tmpl b/assets/templates/items/create_title.tmpl
index 9ada960..e671c2b 100644
--- a/assets/templates/items/create_title.tmpl
+++ b/assets/templates/items/create_title.tmpl
@@ -1,5 +1,3 @@
 {{define "page:title"}}
-<div class="w3-left">
     <h5>New {{ .type.Title}}</h5>
-</div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index fca45a3..45ac6d6 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -5,33 +5,14 @@
 {{ $fields_present = true }}
 {{ end }}
 
-<form
-  method="POST"
-  hx-post="{{.formAction}}"
-  hx-target="{{.formTarget}}"
->
-<div class="w3-container page-container">
-  <div class="tab-bar w3-bar w3-light-gray">
-    <a
-      class="active tab-button w3-bar-item w3-button w3-border-top w3-border-left w3-border-right"
-      onclick="bm_open_tab(this, 'tab-button', 'tab', 'general')"
-    >
-      General
-    </a>
+<form method="POST" hx-post="{{.formAction}}"  hx-target="{{.formTarget}}">
+<div class="page-container">
+  <div class="tab-bar">
+    <a class="active tab-button" onclick="bm_open_tab(this, 'tab-button', 'tab', 'general')">General</a>
     {{ if $fields_present }}
-    <a
-      class="tab-button w3-bar-item w3-button w3-border-top w3-border-left w3-border-right"
-      onclick="bm_open_tab(this, 'tab-button', 'tab', 'fields')"
-    >
-      Fields
-    </a>
+    <a class="tab-button" onclick="bm_open_tab(this, 'tab-button', 'tab', 'fields')">Fields</a>
     {{ end }}
-    <a
-      class="tab-button w3-bar-item w3-button w3-border-top w3-border-left w3-border-right"
-      onclick="bm_open_tab(this, 'tab-button', 'tab', 'relationsSection')"
-    >
-      Relations
-    </a>
+    <a class="tab-button" onclick="bm_open_tab(this, 'tab-button', 'tab', 'relationsSection')">Relations</a>
   </div>
 
   <div id="general" class="tab" style="display: block">
@@ -39,7 +20,7 @@
       <div class="w3-half">
         <p>
           <label for="item-title">Title</label>
-          <input name="Title" id="item-title" type="text" value="{{.item.Title}}" style="width: 100%"/>
+          <input name="Title" id="item-title" type="text" value="{{.item.Title}}" />
         </p>
         <p>
           {{ widget_select "Type_id" "Type" .item.Type_id .types `style="width: 100%"` }}
@@ -66,21 +47,14 @@
     {{ if eq .item.Type_show_description 1}}
     <p>
       <label for="item-description">Description</label>
-      <textarea
-        name="Description"
-        class="w3-input w3-border"
-        id="item-description"
-        type="text"
-        rows="10"
-        >{{.item.Description}}</textarea
-      >
+      <textarea name="Description" class="w3-input w3-border" id="item-description" rows="10">{{.item.Description}}</textarea>
     </p>
     {{ end }}
     <div class="w3-row">
       <div class="w3-half">
         <p>
           <label for="item-tags">Tags</label>
-          <input name="Tags" id="item-tags" type="text" value="{{.item.Tags}}" style="width: 100%" />
+          <input name="Tags" id="item-tags" type="text" value="{{.item.Tags}}" />
         </p>   
       </div>
       <div class="w3-half">
@@ -91,10 +65,11 @@
     </div>
 
     <p>
-      <label>
+      <label class="switch">
         <input id="on_dashboard" name="On_dashboard" type="checkbox" value="1" {{if eq .item.On_dashboard 1}} checked="checked" {{end}} />
-        On dashboard
+        <span class="slider round"></span>
       </label>
+      <label for="on_dashboard" class="label-checkbox">On dashboard</label>
     </p>
   </div>
 
@@ -117,25 +92,11 @@
       <legend>Add items</legend>
       <div class="w3-row">
           <div class="w3-col l6 m9 s10">
-            <input
-              id="search-item-relation"
-              name="SearchText"
-              type="text"
-              value=""
-              placeholder="Search"
-              hx-get="/items/search-for-relations/{{.item.Id}}"
-              hx-trigger="search-item-relation, keyup changed delay:1s"
-              hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}"
-              hx-target="#items-list-for-relations"
+            <input id="search-item-relation" name="SearchText" type="text" value="" placeholder="Search" hx-get="/items/search-for-relations/{{.item.Id}}" hx-trigger="search-item-relation, keyup changed delay:1s" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations"
             />
           </div>
           <div class="w3-col l6 m3 s1" style="padding-left: 10px;">  
-            <a
-            class="w3-btn w3-metro-blue w3-round-large"
-            hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}"
-            hx-target="#items-list-for-relations"
-            hx-get="/items/search-for-relations/{{.item.Id}}"
-            ><i class="bi bi-search"></i><span class="w3-hide-small"> Find</span></a>
+            <a class="button w3-metro-blue" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="w3-hide-small"> Find</span></a>
             </div>
       </div>
       <div id="items-list-for-relations" style="margin-top:10px">
@@ -144,75 +105,34 @@
   </div>
 </div>
   <p class="w3-hide-small w3-container">
-    <button class="w3-btn w3-metro-dark-blue w3-round-large">
+    <button class="w3-metro-dark-blue">
       <i class="bi bi-floppy"></i> Save
     </button>
     {{ if not (eq .item.Id 0) }}
-    <a
-      class="w3-btn w3-metro-blue w3-round-large"
-      href="/item/read/{{.item.Id}}"
-      hx-get="/item/read/{{.item.Id}}"
-      hx-push-url="true"
-      hx-target="#page-content"
-      ><i class="bi bi-binoculars"></i> View</a
-    >
-    <a class="w3-button w3-metro-blue w3-delete w3-round-large" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
-    <a
-     class="w3-btn w3-metro-blue w3-round-large"
-     href="#"
-     hx-target="#modal-container"
-     hx-get="/item/share/{{.item.Id}}"
-     title="Share"
-     ><i class="bi bi-share-fill"></i> Share</a
-    >
+    <a class="button w3-metro-blue" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i> View</a>
+    <a class="button w3-metro-blue w3-delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
+    <a class="button w3-metro-blue" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i> Share</a>
     {{ end }}
-    <a
-      class="w3-btn w3-metro-blue w3-round-large"
-      hx-target="#page-content"
-      hx-push-url="true"
-      hx-get="/items/type/{{.item.Type_id}}"
-      ><i class="bi bi-arrow-left-circle"></i> Back</a
-    >
+    <a class="button w3-metro-blue" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i> Back</a>
   </p>
 
   <div class="footerNavbar-container">
-  <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
+  <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large">
     <div class="w3-bar-item">
-    <button type="submit" class="w3-button w3-metro-dark-blue w3-round-large" title="Save">
+    <button type="submit" class="w3-metro-dark-blue" title="Save">
       <i class="bi bi-floppy"></i>
     </button>
     </div>
     {{ if not (eq .item.Id 0) }}
     <div class="w3-bar-item">
-      <a
-    class="w3-button w3-metro-dark-blue w3-delete w3-round-large"
-    hx-delete="/item/delete/{{.item.Id}}"
-    hx-target="#page-content"
-    hx-trigger="confirmed"
-    onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"
-    title="Delete"
-    ><i class="bi bi-trash"></i>
+      <a class="button w3-metro-dark-blue w3-delete" hx-delete="/item/delete/{{.item.Id}}"  hx-target="#page-content"  hx-trigger="confirmed"  onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"  title="Delete"><i class="bi bi-trash"></i>
   </a>
     </div>
     <div class="w3-bar-item">
-      <a
-    class="w3-button w3-metro-dark-blue w3-round-large"
-    href="#"
-    hx-target="#modal-container"
-    hx-get="/item/share/{{.item.Id}}"
-    title="Share"
-    ><i class="bi bi-share-fill"></i>
-    </a>
+      <a class="button w3-metro-dark-blue" href="#"  hx-target="#modal-container"  hx-get="/item/share/{{.item.Id}}"  title="Share"><i class="bi bi-share-fill"></i></a>
     </div>
     <div class="w3-bar-item">
-      <a
-    class="w3-button w3-metro-dark-blue w3-round-large"
-    href="/item/read/{{.item.Id}}"
-    hx-get="/item/read/{{.item.Id}}"
-    hx-push-url="true"
-    hx-target="#page-content"
-    title="View"
-    ><i class="bi bi-binoculars"></i>
+      <a class="button w3-metro-dark-blue" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="View"><i class="bi bi-binoculars"></i>
   </a>
     </div>
     {{ end }}
diff --git a/assets/templates/items/relations.tmpl b/assets/templates/items/relations.tmpl
index ab10a36..b1d6a86 100644
--- a/assets/templates/items/relations.tmpl
+++ b/assets/templates/items/relations.tmpl
@@ -43,7 +43,7 @@
         <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
         {{ range (stringToArray .Categories "|")}}
           {{ $category_name := index $.categoriesMap .}}
-          <div class="tag" style="padding: 3px">
+          <div class="tag" style="padding: 3px">class="w3-button w3-round-large w3-hover-metro-dark-blue w3-medium"
             {{ $category_name }}
           </div>
         {{ end }}
diff --git a/assets/templates/items/update_title.tmpl b/assets/templates/items/update_title.tmpl
index ba73259..b731aa9 100644
--- a/assets/templates/items/update_title.tmpl
+++ b/assets/templates/items/update_title.tmpl
@@ -1,8 +1,3 @@
 {{define "page:title"}}
-<div class="w3-left">
     <h5>Edit {{.item.Type_title}}</h5>
-</div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/pages/home_items.tmpl b/assets/templates/pages/home_items.tmpl
index 76cf518..88bbde0 100644
--- a/assets/templates/pages/home_items.tmpl
+++ b/assets/templates/pages/home_items.tmpl
@@ -15,26 +15,11 @@
     <div class="w3-card w3-display-container w3-round-large" style="padding: 10px; background-color: #fff;">
       <div class="w3-row">
         <div class="w3-col l11 m11 s11">
-          <h5 style="color: #2b5797">
-            <a
-              class="w3-hide-small"
-              href="/item/view/{{.Id}}"
-              hx-get="/item/view/{{.Id}}"
-              hx-target="#modal-container"
-              ><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
-    
-            <a
-            class="w3-hide-medium w3-hide-large"
-            href="/item/read/{{.Id}}"
-            hx-get="/item/read/{{.Id}}"
-            hx-target="#page-content"
-            hx-push-url="true"
-            ><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
-         
+          <h5>
+            <a class="w3-hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
+            <a class="w3-hide-medium w3-hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
           </h5>
-          <div class="home-card-summary">
-            {{.Summary | markdownfy | safeHTML}}
-          </div>
+          <div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
         </div>
         <div class="w3-col l1 m1 s1">
           <a
diff --git a/assets/templates/partials/sidebar.tmpl b/assets/templates/partials/sidebar.tmpl
index 55dc4e8..43dc6c8 100644
--- a/assets/templates/partials/sidebar.tmpl
+++ b/assets/templates/partials/sidebar.tmpl
@@ -1,10 +1,7 @@
 {{define "partial:sidebar"}}
 <!-- Sidebar/menu -->
-<nav
-  class="w3-sidebar w3-collapse w3-white w3-animate-left"
-  id="main-sidebar"
->
-<div id="appTitle">
+<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" id="main-sidebar">
+<div id="app-title">
   <a class="w3-hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
     <img src="/static/img/brainminder.svg" style="height: 32px; padding-right: 10px;" />
     <span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder
@@ -16,96 +13,72 @@
 </div>
 
 <div id="main-sidebar-content">
-<div class="w3-bar-block w3-container" id="searchSidebar">
-  <form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" hx-on:submit="bm_sidebar_click('main-sidebar')">
-<input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
-<div class="w3-row">
-  <div class="threequarter">
-  <input type="text" id="searchText" name="SearchText" placeholder="Search.." />
-  </div>
-  <div class="quarter">
-    <button type="submit" class="w3-right w3-button w3-round-large w3-metro-dark-blue" style="padding: 4px 8px; margin-top: 5px; margin-right: 8px;"><i class='bi bi-search'></i></button>
-  </div>
-  </div>
-  </form>
+  <div class="w3-bar-block w3-container" id="searchSidebar">
+    <form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" hx-on:submit="bm_sidebar_click('main-sidebar')">
+      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
+      <div class="w3-row">
+        <div class="threequarter">
+          <input type="text" id="searchText" name="SearchText" placeholder="Search.." />
+        </div>
+        <div class="quarter">
+          <button type="submit" class="w3-right w3-button w3-round-large w3-metro-dark-blue" style="padding: 4px 8px; margin-top: 5px; margin-right: 8px;"><i class='bi bi-search'></i></button>
+        </div>
+      </div>
+    </form>
 </div>
 
-<div class="w3-container">
-  <h5 class="w3-text-metro-dark-blue">
-    <a
-      hx-get="/"
-      hx-target="#page-content"
-      hx-push-url="true"
-      href="/"
-      hx-on:click="bm_sidebar_click('main-sidebar')"
-    >
-    <i class="bi bi-speedometer"></i> Dashboard
-    </a>
-  </h5>
-
-  <h5 class="w3-text-metro-dark-blue">
-    <i class="bi bi-journals"></i> Notebook
-  </h5>
-  <form method="POST" action="/" hx-post="/" hx-push-url="true" hx-target="#page-content">
-    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
-    {{template "partial:notebooks-list" . }}
-  </form>
-</div>
-
-  <div class="w3-container">
-    <h5 class="w3-text-metro-dark-blue accordion" onclick="bm_toggle_visibility('types_menu')">
-      <i class="bi bi-list-task"></i> Items <i class='w3-right bi bi-caret-down types_menu'></i><i class='w3-right bi bi-caret-up hidden types_menu'></i>
+  <div class="sidebar-block">
+    <h5 class="w3-text-metro-dark-blue">
+      <a hx-get="/" hx-target="#page-content" hx-push-url="true" href="/" hx-on:click="bm_sidebar_click('main-sidebar')"><i class="bi bi-speedometer"></i> Dashboard</a>
     </h5>
   </div>
-  <div id="types_menu" class="w3-bar-block w3-margin-left w3-margin-right hidden">
+
+  <div class="sidebar-block">
+    <h5 class="w3-text-metro-dark-blue">
+      <i class="bi bi-journals"></i> Notebook
+    </h5>
+    <form method="POST" action="/" hx-post="/" hx-push-url="true" hx-target="#page-content">
+      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
+      {{template "partial:notebooks-list" . }}
+    </form>
+  </div>
+
+  <div class="sidebar-block">
+    <h5 class="w3-text-metro-dark-blue accordion" onclick="bm_toggle_visibility('types_menu')">
+      <i class="bi bi-list-task"></i> Items <i class='w3-right bi bi-chevron-down types_menu'></i><i class='w3-right bi bi-chevron-up hidden types_menu'></i>
+    </h5>
+  </div>
+
+  <div id="types_menu" class="sidebar-block hidden">
     {{template "partial:types-list" . }}
-    <a
-      class="w3-bar-item w3-button w3-padding w3-hover-metro-dark-blue w3-hover-round-large"
-      hx-get="/items"
-      hx-target="#page-content"
-      hx-push-url="true"
-      href="/items"
-      hx-on:click="bm_sidebar_click('main-sidebar')"
-    >
-    <i class="bi bi-list-task"></i> <strong>All</strong>
-    </a>
+    <div class="menu-item">
+    <div class="menu-item-title">
+      <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/items" hx-target="#page-content" hx-push-url="true" href="/items" hx-on:click="bm_sidebar_click('main-sidebar')">
+      <i class="bi bi-list-task"></i> <strong>All</strong>
+      </a>
+    </div>
+    </div>
   </div>
   
-  <div class="w3-container">
+  <div class="sidebar-block">
     <h5 class="w3-text-metro-dark-blue accordion" onclick="bm_toggle_visibility('settings_menu')">
-      <i class="bi bi-gear-fill"></i> Settings <i class='w3-right bi bi-caret-down settings_menu'></i><i class='w3-right bi bi-caret-up hidden settings_menu'></i>
+      <i class="bi bi-gear-fill"></i> Settings <i class='w3-right bi bi-chevron-down settings_menu'></i><i class='w3-right bi bi-chevron-up hidden settings_menu'></i>
     </h5>
   </div>
-  <div id="settings_menu" class="w3-bar-block w3-margin-left w3-margin-right hidden">
-    <a
-      class="w3-bar-item w3-button w3-padding w3-hover-metro-dark-blue w3-hover-round-large"
-      hx-get="/notebooks"
-      hx-target="#page-content"
-      hx-push-url="true"
-      href="/notebooks"
-      hx-on:click="bm_sidebar_click('main-sidebar')">
+
+  <div id="settings_menu" class="sidebar-block sidebar-menu hidden">
+    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/notebooks" hx-target="#page-content" hx-push-url="true" href="/notebooks" hx-on:click="bm_sidebar_click('main-sidebar')">
       <i class="bi bi-journals"></i> Notebooks
     </a>
-    <a
-      class="w3-bar-item w3-button w3-padding w3-hover-metro-dark-blue w3-hover-round-large"
-      hx-get="/categories"
-      hx-target="#page-content"
-      hx-push-url="true"
-      href="/categories"
-      hx-on:click="bm_sidebar_click('main-sidebar')">
+    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/categories" hx-target="#page-content" hx-push-url="true" href="/categories" hx-on:click="bm_sidebar_click('main-sidebar')">
       <i class="bi bi-bookmarks"></i> Categories
     </a>
-    <a
-      class="w3-bar-item w3-button w3-padding w3-hover-metro-dark-blue w3-hover-round-large"
-      hx-get="/types"
-      hx-target="#page-content"
-      hx-push-url="true"
-      href="/types"
-      hx-on:click="bm_sidebar_click('main-sidebar')">
+    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/types" hx-target="#page-content" hx-push-url="true" href="/types" hx-on:click="bm_sidebar_click('main-sidebar')">
       <i class="bi bi-boxes"></i> Types
     </a>
   </div>
-  <div class="w3-container">
+
+  <div class="sidebar-block">
     <h5 class="w3-text-metro-dark-blue">
     <a href="/logout"><i class="bi bi-box-arrow-left"></i></i> Logout</a>
     </h5>
diff --git a/assets/templates/partials/types-list.tmpl b/assets/templates/partials/types-list.tmpl
index 25e0f80..df2a2d9 100644
--- a/assets/templates/partials/types-list.tmpl
+++ b/assets/templates/partials/types-list.tmpl
@@ -1,21 +1,14 @@
 {{define "partial:types-list"}}
-<div class="w3-bar-item w3-row" id="types-list" style="padding: 0;">
+<div id="types-list">
   {{ range .typesList }}
-      <div class="w3-row">
-        <div class="w3-col w3-right" style="width: 50px;">
-          <a class="w3-button w3-round-large w3-hover-metro-dark-blue w3-medium" hx-on:click="bm_sidebar_click('main-sidebar')" hx-get="/item/create/{{ .Id }}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square"></i></a>
+      <div class="menu-item">
+        <div class="menu-item-action">
+          <a class="button w3-hover-metro-dark-blue w3-medium" hx-on:click="bm_sidebar_click('main-sidebar')" hx-get="/item/create/{{ .Id }}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square"></i></a>
         </div>
-      <div class="w3-rest">
-      <a
-      class="w3-button w3-hover-metro-dark-blue w3-hover-round-large"
-      style="text-align:left; width: 100%"
-      hx-get="/items/type/{{.Id}}"
-      hx-target="#page-content"
-      hx-push-url="true"
-      href="/items/type/{{.Id}}"
-      hx-on:click="bm_sidebar_click('main-sidebar')">
-      <i class="{{.Icon}}"></i> {{.Title}}
-      </a>
+        <div class="menu-item-title">
+            <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/items/type/{{.Id}}" hx-target="#page-content" hx-push-url="true" href="/items/type/{{.Id}}" hx-on:click="bm_sidebar_click('main-sidebar')">
+            <i class="{{.Icon}}"></i> {{.Title}}
+        </a>
       </div>
       </div>
     {{ end }}
diff --git a/internal/funcs/funcs.go b/internal/funcs/funcs.go
index 6ed59a9..743b20f 100644
--- a/internal/funcs/funcs.go
+++ b/internal/funcs/funcs.go
@@ -428,9 +428,8 @@ func widget_checkboxes(name string, label string, value any, options []WidgetOpt
 		}
 		id_str := strings.ReplaceAll(name+"-"+option.Key, " ", "-")
 		o = o + "<p>"
-		//o = o + fmt.Sprintf(`<label class="switch"><input id="%v" type="checkbox" name="%v" %v value="%v" %v /><span class="slider round"></span></label>`, id_str, name, checked, option.Key, attributes)
-		o = o + fmt.Sprintf(`<label><input id="%v" type="checkbox" name="%v" %v value="%v" %v />%v</label>`, id_str, name, checked, option.Key, attributes, option.Value)
-		//o = o + fmt.Sprintf(`<label class="label-checkbox" for="%v">%v</label>`, id_str, option.Value)
+		o = o + fmt.Sprintf(`<label class="switch"><input id="%v" type="checkbox" name="%v" %v value="%v" %v /><span class="slider round"></span></label>`, id_str, name, checked, option.Key, attributes)
+		o = o + fmt.Sprintf(`<label class="label-checkbox" for="%v">%v</label>`, id_str, option.Value)
 		o = o + "</p>"
 	}
 	o = o + "</fiedlset>"