.calculatorHeading {
	background-color: var( --orange );
	background-position: bottom left;
	padding: 40px 0;
	h1 {
		margin:0;
	}
}

	@media only screen and (min-width: 600px) {
		.calculatorHeading {
			background-position: bottom center;
		}
	}
	
/* Calculator v1 */
.cost_calculator {
	overflow: hidden;
	input[type=number] {
		color: #333;
	}
	h3, h4 {
		margin-bottom: 20px;
	}
	
	.columns {
		margin-bottom: 40px;
	}
	.calculatorTooltip {
		background-image: url(../images/icon-info.svg);
		background-size: 30px;
		border: 0;
		display: inline-block;
		font-size: 0;
		height: 30px;
		width: 30px;
		svg {
			height: 30px;
			width: 30px;
		}
	}
	.cost_calculator_products {
		overflow: visible;
		position: relative;
		h4 {
			padding-right: 50px;
		}
		.calculatorTooltip {
			margin: 0;
			padding: 0;
			position: absolute;
				top: 20px;
				right: 20px;
		}
	}
	.cost_calculator_patients {
		overflow: visible;
		position: relative;
		h4 {
			padding-right: 50px;
		}
		.calculatorTooltip {
			margin: 0;
			padding: 0;
			position: absolute;
				top: 20px;
				right: 20px;
		}
		#patientNumber {
			font-size: 16px;
		}
	}

	.cost_calculator_table {
		h3 {
			position: relative;
		}
		.calculatorTooltip {
			margin: 0;
			padding: 0;
			position: absolute;
				top: 0;
				right: 0;
			vertical-align: top;
		}
	}

	table {
		background: #fff;
		border: 2px solid var( --blue );
		border-spacing: 0;
		border-collapse: separate;
		border-radius: 10px;
		margin: 0 0 20px 0;
		overflow: visible;
		text-align: left;
		width: 100%;
		th, td {
			border: 0;
		}
		thead {
			font-weight: bold;
			tr {
				display: table-row;
			}
			th {
				background: var( --blue );
				border: 0;
			}
		}
		tr {
			display: none;
			&.show {
				display: table-row;
			}
		}
		.striped {
			background: var( --mist );
		}
		tr:nth-child(even) {
			
		}
		td.savings {
			color: #178F00;
			color: #158000;
		}
	}
	.tag {
		background: #898079;
		border-radius: 50px;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
		padding: 5px 10px;
		&.swallowable {
			background: var( --orange );
			background: #C84C04;
		}
		&.chewable {
			background: #0E7EAF;
		}
	}
	.type-chewable {
		&.reference {
			color: $lblue;
			color: #0E7EAF;
		}
	}
	.type-swallowable {
		&.reference {
			color: var( --orange );
			color: #C84C04;
		}
	}
	.reference {
		.savingsInfo {
			display: none;
		}
	}
}
	
	@media only screen and (min-width: 600px) {
		.cost_calculator {
			
			.cost_calculator_products {
				.calculatorTooltip {
					top: 30px;
					right: 30px;
				}
			}
			
			.cost_calculator_patients {
				.calculatorTooltip {
					top: 30px;
					right: 30px;
				}
			}
			
			.cost_calculator_table table td.type {
				right: 20px;
			}
		}
	}
	
	@media only screen and (max-width: 1200px) {
		.cost_calculator {
			.cost_calculator_patients {
				.calculatorTooltip {
					z-index: 450;
					&:before {
						z-index: 450;
					}
					&:before {
						z-index: 451;
					}
				}
			}

			.cost_calculator_table {
				.calculatorTooltip {
					z-index: 400;
					&:before {
						z-index: 400;
					}
					&:before {
						z-index: 401;
					}
				}
			}
			
			.cost_calculator_table {
				font-size: 16px;
				table {
					border-collapse: unset;
					border: 0;
					border-radius: 0;
					display: block;
					margin: 0;
					padding: 0;
				}
				tbody {
					display: block;
				}
				thead {
					display: none;
				}
				tr {
					background: #f4f4f4;
					border-radius: 10px;
					margin: 0 0 20px 0;
					padding: 20px;
					position: relative;
				}
				tr.show {
					display: block;
				}
				td {
					display: block;
					padding: 0;
					&.type {
						position: absolute;
							top: 25px;
							right: -10px;
					}
				}
				.type {
					font-size: 12px;
				}
				.product_name {
					font-family: "Omnes";
					font-size: 22px;
					font-weight: bold;
					line-height: 1.4;
					padding: 0 90px 15px 0;
					sup {
						top: -10px;
					}
				}
				.annual_cost {
					color: #000;
					padding-bottom: 15px;
				}
				.reference .annual_cost {
					padding: 0;
				}
			}
			
			.cost_calculator_table_intro {
				background: var( --blue );
				border-radius: 10px;
				color: #fff;
				margin-bottom: 20px;
				padding: 20px;
				p {
					margin: 0;
				}
				h3 {
					color: #fff;
				}
			}
		}
		
	}

	@media only screen and (min-width: 1200px) {

		.cost_calculator {
			overflow: visible;
			.columns {
				margin-bottom: 4%;
			}
			.cost_calculator_table_intro {
				text-align: center;
				width: auto;
				h3 {
					.calculatorTooltip {
						position: relative;
						top: 10px;
						left: 20px;
					}
				}
			}
			.cost_calculator_table {
				max-width: 1600px;
				overflow: visible;
				font-size: 20px;
				margin: 0 auto;
				max-width: 1600px;
				button {
					margin: 10px 0 0 10px;
				}
				.mob_cost_pa {
					display: none;
				}
			}
			table {
				overflow: hidden;
				.product_name {
					min-width: 420px;
				}
				.annual_cost {
					min-width: 180px;
				}
			}
			.cost_calculator_products {
				.calculatorTooltip {
					top: 35px;
					right: 30px;
				}
			}
			.cost_calculator_patients {
				.calculatorTooltip {
					top: 35px;
					right: 30px;
				}
			}
		}
	}

/* Calculator v2 */
.cost_calculator_v2 {
	overflow: hidden;
	input[type=number] {
		color: #333;
	}
	h3, h4 {
		margin-bottom: 20px;
	}
	.columns {
		margin-bottom: 40px;
	}
	.calculatorTooltip {
		background-image: url(../images/icon-info.svg);
		background-size: 30px;
		border: 0;
		display: inline-block;
		font-size: 0;
		height: 30px;
		width: 30px;
		svg {
			height: 30px;
			width: 30px;
		}
	}
	.cost_calculator_products {
		overflow: visible;
		position: relative;
		h4 {
			padding-right: 50px;
		}
		.calculatorTooltip {
			margin: 0;
			padding: 0;
			position: absolute;
				top: 20px;
				right: 20px;
		}
	}
	.cost_calculator_patients {
		overflow: visible;
		position: relative;
		h4 {
			padding-right: 50px;
		}
		.calculatorTooltip {
			margin: 0;
			padding: 0;
			position: absolute;
				top: 20px;
				right: 20px;
		}
		#patientNumber {
			font-size: 16px;
		}
	}

	.cost_calculator_table {
		
		h3 {
			position: relative;
		}
		.calculatorTooltip {
			margin: 0;
			padding: 0;
			position: absolute;
				top: 0;
				right: 0;
			vertical-align: top;
		}
	}

	table {
		background: #fff;
		border: 2px solid var( --blue );
		border-spacing: 0;
		border-collapse: separate;
		border-radius: 10px;
		margin: 0 0 20px 0;
		overflow: visible;
		text-align: left;
		width: 100%;
		th, td {
			border: 0;
		}
		thead {
			font-weight: bold;
			tr {
				display: table-row;
			}
			th {
				background: var( --blue );
				border: 0;
			}
		}
		tr {
			display: none;
			&.show {
				display: table-row;
			}
		}
		.striped {
			background: var( --mist );
		}
		tr:nth-child(even) {
			
		}
		td.savings {
			color: #178F00;
			color: #158000;
		}
		
	}
	.tag {
		background: #898079;
		border-radius: 50px;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
		padding: 5px 10px;
		&.swallowable {
			background: var( --orange );
			background: #C84C04;
		}
		&.chewable {
			background: #0E7EAF;
		}
	}
	.type-chewable {
		&.reference {
			color: $lblue;
			color: #0E7EAF;
		}
	}
	.type-swallowable {
		&.reference {
			color: var( --orange );
			color: #C84C04;
		}
	}
	.reference {
		.savingsInfo {
			display: none;
		}
	}
}
	
	@media only screen and (min-width: 600px) {
		.cost_calculator_v2 {
			
			.cost_calculator_products {
				.calculatorTooltip {
					top: 30px;
					right: 30px;
				}
			}
			
			.cost_calculator_patients {
				.calculatorTooltip {
					top: 30px;
					right: 30px;
				}
			}
			
			.cost_calculator_table table td.type {
				right: 20px;
			}
		}
	}
	
	@media only screen and (max-width: 1200px) {
		.cost_calculator_v2 {
			.cost_calculator_patients {
				.calculatorTooltip {
					z-index: 450;
					&:before {
						z-index: 450;
					}
					&:before {
						z-index: 451;
					}
				}
			}

			.cost_calculator_table {
				.calculatorTooltip {
					z-index: 400;
					&:before {
						z-index: 400;
					}
					&:before {
						z-index: 401;
					}
				}
			}
			
			.cost_calculator_table {
				font-size: 16px;
				table {
					border-collapse: unset;
					border: 0;
					border-radius: 0;
					display: block;
					margin: 0;
					padding: 0;
				}
				tbody {
					display: block;
				}
				thead {
					display: none;
				}
				tr {
					background: #f4f4f4;
					border-radius: 10px;
					margin: 0 0 20px 0;
					padding: 20px;
					position: relative;
				}
				tr.show {
					display: block;
				}
				td {
					display: block;
					padding: 0;
					&.type {
						position: absolute;
							top: 25px;
							right: -10px;
					}
				}
				.type {
					font-size: 12px;
				}
				.product_name {
					font-family: "Omnes";
					font-size: 22px;
					font-weight: bold;
					line-height: 1.4;
					padding: 0 90px 15px 0;
					sup {
						top: -10px;
					}
				}
				.annual_cost {
					color: #000;
					padding-bottom: 15px;
				}
				.reference .annual_cost {
					padding: 0;
				}
			}
			
			.cost_calculator_table_intro {
				background: var( --blue );
				border-radius: 10px;
				color: #fff;
				margin-bottom: 20px;
				padding: 20px;
				p {
					margin: 0;
				}
				h3 {
					color: #fff;
				}
			}
		}
		
	}

	@media only screen and (min-width: 1200px) {

		.cost_calculator_v2 {
			overflow: visible;
			.columns {
				margin-bottom: 4%;
			}
			.cost_calculator_table_intro {
				text-align: center;
				width: auto;
				h3 {
					.calculatorTooltip {
						position: relative;
						top: 10px;
						left: 20px;
					}
				}
			}
			.cost_calculator_table {
				max-width: 1600px;
				overflow: visible;
				font-size: 20px;
				margin: 0 auto;
				max-width: 1600px;
				button {
					margin: 10px 0 0 10px;
				}
				.mob_cost_pa {
					display: none;
				}
			}
			table {
				overflow: hidden;
				.product_name {
					min-width: 420px;
				}
				.annual_cost {
					min-width: 180px;
				}
			}
			.cost_calculator_products {
				.calculatorTooltip {
					top: 35px;
					right: 30px;
				}
			}
			.cost_calculator_patients {
				.calculatorTooltip {
					top: 35px;
					right: 30px;
				}
			}
		}
	}

/* Practice calculator popup */

.practicePopupCalculator {
	background: rgba(0,0,0,0.8);
	align-items: center;
	height:100%;
	overflow-y:auto;
	position: fixed;
		top:0; 
		right:0;
		bottom:0;
		left:0;
	width:100%;
	z-index:9999;
	&.popShow {
		display:block;
	}	
	&.popHide {
		display:none;
	} 
	.practicePopupInner {
		background:#fff;
		border-radius: 30px;
		box-sizing: border-box;
		max-width: 350px;
		overflow-y: scroll;
		padding: 40px;
		position: absolute;
			top: 20px;
			bottom: 20px;
			left:50%;
		transform: translateX(-50%);
		width:90%;
		.btn {
			margin-bottom:5px;
			margin-right:5px;
		}
	}
	.popClose {
		cursor:pointer;
		font-size:0;
		height:29px;
		padding:0;
		position: absolute;
			top:20px;
			right:30px;
		width:29px;
		&:before {
			background:$colour-button;
			content:"";
			height:4px;
			position: absolute;
				top:13px;
				left:-4px;
			transform: rotate(45deg);
			width:38px;
		}			
		&:after {
			background:$colour-button;
			content:"";
			height:4px;
			position: absolute;
				bottom:12px;
				left:-4px;
			transform: rotate(-45deg);
			width:38px;
		}
	}
	p:last-child {
		margin:0;
	}
}

	@media only screen and (min-width: 600px) {
		.practicePopupCalculator {
			.practicePopupInner {
				display:block;
				max-height:75%;
				min-height:300px;
				max-width:900px;
				padding:60px ;
				position: absolute;
					top:50%;
					bottom:auto;
					left:50%;
				transform: translateX(-50%) translateY(-50%);
				width:75%;
				.btn {
					margin-bottom:0;
				}
			}	
		}
	}