/*
	All css is designed for mobile first.
	Media queries are for styling on larger screens.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: system-ui, sans-serif;
	/* font-family: sans-serif; */
}

:root {
	--color-page-background: #f7f7f7;

	--color-dark: #000137;
	--color-medium-dark: #02055a;
	--color-medium-light: #021988;
	--color-light: #253da1;
	--color-extra-light: hsla(228, 63%, 70%, 1);

	--color-inactive-user: #e30e02;

	--quarter-rem: .25rem;
	--half-rem: .5rem;
	--three-quarter-rem: .75rem;
	--full-rem: 1rem;
	--full-quarter-rem: 1.25rem;
	--full-half-rem: 1.5rem;

	--color-navbar-background: #095d68;
	--color-navbar-background-medium: #0d8696;
	--color-navbar-background-light: #11b0c5;
	--navbar-height: 3rem;
	--navbar-link-color: #a0a0a0;
	--navbar-link-hover-color: #f0f0f0;
	--navbar-corner-radius: .75rem;
	--navbar-border-size: 2px;

	--color-alpha: .5;
	--transition-speed: 300ms;
	--loading-speed-enter: 300ms;

	--first-half-logo-centering: calc(100vw / 2) - calc(var(--half-rem) + var(--full-rem) + 1px);
	--second-half-logo-centering: calc(calc(var(--navbar-height) * .625) / 2);
	--mobile-logo-ceter-right-margins: calc(var(--first-half-logo-centering) - var(--second-half-logo-centering));

	/**** :root CSS from accordian styling codepen ****/
	--primary: #227093;
	--secondary: #ff5252;
	--background: #eee;
	--highlight: #ffda79;
}

.user-inactive {
	color: var(--color-inactive-user);
}

body {
	background-color: var(--color-page-background);
	font-size: var(--three-quarter-rem);
	/*font-family: system-ui, sans-serif;*/
	/* font-family: sans-serif; */
}

#app {
	text-align: center;
}
.app-feedback {
	font-weight: 600;
	font-size: var(--full-rem);
}

ul {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: #000000;
}

button {
	padding-inline: var(--half-rem);
}

select,
input {
	padding-inline: var(--quarter-rem);
}

.grid-container {
	display: grid;
	gap: var(--half-rem);
	padding: var(--quarter-rem);
	border-radius: calc(var( --navbar-corner-radius) / 4);
	background-color: #7a7a7a;
}

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

.card {
	border: 1px solid var(--color-light);
	border-radius: var(--half-rem);
	background-color: var(--color-page-background);
	padding-inline: var(--full-rem);
	padding-block: var(--half-rem);
	margin-block-end: var(--half-rem);
	width: 75%;
	margin-inline: auto;
}

.card-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
}
.card-titles {
	font-size: var(--three-quarter-rem);
	font-weight: 300;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-bottom: var(--quarter-rem);
}
.card-data {
	font-size: var(--three-quarter-rem);
	font-weight: 600;
}

.search-results {
	margin-block-start: var(--half-rem);
	padding-inline: var(--full-rem);
	text-align: center;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: calc(var(--full-rem) * 2.5);
	height: var(--full-rem);
}

/* Hide default HTML checkbox */
.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-medium-dark);
	-webkit-transition: .4s;
	transition: .4s;
}
.slider:before {
	position: absolute;
	content: "";
	height: var(--full-rem);
	width: var(--full-rem);
	left: 0px;
	bottom: 0px;
	background-color: white;
	opacity: .875;
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .slider {
	background-color: var(--color-extra-light);
}
input:focus + .slider {
	box-shadow: 0 0 3px var(--color-dark);
}
input:checked + .slider:before {
	transform: translateX(calc( var(--full-rem) * 1.5 ));
}

/* Rounded sliders */
.slider.round {
	border-radius: var(--full-rem);
	outline: 2px solid var(--color-dark);
}
.slider.round:before {
	border-radius: var(--full-rem);
}

.user-inactive {
	font-weight: 600;
	color: red;
}

.invisible {
	visibility: hidden;
}
.hide {
	display: none;
}

.feedback-red {
	color: #ff0000;
	font-weight: 600;
}
.feedback-green {
	color: #078a07;
	font-weight: 600;
}
.feedback-blue {
	color: #3e7fe7;
	font-weight: 600;
}

table,
thead, tbody,
th, td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: var(--quarter-rem);
}
table {
	font-size: var(--three-quarter-rem);
	width: 100%;
	table-layout: fixed;
}
thead {
	background-color: #dcdcdc;
	user-select: none;
}
.indent-table-data {
	padding-inline-start: var(--full-half-rem);
}

tbody > .lpn-parent {
	background-color: var(--color-tr-background);
	font-weight: 600;
}
/* tbody > tr:hover {
	background-color: var(--color-tr-background-hover);
	color: #ffffff;
	cursor: pointer;
} */
tbody > tr:not(.no-hover):hover {
	background-color: var(--color-tr-background-hover);
	color: #ffffff;
	cursor: pointer;
}
tbody > .lpn-parent2 {
	background-color: var(--color-tr-background-rep);
}

.lpn-gap {
	background-color: var(--color-tr-gap-background);
}
.lpn-gap > td {
	height: var(--full-rem);
	padding: 0;
}

.icon-base {
	cursor: pointer;
	font-size: calc(var(--full-rem) * 1.375);
	font-weight: 600;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	/* width: 90%;
	margin-inline: auto; */
	margin-block-end: var(--quarter-rem);
	min-height: 35px;
}
.page-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: var(--color-nav-button) solid 2px;
	padding-block-start: var(--quarter-rem);
}
.page-start-message {
	font-weight: 600;
}

.base-flex {
	display: inline-flex;
	flex-direction: row;
}
.flex-gap-lg {
	gap: var(--full-half-rem);
}
.flex-gap-md {
	gap: var(--full-rem);
}
.flex-gap-sm {
	gap: var(--half-rem);
}

/****************
Modal base styling
****************/
.g_dialog {
	margin-inline: auto;
	margin-block-start: var(--full-rem);
	padding: var(--half-rem) var(--full-rem);
	border: 1px solid var(--navbar-link-color);
	border-radius: calc(var(--navbar-corner-radius) / 2);
	width: 90vw;
}
dialog::backdrop {
	backdrop-filter: blur(4px);
	background-color: rgba(0, 0, 0, .6);
}

/****************
Tablet/Desktop Menu
****************/
@media all and (min-width: 992px) {

}