/* START - Section Reliability Calculator */
.section-reliability-calculator {
	padding-block: var(--sectionInnerSpace);
}
.section-reliability-calculator .container {
	display: flex;
	flex-direction: column;
	gap: var(--sectionSpace);
}
.section-reliability-calculator .reliability-section-header { margin: 0; gap: 1rem;}
.section-reliability-calculator h1 { max-width: 16ch;}
.downtime-calculator {
	margin: 0 0 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.downtime-calculator .box {
	padding: 1.5rem;
	background: var(--white);
	border-radius: var(--borderRadiusDefault);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: 0 0.625rem 1.5rem #DEEDFF;
}
.downtime-calculator .form-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.downtime-calculator .form-group .label {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 0.25rem;
}
.downtime-calculator .form-group.required .label:after  {
	width: 0.3125rem;
	height: 0.3125rem;
	content: "";
	position: relative;
	top: 0.25rem;
	background: var(--red);
	border-radius: 1rem;
	flex-shrink: 0;
}
.downtime-calculator .note {
	display: flex;
	align-items: flex-start;
	gap: 0.25rem;
}

.downtime-calculator .note.important {
	font-size:0.85rem;
	font-style:italic;
	color: var(--text-secondary);
}
.downtime-calculator .note.important:before {
	width: 0.25rem;
	height: 0.25rem;
	margin-top: 0.25em;
	content: "";
	border-radius: 1rem;
	background: var(--red);
	flex-shrink: 0;
}
/* Downtime Info */
.downtime-info {
	padding: 1.5rem;
	background: var(--light-blue);
	border-radius: var(--borderRadiusDefault);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.downtime-info-header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.downtime-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.downtime-info-list li {
	padding-bottom: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	background-image: linear-gradient(to right, var(--i2c-brand-200) 20%, rgba(255, 255, 255, 0) 0%);
	background-position: bottom;
	background-size: 10px 2px;
	background-repeat: repeat-x;
}
.downtime-info-list li:last-child { background: none; }
.downtime-info-list .title-bar {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.downtime-info-list .title-bar .title { flex-grow: 1;}
.downtime-info-list .title-bar .amount {
	flex-shrink: 0;
	font-weight: var(--fontWeightLight);
}
.downtime-value-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.375rem;
}
.downtime-value-wrapper .icon {
	width: 0.875rem;
}
.downtime-value-wrapper .icon img {
	width: 100%;
	height: auto;
	display: block;
}
.downtime-value-wrapper .downtime-value {
	transition: var(--transitionDefault);
}
/* Reliability Calculator Info */
.reliability-calculator-info {
	padding: 1.5rem;
	border-radius: var(--borderRadiusDefault);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.reliability-calculator-info > * { position: relative; z-index: 1;}
.reliability-calculator-info .section-header { margin: 0;}
.reliability-calculator-info .text-box {
	gap: 0.5rem;
	padding-bottom: 0.5rem;
}
.reliability-calculator-info .bg-triangle {
	width: 50rem;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-54%, 16%);
	z-index: 0;
	opacity: 0.5;
	pointer-events: none;
}
.reliability-calculator-info .lottie-img {
	width: 17.4375rem;
	height: 20.125rem;
	margin: 0 auto -1.5rem;
	position: relative;
}
.reliability-calculator-info .lottie-img dotlottie-player {
	height: auto;
	aspect-ratio: 1/3.09819;
	position: absolute;
	top: 0;
	left: 0;
}
.downtime-info{ position: relative;}
.downtime-info::after{
	width: 0;
	height: 0;
	content: "";
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	left: 0;
	top: 50%;
	pointer-events: none;
	z-index: -1;
}
/* design screen 768px and above */
@media (min-width: 768px) {
	.section-reliability-calculator .reliability-section-header { margin: 0; gap: 1rem;}
	.reliability-calculator-selections {
		display: flex;
		align-items: center;
	}
	.downtime-calculator {
		width: 48.7%;
		margin: 0 -5.25rem 0 0;
		flex-shrink: 0;
		position: relative;
		z-index: 2;
	}
	.downtime-calculator .box {
		padding: 2rem;
		gap: 1.125rem;
	}
	.downtime-calculator > .note {
		max-width: 20ch;
		padding-inline: 2rem;
	}
	.downtime-info {
		padding: 4.1875rem 3rem 3.25rem 7.75rem;
		gap: 1.25rem;
	}
	.downtime-info-header {	gap: 0.875rem;}
	.downtime-info-list { gap: 0.875rem;}
	.downtime-info-list li {
		padding-bottom: 0.875rem;
		gap: 0.875rem;
	}
	.reliability-calculator-info {
		padding: 3rem;
		flex-direction: row;
		gap: 2.5rem;
	}
	.reliability-calculator-info .text-box {
		gap: 1rem;
		padding-bottom: 1rem;
	}
	.reliability-calculator-info .bg-triangle {
		width: 50rem;
		left: 50%;
		transform: translate(-54%, 16%);
		opacity: 0.5;
	}
	.reliability-calculator-info .lottie-img {
		width: 10.75rem;
		height: auto;
		flex-shrink: 0;
		margin: 0 0 -3rem;
	}
	.downtime-info-list{ position: relative; z-index: 2;}
	.downtime-info::after{
		border-width: 16rem 0 16rem 17.625rem;
		filter: blur(3rem);
		transform: translate(-28%, -47%);
		z-index: 1;
	}
}

/* design screen 1024px = 992px and above */
@media (min-width: 992px) {
	.downtime-calculator {
		width: 48.70689%;
		margin: 0 -4.625rem 0 0;
		gap: 1.5rem;
	}
	.downtime-calculator .box {
		padding: 2.5rem;
		gap: 1.5rem;
	}
	.downtime-calculator > .note {
		max-width: none;
		padding-inline: 2.75rem;
	}
	.downtime-info {
		padding: 4.25rem 3.75rem 4.5rem 9rem;
		gap: 1.5rem;
	}
	.downtime-info-header {	gap: 1rem;}
	.downtime-info-list { gap: 1rem;}
	.downtime-info-list li {
		padding-bottom: 1rem;
		gap: 0.625rem;
	}
	.reliability-calculator-info {
		padding: 4rem;
		gap: 6.875rem;
	}
	.reliability-calculator-info .bg-triangle {
		width: 36rem;
		left: 75%;
		transform: translate(-36%, 12%);
	}
	.reliability-calculator-info .lottie-img {
		width: 16.125rem;
		margin: 0 0 -4rem;
	}
	.downtime-info-list{ position: relative; z-index: 2;}
	.downtime-info::after{
		border-width: 18rem 0 18rem 20.625rem;
		filter: blur(4rem);
		transform: translate(-30%, -50%);
		z-index: 1;
	}
}

/* design screen 1366px = 1200px and above */
@media (min-width: 1200px) {
	.section-reliability-calculator .reliability-section-header { gap: 1.5rem;}
	.downtime-calculator {
		width: 48.9795%;
		margin: -14px -11.5rem 0 0;
		gap: 3rem;
	}
	.downtime-calculator .box {
		padding: 3rem 3rem 2rem;
		gap: 2rem;
		border-radius: var(--borderRadiusLarge);
	}
	.downtime-calculator > .note { padding-inline: 2.5rem;}
	.downtime-info {
		padding: 7.3125rem 6.5625rem 5.5625rem 16.25rem;
		gap: 2.5rem;
		border-radius: var(--borderRadiusLarge);
	}
	.downtime-info-list { gap: 2rem;}
	.downtime-info-list li {
		padding-bottom: 1.5rem;
		gap: 1rem;
	}
	.reliability-calculator-info {
		padding: 6.5rem;
		gap: 6.125rem;
		border-radius: var(--borderRadiusLarge);
	}
	.reliability-calculator-info .text-box { padding-bottom: .5rem;	}
	.reliability-calculator-info .bg-triangle {
		width: 52.25rem;
		transform: translate(-36%, 12%);
	}
	.reliability-calculator-info .lottie-img {
		width: 21.6875rem;
		margin: 0 0 -6.5rem;
	}
	.downtime-info-list{ position: relative; z-index: 2;}
	.downtime-info::after{
		border-width: 21rem 0 21rem 28.625rem;
		filter: blur(5rem);
		transform: translate(-30%, -50%);
		z-index: 1;
	}
}
/* design screen 1920px = 1601px and above */
@media (min-width: 1601px) {
	.section-reliability-calculator .reliability-section-header {
		gap: 2rem;
		margin-bottom: -5rem;
	}
	.reliability-calculator-selections { padding-inline: 8.5227%;}
	.downtime-calculator {
		width: 48.9726%;
		margin: 0 -7.3125rem 0 0;
		gap: 3.5rem;
	}
	.downtime-calculator .box {
		padding: 3.5rem;
		gap: 2.5rem;
	}
	.downtime-calculator .form-group { gap: 1.5rem;}
	.downtime-calculator > .note { padding-inline: 3.5rem;}
	.downtime-info {
		padding: 7.5rem 7.5rem 7.5rem 16.25rem;
		gap: 2.5rem;
		position: relative;
		z-index: 1;
	}
	.downtime-info::after{
		border-width: 27rem 0 27rem 40.625rem;
		filter: blur(3rem);
		transform: translate(-30%, -50%);
	}
	.downtime-info-list { gap: 2rem;}
	.downtime-info-list li {
		padding-bottom: 1.5rem;
		gap: 1rem;
	}
	.reliability-calculator-info {
		padding: 10rem;
		gap: 6.125rem;
		justify-content: space-between;
	}
	.reliability-calculator-info::after{
		width: 0;
		height: 0;
		content: "";
		border-style: solid;
		border-width: 58rem 37.6rem 0;
		border-color: var(--i2c-brand-900) transparent transparent transparent;
		filter: blur(18.75rem);
		position: absolute;
		left: 75%;
		top: 17%;
		opacity: 0.3;
		transform: translateX(-50%);
		pointer-events: none;

	}
	.reliability-calculator-info .section-header { max-width: 41.75rem;}
	.reliability-calculator-info .text-box {
		gap: 1.5rem;
		padding-bottom: 1.25rem;
	}
	.reliability-calculator-info .bg-triangle {
		width: 75.1875rem;
		transform: translate(-43%, 12%);
	}
	.reliability-calculator-info .lottie-img {
		width: 31.25rem;
		margin: 0 1.5rem -12rem;
	}
}
/* END - Section Reliability Calculator styles */

@media (max-width: 1599px) {
	.downtime-calculator .form-group{ gap: 1.25rem;}
}
@media (max-width: 1199px) {
	.downtime-calculator .box{gap: 0.75rem;}
}
@media (max-width: 991px) {
	.downtime-calculator .form-group{ gap: 0.68rem;}
}
@media (max-width: 767px) {
	.downtime-calculator .form-group{ gap: 1rem;}
	.section-reliability-calculator .container{gap:3rem;}
	.reliability-calculator-selections,
	.reliability-calculator-info.bg-blue{
		margin-bottom: 2rem;
	}
}

/* ui slider styles */
.ui-slider {
	width: calc(100% - 1.875rem);
	height: 1.75rem;
	margin-inline: 0.9375rem;
	border-radius: 10rem;
	border: none;
}
.ui-slider:before {
	width: calc(100% + 1.875rem);
	height: 100%;
	content: "";
	background: var(--light-blue);
	border-radius: 10rem;
	position: absolute;
	top: 0;
	left: -0.9375rem;
}
.downtime-calculator .downtime-slider {
	width: calc(100% - 1.875rem);
	margin-inline: 0.9375rem;
}
.ui-slider .slider-bullets {
	width: calc(100% + 1.875rem);
	height: 100%;
	list-style: none;
	padding: 0.25rem 0.5rem;
	margin: 0 -0.9375rem;
	background: linear-gradient(to right, var(--red), var(--orange), var(--green));
	border-radius: 10rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}
.ui-slider .slider-bullets li {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 1rem;
	background: var(--white);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}
.ui-widget.ui-widget-content {
	border: none;
}
.ui-slider .ui-slider-handle {
	width: 2.375rem;
	height: 2.375rem;
	margin: 0;
	border-radius: 100%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	z-index: 3;
}
.ui-slider .ui-slider-handle:before {
	width: 5px;
	height: 11px;
	content: "";
	border-width: 0 1px;
	border-style: solid;
	border-color: var(--i2c-brand-200);
}
.ui-slider .ui-slider-handle:after {
	width: 1px;
	height: 12px;
	content: "";
	background: var(--i2c-brand-200);
}
.ui-state-default,
.ui-widget-content .ui-state-default{
	border: none;
	background: var(--white);
	box-shadow: 0 0.5rem 0.5rem 0 rgba(63, 113, 255, 0.2);
}
.ui-widget-header {
	margin-left: -0.9375rem;
	background: linear-gradient(to right, var(--light-blue), var(--blue));
	border-radius: 10rem 0 0 10rem;
}
.ui-widget-header:after {
	width: 3%;
	max-width: 0.5rem;
	height: 100%;
	content: "";
	background: var(--blue);
	position: absolute;
	top: 0;
	left: 100%;
}
.ui-slider .ui-slider-handle:not(.ui-state-focus, .ui-state-hover) ~ .slider-tooltip { display: none;}
.slider-tooltip {
	min-width: 4rem;
	padding: 0.25rem 0.5rem;
	color: var(--white);
	background: var(--i2c-brand-950);
	border-radius: var(--borderRadiusLarge);
	font-size: 0.875rem;
	line-height: 1.2857;
	font-weight: var(--fontWeightMedium);
	text-align: center;
	position: absolute;
	bottom: calc(100% + 0.625rem);
	transform: translateX(-50%);
	transition: transform .3s linear;
}
.slider-tooltip.align-left { transform: translateX(-1.1875rem); }
.slider-tooltip.align-right { transform: translateX(calc(-100% + 1.1875rem)); }
@media (min-width: 768px) {
	.slider-tooltip.align-left,
	.slider-tooltip.align-right { transform: translateX(-50%); }
}
@media (min-width: 1601px) {
	.ui-slider {
		width: calc(100% - 2.5rem);
		height: 2.25rem;
		margin-inline: 1.25rem;
	}
	.ui-slider:before {
		width: calc(100% + 2.5rem);
		left: -1.25rem;
	}
	.ui-slider .ui-slider-handle {
		width: 3rem;
		height: 3rem;
		gap: 4px;
	}
	.ui-slider .ui-slider-handle:before { width: 6px; height: 12px;}
	.ui-slider .ui-slider-handle:after { height: 12px;}
	.ui-slider .slider-bullets {
		width: calc(100% + 2.5rem);
		padding: 0.625rem 0.75rem;
		margin-inline: -1.25rem;
	}
	.ui-slider .slider-bullets li {
		width: 1rem;
		height: 1rem;
	}
	.ui-widget-header { margin-left: -1.25rem;}
	.slider-tooltip {
		min-width: 4rem;
		padding: 0.5rem 1rem;
		font-size: var(--fontSizeLarge);
		line-height: 1.4;
		bottom: calc(100% + 1.25rem);
	}
}