*:focus {
    outline : none;
}

input::-moz-focus-inner {
    border : none;
}

html.top, html.top > body {
    height : 97%;
    color  : #202020;
}

html, body {
    margin : 0;
}

html, body, input, select, textarea {
    font-family : 'Roboto', sans-serif;
    font-weight : 300;
}

div.frame a:link {
    color : #ffffff;
}

/* unvisited link */
div.frame a:visited {
    color : #ffffff;
}

/* visited link */
div.frame a:hover {
    color : #dddddd;
}

/* mouse over link */
div.frame a:active {
    color : #bbbbbb;
}

a:link {
    color : #202020;
}

a:visited {
    color : #202020;
}

a:hover {
    color : #3e3e3e;
}

a:active {
    color : #777777;
}

ul.widgetList {
    list-style : none;
    padding    : 0;
    margin     : 0;
    height     : calc(100% - 24px);
    overflow-y : auto;
    overflow-x : hidden;
}

ul.widgetList li {
    padding-left : 40px;
}

ul.widgetList li:nth-child(odd) {
    background-color : #eeeeee;
}

ul.widgetList li:nth-child(even) {
    background-color : #ffffff;
}

h3 {
    margin    : 0 0 .5em 0;
    padding   : 0;
    font-size : medium;
}

span.title {
    margin    : .1em 1em .1em .3em;
    font-size : 1.8em;
}

div.userDiv {
    float     : right;
    min-width : 100px;
}

div.searchDiv {
    float  : right;
    margin : .25em 1em .5em auto;
}

div.header {
    position   : fixed;
    z-index    : 99;
    top        : 0;
    left       : 0;
    height     : 34px;
    width      : 100%; /*box-shadow: 0px 2px 6px #000000;*/
    background : #2f4264;
    color      : white;
}

div.envNotificationSiteHeader {
    background-color : #dc0000;
    color            : white;
    min-height       : 26px;
    width            : 65%;
    padding          : .5em 15px 0 15px;
    margin           : 0 auto;
    text-align       : center;
}

div.sidebar {
    position   : fixed;
    z-index    : 0;
    top        : 0;
    left       : 0;
    min-height : 100%;
    width      : 10em;
    background : #2f4264;
    color      : white;
}

div.sidebarContent {
    padding-top : 3em;
}

/* selected link */

ul.menu {
    list-style   : none;
    padding-left : 0;
    margin       : 0;
}

ul.menu a {
    text-decoration : none;
    display         : block;

}

ul.menu li.heading {
    background  : #192942;
    padding     : 3px 4px;
    font-weight : 500;
    color       : white;
}

ul.menu::before {
    content : '';
    display : block;
    height  : 5px;
}

ul.menu::after {
    content : '';
    display : block;
    height  : 5px;
}

nav.homeMenu li, nav.userMenu li:not(.menu-divider) {
    background : #2f4264;
}

nav.userMenu li:not(.menu-divider) {
    padding-left : 10px;
}

nav.userMenu li.menu-divider {
    background : #192942;
}

ul.submenu {
    list-style   : none;
    margin       : 5px 0;
    padding-left : 1em;
}

#homeMenu {
    width : 240px;
    float : left;
}

.dropDown nav {
    display : none;
}

.UserName {
    height  : 26px;
    padding : .5em 2em 0 15px;
}

nav.homeMenu {
    width      : 270px;
    background : #2f4264;
    padding    : 0;
    box-shadow : 0 2px 2px rgba(12, 13, 14, 0.2);
}

nav.userMenu {
    background : #2f4264;
    box-shadow : 0 2px 2px rgba(12, 13, 14, 0.2);
}

div.contentBody {
    margin : 2.5em auto 0.5em auto;
    width  : 1260px;
}

div.homeIcon {
    margin           : 0 .1em 0 .5em;
    width            : 40px;
    height           : 32px;
    background-image : url('./img/home-icon.png');
}

div.homeIcon.collapse {
    background-image : url('./img/home-icon-collapse.png');
}

div.menuBar {
    box-sizing       : border-box;
    display          : block;
    background-color : #7e90b2;
    margin           : 2px 4px 0 4px;
    height           : 26px;
}

div.toolSubMenuHeader {
    display : inline-block;
}

.toolSubMenu {
    position   : absolute;
    box-shadow : 0 2px 2px rgba(12, 13, 14, 0.2);
    background : white;
    z-index    : 100;
}

.toolSubMenu a:link {
    color      : #202020;
    padding    : 5px 10px 5px 10px;
    box-sizing : border-box;

}

/* unvisited link */
.toolSubMenu a:visited {
    color : #202020;
}

/* visited link */
.toolSubMenu a:hover {
    color : #ffffff;
}

/* mouse over link */
.toolSubMenu a:active {
    color : #444444;
}

/* Disabled menu item */
.toolSubMenu a.disabled {
    color  : #999999;
    cursor : default;
}

.toolSubMenu a.disabled:hover {
    color : #cccccc;
}

.toolSubMenu li:hover {
    background-color : #7e90b2;
}

.menu-divider {
    padding : 0;
    border  : none;
    height  : 1px;
    display : block;
    margin  : 5px auto;
}

.toolSubMenu ul.menu li.menu-divider {
    background : #e4e4e4;
}

.toolSubMenuHeader {
    background : #7e90b2;
    font-size  : 11pt;
    z-index    : 100;
    color      : white;
    float      : left;
}

.toolSubMenuHeader .dropDownHandle {
    padding : 4px 10px;
    cursor  : pointer;
}

.toolSubMenuHeader:hover {
    background : white;
    color      : #202020;
}

.toolSubMenu a.menu-item-with-details {
    min-width : 150px; /* Because IE has problems with box-sizing and pushes the details to a new line without a min width */
}

table.tool-layout {
    width           : 100%;
    border-collapse : collapse;
    table-layout    : fixed;
}

table.tool-layout > tbody > tr > td {
    background     : #f1f1f1;
    border         : 4px white solid;
    vertical-align : top;
    padding        : 5px;
}

.no-padding,
table.tool-layout > tbody > tr > td.no-padding {
    padding : 0;
}

table.tool-layout > tbody > tr > td.section-label {
    background : none;
    margin     : 0;
}

table.tool-layout > tbody > tr > td.section-label label {
    margin    : 0;
    font-size : 20px;
}

table.tool-layout > tbody > tr > td.section-label .label-option-button {
    margin-left : 10px;
}

table.tool-layout td h3 {
    font-size : 14pt;
}

table.contract-layout > tbody > tr.toolLayoutSectionHeader {
    font-size   : 18px;
    font-weight : 800;
    height      : auto;
}

table.contract-layout > tbody > tr.toolLayoutSectionHeader td {
    background : white;
    margin     : 0;
    padding    : 2px 2px 0 2px;
}

.inline {
    float : left;
    width : 10em;
}

.inlineLong {
    float : left;
    width : 16em;
}

.inlineShort {
    float : left;
    width : 3em;
}

ul.layout {
    list-style   : none;
    padding-left : 2px;
}

ul.contractSummaryList {
    font-size    : 11pt;
    list-style   : none;
    padding-left : 1em;
}

ul.contractSummaryList li {
    margin     : .25em 0;
    min-height : 20px;
}

div.statusCircle {
    width         : 12px;
    height        : 12px;
    border-radius : 50%;
    border        : 1px grey solid;
    float         : left;
    margin-right  : 2em;
}

div.pass {
    background-color : #7bea7b;
}

div.fail {
    background-color : #f08686;
}

div.yellow {
    background-color : #f0f06a;
}

table.layout {
    width : 100%;
}

table.layout, table.layout tr, table.layout td, table.layout > thead > tr > th {
    border : none;
}

table.layout td {
    vertical-align : top;
}

span.deleteButton {
    margin : 1px;
}

span.deleteButton:hover {
    border        : 1px solid #aaaaaa;
    border-radius : 1px;
    margin        : 0;
    cursor        : pointer;
}

span.addButton {
    cursor           : pointer;
    background-image : url(img/plus-24.png);
    background-size  : 12px;
    width            : 12px;
    height           : 12px;
}

select.inlineSelect {
    width : 153px;
}

table.dataTable, table.dataTable tr, table.dataTable td {
    border-collapse : collapse;
    text-align      : center;
}

table.dataTable > tbody > tr.odd {
    background-color : #e5e5e5;
}

label {
    font-weight : 400;
}

span.ToolTitle {
    margin-left : 8px;
    font-size   : 20pt;
    font-weight : 400;

}

#ItemAndCustomerInputs select, #ItemAndCustomerInputs input {
    width : 25em;
}

.ui-widget {
    font-size : 1em;
}

#PageContent {
    width  : 100%;
    height : 99%;
    border : none;
}

table.contract-layout {
    width           : 100%;
    border-collapse : collapse;
    table-layout    : fixed;
}

table.contract-layout > tbody > tr > td {
    background     : #f1f1f1;
    border         : 4px white solid;
    vertical-align : text-top;
    padding        : 8px 10px;
}

table.contract-layout > tbody > tr {
    height : 150px;
}

table.contract-layout td h3 {
    font-size : 14pt;
}

div.sectionHeader {
    width            : 100%;
    height           : 24px;
    background-color : #bbccdd;
    padding-top      : 4px;
}

div.sectionHeader > span {
    padding     : 0;
    margin-left : .5em;
    font-weight : 400;
}

table.dataTable > thead > tr > th {
    font-weight : 400;
}

ul.errors > li {
    color       : darkred;
    margin-left : 35px;
}

.ui-icon.green {
    background-image : url(img/ui-icons_329c33_256x240.png);
}

.ui-icon.red {
    background-image : url(img/ui-icons_cd0a0a_256x240.png);
}

.ui-icon.grey {
    background-image : url(img/ui-icons_888888_256x240.png);
}

.ui-icon.blue {
    background-image : url(img/ui-icons_2e83ff_256x240.png);
}

/* LiveValidation styles */
.LV_validation_message {
    font-weight : bold;
    margin      : 0 0 0 5px;
    display     : none;
}

.LV_valid {
    color : #00cc00;
}

.LV_invalid {
    color : #ff282d;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
    border : 1px solid #ff282d;
}

.hidden {
    display : none !important;
}

.pageLoading {
    padding             : 8em 60px;
    background-image    : url(img/large-spinner.gif);
    background-repeat   : no-repeat;
    background-position : 0 7.1em;
    box-sizing          : border-box;
    width               : 300px;
    margin              : auto;
}

.tabLoading {
    padding             : 7em 49%;
    background-image    : url(img/large-spinner.gif);
    background-repeat   : no-repeat;
    background-position : 46% 6em;

}

.notificationBar {
    float  : left;
    height : 100%;
}

.notificationIcon {
    background-image : url(img/ExclamationMark.png);
    background-size  : 24px 24px;
    width            : 24px;
    height           : 24px;
    margin           : 5px 0;
    float            : left;
}

.notificationIconDark {
    background-image : url(img/ExclamationMarkDark.png);
    background-size  : 32px 32px;
    width            : 32px;
    height           : 32px;
    margin           : 5px 10px 5px 0;
    float            : left;
}

.notificationText {
    height : 100%;
    float  : left;
    margin : .5em 0 0 .5em;
}

.notificationDismiss {
    display     : block;
    float       : left;
    margin-top  : 12px;
    margin-left : 4px;
    cursor      : pointer;
}

.errorTooltip {
    max-width : 800px;
}

table {
    border-collapse : collapse;
}

table > thead > tr > th {
    border-bottom : 1px solid black;
}

table.centered td, table.centered th {
    text-align : center !important;
}

table.colorEveryOtherRow tbody tr:nth-child(odd) {
    background-color : #dddddd;
}

table.colorEveryOtherColumn tbody td:nth-child(even) {
    background-color : rgba(0, 0, 0, .05);
}

table.colorEveryTwoRows tbody tr:nth-child(4n+1), table.colorEveryTwoRows tbody tr:nth-child(4n+2) {
    background-color : #dddddd;
}

.fullWidth {
    width : 100%;
}

.fullHeight {
    height : 100%;
}

.nearlyFullWidth {
    width : 97%;
}

.starIcon {
    display         : inline-block;
    height          : 20px;
    width           : 20px;
    cursor          : pointer;
    background-size : 20px;
}

.starIcon.starred {
    background-image : url(img/favoriteStarOn.png);
}

.starIcon.unstarred {
    background-image : url(img/favoriteStarOff.png);

}

.itemSearchButton {
    background-image : url(img/searchButton.png);
    height           : 16px;
    width            : 16px;
    cursor           : pointer;
    background-size  : 16px 16px;
    float            : left;
    margin           : 2px 0 0 2px;
}

.bold {
    font-weight : bold;
}

.spinner {
    height     : 16px;
    width      : 16px;
    background : url(img/loading16x16.gif) 16px 16px;
}

.spinner-20x20 {
    height     : 20px;
    width      : 20px;
    background : url(../images/spinner_20x20.gif) 20px 20px;

}

.flagContainer {
    display   : -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display   : -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display   : -ms-flexbox; /* TWEENER - IE 10 */
    display   : -webkit-flex; /* NEW - Chrome */
    display   : flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    flex-wrap : wrap;
    padding   : 0 3px;
}

span.lineType {
    margin        : 3px;
    padding       : 0 2px;
    font-size     : 10pt;
    border        : 1px solid #555555;
    border-radius : 2px;
    color         : #202020;
    display       : none;
    text-align    : center;
}

span.lineSmallFlag {
    margin-top    : 3px;
    margin-bottom : 3px;
    border-color  : #555555;
    border-width  : 1px 0 1px 0;
    border-style  : solid;
    padding       : 0 2px;
    height        : 15px;
    float         : left;
    font-size     : 9pt;
    display       : block;
    flex-grow     : 1;
    text-align    : center;
}

span.lineSmallFlag:first-child {
    border-width  : 1px 0 1px 1px;
    border-radius : 3px 0 0 3px;
}

span.lineSmallFlag:last-child {
    border-width  : 1px 1px 1px 0;
    border-radius : 0 3px 3px 0;
}

span.inactive {
    background-color : #8f8fe8;
    display          : block;
}

span.notexist {
    background-color : #202020;
    color            : #ffffff;
    display          : block;
}

span.notInGP {
    background-color : #ff6150;
    display          : block;
}

span.dnr {
    background-color : #ffce73;
    display          : block;
}

span.ncnr {
    background-color : #bd7ec0;
    display          : block;
}

span.contractPrice {
    background-color : #d29376;
    display          : block;
}

span.shopStock {
    background-color : #d3d3d3;
    display          : block;
}

#itemSearchResults,
#item-search-selection {
    display   : block;
    font-size : 11pt;
}

#itemSearchResults > tbody > tr.paginationLoadingRow {
    height : 60px;

}

#itemSearchResults > tbody > tr { /* IE9 Fix */
    max-height : 45px;
}

#itemSearchResults.selectable > tbody > tr {
    cursor : pointer;
}

#itemSearchResults > tbody > tr.selected > td {
    background-color : #7e90b2;
}

#itemSearchResults.selectable > tbody {
    height : 325px;
}

#itemSearchResults > tbody {
    height     : 325px;
    overflow-y : scroll;
    display    : block;
}

#itemSearchResults > thead > tr > th {
    font-weight : 400;
}

#item-search-selection > tbody {
    height     : 250px;
    overflow-y : scroll;
    display    : block;
}

#item-search-selection > thead > tr > th {
    font-weight : 400;
}

#item-search-selection > tbody > tr > td > input {
    text-align : center;
}

table.scrollbody {
    display : block;
}

table.scrollbody > tbody {
    overflow : auto;
    display  : block;
    width    : 100%
}

span.textEllipsis {
    white-space    : nowrap;
    display        : inline-block;
    overflow       : hidden;
    text-overflow  : ellipsis;
    vertical-align : text-bottom
}

br.heightless {
    display     : block;
    height      : 0;
    line-height : 0;
}

.widgetTruncatedLine {
    width           : 255px;
    text-overflow   : ellipsis;
    white-space     : nowrap;
    overflow        : hidden;
    display         : inline-block;
    text-decoration : underline;
}

.ui-autocomplete {
    max-height : 300px;
    overflow-y : scroll;
    overflow-x : hidden;
    z-index    : 102
}

/* autocomplete results should always show above everything else */

div.changeLogSection {
    display       : block;
    margin-top    : .5em;
    padding       : 8px 14px;
    background    : #f5f5f5;
    border-radius : 2px;
    box-sizing    : border-box;
}

div.changeLogSection h2 {
    margin  : 0;
    padding : 0;
}

div.changeLogSection li {
    margin-bottom : 3px; /* some spacing to make it look less congested */
}

div.changeLogSection .overview {
    display    : block;
    margin     : 10px 0;
    box-sizing : border-box;
}

div.changeLogSection h2,
div.changeLogSection .change-description,
div.changeLogSection .overview {
    padding : 5px;
}

div.changeLogSection label {
    padding-left : 5px;
    color        : rgba(0, 0, 0, .7);
}

div.changeLogSection ul {
    margin     : 10px;
    box-sizing : border-box;
}

span.starburst {
    margin-left       : 10px;
    font-size         : 10px;
    vertical-align    : middle;
    background        : #ff6356;
    width             : 25px;
    height            : 25px;
    display           : -ms-inline-flexbox;
    display           : -webkit-inline-flex;
    display           : inline-flex;
    text-align        : center;
    color             : white;
    border-radius     : 1px;
    -webkit-transform : rotate(30deg);
    transform         : rotate(30deg);
    position          : relative;
    align-items       : center;
    -webkit-box-align : center;
}

span.starburst:before {
    content           : '';
    position          : absolute;
    top               : 0;
    left              : 0;
    height            : 25px;
    width             : 25px;
    background        : #ff6356;
    -webkit-transform : rotate(30deg);
    transform         : rotate(30deg);
    border-radius     : 1px;

}

span.starburst:after {
    content           : '';
    position          : absolute;
    top               : 0;
    left              : 0;
    height            : 25px;
    width             : 25px;
    background        : #ff6356;
    -webkit-transform : rotate(-30deg);
    transform         : rotate(-30deg);
    border-radius     : 1px;
}

span.starburst-text {
    transform : rotate(-40deg);
    margin    : auto auto;
    z-index   : 1;
}

/* Button CSS sitewide */
.standard-button {
    background-color      : #eeeeee; /* c1c6d0 */ /* eee */
    -moz-border-radius    : 2px;
    -webkit-border-radius : 2px;
    border-radius         : 2px;
    border                : 1px solid #bbbbbb; /* acb2bf */ /* bbb */
    display               : inline-block;
    cursor                : pointer;
    color                 : #202020;
    padding               : 2px 24px;
    text-decoration       : none;
    outline               : none;
    font-size             : 11px;
}

.standard-button:hover {
    background-color : #dddddd; /* acb3c1 */ /* ddd */
    border           : 1px solid #999999; /* 8c93a1 */ /* 999 */
}

.standard-button:active {
    position         : relative;
    top              : 1px;
    background-color : #cccccc; /* 9297a1 */ /* ccc */
}

button,
input[type=button],
input[type=submit],
input[type=reset],
.ui-dialog-buttonset button.ui-state-default,
.ui-widget button {
    background            : #c1c6d0; /* c1c6d0 */ /* eee */
    -moz-border-radius    : 2px;
    -webkit-border-radius : 2px;
    border-radius         : 1px;
    border                : 1px solid #acb2bf; /* acb2bf */ /* bbb */
    display               : inline-block;
    cursor                : pointer;
    color                 : #444444;
    padding               : 4px 16px;
    text-decoration       : none;
    outline               : none;
    font-size             : 12px;
}

input[type=button]:not(:disabled):hover,
input[type=submit]:not(:disabled):hover,
input[type=reset]:not(:disabled):hover,
button:not(:disabled):hover,
.ui-dialog-buttonset button.ui-state-default:not(:disabled):hover {
    background : #acb3c1; /* acb3c1 */ /* ddd */
    border     : 1px solid #8c93a1; /* 8c93a1 */ /* 999 */
}

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
button:disabled {
    opacity : .3;
    cursor  : default;
}

input[type="button"]:disabled:active,
input[type="submit"]:disabled:active,
input[type="reset"]:disabled:active,
button:disabled:active {
    background : #c1c6d0;
    position   : static;
}

input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active,
button:active,
.ui-dialog-buttonset button.ui-state-default:active {
    position   : relative;
    top        : 1px;
    background : #9297a1; /* 9297a1 */ /* ccc */
}

button.loading,
button.loading.ui-state-default,
input[type=button].loading,
input[type=submit].loading,
input[type=reset].loading {
    color      : rgba(0, 0, 0, 0);
    background : #c1c6d0 url('img/loading16x16.gif') no-repeat center center;
    cursor     : pointer;
}

.ui-button .ui-button-text {
    padding : 0;
}

.new-window-icon {
    background-image : url('img/icons/new-window2.png');
    background-size  : 16px;
    width            : 16px;
    height           : 16px;
    cursor           : pointer;
    display          : block;
}

.vertical-center {
    vertical-align : middle;
}

input[type=search] {
    background            : url('./img/search-icon.png') no-repeat 4px 4px;
    border                : 1px solid #cccccc;
    -moz-border-radius    : 2px;
    -webkit-border-radius : 2px;
    border-radius         : 2px;
    padding               : 4px 25px;
    background-color      : white;
    box-sizing            : border-box;
}

input[type=search].ui-autocomplete-loading {
    background : url('./img/search-icon.png') no-repeat 4px 4px, url('img/ui-anim_basic_16x16.gif') right center no-repeat;
}

/*background: url('./img/search-icon.png') no-repeat 8px 6px;*/

/* Removes the hideous X button from the search input */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display : none;
}

input:active,
input:focus {
    outline : none;
}

.object-link {
    cursor          : pointer;
    text-decoration : underline;
}

.hasTooltip {
    text-decoration : underline;
    white-space     : pre;
    cursor          : help;
}

.hasTooltip.no-underline {
    text-decoration : none;
}

.hasTooltip.dotted-underline {
    text-decoration : none;
    border-bottom   : 1px black dotted;
    display         : inline-block;
}

.hasTooltip-keep-open-hover {
    text-decoration : underline;
    white-space     : pre;
}

.hasTooltip-keep-open-hover.no-underline {
    text-decoration : none;
}

.no-close .ui-dialog-titlebar-close {
    display : none;
}

.subcategory {
    font-style : italic;
    font-size  : 14px;
}

.version {
    width         : 100%;
    display       : block;
    box-sizing    : border-box;
    text-align    : right;
    border-bottom : 1px solid #cccccc;
}

.version h3 {
    color     : rgba(0, 0, 0, .4);
    font-size : 12px;
}

.change-description {
    font-size     : 14px;
    margin-bottom : 15px;
}

.changelog-table {
    width           : 70%;
    margin          : 20px auto;
    border-collapse : collapse;
    table-layout    : fixed;
    background      : white;
    border-radius   : 2px;
    box-shadow      : 0 1px 4px rgba(15, 15, 15, .3);
}

.changelog-table td,
.changelog-table th {
    padding : 5px 10px;
}

.changelog-table th {
    border-bottom : 1px solid #cccccc;
    color         : rgba(0, 0, 0, .54);
}

.changelog-table td {
    border-bottom : 1px solid #cccccc;
}

kbd {
    border                : 1px solid rgba(0, 0, 0, 0.25);
    border-radius         : 2px;
    -webkit-border-radius : 2px;
    -moz-border-radius    : 2px;
    padding               : 0 3px;
    box-shadow            : 1px 1px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow       : 1px 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow    : 1px 1px 0 rgba(0, 0, 0, 0.2);
    color                 : #333333;
    font-family           : inherit;
    background            : rgba(255, 255, 255, 0.2);
}

.errorMessage {
    color : red;
}

.successMessage {
    color : #548042;
}

div#help-options {
    margin : 10px 0;
}

div.example {
    display          : block;
    width            : 90%;
    font-family      : consolas, monospace;
    font-size        : 12px;
    border           : 1px solid #aaaaaa;
    background-color : #fbfbfb;
    border-radius    : 2px;
    padding          : 5px 10px;
    margin           : 5px;
}

/* Dummy links are used to make page-jump links easier to use since we have the blue menu bar in the way */
#changelog .dummy-jump-to-section {
    top        : -40px;
    height     : 0;
    width      : 0;
    position   : relative;
    visibility : hidden;
}

.abstract ul {
    margin  : 0 20px;
    padding : 0;
}

.abstract ul li {
    font-size   : 11pt;
    margin-left : 5px;
}

a.back-to-top {
    position        : fixed;
    bottom          : 0;
    right           : 10px;
    text-decoration : none;
    font-size       : 10pt;
    background      : #2f4264;
    color           : white;
    padding         : 5px 7px;
    border-radius   : 3px 3px 0 0;
}

a.back-to-top:hover {
    color : #dddddd;
}

a.back-to-top:active {
    color : #bbbbbb;
}

.ui-loading,
.ui-widget-content .ui-loading {
    background : url('img/loading16x16.gif') no-repeat left center;
}

.no-padding {
    padding : 0;
}

textarea {
    font-family : inherit;
    font-size   : 12px;
}

.lockIcon {
    background-size : 20px;
    display         : inline-block;
    width           : 20px;
    height          : 20px;
    cursor          : pointer;
}

.lockIcon-small {
    background-size : 14px;
    display         : inline-block;
    width           : 14px;
    height          : 14px;
    cursor          : pointer;
}

.lockedIcon {
    background-image : url('img/icons/linedpaperlock32.png');

}

.editableIcon {
    background-image : url('img/icons/linedpaperpencil32.png');
}

.dollarLockedIcon{
    background-image : url('img/icons/dollarLock.png');
}

.dollarUnlockedIcon{
    background-image : url('img/icons/dollarUnlock.png');
}

.dollarLockedDisabledIcon{
    background-image : url('img/icons/dollarLockDisabled.png');
}

.dollarUnlockedDisabledIcon{
    background-image : url('img/icons/dollarUnlockDisabled.png');
}

.pencilIcon {
    background-image : url('img/icons/pencil32.png');
}

.editableIconPencil {
    background-image : url('img/icons/pencil32.png');
    background-size  : 16px;
    width            : 16px;
    height           : 16px;
    cursor           : pointer;
}

.toolHeader {
    margin         : 0 4px;
    position       : relative;
    padding-top    : .5em;
    padding-bottom : .2em;
}

.toolTitle {
    font-size   : 20pt;
    font-weight : 400;
    width       : 520px;
}

.toolSearchHeader {
    display        : inline-block;
    vertical-align : bottom;
    float          : right;
}

fieldset {
    border         : none;
    padding-bottom : .25em;
}

fieldset table {
    width : 100%;
}

fieldset table tr {
    vertical-align : top;
}

fieldset legend {
    font-size   : 16px;
    font-weight : bold;
}

fieldset table {
    font-size : 14px;
}

fieldset td {
    width : 50%;
}

span.requiredStar {
    color        : red;
    margin-left  : 5px;
    margin-right : 3px;
}

h4 {
    margin        : 0;
    margin-bottom : 10px;
}

.search-icon {
    width      : 16px;
    height     : 16px;
    display    : inline-block;
    background : url('img/search-icon.png') no-repeat;
    margin     : 0;
}

.plus-icon {
    width           : 16px;
    height          : 16px;
    display         : inline-block;
    background      : url('img/icons/plus32.png') no-repeat;
    background-size : 16px 16px;
    margin          : 0;
}

.icon-button {
    cursor : pointer;
}

.loading-container {
    position   : fixed;
    top        : 75px;
    left       : 0;
    right      : 0;
    text-align : center;
}

.loading-message {
    display       : inline-flex;
    background    : white;
    box-shadow    : 0 2px 2px 2px rgba(15, 15, 15, .2);
    border-radius : 100px;
    border        : none;
    align-items   : center;
    padding       : 5px;
    font-size     : 12px;
    font-weight   : 400;
    color         : #444444;
}

.loading-container-icon {
    background : url('../images/ui-anim_basic_16x16.gif') center center no-repeat;
    height     : 32px;
    width      : 32px;
    float      : left;
}

.loading-text {
    margin-left  : 5px;
    margin-right : 5px;
}

.loading-text-dark {
    color   : #202020;
    padding : 2px 20px;
    height  : 100%;
}

.ui-dialog input, .ui-dialog select, .ui-dialog textarea {
    font-size : 11px;
}

.ui-autocomplete-loading, .itemNumberLoading {
    background : white url('../images/ui-anim_basic_16x16.gif') right center no-repeat;
}

.ui-autocomplete {
    max-height : 400px;
    overflow-y : auto;
    overflow-x : hidden;
}

.portlet {
    margin : 0 1em 1em 0;
}

.portlet-header {
    padding : 4px 8px 5px 8px;
    cursor  : move;
}

.portlet-header .shadebutton {
    float      : right;
    margin-top : 5px;
    cursor     : auto;
}

.portlet-header a {
    text-decoration : none;
    margin-top      : 3px;
    display         : inline-block;
}

.portlet-content {
    padding  : 0.4em;
    height   : 300px;
    overflow : hidden;
}

.ui-sortable-placeholder {
    border     : 1px dotted black;
    visibility : visible !important;
    height     : 50px !important;
}

.ui-sortable-placeholder * {
    visibility : hidden;
}

.inline-icon-example {
    display       : inline-block;
    border        : 1px solid #777777;
    border-radius : 2px;
    margin-bottom : -4px;
}

.jump-to-selection {
    float  : right;
    margin : 5px 0;
}

.required-star:after {
    content         : ' *';
    color           : red;
    text-decoration : none;
    font-weight     : 300;
}

input.input-small {
    width : 50px;
}

input[type=number] {
    width : 50px;
}

.ellipsis {
    text-overflow : ellipsis;
    display       : block;
    white-space   : nowrap;
    overflow      : hidden;
}

button.notification-icon {
    content             : '';
    background-color    : transparent;
    border              : none;
    background-size     : 20px;
    width               : 20px;
    background-repeat   : no-repeat;
    background-position : center center;
    background-image    : url('./img/icons/commentwhitedisabled32.png');
    padding             : 15px 20px;
    border-radius       : 0;
    height              : 100%;
}

button.notification-icon:hover {
    border              : none;
    background-size     : 20px;
    width               : 20px;
    background-color    : transparent;
    background-repeat   : no-repeat;
    background-position : center center;
    background-image    : url('./img/icons/commentwhite32.png');
    border-radius       : 0;
    height              : 100%;
}

button.notification-icon:active {
    position         : static;
    background-color : rgba(255, 255, 255, .1);
}

button.notifications-open {
    position         : static;
    background-color : rgba(255, 255, 255, .1);
    background-image : url('./img/icons/commentwhite32.png');

}

#notification-menu {
    float        : right;
    border       : 0;
    border-left  : 1px solid rgba(255, 255, 255, .5);
    border-right : 1px solid rgba(255, 255, 255, .5);
    box-sizing   : border-box;
    height       : 34px;
    background   : rgba(80, 80, 80, .1);
}

.notifications-container {
    float       : right;
    top         : 34px;
    color       : black;
    position    : absolute;
    background  : white;
    max-width   : 500px;
    min-width   : 500px;
    margin-left : -459px;
    box-sizing  : border-box;
    border      : 1px solid #aaaaaa;
    border-top  : 0;
}

.notification-card {
    border-bottom : 1px solid #aaaaaa;
    margin        : 0;
    padding       : 10px 15px 10px 25px;
    height        : 25px;
    display       : -ms-flexbox;
    display       : -webkit-flex;
    display       : flex;
}

.notification-card:last-child {
    border : 0;
}

.notification-card.read {
    background-color : #f2f2f2;
    color            : #aaaaaa;
}

.notification-card:hover {
    background-color : #fbfbfb;
}

.notification-card.read:hover {
    background-color : #f9f9f9;
}

.notification-message {
    display           : inline-block;
    font-size         : 12px;
    width             : 90%;
    margin            : auto auto auto 0;
    align-items       : center;
    -webkit-box-align : center;
    -ms-flex          : 1 1 0; /* for making the text wrappable in IE 10 */
}

.notification-message.no-notifications {
    font-size   : 20px;
    font-weight : 600;
    text-align  : center;
    width       : 100%;
    text-shadow : 1px 1px 1px white;
}

.read-light {
    width             : 10px;
    height            : 10px;
    border-radius     : 50%;
    margin            : auto 0 auto auto;
    align-items       : center;
    -webkit-box-align : center;
    -ms-flex          : 1 1 0; /* for making the text wrappable in IE 10 */
}

.read-light.unread {
    background-color : #2f4264;
}

.read-light.read {
    background-color : #aaaaaa;
}

.notifications-unread {
    background-color : #ff4c4d;
    color            : white;
    border-radius    : 2px;
    padding          : 2px 5px;
    font-size        : 8px;
    font-weight      : 600;
    position         : absolute;
    margin-top       : -14px;
}

.notification-message.no-notifications {
    font-size   : 20px;
    font-weight : 600;
    text-align  : center;
    width       : 100%;
    text-shadow : 1px 1px 1px white;
}

#notification-display {
    margin   : 0 auto;
    border   : 1px solid #aaaaaa;
    position : relative;
}

.notifications-wrapper {
    display  : block;
    overflow : auto;
}

#notification-display .notifications-wrapper {
    max-height : 800px;
}

.notifications-container .notifications-wrapper {
    max-height : 300px;
}

#notification-display .notifications-header {
    background    : #cccccc;
    padding       : 10px;
    border-bottom : 1px solid #aaaaaa;
    display       : block;
    width         : 100%;
    box-sizing    : border-box;
    text-align    : right;
}

.disable-overlay {
    background : transparent;
    display    : block;
    position   : fixed;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    z-index    : 10000;
}

.notifications-paginate-loading {
    background : #f1f1f1;
    text-align : center;
    padding    : 10px;
}

.notifications-loading-overlay {
    background : rgba(255, 255, 255, .6);
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    display    : -ms-flexbox;
    display    : -webkit-flex;
    display    : flex;
    color      : #202020;
}

.notifications-loading-overlay .display-text {
    display           : block;
    margin            : auto auto;
    align-items       : center;
    -webkit-box-align : center;
    -ms-flex          : 1 1 0; /* for making the text wrappable in IE 10 */
}

.notifications-header .notifications-unread {
    font-size   : 14px;
    font-weight : 600;
    position    : fixed;
    margin      : 0;
}

/* style for firefox */
strong {
    font-weight : 600;
}

div.example.important-notification {
    margin            : 25px auto 25px auto;
    min-height        : 50px;
    display           : -ms-flexbox;
    display           : -webkit-flex;
    display           : flex;
    align-items       : center;
    -webkit-box-align : center;
    -ms-flex          : 1 1 0; /* for making the text wrappable in IE 10 */
}

.mayOverflow {
    text-overflow : ellipsis;
    white-space   : nowrap;
    overflow      : hidden;
}

span.text-highlight {
    font-family      : consolas, monospace;
    font-size        : 12px;
    background-color : #dfdfdf;
    padding          : 1px 4px;
}

.tool-banner {
    border      : 1px solid #5974c4;
    background  : #cddaff;
    font-size   : 14px;
    padding     : 5px 10px;
    margin      : 2px 4px 0 4px;
    font-weight : 400;
    text-align  : center;
}

.centered {
    margin : 0 auto;
}

button.logout-button,
button.logout-button:hover,
button.logout-button:active {
    background  : none;
    border      : none;
    color       : white;
    font-size   : 16px;
    font-weight : 300;
    margin      : 0;
    padding     : 0;
}

.loadingIcon {
    background     : url('img/ui-anim_basic_16x16.gif') no-repeat center center;
    pointer-events : none;
    cursor         : pointer;
}

/* CTA button for resetting password */
.resetPasswordButton {
    font-weight   : 400;
    border        : none;
    background    : #2f4264;
    color         : white;
    font-size     : 16px;
    padding       : 10px 20px;
    border-bottom : 3px solid #27385b;
    float         : right;
}

/* needs to be more specific than our default buttons */
.resetPasswordButton:not(:disabled):hover {
    font-weight   : 400;
    border        : none;
    background    : #2f4264;
    color         : white;
    font-size     : 16px;
    padding       : 10px 20px;
    border-bottom : 3px solid #27385b;
    float         : right;
}

.cross-arms-emoji {
    display         : inline-block;
    width           : 1.5em;
    height          : 1.5em;
    background      : url('img/crossarmsemoji.png') no-repeat center center;
    background-size : 1.5em 1.5em;
    vertical-align  : bottom;
}

.menuBarItems {
    float : left;
}

.tool-layout .headerWithButton {
    display        : inline-block;
    margin-right   : 20px;
    line-height    : 20px;
    vertical-align : middle;
}