/* Minification failed. Returning unminified contents.
(3655,7): run-time error CSS1030: Expected identifier, found '['
(3655,30): run-time error CSS1030: Expected identifier, found '['
(3655,55): run-time error CSS1030: Expected identifier, found '['
(3655,77): run-time error CSS1030: Expected identifier, found '['
(3655,100): run-time error CSS1030: Expected identifier, found '['
(5209,1): run-time error CSS1019: Unexpected token, found '<'
(5209,2): run-time error CSS1019: Unexpected token, found '/'
 */
/*
 --------------------------------------------------
   GENERAL ELEMENTS & BASIC TYPOGRAPHY
---------------------------------------------------
*/

@font-face {
    font-family: 'Glyphicons Regular';
    src: url("fonts/bootstrap/glyphicons-regular.eot");
    src: url("fonts/bootstrap/glyphicons-regular.eot?#iefix") format("embedded-opentype"), url("fonts/bootstrap/glyphicons-regular.woff") format("woff"), url("fonts/bootstrap/glyphicons-regular.ttf") format("truetype"), url("fonts/bootstrap/glyphicons-regular.svg#glyphicons_halflingsregular") format("svg");
}

/* If you need more CSS defintions for the other grades, see https://drive.google.com/drive/folders/1C4qS8sps5M5ovExk6xX2Psarr26vgSlO (make sure to fix the font paths) -RAS */
@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/fa-regular-400.eot");
    src: url("fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("fonts/fa-regular-400.woff2") format("woff2"), url("fonts/fa-regular-400.woff") format("woff"), url("fonts/fa-regular-400.ttf") format("truetype"), url("fonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    src: url("fonts/fa-light-300.eot");
    src: url("fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("fonts/fa-light-300.woff2") format("woff2"), url("fonts/fa-light-300.woff") format("woff"), url("fonts/fa-light-300.ttf") format("truetype"), url("fonts/fa-light-300.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    src: url("fonts/fa-solid-900.eot");
    src: url("fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fonts/fa-solid-900.woff2") format("woff2"), url("fonts/fa-solid-900.woff") format("woff"), url("fonts/fa-solid-900.ttf") format("truetype"), url("fonts/fa-solid-900.svg#fontawesome") format("svg");
}

.fa,
.fas {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

.glyphicon-menu-hamburger:before {
    content: "\e236";
}

.glyphicon-menu-hamburger:hover {
    cursor: pointer;
}

/*Logo section was on top of some buttons but invisible. This is a small fix for now.*/
.logo_section {
    height: auto;
}

body {
    padding-bottom: 20px;
    -ms-overflow-style: scrollbar;
}
input#keyWord::placeholder {
    font-size: 1rem;
}
.field-validation-valid {
    display: none;
}

.validation-summary-valid {
    display: none;
}

.container-spacing {
    padding-top: 2rem;
}

p{
    font-family: Arial;
    font-size: 13px;
    line-height: 1.38;
    color: #353535;
}

.top-spacer {
    margin-top:1em;
    padding: 1rem;
}


.modal-open .modal {
    overflow-x: hidden;
    z-index: 400;
}

/*Spinner Updates*/
#SpinnerContainer .spinner{
    position: fixed !important;
}

.focus-box{
    z-index: -1;
    position:absolute;
    border:none;
}

.glyphicon.large:before {
    font-size: 24px;
    color: #ffb91d;
}

@media (min-width: 768px) {
    .glyphicon.large:before {
        font-size: 24px;
        color: #ffb91d;
    }
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 500px;
}

textarea.warning-box{
    max-width: 100%;
}

/*Make the project and system descriptions wider for editing inline */
textarea.editor {
    min-width: 500px;
}

.row.container.header-bar {
    border-bottom: thick solid #ffb91d;
    height: 50px;
}

.row.container.header-bar, .container.body-content {
    border-left: 1px solid #adadad;
    border-right: 1px solid #adadad;
}

.header-container{
    margin-left: 60px;
    padding-left:0;
}

.darkbg {
    background-color: #424242;
}

.guidance-box {
    border: 2px solid white;
    color: white;
    min-height: 70px;
    font-size: large;
    vertical-align: middle;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.gotit-btn{
    padding: 1px 20px;
}

.gotit-container {
    height: 40px;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 10px;
}

.zoom {
    vertical-align: middle;
    text-align: center;
    margin-left: 60px;
    margin-right: 60px;
    text-transform: uppercase;
    color: #a5a5a5;
    height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.zoom-symbol {
    font-family: 'Font Awesome 5 Pro';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
}

.zoom-symbol.zoom-in:before {
    content: "\f00e";
}

.zoom-symbol.zoom-out:before {
    content: "\f010";
}

.results-warning-dialog .ui-dialog-titlebar {
    background: #ffb91d;
}

.results-warning-dialog h4,
.results-warning-dialog p {
    font-size: 14px;
}

.chatrow {
    padding: 0.5em;
    padding-right: 0.5em;
}

.data-image{
    position:relative;
}

.delete {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
}

/*
 --------------------------------------------------
    COLUMN - NO PADDING FOR NESTED COLUMNS
---------------------------------------------------

*/
.no-pad {
    padding: 0px 0px 0px 0px;
}

.no-edge-padding{
    padding-left: 0px;
    padding-right: 0px;
}

/*
 ------------------------------------
    GLYPHICONS - RESIZE
-------------------------------------
*/
.ui-glyph-button {
    color: white;
    cursor: pointer;
    font-family: Roboto;
    font-size: 12.5px;
    text-transform: uppercase
}

.ui-glyph-button-white {
    color: white;
}

.ui-glyph-button-white:hover {
    color: #BFCCDD;
    text-decoration:none;
}


.ui-glyph-button:hover {
    text-decoration: none;
}

.glyphicon::before {
    font-size: 16px;
}

.glyphicon:hover {
    cursor: pointer;
}

.very-large::before {
    font-size: 50px;
}

.very-large {
    font-size: 50px;
}

/* glyphicons for system level actions*/
a > span.glyphicon {
    text-decoration: none;
}

/* custom glyphicon for menu on cards*/
a > span.glyphicon-option-vertical {
    text-decoration: none;
    top:10px;
}

.gi-1x {
    font-size: 16px;
}

.gi-2x {
    font-size: 20px;
}

.gi-3x {
    font-size: 24px;
}

/*
    -----------------------------------------------------
    PROJECT DETAILS VIEW - DESCRIPTION/BACK NAV AREA
    -----------------------------------------------------
*/

#listViewSlider {
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    font-style: normal;
    line-height: 11px;
}

#listViewSlider .small-text {
    font-size: 10px;
    transform: translateY(-2px);
}

#listViewSlider .switch-small {
    transform: translateY(-5px);
}

#listViewSlider .slider-small {
    background-color: #F1F5F8;
}

.breadcrumbs-nav {
    height: 27px;
    background-color: #E2E1DD;
    padding-left: 60px;
    padding-top: 7px;
    color: #101420;
    font-family: Arial;
    font-size: 12px;
    font-style: italic;
    line-height: 11px;
    z-index: 1;
}

.breadcrumbs-nav.sticky {
    position: fixed;
    top: 0;
    width: 100%
}

.breadcrumbs-nav.sticky + .breadcrumbs-nav-sticky-spacer {
    padding-top: 27px;
}

    .breadcrumbs-nav .previous {
        display: inline-block;
        color: #0066cc;
    }

        .breadcrumbs-nav .previous:hover {
            cursor: pointer;
            text-decoration: underline;
            color: #004080;
        }

.breadcrumbs-nav .current {
    display: inline-block;
    font-weight: bold;
    font-style: normal;
}

.breadcrumbs-nav .help {
    display: inline-block;
    float: right;
    padding-right: 60px;
    padding-left: 10px;
    cursor: pointer;
    font-style: normal;
}

.breadcrumbs-nav .setting {
    display: inline-block;
    float: right;
    padding-right: 10px;
    padding-left: 10px;
    cursor: pointer;
    font-style: normal;
}

.card-container {
    padding-left: 60px;
    padding-right: 60px;
    min-height: 28px;
}

.card-large {
    background-color: #fff;
    box-sizing: border-box;
    border-top: 7px solid #FFB91D;
    padding: 16px;
    margin-bottom: 28px;
}

.card-menu {
    float: right;
}

.card-large-title-container {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.card-large-title {
    height: 42px;
    color: #424242;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 24px;
    font-weight: bold;
    line-height: 42px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-large-title img {
    max-width: 30px;
    max-height: 30px;
}


.card-small {
    background-color: #fff;
    margin-bottom: 30px;
    display: inline-table;
    width: calc(50% - 15px);
    table-layout: fixed;
    padding: 16px;
}

.card-small:nth-child(odd) {

}

.card-small:nth-child(even) {
    float:right;
}

.card-small .card-small-title-link {
    color: #424242;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px;
    text-transform: uppercase;
    width:100%
}

.card-small-title-link .card-small-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

.card-small-title-link img {
    max-width: 23px;
    max-height: 23px;
}

.card-small .card-small-title:hover {
    text-decoration: none;
}

.card-small .card-small-inner {
    height: 190px;
}

.card-description {
    padding-top: 16px;
    color: #101420;
    font-family: Arial;
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;
    max-height: calc(18px * 6);
}

.card-last-activity {
    padding-top: 8px;
    color: #101420;
    font-family: Arial;
    font-size: 11px;
}

.card-stats {
    color: #101420;
    font-family: Roboto;
    font-size: 18px;
    line-height: 23px;
    text-transform: uppercase;
}

.card-stats-actions{
    width: 33.333%;
    text-align: center;
}

.card-stats img {
    max-width: 22px;
    max-height: 22px;
    padding-bottom: 4px;
}

@media (max-width: 1152px) {
    .card-stats {
        font-size: 14px;
    }
}

@media (max-width: 1024px) {
    .card-small {
        width: 100%;
    }

    .card-stats {
        font-size: 18px;
    }
}

.chip-links-menu .card-menu{float:initial}

.card-menu .dropdown-menu{
    border: 2px solid #D8D8D8;
    border-radius: 0;
    color: #4A4A4A;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    font-weight: bold;
    line-height: 17px;
    padding: 0px 0;
}

.card-menu .dropdown-menu li{
    cursor: pointer;
    margin: 0px;
}

.card-menu .dropdown-menu a{
    padding: 7.5px 20px;
}

.card-menu .dropdown-menu a:hover{
    background-color: #FFB91D;
}

.card-menu .dropdown-menu .divider{
    height: 2px;
    background-color: #D8D8D8;
}

.element-list{
    text-decoration: none !important;
    color: inherit;
}

.element-list a:hover{
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
}

    .element-list a:focus {
        background-color: transparent !important;
        border: none !important;
        border-color: transparent !important;
        outline: 0px none transparent !important;
    }

.support-request-list-container {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.support-request-list-item {
    background-color: #f5f5f5;
}

.support-request-list-item-text {
    margin-top: 20px;
}

.support-request-list-item-complete {
    text-decoration: line-through;
    color: #979797;
}


.chip-part-card-menu.dropdown-menu {
    min-width: 200px;
}
/*
    ---------------
    Containers
    ---------------
*/
.panel-item-heading {
    font-weight: 800;
}

/*
    -------------------------------
    Panel Collapsing Changing Icons 
    -------------------------------
*/
.arrow-toggle.collapsed .glyphicon-chevron-down
{
  display: none;
}

.arrow-toggle .glyphicon-chevron-down
{
  display: inline-block;
}

.arrow-toggle.collapsed .glyphicon-chevron-right
{
  display: inline-block;
}

.arrow-toggle .glyphicon-chevron-right {
    display: none;
}


/*
    ----------------------------------------
    X Icons for Remove which appear on Hover
    ----------------------------------------
*/
.attatchmentThumbnail {
    float:left;
    position:relative
}
.attatchmentThumbnail:hover .deleteIcon{display:block}
.deleteIcon{
    position : absolute;
    display:none;
    top:-12px; 
    right:-12px;
    margin:0 ; 
    z-index:100
} 

.glyphicon-remove-sign{
    font-size: 25px;
}

/*
    File Upload Button Group Formatting
*/
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.btn-remove {
    background: white;
    color: red;
    border: 1px red solid !important;
    text-transform: uppercase;
    font-weight: 500;
}

.btn-remove:hover{
    background: #ffcccc !important;
    color: red;
}

/* Folded Corner Effect for Notes*/
.note-row {
    min-height: 225px;
    padding: 1rem;
}
.note {
  position: relative;
  width: 325px;
  height: 175px;
  padding: 1em 1.5em;
  margin: 10px auto;
  background: #feebbf;
  overflow: hidden;
  padding-bottom: 30px;
}
.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 26px 26px 0;
  border-style: solid;
  border-color: #fdd880 #fff;
  /*shadow*/
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}
.note-tags {
    position: absolute;
    bottom: 0px;
    left: 20px;
}
.noteBoundry {
    width: 325px;
    height: 175px;
    float:initial;
    position:relative;
    overflow:visible;
    margin:auto;
    padding:0;
}
.noteBoundry:hover .deleteNoteIcon{display:block}
.deleteNoteIcon{
    position:absolute;
    display:none;
    top:-4px; 
    right:-4px;
    margin:0 ; 
    z-index:100;
} 
.noteTitle {
    white-space: nowrap;
    overflow:hidden;
}
.noteText {
    white-space: pre-line;
}

.dialogNoTitle .ui-dialog-titlebar{
    display: none;
}

.dialogNoWidgetBackgroud.ui-widget-content {
    background: none;
    padding: 0px;
}

.note-editor {
    width: 96%;
    max-width: none;
    height: 100%
}

.dialog-full-width {
    width: 100%;
    max-width: 100%;
}

textarea.dialog-tall-editor {
    height: 8em;
}
/*
    -------------------------------------------
    REQUEST FOR QUOTE
    -------------------------------------------
*/
hr.rfq-bar {
    border-bottom: thick solid #ffb91d;
}

h2.rfq {
    font-family:Roboto;
    font-size: 20px;
    text-transform: uppercase;
}

.quote-layout {
    padding:15px;
}

div.rfq-disclosure-text {
    border: solid;
    border-width: 1px;
    padding: 1em;
    font-size: small;
    width: 97%;
    height: 10em;
    overflow: scroll;
}

.rfq-disclosure-agreement {
    margin: 1em;
    padding-top: 1em;
}

label.writing-blank {
    font: 400 13px 'Arial', sans-serif;
    color: #353535;
    text-align: left;
    margin-top: 0.4em;
}

span.input-style,label.input-style {
    font-family: Verdana,Arial,sans-serif /*{ffDefault}*/;
    font-size: 1em;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: .5em;
}

.check-box {
    margin-top: 10px !important;
    margin-right: 6px !important;
}

input.writing-blank {
    box-sizing: border-box;
    width: 94%;
    border: 1px solid #d4d1cb;
    padding: 6px 0;
    font: 400 13px 'Arial', sans-serif;
    color: #353535;
    text-align: left;
    margin-bottom: 0.5em;
}

input[type=checkbox] {
    float: left;
    margin-top: 5px;
    visibility: visible;
}

select.writing-blank {
    box-sizing: border-box;
    width: 94%;
    border: 1px solid #d4d1cb;
    padding: 6px 0;
    font: 400 13px 'Arial', sans-serif;
    color: #353535;
    text-align: left;
    margin-bottom: 0.5em;
}

.part-id {
    overflow: auto;
}


/*
-------------------------------------------
SAVE TO PROJECT DIALOG
-------------------------------------------
*/

.project-save-dialog-container {
    width: 500px;
    padding: 8px 0;
}

.project-save-dialog-tree-container {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 200px;
}

.project-save-dialog-tree {
    display: none;
    margin-left: 1em;
}

.system-save-dialog-tree {
    display: none;
    margin-left: 1em;
}

.project-save-dialog-system-select {
    background-color:#00bbff;
}

.project-save-dialog-template-select {
    background-color: #00bbff;
}

.project-save-dialog-new-item {
    color: gray;
    font-style: italic;
}

.project-save-dialog-tree-toggler:not(.project-save-dialog-tree-open):before {
    content: "\25BA";
    margin-right: 6px;
}

.project-save-dialog-tree-toggler.project-save-dialog-tree-open:before {
    content: "\25BC";
    margin-right: 6px;
}

.system-save-dialog-tree-toggler:not(.system-save-dialog-tree-open):before {
    content: "\25BA";
    margin-right: 6px;
}

.system-save-dialog-tree-toggler.system-save-dialog-tree-open:before {
    content: "\25BC";
    margin-right: 6px;
}
/*
-------------------------------------------
SUMMARY REPORT 
-------------------------------------------
*/
.summary-report-form{
    float: left;
}

/*
-------------------------------------------
BUTTONS
-------------------------------------------
*/

.btn:hover, .btn:active, .btn:focus {
    background-color: #ffb91d !important;
    border: 1px solid #ffb91d !important;
    color: #333333 !important;
}

.btn-black {
    color: white;
}

.btn-black:disabled {
    background: #b4b4b4;
}

.btn-black.btn-black-large {
    font-size: 13px;
}

.btn-orange:disabled {
    background: #b4b4b4;
}

.btn-orange:hover, .btn-orange:focus {
    color: #f5f0f0;
}

.btn-trigger {
    background: #ffb91d;
    color: #424242;
}
.btn-trigger:hover {
    color:white;
}
.btn-white a    {
    color:#424242;
    text-decoration:none;
    text-transform:uppercase;
}

.btn-action {
    background-color:#424242;
    font-size: 10px;
    padding: 5px 12px;
     text-transform: uppercase;
}

.btn-action a {
   border-color:#424242;
   color:white;
   text-decoration:none;
  }
.btn-action:hover a{
    color:#353535;
}

.btn.btn-small {
    min-width: 0;
}

button.invalid {
    border-color: #ff0000 !important;
    box-shadow: 0px 0px 5px #ff0000;
}

.modal-header button.close {
    min-width: 0;
}

.modal-header button.close-light {
    min-width: 0;
    margin-top: -5px;
    background-color: inherit;
    color: #8e8e8e;
    padding: 0;
    float: right;
    font-size: 30px;
}

.modal-header{
    position: sticky;
    left: 0px;
}

.modal-cancel-btn {
    color:#424242;
}

.modal-ok-btn {
    color:#fff;
}

.modal-ok-btn:disabled {
    background-color: #424242;
    opacity: 0.65;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.btn-edit {    
    text-transform: uppercase;
}

.btn-edit:before {
    font-family: 'Glyphicons Halflings';
}

.btn-edit:hover {
    color: #333;
}

.btn-edit-pencil:before {
    content: '\270f';
    padding: 0 0.5em 0 0;
    margin: 0 0.5em 0 0;
    border-right: 1px solid;
    float: left;
}


/*
 --------------------------------------------------
   OVERLAY ONLY
---------------------------------------------------
*/
    .overlay {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 100%;
        left: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(66,66,66, 0.5);
        overflow-x: hidden;
        transition: 0.5s;
    }



.overlay-block [class*='col']{ 
	padding:0 5px;
}

.overlay p {
    font-family: 'Roboto';
    padding: 4px 0px 0;
    text-decoration: none;
    font-size: 13px;
    color: #fff;
    display: block;
    transition: 0.3s;
}

.top-arrow {
	padding: 2rem 0 0 12rem;
}

.overlay img {
	padding: 2.5rem 0 0 10rem;
}

.overlay a {
	color: #fff;
	text-decoration:  none;
}
.overlay a:hover, .overlay a:focus {
    color: #ffb91d;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

.cursor {
	cursor:  pointer;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.btn {
	font-family: 'Roboto' !important;
}

.btn-ok  {
	background:none;
	color: #fff;
	padding: 3px 15px; 
	font-size: 20px;
	left:50%;
	width:  200px;
	min-height:  35px;
	border-radius: 18px;
	border:  3px solid #ffb91d;
	/*position: fixed; */

}

.btn-help {
	background: #424242;
	color: #fff;
	padding: 3px 15px; 
	font-size: 16px;
	left:50%;
	min-height:  35px;
	border-radius: 18px;
	text-transform:  uppercase;
	z-index:1;
}

.btn-modal {
	float:right;
	margin-right:40px;
}


.top-space {
	padding-top:  2rem;
	text-align:center;
}
.overlay-block {
	position:absolute;
	display: block;
	width: 580px;
	height:332px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	margin:0 0px 0 40px;
}
.overlay-block .row1{ margin:0 0 0 0px; }
.overlay-block .row2{ margin:0 0 0 30px; }
.overlay-block .row3{ margin:0 0 0 10px; }
.intro-block{
	height:200px;
	margin:35px 0px 0 120px;
}

.intro-block img {
	padding:2.5rem 0 0;
}

#btnOpenOverlay{
	vertical-align:middle;
	min-width:0;
}

#dialogBody .btn-black{
	margin-right:2em;
}

@media (max-width: 767px) {
	.overlay-block {
		margin-top:70px;
	}
	.btn-modal{
		margin-top:2rem;
	}
}


/*
------------------------------------
    "CHIPS" [PART TILES]
-------------------------------------
*/
.chip-container {
    padding-bottom: 30px;
    padding-top: 5px;
    min-height: 550px;
    padding-left: 30px;
}

    .chip-container.rtol {
        float: right;
        padding-left: 0px;
        padding-right: 60px;
    }

.super-sizing div.chip-container {
    padding-left: 0px;
    min-height: 165px !important;
}

.chip-container.full-template {
    margin: 0 auto;
}
    .control-panel {
    position: absolute;
    top: auto;
    left: -5px;
}

.chip-canvas {
    top: 30px;
    left: 15px;
    position: relative;
    pointer-events: none;
}

.chip-canvas.rtol{
    left: -15px;
}

.chip-canvas.chip-canvas-high {
    position: absolute;
}

.chip-grid {
    position: relative;
}

.chip-grid-upper {
    top: 30px;
    left: 15px;
    position: absolute;
    pointer-events: none;
}

.chip-image {
    height: auto;
    width: auto;
    max-width: 66%;
    max-height: 63px;
}

.chip-image.complete {
    filter: brightness(70%);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

.image-overlay.opaque {
    opacity: .7;
}

/* Base style, dimensions etc. */
.chip {
    display: inline-block;
    position: absolute;
    padding-bottom: 20px;
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px;
}

.group-title-container {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 120px;    
    color: #ffffff

}

.group-name {
    position: absolute;
    top: 7px;
}

.groupdip-name {
    color: #ffffff
}

.chip-group {
    background-color: #4C4C4C;
}
    .chip.chip-group.group-start {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

.chip-subgroup {
    background-color: #707070 !important;
    border-style: solid;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: #4c4c4c;
}

.chip.supergroup.group-start {
    border-top-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.chip.supergroup.group-end {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0px;
}

.chip.supergroup {
    padding-top: 5px; 
}

.chip.wide-chip{
    z-index: 1;
}

.group-subgroup.group-control-menu {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
}

.sub-group-menu {
    background-color: #707070 !important;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 1px solid #424242;
    padding-top: 5px;
    padding-bottom: 5px;
}

.sub-group-menu .card-menu{
    float: initial;
}

.chip-right-indicator-container .chip-subgroup{
    border: none;
}

.group-control-menu {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 1px solid #424242;
    background-color: #4C4C4C;
    height: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    float: left;
}

.group-control-menu .card-menu{
    float: initial;
}

.control-symbol{
    cursor: pointer;
    text-align: center;
    padding-top: 1px;
    color: #ffffff;
    font-family: 'Font Awesome 5 Pro';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 300;
}

    .control-symbol[disabled] {
        cursor: auto;
        color: #b4b4b4;
    }

.control-symbol.control-symbol-remove:before {
    content: "\f00d";
}

.control-symbol.control-symbol-info:before {
    content: "\f05a";
}

.control-symbol.control-symbol-plus:before {
    content: "\f0fe";
}

.control-symbol.control-symbol-copy:before {
    content: "\f24d";
}

.control-symbol.control-symbol-filter:before {
    content: "\f0b0";
}

.control-symbol.control-symbol-move:before {
    content: "\f047";
}

.control-symbol.control-symbol-fire:before {
    content: "\f06d";
}

.control-symbol.control-symbol-up:before {
    content: "\f0d8";
}

.control-symbol.control-symbol-down:before {
    content: "\f0d7";
}

.control-symbol.control-symbol-group:before {
    content: "\f247";
}

.control-symbol.control-symbol-back:before {
    content: "\f127";
}

.control-symbol.control-symbol-info:before {
    content: "\f05a";
}

.move-symbol {
    padding-top: 0px;
    border: solid #a5a5a5 1px;
}

.control-data {
    border: solid transparent 1px;
    border-radius: 3px;
    width: 80%;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}

    .control-data.data-value {
        padding-top: 2px;
        border-color: #a5a5a5;
    }

.chip-link {
    display: inline-block;
    position: absolute;
}

.chip-indicator {
    display: inline-block;
    position: absolute;
}

.chip-title {
    height:20%;
}

.chip-image-row {
    height:60%;
}

.chip-subtitle {
    height:20%;
}

.chip-interior-table {
    width:100%;
    height:100%;
    table-layout:fixed;
    padding-bottom: 5px;
}

    .chip-interior-table.chip-masterpart {
        background-color: white;
        border: solid 2px black;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        cursor: pointer;
    }

.invalid-chip {
    border-color: red !important;
}

.non-parker-chip{
    border-radius: 50%;
}

.non-parker-chip .chip-title {
    height: 30%;
}

.non-parker-chip .small-zoom {
    margin-left: 7px;
    margin-right: 7px;
}

.non-parker-chip .chip-image-row {
    height: 45%;
}

.non-parker-chip .chip-subtitle {
    height: 27%;
}

.non-parker-chip .chip-image {
    height: auto;
    width: auto;
    max-width: 63%;
}

.non-parker-chip .chip-text-boundary {
    margin-left: 25%;
    margin-right: 25%;
}

.non-parker-chip .chip-img-boundary {
    margin-left: 15%;
    margin-right: 15%;
}

.chip-img-boundary{
    max-height: 100%;
}

.chip-interior-table .edit-container {
    /* The margin-left here makes the text appear centered despite the checkmark being present. If anyone ever complaints about how they're basically being shafted the space on the left, this is where you'll need to retool it*/
    margin-left: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-interior-table .edit-container.small-zoom {
    margin-left: 16px;
}

.chip-interior-table .edit-container.no-check {
    margin-left: 0px;
}

.chip-interior-table .checkmark-container {
    width: 24px;
}

.chip-interior-table .checkmark-container.small-zoom {
    width: 16px;
}

.chip-interior-table .checkmark-container.no-check {
    width: 0px;
}

/* Chip's interior "white" space with actuator background */
.chip .chip-interior {
    position: relative;
    background-color: white;
    border: solid 2px black;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    cursor: pointer;
}

.chip .chip-interior.frl-chip {
    cursor: auto;
    height: 90%;
}

.chip-text-small{
    font-size: 9px !important;
}

.new-row-text {
    color: #ffffff;
    font-size: 10px;
    position: absolute;
    padding-left: 5px;
    cursor: pointer;
}


.row-dropdown{
    top: 50% !important;
    cursor:pointer;
}

.chip .system-glyph {
    position:absolute;
    right:0;
    top:0;
}

.chip-inactive {
    position: absolute;
    left: 2px;
    color: red;
}

.chip .chip-interior.selected {
    border-color: #FFCD40;
}


.chip.group-highlight .chip-interior{
    border-color: #FFCD40;
    border-width: 4px;
}

.chip-right-indicator-container .group-highlight {
    background-color: #FFCD40;
    height: 4px !important;
}

.chip .chip-interior.add {
    background-color: #424242;
    border-style: dashed;
    border-color: #4C4C4C;
}

.chip .chip-interior.chip-segment {
    border-color: #424242;
    background-color: #424242;
    padding: 5px;
    border-radius: 5px;
}

.chip .chip-interior.chip-masterpart {
    padding-bottom: 15px;
    padding-top: 30px;
    background-color: transparent;
    border: none;
    position: relative;
}

.chip-segment {
    color: #FFFFFF;
}

    .chip-segment .chip-text {
        text-align: left;
    }

.chip-station {
    border: 1px solid #4C4C4C;
    border-radius: 3px;
    background-color: #4C4C4C;
    text-transform: none;
    text-align: center;
}

.connection-text {
    color: #9B9B9B;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    overflow-wrap:break-word;
    white-space:normal;
}

.circle {
    border-radius: 50%;
    width: 45%;
    height: 45%;
    background-color: #4C4C4C;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

    .horizontal-plus {
        position: relative;
        background-color: #FFB91D;
        width: 47.5%;
        height: 5%;
        left: 27.5%;
        top: 47.5%;
    }

    .vertical-plus {
        position: relative;
        background-color: #FFB91D;
        width: 5%;
        height: 47.5%;
        left: 49.25%;
        top: 19.5%;
    }

.chip .chip-interior.add.disabled {
    cursor: not-allowed;
}

.chip .chip-interior.add.disabled .circle {
    border-radius: 50%;
    width: 45%;
    height: 45%;
    background-color: #353535;

    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

    .chip .chip-interior.add.disabled .horizontal-plus {
        position: relative;
        background-color: #424242;
        width: 47.5%;
        height: 5%;
        left: 27.5%;
        top: 47.5%;
    }

    .chip .chip-interior.add.disabled .vertical-plus {
        position: relative;
        background-color: #424242;
        width: 5%;
        height: 47.5%;
        left: 49.25%;
        top: 19.5%;
    }

.chip .chip-interior.nonproduct {
    border-radius: 50%;
}

.chip .chip-interior.nonproduct img.checkmark {
    position: absolute;
    top: 25px;
    right: 25px;
}

/* Container wrapped around the text (using display: table for easy v-center) */
.chip .chip-interior .chip-text-container {
    display: table;
    width: 100%;
    height: 100%;
}

/* Container for the text itself */
.chip-text {
    text-transform: uppercase;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.chip-text-zoom {
    text-transform: uppercase;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding-top: 0px;
    padding-bottom: 0px;
    vertical-align: middle !important;
}

.chip .chip-interior .chip-text-container .chip-text > img {
    max-height: 86%;
    max-width: 100%;
}

.chip .chip-bottom-indicator-container {

}

.chip-link .chip-right-indicator-container {
    
}


.move-buttons-up{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.move-buttons-down {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position: relative;
    top: -3px;
    border-top: none;
}

.copy-part:before {
    font-family: 'Glyphicons Regular';
    content: '\e155';
}

.move-part:before {
    font-family: 'Glyphicons Regular';
    content: '\e152';
}

.move-part.disabled:before {
    color: #353535;
}

.good-link {
    background-color: #0AC410;
    cursor: pointer;
}
.good-symbol {
    color: #0AC410;
    cursor: pointer;
}
.bad-symbol {
    color: #D11515;
    cursor: pointer;
}
.bad-link {
    background-color: #D11515;
    cursor: pointer;
}

.bad-text {
    color: #D11515;
}

.overridden-link {
    background-color: #F8E71C;
    cursor: pointer;
}

.zero-link {    /* For accessories */
    background-color: #8b8b8b;
    cursor: pointer;
}

.chip-part-card-dialog .chip-part-card-status-container {
    display: inline-block;
    margin-right: 10px;
}

.part-card-center{
    height:100%;
}

.chip-part-card-dialog .chip-part-card-status-line {
    border-top: 2px dotted black;
    position: relative;
    top: 9px;
    margin-left: 37.5px;
    margin-right: 37.5px;
}

.chip-part-card-dialog .chip-part-card-status {
    font-size: 9px;
    font-family: Roboto;
    width: 75px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

.chip-part-card-dialog .chip-part-card-status-bullet {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 1px solid;
    background-color: #FFFFFF;
    margin: auto;
    position: relative;
    top: 50%;
}

.chip-part-card-dialog .chip-part-card-status-bullet .fill {
    position: relative;
    background-color: #000000;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    left: 2px;
    top: 2px;
}

.padding5{
    padding: 5px;
}

.chip-part-card-dialog .ui-dialog-titlebar-close {
    visibility: hidden;
}

.chip-part-card-dialog .ui-dialog-titlebar {
    background: #ffb91d;
    text-transform: uppercase;
}

.chip-part-card-dialog .ui-dialog-content {
    background-color: #F1F5F8;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 12.5px;
}

.chip-part-card-inactive {
    padding-right: 4px;
    color: red;
    padding-top: 4px;
}

.chip-part-card-subtitle {
    text-transform: uppercase;
    border-bottom: solid 1px black;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 11px;
    padding-top: 16px;
    padding-left: 8px;
    padding-bottom: 5px;
}

.chip-part-card-partdata-subtitle > .chip-partcard-subtitle-tooltip{
    width:auto;
}

.chip-partcard-subtitle-tooltip {
    padding-left: 5px;
    width: 9%;
    position: absolute;
    bottom: 3px;
}

.chip-part-card-entry-area {
    border: 1px solid #D8D8D8;
    padding: 0.75em;
}

.chip-part-card-entry-area.data-entries {
    padding: 0.75em;
}

.chip-part-card-entry-area.card-stats {
    font-family: Roboto;
    margin-top: 16px;
    font-size: 18px;
    line-height: 23px;
}

.chip-part-card-entry-row {
    font-size: 12px;
    background-color: white;
    margin-bottom: 0.25em;
}

.chip-part-card-entry-area td {
    padding-left: 0.75em;
    padding-right: 0.75em;
    height:100%;
}

.chip-part-card-entry-area tr:first-child td {
    padding-top: 0.75em;
}

.chip-part-card-entry-area tr:last-child td {
    padding-bottom: 0.75em;
}

.part-card-data{
    max-height: 150px;
    overflow-y:auto;
}

.part-card-img{
    width:auto;
    max-height:110px;
}

.chip-part-card-entry-col-left {
    width: 66%;
    padding-top:0.75em;
}

.chip-part-card-entry-col-right {
    width: 33%;
    padding-top: 0.75em;
}

.chip-part-card-btn.btn-black {
    color: white;
}

.chip-part-card-btn.btn-black:hover {
    background-color: black;
}

.chip-part-card-remove-part{
    cursor:pointer;
}

.chip-partcard-subtitle-tooltip ~ div.tooltip div.tooltip-inner {
    min-width: 320px;
}


.btn.btn-outline-style {
    border: 1px solid #FFFFFF;
    border-radius: 22px;
    background-color: transparent;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    min-width: 0px;
}

.btn.btn-outline-style:disabled {
    border: 1px solid #7F7F7F;
    color: #7F7F7F;
}

.btn.btn-outline-style.invert {
    background-color: #FFFFFF;
    color: #424242;
    border: 1px solid #424242;
}

    .btn.btn-outline-style.dashboard-guidance {
        font-size: 11px;
        font-weight: normal;
    }

        .btn.btn-outline-style.dashboard-guidance img {
            height: 20px;
        }

/*  
-------------------------------------------------    
    Toggle Switch  (initialy used in external forces extend/retract)     
-------------------------------------------------
*/
.switch-container {
    display: flex;
    align-items: center;
    float: right;
    min-height: 10px;
    padding-right: 10px;
    margin-bottom: 8px;
}

    .switch-container > * {
        float: left;
        display: block;
    }

    .switch-container > span {
        padding: 4px;
    }

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    margin-bottom: 0;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    bottom: -2px;
    background-color: #2b313f;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider .slider-inner {
        position: absolute;
        content: "";
        height: 25px;
        width: 25px;
        border: 2px solid #2b313f;
        left: -2%;
        bottom: 0px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #ffb91d;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ffb91d;
}

input:checked + .slider .slider-inner {
    border: 2px solid #ffb91d;
    left: 50%;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round .slider-inner {
        border-radius: 50%;
    }

/* smaller toggler*/
    .switch-container > * {
        float: left;
        display: block;
    }


.switch-small {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
    margin: 3px;
}

    .switch-small input {
        display: none;
    }

input .disabled{
    cursor: not-allowed;
}

.slider-small {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    bottom: -2px;
    background-color: #e2e1dd;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider-small .slider-inner {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        border: 2px solid #e2e1dd;
        box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
        left: -2%;
        bottom: 0px;
        background-color: #ffb91d;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider-small {
    background-color: #F1F5F8;
}

input:focus + .slider-small {
    box-shadow: 0 0 1px #ffb91d;
}


/* Rounded sliders */
.slider-small.round {
    border-radius: 34px;
}

.small-text {
    font-size: smaller;
}

div.system-left-panel-scroll {
    padding-top: 2rem;
}

div.system-left-panel-scroll .card-container{
    padding-left: 30px;
    padding-right: 30px;
}

div.dark-pad {
    position: relative;
    top: 25px;
    bottom: 0;
    left: 0;
    padding-top: 0px;
    overflow-y: auto;
    background-color: #424242
}




div.toggle-title{
    border: solid 1px #f1f5f8;
}

.sizing-container div.system-left-panel-scroll {
    margin-top: 25px;
    top: 0;
}

/*
------------------------------------
    DASHBOARD 
-------------------------------------
*/

.dash-mar{
    margin-top: 5px;
    margin-bottom: 5px;
}

.dash-btn{
    padding: 6px;
    width: 100%;
    font-size: 12.5px;
}

.manifoldinput{
    margin-left: 20px;
    width: 60px;
    padding-left: 10px;
}
/*
-----------------------------------------------------
NOTES/ATTACHMENTS VIEW
-----------------------------------------------------
*/
.na-view {
    background-color: white;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    position: absolute;
    top: 0;         /* absolute + 0/0/0/0 forces it to take up the entire space; for some reason no other method worked */
    bottom: 0;
    left: 0;
    right: 0;
}

.na-view .na-view-left-column {
    width: 25%;
    min-height: 100%;
    float: left;
}

.na-view .na-view-left-column .na-view-left-column-container {
    white-space: nowrap;
    overflow: auto;
    text-overflow: ellipsis;
    position: absolute;
    max-height: 100%;
    min-width: 25%;
    max-width: 25%;
}

.na-view .na-view-left-column .na-view-left-column-container .na-view-item {
    cursor: pointer;
    padding: 8px;
}

.na-view .na-view-left-column .na-view-left-column-container .na-view-item-selected {
    background-color: #E2E1DD;
}

.na-view .na-view-right-column {
    padding: 8px;
    width: 75%;
    background-color: #E2E1DD;
    overflow: auto;
    min-height: 100%;
    float: left;
}

.na-view-dialog .ui-dialog-titlebar-close {
    visibility: hidden;
}

.na-view-dialog .ui-dialog-titlebar {
    background: #ffb91d;
    text-transform: uppercase;
}

.na-view-dialog .ui-dialog-content {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 12.5px;
}


/*
--------------------------------------------------
SAVE PART VIEW
---------------------------------------------------
*/

.save-part-main-bg {
    background-color: #FFFFFF;
    width: max-content;
    margin-left: 102px;
    margin-right: 102px;
    margin-bottom:10px;
    padding-left: 33px;
    padding-right: 33px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.save-part-user-guidance {
    color: #101420;
    font-family: Arial;
    font-size: 12px;
    line-height: 12px;
    margin-right: 32px;
    padding-top: 5px;
}

.save-part-oval-number {
    background-color: #000000;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #FFB91D;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
    display: inline-block;
    margin-right: 16px;
}

.save-part-oval-number-small {
    background-color: #000000;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #FFB91D;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
    display: inline-block;
    margin-right: 8px;
}

.save-part-heading-gap {
    height: 25px;
}

.save-part-heading {
    padding-top: 4px;
    color: #000000;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.63px;
    line-height: 24px;
    text-transform: uppercase;
}

.save-part-heading.save-part-heading-small {
    font-size: 18px;
    line-height: 24px;
    padding-top: 4px;
    letter-spacing: 0.31px;
}

.save-part-input-header {
    color: #101420;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    margin-top: 15px;
}

.save-part-input-header.save-part-input-header-right {
    margin-left: 16px;
}

.save-part-name{
    padding-right: 16px;
}

.save-part-input-text {
    height: 2em;
    width: 100%;
    max-width: 100%;
    border: 1px solid #979797;
    margin-right: 16px;
}

.save-part-input-textarea {
    height: 3em;
    width: 100%;
    max-width: 100%;
    border: 1px solid #979797;
}


.save-part-button {
    margin-top: 16px;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
}

/*******************Tutorial Modal************************/

.system-tutorial-modal{
    width: 100%;
    height: 100%;
    padding: 0px !important;
}

.modal-image{
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

.tutorial-btn{
    padding-left: 4px;
    padding-right: 4px;
    cursor: pointer;
}

.tutorial-btn:disabled{
    cursor:not-allowed;
}

.tutorial-gotit-btn {
    float: right;
    width: 100px;
    max-width: 100%;
}

.tutorial-action-row {
    padding: 10px;
    color: #FFFFFF;
    background: #424242;
}

.tutorial-text {
    text-transform: uppercase;
    font-family: 'Roboto' !important;
    font-size: 18px;
    padding-left: 6px;
    padding-right: 6px;
}

.dialogTutorial {
    background-color: #424242;
    position: fixed
}

.btn-tutorial-help {
    margin-top: -4px;
    font-size: 10px;
    text-transform: uppercase;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    padding: 3px 25px;
}

.setting {
    display: inline-block;
    float: right;
    line-height: 1.3;
    vertical-align: middle;
    margin-top: -3px;
    cursor: pointer;
}

.system-breadcrumb .btn-tutorial-help {
    margin-top: 1px;
}
/*********************************************************/

.save-part-button-row {
    padding-right: 75px;
}

.parker-selector-group {
    font-size: 0;
}

.parker-selector-box {
    box-sizing: border-box;
    height: 144px;
    width: 275px;
    border: 1px solid #C0C0C0;
    display: inline-block;
}

.parker-selector-box-title {
    color: #000000;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 11px;
    font-weight: bold;
    line-height: 12px;
    text-transform: uppercase;
    padding-left: 11px;
    margin-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #C0C0C0;
}

.parker-selector-box-action {
    color: #000000;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 11px;
    font-weight: bold;
    line-height: 12px;
    margin-right: 11px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-left: -1px;
    cursor: pointer;
}

.parker-selector-box-action[disabled] {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.parker-selector-box-action-oval-plus {
    background-color: #FFCD40;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    color: #000000;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    margin-right: 6px;
}

.parker-selector-item-space {
    color: #000000;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 500;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    overflow: auto;
    min-height: calc(100% - 26px);
    max-height: calc(100% - 26px);
}

.parker-selector-item-space .parker-selector-item-space-desc {
    margin-top: 7px;
    margin-left: 11px;
    margin-right: 11px;
    margin-bottom: 7px;
    font-weight: normal;
}

.parker-selector-item {
    padding-left: 11px;
    cursor: pointer;
    height: 32px;
}

.parker-selector-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 7px;
    display: inline-block;
    max-width: calc(90%);
}

.parker-selector-item.parker-selector-selected {
    background-color: #FFCD40;
}

.parker-selector-item:not(.parker-selector-selected) .parker-selector-item-arrow-right {
    opacity: 0;
}

.new-project-view{
    max-width: 1000px;
    margin-right: 85px;
}

.new-project-dialog{
    max-width: 100%;
    width: 100%;
}

.parker-part-selector-item {
    cursor: pointer;
    user-select: none;
}

.parker-part-selector-item.parker-part-item-selected {
    background-color: #FFCD40;
}

/*
 --------------------------------------------------
   ACCESSORIES
---------------------------------------------------
*/
/* ADD ACCESSORY MODAL */
.accessories-add-selector {
    font-family: Roboto;
    font-size: 12px;
}

.accessories-add-selector.part-separator {
	height: 33px;
	width: 12px;
	color: #000000;
	font-family: Roboto;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 33px;
}

.accessories-add-selector.title {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0px;
    border: 1px solid #AFAFAF;
    background-color: #F8F8F8;
    text-transform: uppercase;
    padding: 2px 0px 2px 11px;
    font-weight: bolder;
}

.accessories-add-selector.selected .accessorytitle {
    font-weight: bolder;
    font-family: Roboto;
}

.accessories-add-selector.outer-container {
    position: relative;
    height: 260px;
    width: 100%;
}

.accessories-add-selector.inner-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: auto;
}

.accessories-add-selector.inner-box {
    white-space: nowrap;
    height: 100%;
}

.accessories-add-selector.item-box {
    display: inline-block;
    height: 240px;
    vertical-align: middle;
}

.accessories-add-selector.item {
    display: inline-block;
    height: 240px;
    width: 160px;
    border: 1px solid #EFEFEF;
    background-color: #FFFFFF;
    white-space: normal;
    cursor: pointer;
    padding: 4px;
}

.accessories-add-selector.accessorytitle {
    padding-top: 20px;
    padding-bottom: 20px;
}

.accessories-add-selector.selected {
	border: 1px solid #FFCD40;
	background-color: #FFFBF0;
}

.accessories-add-selector.thumbnail {
    max-height: 24px;
}

.accessories-add-selector.attributes {
    list-style-position: inside;
    padding-left: 0;
}

.accessories-add-selector.form-control {
    display: inline;
    width: 200px;
    margin-bottom: 12px;
}


/* ACCESSORY DETAILS MODAL */

.accessories-details-title {
    border: 1px solid #AFAFAF;
    background-color: #ECECEC;
    color: #000000;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 32px;
    text-transform: uppercase;
}

.accessories-details-indicator {
    float: left;
    margin-top: 4px;
    margin-left: -8px;
    margin-right: 4px;
}

button.accessories-delete {
    padding: 0px;
    margin: 0px;
    min-width: 2em;
    border: none;
    background: none;
    border-radius: 0px;
    line-height: 1em;
    border-image-width: 0px;
}

button.accessories-delete:before {
    content: "\f00d";
	height: 14px;
	width: 13px;
	color: #000000;
	font-family: "Font Awesome 5 Pro";
	font-size: 16px;
	letter-spacing: 0.1px;
	line-height: 14px;
	text-align: center;
}

.accessories-details-box {
    box-sizing: border-box;
    border: 1px solid #AFAFAF;
    background-color: #FFFFFF;
    height: 180px;
    width: 100%;
}

.accessories-details-box .accessories-details-box-details {
    box-sizing: border-box;
    border: 1px solid #AFAFAF;
    background-color: #F8F8F8;
    color: #000000;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 17px;
    height: 180px;
}

.accessories-details-box .accessories-details-box-details-title {
    text-transform: uppercase;
    font-weight: bolder;
}

.accessories-details-box .accessories-details-box-thumbnail {
    width: 150px;
}

.accessories-details-box .accessories-details-box-thumbnail img {
    max-width: 150px;
    max-height: 150px;
}

.accessories-details-connected-parts-container {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.accessories-details-connected-parts {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;    
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ACCESSORIES DASHBOARD MISC */

/* Apply accessory-visible class to all items that should be hidden if NOT in accessory mode */
#systemLeftView:not(.accessory-view-enabled) .accessory-visible {
    display: none;
}

/* Apply accessory-invisible class to all items that should be hidden if in accessory mode */
#systemLeftView.accessory-view-enabled .accessory-invisible {
    display: none;
}

#systemLeftView.accessory-view-enabled .accessory-button-count-group {
    border-radius: 10px;
    background-color: #4C4C4C;
}

.accessory-button-count-group {
    padding: 4px 12px 4px 12px;
    color: #FFFFFF;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.accessory-button-count-group-divider {
    height: 46px;
    width: 1px;
    background-color: #666666;
}

.accessory-number {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    height: 24px;
    width: 24px;
    line-height: 24px;
}

.accessory-number.accessory-number-link {
    position: absolute;
    transform: translateY(-50%);
    text-align: center;
    top: 51%;
    left: 28%;
}

.accessory-number.accessory-number-part {
    position:absolute;
    bottom: -6px;
    right: -6px;
}

.accessory-number.good {
    border-radius: 12px;
    background-color: #0AC410;
    text-align: center;
}

.accessory-number.bad {
    background-color: #D11515;
    text-align: center;
}

.accessory-number.overridden {
    background-color: #F8E71C;
    text-align: center;
}

.accessory-number.zero {
    border-radius: 12px;
    background-color: #8b8b8b;
    color: #ffb91d;
    text-align: center;
    font-size: 28px;
    font-weight: 100;
}


/* LINE EDIT MODE DASHBOARD MISC */


/* Apply lineedit-visible class to all items that should be hidden if NOT in lineedit mode */
#systemLeftView:not(.lineedit-view-enabled) .lineedit-visible, #systemRightView:not(.lineedit-view-enabled) .lineedit-visible {
    display: none;
}

/* Apply lineedit-invisible class to all items that should be hidden if in lineedit mode */
#systemLeftView.lineedit-view-enabled .lineedit-invisible, #systemRightView.lineedit-view-enabled .lineedit-invisible {
    display: none;
}

.lineedit-number {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    height: 24px;
    width: 24px;
    line-height: 24px;
}

.lineedit-number.lineedit-number-link {
    position: absolute;
    transform: translateY(-50%);
    text-align: center;
    top: 51%;
    left: 28%;
}

.lineedit-number{
    border-radius: 12px;
    color: #ffb91d;
    text-align: center;
    font-size: 14px;
    font-weight: 100;
}

.lineedit-number.good {
    background-color: #0AC410;
}

.lineedit-number.incomplete {
    background-color: #F8E71C;
}

.lineedit-number.bad {
    background-color: #D11515;
}

/* GUIDANCE */

.guidance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10;
}

.guidance-overlay-highlight {
    z-index: 11;
    position: relative;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 32px rgba(255, 255, 255, 0.6);
}


/*
 --------------------------------------------------
   EXPRESS QUOTE
---------------------------------------------------
*/

.expressquote-bg {
    background-color: white;
    position: relative;
    width: 100%;
    height: 100%;
}

.expressquote-category-table {
    width: 100%;
    min-height: 75vh;
}

.expressquote-category-bar {
    height: 50vh;
}

.expressquote-category-container {
    height: 100%;
    overflow: auto;
    border-left: solid 1px #b5b5b5;
    border-right: solid 1px #b5b5b5;
}

.expressquote-product-info {
    padding-left: 15px;
    padding-right: 15px;
}

.expressquote-data-title{
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 4px
}

.expressquote-data-content {
    padding-bottom: 5px;
}

.express-quote-image {
    padding: 15px;
}


.expressquote-product-container {
    min-height: calc(50vh - 125px);
    max-height: calc(50vh - 125px);
    overflow: auto;
}

.expressquote-product-info-container {
    height: 125px;
    min-height: 100px;
    background-color: #95afe4;
    font-size: 10px;
    font-weight: bold;
}

.expressquote-accessory-checkbox {
    margin-top: 0 !important;
}

.expressquote-selection-container {
    /*max-height: 25vh;
    overflow: auto;*/
}

.expressquote-quotation-container {
    height: 25vh;
    max-height: 50vh;
    overflow: auto;
}

.express-quote-title-bar {
    font-size: 13px;
    font-weight: bold;
    background-color: #cccccc;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-top: solid 2px #b5b5b5;
    border-bottom: solid 1px #b5b5b5;
    border-left: solid 1px #b5b5b5;
    border-right: solid 1px #b5b5b5;
}

.expressquote-quotation-buttonpad {
    padding: 10px;
}

.expressquote-buttons {
    position: sticky;
    left: 0;
    bottom: 0;
    padding: 5px;
    background: #737373;
    z-index: 1;
}

.expressquote-catalog-buttonpad {
    float: right;
}

.expressquote-quoteinfo-maxwidth {
    width: 100%;
}

.expressquote-quoteinfo-padding td {
    padding: 5px 10px 5px 10px;
}

/* Change selection Qty column to black-on-white */
.expressquote-selection-container div.wj-row[aria-level] div.wj-cell:nth-child(4) {
    background-color: white;
    color: black;
}

/* Selection Qty column when row selected */
.expressquote-selection-container div.wj-row[aria-level] div.wj-cell:nth-child(4).wj-state-multi-selected {
    background-color: #80adbf;
    color: white;
}

/* Selection Qty column when it itself is selected */
.expressquote-selection-container div.wj-row[aria-level] div.wj-cell:nth-child(4).wj-state-active {
    background-color: #0085c7;
    color: white;
}

/* Hide FlexGrid child items with this class  */
div.wj-row[aria-level="3"] div.wj-cell .hide-child {
    display: none;
}

div.wj-row[aria-level="2"] div.wj-cell .hide-child-2, div.wj-row[aria-level="3"] div.wj-cell .hide-child-2 {
    display: none;
}

/* Qty in kit accessory row */
.expressquote-selection-container div.wj-row[aria-level="3"] div.wj-cell:nth-child(4) {
    background-color: #dddddd;
    color: black;
}

.expressquote-info-symbol {
    font-family: 'Font Awesome 5 Pro';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: 900;
    vertical-align: middle;
    cursor: pointer;
}

.expressquote-info-symbol:before {
    content: "\f05a";
}

.expressquote-accessory-symbol {
    font-family: 'Font Awesome 5 Pro';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: 900;
    vertical-align: middle;
    cursor: pointer;
}

.expressquote-accessory-symbol:before {
    content: "\f055";
}

.expressquote-delete-symbol {
    font-family: 'Font Awesome 5 Pro';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: 900;
    vertical-align: middle;
    cursor: pointer;
}

.expressquote-delete-symbol:before {
    content: "\f2ed";
}

.express-quote-sub-2{
    font-style: italic;
}

.express-quote-sub-2 td{
    padding-left: 12px;
}

    .express-quote-sub-2 td.no-push {
        padding-left: 0px;
    }

    .express-quote-sub-1 td {
        padding-left: 6px;
    }

        .express-quote-sub-1 td.no-push {
            padding-left: 0px;
        }

/*Thermo Grid*/
.chartholder {
    position: relative;
    width: 100%; /* desired width */
}

    .chartholder:before {
        content: "";
        display: block;
        padding-top: 70%; 
    }

.gridchart {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-right:28px;
}

.thermo-chart{
    display: inline-block;
    width: 100% !important;
    height: 100% !important;
    padding: 25px !important;
}

.thermo-grid{
    padding:15px;
    padding-left: 45px;
}

.thermo-grid-canvas {
    padding-right: 15px
}

.inputbox{
    display: inline-block;
}

.unitlabel{
    display:inline-block;
}

.valuelabel{
    display:inline-block;
    padding-top: 10px;
}

.header{
    font-size: large;
    padding-top:15px;
    padding-left: 15px;
    padding-bottom:15px;
    font-weight:bold;
}

.toolEnableSelector {
    overflow-y: scroll;
    max-height: 100%;
}

.overall-status-container {
    padding-right: 30px;
    max-height: 400px;
    overflow: auto;
}

.overall-status-divider {
    border-top: 1px solid #D8D8D8;
    padding-top: 8px;
    padding-bottom: 8px;
}

.overall-status-bullet {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background-color: #e2e1dd;
    position: relative;
    top: 50%;
}

.overall-status-bullet.overall-status-complete {
    background-color: #ffb91e;
}

.overall-status-bullet.overall-status-complete:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    text-align: center;
    content: "\f00c";
    position: absolute;
    left: 2px;
    top: 1px;
    color: white;
}

.overall-status-text {
    font-size: 11px;
    font-family: Roboto;
    text-transform: uppercase;
}

.overall-status-item-text {
    color: #101420;
    font-family: Roboto;
    font-size: 14px;
    line-height: 23px;
    text-transform: uppercase;
    font-weight: 400;
}

.overall-status-line {
    border-top: 4px solid #e2e1dd;
    position: relative;
    top: 5px;
    display: inline-block;
    width: 100%;
    float: left;
}

.overall-status-line.overall-status-right {
    width: 50%;
    float: right;
}

.overall-status-line.overall-status-left {
    width: 50%; 
}

.overall-status-line.overall-status-complete {
    border-color: #ffb91e;
}

.sizingfooterbuttons{
    padding-bottom:3em;
}

.sizing-bottom-always {
    position: sticky;
    bottom: 0px;
    left: 0px;
    padding: 5px;
    background: #737373;
    z-index: 3;
    width: calc(100% + 30px);
    margin-left: -15px;
}

div.modal-body{
    padding-top: 0px;
}
/*
    -----------------------------
  PARKER FONT SWITCH TO ROBOTO
    -----------------------------
*/

@font-face {
    font-family: 'Glyphicons Regular';
    src: url("fonts/bootstrap/glyphicons-regular.eot");
    src: url("fonts/bootstrap/glyphicons-regular.eot?#iefix") format("embedded-opentype"), url("fonts/bootstrap/glyphicons-regular.woff") format("woff"), url("fonts/bootstrap/glyphicons-regular.ttf") format("truetype"), url("fonts/bootstrap/glyphicons-regular.svg#glyphicons_halflingsregular") format("svg");
}

/* If you need more CSS defintions for the other grades, see https://drive.google.com/drive/folders/1C4qS8sps5M5ovExk6xX2Psarr26vgSlO (make sure to fix the font paths) -RAS */
@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/fa-regular-400.eot");
    src: url("fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("fonts/fa-regular-400.woff2") format("woff2"), url("fonts/fa-regular-400.woff") format("woff"), url("fonts/fa-regular-400.ttf") format("truetype"), url("fonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    src: url("fonts/fa-light-300.eot");
    src: url("fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("fonts/fa-light-300.woff2") format("woff2"), url("fonts/fa-light-300.woff") format("woff"), url("fonts/fa-light-300.ttf") format("truetype"), url("fonts/fa-light-300.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    src: url("fonts/fa-solid-900.eot");
    src: url("fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fonts/fa-solid-900.woff2") format("woff2"), url("fonts/fa-solid-900.woff") format("woff"), url("fonts/fa-solid-900.ttf") format("truetype"), url("fonts/fa-solid-900.svg#fontawesome") format("svg");
}

.fa,
.fas {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

/*
    -------------------
  INTRO BOX EMN & PDN
    -------------------
*/
.ve-logo-word {
    width: 180px;
    height: 93px;
    padding-right: 10px;
}

.ve-header {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: black;
}



/*
    -------------------
    IE Compatability
    -------------------
*/
/*      \\ Toggle*/
/*
body.ieCompatability * .toggle-trigger:before {
    content: '&#xE315;';
    font-family: 'Material Icons';
}
body.ieCompatability * .toggle-trigger.active:before {
    content: '&#xE313;';
    font-family: 'Material Icons';
}
body.ieCompatability * button.delete-segment:before {
    content: "&#xE888;";
    font-family: 'Material Icons';
}*/

@-ms-viewport {
    width: auto !important; /* This fixes the issue in IE where the scrollbars overlap because the screen is set to full width. https://stackoverflow.com/questions/41397578/overlapping-scrollbars-ie*/
}
/*
    -------------------
    General
    -------------------
*/
html {
    overflow-x: hidden;
    font-size: 1rem;
}

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


.heading-black {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

p {
    font: 13px arial, sans-serif;
    color: #353535;
}

div.panel-wrapper {
    padding: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #e2e1dd;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    display: flex;
    align-items: stretch;
}

.version-number {
    height: 20px; /* Footer height */
}

.side-container {
    position: relative;
}

div.left-panel-scroll {
    position: relative;
    top: 25px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
}

div.left-panel-scroll.super-sizing {
    margin-top: 0px !important;
    top: 0;
    min-height: 100vh;
}

.super-sizing .sizingtool-components {
    background-color: #e2e1dd;
    margin-top: 12px;
}

.super-sizing .sizingtool-components .component-container{
    margin: 6px;
}

.super-sizing .sizingtool-components .toggle-trigger {
    background-color: #4C4C4C;
}

.super-sizing .sizingtool-components .breadcrumbs-nav{
    padding-left: 0px;
    background-color: transparent;
    height: auto;
    color: white;
}

    .super-sizing .sizingtool-components .breadcrumbs-nav .previous {
        color: #4c93db;
    }

.super-guidance-text .HelpContainer{
    padding-top: 1%;
}

div.right-panel-buttons {
    padding-top: .5em;
}

div.right-panel-scroll {
    padding-left: 23px;
    height: 100%;
}

.sizing-container div.left-panel-scroll {
    margin-top: 25px;
    top: 0;
}

.field-validation-error {
    color: #ff0000;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

    .input-validation-error:disabled {
        border: 1px solid #eeeeee;
        background-color: #eeeeee;
    }

#sizingErrorList {
    color: red;
    font-weight: bold;
}

/*  EMN & PDN SIZE & SELECT TOOL INTRO BOX*/

.info-card > h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p {
    margin-bottom: 5px;
    padding: 5px 0 5px 0;
    line-height: 150%;
}



/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input:[type='button'], input:[type='password'], input:[type='reset'], input:[type='submit'], input:[type='text'], textarea {
    width: 100%;
}

.dialogNoTitle .ui-dialog-titlebar {
    display: none;
}

.dialogXOnly .ui-dialog-titlebar {
    cursor: auto !important;
    border: none !important;
    padding: 0px !important;
    display: inherit !important;
}

    .dialogXOnly .ui-dialog-titlebar .ui-dialog-titlebar-close {
        position: absolute;
        top: 30px;
        right: 25px;
        cursor: pointer;
        z-index: 1;
    }

    .dialogXOnly .ui-dialog-titlebar .ui-dialog-title {
        display: none;
    }

.dialogNoClose button.close {
    display: none;
}

.ui-dialog-buttonset button {
    float: left;
}

.fine-tuning-body div {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.col-md-9.inner-column .toggle-target input {
    margin-left: 20px;
    margin-right: 13px;
    margin-bottom: 13px;
    max-width: 15em;
}

/*
    -----------------
    Top bar
    -----------------
*/
.top-bar-icon {
    font-weight: 100;
    font-size: 22pt;
    position: relative;
    vertical-align: middle;
    min-height: 80px;
    line-height: 2.3em;
}

    .top-bar-icon.bold {
        font-weight: 800;
    }

.header-bar {
    height: 147px; /* Header height */
}

    /* line 127, ../sass/main.scss */
    .header-bar a span {
        letter-spacing: 2px;
        margin-left: 10px;
        height: 80px;
        vertical-align: middle;
    }


/*
    -----------------
    Container Divs
    -----------------
*/
div.component-container {
    margin: 1.5em 0em 1.5em 0em;
    background-color: #fff;
}

.section-header {
    font: bold 13px arial, sans-serif;
    text-transform: uppercase;
    color: #424242;
    margin: 10px 0 10px 0
}

div.button-container {
    margin: 0.5em 0em 1em 0em;
}

.sizing-body.block-override {
    display: block;
}

.side-container {
    padding: 1em 2em;
    background-color: #e2e1dd;
    padding-right: 1em;
    padding-left: 1em;
    padding-top: 0px;
}

.super-sizing.side-container {
    top: 0px;
    bottom: 0em;
}

    .side-container div a {
        margin: 0.5em 0em;
    }

    .side-container div button {
        margin: 0.5em 0em;
    }

.filter-item.all-valid {
    /*border: 5px solid green;*/
    box-shadow: 0 0 10px green;
}

.filter-item.all-invalid {
    /*border: 5px solid red;*/
    box-shadow: 0 0 10px red;
}

.filter-item.some-valid {
    /*border: 5px solid gold;*/
    box-shadow: 0 0 10px gold;
}

.filter-item label {
    font-weight: 700;
}

.filter-item-container {
    padding: 0.5em 0em 0.5em 0em;
}

.filter-item-title-container {
    padding-left: 16px;
}

.filter-item-description-container {
    padding-left: 16px;
}

.filter-item progress::-moz-progress-bar {
    background: #ffb91d;
}

.filter-item progress::-webkit-progress-value {
    background: #ffb91d;
}

.filter-item progress {
    -webkit-appearance: none;
    appearance: none;

    background-color: #e2e1dd;
    width: 100%;
    height: 20px;
    color: #ffb91d;
}

.filter-item.filter-item-progress {
    font-size: 10px;
    font-weight: bold;
}


.filtergrid-button {
    width: 75%;
    margin: 0 auto;
}

.filtergrid-image {
    padding-top: 5px;
    padding-bottom: 5px;
}

.filtergrid {
    background-color: #e2e1dd;
    display: table;
    margin-bottom: 15px;
}

.failure-message-title{
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 1.25em;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.failure-message span {
    font-weight: bold;
    
}

    .failure-message span:before {
        content: "\e107";
        font-family: 'Glyphicons Halflings';
        padding-right: 5px;
    }

.failure-message div {
    padding-top: 6px;
}

.filter-left {
    padding-left: 0;
    padding-right: 0;
}

.filter-content {
    padding-bottom: 8px;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
}

@media (min-width: 1025px) and (max-width: 1199px) {
    .filter-left {
        padding-right: 20px;
    }
}

@media (max-width: 768px) {
    .filter-item-description-container {
        padding-left: 0px;
        padding-bottom: 10px;
    }

    .filter-item-title-container {
        padding-left: 0px;
    }

    .filter-content {
        -webkit-flex-flow: column-reverse;
        display: flex;
    }

    .product-page-button {
        margin-bottom: .8em;
    }

    .product-filter-box {
        padding-top: 8px;
    }

        .product-filter-box.filter-border {
            border-top: 1px #cccccc solid !important;
            border-left: none !important;
            margin-top: 16px;
        }

    .filter-image {
        max-height: 85px !important;
    }

    .filter-title {
        height: inherit !important;
    }
}

.filter-ellipsis-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-title {
    font-weight: 700;
    text-align: center;
    height: 36px;
}

.filter-container > label > input[type=checkbox] {
    margin: 2px 5px 2px 0;
}

.filter-item {
    display: inline-block;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #FFF;
    margin: 1em 0em;
    padding: 1em;
}

.filter-item-description {
    font-size: 9pt;
    padding-bottom: 8px;
}

.filter-item-checkbox {
    vertical-align: bottom;
    margin: 2px !important;
}

.rel-price {
    padding-top: 2px !important;
}

.filter-item-compare.filter-card {
    margin: 0px !important;
    vertical-align: middle;
    border: none;
    padding-top: 8px !important;
}

.filter-item-compare.filter-card label .filter-item-checkbox {
    margin-right: 5px !important;
}

.product-filter-box {
    height: 100%
}

    .product-filter-box.filter-border {
        border-left: 1px #cccccc solid;
    }

.filter-item-actions {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 8px;
}

.filter-border-top {
    border-top: 1px #cccccc solid;
}

.filter-border-bottom {
    border-bottom: 1px #cccccc solid;
}

.filter-item-image-row {
    display: inherit;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
}

.filter-button {
    margin-bottom: 0px !important;
}

.filter-image {
    max-height: 125px;
    display: block;
    margin: auto;
}

.configure-container {
    width: 100%;
}



/*
    -----------------
    Drop Downs
    -----------------
*/
input {
    margin-bottom: 0.5em;
}

#SizingToolForm input {
    text-align: right;
}
/* line 186, ../sass/02-patterns/_forms.scss */
select, input[type="select"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d4d1cb;
    border-radius: 2px;
    padding: 0.6em 1.75em 0.5em 0.75em;
    background: #fff url("img/angle-down.png") no-repeat calc(100% - 1em) 50%;
    min-width: 6em;
    margin-bottom: 0.5em;
    width: 100%;
}
/* line 194, ../sass/02-patterns/_forms.scss */
select:active, select:focus, input[type="select"]:active, input[type="select"]:focus {
    outline: none;
    border-color: #ffb91d;
    -moz-box-shadow: 0 0 2px #ffb91d;
    -webkit-box-shadow: 0 0 2px #ffb91d;
    box-shadow: 0 0 2px #ffb91d;
}

select:disabled {
    background: #EBEBE4;
    cursor: no-drop;
}

/* remove the drop down arrow on single value drops*/
select.singleValueDrops {
    cursor: default;
    text-indent: 0.01px;
    display: block;
    width: 100%;
    height: 31px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.38;
    color: #555555;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #d4d1cb;
    /* vendor */
    -moz-appearance: none;
    -webkit-appearance: none;
    -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);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-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;
}
/*no background drop arrow for IE*/
select.singleValueDrops::-ms-expand {
    display: none;
}
select.form-control {
    background: #fff url(img/angle-down.png) no-repeat calc(100% - 1em) 50%;
}

    select.form-control:disabled {
        background: none;
    }

/*
    -----------------
    Toggle Div
    -----------------
*/

div.toggle {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

    div.toggle.motion-segment-container {
        margin-top: 0em;
        margin-bottom: 0em;
    }

    div.toggle.motion-graph-container {
        margin-bottom: 0em;
    }

.toggle-trigger > .chevron-down:before {
    display: none;
}

.toggle-trigger.active > .chevron-down:before {
    content: "\e114";
    font-weight: 100;
    font-size: 16pt;
    position: absolute;
    right: 0.75em;
    top: 0.5em;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
}

.toggle-trigger.active > .chevron-right:before {
    display: none;
}

.toggle-trigger > .chevron-right:before {
    content: "\e080";
    font-weight: 100;
    font-size: 16pt;
    position: absolute;
    right: 0.75em;
    top: 0.5em;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
}

.header-tooltip {
    position: relative;
    padding: 1em 2em;
    background-color: #424242;
    color: white;
}

    .header-tooltip p {
        margin: 0;
        font-family: 'Roboto', Helvetica, Arial, sans-serif;
        font-weight: 500;
        font-size: 1.25em;
    }

div.fine-tuning-graph {
    width: 550px;
}

/*
    -----------------
    Buttons
    -----------------
*/
button {
    color: white;
    background: #424242;
    border: none;
    border-radius: 50px !important;
    min-width: 11em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    outline: none;
}

@media (max-width: 1024px) {

    button.btn-black-compare {
        min-width: 5em;
    }
}

button:hover, button:focus, .btn:hover, .btn:focus {
    background: #252525;
    color: #FFFFFF;
}

button:disabled, .button-disabled {
    background: #b4b4b4 !important;
}

    .button-disabled:hover, .button-disabled:focus {
        background: #b4b4b4;
        cursor: default;
    }

button.button-modal-trigger {
    background: #ffb91d;
    color: #424242;
    min-width: 10em;
    text-transform: uppercase;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

    button.button-modal-trigger:hover, button.button-modal-trigger:focus {
        color: white;
    }

button.delete-segment {
    padding: 0px;
    margin: 0px;
    min-width: 2em;
    border: none;
    background: none;
    border-radius: 0px;
    line-height: 1em;
    border-image-width: 0px;
}

    /* glyphicon-remove-trash can (updated 9-20-19) */
    button.delete-segment:before {
        content: "\e020";
        font-weight: 100;
        font-size: 15pt;
        position: absolute;
        right: 2.1em;
        top: 0.1em;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-weight: normal;
        line-height: 1em;
        vertical-align: middle;
    }




    button.delete-segment:disabled:before, .delete-segment.button-disabled:before {
        color: #b4b4b4;
    }

button.stretch {
    width: 100%;
    min-width: 2em !important;
}

button.add-segment {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1em;
    font-weight: bold;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    vertical-align: middle;
}

.btn.btn-black:hover, .btn.btn-black:focus, .btn.btn-black.focus {
    color: white;
}

.chatButton {
    padding-right: 15px;
}

.fix-ph-chat-cursor {
    cursor: pointer;
}

p.guidance {
    margin-bottom: 15px;
    padding: 10px 0px 10px 0px;
}

.dropdown .select {
    border-radius: 0 !important;
}

/*
    -----------------
    Links
    -----------------
*/
button.button-link.stretch {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8em;
    font-weight: bold;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#btnUpdateResults,
#btnShowComparison,
a.button-link {
    -moz-appearance: none;
    -webkit-appearance: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8em;
    font-weight: bold;
    width: auto;
    cursor: pointer;
    display: block;
    display: inline-block;
    text-decoration: none;
    margin: 0;
    color: white;
    background: #424242;
    border: none;
    border-radius: 50px;
    min-width: 11em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    outline: none;
    text-align: center;
}

#btnUpdateResults,
#btnShowComparison {
    width: 100%;
    margin: 0.5em 0;
}

    #btnUpdateResults:disabled,
    #btnShowComparison:disabled {
        background: #b4b4b4;
        cursor: default;
    }

a.button-link:hover, a.button-link:focus {
    color: white;
    text-decoration: none;
}

a.button-link.stretch {
    width: 100%;
}

div.orientation-selector {
    width: 165px;
    height: 165px;
    border-width: 2px;
    border-color: transparent;
    border-style: solid;
}

    div.orientation-selector img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

img.orientation-selector {
    border-width: 2px;
    border-color: transparent;
    border-style: solid;
}

    img.orientation-selector:hover {
        border-width: 2px;
        border-color: #ffb91d;
        border-style: solid;
    }

img.orientation-selector-selected {
    border-color: #ffb91d;
}

.MotionSegmentHeader-Label {
    font-weight: bold;
    font-size: 1.25em;
    padding-left: 10px;
    padding-right: 10px;
}

div.toggle-trigger:not(.active) div.MotionSegmentHeader-LabelFull {
    display: none;
}

div.toggle-trigger.active div.MotionSegmentHeader-LabelCollapsed {
    display: none;
}


.primary .toggle-list > li {
    margin-bottom: 0;
}

.toggle-trigger {
    position: relative;
    padding: 1em 2em;
    background-color: #424242;
    color: white;
}

    .toggle-trigger:hover {
        cursor: pointer;
    }

    .toggle-trigger p {
        margin: 0;
        font-family: 'Roboto', Helvetica, Arial, sans-serif;
        font-size: 1.25em;
    }

    .toggle-trigger h2, .toggle-trigger h4, .toggle-trigger h4 {
        -moz-transition-property: all;
        -o-transition-property: all;
        -webkit-transition-property: all;
        transition-property: all;
        -moz-transition-duration: 0.25s;
        -o-transition-duration: 0.25s;
        -webkit-transition-duration: 0.25s;
        transition-duration: 0.25s;
        -moz-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        margin-bottom: 0;
        /* prevents funny bounce on toggle */
    }

.toggle-target {
    display: none;
    padding: 1em 2em;
    background-color: #fff;
}

.toggle-target.show {
    display: inherit;
    padding: 1em 2em;
    background-color: #fff;
}

label.writing-blank {
    font: 13px arial, sans-serif;
    color: #4a4a4a;
    text-align: left;
    margin-top: 0.4em;
}

.range-label {
    font: 13px arial, sans-serif;
    color: darkgray;
    text-align: left;
    margin-top: 0.4em;
    vertical-align: top
}

span.toggle-trigger {
}

.externalForceAddRemove:hover {
    cursor: pointer;
}

.actionLinks:hover {
    cursor: pointer;
    color: #004080;
}

.actionLinks {
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    color: #0066cc;
}



.validation-check {
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

    .validation-check:hover {
        cursor: pointer;
    }

    .validation-check.invalid-result {
        color: red;
    }

    .validation-check.valid-result {
        color: green;
    }

.best-result {
    color: #ffb91d;
    font-size: 16px !important;
}

    .best-result:before {
        font-size: 18px !important;
    }

.best-result-row {
    background-color: #ffe5a9 !important;
    border-top: .5px solid #ffb91d !important;
    border-bottom: .5px solid #ffb91d !important;
}

.card-title {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 1.25em;
    font-weight: 500;
    text-transform: uppercase;
    vertical-align: middle;
}

.question-mark {
    height: 25px;
    width: auto;
    padding-left: 5px;
}

.row {
    margin-top: 1px;
    margin-bottom: 1px;
}

.RowSpacing {
    margin-top: 15px;
    margin-bottom: 15px;
}

.list {
    padding-right: 24px !important;
}

.oa-comboBox {
    padding-right: 2.5em !important;
}

.spin-edit {
    height: 31px;
}

/*Remove padding for small columns on EMN sizing tool.*/
.no-pad {
    padding: 0px;
}

.explanation-text {
    font-size: 10px;
    padding-top: 5px;
    text-align: center
}


/*
    -------------------------------------------------------------
    COMPONENT SPACING INNER EMN - APPLICATION & ORIENTATION
    -------------------------------------------------------------
*/

.top-spacer {
    margin-top: 1em;
}

.top-spacer-2x {
    margin-top: 2em;
}

.top-spacer-4x {
    padding-top: 6em;
}


/*Compare Screen Styling*/
#compareTable .compare-cell-average {
    background-color: #ffcd40; /*ffb91d*/
}

#compareTable .compare-cell-low {
    background-color: #0Ad833; /*0AC410*/
}

#compareTable .compare-cell-high {
    background-color: #D12938; /*D11515*/
}

#compareTable td .minimum {
    background: #FFB91D;
}
/*  END OF EMN STYLING*/

/*  BEGIN COMPARE STYLING*/

.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .row.is-flex > [class*='col-'] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

.efcp-unit-pos-row {
    height: 50%;
}

.efcp-unit-pos-top {
    position: absolute;
    bottom: 50%;
    padding-left: 15px;
}

.efcp-unit-pos-bottom {
    position: absolute;
    bottom: 0%;
    padding-left: 15px;
}

.canvas-efcp {
    width: 162px;
    height: 165px;
}

.efcp img {
    height: 180px;
}

.efcp-spacer-xs {
    margin-top: 7rem;
    margin-right: 2rem;
}

.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .row.is-flex > [class*='col-'] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

.efcp-unit-pos-row {
    height: 50%;
}

.efcp-unit-pos-top {
    position: absolute;
    bottom: 50%;
    padding-left: 15px;
}

.efcp-unit-pos-bottom {
    position: absolute;
    bottom: 0%;
    padding-left: 15px;
}

.canvas-efcp {
    width: 162px;
    height: 155px;
}

.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .row.is-flex > [class*='col-'] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

.efcp-unit-pos-row {
    height: 50%;
}

.efcp-unit-pos-top {
    position: absolute;
    bottom: 50%;
    padding-left: 15px;
}

.efcp-unit-pos-bottom {
    position: absolute;
    bottom: 0%;
    padding-left: 15px;
}

.canvas-efcp {
    width: 162px;
    height: 155px;
    padding-right: 1em;
}

/* PDN SPECIFIC CSS BEGIN*/

/*--------------------------
    ENTRY PAGE
----------------------------*/
.entry-spacer {
    padding-top: 3em;
    min-height: 325px;
}

/*--------------------------
    SIZING PAGE
----------------------------*/

.coordinate {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 1px;
    height: 100px;
    width: 100px;
}

    .coordinate.alt {
        /*right: 15px;*/
        bottom: 5px;
    }

.orientation-of-actuator-section .coordinate {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 0;
    border: 1px solid #AAA;
    height: 100px;
    width: 100px;
}

.coordinate.zoomControl {
    position: absolute;
    width: 50px;
    height: auto;
    margin: 1px;
    bottom: 10px;
    right: 5px;
    border: none;
}

.orientation-of-actuator-section .coordinate.alt {
    /*right: 15px;*/
    bottom: 5px;
}

.coordinate span {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #FFF;
    text-shadow: 0px 0px 3px #000;
}

.coordinate.alt span {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    top: -20px;
}

.glyphicon.large:before {
    font-size: 24px;
    color: #ffb91d;
}

@media (min-width: 768px) {
    .glyphicon.large:before {
        font-size: 24px;
        color: #ffb91d;
    }
}

.glyphicon.xllarge:before {
    font-size: 32px;
    color: #ffb91d;
}

@media (min-width: 768px) {
    .glyphicon.large:before {
        font-size: 32px;
        color: #ffb91d;
    }
}

.zoom-pad {
    padding-bottom: 3px;
    padding-top: 3px;
    cursor: pointer;
}

.external-force-header {
    border-bottom: 2px solid #FFB91D;
}

.spin-edit {
    height: 31px;
}

.op-temp {
    padding: 0 5px 0 5px;
}

.tooltip-pdn {
    z-index: 100;
}

#orientationSelectionContainer .ui-slider {
    margin-top: 8px;
    margin-bottom: 8px;
}

/*
--------------------------------------------------
  LOAD CHARACTERISTICS
--------------------------------------------------
*/
.lc-image {
    max-height: 100%;
    max-width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.application-grouped-left {
    padding-left: 0px;
    padding-right: 15px;
}

.application-grouped-right {
    padding-left: 15px;
    padding-right: 0px;
}

.load-opt-disabled img{
    opacity: 0.2;
    cursor: not-allowed;
}

/* Border directly on image */
div.load-opt-selector {
    border-width: 2px;
    border-color: transparent;
    border-style: solid;
    height: 10em;
    padding: 4px;
    margin-bottom: 4px;
    text-align: center;
}


    div.load-opt-selector:hover {
        border-width: 2px;
        border-color: #ffe9b7;
        border-style: solid;
        cursor: pointer;
    }

    div.load-opt-selector.load-opt-disabled:hover {
        border: none;
    }

    div.load-opt-selector.selected {
        border-color: #ffb91d;
    }

.load-characteristics-title {
    font-weight: bold;
    font-size: 17px;
}

.load-characteristics-row {
    margin-bottom: 18px;
}

.load-characteristics-group-title {
    border-top: solid 1px #424242;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 4px;
}
/*
--------------------------------------------------
    CANVAS POSTITION OF ATTACHED MASS
--------------------------------------------------

   
*/
.canvas-load {
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
    background-color: #FFF;
}

/*
--------------------------------------------------
   MOTION DETAILS
--------------------------------------------------
*/
.motion-row {
    margin-top: 20px;
    margin-bottom: 20px;
}

/*
--------------------------------------------------
  PDN SPECIFICATIONS CHECKBOXES
--------------------------------------------------
*/
.specs-row {
    margin-top: 30px;
}

.clean-room {
    margin-top: 10px;
}

/*
--------------------------------------------------
  PDN EXTERNAL FORCES
--------------------------------------------------
*/

.ef-table-header {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 12px;
}

.ef-smallpad {
    padding-bottom: 12px;
}

.ef-header {
    margin-top: 12px;
}

.ef-header-text {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.ef-header-text h3 {
    display: flex;
    align-items: center;
}

.ef-header-text h3 span {
    margin-left: 5px;
}

/*  
-------------------------------------------------    
    3D ORIENTATION STYLING      
-------------------------------------------------
*/

.btn.reset-orientation {
    -moz-appearance: none;
    -webkit-appearance: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8em;
    font-weight: bold;
    width: auto;
    /*float:right;*/
    margin-left: 4em;
    cursor: pointer;
    display: block;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
    color: white;
    background: #424242;
    border: none;
    border-radius: 50px;
    min-width: 11em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    outline: none;
    text-align: center;
}

.view-buttons {
    /*position: absolute;
    display: block;
    bottom: 0px;*/
    margin-bottom: 10px;
}

button.nextstep {
    background: #ffb91d !important;
    color: #424242 !important;
    font-size: .8em;
}

    button.nextstep:disabled {
        background: #aaa599 !important;
        color: #727272 !important;
    }

a.nextstep {
    background: #ffb91d !important;
    color: #424242 !important;
}

    a.nextstep:disabled {
        background: #aaa599 !important;
        color: #727272 !important;
    }

button.compare-configure {
    padding: 2px !important;
    font-size: .8em;
    position: absolute;
    left: 0px;
    min-width: 0px !important;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 5px;
    padding-right: 5px;
    width: 90% !important;
}

a.compare-configure {
    padding: 2px !important;
    font-size: .8em;
    position: absolute;
    left: 0px;
    min-width: 0px !important;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 5px;
    padding-right: 5px;
    width: 90% !important;
}

.wj-cell.spill {
    overflow: visible;
    z-index: 1; /* render over empty cells */
}

.wj-cell.no-spill {
    z-index: 1; /* render over empty cells */
}

    .wj-cell.spill:hover {
        z-index: 2; /* render over empty cells */
    }

.compare-spill{
    height:100%;
}

.compare-zoom {
    transition: transform .2s;
    height: 100%;
    margin: 0 auto;
}

.compare-zoom:hover {
    transform: scale(7); /* (700% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.compare-zoom .cadthumbs{

}

.isometric-img{
    max-height: 125px;
}

.isometric-img.flow{
    max-width: 26px;
}

.cadthumbs {
    text-align: center;
}

    .compare-zoom-click .flow {
        margin: 0px;
        padding: 1px;
        cursor: pointer;
        overflow:hidden;            
        color: #0066cc;
        width:53px
    }

        .compare-zoom-click .flow:before {
            content: "\e164";
        }

        .compare-zoom-click .flow:hover {
            color: #004080;
        }

        .compare-zoom-click .flow .flow-img {
            display: none;
        }

.compare-img-modal .cadthumbs{
    text-align: left;
}

.compare-img-modal .cadthumbs .flow-img {
    max-width: 100%;
    padding: 5px;
}

.compare-img-modal .cadthumbs .flow-img .isometric-img.flow {
    max-width: 100%;
    max-height: 100%;
}

.flow-img {
    display: inline-block;
    width: fit-content;
}


</style >


.column-header-compare {
    text-overflow: ellipsis !important;
}

button.preset-view {
    min-width: 0px;
    line-height: 1;
    margin-top: 10px;
}

    button.preset-view:hover {
        color: #ddd
    }

button.nextstep:hover {
    color: #FFF;
}

.roll_label {
    border-bottom: 2px solid #dd0000;
}

.pitch_label {
    border-bottom: 2px solid #008800;
}

.yaw_label {
    border-bottom: 2px solid #0000dd;
}

.attachedMass_label {
    border-bottom: 2px solid #ffb91d;
}

.stopperMass_label {
    border-bottom: 2px solid #5A9AD6;
}

/*  
-------------------------------------------------    
    PDN COMPARE CUSTOM STYLING      
-------------------------------------------------
*/

/*BOOTSTRAP OVERRIDE FOR LIST ITEMS*/
.compare-list-group {
    position: relative;
    display: block;
    padding-bottom: 5px;
    padding-top: 5px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16px;
}

.toggle-target > ul {
    list-style-type: none;
}

li > .compare-list-group {
    min-height: 40px;
    padding-bottom: 10px;
}


/* PDN SPECIFIC CSS END*/

/*  
-------------------------------------------------    
    RESULTS FILTER STYLING      
-------------------------------------------------
*/

.col-spacer {
    padding-left: 1rem;
    margin-left: 1em;
}

/*  
-------------------------------------------------    
    Toggle Switch  (initialy used in external forces extend/retract)     
-------------------------------------------------
*/
.switch-container {
    display: flex;
    width: 100%;
    min-height: 10px;
}

    .switch-container > * {
        float: left;
        display: block;
    }

    .switch-container > span {
        padding: 4px 20px;
    }

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    bottom: -2px;
    background-color: #2b313f;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #ffb91d;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ffb91d;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

/* smaller toggler*/
.switch-container {
    width: 100%;
    min-height: 10px;
}

    .switch-container > * {
        float: left;
        display: block;
    }

    .switch-container > span {
        padding: 4px 20px;
        text-align: left;
    }

.switch-small {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
}

    .switch-small input {
        display: none;
    }


input:checked + .slider-small {
    background-color: #ffb91d;
}

input:focus + .slider-small {
    box-shadow: 0 0 1px #ffb91d;
}


input:checked + .slider-small .slider-inner {
    border: 2px solid #ffb91d;
    left: 50%;
}

/* Rounded sliders */
.slider-small.round {
    border-radius: 34px;
}

    .slider-small.round .slider-inner {
        border-radius: 50%;
    }

.small-text {
    font-size: smaller;
}
/*
CUSTOM CSS FOR Inputs on PARKER.COM Sizing & Selection Tool
  based on style guide from January 15, 2017

    Some aren't currently used, leaving here commented out to preserve the css work / style.
*/
/*.valid-input {
    border: 2px solid #0AC410;
}*/

/*  Below the input box  */
/*.valid-text {
    color: #0AC410;
    font-family: Arial;
    font-size: 12px;
}*/

.warning-input {
    border: 1px solid #ffb91d;
    background-color: rgba(255,185,29,0.15);
}

    .warning-input + .tooltip {
        left: 25% !important; /* '!important' I didn't want to do this, but you've forced my hand. */
    }

/*  Below the input box  */
.warning-text {
    color: #ffb91d;
    font-family: Arial;
    font-size: 12px;
}

/*.error-input {
    border: 2px solid #d11515;
}*/

/*  Below the input box  */
.error-text {
    color: #d11515;
    font-family: Arial;
    font-size: 12px;
}



/*** jQuery Dialog***/
button.ui-dialog-titlebar-close {
    min-width: 0px;
}

    button.ui-dialog-titlebar-close::after {
        font-size: 12px;
        content: "\e014";
        font-family: 'Glyphicons Halflings';
    }

.results-warning-dialog .ui-dialog-titlebar {
    background: #ffb91d;
}

.results-warning-dialog h4,
.results-warning-dialog p {
    font-size: 14px;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 2000px;
    }
}



.bux {
    position: relative;
    text-align: left;
    color: #ddd;
    font-size: 20px;
}

    .bux .fa {
        /*width:20px;*/
        height: 1em;
        line-height: 1em;
        text-align: left;
        display: inline-block;
        font-family: 'Roboto', Helvetica, Arial, sans-serif;
    }

    .bux .fa-usd:before {
        /*content:'\f155';*/
        content: '$';
        font-size: 1em;
    }

.greenbux {
    color: #009245;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    left: 0;
    top: 0;
}

#compareTable.stickyheader thead {
    position: fixed;
    top: 00px;
    background: #fff;
    z-index: 1;
    padding: 10px 0 0;
    min-width: 126px;
    /*box-shadow: 0px 0px 10px rgba(0,0,0,0.3);*/
}

#table.dataTable.table-condensed thead {
    min-width: 136px;
    border-right: 1px solid #ddd;
    text-align: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    #compareTable.stickyheader thead {
        top: 100px;
        min-width: 126px;
    }

    #table.dataTable.table-condensed thead {
        min-width: 136px;
        border-right: 1px solid #ddd;
        text-align: center;
    }

    #compareTable td {
        word-wrap: break-word;
        min-width: 126px;
        max-width: 126px;
    }

    #compareTable.stickyheader thead th {
        box-sizing: content-box;
        min-width: 126px;
        max-width: 126px;
    }

    table#compareTable:not(.stickyheader) {
        table-layout: fixed;
        min-width: 126px;
        max-width: 126px;
    }
}



table.dataTable.table-condensed .sorting:after,
table.dataTable.table-condensed .sorting_asc:after,
table.dataTable.table-condensed .sorting_desc:after {
    top: auto;
    right: 4px;
    bottom: 4px;
}

table.dataTable > thead > tr > th:last-child,
table.dataTable > thead > tr > td:last-child,
table.dataTable > tbody > tr > th:last-child,
table.dataTable > tbody > tr > td:last-child,
table.dataTable > tfoot > tr > th:last-child,
table.dataTable > tfoot > tr > td:last-child {
    text-align: center;
}

/*table.dataTable > thead > tr > th[class*=sort]:after{ display:none; }
table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting{ padding-right: inherit; }

table.dataTable thead span.sort-icon {
  display: inline-block;
  padding-left: 5px;
  width: 16px;
  height: 16px;
}


table.dataTable thead .sorting span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png') no-repeat center right; }*/

@media (min-width: 980px) {
    table.dataTable.table-condensed > thead > tr > th {
        min-width: 126px;
        max-width: 126px;
        border-right: 1px solid #ddd;
        text-align: center;
    }

    #compareTable.stickyheader td {
        min-width: 142px;
        max-width: 142px;
    }
}

@media (max-width: 979px) {
    table.dataTable.table-condensed > thead > tr > th {
        min-width: 126px;
        max-width: 126px;
        border-right: 1px solid #ddd;
        text-align: center;
    }

    #compareTable.stickyheader td {
        min-width: 126px;
        max-width: 142px;
    }

    table.dataTable.table-condensed > thead > tr > th:first-child {
        min-width: 126px;
    }

    #compareTable.stickyheader td:first-child {
        min-width: 126px;
    }
}

.table > tbody > tr:last-child td:last-child {
    text-align: right;
    min-width: 126px;
}



/*
	Arc of Motion - start
*/
.align-center {
    text-align: center;
}

.aomStep {
    background: #222;
    color: #FFB91D;
    width: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 1em;
    display: inline-block;
    font-weight: 700;
}

.light-gray-bg {
    background: rgb(245,244,240);
    position: relative;
    z-index: 1;
}

.toggle-target .light-gray-bg.pull-right:after {
    content: '';
    position: absolute;
    top: -14px;
    right: -11px;
    bottom: 0;
    left: 0;
    background: inherit;
    z-index: -1;
}

.yellow-txt {
    color: #FFB91D;
}

#leverClass {
    color: #FFB91D;
    text-transform: uppercase;
    float: left;
}

#classOpts {
    float: right;
}

    #classOpts > label input {
        position: absolute;
        opacity: 0;
    }

    #classOpts > label {
        padding: 8px 16px;
        text-transform: uppercase;
        position: relative;
    }

        #classOpts > label.btn:first-child:not(:last-child) {
            border-radius: 20px 0 0 20px;
        }

        #classOpts > label.btn:last-child:not(:first-child) {
            border-radius: 0 20px 20px 0;
        }

        #classOpts > label.active {
            background: #FFB91D;
        }

        #classOpts > label.btn:first-child:not(:last-child) {
            border-radius: 20px 0 0 20px;
        }

        #classOpts > label.btn:last-child:not(:first-child) {
            border-radius: 0 20px 20px 0;
        }

.aom-step-label {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.aom-step-label strong {
    font-size: 14px;
    margin-left: 5px;
}

#leverClassSidebar {
    padding-right: 7px;
}

    #leverClassSidebar input {
        display: none;
    }

    #leverClassSidebar .lever-image-container {
        padding: 10px;
        cursor: pointer;
        position: relative;
        z-index: 2;
        border: 2px solid #aaa;
        margin-bottom: 20px;
        background: #fff;
        min-height: 120px;
    }

    #leverClassSidebar .lever-image-container.selected {
        border: 2px solid #FFB91D;
    }

#aomInputs .col-12 {
    padding-left: 0;
}

#aomInputs .row label {
    position: relative;
    padding-left: 2.5em;
    margin: 0;
    line-height: 2em;
}

    #aomInputs .row label:before {
        content: attr(datalabel);
        background: #222;
        color: #FFB91D;
        width: 2em;
        line-height: 2em;
        text-align: center;
        display: inline-block;
        font-weight: 700;
        margin-right: 0.5em;
        position: absolute;
        left: 0;
    }

    #aomInputs .row input[type='radio'] + label:before {
        display: none;
    }

    #aomInputs .row input[type='radio'] + label {
        padding-left: 0;
    }

    #aomInputs .row input:focus {
        border: 1px solid #FFB91D;
        box-shadow: none;
    }

    #aomInputs .row label.focused:before {
        color: #222;
        background: #FFB91D;
    }

    .validation-offset {
        padding-left: 47.5px;
    }

#leverClassSidebar img,
#stageArea img {
    display: block;
    margin: 60px auto 10px;
    width: 100%;
}

#leverClassSidebar img {
    margin: 0 auto;
    max-height: 120px;
    width: auto;
}

[data-force-angle] {
    display: none;
}

#aomInputs .unit-label {
    padding: 5px
}

.align-right {
    text-align: right;
}

.external-forces-section .column + .column {
    border-left: 1px solid #eee;
}

.extend-calcs .row,
.retract-calcs .row {
    border-bottom: 1px solid #eee;
}
/*
	Arc of Motion - end
*/

#aomInputs > .row {
    width: 50%;
}

#aomInputs {
    flex-wrap: wrap;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.filter-item .row {
    overflow: hidden;
}

.gh-angle-down:before {
    content: '\e259';
    font-family: 'Glyphicons Halflings';
}

.custom-slider-bar {
    width: 100%;
    height: 25px;
    border: 1px solid #b4b4b4;
    background: #b4b4b4;
    position: relative;
}

.custom-slider-indicator {
    width: 2%;
    height: 140%;
    background-color: #424242;
    top: -20%;
    position: absolute;
    left: 49%;
}

.custom-slider-middlebar {
    width: 2px;
    height: 140%;
    background-color: black;
    top: -20%;
    position: absolute;
    left: 49%;
}

.slider-info {
    width: 200px;
    height: 25px;
    border: 1px solid #b4b4b4;
}

.slider-arrow-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #b4b4b4;
    position: relative;
    top: -12.5px;
    left: 0px;
    padding: 0px;
}

.slider-arrow-left {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 25px solid #b4b4b4;
    position: relative;
    top: -12.5px;
    right: 0px;
    padding: 0px;
    float: right;
}

.slider-inner-bar {
    padding: 0px;
}

.suggestor-slider-container {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.slider-label-left {
    padding-left: 0px;
    padding-right: 2px;
}

.slider-label-right {
    padding-right: 0px;
    padding-left: 2px;
}

.slider-label {
    text-align: center;
    font-size: 24px;
}

.slider-label-suggested {
    border-radius: 10%;
    box-shadow: 0 0 15px #ffb91d;
    font-weight: bold;
}

.slider-label-not-suggested {
    color: gray;
}

.slider-graphic {
    padding: 0px;
    position: relative;
    height: 0px;
    top: 4px;
}

.customchoicesuggestor {
    background-color: #f3f3f3;
    padding: 24px;
}

.btn-clear:focus,
.btn-clear:active,
.btn-clear:hover,
.btn-clear {
    background: transparent;
    color: inherit;
    padding: 0;
    min-width: 0;
}

    .btn-clear.dropdownarrow {
        position: absolute;
        right: 20px;
        top: 7px;
    }

    .btn-clear.oa-comboBoxArrow {
        position: absolute;
        right: 1em;
        top: 0.5em;
    }

.coefficientList {
    display: none;
    position: absolute;
    top: 30px;
    left: 15px;
    right: 15px;
    padding: 4px;
    box-sizing: border-box;
    background: #fff;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #ccc;
    z-index: 1;
    font-size: 0.9em;
    text-align: right;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .coefficientList span {
        display: block;
        cursor: pointer;
        padding: 5px;
    }

        .coefficientList span:before {
            content: attr(data-value);
            float: left;
            font-weight: 700;
        }

        .coefficientList span.hilight,
        .coefficientList span:hover {
            background: rgba(160,160,160,0.3);
        }

.oa-comboBoxList {
    display: none;
    position: absolute;
    top: 30px;
    left: 0px;
    right: 0px;
    padding: 4px;
    box-sizing: border-box;
    background: #fff;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #ccc;
    z-index: 1;
    font-size: 0.9em;
    text-align: right;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .oa-comboBoxList span {
        display: block;
        cursor: pointer;
        padding: 5px;
    }

        .oa-comboBoxList span:before {
            content: attr(data-value);
            float: left;
            font-weight: 700;
        }

        .oa-comboBoxList span.hilight,
        .oa-comboBoxList span:hover {
            background: rgba(160,160,160,0.3);
        }

.displayNone {
    display: none;
}

[data-toggle="tooltip"] + .tooltip {
    opacity: 1;
    z-index: 3;
    transition: opacity .2s ease-in, z-index 0s 0s;
}

.tooltip {
    position: fixed;
}

#leverClassSidebar p[data-class] {
    /*min-height:180px;*/
}

.outlined {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px 0;
}

    .outlined input[type="radio"] + label {
        line-height: 31px;
    }

    .outlined input[type="radio"] {
        margin: 4px 0;
    }

span.yaw_label {
    display: inline-block;
}

    span.yaw_label label {
        border-bottom: 0px;
        margin: 0;
    }

.component-container.operating-parameters .switch-container {
    display: inline-block;
    width: auto;
}

    .component-container.operating-parameters .switch-container + img {
        vertical-align: top;
    }

.radio-text {
    display: inline-block;
    width: 20px;
}

#StopperCylinderInputs {
    display: none;
}

@media (max-width:1024px) {
    #btnShowComparison,
    #btnUpdateResults,
    .side-container .preset-view.button-link.stretch,
    #btnSaveProgress {
        font-size: 12.5px;
        padding: 10px;
        line-height: 1.4em;
    }

    .logo_section.collapse.in {
        display: none;
    }
}

.flex-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    line-height: initial;
}
.flex-row.no-margin {
    margin-bottom: 0;
}
    .flex-row input {
        margin-bottom: 0;
    }
    .flex-row select {
        margin-bottom: 0;
        height: 31px;
    }

.component-container.operating-parameters .col-xs-4 {
    display: flex;
    align-items: center;
}
.component-container.operating-parameters .switch-container {
    margin-bottom: 0;
}
.component-container.operating-parameters .switch-container span {
    min-width: 80px;
}
.component-container.operating-parameters .switch-container-outer {
    float: left;
}

#orientationSelectionContainer .row {
    margin-bottom: 10px;
}
#orientationSelectionContainer .flex-row {
    margin-bottom: 0;
}

 .radio-flex {
     display: flex;
     align-items: center;
     margin-bottom: 0;
 } 
 .radio-flex label {
     margin: 0 0 0 5px;
 }

/*Configurable Sizing*/
.group-border {
    border: 1px solid #ddd;
}

.group-main {
    margin: 0.5em 0em;
}

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

        .group-main .row:first-child {
            padding-top: 8px;
        }

        .group-main .row input[type="radio"] {
            margin-right: 8px;
        }

        .group-main .row select, input[type="select"] {
            min-width: 0;
        }

.switch-push-validate {
    padding-left: 30px !important;
}

.switch-container > span:first-child {
    padding-left: 0;
    text-align: right !important;
}

.group-label {
    padding-left: 15px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 1.0em;
    font-weight: 300;
    text-transform: uppercase;
    vertical-align: middle;
    margin-top: 8px;
}


.flexgrid-column-picker {
    columns: 3;
    padding: 12px;
    margin-left: 12px;
    margin-top: 26px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.flexgrid-column-picker-icon {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    margin: 3px;
    margin-left: 15px;
}

    .flexgrid-column-picker-icon:hover {
        color: white;
    }

.flexgrid-column-picker input[type='checkbox'], .wj-listbox-item input[type='checkbox'] {
    visibility: visible;
}

/* Enables long text to sit next to the flexgrid collapse triangle */
span.wj-elem-collapse {
    margin-right: 8px;
}

/* Child row's columns (aria-level="3") are white  */
/*div.wj-row[aria-level="3"] div.wj-cell {
    background-color: white;
}*/

a[disabled], a[disabled]:hover {
    pointer-events: none;
    background: #b4b4b4;
    color: #e1e1e1;
}

label.csc-label-disabled {
    color: #b4b4b4;
    cursor: not-allowed;
}

div.csc-label-disabled {
    color: #cccccc;
    cursor: not-allowed;
}

select.csc-unit-disabled {
    color: #cccccc;
    cursor: not-allowed;
}

.sliderinput{
    padding-bottom: 10px;
}

.btn-sizing-go.btn-sizing-go-init:before {
    font-family: 'Glyphicons Regular';
    content: '\e026';
    padding: 0 0.5em 0 0;
    margin: 0 0.5em 0 0;
    border-right: 1px solid;
    float: left;
}

.btn-sizing-go:hover {
    background-color: #ffb91d;
}

.group-main input, .group-main select {
    max-width: 150px; /* Max width as demanded by PARCOM2-892 ... I don't like it on the <select /> -RAS */
}

.group-main input[type='checkbox'] {
    height: auto;
    width: auto;
    margin-top: 3.5px;
    margin-right: 5px;
}


/* This could put the word "Required" in radio groups. We'll see if they want it. -RAS */
/*.radio-group-required-box:before {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: red;
    content: 'Required';
    font-style: italic;
}*/

.radio-group-required-box {
    padding-top: 8px; /* Change to "margin" instead if above is desired -RAS */
    border: 1px solid red;
}

@media (max-width: 1024px) {
    .summary-report-system-small {
        font-size: 12px;
    }
}

.summary-report-system-pdf {
    color: #D0021B;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 48px;
    text-transform: none;
}

    .summary-report-system-pdf img {
        width: 39px;
        height: 40px;
    }

    .summary-report-system-pdf a, .summary-report-system-pdf a.visited, .summary-report-system-pdf a.hover {
        color: inherit;
        text-decoration: none;
    }

.equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    position: relative
}

@media (min-width: 768px) {
    .row.equal {
        display: flex;
        flex-wrap: wrap;
        bottom: 5;
        right: 5
    }
}

.no-left-padding {
    padding-left: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.content-dimmed {
    position: relative;
    user-select: none;
}

    .content-dimmed:after {
        content: " ";
        z-index: 10;
        display: block;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.25);
    }

.sizingfooterbuttons {
    padding-bottom: 3em;
}

/*Came from style CSS*/

.spinnerText {   
    font-weight: 700;
    text-align: center;
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
}

.product-inventory{
    overflow-y:scroll;
    max-height: 75vh;
}

.treeview-product .wj-node-check {
    float: right;
}

.product-treeview {
    max-width: 450px;
}


.treeview-product img {
    max-height: 12px;
    padding-left: 4px
}

.treeview-product.wj-treeview .wj-node:before {
    margin-right: 0px;
    border-width: 5px
}

.treeview-product.wj-treeview .wj-node {
    border-left: 1px solid #E2E1DD
}

.treeview-product.wj-treeview .wj-nodelist {
}

    .treeview-product.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node, .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist {
        border-left: 1px solid #E2E1DD
    }

.treeview-product.wj-treeview > .wj-nodelist > .wj-node {
    border-left: 0px;
}

.inventory-view {
    border-top: 7px solid #FFB91D;
}

.inventory-view .modal-body{
    padding: 0px;
}

    .inventory-view.dialogXOnly .ui-dialog-titlebar .ui-dialog-titlebar-close {
        top: 20px;
        right: 14px
    }

.inventory-header {
    color: #424242;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px;
    text-transform: uppercase;
    padding-right: 30px;
    padding-bottom: 6px;
}

.inventory-input{
    padding-left: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 0px;
}

.inventory-subheader {
    font-size: 18px;
    padding-bottom: 6px;
    padding-right: 0px;
}

/* Apply anywhere we need text to not break on space (replaces &nbsp;) */
.no-wrap {
    white-space: nowrap;
}

/* Apply anywhere you want text to just ellipsis... */
.ellipsis-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#dashboardTabControl .wj-tabheader {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: #FFFFFF;
    background-color: #101420;
    padding: 15px;
    font-size: 14px;
    min-width: 200px;
}

#dashboardTabControl .wj-tabheader.wj-state-active {
    background-color: #FFFFFF;
    color: #424242;
}

#dashboardTabControl .wj-tabheaders .wj-tabheader:after {
    background-color: #FFB91D;
    height: 6px;
    bottom: 0;
}

#dashboardTabControl button.close:hover {
    cursor: pointer;
    background: inherit;
}

#dashboardTabControl button.close:focus {
    background: inherit;
}

.iframe-loading {
    background: url(https://icon-park.com/imagefiles/loading7_yellow.gif) center center no-repeat;
}

 /* Isometric
   Cad 
   Renderer 
*/
 #isometricRenderer .container {
     border: 2px solid;
     position: relative;
    
}


 #cadthumbs div {
     float: left;
     position: absolute;
    
}


 /*numbered circle*/
 #cadthumbs p {
     border-radius: 50%;
     width: 16px;
     height: 16px;
     padding: 2px;
     border: 1px solid #666;
     text-align: center;
     font: 10px Arial, sans-serif;
     margin: 4px auto;
    
}


 #isometricRenderer .item-number {
     border-radius: 50%;
     width: 16px;
     height: 16px;
     padding: 2px;
     border: 1px solid #666;
     text-align: center;
     font: 10px Arial, sans-serif;
     margin: 4px auto;
     display: inline-block;
    
}


 /*for testing*/
 #isometricRenderer .filteritem {
     padding: 10px;
     min-height: 300px 
}


 /*test*/
 #isometricRenderer .row {
     padding: 1em 0;
    
}

 /*.item-description-container div{
	text-align: center
}*/

 #isometricRenderer hr.item {
     margin: 2px 0;
     border: 0;
     border-top: 1px solid #ccc;
    
}


 #isometricRenderer .item-title {
     font-weight: bold;
    
}


 #isometricRenderer .item-description {
     font-weight: initial;  
}

.machineCycles {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    overflow: auto;
}

.machineCycles .machineCyclesHeader {
    text-transform: uppercase;
    background-color: #ececec;
    padding: 5px;
    border: 1px solid #afafaf;
}

.machineCycles .machineCyclesCycleHeader {
    width: 180px;
    text-align: center;
}

.machineCycles .machineCyclesAppHeader {
    width: 210px;
}

.machineCycles div.machineCyclesAppHeader, .machineCycles div.machineCyclesCycleHeader {
    margin-left: 10px;
    margin-right: 10px;
}

.machineCycles .machineCyclesCell {
    padding: 5px;
    border: 1px solid #afafaf;
    text-align: center;
    cursor: pointer;
    user-select: none;
    height: 40px;
}

    .machineCycles .machineCyclesCell.not-selected {
        cursor:auto
    }

.machineCycles .machineCyclesGreatestAirflow {
    background-color: #ffcd40;
}

    .machineCycles .machineCyclesGreatestAirflow.not-selected {
        opacity: .4;
        background-color: gray;
    }
.flow-selected {
    box-shadow: 0px 0px 5px #ffcd40;
}

.machineCycles .machineCyclesCell.machineCyclesEnabled {
    background-color: #fff1d2;
}

.machineCycles .machineCyclesCell.machineCyclesEnabled.not-selected {
    background-color: #fbfbfb;
}


.machineCycles .machineCyclesCell .machineCyclesAirFlowOff, .machineCycles .machineCyclesCell .machineCyclesAirFlowNumber {
    color: #9d9d9d;
}

.machineCycles .machineCyclesCell.machineCyclesEnabled .machineCyclesAirFlowOff {
    display: none;
}

.machineCycles .machineCyclesCell:not(.machineCyclesEnabled) .machineCyclesAirFlowOn {
    display: none;
}

.machineCycles .machineCyclesDeleteButton {
    float: right;
    cursor: pointer;
}

.machineCycles .machineCyclesDeleteButton::after {
    font-size: 12px;
    content: "\e014";
    font-family: 'Glyphicons Halflings';
}

.machineCyclesAddNewBtn {
    padding-bottom: 10px;
}

.machineCyclesDerated {
    text-align: center;
    margin-left: 5%;
    width:75%;
    margin-bottom: 0px;
}


.machineCycles-title{
    font-size:18px;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.machine-section {
    border-top: solid #dddddd 1.5px;
    margin-top: 15px;
    padding-top: 10px;
}

/* Chrome, Safari, Edge, Opera */
input.machineCyclesDerated::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input.machineCyclesDerated[type=number] {
    -moz-appearance: textfield;
}

.valvesequencing .InputBox-row {
    padding-top: 14px;
    margin-bottom: 8px;
}

.row-green-bar{
    padding: 0px;
    cursor: copy;
}

.back-motion-bar {
    rx: 5;
    ry: 5;
}

.timeline-label{
    font-weight: bolder;
    font-size: 16px;
}
.timeline-labels{
    width: 5%;
    display: inline-block
}
.timeline-adds{
    width: 5%;
    display: inline-block;
}

.textlabels tspan {
    font-size: 13px;
    color: #ffffff;
    fill: white;
}

.timeline-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #424242;
}

.timeline-bar {
    max-width: 2px;
    background-color: #424242;
    height: 100%;
    position: relative;
    margin-left: 8.95px;
    top: -5px;
}

.timeline-indicator {
    text-align: center;
    width: 20px;
    position: absolute;
    cursor: grab;
    height: calc(100% - 18px);
}

#motionTimeline path, #motionTimeline text {
    pointer-events: none;
}

.motion-timeline{
    overflow-x: scroll;
    overflow-y: hidden;
    width: 90%;
    display: inline-block;
    padding-right: 5px;
}

.timeline-viewer{
    width: 100%;
    display: inline-block;
}

.timeline-label{
    text-align: center;
    line-height: 55;
    position: relative;
    border: solid;
    border-width: 1.5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: white;
    z-index: 1;
}

.timeline-add-outer {
    float: left;
    width: 100%;
}

.timeline-add {
    text-align: center;
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    position: absolute;
    bottom: 1px;    
    font-size: 26px;
    cursor: pointer;
}

.timeline-add.disabled{
    opacity: .3;
    cursor: not-allowed;
}

.cm-canvas {
    height: 375px;
    background: #424242;
    border: white 1px solid;
}

.cm-toggle .switch-container {
    min-width: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;
    float: left;
}

.cm-toggle .switch-container span{
    padding: 0px;
}

.cm-cycle {
    width: 250px;
    position: absolute;
    bottom: 20px;
    right: 10px;

}

    .cm-cycle span {
        font-size: 20px;
        color: #FFF;
        text-shadow: 0px 0px 3px #000;
    }

.add-prime:before {
    content: "\2b";
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
}

.remove-prime:before {
    content: "\e014";
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
}


.label-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: .1;
}

.add-box {
    width: 100%;
    height: 100%;
    opacity: .1;
    position: absolute;
    bottom: 0;
}

path.domain{
    stroke: transparent;
}

g.tick text {
    font-size: 14px;
    fill: #CCCCCC;
}

.timeline-motion-segment {
    rx: 5;
    ry: 5;
}

.motion-seg-hover{
    cursor: grab;
}

.timeline-child {
    height: 100%;
}

.timeline-centered-parent{
    height: 100%;
    display: table;
}

.timeline-centered-child{
    display:table-cell;
    vertical-align:middle;
}

.timeline-zoom {
    width: 28px;
    height: 28px;
    background: #FFCD40;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    line-height: 28px;
    box-shadow: 0px 0px 0px 1px black;
    font-size: 24px;
    margin-left: 4px;
    margin-right: 4px;
    cursor: pointer;
}

    .timeline-zoom.mid-line {
        line-height: 24px;
    }

.timeline-zoom.disabled{
    opacity: .3;
    cursor: not-allowed;
}

.input-append{
    margin-left: -1px;
}

.input-append-text {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding-left: 6px;
    padding-right: 6px;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    float: inherit !important;
}

    .input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control {
        position: relative;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1%;
        margin-bottom: 0;
    }

.timeline-title{
    font-size: 28px !important;
}

.timeline-text{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    color: #424242;
}

.timeline-controls{
    padding-top: 10px;
    height: 70px;
}

    .timeline-controls.collapsed {
        height: 45px;
    }

.timeline-show:after {
    content: "\e113";
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    float: right;
}

.timeline-show.collapsed:after {
    content: "\e080";
}

.timeline-add-label {
    width: 90%;
    height: 90%;
    border-radius: 5px;
    background: #424242;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    text-align:center;
    padding: 3px;
    line-height: 1.1;
}

.timeline-add-label span{
    margin-bottom: 5px;
    width: 100%;
}

    .timeline-add-label span:before {
        font-size: 24px !important;
    }

.timeline-border{
    border-right: solid #424242 1px;
}

.timeline-centered-child .form-control {
    height: 28px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    max-width: 115px;
}

.cycle-text{
    font-size: 20px;
    text-transform: none;
}

.timeline-title-glyph{
    margin-left: 4px;
    top: 0px;
    cursor: pointer;
}

    .timeline-title-glyph:before {
        font-size: 20px;
        color: #424242;
    }

.timeline-cycle{
    background: #ffb91d;
    cursor: pointer;
    border-radius: 2px;
    height: 100%;
    opacity: .7;
}

.timeline-cycle-callout {
    cursor: pointer;
    border-radius: 2px;
    position: absolute;
    top: -24px;
}

    .timeline-cycle-callout:before {
        font-size: 24px !important;
        opacity: .7;
    }

.timeline-cycle-parent {
    height: 100%;
    position: absolute;
}

.timeline-cycles {
    width: 100%;
    height: 6px;
    position: absolute;
    top: 28px;
}

.cm-title {
    border-bottom: solid 3px;
    text-transform: uppercase;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
}

.timeline.fine-tuning-graph{
    width: 100%;
    text-align: center;
}

.motion-controls {
    background-color: #C4C6CC;
    padding: 10px 15px;
    height: 105px;
}

.motion-control {
    width: 50px;
    height: 40px;
    border-radius: 5px;
    background: #424242;
    margin-left: 4px;
    margin-right: 4px;
    text-align: center;
    cursor: pointer;
    top: 0px;
}


.motion-control:before{
    color:white !important;
    font-size: 28px !important;
    line-height: 1.4;
}

.gylph-button:hover:before {
    color: #252525;
}

.gylph-button:active:before {
    color: #252525;
    border: #80adbf 1px solid;
    border-radius: 2px;
}

.frl.add.parent {
    display: inline-block;
}

.frl-add-parent div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}

.frl-add-left {
    float: left;
    padding: 0px 15px;
}

.frl-add-right {
    float:right;
    clear:none;
    padding: 0px 15px;
}
.frl-add-left span.fa,
.frl-add-right span.fa {
    transform: rotate(45deg);
    margin-right: 0;
}

.flow-arrow-left {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid #fff;
    position: absolute;
    left: -10px;
    top: -6px;
}

.flow-arrow-right {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    right: -10px;
    top: -6px;
}

.flow-text {
    position: absolute;
    font-size: 14px;
    color: #ffffff;
    background: #424242;
    left: 30%;
    top: -7px;
    width: 40%;
    text-align: center;
    text-transform: uppercase;
}

    .flow-text.flow-super-sizing {
        left: 35%;
        width: 30%;
    }

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Sizing Tool Footer Styles */
div.footer-button {
    margin: 18px 0;
}


/* Parker dialog styles */
.parker-dialog {
    max-width: 750px;
}

.parker-dialog button.close {
    min-width: auto;
    padding: 10px;
    font-size: 20px;
}

.parker-dialog button.close:hover {
    cursor: pointer;
    background: inherit;
}

.parker-dialog button.close:focus {
    background: inherit;
}

.parker-dialog .ui-dialog-content {
    padding: 0;
}

.parker-dialog .modal-header {
    padding: 50px 50px 0 50px;
    z-index: -1;
}

.parker-dialog .modal-header h4 {
    font-size: 20px;
    line-height: 20px;
}

.parker-dialog .modal-body {
    padding: 15px 50px;
}

.parker-dialog .modal-body ul {
    padding-left: 20px;
}

.parker-dialog table th,
.parker-dialog table td {
    padding-left: 5px;
    padding-right: 5px;
}

.parker-dialog .ui-dialog-buttonpane {
    border: none;
    padding: 15px 50px 50px 50px;
    width: 100%;
}

.parker-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
    min-width: 140px;
}

.parker-dialog .modal-ok-btn {
    background-color: #ffb91d;
    color: #424242;
    border-color: #ffb91d;
}

.ui-dialog .ui-dialog-buttonpane button.small {
    font-size: .8em;
    text-transform: uppercase;
}

.custom-dialog .modal-body {
    padding: 0 4rem 4rem 4rem;
}

/* Styles for Chat button*/
.LPMimage {
    z-index: 0 !important;
}

.fake-chat-button {
    margin: 1px;
    padding: 0px;
    border-style: solid;
    border-width: 0px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    list-style: none outside none;
    letter-spacing: normal;
    line-height: normal;
    text-decoration: none;
    vertical-align: baseline;
    white-space: normal;
    word-spacing: normal;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: transparent;
    border-color: transparent;
    border-radius: 10px;
    width: 160px;
    height: 50px;
    cursor: pointer;
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
}

.fake-chat-button-image {
    margin: 0px;
    padding: 0px;
    border-style: none;
    border-width: 0px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    list-style: none outside none;
    letter-spacing: normal;
    line-height: normal;
    text-decoration: none;
    vertical-align: baseline;
    white-space: normal;
    word-spacing: normal;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 600;
}

#search-selector-content-type {
    background: #fff;
}

/* WJ Tabpanes Overrides */
#dashboardTabControl.wj-tabpanel .wj-tabpanes {
    overflow: inherit;
}