/* app css stylesheet */

:root {
	--main-color: rgb( 45, 131, 173 );					/* 全体の基本カラー */
	--main-color-80: rgb( 45, 131, 173, 0.8 );			/* 基本カラーの透明度80% */
	--main-color-10: rgb( 45, 131, 173, 0.1 );			/* 基本カラーの透明度10% */
	--main-color-dark: rgb( 23, 102, 140 );				/* 基本カラーの濃いバージョン */
	--main-color-dark-50: rgb( 23, 102, 140, 0.5 );		/* 基本カラーの濃いバージョンの透明度50% */
}

/* タイトル部 */
.title {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 60;
	height: 82px;
	display: flex;
	color: var(--main-color) !important;
	background-color: white;
	padding: 0px 0px 0px 10px;
	border-bottom: solid 1px var(--main-color);
	opacity: .9;
}
.title > div:nth-child(1) {
	min-width: 320px;
}
.title > div:nth-child(2) {
	width: 100%;
}
.title .corp-logo {
	margin-top:5px;
}
.title .corp-logo .logo-image {
	margin-top: 5px;
	width: 110px;
}
.title .title-app {
	font-size: 17px;
	height: 31px;
	line-height: 30px;
}
.title .title-icon {
	height: 29px;
	line-height: 27px;
}
.title .title-label {
	height: 22px;
	line-height: 22px;
}
.title .title-icon md-icon,
.title .title-icon md-icon svg {
	width: 20px !important;
	height: 20px !important;
	min-width: 0;
	min-height: 0;
}
.title .title-icon md-icon path,
.title .title-icon md-icon polygon,
.title .title-icon md-icon rect {
	fill: white !important;
}
.title .title-down:after {
	display: block;
	content: '\25BC';
	position: relative;
	top: 1px;
	left: 2px;
	speak: none;
	font-size: 13px;
	-webkit-transform: scaleY(0.5) scaleX(1);
	transform: scaleY(0.5) scaleX(1);
}
.title .title-button {
	background-color: var(--main-color);
	color: white;
	border-radius:6px;
	padding-left: 15px;
	padding-right: 15px;
	transition: 0.4s;
}
.title .title-button:hover {
	background-color: var(--main-color);
	opacity: 0.8;
}
.title .title-button.md-focused {
	background-color: var(--main-color);
}
.title .title-user-button {
	align-items: flex-end;
	margin-top: 15px;
	margin-right: 15px;
}
.title .title-user-button > .md-button {
	background-color: var(--main-color);
	width: 34px;
	min-width: 34px;
	height: 34px;
	min-height: 34px;
	border-radius: 17px;
	padding: 0;
	margin: 0;
}
.title .title-user-button > .md-button:hover {
	background-color: var(--main-color);
	opacity: 0.8;
}
.title .title-user-button > .md-button.md-focused {
	background-color: var(--main-color);
}
.title .title-user-button md-icon {
	margin-bottom: 5px;
}
.title .title-user-button md-icon,
.title .title-user-button md-icon svg {
	width: 18px !important;
	min-width: 0px;
	height:18px !important;
	min-height: 0px;
}
.title .title-user-button md-icon path {
	fill: white !important;
}
.title .title-user-button > div {
	white-space: nowrap;
}

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

/* ページング */
.paging {
	justify-content: flex-end;
}
.paging > div {
	border-radius: 13px;
	color: var(--main-color);
	overflow: hidden;
	border: solid 1px var(--main-color);
}
.paging > div > div {
	height: 24px;
	line-height: 24px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: white;
	white-space: nowrap;
}
.paging .md-button {
	margin: 0;
	padding: 0;
	width: 24px;
	min-width: 24px;
	height: 24px;
	min-height: 24px;
	line-height: 0;
	background-color: white !important;
	border-radius: 0;
}
.paging .md-button[disabled] {
	background-color: white !important;
}
.paging .md-button:not([disabled]) > md-icon polygon {
	fill: var(--main-color) !important;
}
.paging .md-button[disabled] > md-icon polygon {
	fill: var(--main-color-40) !important;
}
.paging .md-button:not([disabled]):hover {
	background-color: var(--main-color) !important;
	opacity: 1 !important;
}
.paging .md-button[disabled]:hover {
	background-color: white !important;
	opacity: 1 !important;
}
.paging .md-button:not([disabled]):hover > md-icon polygon {
	fill: white !important;
}
.paging > div > md-icon:nth-child(1) {
	margin-right: 5px;
}
.paging > div > md-icon:nth-child(3) {
	margin-left: 5px;
}
.paging md-icon,
.paging md-icon svg {
	width: 12px !important;
	min-width: 0px;
	height: 12px !important;
	min-height: 0px;
}

/* トースト */
.toast {
	position: fixed;
	right: -180px;
	bottom: 30px;
	box-sizing: border-box;
	width: 170px;
	height: 55px;
	line-height: 55px;
	background-color: var(--main-color);
	color: white;
	border-radius: 6px 0 0 6px;
	padding-left: 25px;
	transition: all 0.4s cubic-bezier( 0.25, 0.8, 0.25, 1 );
	box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 20%), 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 3px 3px -2px rgb(0 0 0 / 12%);
	cursor: pointer;
}
.toast md-icon {
	margin-top: -3px;
	margin-right: 10px;
}
.toast md-icon,
.toast md-icon svg {
	width: 18px !important;
	min-width: 0px;
	height: 18px !important;
	min-height: 0px;
}
.toast md-icon polygon {
	fill: white !important;
}
.toast.open {
	right: 0;
}

/* ダウンロードBOX */
.download {
	position: fixed;
	bottom: -50px;
	left: 15px;
	background-color: white;
	color: var(--main-color);
	border: 1px solid var(--main-color);
	border-radius: 6px;
	padding: 13px 28px 13px 20px;
 	transition: all 0.4s cubic-bezier( 0.25, 0.8, 0.25, 1 );
	box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 20%), 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 3px 3px -2px rgb(0 0 0 / 12%);
}
.download.open {
	bottom: 15px;
}
.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: var(--main-color) !important;
}
.download .cancel {
	position: absolute;
	top: 1px;
	right: 1px;
	margin: 0;
	padding: 0;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	line-height: 0;
}
.download .cancel md-icon,
.download .cancel md-icon svg {
	width: 8px !important;
	min-width: 8px;
	height: 8px !important;
	min-height: 8px;
}
.download .cancel md-icon polygon {
	fill: var(--main-color) !important;
}

/* ボタン */
.button {
	color: white;
	background-color: var(--main-color) !important;
	height: 30px;
	min-height: 30px;
	line-height: 30px;
	margin: 0;
	transition: 0.4s;
	box-shadow: none !important;
	border-radius: 6px;
	padding: 0 15px;
}
.button:hover {
	opacity: 0.8;
}
.button md-icon,
.button md-icon svg {
	width: 16px !important;
	min-width: 16px;
	height: 16px !important;
	min-height: 16px;
}
.button md-icon path {
	fill: white !important;
}
.button[disabled] {
	border: 1px solid;
}
.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 md-icon {
	margin: 0 3px 0 0;
}
.button-table md-icon,
.button-table md-icon svg {
	width: 14px !important;
	min-width: 14px;
	height: 14px !important;
	min-height: 14px;
}
.button-table md-icon path,
.button-table md-icon polygon,
.button-table md-icon rect {
	fill: var(--main-color) !important;
}
.button-table:not([disabled]):hover md-icon path,
.button-table:not([disabled]):hover md-icon polygon,
.button-table:not([disabled]):hover md-icon rect {
	fill: white !important;
}
.button-eye {
	padding: 3px 5px 0 6px;
	margin: 0;
	min-width: 30px;
	width: 30px;
	min-height: 0;
	height: 25px;
	line-height: 0;
	margin-left: -31px;
	margin-top: 6px;
}
.button-eye > md-icon svg {
	width: 18px !important;
	height: 18px !important;
}
.button-eye > md-icon path {
	fill: var(--main-color) !important;
}
.button-eye.md-focused {
	background-color: transparent !important;
}
.button-eye-edit {
	padding: 4px;
	margin: 0 0 0 -32px;
	min-width: 32px;
	min-height: 30px;
	height: 30px;
	line-height: 0;
	border-radius: 0 2px 2px 0;
}
.button-eye-edit > md-icon,
.button-eye-edit > md-icon svg {
	width: 18px !important;
	min-width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
}
.button-eye-edit > md-icon path {
	fill: var(--main-color) !important;
}
.button-eye-edit.md-focused {
	background-color: transparent !important;
}
.button-eye-edit[disabled] {
	display: none;
}
.button-add md-icon {
	margin-top: -3px;
}
.button-interval {
 	background-color: var(--main-color) !important;
	border-radius: 6px;
	color: white !important;
	width: 20px !important;
	min-width: 20px;
	height: 20px !important;
	min-height: 20px;
	line-height: 0px;
	padding: 0px;
	margin-left: 10px;
}
.button-interval md-icon,
.button-interval md-icon > svg {
	height: 12px !important;
	min-height: 12px;
	width: 12px !important;
	min-width: 12px;
}
.button-interval md-icon path {
	fill: white !important;
}
.button-reload {
	display: flex;
	justify-content: center;
	width: 20px;
	min-width: 0;
	height: 20px;
	min-height: 20px;
	line-height: 20px;
	padding: 0;
}
.button-reload md-icon,
.button-reload md-icon > svg {
	height: 13px !important;
	min-height: 13px;
	width: 13px !important;
	min-width: 13px;
}
.button-reload md-icon {
	margin: 0 0 0 -1px;
}
.button-password {
	width: 140px !important;
	min-width: 140px !important;
}

/* 選択 */
.select-filter {
	display: flex;
	width: 155px;
	min-width: 155px;
	height: 26px;
	min-height: 26px;
	line-height: 26px;
	border: 1px solid var(--main-color);
	border-radius: 13px;
	background-color: white;
	color: var(--main-color);
}
.select-filter md-select[disabled] .md-select-value {
	color: var(--main-color) !important;
}
.select-filter md-select[disabled] {
	cursor: default !important;
}
.select-filter md-select[disabled]:hover .md-select-value {
	cursor: default !important;
}
.select-filter md-select:not([disabled]):hover {
	background-color: var(--main-color-10);
}
.select-filter md-select {
	width: 100%;
}
.select-filter > div:nth-child(2) {
	width: 100%;
	text-align: left;
}
.select-filter > div:nth-child(3) {
	font-size: 12px;
}
.select-filter > md-icon {
	margin-top: -2px;
    margin-left: 5px;
}
.select-filter > md-icon,
.select-filter > md-icon svg {
	width: 14px !important;
	min-width: 14px;
	height: 14px !important;
	min-height: 14px;
}
.select-filter > md-icon path,
.select-filter > md-icon rect {
	fill: var(--main-color) !important;
}
.select-filter md-select .md-select-value {
	padding-left: 30px !important;
	border: none !important;
	height: 25px !important;
	min-height: 25px !important;
	line-height: 25px !important;
	background-color: transparent;
}
.select-filter md-select:not(.ng-invalid.ng-touched):not([disabled]):focus .md-select-value {
	color: var(--main-color) !important;
	border: none !important;
}

/* 自動更新BOX */
.auto-update-box {
	height: 38px;
	line-height: 38px;
	border-radius: 6px;
	border: solid 1px var(--main-color);
	background-color: white !important;
	align-items: center;
	white-space: nowrap;
	padding: 0 10px;
}
.auto-update-box .count-down {
	text-align: right;
	width: 30px;
	margin-left: 5px;
	margin-right: 5px;
}
.auto-update-box > md-switch {
	padding: 0;
	margin-left: 10px;
}
.auto-update-box > md-switch .md-label {
	width: 45px;
}

/* ダイアログ */
.dialog-loading {
	border: 2px solid var(--main-color);
	border-radius: 10px;
	width: 240px;
	min-width: 240px;
}
.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-cancel md-icon,
.dialog-loading .loading-cancel md-icon svg {
	width: 8px !important;
	min-width: 8px;
	height: 8px !important;
	min-height: 8px;
}
.dialog-loading .loading-cancel md-icon polygon {
	fill: var(--main-color) !important;
}
.dialog-loading .loading-message {
	justify-content: center;
	align-items: center;
	height: 20px;
}
.dialog-loading .loading-message 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;
}
.dialog-app {
	width: 360px;
}
.dialog-app .dialog-text > div:nth-child(1) {
	width: 85px;
	min-width: 85px;
	color: var(--main-color);
}
.dialog-interval .dialog-input > div:nth-child(1) {
	width: 75px;
	min-width: 75px;
}
.dialog-interval md-input-container > input {
	width: 80px !important;
	margin-right: 5px;
}
.dialog-callback {
	width: 420px;
	min-width: 420px;
}
.dialog-callback .dialog-input {
	width: 350px;
	min-width: 350px;
}
.dialog-callback .dialog-input > div {
	width: 100px;
	min-width: 100px;
}
.dialog-notification {
	width: 440px;
	min-width: 440px;
}
.dialog-notification .dialog-input > div {
	width: 120px;
	min-width: 120px;
}
.dialog-password {
	width: 450px;
	min-width: 450px;
}
.dialog-password .dialog-input > div {
	width: 190px;
	min-width: 190px;
}
.dialog-replace {
	width: 335px;
	min-width: 335px;
}
.dialog-replace .dialog-input > div:first-child {
	width: 130px;
	min-width: 130px;
}
.dialog-replace .dialog-input > div:nth-child(2) {
	color: inherit;
}

/* メーター背景色 */
.meter-normal {
	background-color: #87cc76;
}
.meter-caution {
	background-color: #e2e421;
}
.meter-warning {
	background-color: #ea6666;
}
.meter-unknown {
	background-color: #d6d6d6;
}

/* ログイン画面 */
.login {
	height: calc( 100vh - 113px );
	-ms-overflow-style: none;
}
.login > div {
	width: 400px;
	min-width: 400px;
	border-radius: 6px;
	border: solid 1px var(--main-color);
	background-color: white;
	overflow: hidden;
}
.login .login-title {
	font-size: 17px;
	padding: 12px;
	text-align: center;
	color: var(--main-color);
	background-color: white;
}
.login .login-title > md-icon {
	margin-right: 5px;
	margin-top: -2px;
}
.login .login-title > md-icon,
.login .login-title > md-icon svg {
	width: 16px !important;
	min-width: 0px;
	height: 16px !important;
	min-height: 0px;
}
.login .login-title > md-icon path {
	fill: var(--main-color) !important;
}
.login .login-main {
	padding: 18px 15px 0 15px;
	background-color: white;
	overflow-y: auto
}
.login .login-main::-webkit-scrollbar {
	display: none;
}
.login .login-main::after {		/* Edgeで表示時、padding-bottomが無視される問題の対処 */
	display: block;
	width: 1px;
	height: 15px;
	content: "";
}
.login .login-main .login-pass {
	width: 100%;
}
.login .login-main .login-pass > input {
	padding-right: 30px !important;
}
.login .login-main .login-pass > md-icon {
	margin-top: -1px;
}
.login .login-main md-input-container {
	margin-bottom: 15px;
	margin-right: 3px;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	padding-left: 36px !important;
}
.login .login-main md-input-container > input {
	border: none !important;
	border-bottom: 1px solid var(--main-color-50) !important;
	border-radius: 0px !important;
	padding: 0 !important;
}
.login .login-main > .md-button {
	width: 100%;
	height: 36px;
	line-height: 0px;
	background-color: var(--main-color) !important;
	color: white !important;
	margin: 0;
	transition: 0.4s;
	box-shadow: none !important;
	border-radius: 6px;
}
.login .login-main md-input-container > md-icon,
.login .login-main md-input-container > md-icon svg {
	width: 24px !important;
	min-width: 0px;
	height: 24px !important;
	min-height: 0px;
}
.login .login-main > md-input-container > md-icon {
	margin-top: -3px;
}
.login .login-main > .md-button:hover {
	background-color: var(--main-color) !important;
	color: white !important;
	cursor: pointer !important;
}
.login .login-main > .md-button[disabled] {
	cursor: pointer !important;
	border-color: var(--main-color) !important;
}

/* メーター一覧(リスト)画面 */
.meter-list .text-color-red {
	color: rgb( 205, 55, 55 ) !important;
	font-weight: bold;
}
.meter-list .status-row-red {
	background-color: #ffb7c1;
}
.meter-list .status-row-yellow {
	background-color: #fff897;
}
.meter-list .warning {
	margin-top: -3px;
	margin-left: 3px;
}
.meter-list .warning,
.meter-list .warning svg {
	width: 15px !important;
	min-width: 15px;
	height: 15px !important;
	min-height: 15px;
}
.meter-list .warning path {
	fill: rgb( 205, 55, 55 ) !important;
}

/* メーター一覧(グリッド)画面 */
.meter-grid .meter-graph-box {
	align-items: flex-start;
	justify-content: center;
}
.meter-grid .meter-graph-box .graph-border-normal {
	border-color: #377528 !important;
}
.meter-grid .meter-graph-box .graph-border-caution {
	border-color: #80752b !important;
}
.meter-grid .meter-graph-box .graph-border-warning {
	border-color: #92325a !important;
}
.meter-grid .meter-graph-box .graph-border-abnormal {
	border-color: #808080 !important;
}
.meter-grid .meter-graph-box .graph-back-normal {
	background-color: #377528;
}
.meter-grid .meter-graph-box .graph-back-caution {
	background-color: #80752b;
}
.meter-grid .meter-graph-box .graph-back-warning {
	background-color: #92325a;
}
.meter-grid .meter-graph-box .graph-back-abnormal {
	background-color: #808080;
}
.meter-grid .meter-graph-box .graph-color-normal {
	color: #377528 !important;
}
.meter-grid .meter-graph-box .graph-color-caution {
	color: #80752b !important;
}
.meter-grid .meter-graph-box .graph-color-warning {
	color: #92325a !important;
}
.meter-grid .meter-graph-box .graph-color-abnormal {
	color: #808080 !important;
}
.meter-grid .meter-graph-box .graph-icon-normal path {
	fill: #377528 !important;
}
.meter-grid .meter-graph-box .graph-icon-caution path {
	fill: #80752b !important;
}
.meter-grid .meter-graph-box .graph-icon-warning path {
	fill: #92325a !important;
}
.meter-grid .meter-graph-box .graph-icon-abnormal path {
	fill: #808080 !important;
}
.meter-grid .meter-graph-sort {
	align-items: flex-end;
}
.meter-grid .meter-graph-sort > div {
	margin-right: 20px;
	margin-bottom: 4px;
	width: 60px;
}
.meter-grid .meter-graph-sort > div > md-icon,
.meter-grid .meter-graph-sort > div > md-icon svg {
	width: 14px !important;
	height: 14px !important;
	min-width: 0;
	min-height: 0;
	margin-top: -1px;
}
.meter-grid .meter-graph-sort > md-input-container {
	margin: 0;
	padding: 0;
	width: 130px;
	height: 30px;
}
.meter-grid .meter-graph-sort > md-checkbox {
	margin-bottom: 3px;
	margin-left: 30px;
}
.meter-grid .meter-graph-sort > md-checkbox > div:nth-child(2) {
	margin-bottom: 1px;
}
.meter-grid .meter-graph {
	position: relative;
	padding: 10px;
	border-radius: 6px;
	width: 160px;
	background-color: white;
	overflow: hidden;
	box-sizing: border-box;
	margin: 10px;
	border: solid 1px white;
	cursor: pointer;
}
.meter-grid .meter-graph:hover .graph-status {
	opacity: 0.8;
}
.meter-grid .meter-graph .graph-title {
	color: #2b83ab;
	margin-top: -3px;
	border-bottom: dashed 1px white;
	padding-left: 5px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin-bottom: 10px;
}
.meter-grid .meter-graph .graph-title a:hover {
	text-decoration: none;
}
.meter-grid .meter-graph .graph-title md-icon {
	margin-top: -2px;
	margin-right: -1px;
}
.meter-grid .meter-graph .graph-title md-icon,
.meter-grid .meter-graph .graph-title md-icon svg {
	min-width: 0;
	width: 12px !important;
	min-height: 0;
	height: 12px !important;
}
.meter-grid .meter-graph .graph-battery {
	position: absolute;
	top: 28px;
	right: 10px;
	z-index: 1;
	font-size: 11px;
	color: #737373;
}
.meter-grid .meter-graph .graph-chart {
	display: flex;
	justify-content: center;
	height: 130px;
}
.meter-grid .meter-graph .graph-value {
	display: flex;
	justify-content: center;
	margin: 5px 0px 12px 0px;
}
.meter-grid .meter-graph .graph-value > div {
	font-size: 12px;
	width: auto;
	height: 20px;
	line-height: 20px;
	border-radius: 10px;
	text-align: center;
	border: solid 1px white;
	display: flex;
	justify-content: center;
	padding: 0 15px;
}
.meter-grid .meter-graph .graph-status {
	margin: 0px -10px -10px -10px;
	padding: 10px;
	color: white;
	text-align: right;
}
.meter-grid .meter-graph .graph-status > div:nth-child(2) {
	font-size: 11px;
	color: #e4e4e4;
}
.meter-grid .paging {
	justify-content: center !important;
}

/* データ推移画面 */
.statistics > div {
	border-radius: 6px;
	border: 1px solid var(--main-color);
	background-color: white;
	margin-top: 10px;
}
.statistics > div > div {
	padding: 15px;
}
.statistics > div > div:not(:last-child) {
	border-bottom: 1px dashed var(--main-color);
}
.statistics .statistics-title {
	color: var(--main-color);
	margin-bottom: 10px;
}
.statistics .meter-info > div:nth-child(1) {
	width: 90px;
	color: var(--main-color);
}
.statistics .statistics-period {
	margin-left: 10px;
}
.statistics .statistics-period .date {
	width: 140px;
	margin-right: 10px !important;
}
.statistics .statistics-period .date input {
	width: 140px;
}
.statistics .statistics-period .time,
.statistics .statistics-period .time input {
	width: 100px;
}
.statistics .statistics-period .range-label {
	height: 30px;
	line-height: 30px;
	margin: 0 5px;
}
.statistics .statistics-chart {
	height: 340px;
}

/* デバイス管理画面 */
.device-manage table tbody tr {
	cursor: pointer !important;
}

/* デバイス設定画面 */
.device-settings .outline {
	border-radius: 6px;
	border: 1px solid var(--main-color);
	background-color: white;
	min-width: 620px;
	margin-top: 10px;
}
.device-settings .base-info {
	padding: 15px;
}
.device-settings .base-info > div:first-child {
	width: 165px;
	border-bottom: 1px dashed var(--main-color);
	color: var(--main-color);
}
.device-settings .base-info .row-item {
	width: 165px;
	min-width: 165px;
	color: var(--main-color);
}
.device-settings .base-info > div > div {
	height: 30px;
	line-height: 30px;
}
.device-settings .device-setting {
	padding: 15px;
	border-top: 1px dashed var(--main-color);
}
.device-settings .device-setting > div:first-child {
	width: 165px;
	border-bottom: 1px dashed var(--main-color);
	color: var(--main-color);
}
.device-settings .device-setting .device-input > div:nth-child(1) {
	width: 165px;
	min-width: 165px;
	display: flex;
	align-items: center;
	color: var(--main-color);
}
.device-settings .device-setting .device-input > div {
	height: 30px;
	line-height: 30px;
}
.device-settings .device-timing {
	width: 154px;
}
.device-settings .device-time-single {
	width: 70px;
}
.device-settings .device-time {
	width: 100px;
}
.device-settings .device-time md-select {
	width: 90px;
}
.device-settings .device-interval {
	width: 220px;
}
.device-settings .device-interval md-select {
	width: 120px;
}
.device-settings .meter-setting {
	padding: 15px;
	border-top: 1px dashed var(--main-color);
}
.device-settings .meter-setting > div:first-child {
	width: 165px;
	border-bottom: 1px dashed var(--main-color);
	color: var(--main-color);
}
.device-settings .meter-setting .meter-title {
	padding-left: 10px;
	width: 165px;
	min-width: 165px;
	height: 30px;
	line-height: 30px;
	color: var(--main-color);
}
.device-settings .meter-setting > div > md-input-container {
	width: 100%;
}
.device-settings .toggle-ch > .button {
	min-width: 60px;
	border: 1px solid var(--main-color);
	transition: 0s;
}
.device-settings .toggle-ch > .button:nth-child(1) {
	border-radius: 15px 0 0 15px !important;
	padding: 0 0 0 5px;
}
.device-settings .toggle-ch > .button:nth-child(2) {
	border-radius: 0 15px 15px 0 !important;
	padding: 0 5px 0 0;
}
.device-settings .toggle-ch > .button:not([disabled]).no-select {
	background-color: white !important;
	color: var(--main-color);
}
.device-settings .meter-setting .meter-name {
	width: 240px;
}
.device-settings .meter-setting .meter-range {
	width: 120px;
}
.device-settings .meter-setting .meter-unit {
	width: 130px;
}
.device-settings .meter-setting .meter-angle {
	width: 100px;
}
.device-settings .meter-setting .meter-type {
	width: 110px;
}
.device-settings .range-label {
	height: 30px;
	line-height: 30px;
	margin: 0 5px;
}
.device-settings .meter-threshold {
	margin-top: 15px;
}
.device-settings .meter-threshold .setting-title {
	width: 165px;
	border-bottom: 1px dashed var(--main-color);
	color: var(--main-color);
	margin-left: 10px;
}
.device-settings .meter-threshold md-slider {
	width: 200px;
}
.device-settings .meter-threshold .threshold-input {
	width: 120px;
}
.device-settings .meter-threshold .title-caution {
	height: 25px !important;
	line-height: 25px !important;
	color: rgb( 155, 144, 21 ) !important;
}
.device-settings .meter-threshold .title-warning {
	height: 25px !important;
	line-height: 25px !important;
	color: rgb( 213, 54, 98 ) !important;
}
.device-settings .meter-threshold .title-hysteresis {
	height: 25px !important;
	line-height: 25px !important;
	color: rgb( 27, 149, 25 ) !important;
}
.device-settings md-slider:not([md-discrete]):not([disabled]).md-active .md-slider-wrapper .md-thumb {
	-webkit-transform: scale( 0.7 );
	transform: scale( 0.7 );
}
.device-settings md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper .md-thumb:hover {
	-webkit-transform: scale( 0.7 );
	transform: scale( 0.7 );
}
.device-settings .meter-setting #meter {
	margin-top: 48px;
	margin-left: 70px;
	align-items: center;
	align-self: center;
}
.device-settings .meter-setting .md-errors-spacer {
	display: none;
}

/* アカウント画面 */
.account form {
	border-radius: 6px;
	border: 1px solid var(--main-color);
	background-color: white;
	min-width: 700px;
}
.account .base-info {
	padding: 15px;
}
.account .base-info > div:first-child {
	width: 180px;
	border-bottom: 1px dashed var(--main-color);
	color: var(--main-color);
}
.account .base-info > div > div {
	height: 30px;
	line-height: 30px;
}
.account .base-info .row-item {
	width: 180px;
	min-width: 180px;
	color: var(--main-color);
}
.account .change-password {
	padding: 15px;
	border-top: 1px dashed var(--main-color);
}
.account .change-password > div:first-child {
	width: 180px;
	border-bottom: 1px dashed var(--main-color);
	color: var(--main-color);
}
.account .change-password .row-item {
	width: 180px;
	min-width: 100px;
	height: 30px;
	line-height: 30px;
	color: var(--main-color);
}
.account .change-password md-input-container {
	width: 250px !important;
}
.account .change-password md-input-container > input {
	padding-right: 30px !important;
}
.account .change-password .md-errors-spacer {
	display: none;
}