.container-full {
	max-width:1920px;
}
.container-full > .page-content > .container {
	padding:0; /* Avoid double padding */
}

.content-header-wrapper {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.content-title-wrapper {
	display:flex;
	margin-bottom:20px;
}
.content-toolbar-wrapper {
	display:flex;
	margin-left: auto;
	margin-bottom:20px;
}

.content-title-wrapper h1 {
	margin-bottom:0;
}
/*
.content-top-hr {
	margin-top:0;
}
*/

.content-body {
	padding-bottom:94px;
}



/* Centered panels on a page without sidenav are pushed down a bit for an extra spatious feel (desktop only): */
html.base_main_main-without-sidenav .center-block > .panel,
html.base_main_main-shop .center-block > .panel {
	margin-top:250px;
}
@media (max-width: 1199px) {
	html.base_main_main-without-sidenav .center-block > .panel,
	html.base_main_main-shop .center-block > .panel {
		margin-top:100px;
	}
}
@media (max-width: 767px) {
	html.base_main_main-without-sidenav .center-block > .panel,
	html.base_main_main-shop .center-block > .panel {
		margin-top:15px;
	}
}
html.base_main_main-without-sidenav .center-block > .panel .panel-heading,
html.base_main_main-shop .center-block > .panel .panel-heading {
	text-align:center;
}

/* New since 2023-06-29: this replaces the row class for the navbar / page columns */
.cols-navbar-page {
	display:flex;
	flex-direction:row;
	width:100%;
}
/* Note: the navbar column has no right padding because that is added by the .navbar-collapse class */
.col-navbar {
	padding-left:15px;
	padding-top:15px;
}
.col-page {
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
}
@media (max-width: 767px) {
	.col-navbar,
	.col-page {
		padding-top:0;
	}
}

.col-navbar .navbar-header {
	float:none;
}

/* The page column fills the remaining horizontal space: */
.col-page {
	flex:1;
}

.col-navbar {
	width:360px;
} 
.cols-navbar-page > .col-page {
    width: calc(100vw - 360px);
}
/* The width of the navbar column depends on the screen size */
@media (max-width: 991px) {
	.col-navbar {
		width:280px;
	}
    .cols-navbar-page > .col-page {
        width: calc(100vw - 280px);
    }
}
@media (max-width: 767px) {
	.cols-navbar-page {
		flex-direction:column;
		width:100%;
	}
	.col-navbar {
		width:100%;
	} 
    .cols-navbar-page > .col-page {
        width: 100%;
    }
}


.backlink {
	margin-bottom:1em;
}


footer.page-footer {
	height:74px;
}


/* Responsive images by default */
img {
	max-width: 100%;
}


/* === SHOP === */
.auto-hide {
	display:none;
}
.auto-hide.in {
	display:block;
}
tr.auto-hide.in {
	display:table-row;
}
td.auto-hide.in,
th.auto-hide.in {
	display:table-cell;
}
div.controls .btn.auto-hide.in {
	display:inline-flex;
	height:100%;
}
tr.controls .btn.auto-hide.in {
	display:inline-block;
}

.invalid-feedback {
	color:#E53935;
}

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


/* Original Bootstrap inverse navbar colors are too dark: */
.navbar-inverse .navbar-nav>li>a {
	color:#E0E0E0; /* Google Material Design Grey 300 */
}
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
	color:#F5F5F5; /* Google Material Design Grey 100 */
}

.navbar .navbar-nav > li > a > .menu-item-label {
	margin-left:5px;
}

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

/*
.navbar-left .navbar-body>.list-unstyled>li {
	margin-top:20px;
	margin-bottom:20px;
}
.navbar-left .navbar-body>.list-unstyled>li:first-child {
	margin-top:0;
}*/

.nav-tabs .step-number {
	font-size:18px;
}




body.flex-page-container .page-container {
	display:flex;
	flex-flow:column;
}
body.flex-page-container .page-container > .content-body {
    flex: 1; /* fill all remaining vertical space since no flex values are set to other children */
    display: flex;
    flex-direction: column;
	padding-bottom:0px;
}
body.flex-page-container .content-body > .container-full.col-page {
	display:flex;
	flex: 1;
	flex-flow:column;
}




/* ==========================================================================
   Grid-based full-page list views
   ========================================================================== */
body.flex-page-container footer.page-footer {
    min-height:75px;
    padding-top: 0px;
}
body.flex-page-container.flex-page-container-list footer.page-footer {
    display: table;
} 
body.flex-page-container.flex-page-container-list .content-body > .container-full > .row {
	flex: 1;
	display:flex;
	flex-direction:row!important;
}
body.flex-page-container.flex-page-container-list .content-body > .container-full > .row > .col-page {
	flex: 1;
    display: flex;
    flex-flow: column;
}
body.flex-page-container.flex-page-container-list .content-body > .container-full > .row > .col-page > .content-body-wrapper {
	flex: 1;
    display: flex;
    flex-flow: column;
}
body.flex-page-container.flex-page-container-list .content-body > .container-full > .row > .col-page > .content-body-wrapper > .collection-only {
	position:relative;
	height:100%;
	padding:0;
}
body.flex-page-container.flex-page-container-list .content-body > .container-full > .row > .col-page > .content-body-wrapper > .collection-only > .fc-table-wrapper {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	
	display:flex;
	flex-flow:column;
}

/* Not-so-high screens (including Macbook Air laptops and phones), prevent a published list from being out of reach (pushed out of the viewport): */
@media (max-height: 1024px) {
	/* Make the page container's height auto (instead of 100%): */
	body.flex-page-container.flex-page-container-list .page-container {
		height: auto;
	}
	/* Make the page's content body vertically scrollable: */
	body.flex-page-container.flex-page-container-list .page-container>.content-body {
		overflow-y:auto;
		overflow-x:hidden;
	}
	/* ... and make the collection-only element at least 50% of the viewport height */
	body.flex-page-container.flex-page-container-list .content-body > .container-full > .row > .col-page > .content-body-wrapper > .collection-only {
		min-height: 50vh;
	}
}


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

	.navbar {
		margin-bottom:0;
	}

	/* Add minimal spacing around the navbar brand */
	.navbar-brand {
		margin:5px;
	}
	
	.nav-submit-film {
		white-space:nowrap;
		overflow-x:auto;
		overflow-y:hidden;
		border-bottom:none;
		font-size:0;
	}
	.nav-submit-film.nav-tabs>li {
		margin-bottom:0;
		font-size:14px;
	}
	.nav-submit-film li {
		float:none;
		display:inline-block;
		border-bottom:1px solid #ddd;
	}
	.nav-submit-film li.active {
		border-bottom:none;
	}
	.nav-submit-film.nav-tabs>li>a {
		margin-left:0; 
		margin-right:0;
	}
	
	
	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 .collection-only .expanded-list-close {
		display:block;
		position:fixed;
		background-color:#fff;
		padding:8px 12px;
		left:0;
		top:0;
		right:0;
		height:30px;
		background-color:#fff;
		text-align:right;
		z-index:1002;
	}

	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 {
		position:fixed;
		left:0;
		top:30px;
		z-index:1001;
		background-color:#fff;
	}
	
	
	.form-group-slider {
		padding-left:30px;
	}
	
	
}

/* textarea countdown */
.countdown {
	text-align:right;
	color:#888;
	font-size:12px;
}

/* ==========================================================================
   Content
   ========================================================================== */

.col-page > h1:first-child {
	margin-top:0;
}


.panel-title h1 {
	margin-top:10px;
}

/* Bootstrap's default paragraph margin is too small (5px) */
.alert>p+p {
    margin-top:10px;
}

/* No inserted glyphicon content when collapsing/expanding: */
[data-toggle="collapse"] .glyphicon-chevron-down:before {
    content: "";
}
[data-toggle="collapse"] .glyphicon-chevron-right:before {
    content: "";
}



/* ==========================================================================
   Visibility of elements based on account status (email availability)
   ========================================================================== */
.ea-nonexistent .ea-nonexistent-hide,
.ea-deleted .ea-deleted-hide,
.ea-blocked .ea-blocked-hide,
.ea-noAccount .ea-noAccount-hide,
.ea-activationTokenExpired .ea-activationTokenExpired-hide,
.ea-activationPending .ea-activationPending-hide,
.ea-active .ea-active-hide,
.ea-na .ea-na-hide {
	display:none;
}


/* ==========================================================================
   Visibility of time frames based on modality (in availability table)
   ========================================================================== */
.hide-modality {
	display:none;
}


/* ==========================================================================
   Referral campaigns
   ========================================================================== */

.fc-account.referral-campaign {
    display:flex;
    flex-direction: column;
}
.referral-campaign-link-copied {
    word-break: break-all;
}
.referral-campaign-link {
    display:flex;
    align-items:center;
    gap:1.5rem;
}
@media (max-width: 767px) {
    .referral-campaign-link {
        flex-direction: column;
    }
}
.fc-account.referral-campaign .referral-campaign-link {
    flex-direction: column;
}
.fc-account.referral-campaign .referral-campaign-link-copied {
    font-size:1.1rem; /* There's slightly less space on the account page, compared to the checkout-return page */
    opacity:0.75;
}
.fc-checkout-return.referral-campaign .referral-campaign-link {
    
}

.referral-campaign-score {
    align-self:center;
    padding:10px 30px;
    text-align: center;
    display:flex;
    flex-direction: column;
    margin-top:20px;
    background-color:rgba(50,50,50,0.35);
    border-radius:30px;
}
.referral-campaign-score > * {
    margin:0;
}
.referral-campaign-score-value {
	font-size:2.5rem;
    line-height: 2em;
    text-align: center;
}



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

.page-edit-navbar {
	display:block;
	position:fixed;
	z-index:1000000;
	left: 50%;
	top:0;
	transform: translateX(-50%);
	background-color:#fff;
	border-left:1px solid #cacaca;
	border-right:1px solid #cacaca;
	border-bottom:1px solid #cacaca;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding:1px 5px;
}
.page-edit-navbar a {
	text-decoration:none;
}
.onrs-edit:hover+.onrs-edit-wrapper {
	outline:20px solid rgba(72,134,243,0.3);
}



/* ==========================================================================
   Cards (like in Bootstrap 4, but slightly different, used in ticket shop)
   ========================================================================== */
.card.card-padded .card-body,
.card.card-bg .card-body {
    padding:1.125rem;
}
.card.card-bg .card-body {
    flex:1 1 auto;
}
.card.card-bg .card-body > .card-title:first-child {
    margin-top:0;
}
.card.card-padded .card-footer,
.card.card-bg .card-footer {
    padding:1.125rem 1.125rem 0 1.125rem;
}


/* ==========================================================================
   Master film copy details table on film submission forms
   ========================================================================== */

.fc-table-film-copy-details>tbody>tr>th,
.fc-table-film-copy-details>tbody>tr>td {
	vertical-align:middle;
}
.fc-table-film-copy-details .help-block {
	display:none;
}


.paypal-form-faux {
	margin-top:4px;
}



/* ==========================================================================
   Forms overview pages in the Portal (e.g. 'Entry forms')
   ========================================================================== */
.grid-forms-overview {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 16px 24px;
}
@media (max-width: 1199px) {
	.grid-forms-overview {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 767px) {
	.grid-forms-overview {
		grid-template-columns: repeat(1, 1fr);
	}
}
.card-form {
	background-color:#F5F5F5;
	border-radius:8px;
	padding:24px;
}
.card-form-closed {
	color:#888;
}


/* ==========================================================================
   Screening room tiles
   ========================================================================== */
a.fc-tile-screening-room {
	text-decoration: none;
}


/* ==========================================================================
   External messaging
   ========================================================================== */
.fc-extmsg {
	text-align:center;
}
.fc-extmsg.disabled {
	color:#d4d4d4;
}


/* ==========================================================================
   Shop / Ticketing module
   ========================================================================== */
.navbar-cart > a > .menu-item-label {
	display:none; /* The label 'Shopping cart' is a bit redundant, so hide it by default */
}

.fc-cart-item {
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-rows:auto auto auto auto auto;
    grid-template-areas:
        "cart-item-image cart-item-details cart-item-quantity"
        "cart-item-image . cart-item-price-actions"
        "cart-item-image cart-item-price-note cart-item-price"
        "cart-item-image cart-item-actions cart-item-actions"
        "cart-item-notifications cart-item-notifications cart-item-notifications";
    gap:15px;
    
	padding:30px 0;
}
@media (max-width: 767px) {
    .fc-cart-item {
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto auto auto auto;
        grid-template-areas:
            "cart-item-image cart-item-details"
            "cart-item-image cart-item-quantity"
            "cart-item-price-actions cart-item-price-actions"
            "cart-item-price-note cart-item-price"
            "cart-item-actions cart-item-actions"
            "cart-item-notifications cart-item-notifications";
    }
}
@media (max-width: 511px) {
    .fc-cart-item {
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto auto auto auto auto;
        grid-template-areas:
            "cart-item-image cart-item-image"
            "cart-item-details cart-item-details"
            "cart-item-quantity cart-item-quantity"
            "cart-item-price-actions cart-item-price-actions"
            "cart-item-price-note cart-item-price"
            "cart-item-actions cart-item-actions"
            "cart-item-notifications cart-item-notifications";
    }
}
.fc-cart-item-image {
    grid-area:cart-item-image;
}
.fc-cart-item-details {
    grid-area:cart-item-details;
}
.fc-cart-item-quantity {
    grid-area:cart-item-quantity;
    text-align:right;
}
.fc-cart-item-price-actions {
    grid-area:cart-item-price-actions;
    text-align:right;
}
.fc-cart-item-price-note {
    grid-area:cart-item-price-note;
}
.fc-cart-item-price {
    grid-area:cart-item-price;
    text-align:right;
}
.fc-cart-item-actions {
    grid-area:cart-item-actions;
}
.fc-cart-item-notifications {
    grid-area:cart-item-notifications;
}


.fc-cart-item-thumb>img {
	max-width:100%;
}
.fc-cart-item+.fc-cart-item {
	border-top:1px solid #e0e0e0;
}
.fc-cart-item .descriptions {
	margin:15px 0;
}
.fc-cart-item .description {
	font-weight:bold;
}
.fc-cart-item-pass .description {
	font-weight:normal;
}
.fc-cart-item .description-secondary {
	font-size:85%;
	opacity:0.8;
}
.fc-cart-item .viewing-where-and-when {
	margin:15px 0;
}
.fc-cart-item .viewing-event {
	font-size:85%;
	opacity:0.8;
}
.panel-cart-contents h3 {
	font-weight:bold;
	margin-top:0;
}
.panel-cart-contents h3>.fc-cart-item-subtitle {
	display:block;
	font-size:75%;
	padding-top:2px;
}
.fc-cart-item-quantity-form-control.bootstrap-select.btn-group {
	max-width:110px;
}
.fc-cart-item-price {
	font-weight: bold;
}

.fc-cart-item-price-before-redeemed-credits {
	color:rgba(66,66,66,0.64);
	position: relative;
	text-decoration: none;
	margin-right:6px;
}
/* diagonal line-through */
.fc-cart-item-price-before-redeemed-credits:before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	right: 0;
	border-top: 2px solid;
	border-color: rgba(66,66,66,0.64);
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	transform:rotate(-15deg);
}

.fc-cart-item-price-final {
	font-size: 1.4em;
}
.fc-cart-item-price-note {
	/* margin-top:-10px; */
}
.fc-cart-item-remove {
	font-size:85%;
}
.fc-cart-item-alert {
	margin:10px 0;
}
.fc-cart-item-use-multi-ticket-pass {
	margin:10px 0 20px;
	font-size:14px; /* just like .btn, for better alignment */
}
.fc-cart-item-use-multi-ticket-pass .control-label {
	display:inline-block;
	line-height: 1.42857143; /* just like .btn, for better alignment */
	vertical-align: middle; /* just like .btn, for better alignment */
}
.fc-cart-item-use-multi-ticket-pass .control-label > label{
	font-weight: normal;
}
.fc-cart-empty .fc-cart-empty-hidden {
	display:none;
}
.fc-cart-nonempty .fc-cart-nonempty-hidden {
	display:none;
}
.fc-cart-total-row {
	display:flex;
}
.fc-cart-total-row-description {
	flex:1 1 auto;
}
.fc-cart-checkout-button-wrapper {
	margin-top:0.5em;
	text-align:center;
}

.fc-cart-total-row-item-description-note {
	color:#757575;
}
.fc-cart-total-row-total-description,
.fc-cart-total-price {
	font-weight: bold;
	font-size: 125%;
}
.fc-cart-total-row-total-description-note {
	font-weight: normal;
	font-size:80%;
	color:#757575;
}
.fc-cart-total-alert {
	margin-top:20px;
}

.fc-cart-item-redeem-quantity-form-control.bootstrap-select.btn-group {
	max-width:110px;
}


.form-validate-promotion-code {
    display:grid;
    grid-template-columns: 1fr auto;
    gap:15px;
}



.fc-checkout-reservation-notice {
	font-weight: normal;
}
.fc-checkout-reservation-countdown {
	font-size: 150%;
	font-weight: bold;
}

/* Mobile view of the grid table for 'Review your order': make the 'Item' column span the full width of the table */
@media (max-width: 767px) {
	.form-checkout .fc-table-grid {
		grid-template-columns: 1000fr 1fr 1fr 1fr!important;
	}
	.form-checkout .fc-table-grid > div:nth-child(2) {
		grid-column: 1 / 1!important;
	}
	.form-checkout .fc-table-grid > div:nth-child(5n+7) {
		grid-column: 1 / span 4!important;
	}
	.form-checkout .fc-table-grid > div:nth-child(5n+8) {
		grid-column: 1 / span 2!important;
	}
	.form-checkout .fc-table-grid > div:nth-child(5n+9) {
		grid-column: 3!important;
	}
	.form-checkout .fc-table-grid > div:nth-child(5n+10) {
		grid-column: 4!important;
	}
}

.panel-donation .donate-amount-control {
	font-weight:bold;
	vertical-align: baseline;
	margin-top:3rem;
}
.panel-donation .donate-amount-control .amount {
    color: #1f3157;
    display: inline-block;
	font-size:1.25em;
    line-height: 2em;
    text-align: center;
	width:60px;
}
.panel-donation .donate-amount-control button.btn-donate-increment {
    cursor: pointer;
    display: inline-block;
	font-size:1.5em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    line-height: 2em;
    color: var(--theme-color);
    width: 2em;
    height: 2em;
    text-align: center;
    border-radius:50%;
	border-width:0;
    background-color:transparent;
	outline:none;
}
.panel-donation .donate-amount-control .currency {
	font-size:1.4em;
}
.panel-donation button.btn-donate-increment:hover{
    background-color: var(--theme-color);
    color: #fff;
}
.panel-donation .donate-amount-control span {
}
.panel-donation  .donate-amount-control input {
    border: 0;
    width: 2%;
	background-color:transparent;
	-moz-appearance:textfield; /* firefox: hide the up/down spin buttons */
}
.panel-donation input::-webkit-outer-spin-button,
.panel-donation input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.form-donation-add {
	text-align:center;
}
.form-donation-add.disabled {
	opacity:0.5;
}
.panel-donation input:disabled{
    
}
.panel-donation .btn-donate-add-to-cart.action-add > .action-update {
	display:none;
}
.panel-donation .btn-donate-add-to-cart.action-update > .action-add {
	display:none;
}





@media (max-width: 767px) {
	.user-name-label {
		display: none;
	}
}


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

a.btn-scroll {
    text-decoration: none;
}
.tickets-overview {
	display: grid;
  	grid-template-columns: 310px minmax(0, 1fr);
}
@media (max-width: 1399px) {
	.tickets-overview {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}
@media (max-width: 1199px) {
	.tickets-overview {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}
@media (max-width: 991px) {
	.tickets-overview {
		grid-template-columns: 310px minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.tickets-overview {
        margin:0 -15px;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The ticket shop sometimes has very long labels, so for mobile displays it's better to allow them to wrap */
.tickets-overview .label,
.ticketing-info .label {
	display: inline-block;
    margin: 1px;
    line-height: 1.1;
    white-space: normal;
}
.tickets-overview #tickets-overview-sidebar-left {
	padding: 50px 15px;
}

.tickets-overview-filters .filter-heading {
	font-weight: bold;
}
.tickets-overview-filters .filter-toggle {
	display:flex;
	align-items: stretch;
	text-decoration: none;
	color:inherit; /* from .filter-heading */
}
.tickets-overview-filters .filter-toggle > .filter-name {
	flex: 1 1 auto;
}

.tickets-overview-filters .filter-spacing {
	height:20px;
}


.filter-type-calendar .filter-calendar-month {
	color:b3b3b3;
	padding:15px 0 0 0;
}

.filter-type-calendar .filter-calendar-days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 2px;
}

.filter-type-calendar .filter-calendar-day {
    padding: 0;
    /*width: 40px;*/ /* Flexible width defined by the effective width of .tickets-overview #tickets-overview-sidebar-left */
    height: 40px;
}
.filter-type-calendar .filter-calendar-day label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    outline: 0;
    background: transparent;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: 100%;
    transition-duration: .2s;
    opacity: 1;
}
.filter-type-calendar .filter-calendar-day.outside-month {
	visibility: hidden;
}
.filter-type-calendar .filter-calendar-day.day-label label {
	cursor: default;
	border:none;
}
.filter-type-calendar .filter-calendar-day.inactive label {
	cursor: default;
}
.filter-type-calendar .filter-calendar-day .form-check-input {
	display:none;
}
.filter-type-calendar .filter-calendar-day input[type=checkbox]:checked+label {
    background-color: var(--theme-color); /* #0288D1; /* Primary theme color */
    border-color: var(--theme-color); /* #0288D1; /* Primary theme color */
    color: #fff;
}
.filter-type-calendar .filter-calendar-day.today input[type=checkbox]:checked+label {
	color: #FFD945; 
}

.filter-type-calendar .filter-controls.filter-type-checkbox .form-check {
	text-indent: -18px;
	margin-left: 18px;
}
.filter-type-calendar .filter-controls.filter-type-checkbox .form-check > label {
	display:inline;
}


/* Filter type: calendar / Appearance: carousel */

/* Special for the insertion point */
.filter-appearance-carousel {
    margin-top:20px;
}

.filter-appearance-carousel {
    position:relative;
    height:75px;
    overflow:hidden;


    display:flex;
    width:100%;
    justify-content: space-between; /* may not be needed after all */
    justify-content: center;
}

.filter-appearance-carousel > .scroll-items-wrapper {
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    height:200%; /* this tucks away the horizontal scrollbar in the hidden overflow area of the parent */
    /*margin:0 25px; xxx */
    gap:5px;
}

.filter-appearance-carousel .btn-scroll {
    width:25px;
/*    border:1px solid aqua;*/ /* Vienna Shorts */
/*    position:absolute; xxx */
    
    top:0;
    height:100%;
    
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}
.filter-appearance-carousel .btn-scroll-left {
/*    left:0;xxx */
}
.filter-appearance-carousel .btn-scroll-right {
/*    right:0;xxx */
}
.filter-appearance-carousel > .scroll-items-wrapper > .filter-calendar-day {
    /* Vienna Shorts */
    /* 
    width:var(--grid-unit-x3);
    min-width:var(--grid-unit-x3);
    height:var(--grid-unit-x2);
    border-top:1px solid aqua;
    border-bottom:1px solid aqua;
    border-right:1px solid aqua;
    */
    height:50%; /* compensates for the 200% height of the scroll items wrapper */
    
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
}

.filter-appearance-carousel .filter-calendar-day .calendar-weekday {
    white-space: nowrap;
    
    text-transform:uppercase;
    /*text-emphasis-position: under;*/ /* Vienna Shorts */
    /*text-emphasis: " ";*/ /* Vienna Shorts */
}

.filter-appearance-carousel .filter-calendar-day .calendar-date {
    white-space: nowrap;
    
    font-size:1.75rem;
    line-height:1;

    /*font-weight:100;*/ /* Vienna Shorts */
}


.filter-type-calendar .filter-calendar-day label {
    flex-wrap:nowrap;
    /*flex-direction:row;*/ /* Vienna Shorts */
    /*gap:0.5em;*/ /* Vienna Shorts */
}
.filter-appearance-carousel .filter-calendar-day label {
    padding:5px 15px;
}

.filter-type-calendar .filter-calendar-day.today label {
	background-color: var(--accent-color);
}
.filter-type-calendar .filter-calendar-day.today input[type=checkbox]:checked+label {
	background-color: var(--theme-color);
}







.tickets-overview-filters .btn-apply-filters {
	display:none;
}
@media (max-width: 767px) {
	.tickets-overview-filters .btn-apply-filters.in {
		display:block;
		width:100%;
	}
}

.popup-backdrop {
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:1009;
	background-color:rgba(0,0,0,0.0);
	pointer-events: none;

	-webkit-transition: background-color 0.2s linear;
    -ms-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}
.popup-backdrop.in {
	background-color:rgba(0,0,0,0.15);
}

.ticketing-info.popup {
	position:fixed;
	z-index:1010;
	
	right:0;
	top:50px;
	width:450px;
	
	-webkit-box-shadow: -4px 10px 17px 0px rgba(0,0,0,0.0);
	-moz-box-shadow: -4px 10px 17px 0px rgba(0,0,0,0.0);
	box-shadow: -4px 10px 17px 0px rgba(0,0,0,0.0);
	
	/* This timing applies on the way OUT */
	transition-timing-function: ease-in;

	/* Quick on the way out */
	transition: 0.2s;

	/* Hide thing by pushing it outside by default */
	transform: translateX(450px);

	/* Make sure that the content always fits on the screen: */
    max-height: calc(100vh - 50px);
    overflow-y: auto;
}
.ticketing-info.popup.in {
	z-index:1011;
	
	-webkit-box-shadow: -4px 10px 17px 0px rgba(0,0,0,0.32);
	-moz-box-shadow: -4px 10px 17px 0px rgba(0,0,0,0.32);
	box-shadow: -4px 10px 17px 0px rgba(0,0,0,0.32);

	/* This timing applies on the way IN */
	transition-timing-function: ease-out;

	/* A little slower on the way in */
	transition: 0.3s;

	/* Move into place, some extra room on the right for the box shadow */
	transform: translateX(-10px);
}
.ticketing-info.popup .popup-body {
	padding:15px;
	font-size:14px;
}

.ticketing-info.popup a.btn-close,
.ticketing-info.popup a.btn-close:active {
	color:rgba(255,255,255,0.92);
	display:flex;
	flex-direction: column;
	justify-content: center;
	position:absolute;
	right:10px;
	top:10px;
	width:32px;
	height:32px;
	text-align:center;
	border:1px solid rgba(0,0,0,0.2);
	border-radius:16px;
	background-color:rgba(255,255,255,0.2);
	text-decoration: none;
	text-shadow:1px 0px 2px rgba(0,0,0,0.2), -1px 0px 2px rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.2), 0px -1px 2px rgba(0,0,0,0.2);
}
.ticketing-info.popup a.btn-close:focus,
.ticketing-info.popup a.btn-close:hover {
	background-color:rgba(255,255,255,0.3);
	color:rgba(255,255,255,1);
	text-decoration: none;
}

.ticketing-info.popup .popup-header-image {
	overflow:hidden;
}

.btn.btn-blank,
.btn.btn-blank:active,
.btn.btn-blank:focus,
.btn.btn-blank:hover {
	border:none;
	background:none;
	outline:none;
}
.btn.btn-blank {
	margin:0 -12px; /* compensate for the invisible 12px horizontal padding */
}
.btn-back {
	font-size:1.2em;
}

.program-viewings-by-date {
	margin-bottom:20px;
}
.program-viewings-by-date .date {
	margin-bottom:0;
}
.popup-body .program-viewings-by-date .date {
	margin:15px 0 5px 0;
}

.program-viewings-by-date .viewingSelect {
	color:inherit;
	height:auto;
	text-transform:none;
	display:flex;
	align-items:center;
}
.program-viewings-by-date .viewingSelect:focus,
.program-viewings-by-date .viewingSelect:hover {
	text-decoration: none;
}
.program-viewings-by-date .viewingSelect > .caption {
	flex: 1 1 auto;
}
.program-viewings-by-date .list-group.viewings {
	margin-bottom:0;
}
.program-viewings-by-date .list-group-item.active.current-viewing {
	cursor:default;
}
.program-viewings-by-date .date.date-past,
.program-viewings-by-date .list-group-item.viewing-past {
	display:none;
}
body.past-days-selected .program-viewings-by-date .date.date-past,
body.past-days-selected .program-viewings-by-date .list-group-item.viewing-past {
	display:inherit;
}

.ticketing-info.popup .viewing-status {
	margin:8px 0;
}

.table-select-tickets {
	margin-top:15px;
}
.table-select-tickets .items .form-control {
	font-size: 16px;
	margin-top: -4px;
	padding-top: 3px;
}

.table-select-tickets .items-grid {
	display:grid;
	grid-template-columns: auto auto auto auto;
	margin-bottom:15px;
}
/* Variation with 5 columns: */
.table-select-tickets .items-grid.items-grid-cols-5 {
    grid-template-columns: auto auto auto auto auto;
}


.table-select-tickets .items-grid .cell {
	padding:12px 8px 8px 8px;
	border-bottom: 1px solid #ddd;
}
.table-select-tickets .items-grid .cell.header {
	font-weight: bold;
}
.table-select-tickets .items-grid .cell.disabled {
    opacity:0.5;
}
.table-select-tickets .items-grid .cell.item-description .secondary-description {
	font-size:85%;
	opacity:0.75;
}

.table-select-tickets .item-unit-price,
.table-select-tickets .item-quantity,
.table-select-tickets .item-total-price {
	text-align: right;
}
div.table-select-tickets .controls {
	display:flex;
	padding:8px 0;
	justify-content: space-between;
}
div.table-select-tickets .controls .label-use-promotion-code {
	padding:4px 0;
}

.table-select-tickets .header-xs {
	display:none;
}

.table-select-tickets .uses-promotion-code,
.promotion-codes{
	display:none;
}
.table-select-tickets .uses-promotion-code.cart-code-may-apply,
.table-select-tickets.show-uses-promotion-code .uses-promotion-code.in,
.table-select-tickets.show-uses-promotion-code .promotion-codes {
	display:block;
}
.table-select-tickets.show-uses-promotion-code .items-grid .cell.uses-promotion-code {
	background-color:rgba(147,209,135,0.0);
	transition: background-color 2500ms linear;
}
.table-select-tickets.show-uses-promotion-code.flash .items-grid .cell.uses-promotion-code {
	background-color:rgba(147,209,135,0.32);
}


@media (max-width: 767px) {
	.table-select-tickets .items-grid {
		grid-template-columns: 1fr;
	}
	/* Variation with 5 columns: */
	.table-select-tickets .items-grid.items-grid-cols-5 {
		grid-template-columns: 1fr;
	}
	.table-select-tickets .items-grid .cell.header {
		display:none;
	}
	.table-select-tickets .items-grid .cell.item-description,
	.table-select-tickets .items-grid .cell.item-unit-price,
	.table-select-tickets .items-grid .cell.item-quantity {
		border-bottom:none;
	}
	.table-select-tickets .items-grid .cell.item-description,
	.table-select-tickets .items-grid .cell.item-total-price {
		font-weight:bold;
	}
	.table-select-tickets .items-grid .cell {
		padding:4px 0 0 0;
	}
	.table-select-tickets .items-grid .cell.item-total-price {
		padding-bottom:4px;
	}
	.table-select-tickets .items-grid .form-control {
		margin-top: 0;
	}
	
	.table-select-tickets .items-grid .item-quantity .quantitySelect {
	  width: auto;
	  min-width: 100px;
	  text-align: right;
	  display: inline-block;
	}	
	
	.table-select-tickets .header-xs {
		display:inline;
	}
	

	/* Prevent scrolling while popup is active (only on mobile) */
	body.popup-active {
		overflow:hidden;
	}
	.ticketing-info.popup {
		top:0;
		max-height:100vh;
		width:100vw;

		/* Hide thing by pushing it outside by default */
		transform: translateX(100vw);
	}
	.ticketing-info.popup.in {
		transform: translateX(0px);
	}
	.popup-backdrop.in {
		background-color: rgba(0,0,0,0.5); /* heavier backgrop on mobile */
	}
}


.tickets-overview-main {
	padding:50px;
}


.shop-navbar-items {
	display:flex;
	justify-content: center;
	gap:10px;
	font-weight:bold;
	font-size:1.5em;
	text-transform: uppercase;
	padding:15px 0;
}
@media (max-width: 767px) {
	.shop-navbar-items {
		flex-direction:column;
	}
	.shop-navbar-items > * {
		text-align: center;
	}
}

.shop-navbar-items > * {
	padding:5px 10px;
}
.shop-navbar-items > a {
	color:#444;
}
.shop-navbar-items > div.dropdown {
	color:#0288D1;
	margin-left:auto;
}

.shop-navbar-toggles > .navbar-header {
    display:flex;
    justify-content: space-between;
}
.shop-navbar-toggles > .navbar-header > .navbar-toggle:first-child {
    margin-left:10px;
}
.shop-navbar-toggles > .navbar-header > .navbar-toggle:last-child {
    margin-left:auto;
    margin-right:10px;
}

.overview-element.search-no-match {
	display:none!important;
}

.viewing-overview {
    position:relative;
}
.viewing-overview.placeholder {
	height:250px;
}

.appear {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s, transform 0.5s;
}

.appear.animate {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.appear.animate {
  animation-name: slideInUp;
  animation-duration: 0.5s;
}

/* Suppressed viewing of a repeating program: */
.viewing-overview.viewing-suppressed {
	display:none;
}
/* Exception: Unsuppressed suppressed viewing of a repeating program (if the user explicitly requests the ticketing popup of a suppressed viewing, then make
   sure that the popup is visible but the card is still hidden): */
.viewing-overview.search-no-match.viewing-unsuppressed,
.viewing-overview.viewing-suppressed.viewing-unsuppressed {
	display:inherit!important;
}
.viewing-overview.search-no-match.viewing-unsuppressed > .card-viewing-overview,
.viewing-overview.viewing-suppressed.viewing-unsuppressed > .card-viewing-overview {
	display:none;
}
/* Show the single date/time interval of a non-grouped viewing: */
.viewing-overview.viewing-not-grouped .single-interval {
	display:inherit;
}
/* Hide the single date/time interval of a grouped viewing: */
.viewing-overview.viewing-grouped .single-interval {
	display:none;
}
/* Show the grouped date/time interval of a single viewing: */
.viewing-overview.viewing-grouped .grouped-intervals {
	display:inherit;
}
/* Hide the grouped date/time interval of a non-grouped viewing: */
.viewing-overview.viewing-not-grouped .grouped-intervals {
	display:none;
}

/* Hide the viewing status of grouped viewings if the status is not identical across all grouped viewings (to avoid showing a viewing as 'sold out' of only the first viewing of the set of grouped viewings is sold out): */
.viewing-overview.viewing-grouped.viewing-status-inconsistent .card-viewing-overview .viewing-status,
.viewing-overview.viewing-grouped.viewing-status-inconsistent .card-viewing-prog-overview .viewing-status {
    display:none;
}


/* Film results are only visible if search is active, and the film matches: */
.film-result {
    display:none;
}
html.search-active .film-result.search-match {
    display:block;
}
/* Similarly, the fake program line 0 that contains film results on the prog overview mode, is only visible if search is active: */
html.search-inactive #plt0,
html.search-inactive #pli0 {
    display:none;
}



.tickets-overview-list-controls {
	display:flex;
	align-items:stretch;
	gap:15px;
	height:45px;
}
.tickets-overview-list-controls .tickets-overview-search-controls {
	flex: 1 1 auto;
	margin-bottom:0;
}
.tickets-overview-list-controls .btn-group.tickets-overview-sort-controls {
	display:flex;
	height:100%;
}
.tickets-overview-list-controls .btn-group.tickets-overview-sort-controls > .btn {
	float:none;
	display:flex;
	flex-direction: column;
	justify-content: center;
	min-height:40px;
}


/* Hide program line overview heading and scroll container if all of its items are hidden */
.program-line-overview.search-no-matches,
.program-line-scroll-container.search-no-matches {
	display:none!important;
}

/* Program line overview title in ticket shop */
.tickets-overview-main h2.program-line-title {
    font-weight: bold;
    font-size: 2rem;
}


.program-line-scroll-container {
    display:flex;
    margin:-15px;
    position: relative;
    /* background-color:yellow; /* uncomment to debug the viewport-based widths of the cards */
}
.program-line-scroll-container.collapse.in {
    display:flex;
}


.program-line-scroll-container > .btn-scroll-wrapper {
    position:absolute;
    height:100%;
    z-index:5;
}
.program-line-scroll-container > .btn-scroll-wrapper:first-child {
    left:-25px;
}
.program-line-scroll-container > .btn-scroll-wrapper:last-child {
    right:-25px;
}
.program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll {
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:25px;
    height:100%;
    width:30px;
}


.program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll.disabled {
    display:none;
}

.program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll-left {
/*    margin-right:-25px;*/
}
.program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll-right {
/*    margin-left:-25px;*/
}
@media (max-width: 991px) {
    .program-line-scroll-container > .btn-scroll-wrapper:first-child {
        left:-15px;
    }
    .program-line-scroll-container > .btn-scroll-wrapper:last-child {
        right:-15px;
    }
    .program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll {
        font-size:20px;
        width:20px;
    }
}
@media (max-width: 767px) {
    .program-line-scroll-container > .btn-scroll-wrapper:first-child {
        left:-5px;
    }
    .program-line-scroll-container > .btn-scroll-wrapper:last-child {
        right:-5px;
    }
    .program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll {
        font-size:20px;
        width:20px;
    }
}

/* For touch-based devices or those without hover support, the scroll buttons are just a visual cue 
   but can/should not be clicked */
@media (pointer: coarse), (hover: none) {
    .program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll {
        /*background-color:rgba(255,0,0,0.5);*/
        width:25px;
    }
    .program-line-scroll-container > .btn-scroll-wrapper:first-child > .btn-scroll {
        background: transparent;
        background: linear-gradient(90deg, var(--fc-fill-020) 0%, rgba(0,0,0,0) 100%);
    }
    .program-line-scroll-container > .btn-scroll-wrapper:last-child > .btn-scroll {
        background: transparent;
        background: linear-gradient(270deg, var(--fc-fill-020) 0%, rgba(0,0,0,0) 100%);
    }
    
    .program-line-scroll-container > .btn-scroll-wrapper > .btn-scroll > i {
        display:none;
    }
    .program-line-scroll-container > .btn-scroll-wrapper:first-child {
        left:0;
    }
    .program-line-scroll-container > .btn-scroll-wrapper:last-child {
        right:0;
    }
}

.program-line-expand-container {
    overflow:hidden;
}

.program-line-items {
    display: flex;
    flex-grow: 1;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    gap:15px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:15px 15px 35px 15px;
}
@media (pointer: fine) and (hover: hover) {
    /* Styles for desktop-like environments where scrollbars are interactive */
    /* Stow away the horizontal scrollbar: */
    .program-line-items {
        overflow-x:scroll;
        margin-bottom:-25px;
    }
}
.viewing-prog-overview {
    display: inline-flex;
}
.viewing-prog-overview .card.card-viewing-prog-overview {
    display: flex;
    flex-direction:column;
    overflow: hidden;
    width: 359px; /* 4 tiles in view - made smaller on smaller displays */
}

.viewing-prog-overview .card.card-viewing-prog-overview:hover {
    transform:scale(1.05);
}
/* If the card itself is a link, then don't underline text when active/focus/hover: */
.viewing-prog-overview a.card.card-viewing-prog-overview:active,
.viewing-prog-overview a.card.card-viewing-prog-overview:focus,
.viewing-prog-overview a.card.card-viewing-prog-overview:hover {
    text-decoration: none;
}

@media (max-width: 1980px) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(25vw - 121px);
    }
}
@media (max-width: 1599px) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(33.333vw - 156px);
    }
}
@media (max-width: 1399px) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(33.333vw - 133px);
    }
}
@media (max-width: 1199px) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(33.333vw - 126px);
    }
}
@media (max-width: 991px) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(50vw - 197px);
    }
}
@media (max-width: 767px) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(50vw - 33px);
    }
}
@media (max-width: 559px) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(100vw - 50px);
    }
}



@media (max-width: 1980px) and (pointer: fine) and (hover: hover) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(25vw - 121px - 4px);
    }
}
@media (max-width: 1599px) and (pointer: fine) and (hover: hover) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(33.333vw - 156px - 6px);
    }
}
@media (max-width: 1399px) and (pointer: fine) and (hover: hover) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(33.333vw - 133px - 6px);
    }
}
@media (max-width: 1199px) and (pointer: fine) and (hover: hover) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(33.333vw - 126px - 6px);
    }
}
@media (max-width: 991px) and (pointer: fine) and (hover: hover) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(50vw - 197px - 8px);
    }
}
@media (max-width: 767px) and (pointer: fine) and (hover: hover) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(50vw - 33px - 8px);
    }
}
@media (max-width: 559px) and (pointer: fine) and (hover: hover) {
    .viewing-prog-overview .card.card-viewing-prog-overview {
        width: calc(100vw - 50px - 16px);
    }
}




.card-viewing-prog-overview-body {
    flex-grow:1;
    padding:15px;
    display:flex;
    flex-direction:column;
}

.card-viewing-prog-overview-body-main {
    flex: 1 1 auto; 
}



.card.card-viewing-overview {
	display:flex;
	flex-direction: row;
	margin:25px 0;
}
.card-viewing-overview-thumb {
	width:400px;
	min-width:400px;
}
.card-viewing-overview-body {
	flex: 1 1 auto;
	padding:20px;
}

.card-viewing-overview h3.viewing-tags,
.card-viewing-prog-overview h3.viewing-tags {
	margin-top:0;
}
.card-viewing-overview h3.viewing-tags.overlay {
	position:absolute;
	padding:15px;
}
.card-viewing-overview h3.viewing-tags .label,
.card-viewing-prog-overview h3.viewing-tags .label {
    display: inline-block;
    margin: 1px;
    line-height: 1.05;
    white-space: normal;
}
.card-viewing-overview .films-to-be-revealed .label-modest,
.card-viewing-prog-overview .films-to-be-revealed .label-modest {
	border:2px solid #ccc;
	color:#666;
	display:inline-block;
    line-height: 1.05;
	text-align:center;
    white-space: normal;
}
.card-viewing-overview .label.label-age-restriction,
.card-viewing-prog-overview .label.label-age-restriction,
.viewing-details .label.label-age-restriction {
	background-color:#303030;
	color:#fff;
	border-radius:12px;
}
.card-viewing-overview .label.label-location,
.card-viewing-prog-overview .label.label-location {
	background-color:#e2e2e2;
	color:#000;
	font-weight:normal;
}
.card-viewing-overview .label.label-viewing-start-date-time,
.card-viewing-prog-overview .label.label-viewing-start-date-time {
	background-color:#e2e2e2;
	color:#000;
	font-weight:normal;
}

.card-viewing-overview h1.viewing-title {
	font-weight:bold;
	font-size:2rem;
	margin:10px 0;
}
.card-viewing-overview h2.viewing-subtitle {
	margin:-10px 0 10px 0;
	font-size:1.6rem;
}
.card-viewing-prog-overview h1.viewing-title {
	font-weight:bold;
	font-size:1.6rem;
	margin:10px 0;
}
.card-viewing-prog-overview h2.viewing-subtitle {
	margin:-10px 0 10px 0;
	font-size:1.3rem;
}

.popup-body h1.viewing-title {
	font-weight:bold;
	font-size:2rem;
	margin:10px 0 20px 0;
}
.popup-body h2.viewing-subtitle {
	margin:-20px 0 20px 0;
	font-size:1.6rem;
}

.d-card-viewing-overview-horizontal {
	display:block;
}
.d-card-viewing-overview-vertical {
	display:none;
}

.card-viewing-overview-body {
	display:flex;
	flex-direction: column;
	align-items:stretch;
}
.card-viewing-overview-body-main {
	flex: 1 1 auto;
}
.card-viewing-overview-body-footer {
	display:flex;
	align-items:stretch;	
}
.card-viewing-overview-body-footer-details {
	flex: 1 1 auto;
	display:flex;
	align-items: end;
	gap:10px;
	font-size:85%;
	opacity:0.9;
}
.card-viewing-overview-body-footer .viewing-buttons {
	display:flex;
}

@media (max-width: 1199px) {
	.card-viewing-overview-thumb {
		width:360px;
		min-width:360px;
	}
}
@media (max-width: 991px) {
	.tickets-overview-main {
		padding:0 20px;
	}
	
	.tickets-overview #tickets-overview-sidebar-left {
		padding:20px 15px;
	}
	
	.tickets-overview-list-controls {
		flex-direction:column;
		height:auto;
	}
	.tickets-overview-list-controls .btn-group.tickets-overview-sort-controls {
		justify-content:end;
	}

	
	.card.card-viewing-overview {
		flex-direction: column;
	}
	.card-viewing-overview-thumb {
		width:100%;
		min-width:inherit;
	}
	.d-card-viewing-overview-horizontal {
		display:none;
	}
	.d-card-viewing-overview-vertical {
		display:block;
	}
}
@media (max-width: 767px) {
	.tickets-overview-main {
		padding:0 15px;
	}
	
	.tickets-overview #tickets-overview-sidebar-left {
		padding:15px;
	}
	
	.card.card-viewing-overview {
		flex-direction: column;
	}
	.card-viewing-overview-thumb {
		width:100%;
	}
}


.tickets-passes .buy-passes {
	max-width:1560px; /* Don't spread out the passes too much on large screens */
	margin:0 auto;
}
.col-pass-product {
	padding-bottom:30px;
}
.card.card-pass-product {
	max-width:480px;
}


/* ==========================================================================
   Mobile tickets with QR codes
   ========================================================================== */

.fc-ticket-mobile {
	box-shadow: 0 4px 8px rgba(0,0,0,0.16), 0 2px 2px rgba(0,0,0,0.20);
	margin:20px 0;
	position: relative;
	margin-bottom: 40px;
	transition: all .2s ease-in-out;
	background-color: #fff;
	color:#000;
}
.fc-ticket-mobile > .fc-ticket-mobile-body {
	padding:10px 20px;
}

.fc-ticket-mobile:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	margin-bottom: 40px;
}

.fc-ticket-mobile h2 {
	color:#000;
	margin:10px 0;
	text-align:center;
}
.fc-ticket-mobile-details {
	margin-top:15px;
}
.fc-ticket-mobile .ticket-seats {
	font-size:1.5rem;
	font-weight:bold;
}
.fc-ticket-mobile > .fc-ticket-mobile-footer {
	background-color:#f2f2f2;
	border-top:1px solid #d0d0d0;
	color:#333;
	font-size:0.9em;
	padding:5px 20px;
}

.fc-ticket-mobile .voting-info {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    gap:10px;
    padding:10px;
}
.voting-info .voting-for-award-name {
    color:var(--theme-color);
    font-size:1.5rem;
    font-weight:bold;
}



/* ==========================================================================
   Ticket-based audience voting
   ========================================================================== */


html.page_vote {

    /* Hide shop navigation on the voting page */
    .shop-navbar-items {
        display:none;
    }

    /* Body styling */
    body {
        min-height: 100vh;
    }

    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2vh;
    }

    #sectionVoting {
        margin-top:-10px;
        padding:1vh;
        opacity:0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #sectionVoting.init {
        opacity:1;
    transform: translateY(0);
    }
    html.browser-safari #sectionVoting.iPadPushUp {
        margin-top:-50px;
    }


    /* Header/title */
    header {
      text-align: center;
      margin-bottom: 2vh;
    }
    header h1 {
      font-size: 2rem;
        margin-top:0;
      margin-bottom: 1vh;
        font-weight:700;
        color:var(--theme-color);
    }
    header p {
        font-size: 1.2rem;
    }



    .controls-top-left {
        position:fixed;
        top:30px;
        left:30px;
        z-index:1;
    }
    .controls-top-right {
        position:fixed;
        top:30px;
        right:30px;
        z-index:1;
    }
    .controls-top-right > a {
        color:#444;
    }
    .controls-top-right.subtle {
        opacity:0.5;
    }


    .d-inline-block-from-voting {
        display:none;
    }

    section[data-from-screen="voting"] .d-inline-block-from-voting {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
    }



    /* --------------- Voting section --------------- */



    .film-grid {
        display: grid;
        grid-gap: 20px;
        width: 100%;
        align-items: center;
        justify-items: center;
    }




    .film-card {
        grid-column: span 2;
        height:auto;
        user-select:none;

        border: 3px solid #606060;
        border-radius: 8px;
        width: 100%; 
        display: flex;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
    }


    .film-card img {
      width: 100%;
      height: auto;
      /*object-fit: cover;
      flex: 1;*/
    }

    .film-card h2 {
        font-size:19px;
        font-weight:700;
        text-align: center;
        margin: 0.5em;

        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
        -o-text-overflow: ellipsis;
        max-width: 95%;
    }

    /* Highlight selected card with a border */
    .film-card.selected {
        background-color: var(--theme-color-darker2);
        border-color: #007BFF; /* or your desired highlight color */

        -webkit-box-shadow:0px 0px 45px 15px var(--theme-color-translucent40);
        -moz-box-shadow: 0px 0px 45px 15px var(--theme-color-translucent40);
        box-shadow: 0px 0px 45px 15px var(--theme-color-translucent40);
        z-index:-1;
    }

    .film-card.selected h2 {
        color:var(--theme-color-lighter2);
    }


    .film-grid.grid-x1 {
        grid-template-columns: repeat(1, 1fr);
        max-width:75vw;
    }
    .film-grid.grid-x2 {
        grid-template-columns: repeat(4, 1fr);
        max-width:75vw;
    }
    .film-grid.grid-x3 {
        grid-template-columns: repeat(6, 1fr);
    }
    .film-grid.grid-x4 {
        grid-template-columns: repeat(8, 1fr);
    }
    .film-grid.grid-x5 {
        grid-template-columns: repeat(10, 1fr);
    }
    .film-grid.grid-x5.reduced {
        max-width:75vw;
    }
    .film-grid.grid-x6 {
        grid-template-columns: repeat(12, 1fr);
    }


    /* Large film title if just one film: */
    .film-grid.grid-x1 .film-card > h2 {
        font-size:2.75rem;
    }
}

@media (min-width: 1199.99px) {

    html.page_vote {

        .film-grid.grid-xy > .film-card {
            display:grid;
            grid-template-columns:140px auto;
            grid-template-rows:45px 45px;
            grid-template-areas:
                "image title"
                "image stars";
            max-width:600px;
        }
        .film-grid.grid-xy > .film-card > h2 {
            grid-area: title;
            white-space:normal;
            text-align:left;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            /* Larger film titles on downward orientation (high number of films), because thumbnails are much smaller */
            font-size:20px;
        }

        .film-grid.grid-xy > .film-card > img {
            grid-area: image;
            width:auto;
            height:100%;
        /*    width:64px;*/
        }

        .film-grid.grid-xy > .film-card > .rating-stars {
            grid-area:stars;
            font-size:2.5rem;
        }
    }
}



@media (min-width: 1199.99px) {

    html.page_vote {

        /* On a grid with max 3 films per row, dealing with 2 or 1 orphan items */
        .film-grid.grid-x3 > .film-card:last-child:nth-child(3n - 1) {
          grid-column-end: -2;
        }
        .film-grid.grid-x3 > .film-card:nth-last-child(2):nth-child(3n + 1) {
          grid-column-end: 4;
        }
        .film-grid.grid-x3 > .film-card:last-child:nth-child(3n - 2) {
          grid-column-end: 5;
        }

        /* On a grid with max 4 films per row, dealing with 3 orphan items */
        .film-grid.grid-x4 > .film-card:last-child:nth-child(4n - 1) {
          grid-column-end: -2;
        }
        .film-grid.grid-x4 > .film-card:nth-last-child(2):nth-child(4n - 2) {
          grid-column-end: -4;
        }
        .film-grid.grid-x4 > .film-card:nth-last-child(3):nth-child(4n - 3) {
          grid-column-end: -6;
        }

        /* On a grid with max 4 films per row, dealing with 2 orphan items */
        .film-grid.grid-x4 > .film-card:last-child:nth-child(4n - 2) {
          grid-column-end: -3;
        }
        .film-grid.grid-x4 > .film-card:nth-last-child(2):nth-child(4n - 3) {
          grid-column-end: -5;
        }

        /* On a grid with max 4 films per row, dealing with 1 orphan item */
        .film-grid.grid-x4 > .film-card:last-child:nth-child(4n - 3) {
          grid-column-end: -4;
        }

        /* On a grid with max 5 films per row, dealing with 4 orphan items */
        .film-grid.grid-x5 > .film-card:last-child:nth-child(5n - 1) {
          grid-column-end: -2;
        }
        .film-grid.grid-x5 > .film-card:nth-last-child(2):nth-child(5n - 2) {
          grid-column-end: -4;
        }
        .film-grid.grid-x5 > .film-card:nth-last-child(3):nth-child(5n - 3) {
          grid-column-end: -6;
        }
        .film-grid.grid-x5 > .film-card:nth-last-child(4):nth-child(5n - 4) {
          grid-column-end: -8;
        }

        /* On a grid with max 5 films per row, dealing with 3 orphan items */
        .film-grid.grid-x5 > .film-card:last-child:nth-child(5n - 2) {
          grid-column-end: -3;
        }
        .film-grid.grid-x5 > .film-card:nth-last-child(2):nth-child(5n - 3) {
          grid-column-end: -5;
        }
        .film-grid.grid-x5 > .film-card:nth-last-child(3):nth-child(5n - 4) {
          grid-column-end: -7;
        }

        /* On a grid with max 5 films per row, dealing with 2 orphan items */
        .film-grid.grid-x5 > .film-card:last-child:nth-child(5n - 3) {
          grid-column-end: -4;
        }
        .film-grid.grid-x5 > .film-card:nth-last-child(2):nth-child(5n - 4) {
          grid-column-end: -6;
        }

        /* On a grid with max 5 films per row, dealing with 1 orphan item */
        .film-grid.grid-x5 > .film-card:last-child:nth-child(5n - 4) {
          grid-column-end: -5;
        }


        /* On a grid with max 6 films per row, dealing with 5 orphan items */
        .film-grid.grid-x6 > .film-card:last-child:nth-child(6n - 1) {
          grid-column-end: -2;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(2):nth-child(6n - 2) {
          grid-column-end: -4;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(3):nth-child(6n - 3) {
          grid-column-end: -6;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(4):nth-child(6n - 4) {
          grid-column-end: -8;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(5):nth-child(6n - 5) {
          grid-column-end: -10;
        }



        /* On a grid with max 6 films per row, dealing with 4 orphan items */
        .film-grid.grid-x6 > .film-card:last-child:nth-child(6n - 2) {
          grid-column-end: -3;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(2):nth-child(6n - 3) {
          grid-column-end: -5;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(3):nth-child(6n - 4) {
          grid-column-end: -7;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(4):nth-child(6n - 5) {
          grid-column-end: -9;
        }



        /* On a grid with max 6 films per row, dealing with 3 orphan items */
        .film-grid.grid-x6 > .film-card:last-child:nth-child(6n - 3) {
          grid-column-end: -4;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(2):nth-child(6n - 4) {
          grid-column-end: -6;
        }
        .film-grid.grid-x6 > .film-card:nth-last-child(3):nth-child(6n - 5) {
          grid-column-end: -8;
        }
    }
}



@media (min-width: 767.99px) and (max-width: 1199.98px) {
    html.page_vote {

        .film-grid {
            max-width:none!important;
        }

        /* Change a grid of 2, 3, 4, 5 or 6 items per row to 2 item per row: */
        .film-grid.grid-x2,
        .film-grid.grid-x3,
        .film-grid.grid-x4,
        .film-grid.grid-x5,
        .film-grid.grid-x6,
        .film-grid.grid-xy {
            grid-template-columns: repeat(4, 1fr);
        }

        .film-grid.grid-x2 > .film-card:last-child:nth-child(2n - 1),
        .film-grid.grid-x3 > .film-card:last-child:nth-child(2n - 1),
        .film-grid.grid-x4 > .film-card:last-child:nth-child(2n - 1),
        .film-grid.grid-x5 > .film-card:last-child:nth-child(2n - 1),
        .film-grid.grid-x6 > .film-card:last-child:nth-child(2n - 1),
        .film-grid.grid-xy > .film-card:last-child:nth-child(2n - 1) {
          grid-column-end: -2;
        }

    }
}

@media (max-width: 767.98px) {
    html.page_vote {

        .film-grid {
            grid-template-columns: repeat(2, 1fr)!important;
            max-width:none!important;
        }
    }
}


html.page_vote {

    .rating-stars {
        display:flex;
        justify-content: space-between;
        align-items: center;
        padding:10px;
        /* font-size:6.5rem; */
        /* text-align:center;
        letter-spacing:1.5rem;*/
        font-size: 2vw;
    }

    .film-grid.grid-x1 .rating-stars {
        font-size: 2vw;
    }
    .film-grid.grid-x2 .rating-stars {
        font-size: 2vw;
    }
    .film-grid.grid-x3 .rating-stars {
        font-size: 2.5vw;
    }
    .film-grid.grid-x4 .rating-stars {
        font-size: 2vw;
    }
    .film-grid.grid-x5 .rating-stars {
        font-size: 2vw;
    }
    .film-grid.grid-x5.reduced .rating-stars {
        font-size: 2vw;
    }
    .film-grid.grid-x6 .rating-stars {
        font-size: 2vw;
    }
}

@media (min-width: 767.99px) and (max-width: 1199.98px) {
    html.page_vote {

        .film-grid {
            max-width:none!important;
        }

        .film-grid.grid-x2 .rating-stars,
        .film-grid.grid-x3 .rating-stars,
        .film-grid.grid-x4 .rating-stars,
        .film-grid.grid-x5 .rating-stars,
        .film-grid.grid-x6 .rating-stars,
        .film-grid.grid-xy .rating-stars {
            font-size: 3vw;
        }
    }
}

@media (max-width: 767.98px) {
    html.page_vote {

        .film-grid {
            max-width:none!important;
        }

        .film-grid .rating-stars {
            font-size: 6vw!important;
        }

    }

}

html.page_vote {

    /* The VOTE button */
    .vote-container {
      margin-top: 2vh;
    }

    .vote-container button {
        font-size: 2rem;
        font-weight: bold;
        padding: 0.75em 2.5em;
        border-radius: 8px;
        border: none;
        cursor: not-allowed;
        transition: background-color 0.35s ease-in-out;

    }
    .vote-container button.active {
        background-color: var(--primary-brand-color);
        color: #000; /* #fff; */
        cursor: pointer;
    }


    .vote-container button.btn-primary.flashing:not(:disabled):not(.disabled):focus, 
    .vote-container button.btn-primary.flashing:not(:disabled):not(.disabled):active, 
    .vote-container button.btn-primary.active.flashing:not(:disabled):not(.disabled) {
        background-color:var(--theme-color-lighter3);
    }


    .fas.fa-star {
        color:#FAE100;
    }


    .overlay {
        position:fixed;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background-color:rgba(21,21,21,0.75);
    }
    #thankYouOverlay {
        font-size:100px;
        font-weight: bold;
        color: var(--theme-color-lighter1);
        display:flex;
        align-items:center;
        justify-content: center;
    }
}


/* ==========================================================================
   One-time security codes
   ========================================================================== */

#otscModal {
    .otsc-input {
        width: 42px;
        height: 52px;
        margin: 0 3px;
        display:inline-block;
        font-size: 28px;
        text-align: center;
    }
    .otsc-input::selection,
    .otsc-input::-moz-selection {
        background: transparent; 
        color: inherit; 
    }
    .otsc-input::-ms-clear { display: none; }
}
#otscModal.otsc-success .otsc-input {
	border-color: #4CAF50;
}