/*
    custom.css
    Any site-specific CSS customization should be added to this file.
    This file overrides the defaults in illiad.css, which should not be altered.
*/

:root {
	--su-font: "Libre Franklin", sans-serif;
	--su-link-color: #256070;
	--su-maroon: #8a0000;
	--su-light-tan: #f0eeea;
	--su-dark-tan: #e2ded7;
	--su-text-color: #2e262a;
}

main {
	min-height: 500px;
	color: var(--su-text-color);
}

a#skipLink {
	position: absolute;
	top: -40px;
	left: 0;
	background-color: var(--su-maroon);
	color: #ffffff;
	padding: 8px 16px;
	z-index: 100;
	transition: top 0.3s;

	&:focus {
		top: 0;
	}
}

nav li a {
	font-family: var(--su-font);
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--su-font);
	color: #8a0000;
	padding: 0;

	& .fas, & .far {
		font-size: inherit;
	}
}

nav.universityNav .universityName {
	font-size: 11px;
	padding: 0;
}

nav.universityNav li a {
	font-family: var(--su-font);
	font-weight: 400;
	font-size: 12px;
}

header#globalHeader li a,
footer#globalFooter li a {
	font-family: var(--su-font);
	font-weight: 400;
	font-size: 16px;
}

footer#globalFooter {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#navbarContainer {
	background-color: var(--su-light-tan);

	& nav.main-navbar {
		background-color: transparent;

		& a {
			font-size: 16px;
			text-decoration: none;
		}

		& a.dropdown-item {
			font-size: 16px;
			padding: 0.5rem 1rem;

			& .fas, & .far {
				margin-right: 0.25rem;
			}
		}

		& .dropdown-menu.show {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		}
	}
}

a:not(.btn),
nav.main-navbar .navbar-nav .nav-link,
.navbar-dark .navbar-nav .show > .nav-link {
	color: var(--su-link-color);

	&:hover, &:focus {
		color: var(--su-maroon);
	}
}

a.btn:not(.btn-primary) {
	color: var(--su-link-color);

	&:hover, &:focus {
		text-decoration: none;
	}
}

a.text-primary, a .text-primary,
a.text-danger, a .text-danger,
a.text-warning, a .text-warning {
	color: var(--su-link-color) !important;
}

.dropdown-menu a.dropdown-item:hover {
	text-decoration: none;
	background-color: var(--su-dark-tan);
	color: var(--su-text-color);
}

p {
	padding: 0;
}

.custom-control-input:checked~.custom-control-label::before {
	background-color: var(--su-maroon);
	border-color: var(--su-maroon);
}

.alert {
	border-radius: 0;

	&.alert-secondary {
		background-color: var(--su-light-tan);
		border-color: var(--su-dark-tan);
	}
}

#status .alert.statusNormal {
	display: none !important;
}

h1 {
	font-size: 2.5rem;
	margin-top: 1rem;
	text-align: left;
}

h2.page-header {
	border-bottom: 1px solid var(--su-maroon);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

.tab-pane h3.header-special {
	font-size: 1.5rem;
	margin-top: 0;
}

.nav-tabs .nav-link {
	border-radius: 0;
	margin-right: 1rem;
	color: var(--su-link-color);

	&:not(.active):hover {
		background-color: var(--su-light-tan);
	}

	@media (max-width: 575.98px) {
		& .tabName {
			display: none;
		}
	}
}

#activeRequestsTabContent .tabHeading {
	display: none;

	@media (max-width: 575.98px) {
		display: block;
		font-size: 1.75rem;
		margin-top: 1rem;
	}
}

form section {
	background-color: transparent;
	padding: 0;
}

.btn, .card,
input.form-control,
textarea.form-control,
select.custom-select {
	border-radius: 0;
}

.btn.btn-primary {
	background-color: var(--su-maroon);
	border-color: var(--su-maroon);

	&:hover, &:focus {
		filter: brightness(90%);
		color: #ffffff;
		text-decoration: none;
	}

	&:not(:disabled):not(.disabled):active {
		background-color: var(--su-maroon);
	}

	&.disabled, &:disabled {
		background-color: #eeeeee;
		border-color: #dddddd;
		color: var(--su-text-color) !important;
	}
}

.btn.btn-secondary {
	background-color: var(--su-light-tan);
	border-color: var(--su-dark-tan);
	color: var(--su-text-color);

	&:hover, &:focus {
		filter: brightness(90%);
		text-decoration: none;
	}

	&:not(:disabled):not(.disabled):active {
		background-color: var(--su-dark-tan);
		color: var(--su-text-color);
	}

	&.disabled, &:disabled {
		background-color: #eeeeee;
		color: var(--su-text-color) !important;
	}
}

.show > .btn-secondary.dropdown-toggle {
	background-color: var(--su-dark-tan);
	border-color: var(--su-dark-tan);
	color: var(--su-text-color);
}


p.categoryInfo {
	margin-top: 1rem;
	color: var(--su-text-color)
}

.card {
	margin-bottom: 1rem;
	
	& .card-header {
		display: flex;
		justify-content: space-between;
		border-radius: 0;

		& .requestStatusLabel {
			font-weight: 700;
			font-size: 14px;

			&.badge .fas {
				font-size: inherit;
			}
		}

		@media (max-width: 575.98px) {
			flex-direction: column;

			& .requestStatusLabel {
				margin-top: 0.5rem;
			}
		}
	}

	& .requestTypeIcon .fas {
		font-size: 60px;
		margin: 0.5rem 0;
		color: var(--su-dark-tan);
	}

	& .docType {
		text-transform: uppercase;
		font-weight: 700;
		font-size: 0.8rem;
	}

	& .card-title {
		font-size: 1.25rem;
		padding-top: 0;
		margin-bottom: 0.25rem;
	}

	& .card-footer {
		padding-top: 0;
		padding-bottom: 0;

		& .dateSubmitted {
			margin: 10px 0;

			& p {
				margin: 0;
			}
			
			& .label {
				font-size: 0.75rem;
				text-transform: uppercase;
				font-weight: 700;
			}
		}

		& .dropdown-menu a {
			padding: 0 1rem;

			&.disabled {
				display: none;
			}

			& .fas, & .far {
				margin-right: 0.25rem;
			}
		}
	}
}

form {
 & .formCol {
		display: flex;
		align-items: flex-end;
	}

	& .form-group {
		width: 100%;
	}
} 

.field .field-name {
	font-weight: 700;
}

#requestHistoryTableContainer table {
	& thead {
		background-color: var(--su-maroon);
		color: #ffffff;

		& th {
			padding: 0.5rem;
		}
	}

	& tbody  {
		& tr:nth-child(even) {
			background-color: var(--su-light-tan);
		}

		& tr:nth-child(odd) {
			background-color: var(--su-dark-tan);
		}

		& td {
			padding: 0.25rem 0.5rem;
		}
	}
}