/* angular material custom 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-26: rgba( 0, 74, 154, 0.26 );			/* 基本カラーの透明度26% */
	--main-color-20: rgba( 0, 74, 154, 0.2 );			/* 基本カラーの透明度20% */
}

/* 非アクティブ時の背景 */
md-backdrop.md-opaque {
	opacity: 0.6;
	position: fixed;
}

/* フォーカスアウト時のエラーの線の太さ */
md-input-container:not(.md-input-focused) .md-input.ng-invalid {
	border-width: 0 0 1px 0 !important;
}

/* toast */
md-toast {
	min-width: 0px;
	position: fixed;
	padding: 0;
	width: 100%;
	text-align: right;
}
.md-toast-content {
	max-width: none !important;
	height: 43px !important;
	min-height: 0px !important;
	background-color: rgba( 255, 255, 255, 0.8 ) !important;
	border-top: 1px solid var(--main-color);
	color: var(--main-color) !important;
	border-radius: 0px !important;
	padding-right: 10px !important;
}
.md-toast-animating {
	overflow: auto !important;
}

/* tooltip */
md-tooltip {
	font-size: 12px !important;
	height: auto !important;
	background-color: white !important;
	border: 1px solid var(--main-color) !important;
	color: var(--main-color) !important;
	padding: 2px 10px !important;
}

/* datepicker */
.md-calendar-day-header {
	background-color: var(--main-color) !important;
	color: white !important;
}
.md-datepicker-calendar-pane {
	border: none !important;
	border-radius: 6px;
	overflow: hidden;
}
.md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator {
	background-color: var(--main-color) !important;
}
.md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator {
	border-color: var(--main-color) !important;
}
.md-datepicker-input-container.md-datepicker-focused {
	border-bottom-color: var(--main-color) !important;
}
.md-datepicker-triangle-button.md-button.md-icon-button {
	margin-right: 10px;
}
.md-datepicker-open input.md-input {
	border: none !important;
}

/* 区切り線 */
md-divider {
	border-top-color: var(--main-color);
}

/* タブ */
md-tabs {
	border-radius: 6px;
	border: solid 1px var(--main-color);
	background-color: white;
	overflow: hidden;
}
md-tabs md-ink-bar {
	color: rgb( 147, 198, 255 );
	background-color: rgb( 147, 198, 255 );
}
md-tabs-canvas,
md-pagination-wrapper {
	height: 50px;
}
md-tabs-wrapper {
	background-color: var(--main-color-90) !important;
	border-style: none !important;
	border-radius: 7px 7px 0px 0px;
	margin: -1px;
}
md-tab-content {
	padding: 15px;
}
md-tab-item {
	min-width: 100px;
	border-right: solid 1px rgba( 0, 0, 0, 0.1 );
	font-size: 13.5px !important;
	color: white !important;
	text-transform: none !important;
}

/* テーブル */
md-table-container {
	overflow: hidden;
	min-width: 1000px;
}
md-table-container table {
	border-radius: 6px 6px 0 0;
	background-color: var(--main-color-90);
	border-top: solid 1px var(--main-color-90);
	border-left: solid 1px var(--main-color-90);
	border-right: solid 1px var(--main-color-90);
}
md-table-container thead th {
	text-align: center !important;
	color: white !important;
	font-weight: normal !important;
}
md-table-container .md-sort-icon {
	color: white !important;
	min-width: 13px !important;
	width: 13px !important;
	min-height: 13px !important;
	height: 13px !important;
	vertical-align: top !important;
}
md-table-container table.md-table th.md-column.md-sort {
	position: relative;
}
md-table-container .action {
	width: 145px;
	min-width: 145px;
	text-align: right !important;
}
md-table-container .action md-icon {
	min-width: 18px;
	width: 18px !important;
	margin-top: -24px;
	margin-right: -13px;
}
md-table-container .action md-icon path {
	fill: white;
}
md-table-container .action md-icon:hover {
	opacity: .6;
}
md-table-container .action_2 {
	width: 70px;
	min-width: 70px;
	text-align: right !important;
}
md-table-container .action_2 md-icon {
	min-width: 18px;
	width: 18px !important;
	margin-top: -24px;
	margin-right: -13px;
}
md-table-container .action_2 md-icon path {
	fill: white;
}
md-table-container .action_"" md-icon:hover {
	opacity: .6;
}
md-table-container .monitor-check {
	text-align: center !important;
	margin-left: 2px !important;
}
md-table-container thead tr {
	height: 40px !important;
}
md-table-container tbody {
	background-color: white;
}
md-table-container tbody tr {
	height: 40px !important;
}
md-table-pagination {
	background-color: white;
	height: 48px;
	min-width: 530px;
	font-size: 13.5px !important;
	border-top: solid 1px var(--main-color-90) !important;
	border-bottom: solid 1px var(--main-color-90);
	border-left: solid 1px var(--main-color-90);
	border-right: solid 1px var(--main-color-90);
	border-radius: 0 0 6px 6px;
}
md-table-pagination > div {
	height: 48px !important;
}
md-table-pagination > .buttons {
	margin-right: -11px !important;
}
md-table-pagination > .buttons > .md-button.md-icon-button {
	border: 1px solid var(--main-color) !important;
	width: 28px;
	height: 28px;
	min-height: 28px;
}
md-table-pagination > .buttons > .label + .md-button.md-icon-button {
	margin-right: 10px;
}
md-table-pagination > .buttons > .md-button.md-icon-button > md-icon {
	margin-top: -7px;
	margin-left: -7px;
}
md-table-pagination > .buttons > .md-button.md-icon-button > md-icon path {
	fill: var(--main-color) !important;
}
md-table-pagination > .buttons > .md-button.md-icon-button[disabled] {
	background-color: white !important;
	border: 1px solid #b3b3b3 !important;
}
md-table-pagination > .buttons > .md-button.md-icon-button[disabled] > md-icon path {
	fill: #b3b3b3 !important;
}
md-table-container th,
md-table-container td {
	font-size: 13.5px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}
md-table-container th:not(:first-child),
md-table-container td:not(:first-child) {
	border-left: solid 1px rgba( 0, 0, 0, 0.1 );
}
md-table-container tr:nth-child(1) td {
	border-top: 0px !important;
}
md-table-container tbody:not(:last-child) .border-bottom {
	border-bottom: solid 1px rgba( 0, 0, 0, 0.1 );
}
md-table-container tbody .border-left {
	border-left: solid 1px rgba( 0, 0, 0, 0.1 );
}
md-table-container tbody tr {
	transition: background-color 0.3s;
	outline: none;
}
md-table-container tbody tr:hover {
	background-color: var(--main-color-20);
}
md-table-container .sensor-status {
	min-width: 85px;
}
md-table-container .gateway-id {
	min-width: 80px;
}
md-table-container .table-fixed {
	table-layout: fixed;
}
.md-pagination-select md-select-menu {
	max-height: 300px !important;
}

/* 入力、選択エリア */
.md-input-focused label {
	color: var(--main-color) !important;
}
.md-input-focused .md-input,
.md-input-focused .md-select-value {
	border-color: var(--main-color) !important;
}
md-input-container md-icon path,
md-input-container md-icon polygon {
	fill: var(--main-color) !important;
}
md-input-container .md-input {
	border: 1px solid var(--main-color-50) !important;
	border-radius: 4px !important;
	padding: 0 5px 0 5px !important;
}
md-input-container.md-input-focused .md-input {
	border: 2px solid var(--main-color) !important;
}
md-input-container:not(.md-input-focused) .md-input.ng-invalid {
	border-width: 1px !important;
}
md-input-container .md-input[disabled] {
	border: 1px dashed var(--main-color-50) !important;
	background-image: none !important;
	cursor: not-allowed;
}
md-input-container.md-input-invalid .md-input {
	border-color: rgb( 221, 44, 0 ) !important;
}
md-select-menu {
	max-height: 400px;
	min-height: 36px;
	border-radius: 5px !important;
	border: 1px solid var(--main-color) !important;
	background-color: white;
}
md-select-menu md-content {
	padding: 0px !important;
	max-height: 400px;
	min-height: 36px;
}
md-select-menu md-content md-option {
	height: 36px !important;
	color: var(--main-color);
	padding: 0 14px 0 14px !important;
}
md-select-menu md-content md-option[selected] {
	color: var(--main-color) !important;
}
md-option:not(:first-child) {
	border-top: dashed 1px var(--main-color);
}
md-select .md-select-value {
	border: 1px solid var(--main-color-50) !important;
	border-radius: 4px !important;
	padding: 0 5px 0 5px !important;
	min-height: 28px;
	min-width: 30px;
	background-color: white;
}
md-select.md-table-select > .md-select-value {
	border: 1px solid var(--main-color-50) !important;
}
md-select.ng-invalid.ng-touched .md-select-value {
	border-color: rgb( 221, 44, 0 ) !important;
}
md-select[disabled] .md-select-value {
	border: 1px dashed var(--main-color-50) !important;
	background-image: none !important;
	cursor: not-allowed;
}

/* ボタン */
.md-button {
	font-size: 13.5px;
	text-transform: none;
}
.md-button.md-icon-button .md-ripple {
	background-color: var(--main-color) !important;
}
.md-button.md-icon-button.md-focused {
	background-color: transparent !important;
}
.md-button[disabled] {
	cursor: not-allowed;
	background-color: #e2e2e2 !important;
	border-color: #b3b3b3 !important;
	color: #b3b3b3 !important;
}
.md-button[disabled]:hover {
	background-color: #e2e2e2 !important;
	border-color: #b3b3b3 !important;
	color: #b3b3b3 !important;
}

/* ラジオボタン */
md-radio-button {
	margin-right: 30px !important;
}
md-radio-button .md-off,
md-radio-button .md-on {
	width: 18px;
	height: 18px;
}
md-radio-button .md-container {
	margin-top: 1px;
}
md-radio-button.md-checked .md-ink-ripple {
	color: var(--main-color) !important;
}
md-radio-button .md-ripple-container {
	right: -13px !important;
}
md-radio-button .md-label {
	margin-left: 24px;
	vertical-align: top;
}
md-radio-button .md-on {
	background-color: var(--main-color) !important;
}
md-radio-button.md-checked .md-off {
	border-color: var(--main-color) !important;
}
md-radio-group.md-focused:not(:empty) .md-checked .md-container:before {
	background-color: transparent;
}
md-radio-group[disabled] md-radio-button.md-checked .md-off {
	border-color: rgb( 158, 158, 158 ) !important;
}
md-radio-group[disabled] md-radio-button.md-checked .md-on {
	background-color: rgb( 158, 158, 158 ) !important;
}

/* チェックボックス */
md-checkbox {
	margin-bottom: 0px;
	margin-right: 0px;
	padding-right: 20px;
}
md-checkbox[disabled] {
	cursor: not-allowed;
}
md-checkbox:not([disabled]).md-checked .md-icon {
	background-color: var(--main-color) !important;
}
md-checkbox.md-checked .md-ink-ripple {
	color: var(--main-color) !important;
}
md-checkbox .md-ink-ripple {
	height: 16px;
}
md-checkbox.md-focused .md-ink-ripple::before {
	background-color: transparent !important;
}
md-checkbox .md-icon {
	width: 16px;
	height: 16px;
}
md-checkbox.md-checked .md-icon::after {
	width: 6px !important;
	height: 11px !important;
	top: -1px !important;
	left: 3.4px !important
}
md-checkbox.md-indeterminate .md-icon::after {
	width: 10px !important;
}
md-checkbox .md-ripple-container {
	height: 54px !important;
	left: -20px !important;
	top: -20px !important;
	right: -14px !important;
}
md-checkbox .md-label {
	margin-left: 22px;
}

/* スイッチ */
md-switch {
	margin: 0;
}
md-switch .md-label {
	width: 40px;
}
md-switch.md-checked .md-thumb {
	background-color: var(--main-color) !important;
}
md-switch.md-checked .md-bar {
	background-color: var(--main-color-50) !important;
}
md-switch.md-checked.md-focused .md-thumb::before {
	background-color: var(--main-color-26) !important;
}
md-switch:not(.md-checked) .md-thumb {
	background-color: rgb( 156, 156, 156 ) !important;
}
md-switch:not(.md-checked) .md-bar {
	background-color: rgba( 156, 156, 156, .5 ) !important;
}
md-switch .md-thumb {
	box-shadow: none !important;
}
md-switch.md-checked .md-ink-ripple {
	color: var(--main-color) !important;
}
md-switch.md-checked .md-ink-ripple::before {
	color: var(--main-color);
}

/* ダイアログ */
md-dialog {
	border-radius: 10px;
	width: 300px;
	border: solid 1px var(--main-color);
	background-color: var(--main-color);
}
md-dialog.md-transition-in {
	transform: translate3d( 0px, 0px, 0px ) scale( 1 ) !important;
}
md-dialog.md-transition-out {
	transform: translate3d( 0px, 0px, 0px ) scale( 0.5, 0.5 ) !important;
}
md-dialog > div:nth-child(1) {
	font-size: 15px !important;
	min-height: 46px !important;
	padding: 12px 16px 12px 16px;
	color: white;
	box-sizing: border-box;
}
md-dialog.error {
	background-color: rgb( 219, 112, 147 ) !important;
	border: solid 1px rgb( 219, 112, 147 ) !important;
}
md-dialog-content {
	background-color: white;
	border-bottom: solid 1px rgb( 195, 195, 195 );
}
md-dialog-content > div:nth-child(1) {
	padding: 20px 16px 20px 16px;
	min-height: 40px;
}
md-dialog-content md-progress-linear {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}
md-dialog-actions {
	background-color: white;
	padding: 0px !important;
	min-height: 37px !important;
	align-items: center;
	overflow: hidden;
	border-top: none !important;
}
md-dialog-actions .md-button {
	margin: 0px !important;
	width: 100%;
	border-radius: 0;
	background-color: rgb( 228, 228, 228 );
	min-height: 37px;
	line-height: 37px;
}
md-dialog-actions .md-button:hover,
md-dialog-actions .md-button:focus {
	background-color: rgb( 222, 222, 222 ) !important;
}
md-dialog-actions .md-button .md-ripple-container {
	border-radius: 0px;
}
md-dialog-actions .md-button[disabled] {
	background-color: rgb( 241, 241, 241 ) !important;
	cursor: not-allowed;
}
md-dialog-actions .md-button:nth-child(1) {
	border-right: solid 1px rgb( 195, 195, 195 );
}
md-dialog md-input-container {
	padding: 0px;
	margin: 0px;
}

/* メニュー */
md-menu-content {
	padding: 0;
}
md-menu-content md-divider {
	border-top-style: dashed;
}
md-menu-content button {
	color: var(--main-color) !important;
	margin: 0 !important;
	padding: 0 !important;
}
md-menu-content button:hover {
	background-color: var(--main-color-20) !important;
}
md-menu-content button[disabled] {
	cursor: not-allowed !important;
	background-color: #e2e2e2 !important;
	color: #b3b3b3 !important;
}
md-menu-item {
	height: 40px;
	min-height: 40px;
}
.md-open-menu-container {
	border-radius: 5px;
	border: 1px solid var(--main-color);
	background-color: white;
}
.md-open-menu-container.md-active > md-menu-content > * {
	transition-duration: 100ms;
	transition-delay: 0ms
}
md-menu-item .md-button {
	font-size: 13.5px;
}
md-menu-item.sub-menu {
 	background-color: var(--main-color) !important;
	color: white !important;
}

/* アイコン */
md-icon {
	outline: none;
}
md-icon.md-sort-icon {
	position: absolute;
}
md-icon path,
md-icon polygon,
md-icon polyline,
md-icon rect {
	transition: 0.4s;
}

/* highchartの入力BOX */
input.highcharts-range-selector:focus {
	margin-top: 1px !important;
	border: none !important;
}
.highcharts-button-box {
	stroke: #949494 !important;
	rx: 6 !important;
	ry: 6 !important;
	cursor: pointer;
}

/* ナビバー */
md-nav-bar .md-button._md-nav-button {
	margin-left: 5px;
	margin-right: 5px;
	font-size: 13px;
	font-weight: bold;
	background-color: var(--main-color);
	color: white;
	height: 35px !important;
	min-height: 35px;
	margin-top: 16px;
	line-height: 11px;
	border: 1px solid var(--main-color);
	border-bottom: none;
	border-radius: 10px 10px 0 0 !important;
	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-nav-bar .md-button._md-nav-button.md-unselected {
	background-color: white;
	color: var(--main-color);
	height: 30px !important;
	min-height: 30px;
	margin-top: 21px;
	line-height: 7px;
}
md-nav-bar .md-button._md-nav-button:hover {
	background-color: var(--main-color) !important;
	color: white !important;
}
md-nav-bar .md-button._md-nav-button.md-focused {
	background-color: var(--main-color) !important;
}