body {
    background-color: white;
    font-family: Whitney, Arial, Verdana, sans-serif;
    font-size: 14px;
    color: #434342; /* lava */
}

form {
    margin-top: 40px;
}

*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px rgba(0,100,100,0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,100,100,0.2);
}

*::-webkit-scrollbar-thumb {
    background: #A6BCC9; /* wave blue */
    box-shadow: inset 0 0 4px rgba(0,100,100,0.2);
    border-top: 1px solid #A0BAC8;
    border-bottom: 1px solid #A0BAC8;
}

.window {
    border-radius: 0px;
}

.window .main {
    border-radius: 0px;
}

.window iframe {
    border-radius: 0px;
}

.window .controls {
    padding: 12px;
    border-top: 0px solid #808080;
    background: #D4CCC7;
}

/* Titles */

h1, h2, h3, h5 {
    font-family: inherit;
    text-align: center;
    color: inherit;
    text-rendering: optimizelegibility;
    font-family: Santral Regular, Verdana, sans-serif;
    color: #015174;
}

h1 {
    font-size: 25px;
    font-family: Santral Bold, Verdana, sans-serif;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
    color: #87657D; /* flow purple */
}

h4 {
    font-size: 17.5px;
}

h5 {
    font-size: 16px;
    margin-top: 10px; /* was 4px */
    margin-bottom: 10px;
    font-weight: normal;
    font-family: Whitney, Arial, Verdana, sans-serif;
    /* color: #87657D; flow purple */
}

h6 {
    font-size: 11.9px;
}

.subtitle,
table caption {
    font-family: Santral Bold, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #015174;
    margin: 6px;
}

.foot {
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.025em;
    font-weight: 200;
    padding: 20px;
    letter-spacing: 0.025em;
    -webkit-text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
    -moz-text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
    text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
    background-color: #87657D; /* flow purple */
    background-color: #015174; /* arjo blue */
    color: #FFFFFF; /* white */
    color: #A6BCC9; /* wave blue */
}

.foot a {
    color: #FFFFFF; /* white */
}

.foot a:link {
    color: #FFFFFF; /* white */
}

.foot a:hover {
    color: #A6BCC9; /* wave blue */
}

.foot .statement {
    font-weight: bold;
    font-style: italic;
    max-width: 1200px;
    padding: 0px 5%;
    color: #F7F4F3; /* pearl */
}

.foot img.logo {
    height: 40px;
    width: auto;
}

.logo {
    font-family: Verdana;
    font-size: 34px;
    color: #015174; /* arjo blue */
}

.required {
    color: #D02673; /* etrace pink */
}

/* Nav Bar */
.header {
    background-color: #015174; /* arjo blue */
    color: #A6BCC9; /* wave blue */
    height: 41px;
    line-height: 25px;
    font-size: 14px;
    text-transform: uppercase;
    text-shadow: 0 0 0 #FFF;
    border-bottom: 1px solid #283559;
    border-bottom: 1px solid #59699A;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3)
}

.header .logo {
    color: white;
    font-size: 18px;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
    text-transform: uppercase;
}

.header .logo-red {
    color: #D02673; /* etrace pink */
    font-size: 18px;
    font-style: italic;
    text-shadow: 0px 1px 1px black;
    text-transform: lowercase;
}

.header li a,
.header li var {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    color: #FFFFFF; /*white */
}

.header li a {
    color: #A6BCC9; /* wave blue */
}

.header li a {
    font-weight: bold;
    text-shadow: 0px -1px 2px rgba(0,0,0,0.7);
}

.header li a:hover {
    background: rgba(255, 255, 255, 0.2);
    text-decoration: underline;
    text-shadow: none;
}

.header li var {
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    color: whitesmoke;
}

.header .subtitle {
    float: none;
}

.header .command-item {
    background-color: #9C9D9F;
    text-shadow: 0 0 0 #FFF;
    border-bottom: 1px solid #283559;
    background-color: #3A5094;
    background-image: linear-gradient(top,#3A5094,#253B7E);
    background-image: -o-linear-gradient(top,#3A5094,#253B7E);
    background-image: -ms-linear-gradient(top,#3A5094,#253B7E);
    background-image: -moz-linear-gradient(top,#3A5094,#253B7E);
    background-image: -webkit-linear-gradient(top,#3A5094,#253B7E);
    background-image: -webkit-gradient(linear, top, bottom, from(#3A5094), to(#253B7E));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3A5094',endColorstr='#253B7E');
    -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A5094,endColorstr=#253B7E)';
}


.list-items li, .list-box li, .list-items tr, .list-menu-rows .menu-item, .record-list thead tr {
    background-color: #F7F4F3; /* pearl */
    color: #434342; /* lava */
}

.list-items li.selected, .list-box li.selected, .list-items tr.selected {
    border-bottom: 1px solid silver;
    background-image: url('../images/imgCheckbox.png');
    background-size: contain;
    background-size: auto 80%;
    background-position: center right;
    background-repeat: no-repeat;
    background-color: #DFBEC2; /* sway pink*/
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    color: white;
}

.list-items li.selected.disabled, .list-box li.selected.disabled, .list-items tr.selected.disabled {
    color: #5f8596 !important;
    border-color: #E9E4E0; /* pebble */
    background-color: #b5c1cc !important;
    text-shadow: 0px 1px #E9E4E0;
}

.list .list-items {
    padding: 0px;
    border: 1px solid #E9E4E0; /* pebble */
    box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
}

.list-box li {
    background: white;
    font-size: 14px;
}

.list-items li:hover, .list-view li:hover, .list-box li:hover, .list-items tr:hover, .list-menu-rows .menu-item:hover {
    background-color: rgba(223, 190, 194, 0.5); /* sway pink */
    color: #87657D; /* flow purple */
    border-color: auto;
}

legend {
    color: #87657D; /* flow purple */
    font-size: 125%;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}

.progress {
    background: #F7F4F3; /* pearl */
}

.progress-bar {
    background: #87657D; /* flow purple */
}

/* Links */

a {
    color: #87657D; /* flow purple*/
}

a.link:visited {
    color: #87657D; /* flow purple*/
}

a:active {
    text-decoration: underline;
    color: #87657D; /* flow purple*/
}

a:hover {
    text-decoration: underline;
    color: #015174; /* arjo blue */
}

a.link {
    text-decoration: underline;
    padding: 4px;
}

.node:hover {
    color: #87657D; /* flow purple*/
}


/* Other */

blockquote, pre {
    font-family: Santral Regular;
    color: #F8C276;
}

hr {
    border-color: #E9E4E0;
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    margin: 10px;
}

.hint {
    background-color: #A6BCC9; /* wave blue */
    color: #FFFFFF; /* white */
    padding: 8px 10px;
    text-align: center;
    font-family: Santral Regular, Verdana, sans-serif;
    font-size: 13px;
    box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.7);
    *border: 1px outset silver;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    text-rendering: optimizeLegibility;
}

.hint-title {
    background-color: none;
    color: #015174; /* arjo blue */
    font-family: Santral Bold, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
}

.hint button {
    margin: 5px;
    width: 92px;
}

.hint i {
    font-size: 1em;
}

ul {
    list-style-type: square;
    color: #87657D; /* flow purple */
}

ul li {
    margin: 4px;
    text-align: left;
    color: #434342; /* lava */
}

img.icon-action {
    height: 30px;
    width: 30px;
}

img.icon-action.small {
    height: 24px;
    width: 24px;
}


span.icon {
    background-color: #A6BCC9;
}

.icon.download, .icon.edited, .icon.edited2, .icon.chekedOut, .icon.success {
    background-color: #2298A9;
}

div.Popup {
    text-align: justify;
    font-size: 0.9em;
    color: #F7F4F3; /* pearl */
    background: #015174; /* Arjo Blue */
    border: 1px none;
    border-collapse: separate;
    box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
}

div.Popup label {
    color: #F7F4F3; /* pearl */
}

div.Popup .Button {
    background: #87657D;
}

div.Popup table {
    color: #F7F4F3; /* pearl */
}

div.Popup .Popup-Header {
    background-color: #A6BCC9; /* wave blue */
}

/* Tables */
tfoot, thead {
    font-size: 1em;
    font-family: Santral Bold, Verdana, sans-serif;
}

th {
    vertical-align: baseline;
    font-size: 14px;
    font-weight: bold;
    font-family: Santral Bold, Verdana, sans-serif;
    color: #015174;
}

.DataGrid_FooterStyle {
    background-color: #E9E4E0; /* pebble */
}

.DataGrid_PagerStyle {
    color: #015174; /* arjo blue */
    background-color: #E9E4E0; /* pebble */
    font-weight: bold;
    text-align: left;
}

.DataGrid_PagerStyle td a {
    padding: 4px;
    font-size: 12px;
}

.ReportSelectedCell,
#grdStatus td.ReportSelectedCell {
    color: #015174; /* Arjo Blue */
    font-weight: normal;
    border-style: outset;
    border-color: #F8C276; /* beam */
    border-width: 3px 0px 3px 0px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.ReportSelectedFirstCell,
#grdStatus td.ReportSelectedFirstCell {
    color: #015174; /* arjo blue */
    font-weight: normal;
    border-style: outset;
    border-width: 3px 0px 3px 3px;
    border-color: #F8C276; /* beam */
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

/* TVN Assessment Style */
td.tdHeading {
    text-align: left;
    font-size: 1.1em;
    font-weight: bold;
    padding: 3px;
    padding-left: 20px;
    background-color: #A6BCC9;
    color: #ffffff;
}

/* TVN Controls */

.ddl {
    border: 2px solid #7d6754;
    border-radius: 5px;
    min-height: 30px;
    background-color: White;
}

.ddlS {
    border: 2px solid #7d6754;
    border-radius: 5px;
    min-height: 28px;
    background-color: White;
}

.cbl {
    border: 2px solid #7d6754;
    border-radius: 5px;
    background-color: White;
}

/* results Table */

table.results {
    text-align: left;
    font-family: Santral Regular, Verdana, sans-serif;
    font-size: 13px;
    color: black;
    margin: 1px auto;
    border: 1px solid #E9E4E0; /* pebble */
    border: 0px none;
    border-collapse: collapse;
    border-bottom: 1px solid #E6E6E6;
    background: white;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

table.results td,
table.results th {
    font-style: normal;
    padding: 6px;
}

table.results thead td,
table.results thead th {
    text-align: left;
    background-color: #A6BCC9; /* Wave */
    color: #FFFFFF; /* white */
    padding: 6px;
}

table.results th a {
    text-decoration: underline;
    text-align: left;
    font-family: Verdana;
    font-weight: bold;
    color: #FFFFFF; /* white */
}

table.results th a:visited {
    text-decoration: underline;
    color: #FFFFFF; /* white */
}

table.results th a:hover {
    text-decoration: none;
    color: #F7F4F3; /* pearl */
}

table.results tr.subheader th,
table.results th.subheader,
table.data tr.subheader th,
table.data th.subheader {
    text-align: left;
    background-color: #E9E4E0; /* pebble */
    background-image: none;
    border-bottom: 1px solid #D9D4D0;
    color: black;
}

table.results td,
table.results th, .fade {
    border-width: 0px;
}

table.data th,
table.results th {
    background-color: #A6BCC9; /* wave */
    color: #FFFFFF; /* white */
}

table.results tr {
    background-color: #F7F4F3; /* pearl */
    border-bottom: 1px solid #FFFFFF; /* white */
}

table.results tr.alternate {
    background-color: #FFFFFF; /* white */
    border-bottom: 1px solid #F7F4F3; /* pearl */
}

table.results.white tr {
    background-color: #FFFFFF; /* white */
}

table.results tr.first-row td {
    border-top: 1px solid silver;
}

table.results .GroupHeading {
    font-size: 16px;
    padding: 6px 8px;
    background-color: #F7F4F3;
}

table.results a {
    background: none;
    cursor: pointer;
}

table.results img.icon {
    height: 2.6em;
    width: auto;
}

table.results.selection tr {
    border: 1px solid #E9E4E0;
}

table.data.selection tr:hover td,
table.results.selection tr:hover td {
    color: #015174; /* arjo blue */
    color: #87657D !important; /* flow purple */
    background: rgba(223, 190, 194, 0.4) !important; /* sway pink */
}

table.data tr.selected,
table.results tr.selected {
    color: #87657D; /* flow purple*/
    background-color: #DFBEC2; /* sway pink*/
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 0px 30px 5px #DFBEC2;
    border: 1px solid #DFBEC2;
}

table.results tr.fixed-row {
    border: none;
}

table.data tr.fixed-row > td,
table.records tr.fixed-row > td,
table.selection tr.fixed-row:hover td {
    background-color: #FFFFFF !important; /* white */
    color: #434342; /* lava */ /*!important*/
}

table.data tr.fixed-row > td,
table.results tr.fixed-row > td {
    background-color: #FFFFFF !important;
    box-shadow: inset 0px 2px 2px rgba(0,0,0,0.3);
}

table.results tr.fixed-row td {
    background-color: #FFFFFF !important; /* white */
    color: #434342 !important; /* lava */
    cursor: default;
}

table.results tr.fixed-row > td {
    background-color: #FFFFFF !important;
    box-shadow: inset 0px 2px 2px rgba(0,0,0,0.3);
}

table.results tr.fixed-row tr {
    border: none;
}



/* records Table */

table.records {
    text-align: left;
    font-family: Santral Regular, Verdana, sans-serif;
    font-size: 13px;
    color: black;
    margin: 1px auto;
    border: 1px solid #E9E4E0; /* pebble */
    border: 0px none;
    border-collapse: collapse;
    border-bottom: 1px solid #E6E6E6;
    background: white;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

table.records td,
table.records th {
    font-style: normal;
    padding: 6px;
}


table.records thead td,
table.records thead th {
    text-align: left;
    background-color: #A6BCC9; /* Wave */
    color: #FFFFFF; /* white */
    padding: 6px;
}

table.records th a {
    text-decoration: underline;
    text-align: left;
    font-family: Verdana;
    font-weight: bold;
    color: #FFFFFF; /* white */
}

table.records th a:visited {
    text-decoration: underline;
    color: #FFFFFF; /* white */
}

table.records th a:hover {
    text-decoration: none;
    color: #F7F4F3; /* pearl */
}

table.records tr.subheader th,
table.records th.subheader {
    text-align: left;
    background-color: #E9E4E0; /* pebble */
    background-image: none;
    border-bottom: 1px solid #D9D4D0;
    color: black;
}

table.records td {
    border-width: 0px;
}


table.records th {
    background-color: #A6BCC9; /* wave */
    color: #FFFFFF; /* white */
    border: 0px none;
}

table.records tr {
    background-color: #F7F4F3; /* pearl */
    border-bottom: 1px solid #FFFFFF; /* white */
}

table.records tr.alternate {
    background-color: #FFFFFF; /* white */
    border-bottom: 1px solid #F7F4F3; /* pearl */
}

table.records.white tr {
    background-color: #FFFFFF; /* white */
}

table.records tr.first-row td {
    border-top: 1px solid silver;
}

table.records .DataGrid_HeaderStyle,
table.records th {
    padding: 6px 8px
}

table.records .GroupHeading {
    font-size: 15px;
    padding: 6px 8px;
    background-color: #F7F4F3;
}

table.records a {
    background: none;
    cursor: pointer;
}

table.records img.icon {
    height: 2.6em;
    width: auto;
}

table.records.selection tr {
    border: 1px solid #E9E4E0;
}

table.records.selection > tr:hover td,
table.records.selection > tbody > tr:hover td {
    color: #015174; /* arjo blue */
    color: #87657D; /*!important; */ /* flow purple */
    background: rgba(223, 190, 194, 0.4); /* sway pink */ /* !important;*/
}

table.records.selection tbody tr:hover td td {
    background-color: inherit;
    color: inherit;
}

table.records tr.selected {
    color: #87657D; /* flow purple*/
    background-color: #DFBEC2; /* sway pink*/
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 0px 30px 5px #DFBEC2;
    border: 1px solid #DFBEC2;
}

table.records tr.fixed-row {
    border-bottom: 1px solid #E9E4E0;
}

table.records tr.fixed-row > td {
    background-color: #FFFFFF !important; /* white */
    color: #434342 !important; /* lava */
}

table.records tr.fixed-row > td {
    background-color: #FFFFFF !important;
    box-shadow: inset 0px 2px 2px rgba(0,0,0,0.3);
}

table.records tr.fixed-row td {
    background-color: #FFFFFF;
    color: #434342; /* lava */ /* !important*/
    cursor: default;
}

table.records tr.fixed-row > td {
    background-color: #FFFFFF !important;
    box-shadow: inset 0px 2px 2px rgba(0,0,0,0.3);
}

table.records tr.fixed-row tr {
    border: none;
}

/* Data Grid */

table.data-grid {
    border: 1px solid rgba(0,0,0,0.3);
}

table.data-grid td {
    border: 1px solid silver;
    padding: 6px 4px;
}

table.data-grid th {
    text-align: left;
    background-color: #A6BCC9; /* wave blue */
    /*background-color: #015174; /* arjo blue */
    color: #FFFFFF; /* white */
    padding: 4px;
}

table.data-grid th a {
    color: #A6BCC9; /* wave blue */
    color: #FFFFFF; /* white */
}


/* Data Table */

table.data {
    border: 1px solid #E9E4E0; /* pebble */
    border-collapse: collapse;
    border-radius: 0px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    margin: 2px auto;
    margin-bottom: 2px;
}

table.data a {
    background: none;
    cursor: pointer;
}

table.data .DataGrid_HeaderStyle,
table.data tr th {
    background-image: none;
    font-size: 14px;
    padding: 2px 6px
}

table.data tr {
    background-color: #F7F4F3; /* pearl */
}

table.data tr.alternate {
    background-color: #FFFFFF; /* white */
}

table.data tr td,
table.data tr th {
    padding: 3px;
    border: 0px;
    background-image: none;
}

table.data tr th {
    margin: 3px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 0px -1px rgba(0,0,0,0.2);
}

table.data th.subheader,
table.data tr.subheader th {
    text-align: left;
    background-color: #E9E4E0; /* pebble */
    background-image: none;
    border-top: 1px solid rgba(0,0,0,0.1);
    color: black;
    text-shadow: none;
}

table.data tr.first td {
    border-top: 1px solid #D4CCC7; /* sand */
    border-top: 1px solid rgba(0,0,0,0.3)
}

table.data tr td {
    margin: 4px;
    line-height: 1.6em;
    vertical-align: middle;
    border-top: 1px solid #D4CCC7; /* sand */
    border-top: 1px solid rgba(0,0,0,0.1)
}


/* Special pink selected data row */
table.data tr.selected {
    color: #D02673; /* etrace pink */
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(rgba(208, 38, 115, 0.1), rgba(208, 38, 115, 0.4));
}

/* Fix border issue in IE */
table.results,
table.records,
table.data {
    border: 1px solid #E9E4E0\9; /* pebble */
    border-bottom: 2px solid #E6E6E6\9;
}

table.selection td {
    cursor: pointer;
}

/* Plain table */

table.plain {
    border: none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    font-family: Santral Regular, Verdana, sans-serif;
}

table.plain td {
    background-color: #E9E4E0;
    -ms-filter: initial;
    filter: none;
    border: none;
    background-image: none !important;
}

table.plain tr {
    border: none;
    border-bottom: none;
}

th.FieldTtl {
    width: 10%;
    font-size: 1em;
}

td.FieldRed {
    width: 10%;
    font-size: .9em;
    color: red;
}

td.FieldBlue {
    width: 10%;
    font-size: .9em;
    color: navy;
}

td.Field {
    width: 10%;
    font-size: .9em;
    color: inherit;
}

.tableDiv {
    background: #F7F4F3; /* pearl */
    border: 1px solid #D4CCC7; /* sand */
    margin: auto;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.2);
}

.tableDiv .scroll-always {
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.2);
}

/* Fields */

label {
    margin: 2px;
    margin-right: 6px;
    min-height: 1em;
    padding: 0px;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow: 0px 1px #FFF;
    color: #87657D; /* flow */
    color: #015174; /* arjo blue */
}

span > label {
    vertical-align: middle;
}

.field {
    color: #036;
    padding: 5px 2px;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.field,
.dropdown,
label,
.label,
input.GoButtonS {
    margin-bottom: 5px;
}

.results select,
.results textarea,
.results input,
.results .field,
.results label,
.results .label,
.results input.GoButtonS {
    margin-bottom: 0px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.value,
.dropdown,
.uneditable-input,
.uneditable-textarea {
    display: inline-block;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.value,
.dropdown,
.uneditable-input {
    width: 206px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.dropdown:focus,
.uneditable-input:focus {
    border-color: rgba(135, 101, 125, 0.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(135, 101, 125, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(135, 101, 125, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(135, 101, 125, 0.6);
}

input[type="radio"],
input[type="checkbox"] {
    margin: 3px 0px;
    margin-top: 1px \9;
    *margin-top: 0;
    line-height: normal;
    vertical-align: middle;
    zoom: 1.3;
    min-height: 14px;
    *zoom: 1;
}

textarea {
    height: auto;
}

.ie input[type="checkbox"] {
    zoom: 1.3;
    margin-right: 3px;
}

input[type=button],
input[type=submit],
input[type=reset],
input[type=image], button {
    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
    background: #E9E4E0; /* pebble */
    text-align: center;
    vertical-align: middle;
    border: 0px none;
    padding: 4px 6px;
    cursor: pointer;
    color: #015174; /* arjo blue */
    font-weight: bold;
}

input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled,
input[type=image]:disabled, button:disabled {
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.4);
    color: #E9E4E0 !important; /* pebble */
    text-shadow: 1px 1px #CCC !important;
    background-color: #F7F4F3 !important; /* pearl */
}

/*input[readonly][autocomplete=off], textarea[readonly][autocomplete=off], select[readonly][autocomplete=off] {
    background: white !important;
}*/

select,
input[type="file"] {
    height: 28px;
    /* In IE7, the height of the select element cannot be changed by height, only font-size */
    *margin-top: 4px;
    /* For IE7, add top margin to align select with labels */
    line-height: 28px;
}

select {
    width: 220px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    margin-right: 4px;
}

select[multiple],
select[size] {
    height: auto;
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.uneditable-input,
.uneditable-textarea {
    font-size: 14px;
    color: #999999;
    cursor: not-allowed;
    background-color: #fcfcfc;
    border-color: #cccccc;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
}

.uneditable-input {
    overflow: hidden;
    white-space: nowrap;
}

.uneditable-textarea {
    width: auto;
    height: auto;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999999;
}

/* Dates */

#cboMonth, #cboYear, #cboDay {
    width: auto;
}

/* alert */

.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.alert,
.alert h4 {
    color: #c09853;
}

.alert h4 {
    margin: 0;
}

.alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 20px;
}

.alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-success h4 {
    color: #468847;
}

.alert-danger,
.alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.alert-danger h4,
.alert-error h4 {
    color: #b94a48;
}

.alert-info {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-info h4 {
    color: #3a87ad;
}

.alert-block {
    padding-top: 14px;
    padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
    margin-bottom: 0;
}

.alert-block p + p {
    margin-top: 5px;
}

/* Buttons */

input.default {
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    border-radius: 4px;
    background: #DDDDDD;
}

/* Basic Button*/
input.Button,
button.Button {
    color: #F7F4F3; /* pearl */
    background-color: #015174; /* arjo blue */
    margin-right: 3px;
    vertical-align: middle;
    padding: 4px 6px;
}

/* Small Button in line with data fields */
input.GoButton,
button.GoButton,
input.GoButtonS,
button.GoButtonS {
    color: #F7F4F3; /* pearl */
    background-color: #015174; /* arjo blue */
    font-size: 16px;
    font-weight: normal;
    padding: 4px 8px;
    height: auto;
    margin: 5px;
}

button.GoButtonS,
input.GoButtonS {
    font-size: 14px;
    line-height: 12pt;
    padding: 3px 5px;
    height: 26px;
    margin: 0px;
    margin-left: 4px;
    margin-bottom: 5px;
}

/* large button for login */
input.GoButtonBig,
button.GoButtonBig {
    height: auto;
    min-width: 120px;
    *width: 120px;
    color: #F7F4F3; /* pearl */
    background-color: #015174; /* arjo blue */
    font-size: 16px;
    font-weight: normal;
    line-height: 31px;
    padding: 1px 8px;
}

/* large button for page update */
input.BigButton,
button.BigButton {
    height: 35px;
    min-width: 100px;
    *width: 100px;
    margin: 2px;
    color: #F7F4F3; /* pearl */
    background-color: #87657D; /* flow */
    font-size: 15px;
    font-weight: bold;
    vertical-align: middle;
}

input.BigButton:hover,
button.BigButton:hover {
    color: #DFBEC2; /* sway */
}

button[disabled],
input.Button[disabled],
input.GoButton[disabled],
input.GoButtonBig[disabled],
input.BigButton[disabled] {
    color: #E9E4E0 !important; /* pebble */
    text-shadow: 1px 1px #CCC !important;
    background-color: #F7F4F3 !important; /* pearl */
}

input.GoButtonS:disabled,
button.GoButtonS:disabled {
    color: #434342 !important; /* lava */
    text-shadow: 1px 1px #CCC !important;
    background-color: #015174 !important; /* arjo blue */
}

input.close,
button.close {
    right: 4px;
    top: 3px;
    width: 1.5em;
    font-size: 14px;
    border-radius: 2px;
    background: none;
    font-weight: bold;
}

.popup-titlebar input.close,
.popup-titlebar button.close {
    border: 1px outset silver;
    top: 2px;
    padding: 1px;
}

.popup-close,
.dialog-close,
.popup-title .close,
.popup-titlebar .close,
.messageTitle .close,
.dialog-titlebar .close {
    color: white !important;
}

button.danger,
input[type=button].danger,
input[type=submit].danger {
    background-color: #D02673; /* etrace pink */
    color: whitesmoke;
}

button.GoButton.plain,
input[type=button].GoButton.plain,
input[type=submit].GoButton.plain,
input[type=button].GoButtonS.plain,
input[type=submit].GoButtonS.plain {
    color: #015174; /* arjo blue */
    background-color: #E9E4E0; /* pebble */
}

button:active,
input.Button:active,
input.GoButton:active,
input.GoButtonBig:active,
input.BigButton:active {
    box-shadow: inset 0px 3px 10px rgba(0,0,0,0.2);
    border-style: inset;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    color: #DFBEC2; /* sway pink */
}

input.GoButton.glow,
button.GoButton.glow {
    border: 1px solid #E9E4E0;
    color: white !important;
    text-shadow: 0px 0px 1px red;
    background-image: linear-gradient(to bottom, #87657D, #015174);
}

/* Sections */

.Panel, .tree, .Section, .SectionLarge, .login-panel, .menuList, .screen-panel, .table-section {
    background: #F7F4F3; /* pearl */
    border: 0px none;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    margin: auto;
}

.Panel {
    padding: 5px;
    padding-bottom: 10px;
    margin: 10px auto;
}

.Pane {
    background: #F7F4F3; /* pearl */
    border: 0px none;
    margin: 0px auto;
    padding: 0px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

table.Panel {
    border-collapse: collapse;
    margin-bottom: 10px;
}

.SectionLarge {
    margin-bottom: 20px;
}

.Section {
    padding: 4px;
    margin-bottom: 20px;
    font-family: Santral Regular, Verdana, sans-serif;
}

.Section.tabbed {
    margin-top: 50px;
}

.NoResults {
    margin: 0px;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
}

.Section.JoinBottom,
.SectionLarge.JoinBottom {
    margin-bottom: 0px;
}

.Section.JoinTop,
.SectionLarge.JoinTop {
    margin-top: 0px;
}

* html .Section,
* + html .Section {
    background: auto;
}

table.Section, .Section.tabbed {
    border: none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    font-family: Santral Regular, Verdana, sans-serif;
}

table.Section td {
    background-color: #E9E4E0;
    -ms-filter: initial;
    filter: none;
    border: none;
    background-image: none !important;
}

table.Section tr {
    border: none;
    border-bottom: none;
}

.screen-panel {
    background: white;
    border: 1px solid #DDD;
}

.table-section {
    background: white;
}


/* Tabs */

.tabs, .list-tabs {
    top: -32px;
    padding-left: 6px;
}

.Section.tabbed {
    border-top: 1px solid #CCC;
}

.tab {
    background: white;
    box-shadow: 0px -1px 1px rgba(0,0,0,0.1);
    border-color: #CCC;
    padding: 5px 5px;
    background-color: rgb(240, 240, 240);
    background-image: -webkit-gradient(linear, top, bottom, from(#F0F0F0), to(#D2D2D2));
    background-image: -webkit-linear-gradient(top,#F0F0F0,#D2D2D2);
    background-image: -moz-linear-gradient(top,#F0F0F0,#D2D2D2);
    background-image: -o-linear-gradient(top,#F0F0F0,#D2D2D2);
    background-image: linear-gradient(top,#F0F0F0,#D2D2D2);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#F0F0F0', endColorstr='#D2D2D2', gradientType='0');
    -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorstr=#F0F0F0, endColorstr=#D2D2D2, gradientType=0)';
    box-shadow: 0px -1px 1px rgba(0,0,0,0.1), inset 1px -5px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px -5px 5px rgba(0, 0, 0, 0.1);
    color: #434342; /* lava black */
}

.tab.add {
    left: -9px;
    padding-left: 6px;
    padding-right: 8px;
    background-color: #015174;
    background-image: -webkit-gradient(linear, top, bottom, from(#015174), to(#508fab));
    background-image: -webkit-linear-gradient(top,#015174,#508fab);
    background-image: -moz-linear-gradient(top,#015174,#508fab);
    background-image: -o-linear-gradient(top,#015174,#508fab);
    background-image: linear-gradient(top,#015174,#508fab);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#015174', endColorstr='#508fab', gradientType='0');
    -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorstr=#015174, endColorstr=#508fab, gradientType=0)';
    background: #015174;
}

a.tab:hover {
    top: -1px;
    padding-bottom: 6px;
}

.tab.selected {
    background: #f7f4f3;
    background-image: none;
    padding-bottom: 6px !important;
    box-shadow: 0px -1px 1px rgba(0,0,0,0.1);
    color: #87657D;
}

.quiz-question,
.quiz-dialog-button {
    background-color: #c3d9e5; /* light wave blue */
}

.quiz-answer {
    background-color: #F7F4F3; /* pearl */
    border: 3px solid #F7F4F3; /* pearl */
}

.quiz-answer.selected {
    background-color: #FBD575; /* gold */
    border: 3px solid #BFB4AE; /* stone */
}

.quiz-answer.usercorrect {
    background-color: #8ad1d1; /*#93ce4e;*/
    border: 3px solid #BFB4AE; /* stone */
    background-image: url('../images/imgAuthoriseSmall.png');
}

.quiz-answer.selected.usercorrect {
    border-color: #6ba9b3;
}

.quiz-answer-part,
.quiz-answer-letter {
    font-weight: bold;
    font-size: 17px;
}

.quiz-answer-part {
    font-size: 17px;
}

.quiz-answer-letter {
    color: darkslategray;
    font-size: 18px;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}

.quiz-overview h3 {
    text-align: left;
    font-size: 15px;
    font-style: italic;
    margin-left: 1em;
}

.screen-bar {
    background-color: #015174; /* arjo blue */
    color: #A6BCC9; /* wave blue */
    text-shadow: 0 0 0 #FFF;
    border-bottom: 1px solid #283559;
    border-bottom: 1px solid #59699A;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3)
}

.screen-bar button {
    border: 1px solid grey;
    border-color: white grey grey white;
}

.screen-bar button.selected {
    border: 1px solid black;
    border-color: black silver silver black;
    box-shadow: inset 1px 3px 5px rgba(0,0,0,0.5);
}

.screen-bar button.Button {
    border: 1px solid white;
    border-color: silver black black silver;
    padding: 1px;
}

.JoinTop {
    border-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.JoinBottom {
    border-bottom: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorstr=#EAEAEA,endColorstr=#E8E8E8, gradientType=0)';
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#EAEAEA',endColorstr='#E8E8E8', gradientType='0');
}

.tree {
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.2);
}

.tree .node {
    color: #434342; /* lava */
}

.tree .node.parent {
    color: #015174; /* arjo blue */
}

.tree .node.selected {
    background-color: #87657D; /* flow purple */
    color: #DFBEC2; /* sway pink */
    border: 0px;
    border-radius: 0px;
}

.tree .node:hover {
    color: #87657D; /* flow purple */
}

.tree .node.selected:hover {
    background-color: #87657D; /* flow purple */
    color: #FFFFFF; /* white */
}

.link-engineer {
    border: 1px solid transparent;
    border-left: 0px;
    margin-right: 2px;
    color: #015073;
}

.link-engineer span {
    vertical-align: middle;
}

.link-engineer:hover {
    background: rgba(255, 174, 183, 0.2);
    border: 1px solid rgba(255, 174, 183, 0.4);
}

/* Login */

.login-panel {
    display: inline-block;
    z-index: 20;
    width: 20%;
    text-align: center;
    margin: 5% auto;
    box-shadow: none;
    min-width: 375px;
    *width: 32%;
    _width: 500px;
}

.login-panel .GoButtonBig {
    background: #87657D; /* flow purple */
}

.loginTitle h1 {
    font-size: 24px;
    text-align: center;
}

.loginlabel {
    display: inline-block;
    width: 95%;
    height: 19px;
    margin-top: 3px;
    font-size: 17px;
    vertical-align: baseline;
    color: #87657D; /* flow purple */
    color: #434342; /* lava */
    font-weight: normal;
    padding: 4px;
}

.loginfield {
    width: 85%;
    *width: 200px;
    font-size: 16px;
    margin-bottom: 3px;
    margin-left: 22px;
    padding: 4px;
    margin-right: 14px;
}

select.loginfield {
    width: 88%;
}

.login-logo {
    float: right;
    padding: 20px;
    text-align: right;
}

.login-icon {
    position: absolute;
    right: 10px;
    height: 80px;
    *border: 1px solid silver;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
    border-radius: 14px;
    vertical-align: middle;
    margin: 5px;
    display: none;
}


.login-info h1 {
    text-align: left;
    margin: 30px 0px;
    font-size: 40px;
    line-height: 45px;
}

.login-info h2 {
    color: #A6BCC9; /* wave blue */
    margin: 0px;
    font-size: 32px;
    text-align: left;
    font-weight: normal;
    line-height: 40px;
}

.login-info h3 {
    text-align: left;
    margin: 20px 0px;
}

.login-info hr {
    width: 80px;
    border: 0px none;
    border-top: 6px solid #015174; /* arjo blue */
    margin: 40px 0px;
    text-align: left;
}

.login-info .detail {
    color: #015174; /* arjo blue */
    vertical-align: middle;
    margin: 4px 0px;
    font-weight: bold;
}

.LoginTable {
    height: auto;
    width: 100%;
    border: 0px;
    z-index: 100;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 0 6px 6px rgba(255,255,255,0.1);
}


.LoginTable .GoButton {
    font-size: 16px;
    font-weight: normal;
    width: 94px;
}

.LoginTable .loginlabel {
    display: inline-block;
    width: 110px;
    height: 19px;
    font-size: 16px;
    margin-left: 2px;
    margin-bottom: 10px;
    color: #87657D; /* flow purple */
}

.LoginTable .loginfield {
    margin-right: 10px;
    margin-bottom: 10px;
}

.LoginTable select {
    margin-right: 10px;
    margin-bottom: 10px;
}

.LoginTable .stripe {
    font-size: 16px;
}

/* New Login */

.landing {
    max-width: 1700px;
    text-align: left;
    margin: auto;
}

.landing .login-panel {
    float: right;
    position: absolute;
    padding: 3% 3%;
    margin: 8%;
    left: auto;
    right: 0px;
    top: 2%;
}

.landing .login-panel .GoButtonBig {
    background: #87657D; /* flow purple */
    margin: 1px 10px
}

.landing .login-panel .padding {
    width: 1px;
}

.landing #LoginTable {
    text-align: center;
    margin: auto;
    width: auto;
}

.landing #content_main {
    width: 40%;
    margin: 8%;
    padding-bottom: 200px;
}

.landing .login-icon {
    position: static;
    float: right;
}

/* User Messages */

.notification,
.user-message {
    display: inline-block;
    padding: 14px;
    font-weight: bold;
    font-size: 110%;
    text-align: center;
    color: #87657D; /* flow */
}

.ribbon {
    color: #015174; /* arjo blue */
    background-color: #F7F4F3; /* pearl */
    background-image: -webkit-linear-gradient(top, #F7F4F3, #E9E4E0);
}

.Alert {
    font-size: 1.1em;
}

.Alert2, .Alert3 {
    font-size: 1.1em;
    color: #015174; /* arjo blue */
}

.Alert4 {
    font-size: 1.1em;
    color: #D02673; /* etrace pink */
}

.highlight,
input.highlight,
textarea.highlight,
.highlight select,
input.highlight[autocomplete][readonly] {
    background-color: #ffeff1; /* light pink */
    background-image: none;
}

/* Message */
.dialog,
.floating {
    position: absolute;
    z-index: 9999;
    color: #434342; /* lava */
    background-color: #F7F4F3; /* pearl */
    border-color: #F7F4F3; /* pearl */
    border-width: 2px;
    border-style: solid;
    border-collapse: separate;
    font-size: 15px;
    box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.5);
}

.dialog {
    display: inline-block;
    text-align: center;
    border-width: 0px;
    border-style: solid;
    background-color: #F7F4F3; /* pearl */
}

.dialog-titlebar {
    display: block;
    border: 0;
    padding: 6px;
    font-weight: bold;
    font-size: 105%;
    text-align: center;
    font-family: Santral Bold, Arial, Verdana, sans-serif;
    background-color: #015174; /* arjo blue */
    color: #F7F4F3; /* pearl */
    color: #FFFFFF; /* white */
}

.dialog-inner {
    display: inline-block;
    text-align: center;
    border: 0px;
    background-color: #F7F4F3; /* pearl */
    color: #434342; /* lava */
    z-index: 1000;
}

.dialog-controls {
    background: none !important;
    margin: 4px;
}

.dialog-button {
    color: #F7F4F3;
    background-color: #015174;
    font-size: 16px;
    font-weight: normal;
    min-width:4em;
    padding: 4px 8px;
    height: auto;
    margin: 5px;
}

.popup-titlebar {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    font-family: Santral Bold, Arial, Verdana, sans-serif;
    background-color: #015174; /* arjo blue */
    color: #F7F4F3; /* pearl */
    color: #FFFFFF; /* white */
}


#datepicker, #timepicker {
    background: #E9E4E0; /* pebble */
    background-color: #F7F4F3; /* pearl */
}

#datepicker td {
    margin: 6px;
    padding: 6px;
    text-align: right;
    background: #DFBEC2; /* sway pink */
    border: 1px #D4CCC7 outset; /* sand */
}

#datepicker td:hover {
    font-weight: inherit;
    background: #d6a7ad;
    text-decoration: underline;
}

#datepicker td.highlighted {
    background: #87657D; /* flow purple */
}

#datepicker td.chosen {
    color: #015174; /* arjo blue */
    font-weight: bold;
    border: 1px inset #015174; /* arjo blue */
    background: #87657D; /* flow purple */
}

#datepicker label,
#datepicker select {
    width: auto;
}

#timepicker button.up {
    background-image: url('../images/arrow-up.png');
    background-repeat: no-repeat;
    background-position: center center;
}

#timepicker button.down {
    background-image: url('../images/arrow-down.png');
    background-repeat: no-repeat;
    background-position: center center;
}

#calendar table td button.options {
    background: #F7F4F3; /* pearl */
}

#calendar table td.chosen {
    box-shadow: inset 0px 1px 20px rgba(1,81,116,0.2)
}

#calendar .calendar-day::-webkit-scrollbar-track {
    /**/ background-color: #F1F1F1;
    /**/ background-image: -webkit-gradient(linear, left, right, from(#F1F1F1),to(#FFF));
    /**/ background-image: -webkit-linear-gradient(left, #F1F1F1,#FFF);
    /**/ background-image: linear-gradient(from left, #F1F1F1,#FFF);
}

#calendar .calendar-day::-webkit-scrollbar-thumb {
    background: #015174;
}

.hover {
    cursor: pointer;
}

.hover:hover {
    color: #87657D !important; /* flow purple */
    background: rgba(223, 190, 194, 0.4) !important; /* sway pink */
}

/* Menu */

.menuIcons .menu-item {
    border-radius: 0px;
    color: #434342; /* lava */
    padding-bottom: 4%;
}

.menuIcons .menu-item img {
    border-style: solid;
    border-color: #EDEDED;
    border-width: 0px;
    background-color: #F7F4F3;
    border-radius: 2.5em;
    padding: 0.6em;
    *border-width: 1px;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.15);
    -ms-box-shadow: 0px 2px 3px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.15);
}

.menuIcons .menu-item div {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.menuList .menu-item:hover,
.menuIcons .menu-item:hover {
    background-image: none;
    font-weight: bold;
    background: rgba(223, 190, 194, 0.4); /* sway pink */
    color: #87657D; /* flow purple */
}

.menuList .menu-item {
    box-shadow: none;
    border: 0px;
    border-bottom: 1px solid #EAEAEA;
    background-color: #F7F4F3;
    padding: 4px;
}

.menu-item .alert {
}

.list-menu .menu-item span .count {
}

input.time-field,
input[type=text].time-field {
    width: 3.3em;
    margin: 2px 1px
}

input.date-field,
input[type=text].date-field {
}


/* Date Picker */
#datepicker td {
    text-align: right;
    font-family: verdana;
    border: 1px outset #C0CACD;
    border-radius: 0.2em;
    background: #DFBEC2; /* sway pink */
    color: #015174; /* arjo blue */
    cursor: pointer;
}

#datepicker td.highlighted {
    border: 1px outset #87657D;
    background: #87657D; /* flow purple */
    color: #FFFFFF; /* white */
}

#datepicker td.chosen {
    border: 2px solid #015174; /* arjo blue */
    background: #D5A8A8; /* dark sway pink */
    font-weight: bold;
}


.dash-board {
    background: #f7f4f3;
    border: 1px solid silver;
}

.dash-item {
    background: white;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

.dark-mode .header, .dark-mode .foot {
    background: #768599;
    color: white;
    text-shadow: none;
}


/* Edge only */

@supports(-ms-ime-align:auto) {
    table.results, table.records {
        border: 1px solid #E9E4E0; /* pebble */
        border-bottom: 2px solid #E6E6E6;
    }
}

/* IE only */
@media all and (-ms-high-contrast:none) {

    table.records tr.selected,
    table.results tr.selected {
        color: #87657D; /* flow purple*/
        background-color: #DFBEC2; /* sway pink*/
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
        box-shadow: none;
        border: 2px solid #DFBEC2;
        background-image: linear-gradient(rgba(255,255,255,0),#DFBEC2);
    }
}

/* Medium or smaller screens */
@media screen and (max-width:1300px) {

    .landing #content_main {
        padding: 5%;
        margin: 2%;
    }

    .landing .foot {
        max-height: 180px;
        font-size: 11px;
        padding: 12px;
    }

    .landing .login-icon {
        height: 100px;
        margin: 20px;
    }
}

/* Tall screens - foot can be always shown*/
@media screen and (min-height:700px) {
    .foot {
        position: absolute;
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        max-height: 25%;
        overflow-y: auto;
    }
}

/* smaller screens */
@media screen and (max-width:800px) {

    .landing {
        text-align: center;
    }

    .landing .login-title h2 {
        display: none;
    }

    .landing .login-panel {
        position: static;
        float: none;
        clear: both;
        margin: 4% auto;
        padding: 2%;
    }

    /*	.landing .foot {
		position: static;
		float: none;
		clear: both;
		width: 100%;
		font-size: 10px;
		padding: 12px;
	}*/

    .landing #content_main {
        width: 92% !important;
        padding: 3%;
    }

    .landing .login-logo {
        width: 100%;
    }

    .landing .login-title {
        position: absolute;
        left: 20px;
        top: 0px;
    }

    .landing .login-title h1 {
        margin: 20px 0px;
    }

    .landing hr {
        display: none;
    }

    .header .subtitle {
        overflow: hidden;
        max-width: 33%;
    }
}

/* Small devices such as phones */
@media screen and (max-device-width:420px) {

    .header .subtitle {
        display: none;
    }
}

/* Small devices such as phones - landscape */
@media (max-height:560px) and (max-width:800px) and (orientation:landscape) {

    .landing .login-panel {
        margin-top: 0px;
    }
}

/* ListSelection */

ul.list {
    display: inline-block;
    margin: 1px 0px;
    padding: 0px;
    background: white;
    overflow: scroll;
    overflow-x: hidden;
    border: 1px inset silver;
}

ul.list li.option {
    position: static;
    *height: 1.7em;
    line-height: 1.7em;
    font-size: 1em;
    vertical-align: middle;
    margin: auto;
    padding: 2px;
    padding-left: 2%;
    border-bottom: 1px solid #E0E0E0;
    color: #434342; /* lava */
    cursor: pointer;
    *background-color: white;
}

ul.list li.option.disabled label {
    color: #D4CCC7; /* sand */
}

ul.list li.option input[type=checkbox] {
    margin: 3px;
}

ul.list li:hover {
    color: #A6BCC9 /* wave blue */
}

ul.list li.selected {
    background-color: #DFBEC2 !important; /* sway pink */
    background-color: #D4CCC7 !important; /* sand */
    background-color: #A6BCC9 !important; /* wave blue */
    color: #87657D; /* flow purple */
    color: #015174; /* arjo blue */
}


ul.list li.selected:hover {
    color: #FFFFFF /* white */
}

ul.list li.disabled:hover {
    color: #015174 !important; /* arjo blue */
}

ul.list::-webkit-scrollbar-thumb {
    background: #A6BCC9; /* wave blue */
    box-shadow: inset 0 0 4px rgba(0,100,100,0.2);
}