/* ======================================================
   1. BASE STYLES & RESETS
   ====================================================== */
html, body {
	height: 100%;
	margin: 0;
	font-family: "Work Sans", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

hr {
	width: 100%;
	height: 1px;
	background-color: #eeeeee;
	border: 0;
}

	hr.eightypercent {
		width: 80%;
		height: 1px;
		background-color: #eeeeee;
		border: 0;
	}

/* ======================================================
   2. LAYOUT
   ====================================================== */
.page-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.main-container {
	border: 1px solid #A9A9A9;
	background-color: #fff;
	flex: 1 0 auto;
	padding: 15px;
}

footer {
	flex-shrink: 0;
}

.sectionheader {
	font-weight: bold;
	font-size: 18px;
	padding: 10px;
}

.topround {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.bottomround {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

/* ======================================================
   3. TYPOGRAPHY
   ====================================================== */
h1 {
	color: #007bff;
	font-weight: 500;
	font-size: 62px;
}

h2 {
	color: #007bff;
	font-weight: 400;
	font-size: 36px;
	margin-top: 20px;
}

h3 {
	color: #000;
	font-weight: 500;
	font-size: 24px;
	margin-bottom: 8px;
}

h4 {
	color: #007bff;
	font-weight: 400;
	font-size: 20px;
}

.bold {
	font-weight: bold;
}

.bold-red {
	font-weight: bold;
	color: red;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.spacer {
	padding: 10px;
}

/*override the button class in CSS*/
.btn {
	font-weight: 600;
	transition: all 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
	filter: brightness(90%);
}
/* ======================================================
   4. HELPERS & UTILITIES
   ====================================================== */
/* Borders */
.border-top {
	border-top: 1px solid #e5e5e5;
}

.border-bottom {
	border-bottom: 1px solid #e5e5e5;
}

.border-gray {
	border: thin solid #DCDCDC;
}

/* Shadows */
.box-shadow {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* ======================================================
   5. BUTTONS
   ====================================================== */
.button {
	font-size: 16px;
	padding: 6px 12px;
	border: 1px solid #00B4EF;
	background-color: #00B4EF;
	color: #000;
	font-weight: bold;
	border-radius: 5px;
}

/* Statement page button alignment */
.btn-equal {
	white-space: nowrap;
	min-width: 220px;
	max-width: 220px;
	text-align: center;
}

@media (max-width: 767.98px) {
	.btn-equal {
		display: inline-block;
		width: 220px;
		align-self: center;
	}
}

@media (min-width: 768px) {
	.btn-equal {
		flex: 0 0 auto;
	}
}

/* ======================================================
   6. FORMS & VALIDATION
   ====================================================== */
.input-validation-error {
	border-color: red;
	background-color: #fee;
}

input.input-validation-error {
	border: 1px solid #e80c4d;
}

.field-validation-error {
	color: #e80c4d;
	font-weight: bold;
}

.validation-summary-errors {
	color: #e80c4d;
	font-weight: bold;
	font-size: 1.1em;
}

/* ======================================================
   7. CARDS
   ====================================================== */
.card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid #c8ced3;
	border-radius: 0.25rem;
	margin-bottom: 1.5rem;
}

.card-header {
	padding: .75rem 1.25rem;
	margin-bottom: 0;
	background-color: #f0f3f5;
	border-bottom: 1px solid #c8ced3;
}

.card-body {
	flex: 1 1 auto;
	padding: 1.25rem;
}

.desc-row {
	background-color: #f3fbfc !important;
	border: 1px solid #d8f0f3 !important;
	border-radius: 0.25rem !important;
	color: #0c5460 !important;
	padding: 0.5rem !important;
	padding-left: 3rem !important;
}

/* ======================================================
   8. CUSTOM INPUTS (RADIO, CHECKBOX, DROPDOWN)
   ====================================================== */
/* Radio */
.large-radio {
	width: 1.4em;
	height: 1.4em;
	border: 1px solid #555;
	appearance: none;
	border-radius: 50%;
	background-color: #fff;
	position: relative;
	outline: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

	.large-radio:checked::before {
		content: "";
		position: absolute;
		top: 2px;
		left: 2px;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		border: 4px solid #0d6efd;
		border-radius: 50%;
		background-color: #fff;
	}

	.large-radio:disabled {
		background-color: #f0f0f0;
		border-color: #eeeeee;
		cursor: not-allowed;
		opacity: 0.7;
	}

		.large-radio:disabled:checked::before {
			border-color: #999;
			background-color: #eeeeee;
		}

/* Checkbox */
.large-checkbox {
	width: 1.4em;
	height: 1.4em;
	border: 1px solid #555;
	appearance: none;
	background-color: #fff;
	position: relative;
	outline: none;
	cursor: pointer;
}

	.large-checkbox:checked::before,
	.large-checkbox:checked::after {
		content: "";
		position: absolute;
		top: 3px;
		left: 3px;
		width: 0.6em;
		height: 2px;
		background-color: #0d6efd;
	}

	.large-checkbox:checked::before {
		transform: rotate(45deg);
	}

	.large-checkbox:checked::after {
		transform: rotate(-45deg);
	}

/* Dropdown */
.large-dropdown {
	width: auto;
	padding: 0.3em 0.8em;
	border: 1px solid #555;
	border-radius: 6px;
	background-color: #fff;
	color: #000;
	appearance: none;
	cursor: pointer;
	font-size: 1em;
	outline: none;
	background-image: url("data:image/svg+xml;utf8,<svg fill='%23555' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	background-size: 0.8em;
	padding-right: 2em;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

	.large-dropdown:disabled {
		background-color: #f0f0f0;
		border-color: #eeeeee;
		color: #666;
		cursor: not-allowed;
		background-image: url("data:image/svg+xml;utf8,<svg fill='%23999' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	}

/* ======================================================
   9. TABLES
   ====================================================== */
#resp-table {
	width: 100%;
	display: table;
}

#resp-table-header {
	display: table-header-group;
	background-color: #eeeeee;
	font-weight: bold;
}

#resp-table-body {
	display: table-row-group;
}

.table-header-cell,
.table-header-cell-print {
	display: table-cell;
	padding: 5px;
	text-align: justify;
	border-bottom: 1px solid black;
}

.table-header-cell-print {
	background-color: #eeeeee;
	color: #000;
}

.resp-table-row {
	display: table-row;
}

.table-body-cell {
	display: table-cell;
	vertical-align: top;
	padding: 0 5px;
}

table.minimalistBlack {
	border: 1px solid #000;
	width: 80%;
	border-collapse: collapse;
	text-align: left;
}

	table.minimalistBlack td,
	table.minimalistBlack th {
		border: 1px solid #000;
		padding: 7px 10px;
	}

	table.minimalistBlack tbody td {
		font-size: 14px;
		color: #000;
	}

	table.minimalistBlack thead th {
		font-size: 16px;
		font-weight: bold;
		background-color: #00B4EF;
		color: #000;
		text-align: left;
		border-left: none;
	}

	table.minimalistBlack tfoot {
		font-size: 14px;
		font-weight: bold;
		color: #000;
		border-top: 3px solid #000;
	}

/* ======================================================
   10. HEADER / FOOTER WRAPPER
   ====================================================== */
.header-footer-wrapper {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.side-color {
	flex: 1;
}

.center-content {
	flex: 0 1 auto;
	text-align: center;
}

	.center-content img {
		width: 100%;
		max-width: 960px;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.center-content.container {
		padding-left: 0;
		padding-right: 0;
	}

/* ======================================================
   11. RESPONSIVE ADJUSTMENTS
   ====================================================== */
@media (min-width:1200px) {
	html {
		font-size: 16px;
	}

	.container.cntnr-lg {
		max-width: 960px !important;
	}
}

@media (min-width:768px) {
	.main-header .navbar-nav .nav-link {
		font-size: 1.02rem;
	}
}

@media (min-width:576px) {
	.main-header .navbar-nav .nav-link {
		font-size: 0.96rem;
	}
}

@media (max-width:390px) {
	.main-header .navbar-nav .nav-link {
		font-size: 0.78rem;
	}
}

@media (max-width:768px) {
	h2.text-primary {
		font-size: 1.8rem;
	}
}

/* ======================================================
   12. TIME LABEL BADGES
   ====================================================== */
.time-label {
	font-size: 0.75rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	font-weight: 600;
	display: inline-block;
	color: #fff;
	text-align: center;
	line-height: 1;
}

.time-today {
	background-color: #28a745;
}

.time-yesterday {
	background-color: #fd7e14;
}

.time-week {
	background-color: #17a2b8;
}

.time-month {
	background-color: #6f42c1;
}

.time-old {
	background-color: #6c757d;
}

/* ======================================================
   13. PROCESSING OVERLAY
   ====================================================== */

#processingOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.55);
	z-index: 9999;
	display: flex; /* FLEX ENABLED */
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: white;
	font-size: 20px;
}

.spinner {
	width: 60px;
	height: 60px;
	border: 6px solid #ffffff;
	border-top: 6px solid transparent;
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
	margin-bottom: 15px;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}