.panel-header {
	display:flex;
	font-size: 16px;
	padding: 12px;
	height: 36px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--c-panel-bg-color);
}

.panel-header button {
	width: 46px;
	height: 22px;
	margin-right: 6px;
	border: 1px solid #888;
}
.panel-header .right-buttons {
	display: flex;
	margin-left: auto;
	margin-right: 0;
}
.panel-header .right-buttons button {
	margin-right: 0;
	margin-left: 6px;
}
.panel-header button.disabled {
	background-color: lightgray;
	color: gray;
	outline-color:gray;
	cursor: not-allowed;
}
.panel-header button.flash { /* experimental - demo hilite */
	background-color: yellow;
}
button img {
	width:16px;
	height:16px;
}
.panel.capture {
	width: 680px;
	margin-left: auto;
	margin-right: auto;
}
.panel.capture.autoplay {
	background-color: transparent;
}
.panel.capture .overlay {
	display: none;
	position: absolute;
	width:100%;
	height:100%;
	background-color:rgba(1,1,1,0.25);  /* TODO - make transparent */
	z-index:11;
}
.panel.capture.autoplay .overlay {
	display: block;
}
.panel-buttons {
	margin-right: 5%;
}
.capture-block {
	position:relative; 
	max-width: 640px;
	height:498px;
	padding: 12px;
	margin-left: auto;
	margin-right: auto;
}
#settings_button { 
	display: block;
		margin-left: auto;
		margin-right: auto;
}

.panel.capture.autoplay .panel-header {
	display: none;
}
.panel.capture.autoplay .button-panel {
	display: none;
}

canvas {
	position:relative; 
	height:480px;
	width:620px;
	background-color:#0f4a65;
}

.row label{
	width: 92px;
	display: inline-block;
}
.settings-block {
	height:520px;
	padding: 12px;
	background-color: var(--c-panel-bg-color); /* #fed518; #ecdfa2;  #ecdfa2;*/
}

.status.hidden {
	display: none;
}

.button-panel {
	padding: 4px;
	width: 100%;
	display: flex;
}
.button-panel button {
  width: 46px;
  height: 22px;
  margin: auto;
  border: 1px solid #888;
}
button.disabled {
	background-color: lightgray;
	color: gray;
	outline-color:gray;
	cursor: not-allowed;
}
.button-panel button.left {
	margin-left: 12px;
}

#start_button, #restart_button, #clone_button {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 32px 32px;
}
#clone_button {
	background-size: 20px 20px;
	background-image: url( /assets/images/buttons/clone-dg.png );
}
#clone_button.disabled {
	background-image: url( /assets/images/buttons/clone-lg.png );
}
#restart_button {
	background-size: 20px 20px;
	background-image: url( /assets/images/buttons/refresh-dg.png );
}
#restart_button.disabled {
	background-image: url( /assets/images/buttons/refresh-lg.png );
}
#start_button.play-start {
	background-image: url( /assets/images/buttons/play-g.png );
}
#start_button.play-pause {
	background-image: url( /assets/images/buttons/pause-g.png );
}
#start_button.play-start.disabled {
	background-image: url( /assets/images/buttons/play-lg.png );
}
#start_button.play-pause.disabled {
	background-image: url( /assets/images/buttons/pause-lg.png );
}

.panel-container .vertical-smoother {
	position: absolute;
	top: 156px;
	right: -2px;
	height: 120px;
	background-color: yellow;
}
.panel-container .vertical-smoother.playing {
	display: none;
}
.panel-container .vertical-smoother img.smooth {
	position: absolute;
	top: 0;
	right: -14px;
	height: 18px;
	width: 18px;
	border: solid darkgray;
	border-width: 1px;
	border-radius: 3px;	
}
.panel-container .panel.capture.autoplay img.smooth {
	display: none;
}

/* https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically */
.panel-container input[type=range][orient=vertical] {
	position: absolute;
	right: -14px;
	height: 96px;
	top: 30px;
	writing-mode: vertical-lr;
	direction: rtl;
	appearance: slider-vertical;
	width: 16px;
	vertical-align: bottom;
	z-index:1;
}
.panel-container input[type=range][orient=vertical].playing {
	display: none;
}

.panel.settings {
	display: none;
	font-size: 14px;
	min-width: 278px;
	max-width: 344px;
	margin-left: 12px;
}

#close_settings {
	display: block;
}

.panel.gallery {
	display: none;
	margin-right: 0;
	max-width: 380px;
}

.panel.settings.visible {
	display: block;
	position: absolute;
	top: 116px;
	right: 20px;
	z-index: 2;
	max-height: 558px;
	margin-right: 0;
	min-width: revert;
	max-width: 320px;
	border-style: solid;
	border-width: 2px;
	border-color: gray;
	overflow-y: hidden;
}
.panel.settings .row input{
	max-width: 85px;
}

.panel.gallery.visible {
	display: block;
	position: absolute;
	top: 116px;
	right: 20px;
	z-index: 2;
	max-height: 558px;
	margin-right: 0;
	min-width: revert;
	max-width: 320px;
	border-style: solid;
	border-width: 2px;
	border-color: gray;
	overflow-y: hidden;
}

.panel button.close {
	width: 24px;
	background-color: #888;
	border-style: solid;
}

.gallery-block {
	height:520px;
	padding-top: 12px;
	padding-bottom: 12px;
	overflow: auto;
/* 
	background-color: #fed518; /* #deffed; */
 */
}

.gallery-block .section-header {
	height: 38px;
	padding: 12px;
	margin-left: 12px;
	margin-right:  12px;
	background-color: lightsalmon;
	cursor: pointer;
	margin-bottom: 4px;
}

.gallery-list {
	display: flex;
	flex-flow: row wrap;
	position: relative;
	padding: 12px;
	max-height: 204px;
	overflow-y: scroll;
}
/* Firefox  from https://www.stefanjudis.com/snippets/how-to-color-the-browser-scrollbar-across-browsers/ */
.gallery-list {
  scrollbar-color: gray #fed518;
}

/* WebKit and Chromiums */

.gallery-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.gallery-list::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 5px;
}
.gallery-list div {
	margin: 12px;
	position: relative;
}

.gallery-list img {
	border-radius: 12px;
}
/* replaced by divs
.gallery ul {list-style: none;}
.gallery li {position: relative;}
 */

.gallery a {
	position: absolute;
	left:28px;
	top:24px;
	color: black;
	background-color: rgba(225,225,225,0.5);
}

.compact-button {	/* display: none; */
	margin-left: auto;
	margin-right: auto;
 }

#show_preferences {
	text-decoration: none;
	color: #3740a2;
}
 
#show_preferences:hover {
	text-decoration: underline;
}
 
main.df .settings input.err {
	background-color: #ea9563;
}

main.df label {
	width: 92px;
	display:inline-block;
}
main.df .panel-container .row {
	position: relative;
	padding: 2px;
	margin-left: 12px;
}

main.df .panel-container input {
	height: 24px
}
main.df input[type=text] {
	margin-left: 0;
}
main.df input[type=number] {
	width: 46px;
	margin-left: 0;
	padding-left: 4px;
	padding-right: 2px;
}

main.df .playback {
	margin-left:14px;
	margin-top:8px;
}
main.df .playback input[type=number] {
	margin-left: -12px;
}

main.df .swatch {
	position: absolute;
	width:18px;
	height:18px;
	top: 8px;
	right: 16px; 
	background-color:#22bbff;
}
main.df .radio input {
	height: revert;
	width: 18px;
}

/* https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers */
main.df input[type=checkbox] {
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.bottom-buttons {
	display: none;
	position: absolute;
	width: 99%; 
	height: 32px; 
	bottom: 8px;
	background-color: var(--c-banner-bg);
	padding: 4px;
}
 
div.swatches {
	display: none;
	position: absolute;
/* 
	margin-top: 6px;
 */
	bottom: 0;
	display: flex;
	width: 100%;
	height: 26px;
	padding: 4px;
	background-color: lightsalmon;
}
div.swatches div {
	width: 16px;
	height: 16px;
	background-color: lightblue;
	margin: 2px;
}

@media only screen and (max-width: 1128px) { /* make the gallery disappear */
	main.df .radio input {
		height: revert;
		width: 12px;
	}
	main.df input[type=text] {
		width: 96px;
	}
	#smoothing_slider {
		width: 96px;
	}
	.panel.visible {
		display: block;
		position: absolute;
		top: 116px;
		right: 20px;
		z-index: 2;
		max-height: 558px;
		margin-right: 0;
		min-width: revert;
		max-width: 320px;
		border-style: solid;
		border-width: 2px;
		border-color: gray;
		overflow-y: hidden;
	}
	.panel.settings.visible {
		right:40px;
		width: 332px;
	}
	.gallery {
		display: none;
	}
	.gallery.visible .panel-header {
		background-color: rgba(255,255,255,0.5);
	}	
	.gallery.visible .gallery-block {
		background-color: rgba(255,255,255,0.25);
	}
	.gallery button.close {
		display: block;
	}
	.gallery-block .section-header {
		margin-right: 0;
	}

@media only screen and (max-width: 920px) { /* make the canvas shrink */
/* 
	.panel.capture { margin-right: 0; } 
 */
	canvas {
		width: 100%;
	}
	#settings_button { 
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 840px) {
	.panel.capture {
		width: 100%;
	}
}
@media only screen and (max-width: 680px) {
	main.df .panel-container img.smooth {
		right: -4px;
		height: 18px;
		border: none;
	}
	.panel.capture {
		width: 100%;
	}
	
	.panel.settings.visible {
		top: 64px;
		right:40px;
		width: 332px;
		z-index: 2; 
	}
	.panel button.close {
		margin-right: 0px;
	}	
	.panel-header button {
		margin-left: 2px;
	}
	/* https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically */
	main.df .panel-container input[type=range][orient=vertical] {
		right: -4px;
		background-color: rgba(244,244,244,0.5);
	}	
	main.df input[type=text] {
		margin-left: 0;
	}
}
@media only screen and (max-width: 540px) {
	main.df .panel-container {
		width: 100%;
	}
	.panel.visible {
		top: 24px;
	}
	.panel-settings.visible {
		display: block;
		min-width: 310px;
		top: 14px;
		right:40px;
		z-index: 2; 
	}
	.panel.settings.visible {
		top: 14px;
		width: 100%;
	}
	.panel-settings.visible .panel-header {
		max-width: 380px;
	}
	.settings-block {
		background-color: rgba(255,255,255,0.25);
		padding: 2px;
	}
		
	button.close  {
		display: block;
		width: 56px; 
		margin-right: 42px;
	}
	main.df label {
		width: 72px;
	}
	main.df .swatch {
		background-color:#bbff22;
		right: revert;
		left: 238px;
	}
	.status {
		display: none;
	}
	.bottom-buttons {
		display: none;
		position: relative;
		bottom: -8px;
	}
	.gallery.visible {
		width: 100%;
		right: 0px;
	}
	.settings-form.visible {
		display: block;
		width: 95%;
	}
	.swatches {
		display: none !important;  /* strange one  https://stackoverflow.com/questions/38723980/why-is-displayflex-taking-precedence-over-displaynone-in-chrome */
	}
}

@media only screen and (max-width: 380px) {
	.panel.settings.visible {
		right: 0;
	}
	.panel-settings.visible .panel-header {
		max-width: 380px;
	}
	main.df label {
		width: 88px;
	}
	main.df .swatch {
		background-color:#ff22bb;
		right: revert;
		left: 228px;
	}
	.button-panel button {
		width: 42px;
	}
}


@media only screen and (max-width: 320px) {
	.capture-block {
		height: 420px;	
	}
	.capture-block canvas {
		height: 392px;	
	}
	#redo_button {
		display: none;
	}
}