/*
UMOのスタイルを書き換える
*/

:root {
  --umo-ui-toggle-size: 1.5rem;
}

.umo-page {
	min-height: 100vh;
	background-color: #ffffff;
}

/*
umo-contextmenu
*/
.umo-contextmenu {
	padding: 0;
	border-color: #c0c0c0;
	box-shadow: #c0c0c0 0 0 5px;
}
.umo-contextmenu.-show {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.umo-contextmenu > .-item,
.umo-contextmenu > .-blank {
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
}
.umo-contextmenu > .-item:hover {
	background-color: #beeff7;
}
.umo-contextmenu > .-item > i.icon {
	margin-right: 0.5em;
}
.umo-contextmenu > .-caption {
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
	background-color: #000000;
	color: #ffffff;
}

/*
umo-dialog
*/
.umo-dialog > .-frame {
	padding: 2rem 0.5rem 1rem;
	border: none;
	border-radius: 1em;
	box-shadow: none;
}
.umo-dialog > .-frame > .-header {
	background-color: unset;
}
.umo-dialog > .-frame > .-header.hidden {
	display: none;
}
.umo-dialog > .-frame .-title {
	justify-content: flex-start;
	margin-bottom: 2em;
	padding: 0 1em;
	font-size: 1.2em;
	font-weight: bold;
}
.umo-dialog > .-frame > .-footer {
	background: transparent;
}
.umo-dialog .-footer button {
	margin-right: 0.5em;
	margin-left: 0.5em;
}
.umo-dialog[data-mode="view"] .umo-form {
	display: none;
}
.umo-dialog[data-mode="view"] .umo-table .-operation {
	display: none;
}
.umo-dialog[data-mode="view"] .-footer .regist {
	display: none;
}

/*
umo-form
*/
.umo-form .-form-field > .-form-label {
/*	width: 15%;
	min-width: 8rem;*/
}
.umo-form .-form-field.-column-1of2 {
	width: calc((100% - 1em * 1) / 2);
}
.umo-form .-form-field.-column-1of3 {
	width: calc((100% - 1em * 2) / 3);
}
.umo-form .-form-field.-column-2of3 {
	width: calc((100% - 1em * 2) / 3 * 2 + 1em);
}
.umo-form .-form-field.-column-1of4 {
	width: calc((100% - 1em * 3) / 4);
}
.umo-form .-form-field.-column-1of5 {
	width: calc((100% - 1em * 4) / 5);
}
.umo-form .-form-field.-column-2of5 {
	width: calc((100% - 1em * 4) / 5 * 2 + 1em);
}
.umo-form .-form-field.-column-3of5 {
	width: calc((100% - 1em * 4) / 5 * 3 + 2em);
}
.umo-form .-form-field.-column-3of10 {
	width: calc((100% - 1em * 9) / 10 * 3 + 2em);
}
.umo-form .-form-field.hidden {
	border: none;
}
.umo-form .-form-field > .-form-label:before {
	content: '';
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.1em;
	margin-right: 0.2em;
	background-color: transparent;
}
.umo-form .-form-field.-required > .-form-label:before {
	background-color: #ff0000;
	border-radius: 50%;
}
.umo-form .-form-field > .-form-ui > * {
	max-width: 100%;
}
/* 段組み */
.umo-form .-form-field > .-form-ui .column {
	display: block;
}
.umo-form .-form-field > .-form-ui .column > * {
	page-break-inside: avoid;
	break-inside: avoid;
	min-height: 2rem;
}

/*
umo-pagenavi
*/
/* 独自：共通 */
.umo-pagenavi {
	display: flex;
	justify-content: flex-end;
}
.umo-pagenavi > li {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
/* UIの外枠 */
.umo-pagenavi {
	text-align: right;
}
/* 先頭・最終ページのリンク */
.umo-pagenavi .-first,
.umo-pagenavi .-last {
	width: 6rem;
	height: 3rem;
	margin: 0 0.1em;
	background-color: #e9ecef;
	border: none;
}
/* hover */
.umo-pagenavi .-first:hover,
.umo-pagenavi .-last:hover {
	background-color: #23a2b7;
}
/* 前・次ページのリンク */
.umo-pagenavi .-prev,
.umo-pagenavi .-next {
	width: 6rem;
	height: 3rem;
	margin: 0 0.1em;
	background-color: #e9ecef;
	border: none;
}
/* hover */
.umo-pagenavi .-prev:hover,
.umo-pagenavi .-next:hover {
	background-color: #23a2b7;
}
/* ページのリンク */
.umo-pagenavi .-pageno {
	width: 3rem;
	height: 3rem;
	margin: 0 0.1em;
	background-color: #e9ecef;
	border: none;
	color: #000000;
}
/* hover */
.umo-pagenavi .-pageno:hover {
	background-color: #23a2b7;
}
/* カレントページ */
.umo-pagenavi .-current {
	width: 3rem;
	height: 3rem;
	margin: 0 0.1em;
	background-color: #23a2b7;
	border: none;
	color: #ffffff;
}
/* リンク無効 */
.umo-pagenavi .-first.-disabled,
.umo-pagenavi .-prev.-disabled,
.umo-pagenavi .-next.-disabled,
.umo-pagenavi .-last.-disabled {
	margin: 0 0.1em;
	background-color: #e9ecef;
	color: #adb5bd;
	cursor: default;
}
/* 件数 */
.umo-pagenavi .-count {
	width: auto;
	height: 3rem;
	margin: 0 0.1em;
	padding: 0 0.5em;
	background-color: #e9ecef00;
	border: #e9ecef 2px solid;
	color: #000000;
	word-break: keep-all;
}

/*
umo-tab
*/

.umo-tab > .-tabs > .-tab {
	color: #868e96;
}
.umo-tab > .-tabs > .-tab.-selected {
	background-color: #868e96;
	color: #ffffff;
}
.umo-tab > .-contents {
	padding: 1em 0.5em 0.5em 0.5em;
}

/*
umo-table
*/

/* ヘッダのカラム */
.umo-table > .-table > .-thead > .-row > .-cell {
	background-color: #ffffff;
	line-height: 1em;
}
.umo-table > .-table > .-thead > .-row > .-cell.-operation {
	background-color: #343a40;
	color: #ffffff;
}
/* 本体の行 */
.umo-table > .-table > .-tbody > .-row.-selected {
	background-color: #beeff7;
}
.umo-table > .-table > .-tbody > .-row[data-umo-delete="1"],
.umo-table > .-table > .-tbody > .-row[data-umo-name="非表示"][data-umo-value="1"] {
	display: none;
}
/* セル（ヘッダと本体共通） */
.umo-table > .-table > .-thead > .-row > .-cell,
.umo-table > .-table > .-tbody > .-row > .-cell {
	padding: 2px 0.5em;
	height: calc(var(--umo-ui-size) + 1px + 4px);
	border: #ccc solid;
	border-width: 0 0 1px 0;
}
.umo-table > .-table > .-thead > .-row > .-cell.-selector,
.umo-table > .-table > .-tbody > .-row > .-cell.-selector {
	width: 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	background-color: #ffffff;
}
.umo-table > .-table > .-thead > .-row > .-cell.-left,
.umo-table > .-table > .-tbody > .-row > .-cell.-left {
	text-align: left;
}
.umo-table > .-table > .-thead > .-row > .-cell.-right,
.umo-table > .-table > .-tbody > .-row > .-cell.-right {
	text-align: right;
}
/* セル（本体） */
.umo-table > .-table > .-tbody > .-row > .-cell.-operation {
	background-color: #d9d9d9;
}
.umo-table > .-table > .-tbody > .-row > .-cell.-operation > .umo-ui {
    font-size: 1.0em;
}
.umo-table > .-table > .-tbody > .-row:hover > .-cell.-operation {
	background-color: #afabab;
}

/* 非表示フラグの行 */
.umo-table > .-table > .-tbody > .-row[data-hidden="1"] {
	background-color: #f0f0f0;
}

/*
umo-toast
*/
.umo-toast > .-frames {
	gap: 0.2em;
    margin-top: 0.2em;
}
.umo-toast > .-frames > .-frame {
	padding: 0.5em;
	border: none;
/*	border: #ffe080 4px solid;
	background-color: #fff8e0;*/
	border-radius: 0.25rem;
	box-shadow: #888 0px 1px 5px 1px;
}
.umo-toast > .-frames > .-frame.-show {
	/*animation-name: umo-toast-show;*/
	animation-delay: 0.0s;
	animation-duration: 0.3s;
	animation-iteration-count: 3;
}
@keyframes umo-toast-show {
	0% {
		background-color: #ffffff;
	}
	50% {
		background-color: #ffc0c0;
	}
	100% {
		background-color: #ffffff;
	}
}

/*
umo-ui
*/

button.umo-ui {
	background: linear-gradient(to bottom, rgb(244,244,244), rgb(214,214,214));
}

input.umo-ui:hover,
select.umo-ui:hover,
button.umo-ui:hover {
	border-color: #909090;
}
input[type="button"].umo-ui,
input[type="submit"].umo-ui,
input[type="checkbox"].umo-ui,
input[type="radio"].umo-ui,
label.umo-ui,
select.umo-ui,
button.umo-ui {
	cursor: pointer;
}
label.umo-ui {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
label.umo-ui > input.umo-ui[type="radio"] {
	margin-top: 0;
	margin-bottom: 0;
}

/*
入力フィールド（サイズ大）
<input type="text" class="umo-ui -large">
*/
input.umo-ui[type="text"].-large,
input.umo-ui[type="password"].-large,
input.umo-ui[type="tel"].-large,
input.umo-ui[type="number"].-large,
input.umo-ui[type="url"].-large,
input.umo-ui[type="email"].-large {
	width: 30em;
	max-width: 100%;
}

/*
umo-upfile
*/

.umo-upfile > .-delete {
	margin: auto 0;
}