/* EDIT FOR MASTER CHANGES ONLY */
/* root colors handled by main.css */

#plan-savings-form {
	display: flex;
	flex-direction: column;
	margin: 4rem 2rem 0;
	
	.banner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1rem 1.5rem;
		border-radius: 10px;
		background-color: var(--blue);
		
		img {
			width: 100px;
			height: 100px;
			margin-bottom: 1rem;
			border: 5px solid var(--light-blue);
			border-radius: 50%;
			background-color: white;
			box-shadow: 0 5px 5px rgba(20, 30, 48, .2);
		}

	}

	h1 {
		flex: 1;
		margin-top: 0;
		margin-bottom: 0;
		color: var(--white);
		font-size: 1.8rem;
		text-align: center;

		.smaller {
			font-size: 1.3rem;
		}

	}

	h2 {
		margin-top: 1.5rem;
		margin-bottom: 2.5rem;
		font-size: 1.3rem;
		text-align: center;
		color: var(--blue);
	
		&::after {
			content: '';
			display: block;
			background-color: var(--red);
			height: 3px;
			width: 150px;
			margin: 0.25rem 0 0.5rem 0;
			position: absolute;
			left: 50%;
			margin-left: -75px;
		}
	}

	.slide:not([hidden]) {
		display: flex;
		flex-direction: column;
        padding: 2rem 0;
	}

	fieldset {
		margin: 0;
		padding: 0;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;

		&.full-column {
			border: none;
		}
		
		.subtext {
			color: var(--subtext-blue);
			font-size: 0.9rem;
			margin: 0.5rem 0;
		}

		div.toggle-row {
			display: flex;
            margin-bottom: 2rem;
            align-items: center;
			
			.state-label {
				display: flex;
				width: 40px;
				justify-content: center;
			}
		}

		div.icon-row {
			margin-left: -25px;
		}
	}

	label {

		&.switch {
			position: relative;
			display: inline-block;
			width: 76px;
			height: 38px;

			input {
				opacity: 0;
				width: 0;
				height: 0;
			}

			.slider {
				position: absolute;
				cursor: pointer;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #ccc;
				transition: 0.4s;
				border-radius: 36px;

				&::before {
					position: absolute;
					content: "";
					height: 30px;
					width: 30px;
					left: 4px;
					bottom: 4px;
					background-color: white;
					transition: 0.4s;
					border-radius: 50%;
				}
			}
		}
	}

	legend {

		&.title {
			font-weight: bold;
			font-size: 1.15rem;
			color: var(--blue);
			margin: 1rem 0 0.5rem;
			text-align: center;

			&.toggle-title {
				margin: 1rem 0 2rem;
			}

			&.field-icon {
				display: inline-block;
				width: 25px;
				height: 25px;
				margin: 0;
			}
		}
	}

	input {
		height: 45px;
		padding: 0.25rem 1rem;
		border-radius: 5px;
		border: 2px solid var(--blue);

		&.field-error {
			border: 2px solid var(--red);
		}

		&.number-field {
			width: 60px;
			text-align: center;

			&.dollar-amount {
				width: 80px;
				text-align: center;
			}
		}
	}

}

/* Slide 1 - Intro */
#intro {
	
	.title {
		font-weight: bold;
		font-size: 1.15rem;
		color: var(--blue);
		margin: 1rem 0 0.5rem;
		text-align: center;
	}

	div.text-area {
		position: relative;
		
		p:first-of-type {
			margin-top: 0;
		}
	}
	
}

#qualifying {
	background-color: #e8f8ff;
	color: var(--blue);

	.title {
		font-weight: bold;
	}

	ul li::marker {
		color: var(--red)
	}
}

/* Slide 2 - Current 401k */

/* Slide 3 - # of Employees */

/* Slide 4 - # of HCEs */

/* Slide 5 - Auto Enrollment */

/* Slide 6 - Contributions */

/* Slide 7 - Salary Cap Employees */

/* Slide 8 - Estimated Annual Contributions */

/* Loading Screen */
#loader {
	justify-content: center;
	align-items: center;

	div.loader {
		justify-self: center;
		border: 8px solid #f3f3f3; /* Light grey */
		border-top: 8px solid var(--red); /* red */
		border-radius: 50%;
		width: 50px;
		height: 50px;
		animation: spin 2s linear infinite;
		margin-top: 20px;
	}
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Estimated Plan Savings Table */

/* Form Buttons */
#button-row {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	justify-content: center;
	align-items: center;
	margin-top: 2rem;

	button {
		flex: 1;

		i {
			margin: 0 0.25rem;
		}

		.action-btn:not([hidden]) {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: normal;
			margin: 0.5rem 0;

			&:hover {
				text-decoration: none;
			}

		}
	}
}

#next-btn[disabled] {
	background-color: var(--grey);
}

/* Disclaimer Section */
#plan-savings-form-disclaimer {
	display: flex;
	flex-direction: column;
	margin: 0 2rem 4rem;
	border: none;
	border-radius: 0;
	box-shadow: none;
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	
	#qualifying.bubble {
	
		ul {
			margin-left: 1rem;
		}
	}
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
	#plan-savings-form {
		flex-direction: column;
		border: 1px solid #dbdbdb;
		border-radius: 20px;
		box-shadow: 2px 2px 10px 2px #dbdbdb;
		padding: 2rem;
	}
	#intro.slide:not([hidden]) {
		display: grid;

		h2 {
			grid-column: 1 / span 2;
        	margin-top: 0.5rem;
		}
		div {
			grid-row: 2 / span 1;
		}
	}
	#button-row {
		
		button {
			flex: none;

			&.solo {
				flex: 0 1 auto;
				min-width: 50%;
			}
		}
	}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	#plan-savings-form, #plan-savings-form-disclaimer {
		width: 75%;
		max-width: 1040px;
	}
	#plan-savings-form {
		margin: 4rem auto 2rem;
		padding: 2.5rem 2.5rem;
	}
	#plan-savings-form-disclaimer {
		margin: 2rem auto 4rem;
		padding: 0;
	}
	#qualifying {
		width: 80%;
		margin-top: 0;
		justify-self: center;
	}
	#emp-contrib-more {
		grid-template-columns: 1fr 1fr;
		grid-column: span 2;
	}
}

/* CLEAN UP CODE BELOW THIS LINE */
/* #plan-savings-form .banner {
	display: grid;
	grid-template-columns: 150px auto;
	background-color: var(--blue);
	padding: 1rem 1.5rem;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	margin: -1.5rem -1.5rem 2rem;
} */
/* #plan-savings-form .banner img {
	background-color: white;
	border-radius: 50%;
	border: 5px solid var(--light-blue);
	width: 100px;
	height: 100px;
	box-shadow: 0 5px 5px rgba(20, 30, 48, .2);
} */
/* #plan-savings-form h1 {
	font-size: 1.8rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
	color: var(--white);
}
#plan-savings-form h1 .smaller {
	font-size: 1.3rem;
    text-align: center;
} *//* 
#plan-savings-form h2 {
	font-size: 1.3rem;
    color: var(--blue);
} *//* 
#plan-savings-form #qualifying {
	background-color: #e8f8ff;
	color: var(--blue);
}
#plan-savings-form #qualifying .title {
	font-weight: bold;
}
#plan-savings-form #qualifying ul li::marker {
	color: var(--red)
} */
/* div.text-area {
	position: relative;
}
div.text-area h2 {
	margin-bottom: 1.5rem;
}
div.text-area h2::after {
	content: '';
	display: block;
	background-color: var(--red);
	height: 3px;
	width: 150px;
	margin: 0.25rem 0 0.5rem 0;
	position: absolute;
}
div.text-area p:first-of-type {
	margin-top: 0;
} *//* 
#plan-savings-form .slide:not([hidden]) {
	display: grid;
}
#plan-savings-form #intro.slide {
	grid-template-columns: 400px auto;
	gap: 1rem;
} */
/* #button-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 2rem;
}
#button-row button i {
	margin: 0 0.25rem;
}
#next-btn:not([hidden]), #back-btn:not([hidden]) {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: normal;
	margin: 0.5rem;
}
#next-btn:hover, #back-btn:hover {
	text-decoration: none;
}
#next-btn.solo {
    min-width: 50%;
}
#next-btn[disabled] {
	background-color: var(--grey);
} */
/* #plan-savings-form label, #plan-savings-form fieldset {
	margin: 1rem 0;
	display: flex;
	flex-flow: column nowrap;
}
#plan-savings-form label .title, #plan-savings-form legend.title {
	font-weight: bold;
	font-size: 1.15rem;
	color: var(--blue);
	margin: 1rem 0 0.5rem;
	text-align: center;
}
#plan-savings-form label .title.toggle-title, #plan-savings-form legend.title.toggle-title {
	margin: 1rem 0 2rem;
}
#plan-savings-form label .title.field-icon, #plan-savings-form legend.title.field-icon {
	display: inline-block;
	width: 25px;
	height: 25px;
	margin: 0;
}
#plan-savings-form label.full-column, #plan-savings-form fieldset.full-column {
	grid-column: span 2;
    align-items: center;
	border: none;
} */
/* #plan-savings-form div.toggle-row {
	display: flex;
    align-items: center;
    justify-content: center;
	margin-bottom: 2rem;
} */
/* #plan-savings-form div.icon-row {
	margin-left: -25px;
} */
/* #plan-savings-form .state-label {
	display: inline-block;
	width: 40px;
	text-align: center;
} */
/* #plan-savings-form .subtext {
	color: var(--subtext-blue);
	font-size: 0.9rem;
	margin: 0.5rem 0;
} */
/* #plan-savings-form input {
	height: 37px;
	padding: 0.25rem 1rem;
	border-radius: 5px;
	border: 2px solid var(--blue);
} */
/* #plan-savings-form input.field-error {
	border: 2px solid var(--red);
} */
/* #plan-savings-form .number-field {
	width: 60px;
	text-align: center;
}
#plan-savings-form .number-field.dollar-amount {
	width: 80px;
	text-align: center;
} */
/* #plan-savings-form label.switch {
	position: relative;
	display: inline-block;
	width: 76px;
	height: 38px;
}
#plan-savings-form label.switch input {
	opacity: 0;
	width: 0;
	height: 0;
} */
/* #plan-savings-form .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 36px;
}
#plan-savings-form .slider:before {
	position: absolute;
	content: "";
	height: 30px;
	width: 30px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
} */
#plan-savings-form input:checked + .slider {
	background-color: var(--blue);
}
#plan-savings-form input:checked + .slider:before {
	transform: translateX(38px);
}
#tax-estimate {
	border-collapse: collapse;
}
#tax-estimate caption {
	font-weight: bold;
	font-size: 1.2rem;
	color: var(--blue);
	margin: 1rem 0 2rem 0;
}
#tax-estimate thead tr {
	background-color: var(--blue);
	color: var(--white);
	font-size: 1.1rem;
}
#tax-estimate th {
	padding: 1rem 0.5rem;
}
#tax-estimate tbody tr {
	border-bottom: 1px solid var(--light-grey);
}
#tax-estimate tfoot tr {
	color: var(--blue);
}
#tax-estimate tr:last-of-type {
	border-bottom: 5px solid var(--blue); 
}
#tax-estimate tr td {
	text-align: center;
	font-weight: bold;
	border-right: 1px solid var(--light-grey); 
}
#tax-estimate tr th:first-of-type {
	padding: 1.5rem 0.5rem;
	color: var(--blue);
	font-weight: bold;
	text-align: left;
}
#tax-estimate tr td:nth-last-of-type(odd) {
	background-color: var(--table-grey-odd);
}

.subtext {
	/* Displays our subtext on new line */
	display: table;
	font-size: smaller;
}
.img-box {
	overflow: hidden;
	margin: 0 1rem 1rem 0;
	display: inline-flex;
	border-radius: 10px;
	justify-content: center;
}
.img-box img {
	height: 100%;
}
.drop-shadow {
	box-shadow: 2px 2px 10px 2px #dbdbdb;
}
.info-bubble {
	display: none;
}
.alert {
	background-color: var(--alert-yellow-background);
    border-left-color: var(--alert-yellow);
	border-left: 0.5rem solid var(--alert-yellow);
	/* margin: 2rem 0 0 0; */
	padding: 2rem 1.5rem;
	display: none;
	/* background-color: #faf3d1;
    border-left-color: #ffbe2e;
	border-left: 5px solid #ffbe2e; */
}
.alert p {
	margin: 0;
	padding: 0;
}
.alert.active {
	display: block;
}
.error {
	display: none;
	background-color: var(--warning-red-background);
    border-left-color: var(--warning-red);
	border-left: 0.5rem solid var(--warning-red);
	margin: 2rem 0 0 0;
	padding: 1rem 1.5rem;
}
.error.active {
	display: block;
}
#current-plan {
	grid-column: span 2;
}
#emp-contrib-more {
	display: grid;
}
#tax-estimate {
	width: 100%;
}
#tax-estimate-note {
	font-style: italic;
	font-size: smaller;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   /* 
	#tax-estimate, #tax-estimate-note {
		grid-column: span 2;
	} */
}