:root {
	--font-size: 14px;
	--small-font-size: 12px;
	--header-h1-font-size: 16px;
	--header-h2-font-size: 15px;
	--header-h3-font-size: 14px;
	--header-h4-font-size: 14px;
	--font-family: Roboto, Arial, sans-serif;
	--font-awesome: 'Font Awesome 7 Free';
	--condensed-font-family: Roboto-Condensed, Arial Narrow, sans-serif;
	--menu-item-padding: 10px;
	--open-color: var(--text-color);
	--accepted-color: #33cc33;
	--rejected-color: #cc3333;
	--warning-color:  #FF8C00;
	--menu-selection-color: var(--primary-color);
    --menu-selection-background-color: var(--surface-c);
	--background-color: var(--surface-a);
}

.h2-help {
	font-size: var(--header-h2-font-size) !important;
}

#help .ui-c {
	margin-top: 2px;
}

body, .ui-widget, body .ui-widget, body .ui-inputfield {
	font-family: var(--font-family);
	font-size: var(--font-size);
}

.condensed-font--activated, .condensed-font--activated .ui-widget {
	font-family: var(--condensed-font-family);
}

body .ui-card, body .ui-inputfield {
	background: var(--surface-a);
}

body .ui-card .ui-card-title {
	font-size: var(--header-h1-font-size);
}

/* Configuration scheduler */
.fc .fc-scrollgrid-section-sticky > * {
	background: transparent !important;
}

.fc-timegrid-event .fc-event-main, .fc-daygrid-event {
	padding: 2px;
}

.missing-input {
	background-color: var(--red-300) !important;
	color: var(--surface-a) !important;
}

.missing-input::placeholder {
	background-color: var(--red-300) !important;
	color: var(--surface-b) !important;
}

.timetable-event-tutorial:not(.timetable_event_selected)::after {
    font-family: var(--font-awesome);
    font-weight: bold;
    font-size: 100%;
    color: var(--gray-500);
    position: absolute;
    right: 4px;
    bottom: 0;
    content: 'T';
}

.timetable-event-elective:not(.timetable_event_selected)::after {
    font-family: var(--font-awesome);
    font-weight: bold;
    font-size: 100%;
    color: var(--gray-500);
    position: absolute;
    right: 4px;
    bottom: 0;
    content: 'W';
}

.timetable_event_selected > .fc-event-main::after {
	font-family: var(--font-awesome);
	font-weight: bold;
	font-size: 150%;
	color: var(--accepted-color);
	position: absolute;
	right: 4px;
	bottom: 0;
	text-shadow: -1px -1px 0 var(--text-color), 1px -1px 0 var(--text-color), -1px 1px 0 var(--text-color), 1px 1px 0 var(--text-color);
	content: '\f00c';
}

.timetable_event_selected_open > .fc-event-main::after {
	font-family: var(--font-awesome);
	font-weight: bold;
	font-size: 150%;
	position: absolute;
	right: 4px;
	bottom: 0;
	text-shadow: -1px -1px 0 var(--text-color), 1px -1px 0 var(--text-color), -1px 1px 0 var(--text-color), 1px 1px 0 var(--text-color);
	content: '\003f';
}

.timetable-event-postponement-origin {
	font-size: 90%;
}

.timetable-event-time {
	min-width: 2.75em;
}

.timetable-event-room {
	min-width: 3.5em;
}

/* Removes the marking of the current day */
@media (max-width : 991px) {
	body .fc .fc-timegrid-col.fc-day-today, .fc .fc-timegrid-col.fc-day-today {
	    background-color: transparent !important;;
	}
}

.fc-timegrid-event .fc-event-time {
	font-size: 1em;
}
.timetable-event-name {
	font-weight: bold !important;
	white-space: nowrap !important;
}

.timetable-event {
	overflow: hidden;
	white-space: normal !important;
	word-break: break-all;
	-moz-hyphens: auto;
	hyphens: auto;
}

.timetable_event_cancelled span {
	text-decoration: line-through;
	text-decoration-style: solid;
}

.timetable_event_cancelled :not(.timetable-view-month) span:not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: bold;
	font-size: 150%;
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\f05e';
}

.timetable_event_postponed :not(.timetable-view-month) span:not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: bold;
	font-size: 150%;
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\e552';
}

.timetable_event_postponed-and-cancelled :not(.timetable-view-month) span:not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: bold;
	font-size: 150%;
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\f05e\00a0\e552';
}

.timetable_event_postponed_open :not(.timetable-view-month) span:not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: normal;
	font-size: 150%;
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\f059';
}

.timetable_event_language-en :not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: bold;
	font-size: 150%;
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\f57d';
}

.timetable_event_selected.timetable_event_postponed_open :not(.timetable-view-month) > .fc-event-main::after,
	.timetable_event_selected.timetable_event_postponed :not(.timetable-view-month) > .fc-event-main::after,
	.timetable_event_selected.timetable_event_cancelled :not(.timetable-view-month) > .fc-event-main::after {
	right: 24px;
}

.timetable_event_language-en.timetable_event_postponed_open:not(.timetable_event_selected) :not(.timetable-view-month)::after,
	.timetable_event_language-en.timetable_event_postponed :not(.timetable-view-month)::after,
	.timetable_event_cancelled.timetable_event_language-en :not(.timetable-view-month)::after {
	right: 24px;
}

.timetable_event_language-en.timetable_event_postponed_open:not(.timetable_event_selected):not(.timetable-view-month)::after,
	.timetable_event_language-en.timetable_event_postponed:not(.timetable-view-month)::after,
	.timetable_event_cancelled.timetable_event_language-en :not(.timetable-view-month)::after {
	right: 24px;
}

.timetable_event_holiday {
	background-color: var(--surface-200) !important;
}

.fc-prev-button, .fc-next-button, .fc-today-button, .fc-dayGridMonth-button,  .fc-timeGridDay-button, .fc-timeGridWeek-button {
	background: none !important;
	border: 1px solid var(--primary-color) !important;
}

.room_request_open_label {
	font-family: var(--font-awesome);
	font-weight: normal;
}

.room_request_open :not(.timetable-view-month) span:not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: normal;
	font-size: 150%;
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\f059';
}

.room_request_accepted_label :not(.timetable-view-month) {
	font-family: var(--font-awesome);
	font-weight: normal;
	color: var(--accepted-color);
	filter: brightness(0.9);
}

.room_request_accepted :not(.timetable-view-month) span:not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: normal;
	font-size: 150%;
	color: var(--accepted-color);
	filter: brightness(0.9);
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\f058';
}

.room_request_rejected_label :not(.timetable-view-month) {
	font-family: var(--font-awesome);
	font-weight: normal;
	color: var(--rejected-color);
	filter: brightness(0.9);
}

.room_request_rejected :not(.timetable-view-month) span:not(.timetable-view-month):first-child::after {
	font-family: var(--font-awesome);
	font-weight: normal;
	font-size: 150%;
	color: var(--rejected-color);
	filter: brightness(0.9);
	position: absolute;
	right: 2px;
	bottom: 2px;
	content: '\f057';
}

.timetable_event_language-en.timetable_event_postponed_open.timetable_event_selected:not(.timetable-view-month)::after,
	.timetable_event_language-en.timetable_event_postponed.timetable_event_selected:not(.timetable-view-month)::after,
	.timetable_event_language-en.timetable_event_selected.timetable_event_cancelled:not(.timetable-view-month)::after,
	.timetable_event_language-en.room_request_accepted:not(.timetable-view-month)::after,
	.timetable_event_language-en.room_request_open:not(.timetable-view-month)::after,
	.timetable_event_language-en.room_request_rejected:not(.timetable-view-month)::after{
	right: 24px;
}

body .fc .fc-event, body .fc .fc-event .fc-event-main {
	overflow: hidden;
	background: unset;
	border-color: var(--text-color-secondary);
	color: var(--text-color);
	text-align: start;
}

body .card {
	background-color: var(--background-color);
	padding: 1.25rem;
	border-radius: 4px;
	box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 767px) {
	.hide-sm {
		display: none !important;
	}
	.card {
		padding: 0.25rem !important;
	}
}

.first-card {
	margin-bottom: 0 !important;
}

@media (min-width : 768px) and (max-width: 991px) {
	.hide-md {
		display: none !important;
	}
}

@media (min-width : 992px) and (max-width: 1199px) {
	.hide-lg {
		display: none !important;
	}
}

@media (min-width : 1200px) {
	.hide-xl {
		display: none !important;
	}
}

.untislog-required {
	color: var(--rejected-color);
}

.untislog-recommended {
	color: var(--warning-color);
}

.fc-prev-button:not(:hover), .fc-next-button:not(:hover), .fc-today-button:not(:hover):not(.fc-button-primary:disabled),
.fc-dayGridMonth-button:not(:hover),  .fc-timeGridDay-button:not(:hover),
.fc-timeGridWeek-button:not(:hover) {
	background: none !important;
	color: var(--primary-color) !important;
}
.fc-toolbar .fc-button.fc-button-active {
	background-color: var(--primary-color) !important;
	color: var(--primary-color-text) !important;
}
.fc-prev-button:hover, .fc-next-button:hover, .fc-today-button:hover:not(.fc-button-primary:disabled),
.fc-dayGridMonth-button:hover,  .fc-timeGridDay-button:hover,
.fc-timeGridWeek-button:hover {
	background-color: var(--surface-d) !important;
	color: var(--primary-color) !important;
}
.fc-today-button.fc-button-primary:disabled {
	background: none !important;
	color: var(--primary-color) !important;
}
@media (min-width : 992px) {
	body .fc .fc-timegrid-col.fc-day-today, .fc .fc-timegrid-col.fc-day-today, body .fc .fc-daygrid-day.fc-day-today {
		background-color: var(--surface-b) !important;
	}
}
@media (max-width : 991px) {
	body .fc .fc-timegrid-col.fc-day-today, .fc .fc-timegrid-col.fc-day-today {
		background-color: transparent !important;
	}
}
.tt-contextmenu .ui-dialog-titlebar-close, .tt-postponemenu .ui-dialog-titlebar-close {
	margin-top: -3px !important;
}
/* For menus in dialogue objects, because otherwise they appear below the dialogues */
.checkboxmenupanel {
	z-index: 10004 !important;
}

@media (min-width : 1200px) {
	.student-checkbox-selector {
		padding-top: 28px;
	}	
}

/* Buttons in a group */
.ui-inputgroup.ui-buttongroup {
	border-radius: 4px !important;
}

.ui-inputgroup.ui-buttongroup > * {
	border-color: var(--primary-color) !important;
	color: var(--text-color) !important;
	border-right-width: 0;
}	

.ui-inputgroup.ui-buttongroup > :first-child {
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.ui-inputgroup.ui-buttongroup > .ui-button-group-last-button {
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.ui-inputgroup.ui-buttongroup > .ui-button-group-last-button:not(:first-child) {
	border-left: 0;
}

.freeroom-menu-button {
	padding: 0;
}

body .freeroom-menu-button.ui-button-text-icon-right .ui-button-text {
	padding-left: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: left;
}

.ui-datatable-gridlines table {
	border-collapse: collapse;
}

body .ui-datatable.free_rooms_table .ui-datatable-data > tr > td, body .ui-datatable.free_rooms_table thead > tr > th {
	padding: 2px !important;
}

body .ui-datatable.free_rooms_table .ui-datatable-data > tr > td > span:first-child {
	width: 100%;
}

/* Prevents the selection of a table cell */
.ui-datatable-data td[role="gridcell"]:focus {
	outline: unset !important;
	border: unset !important;
}

/* Buttons in the display bar */
.viewtype-button {
	width: 35px !important;
	max-width: 35px !important;
	min-width: 35px !important;
}

.bookmark {
	width: 71px !important;
	max-width: 71px !important;
	background-color: var(--background-color);
}

.bookmark > button {
	background-color: var(--background-color);
	color: var(--text-color);
	width: 35px !important;
	max-width: 35px !important;
	min-width: 35px !important;
}

.bookmark > button:hover {
	background-color: rgba(215, 35, 5, 0.04);
	color: var(--text-color);
}

.bookmark > button:first-child {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
	padding: 0.5rem;
	font-size: var(--font-size); 
}

body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title.ui-state-highlight {
	color:  var(--surface-a);
}

@media (max-width: 767px) {
	.search_panel {
		width: 85% !important;
		max-width: 85% !important;
	}
}
@media (min-width: 768px) {
	.search_panel {
		width:600px !important;
		max-width: 600px !important
	}
}

/* Adaptation of the tooltip timeline to the normal tooltip */
body .vis-timeline .vis-tooltip {
	box-sizing: border-box;
	box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
	border: none;
	padding: 3px 10px;
	font-family: var(--font-family);
	font-size: var(--font-size);
}
body .theme-dark .vis-timeline .vis-tooltip {
	background: var(--surface-border);
	color: var(--text-color);
}
body .theme-white .vis-timeline .vis-tooltip {
	background: var(--text-color);
	color: var(--surface-0);
}

.number-input input, .number-input, .ui-inputnumber input {
	text-align: right;
}

@media (min-width: 768px) {
	.checkbox-in-filter {
		padding-top: 2rem;
	}
	.button-in-filter {
		margin-top: 1.5rem !important;
	}
}

/* Base layout */
.layout-wrapper {
	background-color: var(--surface-b);
	margin: -4px;
	max-width: 100vw;
}

.layout-topbar {
	background: var(--surface-a);
	height: 3rem;
	max-height: 3rem;
	padding: 0 1rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background-color: var(--surface-a);
	border-bottom: 1px solid var(--surface-border);
}

.layout-topbar .topbar-left h1, .layout-topbar .topbar-left h1 label {
	font-weight: 600;
	font-size: var(--header-h1-font-size) !important;
	max-width: calc(100vw - 90px);
	text-overflow: ellipsis;
}

.layout-sidebar {
	width: 12rem;
	min-width: 12rem;
	border-right: 1px solid var(--surface-border);
	background-color: var(--surface-a);
	z-index: 1018;
}

.layout-sidebar .logo, .layout-sidebar .logo-image {
	text-align: center;
}

.layout-sidebar .app-name {
	vertical-align: middle;
	font-size: 1.5rem;
}

.layout-sidebar .ui-menu {
	width: 100%;
	border: none;
	padding: 0;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {
	width: 20px;
}

.ui-menu .ui-menu-parent .ui-menu-child {
	width: 16em;
}

.layout-footer {
	background: var(--surface-a);
	height: 3rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border-top: 1px solid var(--surface-border);
}

@media (max-width: 991px) {
	.layout-sidebar {
		display: none;
	}
	.layout-footer, .layout-topbar {
		padding: 0 0.5em;
	} 
	.layout-content {
		background-color: var(--surface-b);
		padding: 0;
	}
	.topbar-left {
		vertical-align: middle;
	}
	body .ui-menu.ui-slidemenu .ui-slidemenu-backward .ui-icon-triangle-1-w {
		top: 0;
	}
	.layout-topbar .topbar-left h1 {
		padding-top: 4px;
		padding-bottom: 0;
		padding-left: 0.5em;
	}
}
@media (min-width: 768px) {
	.layout-content {
		padding: 1rem;
	}
	.layout-footer, .layout-topbar {
		padding: 0 1rem;
	} 
}

body .ui-selectonemenu, .back-button {
	background-color: var(--background-color);
}

.back-button {
	background-color: var(--background-color) !important;
}

.back-button:hover {
	background-color: var(--background-color) !important;
}


.back-button > a {
	text-decoration: none;
}

.back-button.ui-state-hover {
	background-color: var(--primary-50) !important;
}

.layout-menu-container {
	position: fixed !important;
	min-width: calc(12rem - 4px);
	width: calc(12rem - 4px);
	top: 4rem;
}

.sidebar-logo {
	position: fixed !important;
	min-width: calc(12rem - 4px);
	width: calc(12rem - 4px);
}

body .ui-datatable.ui-widget th {
	background-color: var(--surface-b);
}

.ui-outputlabel {
	background: none !important;
}
body .ui-fluid .ui-selectonemenu-label, body .ui-inputgroup .ui-inputgroup-addon,
body .ui-button.ui-button-icon-only .ui-button-text, body .ui-inputfield,
body .ui-button.ui-button-text-icon-left .ui-button-text,
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield {
	padding: 0.5rem;
}
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token {
	padding-top: 0.15rem;
}
body .ui-button.ui-button-text-icon-left .ui-button-text {
	padding-left: 2rem;
}
body .ui-overlaypanel .ui-overlaypanel-content {
	padding: 1rem;
}
h4 {
	margin: 0 0 1rem;
}
.summary-reduction-table, .summary-assignment-table {
	width: 100% !important;
}
.summary-reduction-table td {
	border: none !important;
	padding: 0.2rem 0.5rem 0.2rem 0.5rem !important;
}
.summary-reduction-table td:first-child {
	width: 15em !important;
}
.summary-reduction-table td:last-child {
	width: calc(100% - 21em) !important;
}
.summary-reduction-table td:nth-child(2) {
	border: 1px solid var(--surface-d) !important;
	width: 4em !important;
}
.summary-reduction-table tr:last-child > td:nth-child(2) {
	background-color: var(--surface-b) !important;
}
.summary-assignment-table td, .summary-assignment-table th {
	border: 1px solid var(--surface-d) !important;
	font-weight: normal !important;
}
.assignments tr th, .reductions tr th, .supervisions tr th {
	vertical-align: top !important;
}
.reductions tr td {
	vertical-align: top !important;
}
.assignments tr td {
	vertical-align: middle !important;
}
.sws-col {
	text-align: right !important;
}
th.overview-col-count {
	text-align: center !important;
}
th.overview-col-header2 {
	vertical-align: top !important;
}

body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield {
	padding: .2rem .2rem !important;
	padding-right: 2.75rem;
	max-height: 150px;
	overflow-y: scroll;
}

body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield > .ui-selectcheckboxmenu-emptylabel {
	padding: .3rem !important;
}

.external-link {
	color: var(--primary-color);
	text-decoration: none;
}

.external-link:hover {
	color: var(--text-color);
	text-decoration: underline;
}

.link a {
	color: var(--primary-color);
	text-decoration: none;
}

.link a:hover {
	color: var(--text-color);
	text-decoration: underline;
}


.ui-datatable.smallinput .ui-inputfield, .ui-datatable-data.smallinput .ui-inputfield,
.ui-datatable.smallinput .ui-button-text, .ui-datatable-data.smallinput .ui-button-text {
	padding: 4px !important;
}

body .ui-datatable.smallinput .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield > .ui-selectcheckboxmenu-emptylabel,
body .ui-datatable-data.smallinput .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield > .ui-selectcheckboxmenu-emptylabel {
	padding: 0 !important;
}

.smallinput .ui-selectcheckboxmenu-token, body .smallinput .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield > .ui-selectcheckboxmenu-emptylabel {
	padding-top: 0.025rem !important;
	padding-bottom: 0.025rem !important;
}

.ui-tooltip {
	z-index: 10100 !important;
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page {
	min-width: 3rem !important;
}

.fc-theme-standard .fc-list-day-cushion {
	background-color: var(--surface-400) !important;
}

.fc .fc-list-sticky .fc-list-day > th {
	z-index: 1;
}

.schedule-tooltip {
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
    margin: 2px;
    background: rgb(85, 85, 85);
}

#body > div.ui-tooltip.ui-widget.ui-widget-content {
    box-shadow: none;
    font-size: .875rem;
    padding: .5rem;
    background: rgb(85, 85, 85);
    color: rgba(255, 255, 255, .87);;
    border-radius: var(--border-radius);
}