/**** Style reset BEGIN ****/
* { margin: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
ul, ol { list-style-type: none; }
table { border-collapse: collapse; border-spacing: 0; break-inside: avoid; }
td, th { text-align: left; }
html { font-family: arial, sans-serif; line-height: 1.5; box-sizing: border-box; -webkit-text-size-adjust: none; text-size-adjust: none; }
p { margin-bottom: 1em; }
*, :before, :after { box-sizing: inherit; }
:focus { outline: none; }
:not(input[type=radio]):focus { /*border-color: #eee;*/ box-shadow: 0px 0px 4px hsl(220 100% 50%); }
/**** Style reset END ****/

select { padding: 0 5px; vertical-align: baseline; border: solid 1px hsl(0 0% 67%); border-radius: 3px; }
select:not(:disabled) { color: #222; cursor: pointer; }
select[size] { padding: 2px; }
select:not([size]) { height: 2rem; background: white;/* linear-gradient(to bottom, hsl(0 0% 92%), hsl(0 0% 82%)) #ddd;*/ }
/*option { background: white; }*/
option:checked { background: lightblue; }
textarea { padding: 1px 2px; }
input, button { vertical-align: baseline; }
input[type=button], input[type=submit], button { height: 2rem; padding: 0 .75em; background: linear-gradient(to bottom, hsl(0 0% 92%), hsl(0 0% 82%)) #ddd;
	border: outset 1px hsl(0 0% 80%); color: #222; border-radius: 3px; }
input[type=button]:not(:disabled), input[type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=tel] { height: 2rem; padding: 1px 5px; border: inset 1px #777; border-radius: 2px; font-weight: inherit; font-style: inherit; }
input[type=number] { height: 2rem; text-align: right; width: 3.7em; }
input[type=checkbox], input[type=radio] { margin: 0 4px; }
/*input[type=checkbox] { vertical-align: middle; }*/
input[type=date] { width: 11em; height: 2rem; }
input[type=time] { width: 5.8em; height: 2rem; padding: 0 .3em; }
input[type="datetime-local"] { width: max-content; height: 2rem; }
/*input[type=email]:invalid { background: red; }  not good enough validation */
label { cursor: pointer; }
/*input:not([disabled]) { background: white; color: black; }*/


#progress-indicator-div { display: none; position: fixed; z-index: 9999; width: 100%; text-align: center; padding: 1em; background-color: #ddd; border-top: solid 1px #000; border-bottom: solid 1px #000; }
body.in-progress-class > #progress-indicator-div { display: block; }

.progress-spinner-div-1 { display: inline-block; position: relative; width: 64px; height: 64px; transform: scale(0.64); transform-origin: 0 0; }
@keyframes spinner1 { 0% { opacity: 1 }  100% { opacity: 0 } }
.progress-spinner-div-1 > div {
  position: absolute; left: 46px; top: 5px; width: 8px; height: 26px; box-sizing: content-box;
  animation: spinner1 linear 1s infinite; transform-origin: 4px 45px; border-radius: 6px; background: #666;
}
.progress-spinner-div-1 > div:nth-child(1) { transform: rotate(0deg); animation-delay: -0.875s; }
.progress-spinner-div-1 > div:nth-child(2) { transform: rotate(45deg); animation-delay: -0.75s; }
.progress-spinner-div-1 > div:nth-child(3) { transform: rotate(90deg); animation-delay: -0.625s; }
.progress-spinner-div-1 > div:nth-child(4) { transform: rotate(135deg); animation-delay: -0.5s; }
.progress-spinner-div-1 > div:nth-child(5) { transform: rotate(180deg); animation-delay: -0.375s; }
.progress-spinner-div-1 > div:nth-child(6) { transform: rotate(225deg); animation-delay: -0.25s; }
.progress-spinner-div-1 > div:nth-child(7) { transform: rotate(270deg); animation-delay: -0.125s; }
.progress-spinner-div-1 > div:nth-child(8) { transform: rotate(315deg); animation-delay: 0s; }


#fixed-container:empty { display: none; }
#fixed-container { position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; right: 0; background: hsl(0 0% 0% / .2); overscroll-behavior: none; overflow: auto; }


.dialog-form {
	/*display: flex; align-items: center; justify-content: center;*/ margin: auto; border: none; /*text-align: center;*/
	&::backdrop { background: hsl(0 0% 0% / .3); }
	& > form {
		overflow: hidden; padding: 2em; max-width: 50em; border: outset 2px white; background: #ddd; color: #000; text-align: left;
		& > input[autocomplete=username] { display: none; }
		& > div:first-child { padding: 2px; white-space: pre-wrap; max-width: 95vw; max-height: 90vh; overflow:auto; } /* heading /prompt text */
		& > input { display: block; width: 100%; }
		& > button { float: right; margin-top: 1em; margin-left: 3px; }
	}
}

.multi-select {
	height: 8em; overflow: auto scroll; border: solid 1px #777; background: white;
	& > label { display: block; padding-right: 1em; }
	& > div > input { margin-left: 6px; padding: 0; border: none; color: blue; background: none; font-size: .875rem; text-decoration: underline; }
	& > div > input:focus { box-shadow: none; }
	& > *:nth-child(odd) { background: #e8e8e8; }
}


.hide1 { display: none; }
.invisible1 { visibility: hidden; }
.tleft { text-align: left; }
.tright { text-align: right; }
.tcenter { text-align: center; }
.tbold { font-weight: bold; }
.titalic { font-style: italic; }
.inset { border-style: inset !important; }
.monospace { font-family: monospace; font-size: .875rem; }
.noscroll { overflow: hidden; }
.margin-right-1p5 { margin-right: 1.5em; }
.width-100percent { width: 100%; }
.width-16em { width: 16em; }
.width-20em { width: 20em; }
.color-red { color: red !important; }
/*
.file-type-gif::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_image16.png') no-repeat; }
.file-type-jpg::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_image16.png') no-repeat; }
.file-type-pdf::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_pdf16.png') no-repeat; }
.file-type-txt::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_txt16.png') no-repeat; }
.file-type-mp4::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_mp4_16.png') no-repeat; }
*/
/*#file-mgr-div [data-mime-type^="image"]::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_image16.png') no-repeat; }*/
#file-mgr-div [data-mime-type$="pdf"] > td:first-child::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_pdf16.png') no-repeat; }
#file-mgr-div [data-mime-type^="text"] > td:first-child::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_txt16.png') no-repeat; }
#file-mgr-div [data-mime-type^="video"] > td:first-child::before { content: ''; display: inline-block; width: 20px; height: 16px; margin-bottom: -2px; background: url('/static/pics/icon_mp4_16.png') no-repeat; }

/* #test1-footer { position: fixed; bottom: 0; right: 0; height: 20vh; width: 60vw; overflow: auto; white-space: pre-wrap; border: dotted 1px #777; } */