.newSignupFormHeading {
	margin-bottom: 8%;
	margin-top: 4%;
}

.submit-button-selfsignupnew {
	background-color: #00acfa;
    padding: 2%;
    text-align: center;
    margin-bottom: 5%;
    color: white;
    font-weight: bold;
    border: 0px;
    
}

.submit-button-selfsignupnew:hover {
	cursor: pointer;
}

#newSignupMainContent .progress-div {
	width: 100%;
	height: 50px;
	font-size: smaller;
	margin-bottom: 1.5rem;
}

#newSignupMainContent .circle {
	height: 20px;
    width: 20px;
    background-color: #dadbd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: black;
    border-radius: 50%;
    margin:auto;
}

#newSignupMainContent .active-circle {
	background-color: #00acfa;
	color: white;
}


#newSignupMainContent .progress-line {
	display: flex;
    justify-content: center;
    flex-direction: row;
}

#newSignupMainContent .horizontal-rule {
	width: 10rem;
	background-color: #a6a6a6;
	height: 0.2rem !important;
	margin-top:1.4rem;
	margin-left:-1rem;
	margin-right:-1rem;
}

#newSignupMainContent .plans {

	display: flex;
	margin: 0 2rem 0 4rem;
	justify-content: space-between;
}


#newSignupMainContent .slider {
    width: fit-content;
    background-color: #dee2ea;
    border-radius: 30px;
    margin: auto;
    color: black;
    display:flex;
}

#newSignupMainContent .slide {
	padding: 5px 15px;
	background-color: white;
	border: 2px solid #72ced5;
	border-radius: 30px;
	display: flex;
	align-items: center;
	flex-direction: column;

	h6 {
		color: black;
	}
}

#newSignupMainContent .slide2 {
	padding: 5px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	h6 {
		color: black;
	}
}


#newSignupMainContent .plan {
	display: flex;
	flex: 1;
	align-items: center;
	flex-direction: column;
	border: 1px solid #dee2ea;
	margin: auto 0;
	border-radius: 20px;
	padding: 1rem;
	min-height: 50rem !important;
	height:auto;
	top: 50%;
}

#newSignupMainContent .advanced-plan {
	min-height: 55rem !important;
	background: #1fb0f7;
	color: white !important;
}

#newSignupMainContent .advanced-plan .same-features {
  color: white !important;
}

#newSignupMainContent .advanced-plan .headingInfo .value {
  color: white !important;
}


#newSignupMainContent .plan:hover {
	cursor: pointer;
}


#newSignupMainContent .ribbon {
	width: 150px;
	height: 150px;
	overflow: hidden;
	position: absolute;
	top: -10px;
	right: -10px;
	border-radius: 2.5em/6em 0 2.5em 6em;

}

#newSignupMainContent .ribbon::before,
.ribbon::after {
	content: "";
	position: absolute;

	background-color: #545454;
	z-index: -1;
}

#newSignupMainContent .ribbon::before {
	bottom: 7px;
	right: 0;
	width: 10px;
	height: 30px;
}

#newSignupMainContent .ribbon::after {
	left: 7px;
	top: 0;
	width: 30px;
	height: 10px;
}

#newSignupMainContent .ribbon span {
	position: absolute;
	display: block;
	width: 220px;
	padding: 2px 0;
	top: 40px;
	left: -22px;
	background-color: #ff914d;
	color: white;
	text-align: center;
	font-weight: bold;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
}

#newSignupMainContent .headingInfo {
	text-align: center;
	margin-top: 0.8rem;
}

#newSignupMainContent .bodyInfo {
	margin-top: 35px;
}

#newSignupMainContent .same-features {
	font-weight: bold;
	color: #00acfa;
	margin-bottom:15px;
	margin-top:10px;
}

#newSignupMainContent .plan-Title {
	text-align: center;

	h5 {
		font-weight: bold;
		margin-bottom: 4rem;
		color: black;
	}
}

#newSignupMainContent .planAndCost {
	display: flex;
}

#newSignupMainContent .plans-Container li {
	font-size: smaller;
}

#newSignupMainContent .cost {
	border-left: 2px solid #dadbd9;
	/*width: 40vw;*/
	padding: 0 2rem;
	padding-bottom:35rem;
}

#newSignupMainContent .value {
	font-size: small;
}

#newSignupMainContent .active-plan p {
	font-weight: bold;
	font-size: small;
	
}

#newSignupMainContent .active-plan-cost p {
	font-family: unset;
    font-size: small;
    /* font-weight: 400; */
    line-height: unset;
    color: #152139;
    margin-top: 0.5rem;
}

#newSignupMainContent .setup-cost {
	display: flex;
	justify-content: space-between;
	p{
		margin: 0.2rem 0;
	}
}

#newSignupMainContent .actual-plan-cost {
	display: flex;
	justify-content: space-between;
	p{
		margin: 0.2rem 0;
	}
}

#newSignupMainContent .Recurring-Monthly-Fee {
	p{
		margin: 0.2rem 0;
	}
}

#newSignupMainContent .discount {
	display: flex;
	justify-content: space-between;
	p{
		margin: 0.2rem 0;
	}
}

#newSignupMainContent .add-on {
	display: flex;
	justify-content: space-between;
	p{
		margin: 0.2rem 0;
	}
}

#newSignupMainContent .zHealth-Pay {
	display: flex;
	justify-content: space-between;
	p{
		margin: 0.2rem 0;
	}
}

#newSignupMainContent .managed-billing-services {
	display: flex;
	justify-content: space-between;
	p{
		margin: 0.2rem 0;
	}
}

#newSignupMainContent .active-plan-cost>div {
	margin: 2rem 0;
}

#newSignupMainContent .active-plan {
	border-bottom: 1px solid #dadbd9;
}

#newSignupMainContent .basic-plan .title,
.standard-plan .title {
	h4 {
		font-weight: bold;
		color : #00acfa;
	}
}

#newSignupMainContent .basic-plan .headingInfo .plan-cost h4,
#newSignupMainContent .standard-plan .headingInfo .plan-cost h4 {
  color: black;
  padding: 5px;
}

#newSignupMainContent .basic-plan .headingInfo .plan-cost h6,
#newSignupMainContent .standard-plan .headingInfo .plan-cost h6 {
  color: black;
  /* font-size: 0.8em; */
}

#newSignupMainContent .basic-plan .headingInfo .plan-cost .value,
#newSignupMainContent .standard-plan .headingInfo .plan-cost .value {
  color: #00acfa;
  padding-bottom: 10px;
}

#newSignupMainContent .advanced-plan .headingInfo .plan-cost h4,
#newSignupMainContent .advanced-plan .headingInfo .plan-cost h6,
#newSignupMainContent .advanced-plan .headingInfo .plan-cost .value,
#newSignupMainContent .advanced-plan .headingInfo .title h4,
#newSignupMainContent .advanced-plan .headingInfo .title h6,
#newSignupMainContent .advanced-plan .headingInfo .title .value {
  color: white;
}

#newSignupMainContent .plan-cost h4 {
  padding: 5px;
}

#newSignupMainContent .plan-cost h6 {
  font-size: 0.8em;
}

#newSignupMainContent .plan-cost .value {
  padding-bottom: 10px;
}


#newSignupMainContent .Total-Amount {
	display: flex;
    justify-content: space-between;
}

#newSignupMainContent .Total-Monthly-Fee {
	display: flex;
	justify-content: space-between;
}

#newSignupMainContent .plans-Container {
	margin-bottom: 2rem;
}


#newSignupMainContent .buttons {
	display: flex;
	padding: 0 3rem;
	justify-content: space-evenly;
}

#newSignupMainContent .paymentsProcessing {
	display: flex;
	padding: 0 3rem;
	transform: scale(0.7);
	/* margin-top: -5rem; */
	width: 100%;
	padding-right: 0;
	margin: -5rem;
}

#newSignupMainContent .payment-option-container {
	flex: 1;
	margin: 0 0.5rem;
	border: 1px solid;
	padding: 1rem;
	text-align: center;

}

#newSignupMainContent .payment-option-title {
	h5 {
		font-weight: bold;
		color: #00acfa;
	}
}

#newSignupMainContent .payment-option-subtitle {
	h6 {
		font-weight: bold;
		color:black;
	}
}

#newSignupMainContent .payment-option-benefits {
	ul {
		margin-top: 2rem;
		margin-bottom:0rem;
	}
}

#newSignupMainContent .see-more {
	p {
		margin-top: 1rem;
		margin-bottom: 0;
	}
}

#newSignupMainContent .show-details {
	p {
		border-top: 1px solid #dadbd9;
		margin : 0;
	}
}

#newSignupMainContent .div2 {
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#newSignupMainContent .payment-option-title1 {
	h5 {
		font-weight: bold;
	}
}

#newSignupMainContent .payment-option-title2 {
	h5 {
		font-weight: bold;
		color: #00acfa;
	}
}

#newSignupMainContent .div3 {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#newSignupMainContent .own-payment-processor {
	h5 {
		font-weight: bold;
	}
}

#newSignupMainContent .manage-billing-buttons {
	display: flex;
	justify-content: space-evenly;
}

#newSignupMainContent .benefit-container {
	margin: 0 1rem;
	text-align: center;
}

#newSignupMainContent .services-title {
	margin: 5rem 2rem;
	h6{
		text-align: center;
		font-weight : bold;
		margin-bottom:3rem;
	}
	
}

#newSignupMainContent .benefits-1 {
	display: flex;
}

#newSignupMainContent .benefits-2 {
	display: flex;
	justify-content : center;
}

#newSignupMainContent .title-container {
	margin-top: 3rem;
	h5{
		color:black;
		text-align:center;
		margin-bottom:3rem;
	}
}

#newSignupMainContent .zhpay-benefits {
	margin: auto;
    margin-left: 2rem;
    margin-right: 2rem;
}

#newSignupMainContent .slider:hover {
	cursor: pointer;
}

#newSignupMainContent .selected-border {
	border: 3px solid #ff914d !important;
	backdrop-filter: contrast(0.94);
}

#newSignupMainContent .next-button {
	text-align: center;
	margin-top: 3%;
}

#newSignupMainContent .active-horizontal-rule {
	background-color: #00acfa;
}

#newSignupMainContent .backToPrevious {
	text-align: end;
	margin-right: 2%;
}

#newSignupMainContent .btn-backToPrevious {
	color: #00acfa;
	font-size: 13px;
	display: inline-block;
	transition: transform 0.3s ease;
}

#newSignupMainContent .btn-backToPrevious:hover {
	cursor: pointer;
	transform: scale(1.1);
}

#newSignupMainContent .btn-signup {
	padding-right: 3rem;
	padding-left: 3rem;
	background-color: #00acfa !important;
	margin-top: 1rem;
	font-weight: bold;
	border: 0px;
}

#newSignupMainContent .recurring-fee-type {
	margin: 2rem 0;
}

#newSignupMainContent .card-billing-info {
	display: flex;
/*	margin: 0 2rem;*/
}

#newSignupMainContent .card-container {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex:50%;
	border: 1px solid #00000029;
	margin: 0 0.9rem;
	padding: 20px;
}

#newSignupMainContent ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#newSignupMainContent li {
	margin: 5px 0;
}

#newSignupMainContent .advanced-plan li {
	font-weight: 350;
}

/* Agreement and Signature */
#newSignupMainContent .isActive {
	border-bottom: 5px solid #00bf63;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#newSignupMainContent #signature-canvas {
	border: 2px solid black;
	margin-bottom: 10px;
}

#newSignupMainContent .canvas-button {

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-content: space-around;
}

#newSignupMainContent .signature-attributes {
	margin: 2%;
	display: flex;
	justify-content: space-between;
}

#newSignupMainContent .signature-input {
	width: 90%;
	margin: auto;
	margin-top: 13%;

}

#newSignupMainContent .color {
	margin-right: 2px;
	margin-left: 2px;
}

#newSignupMainContent .colors {
	display: flex;
}

#newSignupMainContent .signature-input-box {
	text-align: center;
	font-size: 30px;
	width: 100%;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 2px solid #C0C0C0;
	background-color: #f5f5f5;
	padding: 2%;
	height: 75px;
}

#newSignupMainContent #previewCanvasDIV {
	height: 230px;
	background-color: #f5f5f5;
	margin: 20px;
}

#newSignupMainContent .circle {
	width: 3rem;
	height: 3rem;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	margin: 0 4px 0 4px;
	display: flex;
	justify-content: center;
	align-items: center;

}

#newSignupMainContent .black {
	background: black;
}

#newSignupMainContent .red {
	background: red;
}

#newSignupMainContent .blue {
	background: blue;
}

#newSignupMainContent #tick {
	content: "\2713";
	color: white;
}

#newSignupMainContent .dropdown>summary>.button {
	/* Frame */
	display: inline-block;
	box-sizing: border-box;

	/* Style */
	border: none;

	color: #b9b8b8;
	cursor: pointer;
}

/* Dropdown styles */
#newSignupMainContent.dropdown {
	position: relative;
	padding: 0;
	margin-right: 1em;

	border: none;
}

#newSignupMainContent.dropdown summary {
	list-style: none;
	list-style-type: none;
}

#newSignupMainContent.dropdown>summary::-webkit-details-marker {
	display: none;
}

#newSignupMainContent .dropdown ul {
	position: absolute;
	/*margin: 10% 0 0 0;*/
	/*padding: 10% 0 10% 0;*/
	padding: 10%;
	width: 200px;
	box-sizing: border-box;
	z-index: 2;
	box-shadow: 0 3px 8PX 5PX #ccc8c8a8;
	background: white;
	border-radius: 6px;
	list-style: none;
	/*font-size : large;*/
}

#newSignupMainContent .dropdown ul li {
	padding: 3%;
	margin: 0;
}

#newSignupMainContent .dropdown ul li a:link,
.dropdown ul li a:visited {
	display: inline-block;
	padding: 10px 0.8rem;
	width: 100%;
	box-sizing: border-box;

	color: black;
	text-decoration: none;
}

#newSignupMainContent .dropdown ul li:hover {
	cursor: pointer;
}

/* Dropdown triangle */
#newSignupMainContent .dropdown ul::before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	top: -10px;
	left: 50%;
	margin-left: -10px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent white transparent;
}


/* Close the dropdown with outside clicks */
#newSignupMainContent .dropdown>summary::before {
	display: none;
}

#newSignupMainContent .dropdown[open]>summary::before {
	content: ' ';
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
}

#newSignupMainContent .marckScript {
	font-family: 'Marck Script', cursive;
}

#newSignupMainContent .babylonica {
	font-family: 'Babylonica', cursive;
}

#newSignupMainContent .dancingScript {
	font-family: 'Dancing Script', cursive;
}

#newSignupMainContent .homemadeApple {
	font-family: 'Homemade Apple', cursive;
}

#newSignupMainContent .circle.black:hover {
	cursor: pointer;
}

#newSignupMainContent .circle.red:hover {
	cursor: pointer;
}

#newSignupMainContent .circle.blue:hover {
	cursor: pointer;
}

#newSignupMainContent .modal-footer {
	padding: 10px 10px 10px 10px;
	text-align: right;
	border-top: 1px solid #e5e5e5
}

#newSignupMainContent .modal-body {
	position: relative;
	padding: 5px 15px 15px 15px;

}

#newSignupMainContent .modal-header {
	margin: 5px;
	padding: 15px 15px 5px 15px;
}

#newSignupMainContent .help-block {
	margin: 5px 20px 10px 20px;
}

#newSignupMainContent hr {
	border-top: 0px;
	margin: 0px;
}

#newSignupMainContent #selectMethod {
	display: flex;
	padding: 0 19px 0 19px;
	margin: 0 1px 0 1px;
	box-shadow: 0 7px 7px 0px #ccc8c8a8;
}

#newSignupMainContent .modal-content {
	font-family: Arial, Helvetica, sans-serif;
}

#newSignupMainContent .modal-title.submit-claim {
	color: #000000;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

#newSignupMainContent .checkBoxContainer {
	display: flex;
	align-items: center;
}

#newSignupMainContent .checkBox {
	/*background-color: pink;*/
	width: 30px;
	height: 30px;
	display: flex;
	flex-direction: row;
	justify-content: center;

}

#newSignupMainContent .signature-date-container {
	display: flex;
}

#newSignupMainContent .signature-container {
	display: flex;
	align-items: center;
	border: 1.5px solid #969696;
	border-radius: 10px;
}

#newSignupMainContent .signature-container:hover {
	cursor: pointer;
}

#newSignupMainContent .signature-text-container {
	margin-right: 7.5%;
}

#newSignupMainContent .date-text-container {
	margin-left: 7.5%;
}

#newSignupMainContent .date-container {
	display: flex;
	align-items: center;
	border: 1.5px solid #969696;
	border-radius: 10px;
	;
}

#newSignupMainContent .date-input {
	margin: 0 4px 0 4px;
	display: block;
	text-align: left;
	background-color: white;
	border: 0px;
	padding: 8px;
}

#newSignupMainContent .sign {
	background-color: #00bf63;
	color: white;
	border: 0px;
	padding: 1% 2% 1% 2%;
	border-radius: 8px;
	float: right;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

#newSignupMainContent .cancel {
	background-color: #e1e1e1;
	color: #b9b8b8;
	border: 0px;
	padding: 1% 2% 1% 2%;
	border-radius: 8px;
	float: left;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

#newSignupMainContent .title>a {
	float: left;
}

#newSignupMainContent .title>h2 {
	text-align: center;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 0;
	;
}

#newSignupMainContent .termsConditionsList>li>p {
	margin: 0;
}

#newSignupMainContent .agreementTermsList>li>p {
	margin: 0;
}

#newSignupMainContent .signature-module {
	margin-top: 2%;
}

#newSignupMainContent .tickmark {
	margin: auto;
	color: #00bf63;
	font-size: larger;
	display: none;
}

#newSignupMainContent .selectPlanSelfSignupBS li:before {
    content: url(../new_website_2022/images/blue-icon.png);
    display: block;
    margin-right: 10px;
    transform: scale(0.5);
}

#newSignupMainContent ul.selectPlanSelfSignupBSList li{
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

#newSignupMainContent .selectPlanSelfSignupA li:before {
    content: url(../new_website_2022/images/white-icon.png);
    display: block;
    margin-right: 10px;
    transform: scale(0.5);
}

#newSignupMainContent ul.selectPlanSelfSignupAList li{
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}