/*
 ここから reset.css
*/ 
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video, fieldset):not(svg *)){
	all: unset;
	display: revert;
	appearance: revert;
	vertical-align: revert;
}

textarea {
	white-space: pre-wrap;
	resize: both;
	max-width: 100%;
}

/* box-sizingの優先値 */
*,
*::before,
*::after{
	box-sizing: border-box;
}
 
/* リストのスタイル（箇条書き・番号）を削除します */
ol, ul {
	list-style: none;
}
 
/* 画像がコンテナを超えないようにするため */
img {
	max-width: 100%;
}
 
/* テーブルのセル間のスペースを削除します */
table {
	border-collapse: collapse;
}

/* hidden 属性付きは非表示 */
*[hidden] {
	display: none !important;
}

pre {
	white-space : pre;
	font-family: monospace;
}

code,kbd {
	white-space : pre;
	font-family: monospace;
}

/*
  ここまで reset.css
*/ 

:root {    
    /* ベースの色（白色） */
    --color-common-bg: #fff;
    --color-common-text: #000; /* append-by-css_conv */
    /* テキストの色（黒色） */
    --color-common-linktext: #0000ff;
    --color-common-linktext-dark: #000088;
    --color-common-th-bg: #d0d0d0;
    --color-common-th-text: #000; /* append-by-css_conv */
    --color-common-table-tr-bg: #fff;
    --color-common-table-tr-text: #000; /* append-by-css_conv */
    --color-common-table-tr-odd-bg: #f2f2f2;
    --color-common-table-tr-odd-text: #000; /* append-by-css_conv */
    --color-common-table-tr-boderbottom: #808080;
    --color-common-table-tr-boderbottom-odd: #404040;
    --color-common-textarea-bg: #f8f8f8;
    --color-common-textarea-text: #000; /* append-by-css_conv */
    --color-common-button-bg: #ddd;
    --color-common-button-text: #000; /* append-by-css_conv */
    
    --color-common-good-bg: #afa;
    --color-common-good-text: #000; /* append-by-css_conv */
    
    --color-common-nogood-bg: #ff6666;
    --color-common-nogood-text: #000; /* append-by-css_conv */
    
    --color-common-suninfo-daylight-bg: #fff;
    --color-common-suninfo-daylight-text: #000; /* append-by-css_conv */
    --color-common-suninfo-twilight-bg: #ddd;
    --color-common-suninfo-twilight-text: #000; /* append-by-css_conv */
    --color-common-suninfo-night-bg: #666;
    --color-common-suninfo-night-text: #fff; /* append-by-css_conv */
    
    --color-common-focus-outline: dodgerblue;
    --color-common-focus-outline-hover: darkorange;
    
    --color-common-hr: #000;
    
    
    }

/* ダークモードの対応 */
@media (prefers-color-scheme: dark) {
  :root {    
    /* ベースの色（黒色） */
    --color-common-bg: #000;
    --color-common-text: #fff; /* append-by-css_conv */
    /* テキストの色（白色） */
    --color-common-linktext: #00aaff;
    --color-common-linktext-dark: #000088;
    --color-common-th-bg: #555;
    --color-common-th-text: #fff; /* append-by-css_conv */
    --color-common-table-tr-bg: #000;
    --color-common-table-tr-text: #fff; /* append-by-css_conv */
    --color-common-table-tr-odd-bg: #3f3f3f;
    --color-common-table-tr-odd-text: #fff; /* append-by-css_conv */
    --color-common-table-tr-boderbottom: #808080;
    --color-common-table-tr-boderbottom-odd: #a0a0a0;
    --color-common-textarea-bg: #070707;
    --color-common-textarea-text: #fff; /* append-by-css_conv */
    --color-common-button-bg: #757575;
    --color-common-button-text: #fff; /* append-by-css_conv */
    
    --color-common-good-bg: #afa;
    --color-common-good-text: #000; /* append-by-css_conv */
    
    --color-common-nogood-bg: #ff6666;
    --color-common-nogood-text: #000; /* append-by-css_conv */
    
    --color-common-suninfo-daylight-bg: #bbb;
    --color-common-suninfo-daylight-text: #000; /* append-by-css_conv */
    --color-common-suninfo-twilight-bg: #555;
    --color-common-suninfo-twilight-text: #fff; /* append-by-css_conv */
    --color-common-suninfo-night-bg: #000;
    --color-common-suninfo-night-text: #fff; /* append-by-css_conv */
    
    --color-common-focus-outline: #ffff00;
    --color-common-focus-outline-hover: orange;
    
    --color-common-hr: #fff;
    
    
    }
}



body {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
	color: var(--color-common-text);
	background-color: var(--color-common-bg);
	margin: 5px;
}

input,textarea,select {
	color: var(--color-common-textarea-text);
	background-color: var(--color-common-textarea-bg);
	border: 1px inset gray;
	padding-left: 0.15em;
	padding-right: 0.15em;
	border-radius: 5px;
}



input[type="date"] {
	padding-left: 0.05em;
	padding-right: 0.05em;
}
/*
td input[type="text"]
,td input[type="number"]
,td input[type="date"]
,td input[type="datetime-local"]
,td input[type="tel"]
,td input[type="url"]
,td textarea
,td select {
	width: 100%;
	max-width: 100%;
}
*/

select {
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
}
select::-ms-expand {
	display: block;
}

input[type="button"],input[type="submit"],button {
	color: var(--color-common-button-text);
	background-color: var(--color-common-button-bg);
	font-weight: bold;
	padding: 1px 0.15em;
	margin: 1px 0.15em;
	border-radius: 5px;
	border: 1px outset gray;
	cursor: pointer;
}


img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
}

table {
	margin: 5px;
}

th {
	color: var(--color-common-th-text);
	background-color: var(--color-common-th-bg);
	font-weight: bold;
}

th,td {
	padding-left: 0.1em;;
	padding-right: 0.1em;;
}

table[border="1"],table[border="1"] th,table[border="1"] tr,table[border="1"] td {
	border: solid 1px #808080;
	border-collapse: collapse;
	padding: 0.15em;
}

table.common tr {
/*	color: #000; */
	background-color: var(--color-common-table-tr-bg);
/*	border-bottom-color: var(--color-common-table-tr-borderbottom); */
}

table.common tr:nth-child(odd) {
/*	color: #000; */
	background-color: var(--color-common-table-tr-odd-bg);
/*	border-bottom-color: var(--color-common-table-tr-borderbottom-odd); */
}

table.common tr > th, table.common tr > td{
        border-bottom-color: var(--color-common-table-tr-borderbottom);
}

table.common tr:nth-child(odd) > th, table.common tr:nth-child(odd) > td {
        border-bottom-color: var(--color-common-table-tr-borderbottom-odd);
}


/* URLリンク関係 */ 
a {
	text-decoration: underline;
	cursor: pointer;
	display: inline-block;
}
a:has(+ h1),a:has(+ h2),a:has(+ h3),a:has(+ h4),a:has(+ h5),a:has(+ h6),a:has(+ h7),a:has(+ div) {
	display: block;
}

a[href]:link,
a[href]:visited {
	color:var(--color-common-linktext);
}

/* input[type=number] のスピナーを非表示 */

input[type="number"].no-spin::-webkit-outer-spin-button, 
input[type="number"].no-spin::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 
input[type="number"].no-spin { 
  -moz-appearance:textfield; 
} 



/* ユーザービリティ */

/*  title プロパティがある場合 */
*[title] {
    cursor: help;
    text-decoration: green wavy underline;
}

a[title],a *[title] {
    cursor: pointer;
    text-decoration: underline;
}

a:hover,button:hover,input:hover,select:hover,textarea:hover {
	outline: 2px dotted var(--color-common-focus-outline-hover);
	outline-offset: 1px;
}
a:focus-visible,button:focus-visible,input:focus,select:focus,textarea:focus {
	outline: 3px inset var(--color-common-focus-outline);
	outline-offset: 0px;
}

hr {
  color: var(--color-common-hr);
  border-width: 1px;
  border-style: dotted;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  display: block;
}






.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}

.text-datetime {
    text-align: left;
    white-space: nowrap;
}

.text-numeric {
    text-align: right;
    white-space: nowrap;
}
.text-nobr {
    white-space: nowrap;
}

.text-justify {
	text-align: justify;
	text-align-last: justify;(justify-all)
}

.disabled,tr.disabled > th,tr.disabled > td {
    background-color: #888;
    color: #444;
}
.inactive,tr.inactive > th,tr.inactive > td {
   color: #000;
   background-color: lightgray;
}
.active,tr.active > th,tr.active > td {
   background-color: #c2f4e1;
}

.good,.charge {
	color: var(--color-common-good-text);
	background-color: var(--color-common-good-bg);
}

.nogood,.discharge {
	color: var(--color-common-nogood-text);
	background-color: var(--color-common-nogood-bg);
}


.suninfo-daylight {
    color: var(--color-common-suninfo-daylight-text);
    background-color: var(--color-common-suninfo-daylight-bg);
}

.suninfo-twilight {
    color: var(--color-common-suninfo-twilight-text);
    background-color: var(--color-common-suninfo-twilight-bg);
}

.suninfo-night {
    color: var(--color-common-suninfo-night-text);
    background-color: var(--color-common-suninfo-night-bg);
}

/*


*/


.macaddr,.ipaddr,.hostname {
	white-space : pre;
	font-family: monospace, serif;
}

.temporary {
	font-style: italic;
	font-weight: 50;
}

/*
Touch pointer Device
@media screen and (any-pointer:coarse) {
	a,input[type="submit"] {
		display: inline-block;
		margin: 3px -2px;
		padding: 5px 10px;
		border: outset 1px #ccc;
		background-color: #ccc !important;
		color: #000 !important;
		border-radius: 10px;
		text-decoration: none;
		text-align: center;
		font-weight: bold;
		font-size: 1.1em;
	}
	a:has(>img) {
		display: inline;
		margin: 0em 0em;
		padding: 0em 0em;
		border: none;
	}
	input[type="submit"] {
		border-radius: 0px;
		font-weight: normal;
	}

}
*/


/*
Touch pointer Device
*/
@media screen and (any-pointer:coarse) {
/*
	input,textarea,select {
		border: 2px inset gray;
	}
	input[type="button"],input[type="submit"] {
		border: 2px outset gray;
	}
*/
	textarea,input {
		font-size: 1.3em;
	}
	a,input[type="submit"] {
		font-size: 1.3em;
	}
	input:not(input[type="submit"]):not(input[type="reset"]):not(input[type="button"]):focus,textarea:focus {
		font-size: 1.3em;
	}

}