/* Popup while tablesort javascript is being executed */

.print-only {
	display: none;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
    .print-only {
    	display: block;
    }
    select option:not(:checked) {
    	display: none;
    }
}

html, body {
	min-width: 1250px !important;
}

#pleasewait {
	top: 405px;
	left: 50%;
	position: fixed;
	margin-left: -100px;
	width: 200px;
	text-align: center;
	display: none;
	margin-top: -10px;
	background: #000;
	color: #FFF;
}

.breakword {
	hyphens: none | manual | auto;
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	word-break: break-all;
}

/* Gives space between the folder icon and the project select menu */
#header #projects:hover:before {
	opacity: 1;
}
#header #projects:before {
	margin-right: 15px;
	cursor: pointer;
}

/* In Firefox, style.css text-indent -9999px causes the element to be too large and the elements area is seen when on focus.*/
#header #extras a { text-indent: auto; }

/* Align with projects folder icon */
#header #extras { top: 10px }

/* Increase contrast */
#footer { color: rgba(255, 255, 255, 0.9); }

.wrapper { margin-bottom: -112px }
.push { height: 112px; }

/* Make project faculty occupy entire first line */
.project-header .project-meta ul.details li:first-child {
	width: 100%;
}

.project-header .project-meta h1 {
	padding-left: 245px !important;
}

/* Exclude row hover */
.table-hover > tbody > tr th:hover {
    background-color: transparent;
}

/* a bit more contrast */
.project-nav ul li a { color: rgba(255, 255, 255, 0.9); }

.no-padding { padding:0px !important; }

form .separator { clear: both; height: 20px; }

/* can be removed if not declared cursor:pointer on original css 
	The legend links are in <a> tags so the tab index tabs into it! */
form legend:hover { cursor: auto; }

/* collapsable properties are remembered on cookies. If cookie is set, show class applies, else, hide class */
form div.show { display: block; }
form div.hide { display: none; }

/* needed so that the highlight doesn't start on legend. */
form .row { clear: both; }

/* color adjustment */
form .row.highlight { background: #f9f8f8; }

/* form fields that are required on validation. */
form label.required { text-decoration: underline }

/* if form is locked */
form .panel button[type="submit"]:disabled { color: #bbb; }

::-webkit-input-placeholder { color: #999 !important; } /* Chrome/Opera/Safari */
::-moz-placeholder { color: #999 !important; } /* Firefox 19+ */
:-ms-input-placeholder { color: #999 !important; } /* IE 10+ */
:-moz-placeholder { color: #999 !important; } /* Firefox 18- */

form .panel span { color: gray; }
form .panel span.changed { color: orange; }
form .panel span.valid { color: green; }
form .panel span.invalid { color: red; }

/* checkbox in bootstrap renders gigantic otherwise! */
form input[type="checkbox"] { width: 17px; height: 17px; border: none; margin: 11px }

/* form datepicker icon adjust */
form input.datepicker { width: 110px; display: inline-block; margin-right: 10px }

/* Input type File in Firefox is too large */
@-moz-document url-prefix() {
    form input[type="file"] {
        padding: 0; border: 0; font-size: inherit;
    }
}

/* Back to top */
form .backtotop { opacity: 0; filter: alpha(opacity=0); }
form .backtotop.active { opacity: 1; filter: alpha(opacity=100); }

/* general tips style (also used in stage timeline) */
span.tip { visibility: hidden; width: 300px; }
.tip { position: absolute; background-color: #eee; border: 1px solid #ddd; padding: 8px; font-size: 1em; box-shadow: 2px 3px 6px #888888; line-height: 23px; font-weight: initial; z-index: 99999 }
.tip-toggle { position: relative; cursor: help } /* <i><span class="tip">, relative sets placement for absolute */
.tip-toggle:hover + span.tip { visibility: visible; }

/* form label above input/select el (used in permissions) */
.main form label.below { display: block }

/* Remove formatting */
.lame { text-decoration: none; border: none; background-color: transparent; font-weight: normal; }

/*
	History table
*/

table.history { width: 100% }
table.history thead td { font-weight: bold }
table.history tr.odd { background-color: #fafafa }
table.history th { border: 1px solid #ccc; background: #eee url("../images/order.png") no-repeat center center; cursor: pointer; height: 24px; }
table.history th.tablesorter-headerAsc { background: #eee url("../images/order_ASC.png") no-repeat center center }
table.history th.tablesorter-headerDesc { background: #eee url("../images/order_DESC.png") no-repeat center center }
table.history th,
table.history td { text-align: left; padding: 10px 5px 10px 5px; }
table.history tbody td { border: 1px solid #ccc; vertical-align: top; }
table.history tbody td span { display:none; }
table.history td.text-center { text-align: center }
table.history td.text-right { text-align: right }

/*
	Fly-outs
*/
table td .flyout-container { cursor: help; }
table td .flyout { display: none; }
table td .flyout-container:hover { background-color: #cadfd3; }
table td .flyout-container:hover .flyout {
	font-size: .85em;
	text-align: left;
	display: block;
	position: absolute;
	z-index: 999;
	background-color: #eafff3;
	border: 1px solid grey;
	box-shadow: 2px 2px 2px grey;
	padding: 4px;
}

/*
	relationships allow access
*/

table.relation-table { width: 100%; }
table.relation-table tr.odd { background-color: #fafafa }
table.relation-table th { border: 1px solid #ccc; background: #eee url("../images/order.png") no-repeat center center; cursor: pointer; height: 24px; }
table.relation-table th.tablesorter-headerAsc { background: #eee url("../images/order_ASC.png") no-repeat center center }
table.relation-table th.tablesorter-headerDesc { background: #eee url("../images/order_DESC.png") no-repeat center center }
table.relation-table th,
table.relation-table td { text-align: center; padding: 10px 5px 10px 5px; }
table.relation-table td div.form-group label { width: 100%; }
table.relation-table thead td { vertical-align: bottom; }
table.relation-table thead td .form-group { margin-bottom: 0; }
table.relation-table thead td.first { vertical-align: middle; padding: 0; text-align: left; }
table.relation-table thead label { font-size: .8em; }
table.relation-table tbody td { border: 1px solid #ccc; vertical-align: top; }
table.relation-table tbody td.name { text-align: left; }
table.relation-table tbody td span { display:none; }

/* 
	common text-area  comments
*/

.textarea-comments { position: absolute; top: -150px; left: -150px; width: 150px !important; height: 150px !important; background-color: #eee; border: 1px solid #ddd; padding: 8px; box-shadow: 2px 3px 6px #888888; } 

/* 
	time/deliverables sheet 
*/

.time-comment { position: relative; display: none; padding-left: 25px }
.time-comment i { cursor: pointer; }
.time-comment-pane { display: none; }
.time-comment-pane:focus { visibility: visible; }
.time-comment-link { display: none; }

/* 
	cost sheet 
*/

#funding-allocation {
	padding: 10px;
	font-size: .9em;
}

.cost-input { text-align: right; padding-right: 3px; padding-left: 0px; text-overflow: ellipsis; font-size: 15px; }
.cost-comment { position: absolute; top: 0; left: 0; cursor: pointer; padding-left: 10px; font-size: .8em;  }
.cost-comment-hidden { visibility: hidden; }
.cost-comment-focus { visibility: visible; }
.cost-comment-active { visibility: visible; }
.cost-comment-pane { display: none; }
.cost-comment-pane:focus~div { visibility: visible; }

.column-header-fix-active {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:1250px;
    z-index:100;
    box-shadow: 2px 3px 6px #888888;
}

/*
	Cashflow tab
*/
.cashflow-value,
.cashflow-value_cumulative {
	text-align: right
}

/*
	Fund tab
*/
.fund-value {
	text-align: right
}

/* 	
	stages 
*/

#stagelist {
	width: 240px;
	display: inline-block;
	float: left;
	height: 265px;
	padding-top: 32px;
}
#stagelist .label {
	height: 31px;
	border-bottom: 1px solid #ddd;
	padding: 2px 10px 0 5px;
}
#stagelist .label span {
	float: right;
}
#container {
	display: inline-block;
	width: 720px;
	height: 265px;
	background-color: #f9f9f9;
	position: relative;
	overflow-x: scroll;
	overflow-y: hidden;
	border: 1px solid #bbb;
}
#scrollable {
	background-color: transparent;
	height: 250px;
}
#scrollable div.range div {
	background: transparent url("../images/inner-border.png") repeat-y top left;
}
#scrollable div.years {
	display: inline-block;
	text-align: center;
	height: 30px;
	line-height: 30px;
}
#scrollable div.quarters span {
	background: transparent url("../images/inner-border.png") repeat-y top left;
	width: 25%;
	display: inline-block;
	text-align: center;
	height: 30px;
	border-bottom: 1px solid #ccc;
	font-size: .7em;
	color: #555;
}
#scrollable div.quarters span:first-child {
	background: none;
}
#scrollable div.guide {
	width: 1px;
	height: 245px; 
	position: absolute;
	top: 0px;
	left: -1px;
	background-color: red;
}
#scrollable div.bar {
	height: 30px;
	background-color: #aaa;
	position: absolute;
}
#scrollable div.handle {
	width: 5px; 
	height: 30px; 
	position: absolute; 
	cursor: ew-resize;
	background: transparent url("../images/handle.png") repeat top left;
}
#scrollable span.tip { 
	display: none; top: -35px; left: 15px;	width: 100px; 
}

/*
	Reports
*/

.report .tools { text-align: right }
.report .page-a4 { width: 630px; margin: 0 auto 0 auto } /* This width should match width of PDF text area PORTRAIT = 630px*/
.report p { margin: 0 0 5px 0 }

/*
	Project-selection
*/

.radio-table { width: 100%; }
.radio-table tr.odd { background-color: #fafafa }
.radio-table th.display { width: 60px; text-align: center }
.radio-table th { padding: 0 5px 5px 5px }
.radio-table td { padding: 5px; }
.radio-table td.section { border: 1px solid #ccc; background-color: #eee; height: 24px; font-style: italic; }
.radio-table td input { width: 100%; }
.radio-table td input:hover { cursor: pointer; }

/*
	Project Map
*/
.gmap-size { 
	height: 400px;
	margin-bottom: 10px; 
}

input[type="radio"], input[type="checkbox"] {
	width: auto !important;
	margin: auto;
}

#project-images ul {
	list-style-type: none;
	padding: 0;
	position: relative;
}

#project-images ul li {
	float: left;
	margin: 0 10px 10px 0;
}

#project-images ul li label {
	padding: 0;
}

#project-images ul li input {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	background-color: red;
	width: 20px;
	height: 20px;
}

table .border-left {
	border-left: 2px solid #ccc !important;
}

table .border-top {
	border-top: 2px solid #ccc !important;
}

#attachments ul {
	list-style-type: none;
	padding: 0;
}

#attachments ul li  {
	margin: 0 10px 10px 0;
	background-color: #fcfff4;
	border: 1px solid #ccc;
	padding: 1px 6px 6px 3px;
	position: relative;
	display: inline-block;
	border-radius: 4px;
}

#attachments ul li label {
	font-weight: normal;
}

#attachments ul li label sup {
	margin-left: 10px;
}

#attachments ul li input {
	margin-right: 5px;
	vertical-align: middle;
}

#attachments .attachments-flag {
	margin-left: 10px;
	width: 30px;
}

.projectImages-control,
.reportAttachments-control,
.reportPublish-control {
	margin-right: 10px;
}

.search-highlight {
	background-color: yellow;
	display: inline !important; 
}

#dialog {
	display: none;
	text-align: center;
	width: 100%;
	position: fixed;
	bottom: 100px;
	z-index: 99999;
}

#dialog span {
	padding: 10px;
	box-shadow: 0 0 10px #888888;
	background-color: #FFFFCC;
	border: 1px solid #CCC;
	display: inline-block;
}

.template-table {
	font-size: .9em;
}

.template-table td {
	/*height: 260px;*/
	position: relative;
	border-top: 0px !important;
	padding: 1px 4px 1px 4px !important;
}

.template-type-holder {
	position: absolute;
	left: -26px;
	top: -16px;
}

.template-type-header {
	padding: 4px 10px;
	position: absolute;
	top: 120px;
	left: -120px;
	transform: rotate(-90deg);
	text-align: right;
	width: 240px;
	font-weight: bold;
}

.template-link-holder {
	padding: 2px 6px 2px 6px;
	margin-bottom: 6px;
	border: 2px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	color: #000;
	opacity: .8;
	filter: alpha(opacity=80);
	min-height: 48px;
}

.template-link-holder:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
.template-link-holder i {
	color: red;
	z-index: 999999999;
}
.template-link-holder .template-link-edit .btn {
	display: block;
	border: 1px solid #ccc;
}
.template-link-holder .template-link-edit {
	background-color: #fff;
	display: none;
	position: absolute;
	top: -1px;
	right: -25px;
	z-index: 100;
}
.template-link-holder:hover .template-link-edit {
	 display: block;
	 text-align: right;
}

.modal-holder {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
}
.modal {
	position: fixed;
	width: 1000px;
	height: 700px;
	top: 50%;
	left: 50%;
	margin-top: -300px; /* Negative half of height. */
	margin-left: -500px; /* Negative half of width. */	
	padding: 20px;
	display: none;
	box-shadow: 2px 3px 6px #888888;
	background-color: #fff;
	z-index: 150;
}

.modal-scrollable {
	height: 560px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.project-time-summary {
	color: #70aad8;
}

.d-none {
	display: none;
}

i.fa-pause {
	color: #999;
	cursor: help;
}

#project-preview-frame {
	border: 0px;
	margin: 15px;
	width: 1220px;
	height: 810px;
	overflow-y: visible;
}

table.table-compress td {
	font-size: .9em;
	border: 1px solid #ddd !important;
}

.risk-inherent {
	background-color: #002e5f;
	color: #fff;
}

tbody tr.clickable:hover,
.project-cashflow-table tbody tr:hover {
	background-color: beige;
	cursor: pointer;
}

.project-works-table .cursor-block { cursor: not-allowed }

tr.flash {
	border-left: 5px solid orange;
}

label.filter-multicheck {
	font-weight: normal; 
	margin: 7px;
}

.gallery-bg {
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
	width: 100vw;
	height: 100vh;
	z-index: 120;
	background-color: rgba(0,0,0,0.8);
}
.gallery-bg.active {
	display: block;
}

.gallery-bg-scroller {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	touch-action: manipulation;
	position: relative;
	display: flex;
	align-items: center;
 	justify-content: center;
}

.gallery-bg-scroller img {
	max-width: 100vw;
	max-height: 100vh;
}

.archive-sections h4 {
	border-bottom: 3px solid #0bb7c7;
	padding-bottom: 16px;
	margin-top: 30px;
}