/* Scrollbar colors in dark mode */
:root {
    --scrollbar-bg: var(--fc-fill-010);
    --scrollbar-thumb: var(--fc-fill-060);
}

/* WebKit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 17px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    /*border-radius: 5px;*/
}

::-webkit-scrollbar-thumb:hover {
    background: darken(var(--scrollbar-thumb), 10%);
}

/* Firefox */
* {
    scrollbar-width: normal;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}


/* Replace Bootstrap and Filmchief font stack */
html,
blockquote,
input,
button,
select,
textarea,
.navbar-search .search-query,
.jqx-widget,
h5, h6, .h5, .h6, 
.selectpicker.inner,

/* kendoUI: */
.k-input[type="text"],
.k-picker-wrap .k-input
{
	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', sans-serif;*/
}
body {
    font-family:inherit;
    font-size:inherit;
	line-height:inherit;
}

.navbar-brand,
.navbar-inverse .navbar-brand {
	color:var(--theme-color-text1); /* was: #757575; /* Google Material Design Gray 600 */
}

h1 {
	font-size: 30px;
	font-weight:100;
}

h1,h2,.page-title {
    color:var(--theme-color-text1);
}


/* Read-only form values */
.form-value {
    color: #9a9a9a;
}


/* Some screening room adjustments */

.vl-filters-panel {
    background-color: #444;
}


/* Add white background behind QR codes */
img.qrcode {
	background-color:#fff;
}


/* Use overflow-x on nav-tabs on phone displays */
@media (max-width: 767px) {


	/* Expanded list (mobile only): */
	body.expanded-list .collection-only .expanded-list-close {
		background-color:#000; /* DARK THEME */
	}

	body.flex-page-container.flex-page-container-list.expanded-list .content-body > .container-full > .row > .col-page > .content-body-wrapper > .collection-only > .fc-table-wrapper {
		background-color:#000; /* DARK THEME */
	}
	
}




/* ==========================================================================
   Redactor
   ========================================================================== */
.redactor-editor {
	background-color:#212121; /* Google Material Design Grey 900 - DARK THEME */
	border-color:#757575; /* Google Material Design Grey 600 - DARK THEME */
	color:#EEEEEE; /* Google Material Design Grey 200 - DARK THEME */
}
.redactor-toolbar li a {
	color:#EEEEEE; /* Google Material Design Grey 200 - DARK THEME */
}
.redactor-placeholder:after {
	color:#9E9E9E; /* Google Material Design Grey 500 - DARK THEME */
}


/* Invert the color of the spinner gif on the 'submitting request' modal */
.modal .processing img {
    filter: invert(100%);
}




/* ==========================================================================
   External Schedule
   ========================================================================== */
.bounding-box>.fade-left {
    opacity: 0.5;
    background: -moz-linear-gradient(left, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%);
    background: -webkit-linear-gradient(left, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
    background: linear-gradient(to right, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=1 );
}
.bounding-box>.fade-right {
    opacity: 0.5;
    background: -moz-linear-gradient(left, rgba(33,33,33,0) 0%, rgba(33,33,33,1) 100%);
    background: -webkit-linear-gradient(left, rgba(33,33,33,0) 0%,rgba(33,33,33,1) 100%);
    background: linear-gradient(to right, rgba(33,33,33,0) 0%,rgba(33,33,33,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#212121',GradientType=1 );
}
.popover-content>.popover-loading {
    background-color: rgba(64,64,64,0.6);
}
.popover.bottom>.arrow:after {
    border-bottom-color: #585858;
}
.popover.top>.arrow:after {
    border-top-color: #585858;
}

/* ==========================================================================
   Page / Online resource editor
   ========================================================================== */

.page-edit-navbar {
    background-color: #212121;
    border-left: 1px solid #424242;
    border-right: 1px solid #424242;
    border-bottom: 1px solid #424242;
}
.page-edit-navbar a {
	color:#949494;
}
@media print {
    .page-edit-navbar {
        display:none;
    }
}


/* ==========================================================================
   Filmchief Timeline (fc-tl)
   ========================================================================== */
.fc-tl-centered .fc-tl-date {
	background-color:#000; /* DARK THEME */
}

/* ==========================================================================
   Forms overview pages in the Portal (e.g. 'Entry forms')
   ========================================================================== */
.card-form {
	background-color:#212121; /* Google Material Design Grey 900 - DARK THEME */
}
.card-form-closed {
	color:#888;
}


/* ==========================================================================
   Ticket shop (cinema tickets, reusing some of the css from hub.css)
   ========================================================================== */

.tickets-overview-main {
    background-color: var(--fc-fill-010); /* DARK THEME */
}

.tickets-overview-main h1.viewing-title,
.tickets-overview-main h1.viewing-title > a {
	color:#fff;
    text-decoration: none;
}
.tickets-overview-main h2.viewing-subtitle,
.tickets-overview-main h2.viewing-subtitle > a {
	color:#fff;
    text-decoration: none;
}

.card-viewing-prog-overview-body,
.card-viewing-overview-body {
    background-color: #1c1c1c; /* DARK THEME */
	color:#d0d0d0;
}

.card-viewing-overview .label.label-viewing-location {
    background-color: #304050; /* DARK THEME */
    color: #fff; /* DARK THEME */
}
.card-viewing-overview .label.label-viewing-start-date-time {
    background-color: #304050; /* DARK THEME */
    color: #fff; /* DARK THEME */
}

.tickets-overview #tickets-overview-sidebar-left {
    background-color: var(--fc-fill-015); /* DARK THEME */
}

.tickets-overview-filters .filter-heading {
    color: var(--theme-color-text1); /* #fff; /* DARK THEME */
}

.ticketing-info.popup {
    background-color: #282828; /* DARK THEME */
}

.table-select-tickets .items-grid .cell {
    border-bottom: 1px solid #484848; /* DARK THEME */
}

.filter-type-calendar .filter-calendar-day label {
    border: 1px solid #484848;
}
.filter-type-calendar .filter-calendar-day.today label {
	border: 3px solid #FFD945;
}
.filter-type-calendar .filter-calendar-day.inactive label {
    color: #484848;
}

/* ==========================================================================
   Cards (like in Bootstrap 4, used in ticket shop)
   ========================================================================== */
.card.card-bg {
    background-color: #282828; /* DARK THEME */
}