/*
 * Permanent(?) styles, regardless of style library
 */

#headerdiv {
	min-height:92px;
	width:100%;
	min-width:20em;
}
#header-ctl-div {
	display:block;
	white-space: nowrap;
}
#header-img-row {
	min-height:85px;
	margin-top: 8px;
	margin-left: 0px;
	margin-right: 20px;
}
.header-img-div {
	margin-right: 0px;
	margin-left: 8px;
	float: right;
}
.header-img-div img {
	height: 70px;
}
.header-h2 {
	display: inline-block !important;
	vertical-align: top;
	color:#006;
	margin-bottom:0;
}
span.marquee_text {
    margin-right: 15px;
}
#menudiv {
	width:100%;
	display:inline-block;
}
#contentdiv {
	position: absolute;
	top: 139px;
	width:98%;
	padding-top:8px;
	padding-bottom: 12px;
}


label.error {
    color: #A00;
    font-weight: bold;
}
.mandatory {
	vertical-align:middle;
	color:#A00;
	font-weight:bold;
	font-size:120%;
}
.addrdiv {
	font-weight: bold;
	color: steelblue;
	margin-left: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding:2px;
	width: 214px;
	height: 64px;
	border: solid gray 1px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.vscrolldiv {
	margin-left: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding:2px;
	border: solid gray 1px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	overflow-y: scroll;
}

.tab-after {
	margin-right: 10px;
}

.textleft {
	text-align: left;
	padding-left: 5px;
}

.input_small {
	width:80px;
}

.input_medium {
	width:160px;
}

.input_big {
	width:240px;
}

input#quick_search {
    min-height: 28px;
    font-weight: bold;
}

input#quick_search:focus::placeholder {
    color: transparent;
}

div#quick_searchautocomplete-list {
    cursor: pointer;
    color: white;
    font-weight: bold;
}

div#quick_searchautocomplete-list div {
    padding-left: 7px;
    padding-right: 7px;
}

div#quick_searchautocomplete-list div:hover, div.autocomplete-active {
    background: steelblue;
}

.padding_top15 {
	padding-top: 15px;
}

.padding_top25 {
	padding-top: 25px;
}

.green_text {
	color: green;
}
.darked_text {
	color: darkred;
}

.hightlight_row_red {
   background-color: #FF0000 !important;
}

.tighttable {
	font-size:90%;
	border-collapse: collapse;
	caption-side:top;
}
.tighttable caption {
	font-size:90%;
	font-weight: bold;
}
.tighttable th {
	font-weight: bold;
	font-size:100%;
	text-align: center;
	color: white;
	border: 1px solid black;
	background-color: steelblue;
	padding-left: 3px;
	padding-right: 3px;
}
.tighttable td {
	font-size:90%;
	padding: 1px;
	border: 1px solid black;
}
.tighttable input {
	border: 0px;
	font-size:90%;
}
.tighttable select {
	font-size:90%;
}
.tighttable textarea {
	border: 0px;
	font-size:90%;
}
.tighttable A {
	font-size:90%;
	font-weight:bold;
	color:darkblue;
}


.tighttable_v2 {
	border-collapse: collapse;
	caption-side:top;
}
.tighttable_v2 caption {
	font-weight: bold;
}
.tighttable_v2 th {
	font-weight: bold;
	text-align: center;
	color: #070;
	border: 1px solid #888;
	background-color: #eee;
	padding-left: 3px;
	padding-right: 3px;
}
.tighttable_v2 td {
	padding: 1px;
	border: 1px solid #888;
}
.tighttable_v2 input {
	border: 0px;
}
.tighttable_v2 select {
}
.tighttable_v2 textarea {
	border: 0px;
}
.tighttable_v2 A {
	font-weight:bold;
	color:darkblue;
}

/*
 *
 * Subtables
 *
 */

    table[id^=subtable_] {
        border: dashed gray 1px;
        margin-left: 50px;
        width: fill-available;
        width: -moz-available;
        width: -webkit-fill-available
    }


/*
 *
 * BELOW is for Dynamic Tabs / jQuery GUI
 *
 */
	#tabs {
		min-width:750px;
		max-width:1400px;
		min-height:500px;
		margin: 0 auto!important;
	}
	#tabs div {
	}
	#tabs ul {
		background:#fff;
		border: none;
		border-bottom: 2px solid #c5c5c5;
		border-radius: 0px;
	}
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
		border: 2px solid #c5c5c5;
	}
	.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
		color: #777;
	}
	.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
		color: #fff;
		background: #142171;
		border-radius: 2px 2px 0px 0px;
	}
	#tabs ul li {
		background-color: #eee;
		height: 19px;
		text-align:center;
		vertical-align:middle;
	}
	#tabs ul li a {
		padding: 2px !important;
		width: 152px;
		font-weight: bold;
		text-decoration:none;
		line-height:16px;
	}
	.ui-widget-content {
		border: 2px solid #aaa;
		border-style: groove;
	}

.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    background: steelblue;
    color: white;
}

button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
    background: white;
}

/****
 *
 * Report page options
 *
 ****/

form.post_process {
    margin-bottom: 0px;
}

form.post_process fieldset {
    padding-bottom: 0px;
}

form.post_process button.download-button {
    height: 28px;
    font-weight: bold;
}

div.page-options {
    margin: 0;
    width: 100%;
}

fieldset legend.page-options {
    font-size:100%;
}

span#page_option_status {
    width: 100%;
    color: #666;
    text-align: right;
}

div.main_dashboard div.page-options {
    display: none;
}

/* Special case for two-column dashboards having a download button that is not wide enough. */
div.layout-column-6 div.page-options .layout-column.layout-column-9 {
    float: right;
    width:max-content
}
div.layout-column-6 div.page-options .layout-column.layout-column-1:first-child {
    min-width: 100px;
}


ul.page-select {
    margin-top: 19px;
    padding-left: 10px;
    display: inline-block;
}

ul.page-select > li {
    list-style-type: none;
}

ul.page-select > li {
    font-size: 125%;
    display: inline-block;
    margin: 0 2px;
}

ul.page-select > li:first-child:before {
    content: 'Page ';
    margin-right: 4px;
    color: #666;
}

ul.page-select > li > a {
    padding: 5px;
    font-weight: bold;
    border: 1px solid #CCC;
    border-radius: 4px;
    color: steelblue;
}

ul.page-select > li > a.current {
    background: steelblue;
    color: white;
}

ul.page-select > li > a:hover {
    background: gray;
    color: white;
}

ul.page-select > li > a:after {
    content: '';
}

thead tr th[dd-sort-field]:not(.no-sort):not([onclick=""]) {
    cursor:pointer;
}

@-webkit-keyframes loading_animation {
    from { opacity: .8; }
    to   { opacity: .3; }
}

@-moz-keyframes loading_animation {
    from { opacity: .8; }
    to   { opacity: .3; }
}

@keyframes loading_animation {
    from { opacity: .8; }
    to   { opacity: .3; }
}

.loading_table {
    -webkit-animation: loading_animation 1.5s ease-in alternate infinite;
    -moz-animation: loading_animation 1.5s ease-in alternate infinite;
    animation: loading_animation 1.5s ease-in alternate infinite;
}


table.dataTable tfoot tr:nth-child(odd):not(:only-child) th {
    background-color: lightsteelblue;
    color: #303030;
    padding-right: 3px;
}
table.dataTable tfoot tr:nth-child(odd):not(:only-child) td {
    background-color: lightcyan;
    padding-right: 3px;
}

/* Table Controls - Download Modal Popup */

div.modal-popup { /* Copied from/inspired by W3Schools https://www.w3schools.com/howto/howto_css_modals.asp */
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); 
}

div.modal-popup div.loader {
    border: 1px solid #888;
    background: white;
    max-width: 80%; /* Could be more or less, depending on screen size */
    min-width: 405px;
    max-height: 90%;
    min-height: 200px;
}

div#saying {
    top: 70%;
    font-size: 120%;
}

div#progress-bar {
    bottom: 10px;
    left: 0;
}

div.loader--dot {
    top: 35%;
}

.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
} 
.text-align-center {
    text-align: center !important;
}

table thead th.hours-estimate {
    color: #DDD !important;
}

.overdue_text_color {
    color: red !important;
}
th.subtotal-0 {
    background-color: #90caf9;
}

table tbody tr td.subtotal-0 {
    background-color: #bbdefb;
}

th.subtotal-1 {
    background-color: #64b5f6;
}

table tbody tr td.subtotal-1 {
    background-color: #90caf9;
}

a.sum-label-link {
    color: inherit;
}