/* Minification failed. Returning unminified contents.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(67,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(85,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(109,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(123,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(135,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(231,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(367,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(491,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(553,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(637,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(647,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border'
(701,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-hover'
(724,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface'
(725,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-app-surface'
(727,22): run-time error CSS1039: Token not allowed after unary operator: '-kendo-elevation-2'
(759,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(764,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(826,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(834,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(844,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(939,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
 */
:root {
    --primary-color: #A33100;
}

html {
    overflow-x: auto;
    height: 100%;
}

body {
    font-family: arial;
    font-size: 10pt;
    padding: 0px;
    margin: 0px;
}

@media print {
    .ShadowHeaderContainer, .ShadowMenuContainer, .ShadowActionBar, .HeaderContainer {
        display: none;
    }

    .noprint {
        display: none;
    }
}

.MainContainer {
    width: 100%;
    margin: 0px;
}

.BodyContainer {
    clear: both;
    margin: 0px;
    padding: 0px 35px 10px 15px;
    /*overflow:scroll;*/
}

.FooterContainer {
    margin: 0px;
}

.dlgTop {
    /*z-index: 99999;*/
    padding: 2px 2px 2px 2px;
}

img {
    border: 0px;
}

a {
    outline: none;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    /*font-style:italic;*/
}

    a:hover {
        text-decoration: underline;
    }

.icons {
    padding: 2px 2px 2px 2px;
    border: 1px solid var(--primary-color);
}

    .icons:hover {
        cursor: pointer;
        border: 1px solid #ffffff;
    }

.textBold {
    font-family: arial;
    font-weight: bold;
    font-size: 10pt;
}

.SiteName {
    font-family: arial;
    font-weight: bolder;
    font-size: 14pt;
    color: var(--primary-color);
    white-space: nowrap;
    text-align: center;
    width: 30%;
}

.Loading {
    z-index: 10000;
    font-size: 20px;
    font-family: Verdana, Helvetica, Sans-Serif;
    font-weight: bold;
    font-size: 18px;
    font-style: italic;
    text-align: center;
    color: Maroon;
}
/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
.watermark {
    color: #999 !important;
    font-style: italic !important;
}

.input {
    border: 1px solid var(--primary-color);
    width: 225px;
}

    .input:hover {
        border: 1px solid #4f7922;
    }

    .input:focus {
        border: 1px solid #4f7922;
    }

textarea {
    min-height: 75px;
    border: 1px solid var(--primary-color);
}

    textarea:hover {
        border: 1px solid #4f7922;
    }

    textarea:focus {
        border: 1px solid #4f7922;
    }

select {
    border: 1px solid var(--primary-color);
}

    select:hover {
        border: 1px solid #4f7922;
    }

    select:focus {
        border: 1px solid #4f7922;
    }

fieldset {
    border-top: 1px solid #c0c0c0;
    border-bottom: 0px;
    border-right: 0px;
    border-left: 0px;
    padding: 0 0 .5em .5em;
    margin: 0;
    /*margin: 0.5em 0 1em 0;*/
}

legend {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: .5em;
    /*margin: 0 0 .5em 0;*/
}

.valueChanged {
    border: 1px solid orange !important;
}

.fs-collapsible {
    background-image: url('../../Content/Images/up1.gif');
    background-repeat: no-repeat;
    padding-left: 15px; /* width of the image plus a little extra padding */
    padding-right: 5px;
    display: block; /* may not need this, but I've found I do */
}

.fs-collapsed {
    background-image: url('../../Content/Images/down1.gif');
    background-repeat: no-repeat;
    padding-left: 15px; /* width of the image plus a little extra padding */
    padding-right: 15px;
    display: block; /* may not need this, but I've found I do */
}

.fs-collapsible:hover {
    cursor: pointer;
}

.required {
    color: #B30000;
}

.tdPVFooterHeading {
    font-size: 11px;
    color: #575757;
    padding-right: 15px;
    text-align: right;
}

.tdPVFooterValue {
    font-size: 11px;
    font-weight: bold;
    text-align: left;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #B30000;
    font-size: 15px;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #B30000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #B30000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.Heading {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    padding: 2px 2px 2px 2px;
}

.tdHeading {
    /*width: 5%;*/
    text-align: right;
    font-weight: bold;
    padding-right: 5px;
    white-space: nowrap;
    vertical-align: central;
}

.tdValue {
    text-align: left;
    /*white-space:nowrap;*/
    vertical-align: top;
}

.tdCenter {
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
}

.tdLeft {
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
}

.tdRight {
    text-align: right !important;
    white-space: nowrap;
    vertical-align: top;
}

.display-label, .editor-label {
    margin: .5em 0 0 0;
    clear: both;
}

    .display-label > label, .editor-label > label {
        width: 210px;
        text-align: right;
        float: left;
        font-weight: bold;
    }

.display-field, .editor-field {
    width: 210px;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

.editor-field > .t-combobox {
    width: 205px;
}

.editor-field > .t-datepicker {
    width: 205px;
}

/* Bottom-align grid headers */
th.t-header {
    vertical-align: bottom;
}

.t-grid .t-grid-header .t-header .t-link {
    height: auto;
}

.t-grid .t-grid-header .t-header, .t-grid .t-grid-header .t-last-header {
    white-space: normal;
}

/*.categoryRow
{
    color: White;
    background-color: #696969;
}*/

/*td.assignUserRoles
{
    text-align: center;
}*/

/*td.categoryRow
{
    font-size: 120%;
    font-weight: bold;
}*/

#iSpinner {
    display: none;
}

.divList {
    float: left;
    padding: 5px 15px 5px 15px;
}

.Success {
    color: #196719;
    font-weight: bold;
}

.Warning {
    color: #854900;
    font-weight: bold;
}

.Failure {
    margin-top: 5px 0px;
    color: #B30000;
    font-weight: bold;
}

.k-window .k-window-content {
    padding: 0px 0px 5px 0px;
}

.k-listview {
    border: 0;
}

.GridHeader {
    padding: 9px 0px 9px 0px;
    background-color: var(--primary-color);
    font-weight: bolder;
    color: white;
}

.GridCategory {
    font-size: 14px;
    font-weight: bolder;
}

.GridColumn {
    text-align: left;
    padding-left: 5px;
    white-space: nowrap;
}

.GridRole {
    text-align: center;
}

.Highlight {
    BACKGROUND-COLOR: gold;
}

.rotate {
    height: 100px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /* Should be unset in IE9+ I think. */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.verticalHeaderText {
    /*float:left;*/
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding: 0.8em;
    writing-mode: tb-rl;
    filter: flipv fliph;
    white-space: nowrap;
}

    .verticalHeaderText .fieldHelp {
        filter: fliph flipv;
    }

.Logon-Overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=99);
    opacity: .99;
}

.help {
    margin: .4em;
    padding: 2px;
}

.Notes {
    width: 600px;
}

.NoteUpdateTag {
    font-style: italic;
    text-indent: 30px;
    font-family: Arial;
    text-align: right;
    color: maroon;
    padding-left: 40px;
}

.excelPreviewError {
    background-color: #fbacac;
    color: black;
    text-align: right;
    padding: 0px;
    white-space: normal;
    word-wrap: break-word;
    border-bottom: solid 1px #94c0d2;
}

.excelPreviewSuccess {
    background-color: #aefaa5;
    color: black;
    text-align: right;
    padding: 0px;
    white-space: normal;
    word-wrap: break-word;
    border-bottom: solid 1px #94c0d2;
}

.excelDefault {
    text-align: center;
}

.excelEmptyCell {
    background-color: #999;
    color: black;
    text-align: right;
    padding: 0px;
    border-bottom: solid 1px #94c0d2;
}

.excelPreviewTotalsCell {
    text-align: right;
    font-weight: bold;
    background-color: var(--primary-color);
    color: white;
}

.table.style1 {
    class: "k-widget k-grid";
}



.container2 {
    float: left;
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

.container1 {
    float: left;
    width: 100%;
    position: relative;
    right: 50%;
}

.col1 {
    float: left;
    width: 46%;
    position: relative;
    left: 52%;
    overflow: hidden;
}

.col2 {
    float: left;
    width: 46%;
    position: relative;
    left: 56%;
    overflow: hidden;
}

.container1 .header {
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
    margin: 5px 10px 10px 10px;
}

.k-grid .k-grid-header .k-header .k-link {
    height: auto;
}

.k-grid .k-grid-header .k-header {
    white-space: normal;
}

.sidebar {
    position: fixed;
    top: 45%;
    right: -10px;
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 4px;
    border: 1px solid var(--primary-color);
    z-index: 3500;
}

.activitiesicons {
    padding: 4px;
    padding-top: 12px;
    padding-bottom: 2px;
}

    .activitiesicons a {
        padding: 4px;
        padding-top: 12px;
        padding-bottom: 2px;
        border: 1px solid transparent;
    }

        .activitiesicons a:hover {
            padding: 4px;
            padding-top: 12px;
            padding-bottom: 2px;
            background-color: #FDEEB3;
            border: 1px solid #F1C43F;
        }

.knockoutgrid {
    padding: 0px,0px,0px,0px;
}


.tdAPEHeading, .tdBlueBar {
    text-align: right;
    font-weight: bold;
    padding-right: 5px;
    white-space: nowrap;
    vertical-align: middle;
}

.tkjBlueBar th, div.tkjBlueBar, div.tkjBlueBarHeader {
    border-bottom: solid 1px #94C0D2;
    height: auto;
    background-color: #DAECF4;
    background-image: none, linear-gradient(to bottom, #EAF4F9 0px, #DBECF4 100%);
    background-position: 50% 50%;
    color: #003F59;
    text-align: left;
    padding: 5px;
    overflow: auto;
}

div.tkjBlueBar, div.tkjBlueBarHeader {
    border: solid 1px #94C0D2;
    height: auto;
    padding: 5px;
    margin-bottom: 10px;
}

.tkjBlueBar td {
    padding: 5px;
}

.tkjBlueBarHeader {
    display: block;
    width: auto;
    padding-top: 1px;
    padding-bottom: 1px;
}

.k-ff {
    overflow: inherit !important;
}

.FontBold {
    font-weight: bold;
    /*color: var(--primary-color);*/
    text-align: right;
}

.tdBold {
    font-weight: bold !important;
}

.tdLine {
    height: 1px;
    background-color: var(--primary-color);
}

.thGridHeader {
    border-style: solid;
    border-width: 0px 0px 1px 1px;
    overflow: hidden;
    padding: 0.5em 0.6em 0.4em;
    text-overflow: ellipsis;
    /*border-color: #94C0D2;*/
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    white-space: nowrap;
    font-weight: bold;
    text-align: center;
}

.tdGrid {
    border-style: solid;
    border-width: 0 0 0 1px;
    line-height: 1.6em;
    overflow: hidden;
    padding: 0.4em 0.6em;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.tdGridAlt {
    border-style: solid;
    border-width: 0 0 0 1px;
    line-height: 1.6em;
    overflow: hidden;
    padding: 0.4em 0.6em;
    text-overflow: ellipsis;
    vertical-align: middle;
    /*background-color: #EBF5FA;*/
    background-color: rgba(0, 0, 0, 0.04);
}

.Notetag {
    color: maroon;
    font-style: italic;
    font-family: Arial;
    font-size: 12px;
    /* font-weight: bold; */
    padding-bottom: 5px;
    padding-top: 3px;
}

.FloatLeft {
    float: left;
}

/*.k-grid .k-state-selected {
    background-color: #b2dff4 !important;
    color: #000000;
}

.k-grid .k-alt.k-state-selected {
    background-color: #b2dff4 !important;
    color: #000000;
}*/

.k-grid tbody tr:hover,
.k-grid .k-table-tbody .k-table-row:hover {
    background-color: var(--kendo-color-base-hover, #dadddc) !important;
    transition: background-color 0.1s ease;
}

.k-icon, .k-font-icon, [class^="k-i-"], [class*=" k-i-"] {
    font-family: 'WebComponentsIcons' !important;
    display: inline-block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Start k-tooltip */
.k-tooltip-Custom {
    border-color: var(--kendo-color-on-app-surface, #424242);
    color: var(--kendo-color-app-surface, #ffffff);
    background-color: #feca3f;
    box-shadow: var(--kendo-elevation-2);
}

span.k-tooltip-Custom {
    position: static;
}

.field-validation-error-Custom {
    color: #0b0800 !important;
}
/* End k-tooltip */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Kendo TextBox, NumericTextBox, DatePicker, DropDown */
.k-textbox,
.k-input,
.k-input-inner {
    height: 30px;
    line-height: 30px;
}

.k-pager-numbers .k-button-text {
    color: var(--primary-color);
    font-weight: bold;
}

:root {
    --primary-color: #064E6F;
}

.HeaderContainer {
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    top: 0px;
    left: 0px;
    margin: 0px auto;
    border-bottom: 1px solid #1B3280;
    z-index: 999;
}

.divTopBanner {
    width: 100%;
    margin: 4px;
    z-index: 999;
}

.tblTopBanner {
    width: 100%;
    padding: 0px;
}

#ShadowHeaderContainer {
    height: 55px;
}

#ShadowMenuContainer {
    height: 28px;
}

#BlankSpace {
    height: 5px;
}

#ShadowActionBar {
    height: 72px;
}

.tdLogo {
    width: 20%;
}

.logo {
    z-index: 999;
    border: none;
    display: block;
    height: 46px;
    width: 211px;
}

.tdUserDetails {
    width: 80%;
    padding-right: 10px;
}

.divMenuContainer {
    clear: both;
    width: 100%;
    height: 28px;
    background-color: var(--primary-color);
    z-index: 999;
}

.divMenu {
    float: left;
    width: 80%;
    height: 28px;
    background-color: var(--primary-color);
    border-top: 1px solid #1B3280;
    vertical-align: bottom;
    z-index: 999;
}

.divMenuIcons {
    float: right;
    width: 20%;
    height: 28px;
    background-color: var(--primary-color);
    border-top: 1px solid #1B3280;
    vertical-align: bottom;
}

.tblMenu {
    padding: 5px 0px 0px 0px;
    margin: 0px auto;
    vertical-align: bottom;
    text-align: left;
}

.tblMenuDetails {
    margin: 0px auto;
    vertical-align: bottom;
    text-align: left;
}

.tdMenu {
    /*width: 50px;*/
    white-space: nowrap;
    padding: 4px 15px 3px 15px;
}

.tdMenuSelected {
    /*width: 50px;*/
    white-space: nowrap;
    padding: 4px 15px 3px 15px;
    color: #000000;
    background-image: url(../../Content/Images/menu_selected.png);
    background-repeat: repeat-x;
    background-color: #7eb543;
}

.tdMenu a {
    outline: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
}

.tdMenuSelected a {
    outline: none;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
}

.imgprint {
    background: url(../../Content/Images/printer.gif) no-repeat;
    z-index: 999;
    display: block;
    height: 22px;
    width: 22px;
    border: none;
}

.imghelp {
    background: url(../../Content/Images/help.gif) no-repeat;
    z-index: 999;
    display: block;
    height: 22px;
    width: 22px;
    border: none;
}

.imgunlink {
    background: url(../../Content/Images/unlink.gif) no-repeat;
    z-index: 999;
    display: block;
    height: 22px;
    width: 22px;
    border: none;
}

.imgcollapse {
    background: url(../../Content/Images/up.gif) no-repeat;
    z-index: 999;
    display: block;
    height: 22px;
    width: 22px;
    border: none;
}

.imgexpand {
    background: url(../../Content/Images/down.gif) no-repeat;
    z-index: 999;
    display: block;
    height: 22px;
    width: 22px;
    border: none;
}

.headericons {
    padding: 2px 2px 2px 2px;
    border: 1px solid var(--primary-color);
}

    .headericons:hover {
        cursor: pointer;
        border: 1px solid #ffffff;
    }

.divActionBar {
    float: left;
    /*height: 75px;*/
    width: 100%;
    background-color: #dce7f5;
    /*background-image: url(../../Content/Images/ActionBarBackground.png);*/
    background-image: url(../../Content/Images/bgActionBar.png);
    background-repeat: repeat-x;
    overflow-x: auto;
}

.tblActionBar {
    height: 55px;
}

.tdActionGroup {
    border-right: 1px solid gray;
}

.tdActionItem {
    padding: 1px 6px 1px 3px;
    vertical-align: middle;
}

.tdActionItemDisabled {
    padding: 1px 6px 1px 3px;
}

/*.tdActionItem img {
    margin: 0px 3px 0px 0px;
    top: 2px;
    position: relative;
}*/


.tdActionItem a {
    outline: none;
    /*color: #000000;*/
    /*color: #084EFF;*/
    color: #094D6D;
    white-space: nowrap;
    font-size: 8pt;
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    border: 1px solid transparent;
}

.tdActionItemDisabled a {
    outline: none;
    color: #57676a;
    white-space: nowrap;
    font-size: 8pt;
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    text-decoration: none;
    border: 1px solid transparent;
}

.tdActionItem a:hover {
    /*background-image: url(../../Content/Images/ActionItemHover.png);*/
    background-color: #FDEEB3;
    background-repeat: repeat-x;
    white-space: nowrap;
    text-decoration: none;
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    border: 1px solid #F1C43F;
}

.tdActionItemDisabled a:hover {
    /*background-image: url(../../Content/Images/ActionItemHover.png);*/
    background-color: #FDEEB3;
    background-repeat: repeat-x;
    white-space: nowrap;
    text-decoration: none;
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    border: 1px solid #F1C43F;
}

.tdActionItemHeader {
    text-align: center;
    text-decoration: none;
    /*color:Blue;*/
    font-size: 9pt;
    font-weight: bolder;
    font-family: arial;
    /*color: #084EFF;*/
    color: black;
}

.imgGreen {
    background: url(../../Content/Images/actionGreen.png) no-repeat;
    position: relative;
    z-index: 999;
    display: inline;
    height: 12px;
    width: 12px;
    border: 0;
    top: -1px;
}

.imgRed {
    background: url(../../Content/Images/actionRed.png) no-repeat;
    position: relative;
    z-index: 999;
    display: inline;
    height: 12px;
    width: 12px;
    border: 0;
    top: -1px;
}


/** General page styling **/
.tilesContainer {
  margin: 0px;
  position: relative;  
}
/**
 * Grid container
 */
.tiles {
  list-style-type: none;
  position: relative; /** Needed to ensure items are laid out relative to this container **/
  margin: 0;
  padding: 0;  
}

/**
 * Grid items
 */
.tiles li {
    width: 200px;
    background-color: #ffffff;
    border: 1px solid #999999; /*#dedede;*/
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: none; /** Hide items initially to avoid a flicker effect **/    
    padding: 10px;
    box-shadow: 1px 4px 5px #aaa;
    overflow: hidden;
    margin-bottom:150px;
}

.tiles li:hover
{
    cursor:pointer;    
    border: 1px solid #064E6F;
}

.tiles li a{
    padding-bottom:5px;
    float:left;
}

.tiles li div.header {
  margin: 0px;  
  font-size: 14px;
  font-weight:bold;
  margin: 5px 10px 10px 10px;
}

.tiles li.inactive {
  visibility: hidden;
  opacity: 0;
}

/*#tiles li img {
  display: block;
}*/

/**
 * Grid item text
 */
.tiles li p {
  color: #666;
  font-size: 12px;
  margin: 7px 0 0 7px;
  text-align: left;
}

/**
 * Placerholder css
 */
.wookmark-placeholder {
          border-radius: 2px;
     -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: #eee;
  border: 1px solid #dedede;
  z-index: -1;
}

.slideout {
        position: fixed;
        width: 360px;
        /*height: 55%;*/
        top: 45%;
        right: -360px;
        padding-left: 30px;
        resize: both;
        min-width: 50px;
        z-index: 3000;
    }

    .clickme {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        -webkit-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        opacity: .85;
        position: absolute;
        top: 0;
        left: 0;
        height: 100px;
        width: 20px;
        background: #064E6F;
        color: white;
        font-weight: bold;
        padding: 10px 0px 0px 10px;
        cursor: pointer;
    }

    .dragbar {
        cursor: col-resize;
        display: none;
    }

    .slidecontent {
        background-color: white;
        height: 100%;
        width: 100%;
        border: 1px solid black;
        float: left;
        overflow: auto;
    }
   .activityContainer-position {
    position: fixed !important;
    }
@media screen and (max-device-width : 1024px) {
    html {
        overflow-x: auto;
        height: 100%;
    }

    body {
        font-family: Arial;
        font-size: 8pt;
        padding: 0px;
        margin: 0px;
    }    

    .MainContainer {
        width: 100%;
        margin: 0px;
        position: relative;
        float: left;
    }

    .BodyContainer {
        clear: both;
        margin: 0px;
        /*padding: 8px;*/
        /*overflow:scroll;*/
    }

    .FooterContainer {
        margin: 0px;
    }

    .dlgTop {
        /*z-index: 99999;*/
        padding: 2px 2px 2px 2px;
    }

    img {
        border: 0px;
    }

    a {
        outline: none;
        color: #064E6F;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
        /*font-style:italic;*/
    }

        a:hover {
            text-decoration: underline;
        }

    .icons {
        padding: 2px 2px 2px 2px;
        border: 1px solid #064E6F;
    }

        .icons:hover {
            cursor: pointer;
            border: 1px solid #ffffff;
        }

    .textBold {
        font-family: arial;
        font-weight: bold;
        font-size: 10pt;
    }

    .Loading {
        z-index: 10000;
        font-size: 20px;
        font-family: Verdana, Helvetica, Sans-Serif;
        font-weight: bold;
        font-size: 18px;
        font-style: italic;
        text-align: center;
        color: Maroon;
    }
    /* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
    .watermark {
        color: #999 !important;
        font-style: italic !important;
    }

    .input {
        border: 1px solid #064E6F;
        width: 225px;
    }

        .input:hover {
            border: 1px solid #4f7922;
        }

        .input:focus {
            border: 1px solid #4f7922;
        }

    textarea {
        min-height: 75px;
        border: 1px solid #064E6F;
    }

        textarea:hover {
            border: 1px solid #4f7922;
        }

        textarea:focus {
            border: 1px solid #4f7922;
        }

    select {
        border: 1px solid #064E6F;
    }

        select:hover {
            border: 1px solid #4f7922;
        }

        select:focus {
            border: 1px solid #4f7922;
        }

    fieldset {
        border-top: 1px solid #c0c0c0;
        border-bottom: 0px;
        border-right: 0px;
        border-left: 0px;
        padding: 0 0 .5em .5em;
        margin: 0;
        /*margin: 0.5em 0 1em 0;*/
    }

    legend {
        font-size: 14px;
        font-weight: bold;
        padding-bottom: .5em;
        /*margin: 0 0 .5em 0;*/
    }

    .valueChanged {
        border: 1px solid orange;
    }

    .fs-collapsible {
        background-image: url('../../Content/Images/up1.gif');
        background-repeat: no-repeat;
        padding-left: 15px; /* width of the image plus a little extra padding */
        padding-right: 5px;
        display: block; /* may not need this, but I've found I do */
    }

    .fs-collapsed {
        background-image: url('../../Content/Images/down1.gif');
        background-repeat: no-repeat;
        padding-left: 15px; /* width of the image plus a little extra padding */
        padding-right: 15px;
        display: block; /* may not need this, but I've found I do */
    }

    .fs-collapsible:hover {
        cursor: pointer;
    }

    .required {
        color: #AD0000;
    }

    .tdPVFooterHeading {
        font-size: 11px;
        color: #575757;
        padding-right: 15px;
        text-align: right;
    }

    .tdPVFooterValue {
        font-size: 11px;
        font-weight: bold;
        text-align: left;
    }
    /* Styles for validation helpers
-----------------------------------------------------------*/
    .field-validation-error {
        color: #B30000;
    }

    .field-validation-valid {
        display: none;
    }

    .input-validation-error {
        border: 1px solid #B30000;
        background-color: #ffeeee;
    }

    .validation-summary-errors {
        font-weight: bold;
        color: #B30000;
    }

    .validation-summary-valid {
        display: none;
    }

    /* Styles for editor and display helpers
----------------------------------------------------------*/
    .Heading {
        background-color: #064E6F;
        color: white;
        font-weight: bold;
        padding: 2px 2px 2px 2px;
    }

    .tdHeading {
        /*width: 5%;*/
        text-align: right;
        font-weight: bold;
        padding-right: 5px;
        white-space: nowrap;
        vertical-align: top;
    }

    .tdValue {
        text-align: left;
        white-space: nowrap;
        vertical-align: top;
        vertical-align: top;
    }

    .tdLeft {
        text-align: left;
        white-space: nowrap;
        vertical-align: top;
    }

    .tdRight {
        text-align: right !important;
        white-space: nowrap;
        vertical-align: top;
    }

    .display-label, .editor-label {
        margin: .5em 0 0 0;
        clear: both;
    }

        .display-label > label, .editor-label > label {
            width: 210px;
            text-align: right;
            float: left;
            font-weight: bold;
        }

    .display-field, .editor-field {
        width: 210px;
    }

    .text-box.multi-line {
        height: 6.5em;
    }

    .tri-state {
        width: 6em;
    }

    .editor-field > .t-combobox {
        width: 205px;
    }

    .editor-field > .t-datepicker {
        width: 205px;
    }

    /* Bottom-align grid headers */
    th.t-header {
        vertical-align: bottom;
    }

    .t-grid .t-grid-header .t-header .t-link {
        height: auto;
    }

    .t-grid .t-grid-header .t-header, .t-grid .t-grid-header .t-last-header {
        white-space: normal;
    }

    /*.categoryRow
{
    color: White;
    background-color: #696969;
}*/

    /*td.assignUserRoles
{
    text-align: center;
}*/

    /*td.categoryRow
{
    font-size: 120%;
    font-weight: bold;
}*/

    #iSpinner {
        display: none;
    }

    .divList {
        float: left;
        padding: 5px 15px 5px 15px;
    }

    .Success {
        color: forestgreen;
        font-weight: bold;
    }

    .Warning {
        color: darkorange;
        font-weight: bold;
    }

    .Failure {
        margin-top: 5px 0px;
        color: red;
        font-weight: bold;
    }

    .k-window .k-window-content {
        padding: 0px 0px 5px 0px;
    }

    .k-listview {
        border: 0;
    }

    .GridHeader {
        padding: 9px 0px 9px 0px;
        background-color: #064E6F;
        font-weight: bolder;
        color: white;
    }

    .GridCategory {
        font-size: 14px;
        font-weight: bolder;
    }

    .GridColumn {
        text-align: left;
        padding-left: 5px;
        white-space: nowrap;
    }

    .GridRole {
        text-align: center;
    }

    .Highlight {
        BACKGROUND-COLOR: gold;
    }

    .rotate {
        height: 100px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        /* Should be unset in IE9+ I think. */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    .verticalHeaderText {
        /*float:left;*/
        display: inline-block;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        padding: 0.8em;
        writing-mode: tb-rl;
        filter: flipv fliph;
        white-space: nowrap;
    }

        .verticalHeaderText .fieldHelp {
            filter: fliph flipv;
        }

    .Logon-Overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        background-color: #000;
        filter: alpha(opacity=99);
        opacity: .99;
    }

    .help {
        margin: .4em;
        padding: 2px;
    }

    .Notes {
        width: 600px;
    }

    .NoteUpdateTag {
        font-style: italic;
        text-indent: 30px;
        font-family: Arial;
        text-align: right;
        color: maroon;
        padding-left: 40px;
    }

    .excelPreviewError {
        background-color: #fbacac;
        color: black;
        text-align: right;
        padding: 0px;
        white-space: normal;
        word-wrap: break-word;
        border-bottom: solid 1px #94c0d2;
    }

    .excelPreviewSuccess {
        background-color: #aefaa5;
        color: black;
        text-align: right;
        padding: 0px;
        white-space: normal;
        word-wrap: break-word;
        border-bottom: solid 1px #94c0d2;
    }

    .excelDefault {
        text-align: center;
    }

    .excelEmptyCell {
        background-color: #999;
        color: black;
        text-align: right;
        padding: 0px;
        border-bottom: solid 1px #94c0d2;
    }

    .excelPreviewTotalsCell {
        text-align: right;
        font-weight: bold;
        background-color: #064E6F;
        color: white;
    }

    .table.style1 {
        class: "k-widget k-grid";
    }



    .container2 {
        float: left;
        width: 100%;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .container2 {
        float: left;
        width: 100%;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .container1 {
        float: left;
        width: 100%;
        position: relative;
        right: 50%;
    }

    .col1 {
        float: left;
        width: 46%;
        position: relative;
        left: 52%;
        overflow: hidden;
    }

    .col2 {
        float: left;
        width: 46%;
        position: relative;
        left: 56%;
        overflow: hidden;
    }

    .container1 .header {
        margin: 0px;
        font-size: 14px;
        font-weight: bold;
        margin: 5px 10px 10px 10px;
    }

    .k-grid .k-grid-header .k-header .k-link {
        height: auto;
    }

    .k-grid .k-grid-header .k-header {
        white-space: normal;
    }

    .activitiesicons a {
        padding: 0px 3px;
        border: 1px solid transparent;
    }

        .activitiesicons a:hover {
            padding: 3px;
            padding-top: 8px;
            background-color: #FDEEB3;
            border: 1px solid #F1C43F;
        }
}

@media print {
    .ShadowHeaderContainer, .ShadowMenuContainer, .ShadowActionBar, .HeaderContainer {
        display: none;
    }

    .noprint {
        display: none;
    }
}

.knockoutgrid {
    padding: 0px,0px,0px,0px;
}

.tdAPEHeading, .tdBlueBar {
    text-align: right;
    font-weight: bold;
    padding-right: 5px;
    white-space: nowrap;
    vertical-align: middle;
}



/*.tkjBlueBar th, div.tkjBlueBar {
    border-bottom: solid 1px #94C0D2;
    height: 30px;
    background-color: #DAECF4;
    background-image: none, linear-gradient(to bottom, #EAF4F9 0px, #DBECF4 100%);
    background-position: 50% 50%;
    color: #003F59;
    text-align: left;
    padding: 5px;
}

div.tkjBlueBar {
    border: solid 1px #94C0D2;
    height: 25px;
    margin-bottom: 15px;
}

.tkjBlueBar td {
    padding: 5px;
}*/

.k-ff {
    overflow: inherit !important;
}

.FontBold {
    font-weight: bold;
    /*color: #064E6F;*/
    text-align: right;
}

@media screen and (max-device-width : 1024px) {
    .HeaderContainer {
        position: fixed;
        width: 100%;
        background-color: #ffffff;
        top: 0px;
        left: 0px;
        margin: 0px auto;
        border-bottom: 1px solid #1B3280;
        z-index: 999;
    }

    .divTopBanner {
        width: 100%;
        margin: 2px auto;
        z-index: 999;
    }

    .tblTopBanner {
        width: 100%;
        padding: 0px;
    }

    #ShadowHeaderContainer {
        height: 45px;
    }

    #ShadowMenuContainer {
        height: 23px;
    }

    #ShadowActionBar {
        height: 66px;
    }

    .logo {          
        z-index: 999;
        border: none;
        display: block;
        height:41px;
        width:180px;
    }

    .tdLogo {
        width: 20%;
    }

    .tdUserDetails {
        width: 80%;
        padding-right: 10px;
    }

    .divMenuContainer {
        clear: both;
        width: 100%;
        height: 22px;
        background-color: #064E6F;
        z-index: 999;
    }

    .divMenu {
        float: left;
        width: 80%;
        height: 22px;
        background-color: #064E6F;
        border-top: 1px solid #1B3280;
        vertical-align: bottom;
        z-index: 999;
    }

    .imgprint {
        background: url(../../Content/Images/printer_1024.gif) no-repeat;                
        z-index: 999;        
        display: inline;
        height:18px;
        width:18px;
        border:0;
    }

    .imghelp {
        background: url(../../Content/Images/help_1024.gif) no-repeat;                
        z-index: 999;        
        display: inline;
        height:18px;
        width:18px;
        border: none;
    }

    .imgunlink {
        background: url(../../Content/Images/unlink_1024.gif) no-repeat;                
        z-index: 999;        
        display: inline;
        height:18px;
        width:18px;
        border: none;
    }

    .imgcollapse {
        background: url(../../Content/Images/up_1024.gif) no-repeat;                
        z-index: 999;        
        display: inline;
        height:18px;
        width:18px;
        border: none;
    }

    .imgexpand {
        background: url(../../Content/Images/down_1024.gif) no-repeat;                
        z-index: 999;        
        display: inline;
        height:18px;
        width:18px;
        border: none;
    }

    .headericons {
        padding: 1px;
        border: 1px solid #064E6F;
    }

    .headericons:hover {
        cursor: pointer;
        border: 1px solid #ffffff;
    }

    .divMenuIcons {
        float: right;
        width: 20%;
        height: 22px;
        background-color: #064E6F;
        border-top: 1px solid #1B3280;
        vertical-align: bottom;
    }

    .tblMenu {
        padding: 1px 0px 0px 0px;
        margin: 0px auto;
        vertical-align: bottom;
        text-align: left;
    }

    .tblMenuDetails {
        margin: 0px auto;
        vertical-align: bottom;
        text-align: left;
    }

    .tdMenu {
        width: 50px;
        white-space: nowrap;
        padding: 4px 12px 3px 12px;
    }

    .tdMenuSelected {
        width: 50px;
        white-space: nowrap;
        padding: 4px 15px 3px 15px;
        background-image: url(../../Content/Images/menu_selected.png);
        background-repeat: repeat-x;
        background-color: #7eb543;
    }

    .tdMenu a {
        outline: none;
        color: #ffffff;
        font-weight: bold;
        font-size: 11px;
    }

    .tdMenuSelected a {
        outline: none;
        color: #ffffff;
        font-weight: bold;
        font-size: 11px;
    }

    .divActionBar {
        float: left;
        /*height: 75px;*/
        width: 100%;
        background-color: #dce7f5;
        /*background-image: url(../../Content/Images/ActionBarBackground.png);*/
        background-image: url(../../Content/Images/bgActionBar.png);
        background-repeat: repeat-x;
        overflow-x: auto;        
    }

    .tblActionBar {
        height: 55px;
    }

    .tdActionGroup {
        border-right: 1px solid gray;
    }

    .tdActionItem {
        padding: 1px 3px 1px 3px;        
    }

    .tdActionItemDisabled {
        padding: 1px 3px 1px 3px;
    }

    .tdActionItem a {
        outline: none;
        /*color: #000000;*/
        /*color: #084EFF;*/
        color: #094D6D;
        white-space: nowrap;
        font-size: 8pt;
        padding: 1px 3px 1px 3px;
        border: 1px solid transparent;
    }

    .tdActionItemDisabled a {
        outline: none;
        color: #57676a;
        white-space: nowrap;
        font-size: 8pt;
        padding: 1px 3px 1px 3px;
         text-decoration:none;        
         border: 1px solid transparent; 
    }

    .tdActionItem a:hover {
        /*background-image: url(../../Content/Images/ActionItemHover.png);*/
        background-color: #FDEEB3;
        background-repeat: repeat-x;
        white-space: nowrap;
        text-decoration: none;
        padding: 1px 3px 1px 3px;          
        border: 1px solid #F1C43F;   
        border: 1px solid #F1C43F;   
    }

    .tdActionItemDisabled a:hover {
        /*background-image: url(../../Content/Images/ActionItemHover.png);*/
        background-color: #FDEEB3;
        background-repeat: repeat-x;
        white-space: nowrap;
        text-decoration: none;
        padding: 1px 3px 1px 3px;
        border: 1px solid #F1C43F;
    }

    .tdActionItemHeader {
        text-align: center;
        text-decoration: none;
        /*color: Blue;*/
        font-size: 8pt;
        font-weight: bolder;
        font-family: arial;
        color:black;
    }

    
    .imgGreen {
        background: url(../../Content/Images/actionGreen_1024.png) no-repeat;                
        z-index: 999;        
        display: inline;
        height:9px;
        width:9px;
        border: 0;
        top:-4px;
    }

    .imgRed {
        background: url(../../Content/Images/actionRed_1024.png) no-repeat;                
        z-index: 999;        
        display: inline;
        height:9px;
        width:9px;
        border: 0;  
        top:-4px;      
    }
}

