/* ----------------------------------------------------------------------
/* TABLE OF CONTENTS
** global css reset
** general styles and classes
** page container, width block container, top-level elements
** center block column splitters
** title block section with logo and menu
** dropdown menu
** language selector menu
** footer block section with links and copyright
** body block section (inside the centered block)
** login, signup and other proper forms
** dashboard items
** social login buttons
** long text sections (t&c, signup message, etc)
** validation subpage
** account settings block and similar blocks
** preloader block
** nooblib components
** ----------------------------------------------------------------------
*/

/* ----------------------------------------------------------------------
** global css reset
** ----------------------------------------------------------------------
*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong,
sub, sup, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, input, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0px;
	padding: 0px;
	border: 0px;
	}


/* ----------------------------------------------------------------------
** general styles and classes
** ----------------------------------------------------------------------
*/
html {
	width: 100%;
	height: 100%;
	background-image: url('../media/orion_nebula_960x600.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	font-size: 20px;
	}
body {
	width: 100%;
	height: 100%;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #98a8b8;
/*	background: #400040c0; */
	}
table {
	border-collapse: collapse;
	border-spacing: 0px;
	}
a, .linklike {
	cursor: pointer;
	text-decoration: underline;
	color: #80b0ff;
	}
.helplink {
	cursor: help;
	text-decoration: underline dotted;
	text-decoration-skip-ink: none;
	color: #80c0a0;
	}

input {
	border: 0.05rem solid rgba(160,160,255,0.25);
	background: rgba(160,160,255,0.125);
	color: rgba(160,160,255,0.75);
	}
input:-webkit-autofill {
	box-shadow: inset 0px 0px 0px 1.6rem #202050c0;
	color: rgba(160,160,255,0.75);
	}

button, .buttonlike {
	cursor: pointer;
	min-width: 2rem;
	padding: 0.3rem 0.45rem;
	font-size: 1rem;
	font-weight: normal;
	font-family: Helvetica, Arial, sans-serif;
	box-shadow: inset 0px 0px 0.4rem 0.1rem #a02040c0;
	box-shadow: inset 0px 0px 0.4rem 0.1rem #208040c0;
	background: #802000c0;
	background: #00808080;
	color: #c0a0a0;
	outline: none;
	}
button:hover, .buttonlike:hover {
	background: #a02000c0;
	background: #208080c0;
	}
button:active, .buttonlike:active {
	background: #a02020c0;
	background: #40a0a0c0;
	box-shadow: inset 0px 0px 0.4rem 0.1rem #104020c0;
	}
h1 {
	margin-bottom: 0.4rem;
	padding: 0.3rem 0rem;
	line-height: normal;
	text-align: center;
	font-size: 1rem;
	font-weight: normal;
	background: #0080ff30;
	}
h2 {
	margin-bottom: 0.2rem;
	padding: 0.2rem 0.4rem;
	line-height: normal;
	text-align: center;
	font-weight: normal;
	font-size: 1rem;
	font-weight: normal;
	background: #0080ff30;
	}

.smalltext {
	font-size: 0.65rem;
	}
.codelike {
	font-family: 'Courier New', Courier, fixed;
	font-weight: bold;
	color: #a0e0c0;
	}

.generic_logobox {
	position: relative;
	box-sizing: border-box;
	}
.generic_logobox > div {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow-y: hidden;
	}
.generic_logobox > div > span,
.generic_logobox > div > div {
	position: relative;
	display: inline-block;
	top: 50%;
	transform: translate(0%, -50%);
	}

.zeta_logo {
	font-family: 'Courier New', Courier, fixed;
	font-size: 4.8rem;
	font-weight: bold;
	text-align: center;
	color: #a80000;
	text-shadow: #700000 0em 0.06em 0em,
		#a04000 0.005em 0.065em 0.035em, #a04000 -0.005em 0.065em 0.035em,
		#a04000 0.005em 0.010em 0.035em, #a04000 -0.005em 0.010em 0.035em;
	}

/* ----------------------------------------------------------------------
** page container, width block container, top-level elements
** ----------------------------------------------------------------------
*/
.pagecontainer {
	display: flex;
	flex-direction: column;
	height: 100%;
	}
.pagecontainer > div {
	position: relative;
	}

.topbar_block {
	flex-grow: 0;
	background: #000000a0;
	}
.title_block {
	flex-grow: 0;
	background: #000040a0;
	}
.motto_block {
	flex-grow: 0;
	font-family: 'Courier New', Courier, fixed;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	padding: 0.2rem;
	background: #000000a0;
	}
.page_subtitle {
	color: #a0e0a0;
	color: #90c080;
	color: #60a060;
	text-shadow: 0.1rem 0.1rem 0rem #408040;
	}
.body_block {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	background: #00004080;
	}
.foot_block {
	flex-grow: 0;
	background: #000000a0;
	}
.center_block {
	flex-grow: 1;
	position: relative;
	width: 48rem;
	max-width: 100%;
	justify-content: center;
	margin: auto;
/*
	height: 100%;
	min-height: 100%;
*/
	}

/* ----------------------------------------------------------------------
** center block column splitters
** ----------------------------------------------------------------------
*/

.generic_splitter {
	display: table;
	width: 100%;
	box-sizing: border-box;
	}
.generic_splitter > div {
	display: table-cell;
	vertical-align: middle;
	}
.title_splitter {
	}
.title_splitter > div {
	}
.foot_splitter {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	}
.foot_splitter > div {
	}

/* ----------------------------------------------------------------------
** title block section with logo and menu
** ----------------------------------------------------------------------
*/

.title_row {
	display: flex;
	}
.title_row > div {
	height: 3.6rem;
	}

.title_logobox {
	width: 6.4rem;
	flex-grow: 0;
	}

.title_links {
	display: table;
	flex-grow: 1;
	}
.title_links > div {
	display: table-cell;
	vertical-align: middle;
	}



/* alt */

.title_menu {
	display: inline-block;
	}
.title_menu > a, .title_menu > span {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.4rem 0.8rem;
	text-align: center;
	text-decoration: none;
	font-size: 1rem;
	}
.title_menu > span {
	background: #4080ff40;
	}
.title_menu > a:hover {
	text-decoration: underline;
	}
.title_condbox {
	text-align: right;
	}
.title_condbox > div {
	display: inline-block;
	white-space: nowrap;
	}


/* ----------------------------------------------------------------------
** dropdown menu
** ----------------------------------------------------------------------
*/

/* container with right alignment (used where there's no table structure) */
.side_menubox {
	text-align: right;
	}

/* label with current selection or data, it's the active area to show or hide the menu */
.dropdown_menu {
	display: inline-table;
	box-sizing: border-box;
	cursor: pointer;
	color: #48a8a8;
	width: 12rem;
	}
.user_menu {
	background: #00002080;
	font-size: 1rem;
	}
.dropdown_menu > div {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
	user-select: none;
	position: relative;
	}
.dropdown_text {
	}
.dropdown_text > div {
	position: absolute;
	box-sizing: border-box;
	top: 50%;
	left: 0.4rem;
	right: 0.4rem;
	transform: translate(0, -50%);
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
.dropdown_arrow {
	width: 1.2rem;
	text-align: center;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
/*
	width: 1px;
	padding: 0.4rem 0.4rem 0.4rem 0.4rem;
*/
	}

/* menu proper */
.dropdown_hook {
	position: relative;
	}
.dropdown_hook > div {
	display: block;
	position: absolute;
	visibility: hidden;
	top: -0.2rem;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.2s;
	}

/* user_menu_list and lang_menu_list are children of dropdown_hook */
.user_menu_list {
	right: 0rem;
	width: 8.8rem;
	font-size: 0.9rem;
	background: #00002080;
	backdrop-filter: blur(0.1rem);
	}
.dropdown_hook > div > ul {
	position: relative;
	padding: 0rem 0.2rem;
	list-style: none;
	white-space: normal;
	}
.user_menu_list > ul {
	text-align: right;
	}
.user_menu_list > ul > li {
	}
.dropdown_hook > div > ul > li > span,
.dropdown_hook > div > ul > li > a {
	border-style: solid;
	border-width: 0.1rem 0rem 0rem 0rem;
	border-color: #00808080;
	vertical-align: middle;
	}
.user_menu_list > ul > li > span,
.user_menu_list > ul > li > a {
	text-decoration: none;
	display: block;
	padding: 0.4rem;
	text-align: right;
	}
.user_menu_list > ul > li > span:hover,
.user_menu_list > ul > li > a:hover {
	text-decoration: underline;
	}

.menu_checkbox_hack {
	display: none;
	}
.menu_checkbox_hack:checked + label > .dropdown_arrow {
	color: #a0c0ff;
	}
.menu_checkbox_hack:checked + label + .dropdown_hook > div {
	visibility: visible;
	z-index: 1;
	opacity: 1;
	}

/* ----------------------------------------------------------------------
** language selector hook and menu
** ----------------------------------------------------------------------
*/

.lang_list {
	margin: 1rem 0.2rem;
	}
.lang_list > li {
	font-size: 1rem;
	line-height: 150%;
	}

.lang_item {
	display: table;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0rem 0.2rem;
	font-size: 0.9rem;
	font-weight: bold;
	font-family: 'Courier New', Courier, fixed;
	line-height: 75%;
	color: #48a8a8;
	text-decoration: none;
	}
.lang_item:hover {
	text-decoration: underline;
	}
.lang_item > span {
	display: table-cell;
	box-sizing: border-box;
	padding: 0.1rem 0.25rem 0.1rem 0rem;
	vertical-align: middle;
	white-space: nowrap;
	user-select: none;
	}
.lang_item > span > img {
	width: 1.2rem;
	height: 0.9rem;
	vertical-align: middle;
	}



/* ----------------------------------------------------------------------
** footer block section with links and copyright
** ----------------------------------------------------------------------
*/
.foot_links, .foot_copy {
	font-size: 0.65rem;
	font-weight: bold;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	}
.foot_links > nav {
	display: inline;
	}
.foot_links > nav > a {
	margin-right: 0.6rem;
	text-decoration: none;
	}
.foot_links > nav > a:hover {
	text-decoration: underline;
	}
.foot_copy {
/*	font-family: 'Courier New', Courier, fixed; */
	text-align: right;
	}



/* ----------------------------------------------------------------------
** body block section (inside the centered block)
** side stuff might be present
** ----------------------------------------------------------------------
*/

/* gives a certain margin and "captures" the scroll */
.body_area {
	position: absolute;
	top: 0.4rem;
	bottom: 0rem;
	left: 0px;
	right: 0px;
	width: 100%;
	overflow-y: auto;
	}

/* sets a scenic background for the body area */
/* separate, to keep aside tabs and such */
.body_inner {
	background: #00004080;
	padding: 1.75% 2.5%;
	box-sizing: border-box;
	}

/* replicates the pagecontainer layout but with 2 blocks only, */
/* one for the tabs and one for the tabbed subpages */
.tabbed_full_block {
	position: absolute;
	display: table;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	}
.tabbed_full_block > div {
	display: table-row;
	}
.tabbed_full_block > div:first-child {
	height: 1px;
	}
.tabbed_full_block > div > div {
	position: relative;
	display: table-cell;
	}

.tabbed_subpage {
	box-sizing: border-box;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	}

/* ----------------------------------------------------------------------
** login, signup and other proper forms
** ----------------------------------------------------------------------
*/
.mainform_box {
	display: block;
	width: 24rem;
	max-width: 100%;
	margin: auto;
	padding: 0.2rem 0rem;
	font-size: 0.85rem;
	color: #a0d0f0;
	}
.mainform_box > div:not(:last-child) {
	margin-bottom: 0.4rem;
	}
.mainform_box label {
	display: block;
	padding-left: 0.2rem;
	margin-bottom: 0.2rem;
	}
.mainform_box input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.2rem;
	font-family: 'Courier New', Courier, fixed;
	font-size: 1rem;
	font-weight: bold;
	}
.mainform_box input:focus {
	outline: dotted 0.05rem a0a0ffc0;
	}
.mainform_box button {
	min-width: 6rem;
	}
.mainform_evidence {
	background: #ffffff10;
	padding: 0.2rem 0.05rem;
	}

.mainform_fill {
	display: flex;
	}
.mainform_fill button {
	flex-grow: 1;
	}
.mainform_fill button:not(:last-child) {
	margin-right: 0.2rem;
	}
.mainform_fill button:not(:first-child) {
	margin-left: 0.2rem;
	}

/* ----------------------------------------------------------------------
** dashboard items
** ----------------------------------------------------------------------
*/

/* splits the column in two */
.dash_splitter {
	display: flex;
	}
.dash_main {
	margin-right: 1%;
	width: 74%;
	}
.dash_side {
	margin-left: 1%;
	width: 24%;
	flex-grow: 1;
	}

/* container of the accounts list and servers list */
.access_container {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding-top: 0.5rem;
	padding-bottom: 1rem;
	}

/* single item of the above lists */
.access_item {
	display: flex;
	flex-direction: column;
	width: 10.5rem;
	margin-bottom: 0.5rem;
	max-width: 48%;
	background: #0080ff20;
	text-align: center;
	}
.access_item > div:first-child {
	flex-grow: 1;
	}
.access_item > div:last-child {
	flex-grow: 0;
	}


/* container of the part with the logo in the background */
.access_logobox {
	width: 100%;
	height: 3.6rem;
	}

/* standard appearance for info about the account or the server */
.access_info {
	font-family: 'Courier New', Courier, fixed;
	font-weight: bold;
/*	text-align: center; */
	text-shadow: 0.05rem 0.05rem 0rem #000000;
	}

/* individual styles for game name, server name, server data */
.access_game {
	font-size: 0.75rem;
	}
.access_server {
	font-size: 1rem;
	color: #a0d0ff;
	}
.access_serdata {
	font-size: 0.75rem;
	}

/* "more info" link */
.access_link {
	padding: 0.2rem 0rem;
	font-size: 0.8rem;
	}

/* button container for single button spanning the whole row */
.access_go {
	padding-top: 0.2rem;
	}
.access_go > button {
	width: 100%;
	font-size: 0.9rem;
	}

/* button container for two button taking half row each, with some space between */
.access_doublego {
	padding-top: 0.2rem;
	}
.access_doublego > button {
	width: 49%;
	font-size: 0.9rem;
	}
.access_doublego > button:first-child {
	margin-right: 0.5%;
	}
.access_doublego > button:last-child {
	margin-left: 0.5%;
	}

/* styles for regular account and admin account */
.account_admin {
	color: #ffa040;
	}
.account_user {
	}

/* name and status of the account */
.account_name {
	font-size: 0.9rem;
	}
.account_stat {
	font-size: 0.65rem;
	}

/* styles for the table with server details, meant to be inside a popup block */
.server_detail {
	width: 30rem;
	max-width: 100%;
	margin: 0.5rem auto;
	}

.server_detail > tbody > tr:nth-child(odd) {
	background: #0080ff20;
	}
.server_detail > tbody > tr:nth-child(even) {
	background: #00ff8020;
	}

.server_detail td {
	padding: 0.2rem 0.2rem;
	font-size: 0.75rem;
	}
.server_detail td:not(:last-child) {
	width: 1px;
	white-space: nowrap;
	}

/* ----------------------------------------------------------------------
** social login buttons
** ----------------------------------------------------------------------
*/

/* will have display:none */
.soc_login_block {
	display: flex;
	}
.claim_block {
	display: table;
	}
.claim_block > div {
	display: table-row;
	}
.soc_login_cmd {
	width: 50%;
	flex-grow: 1;
	cursor: pointer;
	display: inline-table;
	}
.soc_login_cmd:not(:last-child) {
	margin-right: 0.2rem;
	}
.soc_login_cmd:not(:first-child) {
	margin-left: 0.2rem;
	}

.soc_login_cmd > div {
	display: table-cell;
	vertical-align: middle;
	}
.soc_login_cmd > div:first-child {
	width: 1px;
	padding: 0.1rem 0.15rem 0.1rem 0.15rem;
	}
.soc_login_cmd > div:last-child {
	padding: 0.3rem 0.15rem 0.3rem 0.15rem;
	text-align: left;
	}
.soc_login_cmd > div:first-child > img {
	width: 1.2rem;
	height: 1.2rem;
	vertical-align: middle;
	}
.fb_login_logo {
	background: #80c0ff40;
	}
.go_login_logo {
	background: #ffffffc0;
	}
.fb_login_text {
	font-family: Helvetica, Arial, sans-serif;
	background: #80c0ff40;
	font-size: 1rem;
	}
.go_login_text {
	font-family: Helvetica, Arial, sans-serif;
	background: #ffffffc0;
	color: #404080;
	font-size: 1rem;
	}


/* ----------------------------------------------------------------------
** long text sections (t&c, signup message, etc)
** ----------------------------------------------------------------------
*/
.sub_block {
	margin-bottom: 0.5rem;
	}

.longtext {
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: justify;
	text-shadow: 0.05rem 0.05rem 0rem #000000;
	}
.condensed {
	font-size: 0.75rem;
	line-height: 1.5;
	}

.longtext p {
	margin-top: 0.2rem;
	margin-bottom: 0.5rem;
	}
.longtext ul, .longtext ol {
	margin-bottom: 0.2rem;
	padding-left: 1.5rem;
	}
.longtext ul.testacc_list {
    padding-left: 0rem;
    }
.longtext li {
	margin-bottom: 0.4rem;
	}
.longtext em {
	font-style: normal;
	color: #d0f0ff;
	}
.longtext a {
	}
.lt_success {
	color: #80b090;
	}
.lt_warning {
	color: #e06040;
	}

.testacc_list {
	column-width: auto;
	column-count: 4;
	font-size: 1rem;
	margin-top: 0.2rem;
	margin-bottom: 0.4rem;
	}
.testacc_list li {
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	list-style-type: none;
	cursor: pointer;
	font-family: 'Courier New', Courier, fixed;
	background: #0080ff20;
	color: #80b0ff;
	}
.testacc_list li:hover {
	background: #0080ff40;
	color: #a0d0ff;
	}

/* ----------------------------------------------------------------------
** validation subpage
** ----------------------------------------------------------------------
*/

.val_result_box {
	}
.val_result_box > div {
	display: table;
	box-sizing: border-box;
	width: 75%;
	margin: 0.8rem auto 0rem auto;
	height: 0rem;
	border-width: 0.05rem;
	border-style: solid;
	border-radius: 0.1rem;
	background: #101010c0;
	}
.val_result_box > div > div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 0.5rem;
	border: 0.05rem solid #00004080;
	border-radius: 0.2rem;
	color: #d0d0d0;
	}

.val_result_ok {
	border-color: #80e080;
	box-shadow: 0rem 0rem 0.1rem 0.2rem #60c060c0;
	}
.val_result_warn {
	border-color: #d0a060;
	box-shadow: 0rem 0rem 0.2rem 0.2rem #c09040c0;
	}
.val_result_error {
	border-color: #e06060;
	box-shadow: 0rem 0rem 0.2rem 0.2rem #d04040;
	}

/* ----------------------------------------------------------------------
** overlay blocks, used in account settings block, language selection,
** start play block and possibly other uses
** ----------------------------------------------------------------------
*/

.overlay_block {
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	left: 0px;
	right: 0px;
	width: 36rem;
	max-width: 100%;
	margin: auto;
	font-size: 0.85rem;
	}

.overlay_smallblock {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28rem;
	height: 24rem;
	max-width: 100%;
	max-height: 90%;
	transform: translate(-50%, -50%);
	font-size: 0.85rem;
	}

.overlay_body {
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	right: 0.75rem;
	overflow: hidden;
	backdrop-filter: blur(0.1rem);
	background: #280030c0;
	box-shadow: 0px 0px 0.8rem 0.1rem #408080;
	}

.overlay_cont {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 1rem;
	}
.overlay_cont > div {
	position: relative;
	}

.overlay_shadow, .overlay_close {
	position: absolute;
	top: 0rem;
	right: 0rem;
	width: 2rem;
	height: 2rem;
	border-radius: 1rem;
	}
.overlay_shadow {
	z-index: -1;
	box-shadow: 0px 0px 0.8rem 0.1rem #408080;
	backdrop-filter: blur(0.1rem);
	}
.overlay_close {
	min-width: auto;
	padding: 0px;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	line-height: 50%;
	color: #40a0c0;
	background: #281038;
	box-shadow: unset;
	border-radius: 1rem;
	}

.overlay_close:active,
.overlay_close:hover {
	background: #20102c;
	color: #a0d0ff;
	}

/* tabs for the overlay box */
.overlay_tab_box {
	margin-bottom: 1rem;
	}

.overlay_tab_box > .n00_tabs_container > span {
	margin-right: 0rem;
	min-width: 4rem;
	padding: 0.4rem 0.2rem;
	background: transparent;
	border-width: 0.1rem;
	border-style: solid;
	border-color: #386080;
	font-size: 0.85rem;
	}
.overlay_tab_box > .n00_tabs_container > .n00_tabs_selected {
	border-bottom-color: transparent;
	z-index: 1;
	}
.overlay_tab_box > .n00_tabs_container > .n00_tabs_active {
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	color: #40a0c0;
	}
.overlay_tab_box > .n00_tabs_container > .n00_tabs_inactive {
	display: none;
	}


/* simpler, smaller overlay, without fixed height and top-right close button */
.overlay_popup, .overlay_mini {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: 100%;
	max-height: 90%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	padding: 0.75rem;
	backdrop-filter: blur(0.1rem);
	background: #280030c0;
	box-shadow: 0px 0px 0.8rem 0.1rem #408080;
	font-size: 0.85rem;
	}
.overlay_popup {
	width: 28rem;
	min-height: 10rem;
	}
.overlay_mini {
	width: 20rem;
	}


/* ----------------------------------------------------------------------
** preloader block
** ----------------------------------------------------------------------
*/
.preloader {
	display: none;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: #20004080;
	z-index: 2;
	}
.preloader > div {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10rem;
	height: 0.5rem;
	background: transparent;
	box-shadow: 0px 0px 0.5rem 0.25rem #c0c0c0;
	animation: prel_rotator 0.5s linear infinite both;
	}
@keyframes prel_rotator {
	0% {
		transform: translate(-50%, -50%) rotate(0);
		}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
		}
	}

/* ----------------------------------------------------------------------
** nooblib components
** ----------------------------------------------------------------------
*/

/* tabs */
.n00_tabs_container {
	box-sizing: border-box;
	width: 100%;
	white-space: nowrap;
	overflow-x: hidden;
/*	text-overflow: ellipsis; */
	text-align: left;
	}
.n00_tabs_selected, .n00_tabs_active, .n00_tabs_inactive {
	transition: 0.25s ease;
	margin-right: 1rem;
	min-width: 7rem;
	padding: 0.6rem;
	font-size: 0.9rem;
	text-align: center;
	}
.n00_tabs_selected {
	color: #a0d0ff;
	background: rgba(0,0,64,0.5);
	}
.n00_tabs_active {
	color: #a0a0a0;
	background: rgba(0,0,0,0.5);
	}
.n00_tabs_active:hover {
	text-decoration: underline;
	}


/* screen and general stuff */
.n00_screen, .n00_screen_msg, .n00_screen_warn, .n00_screen_err {
	background: #8080a040;
	}

.n00_widget_box {
	max-width: 24rem;
	padding: 0.4rem;
	border: 0.1em solid black;
	border-radius: 0.1rem;
	box-shadow: 0px 0px 0.1rem 0.1rem #c04080c0;
	background: #300020f0;
	color: #80c0c0;
	}

.n00_widget_box button {
	min-width: 2rem;
	margin-right: 0.1rem;
	}

/* paco component */
.n00_paco {
	width: 24rem;
	max-width: 30rem;
	min-width: 24rem;
	padding: 0.8rem;
	border-radius: 0.1rem;
	font-size: 0.85rem;
	background: #200020c0;
	color: #a0c0c0;
	box-shadow: 0px 0px 0.8rem 0.1rem #408080;
	backdrop-filter: blur(0.1rem);
	}

.n00_paco_textbox {
	line-height: 150%;
	}
.n00_paco_textbox p {
	margin-bottom: 0.3rem;
	text-align: justify;
	}
.n00_paco_iconbox {
	margin: 0.15rem 0.3rem 0rem 0rem;
	}
.n00_paco_iconbox > div {
	width: 1.8rem;
	height: 1.8rem;
	font-size: 1.2rem;
	font-weight: bold;
	border-radius: 0.9rem;
	}
.n00_paco_buttons {
	padding-top: 0.15rem;
	}
.n00_paco_buttons > button {
	padding: 0.15rem 0.3rem;
	font-size: 0.75;
	}
.n00_paco_icon_msg  { background: #206020; }
.n00_paco_icon_warn { background: #804020; }
.n00_paco_icon_err  { background: #a02020c0; }


/* minitip and bigtip component */
.n00_bigtip {
	width: 24rem;
	min-height: 16rem; 
	padding: 0.6rem;
	box-shadow: 0px 0px 0.6rem 0.1rem #4080c0;
	backdrop-filter: blur(0.2rem);
	background: #200040c0;
	}

.n00_bigtip_title {
	border-style: solid;
	border-color: #a0c0c0;
	border-width: 0rem 0rem 0.05rem 0rem;
	color: #a0c0c0;
	}
.n00_bigtip_title > div {
	padding-bottom: 0.2rem;
	padding-left: 0.2rem;
	line-height: 150%;
	font-size: 0.75rem;
	}
.n00_bigtip_title > div > button {
	font-size: 1.25rem;
	line-height: 90%;
	box-shadow: unset;
	background: transparent;
	color: #f0c0c0;
	}
.n00_bigtip_title > div > button:hover {
	background: #80a0ff40;
	color: #fff0f0;
	}

.n00_bigtip_cont {
	padding-top: 0.4rem;
	font-size: 0.65rem;
	line-height: 150%;
	}
.n00_bigtip_cont p:not(:last-child) {
	padding-bottom: 0.4rem;
	}