/*
  Application LESS-based CSS

  Version: 1.14 (18-Nov-2019)
*/
@import "general.less";
@import "theme.less";

html
{
  height:100%;
  overflow:hidden;
}

body
{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

/* iOS Safari (stop page being able to be dragged which sometimes interferes with scrollable divs) */
html, body
{
  bottom:0;
  left:0;
  position:fixed;
  right:0;
  top:0;
}

/* Android, minimise browser header size */
mdl-layout {
  min-height: 100%;
}


/*
======================================================
 Site Layout
======================================================
*/

/* Top */
.is-nav-top {
  background-color:@THEME_BGCOLOUR_MAIN;
  height:@NAV_TOP_HEIGHT;
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  //box-shadow:2px 2px 2px rgba(0,0,0,0.15);
  z-index:1;

  /* Main Menu Button */
  .mainmenubutton 
  {
    background-color:rgba(0,0,0,0.1);
    border-radius:6px;
    color:@THEME_COLOUR_MAIN;
    cursor:pointer;
    float:left;
    height:calc(@NAV_TOP_HEIGHT - 8px);
    line-height:@NAV_TOP_HEIGHT;
    margin:4px 0 4px 2px;
    text-align:center;
    transition:background-color 0.1s;
    width:calc(@NAV_SIDE_WIDTH - 4px);

    &::before { font-family:isse; font-size:18px; font-weight:normal; content:"\e700"; line-height:40px;}

    &:hover
    {
      background-color:darken(@THEME_BGCOLOUR_MAIN, 10%);
      transition:background-color 0.1s;
    }

    &[active='true']
    {
      background-color:darken(@THEME_BGCOLOUR_MAIN, 10%);
      transition:background-color 0.1s;
    }
  }

  /* Title */
  .title
  {
    color:@THEME_COLOUR_MAIN;
    cursor:pointer;
    float:left;
    font-size:14px;
    height:@NAV_TOP_HEIGHT;
    line-height:@NAV_TOP_HEIGHT;
    margin-left:12px;
    position:relative;

    /* Use Custom Logo */
    &.logo
    {
      background-image:url(@THEME_LOGO_24);
      background-position: left center;
      background-repeat:no-repeat;
      background-size:auto 24px;
      width:200px;

      /* High DPI */
      @media @HIGH_DPI
      {
        background-image:url(@THEME_LOGO_48);
      }
    }

    /* Beta */
    &:not(.logo) > span.beta:before
    {
      background-color:lighten(@THEME_BGCOLOUR_MAIN, 25%);
      border-radius:6px;
      color:@THEME_COLOUR_MAIN;
      display:block;
      font-weight:normal;
      font-size:7pt;
      height:14px;
      line-height:14px;
      padding:0 2px 0 2px;
      content: "beta";
      position:absolute;
      right:-32px;
      top:12.5px;
      overflow:hidden;
      text-rendering:geometricPrecision;

      /* Responsive */
      @media @SMALL_DEVICE
      {
        display:none;
        /*position:absolute;
        right:8px;*/
      }
    }

    /* Version */
    &:not(.logo) > span.version
    {
      background-color:darken(@THEME_BGCOLOUR_MAIN, 25%);
      border-radius:6px;
      color:@THEME_COLOUR_MAIN;
      display:block;
      font-weight:normal;
      font-size:7pt;
      height:14px;
      line-height:14px;
      padding:0 2px 0 2px;
      position:absolute;
      right:-38px;
      top:12.5px;
      overflow:hidden;
      text-rendering:geometricPrecision;

      /* Responsive */
      @media @SMALL_DEVICE
      {
        display:none;
      }
    }
  }

  /* Top-right menu */
  > ul.menu {
    font-size:14px;
    height:@NAV_TOP_HEIGHT;
    list-style:none;
    margin:0;
    padding:4px 0 4px 0;
    position:absolute;
    top:0;
    right:0;

    /* Item (just an icon) */
    > li {
      background-color:rgba(0,0,0,0.1);
      cursor:pointer;
      display:inline-block;
      float:left;
      height:100%;
      margin:0 2px 0 2px;
      padding:0;
      position:relative;
      transition:background-color 0.2s;
      min-width:34px;
      border-radius:6px;

      &:before {
        color:@THEME_COLOUR_MAIN;
      }

      &:hover {
        background-color:darken(@THEME_BGCOLOUR_MAIN, 10%);
        transition:background-color 0.1s;
      }

      /* Active */
      &[active='true']
      {
        background-color:darken(@THEME_BGCOLOUR_MAIN, 10%);
      }

      /* Responsive */
      @media @SMALL_DEVICE 
      {
        margin:0 1px 0 1px;
      }

      /* Quick-Open */
      &#navQuickOpen {
        > input {
          background-color:rgba(255,255,255,0.95);
          //border:1px solid darken(@THEME_BGCOLOUR_MAIN, 5%);
          border:none;
          border-radius:4px;
          order:1;
          display:inline-block;
          float:left;
          font-size:13px;
          line-height:28px;
          width:0px;
          height:30px;
          visibility:hidden;
          overflow:hidden;
          padding:3px;
          position:relative;
          top:-5px;
          left:-1px;

          transition:width 0.2s;
        }

        &[active='true'] {
          background-color:@THEME_BGCOLOUR_CONTRAST;
          width:unset;

          &.hasText {
            background-color:lighten(@THEME_BGCOLOUR_CONTRAST, 5%);

            > input {
              border:1px solid darken(@THEME_BGCOLOUR_CONTRAST, 10%);
            }
          }

          > input {
            margin:10px -2px 0 6px;
            visibility:visible;
            width:180px;
          }
        }
      }

      /* Bullet Text */
      > span.bullettext {
        background-color:white;
        border:1px solid @THEME_BGCOLOUR_MAIN;
        border-radius:7px;
        bottom:8px;
        color:black;
        display:inline-block;
        font-weight:bold;
        font-size:8px;
        line-height:8px;
        min-width:12px;
        padding:3px;
        position:absolute;
        right:2px;
        text-align:center;

        &.error {
          background-color:red;
          color:white;
        }
      }
    }
  }
}

/* Side */
.is-nav-side
{
  background-color: @NAV_SIDE_BGCOLOUR;
  position: absolute;
  top: @NAV_TOP_HEIGHT;
  left: 0px;
  bottom: 0px;
  box-shadow: 2px 0px 2px rgba(0,0,0,0.25);
  z-index: 1;
  width: @NAV_SIDE_WIDTH;
  transition:all 0.15s;

  &:hover {
    border-left:3px solid transparent;
    width: calc(@NAV_SIDE_WIDTH + 6px);
    transition:all 0.15s;
    z-index: 9;

    > ul {
      > li {
        opacity:0.9;
        transform:scale(1.1);
        transition:all 0.15s;
      }
    }
  }

  /* Main Views list */
  > ul {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 36px;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    right: 0;
    white-space: nowrap;
    transition:all 0.15s;

    /* Item (icon only) */
    > li
    {
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 20px 20px;
      background-clip: padding-box;
      border: 2px solid @NAV_SIDE_BGCOLOUR;
      border-radius: 6px;
      display: inline-block;
      float: left;
      height: calc(@NAV_SIDE_WIDTH - 0px);
      //margin-bottom:-4px; // Compact items a bit closer together
      margin:0 0 4px 0;
      opacity:0.35;
      position: relative;
      transition: background-color 0.1s;
      width: calc(@NAV_SIDE_WIDTH - 1px);
      white-space: nowrap;

      &[active='true'] {
        background-color: darken(@THEME_BGCOLOUR_CONTRAST, 0%);
        opacity:1;
        transition: background-color 0.1s;
      }

      &[enabled='false'] {
        cursor: not-allowed;
      }

      &:not([enabled='false']) {
        cursor: pointer;

        &:hover {
          background-color: darken(@NAV_SIDE_BGCOLOUR, 35%);
          transition: background-color 0.1s;

          &[active='true'] {
            background-color: darken(@THEME_BGCOLOUR_CONTRAST, 5%);
          }
        }
      }

      &.new-auto-view
      {
        animation:main-view-new ease-in 1s;
      }

      &.old-auto-view
      {
        background-color: darken(@THEME_BGCOLOUR_CONTRAST, 30%);
        animation:main-view-old ease-in-out 0.5s;
        animation-iteration-count:3;

        &:hover
        {
          background-color: darken(@THEME_BGCOLOUR_CONTRAST, 40%);
        }
      }

      /* Bullet Text */
      > span.bullettext
      {
        animation: pop 0.5s;
        background-color: mediumseagreen;
        border-radius: 7px;
        color: white;
        display: inline-block;
        font-weight: bold;
        font-size: 10px;
        line-height: 14px;
        min-width: 15px;
        min-height: 15px;
        position: absolute;
        right: -1px;
        margin-top: -3px;
        text-align: center;
        vertical-align: top;
      }
    }

    /* Custom Main View items */
    > li[custom='true']
    {
      color: limegreen;
      font-size: 25px;
      line-height: calc(@NAV_SIDE_WIDTH - 0px);
      text-align: center;

      &[active='true'] {
        color: white !important;
      }
    }

    /* Start Group separator */
    li.start-group {
      height:1px;
      line-height:1px;
      background-color: rgba(255,255,255,0.3);
      border:none;
      border-left:2px solid transparent;
      border-right:2px solid transparent;
      border-radius:0;
      overflow:hidden;
      margin:6px 0 6px 0;
    }
  }

  /* Max View button */
  > div.maxview
  {
    bottom: 5px;
    cursor: pointer;
    display: block;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0;
    outline: none;
    position: absolute;
    left: 8px;
    padding-top: 4px;
    border-radius:24px;
    height:32px;
    width:30px;
    line-height:32px;
    background-color:rgba(255,255,255,0.075);

    &::before {
      font-family: isse;
      font-size: 16px;
      font-weight: normal;
      content: "\E740";
      top:-3px;
      position:relative;
    }

    &:hover {
      background-color:rgba(255,255,255,0.1);
    }
  }


  /* Responsive (moves to bottom of screen on small devices) */
  @media @SMALL_DEVICE_PORTRAIT
  {
    bottom: 0;
    left: 0;
    right: 0;
    height: @NAV_SIDE_WIDTH;
    top: auto;
    width: 100% !important;

    > ul {
      bottom: 0;
      overflow-x: auto;
      overflow-y: hidden;
      right: @NAV_SIDE_WIDTH;
      white-space: nowrap;

      > li {
        float: none;
        height: calc(@NAV_SIDE_WIDTH - 2px);
        margin:-1px 6px 0 0 ;
        opacity:1;
        vertical-align: top;
        width: calc(@NAV_SIDE_WIDTH - 0px);

      /* No zoom animation */
      &:hover {
        opacity:1;
        transform:scale(1);
      }

        > a {
          font-size: 11px;
          padding-top: 8px;
        }

        > span.bullettext
        {
          right: -3px;
          margin-top: 0;
        }
      }

      li.start-group {
        border:none;
        border-top:2px solid transparent;
        border-bottom:2px solid transparent;
        height: @NAV_SIDE_WIDTH;
        width:1px;
        margin:0 6px 0 6px;
      }
    }

    > div.maxview {
      right: 4px;
      left: auto;
      top: auto;
      bottom: 8px;
    }
  }
}

/* Content */
.is-content-main
{
  background-color:@CONTENT_BGCOLOUR;
  bottom:0px;
  left:@NAV_SIDE_WIDTH;
  overflow:hidden;
  position:absolute;
  right:0px;
  top:@NAV_TOP_HEIGHT;

  /* Responsive (side nav has moved to bottom of screen on small devices) */
  @media @SMALL_DEVICE_PORTRAIT
  {
    bottom:@NAV_SIDE_WIDTH;
    left:0px;
    right:0px;
  }

  /* Main Views */
  ul.main-views {
    height:100%;
    list-style:none;
    margin:0;
    min-height:100% !important;
    padding:0;
    width:100%;

    /* Hide all Main Views by default */
    > li {
      display:none;
      height:100%;
      min-height:100% !important;
    }
  }
}

/* Automatically Visited a Page, e.g., from Application Shortcut */
.page-auto-visit
{
  animation: page-auto-visit 0.15s ease-in;
  transform-origin: 10% 30%;
}

/* Notification Popup */
.is-notifications {
  background-color: white;
  box-shadow: 0 0 4px 0 rgba(0,0,0,0.25);
  bottom: 4px;
  border: 4px solid rgba(0,0,0,0.1);
  border-radius:12px;
  color: black;
  cursor: default;
  font-size: 13px;
  max-height: 200px;
  max-width: 440px;
  min-height: 80px;
  overflow: auto;
  padding-right: 24px; /* So content does not overlap close button */
  position: fixed;
  right: 4px;
  width: 100%;
  z-index: 9999999;

  &:hover {
    border-color: rgba(0,0,0,0.3);
  }
  /* Showing animation */
  animation-name: notificationsSlideUp;
  animation-duration: 0.3s;
  /* Content */
  > div:not(.close) {
    background-position: 8px 8px;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 64px;
    padding: 8px;
    position: relative;
    /* Links List */
    > ul {
      list-style: none;
      margin: 0;
      padding: 0;

      > li > a {
        color: rgba(0,0,100,0.9);
        display: inline-block;
        margin-bottom: 7px;
        padding: 2px 0 1px 0;
        text-decoration: none;
        border-bottom: 1px dotted;
      }
    }
  }
  /* Title */
  > div > h1 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 0;
  }
  /* Close Button */
  .close {
    opacity: 0.25;
    cursor: pointer;
    display: block;
    font-size: 20px;
    height: 20px;
    position: absolute;
    text-align: center;
    top: 6px;
    right: 4px;
    transition: color 0.2s;
    width: 24px;

    &:hover {
      opacity: 0.25;
      transition: opacity 0.2s;
    }
  }
  /* Styles */
  &.ajaxerror {
    background-color: #F2DEDE;
  }

  &.error {
    background-color: #F2DEDE;
  }

  &.help {
    background-color: #4DA760;
    color: white;
  }

  &.info {
    background-color: #0086DC;
    color: white;
  }

  &.success {
    background-color: #DFF0D8;
  }

  &.task {
    background-color: #F2EEB3;
  }

  &.warning {
    background-color: #FCF8E3;
  }

  &.help > div > ul > li > a,
  &.info > div > ul > li > a {
    color: rgba(230,230,255,0.9);
  }
}


/*
 =====
 Menus
 =====
*/
/* Main menu */
div.is-menu-main
{
  bottom:0;
  box-shadow:2px 0 8px rgba(0,0,0,0.5);
  left:0;
  max-width:320px;
  position:fixed;
  top:0;
  width:100%;

  /* Showing animation */
  transform:translate(0, 0);
  transition:all 0.1s ease-in-out;
  &.hidden
  {
    /*display:none;*/
    transform:translate(-332px, 0); /* -332px ensure shadow does not remain on screen*/
  }
}

div.main-menu-caption
{
  background-image:url(@THEME_LOGO_48);
  background-position: left center;
  background-repeat:no-repeat;
  background-size:auto 32px;
  height:40px;
  margin:4px 0 0 0;

  /* High DPI */
  @media @HIGH_DPI
  {
    background-image:url(@THEME_LOGO_48);
  }
}

/* Right menu */
div.is-menu-right
{
  bottom: 0;
  box-shadow: -3px 0 8px rgba(0,0,0,0.5);
  right: 0;
  max-width:320px;
  position: fixed;
  top: 0;
  width: 100%;

  /* Showing animation */
  transform:translate(0, 0);
  transition:all 0.1s ease-in-out;
  &.hidden
  {
    /*display:none;*/
    transform:translate(332px, 0); /* 332px ensure shadow does not remain on screen*/
  }
}

/* Information appearing at the bottom of side menus */
div.is-menu-info
{
  /*border-top: 1px solid #D2D2D2;*/
  background-color:lighten(@FORM_HEADING_BGCOLOUR, 5%);
  bottom: 0;
  color: #404040;
  cursor: pointer;
  font-size: 12px;
  left: 0;
  padding: 8px;
  position: absolute;
  right: 0;

  &:hover
  {
    background-color:@FORM_HEADING_BGCOLOUR;
    color: black;
  }

  p
  {
    margin: 0 0 0.5em 0;
  }
}


/*
 =====
 Icons
 =====
*/
/* Monochrome */
.is-icon-mono-quickopen::before { display:inline-block; color:white; font-family:isse; font-weight:normal; content:"\E71E"; font-size:16px; line-height:21px; text-align:center; width:34px; margin-top:10px; margin-left:-4px;}
.is-icon-mono-add::before { display:inline-block; color:white; font-family:isse; font-weight:normal; content:"\E948"; font-size:16px; line-height:21px; text-align:center; width:30px; margin-top:11px; margin-left:2px;}
.is-icon-mono-notifications::before { display:inline-block; color:white; font-family:isse; font-weight:normal; content:"\E7E7"; font-size:15px; line-height:17px; text-align:center; margin-left:2px; width:28px; margin-top:13px; margin-left:3px;}
.is-icon-mono-notifications.noitems::before { color:rgba(255, 255, 255, 0.5); content:"\E91C";}
.is-icon-mono-user::before { display:inline-block; color:white; font-family:isse; font-weight:normal; content:"\E13D"; font-size:16px; line-height:26px; text-align:center; background-color:rgba(255, 255, 255, 0.2); border-radius:15px; width:26px; margin-top:8px; margin-left:5px;}

.is-icon-mono-home { background-image:url(Icons.mono/Home.svg); }
.is-icon-mono-records { background-image:url(Icons.mono/Records.svg); }
.is-icon-mono-search { background-image:url(Icons.mono/Search.svg); }
.is-icon-mono-tasks { background-image:url(Icons.mono/Tasks.svg); }
.is-icon-mono-reporting { background-image:url(Icons.mono/Reporting.svg); background-size:30px 30px !important; }
.is-icon-mono-processes { background-image:url(Icons.mono/Processes.svg); background-size:23px 23px !important;}
.is-icon-mono-servers { background-image:url(Icons.mono/Servers.svg); }

.is-icon-mono-bookmark { background-image:url(Icons.mono/Bookmark.svg); }
.is-icon-mono-bookmark-empty { background-image:url(Icons.mono/Bookmark_Empty.svg); }

/* Grid Icons */
div.grid-icon-attachment { width:16px; height:16px; &:before { font-family:isse; font-weight:normal; font-size:16px; content: "\E723"; } }

/*
 =====================
 Main View (Non-Modal)

 E.g., Home or Search
 =====================
*/
.is-view-main
{
  padding:0 8px 8px 8px;
  position:relative;

  /* FUDGE: Make this flex otherwise Chrome does not fill to 100% height of non-modal body */
  flex:auto;

  /* Docked elements should be padded as per anything else */
  > .is-dock-fill
  {
    padding:0 8px 0 8px;
  }
}

.is-view-main-header
{
  padding-left:8px;

  header
  {
    color:darken(@THEME_BGCOLOUR_MAIN, 15%);
    font-size:20px;
    margin:8px 8px 8px -8px;
  }
}

html.theme-main-light .is-view-main-header header {
 color:darken(@THEME_BGCOLOUR_MAIN, 25%);
}

.is-nonmodal-header .is-view-main-header
{
  header
  {
    margin-left:0;
    color:darken(@THEME_BGCOLOUR_MAIN, 15%);
  }
}


/*
 =============================================
 Menu View (Non-Modal)
 
 E.g., Recent or Bookmarked Records
 =============================================
*/
.is-view-menu
{
  padding:8px;
}


/*
 =============================================
 Record Form View (Non-Modal)
 
 E.g., Accounts or Clients
 =============================================
*/
.is-view-record-form
{
  background-color:#f8f8f8;
  padding:0;
  position:relative;

  /* FUDGE: Make this flex otherwise Chrome does not fill to 100% height of non-modal body */
  flex:auto;
}

.is-view-record-form-header
{
  background-color:@FORM_HEADING_BGCOLOUR;
  /*box-shadow:2px 0 2px rgba(0,0,0,0.2);*/
  color:@FORM_HEADING_COLOUR;
  position:relative;
}


/*
 =========
 Templates
 =========
*/
div.is-error
{
  color:darkred;
  background-image:url(Images/Error.png);
  background-size:16px 16px;
  background-position: left center;
  background-repeat:no-repeat;
  line-height:120%;
  min-height:16px;
  margin-top:0.5em;
  margin-bottom:0.5em;
  padding:6px 0 6px 20px;
  vertical-align:middle;
  white-space:pre-line;
}
div.is-error > a
{
  color:#ee0000;
}

div.is-info
{
  color:#404040;
  background-image:url(Images/Information.png);
  background-size:32px 32px;
  background-position: left center;
  background-repeat:no-repeat;
  line-height:120%;
  min-height:32px;
  margin-top:0.5em;
  margin-bottom:0.5em;
  padding:6px 0 6px 36px;
  vertical-align:middle;
  white-space:pre-line;
}
div.is-info > a
{
  color:#404040;
}

div.is-warning
{
  color:#C00000;
  background-image:url(Images/Warning.png);
  background-size:32px 32px;
  background-position: left center;
  background-repeat:no-repeat;
  line-height:120%;
  min-height:32px;
  margin-top:0.5em;
  margin-bottom:0.5em;
  padding:6px 0 6px 36px;
  vertical-align:middle;
  white-space:pre-line;
}
div.is-warning:empty
{
  display:none;
}
div.is-warning > a
{
  color:#ee0000;
}

div.is-success
{
  color:green;
  background-image:url(Images/Success.png);
  background-size:32px 32px;
  background-position: left center;
  background-repeat:no-repeat;
  line-height:120%;
  min-height:32px;
  margin-top:0.5em;
  margin-bottom:0.5em;
  padding:6px 0 6px 36px;
  vertical-align:middle;
  white-space:pre-line;
}


/*
 =============
 Miscellaneous
 =============
*/
/* Search box */
.is-search-box
{
  margin:0 8px 8px 0;

  input.is-textbox-search
  {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius:8px;
    height: 32px;
    margin-right:-32px;
    max-width: 800px;
    outline: none;
    padding-right:28px;
    padding-left:8px;
    vertical-align: bottom;
    width:100%;

    &.filter
    {
      padding-right:2px; /* Filter boxes (e.g., Reporting view) do not have the search icon */
    }
  }

  button.is-combobox-button
  {
    height:32px !important;
  }

  input.is-datebox-search
  {
    border: 1px solid #a0a0a0;
    height: 32px;
    outline: none;
    vertical-align: bottom;
  }

  > button.search
  {
    height:30px; // 30px rather than 32px to visually line the search icon up better
    width:32px;

    color: black !important;
    background-color: transparent !important;
  }
}

/* Admin form search box */
form.is-admin-search
{
  margin: 0 4px 4px 4px;

  input.is-textbox-search
  {
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(0,0,0,0.1);
    border-radius:4px;
    height: 28px;
    margin-right: -25px;
    margin-bottom:2px;
    max-width: 620px;
    outline: none;
    padding-right: 28px;
    vertical-align: bottom;
    width: 100%;

    &:hover {
      border: 2px solid rgba(0,0,0,0.2);
    }

    &:focus
    {
      background-color: rgba(255, 255, 255, 0.9);
      border: 2px solid rgba(0,0,0,0.2);
    }

    &::-webkit-input-placeholder {
      font-size:11px;
    }

    &::-moz-placeholder {
      font-size:11px;
    }

    &::-ms-input-placeholder {
      font-size:11px;
    }
  }

  button
  {
    height: 24px !important;
    width: 24px !important;
  }

  > button.search
  {
    color: black !important;
    background-color: transparent !important;
    top:-2px;
    padding-left: 5px;
    position:relative;
   //padding-top: 2px;
  }

  > button.search-clear
  {
    background-color: @THEME_BGCOLOUR_MAIN !important;
    border: none; //1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    color: @THEME_COLOUR_MAIN !important;
    cursor: pointer;
    display: none !important;
    height: 24px !important;
    line-height:20px !important;
    font-size: 11px;
    margin-left: -76px;
    margin-top: 2px;
    padding-left: 0;
    padding-right: 0;
    width: 76px !important;
    min-width: 0 !important;
    position: absolute;
    outline: none;
    animation: pop 0.2s;

    &:hover
    {
      background-color: darken(@THEME_BGCOLOUR_MAIN, 10) !important;
    }
  }

  &.show-search-clear > button.search-clear
  {
    display: inline-block !important;
  }

  div.is-table-filter-count
  {
    margin-left: -80px !important;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: none !important;
    top: 4px;
    height: 20px;
    overflow: hidden;
  }

  &.show-search-clear div.is-table-filter-count
  {
    right: 76px;
  }

  div.is-table-filter-count::after
  {
    top: 4px;
  }

  // Special filters
  > ul
  {
    font-size: 0; // Gets around unwanted space between items on different lines
    list-style: none;
    margin: 0 0 4px 0;
    padding: 0;
    user-select: none;

    &:before
    {
      font-family: isse;
      font-size: 14px;
      font-weight: normal;
      content: "\E71C";
      line-height: 16px;
      padding-right: 4px;
      position: relative;
      top: 2px;
    }

    > li
    {
      background-color: rgba(0,0,0,0.075);
      border-radius: 4px;
      display: inline-block;
      font-size: 11px;
      margin: 0 4px 0 0;

      &:hover
      {
        background-color: rgba(0,0,0,0.125);
      }

      > a
      {
        color: darken(@THEME_BGCOLOUR_CONTRAST, 30%);
        cursor: pointer;
        display: block;
        line-height: 16px;
        padding: 2px 4px 2px 4px;
      }

      &.selected
      {
        background-color: rgba(0,0,0,0.375);
        animation: pop 0.3s;

        > a
        {
          color: rgba(255,255,255,0.8);
        }
      }
    }
  }
}

.is-tab-page form.is-admin-search /* e.g., External Parties List form */
{
  margin: -2px -4px 0 -4px;
}


  /* Non-intrusive info text, e.g., under record tabs */
  .is-info-text
  {
    color: darken(@THEME_BGCOLOUR_CONTRAST, 20%);
    cursor: default;
    font-size: 13px;
    margin: 4px 0 8px 0;

    /* Small */
    &.small {
      font-size: 11px;
    }

    /* Information (e.g., below the checkboxes on the Account Application Accept/ Decline wizard) */
    &.info {
      animation: pop 0.2s;
      background-color: #FFFFEE;
      border: 1px solid rgba(0,0,0,0.05);
      color: black;
      display: inline-block;
      padding: 8px;

      p {
        margin: 6px 0 6px 0;
      }
    }

    /* Validation (e.g., on Search View as validation message) */
    &.validation {
      animation: pop 0.2s;
      background-color: darken(@THEME_BGCOLOUR_CONTRAST, 10%);
      color: white;
      display: inline-block;
      padding: 2px;
    }

    /* Warning */
    &.warning {
      animation: pop 0.2s;
      color: red;
    }

    /* Audit */
    &.audit {
      background-color: #FFFFEE;
      border: 1px solid rgba(0,0,0,0.05);
      color: black;
      display: inline-block;
      font-size: 0.95em;
      margin-top: 0;
      padding: 8px;
    }

    /* Code (e.g., Form Information report when right-clicking a Records View tab) */
    &.code {
      animation: pop 0.2s;
      background-color: #FFFFEE;
      border: 1px solid rgba(0,0,0,0.05);
      color: black;
      display: inline-block;
      margin-top: 0;
      padding: 8px;
      font-family: "Courier New",courier;

      p {
        margin: 6px 0 6px 0;
      }
    }

  }
  /* Colour Blocks (e.g., Log Severity) */
  div.is-colour-block {
    border: 1px solid rgba(200, 200, 200, 0.5);
    height: 16px;
    width: 16px;
  }

/*
=========
 Max View
=========
*/
body.is-maxview
{
  /* Max View button */
  div.maxview {
    background-color: rgba(0, 0, 0, 0.75);
    color: rgba(255, 255, 255, 0.75);

    &:hover {
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
  /* hide top navigation */
  .is-nav-top {
    display: none;
  }

  .is-nav-side {
    top: 0;

    @media @SMALL_DEVICE_PORTRAIT {
      top: auto;
    }
  }

  .is-content-main {
    top: 0;
  }

  /* Shrink Main View header */
  .is-view-main-header > header {
    margin: 2px 8px 4px -8px;
    transition: margin 0.25s;
  }

  .is-nonmodal-header .is-view-main-header header {
    margin-left: 0;
  }
}

/*
==============
Widget Layouts
==============
*/
/* Grid Layout */
div.is-widget-layout-grid > label.group-heading:first-child {
  margin-top: 0;
}

div.is-widget-layout-grid {
  display: block;

  /* Group Heading */
  > label.group-heading {
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin: 12px 0 6px 0;
    padding: 0;
  }

  /* Group */
  > div.group {
    display: flex;
    flex-flow: row nowrap;
    align-content: flex-start;
    margin-right: -8px;

    /* Widget */
    > div.is-widget {
      border-right: 8px solid transparent;
      flex: 1 1 1;
      margin: 0 0 8px 0;
      width: 100%;

      > div.container {
        //border: none;
        border:2px solid rgba(0,0,0,0.05);
        border-radius:8px !important;
        overflow:hidden;
        box-shadow:none;
      }

      > div.spacer {
        visibility: hidden;
      }
    }
  }

  /* Responsive */
  @media screen and (max-width:640px) {
    /* Single Column */
    > div.group {
      flex-flow: row wrap;

      > div.is-widget {
        max-width: unset !important;
        min-width: unset !important;
      }

      > div.is-widget.spacer {
        display: none;
      }
    }
  }
}


/* Full Page Layout */
div.is-widget-layout-fullpage
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  display: flex;
  flex-flow: column nowrap;

  /* Heading */
  > div.is-view-main-header {
    flex: 0 1 1;
    margin-left: 8px;
  }

  /* Widget */
  > div.is-widget
  {
    border: none;
    border-radius: 0;
    flex-grow: 1;
    flex: 1 0 0;

    > div.container {
      border: none;

      > div.content {
        overflow: hidden;
        position: relative;
        border-radius:0;


        > iframe {
          max-height: unset !important;
          min-height: unset !important;
          position: absolute;
          top: 0;
          bottom: 0;
        }
      }
    }
  }
}


/* Full Page (Tabbed) Layout */
div.is-widget-layout-fullpagetabbed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  display: flex;
  flex-flow: column nowrap;

  /* Heading */
  > div.is-view-main-header {
    flex: 0 1 1;

    & > header {
      margin-left: 0;
    }
  }

  /* Widget */
  > div.is-widget {
    border-left: 8px solid transparent;
    margin-right: 8px;
    /*border-right:8px solid transparent;*/
    border-bottom: 8px solid transparent;
    flex: 1 100%;
    animation: widget-tabbed-show 0.25s;

    > div.container {
      //border: none;
      border:2px solid rgba(0,0,0,0.05) !important;
      border-radius:8px !important;
      overflow:hidden;
      box-shadow:none;

      > div.content {
        overflow: hidden;
        position: relative;
        border-radius:0 !important;

        > iframe {
          max-height: unset !important;
          min-height: unset !important;
          position: absolute;
          top: 0;
          bottom: 0;
        }
      }
    }
  }

  /* Tabs (use contrast colour since Widgets themselves may have tabs which then looks a little confusing) */
  div.is-view-main-header div.is-tabs > ul.is-tabs {
    border-bottom: 2px solid @THEME_BGCOLOUR_CONTRAST;
    display: inline-block !important;
    white-space: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;

    > li {
      /* Selected Tab */
      &.is-sel {
        background-color: @THEME_BGCOLOUR_CONTRAST;
        color: @SEL_COLOUR;
      }
    }
  }
}


/* Blocks Layout */
div.is-widget-layout-blocks > label.group-heading:first-child {
  margin-top: 0;
}

div.is-widget-layout-blocks {
  display: block;

  /* Group Heading */
  > label.group-heading {
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin: 12px 0 4px 0;
    padding: 0;
  }

  /* Group */
  > div.group {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    margin-right: -8px;

    /* Widget */
    > div.is-widget {
      border-right: 8px solid transparent;
      flex: 1 1 1;
      margin: 0 0 8px 0;
      width: 100%;

      > div.container {
        //border: none;
        border:2px solid rgba(0,0,0,0.05);
        border-radius:12px !important;
        overflow:hidden;
        box-shadow:none;
      }

      > div.spacer {
        visibility: hidden;
      }
    }
  }

  /* Responsive */
  @media screen and (max-width:640px) {
    /* Single Column */
    > div.group {
      flex-flow: row wrap;

      > div.is-widget {
        max-width: unset !important;
        min-width: unset !important;
      }

      > div.is-widget.spacer {
        display: none;
      }
    }
  }
}
/*


===========
 TASKS VIEW
===========
*/
/* Tab Strip (similar to record tabs but not quite the same) */
.is-tasks-tabs
{
  background-color: darken(@THEME_BGCOLOUR_MAIN, 17.5%);
  border-bottom: 4px solid @THEME_BGCOLOUR_CONTRAST;
  display: block;
  flex: none;
  -webkit-flex: none;
  height: 36px;
  list-style: none;
  margin: 0 0 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 0 0;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  width: 100%;
  /*TODO:*/
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* Tabs */
  > ul
  {
    margin-left: 0;
    margin: 0;
    overflow: auto;
    padding: 0 0 0 0;
    white-space: nowrap;
    width: 100%;
  }

  > ul > li
  {
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    height: 32px;
    margin-right: 0;
    position: relative;
    transition: background-color 0.1s;
    vertical-align: middle;
    white-space: nowrap;
    transition: all 0.1s ease-in-out;
    /*filter: ~"brightness(65%) saturate(90%)";*/
    //filter: ~"brightness(100%) saturate(70%)";

    &:not(.is-sel)
    {
      img
      {
        filter: ~"saturate(25%)";
      }

      > a:hover
      {
        background-color:darken(@FORM_HEADING_BGCOLOUR, 10%) !important;
      }
    }

    /* Caption and Icon */
    > a
    {
      background-color: @FORM_HEADING_BGCOLOUR !important;
      //background-color: rgba(230,230,230,0.9); // @FORM_HEADING_BGCOLOUR !important;
      border-right:1px solid rgba(0,0,0,0.1);
      color:black;
      display: block;
      line-height: 28px;
      height:28px;
      margin-top: 4px;
      overflow:hidden;
      padding: 0 8px 0 8px;

      > img
      {
        height: 16px;
        margin-right: 4px;
        top: 4px;
        position: relative;
        width: 16px;
      }
    }

    /* Selected Tab */
    &.is-sel
    {
      > a
      {
        background-color: transparent !important;
        border-bottom: 4px solid transparent;
        color: white;
      }
    }
    
    /* System Tabs */
    &.System_UserLogs {
      > a {
        background-color:#ffffe0 !important;

        &:hover {
          background-color:#ffffb0 !important;
        }
      }

      &.is-sel {
        > a {
          background-color:yellow !important;
          color:black;
        }
      }
    }
  }
}

/* In Records View (when showing another User's Tasks) */
.is-tabs.is-tasks-tabs {
  background-color: darken(@FORM_HEADING_BGCOLOUR, 5%);
  border-bottom: none;
  margin: 0;

  /* Tabs */
  > ul > li
  {
    border-bottom: none;
    display: inline-block;
    font-weight: normal;
    height: 35px;
    margin: 0;
    padding: 0;
    transition: background-color 0.1s;
    vertical-align: middle;
    white-space: nowrap;

    > a
    {
      background-color:@FORM_HEADING_BGCOLOUR !important;
      //border-bottom: 4px solid @FORM_HEADING_BGCOLOUR;
      display: inline-block;
      font-size: 12px;
      line-height: 27px;
      height:32px;
      margin-top: 4px;
      padding: 0 8px 0 8px !important;

      &:hover
      {
        background-color:darken(@FORM_HEADING_BGCOLOUR, 10%) !important;
      }

      > img
      {
        top: 4px;
      }
    }

    /* Selected Tab */
    &.is-sel
    {
      > a
      {
        background-color: transparent !important;
        border-bottom: 4px solid transparent;
        color: white;
      }
    }

    /* System Tabs */
    &.System_UserLogs {
      > a {
        background-color:#ffffe0 !important;

        &:hover {
          background-color:#ffffb0 !important;
        }
      }

      &.is-sel {
        > a {
          background-color:yellow !important;
          color:black;
        }
      }
    }
  }
}

/* Right-Hand Elements */
div.is-tasks-tabs > div.element-right
{
  padding: 3px 1px 0 0;
  bottom: 4px;

  /* Another User Button */
  button.is-button
  {
    background-color:darken(@THEME_BGCOLOUR_MAIN, 22%) !important;
    background-position-x:6px;
    border: 1px solid rgba(0,0,0,0.2) !important;
    color:rgba(255,255,255,0.7) !important;
    font-size:11px;
    height:26px;
    line-height:26px;
    outline:none !important;
    padding-right:6px;
    padding-left:26px;

    &:hover
    {
      background-color:darken(@THEME_BGCOLOUR_MAIN, 15%) !important;
      border-color:rgba(255,255,255,0.2) !important;
      color:white;
    }

    /* Responsive */
    @media @SMALL_DEVICE
    {
      width:20px !important;
      min-width:0 !important;
      overflow:hidden;
      color:transparent !important;
    }
  }
}

/* Layout */
.is-tasks div.is-tab-page
{
  background-color: transparent; /* Prevent page background from showing as a white rectangle when loading Tasks view */
}

.is-tasks-layout
{
  background-color: @CONTENT_BGCOLOUR;
  border:1px solid @THEME_BGCOLOUR_CONTRAST;
  border-radius:8px;
  display: flex !important;
  margin:0 8px 8px 8px;
  overflow:hidden;
  z-index: 0;

  /* Content */
  div.content
  {
    background-color: white;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: -1;

    /* Header */
    > div.header
    {
      background-color: @FORM_HEADING_BGCOLOUR;
      box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
      color: @FORM_HEADING_COLOUR;
      min-height: 36px;
      padding: 4px 4px 4px 8px;
      z-index: 0;

      > header
      {
        color:darken(@THEME_BGCOLOUR_MAIN, 15%);
        font-weight: bold;
        font-size: 13px;

        /* Smart List Parameters */
        > div.smart-list-parameters
        {
          border: 1px solid rgba(0,0,0,0.1);
          border-radius: 4px;
          display: block;
          margin: 8px 0 6px 0;
          max-width: 400px;
          padding: 4px;
        }

        /* Smart List 'Go' Button */
        button.smart-list-go
        {
          font-size: 0.9em;
          margin: 4px 0 0 4px;

          &:before
          {
            content: "Run";
          }

          
        }
      }

      /* Filter Textbox */
      input[type='search']
      {
        background-color: rgba(255,255,255,0.25) !important;
        display: block;
        margin-top: 4px;
        max-width: 400px;
        width: 100%;

        &:focus
        {
          background-color: rgba(255,255,255,0.75) !important;
        }
      }
    }

    /* Results */
    > div.results
    {
      background-color: @CONTENT_BGCOLOUR;
      flex-grow: 1;
      z-index: -1;

      > .panel:first-child
      {
        flex-grow: 1; /* iOS */
      }
    }
  }


  /* Responsive */
  @media @SMALL_DEVICE
  {
    margin-bottom:4px;
    margin-top:4px;
  }

}

/* Tasks menu (in Tasks view) */
div.is-panel-menu.tasks {
  border: none;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  border-right:1px solid @THEME_BGCOLOUR_CONTRAST;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  max-width: 240px;
  overflow-x: hidden;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 0; /* So shadow from side-nav bar overlaps tasks menu */

  > div > ul {
    padding:0;
    overflow-x: hidden;

    > li {
      overflow: hidden;
      width: 240px;
    }
  }

  /* Showing animation */
  //max-width:0;
  margin-left: -240px;
  transition: all 0.1s ease-in-out;

  &.active {
    animation: panelFadeIn 0.2s;
    //border:none;
    //box-shadow:1px 0 1px rgba(0, 0, 0, 0.1);
    margin-left: 0;
    //max-width:240px;
  }
}

/* Tasks HTML Widget */
div.is-widget-layout {
  div.is-widget {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    > div.container {
      border-radius: 0 !important;

      > div.content {
        border-radius: 0 !important;
        z-index: 1;
      }
    }
  }
}


/*
===============
 REPORTING VIEW
===============
*/
/* Report List Page */
div.is-reporting > div.is-tab-page {
  background-color: transparent !important;
  animation: panelFadeIn 0.2s;
}


/* Report List */
div.is-report-list {
  /* Category Heading */
  > h1 {
    color: @THEME_BGCOLOUR_CONTRAST;
    border-bottom: 1px solid;
    font-size: 16px;
    padding: 0;
    margin: 12px 0 0 0;
    max-width: 400px;

    &:first-child {
      margin-top: 0;
    }

    &.is-filtered-out {
      border: none;
      font-size: 11px;
      margin: 0;
      opacity: 0.6;
      transition: all linear 0.1s;
    }
  }

  /* Items */
  > ul {
    list-style: none;
    margin: 0;
    padding: 0;

    > li {
      background-repeat: no-repeat;
      background-position: 4px center;
      background-size: 16px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      cursor: pointer;
      font-size: 13px;
      max-width: 400px;
      padding: 8px 0 8px 24px;
      position: relative;

      &:hover {
        background-color: rgba(0,0,0,0.2);
        color: white !important;
      }

      /* Report Template */
      &.template {
        color: navy;

        &::after {
          background-color: rgba(0,0,200,0.15);
          border-radius: 4px;
          content: " ";
          height: 8px;
          margin-top: 5px;
          position: absolute;
          right: 6px;
          width: 8px;
        }
      }
    }
  }
}


/* Downloads Tab */
div.is-reporting ul.is-tabs > li.downloads
{
  &:not(.is-sel) > a
  {
    background-color: @THEME_BGCOLOUR_CONTRAST !important;
    color: white !important;
  }

  > a::before
  {
    font-family: isse;
    font-weight: normal;
    content: "\E118";
    vertical-align: bottom;
  }
}

/*
===============
 PROCESSES VIEW
===============
*/
// Processes page
div.processes-page {
  display:flex;
  flex-flow:row;
}


// Processes Help Column
div.processes-help {
  border-left:2px solid @SEL_BGCOLOUR;
  flex-grow:1;
  height:auto;
  padding-left:8px;
  //animation:panelFadeIn 0.3s;

  // Status
  div.status {
    border-bottom:1px solid @THEME_BGCOLOUR_CONTRAST;
    color:darken(@THEME_BGCOLOUR_CONTRAST,20%);
    font-size:12px;
    margin:4px 0 8px 0;
    padding-bottom:8px;
  }

  // Last Run
  div.last-run {
    color:#A0A0A0;
    font-size:11px;
    margin:4px 0 8px 0;

  }

  // Details
  > div.details {
    background-color:lighten(@THEME_BGCOLOUR_CONTRAST, 45%);
    border:1px solid lighten(@THEME_BGCOLOUR_CONTRAST, 35%);
    font-size:12px;
    padding:4px;
    line-height:150%;
  }


  // Help topic
  > div {
    //animation:panelFadeIn 0.3s;
    //margin-left:16px;
  }
}


// Processes List Column
div.processes {
  counter-reset:processcount;
  display:flex;
  flex-direction:column;
  flex-grow:1;
  margin-bottom:32px; // Leave room for Refresh button
  max-width:580px;
  width:100%;


  // Processes Item
  > div {
    //background-color:#fffff0;
    background-position:right 8px center;
    background-repeat:no-repeat;
    background-size:32px;
    border-left:12px solid white;
    border-bottom:2px solid rgba(0,0,0,0.1);
    border-top:2px solid rgba(0,0,0,0.1);
    border-right:0px solid white;
    color:rgba(0,0,0,0.6);
    cursor:default;
    max-height:200px;
    padding:8px 40px 8px 22px;
    position:relative;
    outline:none;
    overflow:hidden; // When animating to collapse/ expand
    transition:max-height 0.2s;

    // Counter
    &.numbered {
      padding-left:48px;

      &::before {
        color:rgba(0,0,0,0.2);
        counter-increment:processcount;
        content:counter(processcount);
        font-size:32px;
        font-weight:bold;
        left:6px;
        top:calc(50%-16px);
        position:absolute;
        //transition:all 0.15s;
      }
    }

    // Status
    &.process-status-Complete {
      background-color:#eeffee;
      background-image:url(Images/ProcessStatus_Complete.png);
    }
    &.process-status-Failed {
      background-color:#ffeeee;
      background-image:url(Images/ProcessStatus_Failed.png);
    }
    &.process-status-InProgress {
      background-color:#ffffe0;
      background-image:url(Images/ProcessStatus_InProgress.png);
    }
    &.process-status-OnHold {
      background-color:#eeeeff;
      background-image:url(Images/ProcessStatus_OnHold.png);
    }
    &.process-status-ToDo {
      background-color:#ffff80;
      background-image:url(Images/ProcessStatus_ToDo.png);
    }

    hr {
      height:1px;
      border:1px solid rgba(0,0,0,0.05);
      overflow:hidden;
      margin-right:8px;
    }

    h3 {
      color:rgba(0,0,0,0.5);
      font-size:12px;
      padding:0;
      margin:0 0 4px 0;

      span.suffix {
        font-size:10px;
        font-weight:normal;
        margin-left:4px;
      }
    }

    div.process-status-notes {
      font-size:11px;
      font-style:italic;
    }

    // Selected
    &.is-sel {
      border-color:@SEL_BGCOLOUR;
      border-right:2px solid white;
      margin-right:-2px;

      &::before {
        color:@SEL_BGCOLOUR;
      }

      h1 {
        color:@SEL_BGCOLOUR;
      }
    }

    // Collapsed
    &.collapsed:not(.is-sel) {
      max-height:48px;
      //transition:max-height 0.2s;

      > h3 {
        display:none;
      }

      button {
        display:none;
      }

      hr {
        display:none;
      }

      div.summary {
        display:none;
      }

      &.numbered {
        &::before {
          font-size: 24px;
          top:calc(50%-40px);
          //transition:all 0.15s;
        }
      }
    }

    // Heading
    h1 {
      //border-bottom: 1px solid;
      color: @THEME_BGCOLOUR_CONTRAST;
      font-size: 20px;
      margin:0 -32px 8px -16px;
      padding:0;
      position:relative;
      //left:-32px;
    }

    // Normal text
    div {
      font-size:0.9em;
      margin:4px 0 4px 0;
    }

    // Last run section
    div.last {
      background:url(Images/Calendar.png) no-repeat;
      background-size:16px;
      background-position:left center;
      margin:8px 0 8px 0;
      padding-left:20px;
    }

    // Scheduled section
    div.scheduled {
      background:url(Images/Clock.png) no-repeat;
      background-size:16px;
      background-position:left center;
      margin:8px 0 8px 0;
      padding-left:20px;
    }

    // Actions section
    div.actions {
      margin-top:12px;
    }

    // Complete section
    div.complete {
      border-top:1px solid rgba(0,0,0,0.2);
      padding-top:8px;
      margin:8px 0 0 0;
    }

    // Actions section
    div.actions {

    }

    // Buttons
    button.is-button {
      font-size:13px;
      margin:0;
    }
  }

  // Processes Item (Complete)
  > div.complete {
    background-color:#f0fff0;

    > h1 {
      position:relative;

      &::before {
        color:limegreen;
        font-family:isdi;
        font-weight:normal;
        font-size:40px;
        content:"\F147";
        position:absolute;
        left:-34px;
        top:-8px;
        text-shadow:white 0 0 3px;
      }
    }

    > div {

      // Hide Actions section
      &.actions {
        //display:none;
      }

    }
  }
}

// Responsive
@media @SMALL_DEVICE
{
  div.processes-page {
    // Never show help column
    div.processes-help {
      display:none !important;
    }

    // Processes List Column
    div.processes {
      max-width:100%;

      // Processes Item
      > div {
        border-left-width:2px;

        // Selected
        &.is-sel {
          border-right:2px solid @SEL_BGCOLOUR;
        }
      }
    }
  }
  
}


/*
=====
 HELP
=====
*/
div.help2 {
  font-family: Comfortaa, sans-serif;

  h1, h2, h3 {
    padding:0;
    margin:0;
    font-size:24px;
    font-weight:medium;
    color:@THEME_BGCOLOUR_MAIN;
  }

  h2 {
    font-size:18px;
  }

  h3 {
    font-size:14px;
  }

  > div, p {
    font-size:14px;
  }

  p {
    line-height:150%;
  }
}

html.theme-main-light div.help2 {
  h1, h2, h3 {
    color:darken(@THEME_BGCOLOUR_MAIN, 20%);
  }
}


/*
================
 TAB PAGE STATES
================
*/
/* Don't animate when switching between tabs */
div.is-tab-page.hold-animation {
  &.normal,
  &.left,
  &.right,
  &.left1,
  &.right1,
  &.right2 {
    > div > div {
      animation: none !important;
    }
  }
}

/*
---------------------------------------
3-State: Grid on left, preview on right
---------------------------------------
*/
div.is-tab-page:not(.state-count-2):not(.state-count-4) {
  // Normal
  &.normal {
    > div.is-split-container > div.panel:first-child {
      animation: panelSlideInFullFromLeft 0.3s;
    }

    > div > div.panel:last-child {
      animation: panelSlideInFromLeft 0.3s;
    }
  }

  // Left pane has priority
  &.left {
    > div.is-split-container > div.panel:first-child {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: panelSlideInFromLeft 0.3s;
    }

    > div > div.panel:last-child {
      z-index: -1;
    }
  }

  // Right pane has priority
  &.right {
    > div > div.panel:first-child {
      z-index: -1;
    }

    > div > div.panel:last-child {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: panelSlideInFromRight 0.3s;
    }
  }
}

/*
------------------------------------------------------
2-State: Grid on left, preview on right

Grid full is default state, e.g., Account Transactions
------------------------------------------------------
*/
div.is-tab-page.state-count-2 {
  // Normal
  &.normal {
    > div.is-split-container > div.panel:first-child {
    }

    > div > div.panel:last-child {
      animation: panelSlideInFullFromRight 0.3s;
    }
  }

  // Left pane has priority
  &.left {
    > div.is-split-container > div.panel:first-child {
      //box-shadow:2px 0 8px rgba(0,0,0,0.5);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: panelSlideIn50ToFullFromLeft 0.3s;
    }

    > div > div.panel:last-child {
      z-index: -1;
    }
  }
}

/*
------------------------------------------
4-State: Grid on left, 2 previews on right

E.g., Account Application Quotes
------------------------------------------
*/
div.is-tab-page.state-count-4 {
  // Normal
  &.normal {
    > div.is-split-container > div.panel:first-child {
      animation: panelSlideInFullFromLeft 0.3s;
    }

    > div > div.panel:last-child,
    > div > div.panel:nth-child(2) {
      animation: panelSlideInFromLeft 0.3s;
    }
  }

  // Left pane has priority
  &.left1 {
    > div.is-split-container > div.panel:first-child {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: panelSlideInFromLeft 0.3s;
    }

    > div > div.panel:last-child,
    > div > div.panel:nth-child(2) {
      z-index: -1;
    }
  }

  // Right 1 pane has priority
  &.right1 {
    > div > div.panel:first-child,
    > div > div.panel:last-child {
      z-index: -1;
    }

    > div > div.panel:nth-child(2) {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: panelSlideInFromRight 0.3s;
    }
  }

  // Right 2 pane has priority
  &.right2 {
    > div > div.panel:first-child,
    > div > div.panel:nth-child(2) {
      z-index: -1;
    }

    > div > div.panel:last-child {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: panelSlideInFromRight 0.3s;
    }
  }
}

/*
=============
 CUSTOM ICONS
=============
*/
  .is-custom-icon-custom::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F328";
  }

  .is-custom-icon-calendar::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F508";
  }

  .is-custom-icon-chartbar::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F185";
  }

  .is-custom-icon-chartline::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F238";
  }

  .is-custom-icon-clock::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F469";
  }

  .is-custom-icon-dashboard::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F226";
  }

  .is-custom-icon-exclamation::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F534";
  }

  .is-custom-icon-flag::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F227";
  }

  .is-custom-icon-heart::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F487";
  }

  .is-custom-icon-help::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F223";
  }

  .is-custom-icon-info::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F348";
  }

  .is-custom-icon-person::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F338";
  }

  .is-custom-icon-rosette::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F313";
  }

  .is-custom-icon-star::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F155";
  }

  .is-custom-icon-comments::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F101";
  }

  .is-custom-icon-image::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F128";
  }

  .is-custom-icon-key::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F112";
  }

  .is-custom-icon-omega::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F220";
  }

  .is-custom-icon-pencil::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F464";
  }

  .is-custom-icon-sos::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F468";
  }

  .is-custom-icon-tag::before {
    font-family: isdi;
    font-weight: normal;
    content: "\F323";
  }


/* Side Bar Hidden */
body.is-side-bar-hidden
{
  .is-nav-side
  {
    left:-@NAV_SIDE_WIDTH;
    width:0;
    overflow:hidden;
    transition:all 0.2s;
  }

  .is-content-main
  {
    left:0;
    transition:all 0.2s;
  }

  .mainmenubutton
  {
    width:0;
    overflow:hidden;
    transition:all 0.2s;
  }

  .is-nonmodal-footer.collapsed {
    left:0 !important;
    bottom:0 !important;
  }

  
  /* Responsive (side bar at the bottom of screen on small devices) */
  @media @SMALL_DEVICE_PORTRAIT
  {
    .is-nav-side {
      bottom:-@NAV_SIDE_WIDTH;
      height:0;
      overflow:hidden;
      transition:all 0.2s;
    }

    .is-content-main {
      bottom:0;
      transition:all 0.2s;
    }
  }
}


/*
======================================================
 Tools - Quick Open
======================================================
*/
.tool-quick-open {
  .message-text
  {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .results
  {
    display: block;
    font-size: 13px;
    animation: pop 0.2s;

    > ul
    {
      list-style: none;
      display: block;
      margin: 12px 0 0 0;
      padding: 0;

      > li
      {
        background-color: rgba(0,0,0,0.025);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 4px;
        display: block;
        margin: 0;
        padding: 0;
        margin-bottom: 8px;

        > a
        {
          color: black;
          cursor: pointer;
          display: block;
          padding: 8px;
          text-decoration: none;

          > img
          {
            margin-right: 6px;
            width: 16px;
            height: 16px;
            vertical-align: middle;
          }  
        }
      }
    }
  }
}

/*
======================================================
 Test Mode
======================================================
*/
html.test-mode {
  body {
    border:4px solid #B6FF00;
  }
}

/*
======================================================
 Record Preview Mode
======================================================
*/
html.record-preview {
  body {
    // Content
    div.is-content-main {
      right:50% !important;
      transition:right 0.2s;
    }

    // Records View
    ul#MainViews {
      > li#viewRecords {
        // Force records view to show (this will not hide the current view)
        display:block !important; 

        // Force main part of records view to be invisible so it does not overlay any views AFTER the records view
        height:0 !important;
        overflow:hidden;
        top:0 !important;
        bottom:0 !important;
        min-height:0 !important;
        max-height:0 !important;

        // Record Tabs
        div.is-record-tabs {
          ul.buttons,
          ul.tabs {
            border:none !important;
            height:0px !important;
            overflow:hidden;
            padding:0 !important;
          }

          li.record-preview {
            background-color:#ffffee;
            color:black;
            box-shadow:-4px 0 4px rgba(0,0,0,0.2);
            border-radius:0;
            position:fixed;
            top:@NAV_TOP_HEIGHT;
            left:50%;
            right:0;
            animation: panelSlideInFullFromRight 0.2s;

            &:after,
            &:before {
              display:none !important; // Hide left-hand and right-hand curves
            }
          }
        }
      }

      // Record Page
      div.is-record-tab-page.record-preview {
        box-shadow:-4px 0 4px rgba(0,0,0,0.2);
        position:fixed;
        top:calc(@NAV_TOP_HEIGHT+32px);
        bottom:0;
        left:50%;
        right:0;
        width:50%;
        animation: panelSlideInFullFromRight 0.2s;
      }
    }
  }
}

.record-preview-disabled {
  // Exists simply as an identifier
}

/*
======================================================
 Other Animations
======================================================
*/
@keyframes notificationsSlideUp {
  0% {
    transform: translate(0, 132px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes widget-tabbed-show {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(4px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes panelSlideInFromLeft {
  0% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes panelSlideInFromRight {
  0% {
    transform: translate(50%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes panelSlideInFullFromLeft {
  0% {
    transform: translate(-100%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes panelSlideIn50ToFullFromLeft {
  0% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes panelSlideInFullFromRight {
  0% {
    transform: translate(100%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes panelSlideOutToRight {
  0% {
    transform: translate(50%, 0);
    z-index: auto;
  }

  100% {
    transform: translate(100%, 0);
  }
}

@keyframes panelFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes main-view-new {
  0% {
    transform: scale(0.75);
  }

  40% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  60% {
    transform: rotateZ(10deg);
  }

  70% {
    transform: rotateZ(0deg);
  }

  80% {
    transform: rotateZ(10deg);
  }

  90% {
    transform: rotateZ(0deg);
  }
}

@keyframes main-view-old {
  0% {
    background-color: darken(@THEME_BGCOLOUR_CONTRAST, 25%);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes page-auto-visit {
  0% {
    transform: scale(0.7) rotateZ(0.5deg);
    opacity:0;
  }

  100% {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }
}