/* ===== VARIABLES ===== */
:root {
	--primary-font: 'Gabarito';
	--hubspot-primary-color: #ff7a59;
	--light: #93c5fd;
	--light-grey: #e0e7ff;
	--loader-color: var(--primary);
	--negative-red: #d31123;
	--placefolder-text-color: #4b5563;
	--positive-green: #46a90f;
	--primary-bg-color: #f8fafc;
	--primary-body-bg-color: #ebebeb;
	--primary: #0f3460;
	--primary-hover: #092444;
	--primary-active: #081e3a;
	--primary-text-color: #040019;
	--primary-white: #ffffff;
	--secondary-bg-color: #0f1b2e;
	--secondary: #3b82f6;
	--secondary-text-color: #334155;
	--secondary-white: #f0f4f8;
	--tertiary: #0f172a;
	--alert-border-radius: 0.5rem;
	--container-border-radius: 1rem;
	--element-border-radius: 0.375rem;
	--lg-container-border-radius: 1.25rem;
	--lg-element-border-radius: 0.75rem;
	--md-element-border-radius: 0.5rem;
	--primary-box-shadow: rgba(0, 0, 0, 0.125) 0px 2px 8px 0px;
	--secondary-box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 16px 0px;
}

/* ===== SCROLLBAR STYLING ===== */
* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	height: 0.5rem;
	width: 0.5rem;
}

::-webkit-scrollbar-thumb {
	background-color: var(--primary);
	border-radius: 3rem;
}

::-webkit-scrollbar-track {
	background-color: transparent;
	border-radius: 3rem;
}

embed::-webkit-scrollbar,
pre::-webkit-scrollbar,
input::-webkit-scrollbar,
textarea::-webkit-scrollbar {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 2rem;
}

embed::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
input::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 2rem;
}

embed::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
input::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 2rem;
}

/* ===== PLACEHOLDER & INPUT STYLING ===== */
::placeholder {
	font-size: 0.875rem;
	font-weight: 600 !important;
	color: var(--placefolder-text-color);
}

::-webkit-input-placeholder {
	font-size: 0.875rem;
	font-weight: 600 !important;
	color: var(--placefolder-text-color);
}

::-moz-placeholder {
	font-size: 0.875rem;
	font-weight: 600 !important;
	color: var(--placefolder-text-color);
}

::-ms-input-placeholder {
	font-size: 0.875rem;
	font-weight: 600 !important;
	color: var(--placefolder-text-color);
}

/* ===== BODY & MAIN LAYOUT ===== */
body {
	background: var(--primary-body-bg-color);
	color: var(--primary-text-color);
	font-family: var(--primary-font), 'Calibri', 'Arial', 'Helvetica', 'sans-serif';
}

main {
	padding: 1.125rem 0.375rem;
}

/* ===== PRELOADER ===== */
.preloader {
	align-items: center;
	background-color: var(--primary-white);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0px;
	opacity: 1;
	position: fixed;
	top: 0px;
	transition:
		opacity 0.5s ease-in-out,
		z-index 0.5s ease-in-out;
	width: 100%;
	z-index: 9999;
}

.preloader.hide {
	opacity: 0;
	z-index: -1;
}

body.preloading {
	overflow: hidden;
}

/* ===== LOGO ===== */
.logo {
	background-color: var(--primary-white);
	border-radius: var(--md-element-border-radius);
	max-width: 3rem;
	padding: 0.25rem;
	width: 100%;
}

.logo-filter-white {
	filter: sepia(25%) saturate(100%) hue-rotate(101deg) brightness(105%) contrast(115%);
}

/* ===== NAVBAR & NAVIGATION ===== */
.navbar {
	padding: 0.5rem 0.375rem;
}

.navbar,
footer {
	background: var(--primary);
	background: -webkit-linear-gradient(to left, var(--primary-hover), var(--primary));
	background: linear-gradient(to left, var(--primary-hover), var(--primary));
}

.navbar-brand .app-title {
	line-height: normal;
	margin-left: 0.5rem !important;
	color: var(--primary-white);
}

.navbar-light .navbar-toggler {
	border-color: rgba(0, 0, 0, 0.25);
}

.navbar-toggler {
	padding: 0.25rem 0.5rem !important;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.125rem !important;
}

.navbar-nav li.nav-item {
	border-radius: var(--element-border-radius) !important;
}

.navbar-nav .nav-link {
	padding: 0.5rem 0.875rem !important;
}

.navbar-nav li.nav-item > a.nav-link {
	border-radius: var(--md-element-border-radius);
	color: var(--primary-white);
	margin-left: 0.5rem !important;
	transition: 0.5s all ease;
}

.navbar-nav li.nav-item > a.nav-link i {
	line-height: unset;
}

.navbar-nav li.nav-item:first-child > a.nav-link {
	margin-left: 0 !important;
}

.navbar-nav li.nav-item > a.nav-link:hover,
.navbar-nav li.nav-item > a.nav-link.active {
	background-color: var(--primary-white) !important;
	color: var(--primary) !important;
	transition: 0.5s all ease !important;
}

.navbar-nav li.nav-item:last-child > a.nav-link:hover {
	background-color: crimson !important;
	color: var(--primary-white) !important;
	transition: 0.5s all ease;
}

.dropdown-menu {
	padding: 0.375rem 0;
}

.dropdown-menu .dropdown-item {
	-moz-transition: 0.3s all ease-in-out;
	font-weight: 500;
	line-height: normal;
	padding: 0.375rem 0.75rem;
	transition: 0.3s all ease-in-out;
}

.dropdown-item:hover {
	background-color: var(--light-grey);
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--primary);
}

.dropdown-item.active.disabled {
	color: var(--bs-gray-500);
}

/* ===== ACCORDION ===== */
.accordion {
	border-radius: var(--md-element-border-radius);
	border: 1px solid var(--bs-border-color);
	overflow: hidden;
}

.accordion-item {
	border: none;
	border-bottom: 1px solid var(--bs-border-color);
	border-radius: 0;
}

.accordion-item:last-of-type {
	border-bottom: none;
}

.accordion-item:first-of-type .accordion-button {
	border-top-left-radius: var(--md-element-border-radius);
	border-top-right-radius: var(--md-element-border-radius);
}

.accordion-item:last-of-type .accordion-button.collapsed {
	border-bottom-left-radius: var(--md-element-border-radius);
	border-bottom-right-radius: var(--md-element-border-radius);
}

.accordion-button {
	font-weight: 500;
}

/* ===== FORM ELEMENTS ===== */
.form-select,
.form-control {
	border-radius: var(--md-element-border-radius);
	border-width: 0.125rem;
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
	transition: 0.5s all ease;
}

.form-control.form-control-lg {
	padding: 0.5rem 1rem;
}

.form-select {
	padding-right: 2.25rem;
}

.btn,
label,
footer {
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
}

.form-select,
.form-control,
option {
	font-weight: 500;
}

.form-label {
	font-size: 0.875rem;
	font-size: clamp(0.875rem, 0.875rem + 0.125vw, 1rem);
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.form-control:focus,
.form-control:hover,
.form-select:focus,
.form-select:hover {
	transition: 0.5s all ease !important;
}

.form-control.is-valid:focus,
.form-control:valid:focus,
.form-select.is-valid:focus,
.form-select:valid:focus,
.form-control.is-invalid:focus,
.form-control:invalid:focus,
.form-select.is-invalid:focus,
.form-select:invalid:focus {
	box-shadow: unset !important;
}

.form-control:focus:not(.is-valid, .is-invalid),
.form-control:hover:not(.is-valid, .is-invalid),
.form-select:focus:not(.is-valid, .is-invalid),
.form-select:hover:not(.is-valid, .is-invalid) {
	border-color: var(--primary);
}

.form-check-input:checked {
	background-color: var(--primary);
	border-color: var(--primary);
}

/* ===== INPUT GROUP ===== */
.input-group .input-group-text {
	border-right-width: 1px;
	border-width: 0.125rem;
	border-right: 0;
}

.input-group :is(.form-control, .form-select) {
	border-bottom-right-radius: var(--md-element-border-radius) !important;
	border-top-right-radius: var(--md-element-border-radius) !important;
}

textarea {
	resize: none;
	overflow-y: auto;
	cursor: text;
}

/* ===== BUTTONS ===== */
.btn {
	border-radius: var(--md-element-border-radius);
	font-weight: 700;
	line-height: normal;
	padding: 0.5rem 1rem;
}

.btn-primary {
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-bg: var(--primary-hover);
	--bs-btn-hover-border-color: var(--primary-hover);
	--bs-btn-active-bg: var(--primary-active);
	--bs-btn-active-border-color: var(--primary-active);
	--bs-btn-disabled-bg: var(--primary);
	--bs-btn-disabled-border-color: var(--primary);
}

.btn-link {
	--bs-btn-color: var(--primary);
	--bs-btn-hover-color: var(--primary-hover);
	--bs-btn-active-color: var(--primary-active);
}

#btn-back-to-top {
	bottom: 8rem;
	box-shadow:
		rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
		rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
		rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
	display: none;
	font-size: 20px;
	line-height: unset !important;
	padding: 5px 10px !important;
	position: fixed;
	right: 1rem;
	z-index: 500;
}

.btn:not(#btn-back-to-top) {
	transition: 0.5s all ease !important;
}

.btn:focus-visible,
.page-link:focus {
	box-shadow: unset;
}

/* ===== ALERTS ===== */
.alert {
	border-radius: var(--md-element-border-radius);
	border-width: 0.125rem !important;
	font-weight: bold;
	line-height: normal;
	margin: 0;
	padding: 0.875rem;
	transition: 0.5s all ease;
}

/* ===== CODE BLOCKS ===== */
pre {
	font-family: 'Fira Code', 'Consolas', monospace;
	font-size: 0.75rem;
	font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
	font-weight: 600;
	line-height: normal;
	margin: 0;
	max-height: 36rem;
	overflow: auto;
	padding: 0 0.25rem 0.25rem 0;
}

table {
	font-size: 0.875rem !important;
	margin: 0 !important;
}

table,
table > *,
table > *:hover {
	transition: 0.5s all ease;
}

tr,
td,
td {
	transition: 0.3s all ease-in-out;
}

tr {
	animation: fadeInFromBottom 0.5s ease-in-out !important;
}

th {
	padding: 0.375rem;
	text-transform: uppercase;
}

td {
	font-weight: 500;
	line-height: normal;
	padding: 0.25rem !important;
}

/* ===== DROPDOWNS ===== */
ul.dropdown-menu {
	background-color: var(--primary-white);
	border-radius: var(--md-element-border-radius);
	max-height: 18rem;
	overflow-y: auto;
}

ul.dropdown-menu::-webkit-scrollbar,
ul.dropdown-menu::-webkit-scrollbar-thumb,
ul.dropdown-menu::-webkit-scrollbar-track {
	height: 0.375rem;
	width: 0.375rem;
}

ul.dropdown-menu::-webkit-scrollbar-track {
	background-color: var(--primary-white);
}

/* ===== PAGINATION ===== */
ul.pagination {
	gap: 0.5rem;
	margin: 0 !important;
	flex-wrap: wrap;
}

.page-link {
	border-radius: var(--md-element-border-radius) !important;
	border-width: 0.125rem;
	color: var(--primary);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: normal;
	margin: 0 !important;
	padding: 0.5rem 0.875rem !important;
	transition: 0.5s all ease;
}

.page-link:focus {
	outline: none;
	background-color: transparent !important;
	border-color: var(--primary);
	transition: 0.5s all ease;
}

.page-link:hover {
	z-index: 2 !important;
	color: var(--primary-white) !important;
	background-color: var(--primary-hover) !important;
	border-color: var(--primary-hover) !important;
	transition: 0.5s all ease;
}

.page-link.active,
.page-item.active .page-link,
.page-item.active .page-link:hover {
	background-color: var(--primary-active) !important;
	border-color: var(--primary-active) !important;
}

/* ===== FOOTER ===== */
footer {
	align-items: center;
	color: var(--primary-white);
	display: flex;
	justify-content: center;
	padding: 0.5rem 0.25rem;
}

.footer-info,
.footer-copyright {
	padding: 0 0.375rem;
}

.footer-info {
	border-right: 2px solid var(--primary-white);
}

/* ===== MEDIA QUERIES ===== */
@media screen and (max-width: 996px) {
	.navbar-nav .nav-link {
		padding: 0.5rem 0.75rem !important;
	}

	.navbar-nav li.nav-item:first-of-type > a.nav-link {
		margin-left: 0 !important;
		margin-top: 0.5rem !important;
	}

	.navbar-nav li.nav-item > a.nav-link {
		margin-left: 0 !important;
		margin-top: 0.25rem !important;
	}
}

@media screen and (max-width: 767px) {
	table:not(.dataTable) {
		border: 0 !important;
		margin: 0 !important;
	}

	table:not(.dataTable) thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	table:not(.dataTable) tr {
		border: 0;
		display: block;
		margin-bottom: 1.25rem;
	}

	table:not(.dataTable) tr:last-of-type {
		margin-bottom: 0;
	}

	table:not(.dataTable) td {
		align-items: center;
		border: 1px solid #ddd !important;
		column-gap: 0.875rem;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		line-height: normal;
		text-align: right;
		width: 100%;
		word-break: break-all;
	}

	table:not(.dataTable) td:first-child {
		border-top: 0;
		display: none;
	}

	table:not(.dataTable) td:last-child {
		border-bottom: 0;
	}

	table:not(.dataTable) td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
		word-break: keep-all !important;
	}

	table:not(.dataTable) tbody.table-group-divider {
		border-top: 0 !important;
	}
}

@media screen and (max-width: 480px) {
	footer {
		flex-direction: column;
		gap: 0.25rem;
	}

	.footer-info,
	.footer-copyright {
		border: none;
		padding: unset;
	}
}

/* ===== ACCESSIBILITY STYLES ===== */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}