/* angular material custom stylesheet */

:root {
	--main-color: rgb( 45, 131, 173 );					/* 全体の基本カラー */
	--main-color-90: rgba( 45, 131, 173, 0.9 );			/* 基本カラーの透明度90% */
	--main-color-80: rgba( 45, 131, 173, 0.8 );			/* 基本カラーの透明度80% */
	--main-color-70: rgba( 45, 131, 173, 0.7 );			/* 基本カラーの透明度70% */
	--main-color-50: rgba( 45, 131, 173, 0.5 );			/* 基本カラーの透明度50% */
	--main-color-40: rgba( 45, 131, 173, 0.4 );			/* 基本カラーの透明度40% */
	--main-color-26: rgba( 45, 131, 173, 0.26 );		/* 基本カラーの透明度26% */
	--main-color-20: rgba( 45, 131, 173, 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: var(--main-color-90) !important;
	color: white !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-datepicker-triangle-button .md-datepicker-expand-triangle {
	border-top-color: var(--main-color) !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( 245, 118, 0 );
	background-color: rgb( 245, 118, 0 );
}
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 table {
	border-radius: 6px;
	background-color: var(--main-color);
	border: solid 1px var(--main-color);
}
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 thead tr {
	height: 40px !important;
}
md-table-container tbody {
	background-color: white;
}
md-table-container tbody tr {
	height: 40px !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) !important;
}
md-table-container .table-no-data {
	cursor: default !important;
}
md-table-container .table-no-data:hover {
	background-color: white !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 {
	margin: 0;
	padding: 0 !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-input-container.md-input-invalid .md-select-icon {
	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;
	background-color: var(--main-color-40) !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: 30px;
	min-width: 30px;
	background-color: white;
	box-sizing: border-box;
}
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] {
	cursor: not-allowed !important;
}
md-select[disabled] .md-select-value {
	border: 1px dashed var(--main-color-50) !important;
	background-image: none !important;
}
md-select[disabled]:hover .md-select-value {
	cursor: not-allowed !important;
}
md-select[disabled] .md-select-icon {
	display: none;
}
md-select:not([disabled]) .md-select-icon {
	color: var(--main-color);
}
md-select:not(.ng-invalid.ng-touched):not([disabled]):focus .md-select-value {
	border: 2px solid var(--main-color) !important;
}
md-select.ng-invalid.ng-touched:not([disabled]):focus .md-select-value {
	border-width: 2px !important;
}

/* ボタン */
.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: rgb( 226, 226, 226 ) !important;
	border-color: rgb( 179, 179, 179 ) !important;
	color: rgb( 179, 179, 179 ) !important;
}
.md-button[disabled]:hover {
	background-color: rgb( 226, 226, 226 ) !important;
	border-color: rgb( 179, 179, 179 ) !important;
	color: rgb( 179, 179, 179 ) !important;
}
.md-button[disabled] md-icon path,
.md-button[disabled] md-icon polygon {
	fill: rgba( 0, 0, 0, 0.38 ) !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 {
	display: flex;
	align-items: center;
	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:not([disabled]):not(.md-checked) .md-icon {
	border-color: var(--main-color-90) !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;
	color: var(--main-color);
}

/* スイッチ */
md-switch {
	margin: 0;
}
md-switch .md-label {
	width: 40px;
}
md-switch.md-checked .md-thumb {
	background-color: var(--main-color) !important;
}
md-switch[disabled].md-checked .md-thumb {
	background-color: rgb( 156, 156, 156 ) !important;
}
md-switch.md-checked .md-bar {
	background-color: var(--main-color-50) !important;
}
md-switch[disabled].md-checked .md-bar {
	background-color: rgba( 156, 156, 156, .5 ) !important;
}
md-switch.md-checked.md-focused .md-thumb::before {
	background-color: var(--main-color-26) !important;
}
md-switch[disabled].md-checked.md-focused .md-thumb::before {
	background-color: transparent !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-switch[disabled],
md-switch[disabled] .md-container {
	cursor: not-allowed !important;
}

/* ダイアログ */
md-dialog {
	border-radius: 10px;
	width: 300px;
	border: solid 1px var(--main-color);
	background-color: var(--main-color);
}
md-dialog.dialog-error {
	border: solid 1px rgb( 219, 112, 147 ) !important;
	background-color: rgb( 219, 112, 147 ) !important;
}
md-dialog.dialog-error > div:nth-child(1) {
	color: rgb( 219, 112, 147 ) !important;
}
md-dialog.dialog-error > div:nth-child(1) > md-icon path {
	fill: rgb( 219, 112, 147 ) !important;
}
md-dialog.dialog-error > div:nth-child(1) > md-divider {
	border-color: rgb( 219, 112, 147 ) !important;
}
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: 47px !important;
	padding: 12px 16px 0px 16px;
	background-color: white;
	color: var(--main-color);
	box-sizing: border-box;
	text-align: center;
}
md-dialog > div:nth-child(1) > md-icon {
	margin-bottom: 2px;
	margin-right: 5px;
}
md-dialog > div:nth-child(1) > md-icon,
md-dialog > div:nth-child(1) > md-icon svg {
	width: 16px !important;
	min-width: 0px;
	height: 16px !important;
	min-height: 0px;
}
md-dialog:not(.dialog-error) > div:nth-child(1) > md-icon path,
md-dialog:not(.dialog-error) > div:nth-child(1) > md-icon polygon {
	fill: var(--main-color) !important;
}
md-dialog > div:nth-child(1) > md-divider {
	margin: 12px 5px 0 5px;
}
md-dialog-content {
	background-color: white;
}
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-content .dialog-input-cluster {
	color: var(--main-color);
	border-bottom: 1px dashed var(--main-color);
	width: 50%;
}
md-dialog-content .dialog-input > div {
	height: 30px;
	line-height: 30px;
	color: var(--main-color);
}
md-dialog-content .dialog-input > md-input-container {
	width: 100%;
}
md-dialog-content .dialog-input-sub {
	padding-left: 10px;
	box-sizing: border-box;
}
md-dialog-content .dialog-input-label {
	height: 30px;
	line-height: 30px;
	color: var(--main-color);
}
md-dialog-content .dialog-input-pass > input {
	padding-right: 30px !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;
	min-height: 37px;
	line-height: 37px;
}
md-dialog-actions .md-button:nth-child(1) {
	background-color: var(--main-color);
	color: white;
}
md-dialog.dialog-error md-dialog-actions .md-button:nth-child(1) {
	background-color: rgb( 219, 112, 147 ) !important;
}
md-dialog-actions .md-button:nth-child(2) {
	background-color: rgb( 200, 200, 200 );
}
md-dialog-actions .md-button:not([disabled]):nth-child(1):hover,
md-dialog-actions .md-button:not([disabled]):nth-child(1):focus {
	background-color: var(--main-color-80) !important;
}
md-dialog-actions .md-button[disabled]:nth-child(1):hover,
md-dialog-actions .md-button[disabled]:nth-child(1):focus {
	background-color: rgb( 153, 153, 153 ) !important;
	color: rgb( 116, 116, 116 ) !important;
}
md-dialog.dialog-error md-dialog-actions .md-button:nth-child(1):hover,
md-dialog.dialog-error md-dialog-actions .md-button:nth-child(1):focus {
	background-color: rgba( 219, 112, 147, 0.8 ) !important;
}
md-dialog-actions .md-button:nth-child(2):hover,
md-dialog-actions .md-button:nth-child(2):focus {
	background-color: rgba( 200, 200, 200, 0.8 ); !important;
}
md-dialog-actions .md-button .md-ripple-container {
	border-radius: 0px;
}
md-dialog-actions .md-button[disabled] {
	background-color: rgb( 153, 153, 153 ) !important;
	color: rgb( 116, 116, 116 ) !important;
	cursor: not-allowed;
}

/* メニュー */
md-menu-content {
	padding: 0;
}
md-menu-content md-divider {
	border-top-style: dashed;
}
md-menu-content button {
	text-align: left !important;
	color: var(--main-color) !important;
	margin: 0 !important;
	padding: 0 15px 0 15px !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-slider {
	margin-left: 0px;
	margin-right: 20px;
	width: 200px;
	margin-top: -8px;
}
md-slider .md-focus-ring,
md-slider.md-min .md-focus-ring {
	background-color: transparent;
}
md-slider .md-track.md-track-fill {
	background-color: var(--main-color-70);
}
md-slider .md-track-ticks {
	background-color: var(--main-color-70);
}
md-slider .md-thumb:after,
md-slider:not([disabled]).md-min[md-discrete] .md-thumb:after {
	border-color: var(--main-color);
	background-color: var(--main-color);
}
md-slider .md-sign,
md-slider.md-min[md-discrete] .md-sign {
	background-color: var(--main-color);
}
md-slider .md-sign:after,
md-slider.md-min[md-discrete] .md-sign:after {
	border-top-color: var(--main-color);
}
md-slider .md-track-ticks {
	color: var(--main-color);
}

/* アイコン */
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 */
.highcharts-button-box {
	stroke: var(--main-color) !important;
	rx: 6 !important;
	ry: 6 !important;
	cursor: pointer;
	fill: white;
}
.highcharts-button-normal > text {
	font-family: MyFont, sans-serif !important;
	font-size: 11px !important;
	fill: var(--main-color) !important;
}
.highcharts-button-pressed > rect {
	fill: var(--main-color) !important;
}
.highcharts-button-pressed > text {
	font-family: MyFont, sans-serif !important;
	font-size: 11px !important;
	fill: white !important;
}
.highcharts-button-hover > rect {
	fill: var(--main-color) !important;
}
.highcharts-button-hover > text {
	font-family: MyFont, sans-serif !important;
	font-size: 11px !important;
	fill: white !important;
}
.highcharts-button-disabled > rect {
	cursor: not-allowed !important;
	stroke: rgb( 179, 179, 179 ) !important;
	fill: rgb( 226, 226, 226 ) !important;
}
.highcharts-button-disabled > text {
	cursor: not-allowed !important;
	font-family: MyFont, sans-serif !important;
	font-size: 11px !important;
	fill: rgb( 179, 179, 179 ) !important;
}
.highcharts-range-input > rect {
	rx: 6 !important;
	ry: 6 !important;
	stroke: var(--main-color-50) !important;
	height: 24px;
}
.highcharts-range-input > text {
	font-family: MyFont, sans-serif !important;
	font-size: 12px !important;
	dominant-baseline: middle;
}
.highcharts-range-selector {
	font-family: MyFont, sans-serif !important;
	font-size: 12px !important;
}
.highcharts-range-selector:focus {
	outline: none !important;
	border-radius: 6px;
	height: 22px !important;
	border-color: var(--main-color) !important;
}
.highcharts-range-label > text {
	dominant-baseline: middle;
	font-family: MyFont, sans-serif !important;
}

/* ナビバー */
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;
}