/* common */
	body {
		background-color: #EFECE8;
		font-family: 'font_normal';
		margin: 0px;
		padding: 0px;
		min-height: 100vh;
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
	}
	
	#header {
		padding: 15px 0px 10px 35px;
		position: relative;
	}
	
	#footer {
		margin-top: 50px;
		padding: 30px;
	}
	
	#divLangSwitcher {
		position: absolute;
		top: 0px;
		right: 20px;
	}
	
	#divMain {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		margin: 0px;
		padding: 0px;
		z-index: 1;
	}
	
	#divMainContent {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		
		padding: 50px 0px 0px 0px;
		max-width: 800px;
	}
	
	.divMainContent {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		
		padding: 50px 0px 0px 0px;
		max-width: 800px;
	}


/* texts */
	h1 {
		font-family: 'font_bold';
		font-size: 2.4em;
		margin: 0px;
		padding: 0px;
	}
	
	h2 {
		font-family: 'font_semibold';
		font-size: 1.6em;
		margin: 0px;
		padding: 0px;
	}
	
	p {
		margin: 0px;
		padding: 0px;
		font-size: 1.1em;
	}
	
	.text_light {
		color: #ffffff;
	}
	
	.page_title {
		color: #221E1F;
		font-family: 'font_bold';
		font-size: 3em;
		padding: 0px;
		text-align: center;
		width: 100%;
		margin-bottom: 30px;
	}
	
	.page_title_2 {
		color: #221E1F;
		font-family: 'font_semibold';
		font-size: 2em;
		text-align: center;
		width: 100%;
		margin-bottom: 30px;
	}


/* button "btn_simple" */
	.btn_simple {
		display: inline-block;
		filter: drop-shadow(1px 1px 1px #111);
		font-family: 'font_semibold';
		font-size: 1.1em;
		outline: none;
		padding: 6px 14px 8px 14px;
		text-align: center;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}
	
	.btn_simple_ready {
		background-color: #575fcf;
		color: #fff;
		cursor: pointer;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
	}
	.btn_simple_ready:hover { filter: brightness(1.2) drop-shadow(1px 1px 1px #111); }
	.btn_simple_ready:active { filter: brightness(1.4) drop-shadow(1px 1px 1px #111); }
	
	.btn_simple_blocked {
		background-color: #777;
		color: #fff;
		cursor: default;
	}
	
	.btn_simple_lesser {
		font-family: 'font_light';
		font-size: 0.9em !important;
		padding: 3px 8px 4px 9px !important;
	}


/* other buttons */
	.btn_clickable { cursor: pointer; }
	.btn_clickable:hover { filter: brightness(1.14); }
	
	.btn_clickable_bright_hover:hover { filter: brightness(1.6); }
	
	.btn_in_header {
		background-color: #575fcf !important;
		font-size: 0.9em;
		min-width: 90px;
	}
	
	.btn_record_action {
		width: 24px;
	}
	
	.clickable_shadowed_icon {
		filter: drop-shadow(2px 2px 1px #555);
	}
	.clickable_shadowed_icon:hover {
		filter: drop-shadow(1px 1px 1px #555) brightness(1.6);
	}


/* links */
	.link_common {
		border-bottom: 1px solid;
		border-bottom-color: rgba(9, 132, 227, 0.2);
		color: #0984e3;
		cursor: pointer !important;
		font-family: 'font_semibold';
		text-decoration: none;
	}
	.link_common:hover { filter: brightness(1.2); }
	.link_common:active { filter: brightness(0.9); }
	
	.link_header {
		color: #221E1F;
		cursor: pointer !important;
		font-family: 'font_bold';
		font-size: 1.5em;
		padding: 12px 16px 12px 16px !important;
		text-decoration: none;
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		-webkit-transition: all 500ms ease-out;
	}.link_header:hover {
		color: #5f5457;
	}.link_header:active {
		color: #9f9396;
	}
	
	.link_header_act {
		cursor: default;
		background-color: #FABB52;
		color: #221E1F !important;
	}.link_header_act:hover {
		filter: brightness(1);
		color: #221E1F !important;
	}.link_header_act:active {
		filter: brightness(1);
		color: #221E1F !important;
	}
	
	.link_footer {
		color: #EFECE8;
		cursor: pointer !important;
		font-family: 'font_light';
		font-size: 1em;
		text-decoration: none;
	}
	.link_footer:hover {
		filter: brightness(1.2);
		border-bottom: 1px solid;
		border-bottom-color: rgba(240, 240, 240, 0.5);
	}
	.link_footer:active {
		filter: brightness(0.9);
		border-bottom: 1px solid;
		border-bottom-color: rgba(240, 240, 240, 0.8);
	}
	
	.link_min {
		text-decoration: none !important;
	}
	
	.link_min_an {
		text-decoration: none !important;
	}
	.link_min_an:hover {
		filter: brightness(1.2);
		border-bottom: 1px solid;
		border-bottom-color: rgba(40, 40, 40, 0.5);
	}
	.link_min_an:active {
		filter: brightness(0.9);
		border-bottom: 1px solid;
		border-bottom-color: rgba(40, 40, 40, 0.8);
	}
	
	.link_as_btn {
		background-color: #EF4A31;
		color: #fff;
		cursor: pointer;
		font-family: 'font_semibold';
		font-size: 1em;
		outline: none;
		padding: 6px 14px 8px 14px;
		text-align: center;
		text-decoration: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}.link_as_btn:hover {
		filter: brightness(1.05);
	}


/* inputs */
	.input_common {
		background-color: #ffffff;
		border: 1px solid #cecece;
		border-radius: .25rem;
		color: #000;
		font-family: 'font_normal', 'Calibri';
		font-size: 1.1em;
		outline-color: #0984e3;
		padding: 10px;
	}
	.input_common:focus {
		background-color: #fff;
		border-color: #80bdff;
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
	}
	.input_common_disabled {
		background-color: #efefef;
		color: #777;
		font-family: 'font_semibold';
	}
	.input_title {
		color: #444444;
		font-family: 'font_semibold', 'Calibri';
		margin-bottom: 8px;
	}
	.input_tip {
		color: #575757;
		font-family: 'font_light', 'Calibri Light';
		font-size: 0.9em;
		margin-bottom: 8px;
		max-width: 270px;
	}


/* textareas */
	.textarea_common {
		background-color: #ffffff;
		border: 1px solid #cecece;
		border-radius: .25rem;
		color: #000;
		font-family: 'font_normal', 'Calibri';
		font-size: 1em;
		outline-color: #0984e3;
		padding: 10px;
		min-height: 48px;
		max-height: 400px;
	}
	.textarea_common:focus {
		background-color: #fff;
		border-color: #80bdff;
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
	}


/* select lists  */
	.select_common {
		cursor: pointer;
		color: #000;
		font-family: 'font_normal', 'Calibri';
		font-size: 1em;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		border-radius: .25rem;
		padding: 10px;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}
	.select_common:focus {
		background-color: #fff;
		border-color: #80bdff;
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
	}


/* flex templates */
	.flex_row_cen_cen { display: flex; flex-direction: row; justify-content: center; align-items: center; }
	.flex_row_sta_cen { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
	.flex_row_sbe_cen { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
	.flex_row_sbe_sta { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.flex_row_cen_sta { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; }
	.flex_row_sta_sta { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; }
	.flex_row_sta_str { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; }
	
	.flex_col_sta_cen { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
	.flex_col_cen_cen { display: flex; flex-direction: column; justify-content: center; align-items: center; }
	.flex_col_cen_sta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }


/* margins and paddings */
	.mt4 { margin-top: 4px; }
	.mb4 { margin-bottom: 4px; }
	
	.mt8 { margin-top: 8px; }
	.mb8 { margin-bottom: 8px; }
	
	.mt16 { margin-top: 16px; }
	.mb16 { margin-bottom: 16px; }
	
	.mt32 { margin-top: 32px; }
	.mb32 { margin-bottom: 32px; }
	
	.mt64 { margin-top: 64px; }
	.mb64 { margin-bottom: 64px; }
	
	.mt50 { margin-top: 50px; }
	.mb50 { margin-bottom: 50px; }
	
	.mt100 { margin-top: 100px; }
	.mb100 { margin-bottom: 100px; }
	
	.pt4 { padding-top: 4px; }
	.pb4 { padding-bottom: 4px; }
	
	.pt8 { padding-top: 8px; }
	.pb8 { padding-bottom: 8px; }
	
	.pt16 { padding-top: 16px; }
	.pb16 { padding-bottom: 16px; }
	
	.pt32 { padding-top: 32px; }
	.pb32 { padding-bottom: 32px; }
	
	.pt64 { padding-top: 64px; }
	.pb64 { padding-bottom: 64px; }
	
	.pt50 { padding-top: 50px; }
	.pb50 { padding-bottom: 50px; }
	
	.pt100 { padding-top: 100px; }
	.pb100 { padding-bottom: 100px; }
	
	.w50 { width: 50% !important; }
	.w100 { width: 100% !important; }
	
	.h50 { height: 50% !important; }
	.h100 { height: 100% !important; }


/* common table style */
	table {
		border-collapse: collapse;
	}
	
	.table_basic tr th {
		color: #646464;
		font-size: 0.9em;
		padding: 10px;
		text-align: left;
	}
	
	.table_basic tr td {
		padding: 10px;
		text-align: left;
	}
	
	.table_basic, .table_basic tr, .table_basic td, .table_basic th {
		border: 1px solid #cecece;
		border-collapse: collapse;
	}
	
	.table_basic tr:hover {
		background-color: #fafafa;
	}


/* pseudo table */
	.flex_table {
		border: #555 1px solid;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}
	
	.flex_tr {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
	}
	
	.flex_td {
		border: #555 1px solid;
		padding: 10px;
	}
	
	.flex_th {
		background-color: #f8aca0;
		border: #555 1px solid;
		font-family: 'font_semibold';
		padding: 10px;
	}


/* cell values (in tables) */
	.cell_value {
		color: #fff;
		font-family: 'font_semibold';
		padding: 3px 5px 3px 5px;
		text-align: center;
	}

	.cell_value_green {
		background-color: #10ac84;
	}

	.cell_value_grey {
		background-color: #8395a7;
	}


/* ul */
	ul {
		font-size: 1em;
		margin-block-start: 0;
	}
	
	li {
		padding: 0px 0px 6px 0px;
	}
	
	ul.exclam {
	    --icon-space: 1.3em;
		list-style: none;
	}
	
	ul.exclam li:before {
		content: "❕";
		display: inline-block;
		margin-left: calc( var(--icon-space) * -1 );
		width: var(--icon-space);
	}


/* ol */
	ol {
		font-size: 1em;
		margin-block-start: 0;
	}
	
	ol {
		padding: 0px 0px 6px 0px;
	}


/* different */
	#header_underline {
		margin: -29px 0px 0px 220px;
		z-index: 10;
	}
	
	.div_link_header {
		margin-right: 16px;
	}
	
	.div_link_footer {
		margin: 0px 0px 16px 0px;
	}
	
	.btn_lang {
		color: #221E1F;
		font-family: 'font_medium';
		font-size: 1.7em;
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		-webkit-transition: all 500ms ease-out;
	}.btn_lang:hover {
		color: #5f5457;
	}.btn_lang:active {
		color: #9f9396;
	}
	
	.btn_lang_a {
		background-color: #E8E3C4;
		color: #221E1F !important;
		cursor: default;
	}
	
	.hidden {
		display: none !important;
	}
	
	.container_with_aim {
		background-color: #f7f7f7;
		filter: drop-shadow(2px 2px 2px gray);
		padding: 40px;
	}
	
	.in_dev {
		color: #e84393;
		font-family: 'font_light';
		font-size: 1em !important;
	}
	
	.no_select {
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}
	
	.div_info {
		padding: 20px;
	}
	
	.div_info_bad {
		background-color: #f1c6c1;
		border: 1px solid #c0392b;
		color: #912c21;
	}
	
	.div_info_good {
		background-color: #acecde;
		border: 1px solid #218c74;
		color: #186756;
	}
	
	.div_info_neutral {
		background-color: #d7d9f4;
		border: 1px solid #575fcf;
		color: #2d349f;
	}
	
	.btnTest {
		border-bottom: 1px solid;
		border-bottom-color: rgba(116, 84, 248, 0.2);
		color: #9980FA;
		cursor: pointer !important;
		font-family: 'font_semibold';
		text-decoration: none;
	}
	.btnTest:hover { filter: brightness(1.2); }
	.btnTest:active { filter: brightness(0.9); }
	
	.div_tabbed {
		padding-left: 25px;
	}
	
	b {
		font-weight: normal;
		font-family: 'font_semibold';
	}
	
	.bull {
		font-size: 1.8em;
		margin: -7px 8px 0px 0px;
	}
	
	.dmt { margin-top: 32px; }
	.dmb { margin-bottom: 32px; }
	
	.trans500 {
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		-webkit-transition: all 500ms ease-out;
	}
	
	.mo_smooth_to_light {
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		-webkit-transition: all 500ms ease-out;
	}.mo_smooth_to_light:hover { filter: brightness(1.12); }
	
	.mo_smooth_to_dark {
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		-webkit-transition: all 500ms ease-out;
	}.mo_smooth_to_dark:hover { filter: brightness(0.9); }
	
	.rotation360 {
		animation: rotation360 2s infinite linear;
	}
	@keyframes rotation360 {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}


/* for mobile devices */
	@media screen and (max-width: 1080px) {
		#header_links {
			min-height: 9em;
		}
		
		#header_underline {
			margin: -2.6em 0em 0em 0em;
		}
		
		#btn_logo_header {
			width: 8em;
		}
		
		.page_title {
			font-size: 3.4em;
		}
		
		h1 {
			font-size: 3em;
		}
		
		h2 {
			font-size: 2.2em;
		}
		
		.scrollers {
			display: none;
		}
	}