/*[RESPONSIVE-DESKTOP]*************************************************************************************************/
/*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
  * 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;
  height: 100vh;
  width: 100vw;
  min-width: 100vw;
  min-height: 100vh;
}
body {
  position:relative;
  height: 100vh;
  width: 100vw;
  min-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding:0;
}

/*[DESKTOP]**********************************************************************************************************/
#desktop {
  height: auto;
  min-height: 100vh;
  max-height: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#desktop > header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--appHeaderHeightDesktop);
  padding: 0 3rem;
  background-color: #000;
  color: #e1e1e1;
  z-index: 20;
  transition: all .5s ease;
  padding: 0 3rem;
  transform: translateY(0);
  -webkit-backface-visibility: hidden;
}

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

#desktop > section, #plaid-iframe { /*//pageContainer
*/  position: fixed;
  top: var(--appHeaderHeightDesktop);
  left: 0;
  height: calc(100% - 55px);
  width: 100vw;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  transform: translateZ(0);
  pointer-events:  none;
  -webkit-backface-visibility: hidden;
}

.customUrl-iframe {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    pointer-events: none;
    height: calc(100vh - 55px);
}

#plaid-iframe, .customUrl-iframe {
  pointer-events: all;
}

html.locked > #desktop > header {
  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;
  -webkit-backface-visibility: hidden;

  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 90px 1fr;
  -ms-grid-columns:1fr;
  grid-template-columns:1fr;
  grid-template-rows:90px 1fr;
  top: 0;
  bottom: 0;
  left: 100vw;
  width: 100vw;
  height: 100%;
  min-height: 100%;
  min-width: 30rem;
  overflow: hidden;
  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);
  max-width: 100%;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  contain:layout paint;
}


page.base {
  /*//need the animation to trigger 'ready' event but so fast you dont see it
*/  transition: transform .01s ease-in-out;
  box-shadow: none;
}
page.base.open{
  left:0 ;
}
/*a slide out child page add the edge shadow*/
page.child {
  right: auto;
}

page.child.open {
}
/*no transition on first load*/
.page-container.first-layout > page{
  transition: none!important;
}
/*[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 {
  width: 900px;
}

page.medium {
  width: 600px;
}

page.narrow {
  width: 300px;
}

/*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 {
  padding: 0 30px;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

page > section {
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 100%;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

page > section > page-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: auto;
  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*/
}

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

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);
}

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

panel > header {
  height: var(--pageHeaderHeightDesktop);
  padding: 0 var(--pageLRPaddingDesktop);
}

panel > section {
  padding: 0 var(--pageLRPaddingDesktop);
  overflow: auto !important;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
panel > footer {
  height: 60px;
  padding: 0 var(--pageLRPaddingDesktop);
}

/*[PANEL SCROLLBAR ADJUSTMENT ********************************************************************************/
/*dont need on devices nor OSX dont need on Edge, need on FF and Chrome on Windows*/
/* this works for chrome windows which has 8px scrollbars - need to modify for others...
  the goal is to center a scrollbar in the gap (30 - 8) / 2 = 11 that's where 1.1 comes from all mobile s/b 0, OSX is 0, IE10 is 0, so FFWin is 16*/
/*//none  //right      //left
*//*//30+30//30+11-[11+22]//[30+11]-11+22
*//*//overlay
*//*//30+22
*/page-body > section,
page-body > footer {
  padding-left: 30px;
  padding-right: 22px;
}

panel > header,
panel > section,
panel > footer {
  padding-left: 30px;
  padding-right: 22px;
}

sidesection.fixed-left > header,
sidesection.fixed-left > section,
sidesection.fixed-left > footer {
  padding-left: 30px;
  padding-right: 15px;
}

sidesection.fixed-left:not(.hidden) + page-body > section,
sidesection.fixed-left:not(.hidden) + page-body > footer {
  padding-left: 15px;
  padding-right: 22px;
}

/*allow for scrollbar 8px: [11] - 8 - 11*/
html.m-scroll sidesection.fixed-left > header,
html.m-scroll sidesection.fixed-left > section,
html.m-scroll sidesection.fixed-left > footer {
  padding-left: 30px;
  padding-right: 11px;
}

html.m-scroll sidesection.fixed-left:not(.hidden) + page-body > section,
html.m-scroll sidesection.fixed-left:not(.hidden) + page-body > footer {
  padding-left: 11px;
  padding-right: 22px;
}

sidesection.fixed-right > header,
sidesection.fixed-right > section,
sidesection.fixed-right > footer {
  padding-left: 15px;
  padding-right: 22px;
}
sidesection.fixed-right:not(.hidden) + page-body > section,
sidesection.fixed-right:not(.hidden) + page-body > footer {
  padding-left: 30px;
  padding-right: 15px;
}

/*allow for scrollbar 8px: [11 - 11] - 8*/
html.m-scroll sidesection.fixed-right > header,
html.m-scroll sidesection.fixed-right > section,
html.m-scroll sidesection.fixed-right > footer {
  padding-left: 11px;
  padding-right: 22px;
}

html.m-scroll sidesection.fixed-right:not(.hidden) + page-body > section,
html.m-scroll sidesection.fixed-right:not(.hidden) + page-body > footer {
  padding-left: 30px;
  padding-right: 11px;
}
/*[PANEL-DIMENSIONS] ***************************************************************************************************/
panel.wide {
  width: 900px;
}

panel.medium {
  width: 600px;
}

panel.narrow {
  width: 300px;
}

/*[PANEL FIXED] ************************************************************************************************/
/*basically position relative and then unset overlay*/
sidesection.fixed-left,
sidesection.fixed-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 0; /*for some reason this is important in stopping the screen flashing on mobile prb gpu switching*/
  flex: none;
}

sidesection.fixed-right {
  order: 1;
  width: 28.1rem; /*//30 - 11 - 8
*/}

sidesection.fixed-left {
  order: -1;
  width: 28.9rem; /*//30 - 11
*/}

sidesection.fixed-left.hidden,
sidesection.fixed-right.hidden {
  display: none;

}
/*1500+*/
html.desktop.desktop-large sidesection.fixed-right.grow {
  width: 43.1rem;
}

html.desktop.desktop-large sidesection.fixed-left.grow {
  width: 43.9rem;
}

/*'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 > section,
sidesection > section,
sidesection > section :not(.scrollable) > div.flex.textflow { /*added this for firefox projects.request.edit garbage can on attachments*/
  position: relative;
  overflow-x: hidden!important;
  overflow-y: auto!important;
  z-index: 0; /*for some reason this is important in stopping the screen flashing on mobile prb gpu switching*/
  flex:auto;
}
panel > section.scrollable,
sidesection > section.scrollable {
  overflow-x: hidden!important;
  overflow-y: auto!important;
}
panel > section.no-scroll,
sidesection > section.no-scroll {
  overflow-x: hidden!important;
  overflow-y: hidden!important;
}

panel > section.fill,
sidesection > section.fill {
  flex:auto;
}
panel > section.fill.vbox,
sidesection > section.fill.vbox {
  flex:auto;
  min-height:initial;
}

panel > section.grow,
sidesection > section.grow {
  flex:unset;
}

xxxxpanel.footer-sticky > section{
  position: relative;
  overflow-x: hidden!important;
  overflow-y: auto!important;
  z-index: 0; /*for some reason this is important in stopping the screen flashing on mobile prb gpu switching*/
  flex:unset;

}

/*[PANEL FIXED OVERLAY] ************************************************************************************************/
/* TODO:DELIVERABLES LAYOUT CURRENT DESKTOP ONLY*/
.gutter.right > panel.fixed-overlay,
panel.overlay-right {
  box-shadow: -5px 0 5px rgba(0, 0, 0, .15);
}

.gutter.left > panel.fixed-overlay,
panel.overlay-left {
  box-shadow: 5px 0 5px rgba(0, 0, 0, .15);
}

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;
  max-width: none;
}

.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, -100%, 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 > page-body,
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 > page-body,
page.system.child > footer {
  padding: 0;
}
page{
  overflow: visible;
}
panel.viewport{
  left:0;
  right:0;
  margin: auto;
  background: none;
  box-shadow: none;
  border:none;
  justify-content: center;
  overflow:visible;
  min-height: 35%;
  max-height: 75%;
  max-width: 95%;
}
panel.viewport > header,
panel.viewport > footer,
panel.viewport > section{
  background: white;
  border: 0.2rem solid #0997d5;
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3);
}
panel.viewport > header > .i-close{
  /*//display:none;
*/}

panel.viewport > section,
panel.viewport > header{
  border-bottom:none;
}

panel.viewport > section,
panel.viewport > footer{
  border-top:none;
}

panel.viewport > section:last-child{
  border-bottom: 0.2rem solid #0997d5;
}


panel.viewport{
  transform: translate3d(0,.1%,0);
}
panel.viewport.open{
  transform: translate3d(0,0,0);
}

/*[STICKY FOOTER CONTROLS] ********************************************************************************************/
.fixedsticky, .sticky-header {
  position: -webkit-sticky;
  position: sticky;
}

/*[PAGES] END**********************************************************************************************************/

/*[DIALOGS]************************************************************************************************************/
/**[CONTAINER] ********************************************************************************************************/
#dialogContainer:not(:empty)::before {
  opacity: 0;
}
/*Viewport aligned dialog*/
dialog.viewport {
  top: var(--appHeaderHeightDesktop);
}
dialog.notify.dialog-align-viewport{
  display: flex;
  flex-direction: column;
}
/*specificity*/
.dialog-container > dialog.dialog-align-viewport[data-position=viewport] {
  top: var(--appHeaderHeightDesktop);
  height: auto;
  bottom: 0;
  margin: 0;
  padding: 0;
  padding-bottom: 30px;
  left: 0;
  right: 0;
}

.dialog-container > dialog.dialog-align-viewport[data-position=viewport].inset {
  left: 50px;
  right: 50px;
  width: auto;
  bottom: 50px;
  padding-bottom: 0;
}

dialog.notify.curtain.fullx.dialog-align-viewport > section {
  flex:auto;
  max-height: none;
}

dialog.notify > footer.dialog-footer {
  width: auto;
  position: relative;
  flex-direction: row-reverse;
  padding-left: 0px;
  height: 55px;
  max-height: 55px;
}


button.btn-dialog {
  color: white;
}

dialog.select {
  max-width: 512px;
}
/*[DIALOGS] END********************************************************************************************************/

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

/*[LOGIN]**************************************************************************************************************/
page.login {
  width: 100%;
  min-width: 100%;
  -ms-grid-rows:1fr;
  grid-template-rows: 1fr;
}

page.login > header {
  display: none;
}
page.login > section{
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

page.login > section > page-body > section {
  padding: 0;
}

.logoPanelV {
  width: 38.2%;
  max-width: 424px;
  position: relative;
}

.logoPanelV::before {
  content: '';
  background: 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;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}

.logoPanelV::after {
  content: '';
  background: url('../../common/logo.aspx?logo=login') bottom center no-repeat;
  background-size: 85% auto;
  height: 45%;
  width: 100%;
  max-width: 424px;
  position: absolute;
  bottom: 55%;
  left: 0;
}

.loginPanel {
  position: relative;
  width: 38rem;
  margin-left: 150px;
  margin-right: auto;
  align-self: center;
  margin-top: -29rem;
  overflow-y: auto;
}

/*[MEDIA MODIFIERS] BEGIN*****************************************************************************************************/
/*// all modifiers MUST be expressed negatively ie they cause display none to be applied
*//*// you should NEVER create a modifier that sets display block
*/
@media (max-width: 1499px) {
  /*Desktop - Standard + DeskSmall??????*/
  .deskLarge {
    display: none !important;
  }

  /*Desktop - Standard + DeskSmall??????*/
  .deskSmall-hide {
    display: none !important;
  }
}

@media (min-width: 1500px) {
  /*Desktop - DeskLarge*/
  .deskSmall {
    display: none !important;
  }

  /*Desktop - DeskLarge*/
  .deskLarge-hide {
    display: none !important;
  }
}

/*Desktop*/
.phone {
  display: none !important;
}

/*[MEDIA MODIFIERS] END************************************************************************************************/

/*[NEW LAYOUT SYSTEM]**************************************************************************************************/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  page > section {
    height: 100%;
  }
}