@charset "utf-8";

html, html * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	color: #000000;
	background: #eceff1;
}

img.header_logo {
	max-width: 100%;
	margin-bottom: -24px;
	padding: 10px 10px 10px 30px;
}

img.header_logo_hidden {
	width: 0px;
	height: 39px;
}

div.container {
	margin: 0 auto;
	max-width: 800px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #ffffff;
}

div.header {
	-webkit-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	background: #027;
	border-bottom: solid 1px #505050;
	color: #edd;
	margin: 0 0 15px 0;
	padding: 10px 15px 10px 15px;
}

div.navigator {
	padding: 1px 8%;
}

div.shortcut {
	text-align: right;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

span.login_username {
	margin-right: 1em;
	word-break: break-all;
}

form.navigator_logout {
	display: inline;
}

a.link_button {
	min-width: 200px;
	display: inline-block;
	text-align: center;
	margin-bottom: 4px;
	padding: 1px 6px;
	color: #ffffff;
	background: #003db9;
	border: 3px solid #003db9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

a.secondary_button {
	color: #003db9;
	background: #ffffff;
	border: 3px solid #003db9;
	font-weight: 500;
}

a.link_button:link,
a.link_button:visited {
	text-decoration: none;
}

div.main_content {
	padding: 0% 8% 4% 8%;
}

svg.button_icon {
	height: 1.3em;
	width: 1.3em;
	vertical-align: middle;
}

svg.before_message_icon {
	height: 1.3em;
	width: 1.3em;
	margin-right: 0.3em;
	vertical-align: top;
}

svg.before_label_icon {
	height: 1.3em;
	width: 1.3em;
	margin-right: 0.2em;
	vertical-align: text-top;
}

svg.before_input_error_icon,
svg.before_input_warning_icon {
	height: 1em;
	width: 1em;
	margin-right: 0.2em;
}

svg.user_icon {
	fill: #003db9;
}

svg.edit_icon,
svg.success_icon {
	fill: #008000;
}

svg.info_icon,
svg.notice_icon {
	fill: #00008b;
}

svg.edit_icon:hover,
svg.edit_icon:focus {
	fill: #006400;
	background: #f5f5f5;
}

svg.setting_icon {
	fill: #808080;
}

svg.setting_icon:hover,
svg.setting_icon:focus {
	fill: #696969;
	background: #f5f5f5;
}

svg.delete_icon,
svg.error_icon {
	fill: #ff0000;
}

svg.warning_icon {
	fill: #ff8c00;
}

svg.delete_icon:hover,
svg.delete_icon:focus {
	fill: #8b0000;
	background: #f5f5f5;
}

h1, h2, h3, h4, h5, h6 {
	font-family: verdana, arial, helvetica, Sans-Serif;
	background: rgb(204, 238, 255);
	color: #ffffff;
	background-image: url('grad.png');
	background-repeat: repeat-y;
	padding: .3em;
	border: 0px;
	margin-bottom: 0.5em;
}

div.notice {
	color: #00008b;
	padding: 5px;
	margin: 10px 0px 0px 0px;
	background: rgb(237,242,252);
	border: 1px solid #00008b;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size: 90%;
}

div.warning {
	color: #ff8c00;
	padding: 5px;
	margin: 10px 0px 0px 0px;
	background: #ffffdd;
	border: 1px solid #ff8c00;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size: 90%;
}

div.cookie_disabled {
	display: none;
}

div.message_inner {
	display: inline-block;
	width: calc(100% - 2em);
}

.browser_feature_notification {
	text-align: center;
}

form {
	margin: 10px 0px 10px 0px;
}

div.result_success {
	margin: 10px 0 0 0;
	padding: 5px;
	border: 2px solid #008000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #008000;
	background: #ddffdd;
	font-size: 90%;
	font-weight: bold;
}

div.result_info {
	margin: 10px 0 0 0;
	padding: 5px;
	border: 2px solid #00008b;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #00008b;
	background: rgb(237,242,252);
	font-size: 90%;
	font-weight: bold;
}

div.result_warning {
	margin: 10px 0 0 0;
	padding: 5px;
	border: 2px solid #ff8c00;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ff8c00;
	background: #ffffdd;
	font-size: 90%;
	font-weight: bold;
}

div.result_error {
	margin: 10px 0 0 0;
	padding: 5px;
	border: 2px solid #ff0000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ff0000;
	background: #ffdddd;
	font-size: 90%;
	font-weight: bold;
}

div.result_hidden {
	display: none;
}

div.http_error_code {
	font-weight:bold;
	background:rgb(255,192,192);
	border: 1px solid #ff0000;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	padding: 5px 20px;
	margin: 0 auto;
	text-align:center;
}

div.http_error_msg {
	font-weight:bold;
	background:#ffdddd;
	border-left: 1px solid #ff0000;
	border-right: 1px solid #ff0000;
	border-bottom: 1px solid #ff0000;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
	padding:20px;
	margin: 0 auto;
	text-align:center;
}

details {
	font-size: 90%;
	padding: 4px;
	margin-bottom: 4px;
}

div.input_area,
div.list_area,
div.display_area,
div.button_area {
	margin-top: 8px;
	margin-bottom: 8px;
}

div.button_area {
	text-align: center;
}

label {
	display: block;
}

label.required:before {
	color: #ff0000;
	font-size: 80%;
	content: "*";
	margin-right: 5px;
}

input[type="text"],
input[type="password"],
input[type="submit"],
input[type="button"],
button,
select {
	padding: 1px 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

input[type="text"],
input[type="password"],
select {
	border: 1px solid #777;
	width: 100%;
	font-size: 120%;
	line-height: 1.5;
}

input[type="text"].input_error,
input[type="password"].input_error {
	border: 2px solid #ff0000;
}

input[type="text"].enterblock,
input[type="text"].enterassist
{
	position: absolute;
	visibility: hidden;
}

input[type="submit"],
input[type="button"],
button {
	min-width: 200px;
	color: #ffffff;
	background: #003db9;
	border: 3px solid #003db9;
	cursor: pointer;
	font-size: 100%;
	line-height: 1.5;
	margin-bottom: 4px;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
a.link_button:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
button:focus,
a.link_button:focus {
	background: #00008b;
	border: 3px solid #00008b;
}

input[type="submit"].secondary_button,
input[type="button"].secondary_button,
button.secondary_button,
a.secondary_button {
	color: #003db9;
	background: transparent;
	border: 3px solid #003db9;
	font-weight: 500;
}

input[type="submit"].secondary_button:hover,
input[type="button"].secondary_button:hover,
button.secondary_button:hover,
a.secondary_button:hover,
input[type="submit"].secondary_button:focus,
input[type="button"].secondary_button:focus,
button.secondary_button:focus,
a.secondary_button:focus {
	color: #ffffff;
	background: #00008b;
	border: 3px solid #00008b;
	font-weight: 500;
}

button.icon_button {
	color: #000000;
	background: transparent;
	border: none;
	padding: 0;
	min-width: initial;
}

button.navigator_button {
	font-size: 80%;
	min-width: initial;
}

select[name="language_selector"] {
	width: auto;
	vertical-align: middle;
}

hr {
	margin: 0.5em auto;
}

div.input_static {
	padding: 1px 6px;
	word-break: break-all;
}

div.input_warning {
	width: fit-content;
	padding: 1px 4px 1px 8px;
	color: #ff8c00;
	font-size: 90%;
	font-weight: bold;
}

div.input_error {
	width: fit-content;
	padding: 1px 4px 1px 8px;
	color: #ff0000;
	font-size: 90%;
	font-weight: bold;
}

div.qrcode {
	text-align: center;
}

fieldset {
	border: 2px groove silver;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 0.5em;
	margin-bottom: 4px;
}

legend {
	padding-left: 0.2em;
	padding-right: 0.2em;
	word-break: break-all;
}

fieldset.card > div {
	display: flex;
	justify-content: space-between;
}

fieldset.card a.link_button,
fieldset.card input[type="submit"],
fieldset.card input[type="button"],
fieldset.card button {
	display: block;
}

p.secretkey,
td.secretkey {
	margin-top: .2em;
	margin-bottom: .2em;
	letter-spacing: .2em;
	font-size: 80%;
	word-break: break-all;
	background: #f5f5f5;
	text-align: center;
}

table.backupcode {
	width: 100%;
}

div.copyright {
	text-align: center;
}

.display_none {
	display: none;
}