﻿/* -------------------------------------------
	MatBlazorのコンポーネントの
	動的スタイルを上書き
-------------------------------------------*/

/* MatDatePicker */
.flatpickr-current-month .flatpickr-monthDropdown-months {
	position: relative;
	left:  50%;
	width: 50%;
	text-align: left;
}
.flatpickr-current-month .numInputWrapper {
	position: relative;
	right: 50%;
	width: 50%;
}

.flatpickr-current-month input.cur-year {
	text-align:right;
	padding-right:26px;
}

.flatpickr-current-month .numInputWrapper::after {
	content: "年";
	position:absolute;
	top:2px;
	right:5px;
}

.flatpickr-current-month .arrowDown {
	position:absolute;
	left:0px;

}
.flatpickr-current-month .arrowUp {
	position: absolute;
	left: 0px;
}

/* MatFileUpload */
.mat-file-upload {
	padding: 10px;
}

/* MatDrawerContainer */
.mat-drawer {
	border-right-width: 0px;
	width: var(--mat-drawer-custom-width, 320px);
}


/* MatPaginator */

@media screen and (max-width:600px) {
	.mdc-paginator-container .mdc-icon-button {
		padding: 0px;
		height: 30px;
		width: 35px;
	}

	.mdc-paginator-range-label {
		margin: 0px 5px 0px 10px;
	}

	.mdc-paginator-container .mdc-select {
		min-width: 100px;
	}
}

/* MatLabel等 */
.mdc-floating-label {
	font-size: 1rem;
	font-size: var(--mdc-typography-subtitle1-font-size, 0.8rem);
}

.mdc-notched-outline .mdc-floating-label {
	
	position: relative;
	max-width: 100%;
	overflow: visible;
}

.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
	width: auto !important;
}

.mdc-text-field .mdc-floating-label {
	top: -12px;
	transform: translateY(-50%);
	pointer-events: none;
}

.mdc-notched-outline .mdc-floating-label {
	display: inline;
	position: relative;
	max-width: 100%;
	background-color:white;
}


.mdc-select .mdc-floating-label {
	left: 16px;
	right: initial;
	top: -12px;
	transform: translateY(-50%);
	pointer-events: none;
}

.mdc-text-field--outlined {
	height: 50px;
}

.mdc-select .mdc-select__anchor {
	height: 50px;
}

.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {
	top: -12px;
}

.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
	font-size: 0.8rem;
}

.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
	font-size: 0.8rem;
}

.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
	font-size: 0.8rem;
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
	font-size: 0.8rem;
	position:relative;
	left:0px;
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
	left: 0px !important;
	right: initial !important;
}

/* MatDialog */
.mdc-dialog__container .mdc-text-field--filled {
	width: 100%;
}

.mdc-dialog__actions {
	background-color:white;

}