/*------------------------------------------------------------------

[Main Stylesheet]
  Project     : Volvo Impact
  Version     : 3.17
  Last change : $Date$
  Last author : $Author$
                a038509 - Marcus Asplund
                a057143 - Marek Kaczkowski
                a075508 - Oscar Ljungberg

[Table of contents]
  0.  BS3 overrides
  1.  Body, HTML
  2.  Browser vendor resets
  3.  Typography
  4.  Colors
  5.  Icon css
  6.  Forms
  7.  Buttons
  8.  Navbar
  9.  Tabs
  10. Tables
  11. Data Tables
  12. Modal
  13. Submenus
  14. Twitter typeahead
  15. Collapse
  16. Search view layout
  17. Iframes
  18. Select2
  19. #icrModal
  20. Detailsareas
  21. Carousel
  22. Miscellanous
  23. Miscellanous helper classes
  24. Panel
  25. Print
  26. News
  27. IE10 and IE11 fixes
  28. MyList
  29. RTL support
  30. Help
  31. Wiring diagrams

-------------------------------------------------------------------*/


/*------------------------------------------------------------------
[0. BS3 overrides]
*/


/* this class is included default in later Bootstrap, it should be removed when updating bootstrap css */

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}

@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}


/* Impact-specific for iPad in stdpartdetailsview */

@media screen and (max-width: 767px) {
  .table-responsive > .dataTables_wrapper {
    min-width: 1200px;
  }
}

.img-thumbnail {
  max-width: none;
}

.pointer.img-thumbnail,
.toolBoards .img-thumbnail,
.stdpartImage,
.toolImage {
  max-width: 100%;
}

.pointer.img-thumbnail.stdpartImage,
.pointer.img-thumbnail.toolImage {
  margin-top: 5px;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

.navbar {
  background-image: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

.popover {
  width: 276px;
}


/* IMP-4125: Fix for extra long footnotes */

.dataTable.no-x-scroll {
  overflow-x: hidden !important;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide {
  height: 32px;
  margin: 0 auto;
  overflow: visible;
  position: relative !important;
  width: 36px;
  z-index: 301 !important;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide .popover {
  width: 318px;
  max-width: 318px;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide .popover {
  display: block !important;
  float: none !important;
  margin: 0 !important;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide .popover .popover-content {
  padding: 5px 14px;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide.pop-top .popover {
  top: 1px !important;
  bottom: auto !important;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide.pop-bottom .popover {
  top: auto !important;
  bottom: 0 !important;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide.pop-top .arrow {
  top: 16px !important;
  bottom: auto !important;
}

.dataTable tbody > tr > .infotd > .info-container.pop-wide.pop-bottom .arrow {
  top: auto !important;
  bottom: 4px !important;
}


/* IMP-4154 Parts details; Not possible to view all footnotes */

.popover-content {
  max-height: 300px;
  padding-right: 20px;
  overflow-y: auto;
}

.smallPopover > .popover {
  width: auto;
  max-width: 276px;
}

.popover-content > .info {
  float: right;
}


/* IGUI-2355: i-icon popover placement for first tr in tbody on iPad */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .dataTables_scrollBody {
    min-height: 127px;
    /* Make possible to show entire popover */
  }
  .dataTable tbody > tr > .infotd > .info-container {
    height: 32px;
    margin: 0 auto;
    overflow: visible;
    position: relative !important;
    width: 36px;
    z-index: 301 !important;
  }
  .dataTable tbody > tr > .infotd > .info-container > .popover {
    top: 0 !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
  }
  .dataTable tbody > tr > .infotd > .info-container > .popover > .popover-content {
    overflow: hidden;
  }
  .dataTable tbody > tr > .infotd > .info-container > .popover > .popover-content > .btn-icon {
    float: right;
  }
  .dataTable tbody > tr > .infotd > .info-container > .popover > .popover-content > .info-tip {
    float: left;
    margin-right: 14px;
    width: 192px;
  }
  .dataTable tbody > tr > .infotd > .info-container > .popover .arrow {
    top: 16px !important;
  }
  .dataTable tbody > tr > .infotd > .info-container > .popover.left {
    left: -275px !important;
  }
  .dataTable tbody > tr > .infotd > .info-container > .popover.right {
    left: 46px !important;
  }
  /* Long footnotes popover */
  .dataTable tbody > tr > .infotd > .info-container.pop-wide > .popover.left {
    left: -318px !important;
  }
  .dataTable tbody > tr > .infotd > .info-container.pop-wide > .popover.right {
    left: 46px !important;
  }
}

legend {
  border-bottom: 0;
}


/* use our own hide since BS uses !important so $.show doesn't work */

.hideElement {
  display: none;
}


/* prevent overflow when resizing teaxtarea  */

textarea {
  max-width: 100%;
}

.form-control {
  height: 32px;
}

.list-group-item:nth-child(odd) {
  background-color: #f9f9f9;
}

/*------------------------------------------------------------------
[1. Body, HTML]
*/

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

footer {
  display: none;
}


/* Padding to compensate for fixed navbar */

body {
  padding-top: 40px;
}


/* File import and export form controlls */

.file {
  visibility: hidden;
  position: absolute;
}


/*------------------------------------------------------------------
[2. Browser vendor resets]
*/


/* css for hiding spin-buttons on input type="number" in Opera, Firefox and Chrome
 * Do not group these attributes!
 */

input[type=number]::-o-outer-spin-button,
input[type=number]::-o-inner-spin-button {
  -o-appearance: none;
  margin: 0;
}

input[type=number]::-moz-outer-spin-button,
input[type=number]::-moz-inner-spin-button {
  -moz-appearance: none;
  margin: 0;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

input[type="search"] {
  -webkit-appearance: textfield;
}


/* remove x in IE browsers */

input::-ms-clear {
  width: 0;
  height: 0;
}


/* fix for weird IE-bug on selected text IMP-4690 */

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small {
  color: #888888;
}


/* Disable grey overlay on iOs */

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* Disable ms (IE10 +) x on inputs */

.form-control::-ms-clear {
  width: 0;
  height: 0;
}


/* fix for iOs click */

input[type="radio"],
label {
  cursor: pointer;
}


/* Style placeholders
 * Do not group these attributes!
 */

.form-control::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
  text-transform: none;
}

.form-control:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
  text-transform: none;
}

.form-control::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
  text-transform: none;
}

.form-control:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
  text-transform: none;
}

.form-control::-input-placeholder {
  /* future browsers */
  color: #999;
  text-transform: none;
}


/* Style disabled placeholders
 * Do not group these attributes!
 */

.form-control[disabled]::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #444;
  text-transform: none;
}

.form-control[disabled]:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #444;
  text-transform: none;
}

.form-control[disabled]::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #444;
  text-transform: none;
}

.form-control[disabled]:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #444;
  text-transform: none;
}

.form-control[disabled]::-input-placeholder {
  /* future browsers */
  color: #444;
  text-transform: none;
}

.placeholder {
  color: #999;
}


/* Scrollbar (only in webkit browsers) */

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


/* Track */

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


/*  Track for datatable with filter */

.filter-table::-webkit-scrollbar-track {
  margin-top: 36px;
}


/* Handle */

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.2);
}


/*------------------------------------------------------------------
[3. Typography]
*/

body,
input,
button,
select,
textarea,
.form-control,
.btn,
.dropdown-menu,
.panel-title,
.dataTables_scrollBody tbody > tr > .infotd .btn > .popover {
  font-size: 12px;
  line-height: 18px;
}


/* some form inputs should always look like uppercase, will change value onChange event */

.uppercase {
  text-transform: uppercase;
}


/* Remove all text-decorations for links */

a:hover {
  text-decoration: none;
}

.tightline {
  line-height: 12px;
}

option[disabled] {
  cursor: not-allowed;
  color: #cecece;
}

.first-bold:first-letter {
  font-weight: bold;
}

.sticky-placeholder-label {
  color: #999;
  text-transform: none !important;
}

.checkbox {
  padding-left: 0;
}
.checkbox.disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

area {
  display: block;
  cursor: pointer;
}

textarea.disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

h4.truncated {
  display: inline-block;
}
h4 .info-footnote {
  font-style: italic;
}

/* Disable text selection */
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*------------------------------------------------------------------
[4. Colors]
*/


/* blue links */

td.tablepointer,
.inlinepointer {
  cursor: pointer;
  white-space: normal;
  word-break: normal;
  color: #0088cc;
}

td.tablepointer:hover,
.inlinepointer:hover {
  color: #005580;
}


/* blue links, all of the content clickable */

.hreftd {
  cursor: pointer;
  white-space: normal;
  word-break: normal;
  color: #0088cc;
  width: 100%;
  height: 100%;
  display: block;
}

.hreftd:hover {
  color: #005580;
}


/* Change default hover text */

.navbar .nav > li > a:hover {
  color: #666;
}


/* show visited links with other color */

.visited,
.visited td,
.visited a {
  color: #CC0099;
}


/* add rounded borders to an element */

.bordered {
  border: 1px solid #DDD;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 1em;
  margin: 1em;
}


/* part details illustration */

#partdetails .imagediv {
  padding: 0;
}

#partdetails .imagediv svg,
#partdetails .imagediv image,
#partdetails .imagediv circle {
  pointer-events: none;
}

.bordered#illustration {
  overflow: hidden;
  padding: 0;
  margin: 0;
  /* show spinner for multiple images */
  /*background: url("../images/ajax-loader-big-circle_common_20171116_1312.gif") no-repeat center center;*/
  min-height: 60px;
}

.imagediv #toolbar {
  z-index: 99;
  padding: 10px;
  position: absolute;
}

#illustration.grab,
.circle.grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

#illustration.grabbing,
.circle.grabbing {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

#illustration.zoom-in {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}

#illustration.zoom-out {
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
}
.lt-ie8 #illustration.grab,
.lt-ie9 #illustration.grab,
.lt-ie10 #illustration.grab,
.is-ie11 #illustration.grab,
.is-ie11 #illustration.grab,
.is-ie10 #illustration.grab,
.is-ie10 #illustration.grab,
.lt-ie8 .circle.grab,
.lt-ie9 .circle.grab,
.lt-ie10 .circle.grab,
.is-ie11 .circle.grab,
.is-ie11 .circle.grab,
.is-ie10 .circle.grab,
.is-ie10 .circle.grab {
  cursor: url('styles/cursors/grab.cur'), auto;
}

.lt-ie8 #illustration.grabbing,
.lt-ie9 #illustration.grabbing,
.lt-ie10 #illustration.grabbing,
.is-ie11 #illustration.grabbing,
.is-ie11 #illustration.grabbing,
.is-ie10 #illustration.grabbing,
.is-ie10 #illustration.grabbing,
.lt-ie8 .circle.grabbing,
.lt-ie9 .circle.grabbing,
.lt-ie10 .circle.grabbing,
.is-ie11 .circle.grabbing,
.is-ie11 .circle.grabbing,
.is-ie10 .circle.grabbing,
.is-ie10 .circle.grabbing {
  cursor: url('styles/cursors/grabbing.cur'), auto;
}
.lt-ie8 #illustration.zoom-in,
.lt-ie9 #illustration.zoom-in,
.lt-ie10 #illustration.zoom-in,
.is-ie11 #illustration.zoom-in,
.is-ie11 #illustration.zoom-in,
.is-ie10 #illustration.zoom-in,
.is-ie10 #illustration.zoom-in {
  cursor: url('styles/cursors/zoom_in.cur'), auto;
}

.lt-ie8 #illustration.zoom-out,
.lt-ie9 #illustration.zoom-out,
.lt-ie10 #illustration.zoom-out,
.is-ie11 #illustration.zoom-out,
.is-ie11 #illustration.zoom-out,
.is-ie10 #illustration.zoom-out,
.is-ie10 #illustration.zoom-out {
  cursor: url('styles/cursors/zoom_out.cur'), auto;
}

#illustration.disabled,
.circle.disabled {
  cursor: not-allowed !important;
  pointer-events: auto;
}

/*------------------------------------------------------------------
[5. Icon css]
*/

.btn-success > a [class^="iconf-"],
.btn-success > a [class*=" iconf-"] {
  color: #fff !important;
}


/* black links on a icons */

a [class^="iconf-"],
a [class*=" iconf-"] {
  color: #444;
}


/* external links */

a.link [class^="iconf-"]:before,
a.link [class*=" iconf-"]:before {
  color: #428bca;
  font-size: 100%;
}

a.link:hover [class^="iconf-"]:before,
a.link:focus [class^="iconf-"]:before,
a.link:hover [class*="iconf-"]:before,
a.link:focus [class*="iconf-"]:before {
  color: #2a6496;
}


/* line-height adjustment */

th > [class^="iconf-"]:before,
th > [class*=" iconf-"]:before,
td > [class^="iconf-"]:before,
td > [class*=" iconf-"]:before {
  line-height: 1em;
}


/* unicode arrow icons  */

.iconf-super-arrow:before {
  content: '\21B3';
  margin-left: -1em;
}

.iconf-super-down:before {
  content: '\2193';
  margin-left: -0.4em;
}

.iconf-white-star:before {
  content: "\2606";
}


/* Larger icons in buttons */

.btn [class^="iconf-"]:before,
.btn [class*=" iconf-"]:before,
.btn[class^="iconf-"]:before,
.btn[class*=" iconf-"]:before {
  font-size: 180%;
}


/*Smaller icons in addons */

[class="iconf-calendar"]:before {
  font-size: 120% !important;
  line-height: 1;
  margin: 0;
}


/*Fix for IE11 */

.is-ie11 [class="iconf-calendar"]:before,
.is-ie11 [class="iconf-spinner"]:before,
.is-ie11 [class="iconf-spin"]:before {
  font-size: 50% !important;
  line-height: 1;
  margin: 0;
}

.exclamation-warning i,
.hide-control,
.show-control,
#infoTab i,
#subInfoTab i {
  font-size: 15px;
}

small > .iconf-star {
  font-size: 60%;
}

.iconText {
  font-weight: bold;
  display: none;
}

sup.iconSup {
  left: -0.5em;
  top: -13px;
  font-size: 100%;
}


/*------------------------------------------------------------------
[6. Forms]
*/

/**
 * Float labels pattern
 * Used on CUP forms
 * http://bootsnipp.com/snippets/featured/float-label-pattern-forms
 */
.float-label-control {
  position: relative;
}

.float-label-control::-webkit-input-placeholder {
  color: transparent;
}

.float-label-control:-moz-placeholder {
  color: transparent;
}

.float-label-control::-moz-placeholder {
  color: transparent;
}

.float-label-control:-ms-input-placeholder {
  color: transparent;
}

.float-label-control input:-webkit-autofill,
.float-label-control textarea:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -moz-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
}

.float-label-control input,
.float-label-control textarea,
.float-label-control label {
  box-shadow: none;
  -webkit-box-shadow: none;
}

.float-label-control input:focus,
.float-label-control textarea:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  border-width: 1px;
}

.float-label-control input,
.float-label-control textarea,
.cupDetails input,
.cupDetails textarea {
  display: block;
  width: 100%;
  padding: 3px;
  border: none;
  border-radius: 3px;
  border: 1px solid #aaa;
  outline: none;
  margin: 0px;
  background: none;
}

.float-label-control input:focus,
.float-label-control textarea:focus {
  -webkit-border-radius: 0;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius: 0;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;

  /* Bootstrap default focus */
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.float-label-control label {
  position                     : absolute;
  top                          : 0;

  padding                      : 3px;

  background-color             : #ffffff;
  background-clip              : padding-box;
  font-weight                  : normal;
  color                        : #aaaaaa;
  line-height                  : 18px;
  border                       : 1px solid #cccccc;
  border-radius: 3px;

  -khtml-animation             : float-labels 300ms none ease-out;
  -webkit-animation            : float-labels 300ms none ease-out;
  -moz-animation               : float-labels 300ms none ease-out;
  -ms-animation                : float-labels 300ms none ease-out;
  -o-animation                 : float-labels 300ms none ease-out;
  animation                    : float-labels 300ms none ease-out;
  -webkit-animation-play-state : running !important;
  /* There is a bug sometimes pausing the animation. This avoids that.*/
  animation-play-state         : running !important;

  overflow-x: hidden;
  overflow-y: auto;
}
.float-label-control input + label {
  padding: 6px 3px;
}

.float-label-control input.empty + label,
.float-label-control textarea.empty + label {
  animation: none;
  -webkit-animation: none;
}

.float-label-control input.empty:focus + label,
.float-label-control textarea.empty:focus + label,
.float-label-control input:not(.empty) + label,
.float-label-control textarea:not(.empty) + label,
.float-label-control input:not(.empty):focus + label,
.float-label-control textarea:not(.empty):focus + label {
  -webkit-border-radius: 3px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius: 3px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

  -khtml-animation             : float-labels 300ms none ease-out;
  -webkit-animation            : float-labels 300ms none ease-out;
  -moz-animation               : float-labels 300ms none ease-out;
  -ms-animation                : float-labels 300ms none ease-out;
  -o-animation                 : float-labels 300ms none ease-out;
  animation                    : float-labels 300ms none ease-out;
}

@keyframes float-labels {
  0%   { opacity: 0; }
  20%  { opacity: 0; z-index: -1; }
  30%  { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; z-index: 1; }
}

@-webkit-keyframes float-labels {
  0%   { opacity: 0; }
  20%  { opacity: 0; z-index: -1; }
  30%  { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; z-index: 1; }
}

/* Custom checkbox css, styling label element
 * NOTE: If used together with label text, use two labels (invalid syntax, TODO: refactor for validity:
 * <label>
 *   <input class="owner" id="inputId" name="inputName" type="checkbox">
 *     <label class="styledCheckbox" for="inputName">
 *     </label>
 *   Label Text
 * </label>
 */


/* Hide default checkbox */

input[type="checkbox"] {
  opacity: 0;
  display: block;
  z-index: 999;
  position: relative;
  margin-bottom: -20px;
  margin-left: -5px;
  width: 30px;
  height: 20px;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  left: 7px;
  top: 3px;
}

.list-inline > li > input[type="checkbox"] {
  margin-right: -20px;
}

input[type="checkbox"]:checked {
  opacity: 0;
}


/* Build custom checkbox from empty label element
 * TODO: refactor positioning
 */

input[type="checkbox"] + label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-bottom: 0;
  left: 0;
}

td > input[type="checkbox"] + label {
  top: 0;
}

.inlinemargin {
  left: -20px !important;
}

.showCol {
  display: inline-block !important;
}


/* Style for checked custom checkbox element */

input[type="checkbox"] + label:active,
input[type="checkbox"]:checked + label:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

input[type="checkbox"]:checked + label {
  background-color: #fff;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  color: #444;
}

input[type="checkbox"]:checked + label:after {
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: 0px;
  left: 3px;
  color: #333;
}

.styledCheckbox {
  margin-bottom: 0;
}

.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

select.form-control {
  max-width: 268px;
  padding-left: 7px;
}

.autocomplete {
  margin-bottom: 10px;
}

#editTitle > .iconf-pencil {
  font-size: 15px;
}

.editable {
  display: inline-block;
  /* FF-bug, this prevents blur when navigating caret after last char */
  padding-right: 5px;
}

.editable:focus {
  background: #fff4cc;
  cursor: text;
}

.table td .editable {
  max-width: 520px;
  padding: 2px 6px 8px 6px;
  margin: -2px -6px;
}

.table td .editable:hover {
  padding-bottom: 7px;
  text-decoration: underline;
}


/*------------------------------------------------------------------
[7. Buttons]
*/

.btn {
  font-weight: normal;
}

.btn-mini {
  font-size: 7px;
  vertical-align: top;
}

.btn-icon {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 9px;
  padding: 1px 6px;
  min-height: 32px;
}

.btn.disabled,
.btn[disabled] {
  color: #999;
  text-shadow: none;
  cursor: not-allowed;
  pointer-events: auto;
}

.btn.btn-success.disabled,
.btn.btn-success[disabled] {
  background-color: #ffffff;
  border-color: #cccccc;
  color: #999;
  text-shadow: none;
  background-image: -webkit-gradient(linear, left 0, left 100%, from(#fff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #fff, 0%, #e6e6e6, 100%);
  background-image: -moz-linear-gradient(top, #fff 0, #e6e6e6 100%);
  background-image: linear-gradient(to bottom, #fff 0, #e6e6e6 100%);
  background-repeat: repeat-x;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
}


.protocolBtn.btn.btn-success.disabled,
.protocolBtn.btn.btn-success[disabled] {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  background-image: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

#finalized {
  cursor: default;
  pointer-events: all;
  color: #000;
}

#finalized.disabled,
#finalized[disabled] {
  color: #999;
  text-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}


/* override btn-group right border */

.infopop {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.keybtns > btn {
  padding: 2px 10px;
}

.btnList li {
  padding-left: 1px;
  padding-right: 1px;
}

.btnList li.btn-container {
  padding-left: 0;
  padding-right: 0;
}

#searchResultBtns {
  margin-top: -9px;
}

#searchResultHeading {
  height: 30px;
}

.partsNotIll {
  float: left;
}


/*------------------------------------------------------------------
[8. Navbar]
*/


/* Adjust navbar height */

.navbar-fixed-top {
  height: 37px;
  min-height: 37px;
  padding: 0;
}


/* Remove left padding for left-aligned navbar */

.navbar-left {
  padding-left: 0px;
}

.navbar .nav > li > a {
  padding: 8px 15px 10px;
}

.navbar-toggle {
  padding: 6px 6px;
  margin-top: 6px;
  margin-right: 6px;
}

.navbar-brand {
  float: right;
  max-height: 38px;
}

.navbar-header {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 768px) {
  .navbar-fixed-top {
    height: auto;
  }
  .navbar-left {
    padding-left: 15px;
  }
}

.navbar .navbar-nav a {
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media (max-width: 1024px) {
  .dataTables_scrollHead {
    overflow: visible !important;
  }
}


/* show scrollhandle for ipad portrait in part details */

@media (min-width: 768px) {
  .scrollHandle {
    display: none;
  }
  .scrollMargin {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .scrollHandle {
    display: block;
    margin-top: 40%;
    text-align: center
  }
  .scrollMargin {
    width: 91.66666666666666%;
    float: left;
  }
}


/*------------------------------------------------------------------
[9. Tabs]
*/


/* since we have a menu fixed at the top the tabs should start below */


/* tighten the space between the menu and tabs */

nav#tabs .nav-tabs {
  margin-top: -15px;
  margin-bottom: -2px;
}


/* Fix tabs margin in tablet view */

@media (max-width: 767px) {
  nav#tabs .nav-tabs {
    margin-top: 0px;
  }
}

.hide-menu {
  display: none;
}


/* tighten the tabs to look more like TT */

#subtabs .nav-tabs,
nav#tabs .nav-tabs,
#infoSubtabs .nav-tabs {
  padding-left: 2%;
  padding-right: 2%;
}

.nav-tabs {
  padding-top: 8px;
}

#tabs > .nav-tabs {
  border-bottom: 1px solid #dddddd;
}

.nav-tabs li {
  margin-top: 2px;
}

.nav-tabs li.active {
  margin-top: 0px;
}

.nav-tabs > .active > a,
.nav-tabs > a:hover {
  padding-bottom: 4px;
  padding-top: 6px;
  background-color: #fff !important;
  color: #444 !important;
}


/* display tabs (border) always */

.nav-tabs > li > a {
  padding-top: 3px;
  padding-bottom: 4px;
}

.nav-tabs > li > a {
  line-height: 20px;
}


/* Special padding on infoTab since its icon takes so much space */

#infoTab a,
#subInfoTab a {
  padding: 2px 12px;
  font-size: 85%;
}

#infoTab.active a,
#subInfoTab.active a {
  padding: 3px 12px;
}

#head,
.menubar {
  position: fixed;
  right: 0;
  left: 0;
  background: #fff;
}

#head {
  top: 37px;
  z-index: 401;
}

.menubar {
  padding: 15px 15px 5px 15px;
  ;
  border-bottom: 1px solid #dddddd;
  top: 73px;
  overflow: visible;
  z-index: 10;
}

.menubar h4 {
  margin: 0;
}

#content {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  top: 73px;
  height: auto;
  z-index: 300;
  background: #fff;
}

#content.autoHeight {
  overflow-y: hidden;
  height: calc(100%-73px);
}


/*------------------------------------------------------------------
[10. Tables]
*/


/* One finger scroll on iOs */

table,
[class^="_wrapper"],
[class*=" _wrapper"] {
  -webkit-overflow-scrolling: touch;
}


/* Remove BS3 2px border-bottom */

.table thead > tr > th {
  border-bottom: 0;
}

table tr.tr-disabled td,
table tr.tr-disabled th {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

table td.td-center-100,
table th.th-center-100 {
  width: 100px;
  text-align: center;
}

table td.td-center-50,
table th.th-center-50 {
  width: 50px;
  text-align: center;
}

table td.td-50,
table th.th-50 {
  width: 50px;
}

table td.td-70,
table th.th-70 {
  width: 70px;
}

table td.td-80,
table th.th-80 {
  width: 80px;
}

table td.td-1,
table th.th-1 {
  width: 1%;
}

/* double scrollbars */
.upperScrollTableWrapper {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
}

.upperScrollBarWrapper,
.upperScrollTableWrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.upperScrollBarWrapper,
.upperScrollBar {
  height: 20px;
}
.upperScrollTable {
  overflow: hidden;
  overflow-x: auto;
}

.tableContainer {
  margin-bottom: 50px;
}

/* fix for floatThead css */

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-clip: padding-box;
}


/* Narrow table cells for btn-xs and input type=checkbox */

.chkbox-th {
  width: 30px !important;
  padding: 8px 0px !important;
  text-align: center !important;
}

.chkbox-td {
  width: 30px !important;
  padding: 0px !important;
  text-align: center !important;
}

.btn-td {
  width: 47px !important;
  padding: 0px !important;
  vertical-align: middle !important;
  text-align: center !important;
}

.medium {
  max-width: 180px !important;
}

.small {
  width: 100px !important;
}


/* Fix log modal columns */

table td.td-min-70,
table th.th-min-70 {
  min-width: 70px;
}

table td.td-min-80,
table th.th-min-80 {
  min-width: 80px;
}

table td.td-min-100,
table th.th-min-100 {
  min-width: 100px;
}

td label {
  margin-bottom: 0;
}

.table th,
.table td {
  vertical-align: middle;
}

.thinText,
table th.thinText {
  font-weight: normal;
}

.table.noborder thead > tr > th,
.table.noborder tbody > tr > th,
.table.noborder tfoot > tr > th,
.table.noborder thead > tr > td,
.table.noborder tbody > tr > td,
.table.noborder tfoot > tr > td {
  border: 0;
}

.table.noborder > tbody > tr > td > label > label.styledCheckbox {
  margin-top: -20px;
}


/* Custom class to emphasize rows */

.table-divider {
  border-top: 2px solid #dddddd;
}


/* Custom class to break long strings like inside <td> tags */

.long-break {
  -ms-word-break: break-all;
  /* Be VERY careful with this, breaks normal words wh_erever */
  word-break: break-all !important;
  /* Non standard for webkit */
  word-break: break-word !important;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}


/* Fix note text column with really long words */

#notesListContent thead > tr > th.long-break,
#notesListContent tbody > tr > td.long-break {
  -ms-word-break: break-all !important;
  word-break: break-all !important;
  word-break: break-word !important;
}


/* Overflow for 'columnrich' tables in relations modal */

#tableList {
  overflow-x: auto;
}


/*------------------------------------------------------------------
[11. Data Tables]
*/


/* Make sure the table in  results is always as wide as possible */

table.dataTable {
  width: 100% !important;
}

.nowrap {
  white-space: nowrap !important;
}


/* Highlight matched text */

table.dataTable .filterMatches {
  background-color: #FCF948;
  text-shadow: 0 -1px 0 #fff;
}


/* adjust table rows to match TT */

.table-bordered thead tr th,
.table-bordered tr td {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}


/* checkboxes have too much space in table */

.table-bordered tr input[type="checkbox"] {
  min-height: 0;
}


/* make sure img in tables have room to be displayed */

.table-bordered td.img {
  min-width: 20px;
  padding: 3px;
  text-align: center;
}


/* no circle before li-items in tables  TODO? There is already class unstyled in bootstrap */

table ul {
  list-style-type: none;
}


/* add some space below table */

.dataTables_info,
.dataTables_paginate a {
  padding-top: 0.3em;
}


/* Top margin for datatables select */

.dataTables_length {
  margin-top: 10px;
  display: inline-block;
}

div.dataTables_paginate {
  float: right;
  display: inline-block;
}

.dataTables_filter {
  float: left;
  text-align: left;
}

div.dataTables_paginate ul.pagination {
  margin-top: 7px;
}

.dataTables_alphaFilter {
  margin-bottom: 5px;
}


/* Fine tune alphabetical filter buttons size */

.dataTables_alphaFilter .btn-group .btn-xs {
  padding: 6px 9px;
}

.dataTables_alphaFilter .btn-group .btn-xs.active {
  -webkit-box-shadow: inset 0 3px 5px rgba(162, 162, 162, 0.125);
  box-shadow: inset 0 3px 5px rgba(162, 162, 162, 0.125);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
  background-color: #44434b;
  border-color: #44434b;
  color: #fff;
}


/* Override datatables default pagination styling */

[class^="paginate_"],
[class*=" paginate_"] {
  background: none;
}

[class^="paginate_"]:hover,
[class*=" paginate_"]:hover {
  background: none;
}

[class^="paginate_disabled_"],
[class*=" paginate_disabled_"] {
  opacity: 0.50;
  cursor: default;
}

[class^="paginate_enabled_"]:hover,
[class*=" paginate_enabled_"]:hover {
  opacity: 0.95;
}

.dataTables_scroll {
  clear: both;
}

.dataTables_scrollBody {
  *margin-top: -1px;
  overflow-y: scroll;
}


/* lower table in tools*/

#toolWrapper {
  margin-bottom: 20px;
}

#lowTable {
  height: 200px;
}


/* Re-override datatables css with bootstrap css */

table.dataTable td,
table.dataTable th,
.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
  padding: 4px 8px;
}

table thead {
  background-color: #f1f1f1 !important;
}


/* Default cursor on thead with disabled sorting */

table.dataTable thead th.sorting_disabled {
  cursor: default;
}

.td-img-std-parts {
  width: 200px;
  height: 160px;
}

.width-190 {
  width: 190px;
}

.img-width-180 {
  width: 180px;
}

.entries-label {
  width: 68px !important;
  display: inline-block !important;
}

.long-desc li {
  float: left;
}


/* clickable column headers */

table.dataTable thead th.sorting_disabled.qty-col {
  cursor: pointer;
}


/* fix dt footer (info, length, paginate) overlapping */

.dataTables_wrapper .bottom {
  overflow: hidden;
}

#partDetails .menubar .long-desc li h4 {
  font-size: 10px;
  width: 555px;
  font-weight: 400;
}

#stdPartDetails .menubar .long-desc li h4 {
  font-size: 10px;
  width: 681px;
  font-weight: 400;
}

#stdPartDetailsArea .img-thumbnail {
  max-width: 100%;
}

#stdPartDetailsArea .img-thumbnail,
#stdPartDetailsArea .dataTables_wrapper {
  margin-top: 20px;
}

@media only screen and (min-width: 767px) and (max-width: 768px) {
  #stdPartDetailsArea .img-thumbnail {
    float: none !important;
  }
  #stdPartDetailsArea .dataTables_wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}


/*------------------------------------------------------------------
[12. Modal]
*/

.confirm-backdrop {
  z-index: 1050;
}
.modal#modalConfirmDialog {
  z-index: 1051;
}

/* Wider bootstrap modal */

@media (min-width: 768px) {
  .modal-dialog {
    width: 700px;
  }
  .modal-dialog.modal-large {
    width: 100%;
    max-width: 890px;
  }
  .modal-dialog.modal-sm {
    width: 100%;
    max-width: 335px;
  }
}

.fullscreen-modal > .modal-dialog {
  width: 100%;
}


/* Tighter header */

.modal-header {
  padding: 0px 15px 0px 15px;
}

.relogon-body {
  height: 250px;
}

.sub-modal {
  display: block;
  position: fixed;
  z-index: 1060;
  top: 0;
  left: 0;
  right: 0;
}


/* Popup window */

.popup-window {
  padding-top: 0;
  width: auto;
  height: auto;
}


/* Make room for spinner in fgrpimgmodal and center image */

#imgBody {
  min-height: 100px;
  text-align: center;
}


/* Responsive img-map in iPad portrait*/

@media (max-width: 768px) {
  img[usemap] {
    width: 100%;
  }
}


/* Favorites modal dialog*/

#favorites .tab-content #edit {
  overflow: hidden;
}

#favorites .tab-content .alert {
  margin-bottom: 0;
}


/*------------------------------------------------------------------
[13. Submenus]
*/


/*.dropdown-menu {
  height: auto;
  margin: 10px 0px 0px;
 top: auto;
  width: auto;
  clear:left
}*/

.model-menu ol.breadcrumb li > a,
.fgrp-menu ol.breadcrumb li > a {
  display: inline-block;
}

.fgrpList {
  max-height: 300px;
  overflow-y: auto;
}

.model-menu ol.breadcrumb,
.fgrp-menu ol.breadcrumb {
  padding: 0;
  margin: 0;
  margin-top: -5px;
}

.model-menu .divider,
.fgrp-menu .divider {
  margin: 0;
}

.datepicker-dropdown.dropdown-menu {
  min-width: 0;
}

.dropdown-menu li > a {
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 18px;
  padding: 3px 20px 3px 10px;
  white-space: nowrap;
}

.model-menu .breadCrumbTitle:focus {
  background-color: #fff !important;
  cursor: default;
}

.model-menu li:focus,
.fgrp-menu li:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #d6d7d9 !important;
  background-image: none !important;
  color: #222;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.model-menu li > a:hover,
.fgrp-menu li > a:hover {
  background-color: #d6d7d9 !important;
  background-image: none !important;
  color: #222;
  cursor: pointer;
  outline: none;
}

.fgrp-menu {
  left: -195px;
}

.model-menu {
  left: -235px;
}

.modelList {
  max-height: 250px;
  overflow-y: auto;
}

#imgBtn {
  border-radius: 4px;
  -webkit-border-radius: 4px;
}

.input-group .btn.dropdown-toggle {
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  float: none;
}

.empty-message {
  padding-left: 10px;
  font-size: 12px;
}

#functionGroupAutoComplete .dropdown-toggle:focus,
#collapseOperationCategories input[type="checkbox"]:focus + label,
#additionalSearchCollapse input[type="checkbox"]:focus + label {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
}

#additionalSearchCollapse .text-left-btn {
  overflow: hidden;
}

#collapseOperationCategories li,
#collapseOperationCategories .op-cat-label {
  font-weight: normal;
  line-height: 20px;
  vertical-align: middle;
}


/*------------------------------------------------------------------
[14. Twitter typeahead]
*/


/*
 * typehead.js-bootstrap3.less
 * @version 0.2.2
 * https://github.com/hyspace/typeahead.js-bootstrap3.less
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}

.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}

.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}

.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  line-height: 30px;
}

textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: auto;
}

.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}

.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  line-height: 46px;
}

textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: auto;
}

.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}

.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}

.twitter-typeahead {
  width: 100%;
  float: left;
}

.input-group .twitter-typeahead {
  display: table-cell !important;
}

.twitter-typeahead .tt-hint {
  color: #999999;
}

.twitter-typeahead .tt-input {
  z-index: 2;
}

.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
}

.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}

.tt-dropdown-menu .tt-suggestion {
  display: block;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.tt-dropdown-menu hr {
  margin: 5px 0px;
}

.tt-dropdown-menu .tt-suggestion.all:hover,
.tt-dropdown-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #d6d7d9;
  color: #222;
  cursor: pointer;
}

.tt-dropdown-menu .tt-suggestion.tt-cursor a {
  color: #222;
}

.tt-dropdown-menu .tt-suggestion p {
  margin: 0;
}

.suggestHref {
  display: block;
  width: 100%;
}

.fgrpArrow {
  position: absolute;
  right: 10px;
  padding-left: 20px;
}


/* old twitter typeahead css,
 * TODO: merge with new when migrated
 */


/* Dropdown styling */

.twitter-typeahead {
  width: 100%;
}

.input-group .tt-query {
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
  border-right: 0;
}

.tt-hint {
  color: #999;
  width: 241px;
}

#truckModelAutoComplete .tt-hint,
#manufacturersAutoComplete .tt-hint {
  padding-left: 11px;
  padding-top: 5px;
}

#partsAdditionalSearchManufacturer {
  background-color: #fff !important;
}

.tt-dropdown-menu {
  -moz-border-radius: 3px;
  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
  -webkit-border-radius: 3px;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
  margin-top: 10px;
  max-height: 300px;
  min-width: 235px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0px;
  width: auto;
}


/* .tt-dropdown-menu { */


/*   min-width: 235px; */


/*   max-height: 240px; */


/*   overflow-y: scroll; */


/* } */

.tt-suggestion {
  font-size: 12px !important;
  line-height: 18px !important;
  padding: 3px 10px;
}

.nomargbottom {
  margin-bottom: 0;
}

.tt-suggestion.tt-is-under-cursor {
  background-color: #d6d7d9;
  color: #222;
}

.tt-suggestion p {
  margin: 0px;
}

.tt-suggestion a {
  color: #000;
}

.tt-query[disabled] {
  background-color: #eeeeee !important;
}


/* Autocomplete "No matching results" dropdown */

.nomatch {
  position: fixed;
  z-index: 9999
}

.newnomatch {
  top: auto;
  left: auto;
  position: fixed;
  z-index: 9999
}

.fgrp-menu,
.model-menu {
  margin-top: 10px;
}

.model-menu {
  min-width: 269px;
}

.fgrp-menu {
  min-width: 350px;
}

.fgrp-suggestion {
  min-width: 350px;
}


/*------------------------------------------------------------------
[15. Collapse]
*/


/*------------------------------------------------------------------
[16. Search view layout]
*/

.searchPage {
  padding: 15px;
}

.panel-heading {
  border-bottom: 1px solid #dddddd;
}

#searchform,
#searchResults {
  top: 14px;
  position: absolute;
  height: calc(inherit - 40px);
}

#searchResults .show-control {
  display: block;
}

#searchResults.margin-panel .show-control {
  display: none;
}

.right-panel {
  right: 15px;
  left: 15px;
  min-height: 550px;
  height: calc(100% - 40px);
}

#searchform {
  float: left;
  width: 300px;
  min-height: 550px;
  height: calc(100% - 40px);
}

@media (max-width: 768px) {
  body {
    padding-top: 45px;
    ;
  }
}

.margin-panel {
  left: 330px;
}

.show-control {
  display: none;
}


/* fgrp img button should look extra active, add focus styles */

#imgBtn.active {
  border: 2px solid #e59700;
}


/* Avoid #list to flow beneath search form */

div#list {
  display: inline-block;
  width: 100%;
}


/* Inputs side-by-side */

.inputLeft,
.inputRight {
  width: 130px;
}

.noPad {
  padding-left: 0px;
  padding-right: 0px;
}

.smallHr {
  margin: 0.5em;
}

.inputLeft {
  margin-right: 3px;
}

.inputRight {
  margin-left: 3px;
}


/* vehicle inputs should be grouped tighter */

.vehicleForm {
  margin-bottom: 10px;
}


/*------------------------------------------------------------------
[17. Iframes]
*/


/* infoheader iframe should take up all available height */

iframe {
  height: 100%;
  width: 100%;
  border-style: none;
  border: none;
  z-index: 0;
}

.ipadScroll {
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

#relogonIframe {
  height: 220px;
}

#partContentWrapper {
  height: 192px;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  overflow: hidden;
  z-index: 400;
}

#partContentWrapper table {
  margin-bottom: 0;
}

#exchangedDoc {
  margin: 0;
}

.no-scroll-iframe {
  height: 100% !important;
  overflow: auto;
}


/* Sticky wrapper fix for iOS 7 */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /*   .menubar, */
  #partContentWrapper {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
  }
  /*   .menubar { */
  /*     top: 0; */
  /*   } */
  #partContentWrapper {
    bottom: 0;
  }
}


/* vehicle explorer, all img are 450x700 */

iframe#vehicleExplorerImg {
  width: 100%;
  height: 510px;
}


/* vehicle explorer, no padding below */

#fgrpImageModal #imgBody {
  padding: 10px 20px 0;
}

#fgrpImageModal #imgBody .menubar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  border-bottom: none;
}


/*------------------------------------------------------------------
[18. Select2]
* Plugin used for multiple selects in additional search
*/


/**
 * Select2 Bootstrap 3 CSS
 * From http://fk.github.io/select2-bootstrap-css/
 * Compatible with Select2 3.3.2, 3.4.1, 3.4.2 and Twitter Bootstrap 3 RC2
 * MIT License
 */


/**
 * Reset Bootstrap 3 .form-control styles which - if applied to the
 * original <select>-element the Select2-plugin may be run against -
 * are copied to the .select2-container.
 */

.select2-container.form-control {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}


/**
 * Adjust Select2 inputs to fit Bootstrap 3 default .form-control appearance.
 */

.select2-search .select2-input,
.select2-container .select2-choice,
.select2-container-multi .select2-choices {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #555555;
  border-color: #cccccc;
  border-radius: 4px;
  background: none;
  background-color: white;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}


/**
 * Adjust Select2 input heights to match the Bootstrap default.
 */

.select2-container .select2-choice,
.select2-container-multi .select2-choices,
.select2-container .select2-arrow {
  min-height: 34px;
  line-height: 35px;
}

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 7px;
  padding-left: 10px;
}


/**
 * Address Bootstrap 3 control sizing classes
 * @see http://getbootstrap.com/css/#forms-control-sizes
 */

.select2-container.input-sm .select2-choice,
.select2-container-multi.input-sm .select2-choices,
.input-group-sm .select2-container .select2-choice,
.input-group-sm .select2-container-multi .select2-choices {
  min-height: 30px;
  line-height: 31px;
  border-radius: 3px;
}

.select2-container.input-lg .select2-choice,
.select2-container-multi.input-lg .select2-choices,
.input-group-lg .select2-container .select2-choice,
.input-group-lg .select2-container-multi .select2-choices {
  min-height: 45px;
  line-height: 46px;
  border-radius: 6px;
}

.select2-container-multi.input-sm .select2-choices .select2-search-choice,
.input-group-sm .select2-container-multi .select2-choices .select2-search-choice {
  margin-top: 3px;
}

.select2-container-multi .select2-choices .select2-search-choice {
  margin-top: 5px;
}

.select2-container-multi.input-lg .select2-choices .select2-search-choice,
.input-group-lg .select2-container-multi .select2-choices .select2-search-choice {
  line-height: 22px;
}


/**
 * Adjust the dropdown arrow button border color for the single-select Select2 elements.
 * @todo Take care of .input-sm and .input-lg modifier classes.
 */

.select2-container .select2-choice .select2-arrow {
  border-left: 1px solid #cccccc;
  background: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

.select2-container .select2-choice div,
.select2-container.select2-container-disabled .select2-choice div,
.select2-dropdown-open .select2-choice .select2-arrow {
  border-left-color: transparent;
  background: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}


/**
 * Adjust the dropdown arrow button icon position for the single-select Select2 elements
 * to make it line up vertically now that we increased the height of .select2-container.
 * @todo Position values should be based on $input-height-*
 */

.select2-container .select2-choice .select2-arrow b {
  background-position: 0 3px;
}

.select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 3px;
}

.select2-container.input-sm .select2-choice .select2-arrow b,
.input-group-sm .select2-container .select2-choice .select2-arrow b {
  background-position: 0 1px;
}

.select2-dropdown-open.input-sm .select2-choice .select2-arrow b,
.input-group-sm .select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 1px;
}

.select2-container.input-lg .select2-choice .select2-arrow b,
.input-group-lg .select2-container .select2-choice .select2-arrow b {
  background-position: 0 10px;
}

.select2-dropdown-open.input-lg .select2-choice .select2-arrow b,
.input-group-lg .select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 10px;
}


/**
 * Error styles from the original select2-bootstrap-css targeted at Bootstrap 2.
 * @todo: Implement test/demo and fix styles.
 */

.form-group.error [class^="select2-choice"] {
  border-color: #b94a48;
}


/**
 * .select2-search-field for multi-select Select2 widgets.
 */

.select2-container-multi .select2-choices .select2-search-field {
  height: 32px;
  line-height: 20px;
}


/**
 * Make Select2's active-styles - applied to .select2-container when the widget receives focus -
 * fit Bootstrap 3's .form-element:focus appearance.
 */

.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
  border-color: #66afe9;
  outline: none;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.select2-drop-active {
  border-color: #66afe9;
}

[class^="input-"] .select2-container {
  font-size: 14px;
}


/**
 * Select2 widgets in Bootstrap Input Groups
 *
 * When Select2 widgets are combined with other elements using Bootstrap 3's
 * "Input Group" component, we don't want specific edges of the Select2 container to
 * not have a border-radius.
 *
 * In Bootstrap 2, input groups required a markup where these style adjustments
 * could be bound to a CSS-class identifying if the additional elements are appended,
 * prepended or both.
 *
 * Bootstrap 3 doesn't rely on these classes anymore, so we have to use our own.
 * Use .select2-bootstrap-prepend and .select2-bootstrap-append on a Bootstrap 3 .input-group
 * to let the contained Select2-widget know which edges should not be rounded as they are
 * directly followed by another element.
 *
 * @see http://getbootstrap.com/components/#input-groups
 */

.input-group.select2-bootstrap-prepend [class^="select2-choice"] {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.input-group.select2-bootstrap-append [class^="select2-choice"] {
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.select2-dropdown-open [class^="select2-choice"] {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}


/**
 * Adjust Select2 hover and selected style to match Bootstrap 3's default dropdown styles.
 */

.select2-results .select2-highlighted {
  color: white;
  background-color: #357ebd;
}


/**
 * Address Multi Select2's height which - depending on how many elements have been selected -
 * may grown higher than their initial size.
 */

.select2-container.form-control,
.select2-container-multi {
  height: auto;
}


/**
 * Adjust alignment of Bootstrap 3 buttons in Bootstrap 3 Input Groups to address
 * Multi Select2's height which - depending on how many elements have been selected -
 * may grown higher than their initial size.
 */

.select2-bootstrap-append .select2-container,
.select2-bootstrap-append .input-group-btn,
.select2-bootstrap-append .input-group-btn .btn {
  vertical-align: top;
}


/**
 * Make Multi Select2's choices match Bootstrap 3's default button styles.
 */

.select2-container-multi .select2-choices .select2-search-choice {
  color: #555555;
  background: white;
  border-color: #cccccc;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
  -webkit-box-shadow: none;
  box-shadow: none;
}

.select2-container-multi .select2-choices .select2-search-choice-focus {
  background: #ebebeb;
  border-color: #adadad;
  color: #333333;
  -webkit-box-shadow: none;
  box-shadow: none;
}


/**
 * Adjust the Select2's clear button position (used to reset the select box
 * back to the placeholder value and visible once a selection is made
 * activated by Select2's "allowClear" option).
 */

.select2-container .select2-choice abbr {
  top: 9px;
}


/**
 * Adjust "no results" and "selection limit" messages to make use
 * of Bootstrap 3's default "Alert" style.
 * @see http://getbootstrap.com/components/#alerts-default
 */

.select2-results .select2-no-results,
.select2-results .select2-selection-limit {
  background-color: #fcf8e3;
  color: #c09853;
}


/**
 * Address disabled Select2 styles.
 */

.select2-container.select2-container-disabled .select2-choice {
  cursor: not-allowed;
  background-color: #eeeeee;
  border-color: #cccccc;
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  background-color: transparent;
}


/* END Select2 Bootstrap 3 CSS */


/**
 * Impact 3.17 specific BS3 + Select2 css overrides
 */

.select2-container {
  margin-bottom: 10px;
}

.select2-container .select2-choice {
  border-color: #cccccc;
}

.select2-results .select2-highlighted {
  background: #d6d7d9;
  color: #222;
}

.select2-container-active .select2-choice {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
}


/*------------------------------------------------------------------
[19. #icrModal]
*/


/* bold "labels" for info table */

#icrModal span:first-child {
  width: 250px;
  display: inline-block;
  vertical-align: top;
}


/* when alert is in footer theres no need for extra space below */

.modal-footer .alert {
  margin-bottom: 0;
}


/*------------------------------------------------------------------
[20. Detailsareas]
*/


/* dynamic image in servive form details */
.row.dynamic-image-item {
  padding: 0;
}

/* Align all design elements */
.cup-dynamic-image-container {
  padding-left: 15px;
}
.dir-rtl .cup-dynamic-image-container .cup-vsses {
  padding: 0 15px 0 0;
}

.dynamicDrawing {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

.dynamicImage {
  position: absolute;
}

.circle {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 26px;
  height: 26px;
  border-radius: 12px;
  position: absolute;
  font-weight: bold;
  font-size: 1.5em;
  color: #fff;
  text-shadow: 0, -1px, 0 #222;
  text-align: center;
  vertical-align: middle;
  line-height: 26px;
}

.circle:active {
  background-color: rgba(0, 0, 0, 0.1);
  color: #222;
}

.double {
  width: 50px;
  height: 50px;
  border-radius: 24px;
  line-height: 50px;
}


/* global popovers container in index.jsp */

#popovers {
  z-index: 9999;
  position: absolute;
  top: 0;
}


/* truncated text marker */

.trail {
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
  line-height: 14px;
}

.spinner {
  height: 55px;
  width: 54px;
  margin: 0 auto;
}

.add-inline-spinner {
  display: block;
  height: 30px;
  margin: 0;
  position: absolute;
  right: 4px;
  top: 0;
  width: 30px;
}

.processing {
  background: url("../images/ajax-loader-big-circle_common_20171116_1312.gif") no-repeat center bottom;
  text-align: center;
  min-height: 100px;
}

#content > .spinner {
  margin: -22px 0 0 -22px;
  position: absolute;
  top: 50%;
  left: 50%;
}

#allitemslist,
#currentlist {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
}


/* TODO: adjust further when nav-tabs adjusted */


/* Details css */

.detailsArea {
  height: 100%;
  position: relative;
  top: 67px;
  z-index: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
}

.detailsArea.scrollable {
  position: absolute;
  top: 67px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.tpidoc {
  height: 100%;
}

#messageArea > .alert {
  padding: 5px;
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .detailsArea {
    top: 64px;
  }
  /* Fix long titles on stdParts */
  .detailsArea.scrollable {
    top: 105px;
  }
}

@media (max-width: 480px) {
  .detailsArea {
    top: 120px;
  }
  #tools > li > a,
  .nav-pills > li > a {
    padding: 2px;
  }
  .table-left {
    margin-top: 30px;
  }
}

.margin-bottom-4 {
  margin-bottom: 4px;
}

#partRows {
  height: 50%;
  padding: 0 10px;
  overflow-y: scroll;
}

#partRows table {
  margin: 10px 0;
}

#std-part-warehouse-button-group {
  float: right;
  min-width: 600px;
}


/* CUP */
.cupDetails {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
.cupDetails h2,
.cupDetails h3,
.cupDetails h5,
.cupDetails h6 {
  font-weight: bold !important;
  margin: 0;
  padding: 0;
}
.cupDetails h3 {
  margin-top: 1em;
}
.cup-sub-title {
  margin-top: 20px;
  font-style: normal;
  font-weight: normal !important;
  margin-bottom: 0;
}

.protocol-header label {
  font-weight: bold !important;
}
.cupDetails label {
  font-weight: normal;
}
.cupDetails #tableContainer .table,
.cupDetails #tableContainer .table .form-control {
  width: auto !important;
}

/* Because we are using .list-group-item without .list-group which resets -1px margin on last item */
.cupDetails .staticDrawing {
  margin-top: 1px;
}
.cup-vsses {
  margin: 10px 0 0 0 !important;
  padding: 0;
}
.cup-vss-desc {
  margin-bottom: 0;
  display: block;
  direction: ltr;
}

.service-btn-group {
  float: right;
  width: 134px;
}

.cupDetails .checkPointLabels {
  margin-top: 10px;
}
.cupDetails .comments {
  clear: both;
}

.detailsArea .ihLink {
  color: #00e;
  text-decoration: underline;
}

/*------------------------------------------------------------------
[21. Carousel]
*/

.thumbnail {
  height: 189px;
  width: 106px;
  cursor: pointer;
  margin: 0;
}

.divWrapper {
  overflow-y: auto;
}

.div-inline {
  display: inline-block;
  height: 290px;
  float: left;
  margin: 2px;
}

.caption {
  cursor: pointer;
  font-size: 10px;
  color: #444;
  position: relative;
  width: 106px;
  height: 100px;
  padding: 5px;
  background-color: #f1f1f1;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #dfdfdf;
}

.caption h5 {
  line-height: 12px;
  margin: 2px 0;
  word-break: normal;
}

.div-inline:hover .caption {
  background-color: #dfdfdf;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.dot-list > li:before {
  content: '\203A';
  margin-right: 0.2em;
  font-size: 1.5em;
  line-height: 1em;
}


/*------------------------------------------------------------------
[22. Miscellanous]
*/

.emptyModalHeader {
  padding: 10px;
  height: 40px;
}


/* Debug text: Rendered list in... */

.debug {
  clear: both;
}


/* Bootstrap growl shadow */

.bootstrap-growl {
  -moz-background-clip: padding-box;
  -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
  outline: none;
}


/* Pull down first two tyre inputs in form details CUP */

.pullDown {
  margin-top: 32px;
}

.chassilink {
  display: block;
}


/* Some bottom margin to clarify end of table in part details view*/

#textdiv {
  margin-bottom: 50px;
}

#nearSections {
  max-width: none;
}

.topMargin15 {
  margin-top: 15px;
}

.leftMargin5 {
  margin-left: 5px;
}

.leftMargin15 {
  margin-left: 15px;
}

.rightMargin5 {
  margin-right: 5px;
}

#chassisWrapper {
  height: 400px;
  overflow: auto;
  overflow-x: hidden;
}

#chassisWrapper ul {
  list-style: none;
  margin: 0 1px 1px 0;
  padding: 0;
  display: table;
}

#chassisWrapper ul li {
  float: left;
  min-width: 100px;
  padding: 5px 10px;
  margin: 0 -1px -1px 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  border: 1px solid #ddd;
  color: #0088cc;
}

#chassisWrapper ul li:hover {
  cursor: pointer;
  background-color: #f5f5f5;
  background-color: rgba(86, 61, 124, .1);
}

#chassisWrapper ul li.visited {
  color: #cc0099;
}

.input-group.date {
  margin-bottom: 10px;
}


/* hide left border to avoid double borders */

.input-group-btn > .btn {
  margin-left: -1px;
}


/*------------------------------------------------------------------
[23. Miscellanous helper classes] TODO: remove?
*/

.clipboard-hover {
  color: #333333;
  background-color: #ebebeb;
  border-color: #adadad;
  text-decoration: none;
}

.clipboard-active {
  background-color: #e6e6e6;
  border-color: #e0e0e0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  color: #333333;
  outline: 0;
}


/* Part details image */

.imagediv > .img-thumbnail {
  width: 100%;
  border: 0;
}

.previewImg {
  width: 150px;
  height: auto;
}

.pointer {
  cursor: pointer;
  margin-top: 15px;
}

.textwrap {
  word-wrap: break-word;
  display: inline-block;
  width: 300px;
}

.btn-list {
  margin-right: 2px;
}


/* Border helper classes */

.bottomborder {
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #dddddd;
}

.topborder {
  border-width: 1px 0px 0px 0px;
  border-style: solid;
  border-color: #dddddd;
}

.noborder,
.noleftborder,
.norightborder,
.notopborder,
.nobottomborder {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.noborder {
  border: 0px !important;
}

.noleftborder {
  border-left: 0px !important;
}

.norightborder {
  border-right: 0px !important;
}

.notopborder {
  border-top: 0px !important;
}

.nobottomborder {
  border-bottom: 0px !important;
}

.nobottompadding {
  padding-bottom: 0;
}

.panel.nobottomborder {
  border-bottom: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-radius: 0px !important;
}


/* info subtabs, add padding */

#infoContent table {
  margin-top: 1em;
}

#infoContent {
  margin-bottom: 0px;
}

.rightMarg {
  margin-right: 20px;
}

.leftMarg {
  margin-left: 20px;
}

.text-error {
  color: #b94a48;
}

.right {
  margin: 8px 15px 0px 0px;
  float: right;
}

.text-left-btn {
  text-align: left;
  padding-left: 15px;
  /* Fix for caret in additional search */
  white-space: normal !important;
}

.checkboxtext {
  margin-top: 10px;
}


/*------------------------------------------------------------------
[24. Panel]]
*/

.panel {
  padding: 15px;
  border: 1px solid #dddddd;
}

.panel-heading {
  margin-bottom: 15px;
  padding: 0px 0px 10px;
}


/* remove BS3 bg-color on panel-heading*/

.panel-heading {
  background: #fff;
}

.panel-body {
  padding: 0;
}

.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: 0;
}


/*------------------------------------------------------------------
[25. Print]
*/

#download-link {
  text-align: center;
  display: block;
}


/*------------------------------------------------------------------
[26. News]
*/

#news-page {
  height: 100%;
  width: 100%;
  /*   padding-top: 20px; */
}

.news-header {
  position: inherit !important;
}

#right-page-content {
  overflow: hidden;
  position: relative;
}

#newsDetailsIframe {
  height: 100%;
  width: 100%;
  border-style: none;
  border: none;
  z-index: 0;
}

#newsDetails {
  position: relative;
  /*   overflow :visible; */
  /*   height: 100%; */
}


/*------------------------------------------------------------------
[27. IE10 and IE11 fixes]
*/

.is-ie10 .icon-btn,
.is-ie11 .icon-btn {
  font-size: 6px;
}

.is-ie11 .input-group-addon,
.is-ie11 .input-group-btn,
.is-ie10 .input-group-addon,
.is-ie10 .input-group-btn {
  vertical-align: top;
}


/* invisible iframe for iframe z-index bug */

.cover {
  border: 1px solid #dddddd;
  ;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}


/* hide acrobat reader when modal dialog is open */

.is-ie8 .hideIframePdf,
.is-ie9 .hideIframePdf,
.is-ie10 .hideIframePdf,
.is-ie11 .hideIframePdf {
  display: none;
}

.is-ie11 .menubar select#warehouse,
.is-ie11 .btnList select#warehouse {
  margin-bottom: -13px;
}

.btnLabel {
  margin-right: .3em;
  vertical-align: text-top;
}


/*------------------------------------------------------------------
[28. Mylist]
*/

#sendList {
  margin-bottom: 15px;
}

.disabled-link,
.disabled-link:hover {
  color: lightgray;
}


/*------------------------------------------------------------------
[28. rtl, right-to-left languages]
*/

/* Fix for IMP-4196 */
/*
.dir-rtl .btnList > li {
  display: inline;
}*/
/* Looks like its fixed in Chrome 52.0.2743.116 m */

.dir-rtl .fixed-panel,
.dir-rtl .right-panel {
  display: block;
}

.dir-rtl {
  direction: rtl;
}

.dir-rtl .margin-panel {
  right: 330px;
  left: 15px;
}

.dir-rtl .pull-left {
  float: right !important;
}

.dir-rtl .pull-right {
  float: left !important;
}

.dir-rtl .nav-tabs > li {
  float: right;
}

.dir-rtl .tt-query {
  direction: rtl;
}

@media (min-width: 768px) {
  .dir-rtl .navbar-left {
    float: right !important;
  }
}

@media (min-width: 768px) {
  .dir-rtl .navbar-nav > li {
    float: right !important;
  }
}

.dir-rtl .ieNoborder {
  right: 0;
  min-width: 200px;
}

.dir-rtl .input-group-addon:not(:first-child):not(:last-child),
.dir-rtl .input-group-btn:not(:first-child):not(:last-child),
.dir-rtl .input-group .form-control:not(:first-child):not(:last-child) {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.dir-rtl .input-group .tt-query {
  border-left: 0;
  border-right: 1px solid #ccc;
}

.dir-rtl .tt-hint {
  width: 195px;
}

.dir-rtl .input-group .btn.dropdown-toggle {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.dir-rtl .input-group .form-control:last-child,
.dir-rtl .input-group-addon:last-child,
.dir-rtl .input-group-btn:last-child > .dir-rtl .btn,
.dir-rtl .input-group-btn:last-child > .dropdown-toggle,
.dir-rtl .input-group-btn:first-child > .btn:not(:first-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.dir-rtl .input-group .form-control:last-child,
.dir-rtl .input-group-addon:last-child,
.dir-rtl .input-group-btn:last-child > .btn,
.dir-rtl .input-group-btn:last-child > .dropdown-toggle,
.dir-rtl .input-group-btn:first-child > .btn:not(:first-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.dir-rtl .text-left-btn {
  text-align: right;
  padding-right: 15px;
}

.dir-rtl .select2-search-choice-close {
  left: 3px;
  right: auto;
}

.dir-rtl .select2-container-multi .select2-choices li {
  float: right;
}

.dir-rtl .right {
  margin: 8px 15px 0px 0px;
  float: left;
}

.dir-rtl .alert-dismissable .close {
  float: right;
}

.dir-rtl .col-xs-6.noPad {
  float: right !important;
  padding-left: 3px;
}

.dir-rtl .inputLeft {
  margin-left: 3px;
  margin-right: 0px;
}

.dir-rtl .inputRight {
  margin-right: 3px;
}

.dir-rtl .text-right {
  text-align: left;
}

.dir-rtl .text-left {
  text-align: right;
}

.dir-rtl .popover.bottom .arrow:after,
.dir-rtl .popover.bottom .arrow:after {
  margin-right: -10px !important;
}

.dir-rtl .popover-title {
  text-align: right;
}

.dir-rtl .popover-content {
  text-align: right;
}

.dir-rtl [class^="tt-dataset"],
.dir-rtl [class*=" tt-dataset"],
.dir-rtl .tt-suggestions {
  padding-right: 0px;
}

@media (min-width: 992px) {
  .dir-rtl .col-md-1,
  .dir-rtl .col-md-2,
  .dir-rtl .col-md-3,
  .dir-rtl .col-md-4,
  .dir-rtl .col-md-5,
  .dir-rtl .col-md-6,
  .dir-rtl .col-md-7,
  .dir-rtl .col-md-8,
  .dir-rtl .col-md-9,
  .dir-rtl .col-md-10,
  .dir-rtl .col-md-11 {
    float: right !important;
  }
}

.dir-rtl .col-xs-1,
.dir-rtl .col-xs-2,
.dir-rtl .col-xs-3,
.dir-rtl .col-xs-4,
.dir-rtl .col-xs-5,
.dir-rtl .col-xs-6,
.dir-rtl .col-xs-7,
.dir-rtl .col-xs-8,
.dir-rtl .col-xs-9,
.dir-rtl .col-xs-10,
.dir-rtl .col-xs-11,
.dir-rtl .col-xs-12,
.dir-rtl .col-sm-1,
.dir-rtl .col-sm-2,
.dir-rtl .col-sm-3,
.dir-rtl .col-sm-4,
.dir-rtl .col-sm-5,
.dir-rtl .col-sm-6,
.dir-rtl .col-sm-7,
.dir-rtl .col-sm-8,
.dir-rtl .col-sm-9,
.dir-rtl .col-sm-10,
.dir-rtl .col-sm-11,
.dir-rtl .col-sm-12,
.dir-rtl .col-md-1,
.dir-rtl .col-md-2,
.dir-rtl .col-md-3,
.dir-rtl .col-md-4,
.dir-rtl .col-md-5,
.dir-rtl .col-md-6,
.dir-rtl .col-md-7,
.dir-rtl .col-md-8,
.dir-rtl .col-md-9,
.dir-rtl .col-md-10,
.dir-rtl .col-md-11,
.dir-rtl .col-md-12,
.dir-rtl .col-lg-1,
.dir-rtl .col-lg-2,
.dir-rtl .col-lg-3,
.dir-rtl .col-lg-4,
.dir-rtl .col-lg-5,
.dir-rtl .col-lg-6,
.dir-rtl .col-lg-7,
.dir-rtl .col-lg-8,
.dir-rtl .col-lg-9,
.dir-rtl .col-lg-10,
.dir-rtl .col-lg-11,
.dir-rtl .col-lg-12 {
  float: right !important;
}

.dir-rtl .submenu-show {
  right: 100%;
  left: auto;
}

.dir-rtl .fgrp-menu {
  left: -80px;
}

.dir-rtl .close {
  float: left;
}

.dir-rtl th {
  text-align: right;
}

.dir-rtl .dataTables_filter {
  float: right;
}

.dir-rtl .modal-footer {
  text-align: left;
}

.dir-rtl .floatThead-container {
  left: auto !important;
  right: 0px !important;
}


/* unicode arrow icons  */

.dir-rtl .iconf-super-arrow:before {
  content: '\21B2';
  margin-right: 1em;
}


/*TODO: fix this icon? */

.dir-rtl .iconf-indent-left:before {
  content: "\e600"; /* missing in fonticons.css? */
}

.dir-rtl .iconf-arrow-left:before {
  content: "\27";
}

.dir-rtl .iconf-arrow-right:before {
  content: "\26";
}

.dir-rtl .iconf-chevron-left:before {
  content: "\2021";
}

.dir-rtl .iconf-chevron-right:before {
  content: "\2020";
}

.dir-rtl .iconf-arrow-right2:before {
  content: "\63";
}

.dir-rtl .iconf-arrow-left2:before {
  content: "\64";
}

.dir-rtl .iconf-left:before {
  content: "\39";
}

.dir-rtl .iconf-right:before {
  content: "\38";
}

.dir-rtl .iconf-caret-left:before {
  content: "\74";
}

.dir-rtl .iconf-caret-right:before {
  content: "\73";
}

.dir-rtl .iconf-left-circled:before {
  content: "\6c";
}

.dir-rtl .iconf-right-circled:before {
  content: "\6b";
}


/* overrides */

.ltr,
.dir-rtl .ltr,
.dir-rtl > .ltr {
  direction: ltr !important;
}

.ltrR,
.dir-rtl .ltrR,
.dir-rtl > .ltrR {
  direction: ltr !important;
  text-align: right !important;
}


/* fix mirroring unicodes */

.dir-rtl .btn-icon > i {
  direction: ltr;
}

.dir-rtl .dropdown-menu.pull-right {
  left: 0;
  right: auto;
}

/* CUP RTL support */
.dir-rtl .list-group-item .buttons .service-btn-group {
  float: left !important;
}

/*------------------------------------------------------------------
[28. tooladmin]
*/

.not-available {
  font-style: italic;
  color: gray;
}


/*------------------------------------------------------------------
[30. Help]
*/

#restricted {
  max-height: 300px;
}

#restricted ul {
  max-height: 200px;
  overflow-y: scroll;
}

#restricted b {
  margin-left: -1em;
}

#restricted h5 {
  font-weight: bold;
}

#restricted ul li {
  padding-left: 10px;
  margin-left: 10px;
}


/*------------------------------------------------------------------
[31. Wiring diagrams]
*/

#embedWrapper {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 100%;
  top: 100px;
  left: 0;
  right: 0;
}


/* http://keith-wood.name/svg.html
   SVG for jQuery v1.4.5.
   Written by Keith Wood (kbwood{at}iinet.com.au) August 2007.
   Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
   MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
   Please attribute the author if you use it. */

#embedWrapper svg\:svg {
  display: none;
}

#embedWrapper .svg_error {
  color: red;
  font-weight: bold;
}

#dataStorage {
  display: none;
}

.radioList input[type=radio] {
  display: none;
}