/* WebTV HD front-end CSS style by SKCro - https://github.com/SKCro/WebTV-HD */
html{overflow:hidden;touch-action:manipulation;}
body{
	overflow:hidden;
	background-color:#000;
	perspective:100vw;
}body.SKCro{background:linear-gradient(#001222,#000810);}
#mainFrame{
	position:fixed;
	width:100vw;
	height:calc(100vh - 4vw);
	border:0;
	background-color:#191919;
}
#mainFrame.noFocus{pointer-events:none;}
#mainFrame.noStatus{height:100vh;}
#mainFrame.flip{animation:flip 0.25s linear forwards;}
#mainFrame.flip-back{animation:flip-back 0.25s linear forwards;}
#mainFrame.broll{animation:broll 0.5s linear forwards;}
#mainFrame.broll-back{animation:broll-back 0.5s linear forwards;}
@keyframes flip{
	0%{transform:rotateX(0deg);}
	100%{transform:rotateX(87.71deg);scale:0.5;}
}
@keyframes flip-back{
	0%{transform:rotateX(87.71deg);scale:0.5;}
	100%{transform:rotateX(0deg);}
}
#tvFrame{
	position:fixed;
	width:100vw;
	height:100vh;
	border:0;
	z-index:-1;
}
#mainFrame.flip,#mainFrame.flip-back,#mainFrame.broll,#mainFrame.broll-back,#tvFrame.flip,#tvFrame.flip-back{pointer-events:none;cursor:var(--cursor-no);}
#tvFrame.flip{animation:tv-flip 0.25s linear forwards;}
#tvFrame.flip-back{animation:tv-flip-back 0.25s linear forwards;}
iframe.shown{display:flex;}
iframe.hidden{display:none;}
@keyframes tv-flip{
	0%{transform:rotateX(-87.71deg);scale:0.5;}
	100%{transform:rotateX(0deg);}
}
@keyframes tv-flip-back{
	0%{transform:rotateX(0deg);}
	100%{transform:rotateX(-87.71deg);scale:0.5;}
}
@keyframes broll{
	0%{transform:rotateX(0deg);}
	50%{transform:rotateX(90deg);scale:0.5;}
	100%{transform:rotateX(180deg);}
}
@keyframes broll-back{
	0%{transform:rotateX(180deg);}
	50%{transform:rotateX(90deg);scale:0.5;}
	100%{transform:rotateX(0deg);}
}
@keyframes slideOut{from{transform:translateY(0);}to{transform:translateY(4vw);}}
@keyframes slideIn{from{transform:translateY(4vw);}to{transform:translateY(0);}}
.perspective-fix{
	content:'';
	position:relative;
	width:100vw;
	height:100vh;
	background:#0000;
	overflow:hidden;
	cursor:var(--cursor-no);
	z-index:-9999;
}

/* Loading panel styles */
.corner-panel{
	position:absolute;
	top:2vw;
	left:-65vw;
	width:24vw;
	height:4vw;
	min-height:4vw;
	padding:1vw;
	flex-direction:row;
	background-color:#424242;
	box-shadow:0.5vw 0.5vw 0 #0008, inset 0.1vw 0.1vw 0.1vw #4e4e4e, inset 0.2vw 0.2vw 0.2vw 0.2vw #969696, inset -0.1vw -0.1vw 0.1vw #4e4e4e, inset -0.2vw -0.2vw 0.2vw 0.2vw #202020;
	border-radius:0.5vw;
}
.corner-panel-logo{
	content:'';
	width:17%;
	height:100%;
	margin-right:0.5vw;
	background-size:contain;
}
#reconnectPanel{
	top:-42vw;
	left:-70.5vw;
	width:18%;
	height:4.5vw;
	padding:1.3vw;
	z-index:10001;
}
#reconnectPanel::backdrop{background-color:#0000;}
#reconnectLogo{
	width:6vw;
	background-image:url(../images/WebTVShadowInset.svg);
	background-repeat:no-repeat;
	background-position:center;
}
#reconnectButton{
	width:9vw;
	height:2.5vw;
	font-size:1.3vw;
	margin:auto;
	border-width:0.4vw;
	z-index:10002;
}
#loadingGlobe{
	background-image:url(../images/globe.gif);
	background-repeat:no-repeat;
	background-position:center;
}
#loadingPanel{z-index:10002;}

#screensaver{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:999999;
}
/* no longer needed because the globe isn't multiple images - horrible for optimization anyway lmfao
@keyframes globeSpin{
	0%{background-image:url(../images/globe/1.gif);}
	8.33%{background-image:url(../images/globe/2.gif);}
	16.66%{background-image:url(../images/globe/3.gif);}
	25%{background-image:url(../images/globe/4.gif);}
	33.33%{background-image:url(../images/globe/5.gif);}
	41.66%{background-image:url(../images/globe/6.gif);}
	50%{background-image:url(../images/globe/7.gif);}
	58.33%{background-image:url(../images/globe/8.gif);}
	66.66%{background-image:url(../images/globe/9.gif);}
	75%{background-image:url(../images/globe/10.gif);}
	83.33%{background-image:url(../images/globe/11.gif);}
	91.66%{background-image:url(../images/globe/12.gif);}
}
*/
#loadingMessageContainer{
	display:grid;
	width:80%;
	font-size:1.6vw;
	overflow:hidden;
	white-space:nowrap;
	text-shadow:0 0 #000;
	grid-row:1;
}
#loadingMessage{
	margin-top:0.5vw;
	overflow:hidden;
	text-overflow:ellipsis;
}
#loadingProgress{
	width:19vw;
	height:1.4vw;
	padding:0.16vw 0.2vw;
	border-width:0.2vw;
}
#loadingProgress[value]::-moz-progress-bar{
	border-top:0.1vw solid #003c00;
	border-bottom:0.1vw solid #003c00;
	animation:loadingbaranim 10000s linear infinite;
}
#loadingProgress[value]::-webkit-progress-value{
	border-top:0.1vw solid #003c00;
	border-bottom:0.1vw solid #003c00;
	animation:loadingbaranim 10000s linear infinite;
}
@keyframes loadingbaranim{100%{background-position-x:40000vw;}}

/* Dialog stuff */
#dialog::backdrop{ /* Prevents clicking things behind the dialog */
	cursor:var(--cursor-no);
	background-color:#0000;
}
#dialog.shown{visibility:visible;}
#dialog.hidden{visibility:hidden;}

.dialog-buttons{display:flex;justify-content:right;}

/* Statusbar audioscope stuff */
.has-audioscope::before,.has-audioscope .status-indicator,.status-container:not(.has-audioscope) #statusAudioscope{display:none;}
.status-container.has-audioscope{overflow:hidden;}
.status-container:not(.has-audioscope){overflow:visible;}

/* PIP window styles/animations */
#pipWindow{
	content:'';
	position:fixed;
	bottom:5vw;
	right:2vw;
	width:0;
	height:0;
	border-style:ridge;
	border-width:0;
	border-color:#7f7f7f #2a2a2a #2a2a2a #7f7f7f;
	border-radius:0.2vw;
	background-image:linear-gradient(180deg,#0064c8,#001222);
	background-size:100.5% 100.5%;
	background-color:#0064c8;
	box-shadow:0.5vw 0.5vw 0.2vw #0008,-0.1vw -0.1vw #2a2a2a80,inset 0.1vw 0.1vw 0.05vw #0008;
	cursor:var(--cursor-no);
}

@keyframes showPip{from{width:0;height:0;border-width:0;}to{width:24vw;height:13.5vw;border-width:0.3vw;}}
#pipWindow.show{animation:showPip 0.2s ease-out forwards;}
@keyframes hidePip{from{width:24vw;height:13.5vw;border-width:0.3vw;}to{width:0;height:0;border-width:0;}}
#pipWindow.hide{animation:hidePip 0.2s ease-out forwards;}
#pipWindow.hidden{display:none;}

#pipVideo{
	visibility:hidden;
	width:100%;
	height:100%;
	border:0;
	pointer-events:none;
}

/* Status/Options Bar slide animations */
@keyframes slideUp{from{transform:translateY(0);}to{transform:translateY(-12.5vw);}}
#statusBar.show,#optionsBar.show{animation:0.2s slideUp ease-out forwards;}
#statusBar.showing,#optionsBar.showing{transform:translateY(-12.5vw);}
@keyframes slideDown{from{transform:translateY(-12.5vw);}to{transform:translateY(0);}}
#statusBar.hide,#optionsBar.hide{animation:0.2s slideDown ease-out forwards;}
#statusBar.hiding,#optionsBar.hiding{transform:translateY(0);}

/* Statusbar stuff */
#statusBar{
	content:'';
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	height:4vw;
	background:linear-gradient(90deg,#5b5b5b,#2e2e2e) #5d5d5d;
	cursor:var(--cursor);
	will-change:translate;
	transition:background 1s linear;
	z-index:999999;
}
body.SKCro #statusBar,body.SKCro #optionsBar{background:linear-gradient(90deg,#048c,#024c);backdrop-filter:blur(2px);}
#statusBar::before{
	content:'';
	position:absolute;
	top:0;
	width:100%;
	height:0.3vw;
	background:linear-gradient(90deg,#0000,#0008);
	z-index:1;
}
#statusBar::after{ /* Top shine */
	content:'';
	position:absolute;
	top:0;
	width:100%;
	height:0.3vw;
	transition:background 1s linear;
	background:linear-gradient(180deg,#848484 10%,#b5b5b5 50%,#787878 90%) #8c8c8c;
}
body.SKCro #statusBar::after{background:linear-gradient(180deg,#0080ff 10%,#0064c8 50%,#048 90%);}
#statusBar.side-in,#statusBar.slide-out{
	pointer-events:none;
	cursor:var(--cursor-no);
}
#statusBar.slide-in{animation:slideIn 0.3s ease-out forwards;}
#statusBar.slide-out{animation:slideOut 0.3s ease-out forwards;}

.status-bar-content{
	display:flex;
	height:100%;
	padding:0.06vw 1vw;
	align-items:center;
	justify-content:space-between;
}

.page-name{
	width:85%;
	height:2.35vw;
	border-radius:0.5vw;
	padding:0.35% 0.8% 0.35% 0.8%;
	font-size:2vw;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	background:linear-gradient(90deg,#232323,#000);
	text-shadow:0.15vw 0.15vw #000;
	color:var(--webtv-gold);
}
body.SKCro .page-name{background:linear-gradient(90deg,#001222ee,#000e);color:#f0f0f0;}
body.safari .page-name{ /* safari stupid */
	-webkit-padding-before:0.5%;
	-webkit-padding-after:0;
}

.scroll-arrows{
	width:8.5%;
	height:65%;
	background-image:url(../images/ScrollArrows.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}

.status-container{ /* Status indicator container */
	content:'';
	display:flex;
	position:relative;
	width:4.2%;
	height:65%;
	border:0.25vw solid;
	border-radius:0.5vw;
	border-color:#202020 #515151 #515151 #202020;
	overflow:hidden;
	transition:background 1s linear;
	background:#000;
	cursor:var(--cursor-click);
	z-index:10001;
}
body.SKCro .status-container{border-color:#001222 #048 #048 #001222;background:#000810;}
.status-container::before{ /* Status indicator blur */
	content:'';
	position:absolute;
	top:0.05vw;
	left:0.05vw;
	width:100%;
	height:100%;
	border-radius:inherit;
	transition:all 1s linear;
	background-color:#000;
	filter:blur(0.1vw);
	z-index:-1;
}
body.SKCro .status-container::before{background-color:#000810;}

.status-indicator{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:90%;
	height:9%;
	margin:auto;
	transform:translate(-50%,-50%);
	background-color:#090;
}
body.SKCro .status-indicator{background-color:#0064c8;}
.status-indicator::after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	border-radius:1.5vw;
	background:linear-gradient(90deg,#000 64%,#0000 75%,#000 75%);
	background-size:200%;
	visibility:hidden;
}
.status-indicator.loading{
	width:100%;
	height:100%;
	background:#0000 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjMzIiBoZWlnaHQ9IjE4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMyAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0ibTAgOSAxLjUtMSAyIDIgMS0xaDNsNC00IDIgOCA0LjUtMTNoMWwxLjUgNSAxIDIgMSAxIDIuNSAxaDh2MmgtOGwtMy0xLTItMi0yLTQtMiA4LTEgNWgtMWwtMi0zLTEuNS02LTIuNSAzaC0zLjVsLTEgMS0yLTItMS41IDF6IiBmaWxsPSIjMGUwIi8+PC9zdmc+) no-repeat center;
	background-size:contain;
}
body.SKCro .status-indicator.loading{background-color:#000810;filter:hue-rotate(100deg);}
.status-indicator.loading::after{
	visibility:visible;
	animation:loadingScroll 3s linear infinite;
}
.status-indicator.disconnected{background-color:#900;}

@keyframes loadingScroll{from{background-position-x:160%;}to{background-position-x:35%;}}

.status-bar-overlay{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	cursor:var(--cursor-click);
	z-index:9999;
}
.status-bar-overlay:active,.status-container:active{cursor:var(--cursor-active);}

/* Options bar styles and animations */
#optionsBar{
	display:grid;
	position:fixed;
	transform:translateY(0);
	width:100vw;
	background:linear-gradient(90deg,#5d5d5d,#2e2e2e);
	will-change:transform;
	transition:background 1s linear;
	z-index:10000;
}

/* Options bar rows */
.options-row::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:0.2vw;
	background:linear-gradient(90deg,#494949,#242424);
}
body.SKCro .options-row::before{background:linear-gradient(90deg,#036c,#001222cc);}
.options-row::after{
	content:'';
	position:absolute;
	top:0.2vw;
	left:0;
	width:100vw;
	height:0.2vw;
	background:linear-gradient(45deg,#818181,#404040);
}
body.SKCro .options-row::after{background:linear-gradient(90deg,#0064c8cc,#036c);}
.options-row{
	display:flex;
	height:7vw;
	margin:0.5vw 2%;
	justify-content:space-between;
}
.options-row.bottom::before{
	content:'';
	position:absolute;
	top:7.4vw;
	left:0;
	width:100vw;
	height:0.2vw;
}
.options-row.bottom::after{
	content:'';
	position:absolute;
	top:7.6vw;
	left:0;
	width:100vw;
	height:0.2vw;
}.options-row.bottom{height:3.5vw;padding:0;}

#home{
	content:'';
	width:7.8vw;
	height:100%;
	background-image:url(../images/WebTVShadowInset.svg);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

.options-button{
	color:var(--webtv-gold);
	width:15%;
	font-size:2.5vw;
	background:radial-gradient(ellipse at 2.5vw 1.4vw,#6e6e6e 25%,#3a3a3a 75%) #6e6e6e;
	border:0.2vw solid #000;
	border-radius:1.4vw!important;
	margin-top:1vw;
	margin-bottom:1vw;
	text-shadow:0.15vw 0.15vw 0.1vw #000;
	box-shadow:
	inset 3px 3px 1px #b5b5b5,
	inset 1px 1px .25px #fff,
	inset -1px 1px 1px #444,
	0 0 1px #000,
	0 0 1px 1px #333,
	1px 1px 0 1px #2b2b2b;
}
.options-button.bottom{font-size:2vw;margin:0;}
.options-button:disabled{
	color:#0000;
	text-shadow:0 0;
	cursor:var(--cursor-no);
}
/* Button-specific backgrounds */
.options-button#info{
	background:radial-gradient(ellipse at 2.5vw 1.4vw,#666 25%,#353535 75%) #666;
	box-shadow:
	inset 3px 3px 1px #b5b5b5bf,
	inset 1px 1px .25px #ffffffbf,
	inset -1px 1px 1px #444444bf,
	0 0 1px #000,0 0 1px 1px #333333bf,
	1px 1px 0 1px #2b2b2b;
}
.options-button#goto{
	background:radial-gradient(ellipse at 2.5vw 1.4vw,#5b5b5b 25%,#2f2f2f 75%) #5b5b5b;
	box-shadow:
	inset 3px 3px 1px #b5b5b5a3,
	inset 1px 1px .25px #ffffffa3,
	inset -1px 1px 1px #444444a3,
	0 0 1px #000,
	0 0 1px 1px #333333a3,
	1px 1px 0 1px #2b2b2b;
}
.options-button#save{
	background:radial-gradient(ellipse at 2.5vw 1.4vw,#505050 25%,#292929 75%) #505050;
	box-shadow:
	inset 3px 3px 1px #b5b5b580,
	inset 1px 1px .25px #ffffff80,
	inset -1px 1px 1px #44444480,
	0 0 1px #000,0 0 1px 1px #33333380,
	1px 1px 0 1px #2b2b2b;
}
.options-button#send{
	background:radial-gradient(ellipse at 2.5vw 1.4vw,#464646 25%,#232323 75%) #464646;
	box-shadow:
	inset 3px 3px 1px #b5b5b564,
	inset 1px 1px .25px #ffffff64,
	inset -1px 1px 1px #44444464,
	0 0 1px #000,0 0 1px 1px #33333364,
	1px 1px 0 1px #2b2b2b;
}
/* Bottom bar buttons */
.options-button#music{background:radial-gradient(ellipse at 2vw 1vw,#777 25%,#3b3b3b 75%) #777;}
.options-button#print{
	background:radial-gradient(ellipse at 2vw 1vw,#6a6a6a 25%,#363636 75%) #6a6a6a;
	box-shadow:
	inset 3px 3px 1px #b5b5b5bf,
	inset 1px 1px .25px #ffffffbf,
	inset -1px 1px 1px #444444bf,
	0 0 1px #000,0 0 1px 1px #333333bf,
	1px 1px 0 1px #2b2b2b;
}
.options-button#hangup{
	background:radial-gradient(ellipse at 2vw 1vw,#5d5d5d 25%,#303030 75%) #5d5d5d;
	box-shadow:
	inset 3px 3px 1px #b5b5b5a3,
	inset 1px 1px .25px #ffffffa3,
	inset -1px 1px 1px #444444a3,
	0 0 1px #000,0 0 1px 1px #333333a3,
	1px 1px 0 1px #2b2b2b;
}
.options-button#reload{
	background:radial-gradient(ellipse at 2vw 1vw,#575757 25%,#292929 75%) #575757;
	box-shadow:
	inset 3px 3px 1px #b5b5b580,
	inset 1px 1px .25px #ffffff80,
	inset -1px 1px 1px #44444480,
	0 0 1px #000,0 0 1px 1px #33333380,
	1px 1px 0 1px #2b2b2b;
}
.options-button#pip{
	background:radial-gradient(ellipse at 2vw 1vw,#494949 25%,#242424 75%) #494949;
	box-shadow:
	inset 3px 3px 1px #b5b5b564,
	inset 1px 1px .25px #ffffff64,
	inset -1px 1px 1px #44444464,
	0 0 1px #000,0 0 1px 1px #33333364,
	1px 1px 0 1px #2b2b2b;
}

/* Indicators */
#musicIndicator,#pipIndicator{
	content:'';
	position:absolute;
	top:9.5vw;
	width:1.8vw;
	height:1.8vw;
	background:linear-gradient(135deg,#000 35%,#aeaeae) #000;
	border-radius:100%;
}
body.SKCro #musicIndicator,body.SKCro #pipIndicator{background:linear-gradient(135deg,#001222 35%,#0064c8) #001222;}
#musicIndicator{left:13vw;}
#pipIndicator{right:3vw;}
#musicIndicator::after,#pipIndicator::after{
	content:'';
	display:block;
	position:relative;
	top:50%;
	left:50%;
	width:1.4vw;
	height:1.4vw;
	border-radius:100%;
	background:radial-gradient(circle at 0.5vw 0.5vw,#8f8f8f 0%,#3c563c 15%,#001600) #3c563c;
	transform:translate(-50%,-50%);
}
body.SKCro #musicIndicator::after,body.SKCro #pipIndicator::after{background:radial-gradient(circle at 0.5vw 0.5vw,#8f8f8f 0%,#004488 15%,#000810) #004488;}
#musicIndicator.active::after,#pipIndicator.active::after{background:radial-gradient(circle at 0.5vw 0.5vw,#bcffc4 0%,#2aff44 15%,#008616);}
body.SKCro #musicIndicator.active::after,body.SKCro #pipIndicator.active::after{background:radial-gradient(circle at 0.5vw 0.5vw,#f0f0f0 0%,#0064c8 15%,#048);}

/* Panel styles */
dialog{
	content:'';
	display:flex;
	position:fixed;
	top:-4vw;
	width:25vw;
	min-height:16vh;
	max-height:50vh;
	padding:1.5vw;
	flex-direction:column;
	border:0;
	border-radius:6px;
	background:#424242;
	color:var(--webtv-gold);
	box-shadow:
	0.6vw 0.6vw #00000080,
	inset 1px 1px 1px #424242,
	inset 2px 2px 2px 2px #969696,
	inset -1px -1px 1px #424242,
	inset -2px -2px 2px 2px #202020;
	text-shadow:0.1vw 0.1vw #000;
	z-index:9999;
}
body.SKCro dialog{
	background:linear-gradient(#048c,#024c);
	color:#f0f0f0;
	text-shadow:0 -0.2vw #000810!important;
	backdrop-filter:blur(2px);
	box-shadow:inset 0.2vw 0.2vw 0.2vw #fff4,
	inset -0.2vw -0.2vw 0.2vw #0008,
	0.5vw 0.5vw 0.2vw #0008!important;
}

.dialog-message-container{
	display:flex;
	z-index:10000;
}

#dialogLogo{
	display:block;
	position:relative;
	width:7.5vw;
	height:5vw;
	background-image:url(../images/WebTVShadowInset.svg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	margin-right:1vw;
}
body.SKCro #dialogLogo{filter:drop-shadow(0 -0.2vw 0.1vw #000810);}

#dialogMessage{
	position:relative;
	width:16.5vw;
	margin:auto;
	font-size:1.6vw;
	grid-row:1;
	word-wrap:break-word;
	text-shadow:0.1vw 0.1vw #000;
}
body.SKCro #dialogMessage,body.SKCro .top-row,body.SKCro .bottom-row,body.SKCro #loadingMessage{text-shadow:0 -0.2vw #000810;}

.dialog-separator{
	display:block;
	margin-top:1.2vw;
	margin-bottom:1.2vw;
	z-index:10000;
}

.dialog-button{
	float:right;
	margin-left:1vw;
	padding:0.1vw 1vw;
	font-size:1.3vw;
	z-index:10003;
}

#panel{
	display:grid;
	position:fixed;
	bottom:0;
	left:0;
	width:80vw;
	height:18vw;
	transform:translateY(25vw);
	max-width:unset;
	max-height:20vw;
	margin-bottom:0;
	padding:2.5vw;
	box-shadow:
	0 0.6vw 0 #0008,
	inset 0.1vw 0.1vw 0.1vw #4e4e4e,
	inset 0.2vw 0.2vw 0.2vw 0.2vw #969696,
	inset -0.1vw -0.1vw 0.1vw #4e4e4e,
	inset -0.2vw -0.2vw 0.2vw 0.2vw #202020;
	border-radius:0.5vw;
}#panel::after{
	content:'';
	position:fixed;
	bottom:-3.8vw;
	width:90%;
	height:4vw;
	margin:0 5%;
	border-radius:inherit;
	background:inherit;
	box-shadow:inherit;
	z-index:-1;
}

@keyframes panelUp{from{transform:translateY(25vw);}to{transform:translateY(-5vw);}}
#panel.show{animation:0.2s panelUp ease-out forwards;}
#panel.showing{transform:translateY(-5vw);}
@keyframes panelDown{from{transform:translateY(-5vw);}to{transform:translateY(25vw);}}
#panel.hide{animation:0.2s panelDown ease-out forwards;}
#panel.hiding{transform:translateY(25vw);display:none;}

#topInput{width:88%;}
#topInputPretext{width:10%;}

#textQuery{
	width:100%;
	height:0.9vw;
	padding:0.5vw;
	border-width:0.35vw;
	font-size:1.4vw;
	background-color:#161616;
	color:var(--webtv-green);
}

.top-row{
	display:flex;
	height:14vw;
	max-height:14vw;
	font-size:1.7vw;
	text-shadow:0.15vw 0.15vw #000;
}

.bottom-row{height:20%;}
.bottom-row hr{
	margin-bottom:1.5vw;
	border-width:0.2vw;
}
#panelSubmit,#panelClear,#panelCancel,#panelAction{font-size:1.3vw;}
#panelSubmit{
	position:absolute;
	top:6.5vw;
	right:3vw;
	font-size:1.3vw;
}
#panelCancel{margin-left:2vw;}
#panelAction{margin-left:2vw;}
#bottomMessage{position:absolute;bottom:7vw;}

.show-sidebar-button{
	display:none;
	position:absolute;
	min-height:0;
	border-image-slice:15!important;
	border-width:0.8vw!important;
	border-color:#404040 #111 #111 #404040;
	margin-left:1.5vw!important;
	padding:2.8vw!important;
	background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgMTMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGZpbHRlciBpZD0iYSIgeD0iLS4wMjQ3NSIgeT0iLS4xNDg1IiB3aWR0aD0iMS4wNDk1IiBoZWlnaHQ9IjEuMjk3IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjAuMTIzNzUiLz48L2ZpbHRlcj48L2RlZnM+PGcgb3BhY2l0eT0iMC41Ij48cmVjdCB4PSIuNSIgeT0iMTAuNSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjIiIHJ5PSIxIiBmaWx0ZXI9InVybCgjYSkiLz48cmVjdCB4PSIuNSIgeT0iNi41IiB3aWR0aD0iMTIiIGhlaWdodD0iMiIgcnk9IjEiIGZpbHRlcj0idXJsKCNhKSIvPjxyZWN0IHg9Ii41IiB5PSIyLjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIgZmlsdGVyPSJ1cmwoI2EpIi8+PC9nPjxnIGZpbGw9IiNlN2NlNGEiPjxyZWN0IHg9Ii41IiB5PSI5LjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIvPjxyZWN0IHg9Ii41IiB5PSI1LjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIvPjxyZWN0IHg9Ii41IiB5PSIxLjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIvPjwvZz48L3N2Zz4=),linear-gradient(#2f2f2f,#060606);
	background-size:100%;
	background-repeat:no-repeat;
	background-position-x:center;
	cursor:var(--cursor-click);
	box-shadow:0 0 0.5vw 0.3vw #000;
	z-index:10001;
}body.SKCro .show-sidebar-button{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgMTMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGZpbHRlciBpZD0iYSIgeD0iLS4wMjQ3NSIgeT0iLS4xNDg1IiB3aWR0aD0iMS4wNDk1IiBoZWlnaHQ9IjEuMjk3IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjAuMTIzNzUiLz48L2ZpbHRlcj48L2RlZnM+PGcgb3BhY2l0eT0iMC41Ij48cmVjdCB4PSIuNSIgeT0iMTAuNSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjIiIHJ5PSIxIiBmaWx0ZXI9InVybCgjYSkiLz48cmVjdCB4PSIuNSIgeT0iNi41IiB3aWR0aD0iMTIiIGhlaWdodD0iMiIgcnk9IjEiIGZpbHRlcj0idXJsKCNhKSIvPjxyZWN0IHg9Ii41IiB5PSIyLjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIgZmlsdGVyPSJ1cmwoI2EpIi8+PC9nPjxnIGZpbGw9IiNlN2NlNGEiPjxyZWN0IHg9Ii41IiB5PSI5LjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIvPjxyZWN0IHg9Ii41IiB5PSI1LjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIvPjxyZWN0IHg9Ii41IiB5PSIxLjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIyIiByeT0iMSIvPjwvZz48L3N2Zz4=),linear-gradient(#048,#024)}

@media(max-width:760px){
	body{perspective:100vh;}

	#loadingPanel{
		left:-20vw;
		width:70vw;
		height:12vw;
		padding:2vw;
		border-radius:1vw;
		box-shadow:1vw 1vw 0 #0008,
		inset 0.1vw 0.1vw 0.1vw #4e4e4e,
		inset 0.5vw 0.5vw 0.4vw 0.2vw #969696,
		inset -0.1vw -0.1vw 0.1vw #4e4e4e,
		inset -0.5vw -0.5vw 0.4vw 0.2vw #202020;
	}
	#loadingMessage{font-size:4vw;margin-top:1vw;}
	#loadingProgress{
		height:5.5vw;
		width:100%;
		padding:0.5vw 0.5vw;
		border-width:1vw;
	}

	#mainFrame{height:calc(100vh - 13vw);}
	@keyframes tv-flip{
		0%{transform:rotateY(-90deg);scale:0.5;}
		100%{transform:rotateY(0deg);}
	}
	@keyframes tv-flip-back{
		0%{transform:rotateY(0deg);}
		100%{transform:rotateY(-90deg);scale:0.5;}
	}
	@keyframes broll{
		0%{transform:rotateX(0deg);}
		50%{transform:rotateX(90deg);scale:0.5;}
		100%{transform:rotateX(180deg);}
	}
	@keyframes broll-back{
		0%{transform:rotateX(180deg);}
		50%{transform:rotateX(90deg);scale:0.5;}
		100%{transform:rotateX(0deg);}
	}
	@keyframes flip{
		0%{transform:rotateY(0deg);}
		100%{transform:rotateY(90deg);scale:0.5;}
	}
	@keyframes flip-back{
		0%{transform:rotateY(90deg);scale:0.5;}
		100%{transform:rotateY(0deg);}
	}
	@keyframes slideOut{from{transform:translateY(0);}to{transform:translateY(13vw);}}
	@keyframes slideIn{from{transform:translateY(13vw);}to{transform:translateY(0);}}

	#optionsBar{height:26vw;}
	#optionsBar.showing{transform:translateY(-26vw);}
	#optionsBar.hiding{transform:translateY(0);}

	.options-row::before{height:0.6vw;}
	.options-row{
		height:12vw;
		margin-top:1.1vw;
		margin-bottom:0;
	}
	.options-row::after{top:0.6vw;height:0.6vw;}
	.options-row.bottom::before{top:13vw;height:0.6vw;}
	.options-row.bottom{height:8vw;}
	.options-row.bottom::after{top:13.5vw;height:0.6vw;}
	#home{width:15vw;}
	.options-button,body.SKCro .options-button{
		width:23%;
		border-radius:2.5vw!important;
		font-size:6.5vw;
		text-shadow:0.3vw 0.3vw 0.2vw #000;
	}
	.options-button.bottom{font-size:4.5vw!important;}
	.options-button#info,.options-button#save,.options-button#hangup{display:none;}
	.options-button#music{text-align:left;padding-left:3vw;}

	#musicIndicator,#pipIndicator{
		top:18.5vw;
		width:4vw;
		height:4vw;
	}
	#musicIndicator::after,#pipIndicator::after{
		width:3.2vw;
		height:3.2vw;
		background:radial-gradient(circle at 1vw 1vw,#8f8f8f 0%,#3c563c 15%,#001600) #3c563c;
	}
	#musicIndicator{left:18vw;}
	#pipIndicator{right:3.5vw;}

	#pipWindow{
		bottom:16vw;
		box-shadow:
		1.5vw 1.5vw 0.2vw #0008,
		-0.2vw -0.2vw #2a2a2a80,
		inset 0.2vw 0.2vw 0.1vw #0008;
		border-radius:0.5vw;
	}

	@keyframes showPip{from{width:0;height:0;border-width:0;}to{width:64vw;height:36vw;border-width:1.3vw;}}
	@keyframes hidePip{from{width:64vw;height:36vw;border-width:1.3vw;}to{width:0;height:0;border-width:0;}}

	.show-sidebar-button{display:block;}
	#statusBar{height:13vw;}
	#statusBar::before,#statusBar::after{height:0.6vw;}
	.status-container::before{
		top:0.05vw;
		width:100%;
		height:100%;
		border-radius:0.2vw;
		filter:blur(0.3vw);
	}
	@keyframes slideUp{from{transform:translateY(0);}to{transform:translateY(-26vw);}}
	#statusBar.showing{transform:translateY(-26vw);}
	@keyframes slideDown{from{transform:translateY(-26vw);}to{transform:translateY(0);}}

	.page-name{
		width:72%;
		height:8vw;
		font-size:7vw;
		border-radius:1vw;
		padding:0.8% 0.8% 0.8% 11.5%;
		-webkit-padding-before:0.5%;
		-webkit-padding-after:0;
		text-shadow:0.5vw 0.5vw #000;
	}
	.page-name::before{
		content:'';
		display:block;
		position:absolute;
		top:1.8vw;
		left:1vw;
		width:11vw;
		height:9.5vw;
		border-top-left-radius:1vw;
		border-bottom-left-radius:1vw;
		background:linear-gradient(90deg,#000c 85%,#0000);
		z-index:1;
	}
	.scroll-arrows{display:none;}

	.status-container{
		width:13%;
		border-radius:1.5vw;
		border-width:0.7vw;
	}

	dialog{
		width:80vw;
		padding:4.5vw;
	}

	#dialogLogo{
		width:22vw;
		height:18vw;
		margin-right:3vw;
	}

	#dialogMessage{
		font-size:4.5vw;
		width:100%;
		text-shadow:0.3vw 0.3vw #000;
	}

	#panel{
		height:50vw;
		bottom:-50vw;
	}
	#panel dialog{
		width:85%;
		height:24vw;
		padding:5vw;
		box-shadow:
		0 1vw 0 #0008,
		inset 0.25vw 0.25vw 0.25vw #4e4e4e,
		inset 0.5vw 0.5vw 0.5vw 0.5vw #969696,
		inset -0.25vw -0.25vw 0 #4e4e4e,
		inset -0.5vw -0.5vw 0.5vw 0.5vw #202020;
		border-radius:2.5vw;
	}

	@keyframes panelUp{from{transform:translateY(0);}to{transform:translateY(-60vw);}}
	#panel.showing{transform:translateY(-60vw);}
	@keyframes panelDown{from{transform:translateY(-60vw);}to{transform:translateY(0);}}

	#topInput{width:70%;}
	#topInputPretext{display:none;}

	#textQuery{
		height:5vw;
		padding:1vw;
		border-width:1vw;
		font-size:3.5vw;
	}

	.top-row{
		display:flex;
		height:80%;
		max-height:80%;
		font-size:1.7vw;
		text-shadow:0.15vw 0.15vw #000;
	}

	.bottom-row{height:20%;}
	.bottom-row hr{
		margin-bottom:1.5vw;
		border-width:0.5vw;
	}

	#panelSubmit{right:4vw;font-size:3.5vw;}
	#panelClear,#panelAction{font-size:3.5vw;}
	#panelCancel{font-size:3.5vw;margin-left:2vw;}
	#bottomMessage{position:absolute;bottom:7vw;}

	.panel-bottom{
		top:-5vw!important;
		width:80%!important;
		height:0!important;
		min-height:0;
		z-index:0;
	}

	.dialog-separator{
		display:block;
		margin-top:0.8rem;
		margin-bottom:0.8rem;
		z-index:10000;
	}
	.dialog-button{font-size:3.5vw;}

	@keyframes loadingbaranim{100%{background-position-x:100000vw;}}
}@media print{#statusBar,#optionsBar,.options-row,#pipWindow{display:none!important;}}