/* app css stylesheet */

:root {
	--main-color: rgb( 0, 74, 154 );					/* 全体の基本カラー */
	--main-color-90: rgba( 0, 74, 154, 0.9 );			/* 基本カラーの透明度90% */
	--main-color-70: rgba( 0, 74, 154, 0.7 );			/* 基本カラーの透明度70% */
	--main-color-50: rgba( 0, 74, 154, 0.5 );			/* 基本カラーの透明度50% */
	--main-color-30: rgba( 0, 74, 154, 0.3 );			/* 基本カラーの透明度30% */
}

/* トップメニュー */
.header {
	flex: 0 0 auto;
}

/* ツールバー */
.md-toolbar-tools {
	margin: 0px;
	height: 52px;
	min-height: 52px;
	padding: 0px 8px 0px 15px;
	position: fixed !important;
	background-color: rgb( 255, 255, 255 ) !important;
	justify-content: space-between;
	opacity: 0.9;
	color: rgb( 0, 0, 0 );
	z-index: 60;
	border-bottom: solid 1px var(--main-color);
	box-shadow: 0px 1px 5px 0px rgba( 0, 0, 0, 0.1 ), 0px 2px 2px 0px rgba( 0, 0, 0, 0.1 ), 0px 3px 1px -2px rgba( 0, 0, 0, 0.1 );
}
.md-toolbar-tools .corp-logo {
	margin-top: 2px;
}
.md-toolbar-tools .corp-logo .logo-image {
	width: 180px;
}
.md-toolbar-tools .top-title {
	margin-top: -6px;
	font-size: 16px;
	color: var(--main-color) !important;
	white-space: nowrap
}
.md-toolbar-tools .top-menu {
	width: 72%;
	height: 51px;
	-ms-overflow-style: none;
	opacity: 1;
	padding: 0px 10px 0px 30px;
}
.md-toolbar-tools .top-menu .md-nav-bar {
	height: 51px;
	border: none;
}
.md-toolbar-tools .top-menu ._md-nav-button {
	height: 51px;
	border-radius: 0px;
}
.md-toolbar-tools .customer-id {
	width: 220px;
	min-width: 220px;
	height: 51px;
	line-height: 51px;
	font-size: 14px;
	font-weight:bold;
	text-align: right;
	color: rgb( 128, 128, 128 ) !important;
	white-space: nowrap;
}

/* メインView */
.main {
	padding: 67px 15px 0 15px;
	height: calc( 100vh - 67px );
	overflow-y: auto;
}
.main::after {		/* Edgeで表示時、padding-bottomが無視される問題の対処 */
	display: block;
	width: 1px;
	height: 15px;
	content: "";
}

/* 固まりBOX */
.bundle-box {
	min-width: 1000px;
	border-radius: 6px;
	border: solid 1px var(--main-color);
	overflow: hidden;
	margin-right: 15px;
	width: 100%;
	background-color: white;
}
.bundle-box > div {
	padding: 15px;
}
.bundle-box > div:not(:first-child):nth-child(n) {
	border-top: dashed 1px var(--main-color);
}
.bundle-box .bundle-title {
	width: 100%;
	margin-top: -5px;
	margin-bottom: 10px;
	color: var(--main-color);
}
.bundle-box .bundle-title-2 {
	width: 106px;
	margin-top: -3px;
	margin-bottom: 10px;
	color: var(--main-color);
}
.bundle-box .bundle-device {
	margin-left: 20px;
}
.bundle-box .bundle-device md-checkbox {
	min-width: 230px;
	width: 230px;
}
.bundle-box .bundle-device md-checkbox > div:nth-child(2) {
	width: 200px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.bundle-box .bundle-device-button {
	margin-top: -5px;
	margin-left: 20px;
}
.bundle-box .bundle-kind > div {
	margin-left: 20px;
	margin-right: 20px;
}
.bundle-box .bundle-kind > div:not(:first-child) {
	padding-top: 10px;
	border-top: dashed 1px var(--main-color);
}
.bundle-box .bundle-kind > div > div {
	align-items: flex-start;
}
.bundle-box .bundle-kind > div:not(:first-child) {
	margin-top: 10px;
}
.bundle-box .bundle-kind md-checkbox {
	width: 210px;
}
.bundle-box .bundle-kind md-radio-button:not(:last-child) {
	margin-bottom: 3px;
}
.bundle-box .bundle-kind md-radio-button:last-child {
	margin-bottom: 0px;
}

/* センサーBOX */
.sensor-table-wrap thead > tr > th:nth-child(1) {
	min-width: 70px;
}
.sensor-table-wrap tbody tr {
	transition: unset;
}
.sensor-table-wrap tbody tr:hover {
	background-color: transparent !important;
}
.sensor-table-wrap tbody tr td:nth-child(1) {
	word-break: break-all;
}
.sensor-table-wrap .main-menu {
	padding: 0 !important;
	min-width: 75px !important;
	max-width: 75px !important;
	width: 75px !important;
}
.sensor-table-row {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.sensor-table-row > div {
	max-width: calc( 100vw - 226px );
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.sensor-table-row > div::-webkit-scrollbar {
	display: none;
}
.sensor-table-row md-content:last-child {
	margin-right: 7px;
}
.sensor-table-row md-content.sensor-hidden {
	height: 110px;
	background-color: transparent !important;
	border-color: transparent !important;
}
.sensor-table-row .sensor-box {
	margin: 5px 3px 5px 7px;
	width: 248px;
	min-width: 248px;
	border-radius: 6px;
	overflow: hidden;
}
.sensor-table-row .sensor-box .sensor-box-menu {
	border-left: 1px dashed var(--main-color);
	padding-left: 6px;
	margin-right: -2px;
}
.sensor-table-row .sensor-box .sensor-info-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 5px 7px 5px 7px;
	cursor : pointer;
	height: 110px;
}
.sensor-table-row .sensor-box:not(.sensor-hidden):hover {
	background-color: var(--main-color-20) !important;
}
.sensor-table-row .sensor-box .sensor-info-box > div:first-child {
	width: 200px;
	-webkit-text-size-adjust: 99%;
}

/* フィルタ入力欄 */
.input-filter {
	position: relative;
	align-self: flex-end;
}
.input-filter md-icon {
	position: absolute;
	top: 5px;
	left: 6px;
}
.input-filter md-icon,
.input-filter md-icon svg {
	width: 14px !important;
	min-widt : 0px;
	height: 14px !important;
	min-height: 0px;
}
.input-filter md-icon path {
	fill: var(--main-color) !important;
}
.input-filter > div:nth-child(1) {
	font-size: 12px;
	color: gray;
	height: 21px;
	min-width: 124px;
}
.input-filter input {
	width: 150px;
	height: 20px;
	font-size: 12px;
	padding-left: 24px;
	border-radius: 15px;
	border: 1px solid var(--main-color);
}
.input-filter input:focus {
	border: 1px solid var(--main-color);
	outline: 0;
}

/* データ推移BOX */
.statistics-box {
	width: 100%;
	height: 220px;
	margin-top: 10px;
	border: solid 1px gray;
	border-radius: 6px;
	overflow: hidden;
}
.statistics-box > div:nth-child(1) {
	background-color: white;
	color: var(--main-color);
	padding: 14px 10px 0px 3px;
}
/* データ推移BOX ヒートマップ用 */
.statistics-box-heat {
	width: 100%;
	height: 452px;
	margin-top: 10px;
	border: solid 1px gray;
	border-radius: 6px;
	overflow: hidden;
}
.statistics-box-heat > div:nth-child(1) {
	background-color: white;
	color: var(--main-color);
	padding: 14px 10px 0px 3px;
}

/* ボタン */
.button {
	color: white;
	background-color: var(--main-color) !important;
	width: 120px;
	height: 36px;
	margin: 0;
	transition: 0.4s;
	box-shadow: none !important;
	border-radius: 6px;
}
.button:hover {
	opacity: 0.8;
}
.button[disabled] {
	color: rgba( 0, 0, 0, 0.38 );
	background-color: rgba( 0, 0, 0, 0.1 ) !important;
}
.button[disabled] md-icon path {
	fill: rgba( 0, 0, 0, 0.38 ) !important;
}
.button-back {
	width: 80px;
}
.button-logout {
	margin: 0;
	height: 51px;
	line-height: 51px;
	font-size: 14px;
	font-weight: bold;
	color: rgba( 0, 0, 0, 0.54 );
	padding: 0 15px 0 15px;
	border-radius: 0;
}
.button-eye {
	padding: 6px 5px 0 6px;
	margin: 0;
	min-width: 0;
	width: 31px;
	min-height: 0;
	height: 30px;
	line-height: 0;
	margin-left: -31px;
	margin-top: 0px;
}
.button-eye > md-icon svg {
	width: 18px !important;
	height: 18px !important;
}
.button-eye > md-icon path {
	fill: var(--main-color) !important;
}
.button-sensor-add {
	width: 120px;
	min-width: 120px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0px 10px 0px 0px !important;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-sensor-add:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-sensor-edit {
	width: 120px;
	min-width: 120px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0px 5px 0px 0px !important;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-sensor-edit:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-group-add {
	width: 120px;
	min-width: 120px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0px 10px 0px 0px !important;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-group-add:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-group-delete {
	width: 120px;
	min-width: 120px;
	height: 34px;
	min-height: 34px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 1;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-user-add {
	width: 120px;
	min-width: 120px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	border: solid 1px var(--main-color);
	border-radius: 6px;
	margin: 0;
}
.button-user-add:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-mail-add {
	width: 120px;
	min-width: 120px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	border: solid 1px var(--main-color);
	border-radius: 6px;
	margin: 0;
}
.button-mail-add:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-select {
	width: 75px;
	min-width: 75px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0px 0px 0px 10px;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-select:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-rawdata-export {
	width: 150px;
	min-width: 150px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0px 0px 0px 0px !important;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-rawdata-export:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-csv-export {
	width: 100px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0px 0px 0px 0px !important;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-csv-export:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-menu {
	margin: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	height: 124px !important;
	border-radius: 0 !important;
}
.button-menu:hover {
	background-color: var(--main-color-20) !important;
}
.button-group-menu {
	margin: 0;
	padding: 0px 15px 0px 15px;
	border-radius: 0;
}
.button-update {
	width: 85px;
	min-width: 0px;
	height: 30px;
	min-height: 0px;
	line-height: 28px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0 !important;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-update md-icon {
	width: 13px;
	min-width: 13px;
	margin-bottom: 3px;
	margin-right: -1px;
}
.button-update md-icon path {
	fill: var(--main-color) !important;
}
.button-update:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-update:hover md-icon path {
	fill: white !important;
}
.button-check-sensor {
	width: 64px;
	min-width: 64px;
	height: 24px;
	min-height: 24px;
	line-height: 0px;
	margin: 0 10px 5px 0 !important;
	border: solid 1px rgba( 0, 0, 0, 0.54 );
	border-radius: 6px;
	color: rgba( 0, 0, 0, 0.54 );
}
.button-download {
	background-color: var(--main-color);
	color: white;
	border: solid 1px var(--main-color);
	border-radius: 6px;
	margin: 0;
	padding: 0 20px;
	height: 30px;
	min-height: 30px;
	line-height: 28px;
}
.button-download:not(:disabled):hover {
	background-color: var(--main-color-70) !important;
}
.button-group-index {
	min-width: 26px;
	margin-top: -3px;
	margin-bottom: 0px;
	margin-right: 15px;
	margin-left: 0px;
	padding: 0;
	height: 24px;
	min-height: 24px;
	line-height: 0;
	cursor: pointer;
}
.button-table {
	width: 70px;
	min-width: 70px;
	height: 26px;
	min-height: 26px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
	display: flex;
	justify-content: center;
}
.button-table:not([disabled]):hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-table-wide {
	width: 90px;
	min-width: 100px;
	height: 26px;
	min-height: 26px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
	display: flex;
	justify-content: center;
}
.button-table-wide:not([disabled]):hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.button-gateway-add {
	width: 120px;
	min-width: 120px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0px 0px 0px auto !important;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.button-gateway-add:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}

/* 表示データなし */
.nodata {
	height: 40px;
	background-color: white;
	padding-right: 15px;
	border-radius: 0 0 6px 6px;
	border-bottom: solid 1px var(--main-color);
	border-left: solid 1px var(--main-color);
	border-right: solid 1px var(--main-color);
}

/* csv */
.csv {
	width: 312px;
}
.csv md-progress-linear {
	margin-bottom: 0px !important;
}
.csv > md-dialog-content > div > div:nth-child(2) {
	text-align: right;
}
.csv md-progress-linear .md-container .md-dashed {
	background: linear-gradient( -45deg, #8f99d6 25%, #C5CAE9 25%, #C5CAE9 50%, #8f99d6 50%, #8f99d6 75%, #C5CAE9 75%, #C5CAE9 );
	background-size: 20px 20px;
	-webkit-animation: stripe 5s linear infinite;
	-ms-animation: stripe 5s linear infinite;
	height: 6px;
}

/* ログイン領域 */
.login {
	height: calc( 100vh - 82px );
	-ms-overflow-style: none;
}
.login > div {
	width: 400px;
	min-width: 400px;
	border-radius: 6px;
	border: solid 1px var(--main-color);
	background-color: var(--main-color);
	overflow: hidden;
}
.login > div > div:nth-child(1) {
	font-size: 15px;
	color: white;
	padding: 15px;
}
.login > div > form {
	padding: 15px 15px 0 15px;
	background-color: white;
	height: calc( 100% - 52px );
	overflow-y: auto;
}
.login > div > form::-webkit-scrollbar {
	display: none;
}
.login > div > form::after {		/* Edgeで表示時、padding-bottomが無視される問題の対処 */
	display: block;
	width: 1px;
	height: 15px;
	content: "";
}
.login md-input-container {
	margin-top: 0;
}
.login md-input-container .md-input {
	border: none !important;
	border-bottom: 1px solid var(--main-color-50) !important;
	border-radius: 0px !important;
	padding: 0 !important;
}
.login md-input-container.md-input-focused .md-input {
	border-bottom: 2px solid var(--main-color) !important;
}
.login md-input-container.md-input-invalid .md-input {
	border-color: rgb( 221, 44, 0 ) !important;
}
.login > div > form > button {
	width: 100%;
	height: 36px;
	line-height: 0px;
	background-color: white !important;
	color: var(--main-color) !important;
	margin: 0;
	transition: 0.4s;
	border: solid 1px var(--main-color);
	box-shadow: none !important;
	border-radius: 6px;
}
.login > div > form > button:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
.login > div > form .login-pass > input {
	padding-right: 30px !important;
}
.login .info-box {
	overflow: hidden;
	border: 1px solid var(--main-color);
	border-radius: 6px;
	background: white;
	margin-top: 18px;
}
.login .info-box .info-text {
	overflow: auto;
	height: 80px;
	padding: 5px;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ダミー */
.dummy {
	padding: 0;
	border: none;
	width: 0;
	height: 0;
}

/* センサーの枠の色 */
.sensor-grid-black {
	border: solid 2px rgb( 51, 51, 51 );
}
.sensor-grid-blue {
	border: solid 2px rgb( 70, 130, 180 );
}
.sensor-grid-green {
	border: solid 2px rgb( 60, 179, 113 );
}
.sensor-grid-yellow {
	border: solid 2px rgb( 255, 165, 0 );
}
.sensor-grid-red {
	border: solid 2px rgb( 220, 20, 60 );
}
.sensor-grid-white {
	border: solid 2px rgb( 255, 255, 255 );
}

/* 枠線の色 sensor-grid-xxx と合わせる */
.grid-color-black {
	color: rgb( 51, 51, 51 );
	font-weight: bold;
}
.grid-color-blue {
	color: rgb( 70, 130, 180 );
	font-weight: bold;
}
.grid-color-green {
	color: rgb( 60, 179, 113 );
	font-weight: bold;
}
.grid-color-yellow {
	color: rgb( 255, 165, 0 );
	font-weight: bold;
}
.grid-color-red {
	color: rgb( 220, 20, 60 );
	font-weight: bold;
}
.grid-color-gray {
	color:: #BBBBBB;
	font-weight: bold;
}

/* センサー状態色 */
.area-white {
	background-color: #FFFFFF;
}
.area-yellow {
	background-color: #FFFFCC;
}
.area-red {
	background-color: #FFCCCC;
}
.area-gray {
	background-color: #D2D2D2;
}

/* 文字色 */
.text-color-black {
	color: rgba( 0, 0, 0, 0.87 );
}
.text-color-gray {
	color: #D2D2D2;
}
.text-color-red {
	color: red;
	font-weight: bold;
	font-style: oblique;
}
.text-color-yellow {
	color: #FF6600;
	font-weight: bold;
	font-style: oblique;
}

/* Analysis画面 */
.analysis-sensor-info {
	font-size: 16px;
	font-weight: bold;
	color: var(--main-color);
	border-bottom: 1px solid var(--main-color);
	margin-left: -15px;
	padding-right: 50px;
	padding-left: 15px;
	line-height: 29px;
}
.analysis-date {
	margin-top: 2px;
	margin: 0;
	padding: 0;
	width: 130px;
}
.analysis-date .md-errors-spacer {
	display: none;
}
.analysis-time {
	width: 100px;
	height: 30px;
	margin-left: 10px;
	-webkit-appearance: menulist-button;
}
.analysis-date-between {
	width: 38px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.analysis-date-only input {
	width: 130px;
	height: 30px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 6px;
	margin-right: -4px;
}
.analysis-date-only.md-datepicker-open input {
	background-color: white;
	border: none;
}
.analysis-date-only .md-datepicker-input-container.md-datepicker-focused {
	border: none;
}
.analysis-date-only.md-input-focused .md-input {
	border-width: 2px;
}
.analysis-date-only .md-input[disabled] {
	border: solid 1px rgb( 166, 166, 166 );
}
.analysis-heatmap-select {
	margin-top: 2px;
	margin: 0;
	padding: 0;
	width: 140px;
}

/* ピーク選択 */
.text-peak {
	text-align: right;
	width: 114px;
}
.select-peak {
	margin-top: -4px;
	margin-left: 5px;
}
.select-peak > .md-button {
	width: 70px;
	min-width: 70px;
	height: 30px;
	min-height: 30px;
	line-height: 0;
	border-radius: 6px;
	margin: 0;
	padding: 0 0 0 7px;
	text-align: left;
	border: solid 1px rgb( 166, 166, 166 );
	background-color: rgb( 248, 248, 248 );
}
.select-peak > .md-button > div:nth-child(2) {
	font-size: 10px;
	margin-left: 44px;
}
.select-peak-content {
	width: 74px;
	min-width: 74px;
}
.select-peak-content > .md-button {
	padding: 0 0 0 9px;
	margin: 0;
	text-align: left;
	width: 74px;
	min-width: 74px;
	height: 30px;
	min-height: 30px;
	line-height: 30px;
	border-radius: 0;
	font-size: 13px;
}

/* メニュー選択状態 */
.menu-selected {
	background-color: var(--main-color-30);
}

/* チャート画面の電池、温度表示 */
.chart-battery-temp {
	height: 30px;
	line-height: 30px;
	margin-left: 40px;
}

/* 時間波形 */
.time-wave {
	margin-top: 10px;
	min-width: 155px;
}
.time-wave > div:nth-child(1) {
	font-size: 18px;
	color: var(--main-color);
	border-bottom: 1px dashed var(--main-color);
	margin-right: 14px;
	margin-bottom: 5px;
}

/* 周波数解析の左側 */
.fft-peak {
	min-width: 225px;
	margin-top: 10px;
}
.fft-peak > div:nth-child(1) {
	font-size: 18px;
	color: var(--main-color);
	border-bottom: 1px dashed var(--main-color);
	margin-right: 14px;
	margin-bottom: 5px;
}

/* エンベロープ */
.envelope-wave {
	font-size: 18px;
	margin-top: 10px;
	min-width: 206px;
	height: 27px;
	color: var(--main-color);
	border-bottom: 1px dashed var(--main-color);
	margin-right: 14px;
}
.envelope-frequency {
	margin-top: 10px;
	min-width: 220px;
}
.envelope-frequency > div:nth-child(1) {
	font-size: 18px;
	color: var(--main-color);
	border-bottom: 1px dashed var(--main-color);
	margin-right: 14px;
	margin-bottom: 5px;
}

/* トレンド */
.trend {
	margin-top: 10px;
	min-width: 230px;
	height: 27px;
	color: var(--main-color);
	border-bottom: 1px dashed var(--main-color);
	margin-right: 14px;
}
.trend .trend-select-title {
	width: 100%;
	text-align: left;
	padding: 0;
	margin: 0;
	display: flex;
	min-height: 27px;
	height: 27px;
	line-height: 0;
}
.trend .trend-select-title > div:nth-child(1) {
	font-size: 18px;
	width: 100%;
}
.trend .trend-select-title > div:nth-child(2) {
	font-size: 12px;
}
.trend .font-size {
	font-size: 18px;
	width: 100%;
}
.trend-select-content {
	width: 185px;
	max-height: 400px;
}
.trend-select-content > .md-button {
	padding: 0 0 0 9px !important;
	margin: 0;
	text-align: left;
	height: 30px;
	min-height: 30px;
	line-height: 30px;
	border-radius: 0;
	font-size: 13.5px;
}
.trend-select-content > .md-button:not(:first-child) {
	border-top: 1px dashed var(--main-color);
}
.trend-statistics {
	padding-bottom: 3px;
	height: 236px;
}
.trend-statistics > div:nth-child(1) {
	padding-top: 4px !important;
}
.cleansing-switch > div:nth-child(1) {
	margin-top: 5px;
	width: 130px;
}
.trend-axis-setting {
	margin-top: 5px;
}
.trend-axis-setting > div > div {
	margin-top: 5px;
}
.trend-axis-setting .selected-button {
	color: white;
	background-color: var(--main-color-90);
	font-weight: bold;
}
.trend-axis-setting .unselected-button {
	color: var(--main-color-90);
}
.trend-axis-setting a {
	border-radius: 8px;
	margin-left: 5px;
}
.trend-axis-setting a:hover {
	text-decoration: none;
	background-color: var(--main-color-30);
	color: white;
}
.trend-axis-setting a > div {
	width: 78px;
	height: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.trend-axis-setting .input-trend-chart-axis-y {
	margin: 0;
	padding: 0;
	width: 80px;
	height: 23px;
}
.trend-axis-setting .input-trend-chart-axis-y input {
	text-align: center;
	width: 75px;
    height: 23px;
	font-size: 12px;
	color: #333333;
	fill: #333333;
	stroke: rgb(204, 204, 204);
	stroke-width: 1;
	margin-left: 3px;
	margin-right: 5px;
}

/* AI解析 */
.ai-analysis {
	margin-top: 10px;
}
.ai-analysis > div {
	width: calc( 50% - 10px );
}
.ai-analysis > div:nth-child(1) {
	margin-right: 10px;
}
.ai-analysis > div:nth-child(2) {
	margin-left: 10px;
}
.ai-analysis .statistics-box {
	margin-left: 10px;
	width: calc( 100% - 10px );
}
.ai-analysis.latent-variable {
	margin-top: 15px;
}
.ai-analysis.latent-variable .statistics-box {
	padding-bottom: 3px;
	height: 236px;
}
.ai-analysis.latent-variable .statistics-box > div:nth-child(1) {
	padding-top: 4px !important;
}
.ai-graph-title > div {
	width: 200px;
	font-size: 18px;
	color: var(--main-color);
	border-bottom: 1px dashed var(--main-color);
}
.ai-axis-setting {
	margin:7px 0 -3px 20px;
}
.ai-axis-setting .selected-button {
	color: white;
	background-color: var(--main-color-90);
	font-weight: bold;
}
.ai-axis-setting .unselected-button {
	color: var(--main-color-90);
}
.ai-axis-setting > div:nth-child(4) {
	margin-left: 10px;
}
.ai-axis-setting a {
	border-radius: 8px;
	margin-left: 5px;
	height: 23px;
}
.ai-axis-setting a:hover {
	text-decoration: none;
	background-color: var(--main-color-30);
	color: white;
}
.ai-axis-setting a > div {
	width: 70px;
	height: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ai-axis-setting .input-ai-chart-axis-y {
	margin: 0;
	padding: 0;
	width: 65px;
	height: 23px;
}
.ai-axis-setting .input-ai-chart-axis-y input {
	text-align: center;
	width: 60px;
    height: 23px;
	font-size: 12px;
	/* font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; */
	color: #333333 !important;
	fill: #333333 !important;
	stroke: rgb(204, 204, 204);
	stroke-width: 1;
	margin-top: -2px;
	margin-left: 3px;
	margin-right: 5px;
}


/* ダイアログ */
.dialog-loading {
	border: 2px solid var(--main-color);
	border-radius: 10px;
	width: 222px;
	min-width: 222px;
}
.dialog-loading md-dialog-content > div {
	padding: 20px 20px 18px 20px;
	text-align: center;
	color: var(--main-color);
}
.dialog-loading .loading-cancel {
	position: absolute;
	top: 1px;
	right: 1px;
	margin: 0;
	padding: 0;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	line-height: 0;
}
.dialog-loading .loading-message {
	justify-content: center;
	align-items: center;
	height: 20px;
}
.dialog-loading md-icon {
	margin: 0px 4px 0 0;
}
.dialog-loading md-icon,
.dialog-loading md-icon svg {
	width: 12px !important;
	min-width: 0px;
	height: 12px !important;
	min-height: 0px;
}
.dialog-loading md-icon path {
	fill: var(--main-color) !important;
}
.group-info-dialog {
	width: 350px !important;
	min-width: 350px !important;
}
.group-info-dialog .group-input > div {
	width: 90px;
	min-width: 90px;
	height: 30px;
	line-height: 30px;
	color: var(--main-color);
	font-weight: bold;
}
.group-info-dialog .group-input > md-input-container {
	width: 70%;
}
.sensor-info-dialog {
	width: 410px !important;
	min-width: 410px !important;
	max-height: 85%;
}
.sensor-input-last {
	margin-bottom: -15px;
}
.sensor-input > div:nth-child(1) {
	width: 125px;
	min-width: 125px;
	color: var(--main-color);
	font-weight: bold;
	height: 30px;
	line-height: 30px;
}
.sensor-input md-input-container {
	width: 230px;
}
.sensor-input .input-small {
	width: 100px !important;
}
.sensor-input .input-mode {
	width: 150px !important;
}
.sensor-input .input-three-digits {
	width: 36px !important;
}
.sensor-input .input-two-digits {
	width: 30px !important;
}
.sensor-input .input-short {
	width: 65px !important;
}
.sensor-input .input-short .md-input-messages-animation {
	position: absolute;
	width: 200px;
	top: 30px;
}
.sensor-input .word {
	margin-left: 5px;
	margin-right: 6px;
	height: 30px;
	line-height: 30px;
}
.sensor-input .word-first {
	margin-right: 6px;
	height: 30px;
	line-height: 30px;
}
.sensor-input .sensor-input-position {
	height: 30px;
	line-height: 30px;
}
.sensor-input .sensor-input-mst {
	width: 36px;
	height: 30px;
}
.sensor-input .no-error-spacer .md-errors-spacer {
	display: none;
}
.sensor-input-check {
	margin-left: 135px !important;
}
.sensor-input-check .md-label {
	margin-top: -4px !important;
}
.sensor-input-title {
	color: var(--main-color);
	font-weight: bold;
	border-bottom: 1px dashed var(--main-color);
	width: 150px;
	margin-bottom: 10px;
}
.sensor-input-index {
	width: 30%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 0px;
	padding: 00px;
	box-sizing: border-box;
}
.sensor-input-delete {
	color: red !important;
}
.sensor-input-delete > md-checkbox > .md-container {
	margin-top: 1px;
}
.sensor-input-error {
	color: rgb( 221, 44, 0 );
	font-size: 12px;
	margin-left: 105px;
}
.mail-info-dialog {
	width: 380px;
}
.mail-info-dialog .mail-input > div {
	width: 115px;
	min-width: 115px;
	height: 30px;
	line-height: 30px;
	color: var(--main-color);
	font-weight: bold;
}
.confirm-wide-dialog {
	width: 310px;
}
.confirm-wide-dialog .warning-msg{
	color: red !important;
}
.user-info-dialog {
	width: 360px;
}
.user-info-dialog .user-input > div {
	width: 92px;
	min-width: 92px;
	height: 30px;
	line-height: 30px;
	color: var(--main-color);
	font-weight: bold;
}
.user-info-dialog .input-pass > input {
	padding-right: 30px !important;
}
.user-info-dialog .button-eye {
	margin-left: -31px !important;
	width: 38px !important;
}
.ai-create-dialog {
	width: 300px;
}
.ai-create-input-last {
	margin-bottom: -15px;
}
.ai-create-input > div:nth-child(1) {
	width: 120px;
	min-width: 120px;
	color: var(--main-color);
	font-weight: bold;
	line-height: 30px;
}
.ai-create-input md-input-container {
	width: 100px;
}
.ai-create-input .input-small {
	width: 100px !important;
}
.teaching-dialog {
	width: 400px !important;
	min-width: 400px !important;
}
.teaching-input-last {
	margin-bottom: -15px;
}
.teaching-input > div:nth-child(1) {
	width: 400px;
	min-width: 400px;
	color: var(--main-color);
	font-weight: bold;
	line-height: 30px;
}
.teaching-input-txt {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 5px;
}
.teaching-input-delete {
	color: red !important;
}
.teaching-input-delete > md-checkbox > .md-container {
	margin-top: 1px;
}

.dummy-input {
	width: 0 !important;
	height: 0 !important;
}
.dummy-input input {
	visibility: hidden;
}
.dummy-input-out {
	margin-left: 125px;
}
.dummy-input-out input{
	height: 0 !important;
	visibility: hidden;
}
.error-msg-group {
	color: #dd2c00 !important;
	font-size: 12px !important;
	white-space: nowrap;
	margin-top: 4px;
}

/* センサ位置の現在地 */
.indx-current-color {
	background-color: #ffb4d8;
}

.error-msg {
	margin-top: -30px !important;
	margin-left: 85px !important;
	color: #dd2c00 !important;
	font-size: 12px !important;
	white-space: nowrap;
}
.error-msg-index{
	margin-top: -8px !important;
	margin-left: 125px !important;
	color: #dd2c00 !important;
	font-size: 12px !important;
	white-space: nowrap;
}
.error-msg-time {
	margin-top: 1px !important;
	margin-left: 125px !important;
	color: #dd2c00 !important;
	font-size: 12px !important;
	white-space: nowrap;
}
.error-msg-interval {
	width: 200px;
	margin-left: 10px;
}

.ai-create-input .input-small .md-input-messages-animation {
	position: absolute;
	width: 150px;
	top: 30px;
}
.csv-dialog {
	width: 280px !important;
	min-width: 280px !important;
}
.csv-dialog-title {
	height: 30px;
	line-height: 30px;
	width: 65px;
	min-width: 65px;
	color: var(--main-color);
	font-weight: bold;
}
.csv-dialog .md-errors-spacer {
	display: block !important;
}
.csv-dialog md-input-container {
	width: 100% !important;
}
.csv-dialog .md-datepicker-input-container {
	width: 145px;
}
.csv-dialog-error {
	color: rgb( 221, 44, 0 );
	font-size: 12px;
	margin-top: 4px;
	width: 132px;
}

/* ユーザー画面 */
.user-menu-area {
	width: 80px;
	min-width: 80px;
}
.user-menu-area button {
	width: 80px;
	min-width: 80px;
}

/* センサー名 */
.sensor-name {
	color: var(--main-color);
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin-bottom: 2px;
}

/* アイコン */
.menu-icon {
	color: var(--main-color) !important;
}
.radio-icon {
	margin-top: -3px;
	margin-right: 4px;
}
.radio-icon,
.radio-icon svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	min-height: 18px;
}
.radio-icon polygon,
.radio-icon path {
	fill: var(--main-color) !important;
}
.time-icon {
	margin-top: -3px;
	margin-right: 2px;
}
.time-icon,
.time-icon svg {
	width: 14px !important;
	height: 14px !important;
	min-width: 14px;
	min-height: 14px;
}
.mode-icon {
	margin-right: -1px;
}
.mode-icon,
.mode-icon svg {
	width: 23px !important;
	height: 23px !important;
	min-width: 23px;
	min-height: 23px;
}
.delete-icon {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	min-height: 22px;
}
.delete-icon polygon,
.delete-icon path {
	fill: var(--main-color) !important;
}
.battery-icon {
	height: 34px;
	line-height: 74px;
	text-align: center;
}
.battery-icon md-icon,
.battery-icon md-icon svg {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	min-height: 22px;
}
.alert-icon {
	margin-top: 5px;
}
.alert-icon md-icon,
.alert-icon md-icon svg {
	color: var(--main-color) !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	min-height: 22px;
}
.alert-icon path {
	fill: var(--main-color) !important;
}
.index-icon {
	margin-top: 0px;
	margin-left: 0px;
}

/* ダウンロードBOX */
.download {
	position: fixed;
	bottom: 25px;
	right: -150px;
	background-color: var(--main-color-90);
	color: white;
	border-radius: 25px 0 0 25px;
	padding: 13px 23px 13px 20px;
 	transition: all 0.4s cubic-bezier( 0.25, 0.8, 0.25, 1 );
}
.download.open {
	right: 0;
}
.download > div {
	min-width: 85px;
	height: 20px;
	line-height: 20px;
	white-space: nowrap;
}
.download .md-button {
	margin: 0;
	padding: 0;
	height: 18px;
	min-height: 0;
	line-height: 0;
	width: 18px;
	min-width: 0;
	margin-top: -11px;
	margin-right: -22px;
	margin-left: 5px;
}
.download .md-button > div {
	font-size: 15px;
	font-weight: bold;
	color: white;
}
.download md-icon {
	animation: rotate 2s linear infinite normal;
	margin-right: 5px;
}
.download md-icon,
.download md-icon svg {
	width: 16px !important;
	min-width: 16px;
	height: 16px !important;
	min-height: 16px;
}
.download md-icon path {
	fill: white !important;
}

/* 単位表示枠 */
.explanation-box {
	margin-left: 10px;
	margin-right: 10px;
	padding: 2px 20px;
	border: solid 1px var(--main-color);
	border-radius: 6px;
	background-color: white;
	font-size: 12px;
	white-space: nowrap;
}
.explanation-box > div > div:nth-child(1) {
	width: 85px;
}
.explanation-box > div > div:nth-child(2) {
	width: 13px;
}
.explanation-box > div > div:nth-child(n+4) {
	margin-left: 15px;
}

/* お知らせ */
.info-edit {
	border-radius: 4px;
	border: 1px solid var(--main-color-50);
	width: 500px;
	height: 180px;
	display: flex;
	overflow: hidden;
	background-color: white;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.info-edit-focus {
	border: 2px solid var(--main-color) !important;
}
.info-edit > textarea {
	width: 100%;
	padding: 5px 8px;
	margin: 0;
	font-family: MyFont, sans-serif;
	font-size: 13.5px;
	outline: none;
	border: none;
	background-color: transparent;
}

/* アラート設定 */
.alert-switch > div:nth-child(1) {
	margin-top: 4px;
	margin-left: 20px;
	width: 100px;
}
.alert-email {
	min-width: 950px;
}

/** Gateway管理 */
.button-gateway {
	width: 80px;
	min-width: 64px;
	height: 28px;
	min-height: 24px;
	line-height: 0px;
	margin: 0 10px 5px 0 !important;
	border: solid 1px rgb( 0, 74, 154 );
	border-radius: 10px;
	color: rgb( 0, 74, 154 ) !important;
	margin: 0;
}
.button-gateway:hover {
	background-color: rgb( 0, 74, 154 ) !important;
	color: white !important;
}

.button-gateway[disabled]{
	width: 80px;
	min-width: 64px;
	height: 28px;
	min-height: 24px;
	line-height: 0px;
	margin: 0 10px 5px 0 !important;
	background-color: rgb( 210, 210, 210 ) !important;
	border: solid 1px rgb( 0, 0, 0 );
	border-radius: 10px;
	color: rgb( 0, 0, 0 ) !important;
	margin: 0;
}
.gw-text-center {
	text-align: center;
}
.gw-customer-input{
	margin-bottom: 10px;
	color: rgb( 0, 74, 154 ) !important;
}
.gw-customer-list{
	width: 120px;
	min-width: 120px;
	height: 28px;
	min-height: 24px;
	margin: 5px 10px 5px 0 !important;
	border: solid 1px rgb( 0, 74, 154 );
	border-radius: 10px;
 	color: rgb( 0, 74, 154 ) !important;
}
.gw-customer-selectbox{
	width: 80px;
	min-width: 64px;
	height: 28px;
	min-height: 24px;
	line-height: 0px;
	margin: 5px 10px 5px 0 !important;
	border: solid 1px rgb( 0, 74, 154 );
	border-radius: 10px;
	background: rgb( 255, 255, 255 );
	color: rgb( 0, 74, 154 ) !important;
	margin: 0;
	}

.gw-customer-selectbox:hover {
	background-color: rgb( 0, 74, 154 ) !important;
	color: white !important;
}

.main-menu-content {
	width: 110px;
}

/** Gateway詳細 */
.button-gateway-setting {
	width: 120px;
	min-width: 120px;
	height: 30px;
	min-height: 30px;
	line-height: 0px;
	margin: 0 10px 5px 0 !important;
	border: solid 1px rgba( 0, 0, 0, 0.54 );
	border-radius: 6px;
	color: rgba( 0, 0, 0, 0.54 );
}
.gateway-info {
	margin-left: 20px;
	margin-top: 20px;
}
.gateway-info-title {
	width: 100px;
}
.gateway-info-title-second {
	/* margin-top: 3px; */
	margin-left: 150px;
	width: 100px;
}
.gateway-info md-input-container {
	margin-top: -7px;
	margin-bottom: -5px;
	margin-left: 17px;
	width: 200px;
}
.gateway-memo-edit {
	width: 380px;
	height: 80px;
	margin-left: 17px;
	border-radius: 6px;
	overflow: hidden;
	border: solid 1px gray;
}
.gateway-memo-edit > textarea {
	margin: 0px;
	padding: 6px;
	border: none;
	overflow-y: scroll;
	box-sizing: border-box;
	width: 380px;
	height: 80px;
	resize: none;
	font-family: MyFont, sans-serif;
	font-size: 13.5px;
	outline: none;
}
.linked-sensor-list {
	margin: 10px;
}
.linked-sensor-list md-checkbox {
	margin-bottom: 8px;
}
.linked-sensor-list md-checkbox > div:nth-child(2) {
	min-width: 225px;
	width: calc( 20vw - 100px );
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.linked-sensor-list md-checkbox div:nth-child(1) {
	margin-right: 50px;
}
.whitelist-dialog {
	width: 500px;
}
.whitelist-dialog .select-sensor {
	margin-left: 10px;
}
.whitelist-dialog .select-sensor> div:nth-child(1) {
	width: 105px;
	min-width: 105px;
	color: var(--main-color);
	font-weight: bold;
	margin-top: 3px;
}
.whitelist-dialog .select-sensor > md-select {
	width: 300px;
	min-width: 300px;
	height: 30px;
	line-height: 30px;
	margin: 0px 0px 10px 0px;
}
.whitelist-dialog md-input-container {
	margin-top: 15px;
}

/** AI管理 */
.ai-customer-icon {
	padding: 0;
	margin: -3px 3px 0 0 !important;
}
.ai-customer-icon path {
	fill: var(--main-color) !important;
}
.ai-customer-icon,
.ai-customer-icon svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	min-height: 18px;
}
.ai-customer md-input-container {
	width: 170px;
	margin: 0px 10px 0px 0px;
	padding: 0;
}
.creating-ai-model {
	color: var(--main-color);
}
.creating-ai-model md-icon {
	margin-top: -2px;
	animation: rotate 2s linear infinite normal;
}
.creating-ai-model md-icon,
.creating-ai-model md-icon svg {
	width: 13px !important;
	min-width: 13px;
	height: 13px !important;
	min-height: 13px;
}
.creating-ai-model md-icon path {
	fill: var(--main-color) !important;
}
.ai-model-success {
	font-weight: bold;
	color: black;
}
.ai-model-failed {
	color: rgb( 200, 200, 200 );
}
.ai-model-use {
	font-weight: bold;
	color: rgb( 0, 74, 154 );
}