/********** PRODUCT LISTING *********/
#product-selector {
    padding-top: 75px;
    background-image: url(/images/wallpapers/full-top-blue.jpg);
    background-repeat: no-repeat;
    background-size: 100% 445px;
}

    #product-selector .top-section {
        padding-bottom: 150px;
    }

        #product-selector .top-section h1 {
            font-size: 80px;
            line-height: 90px;
            padding-bottom: 25px;
            color: white;
            width: 60%;
        }

        #product-selector .top-section p {
            color: white;
            font-weight: 300;
            font-size: 24px;
            line-height: 36px;
            width: 50%;
        }

        #product-selector .top-section img.floating-image {
            width: 45%;
            position: absolute;
            right: -50px;
            top: 15px;
        }

#product-listing.col-md-9 {
    padding: 0;
}

.product {
    /*border: 1px solid #e6e6e6;*/
    /*margin: 0 1.1% 20px;*/
    height: 313px;
    padding: 5px !important;
    position: relative;
    margin-bottom: 18px;
    background-color: #F2F2F2;
}

    .product h3 {
        color: #212e84;
    }

    .product .product-img {
        position: relative;
        background-color: #fff;
        display: block;
        /*float: left;*/
        height: 215px;
        width: 100%;
        /*margin-bottom: 11px;*/
    }

        .product .product-img > a {
            display: block;
        }

    .product img {
        margin: 0 auto;
        background: #fff;
        padding-top: 35px;
        display: block;
        width: auto;
        height: 175px;
        -ms-interpolation-mode: bicubic;
    }

    .product .action {
        border: 1px solid rgba(0,0,0,0.06);
    }


.row.product-selector-content {
    padding-bottom: 20px;
    margin: 0px;
}

.product-details {
    padding: 15px;
    text-align: left;
    display: block;
    /*float: left;*/
    width: 100%;
}

    .product-details h3 {
        font-weight: 300;
        word-wrap: break-word;
        display: block;
        padding: 0 0 4px;
    }

        .product-details h3 a,
        .product-details h3 a:visited {
            font-size: 18px;
            font-weight: 300;
            line-height: 26px;
            display: block;
            white-space: normal;
            color: #000;
            cursor: pointer;
        }

            .product-details h3 a:hover {
                text-decoration: underline;
            }

    .product-details h6 {
        font-size: 1em;
        padding: 0 0 10px;
    }


    .product-details span {
        font-size: 12px;
        line-height: 18px;
        /*height: 4.5em;*/
        text-overflow: ellipsis;
        overflow: hidden;
        word-wrap: break-word;
        display: inline-block;
    }

.product div.checkbox-title {
    font-size: .8em;
    position: absolute;
    bottom: 10px;
    right: 15px;
}

    .product div.checkbox-title span.custom-checkbox {
        float: right;
        margin: 0 0 0 10px;
    }



/********** PRODUCT COMPARISON WIDGET **********/
.handle,
.handle:visited {
    float: left;
    background: #eeeef0;
    width: 54px !important;
    height: auto;
    box-shadow: 0 4px 4px rgba(0,0,0,0.4);
    text-indent: 0 !important;
    text-align: center;
    text-decoration: none;
    z-index: 9;
}

    .handle:hover {
        text-decoration: none;
    }

.icon-bucket {
    background: url(/Images/icon-bucket.png) 12px 10px no-repeat;
    background-size: 28px;
    border-bottom: 1px solid #e8e8e8;
    display: block;
    position: relative;
    height: 48px;
    width: 100%;
    text-align: center;
}

    .icon-bucket .badge {
        position: absolute;
        top: -10px;
        right: 2px;
    }

.icon-arrow {
    display: table;
    height: 48px;
    width: 100%;
}

#comparisonContainer {
    z-index: 999;
}

    #comparisonContainer .icon-arrow i {
        /*display: table-cell;*/
        padding: 15px 0 10px;
        font-size: 18px;
        line-height: 22px;
        /*vertical-align: middle;*/
        opacity: .5;
    }

    #comparisonContainer a:hover .icon-arrow i {
        opacity: 1.0;
    }

.productSelector .sliding-panel .icon-arrow-left {
    display: block;
}

.productSelector .sliding-panel .icon-arrow-right {
    display: none;
}

.productSelector .sliding-panel.open .icon-arrow-left {
    display: none;
}

.productSelector .sliding-panel.open .icon-arrow-right {
    display: block;
}

#comparisonBucket {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    float: right;
    padding: 15px 15px 25px;
    position: relative;
    box-shadow: -2px 4px 4px rgba(0,0,0,0.1);
    width: 264px;
    z-index: 99;
}

    #comparisonBucket .ng-scope {
        float: left;
    }

        #comparisonBucket .ng-scope ul + p {
            float: right;
            padding: 25px 15px 0px;
        }

    #comparisonBucket.products .action {
        top: 0;
        bottom: inherit;
        line-height: 19px;
    }

    #comparisonBucket.products img {
        height: 89px;
        -ms-interpolation-mode: bicubic;
    }

    #comparisonBucket ul {
        float: left;
    }

    #comparisonBucket.thumbs li:nth-child(2n) {
        margin: 0 0 0 5px;
    }


    #comparisonBucket .button {
        float: left;
        clear: both;
        margin: 30px 0 0;
    }

    #comparisonBucket.thumbs ul li {
        text-align: center;
    }


/********** PRODUCT COMPARISON WIDGET **********/

.productComparison .product-image {
    height: 200px;
}

.ProductComparer .row {
    border-bottom: none;
}

    .ProductComparer .row.feature {
        border-bottom: 1px solid #ccc;
    }

.productComparison .action {
    border: 1px solid rgba(0,0,0,0.06);
}

.productComparison h3 {
    font-weight: 300;
    /*height: 2.5em;
    overflow: hidden;*/
    word-wrap: break-word;
    display: block;
}

    .productComparison h3 a,
    .productComparison h3 a:visited {
        font-weight: 300;
        line-height: 28px;
        display: block;
        white-space: normal;
        color: #212e84;
        cursor: pointer;
    }

        .productComparison h3 a:hover {
            font-weight: 400;
            text-decoration: none;
        }


/********** PRODUCT DETAILS **********/
#productDetails {
    margin-top: 85px;
    margin-bottom: -40px;
}

    #productDetails h1 {
        line-height: 82px;
    }

    #productDetails hr {
        margin: 0 0 20px;
    }

    #productDetails .product-image {
        margin-top: 15px;
        line-height: 30px;
        border: 1px solid #F1F1F1;
        border-radius: 5px;
        position: relative;
        padding: 25px;
    }

    #productDetails .product-badge {
        margin-top: 30px;
        margin-bottom: 60px;
        padding: 0 10px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

        #productDetails .product-badge > [class*="col-"] {
            border-left: 1px solid #F1F1F1;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -ms-flex-align: center !important;
            align-items: center !important;
            -ms-flex-align: center !important;
            align-items: center !important;
            -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
        }

    #productDetails .product-badge > [class*="col-"]:last-child {
        border-right: 1px solid #F1F1F1;
    }

            #productDetails .product-badge > [class*="col-"] img {
                display: block;
                margin: 0 auto;
                width: auto;
                height: auto;
                max-height: 80px;
                max-width: 100%;
            }

    #productDetails button.small,
    #productDetails button.small + button.small {
        float: left;
        clear: both;
        margin: 0 0 18px;
        width: 220px;
    }

    #productDetails .load-more {
        width: 240px;
    }

    #productDetails .product-buttons .load-more {
        float: left;
        margin: 0px;
        width: 261px;
        margin-bottom: 25px;
    }

    #productDetails label.fighter-category {
        font-size: 14px;
        line-height: 19px;
        margin-bottom: 16px;
    }

    #productDetails button#searchBtn.small {
        float: left;
        clear: none;
        margin: 0px;
        width: auto;
    }

    #productDetails .action.zoom {
        bottom: 20px;
        right: 20px;
    }

    #productDetails p {
        clear: both;
    }

    #productDetails .product-lead {
        margin-bottom: 27px;
    }

    #productDetails .product-desc p {
        color: #4C4C4C;
        font-weight: 300;
        font-size: 24px;
        line-height: 36px;
        padding: 0 0 25px;
    }

    #productDetails .product-desc a,
    #productDetails .product-desc a:visited {
        font-size: 0.86em;
        font-weight: 700;
        text-decoration: underline;
    }

        #productDetails .product-desc a:hover {
            text-decoration: none;
        }


    #productDetails .product-features {
        margin-top: 40px;
    }

    #productDetails .row.product-features {
        margin-bottom: 50px;
        padding: 51px 0 33px;
    }

    #productDetails .product-features ul {
        margin: 0;
        list-style: none;
    }

        #productDetails .product-features ul li {
            font-size: 18px;
            font-weight: 300;
            color: #505050;
            position: relative;
            padding-left: 75px;
            margin-bottom: 44px;
        }
            /*#productDetails .product-features ul li:last-of-type {
                margin-bottom: 0;
            }*/


            #productDetails .product-features ul li:before {
                content: "";
                display: block;
                width: 60px;
                height: 60px;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                background-image: url("/Images/green_tick.png");
            }

/*#productDetails .product-features li {
        font-size: 1.38em;
        padding: 0 0 26px;
        line-height: 26px;
    }*/

.product-summary {
    margin: 20px -10px 37px;
}

    .product-summary .summary-item {
        font-size: 22px;
        font-weight: 300;
        padding: 0 10px 35px;
    }

        .product-summary .summary-item span.small {
            font-size: 16px;
            display: block;
            line-height: 19px;
            padding: 0;
            color: #4C4C4C;
        }

#productDetails .other-products {
    margin-top: 60px;
    margin-bottom: 0px;
    text-align: center;
}

    #productDetails .other-products a.button.load-more {
        margin: 10px auto 0;
    }

    #productDetails .other-products .product {
        min-height: 295px;
    }

        #productDetails .other-products .product .product-details {
            padding: 11px;
        }

    #productDetails .other-products h2 {
        width: 50%;
        margin: auto;
        padding-bottom: 40px;
    }

    #productDetails .other-products #related-products-carousel {
        margin-bottom: 45px;
    }

        #productDetails .other-products #related-products-carousel.thumbs.products .item {
            width: 100%;
        }

        #productDetails .other-products #related-products-carousel.thumbs.products .product-item .image {
            background-color: white;
            margin: 10px;
            padding: 20px;
        }

        #productDetails .other-products #related-products-carousel.thumbs.products .product-item {
            background-color: #F2F2F2;
        }

            #productDetails .other-products #related-products-carousel.thumbs.products .product-item img {
                height: 170px;
                background-color: white;
            }

#productDetails .thumbs.swatches .plus-more {
    float: left;
    font-size: 0.86em;
    clear: both;
    padding: 8px 0 0;
}

#productDetails #related-products-carousel.thumbs {
    padding: 0;
}

#productDetails .pre-footer .store-locator-widget {
    float: left;
    margin: 0;
    width: 100%;
}

    #productDetails .pre-footer .store-locator-widget input[type="text"] {
        max-width: 254px;
        width: 100%;
    }

#productDetails .other-helpful h2 {
    padding-top: 30px;
    padding-bottom: 30px;
}


/********** PAINT CALCULATOR **********/
.paintCalculator input {
    text-align: center;
    color: #0A519A;
}

/** ROOM FIELDS **/
label.meter-field {
    position: relative;
    width: 100%;
}

    label.meter-field:after {
        content: "m";
        color: #0A519A;
        position: absolute;
        display: block;
        right: 12px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

label.meter-field input {
    text-align: center;
}

.p-0 {
    padding: 0 !important;
}

/** TITLE + TOOLTIP **/
.help-tag {
    position: relative;
    display: inline-block;
}

.help-tag a {
    position: absolute;
    font-size: 18px;
    right: -20px;
    top: -15px;
}

#tooltipPaintPrimeBlock {
    position: absolute;
    
    right: 0px;
    top: -15px;
}

.help-tag .tooltip {
    width: 180px;
    left: 51% !important;
    top: 15px !important;
}

.help-tag .tooltip.in {
    opacity: 1;
}

.help-tag .tooltip .tooltip-arrow {
    color: #0A519A;
    left: 92% !important;
    top: -4px;
    margin-left: -4px;
    border-width: 0 10px 10px;
    border-bottom-color: #0A519A;
}

.help-tag .tooltip .tooltip-inner {
    background-color: white !important;
    border: 1px solid #0A519A;
    border-radius: 0px;
    color: #4C4C4C;
    padding: 8px;
    text-align: left;
}

.help-tag .tooltip .panel {
    border-radius: 1px;
    margin-bottom: 5px;
}

.help-tag .tooltip .panel-default {
    border: 2px solid #f5f5f5 ;
}

.help-tag .tooltip .panel-footer {
    padding: 5px 5px;
    border-top: none;
    font-size: 10px;
}

.help-tag .tooltip .tooltip-inner span {
    font-size: 11px;
}
    
/** CUSTOM RADIO BUTTONS **/
.radio-container p {
    padding-bottom: 10px;
}

.input-custom {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    padding-right: 35px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.input-custom input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    transition: all 0.2s ease;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #0a519a;
}

/* On mouse-over, add a grey background color */
.input-custom:hover input ~ .checkmark {
    box-shadow: 0 0 10px #0A519A;
    transition: all 0.2s ease;
}

/* When the checkbox is checked, add a blue background */
.input-custom input:checked ~ .checkmark {
    background-color: #0A519A;
}

/* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
 .input-custom input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.input-custom .checkmark:after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    background-color: #fff;
    border-radius: 50%;
}

#calculatorPresetMacro .top-section {
    /*padding-bottom: 10%;*/
    padding-bottom: 200px;
    margin: 0 auto !important;
    max-width: 1200px !important;
    min-height: 320px;
}

#calculatorPresetMacro .top-section h1 {
    line-height: 90px;
    padding-bottom: 25px;
    color: white;
    width: 60%;
}

#calculatorPresetMacro .top-section p {
    color: white;
    font-weight: 300;
    line-height: 36px;
    width: 50%;
    font-size: 24px;
    width: 50%;
}

#calculatorPresetMacro.container {
    padding: 30px 10px 0;
}

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

/*#calculatorPresetMacro .top-section {
    background: transparent url('/Images/brush_grey-dark.png') 0% 0% no-repeat padding-box;
    opacity: 1;
}*/
#calculatorPresetMacro {
    padding-top: 75px;
    background-image: url(/Images/brush_grey-dark_top.jpg);
    background-repeat: no-repeat;
    background-size: 100% 445px;
}

#calculatorPresetMacro .top-section img.floating-image {
    width: 46%;
    position: absolute;
    right: -50px;
    top: 20px;
}

.paintCalculator h4,
#calculatorPresetMacro h4 {
    font-weight: 300;
    text-align: center;
}

.paintCalculator input[type="text"] {
    width: 100%;
}

.paintCalculator #calculateBtn,
#calculatorPresetMacro #calculateBtn {
    width: 100%;
}

.paintCalculator .disclaimer hr {
    margin: 0 0 1em;
}

#estimatedLitresOfPaint {
    color: #212e84;
    font-size: 100px;
    font-weight: 600;
}

#select-space {
    padding: 0 0 20px;
}

#select-space button {
    border-radius: 0px;
    border: none;
    opacity: 1;
    position: relative;
    padding: 0;
    width: 99%;
    height: 180px;
    /*width: 262px;
    height: 180px;*/
}

#select-space button:hover,
#select-space button:active,
#select-space button:focus,
#select-space button.selected {
    outline: 4px solid #0A519A;
}

#select-space button:hover p,
#select-space button:active p,
#select-space button:focus p,
#select-space button.selected p {
    /*font-weight: 600;
    color: #212e84;*/
}

#select-space button p {
    font-size: 1.5em;
    height: 61px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0px;
    opacity: 1;
    font-weight: lighter;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    text-align: center;
    padding: 15px !important;
}

#select-space button p.interior{
    background: #2895CF 0% 0% no-repeat padding-box;
}

#select-space button p.exterior{
    background: #A4C74F 0% 0% no-repeat padding-box;
}

#select-coats > div > div > label {
    color: #4d4d4d;
}

    #select-space p strong,
    #select-coats > div > div > label > strong,
#select-measurement p strong {
    font-weight: 700;
}

#select-space .header,
#select-measurement .header,
.calculator-results .header {
    font-size: 1.5em;
    text-align: left;
    font-weight: lighter;
    letter-spacing: 0;
    color: #4C4C4C;
    opacity: 1;
}

.paint-estimate {
    background: #0A519A 0% 0% no-repeat ;
    opacity: 1;
    width: 100%;
    height: 180px;
}

.paint-estimate p {
    text-align: center;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    text-align: center;
    line-height: 100px;
}

#select-space h3 {
    padding: 0 0 20px;
}

#select-space p {
    padding: 0 !important;
}

#select-doors span,
#select-windows span {
    width: 120px;
    display: inline-block;
}

#select-doors select,
#select-windows select {
    /*text-align: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    text-align-last: -moz-center;
    text-align-last: -webkit-center;
    text-align-last: center;*/
    text-indent: 45%;
}



#CalculatorSectionLeft,
#CalculationSectionRight {
    padding: 0;
}

#CalculatorSectionLeft {
    /*border-right: 2px solid #F2F2F2;*/
    /*padding-right: 20px;*/
    position: relative;
}

    #CalculatorSectionLeft:after {
        content: "";
        width: 3px;
        height: 100%;
        display: block;
        background-color: #f2f2f2;
        position: absolute;
        right: 0;
        top: 0;
    }

#CalculationSectionRight {
    padding-left: 20px;
}

.calculator-results .paint-estimate {
    display: table;
    margin: 0 auto;
    text-align: center;
    background-color: #0A519A;
}

.paint-estimate > div {
    display: table-row;
}

/*.paint-estimate > div > div {
    display: table-cell;
    vertical-align: middle;
}*/

    .paint-estimate > div > div {
        height: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

.paint-estimate span {
    color: #FFFFFF !important;
    font-size: 30px;
    line-height: normal;
    padding: 15px;
    font-weight: lighter;
}

#broadwallLitres,
#evesGuttersLitres,
#doorsWindowsTrimLitres,
#undercoatLitres,
#ceilingOrRoofLitres {
    color: #0A519A;
}

#select-coats {
    /*padding: 0 0 20px;*/
}

    #select-coats select {
        width: 100%;
    }

/*#select-measurement {
    padding: 0 0 20px;
}*/

#select-measurement select {
    width: 100%;
}

#CalculatorSectionLeft select {
    color: #0A519A;
}

#CalculationSectionRight .calculator-results {
    padding: 0;
}

#CalculationSectionRight h3 {
    font-size: 1.7em;
}

#CalculationSectionRight .col-md-9 {
    word-wrap: break-word;
}

    #CalculationSectionRight .col-md-9 strong {
        font-weight: 700;
    }

#CalculationSectionRight .actions {
    float: right;
    padding: 10px 0px 0;
    width: auto;
}

#CalculationSectionRight hr {
}

#CalculationSectionRight .calculator-results .col-md-3 {
    text-align: center;
}


#estimatedLitresOfPaint p {
    line-height: 36px;
}

#calculatorPresetMacro .disclaimer {
    font-size: 70%;
    margin-top: 70px;
}

/********* PAINT CALCULATOR MODAL **********/
#calculatorPreset .col-md-10 {
    float: none;
    margin: 0 auto;
}

#calculatorPreset #select-space button {
    height: 104px;
    width: 104px;
}