@media (min-width: 768px) {
    #shortcut-header {
        position: fixed;
        top: var(--header-height);
        width: var(--content-width);
        max-width: 100%;
    }
}

/* tiny screen / tablet mode */
@media (max-height: 740px) or (not (min-width: 768px)) {
	#header {
		display: none;
	}
	#header-opener {
		display: block;
	}
	#main {
		padding-top: 44px;
	}
	body.modal-top {
		overflow: hidden;
		overflow-y: scroll;
	}
	body.modal-top #content, body.modal-top #favorites {
		display: none !important;
	}
	body.modal-top #top {
		position: relative;
		height: 100%;
		margin-left: var(--content-left);
		max-width: var(--content-width);
		border: none;
		z-index: 9001;
		overflow: auto;
	}
	body.modal-top #top-bar {
		padding-top: 44px;
		max-width: none;
		margin: 0;
		height: 100%;
	}
	body.modal-top #header {
		display: block;
		height: auto;
	}
	body.modal-top #header-opener {
		display: none;
	}
	body.modal-top #header-closer {
		display: block;
	}
	body.modal-top #tabs {
		position: relative;
		left: unset;
		bottom: unset;
	}
	body.modal-top #tabs .tab {
		top: 0;
		border-radius: 0 !important;
	}
	body.modal-top #now-playing {
		position: relative;
		left: unset;
		top: unset;
	}
	body.modal-top #tabs .tab {
		display: block;
		width: 100%;
		height: auto;
		padding-left: 30px;
	}
	body.modal-top #tabs .tab span {
		display: inline;
	}

	body.modal-top #volume-indicator, body.modal-top #now-playing-controls-fader {
		display: none !important; /* has issue with hover detection */
	}

    #shortcut-header {
        top: unset;
        position: static;
        max-width: unset;
    }
}

@media (max-height: 360px) and (min-width: 400px) {
	body.modal-top #tabs .tab {
		display: inline-block;
		width: 50%;
	}
}

@media (min-width: 1000px) {
	.modal {
		width: 100vw;
	}
}

@media (min-height: 800px) {
	.modal-dialog {
		margin-top: 110px;
	}
}

@media (max-width: 850px) {
	#tabs .tab {
		width: 25%;
		min-width: 0;
	}
}

@media (max-width: 640px) {
	#tabs .tab {
		padding-left: 10px;
		padding-right: 10px;
		text-align: center;
	}
	#tabs .tab span {
		display: none; /* hide icon */
	}
	#now-playing {
		padding-left: 26px;
	}
	#now-playing-thumbnail {
		display: none !important;
	}
}

@media (max-height: 800px) and (max-width: 1600px), (max-width: 600px) {
	#favorites {
		display: none;
	}
}

@media (min-width: 768px) {
	.waveform {
		margin-bottom: 26px;
	}
}

/* floating video mode */
@media (min-width: 1550px) {
    body {
        --header-height: 160px;
    }

	#now-playing {
		padding-left: 26px;
	}

    #now-playing-thumbnail {
		--thumb-width: min(960px, var(--content-left));
		position: fixed;
		left: calc(var(--content-left) - var(--thumb-width));
		top: 0;
        width: var(--thumb-width);
        aspect-ratio: 16/9;
		height: auto;
    }

	#now-playing-thumbnail .videoplayer {
		aspect-ratio: 16/9;
	}

	@media (max-width: 2000px) {
		#now-playing-thumbnail {
			aspect-ratio: 16/10;
		}
		#now-playing-thumbnail .videoplayer {
			width: auto;
			height: 100%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%);
		}
	}
}