body .ui-panel-wrapper {
    z-index: 0;
}

html body .ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
    color: #0f740f;
}

html body .ui-page-theme-a a:hover, html .ui-bar-a a:hover, html .ui-body-a a:hover, html body .ui-group-theme-a a:hover {
    color: green;
}

html body .ui-page-theme-a .wall-picker .ui-btn.ui-btn-active,
html body .ui-page-theme-a #lean-line-2-walls .ui-btn.ui-radio-on {
    background-color: green;
    border: 1px solid #508b50;
}

html body .ui-page-theme-a .wall-picker .ui-btn.ui-checkbox-off,
html body .ui-page-theme-a #lean-line-2-walls .ui-btn.ui-radio-off {
    color: #a2a2a2;
}

html .ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head+body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active,
html .ui-page-theme-b .ui-btn,html .ui-bar-b .ui-btn,html .ui-body-b .ui-btn,html body .ui-group-theme-b .ui-btn,html head+body .ui-btn.ui-btn-b,.ui-page-theme-b .ui-btn:visited,html .ui-bar-b .ui-btn:visited,html .ui-body-b .ui-btn:visited,html body .ui-group-theme-b .ui-btn:visited,html head+body .ui-btn.ui-btn-b:visited {
    background-color: #0f740f;
}

html head+body .ui-panel-wrapper .ui-btn.ui-btn-b,
html head+body .ui-panel .ui-btn.ui-btn-b {
    background-color: #9ab79a;
    border-color: #8cad88bd;
}

html head+body .ui-panel-wrapper .ui-btn.ui-btn-c,
html head+body .ui-panel .ui-btn.ui-btn-c {
    background-color: #dfbaba;
    border-color: rgba(134, 108, 107, 0.74);
}

html head+body .ui-panel-wrapper .ui-btn.ui-btfn-b:hover,
html head+body .ui-panel .ui-btn.ui-btn-b:hover {
    background-color: #a7b9a7;
    border-color: rgba(122, 144, 118, 0.74);
}

html head+body .ui-panel-wrapper .ui-btn.ui-btn-b:active,
html head+body .ui-panel .ui-btn.ui-btn-b:active {
    background-color: #81c77f;
    border-color: #779a758a;
}

html body .ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head+body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
    border: 1px solid #0f740f;
}

html body .ui-page-theme-a .ui-btn.ui-btn-active,html .ui-bar-a .ui-btn.ui-btn-active,html .ui-body-a .ui-btn.ui-btn-active,html body .ui-group-theme-a .ui-btn.ui-btn-active,html head+body .ui-btn.ui-btn-a.ui-btn-active,.ui-page-theme-a .ui-checkbox-on:after,html .ui-bar-a .ui-checkbox-on:after,html .ui-body-a .ui-checkbox-on:after,html body .ui-group-theme-a .ui-checkbox-on:after,.ui-btn.ui-checkbox-on.ui-btn-a:after,.ui-page-theme-a .ui-flipswitch-active,html .ui-bar-a .ui-flipswitch-active,html .ui-body-a .ui-flipswitch-active,html body .ui-group-theme-a .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,.ui-page-theme-a .ui-slider-track .ui-btn-active,html .ui-bar-a .ui-slider-track .ui-btn-active,html .ui-body-a .ui-slider-track .ui-btn-active,html body .ui-group-theme-a .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-a .ui-btn-active {
    background-color: green;
    border-color: green;
    color: #fff;
    text-shadow: 0 1px 0 #779a758a
}

html body .ui-page-theme-a .ui-radio-on:after,html .ui-bar-a .ui-radio-on:after,html .ui-body-a .ui-radio-on:after,html body .ui-group-theme-a .ui-radio-on:after,.ui-btn.ui-radio-on.ui-btn-a:after {
    border-color: #0f740f
}

html body .ui-page-theme-a .ui-radio-on:after,html .ui-bar-a .ui-radio-on:after,html .ui-body-a .ui-radio-on:after,html body .ui-group-theme-a .ui-radio-on:after,.ui-btn.ui-radio-on.ui-btn-a:after {
    border-color: #0f740f
}

html body .ui-page-theme-a .ui-btn:focus,html .ui-bar-a .ui-btn:focus,html .ui-body-a .ui-btn:focus,html body .ui-group-theme-a .ui-btn:focus,html head+body .ui-btn.ui-btn-a:focus,.ui-page-theme-a .ui-focus,html .ui-bar-a .ui-focus,html .ui-body-a .ui-focus,html body .ui-group-theme-a .ui-focus,html head+body .ui-btn-a.ui-focus,html head+body .ui-body-a.ui-focus {
    -webkit-box-shadow:0 0 12px #0f740f;
    -moz-box-shadow: 0 0 12px #0f740f;
    box-shadow:0 0 12px #0f740f
}

html head+body .ui-popup-container {
    background-color: white;
}

html body .ui-selectmenu a:-webkit-any-link {
    color: #444;
}

#update-needed {
    position: fixed;
    top: 0;
    left: 100px;
    width: 144px;
    border: 1px solid #ddd;
    height: 20px;
    margin: 5px;
    padding: 4px;
}

#update-needed a {
    color: red;
}

html body .is-success {
    border: 1px solid green;
    color: green;
    font-weight: bold;
}

.tax-rate-table {
    width: 100%;
    margin-left: -1em;
    margin-bottom: 0.5em;
}

#splash {
    height: 100%;
    width: 100%;
    background-color: lightgray;
    z-index: 999;
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
}

#splash .inner {
    position: relative;
    top: 200px;
}

#splash .inner img {
    max-width: 60%;
    max-height: 60%;
}

#index .index-logo {
    text-align: center;

}

#index .index-logo #logo {
    max-width: 100%;
    max-height: 100%;
}

#program-version {
    position: fixed;
    bottom: 0px;
    left: 10px;
}

/* Header bar */

.pfp-header {
    text-align: center;
    height: 30px;
    z-index: 1;
    background-color: #f9f9f9;
    color: #333;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.pfp-header a {
    margin-top: 0px;
    margin-bottom: 0px;
}

.pfp-header .ui-btn-left {
    top: 6px;
    left: 6px;
}

.pfp-header .ui-btn {
    background-color: transparent;
    border: none
}

div#nav_bar {
    position: fixed;
    top: 35px;
    width: 100%;
    left: -32px;
    z-index: 100;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    list-style: none;
    padding-left: 10px;
    padding-right: 22px;
    padding-top: 15px;
    padding-bottom: 5px;
    border-radius: 0;
    margin: 0;
    background-color: #f9f9f9;
}

.online img {
    width: 24px;
}

#index .prof-sum {
    border-left: black solid 2px;
    padding-left: 1em;
    min-height: 200px;
    text-align: center;
}

#index .summary {
    background-color: #f3f3f3;
    margin-top: 1em;
    margin-left: 1em;
    border-radius: 5px;
    margin-right: 1em;
    margin-bottom: .5em;
}

#index ul {
    list-style: none;
    margin-left: 4em;
}

#index .index-sum-title {
    text-align: center;
}

.footer-button-left,
.footer-button-right {
	position: absolute;
	margin: 0;
	top: auto;
	bottom: 0.24em;
}
.footer-button-left {
	left: 0.4em;
}
.footer-button-right {
	right: 0.4em;
}
.center-wrapper{
 	margin: 0 auto;
 	text-align: center;
 	padding-top: 30px;
}
.readonly{
    color: darkgrey;
}
/** to use text inputs in control group **/
.controlgroup-textinput{
    padding-top:.22em;
    padding-bottom:.22em;
}
textarea #jobsite-address {
    height: 150px;
}
textarea #spec-conditions {
    height: 150px;
}

.inline-button {
	display: inline-block;
}

.center-text {
	text-align: center;
}

#jobListTable td.multi-line {
    vertical-align: top;
}

html body .button-group label {
    display: inline-table;
}

html body .button-group div.ui-select,
html body .button-group div.ui-input-text {
    display: inline-flex;
}

html body .button-group div.ui-select .ui-btn {
    border-radius: 0;
}

html body div.ui-select .ui-btn>span:not(.ui-li-count) {
    display: contents;
}

html #customerForm #customer-search-preview {
    display: none;
    background-color: whitesmoke;
    border: 1px solid #ddd;
    padding: 6px;
}

/************* Datatables *************/
html body .dataTables_wrapper label div.ui-select,
html body .dataTables_wrapper label div.ui-input-search {
    display: inline-flex;
}

/************* Proposal Form Calc *************/

.job-name {
    font-weight: normal;
    text-align: center;
}

.stripedList {
    z-index: 0;
}

.stripedList li:nth-child(odd) {
    background-color: #D3D3D3;
}

.stripedList li {
	z-index: 0;
	overflow: hidden;
}

.options-row:nth-child(odd) {
    background-color: #D3D3D3;
}

.options-row {
    border: 1px silver solid;
    border-radius: 8px;
    padding: 5px;
}

.propRowTable {
    margin-left: 112px;
    border-spacing: 15px 0;
    border-collapse: separate;
    display: block;
}

.propRowTableBig {
    margin-left: 112px;
    border-spacing: 15px 0;
    border-collapse: separate;  
}

.prop-controls {
    margin-top: 5px;
}

a#lean-add {
    margin-bottom: 15px;
    -webkit-border-radius: .3125em;
    border-radius: .3125em;
}

.ui-content .lineForm>ul>li {
    padding: 2px 2px 2px 2px;
}

.propLine {
    width: 100%;
}

.lineForm .form
 {
    position: absolute;
    left: 5em;
    top: 0em;
    padding-top: 3px;
}

html .lineForm .form input.customized {
    background-color: yellow;
}

.lineForm .form div.ui-input-text {
    width: 70% !important;
    z-index: 0;
    min-width: 100px;
}

html .form .ui-text-number {
    max-width: 76px;
}

html .total .ui-text-number {
    max-width: 98px;
}

.lineForm .title {
    font-weight: bold;
    display: inline;
}

.lineForm .title * {
    vertical-align: top;
    display: inline;
}

.lineForm .form div {
    display: inline-block;
}

.lineForm .form div.ui-input-text {
    margin-top: 0px;
}

.lineForm .form div.ui-select {
    margin-left: 0px;
    margin-top: 0px;
}

.lineForm .form label {
    font-size: 0.8em;
}

.lineForm .price {
    display: inline-block;
    position: absolute;
    right: 3px;
    top: 3px;
    text-align: right;
    line-height: 22px;
}

#buildingPrompt .lineForm .price {
    position: inherit;
    float: right;
}

#proposal-building-specs, #lean-building-specs, #addition-building-specs {
    font-weight: bold;
    color: #0f740f;
    line-height: 20px;
}

.lineForm .total {
    display: inline-block;
    position: absolute;
    right: 3px;
    top: 3px;
    text-align: right;
    line-height: 22px;
}

.lineForm .price .main,
.lineForm .price .total {
    font-weight: bold;
}

.lineForm .price .labor {
    color: cornflowerblue;
    font-size: .8em;
}

form .labor_markup,
form .materials_markup {
    display: none;
}

.lineForm .price .materials,
.subForm .materials
 {
    color: green;
    font-size: .8em;
}

html .lineForm .price .material_only,
html .subForm .price .material_only {
    color: rgb(143 143 143 / 82%);
    font-size: .8em;
}

html .lineForm .price .material_only:after,
html .subForm .price .material_only:after {
    content: " (*)";
}

.lineForm .error,
.subForm .error,
#optionsForm .error,
#proposalTextForm .error,
.autoForm .error,
#paymentTerms .error {
    background-color: #f7bcbc;
    border: 1px solid red;
}

.is-clickable {
    cursor: pointer;
}

.alert-error, .alert-failure {
    border: 1px solid #ea4848;
    -webkit-border-radius: .3125em;
    border-radius: .3125em;
    padding: 4px;
    text-align: center;
}

#jobList .error {
    text-decoration: underline;
    text-decoration-color: red;
}

#contractReview .padDocument {
	margin-right: 20px;
	margin-bottom: 10px;
}

#contractReview .alignleft {
    float: left;
}

#contractReview .alignright {
    float: right;
}

#contractReview .clearall {
    clear: both;
}

#contractReview .contractCustomer {
    margin-top: 20px;
}

.edit-change-order, .delete-change-order, .sign-change-order,
.change-order:last-of-type .view-change-order {
    display: none;
}

.change-order:last-of-type .view-change-order3 {
    display: none;
}

.change-order:last-of-type .edit-change-order,
.change-order:last-of-type .delete-change-order,
.change-order:last-of-type .sign-change-order {
    display: inline;
}

.change-order a.sep {
    padding-left: 10px;
}

.change-order-comment {
    color: red;
    text-decoration: underline;
    font-weight: 600;
}

.additional-heading {
    font-size: .95em !important;
    margin: 0 0 10px 10px !important;
    overflow-x: hidden;
    max-width: 13em;
}

.contract-textarea {
    min-height: 200px; 
}

.lineForm .text-no-input {
    font-weight: 600;
}

.alert {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
}

.ui-datepicker {
	background-color: lightgrey;
}

/************* Horse Barn Stalls *************/

.subForm .price {
    float: right;
    display: inline-block;
    position: absolute;
    right: 3px;
    top: 3px;
    text-align: right;
    line-height: 22px;
}

.subForm .price .main {
    font-weight: bold;
}

.subForm .price .labor {
    color: cornflowerblue;
    font-size: .8em;
}

.subForm .horsePrice .main {
    font-weight: bold;
}

.subForm .horsePrice .labor {
    color: cornflowerblue;
    font-size: .8em;
}

#dutchDoorForm .form div {
    display: inline-block;
}

#dutchDoorForm .form div.ui-input-text {
    width: 70% !important;
    z-index: 0;
}

#dutchDoorForm li {
    padding: 2px 2px 2px 2px;
}

#dutchDoorForm .title {
    font-weight: bold;
    display: inline;
}

#dutchDoorForm.title * {
    vertical-align: top;
    display: inline;
}

#dutchDoorForm .form {
    position: absolute;
    left: 5em;
    top: 0em;
    padding-top: 3px;
}

#dutchDoorForm .form div {
    display: inline-block;
}

#dutchDoorForm .form div.ui-input-text {
    margin-top: 0px;
}

#dutchDoorForm .form div.ui-select {
    margin-left: 0px;
    margin-top: 0px;
}

#dutchDoorForm .form label {
    font-size: 0.8em;
}

#horseBarnOptionForm .form div {
    display: inline-block;
}

#horseBarnOptionForm .form div.ui-input-text {
    width: 70% !important;
    z-index: 0;
}

#horseBarnOptionForm li {
    padding: 2px 2px 2px 2px;
}

#horseBarnOptionForm .title {
    font-weight: bold;
    display: inline;
}

#horseBarnOptionForm.title * {
    vertical-align: top;
    display: inline;
}

#horseBarnOptionForm .form {
    position: absolute;
    left: 5em;
    top: 0em;
    padding-top: 3px;
}

#horseBarnOptionForm .form div {
    display: inline-block;
}

#horseBarnOptionForm .form div.ui-input-text {
    margin-top: 0px;
}

#horseBarnOptionForm .form div.ui-select {
    margin-left: 0px;
    margin-top: 0px;
}

#horseBarnOptionForm .form label {
    font-size: 0.8em;
}

#horseBarnOptionForm .price .main {
    font-weight: bold;
}

#horseBarnOptionForm .price .labor {
    color: cornflowerblue;
    font-size: .8em;
}

/**************************adding to jquery mobile css****************************/
.ui-checkbox, .ui-radio {
    padding: 3px !important;
}

html fieldset[data-role=controlgroup] .ui-radio {
    padding: 0px !important;
}

/* The above rule makes the proposalFormPage option checkboxes mis-align */
.lineForm .ui-checkbox,
.subForm .ui-checkbox {
    padding: 0 !important;
}

.lineForm .lean-reroof .ui-checkbox {
    margin: 0;
    top: -3px;
}

.lineForm #lean-hipped-eaves .ui-checkbox {
    margin: 0;
    top: -8px;
}

.lineForm .readonly,
.lineForm .readonly * {
    background-color: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

/*******************************PDF TABLES***********************/

#content1 {
    width:1107px !important;
    margin: 0 auto;
    background:#fff;
}

.pdf-contract {
    margin: 0;
    padding: 0;
}

table.pdf-tables {
    border-collapse: collapse;
}

.contract  {
    border: 1px solid black;
    padding: 5px; width:100%;
}

.contract-list {
    list-style: none;
}

.meta { 
    margin-top: 1px;
    width: 300px;
    float: right;
}

.meta td {
    text-align: right;
}

.meta td.meta-head {
    text-align: left;
    background: #eee;
}

.meta td textarea {
    width: 100%;
    height: 20px;
    text-align: right;
}

.items { 
    width: 100%;
    margin: 30px 0 0 0;
    border: 1px solid black;
}

.items th {
    background: #eee;
}

.items textarea {
    width: 100%;
    height: 50px;
}

#contract-title {
    border:1px solid black;
    padding:2px;
    text-align:center;
}

#terms {  
    margin: 20px 0 0 0; 
    float: right; 
    clear: both;
    border: 1px solid black;
}

#terms th {
    text-align: center; 
    background: #eee;
}

.agreement { 
    clear: both; 
    padding-top: 10px;
    margin-top: 4px;  
}

.contractCustomer {
    width:60% !important; 
}
/************* options pages  *************/
.horse-stalls {
    border: solid 1px black;
    padding: 2px;
}
.roof-opt {
    border: solid .5px black;
    padding: 5px;
}

.printFrame {
	position: relative;
	left: -500px;
}

#editProposalColors #addr-spec-conditions{
    height: 400px;
}

#editProposalColors #con-options-title{
    margin-top: 0.4em;
} 

#editProposalColors .border{
    height: 400px;
    border: 2.5px #666 solid;
    border-radius: 5px;
}

#editProposalColors .addr{
    margin-top: .7em;
}  

#editProposalColors .center-text{
    margin: 0 auto;
}  

#editProposalColors .contract-line{
    margin-left: 2em;
}  

#editProposalColors .contract-title{
    margin-left: 1em;
} 

#editProposalColors .colors-left-block{
    padding-left: 1em;
} 

#editProposalColors .colors-right-block{
    padding-left: 1.5em;
} 

#editProposalColors .jobsite-address-block{
    background-color: darkgray;
    border: 2px lightgray solid;
    border-radius: 6px;
    padding: .8em;
}

#editProposalColors .jobsite-address-block > *:hover{
    border: 1px lightgray solid;
    border-radius: 3px;
    padding: .2em;
}

.premium-opt {
    vertical-align: bottom;
    padding-bottom: 0;
}

.premium-color-line .ui-input-text {
    min-width: 50px;
    max-width: 100px;
}

.premium-color-line div.optional {
    color: #ddd;
}

.premium-color-line .price .materials, .premium-color-line .price .labor {
    display: none !important;
}

.premium-color-buttons .line-editor-link {
    display: none !important;
}

.premium-color-buttons .ui-icon-plus {
    display: none;
}

.ui-icon-link:after {
    background-image: url('images/chain-icon.svg');
}

#changeOrderCostForm .premium-opt {
    display: none;
}

#editProposalColors .con-opts{
    background-color: #bbb;
    padding: .8em;
    box-shadow: 3px 3px 2px 1px #ddd;
    border-radius: .3em;
    -webkit-transition: all .3s; /* For Safari 3.1 to 6.0 */
    transition: all .3s;
} 

#editProposalColors .con-opts:hover{
    background-color: #e9e9e9;
    padding: .5em;
    box-shadow: 4px 8px 9px 4px #ddd;
    border-radius: .4em;
} 

.payment-sched {
    padding-left: 16px;
}

.payment-totals {
    color:green;
}

#editProposalColors form .ui-input-text {
	width: 99%;
}

#editProposalColors form .ui-select {
	width: 59%;
}

#editProposalColors form .color-split .ui-select {
	width: 100%;
}

#editProposalColors form div.ui-field-contain label {
	width: 39%;
}

/************* changeOrderDialog **********************/
#changeOrderWrapper, #subformWrapper {
    padding: 10px 20px;
    text-align: center;
}

#changeOrderComments {
    width: 400px;
    height: 80px;
}

html body #leanProposalFormPage #nav_bar {
    border-bottom: 8px solid #fbff3cbd;
}

html body #additionFormPage #nav_bar {
    border-bottom: 8px solid #059;
}

/************* baseBuildingFormPage **********************/
#baseBuildingNewPage .is-center {
    text-align: center;
}
#baseBuildingNewPage .is-bold {
    font-weight: bold;
}

#baseBuildingNewPage .base-labor {
    border: 4px solid red;
    margin: 0px;
}

#baseBuildingNewPage .labor-2-high {
    border: 4px solid purple;
    margin: 0px;
}

#baseBuildingNewPage .labor-8-long {
    border: 4px solid green;
    margin: 0px;
}

#baseBuildingNewPage .labor-8L-2H {
    border: 4px solid rgb(230, 35, 220);
    margin: 0px;
}

#baseBuildingNewPage #build-base-sqft {
    font-size: larger;
    padding-top: 8px;
}

/************* managerJobList **********************/
#managerJobList table td {
    border-bottom: 1px solid #ddd;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* alternating row colors */
#managerJobList table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/************* media query for ipad size  *************/
@media only screen and (max-width: 1090px) {
    .lineForm .form div.ui-input-text {
        width: 100px !important;
    }

    html .lineForm .smaller-font {
        font-size: 13px;
    }

    .propRowTableBig tr td:first {
        padding-left: 16px;
    }
}
@media only screen and (max-width: 790px) {
    .lineForm .form div.ui-input-text {
        width: 70px !important;
    }

    .lineForm .form .ui-select,
    .lineForm .form .ui-select * {
        max-width: 310px !important;
    }

    .extraLeft {
        margin-left: 7% !important;

    }
    .extraRight {
        margin-left: 25% !important;
    }

}

/* 640px width is currently the lowest resolution targetted.
    NOTE - currently Overhead Doors requires 720px to lay out correctly.
 */

/************* Price Controls for Compare Lines *************/
.compare-line .price div {
    color: #aaa;
}

.compare-line .price .main::before,
.compare-line .price .materials::before,
.compare-line .price .materials_markup::before,
.compare-line .price .labor::before,
.compare-line .price .labor2::before,
.compare-line .price .labor_markup::before,
.compare-line .price .commission::before {
    content: "(";
}

.compare-line .price .main::after,
.compare-line .price .materials::after, 
.compare-line .price .materials_markup::after,
.compare-line .price .labor::after,
.compare-line .price .labor2::after,
.compare-line .price .labor_markup::after,
.compare-line .price .commission::after {
    content: ")";
}

.compare-line .price .materials {
    color: #62a062; /* Lighter green */
}

.compare-line .price .labor {
    color: #8eb2db; /* Lighter blue */
}