body {  background-color: #000000; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px}
.lbox {
	font-size: var(--font-size-small);
	background-color: #E5E5E5; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px
}
td, th {
	font-family: arial;
	font-size: calc(100vmax* 0.008 + 2px);
	text-decoration: none
}
input, textarea, select {
	font-size:11px;
	background-color:#E5E5E5;
	border:#666666 1px solid;
}
a {  color: #ff8100; text-decoration: none}
a:hover {  text-decoration: underline;}
.title {
	margin: 0;
	line-height: 27px;
	height: 25px;
	font-size: 20px;
	font-weight: bold;
	font-family: Arial;
	text-transform:uppercase;
	color:#333333;
}
.menuText {  color: #FFFFFF}
.subTitle {  font-size: 11pt; font-weight: bold}
.topNavLinks {  color: #FFFFFF; text-decoration: none; padding-left: 0.3em;}
.redText {  color: #FF0000}
.smallText {  font-size: 11px}
.smallerText {  font-size: 7pt}
.orangeText {  color: #FF8100}
.footerText{ color:#FFFFFF; font-size: 11pt; font-weight:bold}
.blackText { color:#000000}
.yellowText {
	color: var(--brand-color-yellow)
}
.leftmenulink {
	font-weight: normal;
	color: var(--brand-color-yellow); text-decoration: none; text-wrap-mode: nowrap; display: inline-flex; align-items: center;
}
.leftmenulink:hover span {  font-weight: normal; text-decoration: none}
.rtriangle {font-size: 10px}
.topNavLinks:hover a {  font-weight: bold; text-decoration: underline}
a.topNavLinks { line-height: 1.5;}
.loginButton {  font-family: helvetica, arial; font-size: 8pt; background-color: #FFCC99; border-color: #999999 #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.dynmenu { position: absolute; width:  150px; top: 0px; left: 0px;visibility: hidden;background-color: #333333;border: 1px solid;border-color: #eeeeee #666666 #666666 #eeeeee;padding: 2px 2px;font-family: arial; font-size: 9pt; color: #000000}
.whiteLink {  color: #FFFFFF; text-decoration: none; font-weight:bold}
.whiteNorm {  color: #FFFFFF; text-decoration: none}
.col {
	background-color: #CCCCCC;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #FFFFFF;
 color: #000000; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px
}
.submenuText {  color: #FBC41E; text-decoration: none}
form[name=searchForm] {padding-left: 1em;}
.searchbox {  font-size: var(--font-size-medium); color: #FF8100; background-color: #E5E5E5; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; width: 8em;}
.greyText { color:#999999}
.lightGreyText { color:#CCCC00}
.seperator {background-image:url(../filetracker/images/dots.gif); background-repeat: repeat-x; padding: 4px;}

.bulletinTitle{ font-size:16px; color:#EF850F; font-family:Georgia, "Times New Roman"}
.bulletinBody{ font-size:11px; font-family:verdana; line-height:15px; color: #333333}
.bulletinFootNotes {font-size:10px; color:#999999}

.borderTable{ border-color:#999999; border-style:solid; border-width:1px;}
.modernCellTitle {
	border-bottom:1px solid #CCCCCC;
	background-color:#E5E5E5;
	font-weight: normal;
}
.modernCellBody{border-bottom:1px solid #CCCCCC;}
.spacer{ clear:both}

.annotes-clickable {
	cursor: pointer;
}

.annotes-svg-icon {
	display: inline-flex;
	align-self: center;
}

.annotes-svg-icon img, .annotes-svg-icon-baseline img {
	height: 1em;
	width: 1em;
	max-width: none;
}

.annotes-svg-white img {
	filter: invert(100%) sepia(0%) saturate(28%) hue-rotate(28deg) brightness(106%) contrast(106%);
}

.annotes-svg-brand-color-1 img {
	filter: var(--brand-color-1-filter);
}

.annotes-svg-brand-color-2 img {
	filter: var(--brand-color-2-filter);
}

@media (min-width: 0px) {
	input.search-job {
		color:#FF8100;
		padding: 0.25em;
	}
	select[name="filter"] {
		padding: 0.25em;
	}
	div.annotes {
		display: flex;
		align-items: center;
	}
	.annotes-flexbox-r-cn-c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.annotes-flexbox-c-fs-c {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.annotes-box-cta-r {
		flex-direction: row-reverse;
		justify-content: space-between;
		width: auto;
		padding: var(--vertical-margin-half) var(--horizontal-margin-half);
		box-sizing: border-box;
	}
	.annotes-btn {
		font-size: var(--font-size-medium);
		border-radius: 3px;
		-webkit-box-shadow: none;
		box-shadow: none;
		cursor: pointer;
		min-width: 6em;
	}
	.annotes-btn:disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}
	.annotes-btn-cancel {
		background-color: lightgrey;
		border-color: lightgrey;
		color: dimgrey;
	}
	dialog.annotes-modal {
		display: none;
		height: 100vh;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100000;
		background: rgba(0,0,0,0.7);
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		font-size: var(--font-size-medium);
	}
	.annotes-modal-title {
		font-weight: bold;
		font-size: var(--font-size-large);
	}
	.annotes-modal-content {
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 60%;
		max-height: 90%;
		padding: var(--vertical-margin-double) var(--horizontal-margin-double);
		overflow: auto;
		background-color: white;
		border: 0.2em solid var(--brand-color-yellow);
        border-radius: 0.5em;
        padding: var(--vertical-margin-single) var(--horizontal-margin-double);
        overflow: visible;
		font-family: Arial, Helvetica, sans-serif;
	}

	.annotes-form-group {
		flex-direction: column;
		margin-bottom: var(--vertical-margin-single);
		align-items: flex-start;
	}

	.annotes-form-group input {
		color: grey;
		font-weight: bold;
		padding-left: 0.5em;
		box-sizing: border-box;
		padding: 3px 5px;
    	border: 2px solid #ccc;
    	border-radius: 4px;
		vertical-align: middle;
	}

	.annotes-form-group input::placeholder {
		font-weight: normal;
	}

	.annotes-form-group select {
		vertical-align: middle;
		border: 2px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		padding: 3px 5px;
	}
	.annotes-form-group.has-error label, .annotes-form-error-text, .annotes-form-error-mark {
		color: #dd4b39;
		border-color: #dd4b39;
		box-shadow: none;
	}

	.annotes-form-group.has-error .annotes-form-control {
		border-color: #dd4b39;
	}
	.carousel-cell {
		width: 210px;
		padding: 5px;
	}

	table.flickity-table, table.flickity-table tbody {
		border-collapse: collapse;
	}
	table.flickity-table tr.date-title {
		border-top-style: solid;
		border-top-width: 1px;
	}
	img.logo {
		padding: 1rem;
		padding-left: 3rem;
		padding-bottom: 2rem;
		width: 15rem;
	}
}

@media (orientation: landscape) and (min-width: 961px) {
	.only-mobile {
		display: none;
	}
	.outer-frame-wrapper {
		width: 100%;
	}
	table.goto-frame {
		width: 600px;
	}
	table.goto-frame .title {
		width: 200px;
	}
	table.layout-frame {
		width: 600px;
	}
	table.content-frame {
		width: 100%;
	}
	table.d2col-m1col > tbody > tr > td {
		width: 50%;
	}
	td.search-job-box {
		width: 200px;
	}
	input.search-job {
		width: 16em;
		color:#FF8100;
	}
	td.handler-filter-box {
		width: 200px;
	}
	.jobnumber-wdith {
		width: 60px;
	}
	#submenu-items-on-mobile {
		display: none;
	}
}
@media (orientation: portrait), (max-width: 960px) {
	:root {
		--font-size-small: calc(100vmax * 0.00625 + 8px);          /* 20px @1920 and 12px @640 */
		--font-size-medium: calc(100vmax * 0.0078125 + 10px);      /* 25px @1920 and 15px @640 */
		--font-size-large: calc(100vmax * 0.009375 + 12px);
		--font-size-xlarge: calc(100vmax * 0.0109375 + 14px);		/* 35px @1920 and 21px @640 */
		--font-size-xxlarge: calc(100vmax * 0.0125 + 16px);			/* 40px @1920 and 24px @640 */
	}
	input, textarea, select {
		font-size: var(--font-size-medium);
	}
	.only-desktop {
		display: none;
	}
	.with-margin-top {
		margin-top: 1rem;
	}
	.lbox, input.lbox, input.loginButton {
		font-size: var(--font-size-medium);
	}
	.outer-frame-wrapper {
		width: calc(100vw - 0.6rem);
	}
	table.layout-frame, div.layout-frame {
		width: calc(100vw - 0.6rem);
	}
	table.goto-frame {
		width: 100%;
	}
	table.goto-frame .title {
		width: 30%;
	}
	table.d2col-m1col > tbody > tr {
		display: flex;
		flex-direction: column;
	}
	table.d2col-m1col > tbody > tr > td {
		display: block;
	}
	table td#spacerColumn {
		display: none;
	}
	table td#mainColumn {
		width: calc(100vw - 0.6rem);
		padding-left: 0.3rem;
	}
	td.search-job-box {
		width: 15%;
	}
	input.search-job {
		width: 7em;
	}
	td.handler-filter-box {
		width: 35%;
	}
	td, th {
		font-size: var(--font-size-medium);
		font-family: Arial, sans-serif
	}
	table.data-grid {
		table-layout:fixed;
		width: calc(100vw - 0.6rem);
	}
	table.data-grid td {
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0.25em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	table.data-grid td.zero-width {
		display: none;
	}
	table.data-grid td.normal-width {
		width: 10em;
	}
	table.data-grid td.jobnumber-wdith {
		width: 3em;
	}
	a {
		font-family: Arial, sans-serif
	}
	.w0-on-mobile {
		width: 0;
	}
	td.logo-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 1.5em;	
	}
	img.logo {
		padding: 0;
	}
	#topnav-left {
		font-size: var(--font-size-large);
		width: 1.5em;
		color: white;
		background-color: #313031;
	}
	.topnav-side-menu-btn > img {
		height: 1.5em;
		width: 1.5em;
	}
	#topnav-menu-item  {
		display: none;
	}
	#topnav-left-image {
		display: none;
		width: 0;
		object-fit: cover;
		object-position: right;	
	}
	.topnav-content {
		width: 100%;
	}
	#topnav-middle {
		width: 25%;
	}
	#topnav-right {
		width: 40%;
	}
	#sidebar-and-main {
		margin-top: 0.5em;
		min-height: 40vh;
	}
	#topnav-menu-items {
		display: none;
	}
	#submenu-items-on-mobile {
		display: block;
		margin-top: 0.5em;
	}
	a.topNavLinks {
		font-size: var(--font-size-medium);
	}
	td#sideBar > table > tbody > tr > td:first-child {
		padding-top: 0.75em;
	}
	.searchbox {
		margin-top: 0.5rem;
	}
	.annotes-modal-content {
		width: 98%;
		padding: var(--horizontal-margin-single) var(--vertical-margin-double);
	}
	table.flickity-table, table.flickity-table tbody {
		display: block;
		width: calc(100vw - 0.6rem);
		border-collapse: collapse;
	}
	tr.flickity-wrapper {
		display: block;
	}
	td.flickity-cell {
		display: block;
		min-width: 30vw;
		max-width: 45vw;
		margin-right: 10px;
		min-height: 200px;
		overflow-wrap: break-word;
	}
	td.flickity-cell > img {
		max-width: 45vw;
		max-height: 40vh;
	}
	table.flickity-table tr.date-title {
		display: block;
		border-top-style: solid;
		border-top-width: 1px;
	}

	table.annotes-ctable {
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		thead tr {
			display: none;
		}
		tr {
			border: 1px solid #ccc;
			margin-top: 1rem;
		}
		tr:first-child {
			margin-top: 0;
		}
		tr:nth-child(even) {
			background-color: #E5E5E5;
		}
		tr:nth-child(even) > td {
			border-color: #888888;
		}
		td { 
			border: none;
			border-bottom: 1px solid #eee;
			text-align: left;
			position: relative;
			padding-left: 30%;
		}
		td::before {
			position: absolute;
			content: attr(data-label);
			display: block;
			color:#6298c6;    
			margin-bottom: 0.2rem;
			left: 6px;
			width: 25%;
			white-space: nowrap;
		}
	}
}