p.p-tag {
	margin-bottom: 0px;
}

.tick-img {
	display: none;
}

#main-body {
	display: none;
}

.section-outer.body-grid.usecase-selector {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.title.page-title.usecase-selector-title {
	margin-top: var(--ls-l);
	margin-bottom: 1.375rem;
}

.page-intro.usecase-selector-subheader {
	padding-bottom: 0;
	margin-bottom: var(--ls-l);
}

.current-stage-div {
	display: flex;
	position: relative;
	align-items: center;
	width: 42rem;
}

.stage-div {
	display: flex;
	flex-direction: column;
	width: 20%;
	align-items: center;
}

.horizontal-line {
	width: 80%;
	position: absolute;
	top: 1.75rem;
	right: var(--ls-l);
	z-index: 1;
	border: none;
	height: 0.5px;
	color: var(--c-interactive-03);
	background-color: var(--c-interactive-03);
}

.circle {
	width: 4.375rem;
	height: 4.375rem;
	border-radius: 50%;
	border: 1px solid var(--c-interactive-03);
	background: var(--c-white);
	z-index: 2;
	display: flex;
	justify-content: center;
	margin-bottom: var(--cs-s);
}

.circle.active {
	background: var(--c-interactive-03);
}

.ellipses {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ellipses-circle {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--c-white);
	margin: 0.063rem;
}

.info-div {
	width: inherit;
	border: 0.5px solid var(--c-grey-400);
	border-radius: var(--br-m);
	margin: 7.063rem auto;
	margin-bottom: 0;
}

.info-div.recap {
	margin-top: 6.25rem;
}

.info-header {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-grey-100);
	border-top-right-radius: var(--br-m);
	border-top-left-radius: var(--br-m);
	border-bottom: 0.5px solid var(--c-grey-400);
	width: 100%;
	height: 3.5rem;
}

.info-header-text {
	font-weight: bold;
	margin-bottom: 0;
	font-size: var(--fs-m);
}

.info-stage-text {
	display: none;
}

.info-row-head-text {
	font-family: Inter;
	font-style: normal;
	font-weight: bold;
	font-size: var(--fs-s);
	line-height: 1.603rem;
	letter-spacing: -0.02em;
	color: var(--c-grey-400);
	margin: var(--ls-s) 0px 0px var(--ls-s);
}

.choices {
	display: flex;
	flex-wrap: wrap;
}

.choice {
	display: flex;
	justify-content: start;
	align-items: center;
	padding: var(--cs-m);
	margin-left: 1.375rem;
	margin-top: 1.375rem;
	margin-bottom: 0;

	width: 13.75rem;
	height: auto;

	background: var(--c-grey-100);

	border: 0.5px solid var(--c-grey-300);
	border-radius: 0.5rem;
	font-weight: normal;
	cursor: pointer;
	font-size: var(--fs-s);
}

.choice-checkbox {
	margin-right: var(--cs-xs);
	cursor: pointer;
}

#locations {
	display: none;
	justify-content: center;
	margin-right: 1.375rem;
}

#backhaul {
	display: none;
}

#email-submit {
	display: none;
	opacity: 50%;
	pointer-events: none;
}

#region {
	display: none;
}

#deployment {
	display: none;
	justify-content: center;
	margin-right: 1.375rem;
}

#extra {
	display: none;
}

#others {
	display: none;
}

.info-footer {
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 6.25rem;
	border-top: 0.5px solid var(--c-grey-400);
	margin-top: 3.125rem;
}

.info-footer-buttons {
	display: flex;
	justify-content: space-between;
	
}

.info-button {
	width: 5.625rem;
	height: 2.375rem;
	margin: 0 1.875rem 0 1.875rem;
	padding: 0;
	border-radius: var(--br-s);
	display: flex;
	align-items: center;
	justify-content: center;
}

span.material-icons {
	font-size: var(--fs-m);
}

#prev-btn {
	display: none;
	background: transparent;
	color: var(--c-grey-500);
}

#prev-btn:hover {
	background-color: var(--c-grey-200);
}

#next-btn {
	background: var(--c-interactive-03);
	color: var(--c-white);
}

#next-btn:hover {
	background: var(--c-interactive-02);
	color: var(--c-white);
}


#recap {
	display: none;
}

#gateways {
	display: none;
	border-top: 0.5px solid var(--c-grey-400);
}

#region-recap {
	display: none;
	border-top: 0.5px solid var(--c-grey-400);
}

#deployment-recap {
	display: none;
	border-top: 0.5px solid var(--c-grey-400);
}

#extra-recap {
	display: none;
	border-top: 0.5px solid var(--c-grey-400);
}

#others-recap {
	display: none;
	border-top: 0.5px solid var(--c-grey-400);
}

.recap-row-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.recap-row-head-text {
	color: var(--c-grey-900);
	font-weight: var(--fw-bolder);
}

.recap-row-head {
	width: 10.625rem;
	min-width: 10.625rem;
	padding: var(--ls-s) 0 var(--ls-s) var(--ls-s);
}

.info-row.recap-row {
	display: flex;
	align-items: center;
	
}

.recap-choices {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 80%;
}

.recap-choice {
	display: flex;
	background: var(--c-grey-100);
	border-radius: 4.5rem;
	padding: 0.313rem 0.625rem 0.375rem 0.625rem;
	margin: 0.25rem 1.125rem 0.25rem 0;
	font-size: var(--fs-s);
	align-items: center;
}

.delete-icon {
	margin-right: var(--cs-xs);
    border-radius: 50%;
    cursor: pointer;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-icon .hover {
	display: none;
}
.delete-icon.default {
	display: flex;
}

.delete-icon:hover .hover {
	display: flex;
}

.delete-icon:hover .default {
	display: none;
}

.change-button {
	color: var(--c-interactive-03);
    background-color: var(--c-background-02);
    border: .5px solid var(--c-background-02);
	border-radius: var(--br-s);
	padding: 0.625rem var(--cs-l);
	margin-right: var(--ls-s);
	cursor: pointer;
}

.change-button:hover {
	background-color: var(--c-background-01);
    border: .5px solid var(--c-background-01);
}

.email-input {
	border: 0.5px solid var(--c-grey-400);
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	border-right: none;
	padding: 0.625rem 0.938rem;
	width: 16rem;
}

.submit-form-btn {
	border: 0.5px solid var(--c-grey-400);
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	border-left: none;
	color: var(--c-interactive-03);
    background-color: var(--c-background-02);
	padding: 0.625rem 0.938rem;
	cursor: pointer;
}

.submit-form-btn:hover {
	background-color: var(--c-background-01);
}

.success-message-div {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 7.5rem;
	width: 46.563rem;
}

h2.success-message-div {
	font-family: 'avant-garde';
}

.success-header {
	font-weight: var(--fw-bolder);
	font-size: var(--fs-xxl);
	line-height: 2.25rem;
}

.success-body {
	font-weight: 400;
	font-size: var(--fs-l);
	line-height: 1.75rem;
	text-align: center;
}

.home-btn-div {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 3.125rem;
}

.home-btn {
	color:var(--c-white);
	background: var(--c-interactive-03);
	border-radius: var(--br-s);
	padding: 0.625rem var(--cs-l);
	text-decoration: none;
}

.disabled {
	color: var(--c-white) !important;
    background-color: var(--c-grey-400) !important;
    border: .5px solid var(--c-grey-400) !important;
	pointer-events: none;
}

@media only screen and (max-width: 768px) {
	.success-header {
		margin-top: 8rem;
	}

	.section-outer.body-grid.usecase-selector {
		margin-top: 0;
	}
	
	.title.page-title.usecase-selector-title {
		margin: 6.875rem 0.625rem var(--cs-s) 0.625rem;
	}

	.info-stage-text {
		display: contents;
	}

	.info-header {
		flex-direction: column;
	}

	.info-div {
		width: 90vw;
		margin-top: 0;
	}

	.current-stage-div {
		display: none;
	}

	.info-row-head-text {
		margin: var(--cs-s) var(--cs-s) 0.188rem var(--cs-s);
	}

	.page-intro.usecase-selector-subheader {
		margin-bottom: 3.125rem;
	}

	.choice {
		width: auto;
		margin-left: 0.438rem;
		margin-top: 0.563rem;
	}

	.info-div.recap {
		margin-top: 3.125rem;
	}

	.change-button {
		display: none;
	}

	.info-row.recap-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.recap-row-head {
		padding: var(--cs-s) var(--cs-s) 0.437rem var(--cs-s);
	}

	.recap-choices {
		width: 100%;
	}

	.recap-choice {
		margin: 0.563rem var(--cs-s);
	}

	#gateways {
		border-top: none;
	}
	
	#region-recap {
		border-top: none;
	}
	
	#deployment-recap {
		border-top: none;
	}
	
	#extra-recap {
		border-top: none;
	}

	.success-message-div {
		width: auto;
		text-align: center;
		margin-top: var(--cs-m);
	}
}