/* app css stylesheet */

:root {
	--main-color: rgb( 45, 131, 173 );					/* 全体の基本カラー */
	--main-color-80: rgb( 45, 131, 173, 0.8 );			/* 基本カラーの透明度80% */
	--main-color-40: rgb( 45, 131, 173, 0.4 );			/* 基本カラーの透明度40% */
	--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;
}

/* ボタン */
.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;
}

/* 選択 */
.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: -3px;
    margin-left: 5px;
}
.select-filter > md-icon,
.select-filter > md-icon svg {
	width: 16px !important;
	min-width: 16px;
	height: 16px !important;
	min-height: 16px;
}
.select-filter > md-icon path {
	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;
}

/* ダイアログ */
.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-contract {
	width: 370px;
	min-width: 370px;
}
.dialog-contract .dialog-input > div {
	width: 100px;
	min-width: 100px;
}
.dialog-contract .date input {
	width: 140px !important;
}
.dialog-contract .license {
	width: 130px !important;
}
.dialog-contract .contract {
	width: 26px !important;
	min-width: 26px !important;
}
.dialog-contract .contract md-icon {
	animation: rotate 2s linear infinite normal;
	margin: -1px 0 0 6px;
}
.dialog-contract .contract md-icon,
.dialog-contract .contract md-icon svg {
	width: 20px !important;
	min-width: 20px;
	height: 20px !important;
	min-height: 20px;
}
.dialog-contract .contract md-icon path {
	fill: var(--main-color) !important;
}

/* ログイン画面 */
.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-top: -2px;
	margin-right: 5px;
}
.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-80) !important;
	cursor: pointer !important;
}
.login .login-main > .md-button[disabled] {
	cursor: pointer !important;
	border-color: var(--main-color) !important;
}

/* 顧客管理画面 */
.customer .limit-over {
	background-color: rgb( 204, 204, 204 );
}