@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,700&family=Source+Serif+Pro:wght@400;700&display=swap');

/* Variables */
:root {
	--colorText: #434a56;
	--colorSecondary: #314049;
	
	--colorPrimary: #1daa9e;

	--colorPrimaryLight: #1A2328;
	--colorPrimaryShadow: #0B151A;
	--colorBright: #3ee5d7;
	--colorBrightLight: #eefffe;
	--colorDark: #0f4766;
	--colorDarkLight: #e7f6ff;
	--colorActive: #ffb300;
	--colorContrast: #c11818;
	--colorHighlight: #d5effd;
	--colorHighlightContrast: #FFF5F5;

	--colorNeutral: #485358;
	--colorNeutralLight: #CCCCCC;
	--colorNeutralGraph: #888888;
	--colorWhite: #FFF;

	--colorData1: #005889;
	--colorData2: #74b1d4;

	--fontBasic: 'Open Sans', Verdana, Geneva, sans-serif;
	--fontHeader: 'Source Serif Pro', serif;

	--spacingExtraLarge: 2rem;
	--spacingLarge: 1rem;
	--spacingBasic: .5rem;
	--spacingSmall: .25rem;

	--shadow: 2px 4px 3px var(--colorNeutral);
	--shadowLight: 0 2px 3px rgba(20, 55, 65, 0.15);
	--shadowDown: 2px 3px 3px rgba(22, 22, 32, .6);
	--transitionTime: .4s;
	--transitionTimeLong: .7s;
}

/*Defualt values*/
html {
	position: relative;
	font-family: var(--fontBasic);
	color: var(--colorText);
	font-size: 18px;
	padding: 0;
	margin: 0;
	min-inline-size: fit-content;
	min-block-size: 100vh;
	background: var(--colorWhite);
}

* {
	box-sizing: border-box;
}

::selection {
	color: var(--colorWhite);
	background-color: #526e7d;
}

body {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding: 0;
	margin: 0;
	min-block-size: 100vh;
}

main {
	position: relative;
	inline-size: 100%;
	max-inline-size: 1200px;
	padding: 1rem .5rem 1.5rem .5rem;
	margin-inline: auto;
}

/*Footer*/
footer {
	position: relative;
	font-family: var(--fontHeader);
	font-size: .82rem;
	padding: 1rem;
}

footer p {
	position: relative;
	inline-size: 100%;
	text-align: center;
	margin: 0;
}

/*Headers*/
h1, h2, h3, h4 {
	font-family: var(--fontHeader);
	color: var(--colorSecondary);
	margin: 0;
}

h1 {
	text-align: center;
	grid-column: 1/-1;
	font-size: 3.8rem;
	padding: 0 0 1.2rem 0;
	margin: 1rem auto 2rem auto;
}

header {
	grid-column: 1/-1;
}

header h1 {
	padding: 0;
	margin: 1rem auto 0 auto;
}

header.h1 {
	text-align: center;
	padding: 0 0 2rem 0;
}

.subheader {
	display: block;
	text-align: center;
	font-size: 1.8rem;
	margin-block-end: 2rem;
}

h2 {
    padding: 0 0 var(--spacingLarge) 0;
    font-size: 2rem;
}

h3 {
	font-size: 1.4rem;
}

/*Details*/
details {
	margin-block: .5rem;
}

summary {
	cursor: pointer;
  border-radius: var(--spacingSmall);
  padding: var(--spacingBasic);
  border: 1px var(--colorPrimary) solid;
	transition: .2s ease;
}

details[open] summary {
  color: white;
  background: var(--colorPrimary);
}

/*Other basic elemtents*/
p {
	line-height: 1.35rem;
	margin-block-start: 0;
	margin-block-end: var(--spacingBasic);
}

.noLineSpacing {
	margin-block: 0;
}

.smallLineSpacing {
	margin-block-start: 0;
}

/*Forums*/
form {
	width: 100%;
}

.smallForm {
	max-width: 550px;
	margin: 0 auto;
}

fieldset, .dataSection {
	position: relative;
	border: none;
	padding: var(--spacingLarge);
	margin-block-end: 3rem;
}

.fieldset, .dataSection {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-content: start; 
	align-items: center;
	gap: var(--spacingLarge) var(--spacingBasic);
}

main > .enlargeSection {
	max-width: calc(1325px);
}

.fieldset.columns {
	grid-template-columns: repeat(2, auto 1fr);
}

.fieldset.startBlock {
	align-items: start;
}

legend {
	grid-column: 1/-1;
	font-family: var(--fontHeader);
    font-size: 2rem;
	color: var(--colorSecondary);
	font-weight: 700;
    padding: 0;
	margin: 0;
	order: 1;
}

input, textarea, select {
    font-family: var(--fontBasic);
    font-size: 1rem;
}

input::placeholder, textarea::placeholder {
	color: var(--colorNeutral);
}

.error input:invalid, .error select:invalid, .error textarea:invalid, .error input[type=radio]:invalid::before, .error input[type=checkbox]:invalid::before {
	box-shadow: var(--shadowDown) inset;
    border: 2px var(--colorContrast) solid;
}

.error input:invalid::placeholder, select:invalid {
	color: var(--colorContrast);
}

select:invalid option {
	color: var(--colorNeutral);
}

input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=date], input[type=time], input[type=file], textarea, select {
    color: var(--colorSecondary);
	border: 2px var(--colorNeutral) solid;
	border-radius: var(--spacingSmall);
	padding: var(--spacingSmall) var(--spacingBasic);
	background: none;
	transition: border var(--transitionTime) ease;
}

input[type=text] {
    width: 100%;
}

input[type=text]::placeholder {
    color: var(--colorNeutralGraph);
}

input[type=file] {
	border: none;
	padding: 0 var(--spacingBasic) 0 0;
}

input[type=radio], input[type=checkbox] {
	position: relative;
    accent-color: var(--colorPrimary);
	display: inline-block;
	inline-size: 0;
	block-size: 0;
	margin: 0 1.5rem 0 0rem;
}

input[type=radio]::before, input[type=checkbox]::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 1.3rem;
	inline-size: 1.3rem;
	border: 2px var(--colorNeutral) solid;
	border-radius: 100%;
	transition: var(--transitionTime) ease;
}

input[type=checkbox]::before {
    inset-block-start: -1rem;
	border-radius: var(--spacingSmall);
}

input[type=checkbox]::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    inset-block-start: -0.9rem;
    inset-inline-start: 0.4rem;
    block-size: 0.8rem;
    inline-size: 0.5rem;
    transform: rotate(45deg);
    border-right: 0.25rem var(--colorWhite) solid;
    border-bottom: 0.25rem var(--colorWhite) solid;
}

input[type=radio]:checked::before {
	border: .45rem var(--colorPrimary) solid;
}

input[type=checkbox]:checked::before {
    border: .65rem var(--colorPrimary) solid;
}

input[type=radio]:focus:before, input[type=checkbox]:focus:before  {
	box-shadow: 0 0 0 2px var(--colorPrimary);
}

input[type=checkbox]:focus:before  {
	border-color: var(--colorPrimary);
}

input[type=radio]:checked + label {
	color: var(--colorPrimary);
}

input:-internal-autofill-selected {
	background-color: transparent !important;
	-webkit-box-shadow: 0 0 0 50px #e0ebe6 inset;
	-webkit-text-fill-color: var(--colorSecondary) !important;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23444444%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right var(--spacingBasic) top 50%;
	background-size: .65rem auto;
}

form input[type=text]:focus, form input[type=password]:focus, form input[type=email]:focus, form input[type=number]:focus, form input[type=tel]:focus, form input[type=date]:focus, form input[type=time]:focus, form select:focus, form textarea:focus, .error select:focus {
    outline: none;
	color: var(--colorSecondary);
	border-color: var(--colorPrimary);
}

/* Links */
a {
  transition: color var(--transitionTime);
}

a:link, a:visited {
  color: var(--colorPrimary);
}

a:hover, a:focus, a:active {
  color: var(--colorSecondary);
}

a.primaryColor:link, a.primaryColor:visited{
  color: var(--colorPrimary);
}

a.primaryColor:hover, a.primaryColor:focus, a.primaryColor:active {
  color: var(--colorSecondary);
}

button, .button, input::file-selector-button {
	font-family: var(--fontBasic);
	font-weight: 700;
	color: var(--colorWhite);
	fill: var(--colorWhite);
    text-transform: uppercase;
	font-size: 1rem;
	line-height: 2;
	padding: var(--spacingSmall) var(--spacingExtraLarge);
	border: none;
	border-radius: 30px;
	background: var(--colorPrimary);
	background-image: linear-gradient(to bottom right, #1da89d00, #00588cbb);
	cursor: pointer;
	transition: var(--transitionTime) ease;
	margin: 1.5rem auto 0 auto;
}

button, .button {
	display: block;
}

input::file-selector-button {
	margin: 0 var(--spacingBasic) 0 0;
}

a:link.button, a:visited.button {
	inline-size: fit-content;
	color: var(--colorWhite);
	text-decoration: none;
	margin: var(--spacingBasic) auto;
	padding: 0 var(--spacingLarge);
	font-size: .9rem;
}

button.large, a:link.button.large, a:visited.button.large {
	font-size: 1.3rem;
	padding: var(--spacingSmall) var(--spacingExtraLarge);
}

button.small {
	font-size: 1rem;
}

button:hover, button:focus, button:active, a:hover.button, a:focus.button, a:active.button, input:hover::-webkit-file-upload-button, input:focus::-webkit-file-upload-button  {
	background: var(--colorSecondary);
	background-image: linear-gradient(to bottom right, #1da89d00, #00588cbb);
    outline: none;
}

button:disabled {
	background: var(--colorNeutral);
	border-color: var(--colorNeutral);
	cursor: auto;
	transform: scale(.98);
}

hr {
	block-size: 1px;
	border-block-end: 1px;
	border-block-start: 0;
	border-inline: 0;
	border-style: solid;
	border-color: #93acb9;
	inline-size: 80%;
	margin-block: var(--spacingLarge);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 auto 3.5rem auto;
}

td {
	border-bottom: 1px var(--colorNeutralLight) solid;
	padding: .6rem 1.5rem;
}

th {
	font-family: var(--fontHeader);
	font-weight: normal;
	color: var(--colorWhite);
	background: var(--colorSecondary);
	padding: .4rem .6rem;
	vertical-align: bottom;
}

/*ID*/
#logo {
	block-size: 4.2rem;
	padding: 0.25rem 3.25rem;
}

#pageHeader {
	position: relative;
	z-index: 1;
}

/* Grid Adjustments */
.flex {
    display: flex;
    flex-direction: row;
    gap: var(--spacingBasic);
}

.flex a:link.button, .flex a:visited.button {
    margin: var(--spacingBasic) 0;
}

.gridColumn {
    display: grid;
	grid-template-rows: 1fr;
	grid-gap: .15rem;
}

.gridInlineFull {
    grid-column: 1/-1;
}

.gridInlineEnd {
    grid-column: -2/-1;
}

/* Basic Classes */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

.message, .alert {
	max-inline-size: 1200px;
	font-size: 1.2rem;
	color: var(--colorWhite);
    background: #196ea9;
	border-radius: var(--spacingBasic);
	padding: var(--spacingLarge);
	margin: var(--spacingBasic) auto;
}

.alert {
	background: var(--colorContrast);
}

.centerBlock {
	display: block;
	margin-inline: auto;
}

.center {
	text-align: center;
}

.end {
	text-align: end;
}

.blockStart {
	align-self: start;
}

.start {
	text-align: start;
}

.hidden {
    display: none;
}

.subFormGrouping, .searchForm {
	display: flex;
	margin-block: var(--spacingSmall);
}

.spaceInlineEnd {
  margin-inline-end: var(--spacingLarge);
}

/*Classes Navigation*/
.mainNav {
	position: relative;
    display: flex;
    font-family: var(--fontHeader);
    justify-content: space-between;
    align-items: center;
    margin-inline: auto;
}

.mainNav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 0 1rem;
	margin: 0;
}

.mainNav li {
    display: block;
    padding: 0;
    margin: 0 .5rem;
    border: none;
}

.mainNav .logoLink {
  display: inline;
	block-size: 5rem;
  padding: 0;
}

.mainNav a {
  position: relative;
  display: block;
  text-decoration: none;
	block-size: 4rem;
  padding: 1.5rem var(--spacingBasic);
}

.mainNav a:link, .mainNav a:visited{
  color: var(--colorPrimary);
}

.mainNav a:hover, .mainNav a:focus, .mainNav a:active{
  color: var(--colorDark);
}

.mainNav li > a::after, .current::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: auto;

  inset: 3.25rem -0.5rem;
  block-size: .05rem;
  padding: 0;

  background: transparent;
  transition: var(--transitionTime) ease;
}

.mainNav li > a:hover:after, .mainNav li > a:focus:after {
  background: var(--colorDark);
}

.subNav {
	position: absolute;
	max-block-size: 0;
	inset-block-start: calc(4rem + 3px);
	inset-inline: 0;
	background: var(--colorWhite);
	box-shadow: var(--shadow);
	border: 0px solid transparent;
	border-radius: 0 0 var(--spacingSmall) var(--spacingSmall);
  overflow: hidden;
	transition: .4s ease;
}

.mainNav li:hover .subNav, .mainNav li:focus .subNav {
	max-block-size: 8.5rem;
	border: 1px solid var(--colorPrimary);
}

.subNav ul {
	display: flex;
	flex-flow: column wrap-reverse;
	justify-content: start;
	align-content: start;
	align-items: stretch;
	padding: var(--spacingBasic);
	block-size: 8.5rem;
}

.subNav li {
	border-inline-start: 2px solid var(--colorHighlight);
	padding: 0;
	margin: 0;
}

.subNav a {
	display: flex;
	flex-direction: column;
	align-items: start;
}

.subNav a:link, .subNav a:visited{
	white-space: nowrap;
	block-size: auto;
	padding: 0 var(--spacingLarge);
  background: var(--colorWhite);
	transition: 0s ease;
}

.subNav a:hover, .subNav a:focus {
	color: var(--colorDark);
}

.subNav a:after, .subNav a:before {
	content: '';
	position: relative;
	display: inline-block;
	inset: 0;
	inline-size: 0;
	block-size: .05rem;
	margin-block: var(--spacingSmall);
	background: transparent;
	transition: var(--transitionTime) ease;
	align-self: end;
}

.subNav a:hover:after, .subNav a:hover:before, .subNav a:focus:after, .subNav a:focus:before {
	background: var(--colorDark);
	inline-size: 100%;
}

/*Currency*/
.currencyBlock {
	display: flex;
	position: relative;
}

.currencyBlock input{
	padding-inline-start: calc(.5rem + var(--spacingBasic));
	width: 100%;
}

.currencyBlock span {
	content: '$';
	position: absolute;
	inset-block-start: var(--spacingSmall);
	inset-inline-start: var(--spacingBasic);
}

/* Programs Elements */
.blockFlex {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

main > section, .blockFlex > section {
	position: relative;
	width: 100%;
	border: 1px solid var(--colorNeutral);
	border-radius: var(--spacingBasic);
	padding: var(--spacingExtraLarge);
}

@media only screen and (min-width: 550px) {
    .twoColumns {
        column-count: 2;
    }
}

.boldLabel {
	font-weight: bold;
}

.gridColumn .boldLabel {
	margin-block-end: 0;
}

.italic, em {
	font-style: italic;
	font-family: var(--fontHeader);
}

.noBorder {
    border: none;
}

.inlineEndBar {
	position: absolute;
	inset-block-start: var(--spacingLarge);
	inset-inline-end: var(--spacingBasic);
}

.inlineEndBar svg {
	padding-inline-start: var(--spacingSmall);
	block-size: 1.3em;
	inline-size: calc(1.3rem + var(--spacingSmall));
}

input:disabled, select:disabled, textarea:disabled {
	color: var(--colorNeutral);
	background: var(--colorNeutral);
	opacity: .3;
	box-shadow: none;
}

option:disabled, select:invalid option:disabled {
	color: var(--colorNeutralLight);
	background: var(--colorWhite);
}

label.otherSpecify {
	max-block-size: 1.5rem;
	margin-block-end: var(--spacingLarge);
	transition: all var(--transitionTime) ease;
}

label.otherSpecifyRadio, .otherSpecifySelect {
	max-block-size: 1.5rem;
	transition: all var(--transitionTime) ease;
}

input.otherSpecify {
	margin-block-end: var(--spacingLarge);
	transition: all var(--transitionTime) ease;
}

.disabledLabel {
	color: var(--colorNeutralLight);
	opacity: .75;
}

.otherSpecify:disabled, .otherSpecify.disabled, .otherSpecifyRadio.disabled, .otherSpecifySelect.disabled, .conditionalBlock.disabled {
	max-block-size: 0;
	border-width: 0;
	padding: 0;
	margin-block-end: calc(var(--spacingBasic)*-1);
	overflow: hidden;
}

.conditionalBlock {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spacingLarge) var(--spacingBasic);
    max-block-size: 20rem;
    transition: all var(--transitionTime) ease;
}

.buttonEnd {
	margin: var(--spacingLarge) 0 0 auto;
}

.buttonStart {
	margin: var(--spacingLarge) auto 0 0;
}

.centerInFlex {
    display: flex;
    justify-content: center;
}

.centerInFlex button, .centerInflex .button {
    margin: 1.5rem .5rem 0 .5rem;
} 

.centerInFlex ul {
    margin-block: 0 2.5rem;
}

.statusReview, .statusAccept, .statusDecline {
    display: block;
    color: var(--colorWhite);
    text-align: center;
    border-radius: var(--spacingSmall);
    padding: var(--spacingBasic) var(--spacingLarge);
}

.statusReview {
    background: var(--colorSecondary);
}

.statusAccept {
    background: #13995b;
}

.statusDecline {
    background: var(--colorContrast);
}