/* --------------------------------------------------------------------------------------------------
 * Application styles. Copyright (C) Stichting Health Cam 2007-2024
 * --------------------------------------------------------------------------------------------------
 */
 
body {
	background: white url('../img/bkgtile.png');
	background-repeat: repeat-x;
}

body, .normalText, a.normalText:link, a.normalText:visited, a.normalText:active, a.normalText:hover {
	color: #333333;
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
	text-decoration: none;
}

/* General styles */
img {
	border-style: none;
}

img.tip {
	vertical-align: middle;
}

img.glyphOk {
	width: 15px;
}

.centered {
	display: block;
	margin: 0 auto;
}

.nodisplay {
	display: none;
}

h1 {
	color: #00adef;
	font-size: 130%;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	color: #00adef;
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 0px;
}

h3 {
	color: #000000;
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0px;
}

a:visited,
a:active,
a:link {
	color: blue;
	text-decoration: none;
}

a:hover {
	color: #00adef;
	text-decoration: underline;
}

a.navlink:visited,
a.navlink:active,
a.navlink:link {
	color: #00adef;
	text-decoration: none;
}
a.navlink:hover {
	text-decoration: underline;
}

a.table_link:visited,
a.table_link:active,
a.table_link:link {
	color: #2200c1;
	text-decoration: underline;
}

a.table_link:hover {
	color: #00adef;
	text-decoration: underline;
}

ol.jsparams {
	display: none;
}

.flexrow_stretch {
	display: flex; 
	flex-direction: row; 
	align-items: stretch;
	gap: 15px;
	flex-wrap: wrap;
}

.flexitem_narrow {
	width: 250px;
	border: 1px solid lightgrey; 
	padding: 5px; 
}

div.lastlogininfo {
	float: right;
	border: 1px solid #ccc;
	padding: 0 2px;
	margin: 2px;
	line-height: normal;
}

table.hidden {
	border: none;
	border-spacing: 0px;
	border-collapse: collapse;
}

table.hidden td {
	border: 0;
}

td.nopadding {
	padding: 0;
}

.aligntop {
	vertical-align: top;
}

.alignTextBottom {
	vertical-align: text-bottom;
}

.aligncenter {
	text-align: center;
}

.alignleft {
	text-align: left;
}

.alignright {
	text-align: right;
}

.justifyEnd {
	justify-content: end;
}

.nominal {
	color: white;
	background-color: green;
	padding-left: 5px;
	padding-right: 5px;
}

.important {
	color: white;
	background-color: red;
	padding-left: 5px;
	padding-right: 5px;
}

.ignore {
	color: brown;
}

.alert {
	background-color: yellow;
}

.warn {
	font-weight: bold;
	color: salmon
}

.unused {
	color: darkgray
}

.status_warning {
	color: darkorange;	
}

.status_critical {
	color: red;	
}

tr.ignoreInactive td,
tr.ignoreInactive td span.warn,
tr.ignoreInactive td a {
	color: #666;
	background-color: lightgrey !important;
}

td.helpdesk_date {
	min-width: 80px;
}

td.helpdesk_status {
	width: 100px;
}

td.helpdesk_message {
	width: 250px;
}

td.helpdesk_reply {
	min-width:350px;
}

.console {
	font-family:Courier New;
}

.floatDiv {
	float: left; 
	border: 1px solid lightgray; 
	padding: 5px; 
	margin: 10px 20px 0 0
}

/* Header stuff */
td.header_logo {
	width: 450px;
	padding-left: 20px;
	padding-right: 20px;
}

td.header_infologin {
	color: #00adef;
	text-align: right;
	vertical-align: bottom;
	padding: 8px;
}

img.lablogo {
	max-width:300px;
	max-height:200px;
}

div.innercontent {
	margin: 10px 20px 0px 20px;
	line-height: 160%;
}

div.paddednowrap {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	white-space: nowrap;
	vertical-align: bottom;
}

/* TAB navigation elements */
tr.tabrow {
	background: url('../img/separator_down.png') repeat-x bottom;
}

div.tabdiv {
	margin: 5px 10px 5px 10px;
}

div.pusher {
	visibility: hidden;
}

.notLoggedIn {
	padding-top: 5px;
	padding-bottom: 5px;
}

.loggedIn {
	vertical-align: middle;
	white-space: nowrap;
}

.username {
	font-size: 13px;
	color: #00adef;
}

td.tabselected,
td.tabnotselected {
	padding: 0px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}

td.tabselected {
	background: url('../img/separator_flankup.png') no-repeat left top;
}

td.tabselected_rightedge {
	background: url('../img/separator_flankdown.png') no-repeat right top;
}

/* ---- section button related ---- */

img.buttonsmall {
	/* the small version of a section button, surrounded by text */
	vertical-align: middle;
	margin-right: 5px;
}

div.section_button_area {
	float: right;
	width: 215px;
	margin-top: 10px;
}

div.section_button {
	float: right;
	margin: 8px;
	padding: 0px;
	width: 82px;
	height: 82px;
}

div.section_button a {
	text-decoration: none;
}

div.section_button_enabled_overlay,
div.section_button_active_overlay,
div.section_button_greyed_overlay {
	padding-top: 61px;
	text-align: center;
	font-family: Arial;
	font-size: 9pt;
	padding-bottom: 10px;
}

div.section_button_enabled_overlay {
	color: #333333;
}

div.section_button_active_overlay {
	color: #00adef;
}

div.section_button_greyed_overlay {
	color: #cccccc;
}
	
div.overzichtknop_enabled_overlay:hover,
div.instellingenknop_enabled_overlay:hover,
div.meetschemaknop_enabled_overlay:hover,
div.instructieknop_enabled_overlay:hover,
div.overdragenknop_enabled_overlay:hover,
div.resultatenknop_enabled_overlay:hover,
div.vragenknop_enabled_overlay:hover,
div.helpdeskknop_enabled_overlay:hover {
	color: black;
	cursor: pointer;
}

div.overzichtknop_enabled_overlay:hover {
	background: url(../img/overzichtknop_hover.png) no-repeat;
}
div.instellingenknop_enabled_overlay:hover {
	background: url(../img/instellingenknop_hover.png) no-repeat;
}
div.meetschemaknop_enabled_overlay:hover {
	background: url(../img/meetschemaknop_hover.png) no-repeat;
}
div.instructieknop_enabled_overlay:hover {
	background: url(../img/instructieknop_hover.png) no-repeat;
}
div.overdragenknop_enabled_overlay:hover {
	background: url(../img/overdragenknop_hover.png) no-repeat;
}
div.resultatenknop_enabled_overlay:hover {
	background: url(../img/resultatenknop_hover.png) no-repeat;
}
div.vragenknop_enabled_overlay:hover {
	background: url(../img/vragenknop_hover.png) no-repeat;
}

div.helpdeskknop_enabled_overlay:hover {
	background: url(../img/helpdeskknop_hover.png) no-repeat;
}

/* Other.. */
.copyright {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 9pt;
	color: #333333;
}

.smallInputWidth {
	width: 80px;
}

.mediumInputWidth {
	width: 130px;
}

.largeInputWidth {
	width: 200px;
}

.extraLargeInputWidth {
	width: 300px;
}

.hugeInputWidth {
	width: 400px;
}

.maxwidth {
	width: 100%;
}

.onethirdwidth {
	width: 33%;
}

.halfwidth {
	width: 50%;
}

.almostwidth {
	width: 90%;
}

.disabledInput {
	background-color: #e8e8e8;
}

.dragcursor {
	cursor: grab;
}

form.inline {
	display: inline;
	margin: 0;
	padding: 0;
}

table.appOnlineTable tr td {
	font-size: 10px
}

.legendTitle {
	background-color: white;
}
.legendActive {
	background-color: darkseagreen;
}
.legendUnknown {
	background-color: lightgrey;
}
.legendInactive {
	background-color: salmon;
}

.legendBtActivity {
	background-color: #e1e4d0;
}

div.legendBox {
	width: 1px;
	overflow: hidden;
}

/* ---- min/max width autosizing ---- */ 
div.maxwidth {
	/* surrounding element that enforces the maximum allowed width 
	   (could be set on outer table too but IE doesn't listen to that for some reason) */ 
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

div.minwidth {
	/* element that pushes the middle td of the outer table to minimum required width 
	   (probably more reliable than min-width) */ 
	width: 780px;
}

div.smallScrollbox {
	max-height: 300px;
	overflow: auto
}

div.mediumScrollbox {
	max-height: 500px;
	overflow: auto
}

div.tallScrollbox {
	max-height: 700px;
	overflow: auto
}

div.spacedlist {
	line-height: 2;
}

div.flexRowSpaced {
	display: flex;
	flex-direction: row;
	gap: 10px;
	flex-wrap: wrap;
}

div.flexRowMediumSpaced {
	display: flex;
	flex-direction: row;
	gap: 20px;
	flex-wrap: wrap;
}

table.bordered {
	border-collapse: collapse;
}

table.bordered td,
table.bordered th {
	border: 1px solid lightgray;
	padding: 5px;
}

table.bordered thead tr td,
table.bordered thead tr th {
	background-color: #f1f1f1;
	font-weight: normal;
}

/* More table stuff */
tr.shadedCell {
	color: #999999 
};

tr.shadedrow {
	background-color: #f0f0f0;
}

table.highlightRow tbody tr:hover {
	background-color: #eee;  
}

table.patientlist td, table.messagesList td {
	padding: 0 6px 0 6px;
}

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

div.bordered {
	border: 1px solid #ccc;
}

div.padded {
	padding: 5px;
}

div.loginbox,
div.mainbox {
	background-color: #ffffff;
	margin-left:auto;
	margin-right:auto;
	border:1px solid gray;
	padding: 10px;
}

div.loginbox {
	margin-top:50px;
	width:600px;
}

div.mainbox {
	margin-top:10px;
	width:1000px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
}

span.prog {
	font-weight:bold;
}
/* ---- Progress bar ---- */
div.progress_container {
	text-align: center;
}

div.progress_zero {
	visibility: hidden; 
	margin: 0 auto; 
	padding: 0; 
	width: 297px; 
	height: 17px;
	background: url(../img/laadbalk_leeg.png) no-repeat;
}

div.progress_full {
	float: left;
	visibility: hidden; 
	margin: 0; 
	padding: 0; 
	width: 0px; 
	height: 17px;
	background: url(../img/laadbalk_vol.png) no-repeat;
}

/* Message at the top of the screen when an entity is updated */
.changeNotification {
	background-color: #ffffa0;
}

div.scrollbox {
	border: 1px solid #ccc;
	padding: 5px;
}

ol.mediumindent, ul.mediumindent {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 20px;
}

div.tab_type2_selected,
div.tab_type2_notselected {
	float: left; 
	position:relative;
	top:1px;
	padding: 5px;
	margin-right: 5px;
}

div.tab_type2_selected {
	border: 1px solid #999999;
	border-bottom: 1px solid white;
}

div.tab_type2_notselected {
	border: 1px solid #cccccc;
	border-bottom: none;
}

div.tab_type2_box {
	clear: both;
	border: 1px solid #999999;
	padding: 2px;
	margin-bottom: 5px;
}

/* Admin *******************************************************/

.accountAllowed {
	color: green;
}

.accountMaintenance {
	color: blue;
	font-weight: bold;
}

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

.accountError {
	text-decoration: underline;
	color: red;
	font-weight: bold;
}

.formBox {
	padding: 5px;
	border: 1px solid lightgray;
}

img.lablogoPreview {
	border: 1px solid red;
	max-width: 300px;
	max-height: 300px
}

/* Wizard  *******************************************************/

.wizardleft {
	float: left;
}

.wizardright {
	float: right;
}

.wizardretry {
	float: right;
	margin-right: 10px
}