@charset "UTF-8";

body,html{
	font-size: 16px;
	box-sizing: border-box;
	color: #333;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-family: "Noto Sans JP", sans-serif !important;
}
div,span,th,td{
	box-sizing: border-box;
}
body, div.usf_header, div.usf_footer{
	background: #fff;
}
pre{
	background: #444;
	color: #fff; line-height: 1.1em; font-size: 10px; font-family: monospace;
	padding: 10px 20px;
	border-radius: 5px;
	box-shadow: 1px 1px 2px #000 inset;
}

span{ display: inline-block; }
table{ table-layout: fixed; }

.scrollbox{ overflow-y:scroll; }

.tx-clipboard{
	width:0;height:0;font-size:0;opacity:0;
}
.al-clipboard{
	position:fixed;
	display:none;
	top:0;right:0;
	width:100px;
	line-height:20px;
	font-size:10px;text-align:center;
	background:yellow;
	color:#white;
	z-index: 10000;
}
.bt-clipboard{
	background: url(icon_clip.svg) no-repeat;
	background-size: 20px 20px;
	background-position: 50%;
	color: transparent; font-size:0;
	width: 24px; height: 20px;
	display: inline-block;
}

.icon_qr{
	background: url(/qr/icon_qrcode.png) no-repeat;
	background-size: 20px 20px;
	background-position: 50%;
	color: transparent; font-size:0;
	width: 24px; height: 20px;
	display: inline-block;
}

/* common */
input{
	margin-bottom: 2px;
	outline:none;
}
input[type=text],
input[type=date],
input[type=time],
input[type=password],
select{
	max-width: 330px;
	border:0.5px solid #777;
	border-radius: 2px;
	background: #fff; color: #222;
}
textarea{
	border:0.5px solid #aaa;
	border-radius: 2px;
	background: #fff; color: #222;
}

input[type=radio] {
	position: relative; background: #fff;
	width: 18px; height: 18px; top:2px;
	border: 1px solid #000; border-radius: 10px;
	vertical-align: -4px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
}
input[type=radio]:checked:before{
	position: absolute;
	top: 2px; left: 2px;
	width:12px; height:12px;
	border-radius:50%;
	border-right: 0; border-bottom: 0;
	background:#555;
	content: '';
}

input[type=checkbox]{
	position: relative; width: 16px; height: 16px;
	border: 1px solid #000; vertical-align: -5px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background: #fff; color: #222;
}
input[type=checkbox]:checked:before{
	position: absolute; top: 1px; left: 4px;
	transform: rotate(50deg); width: 4px; height: 8px;
	border-right: 2px solid #000; border-bottom: 2px solid #000; content: '';
}

p{
	margin: 0 0 0 10px;
}

ul.memo li{
	line-height: 1.5em;
}

ul.komejirushi{
	list-style-type: none;
	padding: 5px;
	margin: 0;
}
ul.komejirushi li::before{
	content: "※";
}
ul.komejirushi li{
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5em;
}

label{
	font-size: 14px;
	margin: 0 20px 0 10px;
}
select{
	vertical-align: middle;
	line-height: 30px;
	height: 30px;
}

.ls_5{
	letter-spacing: -5px;
}

.clearfloat{ clear:both; height:0;line-height:0;font-size:0px; }
.error{
	color: #dc0d6d;
	font-size: 0.9em;
	line-height: 2em;
}
.memo{
	color: #555;
	padding-left: 1em;
	display: inline-block;
	font-size: 0.8em;
}
.OK{
	background: #17bf2c;
	color: #fff;
	font-weight: bold;
	font-size: 0.9em;
	padding: 2px 10px;
	border-radius: 3px;
}
.NG{
	background: #f74545;
	color: #fff;
	font-weight: bold;
	font-size: 0.9em;
	padding: 2px 10px;
	border-radius: 3px;
}

.f-container{
	display: flex;
	flex-direction: row;
	align-content: flex-start;
	align-items: flex-start;
}
.f-item{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.f-item.basis60{ flex-basis: 60%; }
.f-item.basis50{ flex-basis: 50%; }
.f-item.basis40{ flex-basis: 40%; }
.f-item.basis33{ flex-basis: 33%; }	/* 1/3 */
.f-item.basis30{ flex-basis: 30%; }
.f-item.basis25{ flex-basis: 25%; }	/* 1/4 */
.f-item.basis20{ flex-basis: 20%; }	/* 1/5 */
.f-item.basis10{ flex-basis: 10%; }

.f_small{ font-size: 10px; }

hr.dashed{
	border: none;
	border-top: 1px dashed #555;
	background: transparent;
	height: 1px;
}
hr.double_dashed{
	border: none;
	border-top: 1px dashed #555;
	border-bottom: 1px dashed #555;
	background: transparent;
	height: 2px;
}

h1{
	position: relative;
	font-size: 24px;
	color: #333;
	padding: 0 0 0 25px;
	background: url(../img/bg_mesh10x50.png) no-repeat;
	-webkit-margin-before: 0;
	margin: 0 0 20px 0;
}
h2{
	position: relative;
	font-size: 20px;
	color: #333;
	padding: 0 0 0 25px;
	background: url(../img/bg_mesh10x50.png) no-repeat;
	-webkit-margin-before: 0;
	margin: 5px 0 20px 0;
}

a{
	color: #333;
	font-weight: bold;
}
a:hover{
	opacity: 0.8;
}

.bg_mesh{
	background: #FFF url(../img/bg_mesh.png) !important;
}

.f_right{ float: right; }
.v_top { vertical-align: top !important; line-height: 30px; }
.v_middle { vertical-align: middle !important; }
.align_left{
	text-align: left !important;
}

.left, .align_center{ text-align: left !important; }
.center, .align_center{ text-align: center !important; }
.right, .align_right{
	text-align: right !important;
	padding-right: 10px;
}
.mr10{ margin-right: 10px; }
.mr20{ margin-right: 20px; }
.mr30{ margin-right: 30px; }
.w50{ width: 50px !important; min-width:50px !important; }
.w100{ width: 100px !important; min-width:100px !important; }
.w150{ width: 150px !important; min-width:150px !important; }
.w200{ width: 200px !important; min-width:200px !important; }
.w250{ width: 250px !important; min-width:250px !important; }
.w300{ width: 300px !important; min-width:300px !important; }
.ellipsis{ text-overflow: ellipsis; white-space: nowrap; overflow:hidden; }

.border_dashed{
	border: 2px dashed #ccc;
	border-radius: 5px;
}

/* for input[type=file] */
input.inputFile{ display:none; }
label.inputFile{
	padding: 4px 10px;
	background: #fff;
	color:#555;
	cursor: pointer;
	border-radius: 4px;
}
span.inputFile{ margin: 5px 0 0 5px; }

/* header */
div.header_border{
	position: fixed;
	top: 0; left: 0; right: 0; height: 36px; line-height: 36px; overflow:hidden;
	background-color: rgb(13,105,178);
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	font-size: 75%;
	padding: 0 30px 0 0;
	color: #FFF;
	clear: both;
	z-index: 1000;
	text-align: right;
}
div.header_border .rspan{
	position: relative;
	display:block; width:auto; height:100%;
	margin:0 0 0 20px;
	float:right;
}

div.wrapper{
	position: relative;
	margin: 36px 30px 30px 30px;
}
div.usf_header{
	position: fixed; left: 30px; right: 30px; top:36px;
	margin: 0 0 10px 0;
	height: 90px;
	border-bottom: 1px solid #000;
}
div.usf_header img#usf_logo{
	position: absolute;
	top: 10px; left: 0;
	height: 80px;
}
div.usf_header div#usf_login{
	position: absolute;
	bottom: 10px; right: 10px;
	font-size: 75%;
}
div.usf_header div#usf_login span{
	margin: 0 20px;
}
div.usf_header span#usf_title{
	position: absolute;
/* top: 35px; left:410px; font-size: 22px; */
	top: 40px; left: 400px; font-size: 17px;
	font-weight: bold;
	color: #333;
}

/* footer */
div.usf_footer{
	position: fixed; left:0; right:0; bottom:0;
	font-size: 75%;
	text-align:center;
	line-height: 3em;
	color: #555;
}
div.usf_footer span{
	margin: 0 10px;
}
div.usf_footer a{
	text-decoration: none;
	color: #555;
}

div.usf_content{
	position: relative;
	margin-top: 140px;
	padding-bottom: 80px;
}
body.layout2 div.usf_footer,
body.layout3 div.usf_footer{
	margin-left: 210px;
}
body.layout0 div.usf_content{
	margin-top: 50px;
}


/* content */
div#usf_content{
	width: 780px;
}
body.layout1 div#usf_content{
	width: 800px;
	min-height: 480px;
	margin: 20px auto;
	padding: 0 0 0 10px;
}
body.layout2 div#usf_content,
body.layout3 div#usf_content{
	position: relative;
	left: 210px; right: 0;
	margin: 20px 0 50px 0;
	padding: 0 0 0 10px;
}


/** dotted box **/
div.dottedbox{
	margin: 10px 0 20px 0;
	padding: 0 10px;
	border: 1px dotted #CCC;
	background: #FFF;
}

/** ボタン **/
button, .button{
	display: inline-block;
    margin: 2px 0;
    padding: 2px 7px;
    border: 1px solid #555;
	background: #f0f0f0;
    border-radius: 2px;
    color: #000 !important;
	text-decoration: none;
	font-weight: normal;
}
/** 色付きボタン **/
a.button0{
	font-size: 12px;
	line-height: 30px;
}
input.button_disabled, a.button_disabled,
input.button1, a.button1,
input.button2, a.button2,
input.button3, a.button3{
	display: inline-block;
	font-size: 15px;
	line-height: 40px;
	color: #FFF;
	border-radius: 4px;
	text-shadow:  0 0 1px #222;
	box-shadow: 1px 1px 3px #000;
	padding: 0 20px;
	min-width: 140px;
	text-align: center;
	text-decoration: none;
}
input.button_disabled, a.button_disabled{
	border: 1px dotted #aaa;
	box-shadow: none;
	text-shadow: none;
	color: #aaa;
}
input.button1, a.button1{
	background: #0065b1;
	background: linear-gradient(180deg, #41adff,#0065b1);
	border: none;
}
input.button2, a.button2{
	background: #f63732;
	background: linear-gradient(180deg, #fb736f,#f63732);
}
input.button3, a.button3{
	background: #b8b8b8;
	background: linear-gradient(180deg, #cecece,#848484);
}
input.button1.small, a.button1.small,
input.button2.small, a.button2.small,
input.button3.small, a.button3.small{
	min-width: 0;
	font-size: 12px;
	line-height: 30px;
	padding: 0 10px;
	margin: 1px 0 2px;
	min-width:30px;
}
input.button1.small.ls_5, a.button1.small.ls_5,
input.button2.small.ls_5, a.button2.small.ls_5,
input.button3.small.ls_5, a.button3.small.ls_5{
	padding: 0 10px 0 5px;
}

a.sort{
	text-decoration: underline;
}
a.sort.selected{
	font-style: italic;
}

/** 表 **/
table.list{
	background: transparent;
	border-spacing: 1px;
	font-size: 75%;
	margin: 0 0 5px 0;
}
table.list th{
	background: #CCC;
	text-align: center;
	font-weight: bold;
}
table.list td{
	text-align: left;
	background: #FFF;
}
table.list th,
table.list td{
	padding: 2px 10px;
	border: 1px solid #909090;
	line-height: 20px;
	font-size: 12px;
}
table.list td{
	border: 1px solid #aaa;
}
table.list tr:nth-child(2n) td{
	background: #f1f1f1 !important;
}
table.list td.transparent{
	border: none;
}

table.noborder{
	border: none !important;
	background: transparent !important;
	border-spacing: 10px;
}
table.noborder th,
table.noborder td{
	border: none !important;
	background: transparent !important;
	text-align: left;
	padding: 0 20px 0 10px;
}
table.noborder tr:nth-child(2n) td{
	background: transparent !important;
}

table.list tr:nth-child(2n) td.noborder,
th.noborder, td.noborder{
	background: transparent !important;
	border: transparent !important;
}

table.bottombar{
	font-size: 12px;
}
table.bottombar th,
table.bottombar td{
	border-bottom: 1px solid #777;
	padding: 5px 10px;
	vertical-align: top;
	line-height: 24px;
}
table.bottombar th{
	text-align: left;
}
table.bottombar td{
	text-align: left;
}

/** ダッシュボードメニュー **/
.dashmenu{
	display: block;
	background: #ccc;
	margin: 0 0 10px 0;
	padding: 5px;
	border-radius: 4px;
}
.dashmenu a{
	font-size: 14px;
	font-weight: normal;
	display: inline-block;
	text-align: center;
	line-height: 35px;
	padding: 2px 10px;
	box-shadow: 1px 1px 2px #000;
	color: #333;
	border-radius: 4px;
	min-width: 100px;
	background: #cccfdc;
	background: linear-gradient(180deg, #ffffff,#cccfdc);
	text-decoration: none;
}
.dashmenu a.super{
	background: #7bf;
	background: linear-gradient(180deg, #ffffff,#7bf);
}
.dashmenu a.mypage{
	background: #fdb66d;
	background: linear-gradient(180deg, #ffb0a0,#f5542a);
}
.dashmenu a.dark{
	background: #aaa;
	background: linear-gradient(180deg, #eee, #aaa);
}
.dashcontent{
	padding: 5px;
	background: #fff;
	border-radius: 4px;
}


/** 警告メッセージ：小ぶりな赤文字 **/
span.alert{
	color: #f55;
	font-size: 11px;
	font-weight: bold;
}
span.alert.safe{
	color: #aaa;
}

/** コメントメッセージ：小ぶりなグレー文字 **/
span.comment{
	color: #555;
	font-size: 11px;
}

/** ダイアログ **/
div#dialog_bg{
	position: fixed;
	background: rgba(0,0,0,0.5);
	top:0; bottom:0; right:0; left:0;
	z-index: 100;
}
div#dialog{
	position: relative;
	margin: 70px auto;
	width: 800px; min-height: 400px;
	background: #FFF;
	padding: 0;
	box-shadow: 2px 4px 20px #000;
}
div#dialog div#bar{
	background-color: rgb(13,105,178);
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	text-align:right;
	line-height: 3em;
	font-size: 75%;
	padding-right: 20px;
}
div#dialog div#bar a{ color: #FFF; }
div#dialog_content{
	padding: 10px 50px;
}
div#dialog table.noborder{
	width: 600px;
}

div#dialog input,
div#dialog textarea{
	max-width: 400px;
}

div.dialogbase{
	position: absolute;
	background: rgba(0,0,0,0.5);
	top: 0; left: 0; right: 0; height: 0;
}

dialog:-internal-dialog-in-top-layer::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog,
dialog#usf_dialog{
	position: relative;
	border: none; border-radius: 10px; box-shadow: 1px 1px 4px #000;
	padding: 0 0 0 0;
	overflow: hidden;
	background: #fff;
	max-width: 75%;
	outline: none;
	font-size: 12px;
}
dialog .modal-header,
dialog#usf_dialog .modal-header{
	position: absolute;
	margin: 0;
	top:0;left:0;right:0;
	text-align: center;
	line-height: 40px;
	background: #0065b1;
	background: linear-gradient(180deg, #41adff,#0065b1);
	font-size: 14px; color: #fff;
	text-shadow: 0 0 3px #0065b1;
}
dialog .modal-footer,
dialog#usf_dialog .modal-footer{
	position: absolute;
	top: 0; right: 0;
	line-height: 40px;
}
dialog .modal-footer .closeButton,
dialog#usf_dialog .modal-footer .closeButton{
	display: inline-block;
	background: transparent url(icon_x_light.svg) no-repeat;
	background-size: 40%;
	background-position: 50%;
	width: 40px; height: 40px;
	text-align: center;
	font-size: 14px; color: transparent;
}
dialog .modal-body,
dialog#usf_dialog .modal-body{
	position:relative;
	margin: 50px 0 0 0;
	padding: 10px 20px;
	line-height: 30px;
	max-height: 800px;
	overflow-y: auto;
}


.printonly{
	display:none;
}
div.zeromargin{
	position: relative;
	margin: 0;
	padding: 0;
}

@media print {
	.printonly{
		display:block;
	}
	a{
		text-decoration: none !important;
	}
	div#usf_menu,
	div.usf_footer a,
	.noprint,
	.button1, .button2, .button3{
		display: none !important;
	}
	body.layout2 div.usf_footer,
	body.layout3 div.usf_footer{
		margin-left: 0 !important;
	}

	div#usf_content{
		left: 0 !important;
		width: 800px !important;
		margin: 20px auto !important;
	}
}

span.asinfo{
	display: block;
	background: #f0fcff;
	color: #555;
	font-size: 11px;
	line-height:34px;
}

/*--*/
a.bService{
	/*background: transparent url(./icon_service.png) no-repeat; */
	background: transparent url(/potree/libs/potree/resources/icons/goto.svg) no-repeat;
	background-size: 22px 22px;
	background-position: 50% 50%;
	width: 30px; height: 30px; padding: 0 0 !important; color: transparent; text-shadow: none; box-shadow: none;
}
a.bDetail{
	background: transparent url(./icon_detail.png) no-repeat;
	background-size: 22px 22px;
	background-position: 50% 50%;
	width: 30px; height: 30px; padding: 0 0 !important; color: transparent; text-shadow: none; box-shadow: none;
}
a.bDelete{
	background: transparent url(./icon_trash.png) no-repeat;
	background-size: 22px 22px;
	background-position: 50% 50%;
	width: 30px; height: 30px; padding: 0 0 !important; color: transparent; text-shadow: none; box-shadow: none;
}
a.bList{
	background: transparent url(./icon_list.png) no-repeat;
	background-size: 22px 22px;
	background-position: 50% 50%;
	width: 30px; height: 30px; padding: 0 0 !important; color: transparent; text-shadow: none; box-shadow: none;
}
a.bShare{
	background: transparent url(./icon_share.png) no-repeat;
	background-size: 22px 22px;
	background-position: 50% 50%;
	width: 30px; height: 30px; padding: 0 0 !important; color: transparent; text-shadow: none; box-shadow: none;
}
a.bViewer{
	background: transparent url(/potree/libs/potree/resources/icons/volume.svg) no-repeat;
	background-size: 22px 22px;
	background-position: 50% 50%;
	width: 30px; height: 30px; padding: 0 0 !important; color: transparent; text-shadow: none; box-shadow: none;
}
a.bViewer.working{
	background-color: orange;
}
a.bViewer.hasError{
	border-right: 1px solid red;
	border-left: 1px solid red;
}

a.bShare,
a.bDetail,
a.bViewer{
	border: 1px solid transparent;
}
a.bShare:hover,
a.bDetail:hover,
a.bViewer:hover,
a.bShare:focus,
a.bDetail:focus,
a.bViewer:focus{
	border: 1px solid #888;
}

#content_map{
	position: relative; display: block; padding: 30px;
	width: 840px; height: 540px;
	border:1px solid #555;
	background:#fff url(<?= $this->Url->build('/css/axis.svg') ?>) no-repeat;
	background-size:50px 50px;
	background-position:left bottom;
}
#content_map .maparea{
	position: absolute; display: flex; padding: 0 0 0 0;
	align-items: center; justify-content: center;
	background: #aaa;
	font-size: 13px; font-weight:100; color: #fff;
	text-shadow: 0 0 4px #000;
	box-shadow:1px 1px 3px #222;
}
#content_map .maparea .maparea_nm{
	font-weight:400;
}
#content_map .maparea .maparea_lasname{
	font-size: 10px;
	margin-left:5px;
}
#content_map .maparea_zero_x{
	position: absolute;
	left: 29px; bottom: 29px; right: 20px; height:0px;
	border-bottom: 1px dashed #222;
}
#content_map .maparea_zero_y{
	position: absolute;
	left: 29px; bottom: 29px; top: 20px; width:0px;
	border-left: 1px dashed #222;
}

.error_box{
	display: inline-block;
	background: #ef0000;
	color: #fff;
	padding: 0 10px;
	margin: 0 5px;
}


.OP_ITEM[group=group6]{ display:none; }
.OP_ANNO_ADD .OP_ITEM.ON_ANNO_ADD{ display:block; }
.OP_ANNO_DEL .OP_ITEM.ON_ANNO_DEL{ display:inline-block; }
.OP_ANNO_EDT .OP_ITEM.ON_ANNO_EDT{ display:inline-block; }