/*[MENU] ***********************************************************************************************************/
menu:empty {
  display: none;
}
/**
  * All menus are flexbox
  * Popup are vertical by default
  * Toolbar are horizontal by default
  * Footers contain both popup and toolbar menu
  * Floating toolbars type popup class toolbar
  * Toolbar type and class toolbar
  * Popup type and class popup (actionsheet) - no MI
  * Hub  type popup class toolbar
  * Dev created Toolbars can contain anything (forms + M and MI)
  * toolbars with wrap will wrap the MI
  * toolbar with expandable will expand when toggled
  * Hub(toolbar) child menu are horizontal
  * Floaters(toolbar) child menu are horizontal and vertical
  * menuitem button are 30px B1 P4/6 inner 16/20
  * in the picker type with flex-wrap default will be to stretch which can throw off the height calc
  * picker B1 P6/6 30 per row.... 150/1/6/6/1 = inner 136 / 4rows = 34 = M2/2 = 30
  * but face (text only)
  */
#menuContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  visibility: hidden !important;
}
/*[TOOLBAR] ***********************************************************************************************************/
/*a std toolbar a single row hbox of buttons etc... toolbars cant themselves be clicked but buttons can*/
menu.toolbar {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
  transition: max-width 0.5s ease-out;
}
.vbox > menu.toolbar {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
}
menu.toolbar.wrap {
  flex-wrap: wrap;
  flex: none;
}
menu.toolbar.expandable {
  max-width: 30px;
  overflow: hidden;
  flex-shrink: 0;
}
menu.toolbar.expandable.expanded.items6 {
  max-width: 180px;
}
menu.toolbar.expandable.expanded.items5 {
  max-width: 150px;
}
menu.toolbar.expandable.expanded.items4 {
  max-width: 120px;
}
menu.toolbar.expandable.expanded.items3 {
  max-width: 90px;
}
button.toolbar-button,
button[data-cmd] {
  text-transform: none;
  font-size: 13px;
  padding: 4px 6px;
  margin: 0;
  min-width: 30px;
}
button[data-cmd].active,
button[data-cmd]:active {
  color: #fff;
  border: 1px transparent solid;
  border-color: #ccc;
  background-color: #ccc;
  outline: none;
}
/*[TOOLBAR] END********************************************************************************************************/
/*[FOOTER-BAR] ********************************************************************************************************/
/*[DIALOG FOOTER]******************************************************************************************************/
footer.dialog-footer > menu.toolbar {
  justify-content: flex-end;
  width: 100%;
}
footer.dialog-footer > menu.toolbar > i.i-list::before {
  border-color: transparent;
}
footer.dialog-footer > menu.toolbar > i::before {
  display: block;
  margin-right: auto!important;
  margin-left: auto!important;
}
footer.dialog-footer.active > menu.toolbar.i-up::before {
  transform: rotate(180deg);
}
/*[PAGE FOOTER]********************************************************************************************************/
footer.page-footer.right.bottom {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  padding-right: 12px;
  transition: all 0.4s ease;
  background-color: transparent;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}
page.page-footer-open > footer.page-footer.right.bottom {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
  pointer-events: auto;
}
footer.page-footer.right.bottom > menu.popup {
  position: absolute;
  bottom: -100%;
  left: 18px;
  right: 18px;
  background-color: white;
  padding: 12px;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.44);
  transition: all 0.4s ease;
  transition: max-height 0.4s cubic-bezier(0.32, 1.18, 0.88, 1.5), visibility 0.3s cubic-bezier(0.32, 1.18, 0.88, 1.5), transform 0.3s ease-in-out, opacity 0.25s cubic-bezier(0.32, 1.18, 0.88, 1.5);
  max-height: 0;
  bottom: 72px;
  transform: translateY(25px);
  opacity: 0;
  visibility: hidden;
  border-radius: 2px;
}
page.page-footer-open > footer.page-footer.right.bottom > menu.popup {
  max-height: 500px;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
page.page-footer-open > footer.page-footer.right.bottom > button.fab {
  opacity: 1;
}
/*[FOOTER-BAR] END*****************************************************************************************************/
/*[MENU-POPUP] ********************************************************************************************************/
menu.popup {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
menu.popup > h2 {
  display: block;
  padding-left: 0;
  font-size: 18px;
}
/*a native dropdown variant does it exist - dont think so*/
menu.popup.dropdown {
  min-width: 160px;
  max-height: 450px;
  list-style: none;
  margin: 0;
  outline: none;
  overflow: auto;
  cursor: pointer;
}
/*a std dropdown menu*/
menu.popup button:not(.icon) {
  min-height: 40px;
  height: 40px;
  min-width: 100%;
  width: 100%;
  margin-left: 0;
  text-align: left;
  display: block ;
}
menu.popup > button.btn-danger {
  text-align: center;
}
menu.popup.toolbar {
  pointer-events: auto;
}
/*[MENU-POPUP] END*****************************************************************************************************/
/**[MENU-ARROW] ****************************************************************************************************/
menu.arrow {
  margin-left: -16px;
  margin-top: -1px;
}
menu.arrow::before {
  border: 8px solid transparent;
  background-color: transparent;
  content: '';
  display: block;
  position: absolute;
  bottom: -16px;
  top: auto;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border-top-color: white;
  margin-left: 8px;
  z-index: -2;
}
menu.arrow.centered {
  margin-left: auto;
  margin-top: -1px;
}
menu.arrow.centered::before {
  margin-left: 50%;
}
menu.arrow.right::before {
  margin-left: auto;
  margin-right: 8px;
}
/**[MENU-ARROW] END*************************************************************************************************/
/*[MENU-UDF] **********************************************************************************************************/
menu.context,
menu.submenu {
  display: flex;
  position: fixed;
  background: white;
  border: 1px solid #e0e0e0;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.26);
  visibility: visible;
  pointer-events: auto;
  transform: translate(0px, -100%);
  border-radius: 5px;
  z-index: 9999;
  max-width: 286px;
  padding: 0;
  overflow: visible;
}
menu.context.btn-grp,
menu.submenu.btn-grp {
  padding: 8px 0;
}
menu.context.centered,
menu.submenu.centered {
  transform: translate(-50%, -100%);
}
menu.context.horizontal,
menu.submenu.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  overflow: visible;
}
menu.context.vertical,
menu.submenu.vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 5px 0;
}
/*[MENU-UDF] END*******************************************************************************************************/
menu.toolbar.hub {
  align-items: flex-start;
  flex-direction: row!important;
  max-height: none;
}
menu.toolbar.hub > menuitem {
  padding: 0;
  border: none;
  height: auto;
}
menu.menu-sub-folder.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}
menuitem > menu.horizontal > menuitem {
  min-width: 0;
}
menu > hr {
  position: relative;
  border: none;
  background: #ccc;
  align-self: stretch;
  flex: none;
  width: auto;
  height: 1px;
  margin: 0 6px;
  pointer-events: none;
}
menu.horizontal > hr,
menu.toolbar > hr {
  height: auto;
  width: 1px;
  margin: 6px 0;
}
/*[MENUITEM] **********************************************************************************************************/
menuitem {
  display: block;
  white-space: nowrap;
  position: relative;
  color: #333;
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0;
  xpadding: 2px 44px 2px 30px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 30px;
  min-width: 30px;
  text-transform: none;
  pointer-events: all;
  line-height: 1;
  height: 30px;
  width: 30px;
}
menuitem.icon {
  padding: 4px 4px;
  line-height: 22px;
  text-align: center;
}
menuitem[label] {
  width: auto;
  min-width: 112px;
  max-width: 280px;
  padding: 4px 16px;
  line-height: 22px;
  text-align: left;
}
menuitem[label]::after {
  content: attr(label);
  line-height: 22px;
  font-size: 10px;
}
menuitem[label].icon-r::before,
menuitem[label].icon-l::before,
menuitem[label].icon::before {
  margin-right: 15px;
}
menuitem:hover {
  background-color: #eee;
}
menu.no-hover menuitem:hover {
  background-color: transparent;
}
menuitem > menu {
  display: none;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  background: white;
  border: 1px solid #e0e0e0;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.26);
  padding: 8px 0;
  z-index: 1;
  transform: translateX(-8px);
}
menuitem > menu.menu-sub-folder {
  border: none;
}
.gridedit.form-embed menuitem > menu,
.popup-editor menuitem > menu {
  transform: translate(-8px, -100%) translate(0, -30px);
}
menuitem.face > menu {
  transform: translate(-8px, 30px) translate(0, 0px);
}
.gridedit.form-embed menuitem.face > menu,
.popup-editor menuitem.face > menu {
  transform: translate(-8px, -100%);
}
.gridedit.form-embed .grid-inline.richtexteditor {
  transform: translate(0, 0);
}
menuitem > menu > menuitem {
  padding: 0 16px;
  display: block;
  min-height: 30px;
  min-width: 100%;
  width: 100%;
  margin-left: 0;
  text-align: left;
}
menuitem:not(.selected) > menu.menu-sub-folder {
  display: none !important;
}
menu.context > menuitem > menu.submenu,
menu.submenu > menuitem > menu.submenu {
  display: none;
  left: 100%;
  transform: translate3d(-28px, -22px, 0px);
}
menuitem.active > menu,
menuitem:focus-within > menu,
menuitem:focus > menu,
menuitem:active > menu,
menuitem:hover > menu,
menuitem.selected > menu {
  display: flex!important;
}
menuitem[checked],
menu.toolbar > menuitem.active {
  background: rgba(0, 0, 0, 0.12);
}
menu.context > menuitem {
  width: 30px!important;
  height: 30px!important;
}
menuitem.icon.i-check {
  background: none;
}
menuitem.icon.i-check::before {
  visibility: hidden;
}
menuitem.icon.i-check.icon-green::before,
menuitem.icon.i-check[checked]::before {
  visibility: visible;
}
menuitem.fontsize.small::after {
  font-size: x-small;
}
menuitem.fontsize.normal::after {
  font-size: small;
}
menuitem.fontsize.big::after {
  font-size: large;
}
menuitem.fontsize.huge::after {
  font-size: x-large;
}
menu.submenu.fontname-picker {
  padding: 6px;
}
menuitem.face {
  flex: 50%;
}
menuitem.face.shrink {
  flex-basis: auto;
  flex-grow: 0;
  padding: 4px 4px;
  min-width: 0;
}
menuitem.face::after {
  font-size: inherit;
  font-family: inherit;
}
menuitem.face.sans-serif {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
menuitem.face.serif {
  font-family: serif;
}
menuitem.face.arial-black {
  font-family: arial black;
}
menuitem.face.arial-narrow {
  font-family: arial narrow;
}
menuitem.face.calibri {
  font-family: Calibri;
}
menuitem.face.courier-new {
  font-family: courier new;
}
menuitem.face.garamond {
  font-family: garamond;
}
menuitem.face.georgia {
  font-family: georgia;
}
menuitem.face.trebuchet-ms {
  font-family: trebuchet ms;
}
menuitem.face.verdana {
  font-family: verdana;
}
menu.color-picker {
  padding: 6px;
}
menuitem.color {
  margin: 2px;
}
menuitem.color:hover::after {
  box-shadow: 0 0 3pt 2pt #ccc;
}
menuitem.color[checked]::after {
  box-shadow: 0 0 3pt 2pt #222;
}
menuitem.color::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
}
.color[data-key="#AC725E"]::after {
  background-color: #AC725E;
}
.color[data-key="#D06B64"]::after {
  background-color: #D06B64;
}
.color[data-key="#F83A22"]::after {
  background-color: #F83A22;
}
.color[data-key="#FA573C"]::after {
  background-color: #FA573C;
}
.color[data-key="#FF7537"]::after {
  background-color: #FF7537;
}
.color[data-key="#FFAD46"]::after {
  background-color: #FFAD46;
}
.color[data-key="#42D692"]::after {
  background-color: #42D692;
}
.color[data-key="#16A765"]::after {
  background-color: #16A765;
}
.color[data-key="#7BD148"]::after {
  background-color: #7BD148;
}
.color[data-key="#B3DC6C"]::after {
  background-color: #B3DC6C;
}
.color[data-key="#FBE983"]::after {
  background-color: #FBE983;
}
.color[data-key="#FAD165"]::after {
  background-color: #FAD165;
}
.color[data-key="#92E1C0"]::after {
  background-color: #92E1C0;
}
.color[data-key="#9FE1E7"]::after {
  background-color: #9FE1E7;
}
.color[data-key="#9FC6E7"]::after {
  background-color: #9FC6E7;
}
.color[data-key="#4986E7"]::after {
  background-color: #4986E7;
}
.color[data-key="#9A9CFF"]::after {
  background-color: #9A9CFF;
}
.color[data-key="#B99AFF"]::after {
  background-color: #B99AFF;
}
.color[data-key="#C2C2C2"]::after {
  background-color: #C2C2C2;
}
.color[data-key="#CABDBF"]::after {
  background-color: #CABDBF;
}
.color[data-key="#CCA6AC"]::after {
  background-color: #CCA6AC;
}
.color[data-key="#F691B2"]::after {
  background-color: #F691B2;
}
.color[data-key="#CD74E6"]::after {
  background-color: #CD74E6;
}
.color[data-key="#A47AE2"]::after {
  background-color: #A47AE2;
}
.color[data-key="#FFFFFF"]::after {
  background-color: #FFFFFF;
  border: 1px solid #ccc;
}
.color[data-key="#F2F2F2"]::after {
  background-color: #F2F2F2;
}
.color[data-key="#D9D9D9"]::after {
  background-color: #D9D9D9;
}
.color[data-key="#CDCDCD"]::after {
  background-color: #CDCDCD;
}
.color[data-key="#BFBFBF"]::after {
  background-color: #BFBFBF;
}
.color[data-key="#A6A6A6"]::after {
  background-color: #A6A6A6;
}
.color[data-key="#7F7F7F"]::after {
  background-color: #7F7F7F;
}
.color[data-key="#000000"]::after {
  background-color: #000000;
}
.color-swatch {
  min-width: 15px;
  min-height: 15px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 100%;
  pointer-events: none;
}
#table-toolbar {
  border: 1px solid #e0e0e0;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.26);
}
menu.table-picker {
  flex-direction: row;
  width: 240px;
  height: 150px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0px;
  padding-top: 30px;
  border: none;
  background-color: white;
}
menuitem.cell {
  position: static;
  height: 30px;
  width: 30px;
  cursor: pointer;
  outline: none;
  margin: 0px;
  background: none;
  padding: 0;
  min-width: 30px;
  min-height: 30px;
  background-color: #f5f5f5;
  border: 1px solid white;
}
menuitem.cell:hover {
  background: #0997d5;
  opacity: 0.35;
}
menuitem.cell:hover::after {
  content: attr(data-key);
  background: white;
  font-size: 14px;
  margin: 1px;
  text-align: center;
  top: 0;
  left: 50%;
  width: 100%;
  height: 30px;
  margin-left: -50%;
  display: block;
  line-height: 26px;
  font-weight: bold;
  vertical-align: middle;
  position: absolute;
  pointer-events: none;
}
menuitem.cell:hover::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #0997d5;
  right: 0;
  bottom: 0;
  left: 0px;
  top: 20%;
  margin: 0;
  pointer-events: none;
}
menuitem.cell.r1:hover::before {
  height: 20%;
}
menuitem.cell.r2:hover::before {
  height: 40%;
}
menuitem.cell.r3:hover::before {
  height: 60%;
}
menuitem.cell.r4:hover::before {
  height: 80%;
}
menuitem.cell.c1:hover::before {
  width: 12.5%;
}
menuitem.cell.c2:hover::before {
  width: 25%;
}
menuitem.cell.c3:hover::before {
  width: 37.5%;
}
menuitem.cell.c4:hover::before {
  width: 50%;
}
menuitem.cell.c5:hover::before {
  width: 62.5%;
}
menuitem.cell.c6:hover::before {
  width: 75%;
}
menuitem.cell.c7:hover::before {
  width: 87.5%;
}
menuitem.cell.c8:hover::before {
  width: 100%;
}
.break-column {
  flex-basis: 100%;
  width: 0;
}
.note-handle .note-control-selection {
  position: absolute;
  display: none;
  border: 1px solid #000;
}
note-handle .note-control-selection .note-control-selection-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.note-handle .note-control-selection > div {
  position: absolute;
}
.note-handle .note-control-selection .note-control-nw {
  top: -5px;
  left: -5px;
  border-right: 0;
  border-bottom: 0;
}
.note-handle .note-control-selection .note-control-holder {
  width: 7px;
  height: 7px;
  border: 1px solid #000;
}
.note-handle .note-control-selection > div {
  position: absolute;
}
.note-handle .note-control-selection .note-control-ne {
  top: -5px;
  right: -5px;
  border-bottom: 0;
  border-left: none;
}
.note-handle .note-control-selection .note-control-holder {
  width: 7px;
  height: 7px;
  border: 1px solid #000;
}
.note-handle .note-control-selection > div {
  position: absolute;
}
.note-handle .note-control-selection .note-control-sw {
  bottom: -5px;
  left: -5px;
  border-top: 0;
  border-right: 0;
}
.note-handle .note-control-selection .note-control-se {
  right: -5px;
  bottom: -5px;
  cursor: se-resize;
}
.note-handle .note-control-selection .note-control-selection-info {
  right: 0;
  bottom: 0;
  padding: 5px;
  margin: 5px;
  font-size: 12px;
  color: #fff;
  background-color: #000;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.note-popover.popover .arrow {
  left: 20px!important;
}
.note-popover.popover.bottom > .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}
.note-popover.popover > .arrow {
  border-width: 11px;
}
.note-popover.popover > .arrow,
.note-popover.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: 0.9;
}
.fade.in {
  opacity: 1;
}
.tooltip {
  display: block;
  position: absolute;
  z-index: 1070;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;
  line-break: auto;
}
.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
/*[MENU] END********************************************************************************************************/
/*[BUTTON GROUP] ******************************************************************************************************/
/*text editor button bar and today schedule footer buttons etc*/
/*a std group item has left border on first child right border on last child*/
/*a left/first group item has no left border on first child */
/*a right/last group item no right border on last child*/
.btn-group {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
menu.btn-group {
  padding: 0 4px;
}
menu.btn-group > menuitem {
  color: #333;
  background-color: #fff;
  border-color: #e1e1e1;
  border-radius: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  min-width: 30px;
  width: auto !important;
}
menu.context.horizontal > input:first-child {
  border-left-style: none;
  margin-left: 5px;
  cursor: text;
}
menu.btn-group > menuitem[label] {
  padding: 4px;
}
.btn-group > button {
  border-style: none!important;
  border-left-style: solid!important;
  border-left-width: 1px!important;
  border-left-color: #e1e1e1 !important;
}
.btn-group > button + button {
  margin-left: -0.1rem;
}
.btn-group + .btn-group {
  margin-left: 0.5rem;
}
.btn-toolbar {
  margin-top: 0.9em;
  margin-bottom: 0.9rem;
}
.btn-group .btn {
  position: relative;
  justify-content: flex-start;
  margin-left: -1px;
  border-radius: 0;
}
.btn-group .btn:first-child {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group .btn.large:first-child {
  margin-left: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.btn-group .btn.large:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active,
.btn-group .btn.active {
  z-index: 2;
}
.btn-group-justified {
  justify-content: space-between;
  width: 100%;
}
/*[BUTTON GROUP] END***************************************************************************************************/
/*the controls panel adds 15px t/b padding which combined with 30px button gives 60px which is the control panel height ie this just v centers things*/
/*
  all this does is change the l/r padding on a button from 12 to 15 px, can't see any logic in why but all stickies are like this ??????
  there are a 16 places where controls is used independent of sticky - again no apparent logic other than just it achieved a spacing that seemed right on that screen in that location
  projects/deliverable/edit - really a footer
  projects/diary/edit - really a footer
  projects/miscCosts/edit - really a footer but in this case has hbox which seems only to be so that they can push delete button to the right...
  projects/production/add - really a footer
  projects/production/add - really a footer
  projects/production/edit - really a footer
  projects/production/edit - really a footer

  user/meeting - NOT a footer - just random usage to get layout
  user/today - NOT a footer - random usage to get layout but adds an hbox again just to put delete button right
  user/today - NOT a footer - random usage to get layout

  user/expenses/edit - really a footer - but adds an hbox but for no reason at all
  user/expenses/edit  - really a footer
  user/expenses/editWithOLFiles - really a footer but with an hbox added for no reason at all
  user/expenses/editWithOLFiles - really a footer
  wjadmin/strings - IGNORE

  wjadmin/brain/edit - NOT a footer - seems really a form footer but not sticky as its in the middle of page
  wjadmin/brain/edit - NOT a footer - seems really a form footer but not sticky as its in the middle of page -a bit of a mess

*/
.controls {
  position: relative !important;
  height: 6rem;
  max-height: 6rem;
  overflow: hidden;
  padding: 1.5rem 0;
}
.controls > button {
  padding-left: 15px;
  padding-right: 15px;
  padding: 4px 15px;
}
/**[PICTURE-VIEWER]****************************************************************************************************/
.image-viewer.last .image-next,
.image-viewer.first .image-prev {
  opacity: 0.1;
  pointer-events: none;
}
.image-viewer-container {
  height: calc(100vh - 200px);
  height: calc( var(--vhcL) - 200px);
  border: 1px solid grey;
}
.image-viewer-image {
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: scale(1);
}
/*[ZOOM] **************************************************************************************************************/
zoom {
  display: inline-flex;
  padding: 0;
  white-space: nowrap;
  flex: none;
  position: relative;
}
zoom.vertical {
  flex-direction: column-reverse;
}
zoom > input.range-value {
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: right;
  display: inline-block;
  margin-left: 2px;
  margin-right: 10px;
  background: #fff;
  padding-right: 2px;
  padding-left: 2px;
  vertical-align: middle;
  position: relative;
  min-width: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='15px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>%</text></svg>");
  background-position: center right;
  background-repeat: no-repeat;
  padding-right: 14px;
  border: none;
}
.monospace {
  font-family: monospace;
}