html {
	background-color: gray;
}

body{
	font-family: Times, "Times New Roman", serif; 
	font-size: 16px;
	line-height: 20px;
	text-align: justify;
	color: black;
	margin: 0px;
	max-width: 595px; /* A4 */
	padding-top: 48px;
	padding-bottom: 48px;
	padding-left: 48px;
	padding-right: 48px;
	background-color: white;
/*
	background-size: 12px 12px;
    background-image:
    linear-gradient(to right, #ccf 1px, transparent 1px),
    linear-gradient(to bottom, #ccf 1px, white 1px);
*/	
}

header {
	padding: 0px;
	font-size: 16px;
}

h2 {
	font-weight: bold;
	font-size: 24px;
	line-height: 36px;
	margin-top: 12px;
	margin-bottom: 0px;
}

h3 {
	font-weight: bold;
	font-size: 20px;
	line-height: 36px;
	margin-top: 12px;
	margin-bottom: 0px;
}

h4 {
	font-weight: bold;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 0px;
}

button {
    margin-left: 4px;
    border: none;
	background-color: white;
	color: black;
	font-family: Tahoma, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
}

button:hover {
	background-color: black;
	color: white;
}

textarea:focus {
	outline: 3px solid -moz-mac-focusring;
	outline: 3px solid -webkit-focus-ring-color;
}

textarea:read-only {
	outline: none;
}

.error {
	color:red;
	transition:.5s;
	font-size: 14px;
	overflow: auto;
	margin: 15px;
}

table {
	margin:auto;
	border:1px solid black;
 	border-collapse:collapse;
 	margin-bottom:10px;
 	width: max-content;
}

th, td {
	border:1px solid #777;
	padding: 4px;
	font-size: 16px;
	line-height: 20px;
	word-break: break-all;
	width: max-content;
}

th {
	font-weight: normal;
}

td { 
	border-top: none;
	border-bottom: none;
}

caption {
	border:1px solid black;
	border-bottom: none;
}

tbody {
	border:1px solid black;
}

table {
	border:1px solid black;
} 

footer {
	margin-top: 48px;
	font-size: 13px;
	color: #222;
}

#header {
	text-align: right;
	margin-bottom: 12px;
}

#header button {
	display: inline
}

.cell {
	width: 100%;
}

.cellheader {
	text-align: right;
	width: 100%;
}

.cellsource {
	font-family: Courier, "Courier New", monospace;
	font-size: 14px;
	border: none;
    background-color: transparent;
    resize: none;
    outline: none;
    width: 100%;
	margin-bottom: 12px;
	padding: 4px;
	line-height: 20px;
	display: none;
	max-height: 600px;
}

.cellbak {
    border: none;
    background-color: transparent;
    resize: none;
    outline: none;
	color: gray;
    width: 100%;
	display: none;
}

.celloutput {
	margin-bottom: 12px;
	width: 100%;
}



button.wiki { display : none; }
button.sql { display : none; }
button.data { display : none; }
button.js { display : none; }
button.ps { display : none;}
button.cancel { display : none; }
button.save { display : none;}
button.up { display : none;}
button.down { display : none;}
button.delete { display : none;}
button.import { display : none;}
button.dup { display : none;}
button.new { display : none; }
button.run { display : none; }
button.rundown { display : none; }

div.edit button.run { display: inline }
div.edit button.rundown { display: inline }
div.edit button.wiki { display: inline }
div.edit button.sql { display: inline }
div.edit button.data { display: inline }
div.edit button.js { display: inline }
div.edit button.ps { display: inline }
div.edit button.new { display: inline }
div.edit button.dup { display: inline }
div.edit button.edit { display: none }
div.edit button.cancel { display: inline }
div.edit button.save { display: inline }
div.edit button.up { display: inline }
div.edit button.down { display: inline }
div.edit button.delete { display: inline }
div.edit textarea.cellsource {
	border: 1px solid black;
	color: black;
	display: block;
	height: auto;
}

div.wiki button.wiki { background-color: black; color: white; }
div.wiki button.run { display: none; }
div.wiki button.rundown { display: none; }
div.sql button.sql { background-color: black; color: white; }
div.sql textarea.cellsource {
	color: #008;
	display: block;
	height: auto;
}
div.data textarea.cellsource {
	color: #080;
	height: auto;
}
div.data div.celloutput {
	font-family: Courier, "Courier New", monospace;
	font-size: 14px;
	color: #080;
	height: auto;
	padding: 4px;
}

div.js textarea.cellsource {
	color: #800;
	height: auto;
}

pre.js {
	font-family: Courier, "Courier New", monospace;
	font-size: 14px;
	color: #800;
	height: auto;
	padding: 4px;
	white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word; 
}

pre.error {
	white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word; 
}

div.ps textarea.cellsource {
	color: #080;
	height: auto;
}
div.edit textarea.cellsource {
	display: block;
	height: auto;
}
div.error {
	background-color: yellow;
	color: red;
}
div.data.edit button.import { display: inline; }
div.data button.data { background-color: black; color: white; }
div.js button.js { background-color: black; color: white; }
div.ps button.ps { background-color: black; color: white; }

div.cellconsole { 
	background-color:  yellow; 
}
	
div.tablefilter {
	width: auto;
	margin: auto;
	max-width: 100%; 
	overflow-x: auto;
}

p.link {
	text-align: right;
	width: 100%;
}

p.link a { 
	font-family: Tahoma, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
	color:black;
	padding: 4px;
	text-decoration: none;
}

p.link a:hover {
	background-color: black;
	color: white;
}

input[type="file"] {
    display: none;
}

input.sortable {
	width: 90%; 
}

.custom-file-upload {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #444;
    font-size: 16px;
    padding: 2px;
}


tiny-ps {
	max-width: 100%;
}



div.svgurl {
		text-align: right;
}

div.canvasurl {
		text-align: right;
}

::part(url) {
	text-align: right;
}

::part(divsvg)  { 
	max-width: 100%;
}

::part(svgurl)  { 
	font-family: Tahoma, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
	color:black;
	padding: 4px;
	text-decoration: none;
}

::part(canvasurl)  { 
	font-family: Tahoma, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
	color: black;
	padding: 4px;
	text-decoration: none;
}

::part(rawurl)  { 
	font-family: Tahoma, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
	color: black;
	padding: 4px;
	text-decoration: none;
}

::part(pdfurl)  { 
	font-family: Tahoma, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
	color: black;
	padding: 4px;
	text-decoration: none;
}

::part(svgurl):hover{
	background-color: black;
	color: white;
}

::part(canvasurl):hover{
	background-color: black;
	color: white;
}

::part(rawurl):hover{
	background-color: black;
	color: white;
}

::part(pdfurl):hover{
	background-color: black;
	color: white;
}

@media print {
button { visibility: hidden; }
input { visibility: hidden; }
output a { visibility: hidden }
.cellsource { max-height: 99999px; border: none; }
.cellheader { display: none }
html { background-color: white }
header { display: none }
footer { display: none }
/* table {  	width: auto; max-width: 100% } */
#shadow-root a { visibility: hidden }
p.link { display: none }
::part(svgurl)  { display:none; }
::part(canvasurl)  { display:none; }

@page {
    counter-increment: page;
    counter-reset: page 1;
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

}