html,body {
	margin:0;
	padding:0;
	font-family:verdana,arial,helvetica,sans;
	font-size:9pt;
}

#sidepanel {
	margin-left:1em;
	user-select:none;
}

#topbar {
	display:flex;
	align-items:center;
	padding:1em;
}

#notification-tray {
	position:fixed;
	top:5em;
	right:0;
	bottom:0;
	width:24em;
	border:1px solid black;
	background:#fff;
	box-shadow:0 0 1em #00000088;
	z-index:1001;
	font-size:11pt;
}

.notification-item {
	margin:0.5em 0.8em;
}

.notification-item .notification-header {
	display:block;
	margin:0 0 0.5em 0;
}


#schedule {
	overflow:hidden;
	display:flex;
	margin-bottom:1em;
}

#buttonbar {
	display:grid;
	grid-template-columns:50% 50%;
	gap:0.5em;
	margin-bottom:1em;
}	

#buttonbar > a , .printables > a {
	display:inline-block;
	background-color:#acacac;
	color:#fff;
	text-decoration:none;
	border-radius:0.5em;
	padding:0.5em;
	font-weight:bold;
	text-align:center;
}

.printables a {
	line-height:1.3em;
	margin-bottom:1px;
}

.popup-menu {
	display:inline-block;
	position:relative;
}

.popup-menu > a {
	display:inline-block;
	padding:0.6em 1em;
	background-color:#cacaca;
	font-weight:bold;
	border-radius:0.5em;
}

.popup-menu:hover  > a {
	background-color:#fa0;
	color:#fff;
}

.popup-menu ul {
	display:none;
	position:absolute;
	min-width:10em;
	width:max-content;
	z-index:1002;
	background-color:#fff;
	box-shadow:0.7em 0.7em 1em #00000088;
	border-radius:0.5em;
	padding:1em;
	list-style:none;
	
	right:0;
	margin:0;
	padding:0;
	overflow:hidden;
}

.popup-menu a {
	text-decoration:none;
	color:#555;
}
.popup-menu ul a {
	display:block;
	padding:0.7em 1em;
	text-align:left;
	color:#555;
	font-weight:bold;
}
.popup-menu ul a:hover {
	background-color:#fa0;
	color:#fff;
}	

.popup-menu ul.hidden {
	display:none;
}	

#buttonbar > a:hover, .printables > a:hover {
	background-color:#fa0;
}

.planner-main {
	flex-grow:1;
	padding: 0 1em;
}

.planner {
	overflow:hidden;
	flex:4;
}
/*
div.day-heading {
	display:none;
}

.day.oob {
	display:none;
}
*/
.short-day {
	display:none;
}


.week,.planner {
	display:grid;
	grid-template-columns: repeat(7,14.285%);
}

.day {
	padding:0.2em;
	background-color:#acacac;
}
.day.selected {
	background-color:#fff;
	color:#000;
}

.slot {
	position:relative;
	min-height:1em;
	background-color:#acacac;
	text-align:left;
	user-select:none;
}

.slot.filled {
	background-color:#555;
}

.slot_group .appointment {
	display:none;
}

.slot_group .appointment .caption {
	cursor:pointer;
}

.slot_group.active .slot {
	display:none;
}

.slot_group.active .appointment {
	display:block;
}

.slot .ui-droppable-hover {
	margin-bottom:1em;
	background-color:red;
}	

.planner-bar {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.printables {
	text-align:right;
}

.planner,.week,.day,.slot,.appointment {
	border: 1px solid black;
	border-collapse:collapse;
	margin:-1px 0 0 -1px;
}

.client_proxy,.app_proxy {
	width:10em;
	height:1em;
	border:1px solid black;
	box-shadow:3px 3px 5px;
	background-color:#fff;
}

#results {
	padding:1em 0 0 0;
}

#results ul {
	list-style:none;
	margin:0;
	padding:0;
}

#results ul li {
	border:1px solid #aaa;
	font-size:10pt;
	padding:0.4em;
	margin:0 0 0.7em 0;
	border-radius:0.8em;
}

#results_list li:hover {
	background-color:#fa0;
	color:#fff;
}

.results-item {
	width:auto;
}

.popup-container {
	text-align:center;
	padding:2em;
}

.popup {
	display:inline-block;
	background-color:#ccc;
	border-radius:0.6em;
	padding:2em;
	box-shadow: 1em 1em 1em;
}
.popup-content div {
	margin:0 0 1em 0;
}

.popup form {
	display:grid;
	grid-gap:0.3em;
}
.popup h1 {
	margin:-0.8em 0 0.5em;
	color:#555;
	font-size:16pt;
}
.popup-content label {
	text-align:left;
	font-size:10pt;
}
label.error {
	color:red;
	font-weight:bold;
}


.login {
	display:grid;
	grid-template-columns:0.3fr 1fr;
	margin:0 0 1em 0;
	gap:0.3em 0.1em;
	align-items:baseline;
}

.login-container {
	text-align:center;
}

.login-dialog {
	display:inline-block;
	
}


#topbar {
	display:grid;
	grid-template-columns:1fr 1fr;
}

#topbar div {
	display:inline-block;
}

.date-info 
{
	text-align:center;
}

.date-info a {
	font-size:16pt;
	font-weight:bold;
	text-decoration:none;
	color:#555;
}

.user-info {
	text-align:right;
}

.user-info a {
	text-decoration:none;
	color:#555;
	font-weight:bold;
	font-size:12pt;
	vertical-align:middle;
	line-height:1.3em;
}	

.day {
	display:flex;
	flex-direction:column;
}

.day-heading {
	display:block;
	text-align:right;
	padding:0.2em 1em;
}

.slot-container {
	display:flex;
	flex-direction:column;
	flex:1;
}



.slot, .appointment {
	flex:1;
	font-size:10pt;
	padding:0.2em 0.5em;
	background-color:#ccc;
	color:#595959;
	position:relative;

}

.appointment {
	background-color:#5757B5;
	color:#fff;
}
.appointment.selected {
	background-color:#fff;
	color:#000;
}

.appointment .notifications {
	position:absolute;
	right:0;
	top:0;
	margin-right:0.4em;
	margin-top:0.1em;
	color:#fff;
}

.notifications .warning,
.notifications .notify_on,
.notifications .notify2_on,
.notifications .confirm_on
{
	display:none;
}

.appointment.warning {
	background-color:#f00;
}

.appointment.state_ok {
	background-color:#60c160;
}

.appointment.notified .notifications .notify_on {
	display:inline-block;
}

.appointment.notified .notifications .notify_off {
	display:none;
}

.appointment.notified2 .notifications .notify2_on {
	display:inline-block;
}

.appointment.notified2 .notifications .notify2_off {
	display:none;
}

.appointment.state_confirmed .notifications .confirm_on {
	display:inline-block;
}

.appointment.state_confirmed .notifications .confirm_off {
	display:none;
}

.appointment.warning .warning {
	display:inline-block;
	color:red;
}

#appointment .popup {
	width:50%;
}

#appointment_details {
	display:flex;
	flex-direction:row;
	gap:0.3em;
}

#appointment_client {
	flex:1;
	display:grid;
	grid-template-columns: max-content 1fr;
	text-align:left;
	gap:0.4em;
	height:min-content;
}

#appointment_notes {
	flex:1;
	display:flex;
	flex-direction:column;

}

.appointment_note {
	border:1px solid #555;
	margin:0 0 0.5em 0;
	font-size:11pt;
}

.note_source {
	display:block;
	text-align:left;
}

.note_content {
	display:block;
	text-align:left;
}

.popup input[type=button], .popup input[type=submit] {
	display:block;
	border:none;
	border-radius:0.4em;
	padding:0.7em;
	margin:0 0 0.5em 0;
	font-weight:bold;
	width:100%;
}

.popup input[type=submit] {
	background-color:#3d843d;
	color:#fff;
}

.popup input[type=button]:hover,.popup input[type=submit]:hover  {
	background-color:#fff;
	color:#000;
}

.serious {
	background-color:#d02929;
	color:#fff;
}

#client_container {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1em;
}