/*[RESPONSIVE-PHONE]**************************************************************************************************/
/*Pages,Dialogs,Generic*/
/***********************************************************************************************************************
  * Main Structural Layout Template
  * Views include Pages(main), Panels(panel) and Popups(dialogs)
  * A View has a 'header', a content 'section' and a 'footer'
  * There can be an optional 'fixed' side panel (panel) placed left or right and multiple 'overlay' panels.
  * There are also fixed-overlay panels - initially embedded but slide in an out like an overlay.
  * Header/Section/Footer always fill the available horizontal space,
  * Panel and Section fill available vertical space
  * FF+iOS supports native sticky, Chrome+Android from 31/01/17
  * In order to collapse headers and footers on a device we have to allow scrolling on the document element.
  * Safari doesn't change ViewPort dims between expanded and collapsed modes, Chrome is going to follow suit soon.
  *
  * Desktop sets the base width and height to auto
  * PageContainer and DialogContainer should set boundary dimensions derived from the ViewPort
  * Page and Dialog dims should be based on their respective containers
  * Page and Dialog should set padding for headers/footers, section should fill the available space
  * no margin between header/section/footer elements and no class on header or footer - they should be standard
  * header and footer are hbox by default, section is block
  * section is generally scrollable
  * footer is generally sticky
  * PageContainer and DialogContainer are always 'fixed'
  * pages and dialogs are always absolute
  *
  * There is one special View Page called 'desktop'
  * desktop's content 'section' is called the 'pageContainer' and is where all pages are kept
  *
  * We have two basic 'page modes' DESKTOP and MOBILE which transition based on a complex set of rules
  * In MOBILE all left or right side panels become overlays and section is fixed,
  * exception is 'nav' mode then section becomes an overlay and panel is fixed
  *
  * We have two basic 'display modes' DESKTOP and MOBILE which transition at 768px
  * DESKTOP grid layout and editing is standard desktop
  * MOBILE grid layout and editing uses the mobile UI
  *
  * View class includes page, panel, popup - that is main/panel/dialog
  * each has a header, section and footer
  * a page can contain panels
  * iOS supports native sticky, Android from 31/01/17
  * In order to collapse headers and footers on a device we have to allow scrolling on the document element.
  * Safari doesnt change ViewPort dims between expanded and collapsed modes, Chrome is going to follow suit.
  *
  * Desktop sets the base width and height to auto
  * PageContainer and DialogContainer should set boundary dimensions derived from the ViewPort
  * Page and Dialog should be based on their respective containers
  * Page and Dialog should set padding for headers/footers, section should fill the available space
  * no margin between header/section/footer elements and no class on header or footer - they should be standard
  * header and footer are hbox by default, section is block
  * section is generally scrollable
  * footer is generally sticky
  * PageContainer and DialogContainer are always fixed
  *
  * footer is only used for sticky controls and floats under the section(one unneeded 'fixed' exception)
  * we use padding for placing 'fixed' panels in a similar fashion to headers
  * open is primarily used by pages (exception lookup)
  * active is primarily used by controls (exception dialog)
  * because we don't know where a page willl be positioned until runtime 'open' doesn't do anything except change opacity
  * for an panel it does move the page because they are known at design time
  * however on mobile we use css to move the page and change opacity
  * panels attributes
  * data-display 'overlay': slides over page content - 'fixed': embedded in page
  * data-position is a two part value: desktop|mobile - right/left|nav/first/last/details
  *
  * LAYOUT ELEMENTS
  * Header
  * SideSection Section SideSection
  * Section-Footer
  * Page-Footer
  *
  * DESKTOP MODE LAYOUTS
  * LAYOUT-1
  * H
  * (S )SS
  * (SF)
  *
  * LAYOUT-2
  * H
  * S SS
  *
  * LAYOUT-3
  * H
  * SS (S )
  *    (SF)
  *
  * LAYOUT-4
  * H
  * SS S
  *
  * LAYOUT-5
  * H
  * (S )
  * (SF)
  *
  * LAYOUT-6
  * H
  * S
  *
  * MOBILE MODE LAYOUTS (ALL HAVE A FAB POPUP PF)
  *
  * LAYOUT-1 (2 Pages)
  * H
  * S + SF
  *
  * SS + VH
  *
  * LAYOUT-2 (2 Pages)
  * H
  * SS
  *
  * S + VH + SF
  *
  * LAYOUT-3 (1 Page)
  * H
  * S + SF
  *
 **********************************************************************************************************************/
html {
  position:relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  height: -moz-available;
  width: -moz-available;
  padding:0!important;
  margin:0!important;
}
/*//"push up" resizer
*/html.mobile.chrome::before{
  content:"";
  position:absolute;
  top: 9999999px;
  left: 0;
  height: 1px;
  width: 375px;
}

body {
  position:static;
  padding:0!important;
  margin:0!important;
  pointer-events: none;
}
/*[DESKTOP]**********************************************************************************************************/

#desktop {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#desktop > header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--appHeaderHeightMobile);
  padding: 0 3rem;
  background-color: #000;
  color: #e1e1e1;
  z-index: 20;
  transition: all .5s ease;
  padding: 0 1rem;
  transform: translateY(calc( -1 * var(--appHeaderHeightMobile)));
}

html.desktop-header-open > #desktop > header {
  transform: translateY(0);
}

#desktop > section.desktop.page-container { /*//pageContainer
*/  position: fixed;
  top: 0!important;
  left: 0!important;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transform: translateX(0px);
  pointer-events: none;
}


html.android.display-screen-min.landscape > #desktop > .dialog-container,
html.android.display-screen-min.landscape > #desktop > section.desktop.page-container {
  height: var(--vhcL, 100vh);
}
html.android.display-screen-min.portrait > #desktop > .dialog-container,
html.android.display-screen-min.portrait > #desktop > section.desktop.page-container {
  height: var(--vhcP, 100vh);
}
html.mobile.chrome.android.display-screen-kbd > #desktop > .dialog-container,
html.mobile.chrome.android.display-screen-kbd > #desktop > section.desktop.page-container {
  position: absolute!important;
}
html.mobile.chrome.android.display-screen-kbd{
  overflow-y: scroll!important;
}
html.mobile.chrome.android.display-screen-kbd::before{
  display:none!important;
}


/*[PAGES] *************************************************************************************************************/
/*don't confuse a 'header' with a 'heading' - header vs H1-6 */
/*all header/footers use basic hbox and are absolutely positioned - use padding on parent to make space so sibling fill space..*/

/*[PAGE]***************************************************************************************************************/
/*Page specific */
page {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  min-height:100%;
  max-height:100%;
  min-width:100%;
  max-width:100%;
  transition: transform .2s ease-in-out;
  z-index: 0;
  pointer-events: all;
  background: var(--bodyBackground);
  background-color: var(--bodyBackground);
  color: var(--textColor);
  box-shadow: -4px 1px 4px rgba(0, 0, 0, .3);
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

page.base {
  transition: transform 0.01s ease-in-out;
  box-shadow: none;
}

page.base.open {
  transform: translate3D(-100%, 0, 0);
}

/*a slide out child page add the edge shadow*/
page.child {
  right: auto;
}

page.child.open {
  transform: translate3D(-100%, 0, 0);
}

/*[PAGE-DIMENSIONS] ***************************************************************************************************/
/*pages are always locked down except if on the base page and has the stretch option page don't set padding*/
page.wide,
page.medium,
page.narrow {
  width: 100%;
}

/*all stretch pages stretch as a base page but narrow stretch as a child page as well*/
page.base.stretch,
page.narrow.stretch,
page.medium.stretch,
page.wide.stretch {
  width: 100%;
}

/*[PAGE-CHILD-ELEMENTS] *************************************************************************************************/
page > header {
  height: var(--pageHeaderHeightMobile);
  padding: 0 var(--pageLRPaddingMobile);
}

page > footer {
  padding: 0 var(--pageLRPaddingMobile);
}

page > section {
  display: flex;
  position: relative;
  flex-direction: row;
  flex: auto;
  min-height: 0;
}

page > section > page-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: auto;
  position: relative;
  overflow: hidden;
  z-index: 0; /*for some reason this is important in stopping the screen flashing and fixes off layering issue with search icon showing through overlay panels*/
  padding: 0 var(--pageLRPaddingMobile);
}

page > section > page-body > section {
  overflow: auto !important;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}

page > section > page-body > section.fill {
  flex: auto;
  height: 100%;
}
page > section > page-body > footer {
  height: 60px;
}

/*[PANEL] *************************************************************************************************************/
/*default to overlay right*/
panel {
  display: flex;
  flex-direction: column;
  z-index: 0; /*for some reason this is important in stopping the screen flashing*/
  max-width: 100%;
  min-width: 0;
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;

  left: auto;
  right: 0;

  height: 100%;
  min-height: 100%;
  max-height: 100%;

  transition: transform .2s ease-in-out, opacity .1s ease-in;
  box-shadow: -5px 0 5px rgba(0, 0, 0, .15);
  transform: translate3D(100%, 0, 0);
  background: var(--bodyBackground);
  background-color: var(--bodyBackground);
  color: var(--textColor);
  flex: none;
  width: 100%;
}

panel.open {
  transform: translate3D(0, 0, 0);
}

panel > header {
  height: var(--pageHeaderHeightMobile);
  padding: 0 var(--pageLRPaddingMobile);
}

panel > section {
  padding: 0 var(--pageLRPaddingMobile);
  overflow: auto !important;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}

panel > footer {
  height: 60px;
  padding: 0 var(--pageLRPaddingMobile);
}

/*[PANEL SCROLLBAR ADJUSTMENT ********************************************************************************/
/*[PANEL-DIMENSIONS] ***************************************************************************************************/
panel,
panel.wide,
panel.medium,
panel.narrow {
  width: 100%;
}

/*[PANEL PANELS FIXED] ************************************************************************************************/
/*basically position relative and then unset overlay*/
/*[PANEL FIXED OVERLAY] ************************************************************************************************/
/* TODO:DELIVERABLES LAYOUT CURRENT DESKTOP ONLY*/
.gutter.right > panel.fixed-overlay,
panel[data-display=overlay][data-position=right] {
  box-shadow: -5px 0 5px rgba(0, 0, 0, .15);
}

.gutter.left > panel.fixed-overlay,
panel[data-display=overlay][data-position=left] {
  box-shadow: 5px 0 5px rgba(0, 0, 0, .15);
}

.gutter.left {
  top: var(--pageHeaderHeightDesktop);
}

.gutter.right {
  top: var(--pageHeaderHeightDesktop);
}

panel.fixed-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 100%;
  height: 100%;
  width: auto;
  color: var(--textColor);
  background-color: var(--white);
  transition: transform .4s ease-in-out .3s, opacity .1s ease-in 0s, visibility 0s linear 0.7s;
  visibility: hidden;
}

.panel-width-right {
  width: 28.1rem;
}

.panel-width-left {
  width: 28.9rem;
}

/*RIGHT locked trumps everything*/
.gutter.right.locked:hover > panel,
.gutter.right:hover > panel.autohide.locked,
.gutter.right:hover > panel.locked,
.gutter.right:hover > panel.open.locked,
.gutter.right > panel.open.locked {
  transform: translate3D(0, 0, 0) !important;
}

.gutter.right > panel {
  left: 0;
  transform: translate3D(0, 0, 0);
}

.gutter.right:hover > panel.autohide,
.gutter.right > panel.open {
  transform: translate3D(-100%, 0, 0);
  transition-delay: .3s, 0s, 0s;
  visibility: visible;
}

/*LEFT locked trumps everything*/
.gutter.left.locked:hover > panel,
.gutter.left:hover > panel.locked,
.gutter.left:hover > panel.open.locked,
.gutter.left > panel.open.locked {
  transform: translate3D(0, 0, 0) !important;
}

.gutter.left > panel {
  right: 0;
  transform: translate3D(0, 0, 0);
}

.gutter.left:hover > panel.autohide,
.gutter.left > panel.open {
  transform: translate3D(100%, 0, 0);
  transition-delay: .3s, 0s, 0s;
  visibility: visible;
}

/*LEFT locked trumps everything*/
.gutter.top.locked:hover > header,
.gutter.top:hover > header.locked,
.gutter.top:hover > header.open.locked,
.gutter.top > header.open.locked {
  transform: translate3D(0, 0, 0) !important;
}

.gutter.top > header {
  bottom: 0;
  transform: translate3D(0, 0, 0);
}

.gutter.top:hover > header.autohide,
.gutter.top > header.open {
  transform: translate3D(0, 100%, 0);
  transition-delay: .3s, 0s, 0s;
  visibility: visible;
}

/*'fixed' is not a view so we need to repeat view/page hdr/section/footer except 'fixed' doesn't have a set hdr and ftr only if sticky*/
panel.fixed-overlay > header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /*//height set by class must also set paneltop padding to match
*/}

panel.fixed-overlay > section {
  position: relative;
  max-height: 100%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 0; /*for some reason this is important in stopping the screen flashing on mobile prb gpu switching*/
}

.gutter-toolbar,
header.autohide.locked + .gutter-toolbar,
panel.fixed-overlay.autohide.locked + .gutter-toolbar {
  visibility: hidden;
}

.gutter-toolbar.default,
header.autohide + .gutter-toolbar,
header.open + .gutter-toolbar,
panel.fixed-overlay.autohide + .gutter-toolbar,
panel.fixed-overlay.open + .gutter-toolbar {
  visibility: visible;
}

/*[PAGE-FOOTER]********************************************************************************************************/
html.login footer.footer,
html.locked footer.footer {
  display: none;
}

/*[SYSTEM] ************************************************************************************************************/
/*all system pages can never have anything above them and close as soon as anything else opens*/
page.system.base {
  min-width: 30rem;
  padding-top: 0;
}

page.system.base > header,
page.system.base > section,
page.system.base > footer {
  padding: 0;
}

/*this was a desktop only class but????*/
page.system.child {
  min-width: 30rem;
  padding-top: 0;
  right: 0 !important;
  left: auto;
}

page.system.child > header,
page.system.child > section,
page.system.child > footer {
  padding: 0;
}
/*Pages,Layout,Generic*/
/*[PAGES] *************************************************************************************************************/
/*[STICKY FOOTER CONTROLS] ********************************************************************************************/
.fixedsticky,
.sticky-header {
  position: -webkit-sticky !important;
  position: sticky !important;
}
/*[PAGES] END**********************************************************************************************************/

/*[DIALOGs]*************************************************************************************************************/
/**[CONTAINER] ********************************************************************************************************/
#dialogContainer:not(:empty)::before {
  opacity: 0;/*//was.5
*/}

dialog.viewport {
  top: 0;
}

/*[NOTIFICATIONS] *****************************************************************************************************/

/*[MODAL-MESSAGE] *****************************************************************************************************/
dialog.notify.dlg-modal-message {
  margin-right: 0;
  display: block;
  text-align: center;
  font-weight: normal;
  font-size: 1.4rem;
}

dialog.notify.dlg-modal-message:empty {
  display: none;
}

/*[CONFIRM] ***********************************************************************************************************/
dialog.notify.confirm {
  height: auto;
  min-height: 0;
  padding: 0;
  padding-bottom: 4.6rem;
  background-color: white;
  color: var(--textColor);
}

dialog.notify.confirm[confirm] .confirm.buttons {
  display: block;
  text-align: center;
}

dialog.notify.confirm > section {
  display: block !important;
  padding: 24px;
  padding-bottom: 12px;
}

/*[ALERT] *************************************************************************************************************/
dialog.notify.alert {
  top: auto;
  bottom: -55px;
  animation: slideDownInSmall 250ms ease-out both;
}

dialog.notify.alert[open] {
  animation: slideDownOutSmall 250ms ease-in-out both;
  top: auto;
  bottom: -55px;
}

dialog.notify.alert[alert-type=error] {
  padding-bottom: 46px;
  height: auto;
}

/*[BUSY/PROGRESS] *****************************************************************************************************/
.progress-wrapper {
  margin: 0;
}

i.spinner-notify.busy.indeterminate {
  margin-left: auto;
}

/*the actual progress bar*/
progress.notify {
  margin: 0;
}

/*[NOTIFICATIONS] END**************************************************************************************************/

/*[DIALOG] END*********************************************************************************************************/

/*[GENERIC] ***********************************************************************************************************/

/*[HEADERS] ***********************************************************************************************************/
h1 {
  font-size: 2rem;
  /*you cant ever go bigger than this 320-(20+20)-(26+5+5)-25 = 219*/
  max-width: 21.9rem;
  margin-right: 1rem;
}

h2 {
  font-size: 1.4rem;
}

h1 + h5 {
  bottom: -1.4rem;
}

/*//trying to correct inconsistent design - page-header hgroup toolbar spacer <maybe other random stuff> close
*/hgroup{
  display: flex;
  min-width:0;
  flex: auto;
  align-items: center;
}

hgroup > h1 {
  max-width: none;
}
/*//because there are unnecessary nested spans we need to allow for any depth
*/hgroup > h5 .bind[data-bind-text],
hgroup > h2 .bind[data-bind-text],
hgroup > h1 .bind[data-bind-text]{
  white-space: nowrap;
}

hgroup > button + h2{
  flex: none;
}

page > header > .spacer{
  margin-left: auto;
  flex: none;
}
/*[LISTS] *************************************************************************************************************/
.m-margin-r-l,
.list-margin-l {
  margin-right: 0 !important;
}

/*[COL-ROW]************************************************************************************************************/
/*define sizes last otherwise they wont override base definitions*/
.x05 {
  width: 30px !important;
}

.x1 {
  width: 60px !important;
}

.x2 {
  width: 140px !important;
}

.x3 {
  width: 220px !important;
}

.x4, .x5, .x6, .x7, .x8, .x9, .x10, .x11, .x12 {
  width: 100% !important;
}

/*percentage layout*/
.x1-12, .x2-12, .x3-12 {
  width: 50% !important;
}

.x4-12, .x5-12, .x6-12, .x7-12, .x8-12, .x9-12, .x10-12, .x11-12, .x12-12 {
  width: 100% !important;
}

/*.x1-2,.x1-12,.x2-12,.x3-12,.x4-12,.x5-12,.x6-12*/
.col {
  display: block;
  overflow: visible;
  width: 100% !important;
  height: unset;
}

.row {
  overflow: visible;
}

.col-pad-s > .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.col-pad-m > .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.col-pad-l > .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.col.auto.scrollable {
  height: auto;
}

div.twocols {
  grid-template-columns: 1fr;
  grid-row-gap: 4rem;
}

div.twocols.space-right{
  grid-row-gap: 0;
}

.scrollable-phone {
  overflow: auto !important;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.xhbox {
  flex-wrap: wrap;
}
/*[BUTTONS] ***********************************************************************************************************/
/*lose the text on all 'app' buttons*/
button.btn-app {
  font-size: 0;
  overflow: visible;
}

/*place dropdown button below*/
button.btn-app.dropdown {
  padding-right: 0;
}

button.btn-app.dropdown::before {
  content: none;
  top: 45px;
  left: 19px;
}

button.btn-app.img.img-r {
  padding-right: 55px;
}

button.btn-app.img.img-l {
  padding-left: 55px;
}

/*lose the text on all 'tab' buttons*/
nav.tabs > button.icon-l,
nav.tabs > button.icon-r,
nav.tabs > button.icon-c,
nav.tabs > button.icon {
  font-size: 0;
}

nav.tabs > button::before {
  margin-right: 0;
}


/*[DESKTOP] ***********************************************************************************************************/
.menu-sub-folder {
  background-color: var(--grayLighterDark);
  transition: all 300ms ease-in-out;
  overflow: hidden;
  height: 0;
  opacity: 0;
}

/*[BUTTONS] ***********************************************************************************************************/
/*[FORMS] *************************************************************************************************************/
form.search > .dropdown,
form.search > .lookup {
  float: none;
  width: 100%;
  margin-bottom: 10px;
}

form.search > .dropdown > input[data-type=dropdown] {
  width: 100%;
}

form.search {
  max-width: 100%;
}

menu > form {
  max-width: 100%;
}

.ctl-group > .ctl-group-inner > .x05 {
  width: 30px !important;
}

.ctl-group > .ctl-group-inner > .x1 {
  width: 60px !important;
}

.ctl-group > .ctl-group-inner > .x2 {
  width: 140px !important;
}

.ctl-group > .ctl-group-inner > .x3 {
  width: 220px !important;
}

.ctl-group > .ctl-group-inner > .x4, .ctl-group > .ctl-group-inner > .x5, .ctl-group > .ctl-group-inner > .x6, .ctl-group > .ctl-group-inner > .x7, .ctl-group > .ctl-group-inner > .x8, .ctl-group > .ctl-group-inner > .x9, .ctl-group > .ctl-group-inner > .x10, .ctl-group > .ctl-group-inner > .x11, .ctl-group > .ctl-group-inner > .x12 {
  width: 100% !important;
}

/*percentage layout*/
.ctl-group > .ctl-group-inner > .x4-12, .ctl-group > .ctl-group-inner > .x5-12, .ctl-group > .ctl-group-inner > .x6-12, .ctl-group > .ctl-group-inner > .x7-12, .ctl-group > .ctl-group-inner > .x8-12, .ctl-group > .ctl-group-inner > .x9-12, .ctl-group > .ctl-group-inner > .x10-12, .ctl-group > .ctl-group-inner > .x11-12, .ctl-group > .ctl-group-inner > .x12-12 {
  width: 100% !important;
}

/*[LOGIN]**************************************************************************************************************/
page.login {
  width: 100%;
  min-width: 100%;
}

page.login > header {
  background: url('../../common/logo.aspx?logo=loginMobile') left center no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAzCAYAAADYfStTAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAARcSURBVGiB3ZpJdqNAEEQDJGyMZOnKfVefQB6QbA30pj+GT3OBqg0PSLIgI4eoLKq3t7c/z8/PSZKPj48kCedVVSVJHo9HkuTp6SlJ0vd9kmSz2SRJ6rpOktzv9yRJ13VJkvf39yRJ27az++jb7XZJkq+vr5n+8/mcJBmGIUlyPB5ncjzPYP6u67Jt2zbf39+zF7xer7MXQOHn5+dsYsblckmSHA6H2cTb7XZ2/+XlZTbP6XSa6UFv0zSz539+fmZyGBy9GLDv+9QpbGz7vh+RsKsxsATXcQWORmZU/s/CuATjdrvNrtuFQBJ9IMZ78h7Mi0dVVVUgQsMwLHx1v98n+fVxLMkRiyAHglgQCzNICmv6mN8xDJLcByn0k8TQ3zRNgQjdbrfxC/lyLE5MYUl8F0thceQ4ktZfX1+TLLMUsUfsMC9y3CfrgRRyzAuizNe2bYEIVVU1fik+CQLUJxACSbIPFrMcsYU+6gT30Y8+CrDrDwXWWdTZET11XReI0OFwGC1BDHhgcXzZ9YCBpYhBzokNPIHrMA/XGeTwABDknJgBSd77fD4XiNDlchl9kSNZBvJIXeBI9sGizmY877GWRYlB5gd5PIeYMdK8H3K3261AhKZxQIzw5VgaJBhYyAwDy3ugb41dgwzZDDkQ5b1ctxyDSQpEqK7r0eL4NMjgm2bZWISYGpWJXaPPHA5kQNZ1xusd5iPbel7kNptNgQjd7/dFvSDrYCliCDnuYxkjwznIwBQYPG+m4PnsEbzfWj3c7/cFItS27Vh5ySJr6x4shEXINmbh6AMZ+zzIuK6BCAg7y7n3wXPT+lYeQtfrdZG18E3qB/keyzFA1Mhw3VnKscp85oBkPfQZSc5hKMiVuWIdhmHRAPQKkhgxYwBBNx7NCY2M2fha94jYMRs3U5iO8hA6n8+zrkmyjoyzj7MXlnbfzB1X5JjHMcR9EJ/Wmak+Z8sy+3JN0yy6NVjG3RdXduRAFvm1zqdXxjxvNu15OcI8vImAfNd1BSLUdd2i28MXmx27HlC5zRScfbyrYH3mZsjZc9Z64dOVdXkInU6n0cLu4mBJLG7fnW40Jb9Ziue4z3UqO7GFPtcvb5jZU0DUCJbJFJqmWdQfczjv2JGtLGeLgYC7M14/mWV7PcZ7IW99PF8m266qarSIuzO2IFnJe65GmJiY7n1OB8iZqxFDZhDOksTW/3YUy0Po8XgsONK0z5XMK3Gy3C3A0hxBEKSRMzPAI7wDyPDuwxpL5/rxeCwQod1ut9rddyw4RrCQkXFWcm98LQbtGf4RA30+n/6YUR5C1+t1dScOH3cfzpwPC/lXGCPpWKDurPUynB2NPMxjyinLQ2gYhkX3xnuc/hPE/Tq4mX9Scg8AS5q1mxN6Xh+Zx8yjzDo07ct5nbO2gvSfHMTKWgySBc3GkSe2iJG139nMZEBqOspDaLvdjj7oTqWHuzggu+bjZhSORf8AaI/g6GyGh3iHscg/Sf4CfyWtsy1DqqgAAAAASUVORK5CYII=') repeat;
  background-size: contain, auto auto;
  border: 5px solid transparent;
}

.loginPanelV {
  display: none;
}

.loginPanel {
  position: relative;
  overflow: auto;
  width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
/*[GENERIC] END********************************************************************************************************/

/*[MOBILE-PHONE SPECIFIC CSS]******************************************************************************************/
.phone-hide, .deskSmall, .deskLarge, .deskOnly {
  display: none !important;
}

/*[MOBILE-PHONE SPECIFIC CSS] END**************************************************************************************/

/*TODO:do this properly*/
html.ios.safari #hub > footer {
  position: -webkit-sticky;
}
menu.popup.hub{
  max-height: 100%;
}
html.locked footerpage-footer {
  display: none;
}

/*[NEW LAYOUT SYSTEM]**************************************************************************************************/
/*[DASHBOARD] *********************************************************************************************************/
dashboard{
  display: flex;
  flex-direction: column;
}
dashboard > pane.grid-stack-item{
  display: block!important;
  position: relative;
  flex: none;
  left:0;
  top:0;
  margin-bottom: 20px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
/*[DASHBOARD] END******************************************************************************************************/
/*//on mobile we convert all input control to buttons which have a border but the selectlist already has a border onthe tag container
*/.input-control.selectlist > .tag-container > input{
  border: none;
}
.phone-block{
  display: block;
}
/*//strip empty menus
*/footer > menu:empty {
  display: none;
}