/* --

Zipporah Ltd.

- This CSS file is intended to control bespoke elements of the Zipporah Events System.
- Do not edit this file without authorisation.

-- */

/* -- Zip Event Details -- */

:root {
	--zip-primary-color: #009ace;
	--zip-secondary-color: #005c7c;
	--zip-text-highlight-color: var(--zip-secondary-color);
	--zip-success-color: #00874f;
	--zip-highlight-color: #C54516;
	--zip-danger-color: #B00020;
	--zip-grey: #37474f;
	--zip-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15);
	--zip-box-shadow-2: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.15), 0 16px 16px rgba(0, 0, 0, 0.15);
	--zip-space-unit: 2em;
	--zip-space-unit-minus: -2em;
}


.zip-event-details-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #ddd;
	height: 40vh;
	margin: 0 0 2rem;
	margin-bottom: var(--zip-space-unit);
	position: relative;
	width: 100%;
}

.zip-event-details-image>.zip-event-availability {
	bottom: 0;
	padding: 8px 16px;
	position: absolute;
	right: 0;
	color: #ffffff;
	background-color:var(--zip-success-color);
}

.zip-event-availability-full {
	background-color:var(--zip-danger-color);
}

.zip-event-details-dates {
	display: flex;
	flex-flow: row wrap;
	margin: -12px 0 2rem -12px;
	margin-bottom: var(--zip-space-unit);
}

.zip-event-details-dates>ul {
	background: #eeeeee;
	font-size: small;
	font-weight: 600;
	list-style: none;
	margin: 12px 0 0 12px;
	padding: 16px;
	width: calc(25% - 12px);
}

.zip-event-details-dates>ul:nth-of-type(n+5):not(.active) {
	display: none;
}

.zip-event-details-dates>ul>li {
	display: block;
	margin: 0;
	padding: 0;
}

.zip-event-details-dates>ul>li:not(:last-child) {
	margin-bottom: 6px;
}

.zip-event-details-dates>ul>li>a {
	color: var(--zip-text-highlight-color);
	text-decoration: underline;
}

.zip-event-details-dates-reveal {
	margin: 0 0 2rem;
	margin-bottom: var(--zip-space-unit);
	position: relative;
	text-align: center;
}

.zip-event-details-dates-reveal::before {
	border-top: solid 1px rgba(0, 0, 0, 0.1);
	content: '';
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 20px;
	z-index: 0;
}

.zip-event-details-dates-reveal .zip-btn-circle {
	height: 40px;
	margin: 0 auto 8px;
	position: relative;
	width: 40px;
	z-index: 1;
}

.zip-event-details-dates-reveal .zip-btn-circle.active {
	display: flex !important;
	transform: rotate(180deg);
	transition: .5s ease;
}

.zip-event-details-dates-reveal span {
	font-size: small;
}

.zip-event-details-basket {
	text-align: center;
}

.zip-event-details-basket *[class^="zip-btn"] {
	margin-right:0;
}

.zip-event-details-basket-select-ticket {
	text-align:left;
	margin-bottom: 2rem;
	margin-bottom: var(--zip-space-unit);
}

.zip-event-details-basket-select-ticket:not(:first-of-type) {
	border-top:solid 1px rgba(0,0,0,0.1);
	padding-top: 2rem;
	padding-top: var(--zip-space-unit);
}

.zip-event-details-basket-select-ticket>.zip-grid {
	align-items:center;
}

.zip-event-details-basket-select-ticket label.zip-label {
	font-weight:600;
}

.zip-event-details-basket-select-ticket span.ui-spinner {
	margin:0 !important;
}

.zip-event-details-basket-select-ticket .zip-ticket-availability {
	margin:1em 0 0;
}

.zip-event-details-basket-message {
	margin: 0 0 16px;
}

.zip-event-details-basket-toggle {
	display:none;
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	padding:2rem;
	padding:var(--zip-space-unit);
	background-color:white;
	z-index:999;
	box-shadow:var(--zip-box-shadow-2);
}

.zip-event-details-basket-toggle > .zip-btn {
	margin:0;
}

@media(max-width:768px) {
	.zip-event-details-dates>ul {
		width: calc(50% - 12px);
	}

	.zip-event-details-basket-toggle {
		display:block;
	}

	.zip-event-details .eventDetails{
		flex-flow: column nowrap;
		width: 100%;
		margin: auto;
	}

	.zip-event-details .eventBasket{
		display: block;
		position: static !important;
		margin: auto;
	}

	.zip-event-details .eventDescription{
		margin: auto;
	}

	.zip-event-details-basket {
		/* display:none; */
		position:fixed !important;
		bottom:0;
		left:0;
		right:0;
		width:100% !important;
		margin:0 !important;
		background-color:white !important;
		z-index:999;
	}

	.zip-event-details-basket .zip-card-body {
		padding: 0 24px 12px 24px;
		font-size: 14px;
	}
	.zip-event-details-basket .zip-event-details-basket-select-ticket{
		margin-bottom: 12px;
	}
	.zip-event-details-basket .zip-event-details-basket-select-ticket:not(:first-child){
		padding-top: 12px;
	}
}

@media(max-width:500px) {
	.zip-event-details-dates>ul {
		width: 100%;
	}
}

/* -- Zip Event Listings -- */

.zip-event-search-results {
	display: flex;
	flex-flow: row wrap;
}

.zip-event-listing {
	border-top: solid 1px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-flow: row wrap;
	padding: 2rem 0 0;
	padding-top: var(--zip-space-unit);
	position: relative;
	width: 100%;
}

.zip-event-listing-image {
	background-color: rgba(0, 0, 0, 0.2);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-top: solid 1px #efefef;
	display: block;
	flex: 0 0 240px;
	height: 160px;
	margin-right: 2rem;
	margin-right: var(--zip-space-unit);
	padding: 0;
}

.zip-event-listing-image:hover {
	opacity: .75;
}

.zip-event-listing-body {
	flex: 1;
	padding: 0;
}

.zip-content .zip-event-listing-body h2 {
	margin: 0 0 .5em;
	padding-top: 0;
}

.zip-event-listing-body h2>a {
	display: block;
}

.zip-event-listing-body h2:hover>a {
	color: var(--zip-primary-color);
}

.zip-event-listing-availability {
	display: inline-block;
	font-size: .9em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

ul.zip-event-listing-info {
	column-count: 2;
	display: flex;
	flex-flow: row wrap;
	font-size: .95em;
	list-style: none;
	margin: -.4em 0 2rem -0.5em;
	margin-bottom: var(--zip-space-unit);
	padding: 0;
}

ul.zip-event-listing-info>li {
	flex-basis: 300px;
	padding: .4em 0 0 .5em;
}

ul.zip-event-listing-info>li>span.zip-label {
	font-weight: 600;
}

.zip-event-listing-recommended {
	display: none;
	width: 100%;
}

.zip-event-listing-recommended.active {
	display: block;
	animation: fadeIn 0.2s ease;
}

.zip-event-listing-recommended .zip-event-listing {
	background: #eee;
	border:none;
	margin-bottom: 2rem;
	margin-bottom: var(--zip-space-unit);
	padding:2rem;
	padding:var(--zip-space-unit);
}

.zip-event-listing-recommended .zip-event-listing .zip-event-listing-body>*:last-child {
	margin-bottom: 0;
}

@media(max-width:650px) {
	.zip-event-listing {
		border: none;
		padding-top:0;
	}
	.zip-event-listing-image {
		flex: 0 0 calc(100% + 8rem);
		height: 30vh;
		margin: 0 -4rem 2rem
	}
	.zip-event-listing-body {
		flex: 0 0 100%;
	}
}

@media(max-width:500px) {
	.zip-event-listing-image {
		flex: 0 0 calc(100% + 4rem);
		margin: 0 -2rem 2rem
	}
}

/* === Seatpicker Module === */

.zip-seatpicker {
	background: #3e3e3e;
	color: white;
	font-size: 14px;
	height: 75vh;
	margin-top: 30px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.zip-seatpicker a {
	text-decoration: none;
}

.zip-seatpicker .controls {
	left: 24px;
	position: absolute;
	top: 24px;
	z-index: 50000;
}

.zip-seatpicker .controls>a {
	border: solid 1px white;
	display: block;
	margin-bottom: 8px;
	opacity: 0.5;
	padding: 8px;
	text-align: center;
}

.zip-seatpicker .controls>a:hover {
	opacity: 1.0;
}

.zip-seatpicker-key {
	background-color: #333333;
	color: white;
	padding: 16px;
	width: 100%;
}

.zip-seatpicker-key>ul {
	font-size: 13px;
	list-style: none;
	margin-left: -24px;
	margin: 0;
	padding: 0;
}

.zip-seatpicker-key>ul>li {
	display: inline-block;
	padding-left: 24px;
	vertical-align: middle;
}

.zip-seatpicker-key>ul>li>img {
	height: 16px;
	margin-right: 8px;
}

.zip-seatpicker>.seatpicker-overflow {
	overflow: auto;
	width: 100%;
	padding: 24px 84px;
	padding-left: 84px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.zip-seatpicker .seatpicker-container {
	text-align: center;
	width: 100%;
	margin: 0 auto;
}

.zip-seatpicker p.stage-nav {
	font-size: 16px;
	font-weight: 200;
	background-color: rgba(255, 255, 255, 0.2);
	margin: 0 0 40px;
	padding: 12px;
	line-height: 1;
	clear: both;
}

.zip-seatpicker .seatpicker-row {
	display: flex;
}

.zip-seatpicker .seatpicker-col {
	position: relative;
}

.zip-seatpicker .seatpicker-col img {
	cursor: pointer;
	z-index: 500000;
	left: 0;
	right: 0;
	margin: auto;
	margin-bottom: 8px;
	width: 70%;
}

.zip-seatpicker .seatpicker-col img:hover {
	transform: scale(1.2);
}

/* -- Full Screen Seatpicker -- */

.zip-seatpicker.full-screen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999999;
	background: rgba(10, 10, 10, 0.97);
	overflow: auto;
	margin: 0;
	min-height: 100vh;
}

/* -- Zip Theatre Grid -- */

.zip-theatre-grid {
	background: #111;
	color: white;
	overflow: auto;
	width: 100%;
	padding: 24px;
	max-height: calc(100vh - 40px);
}

.zip-theatre-grid-row>.zip-theatre-grid-column-control, .zip-theatre-grid-row>.zip-theatre-grid-row-control, .zip-theatre-grid-row>.zip-theatre-grid-column-control>a, .zip-theatre-grid-row>.zip-theatre-grid-row-control>a, .zip-theatre-grid-row>.zip-theatre-grid-column-control, .zip-theatre-grid-row>.zip-theatre-grid-seat {
	border-color: #444 !important;
}

.zip-theatre-grid-row {
	align-items: stretch;
	display: flex;
	flex-flow: row nowrap;
}

.zip-theatre-grid-row>.zip-theatre-grid-column-control {
	align-items: stretch;
	border-top: solid 1px;
	display: flex;
	flex-flow: row nowrap;
	flex-shrink: 0;
	height: 40px;
	width: 140px;
}

.zip-theatre-grid-row>.zip-theatre-grid-column-control:first-child {
	margin-left: 40px;
}

.zip-theatre-grid-row>.zip-theatre-grid-row-control {
	align-items: stretch;
	border-left: solid 1px;
	display: flex;
	flex-flow: column nowrap;
	flex-shrink: 0;
	width: 40px;
}

.zip-theatre-grid-row:last-child>.zip-theatre-grid-row-control {
	border-bottom: solid 1px;
}

.zip-theatre-grid-row>.zip-theatre-grid-column-control>a, .zip-theatre-grid-row>.zip-theatre-grid-row-control>a {
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: center;
}

.zip-theatre-grid-row>.zip-theatre-grid-column-control>a.active, .zip-theatre-grid-row>.zip-theatre-grid-row-control>a.active {
	display: flex !important;
	background-color: #009ace;
}

.zip-theatre-grid-row>.zip-theatre-grid-column-control>a:hover, .zip-theatre-grid-row>.zip-theatre-grid-row-control>a:hover {
	background-color: #009ace;
}

.zip-theatre-grid-row>.zip-theatre-grid-column-control>a {
	border-left: solid 1px;
}

.zip-theatre-grid-row>.zip-theatre-grid-row-control>a {
	border-top: solid 1px;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat {
	border-left: solid 1px;
	border-top: solid 1px;
	display: flex;
	flex-flow: row wrap;
	flex-shrink: 0;
	padding: 16px;
	width: 140px;
}

.zip-theatre-grid-row:last-child>.zip-theatre-grid-seat {
	border-bottom: solid 1px;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat:last-child, .zip-theatre-grid-row>.zip-theatre-grid-column-control:last-child {
	border-right: solid 1px;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat>input[type="text"] {
	background: rgba(255, 255, 255, 0.1);
	border: solid 1px transparent;
	color: white;
	flex-shrink: 0;
	font-size: 1.1rem;
	margin: 0 0 16px;
	padding: 8px;
	width: 100%;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat>input[type="text"]:hover {
	border-color: #009ace;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat>.zip-label-checkbox {
	flex-shrink: 0;
	font-weight: normal;
	margin: 0;
	opacity: 0.4;
	transition: 0.2s ease;
	width: 50%;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat>.zip-label-checkbox.checked {
	opacity: 1.0;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat>.zip-label-checkbox>input[type="checkbox"]:checked {
	border-color: #009ace;
}

.zip-theatre-grid-row>.zip-theatre-grid-seat:hover>.zip-label-checkbox {
	opacity: 1;
}

.zip-theatre-grid-controls {}

.zip-theatre-grid-controls>a {
	background: #222;
	color: white;
	width: 50px;
	height: 50px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.zip-link-cancel{
	color: var(--zip-text-highlight-color) !important;
	opacity: 1 !important;
}

#timer #time{
	font-size: 18px;
	margin-bottom: 16px;
	display: block;
	font-weight: bold;
	color: var(--zip-danger-color);
}

.ui-dialog {
    z-index: 9999 !important;
}

.ui-dialog {
	box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
	z-index: 99999 !important;
}

.ui-widget-overlay {
	z-index: 99998 !important;
	position: fixed !important;
}

/* === DATATABLES 2024 CORRECTIONS === */

main .table-overflow .dt-container,
main .zip-table .dt-container,
div[role=main] .table-overflow .dt-container,
div[role=main] .zip-table .dt-container{
	position: relative;
}

main .dt-length,
div[role=main] .dt-length{
	display: flex;
	flex-flow: row nowrap;
	gap: 8px;
	align-items: baseline;
	padding-top: 2px;
}

main .dt-length select,
div[role=main] .dt-length select{
	max-width: 80px;
}

main .dt-search,
div[role=main] .dt-search{
	display: inline-block;
	position: absolute;
	top: 0;
	right: 3px;
	width: 280px;
	padding-top: 2px;
}

main .dt-search .dt-input,
div[role=main] .dt-search .dt-input{
	padding-left: 36px !important;
}

main .dt-search label,
div[role=main] .dt-search label{
	display: none;
}

main .dt-buttons,
div[role=main] .dt-buttons{
	position: absolute;
	top: 0;
	right: 300px;
}

main .dt-search::after,
div[role=main] .dt-search::after {
	display: inline-block;
	content: url(../images/zip-search-icon.svg);
	width: 14px;
	position: absolute;
	top: 33%;
	transform: translateY(-50%);
	left: 12px;
}

main .dt-search input,
div[role=main] .dt-search input {
	padding-left: 35px;
}

@media(max-width: 768px){
	
	#BookingCalendarResultsTable tbody tr td:first-child{
		display: none;
	}
	
	.responsive-table.dataTable tbody tr td{
		padding-top: 16px;
	}
	
	.responsive-table.dataTable td[data-label="Booking notes"] ul{
		margin-top: 22px;
		text-align: left;
	}

}

@media(max-width: 720px){
	
	main .dt-buttons,
	div[role=main] .dt-buttons{
		position: static;
		margin-bottom: 16px;
	}
	
	main .dt-search,
	div[role=main] .dt-search{
		position: relative;
	}
}

@media(max-width: 399px){
	
	.responsive-table.dataTable tbody tr td{
		padding-top: 8px;
	}
	
	.responsive-table.dataTable td[data-label="Booking notes"] ul{
		margin-top: 0;
	}

}

main .dt-info{
	margin-block: 10px;
}

main div.dt-container .dt-paging .dt-paging-button.current,
main div.dt-container .dt-paging .dt-paging-button.current:hover,
div[role=main] div.dt-container .dt-paging .dt-paging-button.current, 
div[role=main] div.dt-container .dt-paging .dt-paging-button.current:hover {
	color: var(--zip-secondary-color) !important;
	border: 1px solid var(--zip-secondary-color) !important;
	background: white !important;
	font-weight: bold;
}

main div.dt-container .dt-paging .dt-paging-button:hover,
div[role=main] div.dt-container .dt-paging .dt-paging-button:hover,
main div.dt-container .dt-paging .dt-paging-button:focus-visible,
div[role=main] div.dt-container .dt-paging .dt-paging-button:focus-visible {
	color: white !important;
	border: 1px solid var(--zip-secondary-color) !important;
	background: var(--zip-secondary-color) !important;
}

main div.dt-container .dt-paging .dt-paging-button.disabled,
div[role=main] div.dt-container .dt-paging .dt-paging-button.disabled{
		Color: #746D6D !important;
		background: #fbf7f7 !important;
		border-color: transparent !important;
		cursor: not-allowed !important;
}

.dt-container{
		position: relative;
}

.dt-paging .ellipsis{
		margin-right: 8px;
}

div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button {
	height: 42px;
}



main div.dt-container .dt-paging .dt-paging-button,
div[role=main] div.dt-container .dt-paging .dt-paging-button {
	border: 1px solid #ebebeb
}



#RoleGroupsTable_wrapper tr td:last-child{
		width: 100%;
}

.dt-scroll-foot{
	margin-bottom: 8px !important;
}

.dt-paging{
	margin-top: 8px !important;
}