/**
 * Agilent AES Calculator
 *
 * This stylesheet represents the basic layout of the application
 * and should not be modified. For individual styling of fonts,
 * colors and overall look and feel, please use theme.css
 */


#aes-calculator {
    font-size: 11px;
    line-height: 1.5;
    max-width: 920px;
}

#aes-calculator,
#aes-calculator * {
    font-family: Helvetica, Arial, sans-serif !important;  /* Overwrite Agilent LSCACUstomStyles.css */

    /* apply a natural box layout model to all elements */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* Overwrite Agilent LSCACUstomStyles.css */
#aes-calculator ul {
    list-style-type: disc;
    font-size: 11px !important;
    padding-left: 1.25em !important;
}

#aes-calculator b,
#aes-calculator strong {
    font-weight: bold;
}

#aes-calculator input::-webkit-outer-spin-button,
#aes-calculator input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}

#aes-calculator .popover-close {
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
 }

#aes-calculator .popover-content p,
#aes-calculator .popover-content ul,
#aes-calculator .popover-content ol {
    margin: 0 auto 0.5em;
    text-align: left; /* Overwrite Agilent LSCACUstomStyles.css */
}


/* -- Details -------------------------------------------------------------- */
#aes-calculator .details-container {
    width: 365px;
    float: left;
    padding: 10px 10px 10px 0;
}


/* Currency selector */
#aes-calculator .currency {
    margin-bottom: 1.2em;
    overflow: hidden;
    text-align: center;
    }

    #aes-calculator .currency span,
    #aes-calculator .currency label { padding: 10px; }

    #aes-calculator .currency input[type="text"],
    #aes-calculator .currency input[type="number"] {
        min-width: 4em;
        max-width: 6em;
    }


/* Detail box */
#aes-calculator .box label {
    margin-top: 1.25em;
    /*position: relative;*/
}

#aes-calculator i {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 0.5em;

    background: url('/cs/common/plusimages/031213_MP-AES_basic_icon_info.png') no-repeat;
    background-size: 16px;
    vertical-align: middle;
    cursor: pointer;
}

#aes-calculator .slider-input {
    display: block;
    clear: both;
    overflow: hidden;
    }

    #aes-calculator .slider-input span {
        display: block;

    }

    #aes-calculator .slider-input input {
        width: 40px;
        float: left;
    }

    #aes-calculator .slider {
        margin: 0.5em 10px auto 50px;
    }


/* -- Chart ---------------------------------------------------------------- */
#aes-calculator .chart-container {
    width: 510px;
    float: left;
    padding: 10px 0 10px 10px;
    text-align: center;
    max-height: 350px;
    }

    #aes-calculator .chart {
        height: 300px;
    }

    #aes-calculator .chart-offscreen {
        position: absolute;
        top: -99em;
        left: -99em;
    }

    #aes-calculator .chart-container label {
        padding: 10px;
    }


/* -- Results -------------------------------------------------------------- */
#aes-calculator .result-container {
    clear: both;
    overflow: hidden;
    padding: 10px;
}

#aes-calculator .result-container h4 {
    margin: 0 0 0.5em;
}

#aes-calculator .col {
    float: left;
    width: 26%;
    margin-right: 4%;
}

#aes-calculator .col.first {
    width: 345px;
}

#aes-calculator .col.savings {
    font-size: 150%;
    margin-right: 0;
}

#aes-calculator .col > strong {
    font-size: 200%;
}

#aes-calculator a.button {
    text-decoration: none;
    display: inline-block;
}


/* -- Footer -------------------------------------------------------------- */
#aes-calculator .footer {
    clear: both;
    overflow: hidden;
    margin-top: 10px;
    }

    #aes-calculator .footer .left {
        width: 365px;
        float: left;
        border: 0 none; /* Overwrite Agilent LSCACUstomStyles.css */
    }

    #aes-calculator .footer .right {
        float: right;
        width: auto; /* Overwrite Agilent LSCACUstomStyles.css */
    }

    #aes-calculator .disclaimer-content { display: none; }

    #aes-calculator .footer .popover { width: 436px; }