:root
{
		/*Light and red*/
		--text-color: rgb(53, 53, 53);
		--light-text-color: rgb(255, 255, 255);
		--accent-color: rgb(194, 72, 72);
		--highlight-color: rgb(255, 218, 218);
		--content-background-color: rgb(255, 255, 255);
		--background-color: rgb(250, 250, 250);
		--light-border-color: rgb(200, 200, 200);
		
		--primary-color-1: #760909;
		--primary-color-2: #A12727;
		--primary-color-3: #C24848;
		--primary-color-4: #EA7B7B;
		--primary-color-5: #FFB0B0;
		
		--secondary-color-1: #165D5D;
		--secondary-color-2: #2B7474;
		--secondary-color-3: #4A8C8C;
		--secondary-color-4: #75ACAC;
		--secondary-color-5: #AED3D3;
		
		--tertiary-color-1: #4C6E08;
		--tertiary-color-2: #729625;
		--tertiary-color-3: #8FB543;
		--tertiary-color-4: #B8DA73;
		--tertiary-color-5: #D9F2A7;
		
		--attention-color-1: #a19b27;
		--attention-color-2: #c2bc48;
		--attention-color-3: #ebe57c;
		--attention-color-4: #fffbb0;

		--positive-color-1: #236e30;
		--positive-color-2: #42a152;
		--positive-color-3: #6bc279;
		--positive-color-4: #a4ebb0;
		
		--navbar-width: 16em;
		--navbar-color: var(--content-background-color);
		--standard-border-radius: 1em;
		--button-height: 2.5em;
		--employee-view-height: 35rem;
		--tooltip-background-color: rgb(123, 123, 123, 0.5);
		--tooltip-color: rgb(255, 255, 255, 1);
		--tooltip-border-color: rgb(123, 123, 123, 0.5);
		--page-navigation-height: 7rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: rgb(255, 255, 255);
		--light-text-color: rgb(53, 53, 53);
		--accent-color: rgb(194, 72, 72);
		--highlight-color: rgb(149, 87, 87);
		--content-background-color: rgb(45, 45, 45);
		--background-color: rgb(27, 27, 27);
		--light-border-color: rgb(200, 200, 200);

		--primary-color-1: #760909;
		--primary-color-2: #A12727;
		--primary-color-3: #C24848;
		--primary-color-4: #EA7B7B;
		--primary-color-5: #FFB0B0;
		
		--secondary-color-1: #054747;
		--secondary-color-2: #186161;
		--secondary-color-3: #2B7474;
		--secondary-color-4: #4A8C8C;
		--secondary-color-5: #79AFAF;
		
		--tertiary-color-1: #763A09;
		--tertiary-color-2: #A15F27;
		--tertiary-color-3: #C27F48;
		--tertiary-color-4: #EAAD7B;
		--tertiary-color-5: #FFD4B0;
		
		--quaternary-color-1: #1D7E1D;
		--quaternary-color-2: #3A9B3A;
		--quaternary-color-3: #62BB62;
		--quaternary-color-4: #91D691;
		--quaternary-color-5: #BFE9BF;

		color-scheme: dark;
	}
}

html
{
    background-color: Gray;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
	overflow: hidden;
}

*, *:before, *:after
{
    box-sizing: inherit;
}

body
{
    height: 100%;
	background: var(--content-background-color);
	color: var(--text-color);
    width: 100%;
	min-width: 58em;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

a
{
	text-decoration: none;
	color: var(--accent-color);
}

.error, .required
{
	color: red;
}

.large-text
{
	font-size: 1.25em;
	display: inline;
}

#offline-bar
{
	display: none;
	background-color: var(--secondary-color-5);
	color:  black;
	width: 100%;
	height: 3em;
	line-height: 3em;
	text-align: center;
}

#offline-bar.on-to-off
{
	animation-name: offline-transition;
	animation-duration: 0.5s;
}

#offline-bar.off-to-on
{
	animation-name: online-transition;
	animation-duration: 0.5s;
}

@keyframes offline-transition
{
	from {top: -3em;}
	to {top: 0em;}
}

@keyframes online-transition
{
	from {top: 0em;}
	to {top: -3em;}
}

button.icon-button
{
	background-color: transparent;
	border-width: 0;
	text-align: center;
}

button.link-button
{
	background-color: transparent;
	color: var(--accent-color);
	border: none;
	font-size: inherit;
	cursor: pointer;
}

.no-padding
{
	padding: 0px;
}

.positive-background
{
	background-color: rgb(174, 231, 174);
}

.negative-background
{
	background-color: rgb(255, 205, 205);
}

.attention-background
{
	background-color: rgb(254, 220, 193);
}

@media (prefers-color-scheme: dark) {
	.positive-background
	{
		background-color: rgb(70, 152, 70);
	}

	.negative-background
	{
		background-color: rgb(155, 68, 68);
	}
	.attention-background
	{
		background-color: rgb(188, 138, 97);
	}
}

.centered-text
{
	text-align: center;
}

.page-navigation
{
	min-height: var(--page-navigation-height);
}

.page-navigation > h1
{
	margin: 0;
	font-size: 2em;
	height: 1.5em;
}

.back-button
{
	border-style: solid;
	border-width: 2px;
	border-color: var(--primary-color-3);
	border-radius: var(--standard-border-radius);

	background-color: var(--light-text-color);
	color: var(--primary-color-3);

	width: 10em;
	height: 2em;
	margin-bottom: 0.5em;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}

.back-button > .left, .back-button > .right
{
	flex: 1;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.link-list
{
	padding-left: 0.5em;
	display: flex;
	align-items: center;
}

.link-list > a
{
	margin-right: 2em;
}

.back-button:hover
{
	background-color: var(--primary-color-3);
	color: var(--light-text-color);
}

/*----Scroll bar------------------------------------------------------------------*/
::-webkit-scrollbar
{
	width: 10px;
}

/*Track*/
::-webkit-scrollbar-track
{
	/*background: var(--background-color);
	background: inherit;*/
	border-radius: var(--standard-border-radius);
}

/*Handle*/
::-webkit-scrollbar-thumb
{
	background-color: var(--light-border-color);
	border-radius: var(--standard-border-radius);
}

/*Handle on hover*/
::-webkit-scrollbar-thumb:hover
{
	background-color: var(--highlight-color);
}

::-webkit-scrollbar-corner
{
	background-color: transparent;
}

/*----Dropdowns-------------------------------------------------------------------*/

.dropdown
{
	overflow: hidden;
}

.dropdown-button
{
	background-color: inherit;
	color: var(--text-color);
	border: none;
	font-size: inherit;
}

.dropdown-content
{
	background-color: var(--background-color);
	border: 1px solid var(--light-border-color);
	border-radius: var(--standard-border-radius);
	display: none;
	position: absolute;
	/*z-index: 1;*/
}

.options
{
	color:var(--light-border-color);
	font-size: 1.5em;
}

.dropdown:hover .dropdown-content
{
	display: block;
}

div.dropdown-content a
{
	display: block;
	color: inherit;
	padding: 0.5em;
	text-decoration: none;
}

div.dropdown-content a:hover
{
	background-color: var(--highlight-color);
}

/*----Combo boxes-------------------------------------------------------------------*/
select
{
	background-color: var(--content-background-color);
	color: var(--text-color);
}

/*----CONTENT--------------------------------------------------------------------*/
div#content-container
{
	background: var(--content-background-color);
	height: 100%;
	position: absolute;
	left: 18em;
	right: 0em;

	overflow-y: scroll;
}

div#content
{
	background: var(--content-background-color);
	height: 100%;
	min-width: 40em;
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

div#content-section
{
	width: 100%;
	padding: 1em;
	border: 1px solid var(--light-border-color);
	border-radius: var(--standard-border-radius);
}

/*----LOGIN--------------------------------------------------------------------*/
.login-box {
	background-color: #ffffff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
	width: 300px;
	margin-top: 10em;
	margin-right: auto;
	margin-left: auto;
}

.login-box input[type="text"],
.login-box input[type="password"],
.login-box button {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
}

.login-box button {
	background-color: var(--primary-color-3);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.login-box button:hover {
	background-color: var(--primary-color-2);
}

/*----Batch fault input--------------------------------------------------------------------*/
div.fault-container
{
	width: 100%;

	background-color: var(--background-color);

	border-style: solid;
	border-width: 1px;
	border-radius: var(--standard-border-radius);
	border-color: var(--light-border-color);
	
	padding: 0.5em;
	margin-bottom: 0.5em;
}

div.fault-container > div.fault-line
{
	width: 100%;
	min-height: var(--row-height);
}

div.fault-line > div.input-pair
{
	display: inline-block;
}


div.input-pair > div.label, div.input-pair > div.input
{
	display: inline-block;
	padding: 0.5em;
	vertical-align: top;
}


div.input-pair > div.label
{
	width: 8em;
	font-weight: bold;
}

div.input-pair > div.input
{
	font-size: inherit;
}

div.input-pair > div.input input
{
	height: 1.5em;
}

div.input-pair > div.input textarea
{
	height: 3em;
	width: 20em;
}

#batch-fault-buttons
{
	width: 100%;
	text-align: center;
}

#batch-fault-buttons > button
{
	margin: 1em;
}

/*----Batch service input--------------------------------------------------------------------*/
div.service-container
{
	width: 100%;

	background-color: var(--background-color);

	border-style: solid;
	border-width: 1px;
	border-radius: var(--standard-border-radius);
	border-color: var(--light-border-color);
	
	padding: 0.5em;
	margin-bottom: 0.5em;
}

div.service-container > div.service-line
{
	width: 100%;
	min-height: var(--row-height);
}

div.service-line > div.input-pair
{
	display: inline-block;
}


div.input-pair > div.label, div.input-pair > div.input
{
	display: inline-block;
	padding: 0.5em;
	vertical-align: top;
}


div.input-pair > div.label
{
	width: 8em;
	font-weight: bold;
}

div.input-pair > div.input
{
	font-size: inherit;
}

div.input-pair > div.input input
{
	height: 1.5em;
}

div.input-pair > div.input textarea
{
	height: 3em;
	width: 20em;
}

#batch-service-buttons
{
	width: 100%;
	text-align: center;
}

#batch-service-buttons > button
{
	margin: 1em;
}

.comment-line, .comment-line > .input-pair, .comment-line > .input-pair > .input > textarea
{
	width: 100%;
}

.comment-line > .input-pair > .input
{
	width: 30%;
}

/*----Employee view--------------------------------------------------------------------*/
#employee-info-container
{
	display: flex;
	margin-bottom: 2em;
}

#employee-info-container .header
{
	font-weight: bold;
	font-size: 1.25em;
}

#employee-info-container div.header
{
	height: 2.5rem;
	padding: 0.5rem;
}

#employee-info-container .data-table, #employee-info-container .data-table td
{
	background-color: var(--content-background-color);
}

#employee-info-container > #week-info-pane
{
	height: var(--employee-view-height);
	width: 50%;
	padding-right: 0.5em;
}

#week-info-pane > div
{
	height: 100%; margin: 0;
}

#employee-info-container > #sub-info-container
{
	height: var(--employee-view-height);
	width: 50%;
	padding-left: 0.5em;
}

#sub-info-container > #transaction-pane, #sub-info-container > #adjustment-pane
{
	height: calc( ( var(--employee-view-height) / 2 ) - 0.5rem);
	margin-bottom: 1rem;
}

#sub-info-container:last-child
{
	margin-bottom: 0em;
}

#transaction-pane .table-container, #adjustment-pane .table-container
{
	max-height: 100%;
	height: calc(100% - (var(--button-height) + 1rem ) - 2.5rem);
	margin: 0;
}

#transaction-pane > button, #adjustment-pane > button
{
	margin: 0.5rem;
}

#transaction-pane .data-table th, #adjustment-pane .data-table th
{
	padding-left: 1em;
	padding-right: 1em;
	background-color: var(--accent-color);
}

#transaction-pane .data-table td, #adjustment-pane .data-table td
{
	padding-left: 1em;
	padding-right: 1em;
}

/*employee view popups*/
.overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0, 0, 0, 0.7);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.popup
{
	background-color: var(--background-color);
	padding: 1rem;
	border: 1px, solid, var(--light-border-color);
	border-radius: var(--standard-border-radius);
	width: 40rem;
	position: relative;
}

.close-button
{
	color: var(--text-color);
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 2em;
	cursor: pointer;
}

.popup h2
{
	margin-top: 0;
}

.popup input, .popup textarea
{
	width: 100%;
	font-size: 1em;
}

.popup textarea
{
	min-height: 4em;
}

.popup .save-button-div
{
	margin: auto;
	width: 10em;
}

.popup .save-button-div button
{
	width: 100%;
}

/*----Tool Tip--------------------------------------------------------------------*/
.tooltip
{
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext
{
	visibility: hidden;
	width: 200px;
	background-color:  var(--tooltip-background-color);
	color: var(--tooltip-color);
	text-align: center;
	border-radius: 6px;
	/*border: 1px solid var(--tooltip-border-color);*/
	padding: 5px;
	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext, textarea:focus + .tooltiptext, input:focus + .tooltiptext, select:focus + .tooltiptext
{
	visibility: visible;
}

.tooltip .right
{
	top: 0;
	left: 105%;
}

.tooltip .right::after
{
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent  var(--tooltip-border-color) transparent transparent;
}

.tooltip .left
{
	top: 0;
	right: 105%;
}

.tooltip .left::after
{
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent transparent var(--tooltip-border-color);
}

.tooltip .top
{
	bottom: 100%;
	left: 50%;
	margin-left: -100px;
}

.tooltip .top::after
{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: var(--tooltip-border-color) transparent transparent transparent;
}

.tooltip .bottom
{
	top: 100%;
	left: 50%;
	margin-left: -100px;
}

.tooltip .bottom::after
{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent var(--tooltip-border-color) transparent;
}

/*----FORMS--------------------------------------------------------------------*/
.checkbox-cell
{
	padding: 0.5rem;
	display: table-cell;
	vertical-align: middle
}

tr.hr {
	border-top: 1px solid var(--light-border-color);
}

.form-header
{
	margin-bottom: 0;
}

/*----FATIGUE--------------------------------------------------------------------*/
.fatigue-container
{
	display: flex;
	flex-wrap: wrap;
	max-width: 175vh;
	width: 100%;
	height: calc(100% - var(--page-navigation-height));

	font-size: 1.4vh;
	align-content: flex-start;
}

.fatigue-left-column
{
	width: 68%;
	height: 100%;
	
	display: flex;
	flex-wrap: wrap;
}

.fatigue-right-column
{
	width: 32%;
	height: 100%;
	
	display: flex;
	flex-wrap: wrap;
}

.fatigue-section, .fatigue-date-section
{
	background-color: var(--background-color);
	border-width: 1px;
	border-color: var(--light-border-color);
	border-style: solid;
	border-radius: var(--standard-border-radius);
	padding: 1em;
	margin: 0.25em;
	width: 100%;
}

.fatigue-button
{
	font-weight: bold;
	font-size: 1em;
	border: none;
	border-radius: 10em;
	padding: 0.5em;
	margin: 0.5em;
	cursor: pointer;
}

.fatigue-button.positive:disabled, .fatigue-button.negative:disabled
{
	background-color: var(--light-border-color);
	color: var(--light-text-color);
	cursor: default;
}

.fatigue-button.positive
{
	background-color: var(--secondary-color-2);
	color: var(--light-text-color);
}

.fatigue-button.negative
{
	background-color: var(--accent-color);
	color: var(--light-text-color);
}

.fatigue-button.negative:hover
{
	background-color: var(--primary-color-5);
}

.fatigue-button.positive:hover
{
	background-color: var(--secondary-color-3);
}

/*----Upload----*/
#file-upload
{
	font-size: 1em;
	border: none;
	background-color: var(--background-color);
	width: 20em;
}

.fatigue-upload
{
	height: 4em;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

/*----Save----*/
.fatigue-save
{
	height: 4em;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

/*----Image----*/

.fatigue.section-image
{
	height: calc(100% - 17.5625em - 5.5em);
	background-color: var(--content-background-color);
	border-width: 1px;
	border-color: var(--light-border-color);
	border-style: solid;
	border-radius: var(--standard-border-radius);
	padding: 0;
	margin: 0.25em;
	width: 100%;
}
  
.fatigue.section-image, .fatigue.section-image > img
{
    display: flex; /* Optional: Helps with centering if needed */
    align-items: center; /* Optional: Centers image vertically */
    justify-content: center; /* Optional: Centers image horizontally */
    overflow: hidden; /* Prevents image overflow */
	
	max-width: 100%;
    max-height: 100%;
}

/*----Drivers----*/

.fatigue-driver-section
{
	background-color: var(--background-color);
	border-width: 1px;
	border-color: var(--light-border-color);
	border-style: solid;
	border-radius: var(--standard-border-radius);
	padding: 1em 0.5em 1em 1.5em;
	margin: 0.25em;
	width: 100%;
	
	width: calc(100% - 0.5em);
	height: calc(100% - 5em);

	font-size: 1em;
}

.fatigue-drivers
{
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
	gap: 0.5em;
	overflow-y: auto;
	padding-right: 0.5em;

	width: 100%;
	height: calc(100% - 3em);
}

.fatigue-driver-section > input {
	height: 2em;
	margin-bottom: 1em;
	margin-top: 0em;
}

.fatigue-driver
{
	flex: 1 1 calc(25% - 0.5em);
	width: 6.8em;
	height: 8em;
	background-color: var(--content-background-color);
	padding: 0.25em;

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;

	border-width: 1px;
	border-color: var(--light-border-color);
	border-style: solid;
	border-radius: var(--standard-border-radius);
}

.fatigue-driver:hover
{
	border-width: 2px;
	border-color: var(--primary-color-4);
}

.fatigue-driver-selected
{
	border-width: 2px;
	border-color: var(--light-text-color);
	background-color: var(--primary-color-3);
	color: var(--light-text-color);
}

/*----CALENDAR----*/
.fatigue-date-section
{
	height: 17.5625em;
}

.fatigue-dates
{
	font-size: 0.75em;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 1em;

	width: 100%;
}

.fatigue-calendar
{

	background-color: var(--content-background-color);

	border-width: 1px;
	border-color: var(--light-border-color);
	border-style: solid;
	border-radius: var(--standard-border-radius);
}

.calendar-month
{
	padding: 0.5em;
	width: 18.5em;
	height: 19.5em;
}

.calendar-header
{
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.5em;
	height: 1.5em
}

.calendar-grid
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	/*gap: 0.25em;*/
}

.calendar-day-label
{
	font-weight: bold;
	font-size: 0.85em;
	text-align: center;
	width: 2.5em;
	height: 1.5em;
}

.calendar-day
{
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: 2.5em;
	height: 2.5em;
}

.calendar-day-normal
{
	background-color: var(--content-background-color);
	border: 1px solid var(--content-background-color);
	border-radius: 0.5em;
}

.calendar-day-start
{
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	color: var(--light-text-color);
}

.calendar-day-middle
{
	color: var(--light-text-color);
}

.calendar-day-end
{
	border-top-right-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	color: var(--light-text-color);
}

.calendar-day-single
{
	border-radius: 0.5em;
	color: var(--light-text-color);
}

.calendar-day-selected
{
	background-color: var(--secondary-color-4);
	border: 1px solid var(--secondary-color-4);
	color: var(--light-text-color);
}

.calendar-day-unselected
{
	background-color: var(--secondary-color-3);
	border: 1px solid var(--secondary-color-3);
	color: var(--light-text-color);
}

.calendar-day-selected-issue
{
	background-color: var(--primary-color-4);
	border: 1px solid var(--primary-color-4);
	color: var(--light-text-color);
}

.calendar-day-unselected-issue
{
	background-color: var(--primary-color-3);
	border: 1px solid var(--primary-color-3);
	color: var(--light-text-color);
}

.calendar-day-normal:hover
{
	border-color: var(--secondary-color-4);
}

/*----FATIGUE VIEW--------------------------------------------------------------------*/
.fatigue-view .section-image
{
	height: calc(100% - 17.5625em - 0.5em - 4em);
	background-color: var(--content-background-color);
	border-width: 1px;
	border-color: var(--light-border-color);
	border-style: solid;
	border-radius: var(--standard-border-radius);
	padding: 0;
	margin: 0.25em;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fatigue-view .section-image, .fatigue-view .section-image > img
{
    display: flex; /* Optional: Helps with centering if needed */
    align-items: center; /* Optional: Centers image vertically */
    overflow: hidden; /* Prevents image overflow */
	
	max-width: 100%;
    max-height: 100%;
}

.fatigue-view .scroll-arrow
{
	font-size: 5em;

	width: 0.8em;
	height: 0.8em;
	background-color: var(--background-color);
	color: var(--text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.45em;
	margin: 0.25em;

	border-style: solid;
	border-color: var(--light-border-color);
	border-width: 1px;
	border-radius: var(--standard-border-radius);

	cursor: pointer;
}

.fatigue-view .scroll-arrow:hover
{
	background-color: var(--light-border-color);
	color: var(--light-text-color)
}

.fatigue-view .checks
{
	height: 3em;
}