.waveform-display {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 20px auto;
	grid-template-columns: auto 50px;
}

.waveform-display .waveform-scroll {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.waveform-display .controls {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}

.waveform-display .viewport {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	height: calc(100% - 20px) !important;
}
.big-wave {
	display: flex;
}

.big-wave > div {
}
.rain .column {
    display: block;
    float: left;
    width: 14px;
    height: 100%;
}
.rain .row {
    display: block;
    height: 18px;
    width: 100%;
}
.rain .row.rotate {
    transform: rotateZ(180deg) translateY(-4px)
}
.rain .row.flip-hor {
    transform: scaleX(-1)
}
.rain .row.flip-ver {
    transform: scaleY(-1) translateY(-4px)
}
.login-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000001;
}

.login-box {
	width: 80vw;
	box-shadow: 4px 4px 8px 4px var(--shadow);
	background: #222529;
	color: #f1f3f5;
	box-sizing: border-box;
	position: relative;
	text-align: left;
	outline: transparent solid 3px;
	min-height: 100px;
	max-height: 100%;
	overflow-y: auto;
	border-radius: 2px;
	max-width: 450px;
	padding: 20px;
}

.login-box .ms-Label,
.login-box .ms-Checkbox-checkbox,
.login-box .ms-Checkbox-text {
	color: #e9e9e9;
	border-color: #e9e9e9;
}

.login-container .login-status {
	position: absolute;
	top: 0;
	right: 0px;
	text-align: right;
	padding: 10px;
}

.login-status a {
	color: #333;
	text-decoration: none;
}

.login-content {
	padding: 20px;
}


.login-control-group {
	display: flex;
	align-items: flex-end;
}

.login-control-group > *:first-child {
	flex: 1;
}

.logo {
	display: block;
	height: 70px;
}

.modal-body {

}

.errorTezt a {
	color: #C00 !important;
}
.errorText {
	color: #C00 !important;
	font-weight: bold;
	display: block;
	margin: 5px 0 -10px 0;
}

.build-no {
	float: right;
}

.login-primary-button {
	float: right;
}

.accessible.login-primary-button{
	border: 2px solid white;
	color: white;
	background: transparent;
	font-weight: bold;
}

.accessible.login-primary-button:hover{
	background: var(--highlight);
	color: white;
}

.login-secondary-button {
	margin-right: 5px;
}

.login-footer {
	position: absolute;
	bottom: 2px;
	right: 0px;
	text-align: right;
	padding: 5px 20px;
}

.login-footer p {
	margin: 0;
}

.debug-enable-button {
	opacity: 0.4;
}

input, textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.status-message {
	display: flex;
	border-radius: 4px;
	align-items: center;
	overflow: hidden;
	text-decoration: #c00 !important;
	color: #000;
	animation: 0.1s fadeIn;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to: { opacity: 1; }
}

.status-icon {
	font-size: 24pt;
}

.status-message .status-text {
	text-decoration: none !important;
}

.status-message-ok {
	color: #666;
	border-color: rgba(0, 0, 0, 0.1);
}

.dark .status-message-ok {
	color: #CCC;
	border-color: rgba(255, 255, 255, 0.3);
}

.status-message-incident {
	background: rgba(255, 170, 0, 0.5);
	border-color: transparent; /* rgba(200, 150, 0, 0.9); */
	color: #843e06;
}

.status-text-head {
	display: block;
	color: #FFF;
	padding: 4px 10px;
	text-align: center;
	background: #999;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}

.dark .status-text-head {
	background: #FFF;
	color: #000;
	text-shadow: none;
}

.status-text {
	display: block;
	padding: 4px 10px;
}

.dark .status-message-incident {
	background: #e67e22;
	color: #FFF;
}

.status-message-maintenance {
	background: #369;
	color: #FFF;
}

.dark .status-message-maintenance {
	color: #FFF;
}

.status-message-incident .status-text, .status-message-maintenance .status-text {
	font-weight: bold;
}

.status-message-ok .status-text {
	background: #43f077;
	color: #030;
	text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
}

.remember-me {
	margin-top: 10px;
}

.dark .status-message-ok .status-text {
	background: #006d21;
	color: #FFF;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

.status-message.status-affect-operational {
	background: #43f077;
	color: #030;
	text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
}

.status-message.status-affect-degraded {
	background: #ffc400;
	color: #FFF;
}

.status-message.status-affect-partial_outage {
	background: #ff8b00;
	color: #FFF;
}

.status-message.status-affect-under_maintenance {
	background: #369;
	color: #FFF;
}

.status-message.status-affect-major_outage {
	background: #de350b;
	color: #FFF;
}

.otp-number-punch {
	display: flex;
	justify-content: center;
}

svg.qr-code-img {
	padding: 20px;
	margin: 0 0 10px 0;
	background: #FFF;
}

.otp-number-punch .ms-TextField {
	width: 40px;
	text-align: center;
	margin-right: 5px;
}

.otp-number-punch .ms-TextField input {
	text-align: center;
	font-size: 20px;
}

.otp-number-punch .ms-TextField .ms-TextField-fieldGroup {
	height: 40px;
}

.otp-number-punch .is-select-all .ms-TextField-fieldGroup::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid rgb(58, 150, 221);
    border-radius: 2px;
}


.single-sign-on {
	background: transparent;
	width: 100vw;
	margin: -20px;
	height: 250px;
	overflow: hidden;
	max-width: 450px;
}

.single-sign-on iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.database-list-item {
	background: linear-gradient(to bottom, #222 0%, #111 100%);
	color: #fff !important;
	border: none;
	padding: 10px 0;
	font-size: 12pt;
	cursor: pointer;
	transition: background 0.05s;
	width: 100%;
}

.database-list-item {
	text-align: left;
	line-height: 48px;
	border: 1px solid #777;
	padding: 5px;
	border-radius: 4px;
	margin-bottom: 5px;
	position: relative;
}

.database-list-item .empty-logo {
	display: inline-block;
	width: 48px;
}

.database-list-item img {
	height: 48px;
	float: left;
}

.database-list-item .station-text {
	padding-left: 10px;
}

.database-list-item:hover {
	background: linear-gradient(to bottom, #333 0%, #222 100%)
}

.database-list-item:active {
	background: #415875;
}

.location-text {
	position: relative;
	top: -10px;
}

.station-sub-text {
	position: absolute;
	display: block;
	font-size: 10pt;
	bottom: -10px;
	right: 10px;
}

.login-box.close-btn > button:first-of-type {
	float: right;
	margin-top: -10px;
}
.station-list-item {
	background: linear-gradient(to bottom, #222 0%, #212121 100%);
	color: #fff !important;
	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
	border: none;
	padding: 10px 0;
	font-size: 12pt;
	cursor: pointer;
	width: 100%;
}

.station-list {
	max-height: 80vh;
	max-height: calc(90vh - 155px);
	overflow-y: none;
}

.station-list-item {
	text-align: left;
	line-height: 48px;
	padding: 3px;
	border-radius: 4px;
	margin-bottom: 5px;
	position: relative;
	overflow: hidden;
}

.station-list-item .station-list-border {
	position: absolute;
	width: 8px;
	border-radius: 2px;
	background: #94d609;
	top: 3px;
	bottom: 3px;
	float: left;
}

.station-list-item .empty-logo {
	display: inline-block;
	width: 48px;
}

.station-list-item img {
	position: absolute;
	right: -30px;
	top: -30px;
	opacity: 0.25;
	height: 120px;
}

.station-list-item .station-text {
	padding-left: 15px;
}

.station-list-item:hover {
	background: #3d4247;
}

.station-list-item:active, .station-list-item:focus {
	background: #415875;
	outline: none;
	border-color: #ccc;
}

.location-text {
	position: relative;
	top: -10px;
}

.station-sub-text {
	position: absolute;
	display: block;
	font-size: 10pt;
	bottom: -10px;
	right: 10px;
}

.login-box.close-btn > button:first-of-type {
	float: right;
	margin-top: -10px;
}

.homepage-landing-box {
	width: 100vw;
	height: 100vh;

	background: #111;
	color: #fff;

	display: grid;

	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(80px, 200px) minmax(300px, 2fr) minmax(0, 200px);
	overflow: hidden;
}

.homepage-landing-box::before {
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	scale: 1.1;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	background-image: url(/static/media/background.70b5236b.webp);
	background-repeat: no-repeat, repeat;
	background-size: cover;
	animation: drift 6s infinite alternate, hue 8s infinite alternate, focus 4s forwards alternate;
}

.homepage-landing-box .top-bar-container {
	grid-column: 1 / 3;
	grid-column: 1 / 2;
	display: flex;
	flex-direction: column;
	position: relative;
}

.homepage-landing-box .top-bar-container {
	align-items: center;
	justify-content: center;
}

.homepage-landing-box .top-bar-container img.logo {
	height: 160px;
	margin-top: 56px;
	box-sizing: border-box;
	user-select: none;
	padding-left: 200px;
}

.homepage-landing-box .left-content-box {
	position: relative;
	grid-column: 1 / 2;
}

.homepage-landing-box .right-content-box {
	position: relative;
	grid-column: 2 / 3;
	grid-row: 1 / 4;
	z-index: 5;
}

.homepage-landing-box .login-container {
	position: unset !important;
	background: none;
	flex-direction: column;
	align-items: flex-start;
}

.homepage-landing-box .login-container .login-box {
	/* box-shadow: none !important; */
	border-radius: 4px;
	background-color: #11111199;
}

.login-box p span {
	color: #e9e9e9;
}

.homepage-landing-box .left-content-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
}

.left-content-box .hint-image {
	object-fit: contain;
	max-height: 300px;
	max-width: 450px;
	width: 100%;
}


@media screen and (max-width: 900px) {
	.homepage-landing-box {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.homepage-landing-box .left-content-box {
		display: none;
	}

	.homepage-landing-box .top-bar-container {
		align-items: flex-start;
		height: 180px;
		padding-left: 20px;
	}

	.homepage-landing-box .login-container {
		align-items: center;
	}

	.homepage-landing-box .top-bar-container {
		display: flex;
		align-items: center;
	}

	.homepage-landing-box .top-bar-container img.logo {
		margin: 0;
		padding: 0;
		height: auto;
		width: 340px;
	}
}

.launchpad {
	display: flex;
	flex: 1;
	max-width: 500px;
	height: 100%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.launchpad-buttons {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 4px;
	color: #e9e9e9;
	flex-wrap: wrap;
	height: 360px;
}

.launchpad-buttons.mobile {
	position: absolute;
	right: 0;
	width: 700px;
}

.homepage-landing-box:not(.accessible) .launchpad-group,
.homepage-landing-box:not(.accessible) .launchpad-checkbox-container {
	background-color: #11111199;
}

.launchpad-buttons label {
	color: #e9e9e9;
}

.launchpad-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	position: absolute;
	right: 20px;
	bottom: 20px;
	gap: 10px;
	padding: 10px;
	border-radius: 4px;
}

.launchpad-footer {
	background-color: #11111199;
}

.launchpad-footer .ms-Checkbox * {
	color: #e9e9e9;
	fill: #e9e9e9;
	border-color: #e9e9e9;
}

.launchpad-footer .ms-Checkbox:hover * {
	color: #e9e9e9;
	fill: #e9e9e9;
	border-color: #e9e9e9;
}

.launchpad-group {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mobile .launchpad-group {
	width: 350px;
}

.launchpad-description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	user-select: none;
	font-size: 12px;
	width: 160px;
	margin: 10px 40px 10px 0px;
}

.mobile .launchpad-description {
	width: 140px;
	margin: 10px 20px 10px 0px;
}

.launchpad-description-not-enabled {
	margin-top: 5px;
	color: rgb(58, 150, 221);
}

.launchpad .launchpad-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 180px;
	height: 100px;
	margin: 10px;
	gap: 10px;
	position: relative;
	border-radius: 4px;
	box-shadow: 0 0 -4px 4px transparent;
	background: #2a2d31;
	transition: box-shadow 0.05s, background 0.1s;
	border: none;
}

.launchpad .launchpad-icon:hover:not(:disabled),
.launchpad .launchpad-icon:hover:not(:disabled) span {
	color: #e9e9e9 !important;
	fill: #e9e9e9 !important;
}

.launchpad .launchpad-icon:disabled {
	border-color: rgba(240, 240, 240, 0.2);
	color: rgba(255, 255, 255, 0.2) !important;
}

.launchpad .launchpad-icon {
	color: #fff !important;
	fill: #fff !important;
}

.launchpad .launchpad-icon:hover:not(:disabled) {
	cursor: pointer;
	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.4);
	background: rgba(255, 255, 255, 0.1) !important;
}

/* .launchpad .launchpad-icon:active:not(:disabled) {
	box-shadow: 0 0 8px 2px var(--highlight);
} */

.launchpad .launchpad-icon > i {
	height: 32px;
	width: 32px;
	line-height: 64px;
	font-size: 28px;
}

.launchpad .launchpad-icon > i i {
	width: 32px;
	height: 32px;
}

.launchpad .launchpad-icon span {
	flex: 1;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.launchpad-info-icon {
	position: absolute;
	top: 2px;
	right: 2px;
}

.launchpad-checkbox-container {
	position: absolute;
	display: flex;
	flex-direction: row;
	bottom: -40px;
	left: 0px;
	gap: 3px;
	padding: 10px 20px;
	color: #fff !important;
	border-radius: 0px 0px 4px 4px;
}

.launchpad-checkbox-container .ms-Checkbox-checkbox {
	border-color: white;
}

/* if 4x3 ratio */
@media screen and (max-aspect-ratio: 4/3) {
	.launchpad .launchpad-icon {
		width: 120px;
		height: 110px;
	}

	.launchpad .launchpad-description {
		width: 120px;
	}
}

.awards-logos {
	position: absolute;
	right: 50px;
	bottom: 70px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2rem;
}

.awards-logos .award-logo {
	user-select: none;
	pointer-events: none;
	max-height: 90px;
}

.awards-logos .nab-logo {
	user-select: none;
	pointer-events: none;
	max-height: 70px;
}


@media screen and (max-width: 900px) {
	.awards-logos {
		position: relative;
		top: 100px;
		left: auto;
		right: auto;
		width: auto;
		gap: 1rem;
		justify-content: center;
		height: auto;
	}

	.homepage-landing-box .right-content-box .login-container {
		position: unset !important;
	}
}

.accessible .launchpad-buttons {
	background-color: transparent !important;
}

.accessible .launchpad-icon,
.accessible .login-box {
	background-color: #11111199;
	border: 2px solid white;
	font-weight: bold;
	color: white;
}

.accessible .launchpad-icon:hover:not(:disabled) {
	background: #3a96ff !important;
	box-shadow: 0px 0px 2px 6px #3a96ff;
}

.accessible .launchpad-icon:hover:not(:disabled) i {
	text-shadow: 0px 0px 3px black, 0px 0px 3px black;
}

.accessible .launchpad-icon:hover:not(:disabled) svg,
.accessible .launchpad-icon:hover:not(:disabled) span {
	fill: white !important;
	filter: drop-shadow(0px 0px 2px black);
}

.accessible .launchpad-description,
.accessible .launchpad-icon span,
.accessible .launchpad-checkbox-container span {
	font-weight: bold;
}

.accessible.homepage-landing-box::before {
	background-image: none;
	background: #111;
}

.accessible .launchpad-checkbox-container .ms-Checkbox-checkbox {
	border: 2px solid white;
}

.accessible .launchpad-footer button {
	outline: 2px solid white;
	background: transparent;
	color: white;
	font-weight: bold;
}

.launchpad-accessibility {
	position: absolute;
	left: 10px;
	bottom: 10px;

	display: flex;
	align-items: center;

	gap: 10px;
	padding: 10px;
	border-radius: 4px;

	color: white !important;
}

.accessible .launchpad-accessibility {
	border: 2px solid white;
}

.launchpad-accessibility {
	background-color: #11111199;
}

@keyframes drift {
	100% {
		translate: 18px 6px;
	}
}

@keyframes hue {
	100% {
		filter: hue-rotate(25deg);
	}
}

@keyframes focus {
	0% {
		filter: blur(2px) opacity(80%);
	}
	100% {
		filter: blur(0px) opacity(100%);
	}
}

html body.dark {
	background: #000;
}

body.dark a:not(.ms-Button):link, body.dark a:not(.ms-Button):visited {
	color: #69C;
}

body.dark .ms-DetailsRow.is-selected a:not(.ms-Button):link, body.dark .ms-DetailsRow.is-selected  a:not(.ms-Button):visited {
	color: #FFF;
}

body.dark .smooth-edit-wave .cursor {
	border-color: #FFF;
}

body.dark .ms-ContextualMenu-link.is-disabled {
	background-color: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.5) !important;
}

body.dark .ms-ContextualMenu-link.is-disabled *:not(i) {
	color: rgba(255, 255, 255, 0.4) !important;
}

body.dark .smooth-edit-wave .cursor.playhead {
	border-left-color: rgba(100, 255, 100, 0.8);
}


body.dark .ui-media-dialog-icon i svg {
	fill: #FFF;
}


body .ui-ribbon-section button.ui-ribbon-button.pressed.orange-button:hover,
body.dark .ui-ribbon-section button.ui-ribbon-button.pressed.orange-button:hover {
	background-color: #a77000 !important;
	color: #000 !important;
}

body.dark .ui-ribbon-section button.ui-ribbon-button:hover,
body.dark .ui-ribbon-section button.ui-ribbon-action-button:hover,
body.dark .ui-ribbon-section button.ui-ribbon-split-btn-primary + button:hover {
	background-color: var(--mainHover) !important;
}


body.dark .ui-ribbon-section button.ui-ribbon-button.pressed:hover, body.dark .ui-ribbon-section button.ui-ribbon-action-button.pressed:hover {
	filter: brightness(1.1) !important;
}

body.dark .ms-DatePicker-weekday, body.dark .ms-DatePicker-monthAndYear, body.dark .go-to-today, body.dark .ms-DatePicker-currentYear {
	color: #EEE !important;
}

body.dark .ms-DatePicker-day {
	color: #CCC !important;
}

body.dark .ms-DatePicker-prevMonth, body.dark .ms-DatePicker-nextMonth, body.dark .ms-DatePicker-prevYear, body.dark .ms-DatePicker-nextYear, body.dark .ms-DatePicker-monthOption {
	color: #CCC !important;
}

body.dark .login-status a {
	color: #FFF;
}

body.dark .clock-picker svg {
	fill: #FFF;
	stroke: #FFF;
}

body.dark .clock-picker svg path {
	stroke: #FFF;
}

body.dark .login-footer {
	color: #EEE;
}

/* body.dark .ui-ribbon-section button.is-disabled {
	color: rgba(255, 255, 255, 0.6);
	opacity: 0.5;
} */

body.dark .ui-ribbon-section button.is-disabled:not(.is-selected) i {
	opacity: 0.6;
}


body.dark .std-btn:disabled {
	background: linear-gradient(to bottom, #3F4146 0%,#292A2E 100%) !important;
	opacity: 0.8;
}

body.dark .media-list-controls {
	color: #fff;
}


body.dark .ui-log-item {
	fill: currentColor;
}


body.dark .ui-log-icon .br-svg-icon svg {
	fill: currentColor;
}

body.dark .ms-Button .br-svg-icon svg {
	/* fill: currentColor !important; */
}

body.dark .ui-log-gap-timing, body.dark .ui-log-gap-timing-text {
	color: var(--text);
	border-color: var(--border);
}

body.dark .ms-ContextualMenu-icon svg, body.dark i.ms-ContextualMenu-icon {
	fill: currentColor;
	stroke: currentColor;
	color: #FFF;
}

body.dark .ms-ContextualMenu-itemText, body.dark .ms-Nav-compositeLink i {
	color: #FFF;
}

body.dark .ms-Nav-compositeLink:hover i {
	color: rgb(58, 150, 221);
}


body.dark .button-overlay-icon .br-svg-icon svg {
	fill: #FFF;
}

body.dark .media-grid-item-selected {
	box-shadow: 0px 0px 0px 2px var(--highlight);
	border-color: #FFF;
}

body.dark .media-grid-item {
	background-color: var(--tabActive);
	color: var(--text);
	border: 1px solid var(--window);
}

body.dark .ui-log-icon.time-icon {
	color: inherit !important;
}

body.dark .library-search-controls {
	position: relative;
}

body.dark .ms-ContextualMenu.is-open {
	background-color: var(--window);
}


body.dark .script-container textarea {
	color: #FFF;
	outline: none;
}

body.dark .info-dialog-main-body .script-container:focus-within, body.dark .smart-info-main .script-container:focus-within {
	border-color: #FFF;
}

body.dark .ms-DetailsRow {
	border-bottom: 1px solid var(--windowBar);
}

body.dark .ms-TextField-fieldGroup,
body.dark .ms-Dropdown-title,
body.dark .ms-ComboBox,
body.dark .ms-ComboBox-Input,
body.dark .ms-spinButton-input {
	background: var(--backgroundDark);
	border-color: var(--windowBar);
}

.settings-modal {
	width: 90vw;
	height: 90vh;
	max-width: 1000px;
	position: relative;
	overflow: auto;
	border-radius: 5px;
}

.settings-modal .settings-header {
	position: absolute;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	top: 5px;
	right: 10px;
}

.settings-modal .ms-Modal-scrollableContent {
	height: 100%;
}

.settings-modal .settings-header > * {
	margin: 5px;
}

.settings-modal .settings {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.settings-modal .settings-main {
	background: var(--window);
	padding: 0px 20px 10px;
	overflow-y: auto;
	flex-basis: 200px;
}

.settings-modal .screen-title {
	line-height: 3em;
}

.settings-modal .settings-child-header {
	border-bottom: 1px solid #ddd;
	line-height: 3em;
}

.settings-modal .settings-child {
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10px 0 0 20px;
	height: 100%;
}

.settings-modal .ms-Nav-compositeLink {
	background-color: transparent;
}

.settings-modal .ms-Label b {
	font-weight: 600;
}

.settings-modal .ms-Nav-compositeLink.is-selected button {
	font-weight: bold;
}

.settings-modal .settings-child .settings-body {
	flex: 1;
	overflow-y: scroll;
	box-sizing: border-box;
}

.settings-media-type-list {
	margin-left: 16px;
}

.settings-media-type-list > * {
	margin-bottom: 5px;
}

.settings-main nav ul li button > div > i {
	width: 16px;
}

div[name="Media Cache"] .ms-Nav-chevronButton {
	display: none;
}

.settings-modal .ms-Nav-group i.ms-Button-icon {
	width: 16px;
}

.settings-modal .tabbed-settings {
	height: calc(100% - 32px);
}

.br-svg-icon, .br-svg-icon svg {
	width: 100%;
	height: 100%;
}

img.br-svg-icon {
	object-fit: contain;
}


span.br-colour-icon {
	width: 12px;
	height: 12px;
	position: relative;
	top: 1px;
	min-width: 12px;
	border-radius: 2px;
	display: block;
	margin-right: 5px;
	box-shadow: inset 2px 2px 2px var(--shadow);
}


body.global-no-drop-cursor {
	cursor: no-drop !important;
}

.storybook-log-floating {
	background: #f3f3f3;
	max-width: 800px;
	width: 80%;
	margin: 0 auto;
	max-height: 300px;
	display: flex;
	flex-direction: column;
}

.controls.container.ui-ribbon {
	overflow-x: auto;
}

.ms-ContextualMenu-item .view-options .ms-Checkbox {
	margin-bottom: 10px;
}

.view-options > *{
	display: flex;
	flex-direction: row;
	gap: 4px;
	justify-content: space-between;
	padding: 2px;
}

.view-options-child {
	width: 500px;
}

.view-options-child table {
	width: 100%;
	table-layout: fixed;
}

.view-options-child table td:nth-child(odd) {
	width: 100px;
	text-align: right;
}

.view-options-child.mobile {
	width: 100%;
}

.view-options-child.mobile tr {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
}

.view-options-child.mobile td:nth-child(odd) {
	width: auto;
}

.view-options-child.mobile td:nth-child(3) {
	grid-column: 1;
	grid-row: 2;
}

.view-options-child.mobile td:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}

.ui-log-viewport .ms-DetailsRow.ms-FocusZone:focus, .ui-log-viewport .ms-DetailsRow.ms-FocusZone:after {
	outline: 0 !important;
	border: none !important;
}

.ui-log-item:focus {
	outline: none;
}

.ui-log-viewport .ms-DetailsRow.ms-FocusZone::-moz-focus-inner {
	border: 0;
	outline: none;
}

.ui-log-viewport {
	flex: 1;
	height: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
}

.ui-log-viewport .ui-log-item {
	/* workaround for zoom abnormalities */
	height: 100%;
	padding-right: 2px;
}

.ui-log-item {
	width: 100%;
	color: #000;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	padding: 1px 0 1px;
	position: relative;
}

.ui-log-item .log-selected-tick {
	width: 16px;
	background: #2797ff;
	border-right: 1px solid #999;
	text-align: center;
}

.ui-log-item .log-selected-tick-checkbox {
	height: 100%;
	line-height: 30px;
	color: #FFF !important;
}

.ui-log-flexbox {
	flex: 1;
}

.ui-log-item > table {
	flex: 1;
}

.log-ui-item {
	background-color: transparent; /* allow anywhere to be dragged */ 
	position: relative;
	width: 100%;
	border-radius: 3px;
	transition: background-color 0.1s, transform 0.1s;
}

.log-ui-item table {
	table-layout: fixed;
	border-collapse: collapse;
	position: relative;
	z-index: 1;
	width: 100%;
}

.ui-log-viewport .log-ui-item {
	margin-left: 2px;
}

.ui-log-disabled-time {
	display: block;
	text-align: center;
}

.ui-log-item td:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.ui-log-item td:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.ui-log-item td.log-col-time {
	padding-left: 10px;
	width: 54px;
	white-space: nowrap;
}

.ui-log-item td.log-col-time.adjust-time-width {
	width: 70px;
}

.ui-log-item td.log-col-type-icon {
	width: 4ch;
	text-align: center;
}

.ui-log-item td.log-col-type-icon.collapsed-icon {
	width: 8px !important;
}

.log-col-chain-container {
	position: relative;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.log-col-chain-container .ui-log-chain-icon-state {
	bottom: -4px;
	right: -4px;
}

.ui-log-item td.log-col-type-icon .ui-log-icon {
	padding-left: 0;
}

.ui-log-item .log-col-request-icon {
	display: inline-block;
	margin-right: 3px;
	width: 20px;
	height: 18px;
	position: relative;
}

.ui-log-item .log-col-request-icon i {
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	top: -2px;
}

.ui-log-item.double-height .log-col-request-icon i {
	top: 0px;
}

.ui-log-item td.log-col-media-id {
	width: 9ch;
}

.ui-log-item td.log-col-category {
	width: 11ch;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.double-height .log-ui-item-table {
	height: 100%;
}

.ui-log-item:not(.double-height) .log-ui-item-table td:not(.log-col-chain) {
	line-height: 2.3em;
}

.ui-log-item td.log-col-title {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-log-item td.log-col-title .log-col-title-top {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
}

.ui-log-item td.log-col-title span {
	text-overflow: ellipsis;
}

.ui-log-item td.log-col-artist {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-log-item td.log-col-artist.empty-artist {
	width: 0px;
}

.ui-log-item td.log-col-intro {
	width: 7ch;
}

.ui-log-item td.log-col-intro.hidden {
	display: none;
}

.ui-log-item td.log-col-playlength {
	width: 9ch;
	text-align: right;
	position: relative;
}

.ui-log-item.double-height td.log-col-playlength .log-col-playlength-tooltip {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 4.4em;
}

.ui-log-item td.log-col-hook-icon {
	width: 3ch;
	text-align: center;
}

.ui-log-item:not(.double-height) td.log-col-type-icon .ui-log-icon,
.ui-log-item:not(.double-height) td.log-col-hook-icon .ui-log-icon {
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
}

.ui-log-item td.log-col-chain {
	width: 2.9ch;
	text-align: center;
}

.ui-log-item td.log-col-fill {
	width: 12ch;
	text-align: center;
}

.ui-log-item td.log-col-fill a {
	font-size: 10.5pt;
}

.ui-log-item.is-selected td.log-col-fill a {
	color: #FFF !important;
}

.ui-log-item td:last-child {
	padding-right: 10px;
}


.is-selected .log-ui-item svg {
	fill: #FFF;
}

.flat-ui .log-ui-item {
	background: transparent;
}

.flat-ui.is-selected {
	position: relative;
	z-index: 2;
}

html .is-selected.ui-log-item a:link {
	color: currentColor !important;
}

.is-selected .ui-log-item-overlay {
	color: #000;
}

.is-selected .log-ui-type-disabled {
	color: #666;
}

.ui-log-hour {
	border-left: 5px solid #CCC;
}

.ui-log-hour-live {
	border-left-color: #ffa500;
}

.ui-log-icon[data-icon-name="CircleFill"] {
	color: var(--go) !important;
	-webkit-text-stroke: 2px var(--go);
}

.ui-log-icon[data-icon-name="brplus-filled-new"] {
	color: var(--sweeper) !important;
	-webkit-text-stroke: 2px var(--sweeper);
	/* scale: 1.2; */
}

.ui-log-icon[data-icon-name="brstop-filled"] {
	color: var(--stop) !important;
}

.ui-log-chain-icon .br-svg-icon svg {
	width: 18px;
	height: 18px;
}

.log-ui-item-table .ui-log-icon[data-icon-name="brstop-filled"] {
	padding-left: ;
}

.ui-log-item-larger {
	font-size: 20px;
}

.ui-log-icon.ui-log-item-larger svg {
	width: 20px !important;
	height: 20px !important;
}

.is-selected .ui-log-icon[data-icon-name="CircleFill"],
.is-selected .ui-log-icon[data-icon-name="SquareShapeSolid"] {
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
	paint-order: stroke;
}


.ui-log-icon svg {
	height: 16px;
	width: 16px;
}

.advanced-log-request-icon,
.advanced-log-request-icon .br-svg-icon,
.advanced-log-request-icon svg {
	width: 16px !important;
	height: 16px !important;
}

.log-ui-edit td.log-col-playlength {
	color: #F00;
}

.ui-log-item-overlay {
	position: absolute;
	top: 0;
	left: 4px;
	width: 7.5ch;
	line-height: 2.1em;
	font-size: 12pt;
	text-align: center;
	color: var(--text);
}

.ui-log-item-icon {
	height: 17pt;
	line-height: 2.7em;
}

.ui-log .ms-DetailsRow-cell {
	padding: 0;
	min-height: 0;
}

.ui-log-drag, .ms-FocusZone .is-dropping {
	/* border-top: 3px solid #000; */
	box-shadow: 0px -3px 0px #000 !important;
}
body.dark .ui-log-drag, body.dark .ms-FocusZone .is-dropping {
	/* border-top: 3px solid #000; */
	box-shadow: 0px -3px 0px #FFF !important;
}


.ui-log-drag * {
}

.storybook-log-row {
	grid-column: 1/3;
	min-height: 200px;
}

.empty {
	height: 2000px;
}

.ui-log-item {
	border-left: 8px solid #ccc;
}

.log-ui-hour-liveassist {
	border-left-color: #ffa500;
}

.log-ui-hour-auto {
	border-left-color: #93ee93;
}

.ui-log {
	display: flex;
	flex-direction: row;
	background-color: var(--tabActive);
}

.log-controls {
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 0px 4px 4px 0px;
	display: flex;
	flex-direction: column;
	width: 36px;
	height: calc(100% - 8px);
	gap: 3px;
	padding: 4px;
}

.icon-rotate-90cw {
	transform: rotate(90deg);
}

.icon-rotate-90ccw {
	transform: rotate(-90deg);
}

.ui-log-chain-icon {
	font-size: 18px;
	padding-left: 5px;
	padding-top: 2px;
	margin-right: 5px;
}

.ui-log-viewport .ui-log-chain-icon {
	margin-right: 0px;
	padding-top: 4px;
}

.ui-log-viewport .double-height .ui-log-chain-icon {
	padding-top: 2px;
}



.ui-log-icon-base-container {
	position: relative;
}

.ui-log-chain-icon-state {
	position: absolute;
	z-index: 9;
	bottom: 2px;
	right: 2px;
	color: #FFF;
	font-size: 8pt;
	background: #6292f2;
	border: 1px solid var(--textDisabled);
	-webkit-text-stroke: 1px #FFF;
	padding: 1px;
	margin: 0;
	border-radius: 3px;
}

.ui-log-chain-icon-dead {
	position: relative;
	left: -2px;
}

.ui-log-chain-icon-dead .br-svg-icon, .ui-log-chain-icon-dead .br-svg-icon svg {
	width: 22px;
	height: 22px !important;
}

.ui-log-locked-icon {
	position: absolute;
	z-index: 9;
	bottom: 2px;
	right: 0px;
	fill: #e64a3e !important;
	font-size: 8pt;
}

.shell-mobile .ui-log-item:not(.double-height) .ui-log-locked-icon {
	bottom: 6px;
    right: 4px;
}

.shell-mobile .double-height .ui-log-locked-icon {
	bottom: 12px;
}

.ui-log-chain-icon-missing {
	position: absolute;
	z-index: 9;
	bottom: 0px;
	right: 0px;
	fill: #e64a3e !important;
	font-size: 8pt;
}

.is-selected .ui-log-locked-icon svg {
	fill: #e64a3e !important;
}

.ui-ribbon-button-fullwidth {
	width: 70px !important;
	padding: 5px 0px 2px 0 !important;
}

.log-item-playing-state {
	display: inline-block;
	width: 24px;
	font-size: 20px;
	line-height: 14px;
	padding: 0 0 0 2px;
	-webkit-text-stroke: 1px #333;
	position: relative;
	top: 2px;
}

.log-item-playing-state-playing {
	color: var(--go) !important;
}

.log-item-playing-state-cued {
	color: var(--sweeper) !important;
}

button.ui-ribbon-right-justify > * {
	justify-content: space-between;
	flex-direction: row-reverse;
}

.ui-log-viewport .ms-Viewport {
	position: relative;
	z-index: 2;
}

.ui-log-gap-timing {
	position: absolute;
	bottom: 5px;
	width: 100%;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.ui-log-gap-timing-text {

	padding: 4px;
	border-radius: 3px;
	font-size: 10pt;
	text-align: center;
}

.ui-log-item.log-ui-type-script td.log-col-artist, .ui-log-item.log-ui-type-social td.log-col-artist, .ui-log-item.log-ui-type-script td.log-col-artist {
	width: 0 !important;
}

.log-item-autofilled {
	font-style: italic;
}

.log-item-playing-state, .log-item-playing-state * {
	font-style: normal !important;
}

.artist-wrap {
	display: none;
}

.time-icon-contain {
	padding-right: 5px;
}

.ui-log-icon.time-icon {
	color: currentColor;
	padding-top: 0 !important;
	position: relative;
	top: 2px;
	fill: #000;
}

.ui-log-item.is-selected .ui-log-icon.time-icon {
	color: #FFF;
}


.note-tt-b {

}

.note-tt-b p {
	margin-top: 0;
}

.note-tt-b + .note-tt-b p {
	margin-top: 0.5em;
}

.note-tt-b table {
	vertical-align: center;
}

.log-container-main {
	font-size: 12px;
	position: relative;
	z-index: 1;
}

.double-height .artist-wrap {
	display: block;
	overflow: clip;
}

.double-height .log-ui-item {
	height: 4.4em;
	border-radius: 3px;
}

.double-height .log-col-title, .double-height .log-col-artist {
	overflow: hidden;
	line-height: 2em !important;
}

.double-height .log-col-artist.empty-artist {
	display: none;
}

.double-height .log-col-type-icon {
	font-size: 24px;
	width: 3ch !important;
	vertical-align: middle;
}


.double-height .ui-log-icon.time-icon svg {
	transform: scale(1.3);
	transform-origin: center;
	margin-left: 4px;
}

.double-height .ui-log-icon:not(.time-icon) svg,
.double-height .log-col-type-icon .ui-log-icon svg {
	width: 24px !important;
	height: 24px !important;
}

.double-height td.log-col-type-icon .ui-log-icon:not(.ui-log-locked-icon) {
	display: inline-block;
	line-height: 1;
	position: relative;
	top: -2px;
	vertical-align: middle;
}

.double-height .log-col-hook-icon {
	width: 4ch !important;
	padding-top: 6px;
}

.double-height td.log-col-chain {
	vertical-align: middle;
}

.double-height td.log-col-chain .ui-log-chain-icon {
	display: inline-block;
	font-size: 16pt;
	line-height: 1;
	margin-right: 0;
	margin-top: 2px;
	vertical-align: middle;
}

.log-item-colour-fill {
	position: absolute;
	top: 0px;
	left: 2px;
	height: 100%;
	border-radius: 3px;
	width: 8px;
	background-color: var(--colour);
	box-shadow: inset 1px 1px 1px var(--shadow);
	margin-right: 5px;
	outline: 1px solid var(--windowBar);
	outline-offset: -1px;
	transition: outline 0.1s, outline-offset 0.1s, box-shadow 0.1s, top 0.1s, height 0.1s;
}

/* selected log items give colourfill an outline */
.is-selected .log-item-colour-fill {
	outline: 1px solid #eee;

}

.is-selected .log-item-colour-fill {
	box-shadow: none;
	top: 2px;
	height: calc(100% - 3px);
}

.ui-log-icon-base-container.no-colour-fill {
	padding-left: 9px;
}

.log-ui-type-disabled .log-item-colour-fill {
	opacity: 0;
}

.log-menu-icon-section {
	display: flex;
	width: 348px;
	background : var(--background);
}

.log-menu-icon-section > .ms-Button {
	flex: 0 0 68px;
	height: 60px;
	margin: 2px 0px;
	background : var(--main);
	border: 1px solid var(--background);
	border-radius: 3px;
}

.log-menu-icon-section > .ms-Button > .ms-Button-flexContainer {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}

.log-menu-icon-section > .ms-Button > .ms-Button-flexContainer > .ms-Button-menuIcon {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 -5px;
}

.log-menu-icon-section > .ms-Button > .ms-Button-flexContainer > .ms-Icon {
	padding-bottom: 5px;
}

.log-menu-icon-section > .ms-Button > .ms-Button-flexContainer .ms-layer {
	display: none;
}

.log-menu-icon-section > .ms-Button:not(:hover) > .ms-Button-flexContainer > .ms-Icon {
	color: #fff;
}

.log-menu-icon-section > .ms-Button:hover {
	color: #fff;
	background: var(--windowBar);
}

.advanced-log-contain {
	height: 100%;
	position: relative;
}

.advanced-log .media-list-scrollable {
	position: absolute;
	top: 0;
	left: 0;
	flex: 1;
	width: 100%;
	height: 100%;
}

.log-menu-icon-separator {
	margin: 2px;
	background: var(--main);
	width: 2px;
}

.log-is-loading .log-main-container, .log-loading {
	display: flex;
	flex: 1;
	width: 100%;
}

.log-loading {
	background: var(--background);
	justify-content: center;
	align-items: center;
}

.ui-log-item .ui-log-shimmer-overlay {
	width: 100%;
}

.ui-log-item .log-col-playlength.fit-length {
	width: calc(1ch * var(--w, 9));
}

.frozen-column-resizer {
	position: sticky;
	display: inline-block;
	height: 100%;
	z-index: 1;
}

.frozen-column-resizer-inner {
	position: absolute;
	display: inline-block;
	top: 0;
	height: 100%;
}

.column-selector {
	position: absolute;
	right: 0px;
	bottom: var(--btn-height, 45px);
	height: 0px;
	z-index: 10;
	width: 100%;
	pointer-events: none;
}

/*.column-selector {
	position: sticky;
	right: 0px;
	height: 0px;
}*/

.column-selector-button {
	position: sticky;
	right: 0px;
	float: right;
	width: 24px;
	height: var(--btn-height, 45px);
	line-height: 16px;

	background: var(--main);
	pointer-events: all;
}

.column-selector-button .ms-Icon {
	line-height: 16px;
	font-size: 14px;
	margin: 0;
}

.column-selector-button .ms-Button-menuIcon {
	display: none;
}

.column-selector-box {
	display: flex;
	flex-direction: column;
	overflow: auto;
	max-height: 200px;
	margin: 5px;
	gap: 5px;
	padding: 10px;
	background: var(--background);
}

.clock-container {
	width: 200px;
}

.clock-picker {
	position: relative;
	width: 200px;
	height: 200px;
	margin-bottom: 10px;
}

.clock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 200px;
	overflow: hidden;
}

.clock-seg {
	position: absolute;;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100%;

	background-image: url(/static/media/bb8845e331af6be66735.bb8845e3.svg);
	pointer-events: none;
}

.jump-container {
	display: flex;
	width: 450px;
	padding: 0 10px;
}

.jump-container > div:last-child {
	margin-left: 15px;
}

.go-to-today {
	background: none;
	border: none;
	cursor: pointer;
	margin-right: 20px;
}

.go-to-today:hover {
	color: #369;
}

.ms-DatePicker-day--highlighted {
	background-color: #333 !important;
	color: #FFF !important;
}
.autohook-diagram {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-x: auto;
	flex: 1;
	padding: 5px;
	gap: 2px;

	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;

	width: 550px;
}

.autohook-diagram-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;

	color: #111;
	font-weight: 600;

	width: 64px;
	height: 64px;
	border-radius: 4px;
}

.start-item {
	background-color: #acffb6;
}

.end-item {
	background-color: #ffb6b6;
}

.separator-item {
	background-color: #b6b6ff;
	width: 24px;
}

.hook-item {
	background-color: #ffdbb6;
}

html body.dark .tabbed-settings > .tab-view-contain > .tab-view-content > .tab-view-contents,
html body.dark .ocp-station-content > .tab-view-contain > .tab-view-content > .tab-view-contents {
	background: var(--main);
	border: none;
}

body.dark .settings-expand-collapse-top-row button {
	color: #aaa;
}

body.dark .settings-expand-collapse.collapsed .settings-expand-collapse-top-row button {
	color: #fff;
}

.settings-expand-collapse-setting {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 1 0 100px;
	margin-bottom: 5px;
	margin-top: 5px;
	/* background-color: var(--background); */
}

.unwrapped-settings-expand-collapse-setting {
	display: flex;
	align-items: center;
	flex: 1 0 100px;
	margin-bottom: 8px;
	margin-top: 8px;
}

.settings-expand-collapse-setting > span:first-child {
	margin: 0 4px 0 8px;
}

.settings-body .tab-view-tabbar {
	background: #eee;
}

.tabbed-settings .tab-view-contents .ms-TextField,
.tabbed-settings .tab-view-contents .ms-SpinButton {
	flex: 0;
	flex-basis: 120px;
}

.settings-block-group {
	margin-left: 32px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.settings-block-group > * {
	margin-right: 16px;
}

.settings-modal .tabbed-settings .tab-view-contents > .settings-group-page {
	overflow: auto;
}

.tab-view-contents > .settings-group-page {
	min-height: 100%;
}

.contact-list-abs > .tabbed-settings {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 5px 0px 0px 5px;
}

.settings-in-dialog .tabbed-settings {
	padding: 0;
	margin: 0px 0px 0px 0px;
}

.settings-in-dialog .contact-list-abs {
	padding: 5px 0px 0px 5px;
}

html body.dark .contact-list-abs > .tabbed-settings > .tab-view-contain > .tab-view-tabbar {
	position: relative;
	z-index: 99999;
	height: 32px !important;
	background: none;
}

.contact-list-abs > .tabbed-settings > .tab-view-contain {
	position: relative;
	flex: 1;
}

.contact-list-abs > .tabbed-settings > .tab-view-contain > .tab-view-content {
	position: relative;
}

.contact-list .tabbed-settings .ms-DetailsList-headerWrapper {
	top: 0px;
	margin-top: 0px;
}

.tabbed-settings
	.ms-DetailsList
	.ms-Button--icon:not(.ms-UpButton):not(.ms-DownButton):not(.std-btn) {
	height: 32px;
	margin-left: 3px;
}

.contact-list-abs > .tabbed-settings > .tab-view-contain > .tab-view-content > .tab-view-contents {
	position: absolute;
	overflow: auto;
	top: 0;
	left: 0;
	width: calc(100% - 5px);
	height: calc(100% - 5px);
}

.icon-big-colour-label {
	padding: 0 10px;
	box-shadow: inset 2px 2px 2px var(--shadow);
}

.tabbed-settings.database-settings .icon-big-colour-label {
	padding: 0 10px;
	display: block;
	height: 21px;
	border-radius: 2px;
	width: 35px;
}

.item-type-preview-col {
	padding: 3px 10px;
	display: block;
	text-align: center;
	border-radius: 2px;
}

.tabbed-settings .ms-TextField-fieldGroup,
.tabbed-settings .ms-Dropdown-title,
.tabbed-settings .ms-ComboBox,
.tabbed-settings .ms-SpinButton > div {
	height: 32px;
	line-height: 22px;
}

.tabbed-settings .ms-Dropdown-caretDownWrapper {
	height: 26px !important;
	line-height: 26px !important;
}

.tabbed-settings .ms-Label {
	padding-top: 0;
	padding-bottom: 0;
}

.tabbed-settings .ms-TextField-fieldGroup input {
	padding-left: 5px;
	background: var(--background);
}

.tabbed-settings .ms-Button:not(.ms-UpButton):not(.ms-DownButton):not(.std-btn) {
	height: 32px;
}

.settings-expand-collapse-setting > .settings-expand-collapse-setting {
	margin-top: 0;
	margin-bottom: 0;
}

.ms-Checkbox + .settings-expand-collapse-setting {
	margin-left: 8px;
}

.options-option.has-icon i {
	width: 1em;
	height: 1em;
}

.options-option.has-icon {
	display: flex;
}

.settings-expand-collapse-top-row .ms-Checkbox-text {
	font-weight: bold;
}

.settings-expand-collapse-top-row .ms-Checkbox {
	position: relative;
	top: 3px;
}

.choice-group-child-group {
	margin-left: 32px;
}

.ms-Dropdown-container + .tabbed-settings.database-settings {
	height: calc(100% - 64px);
}

.database-settings .delete-btn {
	aspect-ratio: 1/1;
}

.multi-text-field-wrap {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
}

.multi-text-field-wrap .text-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.multi-text-field-wrap .text-wrap .ms-TextField {
	margin-right: 5px;
	flex: 1;
}

.database-settings .flex-100p {
	flex-basis: 100%;
}

.map-container {
	height: 80vh;
	max-height: 400px;
	position: relative;
}

.map-container .map-frame {
	position: absolute;
	top: 0;
	left: 0;
	border: none;
	width: 100%;
	height: 100%;
}

.search-items-grid {
	display: grid;
	grid-auto-flow: row dense;
	grid-gap: 0 15px;
	margin: 0;
}

.search-items-grid .settings-expand-collapse-setting > div:not(:empty) {
	flex: 1 1 100px;
}

.search-items-pair .settings-expand-collapse-setting:nth-child(2) > div,
.search-items-pair.settings-group-pair .settings-expand-collapse-setting > div {
	flex: 1 1 100px;
}

.search-items-pair {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-top: 2px;
}

.search-items-pair:not(.settings-group-pair) > div:first-child {
	flex: 0 0 105px;
}

.search-items-pair .settings-expand-collapse-setting,
.search-items-pair .unwrapped-settings-expand-collapse-setting {
	margin-top: 0px;
	margin-bottom: 0px;
}

.search-items-pair > .settings-expand-collapse-setting > .settings-expand-collapse {
	margin: 0;
}

.search-items-pair
	> .settings-expand-collapse-setting
	> .settings-expand-collapse
	.choice-group-horizontal
	.ms-ChoiceField {
	margin-top: 0px;
}

.settings-group-page.wide-first .search-items-pair:not(.settings-group-pair) > div:first-child {
	flex-basis: 250px;
}

.settings-group-page.mid-first .search-items-pair:not(.settings-group-pair) > div:first-child {
	flex-basis: 170px;
}

.search-items-pair .unwrapped-settings-expand-collapse-setting,
.unwrapped-settings-expand-collapse-setting .settings-expand-collapse-setting {
	flex-basis: 40px;
}

.unwrapped-settings-expand-collapse-setting .settings-expand-collapse-setting {
	width: 100px;
	flex-wrap: nowrap;
}

.unwrapped-settings-expand-collapse-setting > .settings-expand-collapse-setting {
	margin-top: 0px;
}

.settings-expand-collapse-setting.no-wrap {
	flex-wrap: nowrap;
}

.search-items-pair
	.unwrapped-settings-expand-collapse-setting
	.settings-expand-collapse-setting:nth-child(2)
	> div {
	flex-basis: 50px;
	min-width: 0px;
}

.search-items-pair
	.unwrapped-settings-expand-collapse-setting
	.settings-expand-collapse-setting:nth-child(2)
	.ms-SpinButton
	> div {
	min-width: 0px;
}

.search-items-pair
	.unwrapped-settings-expand-collapse-setting
	.settings-expand-collapse-setting:nth-child(2)
	.ms-SpinButton
	> div
	input:not(.br-SpinButton-input) {
	min-width: 32px;
}

.settings-expand-collapse-setting.flex-wrap .settings-expand-collapse-setting > div {
	flex: 1;
}

.library-search-controls .settings-group-page {
	overflow: auto !important;
	padding: 2px 10px;
	box-sizing: border-box;
	font-size: 10pt;
}

.library-search-controls .ms-Checkbox-text,
.library-search-controls .settings-expand-collapse-setting > span,
.library-search-controls .ms-ChoiceFieldLabel,
.library-search-controls .ms-Dropdown-title,
.library-search-controls .ms-TextField-field {
	font-size: 12px;
}

.tabbed-settings .ms-Dropdown-title,
.tabbed-settings .ms-TextField-field,
.tabbed-settings .ms-TextField-prefix,
.tabbed-settings .ms-TextField-suffix,
.tabbed-settings .ms-spinButton-input {
	font-size: 12px !important;
}

.choice-group-horizontal .ms-ChoiceFieldGroup-flexContainer {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.choice-group-horizontal .ms-ChoiceFieldGroup-flexContainer .ms-ChoiceField {
	margin-right: 15px;
}

.choice-group-horizontal .ms-ChoiceField-wrapper {
	display: flex;
	align-items: center;
}

.settings-expand-collapse-setting.flex-wrap > span:empty {
	display: none;
}

.tabbed-settings .ms-Dropdown-title-input {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: none;
	outline: none;
	color: currentColor;
	height: 100%;
	width: 100%;
	font-size: 12px;
	font-family: inherit;
	text-overflow: ellipsis;
}

.importer-group-edit .search-items-pair > div:first-child {
	flex-basis: 270px;
}

.search-items-flex {
	flex: 1;
	display: flex;
	align-items: center;
}

.search-items-flex > .settings-expand-collapse-setting {
	flex-grow: 0;
	white-space: nowrap;
	flex-basis: 0px;
}

.choose-attribute.library-left-tab {
	width: auto !important;
	max-height: calc(100vh - 160px);
	min-width: 400px;
	overflow-y: auto;
}

.attribute-selector {
	display: flex;
	gap: 10px;
}

.attribute-selector-side {
	flex-basis: 50px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.attribute-selector .ms-Viewport {
	flex: 1;
}

.basic-group .settings-group-page .search-items-pair + .search-items-pair > div:first-child {
	flex: 1;
}

.settings-group-page .ms-Toggle {
	margin-bottom: 0;
}

.basic-group .settings-group-page {
	border: none;
	padding: 2px 0px;
	margin: 5px 10px 0px 10px;
}

.basic-group
	.settings-group-page
	.search-items-pair:first-of-type
	.settings-expand-collapse-setting {
	margin-top: 0;
	margin-bottom: 8px;
}

.contact-edit-footer {
	display: flex;
	justify-content: flex-end;
	margin: 10px;
}

.contact-edit-footer > * {
	margin-left: 10px;
}

.contact-edit-range-group {
	display: flex;
	align-items: center;
	gap: 5px;
}

.contact-edit-button-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.attribute-list-contain {
	display: flex;
	flex-direction: column;
	margin: 0px 8px 8px;
	height: calc(100% - 20px);
}

.attribute-list-contain .ms-Viewport {
	flex: 1;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: var(--background);
}

.attribute-list-contain .ms-Viewport .ms-DetailsList {
	position: absolute;
}

.attribute-list-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 5px;
}

.choice-group-stack {
	flex-direction: column;
	align-items: stretch;
	margin-left: 8px;
}

.choice-group-stack > * {
	flex: unset !important;
}

.mass-changer .search-items-pair {
	align-items: center;
}

.choice-group-stack .settings-expand-collapse,
.choice-group-stack .ms-ChoiceField {
	margin-top: 0px;
}

.choice-group-stack .ms-ChoiceField {
	flex: 1;
}

.settings-expand-collapse-setting .edit-item-notes-container {
	width: 100%;
}

.ocp-station {
	padding: 10px;
	display: flex;
	flex: 1;
	flex-direction: column;
}

.ocp-station-content {
	flex: 1;
	position: relative;
	margin-top: 2px;
}

.ocp-station-content > .tab-view-contain {
	position: absolute;
	top: 5px;
	left: 0;
	border-radius: 4px;
	width: calc(100% - 10px);
	height: calc(100% - 15px);
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	padding: 5px;
}

.ocp-text-editor {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: calc(100% - 100px);
}

.ocp-text-editor .preview-string {
	display: flex;
	flex: 1 1 100px;
	flex-direction: column;
}

.ocp-text-editor .preview-string .preview-toolbar {
	display: flex;
	gap: 10px;
	margin-top: 5px;
	justify-content: flex-end;
}

.setting-fieldset-group {
	background: var(--background);
	margin: 20px 5px 5px;
	border: 1px solid var(--tabActive);
	border-radius: 4px;
	padding: 0 8px 8px;
	margin-bottom: 5px;
}

.setting-fieldset-group > label:first-child {
	display: block;
	width: fit-content;
	margin-top: -12px;
	background: var(--background);
	padding: 0 5px;
}

.setting-fieldset-group > .settings-expand-collapse-setting:last-of-type {
	margin-bottom: 0;
}

.ocp-output-settings > .settings-group-page:first-child > .settings-expand-collapse-setting:first-child {
	background: var(--tabActive);
	margin-top: 0;
	margin-right: 5px;
	border-radius: 5px;
	padding: 10px 10px 10px 0px;
}

.ocp-output-settings .settings-expand-collapse > .settings-expand-collapse-content:first-child {
	margin-left: unset;
}

.ocp-output-settings .MuiAccordionDetails-root > .settings-expand-collapse-setting {
	height: 32px;
}

.ocp-output-settings .large-title-text .ms-TextField-fieldGroup {
	height: 38px !important;
}

.ocp-output-settings .large-title-text input {
	font-size: 14px !important;
	line-height: 26px !important;
}

.ocp-output-settings .MuiAccordionDetails-root > .settings-expand-collapse-setting > .settings-expand-collapse-setting > .ms-SpinButton {
	flex: 0 0 100px;
}

.setting-plain-group {
	margin: 10px;
}

.setting-plain-group > .settings-expand-collapse-setting > div {
	flex: 1;
}

.setting-plain-group > .settings-expand-collapse-setting > div .ms-Viewport {
	flex: 1;
}

.ocp-text-editor .preview-string textarea {
	font-size: 10pt;
	resize: none;
	flex: 1;
}

.ocp-text-editor-content {
	flex: 1 1 66%;
	position: relative;
}

.settings-in-dialog .contact-list-main {
	width: 100%;
	height: 100%;
}

.settings-in-dialog .format-string-creator {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
}

.settings-in-dialog .format-string-creator + .ms-Toggle {

}

.format-string-creator-nav {
	flex-basis: 200px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.format-string-creator-nav .ms-FocusZone {
	position: relative;
	flex: 1;
}

.format-string-creator-nav .tab-view-contain > .ms-FocusZone {
	flex: 0;
}

.format-string-creator-nav .tab-view-contain > .ms-FocusZone > button {
	min-width: fit-content;
}

.format-string-creator-nav.modern-script-nav {
	flex-basis: 250px;
}

.format-string-creator-nav .ms-FocusZone .ms-Nav {
	flex: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	padding-top: 0px !important;
}

.format-string-creator-editor {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 0 0 10px;
}

.format-string-creator-editor textarea {
	width: 100%;
	flex: 1;
	resize: none;
	font-size: 10pt;
	padding: 5px;
	box-sizing: border-box;
	color: currentColor;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.multi-text-field-wrap-side {
	display: flex;
	flex: 1;
}

.multi-text-field-wrap-sidebar {
	margin-left: 10px;
	margin-right: 10px;
}

.multi-text-field-wrap-sidebar.sidebar-horizontal-buttons {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.multi-text-field-wrap-sidebar.sidebar-horizontal-buttons button {
	width: auto;
}

.multi-text-field-wrap-side .multi-text-field-wrap {
	flex: 1;
}

.media-range-contain {
	height: 100%;
	overflow: hidden;
}

.small-spin-button {
	width: auto !important;
	min-width: 70px !important;
	flex-basis: 70px !important;
}

.small-spin-button > div {
	min-width: 70px !important;
}

.small-spin-button > div > input {
	min-width: 45px;
	max-width: 45px;
	width: auto !important;
}

.tiny-spin-button {
	width: auto !important;
	min-width: 50px !important;
	flex-basis: 50px !important;
}

.tiny-spin-button > div {
	min-width: 50px !important;
}

.tiny-spin-button > div > input {
	min-width: 30px;
	max-width: 30px;
	width: auto !important;
}

.ocp-station-outputs {
	display: flex;
	flex: 1;
}

.ocp-station-output-logs {
	flex-direction: column;
}

.ocp-station-outputs-list {
	flex: 1;
	position: relative;
	margin: 5px;
	border-radius: 4px;
	background: var(--background);
}

.ocp-station-outputs-list .ms-DetailsList-headerWrapper {
	top: 0px !important;
}

.ocp-station-outputs-list .ocp-station-list-container {
	position: absolute;
	overflow: auto;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.ocp-station-outputs-list .ms-DetailsRow-cell:last-of-type {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.ocp-station-outputs-list-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
}

.ocp-station-outputs-side {
	display: flex;
	flex-direction: column;
	margin: 5px 10px 5px 5px;
}

.ocp-choice-group {
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: calc(90vh - 150px);
}

.ocp-choice-group .ms-ChoiceField-innerField {
	margin-top: 5px !important;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border-radius: 3px;
}

.ocp-choice-group .ms-ChoiceField-innerField img {
	user-select: none;
	-webkit-user-drag: none;
}

.ocp-choice-group .ms-ChoiceField-field {
	width: 470px;
	height: 80px;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	padding-top: 0px;
}

.ms-ChoiceFieldGroup-flexContainer {
	justify-content: center;
}

.ocp-choice-group .ms-ChoiceField-labelWrapper {
	font-size: 14px;
	max-width: 400px;
	padding-left: 2px;
	display: flex;
	align-items: center;
}

.ocp-choice-group .ms-ChoiceField-field {
	display: flex;
	border-radius: 2px;
	flex-direction: column;
}

.ocp-choice-group .ms-ChoiceField-field::before, .ocp-choice-group .ms-ChoiceField-field::after {
	display: none;
}

.ocp-info-divider {
	width: 100%;
	height: 10px;
}

.waveform-player-outer {
	display: flex;
	flex: 0 0 100px;
	flex-direction: row;
	align-items: stretch;
	gap: 5px;
	margin: 4px;
}

.resizable-window > .waveform-player-outer {
	height: calc(100% - 42px);;
}

.waveform-player-inner {
	min-height: 76px;
	width: 100%;
	display: flex;
	border: 1px solid grey;
	position: relative;
}

.waveform-player-playhead-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.waveform-player-playhead {
	width: 1px;
	height: 100%;
	background: var(--go);
	position: absolute;
	top: 0;
	left: calc(var(--p) * 100%);
}

.waveform-player-button-group {
	display: flex;
	align-items: center;
	flex-direction: column-reverse;
	justify-content: space-between;
}

.settings-expand-collapse-setting .ms-TextField--multiline {
	flex: 1;
}

.std-btn.delete-btn.ms-Button--hasMenu {
	width: auto;
}

.std-btn.delete-btn.ms-Button--hasMenu .ms-Button-menuIcon {
	background: none;
}

.settings-expand-collapse-setting > .ms-Dropdown-container + .settings-expand-collapse-setting,
.settings-expand-collapse-setting > .ms-SpinButton + .settings-expand-collapse-setting {
	margin-left: 5px;
}

.hidden-input {
	display: none;
}

.ms-Dropdown-items > div > .ms-Dropdown-header {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f0f0f0;
}

body.dark .ms-Dropdown-items > div > .ms-Dropdown-header {
	background-color: #1a1a1a;
}

.audio-format-field {
	min-width: 300px;
	max-width: 350px;
	display: 'flex';
	flex: 1;
	user-select: none;
}

.icon-button,
.icon-button-large {
	background-color: var(--main);
	border: 1px solid var(--textDisabled);
	border-radius: 3px !important;
	color: var(--text);
	min-width: 32px;
	min-height: 32px;
	max-height: 32px;
	width: fit-content;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-button:not(.menu) .ms-Button-menuIcon {
	display: none;
}

.icon-button-large {
	min-width: 64px;
	min-height: 64px;
	max-height: 64px;
}

.icon-button.setup-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 240px;
	min-height: 130px;
	padding: 10px;
	margin: 30px;
}

.icon-button.setup-button span {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
}

.icon-button-large-inner {
	display: flex;
	flex-direction: column;
}

.icon-button:hover:not(.is-disabled),
.icon-button-large:hover:not(.is-disabled) {
	background-color: var(--mainHover);
}

.icon-button.is-disabled,
.icon-button-large.is-disabled {
	filter: opacity(35%);
	border: 1px solid #999;
	cursor: default;
}

.ms-Stack {
	align-items: center;
}

.large-settings-dialog {
	position: relative;
	width: 830px;
	max-height: calc(100vh - 180px);
	height: 90vh;
	margin-left: -10px;
	margin-right: -10px;
}

.std-btn.command-btn {
	display: flex;
	margin: 5px;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	min-width: 60px;
}

.std-btn.command-btn > i {
	margin: 0 5px;
}

.settings-dropdown,
.settings-spinner {
	width: 200px;
	max-width: 200px;
}

.window-modal .contact-list {
	width: 1250px;
	max-width: 100%;
	height: calc(100vh - 48px);
	max-height: 100%;
}

.resizable-window .tabbed-settings.database-settings,
.window-modal .tabbed-settings.database-settings {
	box-sizing: border-box;
}

.importer-group-edit {
	/* This stinks, but it fixes a thing with contact-list-abs */
	height: calc(100% - 9px) !important;
}

.media-item-type-dropdown .ms-Dropdown {
	width: 100px;
}

.media-item-normalisation-dropdown .ms-Dropdown {
	width: 150px;
}

.attribute-description {
	flex-basis: 100% !important;
}

.mass-changer {
	margin: 5px;
}

.mass-change-bound-item-checkbox {
	margin-right: 45px;
}

.mass-change-bound-item {
	margin-right: 10px;
}

/* Station List Styles */
.station-list-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	height: 80px;
	background: var(--main);
	border-radius: 4px;
	margin: 5px;
	gap: 20px;
}

.station-list-logo-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	flex-direction: column;
}

.station-list-logo {
	width: 50px;
	height: 50px;
	background: var(--tabActive);
	border-radius: 4px;
}

.station-list-logo-placeholder {
	font-size: 40px;
	color: #e9e9e9;
	width: 50px;
	height: 50px;
	background: var(--tabActive);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.station-list-id-container {
	margin-top: 5px;
}

.station-list-id-label {
	color: var(--textDisabled);
}

.station-list-info-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
}

.station-list-header {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	gap: 10px;
}

.station-list-name {
	font-size: 16px;
	font-weight: bold;
	color: var(--text);
}

.station-list-tagline {
	font-size: 14px;
	color: var(--textDisabled);
}

.station-list-type-container {
	font-size: 14px;
	color: var(--textDisabled);
	width: 100%;
}

.station-list-features-container {
	font-size: 14px;
	color: var(--textDisabled);
	width: 100%;
}

.station-list-settings-container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-direction: column;
	gap: 5px;
	height: 100%;
}

.settings-group-item-types {
	display: flex;
	flex-direction: column;
}

.settings-group-item-types > div:first-child {
	flex: 1;
	width: 100%;
	position: relative;
}

.settings-group-item-types .item-types-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}


.station-settings-dropbox-auth {
	display: flex;
}

.station-settings-dropbox-auth > .search-items-pair {
	flex: 1;
}

.station-settings-dropbox-auth > .search-items-pair > .settings-expand-collapse-setting:first-child {
	flex: 1;
}

.station-settings-dropbox-auth > .search-items-pair > .settings-expand-collapse-setting:last-child {
	flex: 0;
	margin-right: 10px;
}

.station-settings-dropbox-auth > .settings-expand-collapse-setting {
	flex: 0 0 350px;
}

.settings-group-import-export {
	display: flex;
	flex-direction: column;
}

.settings-group-import-export > .settings-expand-collapse:nth-child(2) {
	flex: 1;
	min-height: 250px;
	display: flex;
	flex-direction: column;
}

.settings-group-import-export > .settings-expand-collapse:nth-child(2) > .settings-expand-collapse-content {
	flex: 1;
	position: relative;
}

.settings-group-import-export > .settings-expand-collapse:nth-child(2) > .settings-expand-collapse-content > .settings-expand-collapse-setting {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.settings-group-import-export > .settings-expand-collapse:nth-child(2) > .settings-expand-collapse-content .multi-text-field-wrap-sidebar {
	height: 100px;
	position: sticky;
	top: 0;
}

.setting-requires-pro {
	display: flex;
	align-items: center;
	gap: 10px;
}

.attribute-list-contain .ms-DetailsRow-cell,
.custom-copyright-list .ms-DetailsRow-cell,
.split-group-list .ms-DetailsRow-cell {
	padding: 4px 4px !important;
}

.myr-user-settings .settings-expand-collapse-setting > span:first-child {
	flex-basis: 100%;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 5px;
	margin-left: 16px;
}

.myr-user-settings .settings-expand-collapse-setting > .ms-SpinButton {
	width: unset;
	max-width: 100px;
	margin-left: 16px;
	flex: 1;
}

.myr-user-settings .settings-expand-collapse-setting > p {
	margin: 0;
}

.contact-list .tabbed-settings .attribute-list-contain .ms-DetailsList-headerWrapper {
	margin-top: 0px;
}

.attribute-list-contain .attribute-table-field {
	display: block;
	margin-left: 8px;
	margin-top: 8px;
}

.attribute-list-contain .attribute-description {
	margin-top: 4px;
}


.ocp-script-editor {
	border: none;
	width: 100%;
	height: 100%;
}
.library-search-controls {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding-bottom: 5px;
}

.library-search-controls > *:first-child {
	flex: 1;
}

.advanced-search-button-container {
	height: calc(100% - 10px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.library-pane-container {
	display: flex;
	flex-direction: row;
	flex: 1;
	overflow-y: hidden;
	padding-bottom: 10px;
}

.library-list-scrollable {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: 1;
	height: 100%;
	overflow-y: scroll !important;
	overflow-x: scroll !important;
	flex: 1;
	background-color: var(--backgroundDarker);
}

.library-list-scrollable > div:first-child {
	flex: 1;
}

.media-list .library-list-scrollable .ms-DetailsRow-cell {
	padding: 6px 0 6px 12px !important;
}

.br-popover-dialog {
	min-width: 250px;
	padding: 10px;
}

.library-left-tab {
	flex-basis: 200px;
	width: 200px;
	overflow-x: hidden;
}

.library-left-tab .ms-Icon:not(:empty) {
	margin-left: 23px;
	margin-right: 0px;
	max-width: 16px;
}


.br-has-icon {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.library-left-tab .ms-Nav-LinkText {
	margin-left: 15px;
}

.library-left-tab button.ms-Nav-link {
	height: 2em;
	border-radius: 0;
}

.library-left-tab .ms-Nav-navItem .ms-Nav-compositeLink button {
	height: 2em;
	border-radius: 0;
}

.library-left-tab .ms-Nav-navItem .ms-Nav-compositeLink button i {
	height: 2em;
	line-height: 2em;
}

.search-row {
	display: flex;
	align-items: center;
	margin-bottom: 2px;
}

.search-row .ms-TextField, .search-row .ms-Dropdown-container {
	flex: 1;
}

.search-container {
	display: flex;
}

.search-column {
	flex: 1;
	margin-right: 10px;
}

.library-left-tab > div > nav > .ms-Nav-group > div {
	margin: 5px 0;
}

.library-left-tab > div > nav > .ms-Nav-group > div > ul {
	padding: 0;
	margin-bottom: 0;
}

.library-pane-container .media-list-scrollable {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

.library-pane-container .media-list-scrollable .ms-DetailsHeader {
	padding-top: 2px;
}

.library-pane-container .ms-DetailsList {
	overflow: unset !important;
}

.search-message-bar {
	background-color: var(--background);
}

.search-message-bar .ms-MessageBar-content{
	box-shadow: inset 2px 2px 2px var(--shadow);
}

.search-message-bar div {
	background-color: var(--background);
	color: var(--text);
}

.library-search-chev-button {
    outline: transparent none medium;
    position: relative;
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    font-weight: 400;
    display: block;
    text-align: left;
    line-height: 44px;
    margin: 5px 0px;
    padding-left: 38px;
    border-color: currentcolor currentcolor rgb(237, 235, 233);
    border-style: none none solid;
    border-width: medium medium 1px;
    border-image: none 100% / 1 / 0 stretch;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    color: rgb(50, 49, 48);
    background-color: transparent;
    width: 100%;
    height: 44px;
}

.library-search-chev-icon {
    display: inline-block;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: normal;
    font-family: "FabricMDL2Icons";
    position: absolute;
    left: 8px;
    height: 44px;
    line-height: 44px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    transition: transform 0.1s linear 0s;
}

.is-expanded .library-search-chev-icon {
    transform: rotate(-180deg);
}

.library-container + .ms-Dialog-actions i {
	width: 16px;
}

.library-left-tab .ms-Nav-chevronButton {
	background-color: transparent;
}

.library-left-tab .ms-Nav-chevronButton::after {
	border: none !important;
}

.info-dialog-main-body {
	flex: 1;
	position: relative;
	display: flex;

	overflow: auto;
}

.info-dialog-main-body .script-container {
	margin-bottom: 10px;
}

.timing-container {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.popup-layer .library-container {
	max-height: calc(100% - 110px);
}

.library-left-tab.collapsed {
	width: 32px !important;
	flex-basis: 32px !important;
	position: relative;
}

.library-left-tab.collapsed:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
}

.library-left-tab.collapsed:hover:before {
	opacity: 1;
}

.library-left-tab.collapsed:after {
	content: attr(data-current-category);
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	white-space: nowrap;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
}

.library-left-tab.collapsed .ms-FocusZone {
	display: none;
}

.library-list-scrollable .ms-DetailsList-headerWrapper {
	position: sticky;
	top: 0;
	z-index: 2;
}

.media-deck .library-search-controls {
	padding: 10px;
}

.media-deck .library-list-scrollable {
	border: none;
}

.library-search-controls > .contact-list-main .contact-list-abs {
	position: static;
	overflow: visible;
	height: 235px;
}

.library-search-controls > .contact-list-main >  .contact-list-abs > .tabbed-settings {
	height: calc(100% - 10px);
	width: calc(100% - 10px);
}

.library-search-controls > .contact-list-main >  .contact-list-abs > .tabbed-settings .tab-view-tabbar {
	background-color: transparent !important;
}

.library-search-controls .search-items-pair .flex-one {
	margin-top: 4px;
	flex: 1 !important;
}

.library-left-tab-station-select {
	margin: 5px 5px 0 0;
}

.library-list-scrollable .ms-DetailsList {
	min-height: 100%;
	display: flex;
}

.library-list-scrollable .ms-DetailsList > div[role=grid] {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.library-list-scrollable .ms-DetailsList .ms-DetailsList-contentWrapper,
.library-list-scrollable .ms-DetailsList .ms-DetailsList-contentWrapper .ms-SelectionZone,
.library-list-scrollable .ms-DetailsList .ms-DetailsList-contentWrapper .ms-FocusZone {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.library-list-scrollable .ms-DetailsList .ms-List {
	flex: 1;
}


/* Settings overrides */
.library-search-controls .settings-expand-collapse-content {
	margin-left: 15px;
	margin-bottom: 0px;
}

.library-search-controls .ms-ChoiceField {
	margin: 0px 5px 0px 0px !important;
}

.library-search-controls .choice-group-child-group {
	margin-left: 10px;
}
.contact-edit-contain {
	height: 100%;
	width: 100%;
	border-radius: 2px;
	overflow: auto;
}

.contact-edit-header-section .contact-edit-contain {
	display: flex;
}

.contact-edit-group, .contact-edit-head {
	margin: 0px 20px;
	width: calc(100% - 20px);
	table-layout: fixed;
	box-sizing: border-box;
	font-size: 14px;
	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
	-moz-osx-font-smoothing: grayscale;
	color: rgb(32, 31, 30);
}

.contact-edit-head {
	flex: 1;
}

.contact-edit-image {
	flex: 0 0 120px;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	align-items: center;
	gap: 5px;
	justify-content: flex-start;
}

.contact-edit-head tr:first-child td:first-child, .contact-edit-head tr:first-child td:nth-child(3) {
	width: 150px;
}

.contact-edit-head tr td:nth-child(3) {
	padding-left: 10px;
}

.contact-edit-group .ms-Checkbox {
	margin-top: 10px;
}

.contact-edit-fieldgroup .contact-edit-fieldgroup .ms-Checkbox {
	margin-top: 5px;
}

body.dark .contact-edit-group, body.dark .contact-edit-head {
	color: #FFF;
}

.contact-edit-group tr:first-child td:first-child {
	width: 38px;
	vertical-align: top;
	padding-top: 10px;
	font-size: 32px;
}

.contact-edit-group tr:first-child td:first-child:last-child {
	padding-top: 0px;
}

.contact-edit-group tr:first-child td:nth-child(2) {
	width: 150px;
}

.contact-edit-fieldgroup {
	position: relative;
	margin:  10px 10px;
	padding: 0px 0px 3px 0px;
	border-radius: 5px;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	
}

.contact-edit-fieldgroup > label:first-child {
	/* position: absolute; */
	font-weight: bold;
	padding:  6px 12px 0px 12px;
}

.contact-edit-fieldgroup .contact-edit-group > tr:first-child > td:first-child {
	width: 16px;
}

.inner-fieldgroup{
	background-color: var(--backgroundDark) !important;
}


.contact-list .ms-DetailsList-headerWrapper {
	position: sticky;
	top: 32px;
	z-index: 2;
}

.contact-list .ms-DetailsHeader {
	padding-top: 0;
}

.contact-list .ms-DetailsList {
	overflow: initial !important;
}

.allowed-station-hours.log-history-table-main {
	min-height: 200px;
	min-width: 600px;
}

.allowed-station-hours .log-history-table-container {
	font-size: 7pt;
}


.contact-edit-contain .std-btn:disabled {
	pointer-events: none;
	opacity: 0.7;
}

.allowed-station-hours .log-history-table-head tr:first-child td:first-child {
	width: 60px;
}

.contact-edit-head-field-group {
	display: flex;
	gap: 5px;
}

.contact-edit-head-field-group .ms-TextField {
	flex: 1;
}

.contact-edit-head-button-group {
	flex: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
}

.contact-list-search {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 3;
}

.contact-list-search .ms-TextField {
	flex: 1;
	padding-top: 0;
}

.contact-list-search .ms-TextField-wrapper {
	margin: 0 !important;
}

.contact-warning {
	background-color: var(--background);

	display: flex;
	flex-direction: row;
	width: 100%;
	height: 32px;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

.library-deck-view .ms-List-page:first-child .ms-List-cell:first-child .ms-DetailsRow {
	margin-top: 3px;
}

.library-deck-view.is-ordered {
	background: rgba(50, 255, 0, 0.1);
}

.media-deck .library-search-controls .std-btn {
	align-self: flex-end;
	height: 32px;
	width: 32px;
	margin-left: 5px;
	margin-bottom: 0;
}

.deck-shuffle-kicks {
	background-color: var(--background);
	padding: 5px;
}

.deck-shuffle-kicks .log-history-table-main {
	margin: 0;
	background-color: var(--tab);
}

.library-deck-split-view {
	display: flex;
	align-items: center;
	flex: 1;
}

.library-deck-split-view-deck {
	position: relative;
	align-self: stretch;
	flex: 1;
	margin: 5px 0;
	box-sizing: border-box;
	max-width: 100%;
}

.library-deck-split-view-deck:not(:last-of-type) {
	border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.library-list-scrollable.library-deck-view > .ms-Viewport {
	flex: unset;
}

.deck-view-general-drop-target {
	flex: 1;
	background: transparent;
}
.item-history-outer {
	background-color: var(--background);
	height: 100%;
	margin: 5px;
}

.item-history-outer.in-window {
	height: calc(100% - 10px);
}

.item-history-filter-group {
	display: flex;
	flex-direction: column;
	padding: 10px;
	gap: 10px;
}

.item-history-filter-field-group {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.item-history-filter-field-group .ms-Button--default {
	width: 100%;
}

.item-history-filter-field,
.item-history-filter-field div {
	width: 200px;
}

.item-history-table {
	display: flex;
	flex: 1;
}

.item-history-date-header {
	width: 100px;
	height: 30px;
}

.item-history-container {
	height: calc(100% - 120px);
	overflow: auto;
}

.item-history-header {
	position: sticky;
	top: 0;
	background-color: var(--tab);
}

.item-history-hour-cell.current-hour-cell {
	background-color: goldenrod;
	color: #111;
	border-radius: 3px;
}

.artist-dialog-pane {
	position: relative;
	min-height: 400px;
}

.artist-dialog-search {
	margin-top: 16px;
}

.smart-info-contain {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--tabActive);
	margin: 0 1px 4px 0;
}

.smart-info-title-box {
	height: 100px;
	max-height: 128px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	display: flex;
}

.smart-info-title-box.pinned {
	background: var(--windowBar);
}

.smart-info-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 100%;
}

.smart-info-art + .smart-info-meta {
	width: calc(100% - 140px);
}

.smart-info-art {
	flex-shrink: 0;
	height: 90px;
	box-sizing: border-box;
	margin-left: 10px;
	margin-top: 10px;
	border-radius: 4px;
	overflow: hidden;
}

.smart-info-art > * {
	max-height: 100%;
}


.smart-info-art img, .smart-info-art svg {
	height: 100%;
	object-fit: contain;
}

.smart-info-meta {
	padding-left: 0.65em;
	font-size: 16pt;
}

.smart-info-title {
	font-size: 26pt;
	display: flex;
}

.smart-info-title-inner {
	flex: 1;
}

.smart-info-title-inner, .smart-info-artist {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.smart-info-main {
	flex: 1;
	display: flex;
}

.smart-info-main > div {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.smart-info-main > div > div + div {
	flex: 1;
	display: flex;
}

.smart-info-main > div > div + div > div {
	flex: 1;
	display: flex;
}

.smart-info-main .script-container, .info-dialog-main-body .script-container {
	height: unset;
	min-height: unset;
	flex: 1;
}

.smart-info-main .html-preview, .info-dialog-main-body .html-preview,
.info-dialog-main-body .script-container, .smart-info-main .script-container {
	height: 100%;
	height: calc(100% - 14px);
	width: calc(100% - 10px);
	border: none;
	box-shadow: inset 2px 2px 2px var(--shadow);
	background-color: var(--background);
	border-radius: 4px;
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
}

.smart-info-main .title-bar + .script-container {
	top: 40px;
	height: calc(100% - 49px);
}

.smart-info-main .title-bar + .script-container.full-height {
	top: 0px;
	height: calc(100% - 14px);
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
}

.smart-info-main .script-container, .info-dialog-main-body .script-container {
	padding: 0;
	box-sizing: content-box;
}

.smart-info-main .script-container textarea, .info-dialog-main-body .script-container textarea {
	border: none;
	margin-top: 0 !important;
}

.smart-info-main .travel_container, .info-dialog-main-body .travel_container {
	overflow-y: scroll;
	height: 100%;
	height: calc(100% - 14px);
	width: calc(100% - 14px);
	background: var(--background);
	border: 2px solid rgba(0, 0, 0, 0.3);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
}



.media-browser .SplitPane .Pane2 > div {
	height: 100%;
}

.smart-info-title-box.title-mini {
	max-height: 48px !important;
	max-width: 48px;
}

.smart-info-title-box.title-mini .smart-info-title {
	font-size: 14pt;
}
.smart-info-title-box.title-mini .smart-info-artist {
	font-size: 11pt;
}


.timeline-preview {
	height: 100%;
	height: calc(100% - 14px);
	width: calc(100% - 10px);
	box-shadow: inset 2px 2px 2px var(--shadow);
	background: var(--background);
	border-radius: 4px;
	overflow-y: scroll;
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
}

.smart-info-main div[role=toolbar] {
	width: 100%;
}

.smart-info-main div[role=tabpanel] > div {
	width: 100%;
	height: 100%;
	position: relative;
}

.smart-info-main div[role=tabpanel] > div > .script-container > .caption {
	display: none;
}

.smart-info-main div[role=tabpanel] > div > .script-container > .caption + textarea {
	margin-top: 5px;
}

.timeline-item {
	font-size: 14px;
	padding: 5px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(100, 100, 100, 0.3);

}

.timeline-attachments {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-left: 58px;
}

.timeline-attachment {
	margin-top: 10px;
	max-height: 48px;
	flex: 0;
}

.timeline-item-displayname {
	font-weight: bold;
	padding-left: 10px;
}

.timeline-item-head.high-priority {
	background: #C00;
	color: #FFF;
}

.timeline-item-head.mid-priority {
	background: #FF0;
	color: #000;
}


.timeline-item-head {
	display: flex;
	height: 48px;
	flex-direction: row;
}

.timeline-item-head.travel-head {
	height: unset !important;
	margin-bottom: 25px;	
}

.timeline-item-head.travel-head .timeline-item-meta {
	margin-top: 0;
	height: unset !important;
	padding: 5px 0;
}

.travel-head .timeline-item-time {
	font-size: 8pt;
}

.timeline-item-displayname i {
	position: relative;
	padding-left: 5px;
	top: 2px;
}

.timeline-item-username {
	opacity: 0.6;
	padding-left: 5px;
}

.timeline-attachment img {
	height: 100%;
	width: 100%;
	min-width: 64px;
	object-fit: cover;
}

.timeline-item-meta a {
	color: unset !important;
	text-decoration: none;
}

.timeline-item-meta a:hover {
	text-decoration: underline;;
}

.timeline-item-meta {
	display: flex;
	flex-direction: row;
	height: 2em;
	margin-top: -5px;
	align-items: center;
}

.timeline-item-prefix {
	display: flex;
	flex-direction: row;
	padding: 2px 10px;
	font-weight: bold;
	align-items: center;
}

.timeline-item-head, .travel-item-icon {
	margin-left:  68px;
}

.timeline-item-content p {
	margin: 10px 5px 5px 5px;
}

.timeline-item-content .timeline-item-content-info {
	margin: 10px 5px 5px5px;
}

.timeline-item-content:not(:first-child) {
	margin-top: -20px;
	padding-left: 58px;
}

.sm-button-group {
	display: flex;
	background: var(--tabActive);
	justify-content: flex-start;
	gap: 10px;
}

.sm-button-group:not(.summary) {
	flex-direction: column;
	padding: 10px;
	width: 48px;
	position: fixed;
	height: 100%;
}


.sm-button-group.summary {
	position: absolute;
	flex-direction: row;
	height: fit-content;
	padding: 10px;
	top: 0px;
	left: 0px;
}

.sm-button-group i{
	height: 22px;
}

.sm-button-group .ms-Button .ms-Button-label {
	display: none;
}

.sm-button-group .ms-Button {
	min-width: 48px;
	max-width: 48px;
	height: 48px;
	min-height: 48px;
	box-shadow: 2px 2px 2px var(--shadow);
}

.sm-button-group .ms-Button:active {
	animation: pushIn forwards 0.05s;
}

.sm-button-group .ms-Button * {
	color: unset;
	fill: currentColor;
}

.travel-item-content {
	margin-top: -20px;
	display: flex;
	flex-direction: row;
}

.travel-item-content .timeline-item-content {
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 10px;
}

.travel-item-icon {
	width: 48px;
	padding-left: 20px;
	height: 48px;
}

.timeline-item-time {
	opacity: 0.6;
	padding-left: 5px;
}

.timeline-item-head img {
	height: 100%;
	object-fit: cover;
	border-radius: 100%;
}

.tl-list {
	height: 100%;
}

.sm-button-group .selected-btn {
	box-shadow: 0px 0px 0px 2px #fa0;
}

.dark .sm-button-group .selected-btn {
	box-shadow: 0px 0px 0px 2px #fff;
}

.sm-button-group .ms-Button {
	flex: 0; /* chrome flex:1's buttons automatically because of course it does */
	border: none;
	border-radius: 2px;
}

.weather-item-content .timeline-item-content {
	margin-top: 5px !important;
	padding-left: 10px !important;
}

.timeline-center-label {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.4;
	height: 100%;
}

.smart-info-pin {
	display: flex;
	align-items: center;
	justify-content: center;
}

.smart-info-pin > button {
	min-width: 32px;
	width: 32px;
	margin-right: 10px;
}

.smart-info-pin > button .ms-Icon {
	width: 24px;
	height: 24px;
	font-size: 24px;
}

.timeline-preview .timeline-buttons {
	display: flex;
	flex: 1;
	width: 100%;
	background: var(--tab);
}

.timeline-preview .timeline-buttons .std-btn {
	flex: 1;
}

.timeline-preview .std-btn.checked {
	position: relative;
}

.timeline-preview .std-btn.checked:after {
	content: "";
	pointer-events: none;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.15);
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
}

.summary_container{
	display: flex;
	flex-direction: column;
	background-color: var(--background);
	height: auto;
	width: 100%;
}

.summary_container .ms-ScrollablePane--contentContainer {
	padding: 6px !important;
}

.summary {
	background-color: var(--tabActive) !important;
	box-shadow: none !important;
}

.summary::before {
	display: none;
}

.summary-content-title{
	font-weight: bold;
	font-size: 1.05em;
	background-color: var(--window);
	border-radius: 3px 3px 0px 0px;
	margin: 0px 5px -5px 5px;
	min-height: 32px !important;
	box-sizing: border-box;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.summary-content-title .MuiAccordionSummary-content {
	margin: 0px !important;
	align-items: center;
}

.summary-content-details {
	padding: 0px !important;
}

.summary-content {
	position: relative;
	height: 82px;
	width: 100%;
}

.summary-content .timeline-preview,
.summary-content .script-container{
	top: 0px;
	border-radius: 0px !important;
}

.smart-info-album-title {
	font-style: italic;
}

.library-item-information-container {
	min-width: 400px;
	min-height: 200px;
	height: 100%;
	height: calc(100% - 34px);

	display: flex;
	flex-direction: column;
}

.popup-layer .library-item-information-container {
	padding-top: 34px;
}

.log-history-table-container {
	flex: 1;
}

.log-history-table-main {
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1;
	margin: 10px 5px;
	overflow: scroll;
	background: var(--background);
}

.log-history-table-main .log-history-table-head {
	position: sticky;
	background: var(--backgroundDark);
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
}

.log-history-table-main .log-history-table-container {
	position: absolute;
	top: 23px;
	bottom: 0;
	left: 0;
	right: 0;
}

.log-history-table, .log-history-table-head {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	text-align: center;
}

.log-history-table-head {
	font-weight: bold;
}

.log-history-table td {
	border-right: 1px solid rgba(0, 0, 0, 0.4);
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	text-align: center;
}

.dark .log-history-table td {
	border-right-color: rgba(255, 255, 255, 0.1);
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

tr.separator-row {
	height: 16px;
	background: var(--tab);
}

.log-history-table td:first-child, .log-history-table-head td:first-child {
	width: 100px;
	text-align: right;
}

.log-history-table td.current-hour {
	background: #FA0;
	color: #000;
}

.rule-group-header-container {
	display: flex;
	height: 16px;
	width: 100%;
	align-items: center;
}

.rule-group-header-container i {
	width: 16px;
	margin-right: 10px;
}

.rule-group-header-container span {
	flex: 1;
}

.library-item-information-container .ms-GroupedList {
	margin: 5px;
	background-color: var(--main);
	border-radius: 3px;
}

.library-item-information-container .ms-GroupHeader > div, .library-item-information-container .ms-GroupHeader-expand {
	height: 28px;
}

 .library-item-information-container .ms-DetailsRow, .library-item-information-container .ms-DetailsRow-cell {
	height: 24px;
	min-height: 24px;
	width: 100%;
}

.library-item-information-container .ms-List-cell {
	min-height: 24px;
}

.library-item-information-container .warning-container {
	display: flex;
	flex-direction: row;

	background-color: var(--background);
	border-radius: 3px;
	box-shadow: inset 2px 2px 2px var(--shadow);
	margin: 0 5px;
}

.library-item-information-container .warning-container .ms-GroupedList {
	flex: 1;
}

.library-item-information-container .warning-sidebar {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin: 10px;
}

.library-item-information-container .title-container {
	display: flex;
	flex-direction: row;
	position: relative;
	align-items: center;
}

.title-bar {
	position: relative;
	z-index: 999;
}

.library-item-information-container .title-container i {
	font-size: 24px;
	height: 24px;
	margin: 0 10px;
}

.library-item-information-container .title-container > div {
	flex: 1;
}

.library-item-information-container .title-container > div > div:first-of-type {
	font-size: 18pt;
}

.library-item-information-container .title-container > div > div:first-of-type span {
	float: right;
	margin-right: 50px;
}

.item-details-container{
	width: 100%;
	padding: 10px;

	display: flex;
	flex-direction: column;
}

.item-details-info-pair {
	display: flex;
	flex-direction: row;
	height: 32px;
}

.item-details-info-label {
	width: 100px;
}

.item-details-info-pair span:not(.item-details-info-label),
.item-details-note-type {
	font-weight: bold;
	font-size: 16px;
}

.item-details-notes {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	padding-bottom: 10px;
}

.item-details-note-container{
	border-radius: 3px;
	background-color: var( --background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	padding: 10px;
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 5px;
}

.item-details-note{
	text-wrap: wrap;
	word-break: break-all;
	padding: 5px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	border-radius: 3px;

	background-color: var(--main);

}
.station-report .icon-btn-contain {
	display: flex;
	flex-direction: column;
	width: 72px;
	height: 64px;
	align-items: center;
	justify-content: center;
}

.station-report {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	flex: 1;
	background: var(--tabActive);
}

.tab-view-contents .ui-ribbon:not(:empty) + .station-report-container,
.popup-screen .ui-ribbon:not(:empty) + .station-report-container {
	flex: 1;
	position: relative;
	border: none !important;
	margin-bottom: 0 !important;
}

.station-report-container .media-list-scrollable {
	position: absolute;
	top: 10px;
	left: 10px;
	height: calc(100% - 20px);
	width: calc(100% - 20px);
}

.station-report-container > .media-list-scrollable > .library-list-scrollable {
	position: relative;
}

.station-report-container > .media-list-scrollable > .library-list-scrollable .ms-DetailsList {
	overflow: visible;
}

/*.station-report-container > .media-list-scrollable > .library-list-scrollable .column-selector {
	margin-right: 16px;
}*/

.station-report-list {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	overflow: auto;
	margin: 10px;

	background-color: var(--background);
}

.station-report-list .ms-DetailsList {
	overflow: visible !important;
}

.media-range-select {
	gap: 5px;
	display: flex;
}

.report-popover-options {
	padding: 0 10px 10px;
	margin-top: -10px;
}

.report-popover-options .media-range-select {
	align-items: center;
	margin-top: 10px;
}

.log-hour-information-report .hour-info {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	height: 32px;
	color: #000 !important;
}

.log-hour-information-report .hour-info.hour-info-ok {
	background: #90ee8f;
}

.log-hour-information-report .hour-info.hour-info-no-ads {
	background: linear-gradient(125deg, rgba(144, 238, 143, 1) 41%, rgba(243, 187, 0, 1) 100%);
}

.log-hour-information-report .hour-info.hour-info-unscheduled {
	background: #666;
}

.log-hour-information-report .hour-info.hour-info-unscheduled * {
	display: none;
}

.log-hour-information-report .ms-DetailsRow-cell:not(:empty) {
	border-right: 1px solid #ccc !important;
	border-bottom: 1px solid #ccc !important;
}

.log-hour-information-report .ms-DetailsRow-cell:not(:first-child) {
	padding: 0;
}

.play-logs-controls > * {
	margin-left: 10px;
}

.station-report .icon-btn-horiz {
	height: 27px !important;
	font-size: 9pt;
	width: 110px;
	padding-left: 10px;
	padding-right: 5px;
	justify-content: space-between;
	flex-direction: row;
}

.station-report .icon-btn-horiz i {
	font-size: 16pt;
}

.station-report .icon-btn-horiz span {
	flex: 1;
	text-align: center;
}

.resizable-window > .title-bar + .station-report {
	height: calc(100% - 34px);
}

.resizable-window > .station-report > .station-report-container {
	flex: 1;
	position: relative;
	border: none !important;
	margin-bottom: 0 !important;
}

.hour-info-unscheduled {
	justify-content: center;
}

.station-report .ui-ribbon {
	height: 102px;
}

.pie-chart-legend {
	max-height: 250px;
	max-width: 280px;
	width: fit-content;
	overflow-y: auto;
	gap: 4px !important;
	padding: 4px 4px;
}

.pie-chart-legend .MuiChartsLegend-item {
	height: 24px;
	/* width: 100%; */
	margin: 2px 0;
}

.pie-chart-legend .MuiChartsLegend-item button {
	width: 100%;
	height: 100%;
	cursor: pointer;
	margin-left: 2px;
}

.pie-chart-legend .MuiChartsLegend-item:hover {
	background-color: rgba(25, 118, 210, 0.1);
}

.pie-chart-legend .MuiChartsLegend-item.selected button {
	outline: 2px solid var(--highlight);
	border-radius: 2px;
	background-color: rgba(25, 118, 210, 0.08);
}

.pie-chart-legend .MuiChartsLabelMark-mask {
	margin-left: 2px;
}

.log-hour-information-report {
	max-height: 100%;
}
.rw-layer:not(.popup-layer) {
	pointer-events: none;
}

.rw-layer .react-draggable {
	pointer-events: all;
}

.resizable-window {
	background: var(--window);
	height: 100%;
	border-radius: 2px;
	box-shadow: 2px 2px 8px 4px var(--shadow);
}

.rw-layer > .ms-Layer-content > .ms-FocusZone {
	width: 100%;
	height: 100%;
}

.rw-layer > .ms-Layer-content > .ms-FocusZone {
	width: 100%;
	height: 100%;
}

.resizable-window .title-bar,
.ms-Modal .title-bar {
	cursor: move;
	background: var(--windowBar);
	display: flex;
}

.resizable-window .title-bar-inner,
.ms-Modal .title-bar-inner {
	height: 100%;
	flex: 1;
	display: flex;
}

.resizable-layer .title-bar button {
	pointer-events: all;
}

.resizable-layer {
	width: 100%;
	height: 100%;
}

.resizable-layer.maximized > div {
    width: calc( 100% - 20px) !important;
    height: calc(100vh - 20px) !important;
    position: static !important;
    transform: unset !important;
    margin: 10px;
}

.titlebar-light .resizable-layer.maximized > div {
	height: calc(100vh - 56px) !important;
}


/* matches <div /> that might be portal elements */ 
.popup-screen #root > div:first-child:not([class]), .popup-screen #root > div:first-child:not([class]) > div:not([class]) {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.replace-library-dlg {
	position: relative;
	height: 100% !important;
	height: calc(100% - 34px - 75px) !important;
	max-height: unset !important;
}

.replace-library-dlg .media-list {
	position: absolute;
	top: 0;
	left: 10px;
	width: 100%;
	width: calc(100% - 25px) !important;
	height: 100%;
}

.replace-library-dlg + .ms-Dialog-actions {
	padding-right: 15px !important;
}
.media-grid-item {
	margin: 0;
	padding: 0;
	border: 1px solid var(--tab);
	border-radius: 5px;
	background: var(--tabActive);
	box-shadow: 2px 2px 2px var(--shadow);
	padding: 5px;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
	position: relative;
	font-size: 12px;
	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
	transition: background-color 0.1s;
}

.flat-ui.media-grid-item {
	background-image: unset !important;
}

.flat-ui.media-grid-item.media-grid-item-selected {
	background: var(--highlight) !important;
}

.media-grid-item-has-item {
	cursor: pointer;
}

.media-grid-item table {
	width: 100%;
	height: 100%;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	right: 5px;
	z-index: 2;
	table-layout: fixed;
	border-collapse: collapse;
}

.media-grid-item table td {
	overflow-x: hidden;
	overflow-y: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
	text-align: left;
	font-weight: normal;
	font-weight: 600;
}

.media-grid-item table tr:not(.spacer) {
	height: 1em;
}

.media-grid-item table tr:first-of-type {
	/* font-size: 120%; */
	font-size: 16px;
	line-height: 18px;
	height: 18px !important;
}

.media-grid-item table tr:not(:first-of-type) {
	opacity: 0.75;
}

.media-grid-item table tr:nth-child(2) {
	/* font-size: 120%; */
	font-size: 14px;
	height: 10px;
}

.media-grid-item table tr:first-of-type td:last-of-type {
	width: 30px;
	vertical-align: top;
}

.media-grid-item .media-grid-item-bottom-box {
	display: flex;
}

.media-grid-item .media-grid-item-bottom-box span:nth-child(1) {
	text-align: left;
	flex: 1;
}

.media-grid-item .media-grid-item-bottom-box span:nth-child(2) {
	text-align: center;
	flex: 1;
}

.media-grid-item .media-grid-item-bottom-box span:nth-child(3) {
	text-align: right;
	flex: 1;
}

.media-grid-item .ui-contentexists, .media-grid-item .ui-contentexists-yes, .media-grid-item .ui-contentexists-no {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.media-grid-item .ui-contentexists-yes {
	color: var(--go);
	fill: var(--go) !important;
}

.media-grid-item .ui-contentexists-yes * {
	fill: var(--go) !important;	
}

.media-grid-item .ui-hook-icon * {
	fill: var(--text) !important;
	color: var(--text);
}

body.dark .media-grid-item .ui-hook-icon * {
	fill: var(--text) !important;
	color: var(--text);
}

.media-grid-item .ui-contentexists-no {
	background: #F00;
	color: #FFF;
	fill: #FFF;
}

.media-grid-item:focus {
	outline: none;
}

.media-grid-item .media-grid-icon-underlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	opacity: 0.8;
	pointer-events: none;
}

.media-artwork-container {
	width: 52px;
}

.media-artwork {
	height: 48px;
	width: 48px;
	position: absolute;
	border-radius: 4px;
	top: 3px;
	left: 3px;
}

.media-warning {
	position: absolute;
	top: 10px;
	left: 16px;
	width: 32px !important;
	height: 32px !important;
	font-size: 32px !important;
	pointer-events: auto;
	user-select: unset;
}

.media-state-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px !important;
	height: 48px !important;
	font-size: 48px !important;
	transform: translate(-50%, -50%);
	pointer-events: auto;
	user-select: unset;
}

.media-dead {
	width: 54px !important;
	height: 54px !important;
	font-size: 54px !important;
}

.media-grid-item .media-grid-icon-underlay .ui-sweeper-icon {
	object-position: right;
	max-height: 42px;

	color: var(--sweeper);
}

.icon-yellow {
	color: var(--sweeper) !important;
	-webkit-text-stroke: 3px var(--sweeper);
}

.icon-red {
	color: var(--stop) !important;
	stroke: var(--stop);
	-webkit-text-stroke: 1px var(--stop);
}

.icon-green {
	color: var(--go) !important;
	-webkit-text-stroke: 2px var(--go);
	fill: var(--go) !important;
}

.is-selected .icon-green,
.is-selected .icon-red {
	-webkit-text-stroke: 1px #eee;
}

.media-grid-item .media-grid-content-icon-underlay {
	left: 2px;
	height: 100%;
	justify-content: center;
}

.media-grid-item-selected  {
	background: var(--highlight) !important;
	color: #FFF !important;
	box-shadow: 0px 0px 0px 2px var(--highlight);
	border-color: #000;
	transition: box-shadow 0.2s;
}

.media-grid-item-selected *{
	color: #FFF !important;
}

.media-grid-item-selected svg {
	fill: #FFF;
}

.media-grid-item .media-grid-icon-underlay i, .media-grid-item .media-grid-icon-underlay i i svg {
	height: 48px !important;
	font-size: 40px;
	line-height: 28px;
	stroke-width: 0 !important;
	width: 48px;
}

.media-grid-type-icon-underlay i {
	position: absolute;
	bottom: 12px;
	right: 2px;
}

.media-grid-item .media-grid-content-icon-underlay i, .media-grid-item .media-grid-content-icon-underlay i i svg {
	height: 50px !important;
	font-size: 50px;
	line-height: 50px;
	stroke-width: 0 !important;
	width: 50px;
}

.media-grid-item table td:last-child:not(:first-child) {
	text-align: right;
	/* width: 2.5ch; */ 
}


.media-grid-icon-overlay {
	z-index: 999;
	opacity: 1 !important;
}

.ml-disabled {
	pointer-events: none;
	opacity: 0.5;
}

.media-upload-list {
	z-index: 99;
}

.media-grid-icon-colour-hint {
	position: absolute;
	background-color: var(--tab);
	top: 1px;
	left: 2px;
	width: 8px;
	border-radius: 2px;
	box-shadow: inset 1px 1px 1px var(--shadow);
	height: calc(100% - 2px);
}

.media-grid-icon-colour-hint + table {
	left: 14px;
	width: calc(100% - 20px);
}

.media-list .ms-DetailsRow-cell {
	padding: 0 !important;
}

.media-ui-pad {
	line-height: 2.3em;
	padding: 3px 0 0 0;
}

.media-list .ui-log-item {
	border-left: none;
}

.media-list {
	display: flex;
	flex-direction: column;
}

.media-list-grid {
	background: var(--backgroundDarker) !important;
}

.shell-body-column-left .media-list.media-list-grid {
	padding: 1px 2px 2px 2px !important;
	border: none !important;
	margin: 1px 2px 0;
}

.media-list .media-list-scrollable {
	flex: 1;
	overflow-y: hidden;
}

.popup-screen .media-list .media-list-scrollable {
	height: calc(100vh - 146px);
}

.media-list-controls {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	gap: 3px;
	margin-bottom: 3px;
}

.media-list-controls:first-of-type {
	margin-bottom: 0px;
}

.media-list-controls:last-of-type {
	margin-top: 2px;
}

.media-grid-menu {
	overflow-x: unset;
	display: flex;
	gap: 2px;
	height: 36px;
	padding: 0px 0px 2px 0;
	display: flex;
	width: 100%;
}

.admin-shell .media-grid-menu {
	padding: 4px 3px 0 3px;
	gap: 3px;
}


.main-btn.jump-set-button {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.main-btn.jump-set-button i, .main-btn.jump-set-button img {
	height: 24px;
	width: 24px;
}

.ui-media-button-icon {
	height: 14px;
	padding-top: 2px;
}

.ui-media-button-icon-tall {
	height: 24px;
	font-size: 20px;
	line-height: 20px;
}

.media-upload-list .ui-log-item td:nth-child(4) {
	width: 7ch;
}

.media-upload-list .ui-log-item td:nth-child(5) {
	width: 17ch;
}

.ui-media-dialog-icon {
	padding-right: 10px;
	position: relative;
	top: 3px;	
}

.ui-media-dialog-icon svg {
	stroke-width: 0 !important;
}

.ui-media-dialog-icon i {
	height: 16px;
	width: 16px;
}

.media-grid-container {
	display: grid !important;
	grid-auto-flow: column dense;
	height: 100%;
	flex: 1;
	grid-gap: 3px;

	grid-template-rows: repeat(auto-fit, minmax(90px, 1fr));
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));

	min-height: 0;  /* NEW */
	min-width: 0;   /* NEW; needed for Firefox */
}

.ui-media-list-item {
	height: 100%;
}

.media-list:not(.media-list-grid) .media-list-controls {
	width: 100%;
}

.media-list:not(.media-list-grid) .media-list-controls button {
	flex: 1;
}

.media-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
}

.media-btn i, .media-btn span {
	display: block;
	width: 16px;
	height: 16px;
}

.media-btn i, .media-btn svg {
	color: #000 !important;
	fill: #000 !important;
}

body.dark .media-btn i, body.dark .media-btn svg {
	color: #FFF !important;
	fill: #FFF !important;
}

.media-list .log-ui-item td {
	overflow: hidden;
	text-overflow: ellipsis;
}

.media-list .log-col-chain.log-col-edit {
	width: 52px;
	padding-right: 0 !important;
}

.media-list .media-list {
	border: none !important;
	padding: 0 !important;
}

.jump-set-list {
	display: flex;
	flex: 1;
	gap: 1px;
	overflow-y: unset;
}

.jump-set-list .standard-button-outer{
	flex: 1;
}

.jump-media-drop-here {
	width: 1px;
	height: 32px;
	position: relative;
}

.jump-media-drop-here:only-child {
	width: auto;
	flex: 1;
}

.jump-media-drop-here:after {
	display: none;
	content: '';
	position: absolute;
	top: 0;
	left: -1px;
	width: 3px;
	height: 100%;
	background: #000;
}

.jump-media-drop-here:last-child:after {
	left: -1px;
	width: 2px;
}

.jump-media-drop-here.is-over:after {
	display: block;
}

body.dark .jump-media-drop-here:after {
	background: #FFF;
}

.has-dragging-child .jump-set-list {
	overflow-y: hidden !important;
}

.has-dragging-child .jump-media-drop-here:before {
	content: '';
	display: block;
	background: transparent;
	position: absolute;
	width: 24px;
	left: -12px;
	height: 100%;
	z-index: 999;
}

.has-dragging-child .jump-media-drop-here:last-child:before {
	width: 12px;
}

.jump-set-button {
	position: relative;
	min-width: 48px;
}

.jump-set-button span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: safe center;

	overflow: clip;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jump-set-button span b {
	display: block;
	max-width: 100%;
	font-weight: normal;
	overflow: clip;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ms-Dialog-content .media-list-pop-contain > div:first-child {
	height: calc(100vh - 180px);
	min-width: 320px;
}
.pending-task-pop {
	position: absolute;
	right: 0px;
	top: 15px;
}

.prog-complete .ms-ProgressIndicator-progressBar {
	background-color: #0A0;
}

.task-notification-stack {
	position: fixed;
	bottom: calc(var(--start));
	left: 25px;
	width: 100%;
	max-width: 270px;
	padding: 10px;
	display: flex;
	transition: opacity 0.03s;
}

.task-notification-stack.is-mouse-blocked {
	pointer-events: none;
	opacity: 0.1;
}

.task-notification-stack-shell {
}

.task-notification-stack-shell.item-count-0 {
	transform: translateY(calc(30px));
	opacity: 0;
}

.task-notification-stack.item-count-0 {
	display: none;
}

.task-notification-stack-shell:not(.item-count-0) {
	transform: translateY(0px);
	transition: all 0.1s;
	opacity: 1;
}

.task-notification-stack-shell {
	position: relative;
	background: var(--windowBar);
	opacity: 0.8;
	width: 100%;
	backdrop-filter: blur(4px);
	display: flex;
	align-items: flex-end;
	box-shadow: 3px 3px 10px var(--shadow);
	padding: 10px;
	border-radius: 3px;
	flex-direction: column;
	align-items: stretch;
}

.task-notification-stack-shell > span {
	display: block;
}

.task-notification-stack-shell > span + span {
	margin-top: 10px;
}


.script-container {
	width: 650px;
	min-height: 350px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 350px;
}

.script-container textarea, .script-container iframe {
	display: block;
	background: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	width: 100%;
	height: 100%;
	margin: 10px 0 0;
	padding: 10px;
	border-radius: 4px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	resize: none;
}

.time-container {
	min-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.time-dialog-description{
	color: var(--text-secondary);
	padding: 4px 10px 10px;
	background-color: var(--background);
	border-radius: 4px;
	margin-bottom: 10px;
}

.library-container {
	max-height: 450px;
	margin: 10px 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow-x: hidden;
	display: flex;
}

.ms-Panel-header .title-bar {
	display: flex;
}

.title-bar .title-bar-icon {
	padding: 0;
}

.library-container .media-list {
	width: 100%;
}

.social-container {
	width: 400px;
}

.popup-window-with-title .ms-Dialog-main {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.script-container, .script-container + .ms-Dialog-actions, .library-container, .library-container + .ms-Dialog-actions {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 10px 10px;
}

.ms-Dialog-actions {
	overflow-x: hidden;
}

.popup-window-with-title .ms-Dialog-actions {
	padding-right: 10px;
	padding-bottom: 10px;
	box-sizing: border-box;
}

.autohook-container > * {
	margin-bottom: 10px;
}

.time-container .ms-TextField:first-child, .time-container .ms-TextField:first-child + * {
	width: 100%;
}

.time-container .ms-TextField:first-child {
	margin-top: -20px;
}

.ms-Dialog-content .edit-ai-voice-link {
	margin-top: -40px;
	height: calc(100vh - 200px);
	display: flex;
	flex-direction: column;
}

.edit-ai-voice-link__body {
	flex: 1;
	display: flex;
	gap: 5px;
	overflow: hidden;
}

.edit-ai-voice-link__controls {
	background-color: var(--tabActive);
	padding: 0 10px 10px;
	display: flex;
	flex-direction: column;
}

.edit-ai-voice-link__controls .waveform-player-outer {
	overflow: hidden;
}

.edit-ai-voice-link__settings {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

.edit-ai-voice-link__actions {
	flex: 0 0 100px;
}

.edit-ai-voice-link__title {
	margin-bottom: 5px;
}

.edit-ai-voice-link__title--not-first {
	margin-top: 20px;
}

.edit-ai-voice-link__title span {
	margin-left: -4px !important;
	margin-right: 16px !important;
}

.edit-ai-voice-link__title span, .edit-ai-voice-link__title input[type=text] {
	font-size: 16px;
}

.edit-ai-voice-link__title .ms-TextField {
	flex: 1;
}

.ai-vl-script-actions > button {
	margin-left: 5px;
}

.autohook-pair {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}

.autohook-pair > .ms-TextField {
	flex: 1;
	min-width: 300px;
}

.autohook-pair > div:first-of-type {
	width: 80px;
}

.autohook-start .ms-TextField-fieldGroup,
.autohook-start .ms-TextField-fieldGroup input {
	background-color: #ACFFB6;
	color: #111;
}

.autohook-end .ms-TextField-fieldGroup,
.autohook-end .ms-TextField-fieldGroup input {
	background-color: #FFB6B6;
	color: #111;
}

.autohook-separator .ms-TextField-fieldGroup,
.autohook-separator .ms-TextField-fieldGroup input {
	background-color: #B6B6FF;
	color: #111;
}


.ai-vl-container {
	min-width: 700px;
}

.ai-vl-container .ms-Toggle {
	flex: 0 0 50px !important;
}

.ai-vl-container .search-items-pair:not(.settings-group-pair) > div:first-child {
	flex-basis: 300px !important;
}

.ai-vl-edit-slider-top {
	table-layout: fixed;
	margin-top: 0;
	margin-left: -10%;
	margin-right: -10%;
	width: 120%;
	text-align: center;
}

.ai-vl-container .settings-expand-collapse-setting > span:empty {
	display: none;
}

.ai-vl-actions {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	width: 100%;
	gap: 10px;
	align-items: center;
}

.ai-vl-actions-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.edit-ai-voice-link__actions .ai-vl-actions-group {
	flex-direction: column;
}

.edit-ai-voice-link__settings .settings-expand-collapse-top-row button.ms-Toggle-background {
	margin-left: 10px;
	width: 40px;
	transform: unset !important;
	background-color: var(--windowBarAlt);
}

.ai-vl-script-actions {
	justify-content: flex-end;
}

.ai-vl-placeholder-next {
	background-color: #008002;
	color: #fff;
	text-align: center;
	padding: 5px;
	margin-bottom: 5px;
	align-items: center;
	justify-content: center;
	display: flex;
}

.ai-vl-placeholder-next span {
	flex: 1;
	text-align: center;
}

.ai-vl-section {
	background: var(--tabActive);
	padding: 10px;
	gap: 5px;
	margin-bottom: 0px;
}

.ai-vl-section-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
	padding-bottom: 5px;
}

.ai-controls {
	flex: 0 !important;
	display: flex;
	align-items: flex-end;
	align-items: last baseline;
}

.ai-vl-rate {
	display: flex;
}

.ai-vl-rate .ms-Checkbox {
	align-items: center;
	flex: 1;
}

.ai-vl-rate .ms-Checkbox + .settings-expand-collapse-setting {
	flex: 0 0 100px !important;
	overflow: hidden;
}

.ai-vl-section .settings-expand-collapse-setting {
	align-items: center;
}

.ai-phrase-edit-dialog {
	width: 100%;
	height: calc(100% - 10px);
}

.edit-ai-voice-link__actions .ms-Button-flexContainer {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.edit-ai-voice-link__actions .ms-Button {
	width: 100px;
	height: 100px;
}

.edit-ai-voice-link__actions .ms-Button .ms-Icon {
	width: 32px;
	height: 32px;
	font-size: 32px;
	line-height: 32px;
}

.edit-ai-voice-link__actions .ui-ribbon-button-inside {
	display: none;
}

.edit-ai-voice-link .use-presenter-group .ms-ChoiceField-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
}

.edit-ai-voice-link .use-presenter-group .ms-ChoiceField-wrapper .choice-group-child-group,
.edit-ai-voice-link .use-presenter-group .ms-ChoiceField-wrapper .choice-group-child-group .ms-Dropdown-container {
	flex: 1;
}

.edit-ai-voice-link .ms-Dropdown-title {
	line-height: 28px;
}
.advert-edit-meta {
	table-layout: unset !important;
}


.advert-edit-meta tr:nth-child(2) td:last-child {
	width: 100px;
	padding-left: 10px;
}

.advert-edit-meta .icon-btn-contain {
	display: flex;
	flex-direction: column;
	width: 72px;
	height: 64px;
	align-items: center;
	justify-content: center;
}

.advert-edit-meta .media-range-select {
	display: flex;
	align-items: center;
}

.advert-edit-meta .media-range-select .ms-TextField-wrapper {
	width: 100px;
}

.advert-edit-meta .ms-Checkbox-text {
	font-weight: 600;
}

.advert-edit-table i[data-icon-name="SkypeCircleCheck"] {
	color: #090;
}

.advert-edit-table i[data-icon-name="SkypeCircleMinus"] {
	color: #900;
}

.schedule-page {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.schedule-clock-assignments {
	display: flex;
	flex-direction: row;
	margin-top: -1px;
	position: relative;
	height: calc(100% - 54px);
}

.schedule-clock-assignments-left {
	flex-basis: 200px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ms-Dialog-content .schedule-page.schedule-clock-edit{
	height: 80vh;
}

body .tab-view-contents .schedule-clock-assignments-left .ui-ribbon + .ms-TextField {
	border-width: 0px !important;
}

.schedule-clock-assignments-left .schedule-clock-assignments-left-items {
	flex: 1;
	overflow: auto scroll;
	padding-right: 5px;
	box-sizing: border-box;
}

.schedule-clock-assignments-left .schedule-clock-assignments-left-items .ms-DetailsList {
	overflow: visible;
}

.schedule-clock-assignments-left-items {
	background-color: var(--background);
}


.schedule-clock-assignments-right {
	flex: 1;
	overscroll-behavior: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.schedule-clock-assignments-right .ms-FocusZone {
	flex: 1;
	overflow: auto scroll;
	margin-bottom: 0px !important;
}

.schedule-clock-assignments-right .ui-ribbon-button-label span {
	font-size: 10px;
	line-height: 11px;
}

.schedule-clock-assignment-grid {
	background-color: var(--backgroundDark);
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 12px;
	width: 100%;
}

.schedule-clock-assignment-grid thead tr th:first-child {
	width: 50px;
}


.schedule-clock-assignment-grid th, .schedule-clock-assignment-grid td {
	border: 1px solid var(--windowBarAlt);
	font-size: 12px;
}

.schedule-clock-assignment-grid td {
	height: 20px;
}

.schedule-clock-assignment-grid td {
	padding: 3px 5px 5px;
}

.schedule-clock-assignment-grid td > span {
	text-overflow: ellipsis;
	width: 100%;
	display: block;
	overflow: hidden;
	white-space: nowrap;
}


.schedule-clock-assignment-grid .is-selected {
	background-color: rgba(0, 150, 255, 0.1);
	border-style: dotted;
}

.schedule-page .hour-type-icon {
	width: 16px;
	height: 16px;
	position: relative;
	top: 3px;
	margin-right: 8px;
	border-radius: 2px;
	background: #000;
	box-shadow: inset 2px 2px 2px var(--shadow);
	box-sizing: border-box;
	display: inline-block;
	color: #000 !important;
}

.schedule-page .hour-type-icon.hour-mode-1 {
	background-color: #FFA500;
}

.schedule-page .hour-type-icon.hour-mode-3 {
	background-color: #00CC00;
}

.schedule-clock-assignments-left .ui-ribbon {
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	margin-top: 1px !important;
	border-top-right-radius: 0px !important;
	position: sticky;
	top: 0px;
	z-index: 2;
}

.schedule-clock-assignments-right .ui-ribbon {
	border-top-left-radius: 0px;
	margin-left: -2px;
	z-index: 2;
}

.schedule-clock-assignment-footer {
	flex: 0;
	flex-basis: 32px;
	text-align: right;
	padding: 10px;
	height: 32px;
}


.schedule-clock-assignment-footer > button {
	margin-left: 10px;
}


.schedule-clock-assignments-left .ms-DetailsRow {
	border: 1px solid var(--windowBarAlt);
	margin: 1px 0;
}


.schedule-clock-assignments-clock {
	display: flex;
	align-items: center;
}

.schedule-clock-assignments-clock .hour-type-icon {
	flex: 0 0 24px;
	width: 24px;
	display: inline-flex;
	top: 0px;
	align-items: center;
	justify-content: center;
	height: 24px;
	outline: 1px solid var(--windowBarAlt);
}

.schedule-clock-assignments-clock .hour-type-icon i {
	width: 16px;
	height: 16px;
}

.schedule-clock-assignments-clock .schedule-clock-label-text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clock-assignment-current-week {
	background: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 2px;
	align-self: stretch;
	margin: 15px 5px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 5px 10px 10px;
	white-space: nowrap;
}

.contact-list.schedule-page .ms-DetailsList-headerWrapper {
	top: 0px;
}
.contact-list {
	margin-top: 1px;
	height: 100%;
	display: flex;
	flex-direction: column;
	border-top-right-radius: 0px;
}

.contact-list-main {
	flex: 1;
	position: relative;
	display: flex;
}

.contact-list-left {
	flex-basis: 200px;
}

.contact-list-content {
	flex: 1;
	position: relative
}

.contact-list-abs {
	position: absolute;
	top: 5px;
	left: 5px;
	border-radius: 3px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	overflow: auto;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
}

.tab-view-portal > div > .contact-list {
	margin-top: 0px;
}

.cloud-session-info table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	font-size: 11pt;
}

.cloud-session-info table td {
	line-height: 1.6em;
	text-overflow: ellipsis;
	overflow: clip;
}

.cloud-session-info thead td div {
	display: flex;
}

.cloud-session-info thead td div span:first-child {
	flex: 1;
}

.cloud-session-info tfoot td {
	border-top: 1px solid #ccc;
}


.wizard-contain {
	display: flex;
	flex: 1;
}

.wizard-left {
	flex: 1 0 140px;
	text-align: center;
	padding-top: 20px;
	background: rgba(100, 100, 100, 0.1);
}

.wizard-left .family-logo {
	background: #fff;
	padding: 5px;
	border: 3px solid #000;
	display: inline-block;
	aspect-ratio: 1/1;
	line-height: 0px;
}

.wizard-left .family-logo img {
	width: 90px;
}

.wizard-content {
	flex: 8 0;
}

.wizard-contain + .contact-edit-footer {
	margin: 0px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.05);
}


.tree-list .ms-FocusZone + .tree-list {
	max-width: 100%;
	
}

.tree-list > .ms-FocusZone {
	display: flex;
	flex-direction: column;
}

.tree-list {
	min-width: 420px;
}

.tree-list .tree-list .ms-DetailsList {
	overflow: hidden;
}

.tree-list-expand-icon {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.schedule-clock-edit-top {
	padding: 5px 10px;
}

.schedule-clock-edit-top > label,
.schedule-clock-edit-container > label {
	margin-left: 10px;
}

.schedule-clock-edit-meta {
	color: var(--text);
	padding: 5px;
	background: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;
}

.schedule-clock-edit-meta .ms-TextField-wrapper + span[id] {
	display: none;
}

.schedule-clock-edit-meta table {
	width: 100%;
	table-layout: fixed;
}

.schedule-clock-edit-meta table tr:first-child td:first-child {
	width: 150px;
}

.schedule-clock-edit-type {
	display: flex;
}

.schedule-clock-edit-type > * {
	flex: 1;
	text-align: center;
	font-size: 12px;
}

.schedule-clock-edit-type .checked-green {
	position: relative;
}

.schedule-clock-edit-type .checked-green:after {
	content: '';
	border-radius: 4px;
	opacity: 0.3;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: #0f0;
	width: 100%;
	height: 100%;
}

.schedule-clock-edit-container {
	flex: 1;
	margin: 10px 10px 0px;
	padding: 5px;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;
}

.schedule-clock-edit-items {
	background: #fff;
	color: #000;
	display: flex;
	padding: 5px;
	margin-top: 2px;
	flex: 1;
	--bg: var(--background);
}
.schedule-clock-edit-items .ms-DetailsList-headerWrapper {
	--bg: var(--tab);
}

.schedule-clock-edit-items .ms-DetailsRow-cell {
	position: relative;
}

.schedule-clock-edit-items .ms-DetailsRow.unscheduled:not(.is-selected):not(:hover),
.schedule-clock-edit-items .ms-DetailsRow.unscheduled:not(.is-selected):not(:hover) .ms-DetailsRow-cell {
	background-color: var(--inputDisabled);
	--bg: var(--inputDisabled);
}

.schedule-clock-edit-items .ms-DetailsRow:not(.is-selected):hover,
.schedule-clock-edit-items .ms-DetailsRow:not(.is-selected):hover .ms-DetailsRow-cell:not([data-automation-key="frozen-left"]):not([data-automation-key="frozen-right"]) {
	background-color: var(--mainHover);
	--bg: var(--mainHover);
}

.schedule-clock-edit-list {
	position: relative;
	flex: 1;
	/* overflow: scroll; */
}

.schedule-clock-edit-goals-list-contain {
	display: flex;
	flex: 1;
}

.schedule-clock-edit-list > .schedule-clock-edit-list-items,
.schedule-clock-edit-goals-list-contain > .ms-Viewport {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.schedule-clock-edit-list-items .ms-DetailsList {
	min-height: 100%;
	display: flex;
}

.schedule-clock-edit-list-items > .ms-Viewport > .ms-DetailsList {
	overflow: visible;
}

.schedule-clock-edit-list > .ms-Viewport .ms-DetailsList,
.schedule-clock-edit-goals-list > .ms-Viewport .ms-DetailsList {
	overflow: visible;
}

.schedule-clock-edit-items .ms-Dropdown,
.schedule-clock-edit-items .ms-TextField {
	margin-top: -4px;
	margin-bottom: -4px;
}

.schedule-clock-edit-items .ms-Dropdown-title,
.schedule-clock-edit-items .ms-TextField-fieldGroup,
.schedule-clock-edit-items .ms-ComboBox {
	background: rgba(255, 255, 255, 0.3) !important;
}

.schedule-clock-edit-items .ms-ComboBox input {
	background-color: transparent !important;
	color: #000 !important;
}

.schedule-clock-edit-items .ms-DetailsRow:hover .ms-Dropdown-title {
	background: rgba(255, 255, 255, 0.6) !important;
	border-color: #000 !important;
}

.schedule-clock-edit-items .ms-DetailsRow {
	color: var(--text) !important;
}

.schedule-clock-edit-items .ms-Dropdown-title,
.schedule-clock-edit-items .ms-ComboBox,
.schedule-clock-edit-items .ms-TextField-fieldGroup {
	height: 26px;
	line-height: 22px;
	color: #000 !important;
	border-color: rgba(0, 0, 0, 0.4);
	width: 100%;
}

.schedule-clock-edit-items .ms-Dropdown-caretDownWrapper {
	height: 26px !important;
	line-height: 26px !important;
}

.schedule-clock-edit-items .ms-Nav-compositeLink > button:nth-child(2).ms-Nav-link {
	padding-left: 2em;
}

body .schedule-clock-edit-items .ms-DetailsRow a:link {
	margin-left: 10px;
}

body .schedule-clock-edit-items .ms-DetailsRow:not(.is-selected) a:link {
	color: var(--highlight);
}

.schedule-clock-edit-items .std-btn {
	margin: -2px 0;
}

.schedule-clock-edit-items .ms-Nav-LinkText {
	flex: 1;
	margin-left: 5px;
}

.schedule-clock-edit-items .ms-Nav-compositeLink + .ms-Nav-navItems .ms-Nav-LinkText {
	padding-left: 15px;
}

.schedule-clock-edit-tree-items {
	flex: 1 1 100px;
	margin-right: 5px;
	position: relative;
	overflow-y: scroll;
	background: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;
}

.schedule-clock-edit-tree-items > .ms-FocusZone {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
}

.media-list-placeholder {
	width: 100%;
	min-height: 40px;
	position: relative;
}

.schedule-clock-edit-list .ms-DetailsRow.is-over:after,
.media-list-placeholder.is-over:after {
	content: '';
	position: absolute;
	width: 100%;
	top: -1px;
	pointer-events: none;
	height: 2px;
	background: #000;
}

.media-list-placeholder.is-over:after {
	top: -1px;
}

.schedule-clock-edit-goals {
	display: flex;
	background: var(--background);
	color: var(--text);
	margin-top: 2px;
	flex: 1;
}

.schedule-clock-edit-goals-list {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
}

.schedule-clock-edit-goals-graph {
	flex: 1;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: var(--tabActive);
}

.schedule-clock-edit-goals-graph > span {
	text-align: center;
}

.schedule-clock-edit-goals {
	position: absolute;
	height: 100%;
	width: 100%;
}

.schedule-clock-edit-goals-graph:not(:first-child) {
	flex: 0 0 150px;
}

.schedule-clock-edit-goals-graph-contain {
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	flex: 1;

	margin-top: 5px;
}

.schedule-clock-edit-goals-graph-contain svg {
	max-width: 100%;
	max-height: 100%;
}

.schedule-clock-edit-goals-graph {
	color: revert;
}

.schedule-clock-edit-footer {
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 10px;
}

.schedule-clock-edit-footer-buttons{
	display: flex;
	gap: 10px;
}

.schedule-clock-edit-goals-graph-legend {
	overflow-y: auto;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 3px;
	max-height: 100%;
	margin-left: 10px;
	padding: 5px;
}

.schedule-clock-edit-container .tab-view-contents {
	position: relative;
}

.schedule-clock-edit-type > * {
	max-width: 200px;
}

.schedule-clock-edit-list .ui-log-item {
	border-left-width: 1px;
}

.schedule-clock-edit-list .ui-log-item .ms-DetailsRow-cell {
	padding-top: 3px;
	padding-bottom: 3px;
	flex-direction: column;
	justify-content: center;
	display: inline-flex;
}

.schedule-clock-edit-list .ui-log-icon {
	margin: -5px 0;
	position: relative;
	top: 2px;
}

.clock-item-edit-fields .ms-ChoiceField-wrapper .ms-Dropdown-container,
.clock-item-edit-fields .ms-ChoiceField-wrapper .ms-TextField {
	margin-top: 5px;
	padding-left: 24px;
	width: 240px;
	box-sizing: border-box;
}

.advert-break-settings {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

.advert-break-settings .ms-TextField,
.advert-break-settings div:has(.ms-spinButton-input) {
	width: 100px;
}

.advert-break-settings .ms-Checkbox-label {
	width: 280px;
}

.advert-break-settings-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.advert-break-settings-units {
	margin-right: 10px;
}

.clock-item-edit-fields {
	position: relative;
}

.clock-item-edit-fields .ms-ChoiceFieldGroup {
	margin-bottom: 15px;
}

.schedule-clock-edit-tree .ui-log-icon {
	margin-left: -5px;
	margin-right: 5px;
	width: 20px;
}

.schedule-clock-edit-list .ms-DetailsList-headerWrapper {
	position: sticky;
	top: 0px;
	z-index: 1;
}

.schedule-clock-edit-goals-list .override-btn:not(:hover) {
	background: linear-gradient(to bottom, #c4f4c4 0%, #a1e1a1 50%);
}

.clock-edit-category-rule {
	display: flex;
	align-items: center;
	width: 100%;
}

.clock-edit-category-rule .ms-Label {
	flex: 1;
	text-align: right;
	font-size: 80%;
}

.clock-edit-category-rule .ms-TextField {
	flex: 0 0 120px;
}

.clock-edit-category-rule .ms-Checkbox {
	flex: 0 0 220px;
	margin-left: 5px;
}

body.dark .schedule-clock-edit-items {
	background: #333;
}

.schedule-clock-edit-meta .ms-TextField-fieldGroup,
.schedule-clock-edit-meta .ms-Dropdown-title,
.schedule-clock-edit-meta .ms-ComboBox {
	height: 26px;
	line-height: 22px;
}

.schedule-clock-edit-meta .ms-Dropdown-caretDownWrapper {
	height: 26px !important;
	line-height: 26px !important;
}

.schedule-clock-edit-meta .ms-TextField-fieldGroup input {
	padding-left: 5px;
}

.schedule-clock-edit-meta .ms-TextField-fieldGroup input:disabled {
	background-color: transparent;
	color: var(--textDisabled);
}

.schedule-clock-edit-list .ui-log-item.is-over {
	position: relative;
}

body.dark .schedule-clock-edit-list .ui-log-item.is-dropping,
body.dark .schedule-clock-edit-list .ui-log-item.is-over {
	box-shadow: none !important;
}

.schedule-clock-edit-list .ui-log-item:hover {
	background-color: var(--mainHover);
}

.schedule-clock-edit-list .ui-log-item.is-selected:hover {
	background-color: var(--highlight);
}

.schedule-clock-edit-list .ui-log-item.is-over:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	display: block;
	top: -1px;
	left: 0px;
	background: #000;
	z-index: 10;
}

.clock-edit-chain-icon-column {
	width: 32px;
	cursor: pointer;
}

.simulcast-options-checkboxes {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 8px;
}

.simulcast-options-directory {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 8px;
}

.simulcast-options-ftp-fields {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.library-search-chev-button {
	color: var(--text);
}

.schedule-clock-edit-clock-diagram-group {
	flex: 1 0 50px;
	min-height: 0px;
	max-height: 200px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.schedule-clock-edit-clock-diagram-group > div {
	max-height: 100%;
	display: flex;
	justify-content: center;
}

.schedule-clock-edit-clock-diagram-group > div > svg {
	max-height: 100%;
}

.schedule-clock-edit-clock-diagram {
	margin: 5px 5px 0 0;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;
}

.schedule-clock-edit-tree {
	display: flex;
	flex-direction: column;
	overflow: visible;
	flex-basis: 225px;
	width: 225px;
}

.pie-group:hover {
	filter: brightness(0.8);
}

.pie-line {
	stroke-width: 0.5px;
	stroke: #333;
}

.pie-group.selected-group {
	filter: brightness(2);
	fill: currentColor;
	transform: scale(1.05);
	transform-origin: 50% 50%;
}

.pie-group.selected-group-outline {
	fill: none;
	stroke: #f00;
	stroke-width: 1;
	opacity: 0.9;
	transform: scale(1.05);
	transform-origin: 50% 50%;
}

.add-item-type-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
	background-color: var(--background);
	padding: 5px;
	border-radius: 5px;
	box-shadow: inset 2px 2px 2px var(--shadow);
}

.add-item-type {
	display: flex;
	flex-direction: column;
	height: 80px;
	width: 120px;
	align-items: center;
	justify-content: space-evenly;

	background-color: var(--main);
	box-shadow: 2px 2px 2px var(--shadow);

	border-radius: 3px;
}

.add-item-type:hover {
	background-color: var(--mainHover);
	filter: brightness(1.1);
	cursor: pointer;
}

.add-item-type-colour {
	width: 100%;
	height: 60px;
	border-radius: 3px 3px 0 0;

	display: flex;
	align-items: center;
	justify-content: center;
}

.add-item-type-icon {
	font-size: 40px;
	width: 40px;
	height: 40px;

	color: #000;
	fill: #000;
}

.add-item-type-text {
	font-weight: bold;
	text-align: center;
}

.station-rules-list.contact-list .ms-DetailsList-headerWrapper {
	top: 0px;
}
.virtual-category{
    margin: 8px 0px 8px 8px;

    overflow-y: scroll;
    height: 100%;
}

.virtual-category-select-container {
    display: flex;
    flex-direction: row;
}

.virtual-category-select {
    display: flex;
    align-items: flex-start;
    padding: 8px;
    margin: 8px;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;

    min-height: 100px;

    background-color: var(--backgroundDark);

    box-shadow: inset 2px 2px 2px var(--shadow);
    border-radius: 3px;
}

.virtual-category-select-controls{
    margin: 12px 4px 0px 0px;
}

.virtual-category-search-container{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.virtual-category-search-list{
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 8px;
    margin: 8px;
    background-color: var(--backgroundDark);
    box-shadow: 2px 2px 2px var(--shadow);
    border-radius: 3px;

    height: 100%;
    width: calc(100% - 34px);

    min-height: 300px;
}

.virtual-category-group{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    margin: 4px;
    background-color: var(--tab);
    box-shadow: 2px 2px 2px var(--shadow);
    border-radius: 3px;
}
.station-rules-edit-settings {
	margin: 10px;
	flex: 1;
	display: flex;
	overflow: auto;
}

.station-rules-edit-nav {
	flex-basis: 250px;
	overflow: auto scroll;
}

.station-rules-edit-rules {
	display: flex;
	flex: 1;
	flex-direction: column;
	position: relative;
}

.station-rules-edit-goals-set {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.station-rules-edit-goals-set > .ms-DetailsList {
	overflow: visible;
}

.station-rules-edit-rules-set, .station-rules-edit-follow-rules {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.station-rules-edit-rules-set .ms-Viewport, .station-rules-edit-follow-rules > span + div {
	flex: 1;
	overflow: hidden scroll;
}

.station-rules-edit-follow-rules > span + div {
	padding: 5px;
}

.station-rules-edit-follow-rules > span, .station-rules-edit-rules-set > span {
	background-color: var(--tabActive);
	padding: 5px;
}

.station-rules-edit-follow-rules .ms-Checkbox {
	margin-bottom: 5px;
}

.station-rules-edit-rules-buttons{
	display: flex;
	flex-basis: 32px;
	flex-direction: column;
	gap: 5px;
	margin: 5px 4px 5px 5px;
}

.clock-item-rules-edit-wrap {
	display: flex;
	max-height: 700px;
}

.clock-item-rules-edit-wrap > * {
	flex: 3;
}

.rule-item-select-nav {
	width: 300px;
	margin-right: 25px;
}

.station-rules-edit-nav.library-left-tab .ms-Nav-LinkText {
	margin-left: 0px;
}

.clock-item-rules-edit-wrap .ms-Nav-compositeLink button {
	padding: 0px 4px;
}

.clock-item-rules-edit-wrap .clock-item-edit-fields {
	flex: 4;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.clock-item-edit-fields-description{
	margin: 0;
}

.clock-item-edit-fields-description p {
	margin: 0 0 4px;
}

.clock-item-edit-breakable {
	margin-top: auto;
	padding-top: 10px;
}

.station-rules-edit-rules-list {
	overflow: hidden;
	display: flex;
	flex: 1;
	padding: 0px;
}

.station-rules-edit-rules-list .ms-DetailsHeader {
	padding-top: 0;
	height: 36px;
}

body:not(.dark) .station-rules-edit-nav button:not(:hover) .ms-Nav-linkText {
	color: rgb(50, 49, 48);
}


.station-rules-edit-rules-set .ms-TextField {
	flex: 1;
}

.station-rules-edit-rules-list-contain {
	position: relative;
	flex: 1;
}

.station-rules-edit-rules-list-contain .ms-Viewport {
	position: absolute;
	width: 100%;
	height: 100%;
}

.station-rules-edit-rules-list-contain .ms-Viewport .ms-DetailsList {
	overflow: visible;
}

.station-rules-edit-follow-rules-characteristics {
	font-size: 12px;
	table-layout: auto;
	align-self: flex-start;
	width: auto !important;
}

.station-rules-edit-follow-rules-characteristics td {
	width: 16px;
}

.station-rules-edit-follow-rules-characteristics tr:not(:first-child) th {
	text-align: right;
	padding: 0 10px;
}

.station-rules-edit-follow-rules-characteristics tr:first-child th:not(:first-child) {
	width: 16px;
	max-width: 16px;
	padding-bottom: 33%;
	overflow: clip;
}

.station-rules-edit-follow-rules-characteristics tr:first-child th:not(:first-child) span {
	display: block;
	transform: rotate(-90deg) translate(-150%, 2px);
	transform-origin: 50% 100%;
}

.station-rules-edit-follow-rules-characteristics .ms-Checkbox {
	transform: scale(0.75);
	transform-origin: 0 0;
	margin-bottom: 0;
}


.station-rules-edit-rules-buttons-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.schedule-log-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.schedule-main-view > .tab-view-contain > .tab-view-content {
  height: calc(100% - 30px);
}

.schedule-log-container .std-btn i {
	opacity: 1;
}

.schedule-log-hours {
	flex: 1;
	display: flex;
	gap: 10px;
	overflow: hidden;
}

.schedule-log-hours-order {
	flex: 1;
	overflow-y: auto;
  position: relative;
}

.schedule-log-hours-right {
	display: flex;
	flex-direction: column;
	flex: 0 0 32px;
	padding-left: 2px;
	gap: 5px;
}

.schedule-log-categories .br-colour-icon {
	display: inline-block;
}

.attribute-order > i:first-child {
  line-height: 28px;
  padding: 0 5px;
}

.schedule-log-hours-list .schedule-log-categories .attribute-order-container {
  padding-bottom: 5px;
}

.schedule-log-hours-list .attribute-order {
  display: flex;
	border-radius: 2px;
	background-color: var(--main);
  margin-bottom: 5px;
  position: relative;
}

.schedule-log-hours-list .schedule-log-categories .attribute-order {
  margin-bottom: 0;
}

.schedule-log-hours-list .attribute-order .ms-Checkbox {
  flex: 1;
  padding: 4px;
}

.schedule-log-hours-list > .ms-Checkbox {
  padding: 4px;
}

.attribute-order.is-over:before, .attribute-order-drag-placeholder.is-over:before {
  content: '';
  display: block;
  position: absolute;
  top: -4px;
  height: 2px;
  width: 100%;
  background: var(--text);
}

.attribute-order-drag-placeholder.is-over:before {
  top: 6px;
}

.attribute-order-drag-placeholder {
  position: absolute;
  margin-top: -10px;
  width: 100%;
  height: 10px;
}

.schedule-log-hours-list .attribute-order.selected {
	border-color: #369;
	box-shadow: inset -1px -1px 0px #369, inset 1px 1px 0px #369;
}

.schedule-log-hours-list .ms-Checkbox > label {
}

.schedule-log-categories {
	margin: 0 5px 0 15px;
}

.schedule-log-meta {
	table-layout: auto !important;
}

.schedule-log-meta tr:nth-child(2) td:nth-child(1) {
	width: 180px;
}

.schedule-log-meta tr:nth-child(2) td:nth-child(3) {
	max-width: 256px;
	width: 256px;
}

.schedule-log-meta tr:nth-child(2) td:nth-child(2),
.schedule-log-meta tr:nth-child(2) td:nth-child(5) {
	width: 80px;
}

.schedule-log-station-brand {
	max-width: 100%;
	max-height: 100%;
	border-radius: 3px;
	object-fit: contain;
	background-color: var(--mainHover);
}


.std-btn .split-btn-contain {
	display: flex;
	flex-direction: column;
}

.std-btn .icon-btn-contain i {
	font-size: 24pt;
}


/* Schedule hours container styling */
.schedule-hours-scroll-container {
}

/* Header table for hour numbers */
.schedule-hours-header-table {
  border-collapse: collapse;
  width: 100%;
}

.schedule-hours-corner-cell {
  width: 60px;
  min-width: 60px;
  text-align: center;
  padding: 8px;
  border: 1px solid var(--textDisabled);
  background-color: var(--tab);
  font-weight: bold;
}

body.dark .schedule-hours-corner-cell {
  background-color: var(--main);
  border: 1px solid var(--tabActive);
}

.schedule-hours-header-cell {
  width: 30px;
  min-width: 30px;
  text-align: center;
  padding: 4px;
  border: 1px solid var(--textDisabled);
  background-color: var(--tab);
  font-weight: bold;
  font-size: 12px;
}

body.dark .schedule-hours-header-cell {
  background-color: var(--main);
  border: 1px solid var(--tabActive);
}

.schedule-hours-header-cell:hover,
.schedule-hours-corner-cell:hover {
  filter: brightness(1.2);
  cursor: pointer;
}

/* Grid container for the schedule hours */
.schedule-hours-grid-container {

}

/* Main schedule hours table */
.schedule-hours-table {
  border-collapse: collapse;
  width: 100%;
}

.day-label-cell {
  width: 60px;
  min-width: 60px;
  text-align: center;
  padding: 4px;
  border: 1px solid var(--textDisabled);
  background-color: var(--tab);
  font-weight: bold;
  font-size: 14px;
}

body.dark .day-label-cell {
  background-color: var(--main);
  border: 1px solid var(--tabActive);
}

.day-label-cell:hover {
  filter: brightness(1.2);
  cursor: pointer;
}

.hour-cell {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--textDisabled);
  cursor: pointer;
  position: relative;
}

body.dark .hour-cell {
  border: 1px solid var(--main);
}

.hour-button {
  width: 100%;
  height: 100%;
  min-height: 26px;
  border-radius: 2px;
  transition: all 0.05s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hour-button.disabled {
  background-color: var(--inputDisabled);
}

.hour-button.restricted {
	  background-color: #b90000;
}

.hour-button.available {
  background-color: #00b900;
}

.hour-button.selected {
  outline: 2px solid var(--highlight);
}

body.dark .hour-button.restricted {
  background-color: #ff6666;
}

body.dark .hour-button.available {
  background-color: #66ff66;
}


.hour-button:hover {
  scale: 1.05;
  filter: brightness(1.1);
}
.user-history-main {
	display: flex;
	flex-direction: column;
	height: calc(100% - 10px);
	padding: 5px;
}

.title-bar + .user-history-main {
	height: calc(100% - 44px);
}

.user-history-main table {
	width: 100%;
	margin: 0 10px;
}

.user-history-main tr:first-child td:nth-child(1),
.user-history-main tr:first-child td:nth-child(3),
.user-history-main tr:first-child td:nth-child(5) {
	width: 120px;
}

.user-history-main td:nth-child(1),
.user-history-main td:nth-child(3),
.user-history-main td:nth-child(5) {
	padding-left: 10px;
}

.user-history-main .library-list-scrollable {
	border: none;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}

.user-history-main .ms-DetailsList {
	min-height: 100%;
	overflow: visible;
}

.user-history-main .std-btn {
	width: calc(100% - 24px);
	height: 102px;
}

.user-history-main {
	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
	font-size: 14px;
}

.user-history-footer {
	min-height: 60px;
}

.selected-item-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px;
	position: relative;
}

.selected-item-details-button-container {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 8px;
	right: 8px;
}

.details-columns {
	display: flex;
	gap: 32px;
}

.details-column {
	flex: 1;
	min-width: 280px;
}

.detail-row {
	display: flex;
	margin-bottom: 8px;
	align-items: flex-start;
}

.detail-label {
	font-weight: 600;
	color: var(--text);
	min-width: 100px;
	margin-right: 12px;
	flex-shrink: 0;
}

.detail-value {
	color: var(--text);
	word-break: break-word;
	flex: 1;
}

.notes-label {
	font-weight: 600;
	color: var(--neutralSecondary);
	margin-bottom: 8px;
}

.notes-content {
	padding: 4px 6px;
	background-color: var(--background);
	border-radius: 4px;
	box-shadow: inset 2px 2px 2px var(--shadow);
	white-space: pre-wrap;
	word-break: break-word;
	height: 50px;
	overflow-y: auto;
}

.no-selection {
	color: var(--neutralSecondary);
	font-style: italic;
	text-align: center;
	padding: 20px;
}

.user-history-main .media-list-scrollable {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
	position: relative;
}
.ai-voice-report {
	max-height: calc(100vh - 250px);
}
.most-played-media {
	max-height: calc(100vh - 250px);
}
.duplicate-media-finder {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 10px;
}

.duplicate-media-finder-results {
	flex: 1;
	position: relative;
	min-height: 0;
	gap: 5px;
	overflow: hidden;
	background: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	position: relative;
}

.duplicate-media-finder-spin-pair {
	display: flex;
	flex-direction: column;
	height: 100%;
	align-items: center;
	justify-content: space-evenly;
}

.duplicate-item-header {
	display: flex;
	font-weight: bold;
	background: var(--tabActive);
	padding: 10px;
	border-bottom: 1px solid var(--windowBar);
}

.duplicate-expand-button {
	background: none;
	border: none;
	color: #0078d4;
	cursor: pointer;
	padding: 6px;
	border-radius: 3px;
}

.duplicate-expand-button:hover {
	background: var(--mainHover);
}

.duplicate-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
	/* gap: 5px; */
	border-bottom: 1px solid var(--windowBar);
	padding: 10px;
	/* margin-bottom: 5px; */
	cursor: pointer;
}

.duplicate-item.selected {
	background: var(--highlight);
}

.duplicate-item:not(.selected):hover {
	background: var(--tabActive);
}

.duplicate-item-info {
	display: flex;
	flex-direction: row;
	flex: 1;
	gap: 5px;

	text-overflow: ellipsis;
}

.duplicate-media-finder .ms-DetailsRow:hover {
	background: var(--background) !important;
}

.duplicate-media-finder-clear-button {
	position: absolute;
	bottom: 32px;
	right: 32px;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;

	background: var(--highlight);
	color: white;
	font-weight: bold;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 4px 4px 4px var(--shadow);

	transition: all 0.03s;
}

.duplicate-media-finder-clear-button:hover {
	filter: brightness(1.1);
}

.duplicate-media-finder-clear-button:active {
	box-shadow: none;
	transform: translate(1px, 1px);
}

.packet-container {
	display: flex;
	flex: 1;
	margin: 5px;
	position: relative;
	background-color: var(--background);
}

.SplitPane {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.packet-list {
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.packet-list > div {
	flex: 1;
	min-height: 0;
}

.packet-list .ms-DetailsList {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.packet-list .ms-DetailsList-headerWrapper {
	flex: 0 0 auto;
	position: sticky;
	top: 0;
	z-index: 1;
}

.packet-list .ms-DetailsList-contentWrapper {
	flex: 1;
	overflow-y: auto;
}

.packet-edit {
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.packet-edit-meta {
	flex: 0;
}

.packet-edit-items {
	flex: 1;
	position: relative;
}

.packet-edit-meta table {
	width: 100%;
}

.packet-edit-meta table td:first-child {
	width: 100px;
}

.packet-edit-meta table tr:first-child td:last-child {
	vertical-align: top;
	text-align: center;
}

.packet-edit-meta table tr:first-child td:last-child button {
	display: inline-flex;
}

body.dark .SplitPane .Resizer:not(.horizontal) {
	border-left: 2px solid var(--backgroundDarker);
	border-right: 2px solid var(--backgroundDarker);
	background-color: var(--backgroundDarker);
}

.packet-edit-items {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.packet-edit-items-list {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.packet-edit-items-list > div {
	flex: 1;
	min-height: 0;
}

.packet-edit-items .ms-DetailsList {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.packet-edit-items .ms-DetailsList-headerWrapper {
	flex: 0 0 auto;
	position: sticky;
	top: 0;
	z-index: 1;
}

.packet-edit-items .ms-DetailsList-contentWrapper {
	flex: 1;
	overflow-y: auto;
}

.station-attribute-list {

}

.station-attribute-list .ms-GroupHeader > div {
	height: 24px;
	height: 24px;
}

.station-attribute-list .ms-DetailsRow-cell, .station-attribute-list .ms-List-cell, .station-attribute-list .ms-DetailsRow {
	min-height: 24px;
}

.station-attribute-list .ms-DetailsRow-cell {
	padding: 0;
}

.station-attribute-list .ms-DetailsRow-cell .ms-Label {
	padding: 0;
}

.station-attribute-list .ms-GroupHeader-expand {
	height: 24px;
	width: 20px;
}

.station-attribute-list .ms-GroupSpacer {
	zoom: 25%;
}

.station-attribute-list .ms-GroupHeader-title span + span {
	display: none;
}
.future-moves-container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.future-moves-container .future-moves-container {
	flex-direction: row;
}

.future-moves-list {
	flex: 1;
	overflow: auto;
	position: relative;
}

.future-moves-list > .ms-Viewport {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	background-color: var(--background);
}

.future-moves-sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 10px 10px 5px;
}

.future-moves-dialog .virtual-category-select {
	min-height: 32px;
	padding: 0 8px;
	align-items: center;
}

.future-moves-dialog .settings-expand-collapse-setting {
	align-items: center;
}

.future-moves-dialog .virtual-category-select-container {
	flex-basis: 100%;
}

.future-moves-list .ms-DetailsRow-cell {
  padding-bottom: 0px !important;
}

.future-moves-dialog-settings .settings-expand-collapse-setting {
	align-items: center;
}

.future-moves-dialog-settings .num-of-schedules {
	flex-wrap: nowrap !important;
}

.future-moves-dialog-settings .settings-dialog-group-header{
	display: flex;
	align-items: center;
	gap: 8px;
}
.seg-toolbar button.player-primary {
	border: 2px solid;
	background-color: var(--main);
	border-color: var(--go);
	color: var(--go);
	fill: var(--go);
	width: 45px;
	height: 45px;
	font-size: 25px;
	line-height: 40px;
	text-align: center;
	border-radius: 4px;

	margin: 3px 0;
}

.seg-toolbar button.colour-save {
	border-color: var(--text);
	color: var(--text);
	fill: var(--text);
}

.seg-toolbar-primary {
	color: #333;
}

.seg-toolbar button.colour-pause {
	border-color: #e7c71b;
	color: #e7c71b;
	fill: #e7c71b;
}
/* @keyframes fadeInWave {
	from { opacity: 0 }
	to { opacity: 1 }
} */

.seg-edit {
	flex: 1;
	background: var(--backgroundDarker);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 0px 0px 3px 3px;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;

	position: relative;
}

body.dark .seg-edit {
	background: var(--backgroundDark);
}

.seg-wave {
	flex: 1;
	font-size: 10pt;
	line-height: 17px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.segedit-out, .segedit-in {
	position: relative;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

.seg-border-container {
	flex: 1;
	border-bottom: 1px solid #777;
	position: relative;
	overflow: hidden;
}

.seg-border-container:last-of-type .seg-wave {
	box-shadow: inset 0px -1px 0px #CCC;
}

.seg-border-container > span {
	position: absolute;
	height: 100%;
	left: 0;
}

.seg-border-container > span > .react-draggable {
	position: absolute;
	height: 100%;
}

.segedit-in {
	left: 0;
}

.seg-label-container {
	display: block;
	color: var(--fg);
	height: 1.3em;
	width: 100%;
	overflow-x: hidden;
	position: relative;
}

.seg-label-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg);
	opacity: 0.7;
}

.seg-label-main-section {
	position: absolute;
	height: 100%;
	background: var(--bg);
}

.seg-label {
	z-index: 1;
	position: sticky;
	padding-left: 5px;
	overflow-x: hidden;
	white-space: pre;
	width: 100%;
	-webkit-clip-path: inset(0);
	clip-path: inset(0);
	clip: rect(0px, auto, auto, 0px);
}

.seg-label {
	left: 5px;
}

.seg-wave-container {
	flex: 1;
	margin-top: 17px;
	width: 100%;
	position: absolute;
	height: calc(100% - 18px);
}

.seg-container {
	flex: 1;
	outline: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 66px;
	grid-template-rows: 35px minmax(0, 100%);
	background: var(--window);
}

.popup-layer .seg-container {
	margin-bottom: 16px;
}

.seg-container > .seg-edit, .seg-container > .seg-edit-split-manager {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.seg-edit-split-manager {
	display: flex;
}

.seg-edit-split-menu {
	flex: 0 1 240px;
	margin: 4px 4px 0 0;
	background: var(--background);
	border-radius: 4px;
	position: relative;
}

.seg-edit-split-menu-stations {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px;
	box-sizing: border-box;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	overflow-y: auto;
}

.seg-edit-split-menu .ms-Label {
	padding-top: 2px;
	padding-left: 4px;
}

.seg-edit-split-menu .station-split-button {
	height: 48px;
	flex: 0 0 48px;
	padding: 0 8px;
	border-radius: 2px;
}

.seg-edit-split-menu .station-split {
	display: flex;
	flex: 1;
	gap: 5px;
}

.seg-edit-split-menu .station-split-logo {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 5px;
}

.seg-edit-split-menu .station-split-logo img {
	height: 28px;
}

.seg-edit-split-menu .station-split-logo span {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	text-align: left;
}

.seg-edit-split-menu .station-split-group {
	display: flex;
	align-items: center;
}

.seg-edit-split-menu .station-split-group span {
	line-height: 12px;
	font-size: 12px;
	width: 14px;
	height: 14px;
	border: 1px solid currentColor;
	border-radius: 100%;
}

.seg-edit-split-menu .station-split-actions {
	display: flex;
	align-items: center;
	gap: 5px;
}

.seg-edit-split-menu .station-split-actions .icon-button {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
}

.seg-edit-split-menu .station-split-actions .icon-button i {
	--size: 14px;
	height: var(--size);
	width: var(--size);
	font-size: var(--size);
	line-height: var(--size);
}

.seg-container .seg-toolbar {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}

.login-big {
	max-width: 100%;
}

.seg-toolbar i.ms-icon {
	padding-top: 0 !important;
}

.seg-toolbar {
	display: flex;
	flex-direction: column;
	margin: 0px 2px 2px 2px;
	height: 100%;
	width: 44px;
	justify-content: space-between;
}

.seg-toolbar-top, .seg-toolbar-bottom {
	width: 44px;
	padding: 0px 4px 0px 3px;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;
}

.seg-toolbar button {
	cursor: pointer;
	padding: 0 8px;
}

.save-progress {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.save-progress span {
	display: block;
	padding: 15px;
	font-size: 10pt;
	border-radius: 3px;
	background-color: var(--window);
	box-shadow: 2px 2px 2px var(--shadow);
}

.volume-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.volume-canvas canvas {
	width: 100%;
	height: 100%;
}

.volume-canvas .vol-point {
	width: 13px;
	height: 13px;
	background: #0c0;
	opacity: 0.8;
	position: absolute;
	top: 0;
	left: 0;
	margin: -7px 0 0 -5px;
	border-radius: 100%;
	box-shadow: 0px 0px 0px 1.5px rgba(0, 0, 0, 0.7);
}
.wave-sticky {
	position: absolute;
	left: 5px;
	height: calc(100% - 5px);
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	top: 0;
}

.wave-sticky button {
	flex: 0;
	display: block;
	width: 24px;
	max-height: 24px;
	min-height: 24px;
	padding: 0 0 1px 0;
	font-size: 14px;
	-webkit-text-stroke: 1px #fff;
	text-indent: -1px;
	line-height: 24px;
	border-radius: 3px;
	background: linear-gradient(to bottom, #2DA30D 0%,#299a0b 100%);
	border: none;
	color: #FFF;
	cursor: pointer;
	transform: 0.05s all;
}

.seg-border-container > span {
	width: 100%;
}

.vu-sticky {
	position: absolute;
	right: 5px;
	width: 150px;
	background: rgba(200, 200, 200, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.3);
	height: calc(100% - 5px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	top: 0;
}

.vu-sticky .vu-text {
	flex: 1;
	color: #FFF;
	text-align: right;
	font-size: 20pt;
	padding-right: 5px;
}

.vu-sticky .vu-text p {
	margin: 0;
}

.vu-sticky .vu-box {
	flex: 0;
	border-radius: 3px;
	display: block;
	min-width: 16px;
	margin-right: 5px;
	min-height: 77%;
	height: 77%;
	box-shadow: inset 2px 2px 2px var(--shadow);
	background: linear-gradient(to bottom, #cc0000 14%,#d0d300 27%,#d0d300 34%,#00cc00 51%,#00cc00 100%);
}

.vu-sticky .vu-box .vu-box-el {
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
}

.seg-edit-inline-container .vu-sticky .vu-box {
	min-width: 8px;
}

.seg-edit-inline-container .seg-toolbar button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.seg-edit-inline-container .seg-toolbar button .br-svg-icon {
	width: 80%;
	height: 80%;
}

.wave-sticky button:hover, .seg-toolbar-primary.colour-save:hover {
	background: #299a0b;;
}

.seg-toolbar .player-primary.record i {
	display: flex;
	justify-content: center;
	align-items: center;
}

.wave-sticky button:hover i {
	opacity: 0.6;
}

.seg-top {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	padding: 2px;
	box-sizing: border-box;
}

.seg-top-nav {
	flex: 1;
	display: flex;
}


.seg-top-nav > div {
	flex: 1;
	display: flex;
}

.seg-top-nav > div > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	position: relative;
}

.seg-top-nav > div > span {
	display: flex;
	flex: 0;
	flex-direction: column;
	gap: 2px;
}

.seg-top-nav > div > span i {
	font-size: 10px;
	line-height: 3px;
	flex: 1;
}

.seg-top-nav > div > span button {
	padding: 0 !important;
	min-width: 32px;
	max-height: 16px !important;
	background-color: var(--main);
	border: none;
}

.seg-top-nav > div > span button > div {
	height: 15px !important;
}

.seg-top-nav .nav-seg-bar {
	flex: 1;
	margin-bottom: 1px;
	position: relative;
}

/* .seg-top, .seg-top-settings {
	background: #666;
} */

.nav-seg-scrub-window {
	position: absolute;
	top: 0;
	box-sizing: border-box;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	border: 1px solid #00C;
}

.seg-top-settings {
	padding: 2px 2px 1px 2px;
	box-sizing: border-box;
}

.seg-top-settings button {
	height: 100%;
	min-width: 62px !important;
	width: 62px !important;
}

.seg-toolbar-primary {
	border-radius: 4px;
	border: none;
	width: 32px;
	color: #333;
	background-color: #eee;
}

.seg-toolbar-primary.colour-save {
	background: linear-gradient(to bottom, #2DA30D 0%,#299a0b 100%);
	cursor: pointer;
	color: #FFF;
	font-size: 18px;
	transform: 0.05s all;
}

.seg-toolbar .colour-edit {
	background: #f50000;
	border-color: transparent !important;
	cursor: pointer;
	color: var(--text) !important;
	font-size: 18px;
	transform: 0.05s all;
}

.seg-toolbar .colour-save-yes {
	background: #a2f09c;
	border-color: transparent !important;
	cursor: pointer;
	color: var(--text) !important;
	font-size: 18px;
	transform: 0.05s all;
}

.save-progress-save-label {
	background-color: var(--windowBar) !important;
	color: var(--text) !important;
	align-self: flex-start;
	margin-left: auto;
}


.seg-toolbar .colour-save-no {
	background: #f50000;
	border-color: transparent !important;
	cursor: pointer;
	color: var(--text) !important;
	font-size: 18px;
	transform: 0.05s all;
}

.seg-edit-playhead {
	position: absolute;
	width: 2px;
	height: 100%;
	background: rgba(0, 180, 0, 0.8);
	z-index: 999;
}

.button-overlay-bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
}

.button-overlay-bottom-right button {
	min-width: 32px;
	padding: 4px;
}

.button-overlay-icon {
	width: 24px;
	padding-top: 3px;
}

.seg-edit .wave-replace {
	background: #555;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: 100%;
	height: 100%;
}

.ms-Dialog-main{
	background-color: var(--tab);
	box-shadow: 4px 4px 8px 4px var(--shadow) ;
	border-radius: 4px;
}

.ms-Dialog-main:has(.general-container){
	min-width: 1000px;

}


.seg-edit-no-size:not(.has-z) .ms-Dialog-main {
	position: absolute;
	z-index: var(--z, 9999) !important;
}

.seg-top-settings .ms-Button:disabled {
	display: none;
}

.seg-top-settings {
	background-color: transparent !important;
}

body.dark .seg-edit {
	border-right-color: #999;
}

.wave-sticky {
	pointer-events: none;
}

.wave-sticky button {
	pointer-events: all;
}

.seg-invisible-step{
    width: 0;
    height: 0;
    left: -10000px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.seg-edit-locked-icon {
	position: relative;
	display: inline-flex;
	top: 0px;
	height: 12px;
	width: 12px;
	padding: 2px;
	font-size: 14px;
	background: #606060;
	margin-right: 4px;
	border-radius: 3px;
	align-items: center;
	justify-content: center;
	color: #fff !important;
}

.seg-edit-locked-icon i {
	height: 10px;
}

.seg-edit-split-notes {
	flex: 1;
	height: 100%;
	position: relative;
}

.seg-edit-split-notes .seg-edit {
	height: 100%;
}

.seg-edit-notes {
	flex: 1;
	align-self: stretch;
	display: flex;
	margin-top: 1px;
	align-items: stretch;
	flex-direction: column;
	background: var(--inputDisabled);
	color: var(--text);
	padding: 0px 5px;
}

.seg-edit-split-manager .Resizer.horizontal {
	margin: -1px 0;
}
.seg-edit-notes .ms-Spinner {
	flex: 1;
}

.seg-edit-notes .ms-Label {
	font-size: 12px;
	padding: 2px 0;
}

.seg-edit-notes textarea {
	flex: 1;
	resize: none;
	background: transparent;
	border: none;
	font-size: 14px;
	color: var(--text);
}

.select-station-group {
	display: flex;
	align-items: center;
}

.select-station-group img {
	max-height: 32px;
}

.layer-SEG .title-bar-inner {
	height: 32px;
}

button.segedit-scroll {
	border: none;
	background-color: var(--main);
	color: var(--text);
	fill: var(--text);
	max-width: 45px;
	width: 100%;
	height: 24px;
	font-size: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;

	margin: 3px 0;
}


.seg-wave-container .big-wave {
	flex: unset;
}

.seg-wave-container .big-wave > div {
	height: 100%;
}

.seg-trim-marker {
	position: absolute;
	top: 0;
	width: 14px;
	height: 100%;
	background: var(--go);
	z-index: 1;
}

.seg-trim-marker::before {
	content: 'II';
	line-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.seg-trim-marker.out {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.seg-trim-marker.in {
	margin-left: -14px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.trim-dim-zone {
	position: absolute;
	top: 0;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}
.segue-editor-container {
	width: 80vw;
	display: flex;
	flex-direction: column;
	max-width: 800px;
	min-height: 400px;
}


.resizable-window .title-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-bottom: 2px;
	height: 32px;
	background-color: var(--windowBar);
}

.title-bar .modal-title-text {
	margin-top: 6px;
	flex: 1; 
}

.title-bar .br-svg-icon {
	width: 18px;
	height: 18px;
	margin-left: 5px;
	margin-top: 5px;
}

.title-bar > * {
	padding: 0px 5px 0;
}

.seg-edit-no-size .ms-Dialog-main, .seg-edit-no-size .ms-Dialog-main .ms-Modal-scrollableContent {
	overflow: hidden !important;
}

.seg-edit-no-size .ms-Modal-scrollableContent > div > span div {
	z-index: 999;
}

.seg-edit-no-size .ms-Dialog-main .ms-Modal-scrollableContent > div > div {
	height: 100%;
}

.segue-editor-container {
	width: 100% !important;
	max-width: unset !important;
	max-height: unset !important;
	min-height: 200px;
	height: calc(100% - 54px);
	padding: 10px;
	background: var(--window);
}

.popup-layer .segue-editor-container {
	height: 100% !important;
}

.segue-editor-container-resizing * {
	pointer-events: none;
}

.seg-edit-mob .ms-Panel-scrollableContent, .seg-edit-mob .ms-Panel-content {
	flex: 1;
	display: flex
}

.seg-edit-mob .ms-Panel-scrollableContent {
	flex-direction: column;
}

.seg-edit-mob .ms-Panel-navigation, .seg-edit-mob .ms-Panel-navigation .title-bar, .seg-edit-mob .ms-Panel-navigation .title-bar-inner {
	display: flex;
}

.seg-edit-mob .ms-Panel-content {
	padding: 0px 10px 0px 10px;
}

.seg-edit-mob .title-bar {
	flex: 1;
}

.seg-edit-mob .ms-Panel-content .segue-editor-container {
	height: calc(100% - 15px);
}

.seg-edit-mob .ms-Panel-commands {
	padding-top: 0;
}
/*
 * react-circular-progressbar styles
 * All of the styles in this file are configurable!
 */

.CircularProgressbar {
  /*
   * This fixes an issue where the CircularProgressbar svg has
   * 0 width inside a "display: flex" container, and thus not visible.
   */
  width: 100%;
  /*
   * This fixes a centering issue with CircularProgressbarWithChildren:
   * https://github.com/kevinsqi/react-circular-progressbar/issues/94
   */
  vertical-align: middle;
}

.CircularProgressbar .CircularProgressbar-path {
  stroke: #3e98c7;
  stroke-linecap: round;
  -webkit-transition: stroke-dashoffset 0.5s ease 0s;
  transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar .CircularProgressbar-trail {
  stroke: #d6d6d6;
  /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
  stroke-linecap: round;
}

.CircularProgressbar .CircularProgressbar-text {
  fill: #3e98c7;
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-background {
  fill: #d6d6d6;
}

/*
 * Sample background styles. Use these with e.g.:
 *
 *   <CircularProgressbar
 *     className="CircularProgressbar-inverted"
 *     background
 *     percentage={50}
 *   />
 */
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
  fill: #3e98c7;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
  fill: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
  stroke: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
  stroke: transparent;
}

.ui-log-dashboard-player.dash-play-wide {
	max-width: 114px !important;
}

.ui-log-dashboard-player-container {
	display: flex;
	height: 100%;
	align-items: center;
}

.dashboard-player-number {
	background: var(--mainHover);
}
:not(.qnxt-now) .dashboard-player-number {
	height: 38px;
}

.qnxt-now .dashboard-player-number {
	height: 100%;
}

.dashboard-player-secondary {
	background: var(--background);
	position: relative;
	height: 100%;
}

.dashboard-player-number,
.dashboard-player-secondary {
	color: var(--text) !important;
	border-radius: 3px;
	text-align: center;
	line-height: 0.8em;
	margin-left: 4px;
	flex: 1 1 auto;

	width: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.dashboard-item .playout-time {
	width: 1px;
	min-width: min-content;
}

.dashboard-player-secondary .icon-in-progress {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.hoz-sweeper-label {
	position: absolute;
	top: 3px;
	left: 3px;
}

.dashboard-player-secondary .ui-log-icon {
	padding: 4px 0;
}

.dashboard-player-number .player-label {
	font-weight: bold;
	padding: 0;
	margin: 0;
	line-height: 0.9em;
}

.qnxt-next .player-label {
	top: -1px;
}

.qnxt .log-ui-item {
	height: 100%;
	border: none;
	box-shadow: 2px 2px 2px var(--shadow);
}

.qnxt-now .ui-log-item {
	height: 100%;
	border: none;
	border-radius: 3px;
	box-shadow: 2px 2px 4px var(--shadow);
	text-shadow: 3px 3px 3px var(--shadow);
}

.qnxt-now .log-ui-item span {
	font-size: 13pt;
}

.ui-log-item.dashboard-item td:nth-child(1) {
	padding-left: 10px;
	padding-right: 6px;
	max-width: 7ch;
	width: 26px;
	height: 100%;
}

.ui-log-item.dashboard-item td:nth-child(1).adjust-time-width {
	width: 11ch;
}

.ui-log-item.dashboard-item td:nth-child(2) {
	width: 2.5ch;
	text-align: center;
}

.ui-log-item.dashboard-item td > div > i.ui-log-icon:not(.ui-log-chain-icon) {
	font-size: 16pt;
	display: flex;
	width: 20px;
	height: 20px;
	bottom: 6px;
	left: 8px;
}

.ui-log-item.dashboard-item td > div > i.ui-log-icon:not(.ui-log-chain-icon) svg {
	width: 20px !important;
	height: 20px !important;
}

.dashboard-item-info {
	line-height: 1.6em;
	overflow-x: hidden;
	padding-left: 6px;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left !important;
	width: unset !important;
}

.qnxt-next .dashboard-item-info:nth-child(2) span span {
	display: flex;
	align-items: center;
}

.qnxt-next .dashboard-item-info.compact:nth-child(2) span span {
	flex: 1 1;
	display: flex;
	align-items: center;
	padding-left: 12px;
}

.dashboard-item-info + td {
	/* wtf safari - width: 0px does nothing */
	width: 1px;
	max-width: 0px;
}

.dashboard-item-info span {
	text-overflow: ellipsis;
}

div.dashboard-item .countdown {
	position: relative;
	top: 0;
	right: 0 !important;
}

.dash-btn {
	max-width: 70px !important;
	width: 70px !important;
	margin: 5px !important;
	font-size: 8pt !important;
	height: 70px !important;
	border: none;
	border-radius: 3px;
	box-shadow: 2px 2px 2px var(--shadow);
	background-color: var(--main);
}

.dash-btn-icon-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.dashboard-player-controls {
	display: flex;
	flex-direction: row;
	gap: 4px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 4px;
}

.dashboard-player-controls-callout {
	margin: 5px;
}

.dashboard-item-index-0 .playout-time > span > span,
.dashboard-item-index-0 .playout-time > div > span > span {
	font-size: 30pt !important;
}

.playout-time .ms-TooltipHost > span {
	display: block;
	background: transparent;
}

.qnxt-now .playout-time .ms-TooltipHost > span {
	line-height: 1;
	transform: translateY(-1px); /* ugh */
}

.playout-time .ms-TooltipHost > span > span {
	pointer-events: none;
	/* apparently this breaks the tooltip otherwise.. :^) */
}

.dashboard-item-index-0 .playout-time > div {
	display: block;
}

.ui-dash-icon.ui-log-chain-icon {
	font-size: 30px;
	padding: 0 0 0 8px;
	display: flex;
}

.ui-dash-icon.ui-log-chain-icon svg {
	width: 30px;
	height: 30px;
}

.qnxt-now .ui-dash-icon.ui-log-chain-icon {
	font-size: 40px;
}

.qnxt-now .ui-dash-icon.ui-log-chain-icon svg {
	width: 40px;
	height: 40px;
}

.ui-log-item.dashboard-item .playout-time + td:nth-child(3) {
	width: 0;
}

.ui-log-item.dashboard-item td:nth-child(4):not(.playout-time):not(.dash-chain-icon) {
	display: none;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ui-log-item.dashboard-item td:nth-child(5) {
	width: 1px;
	min-width: min-content;
	text-align: right;
}

.ui-log-item.dashboard-item td:nth-child(6) {
	color: #000 !important;
	width: 5ch;
	text-align: right;
}

.ui-log-item.dashboard-item td.ui-log-icon-base-container {
	width: 2.4ch;
	text-align: center;
}

.dashboard-item {
	flex: 1;
	overflow: hidden;
}

.dashboard-player-secondary i {
	position: relative;
	text-shadow: 0 0 3px #fff;
	-webkit-text-stroke: 2px #dd0;
	z-index: 10;
}
.dashboard-item-index-0 .dashboard-player-secondary-progress {
	position: absolute;
	top: 50%;
	margin-top: -20px;
	margin-left: -20px;
	left: 50%;
	width: 40px !important;
	height: 40px;
}

.dashboard-item-index-0 .dashboard-player-secondary-progress svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
}

.dashboard-item-index-0 .dashboard-player-secondary-progress svg + svg {
	width: 24px;
	height: 24px;
	left: 8px;
	top: 8px;
}

.dashboard-player-secondary-text {
	font-weight: 600;
	position: absolute;
	bottom: 2px;
	right: 2px;
	padding: 2px 4px;
	background: var(--main);
	border-radius: 2px;
	box-shadow: 2px 2px 2px var(--shadow);
}

.ui-log-shimmer-overlay {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(86, 153, 236, 0.8);
	height: 100%;
}

.ui-log-shimmer-overlay.intro {
	background: rgba(4, 222, 0, 0.8);
}

.ui-log-shimmer-overlay.segue,
.ui-log-shimmer-overlay.closing {
	background: rgba(255, 239, 0, 0.8);
}

.ui-log-shimmer-overlay.segue.imminent {
	background: rgba(230, 27, 27, 0.8) !important;
}

.ui-log-shimmer-overlay.finished,
.ui-log-shimmer-overlay.canvas {
	background: none !important;
}

.ui-log-shimmer-overlay.canvas canvas {
	width: 100%;
	height: 100%;
}

.dashboard-item.dashboard-item-index-0 .playout-time ~ .ui-log-icon-base-container {
	padding-right: 10px !important;
}

.dashboard-item .playout-time ~ .ui-log-icon-base-container {
	width: 45px !important;
}

.dashboard-item .auto-trim-time {
	color: #f00;
	font-style: italic;
	font-weight: normal;
}

.ui-log-flexbox {
	position: relative;
}

.log-ui-item {
	position: relative;
	z-index: 1;
	height: 100%;
}

.dashboard-player-secondary.hoz {
	flex-direction: row;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	padding-left: 5px;
	padding-right: 5px;
	width: 64px;
	height: 38px !important;
	font-size: 9pt;

	cursor: default;
}

.dashboard-item-index-0 .dashboard-player-secondary {
	padding-left: 5px;
	padding-right: 5px;
	width: 40px;
	height: 100%;
	font-size: 9pt;
}

.dashboard-player-secondary-hoz-label {
	padding-left: 10px;
}

.secondary-hoz-index {
	font-weight: 600;
	position: absolute;
	top: 2px;
	right: 2px;
	padding: 2px 4px;
	background: var(--main);
	border-radius: 2px;
}

.secondary-hoz-extro {
	position: absolute;
	bottom: 2px;
	right: 2px;
	padding: 2px 4px;
	border-radius: 2px;
	font-weight: 600;
	font-size: 18px;
}

.dashboard-player-number + .dashboard-player-secondary {
	margin-left: 2px;
}

.player-label-head {
	font-size: 10px !important;
	position: relative;
	top: -6px;
}

.player-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 12pt;
}

.player-label .placehold {
	font-size: 10pt;
	color: #aaa;
}

.qnxt-now .dashboard-player-number .player-label {
	font-size: 16pt !important;
	line-height: 12pt;
	text-shadow: 3px 3px 3px var(--shadow);
	padding-bottom: 2px;
}

/* qnxt now chain icon */
.qnxt-now .dashboard-item .dash-chain-icon {
	filter: drop-shadow(2px 2px 2px var(--shadow));
}

.shell-mobile .dashboard-item-index-0 .playout-time > span > span {
	font-size: 20pt !important;
}

.dashboard-item .countdown {
	z-index: 99;
}
.dashboard-item .time-icon-contain {
	padding-right: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.dashboard-item .stretch-icon {
	width: 26px;
}

.dashboard-item .time-icon svg {
	height: 16px !important;
}

.dashboard-item-index-0 .time-icon svg {
	height: 28px !important;
	width: 28px !important;
}

.dashboard-item-index-0 .stretch-icon {
	width: 32px;
}

.qnxt-now .stretch-icon {
	filter: drop-shadow(2px 2px 2px var(--shadow));
}

.qnxt-state .qnxt-col-a table td:nth-child(2) {
	min-width: 20px;
	font-weight: bold;
}

@media screen and (max-width: 1280px) {
	.qnxt-state {
		font-size: 8pt;
	}
}

@media screen and (max-width: 600px) {
	.dashboard-item-index-0 .playout-time > span > span,
	.dashboard-item-index-0 .playout-time > div > span > span {
		font-size: 20pt !important;
	}
}

.qnxt-next .dashboard-item table.log-ui-item,
.qnxt-next .dashboard-item table.log-ui-item tbody {
	display: block;
	height: 100%;
}

.qnxt-next .dashboard-item table.log-ui-item tbody tr {
	display: flex;
	align-items: center;
	height: 100%;
}

.qnxt-next .dashboard-item .dashboard-item-info {
	flex: 1;
	align-self: stretch;
}

.qnxt-next .dashboard-item .dashboard-item-info > span {
	flex-wrap: wrap;
}

.qnxt-next .dashboard-item .dashboard-item-info > span > span {
	flex: 1;
	height: 1.5em;
	display: flex;
	align-items: center;
	min-width: 50%;
	overflow: visible;
}

.qnxt-next .dashboard-item.wrapped .dashboard-item-info > span > span {
	width: 50%;
}

.qnxt-next .dashboard-item table.log-ui-item .spacer {
	width: 26px;
	display: block !important;
}

.qnxt-next .dashboard-item .dash-chain-icon {
	height: 100%;
	width: auto !important;
	aspect-ratio: 1 / 1;
	display: block;
	margin-right: 14px;
	padding-right: 0;
}

.qnxt-next .dashboard-item .dash-chain-icon .svg-resp {
	margin-right: 0px;
	aspect-ratio: 1/1;
	height: calc(100% - 5px);
	min-width: 8px;
}

.qnxt-next .dashboard-item table.log-ui-item .has-dash-wide {
	display: block !important;
}

.dashboard-item-info > span > span > span {
	overflow: hidden;
}

.dashboard-item .overlay {
	position: absolute;
	left: 32px;
	top: 0;
	width: calc(100% - 64px);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	opacity: 0;
	transition: all 0.1s;
	pointer-events: none;
}

.dashboard-item:hover .overlay {
	opacity: 1;
}

.dashboard-item:hover .overlay button {
	pointer-events: all;
}

.ui-log-dashboard-colour {
	position: absolute;
	top: 1px;
	left: 0;
	height: calc(100% - 2px);
	flex: 0 0 1px;
	width: 1px;
}

.login-box-2,
.login-box-3 {
	width: 80vw;
	background-color: rgb(255, 255, 255);
	box-sizing: border-box;
	position: relative;
	text-align: left;
	outline: transparent solid 3px;
	min-height: 100px;
	max-height: 100%;
	overflow-y: auto;
	border-radius: 2px;
	max-width: 450px;
}

.login-box-3 {
	max-width: 900px;
	display: grid;
	grid-template-columns: auto auto;
}


/* .players.container {
	max-height: 100%;
	height: 142px;
} */ 

.empty-player {
	background-color: var(--background) !important;
	display: flex;
	min-height: 5.4em;
	justify-content: center;
	position: relative;
	align-items: center;
	box-shadow: inset 2px 2px 2px var(--shadow);
}

.news-story-meta .empty-player {
	box-shadow: none;
}

.empty-player .player-label {
	opacity: 0.5;
	text-align: center;
}

.player.has-cart {
	display: grid;
	grid-template-columns: auto 50px;
	/* grid-template-rows: 3fr 1fr 1.5fr; /* auto 1.3em 39px; */
	grid-template-rows: 3fr 1.3em 2.3em;
	position: relative;
	box-shadow: 2px 2px 1px 2px var(--shadow);
}

.player .waveform {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 3;
	position: absolute;
	z-index: 0;
	opacity: 0.15;
	height: calc(100% + 1.3em);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0 7px;
	width: 100%;
}

.player .player-cart {
	margin: 5px 0 0 8px;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 2;
	position: relative;
	z-index: 1;

	display: block;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.player .player-cart img {
	float: left;
}

.player .player-cart span {
	display: block;
}

.player .volume {
	grid-column-start: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-end: 3;
	position: relative;
	z-index: 1;
}

.player .volume .ms-Slider {
	width: 38px;
	height: 100%;
	margin-right: 0px;
	margin-top: -2px;
	float: right;
}

.player .label,
.player .controls {
	grid-column: 1 / 3;
}

.player .controls {
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 2px;
}

.controls-stack {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-bottom: 5px;
}

.player .controls > .controls-stack > span,
.player .controls > .controls-stack > .ms-ProgressIndicator {
	flex: 1;
}

.player .controls > button {
	flex-shrink: 0;
	height: 32px;
	width: 32px;
	margin-bottom: 4px;
	margin-right: 8px;
	border: 2px solid #ca0000;
	background: var(--main);
	border-radius: 5px;
	box-shadow: 2px 2px 2px var(--shadow);
	color: #ca0000;
	fill: #ca0000;
	padding: 1px 4px;
	cursor: pointer;
}

.player .controls > button:hover {
	background: var(--mainHover);
}

.player .controls > button:active {
	animation: pushIn 0.2s forwards;
}

.player .label {
	margin: 0 3px;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}

.player .controls > .controls-stack > span > .ms-ProgressIndicator,
.player .controls > .controls-stack > .ms-ProgressIndicator {
	margin: 0 8px !important;
	width: calc(100% - 16px);
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.ms-ProgressIndicator-itemProgress {
	background-color: transparent;
	padding: 0 !important;
	height: 18px !important;
	border-radius: 2px;
}

.ms-ProgressIndicator-progressTrack,
.ms-ProgressIndicator-progressBar {
	height: 18px !important;
}

.player .controls > span > .ms-ProgressIndicator .qae-icon {
	left: 2px;
}

.player .controls > span > .ms-ProgressIndicator .player-time-icon {
	right: 2px;
}

.player .controls > span > .ms-ProgressIndicator .qae-icon,
.player .controls > span > .ms-ProgressIndicator .player-time-icon {
	position: absolute;
	top: -1px;
	width: 14px;
	height: 14px;
}

..ms-ProgressIndicator {
}

.player .controls .ms-Slider {
	margin: -5px 0 -10px 0;
}

.player .player-cart:hover ~ .overlay {
	display: flex;
}

.player .overlay:hover {
	display: flex;
}

.player.playing:not(:hover) .overlay {
	opacity: 0;
}

.mobile-players .player.playing .overlay {
	opacity: 1 !important;
}

.player .countdown,
.dashboard-item .countdown {
	position: absolute;
	top: 8px;
	right: 36px;
	width: 42px;
	height: 42px;
	background: var(--go);
	border: 2px solid var(--border);
	border-radius: 10px;
	color: #000;
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	font-size: 19pt;
}

.player .countdown {
	z-index: 9;
}

.dashboard-item .countdown.vu {
	top: -5px;
	right: 10px;
}

.player .countdown.vu {
	right: 50px !important;
}

.player .countdown.large-value,
.dashboard-item .countdown.large-value {
	font-size: 14pt;
	right: 42px;
}

.player .countdown.pre-intro,
.dashboard-item .countdown.pre-intro {
	background: var(--stop) !important;
}

.player .countdown.intro,
.dashboard-item .countdown.intro {
	background: var(--go);
}

.player .countdown.segue,
.dashboard-item .countdown.segue {
	background: var(--sweeper);
	border-radius: 100%;
}

.player .countdown.segue.imminent,
.dashboard-item .countdown.segue.imminent {
	background: var(--stop);
	border-radius: 100%;
}

.player .overlay,
.player .load-overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 32px;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.1s;
}

.player.flex-1 .overlay {
	z-index: 1;
}

.player .load-overlay {
	z-index: 99;
	pointer-events: all;
	background: rgba(255, 255, 255, 0.8);
	width: 100%;
	height: 100%;
	bottom: unset;
	right: unset;
}

body.dark .player .load-overlay {
	background: rgba(0, 0, 0, 0.7);
}

.player .overlay > * {
	pointer-events: all;
	position: relative;
	z-index: 9;

}

.player .overlay:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	-moz-pointer-events: none;
}

.overlay > button, .player-secondary-basic {
	border: 2px solid #818181;
	background: var(--main);
	border-radius: 5px;
	box-shadow: 2px 2px 2px var(--shadow);
	color: #818181;
	fill: #818181;
	height: 38px;
	margin: 0 2px;
	width: 38px;
	padding: 1px 4px;
	cursor: pointer;
}

.overlay > button:hover, .player-secondary-basic:hover {
	background: var(--mainHover);
}

.overlay > button:active, .player-secondary-basic:active {
	animation: pushIn 0.2s forwards;
}

.overlay button.player-primary {
	border-color: var(--go);
	color: var(--go);
	fill: var(--go);
	width: 55px;
	height: 55px;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	position: relative;
	z-index: 999;
}

.overlay button.colour-play svg {
	height: 30px !important;
	padding-top: 10px;
	padding-left: 2px;
}

.overlay button.colour-pause,
.overlay button.fired {
	border-color: #e7c71b;
	color: #e7c71b;
	fill: #e7c71b;
}

.overlay button.player-secondary, .player-secondary-basic {
	border-color: #ca0000;
	color: #ca0000;
	fill: #ca0000;
	position: relative;
	z-index: 999;
}

.admin-shell .player .overlay {
	bottom: 12px;
}

.admin-shell .player .overlay button {
	width: 32px;
	height: 32px;
	line-height: 32px;
}

.admin-shell .player .overlay button svg {
	height: unset !important;
	padding: unset;
}

/* Compact player */

.compact-player {
	overflow: hidden;
	flex: 1 1 0px;
	height: unset !important;
	min-height: unset !important;
}

.local-players-container .empty-player {
	min-height: 4.4em;
}

.empty-player.compact-player{
	border-radius: 3px;
	cursor: pointer;
}

.compact-player:not(.empty-player) {
	display: flex;
	justify-content: space-between;
	box-shadow: 2px 2px 1px 2px var(--shadow);
	border-radius: 3px;
	background: var(--main);

}

.compact-player-inner {
	display: flex;
	flex-direction: column;
	margin: 2px 4px;
	flex: 1;
	overflow: hidden;
}

.player.has-cart.compact-player{
	align-items: flex-end;
}

.compact-player-info-buttons-pair {
	display: flex;
	gap: 5px;
	flex-grow: 1;
}

.compact-player-info {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex: 1;
}

.compact-player-info .title-text {
	font-size: 10pt;
	font-weight: bold;
	display: block;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.compact-player-info .artist-text {
	font-size: 8pt;
	font-weight: 600;
}

.compact-player-buttons {
	width: 128px;
	height: 34px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2px;
}

.compact-player-buttons button {
	border: 2px solid #818181;
	background: var(--main);
	border-radius: 5px;
	box-shadow: 2px 2px 2px var(--shadow);
	color: #818181;
	fill: #818181;
	height: 32px;
	margin: 0 2px;
	width: 32px;
	padding: 1px 4px;
	cursor: pointer;
}

.compact-player-buttons button.hidden{
	display: none;
}

.compact-player-buttons .player-primary{
	border-color: var(--go);
	color: var(--go);
	fill: var(--go);
}

.compact-player-buttons .player-secondary{
	border-color: #ca0000;
	color: #ca0000;
	fill: #ca0000;
}

.compact-player-buttons button.colour-pause,
.compact-player-buttons button.fired {
	border-color: #e7c71b;
	color: #e7c71b;
	fill: #e7c71b;
}

.compact-player .label{
	display: flex;
	justify-content: space-between;
	flex: 0 1 15px;
	line-height: 5px;
}

.compact-player .time-text {
	font-size: 8pt;
	text-align: center;
}

.compact-player .controls {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 12px;
}

.compact-player-vol {
	width: 20px;
	/* height: 64px; */
	height: 100%;
}

.compact-player-vol .ms-Slider {
	width: 20px;
	height: 100%;
}

.compact-player-vol .ms-ProgressIndicator-itemProgress {
	height: 12px !important;
}

.compact-player-vol .ms-Slider-slideBox{
	padding: 2px 0px 12px 0px;
}


.news-shell .media-recorder button {
	height: 42px;
	width: 42px;

	margin-top: 15px; 

	display: flex;
	align-items: center;
	justify-content: center;
}

.player-secondary-basic{
	cursor: pointer;
	position: absolute;
	display: flex;
	align-self: center;
	left: calc(50% - 30px);
	top: calc(max(40% - 30px, 10px));
	width: 55px;
	height: 55px;
}

.login-box-2 > .controls {
	padding: 10px;
}

.player .overlay .hide {
	opacity: 1;
	transition: all 0.2s;
}

.player.playing .overlay .hide {
	opacity: 0;
	cursor: default;
}

.watermark-container {
	position: absolute;
	top: 0;
	bottom: 2.5em;
	right: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.1s;
	opacity: 0.4;

	pointer-events: none;
	-moz-pointer-events: none;
	z-index: 999;
}

.watermark-container > span {
	font-size: 32pt;
	margin-bottom: 8px;
}

.player.playing:not(:hover) .watermark-container {
	opacity: 0.4;
}

.player .title-text {
	font-size: 12pt;
	font-weight: bold;
	display: block;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.player .artist-text {
	font-size: 10pt;
	font-weight: 600;
}

.player .time-text {
	display: block;
	font-size: 10pt;
	/* min-width: 8em; */
	text-align: center;
	padding: 0 5px;
}

.player .label > *:first-child .time-text {
	text-align: left;
}

.player .label > *:last-child .time-text {
	text-align: right;
}

.player-progress-track {
	background: rgba(0, 0, 0, 0.2);
}

.controls .ms-ProgressIndicator-itemProgress {
	position: relative;
	overflow: hidden;
}

.controls .ms-ProgressIndicator-progressTrack {
	position: absolute;
	background-color: var(--background);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 0 2px 2px 0;
	width: 100%;
}

.controls .ms-ProgressIndicator-progressBar {
	background: var(--highlight);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 2px 0 0 2px;
	position: absolute;
}

.vu-inline {
	position: absolute;
	right: 10px;
	width: 48px;
	height: calc(100%);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	top: 5px;
}
.vu-inline .vu-box {
	flex: 0;
	border-radius: 2px;
	display: block;
	min-width: 8px;
	margin-right: 4px;
	min-height: 77%;
	height: 77%;
	box-shadow: inset 2px 2px 2px var(--shadow);
	background: linear-gradient(
		to bottom,
		#cc0000 14%,
		#d0d300 27%,
		#d0d300 34%,
		#00cc00 51%,
		#00cc00 100%
	);
}

.vu-inline .vu-box .vu-box-el {
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
}

.player-aligned-btn {
	margin: 2px;
	width: 50px;
	border-radius: 5px;
	background: linear-gradient(to bottom, #f4f4f4 0%, #e1e1e1 50%);
	border: 1px solid #707070;
}

.player-aligned-btn:hover {
	background: linear-gradient(to bottom, #ebf7fe 0%, #c1e7fd 50%);
	border-color: #2c628b;
}

.player-aligned-btn:active {
	background: linear-gradient(to bottom, #deeaf0 0%, #a8c8d8 50%);
}

.player-aligned-btn i {
	opacity: 0.7;
}

.player .volume .ms-Slider .ms-Slider-container {
	position: absolute;
	bottom: -15px;
}

.fader-vol .ms-Slider .ms-Slider-container {
	height: calc(100% - 5px);
	position: relative;
	right: 10px;
}

.ducked-vol .ms-Slider .ms-Slider-container {
	height: calc(100% - 15px);
	position: relative;
	right: 10px;
}

.fader-vol .ms-Slider *,
.player .controls .ms-Slider * {
	animation: none;
	transition: none;
}

.fader-vol ~ span .countdown {
	right: 38px;
}

.fader-vol .ms-Slider-thumb {
	width: 32px;
	border-radius: 4px;
	left: -14px;
}

.fader-vol .ms-Slider-thumb:before,
.fader-vol .ms-Slider-thumb:after {
	content: '';
	position: absolute;
	top: 3px;
	border-top: 2px solid #ccc;
	left: 5px;
	width: calc(100% - 10px);
}

.fader-vol .ms-Slider-thumb:after {
	top: 7px;
}

.players.container .br-live-ribbon {
	height: 55px;
	flex: 0 0 55px;
	margin-bottom: 0;
}

.players.container .br-live-ribbon .my-audio-controls:first-of-type {
	flex: 1;
}

.players.container .br-live-ribbon .my-audio-controls:first-of-type .ms-Button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.players.container .br-live-ribbon .my-audio-controls:first-of-type .ms-Button-flexContainer {
	flex-direction: row;
}

.players.container .br-live-ribbon .ms-Button-textContainer span {
	font-size: 12px;
	line-height: 10px;
}

.players.container .br-live-ribbon .ui-ribbon-label {
	display: none;
}

.players.container .br-live-ribbon .ui-ribbon-section-icons {
	height: 100%;
}

.players.container .br-live-ribbon .my-audio-controls {
	min-height: 50px;
}

.local-players-container{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0px 10px 0px 0px;
	gap: 4px;
}

.duck-indicator {
	margin: 2px;
	border-radius: 2px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	height: 14px;
	color: black;
	background-color: rgb(255, 170, 0);
}

.mute-indicator {
	position: absolute;
	padding: 5px;
	top: 0px;
	right: 50px;
	margin: 2px;
	border-radius: 2px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	height: 24px;
	width: 24px;
	font-size: 24px;
	color: white;
	background-color: rgb(200, 0, 0);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}

#autoplay-prompt {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	display: flex;
	align-items: center;
	cursor: pointer;
	justify-content: center;
}

#browser-audio-tag-container {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
}


.compact-player-info span {
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1em;
}

.qnxt {
	display: grid;
	min-height: 178px;
	grid-template-columns: 150px 130px 1fr 48px 130px;
	grid-template-rows: 15fr 11fr 11fr 30px;
	border-bottom: 1px solid var(--border);
	background: var(--background);
	border-radius: 3px;
	box-shadow: inset 2px 2px 2px var(--shadow);
	outline: none;
	gap: 6px;
	margin: 2px 6px 6px 6px;
	padding: 6px;
	z-index: 1;
}

.qnxt-dashboard-players {
	grid-column: 2 / 5;
	grid-row: 1 / 4;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.qnxt-dashboard-row {
	display: flex;
	gap: 6px;
	flex: 11 11 44px;
}

.qnxt-dashboard-row-1 {
	flex: 15 15 60px;
}

.qnxt-dashboard-item {
	flex: 1;
}

.qnxt-now td > span,
.qnxt-now td > span * {
	font-weight: bold !important;
}

.qnxt .ui-log-item {
	border: none !important;
}

.qnxt-now .ui-log-item {
	margin: 0;
}

.qnxt-next-items .ui-log-item {
	padding: 0;
	margin: 0;
	flex: 1;
	border-radius: 3px;
	box-shadow: 2px 2px 4px var(--shadow);
}

.qnxt-next-items .log-ui-item {
	border-spacing: 0;
}

.qnxt-clock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14pt;
	font-weight: bold;
	padding-right: 10px;
	font-variant-numeric: tabular-nums;
	border-radius: 3px;
}

.qnxt-next-items {
	display: flex;
	margin: 0;
}

.is-app .qnxt:not(.qnxt-compact) .qnxt-image {
	display: none;
}

.is-app .qnxt:not(.qnxt-compact) .qnxt-now,
.is-app .qnxt:not(.qnxt-compact) .qnxt-next-1,
.is-app .qnxt:not(.qnxt-compact) .qnxt-next-2 {
	grid-column-start: 1;
}

.qnxt-compact {
	grid-template-rows: 58px 42px 42px auto;
}

.qnxt-compact .qnxt-now .ui-log-item {
	height: 58px;
}

.qnxt-compact .qnxt-next-items .ui-log-item {
	height: 42px;
}

.qnxt-next-items .ui-log-item td:nth-child(3) {
	line-height: 1em;
}

.qnxt-player-control {
	flex-basis: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.shell-mobile .qnxt-player-control {
	flex-basis: 28px;
}

.qnxt-player-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--mainHover);
	box-shadow: 2px 2px 2px var(--shadow);
	color: var(--text);
	font: inherit;
	font-size: 1.5em;
	cursor: pointer;
}

.qnxt-player-button:hover,
.qnxt-player-button:focus-visible {
	background: var(--tabActive);
}

.qnxt-controls {
	display: flex;
	grid-column: 5 / 6;
	grid-row: 1 / 2;
}

.qnxt-next-stop,
.qnxt-remaining {
	background: var(--backgroundDark);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	font-weight: bold;
	font-family: monospace;
}

.qnxt-next-stop {
	grid-column: 5 / 6;
	grid-row: 2 / 3;
	flex-direction: column;
	font-size: 10pt;
}

.qnxt-next-stop .qnxt-next-stop-label {
	position: absolute;
	top: 2px;
	left: 3px;
	font-size: 8pt;
}

.qnxt-next-stop .qnxt-next-stop-time {
	position: absolute;
	bottom: 3px;
	right: 3px;
	font-size: 12pt;
}

.qnxt-remaining {
	grid-column: 5 / 6;
	grid-row: 3 / 4;
}

.qnxt-remaining .qnxt-remaining-label {
	position: absolute;
	top: 2px;
	left: 3px;
	font-size: 8pt;
}

.qnxt-remaining .qnxt-remaining-time {
	position: absolute;
	bottom: 3px;
	right: 3px;
	font-size: 12pt;
}

.qnxt-image {
	grid-row: 1 / 4;
	background: var(--main);
	border-radius: 5px;
	box-shadow: 2px 2px 2px var(--shadow);
	position: relative;
}

.qnxt-image img {
	background: var(--tabActive);
	box-sizing: border-box;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
}

.qnxt-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 5px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.qnxt-image:hover .qnxt-image-overlay {
	display: flex;
}

.qnxt-image-overlay:hover {
	opacity: 1;
}

.qnxt-image-info-icon {
	font-size: 32px;
	color: white;
}

.qnxt-image-controls {
	grid-column: 1 / 2;
	grid-row: 4 / 5;
}

.qnxt-state {
	grid-column: 2 / 6;
	grid-row: 4 / 5;
}

.qnxt-event {
	grid-column: 5 / 6;
	grid-row: 4 / 5;
}

.qnxt-image-controls,
.qnxt-state,
.qnxt-event {
	display: flex;
	align-items: center;
	justify-content: center;
}

.qnxt-standby-dashboard {
	background: var(--background);
	display: flex;
	height: calc(100% - 28px);
	margin-right: 2px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
	gap: 20px;
}

.qnxt-standby-dashboard .power-button {
	height: 100px;
	width: 100px;
	border-radius: 3px;
	margin-left: 20px;
}

.qnxt-standby-text {
	font-size: 20pt;
	font-weight: bold;
	color: #777;
}

.qnxt-hide-image .qnxt-image {
	display: none;
}

.qnxt-hide-image .qnxt-now,
.qnxt-hide-image .qnxt-next {
	grid-column: 1 / 4 !important;
}

.qnxt-controls .ms-Button {
	flex: 1;
	height: 100%;
	border-radius: 4px;
	border: none;
	background-color: var(--main);
	box-shadow: 2px 2px 2px var(--shadow);
}

.qnxt-controls .ms-Button:active {
	background-color: var(--mainHover);
	animation: pushIn forwards 0.05s;
}

.qnxt-event i {
	padding: 0 0 0 5px;
}

.qnxt-event.compact {
	grid-column: 4 / 5;
}

.qnxt-state,
.qnxt-event {
	border: 1px solid var(--border);
	box-shadow: inset 2px 2px 2px var(--shadow);
	border-radius: 3px;
	background: var(--backgroundDark);
	padding: 0 3px;
	font-size: 10pt;
	text-align: center;
}

.qnxt-state {
	display: flex;
	flex-direction: row;
	font-weight: bold;
}

.qnxt-state .qnxt-col-mid {
	flex: 1;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qnxt-state table > tbody > tr > td:nth-child(3) {
	width: 1%;
	white-space: nowrap;
}

.qnxt-state .qnxt-col-b table {
	table-layout: auto;
}

.qnxt-state .qnxt-col-b table td:nth-child(1) {
	text-align: right;
}

.qnxt-state .qnxt-col-b table td:nth-child(2) {
	min-width: 30px;
	max-width: 80px;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
}

.oac-menu {
	outline: none;
	background: var(--tabActive);
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.oac-button {
	display: block;
	border: none;
	border-radius: 3px !important;
	height: 25px;
	margin: 3px 8px 3px 0;
	font-size: 9pt;
	color: #222;
	transition:
		background-color 0.1s ease,
		color 0.1s ease;
}

td.underrun,
td.underrun + td {
	font-weight: bold;
	color: #c00;
}

.qnxt-callout {
	padding: 5px;
}

.qnxt-callout .ms-Callout-main > span {
	padding: 5px;
	display: inline-block;
	font-size: 9pt;
}

.qnxt .ms-Button.hour-mode {
	display: none;
}

.qnxt .ms-Button.hour-mode img {
	height: 32px;
}

.shell-mobile .qnxt .ms-Button.hour-mode {
	display: block;
}

.shell-mobile .qnxt-left + .qnxt-station-name {
	padding-left: 40px;
}

.shell-mobile .qnxt .ms-Button.power-button {
	display: none;
}

.shell-mobile .qnxt {
	box-sizing: border-box;
	width: calc(100% - 12px);
	height: auto;
	min-height: 0;
	grid-template-columns: minmax(0, 1fr) 28px 96px;
	grid-template-rows: 60px 44px 44px 30px minmax(22px, auto);
}

.shell-mobile .qnxt-dashboard-players {
	grid-column: 1 / 3;
	height: 100%;
	max-height: 100%;
}

.shell-mobile .qnxt-now .ui-log-item {
	height: 100% !important;
}

.shell-mobile .qnxt-next-1,
.shell-mobile .qnxt-next-2 {
	grid-column: 1 / 2 !important;
	margin: 0;
	height: 100%;
}

.shell-mobile .qnxt-next-1 {
	grid-row: 2 / 3;
}

.shell-mobile .qnxt-next-2 {
	grid-row: 3 / 4;
}

.shell-mobile .qnxt-image {
	display: none;
}

.shell-mobile .qnxt-player-control {
	grid-column: 2 / 3;
}

.shell-mobile .qnxt-player-control.now {
	grid-row: 1 / 2;
}

.shell-mobile .qnxt-player-control.next1 {
	grid-row: 2 / 3;
}

.shell-mobile .qnxt-player-control.next2 {
	grid-row: 3 / 4;
}

.shell-mobile .qnxt-controls {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	margin: 0;
	border: none;
}

.shell-mobile .qnxt-image-controls {
	grid-column: 1 / -1;
	grid-row: 4 / 5;
}

.shell-mobile .qnxt-state {
	grid-column: 1 / -1 !important;
	grid-row: 5 / 6;
}

.shell-mobile .qnxt-next-stop {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.shell-mobile .qnxt-remaining {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}

.shell-mobile .qnxt.qnxt-read-only {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 60px 44px 44px minmax(22px, auto);
}

.shell-mobile .qnxt.qnxt-read-only .qnxt-now {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
}

.shell-mobile .qnxt.qnxt-read-only .qnxt-next-1 {
	grid-row: 2 / 3;
}

.shell-mobile .qnxt.qnxt-read-only .qnxt-next-2 {
	grid-row: 3 / 4;
}

.shell-mobile .qnxt.qnxt-read-only .qnxt-state {
	grid-column: 1 / -1 !important;
	grid-row: 4 / 5;
}

.shell-mobile .qnxt-state table td:nth-child(1) table td:nth-child(1) {
	width: 50px;
}

.shell-mobile .qnxt-state > table {
	table-layout: unset;
}

.shell-mobile .qnxt-state table td:nth-child(3) table td:nth-child(1) {
	width: 40px;
}

@media screen and (max-width: 600px) {
	.qnxt {
		grid-template-columns: 1px 1fr 100px;
	}

	.qnxt-image {
		display: none;
	}

	.qnxt-player-button {
		font-size: 1em;
	}

	.qnxt-now .log-ui-item span {
		font-size: 11pt;
	}

	.dashboard-item-info > span > span > span {
		font-size: 10pt;
	}
}

.dashboard-item-info {
	position: relative;
}

.dashboard-item-info > span {
	position: absolute;
	height: 100%;
	top: 0;
	justify-content: center;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	min-width: 100%;
}

.qnxt-next .dashboard-item-info.compact > span {
	align-items: center;
	flex-direction: row;
}

.dashboard-item-info > span > span {
	max-width: 100%;
	overflow: hidden;
}

.qnxt-left .ui-ribbon-section {
	height: auto;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.qnxt-left .ui-ribbon-label {
	display: none;
}

.qnxt-left {
	flex: 1;
	margin: 3px 0px 0px 0px;
}

.qnxt-left .ui-ribbon-section-icons {
	height: unset !important;
}

.qnxt-left .ms-Button--action {
	height: 24px !important;
	line-height: 24px !important;
	width: 50px !important;
	margin: 0 !important;
}

.qnxt-left .ui-ribbon-button .ui-ribbon-button-inside {
	height: 24px !important;
}

.qnxt-left .station-info-logo {
	height: 20px;
	width: 20px;
	margin: 0 4px;
}

.qnxt-go-button-ready {
	animation: pulsate 1.2s ease infinite;
}

.qnxt-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.qnxt-station {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 2px 0 0 10px;
}

.qnxt-station-name {
	font-size: 14pt;
	font-weight: bold;
}

.qnxt-station-tagline {
	font-weight: 600;
}

.qnxt .ui-ribbon-button-icon {
	height: 22px;
}

@keyframes pulsate {
	0% {
		transform: scale(1);
		filter: drop-shadow(0px 0px 0px #00cc00);
	}
	50% {
		transform: scale(1.1);
		filter: drop-shadow(0px 0px 3px #00cc00);
	}
	100% {
		transform: scale(1);
		filter: drop-shadow(0px 0px 0px #00cc00);
	}
}

/* Light mode */
:root {

  --window: #ffffff;
  --windowBar: #e0e0e0;
  --windowBarAlt: #d0d0d0;

  --mainHover: #f7f7f7;
  --main: #f7f7f7;

  --tabActive: #f0f0f0;
  --tab: #bfbfbf;

  --inputDisabled: #888;

  --background: #d7d7d7;
  --backgroundDark: #c2c2c2;
  --backgroundDarker:#8f8f8f;

  /* Additional colours */
  --text: #111;
  --textDisabled: #555;
  --textError: #ff0000;
  --border: transparent;
  --shadow: #00000040;

  --primary: #2f85c7;
  --primaryHover: #3a96dd;
  --destructive: #ff2424;
  --destructiveHover: #ff0000;

  --go: #059949;
  --goAlt: #090;

  --stop: #E42A2B;
  --stopAlt: #aa0000;

  --sweeper: #DAA520;

  --highlight: #3a96ff;
  --highlightHover: #5ca8ff;

}


/* Dark mode */
body.dark {

  --window: #3b3f43;
  --windowBar: #4e5257;
  --windowBarAlt: #5b6066;

  --mainHover: #3d4247;
  --main: #3c4247;

  --tabActive: #2a2d31;
  --tab: #222529;

  --inputDisabled: #212427; 

  --background: #181b1d;
  --backgroundDark: #141617; 
  --backgroundDarker: #101213;

  /* Additional colours */
  --text: #f1f3f5;
  --border: transparent;
  --textDisabled: #ced4da;

  --go: #059949;
  --goAlt: #0c0;

  --stopAlt: #ff0000;

  color-scheme: dark;
}


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-x: none;
}

html, body, .library-left-tab, .ms-Viewport, [data-is-scrollable] {
  overscroll-behavior-x: contain;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

@keyframes barrel-roll {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}


.no-motion, .no-motion * {
  transition: none !important;
}



.fade-anim {
  animation-name: fade-anim;
  animation-timing-function: cubic-bezier(.1,.9,.2,1);
  animation-duration: 0.367s;
  animation-delay: 0.05s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fade-anim {
  from {
    opacity: 0;
    transform: scale3d(1.05,1.05,1);
  }
  to {
    opacity: 1;
    transform: scale3d(1,1,1);
  }
}