.occupation-bar {
	display: block;
	position: absolute;
	bottom: 0;
	height: 3px;
	background: #88e;
	transition: max-width 300ms ease-in;
	max-width: 0%;
	width: 100%;
}

.full .occupation-bar {
	background: #33e;
}

.overbooking .occupation-bar {
	background: #e33;
}

li.not-bookable {
	opacity: 0.7;
}

li.full {
	background: #f8f8fe;
}

li.cancelled span.event-info {
	text-decoration: line-through;
}

li.new-report {
	font-weight: bold;
}

li span.duration {
	font-size: 80%;
}

li span.identifier {
	font-size: 80%;
	opacity: 0.6;
}

h2 span.identifier {
	font-size: 1rem;
	opacity: 0.6;
}

.time-only-picker thead {
	display: none;
}

.time-only-picker tbody td {
	width: 200px;
}

.timeperiods {
	display: flex;
	flex-wrap: wrap;
}

.timeperiods .timeperiod {
	flex: 1 0 auto;
	width: 18%;
	margin-right: 10px;
	margin-bottom: 10px;
	position: relative;
}

.timeperiods .timeperiod h4 {
	margin-top: 0;
}

.timeperiods .timeperiod a.add::before {
	content: "\f055"; /* plus-circle */
	font-family: FontAwesome;
	padding-right: 1ex;
}

a.timeperiod-exception-all {
    font-style: italic;
}

.link-action-icon.settings::before {
	content: "\f0ad"; /* wrench */
}

.dayview h2 a,
.monthview h2 a {
	padding: 0 1ex;
}

.dayview h2 > span {
	display: inline-block;
	min-width: 24ex;
}

.monthview h2 > span {
	display: inline-block;
	min-width: 16ex;
}

.openevents .section h4:first-child {
	margin-top: 0;
}


table.agenda-table {
	border-spacing: 0.5vw 0;
	table-layout: fixed;
	background-color: white;
	padding: 0.5em 0;
	padding-bottom: 2em;
}

.agenda-table thead th {
	padding-bottom: 1ex;
	font-weight: normal;
	word-break: break-word;
}

.agenda-table {
	width: 100%;
	@for $i from 1 through 7 {
		&.desks-#{$i} {
			thead th { width: (100%/$i)-1%; }
		}
	}
}

.agenda-table tbody tr th {
	box-sizing: border-box;
	padding: 1.2ex 2ex;
	vertical-align: top;
	font-weight: normal;
	&.hour {
		text-align: left;
	}
	a {
		color: #000;
		border: 0;
	}
	&.weekday {
		padding-top: 3rem;
		&.today {
			font-weight: bold;
		}
	}
}

.agenda-table tbody tr:first-child th.weekday {
	// don't add extra padding on top row
	padding-top: 1ex;
}
// hour cells width
.agenda-table thead tr:first-child td:first-child,
.agenda-table tbody tr:first-child th:not(.weekday) {
	width: 5em;
}

.agenda-table tbody tr.odd th.hour,
.agenda-table tbody tr.odd td {
	background-color: #f5f5f5;
	@media print {
		border-top: 1px solid #aaa;
	}
}

.agenda-table tbody tr.odd td.other-month {
	background: transparent;
}


.agenda-table tbody td {
	padding: 0 1ex;
	vertical-align: top;
	position: relative;
	border: 0;
}

@for $i from 1 through 60 {
	table.hourspan-#{$i} tbody td {
		height: calc(#{$i} * 2.5em);
	}
}

.agenda-table tbody td div {
	box-sizing: border-box;
	position: absolute;
	overflow: hidden;
	&.opening-hours, &.exception-hours {
		z-index: 1;
		background:
			linear-gradient(
				135deg,
				hsla(65, 65%, 94%, 0.4) 20%,
				hsla(65, 55%, 92%, 0.7) 70%,
				hsl(65, 50%, 90%) 90%) fixed;
		left: 0;
		width: 100%;
	}
	&.opening-hours {
		border-left: 0.5em solid hsl(57, 65%, 85%);
	}
	&.exception-hours {
		background:
			repeating-linear-gradient(
				135deg,
				hsla(10, 10%, 75%, 0.7) 0,
				hsla(10, 10%, 80%, 0.55) 10px,
				transparent 11px,
				transparent 20px);
		text-align: center;
	}
	&.booking {
		left: 0;
		color: hsl(210, 84%, 40%);
		padding: 1ex;
		background:
			linear-gradient(
				110deg,
				hsla(0, 0%, 100%, 0.85) 0%,
				hsla(0, 0%, 100%, 0.65) 100%)
			currentColor;
		width: 100%;
		border-left: .5em solid;
		border-bottom: 1px solid;
		border-color: currentColor;
		box-shadow: 0 0 0 0 #888;
		transition:
			width 150ms ease-in,
			min-width 150ms ease-in,
			left 150ms ease-in,
			right 150ms ease-in,
			padding 150ms ease-in,
			box-shadow 250ms ease-in;
		z-index: 2;
		&:hover {
			z-index: 4;
			height: auto !important;
			box-shadow: 0 0 1em 0 #888;
		}
		> * {
			color: hsla(0, 0%, 0%, 0.6);
		}
		a {
			// color: currentColor;
			color: hsla(0, 0%, 0%, 0.7);
			border-bottom-color: inherit;

			&:hover {
				color: black;
			}
		}

	}
}

.agenda-table tbody tr td.guardian {
      vertical-align: middle;
      background-image:
            linear-gradient(
                  110deg,
                  hsla(0, 0%, 100%, 0.85) 0%,
                  hsla(0, 0%, 100%, 0.65) 100%);
      &.first-guardian {
            background-color: hsl(30, 100%, 46%);
      }
      &.second-guardian {
            background-color: hsl(120, 57%, 35%);
      }
}

.monthview tbody td div.booking {
	text-indent: -9999px;
	&:not(:hover) {
		padding-top: 0;
		padding-bottom: 0;
	}
	&:hover {
		text-indent: 0;
		left: 0% !important;
		width: 100% !important;
	}
	span.desk {
		display: block;
	}
}

.monthview table.single-desk tbody td div.booking {
	text-indent: 0;
}

.day-view.agenda-table {
	width: auto;
	min-width: 100%;
	thead th {
		min-width: 25px;
	}
	// sticky hour cells
	thead td,
	tbody th {
		position: sticky;
		left: 0;
		z-index: 3;
		background-color: white;
	}
	.booking {
		min-width: 0;
		right: 0;
		left: auto;
		&:hover {
			right: 0;
			min-width: 8.5em;
		}
	}
}

span.start-time {
	font-size: 80%;
}

.date-title {
	cursor: pointer;
	&::after {
		content: "\f073"; /* calendar */
		font-family: FontAwesome;
		padding-left: 1ex;
		padding-right: 0ex;
		opacity: 0.3;
		font-size: 80%;
		transition: opacity 200ms linear;
	}
	&:hover::after {
		opacity: 0.8;
	}
}

.date-picker {
	button, select {
		font-size: 1rem;
	}
	&::before {
		position: absolute;
		content: "";
		display: block;
		width: 1ex;
		height: 1ex;
		border: 1px solid #d0d0d0;
		border-width: 1px 0 0 1px;
		top: -0.6ex;
		left: 5rem;
		background: #FAFAFA;
		transform: rotate(45deg);
	}
	position: absolute;
	background: #FAFAFA;
	border: 1px solid #d0d0d0;
	box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04);
	padding: 1ex 4ex;
	left: 0;
	top: 3ex;
	z-index: 100;
}

ul#id_weekdays {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 42em;
	li {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 10em;
	}
}

ul.objects-list.single-links li a.link-action-icon.refresh {
	margin-right: 3em;
	&::before {
		content: "\f021"; /* refresh */
	}
}

div.ui-dialog form p span.datetime input {
	width: auto;
}

div.booking a.cancel {
	float: right;
}

p.email-subject {
	text-align: center;
}

table.check-bookings {
	td.booking-username {
		width: 30%;
	}
	td.booking-status {
		width: 20%;
	}
	td.booking-actions {
		form {
			display: inline-block;
		}
	}
}

form.check-bookings-filters li {
	display: inline;
	margin-right: 10px;
}

// booking colors
$booking-colors: (
	0: hsl(30, 100%, 46%),
	1: hsl(120, 57%, 35%),
	2: hsl(270, 40%, 50%),
	3: hsl(355, 80%, 45%),
	4: hsl(10, 70%, 30%),
	5: hsl(60, 98%, 30%),
	6: hsl(150, 57%, 25%),
	7: hsl(320, 70%, 60%)
);
.booking-colors {
	margin-top: 1.5rem;
}
.booking-color-label {
	padding: .33em .66em;
	border-radius: 0.33em;
	color: hsla(0, 0%, 100%, 0.9) !important;
	font-weight: bold;
	font-size: .65em;
}
@each $index, $color in $booking-colors {
	.agenda-table tbody td div.booking-color-#{$index} {
	  color: $color;
	}
	.booking-bg-color-#{$index} {
		background-color: $color;
	}
}

form div.widget[id^=id_recurrence] {
      padding-left: 1em;
}

// weekdays buttons group
// display weeks checkboxs to buttons group
.weekdays-buttons-group {
	display: table;
	border-collapse: collapse;
	font-size: 1.2em;
	margin: 0.2em 0px;
	overflow: hidden;
	input {
	  display: none;
	}
	label {
	  display: table-cell;
	  border: 1px solid #386ede;
	  padding: 0.33em 0.66em;
	  color: #386ede;
	  cursor: pointer;
	  font-weight: 500;
	  line-height: 1;

	  &:hover {
		  background-color: #eee;
	  }
	}
	input:checked + label {
	  background-color:  #386ede;
	  color: white;
	  border-color: #386ede white;
	}
}

div.ui-dialog div.widget .datetime input {
	width: auto;
}

table.timesheet {
	width: auto;
	th {
		padding: 0.5em 0.5ex;
		background: none;
		border: 1px solid #f3f3f3;
		&.date {
			width: 20px;
			text-align: center;
		}
	}
	td {
		padding: 0.5em 0.5ex;
		border: 1px solid #f3f3f3;
		&.date {
			text-align: center;
			padding: 0px;
			max-width: 2em;
		}
	}
}

.page_break {
	height: 20px;
}

div.agenda-settings .pk-tabs--container {
	& > div {
		padding: 1ex;
		.panel--buttons a.button {
			line-height: inherit;
		}
	}
}