:root {
  --otto-gray: #808080;
  --otto-green: #327314;
  --otto-green-accent: #6abe52;
  --sidebar-width: 240px;
}

.hidden
{
	display: none;
}

#testing::before
{	
	content: "Testing";
}

#hamburger
{
	margin: 5px;
}

#warningConditions ul, #warningConditions li
{
	padding: 0px 10px;
	margin: 0px 10px;
}

.dt-head-center
{
	font-weight: 400 !important;
	text-align: center;
	font-style: italic;
}

.dt-actions
{
	width: 80px !important;
	text-align: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button
{
	padding: 0px;
}


.th.dtr-control:before
{
	background-color: #17a2b8;
}

a, a:visited, a:hover 
{
	color: var(--otto-green-accent);
}

.btn-primary, .btn-primary:hover
{
	background-color: var(--otto-green);
    border-color: var(--otto-green);
}

.otto-green
{
	background-color: var(--otto-green);
}

.otto-header
{
	height: 15px;
	background-color: var(--otto-green);
	width: 100%;
}

.otto-link
{
	font-weight: bold;
	font-size: 1.35em;
	text-decoration: none;
	color: white;
}

.navmenusubcat
{
	font-style: italic;
	font-variant: small-caps;
}

.nopad
{
	padding: 0rem;
}

p.warningsList
{
	margin-bottom: 0rem;
}

.warningsList
{
	margin-left: 15px;
}

.warningsClass
{
	font-style: italic;
	font-size: small;
}

.warningsNote
{
	font-size: small;
}

.dopad
{
	padding: 0.5rem 1rem; 
    align-items: center;
}

.navbar-brand-div
{	
	width: var(--sidebar-width);
	align-content: center;
	padding-right: 15px;
}
.navbar-nav
{
	align-items: center;
}

.nav-item
{
	vertical-align: middle;
}

.nav-sub-menu
{
	font-weight: normal;
	font-style: italic;
	text-decoration: none;
}

#sidebarFooter
{
	margin-top: 50px;
}

#sidebarFooter div 
{
	margin-bottom: 25px;
} 

#titleIcons
{
	display: none;
	color: gray;
}

#loginFaqs
{
	font-size: smaller;
}

	#loginFaqs p
	{
		padding: 0px 5px 2px 5px;
	}

.highlight
{
	background-color: lemonchiffon;
}

#appenvindicator
{
	text-align: center;
}

	#appenvindicator.Production
	{
		display: none;
	}

	#appenvindicator.Testing
	{
		background-color: rgba(255,250,205,0.25); /*lemonchiffon*/
	}

	#appenvindicator.Development
	{
		background-color: rgba(230,230,250,0.25) /*lavender*/
	}

	#appenvindicator.Local
	{
		/*display: none;*/ /* enable when making screenshots for guides */
		background-color: rgba(135,206,250,0.25); /*lightskyblue*/
	}

.otto-gray
{
	background-color: var(--otto-gray);
}

#homepage
{
}

	#homepage img.welcomebannerimage
	{
		width: 100%;
		object-fit: cover;
	}

	#homepage div.welcomemessage
	{
		width: 100%;
		font-size: larger;
		font-variant: initial;
		text-align: center;
		padding: 10px;
	}


.card
{
	text-align: center;
	vertical-align: middle;
	min-width: 15rem;
}

	.card span.isIconLARGE
	{
		font-size: 10em;
		padding-top: 10px;
		padding-bottom: 0px;
	}

	
#sidebarMenu .card
{
	text-align: left;
	vertical-align: middle;
	min-width: 100%;
    border: 0px;
	background-color: none;
}

#sidebarMenu .card-header
{
    padding: 0px;
    border-bottom: 1px solid rgba(0,0,0,.125);
	background-color: none;
}

#sidebarMenu .card-body
{
	padding: 0rem;
}

.btn-link 
{
	font-weight: 800;
	color: rgba(0, 0, 0, 0.7);
}

.accordion .card
{
	text-align: left;
}

#appCards
{
}

	#appCards p
	{
	}

	#appCards aLabel
	{
		display: block;
		font-variant: small-caps;
		color: gray;
	}

	#appCards aValue
	{
		display: block;
		font-weight: bold;
		padding-bottom: 5px;
	}

		#appCards aValue:last-child
		{
			padding-bottom: 15px;
		}

	#appCards span
	{
		padding: 0px;
	}

.profileIN
{
	color: green;
}

.profileOUT
{
	color: lightgray;
}

.fcDateTime
{
	font-size: smaller;
	color: gray;
	display: block;
}

#resource
{
}

	#resource h6
	{
		border-bottom: 1px solid #CDCDCD;
		margin-top: 5px;
		padding-top: 5px;
	}

	#resource p
	{
		margin-left: 25px;
	}

	#resource .fcDateTime
	{
		display: inline;
		margin-left: 10px;
	}

#staticBrowser h4
{
	font-variant-caps: small-caps;
}

#staticBrowser th, #staticBrowser th.subTh
{
	font-size: large;
	padding: 1px 3px 1px 3px;
	background-color: lightslategray;
	color: white;
	text-align: center;
}

	#staticBrowser th.subTh
	{
		font-size: small;
		background-color: lightgrey;
		color: black;
	}

/* CSS-based icon for file extensions From https://codepen.io/JFarrow/pen/oRzOpB/ */
a:before
{
	margin: 0 10px 0 5px;
}

a[href*=".docx"]:before
{
	content: url(/images/fileIcons/docx.png);
	padding-right: 10px;
}

a[href*=".pttx"]:before
{
	content: url(/images/fileIcons/pptx.png);
	padding-right: 10px;
}

a[href*=".xlsx"]:before
{
	content: url(/images/fileIcons/xslx.png);
	padding-right: 10px;
}

a[href*=".pdf"]:before
{
	content: url(/images/fileIcons/pdf.gif);
	padding-right: 10px;
}

a[href*=".txt"]:before
{
	content: url(/images/fileIcons/txt.png);
	padding-right: 10px;
}

.manageUserImage
{
	height: 350px;
	width: 350px;
	object-fit: fill;
	text-align: center;
	vertical-align: middle;
}

.manageUserImageThumb
{
	height: 150px;
	width: 150px;
	object-fit: cover;
	font-size: 125px;
}

.actionbutton
{
	object-fit: fill;
	text-align: center;
	vertical-align: middle;
	color: black;
	display: inline;
}

	.actionbutton.isInfo
	{
		cursor: default !important;
	}

	.actionbutton.green
	{
		color: green;
	}

	.actionbutton.red
	{
		color: red;
	}

	.actionbutton.blue
	{
		color: blue;
	}

	.actionbutton.noperm
	{
		color: lightgray;
		cursor: default !important;
	}

#AdditionalUserInfo .aValue, #AdditionalUserInfo .aLabel, #AdditionalUserInfo b
{
	font-variant: small-caps;
	color: gray;
	display: block;
}

#sidebarMenu span.isIcon
{
	margin-left: 0px;
	text-align: right;
}

 button.collapsed::after
{
	content: "\f0d7"; /*<i class="fa-solid fa-caret-down"></i>*/
}

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

 .isRequired::after 
 {
	 content: "*";
 }

.isIcon::before
{
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;	
	color: rgba(106,190,82, 0.75);
	width: 20px;
}

.isIcon.gray::before
{
	color: rgba(0, 0, 0, .25);
}

/* USAGE EXAMPLE: regular size:  <span class="isIcon forIndex"></span> */
/* USAGE EXAMPLE: card header: <span class="isIcon forData isIconLARGE"></span> */

span[class*="for"], .collapsed::after
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

.forAccountConfirmed::before, .forFolderExists::before, .forCopyConfirmed::before
{
	content: "\f00c"; /*<i class="fas fa-check"></i>*/
}

#confirmCopy
{
	color: green;
}

.forAccountUnconfirmed::before
{
	content: "\f128"; /*<i class="fas fa-question"></i>*/
}

.forPassword::before
{
	content: "\f084"; /*<i class="fas fa-key"></i>*/
}

.forLocked::before
{
	content: "\f023"; /*<i class="fas fa-lock"></i>*/
}

.forUnlocked::before
{
	content: "\f3c1"; /*<i class="fas fa-lock-open"></i>*/
}

.forEdit::before
{
	content: "\f044"; /*<i class="far fa-edit"></i>*/
} 

.forDelete::before, .forArchive::before
{
	content: "\f2ed"; /*<i class="far fa-trash-alt"></i>*/
	color: red;
}

.forConfirm::before
{
	content: "\f14a"; /*<i class="far fa-check-square"></i>*/
}

.forCancel::before, .forFolderDoesNotExist::before
{
	content: "\f05e"; /*<i class="fas fa-ban"></i>*/
}

.forFAQs::before
{
	content: "\f128"; /*<i class="fas fa-question"></i>*/
}

.forIndex::before
{
	content: "\f03a"; /*<i class="fas fa-list"></i>*/
}

.forKB::before
{
	content: "\f518"; /*<i class="fa-solid fa-book-open"></i>*/
}

.forFolderClosed::before, .forFolderClosedBlack::before
{
	content: "\f07b"; /*<i class="far fa-folder"></i>*/
	color: #d99d0d;
}

.forFolderClosedBlack::before
{
	color: black;
}

.forFolderOpen::before
{
	content: "\f07c"; /*<i class="far fa-folder-open"></i>*/
	color: #d99d0d;
}

.forFolderAdditional::before
{
	content: "\f067"; /*<i class="fas fa-plus"></i>*/
}

.forLogFile::before
{
	content: "\f15c"; /*<i class="fa-regular fa-file-lines"></i>*/
}

.forUser::before
{
	content: "\f007"; /*<i class="far fa-user"></i>*/
}

.forUsers::before
{
	content: "\f0c0"; /*<i class="fas fa-users"></i>*/
}

.forRole::before
{
	content: "\f02b"; /*<i class="fas fa-tag"></i>*/
}

.forRoles::before
{
	content: "\f02c"; /*<i class="fas fa-tags"></i>*/
}

.forUserRoles::before
{
	content: "\f507"; /*<i class="fas fa-user-tag"></i>*/
}

.forReports::before
{
	content: "\f15c"; /*<i class="far fa-file-alt"></i>*/
}

.forReportServiceSchedules::before
{
	content: "\f274"; /*<i class="fa-regular fa-calendar-check"></i>*/
}

.forWarning::before
{
	content: "\f071"; /*<i class="fa-solid fa-triangle-exclamation"></i>*/
	color: #f2d602 !important;
}

.forData::before
{
	content: "\f1c0"; /*<i class="fas fa-database"></i>*/
}

.forDashboard::before
{
	content: "\f080"; /*<i class="far fa-chart-bar"></i>*/
}

.forManage::before
{
	content: "\f085"; /*<i class="fas fa-cogs"></i>*/
}

.forAddresses::before
{
	content: "\f3c5"; /*<i class="fa-location-dot"></i>*/
}

.forContacts:before
{
	content: "\f2b9"; /*<i class="fa-reglar fa-address-book"></i>*/
}

.forCustomers::before
{
	content: "\f0c0"; /*<i class="fa-solid fa-users"></i>*/
}

.forEquipment::before
{
	content: "\f06c"; /*<i class="fa-solid fa-leaf"></i>*/
}

.forPayouts::before
{
	content: "\f3d1"; /*<i class="fa-regular fa-money-bill-1"></i>*/
}

.forRoutes::before
{
	content: "\f4d7"; /*<i class="fa-solid fa-route"></i>*/
}

.forSchedules::before
{
	content: "\f133"; /*<i class="fa-regular fa-calendar"></i>*/
}

.forServices::before
{
	content: "\f017"; /*<i class="fa-regular fa-clock"></i></i>*/
}

.forSettings::before
{
	content: "\f013"; /*<i class="fa-solid fa-gear"></i>*/
}

.forAdmin::before
{
	content: "\f007";
}

.forDev::before
{
	content: "\f12e"; /*<i class="fas fa-puzzle-piece"></i>*/
}

.forDevRoutes::before
{
	content: "\f4d7"; /*<i class="fas fa-route"></i>*/
}

.forDevIdInfo::before, .forUserInfo::before
{
	content: "\f05a"; /*<i class="fas fa-info-circle"></i>*/
}

.forNote::before
{
	color: var(--otto-green);
	content: "Note: "; /*<i class="fas fa-info-circle"></i>*/
	margin-right: 0px;
}

 .isNote
 {
	 font-size: smaller;
	 line-height: unset;
	 padding-bottom: 5px;
 }

.forDevTestEmail::before, .forEmail::before
{
	content: "\f1fa"; /*<i class="fas fa-at"></i>*/
}

.forDevKnownIssue::before, .forBug::before
{
	content: "\f188"; /*<i class="fas fa-bug"></i>*/
	color: rgba(255, 0, 0, 0.4);
}

.forDevTools::before
{
	content: "\f7d9"; /*<i class="fas fa-tools"></i>*/
}

.forDevTroubleshooting::before
{
	content: "\f21b"; /*<i class="fas fa-user-secret"></i>*/
}

.forDevGuid::before
{
	content: "\f577"; /*<i class="fas fa-fingerprint"></i>*/
}

.forDevTools::before
{
	content: "\f7d9"; /*<i class="fas fa-tools"></i>*/
}

.forImage::before
{
	content: "\f1c5"; /*<i class="far fa-file-image"></i>*/
}

.forArrowUp::before
{
	content: "\f062"; /*<i class="fas fa-arrow-up"></i>*/
}

.forCopy::before
{
	content: "\f0c5"; /*<i class="far fa-copy"></i>*/
}

.forDevUpdates::before
{
	content: "\f7d9"; /*<i class="fa-solid fa-screwdriver-wrench"></i>*/
}

.forMaintenance::before
{
	content: "\f0ad"; /*<i class="fa-solid fa-wrench"></i>*/
}

.forAbout::before
{
	content: "\f328"; /*<i class="fa-solid fa-clipboard"></i>*/
}

.forSeeAll::before, .forView::before
{
	content: "\f002"; /*<i class="fa-solid fa-magnifying-glass fa-xs"></i>*/
	font-size: smaller;
}

.forHistory::before
{
	content: "\f1da"; /*<i class="fa-solid fa-clock-rotate-left"></i>*/
}

#legend
{
	opacity: 0.7;
}

	#legend aLabel
	{
		font-weight: bold;
		display: block;
	}

	#legend aNote
	{
		display: block;
	}

.looksLikeText
{
	width: 100%;
	text-align: center;
	border: 0;
	font-size: larger;
	font-weight: bold;
}

.group-indent
{
	margin-left: 20px;
}

.hideMe
{
	display: none;
}

#ki
{
}
	#ki .kiID, #ki .kiState
	{
		display: none;
	}

	#ki .container
	{
	}

	#ki .kiHeading, #ki .kiFooter, #ki .kiIssueIndicators
	{
		background-color: #e9ecef;
		padding: 2px;
	}

	#ki .kiHeading
	{
		border-top: 1px solid gray;
	}

	#ki .kiFooter, #ki .kiIssueIndicators
	{
		border-bottom: 1px solid gray;
	}

	#ki .kiTitle
	{
		font-weight: bold;
	}

	#ki .kiIssueDeets, #ki .kiDeetsCol
	{
		border: 1px solid #e9ecef;
	}

	#ki .kiDescription::before, #ki .kiStepsToReproduce::before, #ki .kiWorkaround::before, #ki .kiNotes::before, #ki .kiType::before, #ki .kiStatus::before, #ki .kiImpact::before
	{
		font-variant: small-caps;
		font-style: italic;
	}

	#ki .kiDescription::before
	{
		content: "Description: ";
	}

	#ki .kiStepsToReproduce::before
	{
		content: "Steps to Reproduce: ";
	}

	#ki .kiWorkaround::before
	{
		content: "Workaround: ";
	}

	#ki .kiNotes::before
	{
		content: "Notes: ";
	}

		#ki .kiType::before
		{
			content: "Type: ";
		}

	#ki .kiStatus::before
	{
		content: "Status: ";
	}

	#ki .kiImpact::before
	{
		content: "Impact: ";
	}

.appUdateCaveats
{
	border-top: 1px dashed #CCCCCC;
	font-size: smaller;
	list-style-type: none;
	margin-left: -12px;
	margin-top: 10px;
}

div.dtsb-searchBuilder
{
	border-bottom: 1px dashed #CCCCCC;
}

.table thead th
{
	text-align: center;
	vertical-align: middle;
}

.container 
{
  max-width: 100%;
}

@media (min-width: 991.98px) {
main {
padding-left: 240px;
}
}

/* Sidebar */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: 137px 0 0; /* Height of navbar */
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: var(--sidebar-width);
z-index: 600;
}

@media (max-width: 991.98px) {
.sidebar {
width: 100%;
}
}
.sidebar .active {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.main-body {
	background-color: lightgray !important;
}

.sub-div {
	background-color: #ffff !important;
	border-radius: 5px;
}

.arrow-button {
	height: 34px;
	width: 30px;
	background-color: green;
	color: #ffff;
	border: 1px solid green;
	border-radius: 2px;
	font-size: 20px;
}