/* Minification failed. Returning unminified contents.
(90,13): run-time error CSS1030: Expected identifier, found ' '
(90,14): run-time error CSS1031: Expected selector, found '100%'
(90,14): run-time error CSS1025: Expected comma or open brace, found '100%'
(93,9): run-time error CSS1030: Expected identifier, found ' '
(93,16): run-time error CSS1031: Expected selector, found ';'
(93,16): run-time error CSS1025: Expected comma or open brace, found ';'
(96,10): run-time error CSS1030: Expected identifier, found ' '
(96,15): run-time error CSS1031: Expected selector, found ';'
(96,15): run-time error CSS1025: Expected comma or open brace, found ';'
(99,18): run-time error CSS1030: Expected identifier, found ' '
(99,25): run-time error CSS1031: Expected selector, found ';'
(99,25): run-time error CSS1025: Expected comma or open brace, found ';'
(100,10): run-time error CSS1030: Expected identifier, found ' '
(100,11): run-time error CSS1031: Expected selector, found '0'
(100,11): run-time error CSS1025: Expected comma or open brace, found '0'
(101,26): run-time error CSS1030: Expected identifier, found ' '
(101,34): run-time error CSS1031: Expected selector, found ';'
(101,34): run-time error CSS1025: Expected comma or open brace, found ';'
(102,1): run-time error CSS1019: Unexpected token, found '}'
(102,3): run-time error CSS1031: Expected selector, found '/'
(102,3): run-time error CSS1025: Expected comma or open brace, found '/'
(740,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(752,28): run-time error CSS1039: Token not allowed after unary operator: '-arcori-colour-highlight'
 */
/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover,
a:active {
  outline: 0;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* img style breaks Kendo TabStrip with images... */
/*img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto\9;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}*/
#map_canvas img,
.google-maps img {
  max-width: none;
}
button,
input,
select,
/*textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}*/
button,
input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/*textarea {
  overflow: auto;
  vertical-align: top;
}*/
@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
.row {
  margin-left: -20px;
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
  line-height: 0;
}
.row:after {
  clear: both;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
.span9 {
  width: 700px;
}
.span8 {
  width: 620px;
}
.span7 {
  width: 540px;
}
.span6 {
  width: 460px;
}
.span5 {
  width: 380px;
}
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}
.offset12 {
  margin-left: 980px;
}
.offset11 {
  margin-left: 900px;
}
.offset10 {
  margin-left: 820px;
}
.offset9 {
  margin-left: 740px;
}
.offset8 {
  margin-left: 660px;
}
.offset7 {
  margin-left: 580px;
}
.offset6 {
  margin-left: 500px;
}
.offset5 {
  margin-left: 420px;
}
.offset4 {
  margin-left: 340px;
}
.offset3 {
  margin-left: 260px;
}
.offset2 {
  margin-left: 180px;
}
.offset1 {
  margin-left: 100px;
}
.row-fluid {
  width: 100%;
  *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-fluid:after {
  clear: both;
}
.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
}
.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}
.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}
.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}
.row-fluid .span10 {
  width: 82.97872340425532%;
  *width: 82.92553191489361%;
}
.row-fluid .span9 {
  width: 74.46808510638297%;
  *width: 74.41489361702126%;
}
.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}
.row-fluid .span7 {
  width: 57.44680851063829%;
  *width: 57.39361702127659%;
}
.row-fluid .span6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
}
.row-fluid .span5 {
  width: 40.42553191489362%;
  *width: 40.37234042553192%;
}
.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}
.row-fluid .span3 {
  width: 23.404255319148934%;
  *width: 23.351063829787233%;
}
.row-fluid .span2 {
  width: 14.893617021276595%;
  *width: 14.840425531914894%;
}
.row-fluid .span1 {
  width: 6.382978723404255%;
  *width: 6.329787234042553%;
}
.row-fluid .offset12 {
  margin-left: 104.25531914893617%;
  *margin-left: 104.14893617021275%;
}
.row-fluid .offset12:first-child {
  margin-left: 102.12765957446808%;
  *margin-left: 102.02127659574467%;
}
.row-fluid .offset11 {
  margin-left: 95.74468085106382%;
  *margin-left: 95.6382978723404%;
}
.row-fluid .offset11:first-child {
  margin-left: 93.61702127659574%;
  *margin-left: 93.51063829787232%;
}
.row-fluid .offset10 {
  margin-left: 87.23404255319149%;
  *margin-left: 87.12765957446807%;
}
.row-fluid .offset10:first-child {
  margin-left: 85.1063829787234%;
  *margin-left: 84.99999999999999%;
}
.row-fluid .offset9 {
  margin-left: 78.72340425531914%;
  *margin-left: 78.61702127659572%;
}
.row-fluid .offset9:first-child {
  margin-left: 76.59574468085106%;
  *margin-left: 76.48936170212764%;
}
.row-fluid .offset8 {
  margin-left: 70.2127659574468%;
  *margin-left: 70.10638297872339%;
}
.row-fluid .offset8:first-child {
  margin-left: 68.08510638297872%;
  *margin-left: 67.9787234042553%;
}
.row-fluid .offset7 {
  margin-left: 61.70212765957446%;
  *margin-left: 61.59574468085106%;
}
.row-fluid .offset7:first-child {
  margin-left: 59.574468085106375%;
  *margin-left: 59.46808510638297%;
}
.row-fluid .offset6 {
  margin-left: 53.191489361702125%;
  *margin-left: 53.085106382978715%;
}
.row-fluid .offset6:first-child {
  margin-left: 51.063829787234035%;
  *margin-left: 50.95744680851063%;
}
.row-fluid .offset5 {
  margin-left: 44.68085106382979%;
  *margin-left: 44.57446808510638%;
}
.row-fluid .offset5:first-child {
  margin-left: 42.5531914893617%;
  *margin-left: 42.4468085106383%;
}
.row-fluid .offset4 {
  margin-left: 36.170212765957444%;
  *margin-left: 36.06382978723405%;
}
.row-fluid .offset4:first-child {
  margin-left: 34.04255319148936%;
  *margin-left: 33.93617021276596%;
}
.row-fluid .offset3 {
  margin-left: 27.659574468085104%;
  *margin-left: 27.5531914893617%;
}
.row-fluid .offset3:first-child {
  margin-left: 25.53191489361702%;
  *margin-left: 25.425531914893618%;
}
.row-fluid .offset2 {
  margin-left: 19.148936170212764%;
  *margin-left: 19.04255319148936%;
}
.row-fluid .offset2:first-child {
  margin-left: 17.02127659574468%;
  *margin-left: 16.914893617021278%;
}
.row-fluid .offset1 {
  margin-left: 10.638297872340425%;
  *margin-left: 10.53191489361702%;
}
.row-fluid .offset1:first-child {
  margin-left: 8.51063829787234%;
  *margin-left: 8.404255319148938%;
}
[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  content: "";
  line-height: 0;
}
.container:after {
  clear: both;
}
.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}
.container-fluid:before,
.container-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.container-fluid:after {
  clear: both;
}

.a-textarea-in-bootstrap-column {
    resize: vertical;
}

.a-italic {
    font-style: italic;
}

.a-centered {
    text-align: center;
}

/* Red foreground color of element's text and text decorations. */
.a-red {
    color: red;
}

/* Styling based on label element styling for when you want something to look like a label but can't/shouldn't use a label,
    e.g. labelling something that isn't an input, as the WCAG rules essentially state that input elements must have labels and labels
    should be used with inputs(or similar)
    This is based on the currently used bootstrap styling for the label element and may need to be updated when bootstrap is to
    retain visual parity. */
.a-label-nowrap {
    display: block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
    cursor: default;
}

/* Style to be applied to a "blank" "label" so that it is the same height as a label with actual content.
    Used with a-label-nowrap when the "label" will have no content. 
    Not to be used with real <label> as those must actually have content for accessibility. */
.a-label-blank:before {
    content: "\200b"; /* A zero-width(invisible) space to retain proper element height. */
}

/* Style an element with a height of 100%. */
.a-full-height {
    height: 100%;
}

/* Style a Kendo Editor to 100% when contained within an element having the "a-full-height" class */
.a-full-height > .k-widget.k-editor.k-editor-widget {
    height: 100%;
}

/* Style an element to be hidden. */
.a-hidden {
    display: none;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles for a wrapper to contain an input with inline buttons that  */
/* appear seamless.                                                   */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* TODO - remove this when merged into kendo-upgrade. */
/* Flex so layout/sizing is correct, apply the themes border to the wrapper... */
.a-input-with-buttons {
    display: flex;
    border-style: solid;
    border-width: 1px;
}
/* ...and remove it from the constituent elements so that no matter what buttons are hidden/shown, the border still looks good because it is applied by the wrapper. */
.a-input-with-buttons > span.k-widget.k-textbox {
    border: none;
}

.a-input-with-buttons .k-button {
    border-width: 0;
    border-inline-start-width: 1px;
    border-radius: 0;
}

/* Theme-specific Styles for a wrapper to contain an input with       */
/* inline buttons that appear seamless.                               */
.a-input-with-buttons {
    border-color: #ccc;
    border-radius: 4px;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Removes header row(title row) from Kendo Grid. 
    Not perfect as the Grid is not meant to be used this way. */
.a-noHeaderGrid > .k-grid-header,
.a-noHeaderGrid > table > .k-grid-header {
    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;
}

/* Class to apply to grid column definition to force the column to not wrap to more than 1 line. */
.a-gridcell-nowrap,
/* And to apply to the grid to affect all columns. */
.k-grid.a-gridcell-nowrap > .k-grid-content tr > td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.a-bold {
    font-weight: bold;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles for a wrapper to contain an input with inline label that    */
/* lines up nicely.                                                   */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.a-input-with-inline-label {
    display: flex;
    align-items: center;
    column-gap: 5px; /* Approximate width of &nbsp; with current base font-size(14px). */
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

.a-flex-column {
    display: flex;
    flex-direction: column;
}

/* Applied to a child of a display: flex item to make it take up the remaining space left over after the rest of its siblings have take their space. */
.a-flex-fill-remaining {
    flex: 1 1 auto;
    /* But prevent shrink to nothing.  This may depend on contained content and may need to be separated out. */
    min-height: 5em;
    min-width: 5em;
}

/* Flex container where child items will be distributed across the row/col taking the space they need and the remaining space distributed between
    the child items. */
.a-flex-space-between {
    display: flex;
    justify-content: space-between;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles for form layout(label/editor) to replace out bootstrap      */
/* (which always fights with kendo).                                  */
/* Based on kendo's implementation.                                   */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.a-form-label {
    display: flex;
}
.a-form-control-wrap {
    display: block;
}
.a-form-control {
    width: 100%;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles for Arcori().DisplayFor() helper.                           */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Common */
span.a-display-for-text-only.k-textbox {
    border: none;
    box-shadow: none;
}
span.a-display-for.k-textbox:empty:before {
    content: "\200b"; /* A zero-width(invisible) space to retain proper element height. */
}
/* SM/WM(bootstrap3) */
span.a-display-for.k-textbox.form-control {
    padding-left: .571em;
    padding-top: .2724em;
    padding-bottom: .2723em;
}
span.a-display-for-text-only.k-textbox.form-control {
    background-color: unset;
    opacity: unset;
}
/* PM */
span.a-display-for.k-textbox {
    padding-left: .571em;
    padding-top: .404em;
    padding-bottom: 0.404em;
}
span.a-display-for-text-only.k-textbox {
    background-color: unset;
    opacity: unset;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles for consistent kendo Notification display.                  */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.a-notification {
    font-weight: bold;
    padding: 5px;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles for FlexBox-based resize/layout of ReportViewer.            */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.a-reportViewerContent {
    display: flex;
    flex-direction: column;
}

.a-reportViewerContent > .a-parameter-area {
    flex: 1; /* ParameterArea gets 1/4 of the vertical space. */
    min-height: 0; /* Allows shrinking of area. */
    display: flex; /* For the child editors to be flex layout-ed. */
    flex-direction: column;
    max-height: fit-content; /* Prevents area from vertically stretching more than it needs to show all the editors: area get UP TO 1/4 of the space until all editors are display, then it stops stretching and the ResultsArea will get more than 3/4. */
}
.a-reportViewerContent > .a-parameter-area > .a-parameter-editors {
    overflow: auto; /* Causes scrollbar to appear when the number of editors exceeds the ParameterArea space instead of getting cut-off/pushing buttons off the bottom. */
}

.a-reportViewerContent > #reportGridDiv {
    flex: 4; /* ResultsArea gets 3/4 of the vertical space. */
    min-height: 0; /* Allows shrinking of area. */
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Normal text. Used in Waitlist Manager in a grid group where the default text style is bolded. (see Property Unit selector). 
    Also used in Property Manager to remove the bolding that is applied when the Arcori().Title() function is used to display text. */
.a-font-weight-normal {
    font-weight: normal;
}
/* Global CSS variables. */
:root {
    --arcori-colour-highlight: #428bca;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles to override the default Kendo UI styles for the info        */
/* notification.                                                      */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Darker blue background with white text.
    This borrows the colours from the kendo primary button styling from the theme. */
.k-notification-info {
    color: #fff;
    border-color: #357ebd;
    background-color: var(--arcori-colour-highlight);
}
/* Default link text colour from bootstrap is blue which does not show well on the colours chosen for the k-notification-info.
    Chose the same white as the text colour so that links are at least visible but are hard to distinguish from the regular text now.
    This is not ideal but given no direction on how to style links in the info notification, this is the best compromise. */
.k-notification-info a {
    color: #fff;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles for the parameter area used by GridReport/AuditLog/etc.     */
/* TODO - some styles may be/are theme-specific. */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.a-parameter-area {
    padding: 5px;
    margin-bottom: 5px;
    background-color: inherit;
}

.a-parameter-editors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14em, 23em)); /* min to prevent uselessly small, max to prevent uselessly big. */
    gap: 15px 30px; /* Matches Bootstrap(used everywhere else) which has 15px on both left and right(30px) and 15px on the bottom of form-groups. */
    margin-bottom: 15px;
}

.a-parameter-editor {
}

.a-parameter-buttons {
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    font-size: 75% !important;
    font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

/* Trying to get content to take up height of screen */
html, body {
    margin: 0;
    padding: 0;
    border-top: 0;
}

div#body {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* Ensure that the height of the element includes the
         box border, not just the content */
    border: 0;
    border-top: 50px solid white;
    border-bottom: 26px solid white;
    /* Leave some space for the header and footer to
         overlay. */
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

a {
    color: #696969;
}

li {
    line-height: 1.6;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

    header h1, #header h1 {
        font-weight: bold;
        padding: 5px 0;
        margin: 0;
        color: #fff;
        border: none;
        line-height: 2em;
        font-size: 32px !important;
    }

#main {
    background: #fff;
    padding: 30px 30px 15px 30px;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

footer, #footer {
    color: #999;
    padding: 5px 0;
    text-align: center;
    line-height: normal;
    margin: 0;
    font-size: .9em;
}

/* MENU   
----------------------------------------------------------*/
#menu {
    position: relative;
    margin: 0;
    text-align: right;
}

    #menu .t-item {
        border-width: 0 0 0 1px;
    }

    #menu .t-link {
        padding: 5px 20px;
        font-weight: bold;
        text-decoration: none;
        line-height: 1.8em;
    }

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

/*input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}*/

/* TABLE
----------------------------------------------------------*/

/*table - Removed Because it interferes with Report css - JM
{
  border: solid 1px #e8eef4;
  border-collapse: collapse;
}

table td 
{
  padding: 5px;   
  border: solid 1px #e8eef4;
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #e8eef4;   
}*/

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

div#title {
    display: block;
    text-align: left;
}

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: White;
}

    #logindisplay a:link {
        color: white;
        text-decoration: underline;
    }

    #logindisplay a:visited {
        color: white;
        text-decoration: underline;
    }

    #logindisplay a:hover {
        color: white;
        text-decoration: none;
    }

/* Styles for validation helpers
-----------------------------------------------------------*/
span.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    /* Telerik */
    /*font-weight: bold;
    color: #ff0000;*/
    /* Microsoft */
    color: #e80c4d;
    border-color: #e80c4d;
    border-style: solid;
    border-width: 1px;
    background-color: #fff0f0;
    font-weight: bold;
    font-size: 1.1em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: normal;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label {
    margin: 0.5em 0 0 0;
    line-height: 1.4;
}

.editor-label-right {
    margin: 0.5em 0 0 0;
    line-height: 1.4;
    text-align: right;
}

.display-label-inline,
.editor-label-inline {
    margin: 0.5em 0 0 0;
    line-height: 1.4;
    display: inline-block;
}

/*.display-field,
.editor-field
{
    margin:0.5em 0 0 0;
}*/

.display-field-inline,
.editor-field-inline {
    display: inline-block;
}

.editor-field-nolabel {
    padding: 5px 0px 0px 0px; /* Adds space between field and previous field when no editor-label used. */
}

.editor-field-blanklabel {
    padding-top: 1.9em; /* Drops field down the same amount as a populated editor-label would. */
}

.text-box {
    width: 30em;
}

    .text-box.multi-line {
        height: 6.5em;
    }

.tri-state {
    width: 6em;
}

/* Other MS styles
----------------------------------------------------------*/
#logoutForm {
    display: inline;
}

/* Arcori styles
----------------------------------------------------------*/

.a-notetaskgrid {
    margin: 0 .29em .3em;
}

/* fieldset with smaller margin/padding and smaller legend */
fieldset.a-groupbox {
    padding: .3em .92em;
    margin: 0;
}

    fieldset.a-groupbox legend {
        font-size: 1em;
        font-weight: normal;
    }

.a-titlebar {
    padding: 0px 0px 0px 0px;
    font-size: 1.25em;
    text-indent: 25px;
    font-weight: bold;
}

.a-titlebar-centered {
    padding: 0px 0px 0px 0px;
    font-size: 1.25em;
    text-align: center;
    font-weight: bold;
}

.a-100width {
    width: 99%;
    text-align: left;
}

.a-100width-right {
    width: 99%;
    text-align: end;
}

.a-95width {
    width: 95%;
}

.a-90width {
    width: 90%;
}

.a-85width {
    width: 85%;
}

.a-75width {
    width: 75%;
}

.a-50width {
    width: 50%;
}

.a-33width {
    width: 33%;
}

.a-25width {
    width: 25%;
}

.a-15width {
    width: 15%;
}

/* Red, bordered style for static information of a serious nature. */
.a-critical {
    color: red;
    font-weight: bolder;
    border: 1px solid red;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 5px .3em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0.5em 0 0 0;
}

/* Development indicator for UI */
.todo {
    color: #640e89;
    font-weight: bold;
    font-size: 1.1em;
    border: 1px solid #640e89;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: normal;
    margin-top: 5px;
    visibility:hidden;

}

.header-background {
    width: 100%;
    height: 50px;
    background-color:#222;
    text-align: center;
}

.searchBox {
    width: 200px;
    background: #fff url('../images/search.png') no-repeat 100% center;
}

.search-menu {
    float: right;
    margin: 5px;
}

.app-logo {
    float: left;
    margin-left: 5px;
}

/*dev uses 2.1 in report creation, 21 for web display, both 21 and 2.1
  need to be installed on iis server where deployment package is server from*/

/*This font face is the webfont, displayed on the cheque stock screen, and the reportviewer*/
@font-face {
    font-family: 'MICR E13B 21';
    src: url('../Content/fonts/advmicr-webfont.eot');
    src: url('../Content/fonts/advmicr-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Content/fonts/advmicr-webfont.woff') format('woff'),
         url('../Content/fonts/advmicr-webfont.ttf') format('truetype'),
         url('../Content/fonts/advmicr-webfont.svg#micr_e13b_2.1_bt') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*catch MICR preview on CS setup, and display webfont*/
.a-micr-preview {
    font-family: 'MICR E13B 21';
    font-size: medium;
}

/*catch bank scan line on cheques in the report viewer to display webfont*/
.BankScanLine1  {
    font-family: 'MICR E13B 21';
}

/*This font face is used to by Dev to generate reports (ie - cheque), but is not a webfont*/
@font-face {
    font-family: 'MICR E13B 2.1';
    src: url('../Content/fonts/advmicr-webfont.eot');
    src: url('../Content/fonts/advmicr-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Content/fonts/advmicr-webfont.woff') format('woff'),
         url('../Content/fonts/advmicr-webfont.ttf') format('truetype'),
         url('../Content/fonts/advmicr-webfont.svg#micr_e13b_2.1_bt') format('svg');
    font-weight: normal;
    font-style: normal;
}

div#container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto; /* center, not in IE5 */
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
}

header,
footer {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #eee;
    /* Specify a background color so the content text doesn't
         bleed through the footer! */

    z-index: 101;
    /* specify a z-index so controls do not bleed */
    
}

header {
    top: 0;
}

footer {
    bottom: 0;
    height: 15px;
}

.mainnav {
    height: 100%;
}
.mainnav .mainnavitem {
    display:none;
}

.subnav {
    background-image: none;
    background-color: inherit;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    margin-left: -0.5em;
    margin-right: -0.5em;
    margin-bottom: 0.25em;
}

.a-ul-radio {
    list-style-type: none;
    padding: 0;
    margin-top: 0;
}

    .a-ul-radio input[type="radio"] {
        margin-right: 5px;
    }

.a-info:not(td) {
    background: #ffffe1 !important;
}


.a-error {
    background-color: red !important;
}

.a-img-button {
    padding: 4px;
    margin-top: -1px;
}

.a-currency {
    text-align: right;
}

.voided-cheque {
    position: relative;
}

    .voided-cheque::before {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url('images/VOID.png') no-repeat center;
        pointer-events: none;
        z-index: 9999;
        opacity: 0.5;
    }

/*#reportView, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}*/

.a-grid-footer {
    display: block;
    margin: 0;
    padding: .22em .2em .28em;
    cursor: default;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}

.a-block {
    background-color: inherit;
}

.a-block-content {
    padding: 0px 5px 5px 5px;
    margin-top: -5px;
}

.dbSection {
    width: 400px;
}

.module {
    background: #eee;
    margin: 0 0 0 0;
}

    .module h2 {
        background: #ccc;
        line-height: 2;
        padding: 0 0 0 10px;
        font-size: 12px;
        box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);
        padding: 0px;
        margin: 0px 0px 2px 0px;
    }

        .module h2 a {
            float: right;
            position: relative;
            text-decoration: none;
            color: #333;
            padding: 0 10px;
            border-left: 5px solid white;
            -webkit-transition: padding 0.1s linear;
            -moz-transition: padding 0.1s linear;
            -ms-transition: padding 0.1s linear;
            -o-transition: padding 0.1s linear;
        }

            .module h2 a:hover {
                padding: 0 14px;
            }

            .module h2 a:active {
                padding: 0 16px;
            }

    .module ul {
        list-style: none;
        padding: 10px 0;
    }

    .module li {
        color: #333;
        border-bottom: 1px solid #cfcfcf;
        border-top: 1px solid #fbf6f6;
        padding: 10px;
        font-family: Georgia, Serif;
    }

        .module li:first-child {
            border-top: 0;
            padding-top: 0;
        }

        .module li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    .module h2 a:before,
    .module h2 a:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0;
        height: 0;
    }

    .module h2 a:before {
        left: -12px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid white;
        margin-top: -8px;
    }

.moduleTitle1 h1 {
    background: #000000;
    margin: 0 0 0 0;
    line-height: 2;
    font-size: 14px;
    text-align: center;
    color: #CCCCCC;
    margin-top: 5px;
}


.module.blue h2 a {
    background: #a2d6eb;
}

    .module.blue h2 a:hover {
        background: #c5f0ff;
    }

    .module.blue h2 a:after {
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #a2d6eb;
        margin-top: -6px;
    }

    .module.blue h2 a:hover:after {
        border-right-color: #c5f0ff;
    }


.moduleTitle2 h1 {
    background: #9cf1a4;
    margin: 0 0 0 0;
    line-height: 2;
    font-size: 14px;
    text-align: center;
}

.module.green h2 a {
    background: #9cf1a4;
}

    .module.green h2 a:hover {
        background: #bbffcf;
    }

    .module.green h2 a:after {
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #9cf1a4;
        margin-top: -6px;
    }

    .module.green h2 a:hover:after {
        border-right-color: #bbffcf;
    }


.moduleTitle3 h1 {
    background: #f0a5b5;
    margin: 0 0 0 0;
    line-height: 2;
    font-size: 14px;
    text-align: center;
}

.module.red h2 a {
    background: #f0a5b5;
}

    .module.red h2 a:hover {
        background: #ffc7d2;
    }

    .module.red h2 a:after {
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #f0a5b5;
        margin-top: -6px;
    }

    .module.red h2 a:hover:after {
        border-right-color: #ffc7d2;
    }


.moduleTitle4 h1 {
    background: #008A00;
    margin: 0 0 0 0;
    line-height: 2;
    font-size: 14px;
    text-align: center;
}

.module.emerald h2 a {
    background: #008A00;
}

    .module.emerald h2 a:hover {
        background: #60A917;
    }

    .module.emerald h2 a:after {
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #008A00;
        margin-top: -6px;
    }

    .module.emerald h2 a:hover:after {
        border-right-color: #60A917;
    }

.moduleTitle5 h1 {
    background: #647687;
    margin: 0 0 0 0;
    line-height: 2;
    font-size: 14px;
    text-align: center;
}

.module.steel h2 a {
    background: #647687;
}

    .module.steel h2 a:hover {
        background: #7aa0c3;
    }

    .module.steel h2 a:after {
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #647687;
        margin-top: -6px;
    }

    .module.steel h2 a:hover:after {
        border-right-color: #7aa0c3;
    }

.moduleTitle6 h1 {
    background: #0073ef;
    margin: 0 0 0 0;
    line-height: 2;
    font-size: 14px;
    text-align: center;
}

.module.cobalt h2 a {
    background: #7acff5;
}

    .module.cobalt h2 a:hover {
        background: #7aa0c3;
    }

    .module.cobalt h2 a:after {
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #7acff5;
        margin-top: -6px;
    }

    .module.cobalt h2 a:hover:after {
        border-right-color: #7aa0c3;
    }

td[role=gridcell].centeredCell {
    text-align: center;
}

.mainNavExtra {
    height:100%;
    background-color:#fff; 
    position:relative;
}

.floatingToolbar {
    position: fixed; 
    width: 100%; 
    z-index: 100;
}

.divWithFloatingMenuToolbar {
    padding-top: 30px; /* height of menu/toolbar */
    padding-bottom: 20px; /* height of page footer */
}

.divWithFloatingToolbar {
    padding-top: 38px; /* height of toolbar */
    padding-bottom: 20px; /* height of page footer */
}

.a-nofocus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* For inline buttons contained within an input. */
.a-icon-button {
    top: 50%;
    margin: -8px 0 0;
    position: absolute;
    right: 3px;
}

.successTemplate {
    width: 300px;
    padding: 0 10px;
    overflow: auto;
}

.msgIcon {
    float: left;
}

.msgIcon img {
    display: inline-block;
}

.successTemplate .msg {
    margin-left: 47px;
    margin-bottom: 5px;
}

.successTemplate .msgTitle {
    font-size: 1.5em;
}

.monospace {
    font-family: monospace;
    font-size: medium;
}

#userMenuContainer {
    float: right;
    text-align: left;
    margin: 5px 10px 0 10px;
}

.a-no-LRT-borders {
    border-top: none;
    border-left: none;
    border-right: none;
}

.a-no-LRB-borders {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.a-no-borders {
    border: none;
}

.a-warning {
    border: 1px solid orangered;
    background-color: lightyellow;
    color: orangered;
    font-size: 1.1em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: normal;
    width: 100%;
}

.km-tabstrip .km-button
{
    font-size: 1.2em;
}

.a-budget-validation-result {
    max-height: 64px;
    overflow: auto;
}

.a-withbuttonwrap .a-withbutton {
    left: -4px;
    padding-right: 2px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

/* XFrom css */
.form-page {
    position: relative;
    width: 850px;
    height: 1100px;
    background-repeat: no-repeat;
    background-size: 850px 1100px;
}
.form-textinput {
    background-color: #daecf4;
    border-style: none;
    resize: none;
    height: 100%;
    width: 100%;
    padding: 0;
    min-height: 0;
}

.N1-1 {
    background-image: url("Forms/N1_1.png");
}
.N1-2 {
    background-image: url("Forms/N1_2.png");
}

.N2-1 {
    background-image: url("Forms/N2_1.png");
}
.N2-Fr-1 {
    background-image: url("Forms/N2_Fr_1.jpg");
}

.N4-1 {
    background-image: url("Forms/n4_1.png");
}
.N4-2 {
    background-image: url("Forms/n4_2.png");
}
.N4-3 {
    background-image: url("Forms/n4_3.png");
}

.N5_1 {
    background-image: url("Forms/N5_1.jpg");
}

.N5_2 {
    background-image: url("Forms/N5_2.jpg");
}

.N5_3 {
    background-image: url("Forms/N5_3.jpg");
}

.N5_Fr_1 {
    background-image: url("Forms/N5_Fr_1.jpg");
}

.N5_Fr_2 {
    background-image: url("Forms/N5_Fr_2.jpg");
}

.N5_Fr_3 {
    background-image: url("Forms/N5_Fr_3.jpg");
}

.N7_1 {
    background-image: url("Forms/N7_1.jpg");
}
.N7_2 {
    background-image: url("Forms/N7_2.jpg");
}
.N7_Fr_1 {
    background-image: url("Forms/N7_Fr_1.jpg");
}
.N7_Fr_2 {
    background-image: url("Forms/N7_Fr_2.jpg");
}

.N11_1 {
    background-image: url("Forms/N11_1.jpg");
}
.N11_2 {
    background-image: url("Forms/N11_2.jpg");
}
.N11_Fr_1 {
    background-image: url("Forms/N11_Fr_1.jpg");
}
.N11_Fr_2 {
    background-image: url("Forms/N11_Fr_2.jpg");
}

.L1-1 {
    background-image: url("Forms/L1_1.png");
}
.L1-2 {
    background-image: url("Forms/L1_2.png");
}
.L1-3 {
    background-image: url("Forms/L1_3.png");
}
.L1-4 {
    background-image: url("Forms/L1_4.png");
}
.L1-5 {
    background-image: url("Forms/L1_5.png");
}
.L1-6 {
    background-image: url("Forms/L1_6.png");
}
.L1-7 {
    background-image: url("Forms/L1_7.png");
}
.L1-8 {
    background-image: url("Forms/L1_8.png");
}
.L1-9 {
    background-image: url("Forms/L1_9.png");
}
.L1-10 {
    background-image: url("Forms/L1_10.png");
}
.L1-11 {
    background-image: url("Forms/L1_11.png");
}
.CoS {
    background-image: url("Forms/CoS.png");
}
.HR3037 {
    background-image: url("Forms/HR3037.png");
}
.RTB30_1 {
    background-image: url("Forms/RTB30_1.png");
}
.RTB30_2 {
    background-image: url("Forms/RTB30_2.png");
}
.RTB30_3 {
    background-image: url("Forms/RTB30_3.png");
}
.RTB32_1 {
    background-image: url("Forms/RTB32_1.png");
}
.RTB32_2 {
    background-image: url("Forms/RTB32_2.png");
}
.RTB32_3 {
    background-image: url("Forms/RTB32_3.png");
}
.RTB32_4 {
    background-image: url("Forms/RTB32_4.png");
}
.RTB33_1 {
    background-image: url("Forms/RTB33_1.png");
}
.RTB33_2 {
    background-image: url("Forms/RTB33_2.png");
}
.RTB33_3 {
    background-image: url("Forms/RTB33_3.png");
}
.RTB33_4 {
    background-image: url("Forms/RTB33_4.png");
}
.RTB7_1 {
    background-image: url("Forms/RTB7_1.png");
}
.RTB7_2 {
    background-image: url("Forms/RTB7_2.png");
}
.RTB34_1 {
    background-image: url("Forms/RTB34_1.png");
}
.RTB34_2 {
    background-image: url("Forms/RTB34_2.png");
}

.FIN68_1 {
    background-image: url("Forms/FIN68_1.png");
}
.FIN68_2 {
    background-image: url("Forms/FIN68_2.png");
}

.L2_1 {
    background-image: url("Forms/L2_1.png");
}
.L2_2 {
    background-image: url("Forms/L2_2.png");
}
.L2_3 {
    background-image: url("Forms/L2_3.png");
}
.L2_4 {
    background-image: url("Forms/L2_4.png");
}
.L2_5 {
    background-image: url("Forms/L2_5.png");
}
.L2_6 {
    background-image: url("Forms/L2_6.png");
}
.L2_7 {
    background-image: url("Forms/L2_7.png");
}
.L2_8 {
    background-image: url("Forms/L2_8.png");
}
.L2_9 {
    background-image: url("Forms/L2_9.png");
}
.L2_10 {
    background-image: url("Forms/L2_10.png");
}
.L2_11 {
    background-image: url("Forms/L2_11.png");
}
.L2_12 {
    background-image: url("Forms/L2_12.png");
}
.L2_13 {
    background-image: url("Forms/L2_13.png");
}

.L2_Fr_1 {
    background-image: url("Forms/L2_Fr_1.png");
}
.L2_Fr_2 {
    background-image: url("Forms/L2_Fr_2.png");
}
.L2_Fr_3 {
    background-image: url("Forms/L2_Fr_3.png");
}
.L2_Fr_4 {
    background-image: url("Forms/L2_Fr_4.png");
}
.L2_Fr_5 {
    background-image: url("Forms/L2_Fr_5.png");
}
.L2_Fr_6 {
    background-image: url("Forms/L2_Fr_6.png");
}
.L2_Fr_7 {
    background-image: url("Forms/L2_Fr_7.png");
}
.L2_Fr_8 {
    background-image: url("Forms/L2_Fr_8.png");
}
.L2_Fr_9 {
    background-image: url("Forms/L2_Fr_9.png");
}
.L2_Fr_10 {
    background-image: url("Forms/L2_Fr_10.png");
}
.L2_Fr_11 {
    background-image: url("Forms/L2_Fr_11.png");
}
.L2_Fr_12 {
    background-image: url("Forms/L2_Fr_12.png");
}
.L2_Fr_13 {
    background-image: url("Forms/L2_Fr_13.png");
}

.L9_1 {
    background-image: url("Forms/L9_1.jpg");
}
.L9_2 {
    background-image: url("Forms/L9_2.jpg");
}
.L9_3 {
    background-image: url("Forms/L9_3.jpg");
}
.L9_4 {
    background-image: url("Forms/L9_4.jpg");
}
.L9_5 {
    background-image: url("Forms/L9_5.jpg");
}
.L9_6 {
    background-image: url("Forms/L9_6.jpg");
}
.L9_7 {
    background-image: url("Forms/L9_7.jpg");
}
.L9_8 {
    background-image: url("Forms/L9_8.jpg");
}
.L9_9 {
    background-image: url("Forms/L9_9.jpg");
}
.L9_10 {
    background-image: url("Forms/L9_10.jpg");
}
.L9_11 {
    background-image: url("Forms/L9_11.jpg");
}

.L9_Fr_1 {
    background-image: url("Forms/L9_Fr_1.jpg");
}

.L9_Fr_2 {
    background-image: url("Forms/L9_Fr_2.jpg");
}

.L9_Fr_3 {
    background-image: url("Forms/L9_Fr_3.jpg");
}

.L9_Fr_4 {
    background-image: url("Forms/L9_Fr_4.jpg");
}

.L9_Fr_5 {
    background-image: url("Forms/L9_Fr_5.jpg");
}

.L9_Fr_6 {
    background-image: url("Forms/L9_Fr_6.jpg");
}

.L9_Fr_7 {
    background-image: url("Forms/L9_Fr_7.jpg");
}

.L9_Fr_8 {
    background-image: url("Forms/L9_Fr_8.jpg");
}

.L9_Fr_9 {
    background-image: url("Forms/L9_Fr_9.jpg");
}

.L9_Fr_10 {
    background-image: url("Forms/L9_Fr_10.jpg");
}

.L9_Fr_11 {
    background-image: url("Forms/L9_Fr_11.jpg");
}


.a-100width.a-with-inline-button {
    width: -moz-calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
    width: calc(100% - 32px);
}

.a-org-header {
    color: white;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 14px;
    font-size: 18px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Styling for Dashboards. */
.dashboard-item-summary {
    font-size: 50px;
    text-align: center;
}
.dashboard-item-selected>.k-block .dashboard-item-summary {
    font-weight: bolder
}
#userDashboardDiv {
    position: relative;
}
#userDashboardDetailsDiv {
    position: relative;
}
.dashboard-item {
    float: left;
    position: relative;
    min-width: 150px;
    min-height: 100px;
    margin: 0 5px 5px;
    padding: 0;
}
.dashboard-item>.k-block {
    min-height: 102px;
}
.dashboard-item>.k-block>.k-header {
    cursor: move;
    /* Override default bootstrap padding on header so dashboard items don't create single item rows */
    padding: .3em 0px 0px 2px;
}
.dashboard-item>.k-block>.dashboard-item-content {
    cursor: pointer;
    position: relative;
    min-height: 50px;
}
#userDashboardSummariesDiv:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.dashboard-item.placeholder {
    opacity: 0.4;
    border: 1px dashed #a6a6a6;
}
.dashboard-item-selected>.k-block>.k-header {
    font-weight: bolder
}
#homeDashboardDiv {
    margin-top: 16px;
}

.a-centered {
    text-align: center;
}

/* Styling for picture upload controls currently only used for household member profile picture */
.a-picture-upload {
    height: 89px;
}
.a-picture-upload > div {
    position: relative;
}
.a-picture-upload > div > div {
    position: absolute;
    right: 0;
}
.a-picture-upload > img {
    max-width: 100%;
    max-height: 89px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}
.a-picture-preview {
    max-width: 100%;
    max-height: 154px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 0;
  margin-top: 0;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 0px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}

/* Styling to display a grid row as disabled*/
.disabled-row {
    opacity: 0.5;
    pointer-events: none;
}

/* Styling to mark a grid cell that has been amended */
.amended-row {
    background-color: orange;
}

.amended-cell {
    background-color: #fccf00 !important;
}

/* Since a grid that is Sortable "overrides" mouse events, the mouse stops "working" when the in-cell editor is shown.
    So, dragging of a row where editing is in progress is disabled in the Sortable options to allow the mouse to work in the editor.
    This style simply shows the drag-allowed indicator only on those rows where it is possible, which is *not* the currently edited row. */
tr:not(.k-grid-edit-row) > td > .a-sortable-grid-dragHandle {
    cursor: grab;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Integrated MainMenu styling...to make Kendo Menu look as close to  */
/* the Bootstrap menu used in ServiceManager and Waitlist.            */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
ul.mainNavMenu.mainNavMenu {
    border-color: #222;
    background-color: #222;
    background-image: none;
}

li.mainMenuItem {
    background-color: #222;
    color: white;
    text-align: left;
    border-color: #222;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

    li.mainMenuItem.k-link {
        background-color: #222;
    }

ul.mainNavMenu.mainNavMenu.k-widget.k-reset.k-header.k-menu.k-menu-horizontal {
    border-color: #222;
    background-color: #222;
    background-image: none;
}

li.mainMenuItem > a.k-link {
    color: white;
}

    li.mainMenuItem > a.k-link:hover {
        color: white;
        background-color: #222;
        background-image: none;
    }

li.mainMenuItem.k-state-borderdown > a.k-link:hover {
    color: white;
    background-color: #222;
    background-image: none;
}

li.mainMenuItem > span.k-link:hover {
    color: white;
    background-color: #222;
    background-image: none;
}

li.mainMenuItem > span.k-link.k-state-active {
    color: white;
    background-color: #222;
    background-image: none;
}

    li.mainMenuItem > span.k-link.k-state-active:hover {
        color: white;
        background-color: #222;
        background-image: none;
    }

li.mainMenuItem > span.k-link:hover {
    color: white;
    background-color: #222;
    background-image: none;
}

/* The styles above here were the existing styles. 
    The styles below here are added styles for additional tweaking, based on the bootstrap theme.
    They could possible be combined/simplified/etc, but I have not yet done that. */
ul.mainNavMenu {
    border: none;
}

ul.mainNavMenu > li.mainMenuItem.k-item.k-menu-item {
    border: none;
    height: 100%;
}

ul.mainNavMenu > li.mainMenuItem > .k-link.k-menu-link {
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
}

/* Override active nav menu item with an underline. */
ul.mainNavMenu > li.mainMenuItem.k-state-selected > .k-link.k-menu-link {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    background-color: rgb(8,8,8);
    border-color: initial;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Styling for labels on required fields.
    This *could* be in some kind of ArcoriCommon.css if we had one(and a shared code-base) and overridden in AppSpecific.css if necessary.
    But we don't have this setup so each app will just define its own styling. */
label.a-required:after {
    content: "*";
    font-weight: bold;
    color: red;
}

span.a-MemberPrimary {
    font-weight: bolder;
}

/* Remove the border shadow around the ListBox */
.k-widget .a-no-item-border {
    box-shadow: none;
}
/* Add rounded border around the ListBox */
.a-no-item-border .k-list-scroller {
    border-radius: 3px;
}

/* Remove the border around the list box items. */
.a-no-item-border .k-item, k-listbox {
    border: none;
}

.a-full-width {
    width: 100%;
}

.a-no-border {
    border: none;
}

.a-dashboard-icon {
    font-size: 32px;
}

/* Adds the hand mouse pointer to an html element. */
.a-pointer {
    cursor: pointer;
}
html, body {
    height: 100%;
    width: 100%;
}

div#body {
    height: 100%;
}
/* Fixes for various Kendo-related issues and other tweaks to the Kendo styling.
    i.e. style definitions to augment Kendo styles, 
         overrides of Kendo styling to achieve desired look,
         fixes for Kendo bugs(usually temporary until the next Kendo release), etc. */

/* Same margin/padding as content div of Kendo TabStrip(but without requiring the TabStrip parent) */
.a-content {
    padding: .3em .92em;
    margin: 0 .29em .3em;
}

/* Kendo PanelBar header text override */
ul.k-panelbar .k-item .k-link.k-header {
    font-size: 1.2em;
    font-weight: bold;
}

.subnav .k-state-highlight .k-link {
    font-weight: bold;
}

.k-grid table > tbody > tr:not(.k-state-selected) > td.a-info {
    background: #FFFFC7 !important;
}
.k-grid table > tbody > tr.k-alt:not(.k-state-selected) > td.a-info {
    background: #FFFFE3 !important;
}

.k-grid .k-button, .k-grid .k-grid-toolbar > * {
    margin: 0em;
}

.k-grid {
    border-radius: 0px;
}

.a-nopost.k-textbox {
    height: 22px;
    line-height: 16px;
    background-image: none;
    padding: 2px 0.3em;
}
.a-nopost.k-textbox:hover {
    background-image: none;
}

/*Button inside grid cell*/
    .k-grid tbody .k-button.a-grid-button {
    height: 24px;
    width: 24px;
    min-width: 24px;
    padding: 0;
    margin: 0;
}

/* Clear button in grid filter row is too tall(extremely obvious) and wide(1px-ish) and misaligned icon,
    AND seems to be applying some sort of RTL so that simply changing the width actually shifts the position. */
.k-filtercell button.k-button.k-button-icon {
    height: 25px;
    width: 26px;
    margin-right: 1px;
    padding-top: 7px;
}

/* Button inside grid cell using img instead of kendo sprite. */
.k-grid tbody .k-button.a-grid-button img.k-icon {
    margin-bottom: 1px;
}

/*Prevent cell from growing vertically(which looks terrible)*/
.k-grid td {
    white-space: nowrap;
}

/* Allow grid to have cells that wrap*/
.a-grid-cellwithwrap.k-grid td {
    white-space: normal;
}

.k-menu .k-item-float-right {
    float: right !important;
    border-left-width: 1px !important;
    border-right-width: 0 !important;
}

/* For applying different background colours to grid rows. */
.k-grid-content table > tbody > tr.a-green:not(.k-state-selected) {
    background: #CCE6CC;
}
.k-grid-content table > tbody > tr.k-alt.a-green:not(.k-state-selected) {
    background: #E6F2E6;
}
.k-grid-content table > tbody > tr.a-gray:not(.k-state-selected) {
    background-color: #ECECEC;
}
.k-grid-content table > tbody > tr.k-alt.a-gray:not(.k-state-selected) {
    background-color: #F6F6F6;
}
.k-grid-content table > tbody > tr.a-red:not(.k-state-selected) {
    background: #FFCCCC;
}
.k-grid-content table > tbody > tr.k-alt.a-red:not(.k-state-selected) {
    background: #FFE6E6;
}
/* apply red font colour to text displayed in divs. Keeps it from being applied to a-red grid rows*/
div.a-red {
    color: #F00000;
}

/* override kendo setting to ensure mask is on top of everything else. */
.k-loading-mask {
    z-index: 99999;
}

.k-widget.k-notification.k-notification-success {
    background: rgba(0,153,0,.7);
    color: #fff;
}

#userMenuContainer .k-group.k-menu-group.k-popup.k-reset.k-state-border-right {
    max-height: 95vh !important;
}

.usermenu.k-widget.k-reset.k-header.k-menu.k-menu-horizontal {
    border-style: none;
    background-color: inherit;
    background-image: none;
}

.usermenu li.k-item.k-state-default.k-first.k-last {
    border-style: none;
}

.usermenu li.k-item.k-state-default.k-first.k-last.k-state-focused {
    box-shadow: none;
}

.usermenu .top>.k-link {
    color: white;
    padding: 4px 8px 8px 0;
}

.usermenu .top>.k-link>.k-icon.k-i-arrow-s {
    background-image: url(kendo/2017.2.621/Black/sprite.png);
    background-position: 0;
}

.usermenu li.top.k-state-hover {
    background-image: none;
    background-color: inherit;
}

.usermenu li.top.k-state-hover>.k-link {
    text-decoration: underline;
    background-color: inherit;
    background-image: none;
}

.usermenu .k-link.k-state-active.k-state-border-down {
    background-color: inherit;
}

.usermenu ul.k-group.k-popup.k-reset.k-state-border-up {
    background-color: white;
}

.usermenu div ul li .k-link {
    color: inherit;
}

.usermenu.k-menu .k-group .k-item.separator>.k-link {
    padding: 0;
}

.k-item.separator>.k-link hr {
    margin: 0;
}

.a-treeview-pane {
    height: 100%;
}

.a-treeview-pane.k-splitter .k-splitbar-static-vertical {
    height: 0;
    border-width: 0;
}

/* Styling overrides to allow extra controls in a Kendo grid header cell and still look ok, used for (un)select all buttons. */
/* Fixes vertical alignment of the column text when there are other controls in the header, i.e. check/uncheck buttons. */
.k-grid-header .a-gridheader-extra.k-header > .k-link {
    padding-top: 10px;
}
.gridHeaderButton {
    float: left;
    padding: 0;
    height: 18px;
    width: 18px;
    line-height: normal;
}
a.gridHeaderButton > span.k-icon {
    font-size: smaller;
    top: 1px;
}
/* Fixes filter icon aligned too high when in column header with the check/uncheck all buttons and a title(not sure if the title is required or just the buttons on a filterable column). */
.a-gridheader-extra.k-header > .k-grid-filter {
    padding-top: 10px;
}

.k-webkit .k-combobox .k-dropdown-wrap:before, .k-webkit .k-picker-wrap:before, .k-webkit .k-numeric-wrap:before {
    content: "\a0";
    display: inline-block;
    width: 0;
    height: auto;
    padding-bottom: inherit;
}

.a-gridstate-button {
    position: absolute;
    top: 3px;
    border-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-bottom-right-radius: 4px;
    margin-top: -4px;
    margin-left: -4px;
}
/* Makes sure the colour of the icon is same as other icons and text instead of the <a> colour. */
.a-gridstate-button > a.k-header-column-menu {
    color: inherit;
}

.k-grid>.k-grid-toolbar>.k-toolbar {
    border: none;
}

.k-grid>.k-grid-toolbar {
    padding: 0;
}

.k-button.k-button-icontext.a-dropdown-button {
     padding-left: 0;
     padding-right: 0;
}
.a-dropdown-button>span {
    padding-left: 7px;
}
.a-dropdown-button>span>.k-icon.k-i-arrow-s {
    margin-left: 0;
}

.a-dropdown-button-content li.k-state-hover {
    background-image: none;
    background-color: initial;
}

.a-dropdown-button-content > li.k-item > span.k-link {
    cursor: default;
}

.k-toolbar .k-button.a-toolbutton-right {
    float: right;
    margin-top: 5px;
}

.k-button.a-inline-button {
    height: 22px;
    width: 22px;
    padding-right: 0;
    min-width: 22px;
}

.k-button.a-image-only > img {
    position: relative;
    left: -1px;
    margin-top: 2px;
}

.k-tabstrip-items > .k-item.a-search-tab {
    position: absolute;
    right: 5px;
}

/* Style to make the PageSize dropdown in a Grid footer large enough to fit
   >3 digit numbers without a "...". */
.k-pager-wrap .k-pager-sizes .k-dropdown {
    width: auto;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Styles to remove borders and border decoration from TabStrips so   */
/* that they look like one unending canvas instead of each pane being */
/* a different height based on its contents.                          */
/* They *are* all different heights, but it doesn't *look* that way   */
/* when you remove the borders(esp. the bottom border).               */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.a-borderless-tabstrip-container {
    padding-left: 2px;
    padding-right: 2px;
}
.k-tabstrip.a-tabstrip-no-borders > .k-content {
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin: 0;
}
.k-tabstrip.a-tabstrip-no-borders {
     -webkit-box-shadow: none; 
     box-shadow: none; 
     border: none;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Fixes "off-by-1" "error" on TabStrip content that is to be 100% height of the content area 
    but due to various layout/CSS intricacies may still show a scrollbar for the "overlapping pixel".
    Telerik does this is in this example, https://docs.telerik.com/kendo-ui/knowledge-base/expand-grid-to-match-tabstrip-height-within-splitter-pane
    but they don't document it.
    May or may not play nicely with the a-tabstrip-no-borders "infinite scrolling" technique above as they are at cross purposes:
    - this fix hides the scrollbar when there is only a little bit of overlap
    - that fix uses the container's scrollbar when they is lots of vertical content(and hides the bottom border so the canvas looks uninterrupted. */
.k-content.a-100PercentContent {
    overflow: hidden;
}
/* And for full-height content div directly in a Splitter pane. */
.k-pane > .a-100PercentContent {
    overflow: hidden;
    height: 100%;
}

/* Styling to remove border between button and dropdown arrow on Kendo ToolBar SplitButton when it is to be used
    as a "menu"(where the button has no functionality of its own and will just be showing the dropdown menu. */
.a-splitbutton-menu {
    border-right: none;
}
.a-splitbutton-menu + .k-split-button-arrow {
    border-left: none;
    /* Fix for combination of Bootstrap 2, newer Kendo(noticed after upgrade to 2020.1.219),
    and using Kendo Bootstrap theme but with kendo.common.css instead of kendo.common-bootstrap.css
    causing ToolBar.SplitButton dropdown arrow element to be taller than the button element. */
    padding-top: 3px;
}

/* Fix button arrow. Its height was off a bit. */
.k-button.k-split-button-arrow {
    height: 27px;
}

/* For a Kendo Button that is inline with an input(textbox, dropdown, etc) so that the height
    of the button matches the height of the input. */
.a-inline-textbutton {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* For a Kendo Menu that is inline with an input(textbox, dropdown, etc).
    This styles the top-level item like an a-inline-textbutton. */
.a-inline-menu {
    width: fit-content;
    background-color: inherit;
}
.a-inline-menu>li.k-item.k-menu-item {
    border-right-style: none;
}
.a-inline-menu .k-item>.k-link {
    padding-top: 3px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
}
.a-inline-menu .k-item>.k-link>img.k-image {
    margin-left: -1.5px;
}

/* Fix for misalignment of image on ToolButtons in the overflow area.
    https://feedback.telerik.com/aspnet-mvc/1457045-buttons-with-image-in-overflow-area-image-vertically-misaligned
    Haven't fully tested if this affects other use of k-overflow-containers, if any. */
.k-overflow-container a>img {
    vertical-align: middle;
    display: inline-block;
}

/* Fix for scrollbar appearing on newer version of Kendo(first noticed in 2019.3.1023).
    Taken from https://github.com/telerik/kendo-themes/issues/380.
    This is not the same issue(as it is not fixed in this scenario even though the issue is resolved a while ago), but the same workaround works here.
    This also does not seem like a bug(even though it did not require a workaround before) based on this forum thread:
    https://www.telerik.com/forums/wrap-notifications-content-without-templates.
    Submitted support request to inquire if this is intended or not: https://www.telerik.com/account/support-tickets/view-ticket/1460754.
    Support request resulted in logged bug: https://github.com/telerik/kendo-themes/issues/1459. */
.successTemplate {
    white-space: normal;
}
/* Fixes for various Bootstrap-related issues and other tweaks to the Bootstrap styling.
    i.e. conflicts with Kendo styles and other problems
         overrides of Bootstrap styling to achieve desired look, etc. */

/* For some reason, bootstrap rows in a some Kendo containers are a couple pixels too wide...
   I can't figure out the underlying reason, but simple reducing the right margin seems to work.
   Although, this appears to be theme-dependent as the Bootstrap theme has the issue but Blue Opal does not. */
/* TabStrip */
/*.k-tabstrip > .k-content .row {
    margin-right: -13px;
}*/
/* Window */
.k-window>.k-window-content .row.a-windowfix {
    margin-right: -10px;
}
/* Splitter directly(no TabStrip) */
/*.a-rowfix-0,*/
/* Splitter in TabStrip */
/*.k-tabstrip > .k-content .row.a-rowfix-0 {
    margin-right: 0;
}*/