/*****************
 Top Level Rules 
 *****************/
.ice-calculator {
	--true-ice-blue-medium: rgba(0, 85, 129, 1);
	--true-ice-blue-light: rgba(0, 175, 234, 1);
	--true-ice-blue-light-transparent: rgba(0, 175, 234, 0.1);
	--true-ice-gray: rgba(52, 51, 51, 1);
	--true-ice-light-gray: rgba(250, 248, 248, 1);
	--true-ice-black: rgba(35, 31, 32, 1);

	--true-ice-border-color: rgba(230, 230, 230, 1);

	--true-ice-calculator-width: 700px;
}

.ice-calculator {
	border: 1px solid var(--true-ice-border-color) !important;
	background-color: var(--true-ice-light-gray);
	color: var(--true-ice-black);
	width: var(--true-ice-calculator-width);
	padding: 0;
}

.ice-calculator-text {
	text-align: center;
}

.ice-calculator-header {
	color: var(--true-ice-blue-light);
	margin: auto;
	text-align: center;
}


.ice-calculator-contact-form{

	display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

} 
/* Override the flex display for .gchoice on specific media screens */
@media only screen and (min-width: 959px) and (max-width: 1200px) {
    .gchoice {
        display: block !important;
    }
}
.ice-calculator-contact-form .gform_wrapper.gravity-theme .gform_fields{
	display: block;
}

.ice-calculator-contact-form .gchoice label {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none; /* Remove border from default gform css */	
	margin-top:-4px;
	color:#005581 !important;
}



/* Center the submit button */
.ice-calculator-contact-form .gform_wrapper.gravity-theme .gform_footer, .gform_wrapper.gravity-theme .gform_page_footer {
    display: flex;
    justify-content: center;
    width: 100%;
	margin: -30px 0 0;
}

.ice-calculator-contact-form .spacer.gfield {
    display: none; /* Hide the spacer element, it is interfering with sizing */
}


.ice-calculator-contact-form .gform_wrapper.gravity-theme .gfield input.large, .gform_wrapper.gravity-theme .gfield select.large {
    width: 80%;
    margin-left: 65px;
}

/*Note, you can't use any of the custom props assigned to .ice-calculator for the buttons as these are not on the modal.*/
#close-calculator {
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 50%;
	border-color: transparent;
	background-color: rgba(0, 175, 234, 1);
	height: 20px;
	width: 20px;
	cursor: pointer;
	color: white;
	justify-content: center;
    display: flex;
    align-items: center;
}

#close-calculator > .fa-x{
	font-size: .75rem;
    margin: 0;
    padding-left: 1px;
    padding-top: 0px;
}

#open-calculator,
#open-calculator:focus,
#open-calculator:active{
	background-color: rgba(0, 175, 234, 1);
	border-color: rgba(0, 175, 234, 1);
	color: white;
	cursor: pointer;
}

#open-calculator:hover{
	background-color: white;
	color: rgba(0, 175, 234, 1);
}

/***************
Business Details 
****************/
.business-details{
	padding: 1rem;
}

.ice-calculator-options-container {
	margin-top: 3rem;
	display: grid;
	gap: 2rem;	
}



.ice-calculator-option {
	outline: 1px solid black;
	position: relative;
}

.ice-calculator-option select {
	display: none; /*hide original SELECT element: */
}

.select-selected {
	margin-top: 0;
	background-color: white;
}

/* Style the arrow inside the select element: */
.select-selected:after {
	position: absolute;
	content: "V";
	transform: scale(2, -1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background-color: var(--true-ice-blue-light);
	top: 2px;
	bottom: 0;
	right: 9px;
	width: 18px;
	transition: all 0.1s;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
	transform: scale(2, 1);
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
	color: var(-true-black);
	padding: 8px 16px;
	outline: 2px solid var(--true-ice-border-color)!important;
	cursor: pointer;
	margin-top: 2px;
}

/* Style items (options): */
.select-items {
	position: absolute;
	background-color: white;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
}

/* Hide the items when the select box is closed: */
.ice-calculator-hide {
	display: none !important;
}

.ice-calculator-hide-animated{
	height: 0px !important;
	transition: all .25s ease-in-out !important;
	overflow: hidden;
}

#ice-calculator-additional-options-container{
	height: 110px;
	padding: 2px;
	overflow: hidden;
	transition: all .25s ease-in-out !important;
}

.select-items div:hover,
.same-as-selected {
	background-color: var(--true-ice-blue-light-transparent);
}

.ice-calculator-recommendations {
	text-align: center;
}

.ice-calculator-recommendations button {
	margin: 2rem;
	border: none;
	padding: 1rem 2rem;
	color: white;
	background-color: var(--true-ice-blue-light);
	cursor: pointer;
}

.ice-calculator-recommendations button:hover,
.ice-calculator-recommendations button:focus,
.ice-calculator-recommendations button:active {
	color: var(--true-ice-blue-light);
    background: #fff;
    outline: 1px solid var(--true-ice-blue-light);
    transition: all .25s ease-in-out !important;
}

input[type="number"] {
	width: 80px;
	height: 1.75rem !important;
	margin-top: 17px;
	border-color: var(--true-ice-border-color) !important;
}

.ice-calculator-option-additional {
	display: flex;
	justify-content: space-between;
	align-items: center;
	outline: 2px solid var(--true-ice-border-color) !important;
	background-color: white;
	padding-inline: 1rem;
	height: 34px;
	transition: all .25s ease-in-out !important;
}

.ice-calculator label{
	color: black !important;
	margin-bottom: 0 !important;
	font-size: inherit !important;
}

/******
Results
*******/
.ice-calculator-results {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	transition: all .25s ease-in-out !important;
}

.ice-calculator-results .border {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid black;
	width: 200px;
	height: 400px;
	align-items: center;
}

.ice-calculator-results p {
	margin-bottom: 1rem;
	margin-inline: 1rem;
	font-size: 12px;
	text-align: center;
}

.ice-calculator-results span {
	display: block;
	margin: 1rem auto;
	text-align: center;
}

.ice-calculator-output-header h2{
	color: var(--true-ice-blue-light);
}

.estimated-usage-output-container{
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	margin-bottom: 5rem;
}

.estimated-usage-output-container label{
	padding: 1rem 2rem;
	color: white !important;
	background-color: var(--true-ice-blue-light);
	outline: 2px solid var(--true-ice-border-color)!important;
}

.estimated-usage-output-container input{
	width: 7.1rem;
    margin-top: 16px;
    height: 3.8rem !important;
	border: none !important;
	outline: 2px solid var(--true-ice-border-color)!important;
}

.recommendation-row{
	display: flex;
	flex-direction: column;
}

.recommendation-row:nth-child(odd){
	background-color: var(--true-ice-border-color);
}

.recommendation-row-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.recommendation-row-header h3{
	color: var(--true-ice-blue-light);
}

.recommendation-row-header p{
	margin: 0px !important;
	white-space: nowrap;
	max-width: 100% !important;
}

.ice-calculator-font-light{
	color: var(--true-ice-blue-light);
	font-size: 1.25rem;
	font-weight: 900;
}

.ice-calculator-font-medium{
	color: var(--true-ice-blue-medium);
	font-size: 1.5rem;
	font-weight: 900;
}

.ice-calculator-slide{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(200,200,200,1);
    width: 14rem;
    padding: .5rem;
    text-align: center;
	background-color: white;
}

.ice-calculator-slide .heading_3{
	font-size: 1.5rem;
}

.ice-calculator-slide p{
	font-size: .75rem;
	font-weight: 900;
}

.recommendation-row-content{
	display: flex;
	padding: 1rem;
	gap: 1rem;
}

.ice-calculator-error{
	font-size: 1.5rem;
    margin: 1rem;
    font-weight: 900;
}


@media (min-width: 700px){
	.estimated-usage-output-container{
		flex-direction: row;
	}

	.ice-calculator-options-container{
		grid-template-columns: 1fr 1fr;
	}

	.recommendation-row{
		flex-direction: row;
	}

	.recommendation-row-header{
		padding: 1rem;
	}

	.ice-calculator-font-light,	
	.ice-calculator-font-medium{
		font-size: 1rem;
	}
}