a:hover {
	text-decoration:	none;
}

.highlight {
	background-color:	yellow;
}

.multifieldaddbutton {
	float:			right;
	position:		relative;
	/* Must exceed the remove button's own negative right margin, which pulls it back toward the
	   add button: 30 - 20 = the 10px of clear space between "-" and "+". */
	margin-left:	30px;
	/* Ticket 9752: cancel the box's 20px right padding so the -/+ pair sits in the top-right corner
		instead of floating 10px inside it. Done with a margin rather than by re-parenting the
		buttons: function.js reaches them with .children() of .multifieldmember in three places
		(add, remove and the rebuild in recreateMultifieldButtons), so moving them into a wrapper
		would break add/remove. */
	margin-right:	-20px;
	cursor:			pointer;
}

.multifieldremovebutton {
	float:			right;
	position:		relative;
	margin-right:	-20px;
	cursor:			pointer;
}

.form-inline > .multifieldmember {
	margin-top:	30px;
	padding:	10px;
	border:		1px #C0C0C0 solid;
}
.form-inline label {
	margin-left:	20px;
	margin-right:	10px;
}

.error {
	background-color: #ffcccc;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
	However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;} 
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;} 
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

/* vertical text */
.verticaltextcontainer {
	vertical-align: bottom;
}
.verticaltext {
	writing-mode: vertical-rl;
	white-space: nowrap;
}

.title-fetchdetail {
	font-size: 50%;
}

.compulsory {
	color: red;
}

html, body {
	font-family:	var(--corporate-font-family); 
	/* line-height:	32px; */
	color:			var(--corporate-text-color);
	font-weight:	400;
	font-size:		14px;
}

button {
	display: inline-block;
	background: var(--corporate-background-color);
	border-radius: 5px;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
	color: var(--corporate-text-color);
	letter-spacing: 0.23px;
	line-height: 27px;
	padding: 24px;
	text-decoration: none;
	width: auto;
}

a {
	/* text-decoration: underline; */
	color: #565656;
	opacity: 1;
	line-height: 25px;
}

input[type=text], input[type=password] {
	display: block;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 1.33333rem;
	padding: 7px 14px;
}

input[type=checkbox] {
	border-radius: 5px;
	background-color: var(--corporate-background-color);
	color: black;
	cursor: pointer;
}

select {
	border-radius: 5px;
}

/* menu */
#top {
	position: fixed;
	width: 100%;
	height: 60px;
	background-color: var(--corporate-background-color);
	z-index: 1000;
}
#top-left-logo {
	text-align: center;
	display: inline-block;
}
#top-left-logo td {
	padding: 10px;
}
#top-left-logo .menu-toggle {
	font-size: 50px;
	cursor: pointer;
	color: var(--corporate-primary-color);
}
#top-right-badge {
	cursor: pointer;
	display: inline-block;
	float: right;
}
#top-right-badge td {
	padding: 10px;
}
#badge {
	cursor: pointer;
}

#sidebar-wrapper {
	top: 60px;
}
#sidebar-wrapper .panel-default > .panel-heading > .panel-title {
	font-weight: bold;
}
#sidebar-wrapper .panel-group .panel {
	border: none;
	border-radius: 0px;
}

/* collapsibles */
#wrapper .panel {
	page-break-before: always;
}

.panel-default > .panel-heading {
	color: var(--corporate-background-color);
	background-color: var(--corporate-primary-color);
	border: 0px solid black;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}

/* tables */
table.table-striped td {
	overflow: hidden;
	word-wrap: break-word;
}
/*
table.table-striped tr:nth-child(even) {
	background-color: #f9f9ff;
}
table.table-striped tr:nth-child(odd) {
	background-color: #ffffff;
}
*/

/* datatables */
table.dataTable thead th {
	padding-left: 0px;
}
.dataTables_wrapper .dataTables_filter input {
	border-radius: 5px;
	border: 1px solid;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--corporate-background-color) !important;
	background-color: var(--corporate-primary-color);
	border-color: var(--corporate-primary-color);
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-moz-user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
	background-color: #f9f9ff;
}

button.dt-button{
	background: var(--corporate-primary-color) !important;
	border-color: var(--corporate-primary-color) !important;
	color: var(--corporate-background-color) !important;
	margin-left: 1em;
}
.fa-cog { 
	color: var(--corporate-background-color);
	background-color: var(--corporate-primary-color) !important;
}
div.dt-button-collection {
	position: relative !important;
}
div.dt-button-collection button.dt-button{
	margin-left: 0 !important;
}
div.dt-button-collection button.dt-button:not(.active){
	background: grey !important;
}
div.dt-button-collection div[role="menu"]  {
	max-height: 500px;
	overflow-y: scroll;
}

.dataTables_info {
	clear: none !important;
	padding-top: 0 !important;
	padding-left: 2em;
}

/* autocomplete */
ul.ui-autocomplete {
	min-width: 350px !important;
	/* z-index: 1001; */
	z-index: 1051 !important;
}
ul.ui-autocomplete li.ui-state-focus {
	background: none;
	background-color: inherit;
	border: 0px solid black;
}
ul.ui-autocomplete li.ui-state-focus div {
	white-space: nowrap !important;
}
ul.ui-autocomplete li.ui-state-focus,
ul.ui-autocomplete li.ui-state-focus div,
ul.ui-autocomplete li.ui-state-focus a,
ul.ui-autocomplete li.ui-state-focus a:hover {
	color: var(--corporate-primary-color) !important;
	font-weight: bold !important;
}
.ui-menu .ui-menu-item a {
	display: inline;
}

.multifieldmember {
	border: 1px lightgray solid;
	margin-top: 5px;
	margin-bottom: 5px;
	/* Ticket 9752: the BOX EDGE is what the eye follows, so it stays on the page's alignment line
		and the field is inset symmetrically inside it. The original rule padded 20px on the left
		only, which left the input off-centre; matching the right padding centres it. Growing the
		box outward instead was tried and rejected - it kept the field on the grid but pushed the
		border past the page content edge, which reads worse. */
	/* 20px is the original left gap, mirrored to the right: the field ends up 21px inside the
	   border on both sides. Verified across every page carrying a repeatable box that no row
	   changes how many fields it holds at this width. */
	padding-left:	20px;
	padding-right:	20px;
}

.multifieldmember:nth-child(odd) {
	background: #f9f9ff;
}

/* autocomplete value is generated like this
<ul>
<li><a>an element</a></li>
<li><a>another element</a></li>
</ul>
*/
.ui-state-hover, .ui-autocomplete li:hover {
	color:var(--corporate-background-color);
	background: var(--corporate-primary-color);
	outline:none;
} 


/* fullcalendar.ui */
.fc-toolbar.fc-header-toolbar {
	margin-bottom: 5px !important;
	display: flow-root !important;
}
.fc-toolbar h2 {
	font-weight: bold !important;
	font-size: 12pt !important;
	margin: 0px;
}
	/*
.fc-button {

	color: #fff !important;
	background-color: #428bca !important;
	border-color: #357ebd !important;
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	
}*/
.fc-day-grid .fc-row .fc-content-skeleton {
	padding-bottom: 0px !important;
}
.fc-event.italic {
	font-style: italic;
}
.fc-event.underline div {
	text-decoration: underline;
}
.fc-event.ical_free {
	box-shadow: inset -5px 0 0 0 #28a745;
}
.fc-event.ical_workingelsewhere {
	box-shadow: inset -5px 0 0 0 #ffc107;
}
.fc-event.ical_tentative {
	box-shadow: inset -5px 0 0 0 #6c757d;
}
.fc-event.ical_busy {
	
}
.fc-event.ical_oof {
	box-shadow: inset -5px 0 0 0 #dc3545;
}
.fc-time-grid-event { /*hide overflowing text in calendar events*/
	overflow: hidden;
}
.fc-right {
	float: right;
}
.fc-left {
	float: left;
}

.maplabels{
	padding: 1px 9px 2px;
	font-size: 12.025px;
	font-weight: bold;
	white-space: nowrap;
	color: black;
	background-color: rgb(197, 197, 197);
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}

.maplabels-blue {
	padding: 1px 9px 2px;
	font-size: 12.025px;
	font-weight: bold;
	white-space: nowrap;
	color: white;
	background-color: var(--corporate-primary-color);
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}

.maplabels-yellow{
	padding: 1px 9px 2px;
	font-size: 12.025px;
	font-weight: bold;
	white-space: nowrap;
	color: black;
	background-color: yellow;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}

.maplabels-red {
	padding: 1px 9px 2px;
	font-size: 12.025px;
	font-weight: bold;
	white-space: nowrap;
	color: white;
	background-color: red;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}

.minimiseExcessContent {
	position:	relative;
	max-height: 20vh;
	overflow:	hidden;
	max-width: 	60vw;
}
.minimiseExcessMore {
	position:	absolute; 
	bottom: 	0;
	right:		0;
	cursor:		pointer;
}


/* Template placeholder */
.placeholdercatalog_table {
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 5px;
}

.placeholdercatalog_tablecell {
	border: 1px solid rgb(71, 71, 71);
	overflow: visible;
	padding: 2%;
}

.btn-purple {
	background-color: #800080;
	color: white;
	border: 1px solid #800080;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active {
	background-color: #660066;
	border-color: #660066;
	color: white;
}

/* --- form layout standard (ticket 9752) ---------------------------------------------------- */
/* Both generations render forms through \Helper\Form5 -> \Helper\Html::formheader5 /
	formfield5 / formfooter5, and both load this file, so these three rules reach every form in
	t&p5 and t&p6 alike. The per-form column unit is a page concern; only the global rules live
	here. See documentation/Technical/Form Layout Standard.md. */

/* A checkbox field emits no <label class="control-label">, so its control would sit ~11px above
   the labelled fields sharing its row. 21px reserves the same label line. */
.formfield.form-group > .checkbox:first-child {
	margin-top:	21px;
}

/* The "beforeheader" option prints an <h3> inside the field, so there the checkbox is no longer
   the first child - onboarding_entry's Pensionskasse/Sozialversicherung/Kinder columns. 31px, not
   21px: this margin collapses against the heading's own 10px bottom margin, so only the excess
   over 10px actually reserves the label line. */
.formfield.form-group > h3:first-child + .checkbox {
	margin-top:	31px;
}

/* An .alert emitted by the error handler lands wherever the error happened, often as a direct
   child of a .row. A .row's -15px margin is meant to be cancelled by a column's 15px padding;
   an alert carries no column class, so its box overhangs the page content edge by 15px on each
   side. Margin, not padding: it is the box edge that has to line up, not the text inside it. */
.row > .alert {
	margin-left:	15px;
	margin-right:	15px;
}

/* Gap before the filter / save buttons: 15px here plus the trailing form-group's 15px bottom
   margin gives the 30px standard. */
.form-actions {
	/* these blocks follow floated field columns and are no longer wrapped in a .row, so they have
	   to clear the floats themselves - without this the button block rides up beside the last
	   field and the gap collapses */
	clear:			both;
	/* padding, not margin: the more-filters block above is a form-group whose 15px bottom margin
	   would COLLAPSE against a top margin here, leaving 15px instead of 30px. Padding never
	   collapses, so the gap is the same whether or not that block is present. */
	padding-top:	15px;
}

.formfield-morefilters {
	clear:	both;
}

/* The same gap, mirrored, when the buttons render above the fields (submitposition "top"). */
.form-actions-top {
	clear:			both;
	padding-bottom:	15px;
}

/* Pages call $form->footer() both at form level and from inside an existing .row. A .row applies
   margin: 0 -15px expecting a column child to cancel it, so when the button block lands inside a
   row it must behave like a column - but when it lands at form level it must not. Padding it only
   as a row's child gets the buttons onto the content edge in both cases, without nesting a row
   inside a row. */
.row > .form-actions,
.row > .form-actions-top,
.row > .formfield-morefilters {
	padding-left:	15px;
	padding-right:	15px;
}