:root
{
	--portal-control-color: #2f2f2f;
	--portal-control-background-color: ;
	--portal-control-border-color: #2f2f2f;
	--portal-label-color: #2f2f2f;
	--portal-label-background-color: ;
	--portal-label-border-color: ;
	--portal-action-button-color: #3f3f3f;
	--portal-action-button-background-color: #efefef;
	--portal-action-button-border-color: ;
	--portal-control-select-background-color: #f7f7f7;
	--portal-control-toggle-border-color: ;
	--portal-control-toggle-background-color: #efefef;
	--portal-control-toggle-on-color: #43a800;
	--portal-control-toggle-off-color: #aaaaaa;
	--portal-control-toggle-undefined-color: ;
	--portal-info-color: ;
	--portal-info-background-color: ;
	--portal-info-border-color: ;
	--portal-info-error-color: #ff0000;
	--portal-info-error-background-color: ;
	--portal-info-error-border-color: #ff0000;
	--portal-info-error-font-size: x-large;
	--portal-info-error-font-weight: ;
	--portal-info-fatal-color: ;
	--portal-info-fatal-background-color: #ff0000;
	--portal-info-fatal-border-color: ;
	--portal-info-fatal-font-size: xx-large;
	--portal-info-fatal-font-weight: bolder;
	--portal-info-hint-color: #006000;
	--portal-info-hint-background-color: ;
	--portal-info-hint-border-color: ;
	--portal-info-hint-font-size: ;
	--portal-info-hint-font-weight: ;
	--portal-info-info-color: ;
	--portal-info-info-background-color: ;
	--portal-info-info-border-color: ;
	--portal-info-info-font-size: ;
	--portal-info-info-font-weight: ;
	--portal-info-notice-color: #FFFFFF;
	--portal-info-notice-background-color: #006000;
	--portal-info-notice-border-color: ;
	--portal-info-notice-font-size: ;
	--portal-info-notice-font-weight: ;
	--portal-info-severe-color: ;
	--portal-info-severe-background-color: #FF00000;
	--portal-info-severe-border-color: ;
	--portal-info-severe-font-size: ;
	--portal-info-severe-font-weight: bold;
	--portal-info-warning-color: #000000;
	--portal-info-warning-background-color:  #FFFF00;
	--portal-info-warning-border-color: #000000;
	--portal-info-warning-font-size: ;
	--portal-info-warning-font-weight: ;
}

.portal-main-body .portal_setting_container .form-row:hover
{
	background-color: rgba(192,192,192,0.1);
}

.portal_setting_container .form-row
{
	min-height: 2.2rem;  border-radius: 1.1rem;
}

a.portal_action_button:not(.invisible)
{
	display: inline-flex; justify-content: center; align-items: center
}

.portal_action_button
{
	font-size: 110%;
	min-width: 12rem; min-height: 2.2rem; border-radius: 1.1rem; outline: none; border-width: 2px; border-style: solid; box-sizing: border-box;
	color: var(--portal-action-button-color);
	background-color: var(--portal-action-button-background-color);
	border-color: var(--portal-action-button-border-color);
}

*[disabled].portal_action_button
{
	opacity: 0.5;
}

.portal_action_anchor
{
	text-decoration: none;
}

.portal_action_button.portal_action_button_disabled, .portal_action_anchor.portal_action_anchor_disabled
{
	opacity: 0.75
}

.portal_action_container .portal_action_button+.portal_action_button, .portal_action_container .portal_action_anchor+.portal_action_anchor
{
	margin-left: 1rem;
}

.portal_label
{
	min-height: 2.2rem; box-sizing: border-box; border-width: 2px; border-style: solid; border-radius: 1.1rem; 
	padding: 0.1rem; text-align: center; font-size: 120%;
	color: var(--portal-label-color);
	background-color: var(--portal-label-background-color);
	border-color: var(--portal-label-border-color);
}

.portal_control
{
	border-width: 1px; border-style: solid;
	border-radius: 1rem;
	padding: 0.4em 0.8em; outline: none;
	color: var(--portal-control-color);
	border-color: var(--portal-control-border-color);
	background-color: var(--portal-control-background-color);
	outline: none;
}

.toggle_container
{
	text-align: right;
	outline: none;
}

div.portal_control
{
	display: flex; align-items: center; column-gap: 0.5rem;
}

div.portal_control.portal_control_multicolor
{
	flex-wrap: wrap;
	column-gap: 0;
	row-gap: 0;
}

div.portal_control.portal_control_multicolor.portal_control_advanced
{
	column-gap: 0.5rem;
	row-gap: 0.5rem;
}

.portal_control_multicolor input
{
	max-width: 5rem;
	padding: 0.4rem 0.8rem;
}

.portal_control_multicolor input[type=color]
{
	max-width: 2rem;
	min-height: 2rem;
	padding: 0;
	border-width: 0px;
	margin: 1px;
}

fieldset.portal_control
{
	display: inline-flex; flex-direction: row; align-items: center;
	padding-left: 0.8rem; padding-right: 0.8rem; align-content: stretch;
}

fieldset.portal_control > select
{
	flex: 1 1 auto
}

fieldset.portal_control, select.portal_control
{
	background-color: var(--portal-control-select-background-color);
}

button.toggle_container
{
	border: none; background: none; outline: none; min-width: 4rem; max-width: 4rem; padding: 0;
	text-align: right;
}

.label_parent.label_parent_none>button.toggle_container, .label_parent.label_parent_none>.help-wrapper>button.toggle_container
{
	max-width: none !important;
}

.portal_control.toggle
{
	vertical-align: middle; display: inline-flex; box-sizing: border-box;
	min-width: 4rem; padding: 0; margin: 0;
	padding: 0;
}

.portal_control.toggle.toggle_on
{
	justify-content: flex-end;
	background-color: var(--portal-control-toggle-on-color);
}

.portal_control.toggle.toggle_off
{
	justify-content: flex-start;
	background-color: var(--portal-control-toggle-off-color);
}

.portal_control.toggle.toggle_undefined
{
	justify-content: center;
	background-color: var(--portal-control-toggle-undefined-color);
}

.portal_control.toggle>span
{
	white-space: nowrap
}

.portal_control.toggle.toggle_on>span
{
	padding: 0 0.2em 0 1em
}

.portal_control.toggle.toggle_off>span
{
	padding: 0 1em 0 0.2em;
	text-decoration: line-through
}

.portal_control.toggle div
{
	vertical-align: middle; display: inline-block; width: calc(2.2rem - 4px); min-height: calc(2.2rem - 4px);
	border-width: 1px; border-style: solid; border-radius: 2.2rem; box-sizing: border-box;
	border-color: var(--portal-control-toggle-border-color);
	background-color: var(--portal-control-toggle-background-color);
}

input.portal_label
{
	font-size: 115%; font-weight: bold;
	border-width: 2px;
}

p.portal_info
{
	border-width: 1px; border-style: solid;
	border-radius: 1rem;
	padding: 0.4em 0.8em;
	box-sizing: border-box;
	color: var(--portal-info-color);
	background-color: var(--portal-info-background-color);
	border-color: var(--portal-info-border-color);
}

details.portal_info
{
	border-width: 1px; border-style: solid;
	border-radius: 1rem;
	padding: 0.4em 0.8em;
	box-sizing: border-box;
	color: var(--portal-info-color);
	background-color: var(--portal-info-background-color);
	border-color: var(--portal-info-border-color);
}

details.portal_info > summary
{
	user-select: none; outline: none;
}

details[open].portal_info > summary
{
	font-style: italic
}

.portal_info.error
{
	color: var(--portal-info-error-color);
	background-color: var(--portal-info-error-background-color);
	border-color: var(--portal-info-error-border-color);
	font-size: var(--portal-info-error-font-size);
	font-weight: var(--portal-info-error-font-weight);
}

.portal_info.fatal
{
	color: var(--portal-info-fatal-color);
	background-color: var(--portal-info-fatal-background-color);
	border-color: var(--portal-info-fatal-border-color);
	font-size: var(--portal-info-info-font-size);
	font-weight: var(--portal-info-info-font-weight);
}

.portal_info.hint
{
	color: var(--portal-info-hint-color);
	background-color: var(--portal-info-hint-background-color);
	border-color: var(--portal-info-hint-border-color);
	font-size: var(--portal-info-hint-font-size);
	font-weight: var(--portal-info-hint-font-weight);
}

.portal_info.info
{
	color: var(--portal-info-info-color);
	background-color: var(--portal-info-info-background-color);
	border-color: var(--portal-info-info-border-color);
	font-size: var(--portal-info-info-font-size);
	font-weight: var(--portal-info-info-font-weight);
}

.portal_info.notice
{
	color: var(--portal-info-notice-color);
	background-color: var(--portal-info-notice-background-color);
	border-color: var(--portal-info-notice-border-color);
	font-size: var(--portal-info-notice-font-size);
	font-weight: var(--portal-info-notice-font-weight);
}

.portal_info.severe
{
	color: var(--portal-info-severe-color);
	background-color: var(--portal-info-severe-background-color);
	border-color: var(--portal-info-severe-border-color);
	font-size: var(--portal-info-severe-font-size);
	font-weight: var(--portal-info-severe-font-weight);
}

.portal_info.warning
{
	color: var(--portal-info-warning-color);
	background-color: var(--portal-info-warning-background-color);
	border-color: var(--portal-info-warning-border-color);
	font-size: var(--portal-info-warning-font-size);
	font-weight: var(--portal-info-warning-font-weight);
}


output[role=checkbox]
{
	outline: none;
}

input[type=color]
{
 	padding: 0;
}

.control_wrapper
{
	display: flex;
}

.control_wrapper>:first-child
{
	width: 100%;
}

.control_extra
{
	display: none;
	width: 1.2rem; position: relative;
	border: 1px solid #999; box-sizing: border-box;
	border-radius: 2px;
}


.portal_focus:focus, :focus>.portal_focus, .portal_focus:focus-within
{
	box-shadow: 0 0 1px 1px #333;
}
.control_wrapper:hover > :first-child, .control_wrapper:focus-within > :first-child
{
	width: calc(100% - 1.5em)
}

.control_wrapper:hover > .control_extra, .control_wrapper:focus-within > .control_extra
{
	display: inline-block;
}

.control_extra:hover
{
	background: #eee;
}

.control_down
{
	width: 100%; height: 100%;
	background: transparent url(/img/reveal-down.png) no-repeat center center / 50% 50%;
}

.control_dropdown
{
	display: none;
	position: fixed;
	transform: translate(calc(2.7rem - 100%),-1.5rem);
	padding: 1.5rem;
}

.control_dropdown_content
{
	background: #fff;
}

.control_dropdown_items
{
	border: 1px solid #aaa;
	max-height: 16em;
	overflow: auto;
}

.control_dropdown_clipboard
{
	border: 1px solid #aaa;
	border-top: none;
	display: flex;
}

.control_dropdown_clipboard>.control_dropdown_item
{
	flex: 1 0 auto;
	text-align: center;
}

.control_dropdown_clipboard>.control_dropdown_item:first-child
{
	border-right: 1px solid #aaa;
}

.control_dropdown_category
{
	font-weight: bold; font-style: italic;
	color: #888; padding: 0.3em 1em;
}

.control_dropdown_item>a
{
	display: block;
	white-space: nowrap;
	padding: 0.3em 2em;
}

.control_dropdown_item.selected>a
{
	color: #999;
}

.control_dropdown_item:hover
{
	background: #eee;
}

.control_wrapper>.control_extra:hover>.control_dropdown
{
	display: block;
}