.green{
	color:green;
	
}
.red{
	color:red;
}
.showHide{
	transition: width 0.4s ease;
}
.progress-bar-container {
    width: 100%; /* Adjust if needed to not overlap content */
    height: 20px; /* Make sure it's not too tall */
    background-color: #ddd;
    border-radius: 8px;
    position: relative; /* Change to relative if it was absolute */
    z-index: 10; /* Ensure it's not overlaying content unintentionally */
}

.progress-bar {
    height: 100%;
    width: 0%; /* Start with no fill */
    background-color: var(--secondary);
	background: linear-gradient(90deg, var(--secondary) 0%, var(--secondary-hover) 100%);
    border-radius: 8px;
    transition: width 0.4s ease;
}

.form-page {
	display: none;
	position: relative; /* Ensure relative positioning */
	width: 100%;  
	margin: 20px;
	gap:2em;
	justify-content: space-between;
}

.form-page:first-child {
  display: block;
}

input, select, textarea {
  display: block;
  border-radius:0.25em !important;
  margin-bottom: 10px;
  padding:.5em .75em;
}
.field-group input, .field-group select, .field-group textarea{
	width:100% !important
}
button {
  margin-top: 10px;
}

.declineDental{
	margin-left:10px !important
}
.radio-button-group {
  display: flex;
  justify-content: left; /* Center the buttons in the container */
  gap: 0px; /* Creates space between the buttons */
}

.radio-button-group input[type="radio"] {
  display: none; /* Hide the actual radio buttons */
}

.radio-button-group label {
  background-color: #f0f0f0;
  color: #000;
  padding: 10px 20px;
  border: 1px solid #dcdcdc;
  border-radius: 0px;
  cursor: pointer;
  display: inline-block; /* Ensure labels are inline */
  text-align: center;
}
.radio-button-group label:first-of-type{
	border-radius:4px 0px 0px 4px
}
.radio-button-group label:last-child{
	border-radius:0px 4px 4px 0px
}
.radio-button-group input[type="radio"]:checked + label {
  background-color:var(--primary); /* Highlight color for selected button */
  color: #fff;
  border-color: var(--primary-hover);
}

.summary-half {
  width: 48%; /* Adjust the width as necessary */
  padding: 10px;
  box-sizing: border-box;
}

/* Additional styling for aesthetics */
.summary-half h3 {
  margin-top: 0;
}


.summary{
    border:2px solid var(--primary);
    padding:var(--space-l);
}
.summary h3{
    font-size: 2em;
}
.summary .costs{
    font-size:2.4em;
    font-weight: 600;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  padding: 0px 0px 3px 0px;
  color:#222;
  margin:0px 10px 0px 10px;
  border-radius:0px 0px .85em .85em;
  border:2px solid var(--secondary-dark);
  border-top:0px;
  background: var(--secondary-light);
}
.accordion-content .accordion-row{
	display:flex;
	background: var(--secondary-light);
	border-bottom:1px solid var(--secondary);
	align-items: center;
	transition: background-color 0.2s ease-in-out;
}
.accordion-content .accordion-row:hover{
	background: var(--secondary-ultra-light);
}
	.accordion-content .accordion-row.top{
		align-items:start !important;
	}

.accordion-content .accordion-row:last-child{
	border-bottom:none;
}

.accordion-button {
  width: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, var(--secondary) 0%, var(--secondary-hover) 100%);
  text-align: left;
  padding: 20px;
  border-radius:.5em;
  margin:20px 0px 0px 0px;
  cursor: pointer;
  border: none;
  outline: none;
  font-weight:600;
  font-size:1.2em;
  transition: background-color 0.4s ease-in-out;
}

.accordion-button:hover, .accordion-button:focus {
  background-color: var(--secondary-hover);
}

.mobileHide{
	background-color:#FFF !important;
	font-weight:600;
	font-size:1.2em;
	border-bottom:none !important;
}
.larger{
	font-size:1.2em;
	font-weight:bold
}

.visionOptions div, .dentalOptions div{
	padding:1em;
	background-color:var(--neutral-ultra-light)
}
.visionOptions div:first-of-type, .dentalOptions div:first-of-type{
	background-color:#FFF;
}
.visionOptions div.selected, .enhancedDental.selected, .coreDental.selected {
    background-color:var(--secondary-light);
	transition: background-color 0.3s ease-in-out;
	font-weight:600;
}


@media screen and (max-width: 768px){
	.accordion-row.mobileHide.grid--3:not(.ct-section),.accordion-row.mobileHide{
		display:none !important;
	}
}