﻿/*.h3
{
	background-color: Black;
	color: White;
	display: block;
	font-family: Arial, Calibri, Lucida Console, Arial Unicode MS;
	font-size: medium;
	font-weight: bold;
	line-height: 40px;
	height: 40px;
	
	padding: 0px 15px;
	margin: 0px;
}*/

/*h4
{
    font-size: 1.1em;
}*/

/*.resultsHeader
{
    position: relative;
}*/

.rolloutAltLink {
    display: block;
    cursor: pointer;
    text-decoration: underline;
    color: Black;
    padding-top: 20px;
    padding-bottom: 20px;
}

#rolloutAltLinkBand {
    position: absolute;
    right: 15px;
    top: 5px;
    height: 30px;
    font-size: .7em;
    cursor: pointer;
    text-decoration: underline;
    margin-top: -5px;
    color: White;
}


/*.resultsInstructions
{
	margin-left: 10px;
	display: block;
	padding-right: 30px;
}*/
/*.PageHeader
{
	font-size: x-large;
}*/
/*div#MainContentArea
{*/
/*border: solid 1px Black;*/
/*margin-top: 20px;
	padding-left: 20px;
	width: 625px;
}*/
/*.recommendationBox
{
    position: relative;
    margin-bottom: 25px;
    min-height: 250px;
}

.recommendationBox h2
{
    margin: 0px;
    
}*/

.primaryRecommendationBox, .alternateRecommendationBox {
    /*   position: relative;
    padding-bottom: 25px;*/
    margin: unset;
}

/*.recommendedInfoContainer
{
    margin-left: 160px;
}*/
/*.recommendationBox .productImage
{
    width: 150px;
    height: 250px;
}*/
/*.productImageContainer
{
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100px;
    
    border: 0px;
}*/
/*.productImage
{
    display: block;
    margin: 0px auto;
}*/
/*.selectButton
{
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 10;
}*/
/*.selectButton img
{
    border: 0px;
}*/
/*.productInformation
{
    margin-left: 110px;
    position: relative;
}*/
/*.rightColumn
{
    position: absolute;
    top: 35px;
    right: -7px;
    width: 57%;    
}*/
/*.leftColumn
{
    position: relative;
    top: 3px;*/
/* width: 45%; 
    overflow: visible;  */
/*}*/
/*.infoLine
{
    display: block;
    height: 15px;
    line-height: 15px;

}*/
/*.productInformation h4 {
    position: relative;
    top: 13px;
}*/
/*.modelNumber{
    position: absolute;
    top: -37px;
    font-size: 12px;
    font-weight: bold;
}

    .modelNumber .infoLineField {
        display: none;
    }*/

.spacer-below {
    margin-bottom: 1.8rem !important;
}

/*.productInfoContainer
{
    margin-top: 10px;
}*/

/*.recommendedInfoContainer .infoLine
{
    font-weight: bold;
    margin-left: 10px;
}*/

/*.infoLineField
{
    float: left;
    width: 130px;
}*/

/*.heatPumpInfoLineField {
    float: left;
    width: 140px;
}

.rightColumn .infoLineField
{
    width: 135px;
}

.infoLineValue
{
    float: left;
}

.specContainer
{
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}*/

/*.alternateRecommendedLink
{
    display: block;
    margin-left: 10px;
    line-height: 1.7em;
}*/

/*.LoadSummarySection
{
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
}*/

/*.LoadSummarySection h3
{
    background-color: Black;
    color: White;
    padding: 3px 10px;
    margin: 0px 0px 10px 0px;
    font-size: 13px; 
    line-height: 19px;
    height: 19px;
    font-weight: bold;
    
}*/

/*#tempRiseField
{
    position: absolute;
    top: 34px;
    left: 300px;
}*/

/*.LoadSummarySection .fieldLineItem {
    display: block;
    height: 25px;
    line-height: 20px;
    padding-left: 10px;
}*/

/*.LoadSummarySection .fieldLineItem span
{
    float: left;
}

.LoadSummarySection .fieldLineItem .fieldName
{
    width: 150px;
}*/

.peakNote {
    padding-left: 10px;
    /*ProductImage*/
}

.heatPumpFields {
    margin-top: 10px;
    overflow: visible;
}

    .heatPumpFields .infoLineField {
        width: 225px;
    }

.COPLine .infoLineField {
    width: 130px;
}

.noteRow {
    text-align: center;
    padding: 4px;
    margin-top: 15px;
}

/* Debug Container */

.debugContainer {
    border: 1px dotted gray;
    background-color: #FFFFCC;
    color: gray;
    padding: 2px;
    margin-right: 10px;
}

    .debugContainer:hover {
        scrollbar-width: thin !important;
    }

    .debugContainer .debugInformationHeader {
        font-size: .8em;
        font-weight: bold;
        display: block;
    }

    .debugContainer .debugInformationDetails {
        font-size: .7em;
        display: block;
        margin-bottom: 5px;
    }

    .debugContainer .fieldLineItem {
        height: 17px;
        line-height: 17px;
    }

        .debugContainer .fieldLineItem .fieldName {
            width: 220px;
        }

    .debugContainer table {
        width: 100%;
    }

        .debugContainer table td:nth-child(1) {
            font-weight: bold;
        }

        .debugContainer table th:nth-child(2) {
        }

        .debugContainer table th {
            text-align: left;
        }

.recommendation-container-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.resultFieldList {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}

.recommendation-container .recommendation-line-item {
    /*margin: 0.4rem 0;*/
    /*line-height: 1.3rem;*/
    display: flex;
    flex-direction: column;
    /*font-size: 1.2rem;*/
    margin-bottom: 0.5rem;
    align-items: center;
}

    .recommendation-container .recommendation-line-item .recommendation-field-name {
        /*margin-right: 1rem;*/
        display: inline-block;
        /*width: 150px;*/
        font-weight: 600;
        flex-basis: 50%;
        text-align: center;
    }

    .recommendation-container .recommendation-line-item .recommendation-field-value {
        /*flex-basis: 50%;*/
        text-align: center;
        padding-left: 0.2rem;
    }

.recommendation-container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    flex-wrap: wrap;
    /*padding: 5rem 0;*/
    margin: 1rem;
    box-sizing: border-box;
    background-color: var(--alternate-background-colour);
    padding: 3rem;
    max-width: 300px;
}

    .recommendation-container .product-heading-container {
        font-size: 1.5rem;
        font-weight: bold;
        /*            padding: 1rem;*/
        box-sizing: border-box;
        margin-bottom: 2rem;
        /*margin-right: 2rem;*/
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .recommendation-container .product-heading-container .model-number {
            display: block;
            font-size: 0.9em;
        }

        .recommendation-container .product-heading-container .product-line-name {
            display: block;
            font-size: 1.1em;
            max-width: 240px;
            text-align: center;
        }

    .recommendation-container .product-select-container {
        /*width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 2rem;*/
        display: flex;
        justify-content: center;
    }

        .recommendation-container .product-select-container input[type=submit] {
            width: 140px;
        }

    .recommendation-container .productImageContainer {
        /*flex-grow: 0.3;*/
        /*width: 35%;           */
        /*text-align: center;*/
        padding: 1.5rem 1rem;
        /*            align-self: flex-start;*/
    }

        .recommendation-container .productImageContainer input[type=image] {
            width: 100%;
            height: 100%;
            object-fit: contain;
            max-height: 200px;
            min-height: 135px;
        }

    .recommendation-container .productInformation {
        /*flex-grow: 0.8;*/
        /*padding-top: 2rem;*/
        /*width: 55%;*/
        /*padding-left: 0.5rem;*/
    }

.product-quick-container {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.product-quick-container div {
    display: flex;
    flex-direction: column;
    flex-basis: 33.3%;
    align-items: center;
}

.product-quick-container .caption {
    font-size: 0.6em;
    text-align: center;
    text-transform: uppercase;
    
}

    .product-quick-container .value {
        font-size: 1em;
        font-weight: 600;
    }

.product-select-container button {
    min-width: 100px;
}

@media only screen and (min-width: 1250px) {

    /*.recommendation-container {
        font-size: 1.8rem;
        flex-direction: row;
    }*/

        .recommendation-container .product-heading-container {
            font-size: 1.6rem;
        }

        /*.recommendation-container .product-select-container {
            margin-top: unset;
            flex-basis: 18%;
            justify-content: right;
        }*/

        /*.recommendation-container .productImageContainer {*/
            /*flex-grow: 0.3;*/
            /*flex-basis: 25%;
        }

            .recommendation-container .productImageContainer input[type="image"] {
                max-height: 300px;
            }


        .recommendation-container .productInformation {*/
            /*flex-grow: 0.8;*/
            /*flex-basis: 65%;

        }*/

    /*.resultFieldList {
        height: 250px;
        align-items: unset;
    }*/

    /*.recommendation-line-item {
        line-height: 3rem;
        margin-right: 4rem;
        display: unset;
        flex-direction: unset;
        font-size: unset;
    }*/

    .recommendation-container .recommendation-line-item {
        margin-bottom: 0.75rem;
    }

    .recommendation-container .recommendation-line-item .recommendation-field-name {
        /*width: 200px;*/
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-align: center;
    }

    .spacer-below {
        margin-bottom: 3rem !important;
    }

    .recommendation-container-list {
        justify-content: unset;
    }
}
