/* =============================================
FILE UPLOAD
============================================= */

.files-container {
	width: 100%;
}


/* =============================================
DROP ZONE
============================================= */

.drag-files-container {
	align-items: center;
	border: 2px dashed #ccc;
	display: flex;
	justify-content: center;
	min-height: 275px;
	padding: 20px;
	text-align: center;
	transition:
		background-color .2s ease,
		border-color .2s ease;
}

.drag-files-container.drag-over {
	background-color: #eef7ff;
	border-color: #006fe6;
}

#FileDropZone[hidden],
#SelectedFilesContainer[hidden] {
	display: none !important;
}

.file-output-message {
	display: block;
}

.file-output-message i {
	display: block;
	font-size: 18px;
	margin: 0 auto 5px auto;
}

.file-output-message p {
	margin: 0 0 18px;
}


/* =============================================
FILE BUTTON
============================================= */

.file-btn {
	cursor: pointer;
	margin:auto;
}


/* =============================================
SELECTED FILES
============================================= */

.selected-files-container {
	width: 100%;
}

.selected-file-row {
	align-items: center;
	border: 2px solid #ccc;
	border-bottom: 0;
	display: flex;
	min-height: 48px;
}

.selected-file-row:has(+ .selected-files-actions) {
	border-bottom: 2px solid #ccc;
}

.selected-file-name {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 10px;
}


/* =============================================
REMOVE FILE
============================================= */

.RemoveFileButton {
	align-items: center;
	background: transparent;
	border: 0;
	color: #7FA3C0;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-weight: 700;
	gap: 7px;
	margin: 0;
	padding: 10px 16px;
	width: auto;

	font-size: inherit;
}

.RemoveFileButton:hover {
	text-decoration: underline;
	background-color:none;
	color:#000;
}

.RemoveFileButton:focus {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
}


/* =============================================
ADD ANOTHER FILE
============================================= */

.selected-files-actions {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 18px 10px 0;
}

.selected-files-actions .file-btn {
	margin: 0;
	max-width: 14rem;
}


/* =============================================
FILE ERRORS
============================================= */

.file-upload-errors {
	margin-bottom: 20px;
}

.file-upload-error {
	background: #fde8e8;
	border-radius: 5px;
	color: #990000;
	display: block;
	font-weight: 700;
	margin: 0 0 5px;
	padding: 10px;
}

.file-upload-error:last-child {
	margin-bottom: 0;
}


/* =============================================
NATIVE FILE INPUT
============================================= */

.file-inputs {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}



/* =============================================
COLLEGE COURSES BLOCK
============================================= */

button.RemovePlannedCourseButton {
    position: absolute;
    right: -8px;
    top: -6px;
    color: #fff;
    background-color: #044881;
    padding: 4px 1px 3px 2px;
    border-radius: 5px;
    font-size: 20px;
    border: none;
    box-shadow: none;
}

button.RemovePlannedCourseButton:hover, button.RemovePlannedCourseButton:focus {
    background-color: #000!important;
}



/* =============================================
OTHER FORM STUFF
============================================= */

.ErrorAlert {    
	color: #BC0606;
	background-color: #F5D2D2;
	/* border: solid 2px #BC0606; */
	padding: .55rem 1rem;
	width: fit-content;
	font-size: 17px;
}
#FormErrorMessage {
	display: flex;
	gap: 10px;  
}

#FormErrorMessage p {
	margin: 0;
}

#FormErrorMessage p, .ErrorAlert {
	/* font-weight: bold; */
}
.green-check-icon {
	width: 50px;
	margin: 20px 0;
}
.submission-heading {
	font: normal normal 700 27px myriad-pro;
	margin-bottom: 20px;
}
.popup {
	max-width: 600px;
	background-color: #D7DDEB;
	padding: 25px 30px;
	position: relative;
}
.popup-container.hide, .hide {
	display: none;
}
.popup-container {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgb(0 0 0 / 50%);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2000;
}

.cta-btns {
	display: flex;
	max-width: 700px;
	gap: 15px;
}

.cta-btns button {
	margin: 0;
}

div#ConfirmationPopupTitle {
	color: #044881;
	font: normal normal 700 19px myriad-pro !important;
	/* letter-spacing: 0.20px; */
	margin-bottom: 6px;
	/* line-height: 1.8 !important; */
	/* background-color: transparent; */
}


#MyClarkForm input::placeholder, textarea::placeholder  { color: #999; }
.labelDescription {color:#004881;}
.smallGreenBanner {
	background-color: #C2E4A6; */
	padding: 20px;
	display: flex;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	margin-bottom: 40px;
	padding: 20px 20px 10px 20px;
	align-items: flex-start;
	max-width:800px;
}

.smallGreenBanner a {
	font-weight: bold;
	color: #006294;
}

/* Buttons */
.OrangeButton {
	background-color: #CE4C09;
	border: solid 2px #CE4C09;
	color: #fff !important;
	padding: 10px 20px;
	font: normal normal 600 16px myriad-pro;
	display: block;
	width: fit-content;
	min-width: 200px;
	text-align: center;
	text-decoration:none!important;
	flex-grow: 1;
	box-shadow: none;
	cursor:pointer;
}
.OrangeButton:hover,
.OrangeButton:active {
	background-color: #9b3b09;
	text-decoration:underline;
}

.OrangeBorderButton {
	border: solid 2px #CE4C09;
	background-color: #fff;
	padding: 10px;
	font: normal normal 600 16px myriad-pro;
	display: block;
	max-width: 350px;
	text-align: center;
	text-decoration: none !important;
	color: #CE4C09 !important;
	flex-grow: 1;
}

.OrangeBorderButton:hover,
.OrangeBorderButton:active {
	background-color: #CE4C09;
	color:#fff!important;
}

.SubmitButton {
	padding: 10px 80px !important;
	margin: 30px auto 0 auto;
	min-width: 250px;
}

/* Required text */
.required-note span,
.required 
{
	color: #b3212d;
	font-weight: 700;
}

.required-note
{
	margin: 1rem 0 1.5rem;
	color: #044881;
	font-weight: bold;
}

/* Main white application card */
#MyClarkForm
{
	background: #fff;
	box-sizing: border-box;
	counter-reset: application-question;
	margin-top: 1.5rem;
	padding: 1.5rem 1.75rem 2rem;
}

#MyClarkForm section + section
{
	margin-top: 2rem;
}

#MyClarkForm section > h2
{
	color: #333;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.25rem;
	padding-bottom: .65rem;
	position: relative;
}

#MyClarkForm section > h2::after
{
	background: #f36c21;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 11rem;
}

/* Prerequisite table */
#MyClarkForm table
{
	border-collapse: collapse;
	font-size: .92rem;
	margin: 1rem 0 1.75rem;
	width: 100%;
}

#MyClarkForm th
{
	background: #00558c;
	color: #fff;
	font-weight: 700;
	padding: .45rem .65rem;
	text-align: left;
}

#MyClarkForm td
{
	padding: .38rem .65rem;
}

#MyClarkForm tbody tr:nth-child(even)
{
	background: #f3f3f3;
}

#MyClarkForm th,
#MyClarkForm td {
	font-size: 17px;
}
#MyClarkForm #CourseTable1 th:first-child,
#MyClarkForm #CourseTable1 td:first-child {
	width: 15%;
}

#MyClarkForm #CourseTable2 th:first-child,
#MyClarkForm #CourseTable2 td:first-child {
	width: 11%;
}

/* Course Name column */
#MyClarkForm th:nth-child(2),
#MyClarkForm td:nth-child(2) {
	width: 20%;
}
.prerequisite-table th {
	/*     background-color: #004881; */
	/*     color: #fff; */
}

/* Continuous question numbering */
.application-questions
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.application-questions > li
{
	counter-increment: application-question;
	margin: 0 0 1.8rem;
	padding-left: 1.8rem;
	position: relative;
}

.application-questions > li > fieldset,
.application-questions > li > h3,
.application-questions > li > .question-title
{
	border: 0;
	margin: 0;
	padding: 0;
}

.application-questions > li > fieldset > legend { margin:0!important; }

.application-questions > li > fieldset > legend,
.application-questions > li > fieldset > legend h3,
.application-questions > li > h3,
.application-questions > li > label h3,
.application-questions > li > .question-title,
.application-questions .fieldset-subheading
{
	color: #005581;
	display: block;
	/*     font-size: 1rem;
	font-weight: 700;
	line-height: 1.45; */
	margin: 0 0 .75rem;
	padding: 0;
	width: 100%;
	font: normal normal 700 20px myriad-pro !important;
	letter-spacing: 0.20px;
}

.application-questions > li > fieldset > legend::before,
.application-questions > li > h3::before,
.application-questions > li > .question-title::before
{
	content: counter(application-question) ".";
	left: 0;
	position: absolute;
	top: 0;
}


#CompletedOrInProgressDegreeYesPanel:has(input:disabled),
#ProgramFeeYesPanel:has(input:disabled) {
	opacity: 0.65;
}

/* Checkbox and radio lists */
.choices
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.choices > li
{
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: .55rem;
	align-items: start;
	margin-bottom: .7rem;
	margin-left: 0;
}

.choices input
{
	margin: 0 0 .22rem 0;
	width: 22px;
	height: 22px;
}

.choices label
{
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
	font-size: 16px;
}

/* Shared form controls */
#MyClarkForm input[type="text"],
#MyClarkForm input[type="date"],
#MyClarkForm textarea
{
	background: #fff;
	border: 2px solid #cccccc;
	box-sizing: border-box;
	font: inherit;
	padding: .65rem .75rem;
	width: 100%;
	box-shadow: none;
}
#MyClarkForm input[type="text"],
#MyClarkForm input[type="date"]
{
	max-width: 500px;
}

#MyClarkForm textarea
{
	min-height: 10.5rem;
	resize: vertical;
}

#wordCount
{
	font-size: 0.9rem;
	margin: -0.25rem 0 .25rem 0;
	color: #044881;
}

/* Conditional degree and payment panels */
.panel
{
	background: #D7DDEB;
	box-sizing: border-box;
	margin-top: 1.5rem;
	max-width: 29rem;
	padding: 1rem;
}

.panel[hidden]
{
	display: none;
}

.panel label {
	color: #044881;
	display: block;
	font-weight: 700;
	margin: 0 0 .35rem;
	font-size: inherit;
}

.panel p
{
	font-size: 1rem;
	margin: 0 0 .6rem;
}

.panel input
{
	margin-bottom: 1rem;
}

.panel input:last-child
{
	margin-bottom: 0;
}

/* Repeating college blocks */
#CollegesContainer
{
	margin-top: 18px;
}

.college-block,
.planned-course-row {
	background: #D7DDEB;
	margin: 0 0 20px;
	padding: 0 22px 22px;
	position: relative;
}

.college-title
{
	background: #c7d1e3;
	color: #005581;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 -22px 20px;
	padding: 13px 22px;
}

.course-title
{
	background: #c7d1e3;
	color: #005581;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 -22px 20px;
	padding: 13px 22px;
}

.college-field,
.course-field
{
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin: 0 0 16px;
}

.college-field:last-of-type,
.course-field:last-of-type
{
	margin-bottom: 0;
}

.college-field label,
.course-field label {
	color: #333;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	font-size: 16px;
}

.fieldset-group label {
	color: #333;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	font-size: 16px;
	margin-bottom:7px;
}

.college-field input
{
	box-sizing: border-box;
	margin: 0;
	width: 100%;
}

#AddCollegeButton,
.AddPlannedCourseButton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	color: #CE4C09;
	border: 0;
	background-color: transparent;
	font-weight: bold !important;
	font: inherit;
	padding: 15px 10px;
}

#AddCollegeButton  .add-more-icon,
.AddPlannedCourseButton .add-more-icon 
{
	background-color: #CE4C09;
	padding: 5px 7px;
	border-radius: 4px;
	margin-right: 15px;
	color: #fff;
}

#AddCollegeButton .add-more-icon,
.RemoveCollegeButton .remove-icon,
.AddPlannedCourseButton .add-more-icon,
.AddPlannedCourseButton .remove-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.RemoveCollegeButton,
.RemoveCourseButton
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	background-color: #044881;
	border: none;
	box-shadow: none;
	border-radius: 5px;
	padding: 6px 2px 4px 3px;
	font-size: 20px;
	position: absolute;
	right: -7px;
	top: -29px;
}

#CollegesContainer .college-block .college-field input,
#SpringCoursesContainer.planned-courses-container .course-field input,
#SummerCoursesContainer.planned-courses-container .course-field input
{
	max-width: 100%;
	width: 100%;
	margin: 0;
}

@media screen and (max-width: 640px)
{
	.college-block
	{
		padding: 0 16px 18px;
	}

	.college-title
	{
		margin-right: -16px;
		margin-left: -16px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.college-field
	{
		display: block;
	}

	.college-field label
	{
		display: block;
		margin-bottom: 6px;
	}
}

/* Fee information and submit */
#program-fee-help
{
	margin-bottom: 1.5rem;
}

#program-fee-help ol
{
	margin-bottom: 1rem;
}

#SubmitContainer
{
	margin-top: 2rem;
	text-align: center;
}

#SubmitContainer .SubmitButton
{
	min-width: 14rem;
}

#FormErrorMessage:not(:empty)
{
	margin-bottom: 1rem;
}

@media screen and (max-width: 640px)
{
	#MyClarkForm
	{
		padding: 1.15rem;
	}

	.application-questions > li
	{
		padding-left: 1.5rem;
	}

	.college-block
	{
		grid-template-columns: 1fr;
	}

	.college-block legend,
	.college-block .RemoveCollegeButton
	{
		grid-column: 1;
	}
}