* { box-sizing: border-box; }
:root {
	/* -------------------------------------------------------- General */
	--header: 66px;
	--footer: 28px;
	--warning: #f8a912;
	--error: #f02020;
	--success: #04c004;
	--bg-em: #282B3C;
	--slides-height: 250px;

	/* -------------------------------------------------------- Dark */

	--catch: #20a6ef;
	--catch-dark: #02346e;
	--catch-light: #5ea7fe;

	--bg: #202020;
	--bg-dark: #101010;
	--bg-light: #505050;
	--bg-hover: #404040;

	--bo: #606060;
	--bo-dark: #404040;
	--bo-light: #808080;

	--tx: #c0c0c0;
	--tx-invert: #202020;
	--tx-dark: #808080;
	--tx-light: #f0f0f0;

	--btn-bg: #181818;
	--btn-bo: #808080;
	--btn-tx: #a0a0a0;
	--btn-tx-hover: #4f9cf6;
	--btn-tx-i: #f8a912;

	--slider-bg: #101010;
	--slider-bg-on: #00ff00;
	--slider-bo: #c0c0c0;

	--group-icon: #f8a912;
	--group-title: #ffffff;

	--hr-base: #c0c0c0;
	--hr-light: #808080;
	--hr-dark: #404040;

	--prb-bg: #101010;
	--prb-fill: #00ff00;
	--prb-bo: #404040;

	--range-bg:#101010;
	--range-bo: #404040;
	--range-thumb: #20a6ef;

	--tip-bg: #202020;
	--tip-tx: #c0c0c0;
	--tip-bo: #606060;

	--step-title: #ffffff;
	--step-bg: #181818;
	--step-bo: #606060;
}

/* ------------------------------------------------------------ Fonts */
@font-face { font-family: 'ft'; src: url('fonts/Lunasima-Regular.ttf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ft-b'; src: url('fonts/Lunasima-Bold.ttf'); font-weight: normal; ; font-style: normal; }

/* ------------------------------------------------------------ General */
body { font-family: 'ft'; font-size: 14px; background-color: var(--bg); color: var(--tx); overflow: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'ft'; color: var(--catch); }
sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
p { margin: 0; }

/* ------------------------------------------------------------ Link */
a { text-decoration: none; color:inherit; }
a:link { text-decoration: none; color:inherit; }
a:focus { text-decoration: none; color:inherit; }
a:visited { text-decoration: none; color:inherit; }
a:hover { text-decoration: none; color:inherit; }
a:active { text-decoration: none; color:inherit; }

/* ------------------------------------------------------------ Scrolling */
::-webkit-scrollbar { width: 6px; height: 3px; border-radius: 3px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: var(--bg); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--catch); }
::-webkit-scrollbar-thumb:active { background: var(--catch); }

/* ------------------------------------------------------------ Background */
.bg { background-color: var(--bg-em) !important; }
.bg_dark { background-color: var(--bg-dark) !important; }
.bg_light { background-color: var(--bg-light) !important; }

/* ------------------------------------------------------------ Text */
.tx_c { text-align: center; }
.tx_l { text-align: left; }
.tx_r { text-align: right; }
.tx_j { text-align: justify; }

.tx_b { font-family: 'ft-b'; }
.tx_i { font-style: italic; }

.tx_v { font-size: calc(0.75em + 1vw); }
.tx_f { line-height: 1em; }

.tx_85 { font-size: 0.85em; }
.tx_100 { font-size: 1em; }
.tx_125 { font-size: 1.25em; }
.tx_150 { font-size: 1.50em; }
.tx_200 { font-size: 2em; }
.tx_300 { font-size: 3em; }
.tx_400 { font-size: 4em; }
.tx_500 { font-size: 5em; }

.tx { color: var(--tx) !important; }
.tx_catch { color: var(--catch); }
.tx_catch_dark { color: var(--catch-dark); }
.tx_catch_light { color: var(--catch-light); }
.tx_warning { color: var(--warning); }
.tx_error { color: var(--error); }
.tx_success { color: var(--success); }
.tx_dark { color: var(--tx-dark); }
.tx_light { color: var(--tx-light); }
.tx_invert { color: var(--tx-invert); }

.tx_smallcaps { font-variant: small-caps; }
.tx_invisible { color: var(--bg); }
.tx_vertical { writing-mode: vertical-rl; text-align: center; }

.tx_title { display: block; font-family: 'ft'; font-size: clamp( 1rem, 4vw, 10vw ); }

/* ------------------------------------------------------------ Border */
.bo { border-color: var(--bo) !important; }
.bo_dark { border-color: var(--bo-dark) !important; }
.bo_light { border-color: var(--bo-light) !important; }
.bo_catch { border-color: var(--catch) !important; }
.bo_warning { border-color: var(--warning) !important; }

.bo_s1 { border-style: solid; border-width: 1px; }
.bo_s3 { border-style: solid; border-width: 3px; }
.bot_s1 { border-top: solid; border-width: 1px; }
.bot_s3 { border-top: solid; border-width: 3px; }
.bob_s1 { border-bottom: solid; border-width: 1px; }
.bob_s3 { border-bottom: solid; border-width: 3px; }
.bol_s1 { border-left: solid; border-width: 1px; }
.bol_s3 { border-left: solid; border-width: 3px; }
.bol_s5 { border-left: solid; border-width: 5px; }
.bor_s1 { border-right: solid; border-width: 1px; }
.bor_s3 { border-right: solid; border-width: 3px; }

.bo_r4 { border-radius: 4px; }

/* ------------------------------------------------------------ Padding */
.pa { padding: 2px 8px 2px 8px; }
.pa_0 { padding: 0; }
.pab_10 { padding-bottom: 10px !important;}
.pal_20 { padding-left: 20px !important;}
.palr_20 { padding-left: 20px !important; padding-right: 20px !important; }

/* ------------------------------------------------------------ Margins */
.mg { margin: 2px 8px 2px 8px; }
.mg_0 { margin: 0 !important; }
.mgl_10 { margin-left: 10px !important; }
.mgl_20 { margin-left: 20px !important; }
.mgl_25 { margin-left: 25px !important; }
.mgr_10 { margin-right: 10px !important; }
.mgr_20 { margin-right: 20px !important; }
.mglr_5 { margin-left: 5px !important; margin-right: 5px !important; }
.mglr_10 { margin-left: 10px !important; margin-right: 10px !important; }
.mglr_20 { margin-left: 20px !important; margin-right: 20px !important; }
.mgt_2 { margin-top: 2px !important; }
.mgt_4 { margin-top: 4px !important; }
.mgt_8 { margin-top: 8px !important; }
.mgb_10 { margin-bottom: 10px !important; }
.mgb_20 { margin-bottom: 20px !important; }
.mgb_50 { margin-bottom: 50px !important; }
.mgt_10 { margin-top: 10px !important; }
.mgt_20 { margin-top: 20px !important; }
.mgt_30 { margin-top: 30px !important; }
.mgt_50 { margin-top: 50px !important; }
.mgt-5 { margin-top: -5px !important; }
.mgt-10 { margin-top: -10px !important; }

/* ------------------------------------------------------------ width */
.w_25 { width: 25px; }
.w_50 { width: 50px; }
.w_200 { width: 200px; }
.w_300 { width: 300px; }
.w_350 { width: 350px; }
.w_400 { width: 400px; }
.w_500 { width: 500px; }
.w_550 { width: 550px; }
.w_600 { width: 600px; }
.w_700 { width: 700px; }
.w_800 { width: 800px; }
.w_1000 { width: 1000px; }
.w_100pct { width: 100%; }

.btn_w50 { width:50px !important; }
.btn_w80 { width:80px !important; }
.btn_w120 { width:120px !important; }

/* ------------------------------------------------------------ Sections */
.header { position: absolute; left: 0; top: 0; width: 100%; z-index:1; height: var(--header);
		border-bottom: 1px solid var(--bo); background-color: var(--bg-dark);
}
.body { position: absolute; left: 0; width: 100%; padding: 2px 8px 2px 8px;
		top: calc( var(--header) + 8px); bottom: calc( var(--footer) - 8px); }
.footer { position: fixed; left: 0; bottom: 0; width: 100%; z-index:1;
		padding: 2px 8px 2px 8px; height: var(--footer);
		border-top: 1px solid var(--bo); background-color: var(--bg-dark);
}

/* ------------------------------------------------------------ Helpers */
.left { float: left; }
.right { float: right; }
.center { position:relative; top: 50%;left: 50%; transform: translate(-50%, -50%); }
.center_h { max-width: fit-content; margin: auto; }
.center_v { max-height: fit-content; margin: auto; }
.clearfix:before, .clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }
.no_overflow { overflow: hidden; }
.ptr { cursor: pointer; }
.scroll { overflow-y: auto; overflow-x: hidden; }
.hover:hover { background-color:var(--bg-hover); }