/* ----- PAGE SPECIFIC ----- */
ul {
	text-align: left;
}

input[type=text] {
	background-color: var(--clr-grid-box);
	color: #f59b60;
	font-family: Permanent Marker, serif;
	font-size: 1rem;
	border: none;
	width: fit-content;
}

input[type=text]:focus {
	background-color: var(--clr-quinary-body);
}

#dashboard-header {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--cmbr-curtain-plum) / 0.25);
	border-width: 0.3rem;
	border-style: double;
	border-color: grey;
	border-bottom: none;
	background: rgba(144, 229, 238, 0.1);
}

#dashboard-quick-links {
	display: flex;
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: auto;
	justify-content: center;

	box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--cmbr-curtain-plum) / 0.25);
	border-width: 0.3rem;
	border-style: double;
	border-color: grey;
	background: rgba(144, 229, 238, 0.1);
}

.dashboard-grid {
	display: flex;
	padding: 2rem;
	flex-flow: row wrap;
	align-items: auto;
	/* border: 0.1rem solid var(--clr-tertiary); */
	border-radius: 1rem;
	gap: 1rem;
}

.dashboard-item {
	flex: 1; 
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: baseline;
	text-align: left;
	min-width: 20rem;
	min-height: 20rem;
	padding: 0.5rem;
	/* background: var(--cmbr-curtain-plum); */
	border: 0.2rem solid var(--cmbr-dark-ash);
	box-shadow: 1.5rem 1.75rem 1rem -1rem var(--cmbr-dark-grey);
}

.dashboard-grid > .dashboard-item {
	backdrop-filter: blur(0.2rem) saturate(90%);
    -webkit-backdrop-filter: blur(0.2rem) saturate(90%);
    background-color: rgba(17, 25, 40, 0.75);
	background-image: transparent;
	background-size: cover;
	/* text-shadow: #f59b60; */
    border: 1rem solid transparent;
}

#dashboard-step-pay-plan {
	flex: 2;
}

#dashboard-reeducation-information {
	flex: 2; 
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: baseline;
	min-width: 20rem;
	min-height: 20rem;
	padding: 2rem;
}

#dashboard-pension-calculator {
	/* flex: content; */
	min-width: fit-content;
}

/* ----- EXPENSE MANAGEMENT SPECIFIC ----- */

#p2p {
	background: var(--clr-quaternary);
}

.no-bullet {
	list-style-type: none;
}

.automated-payment {
	text-align: right;
	font-family: 'Courier New', Courier, monospace;
	font-size: smaller;
	opacity: .7;
	color: var(--clr-tertiary);
}

.non-automated-payment {
	text-align: right;
	font-family: 'Courier New', Courier, monospace;
	font-size: smaller;
	opacity: 0.5;
	color: red;
}

.inactive-payment {
	text-align: right;
	color: grey;
	opacity: 0.3;
	user-select: none;
}

.paycard-grid {

	display: grid;
	gap: 1.5rem; /* for vertical and horizontal spacing */
	grid-template-columns: repeat(5, 20%); /* repeat(4, 25%) */


	padding-block: 1rem;
	width: min(90%, 70rem);
	margin-inline: auto;

}

.paycard-item {
	padding: 1rem;
	box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--cmbr-curtain-plum) / 0.25);
	border-color: grey;
	border-style: double;

}

#expense-modal {
	display: none;
}

/* ----- STEP PAY PLAN SPECIFIC ----- */

:where(#salary-table) :where(tr, th, td) {
	font-size: 1rem;
	border: 1px double var(--clr-quinary-body);
	height: 2rem;
}

.salary-highlight {
	color: var(--clr-quaternary);
	background-color: var(--clr-tertiary);
}

#salary-values > li {
	list-style-type: none;
}

#salary-table-corner {
	background: var(--clr-grid-box);
}

/* ----- REEDUCATION SPECIFIC ----- */

#cpa-progress-bar {
	display: block;
	height: 2em;
  	position: relative;
  	background: grey;
	border-radius: 1rem;
	margin-right: 5%;
	margin-left: 5%;
	box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

#cpa-progress-bar > span {
	display: block;
	height: 100%;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	background-color: rgb(134, 227, 159);
	background-image: linear-gradient(
	  center bottom,
	  rgb(108, 222, 138) 37%,
	  rgb(84,240,84) 69%
	);
	box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}

.taking {
	color: var(--clr-tertiary);
	list-style-type: circle;
}

#acc-courses > li:hover {
	background: var(--clr-quaternary);
}

.planned-or-completed {
	color: var(--clr-tertiary);
}

.taken {
	color: var(--clr-secondary);
	list-style-type: "✓ ";
}

.acc-schedule-grid {
	display: grid;
	grid-template-columns: repeat(11, 8%);
}

/* ----- MODAL ----- */

.modal-prompt:hover {
	cursor: pointer;
	color: var(--clr-primary);
	position: inherit;
	text-shadow: -2.5px -1px 0px #ff00ff;
}

.modal {
	display: none; /* To hide by default */
	position: fixed; /* to stay in place */
	z-index: 1; /* To stay on top */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: auto; 
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0,0.4); 
}

.modal-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, 50%);
}

.modal-field {
	background-color: var(--clr-quinary-body);
	margin: 15% auto; /* 15% from the top and centered */
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
}

#modal-text > ul > li {
	list-style-type: none;
}

.modal-line {
	width: 25%;
}

.close-modal {
	border-top: none;
	border-bottom: 1px solid #888;
	border-left: none;
	border-right: 1px solid #888;
	color: #888;
	float: inline-start;
	font-size: 2rem;
	font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
	cursor: pointer;
	color: black;
	text-decoration: none;
}

.cpa-req {
	color: black;
}

.cpa-req-highlight{
	color: red;
}

/* ----- PENSION CALCULATOR ----- */

#subgrid-pension-calculator {
	display: flex;
	flex-direction: row;
	justify-content: center;
}


#pension-table {
	table-layout: unset;
	font-size: 1rem;
	width: 90%;
	margin: 1rem auto;
	border-collapse: collapse;
}

#pension-table > tr > th {
	width: 0.1rem;
	border-style: double;
	border-color: var(--clr-secondary);
}

#pension-table > tr > td {
	padding: 0.2rem;
	border-top: none;
	border-bottom: double;
	border-left: none;
	border-right: double;
}

.pension-reduction-highlight {
	background-color: var(--clr-quaternary);
}

/* ----- MEDIA QUERIES ---- */

@media screen and (max-width: 750px) {

body {
	background-image: none; 
}

#subgrid-pension-calculator {
	/* display: flex; */
	flex-direction: column;
	justify-content: auto;
}


#pension-table {
	font-size: 0.7rem;
}

#pension-table > tr > td {
	padding: 0.1rem;
	border-top: none;
	border-bottom: double;
	border-left: none;
	border-right: double;
}


.dashboard-item {
	padding: none;
}


}

/* ----- ANIMATION DATA ----- */

@keyframes text-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fade-in-data {
	animation-name: text-fade-in;
	animation-duration: 1s;
	animation-iteration-count: 1;
}