/* --------------------------------------------------
 * Basic shared default styles for tags that every web page/view uses
 *-------------------------------------------------- */



html, body {
  font-family:  Arial, sans-serif, helvetica;
  font-size: 13px;
  margin:0;
  padding:0;
  height:100%;
  width: 100%;
  /*background-color: white;*/
  background-color: #f5f5f5;
}


@media print {
  body {-webkit-print-color-adjust: exact;}
}

#wrapper {
  min-height:100%;
  position:relative;
}

#body-content {
  /*padding:10px;*/
  padding-bottom:24px;   /* Height of the footer element */
}

#footer {
  width:100%;
  /*height:24px;*/
  position:absolute;
  bottom:0;
  left:0;
  background-color: black;
  font-family: "Open Sans", sans-serif;
}

.footer-blue-text {
  color: #dfedf7;
}

/* represents content of a page not including the default menu and footer */
#content {
  padding-top: 15px;
  padding-bottom: 125px;
  min-height: 580px;
  height: 100%;
  background-color: white;
}


#content > div {

}

#content-clear {
  padding-top: 15px;
  padding-bottom: 125px;
  min-height: 580px;
  background-color: transparent;

}

#content-clear > div {
  background-color: transparent;
}

a:focus {
  outline: none;
}

/*
 * using this instead of container so i dont have to override all of bootstraps stuff
 * its also why this is named main-container vs just container
 */
.main-container {
  /* auto margins to center the div */
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.main-container-wide {
  /* auto margins to center the div */
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}





/* main menu item navigations */
.main-menu-item {
  margin-left: 30px;
  margin-right: 30px;
  font-weight: bold;
}

/* secondary menu item navigation */
.sub-menu-item {
  margin: 5px;
  font-weight: bold;
  font-size: 12px;
  color: white;
}


/* top menu dropdowns */
.dropdown {
  margin-right: 10px;
}


/*-------------------------------------------------------------------------------------
 * Common reusable classes
 *
 * these are general purpose classes that are used widely throughout the app
 *------------------------------------------------------------------------------------*/

/**
 * the basic building block for re-usable divs that act how you would expect them too
 * when it comes to wrapping and floating from left to right
 */
.block {
  display: inline-block;
  vertical-align: top;
  /* this is for ie7 - it wont align properly without this - other browsers SHOULD ignore this... */
  zoom: 1;
  *display: inline;
}



/**
 * by default the divs have spaces between them (cuz of line breaks/spaces etc in your code, so this
 * is used to get rid of it by using a negative margin
 * (hacky, but best solution out there - not supported in ie6, ie7)
 */
.block-nospace {
  display: inline-block;
  /*display: table-cell;*/
  vertical-align: top;
  /* this is for ie7 - it wont align properly without this - other browsers SHOULD ignore this... */
  zoom: 1;
  *display: inline;
  /*todo - change to use a float or td*/
  /*using a float here vs inline blocks cuz of that extra width that is added in chrome/firefox but not in ie...*/
  /*float: left;*/
  margin-right: -4px;
}

/**
 * for lists, this is the default padding for a column entry
 */
.default-column {
  padding-left: 5px;
  padding-right: 2px;
  padding-top: 3px;
  padding-bottom: 3px;

  word-wrap: break-word;
}

/*used within divs in table cells so the cells can have set widths, but will wrap correctly */
.block-inner-td {
  min-height: 20px;

  /*all this stuff is for different firefox browsers to make the words break*/
  overflow-wrap: break-word;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */

  overflow-y: hidden;
}


/*use this class so the approved po tables have normal borders, but if we want single borders
  somewhere else we use this...*/
.single-border-table
table, th, td {
  /*border: 1px solid darkgray;*/
  /*border: 1px solid black;*/
  border:none;
  padding: 0;
}




/* thin border around divs to make it look like its in a container */
.thin-border {
  border: 1px solid darkgray;
  border-radius: 1px;
}

.thin-border-white {
  border: 1px solid white;
  border-radius: 1px;
}

/* thin border around divs to make it look like its in a container */
.thin-border-no-radius {
  border: 1px solid darkgray;
}

/* make the text in a div not selectable */
.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

/* alternative to using the strong elements */
.strong {
  font-weight: bold;
}

/* this makes a div or element look like the user can click in it */
.clickable {
  cursor: pointer;
}


/* default size for a box spanning the entire length of the page with decent padding */
.page-width-box {
  width: 910px;
  padding: 10px;
  /*padding-left: 10px;*/
  /*padding-top: 10px;*/
  /*padding-bottom: 10px;*/
  margin-bottom: 15px;
}




/* this will give this item a little bit of space below as breathing room */
.space-below {
  margin-bottom: 5px;
}



/* this will make an element hidden from the screen */
.hidden {
  display: none;
}


/* this will make an element hidden from the screen */
.show {
  display: block;
}

/* the print-show in the print.css will override this to be visible */
.print-show {
  display : none;
}

.print {
  display: none;
}

/*default smaller font size in the app*/
.small-font {
  font-size:  11px;
}

.medium-font {
  font-size: 11.5px;
}


.report-title {
  font-size: 17px;
  font-weight: bold;
  padding-left: 4px;
}

.report-header {
  background-color: #D2D2D2!important;
}

.report-data-header {
  background-color: #E7E7E7!important;
  padding-left: 5px;
  padding-right: 5px;
}

.report-data-header-right {
  background-color: #E7E7E7!important;
  text-align: right!important;
  padding-right: 4px;
}

.report-highlight-right {
  background-color: #aaaaaa!important;
  text-align: right!important;
  padding-right: 5px;
  font-weight: bold;
}

.report-data {
}


.report-data-right {
  text-align: right!important;
  padding-right: 5px;
}

.report-total-right {
  text-align: right!important;
  padding-right: 5px;
  font-weight: bold;
}

.report-download {
  margin-left: 5px;
  font-size: 14px;
}

.negative-amount {
  color: red;
}



/* --------------------------------------------------
* Common look and feel of the app
*
* these are classes that really define how this specific app will look and feel
* Overriding Bootstrap styles
*
*-------------------------------------------------- */

/* make the button edges sharper */
.btn {
  padding: 4px 12px;
  font-size: 16px;

  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}


.btn-medium {
  padding: 5.5px 14px;
  font-size: 17.5px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.btn-huge {
  padding: 9px 18px;
  font-size: 21px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.btn-mini {
  padding: .5px 4px;
  font-size: 14px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}


/*.btn-tiny {*/
  /*font-size: 11px;*/
  /*padding: 0px 4px;*/
  /*-webkit-border-radius: 2px;*/
  /*-moz-border-radius: 2px;*/
  /*border-radius: 2px;*/
/*}*/

/* new bootstrap button using a different color scheme */
/*used this:*/
/*http://charliepark.org/bootstrap_buttons/*/
.btn-gray {
  background-color: hsl(0, 0%, 18%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#474747", endColorstr="#2d2d2d");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#474747), to(#2d2d2d));
  background-image: -moz-linear-gradient(top, #474747, #2d2d2d);
  background-image: -ms-linear-gradient(top, #474747, #2d2d2d);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #474747), color-stop(100%, #2d2d2d));
  background-image: -webkit-linear-gradient(top, #474747, #2d2d2d);
  background-image: -o-linear-gradient(top, #474747, #2d2d2d);
  background-image: linear-gradient(#474747, #2d2d2d);
  border-color: #2d2d2d #2d2d2d hsl(0, 0%, 15.5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
  -webkit-font-smoothing: antialiased;
}


.btn-gray:hover,
.btn-gray:focus,
.btn-gray:active,
.btn-gray.active,
.btn-gray.disabled,
.btn-gray[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
}

.btn-gray:active,
.btn-gray.active {
  background-color: #080808 \9;
}


.btn-gray {


}


/* this overwrites button groups of when there are lots of buttons in a row,
the first and last buttons - make the corners same as all the other buttons in
the app */
.btn-group > .btn:first-child {
  -webkit-border-bottom-left-radius: 2px;
  border-bottom-left-radius: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-bottomleft: 2px;
  -moz-border-radius-topleft: 2px;
  font-size: 16px;
}

.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  border-bottom-right-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  font-size: 16px;
}

.btn-group > .btn.large:first-child {
  -webkit-border-bottom-left-radius: 2px;
  border-bottom-left-radius: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-bottomleft: 2px;
  -moz-border-radius-topleft: 2px;
}

.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  border-bottom-right-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
}


/* vendor results search modal */
.modal {
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  width: 930px;
  border-radius: 3px;
  /*left: 13%;*/

  left: 50%;
  right: 50%;
  margin-left: -475px;

  display: block;
}


/* change inputs to use sharper corners */
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"],
.uneditable-input {
  border-radius: 1px;
  /* NOTE:THESE NEED TO BE THE SAME (LINE-HEIGHT/LINE) BECAUSE IE10 DONT LIKE IT ANY OTHER WAY -*/
  /* THIS TOOK ME A WHOLE DAY TO FIX AND IT WASNT EVEN ME WHO FIXED IT..*/
  height: 17px;
  line-height: 17px;
  padding: 3px 5px;
  margin-bottom: 0;
  font-size: 13px;

  /* special case for mobile browsers putting on a top shadow for input boxes */
  -webkit-appearance: none;
  -moz-appearance: none; /* mobile firefox too! */
}


/* make the text in the textareas even with the input text boxes */
textarea {
  padding-top: 2px;
  padding-bottom: 1px;
}


/* trying to make the select box look as close to the input boxes as possible*/
/* NOTE: select boxes will need to be 12px wider than the same input text box */
select {
  border-radius: 1px;
  padding: 3px 5px;
  margin-bottom: 0;
  font-size: 13px;
  height: 25px;
}

/* override checkbox */
input[type="checkbox"] {
  margin-top: -1px;
  /*margin-left: 4px;*/
  margin-right: 3px;
  width: 16px;
  height: 16px;
}

/* give the radio buttons a little breathing room by default */
/* also align w the text to its right */
input[type="radio"] {
  /*margin-left: 4px;*/
  width: 16px;
  height: 16px;
  margin-top: -1px;
}

/* the popover thingys */
/* overriding from bootstrap */
.popover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 12px;
}

.popover-content {
  padding: 9px 14px;
  padding: 3px 7px;
}



input, button, select, textarea {
  font-family: Arial, sans-serif, helvetica;
}


/* --------------------------------------------------
* Common look and feel of the app
*
* (not related to bootstrap
*
*-------------------------------------------------- */

/* this is the X on the top right of boxes */
.close {
  /*background-color: transparent;*/
  opacity: 0.4;
}

/* normal opacity is 0.4 - but since we are making the default 0.4 make it darker */
.close:hover,
.close:focus {
  opacity: 0.6;
}


/* this is the X on the top right of boxes in the edit application field */
.close-light {
  opacity: 0.2;
}







/* show a red outline for inputs that are not valid */
input.ng-invalid.ng-dirty {
  border: 1px solid red;
}

textarea.ng-invalid.ng-dirty {
  border: 1px solid red;
}

/* indicate that the section is invalid */
.invalid-section {
  border: 1px solid red;
}

.valid-section {
  border: 1px solid white;
}


/* indicate that the section is invalid */
.invalid-section-box {
  border: 1px solid red;
  padding: 3px;
  padding-right: 0;
  margin-left: -3px;
  margin-right: 2px;
}

.valid-section-box {
  border: 1px solid white;
  padding: 3px;
  padding-right: 0;
  margin-left: -3px;
  margin-right: 2px;
}

/* this is used to override the invalid input border above */
/* we have to use important since this class is listed first in the list of classes */
.valid-input-border {
  border: 1px solid rgb(204, 204, 204) !important;
}

input.error {
  border: 1px solid red;
}

/* the label under a field that is invalid */
.validation-label {
  font-size: 11.5px;
  margin-top: -3px;
  height: 10px;
  padding-left: 2px;
  color: red;
}

/*new validation label - eventually replace existing validation labels,*/
/*but need to include the validation label holder to do this*/
.validation-label-new {
  font-size: 11.5px;
  /*margin-top: -2px;*/
  height: 10px;
  padding-left: 2px;
  color: red;
}

/*div to hold the validation label so it doesnt drop when it appears*/
.validation-label-holder {
  margin-top: -3px;
  height: 15px;
}


/* progress bar at the bottom of pages that will save */
#progress-bar {
  background-color: darkgray;
  border-radius: 11px; /* (height of inner div) / 2 + padding */
  width: 500px;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
}

/* inner actual moving part of hte progress bar */
#progress-bar > div {
  background-color: orange;
  width: 40%; /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}



/**
 *  File upload styling.
 */
.file-upload {
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.file-upload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}


/* made the input that shows the file look like the rest of the input boxes in the page */
.file-upload-input {
  border-radius: 1px;
  height: 17px;
  /* couldnt make this too long. on the PO it looks ok in chrome but in other browsers, it goes longer
  forcing the elements to wrap - making this smaller to be conservative */
  width: 230px;
  padding: 3px 5px;
  margin-bottom: 0;
  font-size: 13px;
  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;

}


/* specific class for a single instance -
   since we take hide/display elements instead of disabling, this changes the way things are positioned
   use this class to help compensate conditionally */
.lowered-element {
  margin-top: 9px;
}

.lowered-element-large {
  margin-top: 14px;
}


/* making a button look like an href because of access keys not working with ng-click when the
href is blank for ie9 */
/* todo remove yellow border when active/selected */
.href-styled-button {
  background: none;
  font-size: 13px;
  text-decoration: underline;
  border: 0;
  color: #0088cc;
  margin-top: -4px;
  padding: 0;
  outline: none;
}



/* mimics an input box, but is really a div.. */
.fake-input-readonly {
  border-radius: 1px;
  padding-top: 2px;
  padding-bottom: 1px;
  line-height: 17px;
  /*padding: 3px 5px;*/
  min-height: 17px;

  padding-bottom: 1px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;

  margin-bottom: 0;
  font-size: 13px;
  -webkit-appearance: none;
  -moz-appearance: none;

  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;*/

  /*readonly*/
  color: rgb(85, 85, 85);
  background-color: rgb(238, 238, 238);

  overflow-y: hidden;
  word-wrap: break-word;
  min-height: 20px;
}

/*special case for linux chrome - there wasnt enough space and the date was wrapping*/
/*so i added an extra pixel to the right*/
.fake-date-sm {
  width: 66px;
  padding-right: 4px;
}

.fake-date {
  width: 75px;
}


/** --------------------------------------------------------
 * Angular-ui bootstrap overrides
 *
 * ---------------------------------------------------------
 */


/* by default bootstrap adds a margin to the bottom of forms - take this out.. */
form {
  margin-bottom: 0;
}

/*  Vendor recommended css change
    this is for the angularjs ui - recommended on the angularjs ui page
    because of differences between normal bootstrap and angularjs ui bootstrap */
.nav, .carousel a {
  cursor: pointer;
}
.pagination a {
  cursor: pointer;
}


/* override some calendar display stuff */
.datepicker-padding {
  padding: 5px;
}


/* used to not flash uncompiled angular elements before angular finishes loading */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}


/* use this in combination with the dh-no-element-flash directive to stop ie from flashing before page loads */
.dh-no-element-flash {
  display: none;
}

/* set a max size for the results box, but let the users scroll longer
  this is only for the vendor typeahead - not the project one*/
#vendor-name-container .typeahead {
  max-height: 350px;
  overflow-y: scroll;
  width: 785px;
  /* this is needed in case users shrink their screens/browsers and try to use the typeahead */
  /*width: 925px;*/
  /* move it to the left and use the full screen cuz users wanted more info to show */
  /*margin-left: -138px;*/
}

#vendor-name-container .typeahead .active {
  background-color: #0081c2;
}

.light-gray-background {
  background-color: #F0F0F0;
}

/* set this so the typeahead results look like the rest of the app */
.typeahead li a {
  text-decoration: none;
  color: #333333;
  cursor: default;
}

/* thanks to endo this css tag will now highlight rows correctly if the user uses the down/up arrow keys */
.typeahead li.active a{
  color: white;
  /*color: greenyellow;*/
  text-decoration: none;
  background-color: #0081c2;
  cursor: default;
}

.typeahead li.active a div{
  color: white;
  /*color: greenyellow;*/
  text-decoration: none;
  background-color: #0081c2;
  cursor: default;
}

/* special way to display characters that the user entered when searching in a typeahead
  angular has a function to surround the typed in chars with strong tags.
  overriding this to display the users query in a more vibrant way */
.typeahead-item strong {
  background-color: #FFEDA6;
  font-weight: normal; /*removing the bold so tight lines dont wrrap*/
}

/* same as above, except overriding when the row is selected to undo the above styling */
.typeahead li.active a strong{
  background-color: #0081c2;
}






/** --------------------------------------------------------
 * third party libraries overrides
 *
 * ---------------------------------------------------------
 */

#toast-container > div {
  padding: 30px 30px 30px 80px;
  font-size: 15px;
}

.toast-bottom-right {
  bottom: 32px;
}

.toast-close-button {
  font-size: 30px;
  top: 0em;
}




/* this is the list of times in the timepicker directive */
.dn-timepicker-popup {
  height: 250px;
  overflow-y: scroll;
  width: 110px;
  min-width: 110px;
}


/** Getting the datetimepicker to look nice */
.rcuh-form .quickdate-button {
  text-decoration: none;
  cursor: text;
}

.rcuh-form .quickdate-text-inputs label {
  cursor: text;
}

.rcuh-form .quickdate .quickdate-input-wrapper label {
  cursor: text;
}

.quickdate {
  height: 25px;
  cursor: text;
}


.quickdate .quickdate-button {
  width: 75px;
}

.quickdate .quickdatetime-button {
  /*width: 130px;*/
  width: 134px;
  padding-right: 0;
}

/*special case for item lists - make sure to put the
  quickdate-small class in the div directly above the quickdate */
.quickdate-small .quickdate .quickdate-button {
  width: 65px;
}

.quickdate .time-length {
  width: 125px !important;
}

.quickdate-button {
  border-radius: 1px;
  height: 17px;
  line-height: 17px;
  padding: 3px 5px;
  margin-bottom: 0;
  font-size: 13px;
  -webkit-appearance: none;
  width: 130px;
  /*margin-bottom: -5px;*/
}


/** --------------------------------------------------------
 * Browser specific css changes
 *
 * ---------------------------------------------------------
 */


/* ie10 adds this clear box thing to certain fields that makes right aligned padding cut off the end of fields.
   adding this in, stops it from cutting off the text*/
input::-ms-clear {
  display: none;
}





/** --------------------------------------------------------
 * Typical elemnts in an rcuh form
 *
 * ---------------------------------------------------------
 */
/* default space between field lines */
.rcuh-form .form-spacer {
  height: 12px;
}

.spacer {
  height: 10px;
}

.spacer-sm {
  height: 5px;
}

/* title at the top of a form */
.rcuh-form .form-title {
  font-size: 18px;
  line-height: 1.7;
}

.form-title {
  font-size: 18px;
  line-height: 1.7;
}

/* align the label horizontally with the input box */
/* note: anywhere there is text next to a label you have to drop the text 4px
   if its not using this class */
/*.rcuh-form .form-label {*/
.form-label {
  padding-top: 4px;
}


/*dont use any width provided by the .rcuh-form class that form-label would use */
.form-label-no-width {
  padding-top: 4px;
  margin-right: 15px;
}


/* default space after an input box */
/* default width for a field input box */
.form-input {
  width: 150px;
  margin-right: 15px;
}


/* same as above, except the last one so no space after */
.form-input-end {
  width: 150px;
  margin-right: 0;
}



/* the last input, so


/* default space after the last input input box */
.rcuh-form .last-input {
  margin-right: 0;
}


/* a text area that mimics looking like an input and is expandible */
/* need to set width: on the text area */
.rcuh-form .expandable-input {
  overflow-y: hidden;
  word-wrap: break-word;
  min-height: 20px;
  resize: none;
}



/* this is actually the numbered values on the vendor registration */
.rcuh-form .section-header {
  font-weight: bold;
  margin-bottom: 5px;
}


/* this is the gray box at the top of some sections */
.rcuh-form .box-header {
  background: #808080;
  color: white;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* this is the gray box at the top of some sections */
.rcuh-form .sortable-header {
  cursor: pointer;

}

/* this is the gray box at the top of some sections */
.rcuh-form .sortable-header:hover {
  background-color: #585858;
}


.rcuh-form .selected-sortable-header {
  background-color: #686868;
}


/* this is the gray box at the top of item lists */
.rcuh-form .itemlist-header {
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 8px;
  line-height: 14px;
  min-height: 18px;
}

/* special case box header that fills an entire width form */
.rcuh-form .page-width-box-header {
  background: #808080;
  color: white;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: -10px;
  margin-top: -10px;
  width: 930px;
}



/* margin below a checkbox (between the checkbox options) */
.rcuh-form .checkbox-margin {
  margin-bottom: 4px;
}


/* default form links will be underlined
   everything except the top help links
   */
.rcuh-form a {
  text-decoration: underline;
}


.rcuh-form .selected-row {
  background-color: #FFEDA6;
}



/** --------------------------------------------------------
 * css specific to an item list
 *
 * taking care of spacing out the cells, and also being able to highlight rows
 * when validation errors occur.
 *
 * ---------------------------------------------------------
 */

.dh-list-header-section {
  border: 1px solid darkgray;
  width: 929px;
  padding-left: 1px;
  background-color: #808080;
  color: white;
}

.dh-list-header-row {
  /*border: 1px solid #808080;*/
  /*adding extra pixel to the paddings since theres no border here like there is in the items below*/
  padding-left: 2px;
  padding-right: 3px;
  margin: 0;
  background-color: #808080;
}

.dh-list-label {
  border: 1px solid #808080;
  margin-left: 0px;
  margin-right: -4px;
  text-align: center;
  padding: 0;
  padding-top: 8px;
  padding-bottom: 3px;
  line-height: 14px;
  height: 30px;
}

.dh-list-row-section {
  border: 1px solid darkgray;
  width: 929px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
}

.dh-list-row {
  border: 1px solid white;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 1px;
  padding-right: 2px;
  margin: 0;
}

.dh-list-cell {
  padding: 0;
  border: 1px solid white;
  /*width: 150px; */
  margin-left: 0px;
  margin-right: 1px;
}


.dh-cell-input {
  width: 100%;
  height: 25px !important;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}








/** --------------------------------------------------------
 * special formatting for when the page is in "print mode"
 *
 * the idea was to have the different forms just have a class added that will significantly alter all the existing
 * form fields on the page to automatically go into "print view". By defining it all once here, the different forms
 * can share the same look and feel for their inputs/controls when in this "print mode".
 *
 * most controls are basically hiding the borders and make the backgrounds for readonly transparent
 * while adding some sort of underline to make it look like a printed form
 *
 * box shadows of none dont seem to override bootstrap, so i had to explicitly just set it to white  (rgba(0, 0, 0, 0))
 *
 * ---------------------------------------------------------
 */

/*.print-mode input[type="text"] {*/
  /*border: 1px solid white;*/
  /*background: transparent;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*border-bottom: 1px solid rgb(51, 51, 51);*/
/*}*/


/*.print-mode textarea {*/
  /*border: 1px solid white;*/
  /*background: transparent;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*border-bottom: 1px solid rgb(51, 51, 51);*/
/*}*/

/* make the select look like a normal textfield */
/*.print-mode select {*/
  /*border: 1px solid white;*/
  /*background: transparent;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /* special case for mobile browsers putting on a top shadow for input boxes */
  /*-webkit-appearance: none;*/
  /*-moz-appearance: none; *//* mobile firefox too! */
  /*border-bottom: 1px solid rgb(51, 51, 51);*/
  /*-webkit-appearance: textfield;*/
  /*padding-top: 0;*/
  /*margin-top: -5px;*/
  /*height: 30px;*/
/*}*/

/* making the labels bold to stand out from the values.*/
  /*However since bolding makes the letters larger, shrinking the*/
  /*font to 12.4 from 13 so the text doesnt wrap differently */
/*.print-mode .form-label {*/
  /*font-weight: bold;*/
  /*font-size: 12.4px;*/
/*}*/

/*.print-mode .valid-input-border {*/
  /*border: 1px solid white !important;*/
  /*background: transparent;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*border-bottom: 1px solid rgb(51, 51, 51) !important;*/
/*}*/


/* the label under a field that is invalid */
/*.print-mode .validation-label {*/
  /*display: none;*/
/*}*/

/*.print-mode input.ng-invalid.ng-dirty {*/
  /*border: 1px solid white;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*border-bottom: 1px solid rgb(51, 51, 51);*/
/*}*/

/*.print-mode textarea.ng-invalid.ng-dirty {*/
  /*border: 1px solid white;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*border-bottom: 1px solid rgb(51, 51, 51);*/
/*}*/

/* special case for the line items in the add po form */
/*.print-mode #po-form-lines input.ng-invalid {*/
  /*border: 1px solid white;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*border-bottom: 1px solid rgb(51, 51, 51);*/
/*}*/



/* mimics an input box, but is really a div.. */
/*.print-mode .fake-input-readonly {*/
  /*border: 1px solid white;*/
  /*background: transparent;*/
  /*-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*-moz-box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px inset;*/
  /*border-bottom: 1px solid rgb(51, 51, 51);*/

  /*overflow-y: hidden;*/
  /*word-wrap: break-word;*/
  /*min-height: 20px;*/
/*}*/




/* this is the gray box at the top of some sections */
/*.print-mode .box-header {*/
  /*background: #808080;*/
  /*background: transparent;*/
  /*color: #333;*/
  /*font-weight: bold;*/
  /*padding-top: 5px;*/
  /*padding-bottom: 5px;*/
/*}*/

/* special case box header that fills an entire width form */
/*.print-mode .page-width-box-header {*/
  /*background: #808080;*/
  /*background: transparent;*/
  /*color: #333;*/
  /*font-weight: bold;*/
  /*padding-top: 5px;*/
  /*padding-bottom: 5px;*/
  /*margin-left: -10px;*/
  /*margin-top: -10px;*/
  /*width: 930px;*/
/*}*/

/** --------------------------------------------------------
 * elements specific to the form instructions
 *
 * ---------------------------------------------------------
 */
#instruction .numbered-value {
  margin-bottom: 10px;
}



/** --------------------------------------------------------
 * elements specific to the main home page
 *
 * ---------------------------------------------------------
 */


.rcuh-form .home-link {
  padding-left: 3px;
  padding-right: 3px;
  text-decoration: none;
}


/* main menu options on the home screen */
.home-menu-box {
  border: 1px solid #808080;
  border-radius: 3px;
  padding-bottom: 10px;
}


/* links to different pages on the home screen */
.menu-link a {
  display: block;
}
.menu-link a:hover {
  background-color: #FFEDA6;
}


/*link for the direct payment options choices*/
.rcuh-form .large-link {
  font-size: 17px;
  color: black;
  padding-top: 7px;
  padding-bottom: 7px;
  text-decoration: none;
}

/*.large-link a:hover {*/
  /*background-color: #FFEDA6;*/
/*}*/



/** --------------------------------------------------------
 * elements specific to the add_purchase_requisition.html page
 *
 * ---------------------------------------------------------
 */


/* default with for a field label */
.rcuh-form .form-label {
  width: 125px;
}



#purchasing-ddcontent, #payments-ddcontent, #travel-ddcontent,
#reporting-ddcontent, #misc-ddcontent, #help-ddcontent {
  /*opacity: 1 !important;*/
  background: rgba(93, 93, 93, 1);
}

#login-ddcontent ul {
  background: rgba(93, 93, 93, 1);
}




input[type="text"].invalid-input
 {
  border: 1px solid red;
  /*border-color: red!important;*/
}



/* this is so the searchy will look right aligned */
#project-number-block .typeahead {
  margin-left: -545px;
}

/* this is so the searchy will look right aligned */
#vendor-code-block .typeahead {
  margin-left: -605px;
}



/** --------------------------------------------------------
 * elements specific to the ffaia_data_collection.html page
 *
 * ---------------------------------------------------------
 */

#ffaia-data-form .form-input {
  width: 120px;
}


/* laels specific to this from */
#ffaia-data-form .form-label {
  margin-right: 10px;
  width: auto;
}

/* represents a single question line in section b */
#ffaia-data-form .section-b-line {
  margin-bottom: 5px;
}



/** --------------------------------------------------------
 * elements specific to the subcontract_agreement.html page
 *
 * ---------------------------------------------------------
 */

/* since this is a rolling text form, then making it easy to just put
inputs wherever and look ok */
#subcon-agree-form .form-input {
  margin-right: 0;
  margin-top: -4px;
}


/* default start of a paragaph */
#subcon-agree-form .paragraph-start {
  margin-left: 10px;
}

/* the first level of indentation of the document */
#subcon-agree-form .first-indentation {
  margin-left: 10px;
  width: 20px;
}

/* the first level of text next to first-indentation */
#subcon-agree-form .first-text-block {
  width: 860px;
}

/* the second level of indentation of the document */
#subcon-agree-form .second-indentation {
  margin-left: 30px;
  width: 20px;
}

/* the second level of text next to second-indentation */
#subcon-agree-form .second-text-block {
  width: 840px;
}



/** --------------------------------------------------------
 * elements specific to the agreement_for_services.html page
 *
 * ---------------------------------------------------------
 */

/* since this is a rolling text form, then making it easy to just put
inputs wherever and look ok */
#agree-service-form .form-input {
  margin-right: 0;
  margin-top: -4px;
}



/* the first level of indentation of the document */
#agree-service-form .first-indentation {
  width: 20px;
}

/* the first level of text next to first-indentation */
#agree-service-form .first-text-block {
  width: 860px;
}


/* the second level of indentation of the document */
#agree-service-form .second-indentation {
  margin-left: 20px;
  width: 20px;
}

/* the second level of text next to second-indentation */
#agree-service-form .second-text-block {
  width: 840px;
}





/** --------------------------------------------------------
 * printed forms and reports...
 *
 * ---------------------------------------------------------
 */



#po-final-form
table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  /*border-color: gray;*/
  border-color: black;
  page-break-inside: auto;
}

#po-final-form
table td {
  page-break-inside: auto;
}


/*todo move this and make it more specific*/
td {
  padding: 3px;
}

.line-item-table td {
  padding: 0;
  padding-left: 2px;
  padding-right: 2px;
}



.staff-listing {
  width: 900px;
  margin-left: 10px;
}


.staff-listing td {
  padding: 7px;
  font-size: 14px;
}
.staff-listing th {
  padding: 10px;
  background-color: #D9D9D9;
  /*color: white;*/
  font-size: 16px;
}



/*.modal {*/
  /*display: block;*/
/*}*/



/*override submenu css for main menu*/
#wptheme-topnav .dropdown {
  margin-left: 20px;
  margin-right: 20px;
}


.inline-label {
  padding-top: 4px;
  margin-right: 3px;
}


hr {
  border-top: 1px solid darkgray;
}





.print table {
  -moz-box-sizing: border-box; /*for printing border to show up in firefox correctly..*/
  page-break-inside: auto;
}

.print table tr {
  page-break-inside: auto;
}

.print table td {
  page-break-inside: auto;
}

.print td {
  padding: 7px;
  padding-bottom: 5px;
  line-height: 1;
  vertical-align: top;
  /*page-break-inside: avoid;*/
  border: 1px solid black;
  -moz-box-sizing: border-box; /*for printing border to show up in firefox correctly..*/
  text-align: left;
}



.print .no-padding td {
  padding: 0;
  border: none;
  /*white-space:pre-line;*/
}

.print .no-padding .full-border td {
  padding: 3px;
  border: 1px solid black;
  /*white-space:pre-line;*/
}

.print .no-border td {
  border: none;
}



/*.print td .td-form-label {*/
  /*font-weight: bold;*/
  /*padding-right: 5px;*/
/*}*/

/*.print tr .td-column-label {*/
  /*font-weight: bold;*/
  /*text-align: center;*/
  /*vertical-align: middle;*/
/*}*/

/*.print .heading-title {*/
  /*font-size: 14px;*/
  /*font-weight: bold;*/
/*}*/

.print td .td-form-label {
  font-weight: bold;
  padding-right: 5px;
  word-wrap: normal;
  word-break: normal;
  /*word-wrap: break-word;*/
}

.print tr .td-column-label {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  padding-left: 0;
  padding-right: 0;
  word-wrap: normal;
  word-break: normal;
}

.print tr .td-column {
  vertical-align: middle;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  word-wrap: normal;
  word-break: normal;
}

.print tr .td-column-right {
  vertical-align: middle;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: normal;
  word-break: normal;
}

.print tr .td-column-left {
  vertical-align: middle;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: normal;
  word-break: normal;
}

.print tr .td-column-description {
  vertical-align: middle;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: normal;
  word-break: normal;
  white-space: pre-wrap;
}

.print tr .td-column-description-top {
  vertical-align: top;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: normal;
  word-break: normal;
  white-space: pre-wrap;
}

.print .no-collapse tr td {
  border-right: none;
  border-bottom: none;
}

/*.print tr {page-break-inside: avoid;}*/

/*.print tr td {page-break-inside: avoid;}*/

/*.print tr .col-5 {*/
  /*column-span: ;*/
/*}*/

.print .heading-title {
  font-size: 14px;
  font-weight: bold;
}

/*.print select {*/
  /*background-color: white;*/
  /*border: none;*/
  /*!*height: 16px;*!*/
  /*padding: 0;*/
  /*margin: 0;*/
  /*color: #333333;*/
  /*-webkit-appearance: none;*/
  /*-moz-appearance: none;*/
  /*appearance: none;*/
  /*margin-top: -7px;*/
/*}*/

.print tr .no-word-break {
  word-wrap: normal;
  word-break: normal;
}

.print tr .keep-new-lines {
  /*white-space: pre-line;= This isn't working in IE 11 */
  white-space: pre-wrap;
}

.print tr .ghost-cells {
  height: 0;
  border: none;
}

.print .print-field {
  /*text-decoration: underline;*/
  /*min-width: 100px;*/
  border: none;
  border-bottom: 1px solid black;
  /*text-align: left;*/
}

/*.print .print-field-div {*/
  /*float: left;*/
  /*text-decoration: underline;*/
  /*min-width: 50px;*/
/*}*/
/*.print tr .word-break {*/
  /*word-wrap: break-word;*/
  /*word-break: break-all;*/
/*}*/

.print .print-textarea {
  width: 96%;
  /*border: 1px solid lightgray;*/
  border: 1px solid black;
  padding: 5px;
  white-space: pre-wrap;
  line-height: 1.1;
}

.print .heading-title {
  text-transform: uppercase;
}