﻿/* SJ- added Start -*/
@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}
.field-validation-error {
    font-size: medium !important;
}
select {
    background-color: white;
}

.submit-section button:hover {
    background: #253492;
}
.submit-section button {
    color: #fff;
    background: #10218b;
    border: none;
    padding: 12px 25px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 12px;
}
.acton-page-index button {
    text-transform: uppercase;
    color: white;
    display: inline-block;
    background: #10218b;
    font-size: 12px;
    font-weight: bold;
    padding: 12px;
    min-width: 350px;
}

.acton-page-index button hover {
    background: #10218b;
}
.acton-page-index label {
    color: #0A1290 !important;
    font-weight: bold;
    font-size: 13px !important;
}

.acton-button-page-result button {
    text-transform: uppercase;
    color: #10218b;
    display: inline-block;
    background: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px;
    min-width: 120px;
}
    .acton-button-page-result button:hover {
        
        background-color: snow !important;
        
    }

.notes p {
    font-size: 1.2em;
    line-height: 145%;
    font-size: 13px;
}
.footnotes p {
    font-size: 1.2em;
    line-height: 145%;
     
}
.container p {
    font-size: 1.2em;
    line-height: 145%;
}
.form-group label {
    color: #fff;
    
    float: none;
}
.alert-success-message {
    font-size: 20px;
}
/*
.tooltip{

}
a[data-toggle]:hover:after {
    content: attr(title);
    padding: 4px 8px;
    color: #0A1290;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
*/
label:hover {
    position: relative;
}

/*label[title]:hover:after {
   
    content: attr(title);
    padding: 4px 8px;
    color: #0A1290;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}*/

.tooltip-block:hover:after {
    border: 1px solid #fc0;
    padding: 3px 6px;
    background: #fffea1;
    content: attr(data-title);
    position: absolute;
    right: -40px;
    top: -26px;
}
.tooltip-custom {
    display: inline;
   
    position: relative;
}

    .tooltip-custom :hover:after {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        top: 26px;
        color: #fff;
        content: attr(data-title);
        left: 20%;
        padding: 5px 15px;
        position: absolute;
        width: 220px;
    }

    .tooltip-custom :hover:before {
        border: solid;
        border-color: #333 transparent;
        border-width: 0 6px 6px 6px;
        top: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    }

.acton-form-grey {
    background: #575752;
}

.acton-panel-heading {
    font-size: 24px;
    background: #575752;
    color: #fff;
    background-image: -webkit-linear-gradient(top,#6d6c75 0,#e5e5e6 100%) !important;
}
 
.container panel {
    border-color: #575752;
}
/* SJ- added END -*/
.ep-container {
    min-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    background: #F2F2F2;
}
#container .container p {
    font-size: 1.2em;
    line-height: 145%;
}

@media only screen and (min-width: 768px) {
    .top-content-block {
        width: 750px;
    }
}

@media only screen and (min-width: 992px) {
    .top-content-block {
        width: 970px;
    }
}

@media only screen and (min-width: 1200px) {
    .top-content-block {
        width: 1170px;
    }
}

h1, h2, h3, h4 {
    font-weight: bold;
    margin: 1em 0;
    line-height: 1.5em;
}

h1 {
    font-size: 28px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
}

.text-block h1 {
    margin-top: 1em;
}

.banner-sec {
    background: #000;
}

.banner-sec {
    height: 500px;
 
    background: #000 url('../images/eco-saving/ecoSaving-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}

.main-banner {
    max-height: 500px;
    max-width: 100%;
}

.banner-sec {
    position: relative;
}

.top-content-block {
    max-width: 1170px;
    margin: 0 auto;
}

.fixed-content {
    text-align: left;
}

    .fixed-content .col-sm-6 {
        padding-left: 0;
    }

.top-content-block ul {
    padding-top: 22px;
}

    .top-content-block ul li {
        list-style-type: none;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        margin: 10px 0 10px 10px;
        padding-right: 10px;
        border-right: 1px solid #fff;
    }

        .top-content-block ul li:first-child {
            margin-left: 0;
        }

        .top-content-block ul li:last-child {
            border-right: none;
        }

.fixed-content p {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
}

.header-printer {
    padding-top: 80px;
    max-width: 100%;
    margin-left: 35px;
}

.text-block {
    padding-right: 120px;
}

@media only screen and (max-width: 767px) {

    .top-content-block {
        padding: 0 20px;
    }

    .fixed-content {
        position: relative;
    }

    .banner-sec {
        height: auto;
    }

    .text-block {
        padding-right: 0;
    }

    .header-printer {
        padding-top: 40px;
        margin-left: 0;
        margin: 0 auto;
        float: none;
        display: block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 778px) {
    .fixed-content {
        padding-left: 10px;
    }
}

@media only screen and (min-width: 767px) and (max-width: 991px) {
    .text-block {
        padding-right: 20px;
    }

        .text-block h1 {
            margin-top: 120px;
        }
}

@media only screen and (min-width: 992px) and (max-width: 1002px) {
    .fixed-content {
        padding-left: 10px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .text-block {
        padding-right: 60px;
    }

        .text-block h1 {
            margin-top: 120px;
        }
}

@media only screen and (min-width: 992px) {

    h1 {
        font-size: 36px;
    }
}

@media only screen and (min-width: 1200px) {
    .text-block h1 {
        margin-top: 150px;
    }

    .header-printer {
        /* padding-top: 120px; */
    }
}

sub, sup {
    top: 0em;
}

.form-section h2 {
    font-size: 24px;
    margin: 1.5em auto;
    color: #fff;
    background: #575752;
}

.form-section {
    color: #0A1290;
    font-weight: bold;
    font-size: 13px;
}

    .form-section label {
        display: block;
        margin: 12px auto;
    }

.company-info input,
.company-info select,
.product-info select {
    width: 80%;
    max-width: 350px;
    font-size: 13px;
    padding: 9px 12px;
    margin-bottom: 25px;
}

.info-form textarea {
    width: 100%;
    font-size: 13px;
    padding: 9px 12px;
    margin-bottom: 25px;
    line-height: 1.7;
}

.company-info .form-description {
    width: 90%;
    margin: 0 auto;
}

    .company-info .form-description label {
        text-align: left;
    }

@media only screen and (min-width: 768px) {
    .company-info .form-description {
        width: 100%;
        max-width: 400px;
        margin-left: 0;
    }
}

.checkboxes {
    padding: 15px 0;
    font-weight: normal;
}

    .checkboxes input {
        margin-right: 10px;
    }

@media only screen and (min-width: 500px) {
    .company-info .form-top-item {
        display: block;
        width: 50%;
        float: left;
    }

    .product-info .form-item {
        width: 50%;
        float: left;
    }

    .company-info,
    .product-info {
        border-bottom: 1px solid #d9d9d9;
    }
}

@media only screen and (min-width: 768px) {
    .company-info,
    .product-info {
        text-align: left;
    }

    .product-info {
        padding-top: 15px;
    }

    .company-info .form-top-item {
        display: block;
        width: 33.33%;
    }

    .company-info input,
    .company-info select,
    .product-info select {
        width: 100%;
        max-width: 100%;
    }

    .company-info .form-top-item,
    .product-info .form-item {
        padding-right: 25px;
    }

    .product-info .form-item {
        display: block;
        float: left;
    }

        .product-info .form-item.brand,
        .product-info .form-item.model {
            width: 25%;
        }

        .product-info .form-item.unit {
            width: 12.5%;
        }

        .product-info .form-item.epson-printer {
            width: 37.5%;
        }

    .product-info label {
        min-height: 26px;
    }

    .checkboxes {
        text-align: left;
    }

    .footnotes {
        text-align: left;
        font-size: 70%;
        font-weight: normal;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .notes {
        text-align: left;
        font-size: 85%;
        font-weight: normal;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

.submit-section input[type="submit"] {
    color: #fff;
    background: #10218b;
    border: none;
    padding: 12px 25px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 12px;
}

    .submit-section input[type="submit"]:hover {
        background: #253492;
    }

.product-info .form-item.epson-printer span {
    font-weight: normal;
}

.blue-bg {
    background-color: #030576;
    position: relative;
}

    .blue-bg h2 {
        color: #fff;
        font-size: 28px;
        font-weight: normal;
        width: 80%;
        margin: 46px auto;
    }

    .blue-bg a {
        text-transform: uppercase;
        color: #10218b;
        display: inline-block;
        background: #fff;
        font-size: 12px;
        font-weight: bold;
        padding: 12px;
        margin-right: 20px;
    }

        .blue-bg a:hover,
        .blue-bg a:active {
            text-decoration: none;
            background: #dcdcdc;
        }

.button-links {
    margin-bottom: 80px;
}

    .button-links a:nth-child(2) {
        margin-right: 0;
    }

.bg-triangle {
    border: 25px solid #030576;
    height: 0;
    width: 0;
    margin: -25px auto;
    border-bottom: none;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.charts-section {
    padding-top: 60px;
    background: #fff;
}

    .charts-section h2,
    .result-adjust h2,
    .data-comparison h2,
    .prod-info h2,
    .new-comparison h2 {
        color: #575755;
        font-size: 28px;
        font-weight: normal;
    }

    .charts-section p {
        text-align: left;
    }

.label-block ul {
    text-align: left;
    line-height: 23px;
    font-size: 1.2em;
}

.label-block span.glyphicon {
    font-size: 1.6em;
    vertical-align: text-bottom;
    padding-right: 5px;
}

.label-block li.other span.glyphicon {
    color: #CBCAD8;
}

.label-block li.epson span.glyphicon {
    color: #0e1b8d;
}

.recalc-input-block {
    margin-bottom: 20px;
}

.charts-section .chart-block {
    margin: 80px auto;
}

.result-adjust label {
    color: #10218b;
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    padding: 15px;
}

    .result-adjust label span {
        text-transform: lowercase;
    }

.result-adjust input {
    padding: 6px 10px;
}

.result-adjust .elec-cost,
.result-adjust .total-duration {
    font-size: 12px;
    display: inline-block;
    padding: 15px;
}

.result-adjust {
    padding-bottom: 40px;
}

.data-comparison {
    background: #fff;
}

    .data-comparison h4 {
        font-size: 18px;
        color: #575755;
        font-weight: normal;
    }

.table {
    text-align: left;
}

    .table thead .title {
        text-align: center;
    }

    .table .title {
        color: #10218b;
        font-size: 18px;
        padding: 18px 20px;
        border: none;
        font-weight: normal;
        border-right: 1px solid #dddddd;
        width: 33.33%;
        vertical-align: top;
    }

    .table tbody .title {
        padding-left: 0;
        border-right: none;
    }

    .table thead tr {
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
    }

    .table tbody tr td:nth-child(2) {
        border-left: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

    .table tbody tr:nth-child(3n + 2) {
        background: #f6f6f6;
    }

    .table tbody tr td {
        font-size: 13px;
        padding: 15px 20px;
    }

        .table tbody tr td:nth-child(3) {
            padding: 0;
            text-align: right;
        }

        .table tbody tr td.info-title {
            font-weight: bold;
        }

        .table tbody tr td:nth-child(2) {
            text-align: center;
        }

        .table tbody tr td span {
            display: inline-block;
            width: 49%;
            padding: 15px 20px;
            text-align: center;
        }

    .table tbody tr.border-bottom {
        border-bottom: 1px solid #dddddd;
    }

    .table tbody tr td span.result {
        background: #fa8e13;
        font-weight: bold;
        color: #fff;
        border-bottom: 1px solid #fff;
    }

    .table thead th.title:nth-child(3) {
        border-right: none;
    }

table.table {
    margin-bottom: 40px;
}

.back-blue {
    
    background: #10218b;
    
    
}

.back-white {
    background: #fff;
}

.send-report h2 {
    font-size: 28px;
    color: #fff;
    font-weight: normal;
}

.send-report {
    padding-bottom: 60px;
}

    .send-report input {
        font-size: 12px;
        line-height: 1;
        padding: 13px 20px;
        /* changed width: 50%; to min-width: 50%; */
        min-width: 50%;
        max-width: 500px;
    }

        .send-report input.submit-button {
            color: #10218b;
            text-transform: uppercase;
            padding: 16px 21px;
            border: none;
            vertical-align: bottom;
            font-weight: bold;
            font-size: 12px;
        }

table.table > tbody > tr > td {
    border-top: none;
}

.prod-info {
    padding-bottom: 50px;
}

    .prod-info .prod-content .content {
        text-align: left;
    }

        .prod-info .prod-content .content .prod-name {
            color: #10218b;
            font-weight: bold;
            font-size: 2em;
        }

        .prod-info .prod-content .content h4 {
            font-size: 1.8em;
            color: #10218b;
            font-weight: normal;
        }

        .prod-info .prod-content .content .text {
            margin-bottom: 30px;
        }

        .prod-info .prod-content .content .buttons a {
            background: #10218b;
            color: #fff;
            font-size: 1.2em;
            text-transform: uppercase;
            padding: 10px 15px;
            font-weight: bold;
            margin-right: 20px;
        }

    .prod-info .prod-content .disclaimer {
        margin-top: 50px;
    }

@media only screen and (min-width: 768px) {
    .prod-info .prod-content .disclaimer {
        margin-top: 100px;
    }
}

.prod-info .prod-content .content .buttons a:hover,
.prod-info .prod-content .content .buttons a:active {
    background: #253492;
    text-decoration: none;
}

.new-comparison.back-white {
    padding: 40px 0 80px;
}

.chart-block .graph {
    display: block;
}

@media only screen and (max-width: 767px) {
    .blue-bg a {
        display: block;
        width: 80%;
        max-width: 350px;
        margin: 0 auto 20px auto !important;
    }

    .charts-section,
    .result-adjust,
    .data-comparison,
    .send-report,
    .prod-info,
    .new-comparison {
        padding-left: 20px;
        padding-right: 20px;
    }

        .charts-section .text-block {
            margin-bottom: 20px;
        }

    .table .title {
        font-size: 14px;
        padding: 10px;
    }

    .table tbody tr td span {
        display: block;
        width: 100%;
        padding: 10px;
    }

    .send-report input#report_email {
        line-height: 30px;
        padding: 0 10px;
        /* changed width: 66%; to min-width: 66%; */
        min-width: 66%;
    }

    .send-report input.submit-button {
        padding: 11px 15px;
    }

    .prod-info .prod-content .content .text {
        margin-top: 30px;
    }

    .prod-info .prod-content .content a {
        display: block;
        margin-right: 0;
        margin-bottom: 20px;
        max-width: 400px;
        text-align: center;
    }
}

@media only screen and (min-width: 940px ) {
    .chart-block .graph {
        display: inline-block;
    }

    .charts-section .chart-block {
        margin: 30px auto;
    }
}

.product-info #ddBrand {
  /*  text-transform: capitalize; */ 
}

.product-info #ddPrinterModel {
   /* text-transform: uppercase; */
}

.result-adjust input {
    text-align: center;
}

.prod-info .prod-image img {
    max-width: 100%;
}

.company-info.no-border {
    border: none;
}

@media only screen {
    .print{
        display: none;
    }
}

@media only print {

    body.grey{
        background-color: #fff!important;
    }

    .header-links,
    .main-header,
    .banner-sec,
    .cd-nav-trigger,
    .button-links,
    .result-adjust h2,
    .result-adjust p,
    .result-adjust .submit-section,
    .send-report,
    .prod-info,
    #footer,
    .data-comparison .submit-section,
    .col-sm-8.text-block,
    .col-sm-4.label-block,
    .recalc-input-block,
    .result-adjust,
    .data-comparison h4,
    #container.mobile-container.finlease-topmenu
    {
        display: none;
    }

    .blue-bg {
        background-color: #030576!important;
    }

    .blue-bg h2 {
        color: #fff!important;
        font-size: 32px;
        font-weight: normal;
        width: 80%;
        margin: 46px auto;
        inline-size: 68%;
    }

    #co2-percentage,
    #co2-kg,
    #electricity-kwh,
    #time-frame,
    #currentEpModel
    {
        color: white!important;
    }

    .charts-section h2 {
        font-size: 22px;
        margin: 10px auto;
    }

    .result-adjust {
        margin-top: 60px;
        padding-bottom: 0;
    }

    .charts-section .chart-block {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        width: 90%;
    }

    .charts-section{
        padding-top: 0;
    }

    .label-block li.other span.glyphicon-stop:before {
        color: #CBCAD8!important;
    }

    .print{
        display: flex;
        width: 90%;
        margin: auto;
        justify-content: space-between;
    }

    .charts-section .container{
        padding: 100px 10px 0!important;
    }

    li.epson .glyphicon-stop:before{
        color: #0e1b8d!important;
    }

    .print .text-block{
        width: 60%;
        padding-right: 0;
    }

    .charts-section h2, .result-adjust h2, .data-comparison h2, .prod-info h2, .new-comparison h2{
        color: #575755!important;
        font-size: 28px;
        font-weight: normal;
    }

    .print p, .print .label-block li{
        color: #575755!important;
        font-size: 19px!important;
    }

    .table .title {
        color: #10218b!important;
        font-size: 19px;
        padding: 18px 20px;
        border: none;
        font-weight: normal;
        border-right: 1px solid #dddddd;
        width: 33.33%;
        vertical-align: top;
    }

    .table tbody tr:nth-child(3n + 2) td{
        background: #f6f6f6!important;
    }

    .table tbody tr td span.result {
        background: #fa8e13!important;
        font-weight: bold;
        color: #fff!important;
        border-bottom: 1px solid #fff;
    }

    .result sub, h2 sub{
        color: #fff!important;
    }

    .data-comparison{
        width: 1170px;
        margin: auto;
        padding: 100px 30px 0;
    }

    .data-comparison .container{
        width: 100%;
    }

    .bg-triangle {
        border: 50px solid #030576;
        height: 0;
        width: 0;
        margin: -25px auto;
        border-bottom: none;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }

    .table tbody tr td {
        font-size: 16px;
    }

    .table tbody tr td span.info {
        width: 44%;
    }

    .table tbody tr td span.result {
        width: 53%;
    }

    .table .title sub {
        color: #10218b!important;
    }

}
