From 6bc5ddeb1f3b9a5f8deeb954f407b4dfd5c6b3e4 Mon Sep 17 00:00:00 2001
From: Martin Donnelly <martin.donnelly@aiber.co.uk>
Date: Fri, 10 May 2024 15:52:25 +0100
Subject: [PATCH] Updated css to enable non form based select options, added
 base work for non form select

---
 .../omni-search-box.component.html            |   20 +
 .../omni-search-box.component.ts              |   21 +
 src/hammer.css                                | 1114 ++++++++++++++++-
 3 files changed, 1154 insertions(+), 1 deletion(-)

diff --git a/src/app/omni-search-box/omni-search-box.component.html b/src/app/omni-search-box/omni-search-box.component.html
index 9e7f42b..c1c8b46 100644
--- a/src/app/omni-search-box/omni-search-box.component.html
+++ b/src/app/omni-search-box/omni-search-box.component.html
@@ -24,6 +24,16 @@
 
     <div>selectedOption:{{selectedOption}}</div>
 
+***
+      <div>
+        <div class="dropdown__menu -is-open">
+
+            <li *ngFor="let optionSetting of searchConfig" (click)="selectedClickHandler($event, optionSetting.mode.title)" >
+              <a [class.selected] = "selectedOption === optionSetting.mode.title">{{optionSetting.mode.title}}</a>
+              </li>
+
+        </div>
+      </div>
     </div>
     <div>
       <label for="modifierSelect" >Modifier</label>
@@ -33,6 +43,16 @@
         </option>
       </select>
       <div>selectedModifier:{{selectedModifier}}</div>
+***
+      <div>
+        <div class="dropdown__menu -is-open">
+
+          <li *ngFor="let modifierSetting of currentModifierList" (click)="modifiedClickHandler($event, modifierSetting.title)">
+            <a [class.selected] = "selectedModifier === modifierSetting.title">{{modifierSetting.title}}</a>
+          </li>
+
+        </div>
+      </div>
     </div>
 
     <div>
diff --git a/src/app/omni-search-box/omni-search-box.component.ts b/src/app/omni-search-box/omni-search-box.component.ts
index 7fddeea..92618b0 100644
--- a/src/app/omni-search-box/omni-search-box.component.ts
+++ b/src/app/omni-search-box/omni-search-box.component.ts
@@ -142,4 +142,25 @@ export class OmniSearchBoxComponent implements OnInit {
     }
 
   }
+
+  selectedClickHandler(ev: MouseEvent, title: string) {
+
+    ev.stopImmediatePropagation();
+    console.log('selectedClickHandler', title);
+    console.log('selectedClickHandler', ev);
+
+    this.selectedOption = title;
+
+    this.updateModeSelection();
+  }
+  modifiedClickHandler(ev: MouseEvent, title: string) {
+
+    ev.stopImmediatePropagation();
+    console.log('selectedClickHandler', title);
+    console.log('selectedClickHandler', ev);
+
+    this.selectedModifier = title;
+
+    this.updateModifierSelection();
+  }
 }
diff --git a/src/hammer.css b/src/hammer.css
index 4e19761..4315d8c 100644
--- a/src/hammer.css
+++ b/src/hammer.css
@@ -1,2 +1,1114 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto Condensed,sans-serif;font-size:12px;height:100%;line-height:1.6;overflow-x:hidden}a{color:#5e81ac;text-decoration:none}a:hover{color:#666}a.active{color:#b48ead}ul{list-style:none}img{width:100%}.container{margin:auto;max-width:1100px;padding:0 2rem}hr{border-width:0;border-top:1px solid #2e3440;margin-bottom:2rem;margin-top:2.2rem}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.pad{padding:.5rem}.pad--1{padding:1rem}.pad--2{padding:2rem}.pad--3{padding:3rem}.pady{padding:.5rem 0}.pady--top{padding-top:.5rem}.pady--bottom{padding-bottom:.5rem}.pady--1{padding:1rem 0}.pady--2{padding:2rem 0}.pady--3{padding:3rem 0}.padx{padding:0 .5rem}.padx--right{padding-right:.5rem}.padx--left{padding-left:.5rem}.padx--1{padding:0 1rem}.padx--2{padding:0 2rem}.padx--3{padding:0 3rem}.grid{display:-webkit-box;display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid--1{grid-gap:1rem;display:grid;grid-template-columns:repeat(1,1fr)}.grid--2{grid-gap:1rem;display:grid;grid-template-columns:repeat(2,1fr)}.grid--3{grid-gap:1px;display:grid;grid-template-columns:repeat(3,1fr)}.grid--4{grid-gap:1rem;display:grid;grid-template-columns:repeat(4,1fr)}.row{margin-left:3px;margin-right:3px}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{margin-left:0;width:100%}.col-1-3rd{width:32.666667%}.col-2-3rd{width:65.3333333333%}.col-half{width:48%}.offset-1-col{margin-left:8.66666666667%}.offset-2-col{margin-left:17.3333333333%}.offset-3-col{margin-left:26%}.offset-4-col{margin-left:34.6666666667%}.offset-5-col{margin-left:43.3333333333%}.offset-6-col{margin-left:52%}.offset-7-col{margin-left:60.6666666667%}.offset-8-col{margin-left:69.3333333333%}.offset-9-col{margin-left:78%}.offset-10-col{margin-left:86.6666666667%}.offset-11-col{margin-left:95.3333333333%}.offset-1-3rd-col{margin-left:34.6666666667%}.offset-2-3rd-col{margin-left:69.3333333333%}.offset-half-col{margin-left:52%}.x-large{font-size:4rem}.large,.x-large{line-height:1.2;margin-bottom:1rem}.large{font-size:3rem}.lead{font-size:1.5rem;margin-bottom:1rem}.text-primary{color:#5e81ac}.text-dark,.text-light{color:#2e3440}.text-success{color:#a3be8c}.text-danger{color:#bf616a}.text-highlight{color:#b48ead}.text-highlight2{color:#ebcb8b}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-display1,h1{font-size:34px;font-weight:400;line-height:40px}.text-title,h3{font-size:20px;font-weight:400;line-height:28px}.text-subhead,h4{font-size:16px;font-weight:400;line-height:24px}.text-body2,h5{font-size:14px;font-weight:500;line-height:24px}.text-body1{font-size:14px;font-weight:400;line-height:20px}.text-caption{font-size:12px;font-weight:400;line-height:16px}.align-middle{vertical-align:middle!important}.all-center{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;margin:auto;text-align:center;width:100%}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-bottom{vertical-align:bottom!important}.btn,.btn--slim{background:#e5e9f0;border:none;color:#333;cursor:pointer;display:inline-block;font-size:1rem;margin-right:.5rem;outline:none;padding:.4rem 1.3rem;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in}.btn--slim:disabled,.btn:disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:.6;pointer-events:none}.btn--slim:enabled:hover,.btn:enabled:hover{opacity:.8}.btn--slim{padding:.4rem}.btn-link{background:none;margin:0;padding:0}.btn-block{display:block;width:100%}.btn-sm,.btn-sm--slim{font-size:.8rem;margin-right:.2rem;padding:.3rem 1rem}.btn-sm--slim{padding:.3rem}.badge{border-radius:3px;display:inline-block;font-size:.6rem;margin:.3rem;padding:.1rem .4rem;text-align:center}.alert,.badge{background:#e5e9f0;color:#333}.alert{margin:1rem 0;opacity:.9;padding:.7rem}.alert-primary,.badge-primary,.bg-primary,.btn-primary{background:#5e81ac;color:#fff}.alert-light,.badge-light,.bg-light,.btn-light{background:#e5e9f0;color:#333}.alert-dark,.badge-dark,.bg-dark,.btn-dark{background:#2e3440;color:#fff}.alert-danger,.badge-danger,.bg-danger,.btn-danger{background:#bf616a;color:#fff}.alert-success,.badge-success,.bg-success,.btn-success{background:#a3be8c;color:#fff}.alert-white,.badge-white,.bg-white,.btn-white{background:#fff;border:1px solid #ccc;color:#333}.badge-light,.bg-light{border:1px solid #ccc}.table-responsive{display:block;overflow-x:auto;width:100%}table{border:0;border-collapse:collapse;margin-bottom:1rem;max-width:100%;width:100%}tr{border-top:1px solid #ccc}tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.04)}tbody td{border-top:1px solid #e1e1e1}.navbar{-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between;margin-bottom:1rem;min-height:56px;opacity:.9;position:fixed;width:100%;z-index:2}.navbar,.navbar ul{display:-webkit-box;display:-ms-flexbox;display:flex}.navbar a{color:#fff;margin:0 .25rem;padding:.45rem}.navbar a:hover{color:#e5e9f0}.navbar .welcome span{margin-right:.6rem}.navbar .navbar-section{-webkit-box-align:center;-webkit-box-flex:1;-ms-flex-align:center;align-items:center;display:-webkit-box;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.navbar .navbar-brand{font-size:200%;font-weight:700}header+div.container{height:calc(100vh - 56px);max-height:calc(100vh - 56px);overflow:auto;position:relative;top:56px}.m{margin:.5rem}.m--1{margin:1rem}.m--2{margin:2rem}.m--3{margin:3rem}.mb{margin-bottom:.1rem!important}.mb--1{margin-bottom:.2rem!important}.mb--2{margin-bottom:.4rem!important}.ml{margin-left:.1rem!important}.ml--1{margin-left:.2rem!important}.ml--2{margin-left:.4rem!important}.mr{margin-right:.1rem!important}.mr--1{margin-right:.2rem!important}.mr .mr-2{margin-right:.4rem!important}.mt{margin-top:.1rem!important}.mt--1{margin-top:.2rem!important}.mt--2{margin-top:.4rem!important}.mx{margin-left:.5rem!important;margin-right:.5rem!important}.mx--1{margin-left:1rem!important;margin-right:1rem!important}.mx--2{margin-left:2rem!important;margin-right:2rem!important}.my{margin:.5rem 0}.my--1{margin:1rem 0}.my--2{margin:2rem 0}.my--3{margin:3rem 0}.card,.card--slim{border:1px dotted #ccc;margin:.7rem 0;padding:1rem}.card--slim{padding:5px}.cardTitle{border-bottom:1px solid #eee;margin-bottom:15px}.cardV2{background-color:#fff;border-radius:4px;-webkit-box-shadow:0 0 4px 0 rgba(0,0,0,.14),0 3px 4px 0 rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 0 4px 0 rgba(0,0,0,.14),0 3px 4px 0 rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);min-width:0}.seemore{font-size:14px;font-weight:500}.cardLink{color:#2196f3;margin-top:10px}input{margin:.2rem 0}.form-text{color:#888;display:block;margin-top:.3rem}input[type=date],input[type=email],input[type=password],input[type=text],select,textarea{border:1px solid #ccc;display:block;padding:.1rem;width:100%}button,input[type=submit]{font:inherit}label,legend{display:block;font-weight:600;margin-bottom:.1rem}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{background-color:#dcc894;display:inline-block;font-weight:400;margin-left:.5rem}table td,table th{padding:1rem;text-align:left}table th{background:var(--light-color)}.list{margin:.5rem 0}.list li{padding-bottom:.3rem}.dataRow{cursor:pointer}.modalWindow{background:rgba(0,0,0,.2);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;z-index:99999}.modalWindow:target{opacity:1;pointer-events:auto}.modalWindow>div{background:#fff;margin:10% auto;position:relative;width:500px}.alias{cursor:alias}.all-scroll{cursor:all-scroll}.auto{cursor:auto}.cell{cursor:cell}.context-menu{cursor:context-menu}.col-resize{cursor:col-resize}.copy{cursor:copy}.crosshair{cursor:crosshair}.default{cursor:default}.e-resize{cursor:e-resize}.ew-resize{cursor:ew-resize}.grab{cursor:-webkit-grab;cursor:grab}.grabbing{cursor:-webkit-grabbing;cursor:grabbing}.help{cursor:help}.move{cursor:move}.n-resize{cursor:n-resize}.ne-resize{cursor:ne-resize}.nesw-resize{cursor:nesw-resize}.ns-resize{cursor:ns-resize}.nw-resize{cursor:nw-resize}.nwse-resize{cursor:nwse-resize}.no-drop{cursor:no-drop}.none{cursor:none}.not-allowed{cursor:not-allowed}.pointer{cursor:pointer}.progress{cursor:progress}.row-resize{cursor:row-resize}.s-resize{cursor:s-resize}.se-resize{cursor:se-resize}.sw-resize{cursor:sw-resize}.text{cursor:text}.url{cursor:pointer}.w-resize{cursor:w-resize}.wait{cursor:wait}.zoom-in{cursor:-webkit-zoom-in;cursor:zoom-in}.zoom-out{cursor:-webkit-zoom-out;cursor:zoom-out}.panel{background-color:#fff;border-radius:0;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);margin-bottom:20px;padding:15px}.panel:after,.panel:before{content:" ";display:table}.panel:after{clear:both}.glassy{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(2px);background-color:rgba(31,28,23,.6)}@media (max-width:480px){.container{max-width:98vw;overflow-y:scroll;padding:0}}@media (max-height:480px){.navbar{min-height:36px}header+div.container{max-height:calc(100vh - 36px);position:relative;top:36px}.navbar .navbar-brand{font-size:125%;font-weight:700}}.nrccAlert a{color:#00ffa2}
+@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
+
+*, :after, :before {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0
+}
+
+body {
+  font-family: Roboto Condensed, sans-serif;
+  font-size: 12px;
+  height: 100%;
+  line-height: 1.6;
+  overflow-x: hidden
+}
+
+a {
+  color: #5e81ac;
+  text-decoration: none
+}
+
+a:hover {
+  color: #666
+}
+
+a.active {
+  color: #b48ead
+}
+
+ul {
+  list-style: none
+}
+
+img {
+  width: 100%
+}
+
+.container {
+  margin: auto;
+  max-width: 1100px;
+  overflow-y: scroll;
+  padding: 0 2rem
+}
+
+hr {
+  border-width: 0;
+  border-top: 1px solid #2e3440;
+  margin-bottom: 2rem;
+  margin-top: 2.2rem
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex
+}
+
+.pad {
+  padding: .5rem
+}
+
+.pad--1 {
+  padding: 1rem
+}
+
+.pad--2 {
+  padding: 2rem
+}
+
+.pad--3 {
+  padding: 3rem
+}
+
+.pady {
+  padding: .5rem 0
+}
+
+.pady--top {
+  padding-top: .5rem
+}
+
+.pady--bottom {
+  padding-bottom: .5rem
+}
+
+.pady--1 {
+  padding: 1rem 0
+}
+
+.pady--2 {
+  padding: 2rem 0
+}
+
+.pady--3 {
+  padding: 3rem 0
+}
+
+.padx {
+  padding: 0 .5rem
+}
+
+.padx--right {
+  padding-right: .5rem
+}
+
+.padx--left {
+  padding-left: .5rem
+}
+
+.padx--1 {
+  padding: 0 1rem
+}
+
+.padx--2 {
+  padding: 0 2rem
+}
+
+.padx--3 {
+  padding: 0 3rem
+}
+
+.grid {
+  display: -webkit-box;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap
+}
+
+.grid--1 {
+  grid-gap: 1rem;
+  display: grid;
+  grid-template-columns:repeat(1, 1fr)
+}
+
+.grid--2 {
+  grid-gap: 1rem;
+  display: grid;
+  grid-template-columns:repeat(2, 1fr)
+}
+
+.grid--3 {
+  grid-gap: 1px;
+  display: grid;
+  grid-template-columns:repeat(3, 1fr)
+}
+
+.grid--4 {
+  grid-gap: 1rem;
+  display: grid;
+  grid-template-columns:repeat(4, 1fr)
+}
+
+.row {
+  margin-left: 3px;
+  margin-right: 3px
+}
+
+.row:after, .row:before {
+  content: " ";
+  display: table
+}
+
+.row:after {
+  clear: both
+}
+
+.column, .columns {
+  margin-left: 4%
+}
+
+.column:first-child, .columns:first-child {
+  margin-left: 0
+}
+
+.col-1 {
+  width: 8.33333%
+}
+
+.col-2 {
+  width: 16.66667%
+}
+
+.col-3 {
+  width: 25%
+}
+
+.col-4 {
+  width: 33.33333%
+}
+
+.col-5 {
+  width: 41.66667%
+}
+
+.col-6 {
+  width: 50%
+}
+
+.col-7 {
+  width: 58.33333%
+}
+
+.col-8 {
+  width: 66.66667%
+}
+
+.col-9 {
+  width: 75%
+}
+
+.col-10 {
+  width: 83.33333%
+}
+
+.col-11 {
+  width: 91.66667%
+}
+
+.col-12 {
+  margin-left: 0;
+  width: 100%
+}
+
+.col-1-3rd {
+  width: 32.666667%
+}
+
+.col-2-3rd {
+  width: 65.3333333333%
+}
+
+.col-half {
+  width: 48%
+}
+
+.offset-1-col {
+  margin-left: 8.66666666667%
+}
+
+.offset-2-col {
+  margin-left: 17.3333333333%
+}
+
+.offset-3-col {
+  margin-left: 26%
+}
+
+.offset-4-col {
+  margin-left: 34.6666666667%
+}
+
+.offset-5-col {
+  margin-left: 43.3333333333%
+}
+
+.offset-6-col {
+  margin-left: 52%
+}
+
+.offset-7-col {
+  margin-left: 60.6666666667%
+}
+
+.offset-8-col {
+  margin-left: 69.3333333333%
+}
+
+.offset-9-col {
+  margin-left: 78%
+}
+
+.offset-10-col {
+  margin-left: 86.6666666667%
+}
+
+.offset-11-col {
+  margin-left: 95.3333333333%
+}
+
+.offset-1-3rd-col {
+  margin-left: 34.6666666667%
+}
+
+.offset-2-3rd-col {
+  margin-left: 69.3333333333%
+}
+
+.offset-half-col {
+  margin-left: 52%
+}
+
+.x-large {
+  font-size: 4rem
+}
+
+.large, .x-large {
+  line-height: 1.2;
+  margin-bottom: 1rem
+}
+
+.large {
+  font-size: 3rem
+}
+
+.lead {
+  font-size: 1.5rem;
+  margin-bottom: 1rem
+}
+
+.text-primary {
+  color: #5e81ac
+}
+
+.text-dark, .text-light {
+  color: #2e3440
+}
+
+.text-success {
+  color: #a3be8c
+}
+
+.text-danger {
+  color: #bf616a
+}
+
+.text-highlight {
+  color: #b48ead
+}
+
+.text-highlight2 {
+  color: #ebcb8b
+}
+
+.text-center {
+  text-align: center
+}
+
+.text-right {
+  text-align: right
+}
+
+.text-left {
+  text-align: left
+}
+
+.text-lowercase {
+  text-transform: lowercase
+}
+
+.text-uppercase {
+  text-transform: uppercase
+}
+
+.text-capitalize {
+  text-transform: capitalize
+}
+
+.text-display1, h1 {
+  font-size: 34px;
+  font-weight: 400;
+  line-height: 40px
+}
+
+.text-title, h3 {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px
+}
+
+.text-subhead, h4 {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px
+}
+
+.text-body2, h5 {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px
+}
+
+.text-body1 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px
+}
+
+.text-caption {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px
+}
+
+.align-middle {
+  vertical-align: middle !important
+}
+
+.all-center {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-content: center;
+  margin: auto;
+  text-align: center;
+  width: 100%
+}
+
+.text-justify {
+  text-align: justify !important
+}
+
+.text-nowrap {
+  white-space: nowrap !important
+}
+
+.align-baseline {
+  vertical-align: baseline !important
+}
+
+.align-top {
+  vertical-align: top !important
+}
+
+.align-bottom {
+  vertical-align: bottom !important
+}
+
+.btn, .btn--slim {
+  background: #e5e9f0;
+  border: none;
+  color: #333;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1rem;
+  margin-right: .5rem;
+  outline: none;
+  padding: .4rem 1.3rem;
+  -webkit-transition: opacity .2s ease-in;
+  transition: opacity .2s ease-in
+}
+
+.btn--slim:disabled, .btn:disabled {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  cursor: not-allowed;
+  opacity: .6;
+  pointer-events: none
+}
+
+.btn--slim:enabled:hover, .btn:enabled:hover {
+  opacity: .8
+}
+
+.btn--slim {
+  padding: .4rem
+}
+
+.btn-link {
+  background: none;
+  margin: 0;
+  padding: 0
+}
+
+.btn-block {
+  display: block;
+  width: 100%
+}
+
+.btn-sm, .btn-sm--slim {
+  font-size: .8rem;
+  margin-right: .2rem;
+  padding: .3rem 1rem
+}
+
+.btn-sm--slim {
+  padding: .3rem
+}
+
+.badge {
+  border-radius: 3px;
+  display: inline-block;
+  font-size: .6rem;
+  margin: .3rem;
+  padding: .1rem .4rem;
+  text-align: center
+}
+
+.alert, .badge {
+  background: #e5e9f0;
+  color: #333
+}
+
+.alert {
+  margin: 1rem 0;
+  opacity: .9;
+  padding: .7rem
+}
+
+.alert-primary, .badge-primary, .bg-primary, .btn-primary {
+  background: #5e81ac;
+  color: #fff
+}
+
+.alert-light, .badge-light, .bg-light, .btn-light {
+  background: #e5e9f0;
+  color: #333
+}
+
+.alert-dark, .badge-dark, .bg-dark, .btn-dark {
+  background: #2e3440;
+  color: #fff
+}
+
+.alert-danger, .badge-danger, .bg-danger, .btn-danger {
+  background: #bf616a;
+  color: #fff
+}
+
+.alert-success, .badge-success, .bg-success, .btn-success {
+  background: #a3be8c;
+  color: #fff
+}
+
+.alert-white, .badge-white, .bg-white, .btn-white {
+  background: #fff;
+  border: 1px solid #ccc;
+  color: #333
+}
+
+.badge-light, .bg-light {
+  border: 1px solid #ccc
+}
+
+.table-responsive {
+  display: block;
+  overflow-x: auto;
+  width: 100%
+}
+
+table {
+  border: 0;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+  max-width: 100%;
+  width: 100%
+}
+
+tr {
+  border-top: 1px solid #ccc
+}
+
+tbody tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, .04)
+}
+
+tbody td {
+  border-top: 1px solid #e1e1e1
+}
+
+.navbar {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  min-height: 56px;
+  opacity: .9;
+  position: fixed;
+  width: 100%;
+  z-index: 2
+}
+
+.navbar, .navbar ul {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex
+}
+
+.navbar a {
+  color: #fff;
+  margin: 0 .25rem;
+  padding: .45rem
+}
+
+.navbar a:hover {
+  color: #e5e9f0
+}
+
+.navbar .welcome span {
+  margin-right: .6rem
+}
+
+.navbar .navbar-section {
+  -webkit-box-align: center;
+  -webkit-box-flex: 1;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex: 1 0 0;
+  flex: 1 0 0
+}
+
+.navbar .navbar-section:not(:first-child):last-child {
+  -ms-flex-pack: end;
+  -webkit-box-pack: end;
+  justify-content: flex-end
+}
+
+.navbar .navbar-brand {
+  font-size: 200%;
+  font-weight: 700
+}
+
+header + div.container {
+  height: calc(100vh - 56px);
+  max-height: calc(100vh - 56px);
+  overflow: auto;
+  position: relative;
+  top: 56px
+}
+
+.m {
+  margin: .5rem
+}
+
+.m--1 {
+  margin: 1rem
+}
+
+.m--2 {
+  margin: 2rem
+}
+
+.m--3 {
+  margin: 3rem
+}
+
+.mb {
+  margin-bottom: .1rem !important
+}
+
+.mb--1 {
+  margin-bottom: .2rem !important
+}
+
+.mb--2 {
+  margin-bottom: .4rem !important
+}
+
+.ml {
+  margin-left: .1rem !important
+}
+
+.ml--1 {
+  margin-left: .2rem !important
+}
+
+.ml--2 {
+  margin-left: .4rem !important
+}
+
+.mr {
+  margin-right: .1rem !important
+}
+
+.mr--1 {
+  margin-right: .2rem !important
+}
+
+.mr .mr-2 {
+  margin-right: .4rem !important
+}
+
+.mt {
+  margin-top: .1rem !important
+}
+
+.mt--1 {
+  margin-top: .2rem !important
+}
+
+.mt--2 {
+  margin-top: .4rem !important
+}
+
+.mx {
+  margin-left: .5rem !important;
+  margin-right: .5rem !important
+}
+
+.mx--1 {
+  margin-left: 1rem !important;
+  margin-right: 1rem !important
+}
+
+.mx--2 {
+  margin-left: 2rem !important;
+  margin-right: 2rem !important
+}
+
+.my {
+  margin: .5rem 0
+}
+
+.my--1 {
+  margin: 1rem 0
+}
+
+.my--2 {
+  margin: 2rem 0
+}
+
+.my--3 {
+  margin: 3rem 0
+}
+
+.card, .card--slim {
+  border: 1px dotted #ccc;
+  margin: .7rem 0;
+  padding: 1rem
+}
+
+.card--slim {
+  padding: 5px
+}
+
+.cardTitle {
+  border-bottom: 1px solid #eee;
+  margin-bottom: 15px
+}
+
+.cardV2 {
+  background-color: #fff;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .14), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .14), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
+  min-width: 0
+}
+
+.seemore {
+  font-size: 14px;
+  font-weight: 500
+}
+
+.cardLink {
+  color: #2196f3;
+  margin-top: 10px
+}
+
+.dropdown {
+  display: inline-block;
+  position: relative
+}
+
+[data-toggle=dropdown] {
+  outline: 0
+}
+
+.dropdown__menu {
+  background-clip: padding-box;
+  background-color: #f6f7f9;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 1px 3px hsla(0, 0%, 8%, .12), 0 1px 2px hsla(0, 0%, 8%, .24);
+  box-shadow: 0 1px 3px hsla(0, 0%, 8%, .12), 0 1px 2px hsla(0, 0%, 8%, .24);
+  display: none;
+  font-size: 18px;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  z-index: 100
+}
+
+@media (-ms-high-contrast: active),(-ms-high-contrast: none) {
+  .dropdown__menu {
+    border-left: 1px solid hsla(0, 0%, 8%, .12);
+    border-top: 1px solid hsla(0, 0%, 8%, .12)
+  }
+}
+
+@supports (-ms-ime-align:auto) {
+  .dropdown__menu {
+    border-left: 1px solid hsla(0, 0%, 8%, .12);
+    border-top: 1px solid hsla(0, 0%, 8%, .12)
+  }
+}
+
+.dropdown__menu.-is-open {
+  display: block
+}
+
+.dropdown__menu > li > a {
+  clear: both;
+  color: #5e81ac;
+  display: block;
+  font-weight: 400;
+  line-height: 20px;
+  padding: 3px 20px;
+  text-decoration: none;
+  white-space: nowrap
+}
+
+.dropdown__menu > li > a.selected, .dropdown__menu > li > a:focus, .dropdown__menu > li > a:hover {
+  background-color: #e5e9f0;
+  color: #d08770;
+  text-decoration: none
+}
+
+.dropdown__menu > .-is-disabled > a, .dropdown__menu > .-is-disabled > a:focus, .dropdown__menu > .-is-disabled > a:hover {
+  color: #4c566a
+}
+
+.dropdown__menu > .-is-disabled > a .selected, .dropdown__menu > .-is-disabled > a:focus, .dropdown__menu > .-is-disabled > a:hover {
+  background-color: transparent;
+  background-image: none;
+  cursor: not-allowed;
+  text-decoration: none
+}
+
+.dropdown__menu--right {
+  left: auto;
+  right: 0
+}
+
+.dropdown--up > .dropdown__menu {
+  margin: 0 0 2px
+}
+
+.dropdown--right > .dropdown__menu {
+  margin: 0 0 0 2px
+}
+
+.dropdown--left > .dropdown__menu {
+  margin: 0 2px 0 0
+}
+
+input {
+  margin: .2rem 0
+}
+
+.form-text {
+  color: #888;
+  display: block;
+  margin-top: .3rem
+}
+
+input[type=date], input[type=email], input[type=password], input[type=text], select, textarea {
+  border: 1px solid #ccc;
+  display: block;
+  padding: .1rem;
+  width: 100%
+}
+
+button, input[type=submit] {
+  font: inherit
+}
+
+label, legend {
+  display: block;
+  font-weight: 600;
+  margin-bottom: .1rem
+}
+
+input[type=checkbox], input[type=radio] {
+  display: inline
+}
+
+label > .label-body {
+  background-color: #dcc894;
+  display: inline-block;
+  font-weight: 400;
+  margin-left: .5rem
+}
+
+table td, table th {
+  padding: 1rem;
+  text-align: left
+}
+
+table th {
+  background: var(--light-color)
+}
+
+.list {
+  margin: .5rem 0
+}
+
+.list li {
+  padding-bottom: .3rem
+}
+
+.dataRow {
+  cursor: pointer
+}
+
+.modalWindow {
+  background: rgba(0, 0, 0, .2);
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  right: 0;
+  text-align: center;
+  top: 0;
+  z-index: 99999
+}
+
+.modalWindow:target {
+  opacity: 1;
+  pointer-events: auto
+}
+
+.modalWindow > div {
+  background: #fff;
+  margin: 10% auto;
+  position: relative;
+  width: 500px
+}
+
+.alias {
+  cursor: alias
+}
+
+.all-scroll {
+  cursor: all-scroll
+}
+
+.auto {
+  cursor: auto
+}
+
+.cell {
+  cursor: cell
+}
+
+.context-menu {
+  cursor: context-menu
+}
+
+.col-resize {
+  cursor: col-resize
+}
+
+.copy {
+  cursor: copy
+}
+
+.crosshair {
+  cursor: crosshair
+}
+
+.default {
+  cursor: default
+}
+
+.e-resize {
+  cursor: e-resize
+}
+
+.ew-resize {
+  cursor: ew-resize
+}
+
+.grab {
+  cursor: -webkit-grab;
+  cursor: grab
+}
+
+.grabbing {
+  cursor: -webkit-grabbing;
+  cursor: grabbing
+}
+
+.help {
+  cursor: help
+}
+
+.move {
+  cursor: move
+}
+
+.n-resize {
+  cursor: n-resize
+}
+
+.ne-resize {
+  cursor: ne-resize
+}
+
+.nesw-resize {
+  cursor: nesw-resize
+}
+
+.ns-resize {
+  cursor: ns-resize
+}
+
+.nw-resize {
+  cursor: nw-resize
+}
+
+.nwse-resize {
+  cursor: nwse-resize
+}
+
+.no-drop {
+  cursor: no-drop
+}
+
+.none {
+  cursor: none
+}
+
+.not-allowed {
+  cursor: not-allowed
+}
+
+.pointer {
+  cursor: pointer
+}
+
+.progress {
+  cursor: progress
+}
+
+.row-resize {
+  cursor: row-resize
+}
+
+.s-resize {
+  cursor: s-resize
+}
+
+.se-resize {
+  cursor: se-resize
+}
+
+.sw-resize {
+  cursor: sw-resize
+}
+
+.text {
+  cursor: text
+}
+
+.url {
+  cursor: pointer
+}
+
+.w-resize {
+  cursor: w-resize
+}
+
+.wait {
+  cursor: wait
+}
+
+.zoom-in {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in
+}
+
+.zoom-out {
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out
+}
+
+.panel {
+  background-color: #fff;
+  border-radius: 0;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
+  margin-bottom: 20px;
+  padding: 15px
+}
+
+.panel:after, .panel:before {
+  content: " ";
+  display: table
+}
+
+.panel:after {
+  clear: both
+}
+
+.glassy {
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(2px);
+  background-color: rgba(31, 28, 23, .6)
+}
+
+.nrccAlert a {
+  color: #00ffa2
+}
+
 /*# sourceMappingURL=hammer.css.map */