:root {
	--defaultbackground:rgba(0,0,0,1)
}

body {overflow-x:hidden;overflow-y:hidden;}
div.panelwrapper {display: flex;align-items: stretch;
	position: absolute;
	z-index: 10;box-sizing: border-box;padding: 0;margin: 0;
	}

.hidepanels div.panelwrapper{opacity: 0;}

.dragging div.panelwrapper:after {content: "";
	position: absolute;top: 0;bottom: 0;left: 0;right: 0;
	transform-origin: 0 0;
	z-index: 10;box-sizing: border-box;
	border: 2px dashed yellow;pointer-events: none;
}

/*div.panelwrapper:after {content:"";pointer-events:none;z-index: 0;
	position:absolute;top:0;left:0;bottom:0;right:0;
	background: #000;
	transform-origin:0;box-sizing:border-box;width:100%;height:100%;}

div.panelwrapper:before {content: "";
	position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;
	z-index: 9;box-sizing: border-box;
	border: 0px solid #fff;pointer-events: none;}*/

div.panelwrapper div.border {
	position: absolute;top: 0;bottom: 0;left: 0;right: 0;
	transform-origin: 0 0;
	z-index: 9;box-sizing: border-box;border: 0px solid #fff;pointer-events: none;}
div.panelwrapper div.back {
	background: #000;
	transform-origin: 0 0;
	position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;
	z-index: 0;box-sizing: border-box;border: 0px solid #fff;pointer-events: none;}


.borders div.panelwrapper div.border {border: 5px solid #fff;}


/*.borders div.panelwrapper:before {content: "";
	position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;
	z-index: 9;
	box-sizing: border-box;border: 5px solid #fff;pointer-events: none;}

*/
.panelborder div.panelwrapper {border: 4px solid #fff;}
.panelborder div.panelwrapper:after {border: 4px solid #fff;}
div.panelwrapper div.panel {
	transform-origin: 0 0;
	position: absolute;top: 0;left: 0;right: 0;bottom:0;
	height: 100%;width: 100%;
	display: flex;align-items: center;
	flex-wrap: wrap;justify-content: center;text-align: center;
	box-sizing: border-box;padding: 5px;font-family: Arial;font-size: 18px;
	overflow: hidden;background: transparent;}
div.panelwrapper div.panel>div {flex-basis:100%;}
div.panelwrapper div.panel>span.divdivider {flex-basis:100%;width:100%;height:0}
div.panelwrapper div.panel.old {z-index: 1;opacity: 0;}
div.panelwrapper div.panel.new {z-index: 2;}

div.panelwrapper div.panel.fadein {
	animation: fadein .35s linear;
}
div.panelwrapper div.panel.fadeout {
	animation: fadeout .35s linear;
	opacity: 0;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeout {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}


div.panelwrapper div.panel div {/*width: 100%;*/
	overflow-x: hidden;overflow-y: hidden;white-space: nowrap;
	padding: 0 .2em}

div.panelwrapper div.panel div ::-webkit-scrollbar {display: none;}




	div.panel span.hidden {display: none;}
	div.panel span.placeholder {opacity: 0;}
	div.panel span.role {text-transform: uppercase;font-weight: 700 !important;font-family: 'Arial Narrow' !important}
	div.panel span.role:after {content: ":";}





div.panelwrapper div.handle_skew {display: block;position: absolute;
	width: 10px;height: 10px;
	transform-origin: 50%;
	z-index: 100;overflow: visible;
	top: 0;left: 0;}
div.panelwrapper div.handle_skew {overflow: visible !important;}
div.panelwrapper div.handle_skew:after{content: "";
	position: absolute;
	width: 10px;height: 10px;border-radius: 5px;
	background-color: yellow;
}
div.panelwrapper div.handle_skew.tl:after{content: "";
	left: 0;
}
div.panelwrapper div.handle_skew.tr:after{content: "";
	left: -10px;
}
div.panelwrapper div.handle_skew.br:after{content: "";
	left: -10px;top: -10px;
}
div.panelwrapper div.handle_skew.bl:after{content: "";
	top: -10px;left: 0;
}
/*div.panelwrapper div.handle_skew.left {left:-5px;}
div.panelwrapper div.handle_skew.right {right:-5px;}
div.panelwrapper div.handle_skew.top {top:-5px;}
div.panelwrapper div.handle_skew.bottom {bottom:-5px;}*/

/* ========== AUTOCUE PANEL STYLES ========== */

.panelwrapper.autocue-panel {
    overflow: hidden;
    border: 2px solid #777;
    box-sizing: border-box;
}

.panelwrapper.autocue-panel .autocue-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.panelwrapper.autocue-panel .autocue-readline {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    height: 1.5em;
    background: rgba(50, 50, 50, 0.3);
    pointer-events: none;
    z-index: 10;
}

.panelwrapper.autocue-panel .autocue-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Hide scrollbar but allow scrolling */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.panelwrapper.autocue-panel .autocue-content::-webkit-scrollbar {
    display: none;
}

.panelwrapper.autocue-panel .autocue-row {
    padding: 0.2em 0.5em;
    transition: background-color 0.3s ease;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.panelwrapper.autocue-panel .autocue-row.active {
    /* Active row styling - highlighted background */
    background-color: rgba(255, 255, 0, 0.3);
    border-left: 4px solid #ffcc00;
}

/* Inherit panel text formatting for autocue rows */
.panelwrapper.autocue-panel .autocue-row span.hidden {
    display: none;
}

.panelwrapper.autocue-panel .autocue-row span.placeholder {
    opacity: 0;
}

.panelwrapper.autocue-panel .autocue-row span.role {
    text-transform: uppercase;
    font-weight: 700 !important;
    font-family: 'Arial Narrow' !important;
}

.panelwrapper.autocue-panel .autocue-row span.role:after {
    content: ":";
}

/* ========== END AUTOCUE PANEL STYLES ========== */