div.costing-calculator-container{
    float: left;
    position: relative;
    margin: 20px 0 20px 168px;
    width: 795px; height: auto;
    border: 1px solid rgba(204, 204, 204, 1.0);
    /*-moz-border-radius: 21px;
    -webkit-border-radius: 21px;*/
    border-radius: 21px;
}
div.costing-calculator-container img{
    margin-top: 20px;
    margin-left: 26px;
}
div.costing-calculator-title{
    float: left;
    position: relative;
    margin: 20px 0 0;
    width: 620px; height: auto;
    border: 0;
    padding-left: 20px;
}
div.costing-calculator-title h1 {
    float: left;
    position: relative;
    /*display: block;*/
    width: 620px; height: auto;
    margin: 0;
}

div.costing-calculator-title h2 {
    float: left;
    position: relative;
    display: block;
    width: 620px; height: auto;
    margin: 10px 130px 6px 0;
}

div.costing-calculator-title h6 {
    font-weight: 600;
    margin: 10px 0 6px 0;
}

div.costing-calculator-title p {
    float: left;
    position: relative;
    display: block;
    width: 620px; height: auto;
    margin: 6px 16px 20px 0;
}

div.costing-calculator-inside {
    float: left;
    position: relative;
    margin: 20px 0 0;
    width: 450px; height: auto;
    border: 0;
    padding-left: 20px;
}

div.costing-calculator-inside h2 {
    float: left;
    position: relative;
    display: block;
    width: 440px; height: auto;
    margin: 10px 180px 16px 0;
}

div.costing-calculator-inside h4 {
    float: left;
    position: relative;
    display: block;
    width: 440px; height: auto;
    margin: 10px 0 10px 0;
}

div.costing-calculator-inside p {
    float: left;
    position: relative;
    display: block;
    width: 440px; height: auto;
    margin: 0 16px 10px 0;
}

div.costing-calculator-inside hr {
    float: right;
    width:425px;
    margin: 10px 22px 10px 10px;
}



#costCalcContainer .left-half{
    padding-right: 0px;
}

#costCalcContainer .right-half{
    padding-left: 0px;
    position: relative;
}

#costCalcContainer{
    margin-left: 26px;
}


#costCalcContainer.greybox .section p{
    line-height: 34px;
    font-size: 13px;
}


label.fit-out-label,
label.external-siteworks-label{
    width: 188px;
    margin-left: 12px;
}

label.fit-out-label.editable,
label.external-siteworks-label.editable{
    cursor: pointer;
    color: blue;
    line-height: 16px;
    width: 170px;
}

.greybox form input.fit-out-name,
.greybox form input.external-siteworks-name{
    width: 150px;
    padding-right: 20px;
    margin-right: 4px;
}

.greybox form input.fit-out-cost[type=number],
.greybox form input.external-siteworks-cost[type=number],
#softLandscapingCost{
    width: 70px;
}

span.save_icon{
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url(../images/floppy.png);
    display: inline-block;
    position: absolute;
    top: 10px;
    margin-left: -28px;
}

.scale-table .row{
    float: none;
    width: 100%;
    margin-top: 0px;
}
.scale-table .row .column{
    display: inline-block;
}
.scale-table .row .column label{
    min-width: 40px;
    cursor: pointer;
}
.scale-table .row .column.title{
    width: 110px;
    text-align: center;
    color: #9F2322;
}
.scale-table .row .column.value{
    width: 46px;
    border-left: 2px solid black;
    text-align: center;
}
.scale-table .row .column.radio{
    width: 48px;
    text-align: center;
}
.scale-table .row .radio input[type=radio]{
    margin: 26px 0 0 0;
}
.scale-table .row .radio .left-border{
    border-left: 2px solid black;
    height: 10px;
}

.scale-table .row .column.value.first{
    border-left: none;
}

.scale-table .row .column.group-title{
    width: 152px;
    text-align: center;
    font-size: 12px;
    height: 36px;
    line-height: 50px;
    border-left: 2px solid black;
}

div.notes{
    font-size: 14px;
    margin-top: 12px;
    width: 280px;
    display:inline-block;
    line-height: 16px;
}

div.notes.columns-3:first-child{
    padding-left: 0px;
    padding-right: 10px;
    width: 209px;
    border-left: 0px;
}

div.notes.columns-3{
    border-left: solid 1px black;
    padding-left: 13px;
    width: 208px;
    padding-right: 10px;
}

div.notes b{
    font-weight: bold;
    padding-top: 10px;
    display: inline-block;
}

div.notes p{
    line-height: 16px !important;
    font-size: 14px !important;
    margin-bottom: 7px;
    /* margin-left: 4px; */
}

div.notes p.half{
    height: 7px;
    margin-bottom: 0px;
}

.preview-total{
    display: block;

    text-align: right;
}

#finishTable{
    width: 100%;
    margin-bottom: 10px;
}

#finishTable th{
    font-weight: bold;
    border-bottom: 2px solid black;
    padding-bottom: 4px;
    font-size: 15px;
}

#finishTable .value{
    width: 96px;
    text-align: right;
}

#finishTable .hyphen{
    text-align: right;
    padding-right: 19px;
}

#finishTable td{
    padding: 12px 0px;
    border-bottom: 1px solid black;
}

#finishTable tr.total td{
    border-top: 2px solid black;
    border-bottom: 0px;
    font-size: 22px;
    font-weight: bold;
    padding-top: 18px;
}

#finished input[type=text],
#finished input[type=email]{
    float: right;
}

#finished input[type=submit]{
    padding: 4px 20px;
    background: white;
    border: none;
    box-shadow: 0px 2px 4px grey;
    font-size: 16px;
    cursor: pointer;
    border-radius: 0px;
    /* vertical-align: middle; */
}


#finished input:disabled{
    vertical-align: middle;
    cursor:inherit;
    background: #ddd;
    box-shadow: none;
    border: #bbb solid 1px;
    color: #bbb;
}

span.hint {
    font-size: 12px;
    font-style: italic;
    display: block;
    margin-bottom: 20px;
    line-height: 12px;
}

p#contingencyCustomForm{
    margin-left: 28px;
}

.hidden {
    max-height: 0px;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
}

.shown {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
    overflow: hidden;
}

.notes h5 {
    font-weight: bold;
    font-style: normal;
}


label.dollar-sign {
    min-width: initial;
    position: relative;
    left: 20px;
    margin-left: -20px;
    color: grey;
}

label.dollar-sign + input {
    min-width: 100px;
}


h2.subtitle.year-plan {
    margin-top: -45px;
    line-height: 28px;
    width: 300px;
    margin-bottom: 10px;
}

h6.year-note {
    margin-top: 10px;
}

#scaleRatesTime span {
    color: #9F2322;
    float: right;
}

#scaleRatesTime label:not(.bold) {
    width: 100%;
    margin-top: 10px;
}

#scaleRatesTime div {
    margin-top: 6px;
}

#finishTable td span {
    font-size: 10px;
    font-weight: bold;
    margin-left: 20px;
}

.preview-total.floating {
    position: fixed;
    width: 270px;
    left: 50%;
    bottom: 10px;
    background: rgba(237, 230, 255, 0.75);
    -webkit-backdrop-filter: 2px;
    /* box-shadow: 1px 2px 5px 0 rgba(0,0,0,.5); */
    padding: 10px;
    margin-left: 160px;
    z-index: 1;
    border: 1px solid black;
    border-radius: 12px;
}

.preview-total.floating.extend {
    width: 330px;
    margin-left: 100px;
    max-height: 1000px;
    font-weight: bold;
}


span#costingCodeLabel {
    font-size: 16px;
}

input#costingCode {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 1.2px;
    line-height: 22px;
    color: rgba(159, 35, 34, 1.0);
    width: 100px;
    text-align: center;
}

p#costingCodeContainer {
    line-height: initial !important;
    display: none;
}


.hr-label {
    text-align: center;
    border-bottom: 1px solid #AAA;
    line-height: 0.1em;
    margin: 10px 30px 20px 0;
}

.hr-label span {
    background: #EBEBEB;
    padding:0 10px;
}


a#forgotCosting, a#alreadyHaveCosting {
    display: inline-block;
    width: 150px;
    text-align: left;
    color: #9F2322;
}

input#sendSummary {
    margin-left: 0px;
    float: right;
}

div#alreadyHaveACosting, div#forgotYourCostings {
    height: 200px;
    position: absolute;
}

div#forgotYourCostings {
    background: white;
    padding: 0 12px;
    border: 1px solid #9a9a9a;
    display: none;
    bottom: 0;
}

#costingSearchResults span.loading {
    display: inline-block;
    font-size: 40px;
    color: grey;
}

div#costingSearchResults {
    margin-top: 10px;
    max-height: 80px;
    overflow-x: auto;
    background: white;
    padding: 10px;
    border: 1px solid darkgrey;
    border-radius: 10px;
}

a.costing_link {
    display: block !important;
    padding: 2px;
}

a.costing_link.hidden {
    display: none !important;
}

a.costing_link:hover {
    background: #EBEBEB;
}

a#showAllResults {
    text-align: center;
    display: block;
    cursor: pointer;
}


span.calculating.spinner {
    float: left;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0px;
    background-image: url(../images/spinner.png);

    text-align: center;
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

span.calculating.progressbar {
    display: block;
    width: 0%;
    max-width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    -webkit-animation: progress 1.5s 1 linear;
    -moz-animation: progress 1.5s 1 linear;
    -ms-animation: progress 1.5s 1 linear;
    animation: progress 1.5s 1 linear;
    z-index: 1;
}

@-webkit-keyframes progress {
    from { }
    to { width: 100% }
}
@-moz-keyframes progress {
    from { }
    to { width: 100% }
}
@-ms-keyframes progress {
    from { }
    to { width: 100% }
}
@keyframes progress {
    from { background: rgba(221, 255, 221, 0.45); }
    to { background: rgba(0, 255, 0, 0.45); width: 100% }
}

span.calculating.stretchbar {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    z-index: 1;
    -webkit-transition: width 1s, background 1s; /* Safari */
    transition: width 1s, background 1s;
}
span.calculating.stretchbar.stretch{
    -webkit-transition: width 3s, background 3s; /* Safari */
    transition: width 3s, background 3s;
    width: 98%;
    background: rgba(255, 249, 0, 0.25);
}
span.calculating.stretchbar.shrink{
    -webkit-transition: width .1s, background .1s; /* Safari */
    transition: width .1s, background .1s;
    width: 0%;
    background: rgba(255, 253, 221, 0.45);
}
span.calculating.stretchbar.full{
    width: 100%;
    background: rgba(0, 255, 0, 0.45);
}
span.calculating.stretchbar.fade{
    background: transparent;
}

.preview-total .hidden{
    display: none !important;
}

.preview-total i.tab,
.preview-total i.close,
.preview-total .total{
    cursor: pointer;
}

.preview-total div.details {
    height: 0px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
}
.preview-total.extend div.details {
    height: inherit;
}

div#historyDetails,
table#totalDetails {
    display: none;
}

.preview-total.floating.extend table#totalDetails {
    display: table;
}

.preview-total.floating.extend div#historyDetails {
    display: block;
    text-align: left;
    min-height: 20px;
}

.preview-total.floating.extend div#historyDetails .history-items{
    overflow-y: auto;
    min-height: 20p;
    max-height: 500px;
    box-sizing: border-box;
    border-radius: 6px;
    background: transparent;
}
.preview-total.floating.extend div#historyDetails:before {
    width: 100%;
    height: 8px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
    top: 0px;
    display: block;
    position: absolute;
    content: ' ';
    border-radius: 6px;
}
.preview-total.floating.extend div#historyDetails:after {
    width: 100%;
    box-sizing: border-box;
    padding-right: 16px;
    height: 20px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    bottom: 0px;
    display: block;
    position: absolute;
    content: ' ';
    pointer-events: none;
    border-radius: 6px;
}

.preview-total.floating.extend div#historyDetails div.history-item{
    padding: 6px 12px;
}

.preview-total.floating.extend div#historyDetails div.history-item:last-child{
    margin-bottom: 12px;
}

.preview-total.floating.extend div#historyDetails div.history-item:nth-child(even){
    background-color: #EBEBEB;
}

.preview-total.floating.extend div#historyDetails .history-name {
    cursor: pointer;
    color: #9F2322;
    font-style: italic;
}

.preview-total.floating.extend div#historyDetails .history-val {
    font-weight: bold;
}

div#historyDetails,
table#totalDetails {
    font-size: 14px;
    width: 100%;
    background-color: white;
    font-weight: normal;
    border-radius: 6px 6px 6px 0;
    margin-bottom: 8px;
    /* border: solid 1px black; */
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
}

table#totalDetails tr td:first-child{
    text-align: left;
    font-style: italic;
    padding-left: 4px;
}

table#totalDetails tr td:last-child{
    padding-right: 4px;
}

table#totalDetails tr td{
    padding: 4px 0;
}

.preview-total .controls,
.preview-total .total,
.preview-total table#totalDetails,
.preview-total div#historyDetails{
    z-index: 10;
    position: relative;
}

.preview-total i.close {
    display: none;
}
.preview-total.extend i.close {
    display: inline-block;
    font-size: 18px;
}

.preview-total i.tab {
    padding: 0px 2px;
}
.preview-total:not(.extend) .total:hover,
.preview-total i.tab:hover{
    color: #A0342A;
}

.preview-total.extend i.tab:first-child {
    border-radius: 0 0 0 4px;
}

.preview-total.extend i.tab:nth-child(2) {
    border-radius: 0 0 4px 0;
    margin-left: -5px;
}

.preview-total.extend i.tab {
    padding: 10px 8px;
    position: relative;
    font-size: 18px;
    margin-top: -9px;
}

.preview-total.extend i.tab:hover,
.preview-total.extend i.tab.active {
    color: black;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
}
.design-notes {
    min-height: 265px;
}

.features {
    min-height: 145px;
}

.fitout {
    min-height: 140px;
}

.cladding {
    min-height: 130px;
}

.structure {
    min-height: 240px;
}

div#qualityDesignMaterialsDetails .notes {
    vertical-align: top;
}

a#projectFeeCalculatorLink {
    color: #9F2322;
    margin-top: 30px;
    display: block;
}
a#projectFeeCalculatorLink:hover {
    text-decoration: none;
}

@keyframes highlight {
    0% {
        background: #fbffa6
    }
    100% {
        background: transparent;
    }
}

.highlight {
    animation: highlight 2s;
}

div#changeLog {
    margin-top: 30px;
    padding: 20px;
}

div#changeLog ul li {
    font-size: 12px;
    margin-bottom: 5px;
}

div#changeLog ul li.header {
    font-size: 14px;
    font-weight: bold;
    margin: 15px 0 5px 0;
}

div#changeLog ul li.desc {
    margin-left: 36px;
    font-style: italic;
}

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

input#newCostingFromHomeArea {
    margin-top: 5px;
}