html {
	scroll-padding-top: 90px;
}

body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	background: #f5f5f5;
	color: #666;
	overflow-y: scroll;
}

@media (max-width: 576px) {
	html {
		font-size: 0.75rem; /* Slightly smaller on small screens */
	}
}

#main {
	padding-top: 48px;
}

#station-select-panel {
	position: fixed;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100; /* Ensure this is in front when it appears */
}

#preview {
	vertical-align: middle;
}

#page-main-area {
	padding-bottom: 1rem;
}

@media screen and (max-width: 768px) {
	#preview {
		position: fixed;
		bottom: 12px;
		right: 12px;
	}

	.shortcut {
		width: 9rem!important;
	}
}


@media screen and (min-width: 992px) {
	body {
		font-size: .875rem;
	}

	#vudio-logo {
		display: inline;
	}

	#preview {
		zoom: 0.6;
	}

	.sidebar {
		display: block!important;
	}

	#station-select-panel {
		width: 400px;
	}

}

.sidebar {
	overflow-y: auto;
}

#menu {
	padding-bottom: 6rem;
}

#page-title-area{
	margin-top: 0.25rem;
	margin-left: -1.5rem;
	padding: 1.5rem;
	margin-bottom: 1.25rem;
	background-color: white;
	box-shadow: 0 0 13px 0 rgba(62,44,90,.08);
	z-index: 10;
}

.page-title {
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 500;
	color: #505050;
	margin: 0;
	text-shadow: #fff 0 1px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}


#fixed-area-top {
	/*
	position: fixed;
	top: 150px;
	width: 100%;
	z-index: 11;

	 */
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-bottom: 1.5rem;

	background-color: white;
	box-shadow: 0 0 13px 0 rgba(62,44,90,.08);
}


#fixed-area-bottom {
	position: sticky;
	bottom: 0;
	width: 100%;

	z-index: 11;
	background-color: white;
	box-shadow: 0 0 13px 0 rgba(62,44,90,.08);
}

#record-area .card-heading {
	cursor:default;
}


.card {
	margin-top: 1rem;
	margin-bottom: 1rem;
	box-shadow: 0 0 13px 0 rgba(62,44,90,.08);

}

h2.page-title {
	font-size: 1rem;
}

h2.card-heading {
	font-size: 1rem;
}

/* Category name with its description alongside. The description takes whatever room is
   left and ellipsises there: a card is only as wide as its column, and a long
   description has no business widening it or wrapping the header onto a second line.
   min-width:0 on both, or a flex item refuses to shrink below its content and
   text-truncate never gets the chance to fire. */
.card-heading-row {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	min-width: 0;
}

.card-heading-row .card-heading {
	flex: 0 1 auto;
	min-width: 0;
}

.card-heading-row .description {
	flex: 0 1 auto;
	min-width: 0;
}

h2.card-heading, h2.day {
	margin-bottom: 0px;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
	font-weight: 400;
}

.light-panel {
	background-color: #efefef;
	margin: 0.5rem;
	padding: 0.5rem;
}

.button-bar {
	margin-bottom: 1rem;
}

tr.row-muted td {
	color: #bbb;
}

.table-xs tr th {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

.table-xs tr td {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}


.dz-drag-hover {
	background: rgba(200,200,255, .25);
}


#play-live {
	margin-top: -3em;
}

h1.title {
	font-size: 1.9em;
}




.logo {
	margin-right: 4px;
}

.asset-details{
	margin-top: 1em;
}

.asset-description {
	margin-top: 1em;
}

/* todo make this more specific */
/*.nav {
	margin-top: 1em;
}*/

.navbar-nav .nav-item {
	margin-left: 1em;
	margin-right: 1em;
}

#navbar-spy .nav-link {
	color: #dddddd!important;
}

#navbar-spy .nav-link.active {
	background-color: #ec008c!important;
	color: white!important;
}



.navbar-station-logo {
	height: 48px;
	margin-top: -6px;
	margin-bottom: -6px;
}

/* Version, at the right-hand end of the navbar before the message icon. Quiet enough
   to ignore when you aren't looking for it, legible enough to read off a screenshot
   when you are. */
.navbar-version {
	/* Explicitly white: it used to sit inside .navbar-brand and inherit Bootstrap's
	   navbar link colour, but standing on its own in the right-hand group it would
	   otherwise take the body's dark grey and disappear into a dark navbar. */
	color: #fff;
	font-size: .7rem;
	font-weight: 500;
	line-height: 1;
	opacity: .75;
	white-space: nowrap;
}

/* Only rendered on a development box, so it can afford to shout. */
.navbar-environment {
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: 1;
}


.bg-highlight {
	background-color:rgba(255, 255, 0, 0.25)!important;
}

a {
	color: #00579D;
	text-decoration: none;
}


.text-major {
	display:block;
}

.text-minor {
	display:block;
	font-size: 0.75em;
}


.text-inline-major {

}

.text-inline-minor {
	font-size: 0.75em;
	paddin-left: 0.2em;
}



.text-script {
	font-size: 2.5em;

}

.avatar {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
}

.control-label-light {
	color: rgba(0, 0, 0, 0.25);
}

.artist {
	display: block;
	font-style: italic;
}

.title {
	display: block;
	font-weight: bold;
}


.table {
	--bs-table-bg: none!important;
}

.row-red td {
	background-color: rgba(255,0,0,0.1);
}

.table th {
	border-top: none;
}




.light-panel {
	background-color: #efefef;
	margin: 0.5rem;
	padding: 0.5rem;
}

.button-bar {
	margin-bottom: 1rem;
}

tr.row-muted td {
	color: #bbb;
}

.table-xs tr td,
.table-xs tr th {
	font-size: 0.9em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 0.4em;
	padding-right: 0.4em;
}

.form-group {
	margin-top: 1rem;
	margin-bottom: 1rem;

}

.avatar-small {
	width: 3em;
	height: 3em;
}

.day-select,
.hr-select,
.no-select
{
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently */
}

.done-bar {
	margin-top: 3em;
	text-align: center;
}

.article-preview-image {
	object-fit: cover;
	width: 100%;
	max-height: 24em;
}

.article-thumbnail {
	width: 100px;
	height: 48px;
	object-fit: cover;
}


h3.category-title {
	font-size: 1.5em;
}


.panel {
	position: absolute;
}

#current-station-select {
	top: 40px;
	left: 20vw;
	width: 60vw;
}

.station-select-icon {
	background: #00152e;
	width: 120px;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	cursor: pointer;
}

.station-select-row {
	margin-top: 2rem;
	margin-bottom: 2rem;
	cursor: pointer;
}

#menu {
	display: none;
	padding-left: 0;
	margin-top: 20px;
}

#menu .metismenu>li {
	position: relative;
	display: flex;
	flex-direction: column;
}

#menu .metismenu a {
	position: relative;
	display: block;
	padding: 13px 15px;
	transition: all .3s ease-out;
	text-decoration: none;
	color: #adb5bd;
	outline-width: 0;
}


#menu .nav-link {
	font-weight: 400;
	color: #aaaaaa;
}

#menu .active {
	color: white;
}

#menu .mm-active {
	color: white;
}

#menu .nav-link .feather {
	margin-right: 4px;
	color: #999;
}

#menu .nav-link:hover .feather,
#menu .nav-link.active .feather {
	color: inherit;
}

/* Third-level submenus (e.g. Web CMS > Manage). metisMenu handles the collapse;
   this only indents them so the nesting is readable. */
#menu ul ul a {
	padding-left: 2.5rem;
}

#menu-heading {
	font-size: .75rem;
	text-transform: uppercase;
}

.feather {
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}



#menu > li {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

#menu > li.mm-active {
	background-color:rgba(0, 0, 0, 0.25);
	border-left: #ec008c 4px solid;
}



.primary {

}

.avatar {
	vertical-align: middle;
	border-radius: 50%;
}

.avatar-small {
	width: 32px;
	height: 32px;
}

.avatar-medium {
	width: 48px;
	height: 48px;
}

.avatar-large {
	width: 64px;
	height: 64px;
}

li.nav-item {
	list-style-type: none;
}


.station-logo {
	height: 4rem;
}

.above-canvas {
	position: fixed;
	z-index: 100;
}

/* Add-search popup geometry (addins/vudio-common-components/add-search).

   Seventeen containers across eleven modules host one of these panels, and every one
   of them used to carry its own copy of
       top: 10em; left: calc(50vw - 40em); width: 80em;
   which is why this was never fixed centrally - there was no centre to fix.

   That centring only holds while the viewport is wider than the card. At 390px it
   resolves to left: 195px - 640px = -445px on a card 1280px wide, so the panel opened
   off the left edge of a phone and could not be reached at all. Centre with a
   transform instead, so the left edge cannot go negative whatever the viewport, and
   cap the width at the viewport rather than fixing it in em.

   Three of the seventeen wanted 60em: those get --narrow. */
.add-search-popup {
	top: 10em;
	left: 50%;
	transform: translateX(-50%);
	width: min(80em, 100% - 2rem);
}

.add-search-popup--narrow {
	width: min(60em, 100% - 2rem);
}

/* The panel is fixed, so any part of it below the fold cannot be scrolled to. The
   results table asks for 600px of its own and the card runs to about 850px once the
   heading and the category picker are added, which already overflowed the bottom of a
   1366x768 laptop. Cap the card at the viewport and let its body scroll.

   The cap is in vh and sits on the card rather than on the container: the container's
   own height is auto, and a percentage max-height against an auto-height parent
   computes to none, so capping the container let the card spill straight back out of
   it. Card top is 10em, so this leaves 2em clear at the bottom.

   The margin is zeroed because .card carries a global 12px one. On a floating panel it
   does nothing except push the card down past the bottom of its own container. */
.add-search-popup > .card {
	margin: 0;
	max-height: calc(100vh - 12em);
}

/* .card is a flex column in Bootstrap, so the body takes up the slack - but a flex item
   will not shrink below its content height without min-height: 0. */
.add-search-popup > .card > .card-body {
	min-height: 0;
	overflow-y: auto;
}

/* Below Bootstrap's md breakpoint a floating card is the wrong shape - there is no
   room left over for it to float above. Fill the screen instead. */
@media (max-width: 767.98px) {
	.add-search-popup,
	.add-search-popup--narrow {
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 100%;
		height: 100dvh;
		max-height: none;
		transform: none;
		/* .above-canvas sits at 100, below the fixed-top navbar's 1030. That is right for a
		   floating card but not for a full-screen one: the navbar covered the panel's own
		   header, taking More and the close button with it and leaving no way out of it.
		   1040 clears the navbar and still sits under Bootstrap's modals at 1050. */
		z-index: 1040;
	}

	.add-search-popup > .card {
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
}

/* Eight columns do not fit the width of a phone. Each variant marks its lower-value ones
   with .add-search__col-secondary - for music that is released, BPM, added and popularity,
   leaving artist, title, duration, play and the add control. The More link in the card
   header puts .add-search--expanded on the container to bring them back. */
@media (max-width: 767.98px) {
	.add-search__col-secondary {
		display: none;
	}

	.add-search--expanded .add-search__col-secondary {
		display: table-cell;
	}
}

/* Scheduling palettes (addins/vudio-common-components/slot-schedule.js).
   Shared by Schedule Scripts and Schedule Event Scripts, so the styling lives with
   the component rather than in one module's stylesheet.

   Hidden here rather than by JS on ready: they are position:fixed, so hiding them
   in script means a paint with both cards on screen first, and they flashed on
   every page load. jQuery .show() still reveals them - it falls back to the
   element's default display when a stylesheet has hidden it. */
#div-palette-mandatory,
#div-palette-filler {
	display: none;
	top: 8em;
	right: 1.75em;
	width: 28em;
	user-select: none;
}

#div-palette-mandatory .card-header,
#div-palette-filler .card-header {
	cursor: move;
}

#div-palette-mandatory .card-body,
#div-palette-filler .card-body {
	max-height: 70vh;
	overflow-y: auto;
}





.red-flash {
	-moz-animation: red-flash 1s ease-out;
	-moz-animation-iteration-count: 1;
	-webkit-animation: red-flash 1s ease-out;
	-webkit-animation-iteration-count: 1;
	-ms-animation: red-flash 1s ease-out;
	-ms-animation-iteration-count: 1;
}
.yellow-flash {
	-moz-animation: yellow-flash 1s ease-out;
	-moz-animation-iteration-count: 1;
	-webkit-animation: yellow-flash 1s ease-out;
	-webkit-animation-iteration-count: 1;
	-ms-animation: yellow-flash 1s ease-out;
	-ms-animation-iteration-count: 1;
}


@-webkit-keyframes red-flash {
	0% { background-color: none; }
	50% { background-color: rgba(255, 23, 23, 0.7)}
	100% { background-color: none; }
}
@-moz-keyframes red-flash {
	0% { background-color: none; }
	50% { background-color:rgba(255, 23, 23, 0.7) }
	100% { background-color: none; }
}
@-ms-keyframes red-flash {
	0% { background-color: none; }
	50% { background-color: rgba(255, 23, 23, 0.7)}
	100% { background-color: none; }
}

@-webkit-keyframes yellow-flash {
	0% { background-color: none; }
	50% { background-color: rgba(255, 255, 23, 0.7)}
	100% { background-color: none; }
}
@-moz-keyframes yellow-flash {
	0% { background-color: none; }
	50% { background-color:rgba(255, 255, 23, 0.7) }
	100% { background-color: none; }
}
@-ms-keyframes yellow-flash {
	0% { background-color: none; }
	50% { background-color: rgba(255, 255, 23, 0.7)}
	100% { background-color: none; }
}

@media print
{
	.navbar {
		display:none;
	}
}



.modal-text-scrollable {
	overflow-y: scroll;
	max-height: 22rem;
}

.modal-dialog {
	max-width: 720px;
}





@media print {
	nav {
		display:none;
		visibility: hidden;
	}
}


.shortcut {
	display: block;
	float: left;
	text-align: center;
	width: 8rem;
	height: 3.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}


.shortcut-wide {
	width: 12rem;
}

.shortcut-icon {
	display: block;
}
.shortcut-text {
	display: block;
}


.station-icon-selected {
	border-bottom: #ec008c 4px solid;
}

.time-seconds {
	font-size: 0.6em;
	font-weight: lighter;
}

/* Documentation Articles */
.documentation-article {

}

.documentation-article h1 {
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: bold;
	border-bottom: 1px solid;
	color: #ec008c;
}

.documentation-article h2{
	font-size: 1.1rem;
	font-weight: bold;
}

ol>li {
	margin-bottom: 0.6rem;
}

.page-title-area-vap {
	margin-top: 3.5rem!important;
}

#main-vap {
	margin-top: 10rem;
}


.contact-thumbnail,
.app-ad-thumbnail {
	width: 100px;
	height: 48px;
	object-fit: cover;
	float: left;
	vertical-align: middle;
	margin-right: 1em;
}

.sponsor-thumbnail {
	height: 64px;
	object-fit: contain;
}

.mix-name {
	font-size: 0.7em;
	opacity: 0.7;
	font-weight: normal;
	padding-left: 0.3em;
}



#codeigniter_profiler {
	position:absolute!important;
	z-index: 999!important;
}


.sale-strikethru {
	color: red;
	text-decoration: red line-through;
}


.max-width-half {
	max-width: 960px;
}

.menu-section {
	font-size: 1rem;
	padding-left: 1.2rem;
	padding-top: 1.5rem;
	padding-bottom: 0.5rem;
	text-transform: uppercase;

}

/* Remove table hover effect on rows that have .no-hover */
.table-hover > tbody > tr.no-hover:hover > * {
	--bs-table-accent-bg: var(--bs-table-bg) !important; /* cancel hover bg */
	color: inherit;                                      /* keep text color */
	box-shadow: none;                                    /* just in case */
}




/* Add/Search panel: a result just added to the host's list stays put but goes dull, so
   the list does not jump under the pointer. It leaves the results on the next reload,
   where the exclusions drop it server side. Opacity sits on the cells, not the row:
   opacity on a tr creates a stacking context and browsers treat that inconsistently
   in table layout. */
tr.add-search__row--added > * {
	opacity: 0.4;
}

tr .show-on-hover {
	visibility:hidden;
}

tr:hover .show-on-hover {
	visibility: visible;
}

/* A touch screen has no hover, so the control stays hidden and the row has no visible
   action at all - Edit, Delete and the add-search plus are all drawn this way. Show
   them permanently where the pointer cannot hover. */
@media (hover: none) {
	tr .show-on-hover {
		visibility: visible;
	}
}


td.dt-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 0; /* ensures it respects column width */
}

/* Disable striped background effect on datatables scroller */

div.dts div.dt-scroll-body table, div.dts div.dataTables_scrollBody table {
	background: transparent!important;
}

div.dts div.dt-scroll-body, div.dts div.dataTables_scrollBody {
	background: transparent !important;
}

.datatables-hidden{
    display: none;
}

/* Hide default buttons so we can use dropdown menu */
.dt-buttons {
	display: none;
}

/* Place that dropdown menu correctly in the top-right */
.dataTables_buttons {
	float: right;
	margin-left: 1em;
}

/* Prevents horizontal scrolling on large tables */

.table-fixed-width {
	table-layout: fixed;
	width: 100% !important;
}

.table-fixed-width th,
.table-fixed-width td {
	width:auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* TickyTimetable (addins/vudio-common-components/ticky-timetable.js).
   The 7x24 hours grid used by campaign airtime, presenter scripts and event
   scheduling. Lived only in the stations schedules CSS, so the grid was unstyled
   everywhere else - it belongs with the component, not with one screen. */
.timetable tbody td {
	vertical-align: middle;
	text-align: center;
	font-size: 0.75em;
}

.timetable .top-hours {
	text-align: center !important;
}

/* Hotness score pips. The class is used on the opportunity editor and the
   contact-action editor as well as the pipeline; the rule used to live in
   contacts-pipeline.css, which only the pipeline loaded, so the shading was
   missing on the other two. Moved here with the kanban extraction (VUD-201). */
.hotness-score div {
    box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

/* select2 inside an .input-group.

   initSelect2() renders every searchable select at width:100%, which select2 writes
   inline onto its own container. .input-group wraps, so a member that wide takes a
   line to itself and pushes the add-ons either side onto lines of their own - three
   rows where there is one control. Sized here as an ordinary member of the group,
   and squared off where it meets its neighbours, because the rounded corners belong
   to the group rather than to the box in the middle of it. */
.input-group > .select2-container {
    flex: 1 1 auto;
    width: auto !important;
}

.input-group > .select2-container:not(:first-child) .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .select2-container:not(:last-child) .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}