/* Colours */
:root {
	
	--grey: #F3F3F5;
	--navy: #273582;
	--pink: #c79fce;
	--blue: #8ab7ea;
	--orange: #cd8342;
	--purple: #58338a;
	--teal: #1dc1cd;
	
	--dark: var(--navy);
	--med: var(--blue);
	--light: var(--teal);
	
	--colour-text: var( --navy );
	
	--colour-link: var( --blue );
	--colour-link-hover: color.adjust(var( --blue ), $lightness: 5%);
	
	--colour-button: var( --blue );
	--colour-button-hover: color.adjust(var( --blue ), $lightness: 5%);
	
}


.blueBackground {
	background: var(--blue);
}

.blueText {
	color: var(--blue);
}

.cost_calculator {
	background: #fff;
	padding: 30px 0;
	transition: all 0.2s linear;
	.btn, button {
		font-size: 18px;
		text-transform: none;
	}
	#cost_calculator_breadcrumb {
		font-weight: bold;
		margin-bottom: 30px;
	}
	.container {
		padding:0 ;
	}
	#cost_calculator_breadcrumb {
		ul {
			margin: 0;
			padding: 0;
			li {
				color: #B5B5B5;
				display: inline;
				margin:0 0 0 10px;
				&.active {
					color: var(--navy);
				}
				&:after {
					content: ">";
					display: inline-block;
					font-size: 30px;
					padding-left: 10px;
					vertical-align: middle;
				}
				&:last-child:after {
					content:"";
				}
			}
		}
	}
	
	.cost_calculator_step {
		display: none;
		max-height: 0;
		opacity: 0;
		transition: opacity 0.2s linear;
		&.active {
			display: block;
			max-height: 9999px;
			opacity: 1;
			transition: opacity 0.2s linear;
		}
	}
	#cost_calculator_step1 {
		padding-bottom: 4rem;
		input {
			display: inline-block;
			font-size: 16px;
			line-height: 1.5;
			margin: 0 0 0 12px;
			padding: 14px 20px;
			vertical-align: middle;
		}
		input[type="text"] {
			padding: 14px;
			margin: 0 0 10px 12px;
			max-width: 250px;
			text-align: left;
			vertical-align: middle;
		}
		.choices__inner {
			input {
				font-size: 16px;
				line-height: 1.5;
				margin: 0 0 10px 0;
				padding: 5px;
			}
		}
		.calculatorIntro {
			margin: 0 auto;
			max-width: 900px;
			padding: 3rem 0 2rem 0;
		}
	}
	
	#cost_calculator_step2 {
		
		.calculatorStep2Actions {
			.btn {
				margin-bottom: 10px;
			}
			#calcReset {
				background-color: #c00;
				&:hover {
					background-color: red;
				}
			}
		}
		
	}

	input#step1next {
		margin-top: 20px;
	}

	.padded {
		padding: 30px 20px;
	}
	
	.tableWrap {
		display: flex;
		flex-direction: column;
		max-width: 100%;
		overflow-x: auto;
		
		.calcMobileArrow {
			padding: 0 20px;
			p {
				margin-bottom: 10px;
			}
			svg {
				height: 20px;
				width: auto;
				path {
					fill: #273582;
				}
			}
			
			@keyframes bounce {
			  0%, 20%, 50%, 80%, 100% {
				transform: translateY(0);
			  }
			  40% {
				transform: translateY(-10px); /* Adjust the height of the bounce */
			  }
			  60% {
				transform: translateY(-7px); /* Adjust the height of the bounce */
			  }
			}
			
			svg {
			  display: inline-block; /* Ensure the element can be animated */
			  animation: bounce 2s infinite; /* Duration and infinite loop */
			}
			
		}
	}
	
	table {
		border-collapse: unset;
		border-radius: 0;
		font-size: 15px;
		margin-bottom: 20px;
		padding: 0;
		width: 100%;
		&.greenTint {
			background: #ECFAFB;
		}
		
		&.blueTint {
			background: #F5F9FD;
		}
		
		&.pinkTint {
			background: #FAF7FB;
			td {
				font-weight: bold;
			}
		}
		th, td {
			border: 0;
		}
		th {
			background: none;
			border-bottom: 1px solid #ccc;
			color: #000;
			font-weight: bold;
			margin-bottom: 10px;
			padding: 15px 20px;
			position: relative;
			text-align: right;
			vertical-align: bottom;
			br {
				display: none;
			}
			&#headingCurrent,
			&#headingPotential {
				background: #eee;
				border-radius: 10px 10px 0 0;
				
			}
			&#headingAccrete,
			&#headingUptake {
				background: #ddd;
				border-radius: 10px 10px 0 0;
			}
			
			&:after {
				box-sizing: border-box;
				content: "";
				height: 10px;
				position: absolute;
					bottom: -1px;
					left: 0;
				width: 100%;
			}
			&#headingCurrent:after,
			&#headingPotential:after {
				border-left: 20px solid #eee;
				border-right: 20px solid #eee;
			}
			&#headingAccrete:after,
			&#headingUptake:after {
				border-left: 20px solid #ddd;
				border-right: 20px solid #ddd;
			}
		}
		td {
			padding: 5px 20px 10px 20px;
			text-align: right;
			&.product_name {
				text-align: left;
			}
		}
		tbody {
			line-height: 1.5;
		}
		tbody tr:first-child td {
			padding-top: 20px;
		}
		th.tableSpacer,
		td.tableSpacer {
			background: #fff;
			border: none!important;
			display: block;
			padding: 0;
			width: 10px;
		}
		.product_name {
			min-width: 200px;
			padding-left: 0;
			width: 36%;
		}
		
		.product_annual_spend,
		.product_equivalent_spend,
		.product_potential_savings,
		.product_uptake_savings {
			width: 16%;
		}
		
		.product_annual_spend,
		.product_potential_savings {
			background: #eee;
		}
		
		.product_equivalent_spend,
		.product_uptake_savings {
			background: #ddd;
		}
		
		.reference .product_uptake_savings {
			font-size: 0;
		}
		
		.text-right,
		.rt {
			text-align: right;
		}
		.totals {
			font-weight: bold;
			td {
				border-top: 1px solid #ccc;
				padding-top: 10px;
				padding-bottom: 20px;
				&:after {
					box-sizing: border-box;
					content: "";
					height: 10px;
					position: absolute;
						top: -1px;
						left: 0;
					width: 100%;
				}
				&#chewTotalCurrent:after,
				&#swallowTotalCurrent:after,
				&#grandTotalCurrent:after,
				&#chewTotalPotential:after,
				&#swallowTotalPotential:after,
				&#grandTotalPotential:after {
					border-left: 20px solid #eee;
					border-right: 20px solid #eee;
				}
				
				&#chewTotalAccrete:after,
				&#swallowTotalAccrete:after,
				&#grandTotalAccrete:after,
				&#chewTotalUptake:after,
				&#swallowTotalUptake:after,
				&#grandTotalUptake:after {
					border-left: 20px solid #ddd;
					border-right: 20px solid #ddd;
				}
				
				&#chewTotalCurrent,
				&#swallowTotalCurrent,
				&#grandTotalCurrent {
					background: #eee;
					position: relative;
				}
				&#grandTotalCurrent {
					border-radius: 0 0 10px 10px;
				}
				
				&#chewTotalAccrete,
				&#swallowTotalAccrete,
				&#grandTotalAccrete {
					background: #ddd;
					position: relative;
				}
				&#grandTotalAccrete {
					border-radius: 0 0 10px 10px;
				}
				
				&#chewTotalPotential,
				&#swallowTotalPotential,
				&#grandTotalPotential {
					background: #eee;
					position: relative;
				}
				&#grandTotalPotential {
					border-radius: 0 0 10px 10px;
				}
				
				&#chewTotalUptake,
				&#swallowTotalUptake,
				&#grandTotalUptake {
					background: #ddd;
					position: relative;
				}
				&#grandTotalUptake {
					border-radius: 0 0 10px 10px;
				}
				
			}
		}
		.totals.grandTotal {
			td {
				padding-bottom: 10px;
			}
		}
	}
	.uptakeCell {
		text-align: right;
		.uptakeBox {
			input[type=number] {
				border: 2px solid #333;
				padding: 10px;
				width: 70px;
			}
		}
		p, span {
			margin: 0;
			vertical-align: top;
		}
		span {
			padding-top: 5px;
			text-align: right;
			flex: 0 0 130px;
		}
		p {
			margin-bottom: 10px;
		}
		input {
			display: inline;
			vertical-align: middle;
			width: 90px;
		}
		.totals {
			td {
				border-top: 1px solid #7096CF;
			}
		}
	}
	#headingUptake,
	.product_uptake_savings {
		min-width: 140px;
	}
	.uptakeMob {
		display: inline-block;
	}
	.uptakeDesk {
		display: none;
	}
	#savingsIntro {
		margin: 2rem auto 3rem auto; 
		max-width: 720px;
	}
	.calculatorNotes {
		margin: 0 auto;
		max-width: 720px;
	}
	.calculatorReferences {
		display: none;
		margin: 0 auto;
		max-width: 900px;
		padding: 0 20px;
		&.active {
			display: block;
		}
	}
}

.loaded .cost_calculator {
	opacity: 1;
	transition: all 0.2s linear;
}

.calculatorFlexPanels {
	display: none;
	&.active {
		display: block;
	}
}



	@media only screen and (min-width: 830px) {
		.cost_calculator {
			padding: 40px 0;
			.container {
				max-width: 1200px;
			}
			.choices {
				width: 600px;
			}
			.padded {
				padding: 30px;
			}
			#cost_calculator_step1 {
				input {
					font-size: 18px;
				}
				input[type="text"] {
					max-width: 600px;
					text-align: left;
				}
			}
			#cost_calculator_step2 {
				.tableWrap {
					display: flex;
						flex-direction: row;
						align-items: flex-end;
						flex-wrap: wrap;
					div {
						margin: 0 1%;
					}
					.table0 {
						flex: 0 0 100%;
					}
					th {
						br {
							display: inline-block;
						}
						.uptakeBox {
							flex-direction: column;
						}
						span {
							display: block;
							padding: 0;
							width: auto;
						}
						p {
							margin-bottom: 10px;
						}
						span {
							flex: 0 0 100%;
						}
					}
					.calcMobileArrow {
						display: none;
					}
				}
				table {
					align-items: flex-end;
				}
				.uptakeCell {
					.mobileProductName {
						font-size: 0;
					}
				}
			}
			.uptakeMob {
				display: none;
			}
			.uptakeDesk {
				display: inline-block;
			}
			#cost_calculator_step3,
			#cost_calculator_step4 {
				margin:0 auto;
				max-width: 900px;
			}
			input#step1next {
				margin-top: 0;
			}
			
		}
	}
	
	@media only screen and (min-width: 1200px) {
		
		.cost_calculator {
			
			.tableWrap {
				overflow-x: hidden;
			}
			
			
		}
		
		
	}
	
	

.pdfContent {
	display: none;
	&.active {
		display: block;
	}	
}

#generatePDF2 {
	display: none;
}

.hideTable {
	display: none;
}

.adverse {
	border: 2px solid var(--navy);
	margin: 0 auto 40px auto;
	max-width: 900px;
	padding: 20px;
	text-align: center;
	a {
		font-weight: bold;
	}
	p:last-child {
		margin:0;
	}
}


	/* Specific PDF styling */
	@media print {
		.pdf-hide {
			display: none;
		}
		body {
			color: #000;
			font-family: 'Quicksand', arial, sans-serif;
			line-height: 1.5;
		}
		h1,h2,h3,h4,h5,h6 {
			font-family: 'Quicksand', arial, sans-serif;
			font-weight: 700;
		}
		#savingsIntro {
			font-size: 18px;
		}
		table {
			th, td {
				background: none;
				border:1px solid #333;
			}
		}
		.calcMobileArrow {
			display: none;
		}
		.calculatorStep1,
		.calculatorStep3
		.calculatorStep4 {
			display: none;
		}
		.calculatorStep2 {
			display: block;
		}
		.tableWrap {
			display: flex;
			flex-direction: row;
			> div {
				flex:0 0 25%;
			}
		}
		.calculatorStep2Actions {
			display: none;
		}
		.adverse {
			border: 2px solid #000;
			padding: 30px;
		}
		.skipLink,
		.headerPatientLink,
		#nav2,
		#footer .grid,
		.btt,
		.popHide {
			display: none;
		}
	}