h1
	{
		color: darkblue;
	}

#lorem
	{
		display: none;
	}

#usejs:checked + #lorem
	{
		display: initial;
	}
.email .h
{
	margin-top: 1em;
}
.email .h > div:first-child
	{
		font-size: .8em;
		display: table;
		width: 100%;
	}

.email #subject
	{
    color: #9A9A9A;
		vertical-align: middle;
		font-size: 2em;
		border-bottom: .1em solid white;
		padding: 0 0 .1em 0;
		text-align: left;
		margin-top: .2em;
	}
.email #emlfile,
.email #datetime
	{
		display: table-cell;
		vertical-align: top;
		text-align: right;
		color: lightgrey;
		white-space: nowrap;
	}
.email #emlfile
	{
		text-align: left;
		padding-right: 2em;
	}
.email #mailmeta
	{
		display: none;
		margin-top: .6em;
		font-size: 1em;
		color: black;
		text-align: left;
	}
.email #mailoptions
{
	text-align: right;
	padding-left: 2em;
}
.email #mailoptions font
{
	font-size: 2em;
	/*! text-shadow: 0 0 9px #5F5; */
	color: #5F5;
}
.email .hallo
	{
		display: table !important;
		width: 100%;
	}
.email #mailmeta > div
	{
		display: table-cell;
		vertical-align: top;
		color: #9A9A9A;
	}
.email #mailmeta > div > div
	{
		display: table-row;
	}
.email #mailmeta > div > div div
	{
		display: table-cell;
	}
.email #mailmeta > div > div div:first-child
	{
		padding-right: .6em;
	}

.email #from span,
.email #to span
	{
		color: #AAA;
	}
.email #from i,
.email #to i
	{
		color: lightgrey;
	}
.email #to span:hover
	{
		text-decoration: underline;
	}

.email .tabc #tbshortcuts font
{
	font-family: monospace;
	color: green;
}


.email #tbplain,
.email #tbattachments,
.email #tbhtml,
.email #tbhtmlsrc,
.email #tbshortcuts,
.email #tbmailsrc
	{
		display: none;
		color: #000;
		background: #FFF;
		border: 2px solid black;
		padding: 12px;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}
.email #tbhtml
	{
		padding: 0;
	}
.email #plain,
.email #mailsrc,
.email #htmlsrc
	{
		font-family: monospace;
		white-space: break-spaces;
	}
.email #mailsrc > div#mailbody > div
	{
		display: inline;
	}
.email #mailsrc > div#mailheader
	{
		color: orange;
		display: inline;
	}
.email #mailsrc > div#mailbody > div.mailboundary
	{
		color: darkcyan;
		font-weight: bold;
	}
.email #mailsrc > div#mailbody > div.mailboundaryheader
	{
		color: darkred;
		font-style: italic;
	}

.email #html
	{
		/*! color: unset; */
		/*! background: unset; */
		/*! font-size: unset; */
	}
.email #attachments h1,
.email #tbshortcuts h1
	{
		padding: 0;
	}
.email #attachments h1,
.email #tbshortcuts h1
	{
		margin: .8em 0 .2em 0;
		font-weight: normal;
		font-size: 1.6em;
	}
.email #attachments h1:first-child,
.email #tbshortcuts h1:first-child
	{
		margin: 0 0 .2em 0;
		padding: 0;
	}
.email #attachments div
	{
		padding: 4px 0;
	}
.email #attachments a
	{
		color: darkblue;
	}
.email #attachments a:hover
	{
		color: blueviolet;
	}
.email #attachments font
	{
		margin-left: .3em;
		color: grey;
	}
.email #attachments span
	{
		font-style: italic;
		margin-left: .3em;
		cursor: pointer;
		color: limegreen;
		animation: fadein .5s;
		visibility: hidden;
	}
.email #attachments div span:hover
	{
		color: green;
	}
.email #attachments div:hover span
	{
		visibility: visible;
	}
div.tabs
	{
		margin-top: .6em;
		text-align: left;
	}
input[type="radio"],
input[type="checkbox"],
input[type="file"]
	{
		display: none;
	}

label.abc
	{
		background: green;
		color: lime;
		border: 2px solid lime;
		border-radius: .25em;
		padding: .4em .7em;
		display: inline-flex;
		user-select: none;
		font-size: 1.2em;
		background: #5b5b5b;
		margin: 0 auto;
	}
label:not(.abc)
	{
		background: #C0C0C0;
		color: grey;
		border-right: 2px solid black;
		border-top: 2px solid black;
		border-left: 2px solid black;
		border-top-left-radius: .25em;
		border-top-right-radius: .25em;
		padding: .4em .7em 0 .7em;
		display: inline-flex;
		user-select: none;
		position: relative;
		bottom: -2px;
		padding-bottom: 4px;
		z-index: 0;
	}
/*label:not(.abc):first-of-type,
label:not(.abc):last-of-type
	{
		border-left: 2px solid black;
	}
label:not(.abc):nth-last-of-type(2),
label:not(.abc):last-of-type*/
label.right
	{
		float: right;
	}
label font#asum:not(:empty)
	{
		margin-left: .3em;
	}
label.a
	{
		color: darkred;
		text-decoration: line-through;
		background: #A55;
	}
label:not(.a):not(.abc):hover
	{
		color: #999;
		background: lightgrey;
	}
label.abc:hover
	{
		color: #555;
		background: limegreen;
	}
label:hover
	{
		color: #999;
	}


input[type="radio"]:checked + label:not(.a)
	{
		background: white;
		color: black;
		z-index: 2;
	}
input[type="radio"]:checked + label
	{
		background: #F55555;
		color: white;
		z-index: 2;
	}

#splain:checked + label ~ div.tabc div#tbplain,
#shtml:checked + label ~ div.tabc div#tbhtml,
#shtmlsrc:checked + label ~ div.tabc div#tbhtmlsrc,
#sattachments:checked + label ~ div.tabc div#tbattachments,
#sshorts:checked + label ~ div.tabc div#tbshortcuts,
#smailsrc:checked + label ~ div.tabc div#tbmailsrc
	{
		display: block;
	}


.none
{
	display: none;
}











.filedropper
	{
		position: fixed;
		visibility: hidden;
		opacity: 0;
		font-size: 3rem;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: all 300ms;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
		cursor: copy;
	}
.show
	{
		visibility: visible;
		opacity: 1;
		font-size: 4rem;
	}
.nope
	{
		background: rgba(255, 128, 128, 0.5);
	}
.successs
	{
		background: rgba(128, 255, 128, 0.8);
	}
.filedropper div
	{
		display: flex;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		border-radius: 60px;
		margin: 40px;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		pointer-events: none;
		font-weight: bold;
		border: 16px dashed #CCC;
		color: #CCC;
		cursor: copy;
	}

.filedropper.nope
	{
		cursor: no-drop;
	}
.filedropper.nope div
	{
		border: 16px dashed #F55;
		color: #BA0000;
		cursor: inherit;
	}
.filedropper.successs div
	{
		border: 16px dashed #4F4;
		color: #00BA00;
	}



.htmltag
{
	color: blue;
}
.htmlcomment
{
	color: green;
}





/* The Modal (background) */
#myModal {
	visibility: hidden;
	display: flex;
	padding: 12px;
	position: fixed;
	background: rgba(0, 0, 0, .8);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	align-items: center;
	justify-content: center;
	transition: all .3s;
	opacity: 0;
}
#myModal div.actions
{
	right: 0;
	top: 0;
	margin: .4em;
	font-size: 2em;
	position: fixed;
	color: #CECECE;
	font-weight: bold;
	z-index: 1;
	display: flex;
}
#myModal div.actions i
{
	cursor: pointer;
	margin-left: .4em;
}
#myModal div.actions i:hover
{
	color: #EEE;
}

/* Modal Content (image) */
#myModalImg {
	max-width: 100%;
  max-height: 100%;
	scale: .9;
	opacity: 0;
	visibility: hidden;
	transition: scale .3s, opacity .3s, visibility .3s;
}

#caption {
	position: fixed;
	bottom: 0;
	color: #111;
	padding: 6px 1em;
	background: rgba(200, 200, 200, .7);
	user-select: none;
	transition: all .3s;
	border-radius: .25em .25em 0 0;
	min-width: 220px;
	text-align: center;
	scale: .7;
	opacity: 0;
	visibility: hidden;
}
#caption:hover {
	opacity: 0 !important;
}
#myModal div#pii,
#myModal div#nii
{
	display: flex;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 15%;
	padding: 4%;
	box-sizing: border-box;
	align-items: center;
	justify-content: left;
	opacity: 0;
	background: linear-gradient(to left, rgba(0,0,0,0), 40%, rgba(120,120,120,.7));
	transition: all .3s;
	cursor: pointer;
	font-size: 3em;;
	color: white;
	min-width: 2em;
}
#myModal div#nii
{
	right: 0;
	left: unset;
	justify-content: right;
	background: linear-gradient(to right, rgba(0,0,0,0), 40%, rgba(120,120,120,.7));
}
#myModal div#nii:hover,
#myModal div#pii:hover
{
	opacity: 1;
}
.fady
	{
		opacity: 1 !important;
		visibility: visible !important;
	}
.scaly
	{
		scale: 1 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}



iframe
	{
		width: 100%;
		border: 0;
	}