#appointment-container {
	padding: 10px;
}

#appointment-left {
	padding-left: 0;
	width: 300px;
}
#appointment-types {
	position: absolute;
	top: 4px;
	width: 800px;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	vertical-align: middle;
	z-index: 100;
}

#appointment-types .fc-event {
	display: inline-block;	
	padding: 4px 8px;
}

.appointment-types label {
	color: white;
	font-size: 1.2em;
}

.appointment-types input[type='radio'],
.appointment-types input[type='checkbox'] {
  transform: scale(1.3) translate(0, 2px);
  accent-color: white;
	margin-right: 2px;
}

#appointment-calendar {
	position: absolute;
	top: 0;
	bottom: 0;
}

#appointment-calendar .fc-event {
	cursor: pointer;
	margin: 0;
	color: white;
}

#searchPlayer {
	box-sizing: border-box;
}

#players {
	position: absolute;
	top: 4px;
	bottom: 0px;
	width: 95%;
	border: 1px solid #ccc;
	background: #eee;
	text-align: left;
}

#players-top {
	padding: 8px;
}

#players-bottom {
	position: absolute;
	top: 50px;
	bottom: 0;
	width: 100%;
	padding: 0 10px 6px 10px;
	overflow-y: auto;
	/* doesn't work: https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/6433475#6433475 */
	overflow-x: visible;
	font-size: 1.2em;
}
.navbar-create-appointment-dropdown {
	position: absolute;
  left: unset;
  right: 20px;
  top: -5px;
  border: none;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.6);
}
.navbar-create-appointment.dropdown-toggle::after {
	display: none;
}
.navbar-create-appointment.dropdown-toggle i.fa {
	margin-top: 2px;
}

#players-bottom .fc-event.player:nth-last-child(-n+3) .navbar-create-appointment-dropdown {
	top: -70px;
}
.navbar-create-appointment-dropdown li.menu-item a {
  color: white !important;
}

#players .fc-event {
	margin: 4px 0px;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
}

#appointment-container .player {
	padding-left: 4px; 
	padding-right: 4px;
}

#appointment-right {
	position: relative;
	height: 100%;
	padding: 0;
}

#appointment-container .fc-day-grid-event {
	margin: 1px 3px 2px 3px !important;
}

.appointment-dialog .modal-dialog,
.appointment-dialog .modal-dialog .modal-content {
  width: 600px;
}
.appointment-dialog.counter .modal-dialog,
.appointment-dialog.counter .modal-dialog .modal-content {
	width: 250px;
}
.appointment-dialog:not(.counter) .modal-dialog .modal-body {
  min-height:200px;
}
.appointment-dialog:not(.counter) .modal-dialog .flex-left {
	width: 300px;
  padding-right: 20px;
}
.appointment-dialog.counter .modal-dialog .flex-left {
  width: 100%;
}
.appointment-dialog .modal-header {
	display: block;
	font-size: 2em;
	color: white;
	padding: 5px;
	text-align: center;
	font-weight: bold;
}
.appointment-dialog .fc-event {
	font-size: 1.2em;
}


.appointment-dialog.match .modal-header,
.appointment-type.match {
	background-color: var(--appointment-match-color);
  border-color: var(--appointment-match-color);
}
.appointment-dialog.counter .modal-header,
.appointment-type.counter {
  background-color: var(--appointment-counter-color);
  border-color: var(--appointment-counter-color);
}
.appointment-dialog.single .modal-header,
.appointment-type.single {
  background-color: var(--appointment-single-color);
  border-color: var(--appointment-single-color);
}
.appointment-dialog.duty .modal-header,
.appointment-type.duty {
  background-color: var(--appointment-duty-color);
  border-color: var(--appointment-duty-color);
}