/* Replace Bootstrap font stack */
html,
blockquote,
input,
button,
select,
textarea,
.navbar-search .search-query,
.jqx-widget,
.selectpicker.inner,
.popover {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/*	font-family:'Open Sans', Arial, Helvetica, Geneva, sans-serif;*/
	font-size:13px;
	line-height:1.5;
}
body {
    font-family:inherit;
    font-size:inherit;
	line-height:inherit;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/*	font-family:'Open Sans', Calibri, Arial, Helvetica, Geneva, sans-serif;*/
}
h1 {
	font-size:30px;
    font-weight:100;
	margin-bottom:30px;
	margin-top:30px;
	line-height:1.25;
}
h1.callout {
	font-weight:100;
	font-size:36px;
	margin-top:0;
}
h2 {
	font-size:22px;
    font-weight:100;
	margin-bottom:24px;
	margin-top:24px;
	line-height:1.25;
}
h3 {
	font-size:18px;
    font-weight:100;
	margin-bottom:20px;
	margin-top:20px;
}
h4 {
	font-size:16px;
    font-weight:100;
	margin-bottom:18px;
	margin-top:18px;
}
h5 {
	font-size:14px;
    font-weight:100;
	margin-bottom:18px;
	margin-top:18px;
}
.form-group h5,
.panel h5 {
	font-size:13px;
    font-weight:100;
	margin-bottom:16px;
	margin-top:16px;
}

h4.modal-title,
.modal-title h4 {
	font-weight:300;
}
h4.panel-title,
.panel-title h4 {
	font-weight:300;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */
.full-width {
	width:100%;
}
.min-full-width {
	min-width:100%;
}
.auto-width {
	width:auto;
}
.nowrap {
	white-space:nowrap;
	display:inline-block;
}
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:default;
}
pre {
	overflow-x:auto;
}
td.nowrap {
	display:table-cell;
}
textarea.resize-none {
	resize:none;
}
textarea.resize-vertical { 
	resize:vertical;
}
textarea.autosize-vertical {
	overflow-y:auto;
}
/* Intended for smaller text under a heading */
.hsub {
	font-size:66.6666667%;
}
.hsub:before {
	content: '\A';
	white-space: pre-wrap;
}
.placeholder {
	color:#999;
}
.text-bold {
	font-weight:bold;
}
.text-normal {
	font-weight:normal;
}
.inline {
	display:inline;
}
.word-break-break-all {
    word-break:break-all;
}
/* Horizontally center an svg in a div */
.svg-center>svg {
	display:block;
	margin:0 auto;
}
a:active,
a:focus,
a:hover {
	outline:none;
}
a.no-link,
a.no-link:focus,
a.no-link:hover {
	text-decoration:none;
}
label {
	cursor:pointer;
	margin-bottom:0;
}

/* Links in alerts or in texts with semantic colors get the same text color, and get underline: */
.alert a,
.text-success a,
.text-info a,
.text-warning a,
.text-danger a {
	text-decoration:underline;
}
/* Exception for buttons, dropdowns and inline edit fields in alerts: */
.alert a.btn,
.alert .dropdown-menu a,
.alert a.inline-edit {
	text-decoration:none;
}

.alert .text-muted {
	color:rgba(0,0,0,0.45);
}

/* Add a top margin to a Bootstrap row */
.row.add-top-margin {
	margin-top:15px;
}

ol.spacious-list>li,
ul.spacious-list>li {
	margin:5px 0;
}


.radio.radio-horizontal {
	display: inline-block;
}
.radio.radio-horizontal+.radio.radio-horizontal {
	margin-left:25px;
}

a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
    border-color: var(--theme-color-focus1);
}

/* ==========================================================================
   Locale-based visibility of content
   ========================================================================== */

.l-block,.l-inline-block,.l-inline,.l-flex {
	display:none!important;
}
html[lang="ar"] .l-block[lang="ar"],
html[lang="bg"] .l-block[lang="bg"],
html[lang="bs"] .l-block[lang="bs"],
html[lang="de"] .l-block[lang="de"],
html[lang="el"] .l-block[lang="el"],
html[lang="en"] .l-block[lang="en"],
html[lang="es"] .l-block[lang="es"],
html[lang="fi"] .l-block[lang="fi"],
html[lang="fr"] .l-block[lang="fr"],
html[lang="he"] .l-block[lang="he"],
html[lang="hr"] .l-block[lang="hr"],
html[lang="it"] .l-block[lang="it"],
html[lang="nl"] .l-block[lang="nl"],
html[lang="no"] .l-block[lang="no"],
html[lang="pl"] .l-block[lang="pl"],
html[lang="pt"] .l-block[lang="pt"],
html[lang="ro"] .l-block[lang="ro"],
html[lang="sl"] .l-block[lang="sl"],
html[lang="sv"] .l-block[lang="sv"],
html[lang="uk"] .l-block[lang="uk"] {
	display:block!important;
}
html[lang="ar"] .l-inline-block[lang="ar"],
html[lang="bg"] .l-inline-block[lang="bg"],
html[lang="bs"] .l-inline-block[lang="bs"],
html[lang="de"] .l-inline-block[lang="de"],
html[lang="el"] .l-inline-block[lang="el"],
html[lang="en"] .l-inline-block[lang="en"],
html[lang="es"] .l-inline-block[lang="es"],
html[lang="fi"] .l-inline-block[lang="fi"],
html[lang="fr"] .l-inline-block[lang="fr"],
html[lang="he"] .l-inline-block[lang="he"],
html[lang="hr"] .l-inline-block[lang="hr"],
html[lang="it"] .l-inline-block[lang="it"],
html[lang="nl"] .l-inline-block[lang="nl"],
html[lang="no"] .l-inline-block[lang="no"],
html[lang="pl"] .l-inline-block[lang="pl"],
html[lang="pt"] .l-inline-block[lang="pt"],
html[lang="ro"] .l-inline-block[lang="ro"],
html[lang="sl"] .l-inline-block[lang="sl"],
html[lang="sv"] .l-inline-block[lang="sv"],
html[lang="uk"] .l-inline-block[lang="uk"] {
	display:inline-block!important;
}
html[lang="ar"] .l-inline[lang="ar"],
html[lang="bg"] .l-inline[lang="bg"],
html[lang="bs"] .l-inline[lang="bs"],
html[lang="de"] .l-inline[lang="de"],
html[lang="el"] .l-inline[lang="el"],
html[lang="en"] .l-inline[lang="en"],
html[lang="es"] .l-inline[lang="es"],
html[lang="fi"] .l-inline[lang="fi"],
html[lang="fr"] .l-inline[lang="fr"],
html[lang="he"] .l-inline[lang="he"],
html[lang="hr"] .l-inline[lang="hr"],
html[lang="it"] .l-inline[lang="it"],
html[lang="nl"] .l-inline[lang="nl"],
html[lang="no"] .l-inline[lang="no"],
html[lang="pl"] .l-inline[lang="pl"],
html[lang="pt"] .l-inline[lang="pt"],
html[lang="ro"] .l-inline[lang="ro"],
html[lang="sl"] .l-inline[lang="sl"],
html[lang="sv"] .l-inline[lang="sv"],
html[lang="uk"] .l-inline[lang="uk"] {
	display:inline!important;
}
html[lang="ar"] .l-flex[lang="ar"],
html[lang="bg"] .l-flex[lang="bg"],
html[lang="bs"] .l-flex[lang="bs"],
html[lang="de"] .l-flex[lang="de"],
html[lang="el"] .l-flex[lang="el"],
html[lang="en"] .l-flex[lang="en"],
html[lang="es"] .l-flex[lang="es"],
html[lang="fi"] .l-flex[lang="fi"],
html[lang="fr"] .l-flex[lang="fr"],
html[lang="he"] .l-flex[lang="he"],
html[lang="hr"] .l-flex[lang="hr"],
html[lang="it"] .l-flex[lang="it"],
html[lang="nl"] .l-flex[lang="nl"],
html[lang="no"] .l-flex[lang="no"],
html[lang="pl"] .l-flex[lang="pl"],
html[lang="pt"] .l-flex[lang="pt"],
html[lang="ro"] .l-flex[lang="ro"],
html[lang="sl"] .l-flex[lang="sl"],
html[lang="sv"] .l-flex[lang="sv"],
html[lang="uk"] .l-flex[lang="uk"] {
	display:flex!important;
}

/* Session type / accreditation  based visibility of content */
.d-se-anonymous, .d-se-registered, .d-ce-accr-status-granted,
.d-flex-se-anonymous, .d-flex-se-registered, .d-flex-ce-accr-status-granted,
.d-inline-se-anonymous, .d-inline-se-registered, .d-inline-ce-accr-status-granted,
.d-inline-block-se-anonymous, .d-inline-block-se-registered, .d-inline-block-ce-accr-status-granted {
	display:none!important;
}
html.se-anonymous .d-se-anonymous,
html.se-registered .d-se-registered,
html.ce-accr-status-granted .d-ce-accr-status-granted {
	display:block!important;
}
html.se-anonymous .d-flex-se-anonymous,
html.se-registered .d-flex-se-registered,
html.ce-accr-status-granted .d-flex-ce-accr-status-granted {
	display:flex!important;
}
html.se-anonymous .d-inline-se-anonymous,
html.se-registered .d-inline-se-registered,
html.ce-accr-status-granted .d-inline-ce-accr-status-granted {
	display:inline!important;
}
html.se-anonymous .d-inline-block-se-anonymous,
html.se-registered .d-inline-block-se-registered,
html.ce-accr-status-granted .d-inline-block-ce-accr-status-granted {
	display:inline-block!important;
}

/* Content only visible if program lines are excluded */
.d-excluded-program-lines {
	display:none;
}
html.has-excluded-program-lines .d-excluded-program-lines {
	display:block;
}

.dropdown .set-locale {
	text-transform: capitalize;
}


/* ========================================================================================
   Content only visible for the system developer (not secure - only for non-sensitive data)
   ======================================================================================== */

.dev-only, .dev-only-block, .dev-only-inline, .dev-only-inline-block {
	display:none;
}
body.dev .dev-only,
body.dev .dev-only-block {
	display:block;
}
body.dev .dev-only-inline {
	display:inline;
}
body.dev .dev-only-inline-block {
	display:inline-block;
}


/* ==========================================================================
   Filmchief icons (on inline <svg> elements)
   ========================================================================== */
.fci {
	width:1.3em;
	height:1.3em;
	margin-top:-0.3em;
	vertical-align: middle;
}


/* ==========================================================================
   Embedded video
   ========================================================================== */

.video-wrapper {
	position:relative;
	height:0;
}
.video-wrapper.ready {
	padding-bottom: 56.25%; /* 16:9 */
}
.video-wrapper>iframe {
	position:absolute;
	top:0;
	left:0;
	opacity:1; /* hide the video wrapper while initializing */
}
.video-wrapper.ready>iframe {
	opacity:1;
	width:100%;
	height:100%;
}
.fc-panel .video-wrapper {
	margin-bottom:15px;
}

/* ==========================================================================
   Dragging 
   ========================================================================== */
/* Don't allow text selection on the drag handle */
.drag-handle {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Create the illusion of elevation while dragging */
.drag-target.drag-in {
	-webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    0px 15px 30px 0px rgba(0, 0, 0, 0.5);
	box-shadow:         0px 15px 30px 0px rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   Global style overrides
   ========================================================================== */

/* 
Setting the height of html and body elements to 100% makes the footer stick to the bottom 
of the window if the page is short. Unfortunately, it also makes the page jump a bit sideways
when a modal appears, as a result of the disappearing vertical scrollbar. The solution is
to set the body height back to auto when the modal-open class is set on the body element.
Todo: a downside of this solution is that the sticky page footer becomes no longer sticky when
a modal dialog appears, which may make the footer jump up to the page end.
UPDATE 2019-07-03: removing the body.modal-open { height: auto; } rule seems to be an improvement!
*/
html,body {
	height:100%;
}
html.get_iframe {
	height:auto;
}
/* The iframe is expected to resize to the full document height, so it should not have a vertical scrollbar: */
html.get_iframe > body {
	overflow-y:hidden;
}
/* Exception to the above rule: the iframe for pages embedded in a mobile app should have a vertical scrollbar if needed: */
html.get_iframe_app > body {
	overflow-y:auto;
}
html.get_iframe > body > .row {
	margin-left:0;
	margin-right:0;
}
/*
body.modal-open {
	height:auto;
}
*/
body {
	-moz-osx-font-smoothing: grayscale; /* Fix for Firefox on MacOSX, that renders typekit fonts a bit too bold */
}

.modal.in .modal-dialog {
	transform:inherit; /* Bootstrap fix for Chrome 88 on MacOSX, the existing css rule would cause a dropdown on a modal to be cut off as if there was a hidden overflow) */
}
.modal,.modal-dialog {
	max-width:100vw; /* A modal should not be allowed to be wider than the screen */
}
@media (max-width: 767px) {
	.modal-dialog {
		width: 600px;
		margin: 0;
	}
}


.page-container {
	min-height:100%;
	position:relative;
}



body.flex-page-container .page-container {
	display:flex;
	flex-flow:column;
	height:100%;
}
body.flex-page-container .page-container>.content-body {
	flex:1; /* fill all remaining vertical space since no flex values are set to other children */
}

/* For grid-based lists on list pages, overflow is dealt with on individual child containers */
body.flex-page-container.flex-page-container-list .page-container {
	overflow:hidden;
}

/* Fill out .content-body, .page-content and .content-body-wrapper elements to full remaining height for full-page list views: */
body.flex-page-container.flex-page-container-list .page-container>.content-body {
	display:flex;
	flex-flow:column;
	height:100%;
	
	/* To prevent a published list from being out of reach (pushed out of the viewport): */
	overflow-y:auto;
	overflow-x:hidden;
}
/* New 2023-06-29: on external pages, apply full height applied on all flex-page-container pages: */
html.external body.flex-page-container .page-container>.content-body>.col-page {
    height: 100%;
    display: flex;
	padding-left:0;
    padding-right:0;
}
body.flex-page-container.flex-page-container-list .page-container>.content-body>.container-full {
	padding-right:0;
	display:flex;
}
body.flex-page-container.flex-page-container-list .page-container>.content-body>.container-full.list-content {
	height:100%;
}
/* New 2023-09-30: on external pages, if the .col-page is also a .container-full, reinstate the 15px left/right padding required for bootstrap columns: */
html.external body.flex-page-container .page-container>.content-body>.col-page.container-full {
	padding-left:15px;
	padding-right:15px;
}
@media (max-width: 767px) {
	body.flex-page-container.flex-page-container-list .page-container>.content-body>.container-full {
		padding-left:0;
	}
}
body.flex-page-container.flex-page-container-list .page-container>.content-body>.page-content {
	flex:1; /* fill all remaining vertical space since no flex values are set to other children */
	display:flex;
	flex-flow:column;
	height:100%;
}
body.flex-page-container.flex-page-container-list .page-container>.content-body>.page-content>.content-body-wrapper {
	flex:1; /* fill all remaining vertical space since no flex values are set to other children */
}
body.flex-page-container.flex-page-container-list .page-container>.content-body .page-title {
    margin-top:0;
}
body.flex-page-container.flex-page-container-list .collection-and-filters {
	position:relative;
	height:100%;
}
body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-filters-panel {
	position:absolute;
	left:0;
	top:0;
	bottom:15px;
	width:300px;
	margin-bottom:0;
}
body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-filters-panel>.panel {
	display:flex;
	flex-flow:column;
	height:100%;
	margin-bottom:0;
}
body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-filters-panel>.panel>.panel-body {
	flex:1; /* fill all remaining vertical space since no flex values are set to other children */
}
body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-table-wrapper {
	position:absolute;
	left:315px;
	right:0;
	top:0;
	bottom:0;
	
	display:flex;
	flex-flow:column;
}
body.flex-page-container.flex-page-container-list .collection-and-filters .fc-filters-panel.hidden + .fc-table-wrapper {
	left:0;
}

body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-table-wrapper>.fc-collection-view {
	/* flex:1; fill all remaining vertical space since no flex values are set to other children */
	overflow-y: auto;
}
body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-table-wrapper>.fc-tiles {
	margin-right:0;
}

.expanded-list-close {
	display:none;
}

@media (max-width: 767px) {
	body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-filters-panel {
		width:200px;
	}
	body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-table-wrapper {
		left:215px;
	}

	/* Expanded list (mobile only): */
	body.expanded-list .expanded-list-close {
		display:inline-block;
		padding:8px 12px;
		float:right;
	}

	body.expanded-list .fc-table-wrapper,
	body.flex-page-container.flex-page-container-list.expanded-list .collection-and-filters>.fc-table-wrapper {
		position:fixed;
		left:0;
		z-index:1001;
		background-color:#fff;
	}
	
	body.expanded-list .fc-table-wrapper > .table-toolbar {
		padding:0px 3px;
	}
	
}






/* Used as offset for tooltips: */
.scroll-container {
	position:relative;
}

footer {
	display: table;
	width:100%;
	background-color:#efefef;
}
footer.footer {
}
/* Sticky footer code */
footer.page-footer {
	position:absolute;
	bottom:0;
}
body.flex-page-container footer.page-footer {
	position:static;
	bottom:inherit;
	height:auto;
	padding-top:10px;
}

footer .page-footer-inner {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding:0 20px;
	font-size:12px;
}

body.flex-page-container.flex-page-container-list footer.page-footer {
	display:none;
}

/* Printed page footer */
.printed-page-footer {
	font-size:11px;
	padding:15px;
}


/* ==========================================================================
   Fontawesome fixes and helpers
   ========================================================================== */

/* Fontawesome's fixed width helper class is actually too narrow for some icons (like fa-tv) */
.fa-fw {
	width:1.3em;
}
/* Fix for missing grip icon (hinting a draggable element), see https://github.com/FortAwesome/Font-Awesome/issues/816 */
.fa.fa-grip:before {
    content: "\f142 \202F \f142";
}
/* Fix for missing reverse spinning animation, see https://github.com/FortAwesome/Font-Awesome/issues/688 */
.fa-spin-reverse {
  -webkit-animation: fa-spin-reverse 2s infinite linear;
  animation: fa-spin-reverse 2s infinite linear;
}
.fa-spin-fast {
    animation: fa-spin 0.8s infinite linear;
}
@-webkit-keyframes fa-spin-reverse {
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin-reverse {
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* Use spinner-space-left/spinner-space-right instead of fa-fw on fontawesome spinners */
.spinner-space-left {
	margin-left:.3em;
}
.spinner-space-right {
	margin-right:.3em;
}


i.spinner {
	background-image:url(//static.filmchief.com/img/spinner.gif);
	display:inline-block;
	width:48px;
	height:48px;
	opacity:.25;
}
b.spinner {
	background-image:url(//static.filmchief.com/img/spinner.gif);
	display:block;
	width:48px;
	height:48px;
	margin:0 auto;
	opacity:.25;
}

/* Don't allow text selection in dropdown menus: */
.dropdown-menu {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	overflow-x:hidden;
	overflow-y:auto;

	min-width:inherit;
}

input[type='radio'],
input[type='checkbox'] { 
	cursor:pointer;
    accent-color:var(--theme-color);
}

/* Override Bootstrap's over the top not-allowed cursor for disabled menu items with a normal cursor: */
.dropdown-menu>.disabled>a:hover, 
.dropdown-menu>.disabled>a:focus,
btn.disabled, 
.btn[disabled], 
fieldset[disabled] .btn
.radio label[disabled],
.checkbox label[disabled],
input[type='radio'][disabled],
input[type='checkbox'][disabled] { 
	cursor:default;
}
.btn:disabled,
.btn.disabled,
.btn[disabled] {
	pointer-events: none;
}


/* Bootstrap + FireFox: No outline on focused dropdown menu items */
.dropdown-menu>li>a:focus {
	outline:none;
}

/* If a dropdown menu is wider than the viewport, show an ellipsis on too long items */
.dropdown-menu>li>a {
	max-width:100vw;
	overflow:hidden;
	text-overflow:ellipsis;
	-o-text-overflow: ellipsis;
}

/* If the 'dropdown-menu-ellipsis' class is set on a dropdown menu, limit the width and show an ellipsis
on too long items */
.dropdown-menu.dropdown-menu-ellipsis>li>a {
	max-width:350px;
	overflow:hidden;
	text-overflow:ellipsis;
	-o-text-overflow: ellipsis;
}
/* Make a dropdown scrollable, good for long dropdowns */
.dropdown-menu.scrollable-menu {
    height: auto;
    max-height: 600px;
    overflow-x: hidden;
}

/* Align the dropdown menu to the right on elements that are pulled right */
.pull-right .dropdown-menu {
	left:auto;
	right:0;
}

/* Class to make a link or a dropdown menu item *appear* disabled. Javascript will still need to perform the disabling logic! */
a.disabled-link,
.dropdown-menu>li>a.disabled {
	cursor:auto;
	color:#aaa;
}
.dropdown-menu>li:hover>a.disabled {
	background-color:white;
}




/* ==========================================================================
   Handlebars templates
   ========================================================================== */

/* Template html that is intended for compilation by Handlebars.js is not supposed to be shown: */
.handlebars-templates,
.handlebars-template {
	display:none;
}


/* ==========================================================================
   Ace editor custom styles
   ========================================================================== */
.ace {
	margin:10px 0;
	visibility: hidden; /* before init */
}
.ace.ace_editor {
	visibility: visible; /* after init */
}
/* Visual cue for disabled (read-only) editor: */
.ace[data-ace-disabled="true"] .ace_content {
	opacity:0.6;
}



/* ==========================================================================
   Redactor custom styles
   ========================================================================== */

/* Make the redactor box and toolbar transparent to blend in with the background (used in Filmchief notes, for example) */
.redactor-box {
	background-color:transparent;
	margin-bottom:0;
}
/* Except when in fullscreen mode: */
.redactor-box.redactor-box-fullscreen {
	background-color:#ECEFF1;
}
/* Fullscreen redactor on a modal must force the modal's display to none in order to work */
body.redactor-body-fullscreen .modal {
	display:none!important;
}
.redactor-toolbar {
	background-color:transparent;
	box-shadow:none;
}
.redactor-editor {
	padding:10px;
	min-height:50px;
	font-size:14px;
	color:#333;
    /* MODAL-RESIZE-ATTEMPT 
    width:680px;    
    */
}
.redactor-editor + textarea + textarea { /* the html editor */
    /* MODAL-RESIZE-ATTEMPT 
    /*min-width:680px; /* override the 100% width setting */
}


.redactor-placeholder:after {
	font-size:14px;
	left:10px;
	top:10px;
}
.redactor-placeholder:after,
.redactor-editor div,
.redactor-editor p,
.redactor-editor ul,
.redactor-editor ol,
.redactor-editor table,
.redactor-editor dl,
.redactor-editor blockquote,
.redactor-editor pre,
.redactor-editor h1,
.redactor-editor h2,
.redactor-editor h3,
.redactor-editor h4,
.redactor-editor h5,
.redactor-editor h6,
.redactor-dropdown,
#redactor-modal {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/*	font-family:'Open Sans', Calibri, Arial, Helvetica, Geneva, sans-serif;*/
	line-height: 1.428571429;
}
#redactor-modal #redactor-modal-header {
	font-weight:300;
}
.redactor-toolbar li a:hover {
    background-color: #F5F5F5;
	color: #333;
}
.redactor-dropdown>li>a {
	color:#333;
	padding:8px;
}
.redactor-dropdown>li:hover {
	background-color:#F5F5F5;
}
.redactor-dropdown li:hover a {
    color: #333 !important;
}

/* Apply theme color and theme-based shadow on input controls when focused (see also further down for Kendo UI corrections): */
.form-control:focus,
.bootstrap-select .btn.dropdown-toggle:focus,
.form-control.ms-ctn-focus {
    border-color: var(--theme-color);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
}


/* Bootstrap RTL corrections */
[dir="rtl"] .input-group .form-control:first-child, 
[dir="rtl"] .input-group-addon:first-child, 
[dir="rtl"] .input-group-btn:first-child > .btn, 
[dir="rtl"] .input-group-btn:first-child > .btn-group > .btn, 
[dir="rtl"] .input-group-btn:first-child > .dropdown-toggle, 
[dir="rtl"] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, 
[dir="rtl"] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
[dir="rtl"] .input-group .form-control:last-child, 
[dir="rtl"] .input-group-addon:last-child, 
[dir="rtl"] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn, 
[dir="rtl"] .input-group-btn:first-child > .btn:not(:first-child), 
[dir="rtl"] .input-group-btn:last-child > .btn, 
[dir="rtl"] .input-group-btn:last-child > .btn-group > .btn, 
[dir="rtl"] .input-group-btn:last-child > .dropdown-toggle {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
[dir="rtl"] .input-group-addon:last-child {
	border-left:1px solid rgb(204, 204, 204);
    border-right: 0;
}
[dir="rtl"] .checkbox input[type="checkbox"], 
[dir="rtl"] .checkbox-inline input[type="checkbox"], 
[dir="rtl"] .radio input[type="radio"], 
[dir="rtl"] .radio-inline input[type="radio"] {
    margin-left: inherit;
    margin-right: -20px;
}

[dir="rtl"] .nav-tabs>li {
	float: right;
}


/* Bootstrap 4 flex/margin/padding helper classes */
.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.<strong>px-2</strong>{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}

.flex-row            { flex-direction: row !important; }
.flex-column         { flex-direction: column !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.flex-fill         { flex: 1 1 auto!important; }

.h-100             { height:100%!important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

.align-content-start   { align-content: flex-start !important; }
.align-content-end     { align-content: flex-end !important; }
.align-content-center  { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around  { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.align-self-auto     { align-self: auto !important; }
.align-self-start    { align-self: flex-start !important; }
.align-self-end      { align-self: flex-end !important; }
.align-self-center   { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch  { align-self: stretch !important; }

.gap-0 { gap:0!important; }
.gap-1 { gap:0.25rem!important; }
.gap-2 { gap:0.5rem!important; }
.gap-3 { gap:1rem!important; }
.gap-4 { gap:1.5rem!important; }
.gap-5 { gap:3rem!important; }

/* Override classic Bootstrap grid behavior */
.flex-row > * {
	float:none!important;
    display:flex;
}

.d-flex {
	display:flex;
}
.d-block {
    display: block!important;
}
.d-inline-block {
    display: inline-block!important;
}
.d-inline {
    display: inline!important;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.center-block {
    /* display:flex; WHY??? TODO: REMOVE IF IT DOESN'T CAUSE PROBLEMS */
    margin:inherit;
    justify-content: center;
}


/* Bootstrap 4 container classes */
.bs4-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
	.bs4-container {
		max-width: 540px;
	}
}
@media (min-width: 768px) {
	.bs4-container {
		max-width: 720px;
	}
}
@media (min-width: 992px) {
	.bs4-container {
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
	.bs4-container {
		max-width: 1140px;
	}
}
@media (min-width: 576px) {
	.bs4-container, .bs4-container-sm {
		max-width: 540px;
	}
}
@media (min-width: 768px) {
	.bs4-container, .bs4-container-md, .bs4-container-sm {
		max-width: 720px;
	}
}
@media (min-width: 992px) {
	.bs4-container, .bs4-container-lg, .bs4-container-md, .bs4-container-sm {
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
	.bs4-container, .bs4-container-lg, .bs4-container-md, .bs4-container-sm, .bs4-container-xl {
		max-width: 1140px;
	}
}




/* Make .visible-xs compatible with .d-flex */
@media (max-width: 767px) {
    .visible-xs.d-flex {
        display:flex!important
    }
}


/* ==========================================================================
   Bootstrap 3 add-on: xl grid classes for screens wider than 1600px.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
    .hidden-lg {
        display: none !important;
    }
}

.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xl{
    display: none !important;
}

@media (min-width: 1600px) {
    .container {
        width: 1570px;
    }
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
    }
    .col-xl-12 {
        width: 100%;
    }
    .col-xl-11 {
        width: 91.66666667%;
    }
    .col-xl-10 {
        width: 83.33333333%;
    }
    .col-xl-9 {
        width: 75%;
    }
    .col-xl-8 {
        width: 66.66666667%;
    }
    .col-xl-7 {
        width: 58.33333333%;
    }
    .col-xl-6 {
        width: 50%;
    }
    .col-xl-5 {
        width: 41.66666667%;
    }
    .col-xl-4 {
        width: 33.33333333%;
    }
    .col-xl-3 {
        width: 25%;
    }
    .col-xl-2 {
        width: 16.66666667%;
    }
    .col-xl-1 {
        width: 8.33333333%;
    }
    .col-xl-pull-12 {
        right: 100%;
    }
    .col-xl-pull-11 {
        right: 91.66666667%;
    }
    .col-xl-pull-10 {
        right: 83.33333333%;
    }
    .col-xl-pull-9 {
        right: 75%;
    }
    .col-xl-pull-8 {
        right: 66.66666667%;
    }
    .col-xl-pull-7 {
        right: 58.33333333%;
    }
    .col-xl-pull-6 {
        right: 50%;
    }
    .col-xl-pull-5 {
        right: 41.66666667%;
    }
    .col-xl-pull-4 {
        right: 33.33333333%;
    }
    .col-xl-pull-3 {
        right: 25%;
    }
    .col-xl-pull-2 {
        right: 16.66666667%;
    }
    .col-xl-pull-1 {
        right: 8.33333333%;
    }
    .col-xl-pull-0 {
        right: auto;
    }
    .col-xl-push-12 {
        left: 100%;
    }
    .col-xl-push-11 {
        left: 91.66666667%;
    }
    .col-xl-push-10 {
        left: 83.33333333%;
    }
    .col-xl-push-9 {
        left: 75%;
    }
    .col-xl-push-8 {
        left: 66.66666667%;
    }
    .col-xl-push-7 {
        left: 58.33333333%;
    }
    .col-xl-push-6 {
        left: 50%;
    }
    .col-xl-push-5 {
        left: 41.66666667%;
    }
    .col-xl-push-4 {
        left: 33.33333333%;
    }
    .col-xl-push-3 {
        left: 25%;
    }
    .col-xl-push-2 {
        left: 16.66666667%;
    }
    .col-xl-push-1 {
        left: 8.33333333%;
    }
    .col-xl-push-0 {
        left: auto;
    }
    .col-xl-offset-12 {
        margin-left: 100%;
    }
    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-xl-offset-9 {
        margin-left: 75%;
    }
    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-xl-offset-6 {
        margin-left: 50%;
    }
    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-xl-offset-3 {
        margin-left: 25%;
    }
    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-xl-offset-0 {
        margin-left: 0;
    }
    .visible-xl {
        display: block !important;
    }
    table.visible-xl {
        display: table;
    }
    tr.visible-xl {
        display: table-row !important;
    }
    th.visible-xl, td.visible-xl {
        display: table-cell !important;
    }
    .visible-xl-block {
        display: block !important;
    }
    .visible-xl-inline {
        display: inline !important;
    }
    .visible-xl-inline-block {
        display: inline-block !important;
    }
    .hidden-xl {
        display: none !important;
    }
}


/* ==========================================================================
   Bootstrap 3 custom styles
   ========================================================================== */

/* Full 100% width container */
.container-full {
	margin: 0 auto;
	width: 100%;
	padding:0 15px;
}
@media (max-width: 767px) {
	.container-full {
		padding:0 10px;
	}
}

.container-half {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 1200px) {
	.text-left-lg {
		text-align:left;
	}
	.text-right-lg {
		text-align:right;
	}
	.container-half {
		width:570px;
	}
}
@media (max-width: 1199px) and (min-width: 992px) {
	.text-left-md {
		text-align:left;
	}
	.text-right-md {
		text-align:right;
	}
	.container-half {
		width:470px;
	}
}
@media (max-width: 991px) and (min-width: 768px) {
	.text-left-sm {
		text-align:left;
	}
	.text-right-sm {
		text-align:right;
	}
	.container-half {
		width:360px;
	}
}
@media (max-width: 767px) {
	.text-left-xs {
		text-align:left;
	}
	.text-right-xs {
		text-align:right;
	}
	.pull-right-xs {
		float:right;
	}
}

/* Remove inner shadows from buttons */
.btn.active, .btn:active {
    -webkit-box-shadow:none;
    box-shadow:none;
}




/* ==========================================================================
   Bootstrap 3 styles to simulate Bootstrap 4 rows and columns
   ========================================================================== */

@media (min-width: 1600px) {
	.flex-col-xl-12 {
		flex:0 0 100%;
		max-width: 100%;
	}
	.flex-col-xl-6 {
		flex:0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 1599px) and (min-width: 1200px) {
	.flex-col-lg-12 {
		flex:0 0 100%;
		max-width: 100%;
	}
	.flex-col-lg-6 {
		flex:0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 1199px) and (min-width: 992px) {
	.flex-col-md-12 {
		flex:0 0 100%;
		max-width: 100%;
	}
	.flex-col-md-6 {
		flex:0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 991px) and (min-width: 768px) {
	.flex-col-sm-12 {
		flex:0 0 100%;
		max-width: 100%;
	}
	.flex-col-sm-6 {
		flex:0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 767px) {
	.flex-col-xs-12 {
		flex:0 0 100%;
		max-width: 100%;
	}
	.flex-col-xs-6 {
		flex:0 0 50%;
		max-width: 50%;
	}
}


/* Scrollbars if the panel body contents don't fit (happens often with long option value labels (because they don't wrap) */
/* CORRECTION: the fact that option value labels don't wrap is not enough a reason to apply overflow:auto to .panel-body! */
/* So we reverted it to 'visible', and instead applied the hidden overflow to dd's that often contain those long labels. */
@media screen {
	.panel-body {
		overflow:visible;
	}
	.panel-body .dl-horizontal {
		/* overflow:hidden; COMMENTED OUT FOR DL GRID */
	}
}
/* Note: this class is added to .fc-table-wrapper elements for collection views in classic 'table' mode */
.overflow-auto {
	overflow:auto!important;
}
.overflow-visible {
	overflow:visible!important;
}

.panel-body-inner {
	padding:15px;
}
.panel-body-p-0>.panel-body-inner {
	padding:0;
}

/* No space above the first element inside a Bootstrap panel's body: */
.panel-body>:first-child,
.panel-body-inner>:first-child {
	margin-top:0;
}
/* No space below the last element inside a Bootstrap panel's body: */
.panel-body>:last-child,
.panel-body-inner>:last-child {
	margin-bottom:0;
}

.popover {
	max-width:960px;
	z-index:1040; /* popover BEHIND modals.... todo: not very elegant, but this fixes the bug that the event schedule popover covers its own inline editor */
}
.popover-content {
	position:relative;
}
.popover-content>.popover-loading {
	margin: -9px -14px;
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: rgba(255,255,255,0.6);
	display: flex; 
	align-items: center; 
	justify-content: center;
}
.popover>.popover-title>.close {
	margin-left:8px; /* some space between the close button and a long popover title */
	line-height:0.5; /* correct vertical positioning of the close button */
}

/* ==========================================================================
   Typeahead.js in Bootstrap 3 style
   ========================================================================== */

/* NEW INDEX-BASED SEARCH */
a.fc-search-run {
	color:#444;
}

/* Set fixed height because the initialisation of typeahead results in a height change of the inner elements */
.fc-search-wrapper {
	height:50px;
}
input.fc-search {
	border-radius:0;
}
.fc-search-input-group>.twitter-typeahead {
	width:100%;
}
.fc-search-input-group>.input-group-btn {
	vertical-align:top;
}

.input-group.fc-search-input-group .form-control.fc-search {
	padding: 5px 10px;
	font-size: 14px;
}
.input-group.fc-search-input-group .input-group-btn>button {
	height:34px;
	font-size: 13px;
	padding: 5px 10px;
}
.input-group.fc-search-input-group .input-group-btn>button:hover {
	border-color:#B0BEC5;
}

.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
.tt-suggestion > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap!important;
  margin:0;
}
.tt-suggestion > a:hover,
.tt-suggestion > a:focus,
.tt-suggestion.tt-cursor a {
	background-color: #e8e8e8;
	background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
	background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));
	background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
	background-repeat: repeat-x;
	text-decoration:none;
}

.tt-no-suggestions {
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.428571429;
	color: #777;
	white-space: nowrap;
	margin: 0;
}

/* ==========================================================================
   Top navbar
   ========================================================================== */

#top-nav {
	border-bottom-width:0;
	margin-bottom:0; /* Bootstrap override */
}

/* On mobile displays: */
@media (max-width: 767px) {
	.navbar {
		min-height:0;
		margin-bottom:10px;
	}
	.navbar-footer hr {
		margin-top:0;
	}
	/* 
	The following two declarations make the personal menu and notification icons stay aligned
	to the right on mobile displays:
	*/
	.navbar-right {
		display:flex;
		justify-content: end;
		margin-top:0; /* reduce top and bottom margin */
		margin-bottom:0;
		margin-right:0; /* undo -15px right margin (bootstrap float right) */
	}
	.navbar-nav.navbar-right>li {
		float:left;
	}
	
}

/* span = for non-interactive menu items */
@media (min-width: 768px) {
	.navbar-nav>li>span {
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 20px;
	}
}


/* Reduce the left and right padding a bit: */
.navbar-nav.navbar-right>li>a,
.navbar-nav.navbar-right>li>span, /* span = for non-interactive menu items */
.navbar-nav.navbar-right>li>button { /* button = for collapse/expand navbar toggle menu items */
	padding-left:15px;
	padding-right:15px;
}
.navbar-nav.navbar-right>li>span { /* span = for non-interactive menu items */
	padding-top:10px;
	padding-bottom:10px;
}
/* Position badges badge on the navbar: */
.navbar-nav.navbar-right>li>a>.badge {
	position:absolute;
	left:21px;
	top:10px;
	z-index:1;
}

/* Stretch the top navbar header to the edges of the page, compensating for the 15px padding of .container-full */
.navbar-filmchief .navbar-header {
	margin-left:-15px;
	margin-right:-15px;
	display:flex;
}

@media (max-width: 767px) {
    /* Stretch the top navbar header to the edges of the page, compensating for the 10px padding of .container-full */
    .navbar-filmchief .navbar-header {
        margin-left:-10px;
        margin-right:-10px;
        display:flex;
    }
}
/* Have the possibility of displaying 2 brands on the top navbar, separated by | */
.navbar-brand {
	float:none;
	display:table-cell;
	height:auto;
	min-height:50px;
	vertical-align:middle;
}

/* Show a pointer cursor if the navbar-brand is an a */
a.navbar-brand {
	cursor:pointer;
}
a.navbar-brand:focus,
a.navbar-brand:hover {
	outline:none;
}

.navbar-brand.primary {
	padding:0;
}
.fc-vignet {
	height:50px;
	width:175px;
	max-width:inherit;
}

.navbar-brand-separator {
	display:inline;
	line-height:42px;
	font-size:26px;
	padding:15px 0;
}

/* Don't make the active nav pill seem clickable: */
.nav-pills>li.active>a {
	cursor:default;
}


/* Language switch */
.navbar-language-switch-mode-3,
.nav>li.navbar-language-switch-mode-3 {
	display:flex; /* Handlebars version of the language switch is a flex container by default */
}
li.navbar-language-switch-mode-3>span.language-switch-divider {
	padding-left:0;
	padding-right:0;
}

.navbar-language-switch-mode-3>.set-locale.active {
	font-weight:bold;
}


/* ==========================================================================
   Pagination
   ========================================================================== */
/* Override Bootstrap's over the top not-allowed cursor for disabled pagination component with a normal cursor: */
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
	cursor:default;
}



/* ==========================================================================
   CSS arrows in Bootstrap theme colors
   See http://www.bootply.com/96682
   ========================================================================== */
.label-arrow {
	position: relative;
}
.label-arrow-right {
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	margin-right:10px;
}
  
.label-arrow-right:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
    border-left-color:#999;
	border-width: 10px;
    border-bottom-width: 9px;
	margin-top: -10px;
    
}

.label-arrow-left {
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	margin-left:10px;
}

.label-arrow-left:before {
    right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
    border-right-color:#999;
	border-width: 10px;
    border-bottom-width: 9px;
	margin-top: -10px;
    
}

/* Normal state */
.label-primary.label-arrow:after {
	border-left-color:#428bca;
}
.label-primary.label-arrow:before {
	border-right-color:#428bca;
}
.label-primary.banner-left:before,.label-primary.banner-right:after {
	border-color:#428bca;
}

.label-success.label-arrow:after {
	border-left-color:#5cb85c;
}
.label-success.label-arrow:before {
	border-right-color:#5cb85c;
}
.label-success.banner-left:before,.label-success.banner-right:after {
	border-color:#5cb85c;
}

.label-warning.label-arrow:after {
	border-left-color:#f0ad4e;
}
.label-warning.label-arrow:before {
	border-right-color:#f0ad4e;
}
.label-warning.banner-left:before,.label-warning.banner-right:after {
	border-color:#f0ad4e;
}

.label-danger.label-arrow:after {
	border-left-color:#d9534f;               
} 
.label-danger.label-arrow:before {
	border-right-color:#d9534f;               
} 
.label-danger.banner-left:before,.label-danger.banner-right:after {
	border-color:#d9534f;
}

.label-info.label-arrow:after {
	border-left-color:#5bc0de;
} 
.label-info.label-arrow:before {
	border-right-color:#5bc0de;
}
.label-info.banner-left:before,.label-info.banner-right:after {
	border-color:#5bc0de;
}

/* Hover/focus state */
.label-primary.label-arrow:hover:after,
.label-primary.label-arrow:focus:after {
	border-left-color:#3071a9;
}
.label-primary.label-arrow:hover:before,
.label-primary.label-arrow:focus:before {
	border-right-color:#3071a9;
}
.label-primary.banner-left:hover:before,.label-primary.banner-right:hover:after,
.label-primary.banner-left:focus:before,.label-primary.banner-right:focus:after {
	border-color:#3071a9;
}

.label-success.label-arrow:hover:after,
.label-success.label-arrow:focus:after {
	border-left-color:#449d44;
}
.label-success.label-arrow:hover:before,
.label-success.label-arrow:focus:before {
	border-right-color:#449d44;
}
.label-success.banner-left:hover:before,.label-success.banner-right:hover:after,
.label-success.banner-left:focus:before,.label-success.banner-right:focus:after {
	border-color:#449d44;
}

.label-warning.label-arrow:hover:after,
.label-warning.label-arrow:focus:after {
	border-left-color:#ec971f;
}
.label-warning.label-arrow:hover:before,
.label-warning.label-arrow:focus:before {
	border-right-color:#ec971f;
}
.label-warning.banner-left:hover:before,.label-warning.banner-right:hover:after,
.label-warning.banner-left:focus:before,.label-warning.banner-right:focus:after {
	border-color:#ec971f;
}

.label-danger.label-arrow:hover:after,
.label-danger.label-arrow:focus:after {
	border-left-color:#c9302c;               
} 
.label-danger.label-arrow:hover:before,
.label-danger.label-arrow:focus:before {
	border-right-color:#c9302c;               
} 
.label-danger.banner-left:hover:before,.label-danger.banner-right:hover:after,
.label-danger.banner-left:focus:before,.label-danger.banner-right:focus:after {
	border-color:#c9302c;
}

.label-info.label-arrow:hover:after,
.label-info.label-arrow:focus:after {
	border-left-color:#31b0d5;
} 
.label-info.label-arrow:hover:before,
.label-info.label-arrow:focus:before {
	border-right-color:#31b0d5;
}
.label-info.banner-left:hover:before,.label-info.banner-right:hover:after,
.label-info.banner-left:focus:before,.label-info.banner-right:focus:after {
	border-color:#31b0d5;
}


.banner-left:before {
	border: 10px solid #999;
	border-left: 10px solid transparent !important;
	border-bottom-width: 9px;
	left:-18px;
	position: absolute;
	top: 0;
	height:0;
	content: " ";
}
    
.banner-right:after {
	border: 10px solid #999;
	border-right: 10px solid transparent !important;
	border-bottom-width: 9px;
	right:-18px;
	position: absolute;
	top: 0;
	height:0;
	content: " ";
}


/* ==========================================================================
   Bootstrap labels with links inside them are by default blue... we 
   sometimes want white!
   ========================================================================== */

.label.label-white-links a{
	color:#fff;
}



/* ==========================================================================
   Left navbar
   ========================================================================== */

/* We do our own highlighting: */
.nav a {
	outline:none;
}

.nav-pills .nav-header {
	font-size:12px;
	font-weight:700;
	color:#bbb;
	text-transform: uppercase;
	letter-spacing: 1px;
}





.navbar-left .navbar-body {
	padding-left:0px;
/*	overflow:visible;*/
}
/*
.navbar-left .navbar-body.collapsing {
	overflow:hidden;
}
*/

/* Secondary links */
.navbar-left .nav-pills a, 
.navbar-left .nav-stacked a {
	color:#787878;
}

/* Dropdown button on a navigation item in the left navbar (event context selector) */
.navbar-left .nav-dropdown {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	padding-top:9px;
}
  
/* count indicator near icons */
.nav>li .count {
	position: absolute;
	bottom: 12px;
	right: 6px;
	font-size: 10px;
	font-weight: normal;
	background: rgba(51,200,51,0.55);
	color: rgba(255,255,255,0.9);
	line-height: 1em;
	padding: 2px 4px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}
.navbar-left {
	width:100%;
}
.navbar-left>.navbar-body>.list-unstyled>li h5 {
	margin:0;
}
/*
.navbar-left>.navbar-body>.list-unstyled>li {
	margin-left:-8px;
}
*/

.navbar-left>.navbar-body>.list-unstyled li > a,
.navbar-left>.navbar-body>.list-unstyled li > span { /* non-clickable item */
	display:block;
	padding:8px;
	text-decoration:none;
}

.navbar-left>.navbar-body>.list-unstyled li.active>a {
	font-weight:bold;
	/*color:#fff;*/
}

/* Make some space if a nav header is also a dropdown (and has a caret at the right) */
.navbar-left>.navbar-body>.list-unstyled li.nav-header.dropdown>a {
	padding-right:24px;
}


/* indent 2nd level */
.list-unstyled li > ul > li {
   margin-left:10px;
}





/* Sizing and positioning of large, responsive dropdowns used in the column selector for find-films */
.responsive-dropdown .dropdown-menu {
	width:600px;
}
@media (max-width: 1199px) and (min-width: 992px) {
	.responsive-dropdown .dropdown-menu {
		width:440px;
	}
}
@media (max-width: 991px) and (min-width: 768px) {
	.responsive-dropdown {
		position:static!important;
	}
	.responsive-dropdown .dropdown-menu {
		left:15px!important;
		right:15px!important;
		width:auto;
		top:24px;
	}
}
@media (max-width: 767px) {
	.responsive-dropdown {
		position:static;
	}
	.responsive-dropdown .dropdown-menu {
		left:15px!important;
		right:15px!important;
		width:auto;
		top:24px;
	}
}

/* Styling of the toggle button that appears when the left navbar is collapsed */
.navbar-left .navbar-left-toggle {
	width:100%;
	margin-right:0;
	outline:none;
	text-align:left;
	padding-left:15px;
}

/* The toggle button for the left navigation bar may also appear on the top navigation bar (in the top right corner, only on mobile displays): */
.navbar-right .navbar-toggle {
    float: none;
    padding-top: 6px;
    padding-bottom: 6px;
	margin:0;
	border:none;
}

/* Cancel Bootstrap's max-height setting on navbar-collapse */
.navbar-collapse {
	max-height:none;
}


/* Fix cursor and opacity on disabled close button */
.close.disabled {
	cursor:default;
	opacity:.2;
}
/* Fix cursor for disabled elements (Bootstrap's setting of 'not-allowed' is a bit heavy) */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	cursor:auto;
}
/* Fix color for disabled input elements (Bootstrap keeps it too dark) */
input.form-control[disabled], input.form-control[readonly], fieldset[disabled] input.form-control, 
textarea.form-control[disabled], textarea.form-control[readonly], fieldset[disabled] textarea.form-control,
label[disabled] {
	color:#aaa;
}

/* Fix colors and opacity of disabled selectpicker elements (they are too bright) */
.btn-default.disabled.selectpicker[disabled] {
	background-color:#eee;
	border-color:#ccc;
	color:#aaa;
	opacity:1;
}
/* Fix height of 'empty' first option (which becomes super flat if truly empty, but if you set a &nbsp; to correct that, the placeholder is no longer visible) */
ul.dropdown-menu.selectpicker>li>a {
	min-height: 24px;
}


/* Fontawesome form feedback: */
.form-control-feedback.fa {
	top:10px!important;
	right:25px!important;
	width:auto!important;
	height:auto!important;
}
.has-spinner .form-control-feedback.fa {
	color:#bbb;
}
/* Move the icon a bit to the left in case of magicsuggest */
.ms-ctn+.form-control-feedback.fa {
	right:48px!important;
}


.top-header {
	margin-top:0;
}





.max-height-300 {
	max-height:300px;
	overflow-y:auto;
}
.max-height-600 {
	max-height:600px;
	overflow-y:auto;
}
.max-height-800 {
	max-height:800px;
	overflow-y:auto;
}


/* Remove the bottom margin from inline lists inside tables */
table .list-inline {
	margin-bottom:0;
}


/* Give the first row of a table's tfoot section a 2px top border: */
.table>tfoot>tr:first-child>th,
.table>tfoot>tr:first-child>td {
    vertical-align: bottom;
    border-top: 2px solid #ddd;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: rgb(221, 221, 221);
}

/* Make nested tables transparent instead of white */
.table .table {
    background-color: transparent;
}

/* Size up labels a bit to compensate for the slightly smaller font */
.label {
	font-size:84.6153846153%; /* optimized for 13px -> 11px */
    padding: 0.181818em 0.54545454em; /* = 2px 6px at 11px font-size */
    line-height: 1.90909090909; /* = 20px at 11px font-size */
    border-radius: 0.18181818em; /* = 2px at 11px font-size */
	
}

/* Fix bootstrap badges on default panels */
.panel-default>.panel-heading .badge {
	color:#fff;
}


/* Use white backdrop on Bootstrap Modal instead of black: */
.modal-backdrop, .modal-backdrop.fade.in {
	opacity:0.62;
	background: #fff;
}


/* Introduce switch buttons with a color when active */
.btn-danger-when-active:active, .btn-danger-when-active.active {
	background-color:#D32F2F; /* Google Material Design Red 700 */
	border-color:#D32F2F; /* Google Material Design Red 700 */
	color:#fff;
}
.btn-danger-when-active:active:focus, .btn-danger-when-active.active:focus,
.btn-danger-when-active:active:hover, .btn-danger-when-active.active:hover {
	background-color:#C62828; /* Google Material Design Red 800 */
	border-color:#C62828; /* Google Material Design Red 800 */
	color:#fff;
}

.btn-warning-when-active:active, .btn-warning-when-active.active {
	background-color:#FF9800; /* Google Material Design Orange 500 */
	border-color:#FF9800; /* Google Material Design Orange 500 */
	color:#fff;
}
.btn-warning-when-active:active:focus, .btn-warning-when-active.active:focus,
.btn-warning-when-active:active:hover, .btn-warning-when-active.active:hover {
	background-color:#FB8C00; /* Google Material Design Orange 600 */
	border-color:#FB8C00; /* Google Material Design Orange 600 */
	color:#fff;
}

.btn-success-when-active:active, .btn-success-when-active.active {
	background-color:#43A047; /* Google Material Design Green 600 */
	border-color:#43A047; /* Google Material Design Green 600 */
	color:#fff;
}
.btn-success-when-active:active:focus, .btn-success-when-active.active:focus,
.btn-success-when-active:active:hover, .btn-success-when-active.active:hover {
	background-color:#388E3C; /* Google Material Design Green 700 */
	border-color:#388E3C; /* Google Material Design Green 700 */
	color:#fff;
}


.text-muted-more {
	color:#c2c2c2;
}

/* Allow for wider tooltips (Bootstrap's max-width is only 200px) */
.tooltip-inner {
    max-width: 400px;
/*	white-space:nowrap; feels better to allow wrapping after all*/
}
.tooltip-inner p,
.tooltip-inner li {
	text-align: left;
}
.tooltip-inner ul {
   padding-left:15px;
}



/* Links in blockquote footers */
blockquote footer cite a {
	color:#999;
}




/* ==========================================================================
   Bootstrap Carousel overrides
   ========================================================================== */

/* Turn off gradient overlay on carousel controls */
.carousel-control.left,
.carousel-control.right {
	background:none;
}
/* Turn off selection highlighting */
.carousel-indicators {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* ==========================================================================
   Filmchief Pictures Carousel
   ========================================================================== */

.fc-carousel-pictures .carousel-inner {
    overflow:hidden;
    width:100%;
    position:relative;
}
.fc-carousel-pictures.carousel .inner-item img {
	width: 100%;
}
.fc-carousel-pictures.carousel .inner-item .image-spinner img {
	min-height:inherit;
}
/* On desktops (small and large), nearly hide the carousel controls when not hovering */
@media (min-width: 768px) {
	.fc-carousel-pictures .carousel-control {
		opacity:0.2;
	}
	.fc-carousel-pictures .carousel-control:hover {
		opacity:0.5;
	}
}

.carousel-control {
	/* Fancy opacity animation for the carousel controls: */
	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	transition:opacity .2s;
	
	/* Create some top space to accommodate edit controls */
	top:48px; 
}


/* Position carousel indicators below the image and caption near the bottom*/
/*.carousel {
	padding-bottom:20px;
}*/
.carousel-indicators {
	bottom:-30px;
}
.carousel-indicators li {
	border-color:#428bca;
}
.carousel-indicators li.active {
	background-color:#428bca;
	border-color:#fff;
}
.carousel-caption {
	bottom:0px;
	padding:4px;
	background:rgba(10,10,10,0.3);
}
.carousel-caption .inline-edit {
	color:rgba(255,255,255,0.9);
}
.carousel-caption .inline-edit:focus,
.carousel-caption .inline-edit:hover,
.carousel-caption .inline-edit:focus .none-value,
.carousel-caption .inline-edit:hover .none-value {
	color:rgba(255,255,255,1);
}
.carousel-caption .inline-edit .none-value,
.carousel-caption .inline-edit:not(.btn) .fa {
	color:rgba(255,255,255,0.6);
}

/* Add/remove images button for external pages (easier to spot than pencil icon) */
.btn-below-carousel {
	display:block!important;
	margin-top:25px;
}

/* ==========================================================================
   Placeholder for empty carousel
   ========================================================================== */
.carousel .placeholder {
	text-align:center;
	height:80px;
	opacity:1;
	display: flex;
    flex-direction: column;
    justify-content: center;
}



/* ==========================================================================
   Primary image selector
   ========================================================================== */
.carousel .primary-image-selector {
    position: absolute;
    right: 0;
    top: 0;
	height:48px;
	width:48px;
    z-index: 10;
    padding: 10px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
	opacity:0.2;

	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	transition:opacity .2s;
}
.carousel .primary-image-selector:hover {
	opacity:0.5;
}
.carousel .primary-image-selector.primary {
	opacity:1;
	cursor:default;
}


/* ==========================================================================
   Spinner for lazy loading of (carousel) images
   ========================================================================== */
.image-spinner {
	position:absolute;
	left:50%;
	top:33%;
}
.image-spinner img {
	opacity:.1;

	margin-left:-50%;
	margin-top:-50%;
	width:48px;
	height:48px;
}

/* No extra top/bottom margin on checkboxes/radios inside dropdowns */
.dropdown-menu .checkbox,
.dropdown-menu .radio {
	margin-top:0;
	margin-bottom:0;
}

/* Remove padding from li and add it to a for dropdown buttons with only a caret (no text/icon) */
.dropdown.dropdown-caret-only {
	padding:0;
}
.dropdown.dropdown-caret-only>a {
	padding:0 5px;
}

.dropdown .dot {
	visibility:hidden;
	padding-right:.25em;
}
.dropdown .active .dot {
	visibility:visible;
}





/* NEW CSS GRID-BASED DL/DT/DD ELEMENTS */

dl.dl-horizontal {
	display: grid;
	grid-row-gap: 5px;
	grid-column-gap: 10px;
	grid-template-columns: 25% auto;
	margin-bottom:15px;
}
dl.dl-horizontal:empty,
dl.dl-horizontal:not(:has(dt)) { /* <-- Modern css (selectors level 4) for a <dl> without children (but not empty because of whitespace) */
	/*margin-bottom:0;*/
    display:none;
}


/* Hide repeating <hr> lines around a <dl> without children (but not empty because of whitespace) */
hr + dl.dl-horizontal:not(:has(*)) + hr {
	display:none;
}

dl.dl-horizontal.dt-wide {
	grid-template-columns: 33% auto;
}
dl.dl-horizontal.dt-xwide {
	grid-template-columns: 40% auto;
}
dl.dl-horizontal.dt-auto {
	grid-template-columns: auto auto;
}

dl.dl-horizontal dt {
	grid-column: 1;
	overflow:visible;
	width:auto!important;
	margin-left:0!important;
	margin-right:0!important;
}

dl.dl-horizontal dd {
	grid-column: 2;
	width:auto!important;
	margin-left:0!important;
	margin-right:0!important;
}


/* xs size */
@media (max-width: 767px) {
	/* always break horizontal to vertical for xs */
	dl.dl-horizontal,
	dl.dl-horizontal.dt-wide,
	dl.dl-horizontal.dt-xwide {
		grid-row-gap: 0px;
		grid-template-columns: 100%;
	}
	dl.dl-horizontal dd {
		grid-column: 1;
	}
}
/* up to sm size */
@media (max-width: 991px) {
	/* optionally break horizontal to vertical for sm and smaller by using the dl-vertical-sm class */
	dl.dl-horizontal.dl-vertical-sm {
		grid-row-gap: 0px;
		grid-template-columns: 100%;
	}
	dl.dl-horizontal.dl-vertical-sm dd {
		grid-column: 1;
	}
}



.dl-horizontal {
	margin-bottom:0;
}

.dl-horizontal dt,
.dl-horizontal dd {
	/*line-height:1.77272727; COMMENTED OUT FOR DL GRID */ /* optimized for baseline-aligning .label elements (font size: 11px) -> 13/11 * 1.5 = 1.77272727 */
}
.dl-horizontal dt>.dti {
	/*line-height:1.384615384615385; COMMENTED OUT FOR DL GRID */ /* trick to avoid too big line spacing (as a result of the above baseline-aligning) when dt elements span multiple lines -> 18px at 13px font-size */
	/*display:inline-block; COMMENTED OUT FOR DL GRID */
}

dl.dd-margin-bottom dt,
dl.dd-margin-bottom.dl-horizontal dd, 
dl.dd-margin-bottom.dl-vertical-sm dd {
	margin-top:10px;
}
dl.dd-margin-bottom dt:first-child,
dl.dd-margin-bottom.dl-vertical-sm dd:first-child {
	margin-top:0px;
}

dl.dd-margin-bottom {
	margin-bottom:0;
}
dt:first-child {
	margin-top:0px!important;
}

@media (min-width: 1200px) {
	.dl-horizontal dt {
		text-overflow:inherit;
		white-space:normal;
	}
	.dl-horizontal dd:after {
		margin-bottom:5px;
	}
	.dl-horizontal.dt-wide dt {
		width:190px;
	}
	.dl-horizontal.dt-wide dd {
		margin-left:210px;
	}
	.dl-horizontal.dt-xwide dt {
		width:250px;
	}
	.dl-horizontal.dt-xwide dd {
		margin-left:270px;
	}
}

/* sm size */
@media (max-width: 991px) and (min-width: 768px) {
	dl.dd-margin-bottom.dl-vertical-sm dd {
		margin-top:0;
	}
	.dl-vertical-sm dt,
	.dl-vertical-sm.dl-horizontal dt,
	.dl-vertical-sm.dl-horizontal.dt-wide dt {
		float: none;
		width: auto;
		overflow: inherit;
		clear: none;
		text-align: inherit;
		text-overflow: none;
		white-space: normal;
		margin-top:10px;
	}
	.dl-vertical-sm dd,
	.dl-vertical-sm.dl-horizontal.dt-wide dd {
		float: none;
		margin-left:0;
		overflow: inherit;
		clear: none;
		text-align: inherit;
		text-overflow: none;
		white-space: normal;
	}
}
/* sm and md size */
@media (max-width: 1199px) and (min-width: 768px) {
	.dl-horizontal dt {
		text-overflow:inherit;
		white-space:normal;
		padding-bottom:0px; /* was 9px (changed in v272) */
	}
	dl dt {
		margin-top:10px;
	}
	dl.dd-margin-bottom dd {
		margin-top:0;
	}
	dl.dl-horizontal dt {
		margin-top:0px;
	}
	.dd-margin-bottom.dl-horizontal dt {
		margin-top:10px;
	}
	.dl-horizontal.dt-xwide dt {
		width:200px;
	}
	.dl-horizontal.dt-xwide dd {
		margin-left:220px;
	}
}
/* xs size */
@media (max-width: 767px) {
	/* dl-horizontal variant that remains horizontal, also in xs mode */
	dl.dl-horizontal.dl-horizontal-xs dt {
		display:inline-block;
	}
	dl.dl-horizontal.dl-horizontal-xs dd {
		display:inline-block;
	}
	

	dl dt {
		margin-top:10px;
	}
	dl dt:first-child {
		margin-top:0px;
	}
	dl.dd-margin-bottom.dl-horizontal dd, 
	dl.dd-margin-bottom.dl-vertical-sm dd,
	dl.dd-margin-bottom dd {
		margin-top:0;
	}
}


dl.dl-vertical {
	display: grid;
	grid-row-gap: 0;
	grid-column-gap: 0;
	grid-template-rows: auto auto;
}
dl.dl-vertical > dt {
	padding-top: 5px;
}




@media print {
	/* Prevent showing the href attribute of printed links */
	a:link:after,
	a:visited:after {
		content:""!important;
	}
	
	
	/* Reduce bottom padding on the content body on prints */
	.content-body {
		padding-bottom:15px!important;
	}
	
	/* Hide cloned table headers on prints */
	.fc-table-headers-clone {
		display:none;
	}
	
	/* Hide the filters panel */
	body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-filters-panel {
		display:none;
	}
	/* Make the table container visible */
	body.flex-page-container.flex-page-container-list .collection-and-filters>.fc-table-wrapper {
		position:static;
	}
}




/* ==========================================================================
   No text-decoration on toggles
   ========================================================================== */
a.no-text-decoration,
a.no-text-decoration:hover,
a.no-text-decoration:focus,
a.no-text-decoration:visited,
a.no-text-decoration:active {
	text-decoration:none;
}


/* ==========================================================================
   No text-decoration on the space between an icon and a link
   ========================================================================== */
.space-left {
	padding-left:.4em;
}
.space-right {
	padding-right:.4em;
}
.space-after {
	padding-right:.4em;
}
.space-after[dir="rtl"],
[dir="rtl"] .space-after {
	padding-left:.4em;
}

/* Fix for Bootstrap's badge */
.badge.space-left {
	padding-left:7px;
	margin-left:.25em;
}
.badge.space-right {
	padding-right:7px;
	margin-right:.25em;
}

/* Fix for Bootstrap's dropdown caret */
.caret.space-left {
	padding-left:0;
	margin-left:.25em;
}
.caret.space-right {
	padding-right:0;
	margin-right:.25em;
}




.btn {
	-webkit-transition:box-shadow ease-in-out .15s;
	transition:box-shadow ease-in-out .15s;
}
.btn:focus {
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
}
.btn.btn-link,
.btn.btn-link:focus {
	-webkit-box-shadow:none!important;
	box-shadow:none!important;
	border:none;
}
.no-outline {
	outline:none!important;
}




/* ==========================================================================
   Shake animation
   ========================================================================== */

/*
Animate.css - http://daneden.me/animate
Licensed under the ☺ license (http://licence.visualidiot.com/)

Copyright (c) 2012 Dan Eden*/

.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0); transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px); transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px); transform: translateX(10px);}
}

@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0); transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px); transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px); transform: translateX(10px);}
}

@-o-keyframes shake {
	0%, 100% {-o-transform: translateX(0); transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px); transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-o-transform: translateX(10px); transform: translateX(10px);}
}

@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake;
}


/* ==========================================================================
   File Upload plugin
   ========================================================================== */
.fileupload-thumbnails .thumbnail {
	overflow:hidden;
}
.fileupload-thumbnails .thumbnail canvas,
.fileupload-thumbnails .thumbnail img,
.fileupload-thumbnails .thumbnail video {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}
.fileupload-thumbnails .thumbnail .thumbnail-top-toolbar:after {
	content: "";
	display: table;
	clear: both;
	margin-bottom:4px;
}
/* Fix for Firefox */
.fileinput-button input {
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	overflow:hidden;
}
.fileinput-button.btn.has-focus {
    border-color: var(--theme-color);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
    /* old (before Jan 2025):
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)!important;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)!important;
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
    */
}
.fileinput-button.btn-default.has-focus {
	color:#333;
	border-color: #adadad;
	background-color: #e0e0e0;
	background-position: 0 -15px;
}
.fileinput-button.btn.disabled,
.fileinput-button.btn.disabled:hover,
.fileinput-button.btn.has-focus.disabled,
.fileinput-button.btn.has-focus.disabled:hover {
	-webkit-box-shadow: none!important;
	box-shadow: none!important;
	outline: none;
	background-color: #eEeeee;
	border-color: #eEeeee;
	color:#444;
}


/* ==========================================================================
   Remove button (like Bootstrap .close class, but without the float and
   without changing font size and weight.
   ========================================================================== */
.form-group-array-remove-button {
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
	margin-right:.5em;
}
button.form-group-array-remove-button {
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	-webkit-appearance: none;
}
.form-group-array-remove-button:hover,
.form-group-array-remove-button:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	opacity: .5;
}

.fileupload-widget>.fileupload-controls {
	margin-bottom:10px;
}
.fileupload-widget>.fileupload-controls>.progress {
	display:inline-block;
	width:75%;
	margin:0;
	vertical-align:middle;	
}


/* ==========================================================================
   Filmchief Synchronized Session Sign In Overlay
   ========================================================================== */
#fcSsoSignInOverlay {
	position:fixed;
	display:flex;
	align-items: center;
	justify-content: center;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,0.8);
	z-index:100000;
}
#fcSsoSignInOverlay>h3 {
	color:#eeeeee;
}

/* ==========================================================================
   Filmchief Forms
   ========================================================================== */
.form-group {
	margin-bottom:20px; /* A bit more space than Bootstrap's default 15 px to accommodate for .text-above-input fields */
}
.form-group .optional {
	display:block;
	font-weight:normal;
	font-size:12px;
	color:#999;
}
.form-spacer {
	height:30px;
}

/* ==========================================================================
   Bootstrap ProgressBar
   ========================================================================== */
/* Appearance of links inside progress bars */
.progress-bar>a {
	color:#fff;
}
/* Transparent progress bar */
.progress-bar-clear {
	background-color:transparent;
	background-image:none;
	color:#333;
}
.progress-bar-clear>a {
	color:#428bca;
}

/* Bootstrap progress bar addition: legend */
.progress-legend {
	color:#888;
	position:relative;
	top:-20px;
	font-size:11px;
}



/* ==========================================================================
   Bootstrap Touchspin
   ========================================================================== */

.bootstrap-touchspin input {
	text-align:right; /* Number inputs align right */
	padding: 0; /* Remove padding */
}
.bootstrap-touchspin input::-webkit-inner-spin-button {
	margin-left:6px; /* Set a little spacing between the spin buttons and the right-aligned number */
}
/* Undo bootstrap's border-radius:0 setting */
.bootstrap-touchspin.input-group .form-control:not(:first-child):not(:last-child) {
	border-radius:4px;
}
/* Hide touchspin buttons on desktops */
@media (min-width: 992px) {
	.bootstrap-touchspin.input-group {
		display:inline-block;
		width:100%;
	}
	.bootstrap-touchspin .input-group-btn {
		display:none;
	}
	.bootstrap-touchspin .input-group-btn button {
		display:none;
	}
}
/* Hide html5 spin box on phones/tables */
@media (max-width: 991px) {
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		/* display: none; <- Crashes Chrome on hover */
		-webkit-appearance: none;
		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
	}
}

/* ==========================================================================
   Colorpicker custom styles
   ========================================================================== */



/* ==========================================================================
   Bootstrap Selectpicker custom styles
   ========================================================================== */


/*
var(--theme-color)
*/
.bootstrap-select .dropdown-toggle:focus {
    outline: none!important;
}


/* Change the border color of the selectpicker control if in has-* state: */
.has-error .bootstrap-select>.btn {
    border-color: #a94442;
}
.has-warning .bootstrap-select>.btn {
    border-color: #FF6F00;
}
.has-success .bootstrap-select>.btn {
    border-color: #2E7D32;
}


.has-info .help-block {
	color: #03A9F4;
}
.has-info .help-block a { 
	color: #03A9F4;
	text-decoration: underline;
}
.has-info .input-group-addon {
	color: #29B6F6;
	background-color: #B3E5FC;
	border-color: #29B6F6;
}
.has-info .form-control-feedback {
	color: #03A9F4;
}



.has-error .help-block a { 
    color: #a94442;
	text-decoration: underline;
}



/* Override Bootstrap's over the top not-allowed cursor for disabled menu items with a normal cursor: */
.bootstrap-select.btn-group.disabled, .bootstrap-select.btn-group>.disabled {
    cursor: default;
}
/* Slightly darker placeholder text to avoid confusion with disabled control text */
.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #757575;
}
/* Prevent blue outline around focused li options */
/*
.bootstrap-select .selectpicker.inner a:focus {
	outline: none;
}
*/
/* Vertical alignment of selectpicker with other inline controls */
/*
.controls .bootstrap-select.btn-group {
	margin-bottom:0;
}
*/
/* Add the possibility of showing the checkmark of selected options on the left side,
   simply by setting the 'show-tick-left' class on the '.bootstrap-select' element:   */
.bootstrap-select.btn-group.show-tick.show-tick-left .dropdown-menu li.selected a i.check-mark {
	right:auto;
	left:5px; /* was 12px but something changed, apparently, because it suddenly looked bad (DP 21-1-2017) */
}
/* Subtle highlighting of selected options: */
.bootstrap-select .selectpicker.dropdown-menu li.selected {
	background-color:#FFFDE7;
}
/* Change color of subtext in highlighted options */
.bootstrap-select.btn-group ul.dropdown-menu>li.active small.text-muted,
.bootstrap-select.btn-group ul.dropdown-menu>li.active>a:hover small.text-muted {
	color:#fff;
	opacity:0.667;
}

/* ==========================================================================
   Magicsuggest fixes and custom styles
   ========================================================================== */

/* Bugfix: disable magicsuggests: also disable the close button on each tag: */
.ms-ctn-disabled .ms-sel-ctn .ms-sel-item .ms-close-btn {
	cursor:not-allowed;
}
.ms-dropdown-hidden>.ms-res-ctn {
	opacity:0;
}

/* Prevent display of initial value ids in the input before MagicSuggest is instanciated: */
input.magicsuggest {
	color:#fff;
}

/* Slightly higher control */
/*.ms-ctn {
	min-height:32px;
}*/

/* Slightly larger tags */
.ms-sel-ctn .ms-sel-item {
	font-size:14px;
}

/* Change font size and padding to match other inputs */
.ms-ctn .ms-sel-ctn input {
    font-size: 14px;
	padding-left:7px;
	background-color: transparent;
}

/*.ms-ctn .ms-sel-ctn .ms-sel-item {
	margin-top:4px;
}*/

/* Option cls for no helper */
/*
.ms-ctn.helper-hiddenx .ms-helper {
	visibility:hidden;
}
*/

/* Option selectionCls for plain tags */
.ms-sel-ctn .ms-sel-item.plain-tag {
	background-color:#e4e4e4;
	color:#444;
}

/* Option selectionCls for white (invisible) tags */
.ms-sel-ctn .ms-sel-item.white-tag {
	background-color:#fff;
	color:#444;
}

/* Option selectionCls for text only (no tags, no close button) */
.ms-sel-ctn .ms-sel-item.text-only {
	background-color:#fff;
	color:#444;
	padding-left:3px;
	padding-right:0;
}
.ms-sel-ctn .ms-sel-item.text-only .ms-close-btn {
	display:none;
}


/* Disable magicsuggest's default group background color and border. I don't like it! */
.ms-res-ctn .ms-res-group {
	border:none;
	background-color:white;
	line-height:20px;
	color:#555;
	padding:3px 20px;
}


/* Use nice and subtle background gradient on hovered items */
.ms-res-ctn .ms-res-item-active {
	background-color: #e8e8e8;
	background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
	background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));
	background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
	background-repeat: repeat-x;
}

.ms-res-ctn .ms-res-item-grouped {
	padding-left: 35px;
}


.input-group-addon>label {
	margin-bottom:0;
	font-weight:normal;
}

/* ==========================================================================
   Bootstrap datetimepicker corrections
   ========================================================================== */

/*
Tip: catching the datetimepicker elements in action can be tricky because the widget is removed
from the DOM when the focus is lost. Paste this code in the Console to get the HTML of the widget:
window.x=setInterval(function(){if($('.bootstrap-datetimepicker-widget').length){console.log($('.bootstrap-datetimepicker-widget').html());clearInterval(window.x);}},1000);
*/

/* Hide vertical scrollbar on dropdown menu: */
.bootstrap-datetimepicker-widget.dropdown-menu {
	overflow-y:hidden;
}
/* Lighter gray for disabled dates: */
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
	color:#E0E0E0;
}




/* ==========================================================================
   Kendo UI corrections
   ========================================================================== */
.k-autocomplete .k-input,
.k-dropdown-wrap .k-input, .k-dropdown-wrap.k-state-focused .k-input, 
.k-multiselect .k-input, .k-multiselect.k-state-focused .k-input, 
.k-numeric-wrap.k-state-focused .k-input, 
.k-picker-wrap.k-state-focused .k-input, 
.k-textbox>input {
    border-color: #ccc;
	color:#555;
	font-weight:400;
}
.k-autocomplete.k-state-default.k-state-focused,
.k-dropdown-wrap.k-state-focused,
.k-multiselect.k-state-focused,
.k-numeric-wrap.k-state-focused, 
.k-picker-wrap.k-state-focused {
    border-color: var(--theme-color);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
}
/*
.k-autocomplete .k-input, .k-autocomplete.k-state-focused .k-input, 
.k-dropdown-wrap .k-input, .k-dropdown-wrap.k-state-focused .k-input, 
.k-multiselect .k-input, .k-multiselect.k-state-focused .k-input, 
.k-numeric-wrap.k-state-focused .k-input, 
.k-picker-wrap.k-state-focused .k-input, 
.k-textbox>input {
    border-color: var(--theme-color);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--theme-color-translucent60);
}
*/

.k-autocomplete.k-state-default, 
.k-dropdown-wrap.k-state-default, 
.k-multiselect, 
.k-multiselect-wrap,
.k-multiselect.k-state-hover, 
.k-multiselect.k-state-hover>.k-multiselect-wrap, 
.k-numeric-wrap.k-state-default, 
.k-picker-wrap.k-state-default {
    border-color: #ccc;
	border-radius: 4px;
}
.k-autocomplete.k-state-default>input,
.k-dropdown-wrap.k-state-default>input,
.k-multiselect.k-state-default>input,
.k-numeric-wrap.k-state-default>input,
.k-picker-wrap.k-state-default>input {
    border-color: #ccc;
	border-radius: 4px;
	padding:0;
	height:32px;
}
.k-autocomplete.k-header {
	font-weight: normal;
}
.k-multiselect-wrap>ul>li.k-button {
	background-color:#f4f4f4;
	text-transform: none;
	font-weight: normal;
	text-align:left;
}

.panel .panel-heading h3 {
	margin-top:10px;
	margin-bottom:10px;
}



.form-back-link {
	margin:30px 0;
}


/* ==========================================================================
   Filmchief light panels (such as the sign in panel, request token panel)
   ========================================================================== */
.fc-panel-light {
	
}


/* ==========================================================================
   Filmchief Sign in panel
   ========================================================================== */
.panel-sign-in {
	margin-left:auto;
	margin-right:auto;
	width:400px;
}
@media (max-width: 767px) {
	.panel-sign-in {
		width:80%;
	}
}


/* ==========================================================================
   Filmchief Register panel
   ========================================================================== */
.panel-register {
	margin-left:auto;
	margin-right:auto;
	width:1024px;
}
@media (max-width: 767px) {
	.panel-register {
		width:95vw;
	}
}


/* ==========================================================================
   Modal footer buttons
   ========================================================================== */
.modal .processing {
	line-height:48px;
}
.btn-ok {
	min-width:72px;
}


/* ==========================================================================
   Filmchief Panels
   ========================================================================== */

/* Add some more space after each panel */
.fc-panel {
	margin-bottom:30px;
}

/* A bit more condensed panel title */
.fc-panel .panel-title h4,
.fc-panel h4.panel-title {
	margin-top:5px;
	margin-bottom:5px;
	font-size:16px;
}

/* Headings inside panels */
.fc-panel h5 {
	color:#888888;
	font-size:16px;
	font-weight:100;
	border-bottom:1px solid #e0e0e0;
	padding-bottom:2px;
	margin-top:20px;
}

/* E.g. filter group headers */
.fc-panel h6 {
	color:#888888;
	font-size:14px;
	font-weight:100;
}

/* Remove ul margin-bottom from panel toolbar */
.fc-panel .panel-toolbar {
	margin-bottom:0;
	margin-right:-5px;
}

/* Compact panel heading (for Filters panel) */
.fc-panel .panel-heading-compact h4.panel-title {
	margin:3px 0 0 0;
	display:inline-block;
}
.fc-panel .panel-heading-compact .panel-toolbar {
	margin-top:2px
}

/* Special styling and placement of dropdown menus inside panel headings */
.fc-panel .panel-toolbar>li {
	min-width:36px;
	text-align:center;
}
/* This has been disabled because it causes tooltip text to align left if the tooltip is placed
on a panel-toolbar button. If we discover why this text-align rule was imposed originally, then
don't just re-enabled it but take care that the tooltip texts remain aligned in the center. */
/*
.fc-panel .panel-toolbar>li * {
	text-align:left;
}
*/
.fc-panel .panel-toolbar>li>a {
	padding:6px;
	text-decoration:none;
}

/* Correct vertical position of dropdown caret on the panel toolbar */ 
.fc-panel .panel-toolbar>li.dropdown .caret {
	margin-top:9px;
	vertical-align:top;
}


/* Hide double hr lines if the dl in between them is empty (and hide the empty dl as well) */
hr + dl:empty,
hr + dl:empty + hr,
/* The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not. (CSS4) */
hr + dl:blank,
hr + dl:blank + hr {
	display:none;
}



/* Correct vertical position for button groups on a panel toolbar */
.panel-toolbar>li>.btn-group {
	margin-top:-8px;
}


/* Additional link at the right side of a dropdown menu */
.dropdown-menu>li>a.right-fwd-link {
	position:absolute;
	margin-top:-27px;
	right:0;
	padding:4px 4px 4px 6px;
	color:#428bca;
}
.dropdown-menu>li>a.right-fwd-link:hover {
	background:none;
	color:#2a6496;
}

/* ==========================================================================
   Filmchief Pictures
   ========================================================================== */
.fc-picture-simple {
	width:140px;
	text-align:center;
	white-space:nowrap;
}
.fc-picture-simple.no-edit {
	width:120px;
}
.fc-picture-simple.fc-picture-empty {
	width:0px;
}

.fc-picture-simple img {
	max-width:120px;
}



/* ============================================================================
   Filmchief css moved from main-admin.css to here because external users also 
   sometimes use certain Filmchief features
   ============================================================================ */
   
/* Partially checked */
.fa-check.partial {
	color:#bbb;
}


.backlink {
	margin-right:8px;
}


/* ==========================================================================
   Filmchief Inline Edit
   ========================================================================== */
.inline-edit {
	color:#333;
	text-decoration:none;
}
.text-muted .inline-edit,
.text-muted.inline-edit {
	color:#999;
}

.inline-edit:focus,
.inline-edit:hover {
	color:inherit; /* was: #2a6496; */
	text-decoration:none;
}
.btn-primary.inline-edit:focus,
.btn-primary.inline-edit:hover {
	color:#fff;
}

/* Pencil icons (except on buttons) */
.inline-edit:not(.btn) .fa {
	color:#E0E0E0; /* Google Material Design Gray 300 */
}
.inline-edit:not(.btn):focus .fa,
.inline-edit:not(.btn):hover .fa {
	color:var(--theme-color); /* was: inherit; */
}

/* E.g. the inline edit button on external verification page for the 'Add/remove stills' button 
.btn.btn-primary.inline-edit .fa {
	color:#fff;
}
*/

/* ==========================================================================
   Filmchief Inline Modal
   ========================================================================== */
   

.inline-edit-modal {
	display:none; /* Invisible by default */
	position:absolute; /* Override Bootstrap's position:fixed setting */
	overflow:visible; /* Bugfix: somehow, if the inline editor produces a bootstrap alert and the user closes that alert, the inline editor would disappear */
}
/* MODAL-RESIZE-ATTEMPT 
.modal.inline-edit-modal {
    display:flex!important;
}
*/
 
.inline-edit-modal .modal-dialog {
	width:auto; /* Override default width of Bootstrap modal-dialog box (600px). This allows the form control to affect the width of the modal */
    /* Make the modal-dialog have a suitable height: */
    display:flex;
    flex-direction:column;
    height:fit-content;
}
/* This is set on the body element. Bootstrap sets the 'modal-open' class, Filmchief js sets the 'modal-inline-open' class. Prevents the scrollbars from disappearing */
.modal-open.modal-inline-open {
	overflow:auto;
	padding-right:0!important; /* override Bootstrap applying a calculated padding-right to the body */
}

.modal.in.inline-edit-modal {
    display:flex;
    flex-direction:column;
    height:fit-content;
}

/*
Left-align inline edit modals (this cancels the "margin:30px auto" Bootstrap sets on .modal-dialog elements 
for centering modals ).
*/
.modal.inline-edit-modal>.modal-dialog {
	margin:0;
}


/* Style for resize handles */
.resize-handle {
    position: absolute;
    background: transparent;
    z-index:1051;
}
/* Edge handles */
.resize-handle.n { top: -5px; left: 0; right: 0; height: 10px; cursor: ns-resize; }
.resize-handle.s { bottom: -5px; left: 0; right: 0; height: 10px; cursor: ns-resize; }
.resize-handle.e { top: 0; right: -5px; bottom: 0; width: 10px; cursor: ew-resize; }
.resize-handle.w { top: 0; left: -5px; bottom: 0; width: 10px; cursor: ew-resize; }
/* Corner handles */
.resize-handle.nw { top: -5px; left: -5px; width: 10px; height: 10px; cursor: nwse-resize; }
.resize-handle.ne { top: -5px; right: -5px; width: 10px; height: 10px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -5px; left: -5px; width: 10px; height: 10px; cursor: nesw-resize; }
.resize-handle.se { bottom: -5px; right: -5px; width: 10px; height: 10px; cursor: nwse-resize; }


/* Add visual cue for resize in the bottom-right corner */
.modal.resize-mode-full > .modal-dialog > .modal-content,
.modal.resize-mode-horizontal > .modal-dialog > .modal-content,
.modal.resize-mode-vertical > .modal-dialog > .modal-content {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><line x1="0" y1="12" x2="12" y2="0" stroke="rgba(128,128,128,0.25)" stroke-width="1"/><line x1="5" y1="12" x2="12" y2="5" stroke="rgba(128,128,128,0.25)" stroke-width="1"/></svg>');
  background-repeat: no-repeat;
  background-position: bottom right;
}

.modal.inline-edit-modal.in {
    display:flex!important;
    flex: 1 1 auto; /* This will grow to fill the remaining space */
    flex-direction:column;
}
.modal.inline-edit-modal.in > .modal-dialog {
    height:100%;
    display:flex;
    flex: 1 1 auto; /* This will grow to fill the remaining space */
    flex-direction:column;
}
.modal.inline-edit-modal.in > .modal-dialog > .modal-content {
    height:100%;
    display:flex;
    flex: 1 1 auto; /* This will grow to fill the remaining space */
    flex-direction:column;
}
.modal.inline-edit-modal.in > .modal-dialog > .modal-content > .modal-body {
    flex: 1 1 auto; /* This will grow to fill the remaining space */
    
    display:flex;
    flex-direction:column;
}

.modal.inline-edit-modal.in > .modal-dialog > .modal-content > .modal-body > .form-control,
.modal.inline-edit-modal.in > .modal-dialog > .modal-content > .modal-body > .redactor-box {
    flex: 1 1 auto; /* This will grow to fill the remaining space */
}
.modal.inline-edit-modal.in > .modal-dialog > .modal-content > .modal-body > .redactor-box {
    flex: 1 1 auto; /* This will grow to fill the remaining space */
    
    display:flex;
    flex-direction:column;
}

.modal.inline-edit-modal.in > .modal-dialog > .modal-content > .modal-body > .redactor-box > .redactor-editor,
.modal.inline-edit-modal.in > .modal-dialog > .modal-content > .modal-body > .redactor-box > .redactor-editor + textarea + textarea {
    flex: 1 1 auto; /* This will grow to fill the remaining space */
    height:0!important; /* This hack overrides the "heigth:216px" inline style applied by the redactor control itself. */
}
.modal.inline-edit-modal.in > .modal-dialog > .modal-content > .modal-body > .redactor-box > .redactor-editor + textarea + textarea {
    resize:none;
}

.modal.inline-edit-modal.in.resize-mode-full > .modal-dialog > .modal-content > .modal-body > textarea,
.modal.inline-edit-modal.in.resize-mode-horizontal > .modal-dialog > .modal-content > .modal-body > textarea,
.modal.inline-edit-modal.in.resize-mode-vertical > .modal-dialog > .modal-content > .modal-body > textarea {
    resize:none;
}


   
/* Reduce the vertical padding of the modal header, body, and footer */
.inline-edit-modal .modal-header {
	padding-top:10px;
	padding-bottom:8px;
}
.inline-edit-modal .modal-body {
	padding-top:8px;
	padding-bottom:8px;
}
.inline-edit-modal .modal-footer {
	padding-top:8px;
	padding-bottom:12px;
}
.inline-edit-modal .modal-header {
	border-bottom:none;
}
.inline-edit-modal .modal-header .close {
	margin-top:0; /* correction for the reduced height of the modal header */
	margin-left:4px; /* some space between the close button and a long modal header text */
}
.inline-edit-modal .modal-footer {
	border-top:none;
	text-align:left;
}

/* Make sure dropdowns flow out of the inline editor modal */
.modal-open .modal {
	overflow-y:auto;
}
.modal-open .modal.inline-edit-modal {
	overflow-x:visible;
	overflow-y:visible;
}

/* Invisible backdrop on inline editor modal */
.modal-inline-open .modal-backdrop {
	opacity:0;
}

.inline-edit-modal .modal-body .form-control {
	margin-bottom:0;
}

/* Make image thumbnails inside inline editor modals appear as a centered block element. See for example the
   inline fileupload widget.
*/
.inline-edit-modal .thumbnail img {
	display:block;
	margin:0 auto 4px auto;
}
/* Remove the bottom margin of the last form group on an inline editor modal */
.inline-edit-modal .form-group:last-child {
	margin-bottom:0; 
}

 
/* Resizable */
#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
	width: 10px;
	height: 10px;
	background-color:yellow;
	border: 1px solid #000000;
}
 
   

/* ==========================================================================================
   Filmchief tagger control (modified Bootstrap dropdown button for inline editor)
   ========================================================================================== */
.fc-tagger>.btn {
	text-align:left;
}
.fc-tagger>.btn>.caret {
	float:right;
	margin-left:4px;
	margin-top:8px;
}
.inline-edit-modal .fc-tagger>.btn {
	white-space:normal;
	width:100%; /* Match the width of the inline editor modal body */
/*	min-width:100%; */ /* this only works if the inline modal would grow with the width of this button */
}
.fc-tagger .tags-added {
	background-color:#F1F8E9;
}
.fc-tagger .tags-removed {
	background-color:#FFEBEE;
}
.fc-tagger .tags-removed span.value {
	text-decoration:line-through;
}
.fc-tagger-searchbox {
    padding: 4px 8px;
}
.fc-tagger>.dropdown-menu {
	overflow:hidden;
    min-width: 100%;
    z-index: 2000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fc-tagger>.dropdown-menu>.inner {
    position: static;
    border: 0;
    padding: 0;
    margin: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	overflow-y:auto;
    min-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* ==========================================================================
   NEW CSS GRID-BASED Filmchief table
   ========================================================================== */
.fc-table-grid {
	width: 100%;
	display: grid;
	/* height: 250px; */ /* explicit height: works */
	/* max-height:250px; */ /* maximum width: works */
	
	/* The two settings below make sure that if total height of the rows is less than the height of the grid, a dropdown (e.g. on files: Copy link / Download / Details) does not cause cause the y scrollbar to appear */
	height:100%;
	align-content:flex-start;
	
	font-size: 1em;
	overflow-y: auto;
	/*
	border: 1px solid #E3E4E4;
	border-left: none;
	*/
}
.fc-table-grid div.sticky-left[role=columnheader] {
	position: sticky;
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
}
.fc-table-grid .sticky-left[role=gridcell] {
	position: sticky;
	left: 0;
	z-index: auto;
}
.fc-table-grid .entity-link-wrapper[role=gridcell] {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fc-table-grid .row-select-menu-wrapper.sticky-left[role=columnheader] + .sticky-left[role=columnheader],
.fc-table-grid .row-sel-wrapper.sticky-left[role=gridcell] + .sticky-left[role=gridcell] {
	left: 31px; /* second sticky cell (first cell is the row selector, the second cell is the entity link) */
}

.fc-table-grid div[role=columnheader].row-sel-hidden,
.fc-table-grid .row-sel-wrapper.row-sel-hidden {
	display:none;
}
.fc-table-grid .row-select-menu-wrapper.row-sel-hidden.sticky-left[role=columnheader] + .sticky-left[role=columnheader],
.fc-table-grid .row-sel-wrapper.row-sel-hidden.sticky-left[role=gridcell] + .sticky-left[role=gridcell] {
	left: 0px; /* second sticky cell (first cell is the HIDDEN row selector, the second cell is the entity link) */
}

.fc-table-grid div[role=columnheader] {
	position: sticky;
	top: 0;
	background-color:#fff;
	border-bottom: 1px solid #E3E4E4;
	font-weight:bold;
	align-self:stretch;
	display: flex;
	z-index: 1;
}
.fc-table-grid div[role=columnheader].data-align-right,
.fc-table-grid div[role=columnheader].text-right {
    justify-content: flex-end;
}

.panel-default .fc-table-grid div[role=columnheader] {
	background-color:#FAFAFA; /* because of sticky column headers it is important to use the same background color as the panel body */
}
.fc-table-grid div[role=columnheader] > span {
	align-self: flex-end;
}
.fc-table-grid div[role=columnheader],
.fc-table-grid [role=gridcell] {
 	padding: 2px 5px;
}

.fc-table-grid [role=gridcell].even {
 	background-color: #fff;
}
.fc-table-grid [role=gridcell].odd {
 	background-color: #f9f9f9;
}
/* Alternating row colors for selected rows */
.fc-table-grid [role=gridcell].even.selected {
	background-color:#dfedfd;
}
.fc-table-grid [role=gridcell].odd.selected {
	background-color:#dae8f8;
}
/* Alternating row colors for hovering above rows */
.fc-table-grid [role=gridcell].even.highlight-hover {
	background-color:#f3f3f3;
}
.fc-table-grid [role=gridcell].odd.highlight-hover {
	background-color:#f1f1f1;
}

/* Alternating row colors for hovering above selected rows */
.fc-table-grid [role=gridcell].even.selected.highlight-hover {
	background-color:#d3e1e8;
}
.fc-table-grid [role=gridcell].odd.selected.highlight-hover {
	background-color:#d3e1e8;
}

/* Alternating row colors for rows currently being edited */
.fc-table-grid [role=gridcell].even.editing {
	background-color:#FFF9C4!important;
}
.fc-table-grid [role=gridcell].odd.editing {
	background-color:#FFF59D!important;
}




.fc-table-grid [role=gridcell].row-sel-wrapper {
	align-self:stretch;
}
.fc-table-grid [role=gridcell].row-sel-wrapper label {
	width: 100%;
	height: 100%;
	display:flex;
}
.fc-table-grid [role=gridcell].row-sel-wrapper label>input {
	margin:auto;
	cursor:pointer;
}


/* Variation on the 'grid' appearance: 'grid-responsive'. This transforms rows into cards on mobile screens. */
@media (min-width: 768px) {
	.fc-table-grid[data-appearance="grid-responsive"] .fc-tile-label {
		display:none;
	}
}
@media (max-width: 767px) {
	.fc-table-grid[data-tsc][data-appearance="grid-responsive"] {
		grid-template-columns: auto;
	}
	.fc-table-grid[data-appearance="grid-responsive"] div[role=columnheader] {
		display: none;
	}
	.fc-table-grid[data-appearance="grid-responsive"] div[role=gridcell] {
		padding:15px 10px;
	}
	.fc-table-grid[data-appearance="grid-responsive"] div[role=gridcell].gridcell-first {
		padding-top:20px;
	}
	.fc-table-grid[data-appearance="grid-responsive"] div[role=gridcell].gridcell-last {
		padding-bottom:20px;
	}
	/* If the last cell is empty, it should not add additional padding: */
	.fc-table-grid[data-appearance="grid-responsive"] div[role=gridcell].gridcell-last:empty {
		padding-bottom:0;
	}
}

/* ==========================================================================
   Filmchief table
   ========================================================================== */
.fc-table-rows-info[data-row-count="0"] {
	display:none;
}
.fc-table-rows-info .first-displayed-row,
.fc-table-rows-info .last-displayed-row,
.fc-table-rows-info .row-count {
	font-weight:bold;
}

.fc-freshness-wrapper {
	position:relative;
	width:100%;
	height:100%;
}
.fc-freshness {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	border-style: solid;
	border-width: 0 4px 0 0;
	border-color: transparent #ccdc39 transparent transparent;
}
[role=gridcell] .fc-freshness {
	left:-5px;
}

.fc-freshness+.tooltip.top>.tooltip-arrow {
	border-top-color:#C0CA33;
}
.fc-freshness+.tooltip.right>.tooltip-arrow {
	border-right-color:#C0CA33;
}
.fc-freshness+.tooltip>.tooltip-inner {
	background-color:#C0CA33;
}

th .fc-th-sum,
[role=columnheader] .fc-th-sum {
	font-size:80%;
	color: #9e9e9e;
	font-weight:normal;
	line-height:1.4;
	white-space: nowrap;
}

.table.fc-table>tbody>tr>td, 
.table.fc-table>tbody>tr>th, 
.table.fc-table>tfoot>tr>td, 
.table.fc-table>tfoot>tr>th, 
.table.fc-table>thead>tr>td, 
.table.fc-table>thead>tr>th,
.table.fc-table-headers-clone>tbody>tr>td, 
.table.fc-table-headers-clone>tbody>tr>th, 
.table.fc-table-headers-clone>tfoot>tr>td, 
.table.fc-table-headers-clone>tfoot>tr>th, 
.table.fc-table-headers-clone>thead>tr>td, 
.table.fc-table-headers-clone>thead>tr>th {
    padding: 6px 4px;
}

.table.fc-table>tbody>tr>td.row-sel-wrapper {
	padding:0;
}

/* Allow very wide tables to use the padding-right space that was introduced by .container-full 
(todo: this will only work properly one the overflow-y on the .fc-table-wrapper is hidden.)
/* Let the table wrapper take over the panel body's left & right padding, in order to make the horizontal 
   scrollbar use the whole width : */
@media screen {
	.panel-body-inner>.fc-table-wrapper {
		overflow-y:hidden !important;
		margin-left: -15px;
		padding-left: 15px;
		margin-right: -15px;
		padding-right: 15px;
	}
}
	
.fc-table .dragHandle {
	width:30px;
}
thead.invisible-table-header {
	visibility: hidden;
}

.fc-table .row-select-menu-wrapper {
	text-align:center;
}
/* This special dropdown caret is always visible (except if the entire table header is invisible): */
th.row-select-menu-wrapper .dropdown-toggle .caret {
    visibility: visible;
}
thead.invisible-table-header th.row-select-menu-wrapper .dropdown-toggle .caret {
    visibility: hidden;
}

.fc-table .row-sel-wrapper,
.fc-table-headers-clone .row-sel-wrapper {
	width:38px;
}
.fc-table .dragHandle,
.fc-table .row-sel-wrapper,
.fc-table-headers-clone .row-sel-wrapper {
	padding:0;
	text-align:center;
	vertical-align:middle;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.fc-table .row-sel-wrapper label,
.fc-table-headers-clone .row-sel-wrapper label {
	margin-bottom:0;
	width:100%;
}
.fc-table .row-sel-all,
.fc-table-headers-clone .row-sel-all,
.fc-table .row-sel {
	margin:8px;
	cursor:pointer;
}
.fc-table>thead>tr>th,
.fc-table-headers-clone>thead>tr>th {
	padding-top:4px;
	line-height:1.15;
}

.table-fixed-top {
	background-color:#fff;
	position:absolute;
	z-index:16; 
	
	padding-top:10px; /* = top spacing when scrolling */
	top:-10px; /* = top spacing when scrolling */
}
.fc-table-headers-clone {
	table-layout:fixed;
	margin-bottom:0;
/*	background-color:#fff;
	position:absolute;
	z-index:1;*/
}


/* Add this class to a .fc-table-wrapper instance to give the table a certain fixed height with auto-scroll: */
.fc-table-max-height-500 {
    overflow-x: hidden;
    overflow-y: auto!important;
    max-height: 150px;
    margin-top: 52px;
}

.panel-body-inner>.fc-table-wrapper,.fc-table-max-height-500 {
    overflow-y: auto!important;
}

.fc-table-max-height-500>.fc-table-headers-clone {
    position: absolute;
    background-color: #fff;
    margin-top: -52px;
}




/* Make background color of even rows explicitly white */
.table-striped>tbody>tr:nth-child(even)>td, 
.table-striped>tbody>tr:nth-child(even)>th {
	background-color:#fff;
}

/* Change background color of odd rows (lighter than bootstrap) */
.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
	background-color:#fcfcfc;
}

/* Alternating row colors for selected rows */
.fc-table tr.selected td,
.fc-table.table-striped tr:nth-child(even).selected td {
	background-color:#dfedfd;
}
.fc-table.table-striped tr:nth-child(odd).selected td {
	background-color:#dae8f8;
}

/* Alternating row colors for hovering above rows */
.fc-table.highlight-hover tr:hover td,
.fc-table.table-striped.highlight-hover tr:nth-child(even):hover td {
	background-color:#f3f3f3;
}
.fc-table.table-striped.highlight-hover tr:nth-child(odd):hover td {
	background-color:#f1f1f1;
}

/* Alternating row colors for hovering above selected rows */
.fc-table.highlight-hover tr:hover.selected td,
.fc-table.table-striped.highlight-hover tr:nth-child(even):hover.selected td {
	background-color:#d3e1e8;
}
.fc-table.table-striped.highlight-hover tr:nth-child(odd):hover.selected td {
	background-color:#d3e1e8;
}

/* Alternating row colors for rows currently being edited */
.fc-table tr.editing td,
.fc-table.table-striped tr:nth-child(even).editing td {
	background-color:#FFF9C4!important;
}
.fc-table.table-striped tr:nth-child(odd).editing td {
	background-color:#FFF59D!important;
}


.fc-table.entity-link-row>tbody>tr:not(.row-sel-wrapper),
.fc-table.entity-link-row>tbody>tr:not(.row-sel-wrapper) *,
.fc-collection-view.entity-link-row [role=gridcell]:not(.row-sel-wrapper),
.fc-collection-view.entity-link-row [role=gridcell]:not(.row-sel-wrapper) * {
	cursor:pointer;
    user-select: none;
}

.fc-collection-view > .no-records {
    display:block!important; /* prevent the flex-row class from making the no-records contents displayed as flex */
}

.fc-table.entity-link-row>tbody>tr td.no-records,
.fc-table.entity-link-row>tbody>tr td.no-records *,
.fc-collection-view.entity-link-row [role=gridcell].no-records,
.fc-collection-view.entity-link-row [role=gridcell].no-records * {
	cursor:auto;
    user-select:auto;
}

.fc-table.entity-link-row>tbody>tr td.no-records .btn,
.fc-collection-view.entity-link-row [role=gridcell].no-records .btn {
	cursor:pointer;
}


/* Rows/tiles that are suggested to be deleted */
.fc-table tr.deleted-suggestion td+td,
.fc-tile.deleted-suggestion .fc-tile-content {
	text-decoration:line-through;
	opacity:.5;
}
/* Hide inline edit pencil icons on rows/tiles that are suggested to be deleted */
.fc-table tr.deleted-suggestion .fa-pencil,
.fc-tile.deleted-suggestion .fa-pencil {
	display:none;
}
/* Reposition deletion suggestions on tile footer */
.fc-tile-footer .fc-post-it.fc-sc-deletion-suggestion {
	position:absolute;
	top:-100px;
}

.fc-table-hierarchy-toggle {
	display:inline-block;
	width:16px;
	color:#333;
	cursor:pointer;
}
.fc-table-hierarchy-toggle.empty .fa {
	visibility:hidden;
}

.table>tbody>tr[data-level="0"]>td:first-child {
	padding-left:8px;
}
.table>tbody>tr[data-level="1"]>td:first-child {
	padding-left:24px;
}
.table>tbody>tr[data-level="2"]>td:first-child {
	padding-left:40px;
}
.table>tbody>tr[data-level="3"]>td:first-child {
	padding-left:56px;
}




/* ==========================================================================
   Draggable columns in Filmchief tables (for easy reordering)
   ========================================================================== */

.fc-table-header {
	padding-right:12px; /* padding for the dropdown caret */
}
.fc-draggable-column {
	display:block;
	margin-left:0px;
	
    -webkit-transition: margin-left .25s, padding-right .25s;
    transition: margin-left .25s, padding-right .25s;
}
.fc-draggable-column>.fc-draggable-column-grip {
	position:absolute;
	overflow:hidden;
	left:0;
	bottom:0;
	width:0px;
	opacity:0;
	
    -webkit-transition: width .25s, opacity .25s;
    transition: width .25s, opacity .25s;
}
.fc-table-header>.fc-table-header-dropdown-caret {
	position:absolute;
	right:0;
	bottom:0;
	opacity:0;
	
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
}
.fc-draggable-column.fc-draggable-column-enabled:hover {
	margin-left:10px;
	padding-right:2px;
}
.fc-draggable-column.fc-draggable-column-enabled:hover>.fc-draggable-column-grip {
	width:10px;
	opacity:1;
}
.fc-table-header:hover>.fc-table-header-dropdown-caret {
	opacity:1;
}


/* ==========================================================================
   Filmchief collection view (tables and tiles)
   ========================================================================== */

/* For devices that do not support hover events (e.g. touch devices), do not hide the pencil icon for inline editing in tables: */
@media (hover: hover) {
	/* If the device supports hover events, then hide the pencil icon for inline editing in tables... */
	.fc-table td .inline-edit .fa-pencil,
	.fc-table-grid [role=gridcell] .inline-edit .fa-pencil,
	.fc-tiles .fc-tile-field .inline-edit .fa-pencil {
		color:#c4c4c4; /* slightly darker icon because of alternating row background color */
		opacity:0;
	}
	
	/* ... and fade in when hovering the surrounding cell */
	.fc-table td:hover .inline-edit .fa-pencil,
	.fc-table-grid [role=gridcell]:hover .inline-edit .fa-pencil,
	.fc-tiles .fc-tile-field:hover .inline-edit .fa-pencil {
		-webkit-transition:opacity .5s;
		-moz-transition:opacity .5s;
		transition:opacity .5s;
		opacity:1;
	}
}

.fc-table td .inline-edit:hover .fa-pencil,
.fc-table-grid [role=gridcell] .inline-edit:hover .fa-pencil,
.fc-tiles .fc-tile-field .inline-edit:hover .fa-pencil {
	color:var(--theme-color); /* was: inherit; */
}

/* Posting notes/tasks isn't possible in tile view */
.fc-tile-field .note-heading,
.fc-tile-field .fc-post-note-form {
	display:none;
}
.fc-tile-field .fc-notes-wrapper {
	margin-top:0;
}

/* new footer positioning */
.fc-tile {
	position:relative;
}


.fc-tiles {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:20px 0;
}
.fc-tiles[data-row-selector="true"] {
	.fc-tile:hover, .fc-tile:focus,  .fc-tile.selected {
		border-color: #428bca;
		cursor:pointer;
	}
	.fc-tile.fc-tile.selected {
		background-color:#E1F5FE; /* Google Material Design Light Blue 50 */
		border-color:#4FC3F7; /* Google Material Design Light Blue 300 */
	}
}
.fc-tiles .thumbnail {
	margin-bottom:0;
    width:100%;
	height:100%;
	display:flex;
    flex-direction:column;
}
.panel-body-inner>.fc-table-wrapper>.fc-tiles{
	margin-right:0;
}



.fc-tile-screening-room>.fc-tile-content>h3 {
	margin:-4px -4px 10px -4px;
	padding:10px 4px;
	background-color:#3F51B5;
	color:#fff;
}
.screening-room-description {
	margin:15px 0 20px 0;
}
.fc-tile-screening-room:focus,
.fc-tile-screening-room:hover {
	text-decoration:none;
	outline: 0;
}




.fc-tile-content {
	height:100%;
}

.fc-tile-footer {
	bottom:0;
	width:calc(100% + 8px); /* adding 8px to compensate for the -4px left and right margins */
	
	/* old footer positioning 
	position:absolute; 
    */
	/* even older footer positioning 
	position:relative; 
	bottom:24px; should match the height of the footer minus 1 px 
	*/
	text-align:right;
	background-color:#F5F5F5;
	border-top:1px solid #e0e0e0;
    margin:0 -4px -4px -4px;
	border-bottom-left-radius:2px;
	border-bottom-right-radius:2px;
	padding:4px;
}
/* old footer positioning
.vl-enum .fc-tile-footer {
	bottom:59px;
}
*/

.fc-tile-label {
	font-size:12px;
	line-height:14px;
	color:#9E9E9E;
}
.fc-tile-field {
	margin-top:3px;
}
.fc-tile-field:first-child {
	margin-top:0;
}

/* Javascript-triggered class multisel-hover */
td.multisel-hover .inline-edit .fa-pencil,
[role=gridcell].multisel-hover .inline-edit .fa-pencil {
	color:#c4c4c4;
	opacity:1;
}
td.multisel-hover-in .inline-edit .fa-pencil,
[role=gridcell].multisel-hover-in .inline-edit .fa-pencil {
	color:#2a6496;
}

/* Column headers (th for table-based list views, div for grid-based list views) */
[role=columnheader] .dropdown-toggle {
	color:#333;
	text-decoration:none;
}
[role=columnheader] .dropdown-toggle .caret {
	visibility:hidden;
}
[role=columnheader] .dropdown-toggle:focus .caret,
[role=columnheader] .dropdown-toggle:hover .caret {
	visibility:visible;
}
[role=columnheader] .dropdown-toggle:focus,
[role=columnheader] .dropdown-toggle:hover {
	color:#2a6496;
}



.table-toolbar {
	margin-bottom:5px;
	padding-right:15px;
}
.table-toolbar>* {
	margin-top:3px;
}
/* clearfix after table-toolbar */
.table-toolbar:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}

.label-inline-block-wrapper {
	display:inline-block;
	padding:0 1px;
	vertical-align: middle;
}

/* ==========================================================================
   Filmchief snackbar
   ========================================================================== */
/* use the 'show-fc-snackbar' class to transform any element to a snackbar that is shown immediately */
.show-fc-snackbar {
	display:none;
}
.fc-snackbar {
	position:fixed; 
	z-index:99999; 
	min-width:50px;
	max-width:600px;

	/* Inactive: */	
	opacity:0;
	
    -webkit-transition-property: margin, opacity, top, bottom; /* Safari */
    transition-property: margin, opacity, top, bottom;
    -webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;	
}
.fc-snackbar.fc-snackbar-left-top,
.fc-snackbar.fc-snackbar-left-middle,
.fc-snackbar.fc-snackbar-left-bottom {
	left:15px; 
}
.fc-snackbar.fc-snackbar-center-top,
.fc-snackbar.fc-snackbar-center-middle,
.fc-snackbar.fc-snackbar-center-bottom {
	left:50%; 
}
.fc-snackbar.fc-snackbar-right-top,
.fc-snackbar.fc-snackbar-right-middle,
.fc-snackbar.fc-snackbar-right-bottom {
	right:15px; 
}
.fc-snackbar.fc-snackbar-left-top,
.fc-snackbar.fc-snackbar-center-top,
.fc-snackbar.fc-snackbar-right-top {
	margin-top:-50px;
}
.fc-snackbar.fc-snackbar-left-bottom,
.fc-snackbar.fc-snackbar-center-bottom,
.fc-snackbar.fc-snackbar-right-bottom {
	margin-bottom:-50px;
}

.fc-snackbar-body {
	position:relative; 
	padding:4px 4px 3px 4px;
	-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
	box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.fc-snackbar.fc-snackbar-center-top .fc-snackbar-body {
	font-weight: bold;
}

.fc-snackbar.fc-snackbar-center-top>.fc-snackbar-body,
.fc-snackbar.fc-snackbar-center-middle>.fc-snackbar-body,
.fc-snackbar.fc-snackbar-center-bottom>.fc-snackbar-body {
	left:-50%;
}

.fc-snackbar-default>.fc-snackbar-body {
	background-color:#FFF59D;
	border:solid #FFEB3B 1px;
}
.fc-snackbar-danger>.fc-snackbar-body {
	background-color:#F44336;
	border:solid #D32F2F 1px;
	color:#fff;
}
.fc-snackbar-success>.fc-snackbar-body {
	background-color:#4CAF50; /* Google Material Design Green 500 */
	border:solid #2E7D32 1px;
	color:#fff;
}
.fc-snackbar-info>.fc-snackbar-body {
	background-color:#00ACC1;
	border:solid #00838F 1px;
	color:#fff;
}
.fc-snackbar-filmchief>.fc-snackbar-body {
	background-color:#546E7A;
	border:solid #37474F 1px;
	color:#fff;
}

.fc-snackbar-body>:first-child {
	margin-top:0;
}
.fc-snackbar-body .close {
	font-size:14px;
}
.fc-snackbar-body h2 {
	font-weight:300;
	font-size:22px;
	margin:15px 0;
}
.fc-snackbar-body h3 {
	font-weight:300;
	font-size:19px;
	margin:15px 0;
}
.fc-snackbar-body h4 {
	font-weight:700;
	font-size:16px;
	margin:15px 0 5px 0;
}
.fc-snackbar-body h5 {
	font-weight:700;
	font-size:14px;
	margin:10px 0 0 0;
}
.fc-snackbar-danger h2,
.fc-snackbar-danger h3,
.fc-snackbar-danger h4,
.fc-snackbar-danger h5,
.fc-snackbar-success h2,
.fc-snackbar-success h3,
.fc-snackbar-success h4,
.fc-snackbar-success h5,
.fc-snackbar-info h2,
.fc-snackbar-info h3,
.fc-snackbar-info h4,
.fc-snackbar-info h5,
.fc-snackbar-filmchief h2,
.fc-snackbar-filmchief h3,
.fc-snackbar-filmchief h4,
.fc-snackbar-filmchief h5 {
	color:#fff;
}

.fc-snackbar.active {
	margin:0px;
	opacity:1;
}
.fc-snackbar.fc-snackbar-left-bottom,
.fc-snackbar.fc-snackbar-center-bottom,
.fc-snackbar.fc-snackbar-right-bottom {
}
.fc-snackbar-body>:last-child {
	margin-bottom:0;
}
.fc-snackbar-body a,
.fc-snackbar-body a:focus,
.fc-snackbar-body a:hover {
	color:inherit;
	text-decoration:underline;
}
.fc-snackbar-body a.close,
.fc-snackbar-body a.close:focus,
.fc-snackbar-body a.close:hover {
	text-decoration:none;
}.fc-snackbar-body a.close {
	opacity:0.3;
	padding:3px 6px 3px 12px;
}
.fc-snackbar-body a.close:focus,
.fc-snackbar-body a.close:hover {
	opacity:0.6;
}

/* ==========================================================================
   Google Maps integration
   ========================================================================== */
.gmaps-wrapper {
	overflow:hidden;
}
.gmaps-canvas {
	max-width:none!important;
	background:none!important;
}
.fc-gmaps-canvas {
	height:440px;
	width:100%;
}


/* ==========================================================================
   Current user dropdown menu head
   ========================================================================== */
.fc-user-dropdown {
	max-height:50px;
	padding:0!important;
}
.fc-user-dropdown>.user-name {
	display:inline-block;
	line-height:50px;
	margin-right:5px;
}
.fc-user-dropdown>.fc-picture-thumb {
	display:inline-block;
	margin:5px;
	height: 40px;
	float:left;
}
@media (max-width: 767px) {
	.nav > li > a.fc-user-dropdown,
	.nav > li > a.fc-menu-dropdown {
		display:flex;
		justify-content: end;
	}
	.fc-user-dropdown>.user-name {
		line-height:40px;
	}
	.fc-user-dropdown>.fc-picture-thumb {
		height:34px;
		margin: 3px 5px;
	}
	.fc-user-dropdown>.fc-picture-thumb>img {
		height: 34px;
		width: 34px;
	}
}

/* ==========================================================================
   Snackbar header section with a thumbnail
   ========================================================================== */
.fc-snackbar-thumb-header {
	height:40px;
	padding:0!important;
}
.fc-snackbar-thumb-header>.fc-snackbar-thumb-header-title {
	display:inline-block;
	line-height:40px;
	margin-right:5px;
}
.fc-snackbar-thumb-header>.fc-picture-thumb {
	display:inline-block;
	margin:0 5px 0 0;
	height: 40px;
	float:left;
}


.snackbar-content-max-height-90 {
	max-height:8em;
	overflow:hidden;
	padding:5px 0;
}
.snackbar-content-max-height-90>p:last-child {
	margin-bottom:0;
}
/* Some css fixes */
.fc-snackbar-toolbar a.btn {
	text-decoration:none;
}
.fc-snackbar-toolbar .btn-default,
.fc-snackbar-toolbar .btn-default:focus,
.fc-snackbar-toolbar .btn-default:hover,
.fc-snackbar-toolbar .btn-default:active,
.fc-snackbar-toolbar .btn-default:active:focus,
.fc-snackbar-toolbar .btn-default:active:hover {
	color: #616161;
}


/* ==========================================================================
   Thumbnail images (for avatars)
   ========================================================================== */
.fc-picture-thumb {
	height: auto;
	position: relative;
	overflow: hidden;
}
.fc-picture-thumb>img {
	display: block;
	margin: 0 auto;
}
.fc-picture-thumb.fc-picture-thumb-rounded>img {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}
.fc-picture-thumb-sm {
	max-width: 40px;
}
.fc-picture-thumb-sm>img {
	height: 40px;
	width: 40px;
}
.fc-picture-thumb-md {
	max-width: 100px;
}
.fc-picture-thumb-md>img {
	height: 70px;
	width: 70px;
}
.fc-picture-thumb-lg {
	max-width: 100px;
}
.fc-picture-thumb-lg>img {
	height: 100px;
	width: 100px;
}

/* ==========================================================================
   Sticky notes (for suggested corrections)
   ========================================================================== */
.fc-correction-line-through {
	text-decoration: line-through;
	opacity:0.8;
}

.fc-post-it {
	position: relative;
}

.fc-post-it .note {
	color: #333;
	display:inline-block;
	width: auto;
	margin: 0 auto;
	padding: 10px;
	box-shadow: 0 5px 5px 2px rgba(0,0,0,0.2);
	/*position: relative;*/
	position: absolute;
	z-index: 10;
}

.fc-post-it .note .buttons {
	display: block;
	line-height:24px;
	text-align: right;
}

.fc-post-it .yellow {
	background: #FFF59D;
/*	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg); */
}
.pin {
	background-color: #888;
	display: block;
	height: 16px;
	width: 1px;
	position: absolute;
	left: 50%;
	top: -8px;
	z-index: 1;
}
.pin:after {
	background-color: #FF9800;
	background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
			  inset 3px 3px 3px hsla(0,0%,100%,.2),
			  inset -3px -3px 3px hsla(0,0%,0%,.2),
			  12px 8px 3px hsla(0,0%,0%,.15);
	content: '';
	height: 9px;
	width: 9px;
	left: -4px;
	position: absolute;
	top: -5px;
}
.pin:before {
	background-color: hsla(0,0%,0%,0.1);
	box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
	content: '';

	height: 12px;
	width: 1px;
	left: 0;
	position: absolute;
	top: 4px;

	-moz-transform: rotate(57.5deg);
	-webkit-transform: rotate(57.5deg);
	-o-transform: rotate(57.5deg);
	-ms-transform: rotate(57.5deg);
	transform: rotate(57.5deg);

	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}
.fc-post-it-heading {
	margin-bottom:7px;
	line-height:1.3;
}


/* ==========================================================================
   Wrap in iframe hack (to allow nested forms, i.e. PayPal button on a form)
   ========================================================================== */
.wrapInIframe {
	height:0;
	overflow:hidden;
}



/* Conditional visibility of elements in ?iframe=app webview mode or in normal browser mode */
.d-app-block,
.d-app-flex {
	display:none;
}
.get_iframe_app .d-app-block {
	display:block;
}
.get_iframe_app .d-app-flex {
	display:flex;
}
.get_iframe_app .d-app-none {
	display:none!important;
}
.d-browser-block {
	display:block;
}
.d-browser-flex {
	display:flex;
}
.get_iframe_app .d-browser-block,
.get_iframe_app .d-browser-flex {
	display:none;
}