@charset 'utf-8';

html{
  scroll-behavior: smooth;
}
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 8px; }
input[type='text'] { font-size:16px; }
select { font-size:16px; }
label { font-size:16px; }
.logo { width:100px; }

h1 { font-size:1.6rem; }
h2 { font-size:1.4rem; }
h3 { font-size:1.2rem; }

#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }

dl dd label { display:block; border:1px solid #ddd; padding:3px; }
.sendbtn { font-size:1.2em; padding:0.2em 1em 0.1em; }

.settingdiv { display:none; border:1px solid #ccc; padding:8px; }

.shamei { width:20em; }
.hour { width:5em; text-align:right; padding-right:0.5em; }

.hideele { display:none; }
.viewele { display:block; }

.noview { display:none; }

.warning { /*background:#fdd;*/ border:3px solid red; }
#warningMessage { color:red; font-weight:bold; }


.clickele { cursor:pointer; }
.clickele:hover { box-shadow:0 0 3px 0px #999; }

.uploadtext { width:30em; height:10em; }

.clickmenu { border:1px solid #ccc; background:white; padding:2px;
               margin:1px; width:25em; font-size:0.8em; }
.clickmenu:hover { box-shadow:0 0 6px 0px #999; cursor:pointer; }

#maincontent { display:none; }

#userinfo { background:#779; color:white; font-size:0.9em; }
#userinfo .logout { margin-left:5px; padding:2px; background:#eee; color:#555;
            font-size:0.9em; cursor:pointer; }
#userinfo .logout:active { background:#fff; }

  .reloadbtn { font-size:1.5em; width:6em; }

@media (max-width: 600px) {
  body, #message { margin-top: 0; background: white; box-shadow: none; }
  body { border-top: 16px solid #02b; }
  dl dd { margin-left:0.5em;  }
  .shamei { width:95%; }

}

.loader{
  display: none;
  position:fixed;
  top:0;
  left:0;

  margin: 0 0;
  height: 100%;
  width: 100%;
  background:#555;
  opacity:0.7;
  text-align: center;
}
.loader svg { margin-top:45%; }

.messagebox { color:#555; background:white;
       border:2px solid #ccc; padding:1em; margin:1em; }

/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FFFFFF;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align: bottom;
}
/**
 * 検索結果リスト表示div
 */
.listview { box-shadow: 0 0 6px 1px #777;
            position:absolute; top:30px; background:white; }
.listview div { border:1px solid #ccc; padding:4px; }

/**
 * ユーザ管理メニュー
 */
#useradmin { display:none; border:1px solid #bbb;
             padding:0.5em; margin:0.5em; }

/**
 * マニュアルページ用
 */
.wm { width:250px; }
.wl { width:400px; }
.wxl { width:600px; }
.manual img { box-shadow:1px 1px 6px 2px #ccc; }
.adminmanual { display:none; }
.admintitle { font-size:0.9em; opacity:0.5; }