tml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 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;
}

:root {
/*--page-max: 120rem;
--page-max-padded: calc(120rem + 2.5rem);*/

--page-max: calc(100% - (var(--margin) * 2) );

--margin: 1rem;
--padding: var(--margin);
--padding-x: calc(var(--padding) * 1.5) var(--padding);

--rounded-xs: 1rem;
--rounded: 1.5rem;

--header-height: 6rem;

--font: 'Public Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Tahoma, Geneva, Verdana, sans-serif, sans-serif;
--subfont: 'Manrope', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Tahoma, Geneva, Verdana, sans-serif, sans-serif;




--brand: #7FE80E;
--brand-2: #6BC40C;
--brand-alt: #E87E0E;
--brand-sub: #dd00aa;
--money: #68933A;
--money: #68933A;





--radius: 1.75rem;
--rounded: 2.5rem;

--box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;

--box-shadow: rgba(60, 64, 67, 0.420) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 0px 2px 0px;

--dark: #0a0c0e;
--dark: #000;
--light: #ffffff;

--offwhite: #fafcfe;
--offwhite: #fefdfc;/**/
--offwhite: #fcfafa;
--offwhite: #EFF4FB;
--offwhite: whitesmoke;

--offblack: #2a2c2e;

--highlight: #eeedec;/**/
--highlight: #eaecee;
--highlight: #f0ecea;

--dim: #eaecee;
--dim: #e0e1e2;
--neutral: #aaacae;
--neutral-light: #a2a2a7;
--dark-mid: #2a2c2e;
--mid: #5a5c5e;
--mid: #6a6c6e;
--line: #eaecee;
--line: #e6e8ea;
--line: #e3e6ec;
--line: #e3dfde;
--line: #d3cfce;


--line-alt: #666966;

--brand: #6a6c6e;

--alt: #12A34C;
--alt: #00A39D;
--alt: #0E81F0;
--alt: #12A34C;

--alt-mute: #3D3DB7;
--alt-mute: #0c54a3;
--alt-mute: #1832A1;/**/
--alt-mute: #125CA3;/**/

--alt-super-light: #EBEBF8;
--alt-rgb: rgba(61,61,183,0.1);

--success: #15BD57;
--warning: #DCF01A;
--warning-2: #F09B0E;
--alert: #F8180A;

--round: 0.75rem;

--margin-v: 2.5rem;

--shadow: rgba(45,40,40, 0.35) 0px 1px 2px;
}

html {
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: none;
font-size: 10px;
font-family: var(--font);
font-weight: normal;
font-weight: 500;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
}

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
/*flex-wrap: wrap; /*these together force elements to touch vertically*XXX/
align-content: flex-start; /*these together force elements to touch vertically*XXX/
flex: 1;
flex-direction: row;*/
/*height: fit-content;*/
min-height: 100vh;
/*min-height: 100vh;
overflow-y: auto;*/
font-size: 1rem;
/*font-family: "Inter", sans-serif;*/
color:  var(--dark);
background: #fff; /* fallback for old browsers */
background-color: var(--offwhite);
}

viewport {
display: flex;
position: relative;
width: 100%;
margin-top: var(--header-height);
flex-direction: column;
}

.hidden {
display: none!important;
}


/*h1 {
position: relative;
width: fit-content;
font-family: var(--subfont);
font-size: 2.5rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
font-weight: bold;
word-wrap: break-word;
}

h2 {
position: relative;
width: fit-content;
font-family: var(--subfont);
font-size: 2rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
font-weight: bold;
word-wrap: break-word;
}

h3 {
position: relative;
width: fit-content;
font-family: var(--subfont);
font-size: 1.8rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
font-weight: bold;
word-wrap: break-word;
}

h4 {
position: relative;
width: fit-content;
font-family: var(--subfont);
font-size: 1.5rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
}*/


hw {
font-size: 1.8rem;
color: red;
}

h1 {
font-size: 2rem;
}

h2 {
font-size: 1.8rem;
}


data * {
font-weight: normal;
}

.money h2 {
color: var(--money);
}




a.cover-link {
z-index: 1;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: all!important;
}

input,
textarea {
width: calc(100% - calc(var(--margin) * 2) - 0.2rem);
font-family: var(--font);
font-size: 1.6rem;
padding: calc(var(--margin) * 1.5) calc(var(--margin) / 1);
border-radius: calc(var(--margin) / 2);
border: 0.2rem solid var(--line);
}


select {
width: 100%;
font-family: var(--font);
font-size: 1.6rem;
padding: calc(var(--padding));
background-color: #fff;
border: 0.1rem solid var(--line);
box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
border-radius: calc(var(--margin) / 2);
}


module button,
module .button {
margin-top: calc(var(--margin) * 2);
}

button,
.button {
/*display: flex;*/
position: relative;
/*width: calc(100% - (var(--margin) * 3));*/
width: 100%;
padding: var(--margin) calc(var(--margin) * 1.5);
padding: calc(var(--margin) * 1.5) 0;
font-family: var(--font);
font-size: 1.6rem;
font-weight: 600;
text-align: center;
border-radius: var(--rounded-xs);
border-radius: calc(var(--margin) * 1);
border: none;
background-color: var(--brand-2);
background-color: #fff;
border: 0.1rem solid var(--line);
box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
text-decoration: none;
}

button:hover,
.button:hover {
cursor: pointer;
background-color: whitesmoke;
border: 0.1rem solid var(--line);
box-shadow: rgba(213, 217, 217, .5) 0 0px 0px 0;
}

.button-warning {
color: red;
}


warning {
display: flex;
position: relative;
flex: 1;
font-size: 1.6rem;
}



.icon-x {
display: flex;
position: relative;
height: 100%;
aspect-ratio: 1 / 1;
margin-right: 1rem;
}

.icon-x::after {
content: "+";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(45deg);
font-family: var(--font);
font-size: 2em;
line-height: 2em;
}


blackout {
z-index: 998;
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.69);
}


popper {
z-index: 999;
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 69vh;
background-color: var(--light);
border-radius: var(--rounded) var(--rounded) 0 0;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.3) 0px -19px 38px, rgba(0, 0, 0, 0.22) 0px -15px 12px;
}

popper pop-header {
display: flex;
position: relative;
width: calc( 100% - calc(var(--margin) * 4) );
height: fit-content;
padding: calc(var(--margin) * 2) calc(var(--margin) * 2);
/*border-bottom: 0.1rem solid var(--line);*/
}

popper pop-content {
display: flex;
position: relative;
width: calc( 100% - calc(var(--margin) * 4) );
height: fit-content;
padding: calc(var(--margin) * 2);
flex-direction: column;

}

clicktoshow {
display: flex;
position: relative;
width: 100%;
flex-direction: column;
}

clicktoshow * {
pointer-events: none;
}

clicktoshow hw {
line-height: 1.5;
}

showthis {
display: none;
position: relative;
width: 100%;
height: fit-content;
flex-direction: column;
}

showthis.show {
display: flex;
}


wrapper {
z-index: 1;
display: flex;
position: relative;
/*flex: 1;*/
width: 100%;
/*height: 100%;*/
max-width: var(--page-max);
margin-right: auto;
margin-left: auto;
flex-direction: column;
}


header {
z-index: 1000;
display: flex;
position: fixed;
top: 0;
left: 0;
width: var(--page-max);
height: var(--header-height);
padding: 0 var(--margin);
background-color: var(--light);
background-color: var(--dark);
align-items: center;
/*box-shadow: rgba(60, 64, 67, 0.10) 0px 2px 4px 0px, rgba(60, 64, 67, 0.05) 0px 2px 5px 2px;*/
border-bottom: 0.1rem solid var(--line);
/*box-shadow: rgba(64,69,64, 0.1) 0px 0px 2px 1px;*/
}

header main {
display: flex;
position: relative;
width: fit-content;
height: 100%;
flex-direction: row;
align-items: center;
}

header logomark {
display: flex;
/*display: none;*/
position: relative;
width: fit-content;
height: 66%;
margin-right: calc(var(--margin) / 2);
}

/*header logomark default-logo {
display: flex;
position: relative;
height: 100%;
aspect-ratio: 1 / 1;
border-radius: 100%;
background-color: var(--brand);
}*/

header logomark default-logo {
display: flex;
position: relative;
height: 8.9rem;
height: 100%;
aspect-ratio: 2.5 / 1;
background: url(/static/images/logo-1.png) 0 / auto 100%;
background-position: center;
background-repeat: no-repeat;
}

header company {
display: flex;
position: relative;
width: fit-content;
font-size: 2.0rem;
font-weight: 600;
}

header menu {
display: flex;
position: relative;
width: fit-content;
flex-direction: row;
margin-left: auto;
}

header profile {
display: flex;
position: relative;
width: fit-content;
flex-direction: row;
margin-left: auto;
}


main-menu {
display: flex;
position: relative;
width: 4.2rem;
height: 4.2rem;
margin-left: auto;
}

main-menu::after {
content: "";
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
/*background-color: var(--light);*/
background-image: url('/static/images/menu.png');
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
opacity: 0.69;
pointer-events: none;
}

header main-menu {
background-color: var(--light);
border: 0.1rem solid var(--line);
border-radius: var(--rounded-xs);
}





mobile-menu {
z-index: 1000;
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: calc(var(--padding) * 2);
background-color: var(--light);
flex-direction: column;
}

mobile-menu.open {
display: flex;
}


close {
z-index: 1;
display: block;
position: absolute;
top: 0;
right: 0;
width: 6.9rem;
height: 6.9rem;
}

close::after {
content: "+";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4.2rem;
height: 4.2rem;
transform: translate(-50%,-50%) rotate(45deg);
border-radius: 100%;
/*background-color: var(--offwhite);*/
font-size: 4.2rem;
line-height: 4.2rem;
color: rgba(0,0,0,0.69);
text-align: center;
align-content: center;
pointer-events: none;
}


mobile-menu menu-header {
display: flex;
position: relative;
width: 100%;
height: fit-content;
margin-bottom: calc(var(--padding) * 6.9);
flex-direction: row;
}

mobile-menu h1 {
font-size: 2.5rem;
}

mobile-menu h2 {
font-size: 2.5rem;
font-weight: normal;
}

mobile-menu menu-navs {
display: flex;
position: relative;
flex: 1;
flex-direction: column;
}

mobile-menu menu-navs nav {
display: flex;
position: relative;
width: 100%;
flex-direction: row;
align-items: center;
margin-bottom: calc(var(--padding) * 2);
}

mobile-menu menu-navs nav * {
line-height: 5rem;
pointer-events: none;
}

mobile-menu menu-navs nav go {
display: flex;
position: relative;
width: fit-content;
margin-left: auto;
font-size: 4.2rem;
font-weight: 600;
transform: translateY(-0.5rem);
}

















page-nav {
display: flex;
position: relative;
width: var(--page-max);
height: fit-content;
padding: calc(var(--padding) * 1.5) var(--padding);
background-color: var(--offwhite);
/*align-items: center;*/
flex-direction: column;
}

page-nav drop-nav {
margin-top: calc(var(--margin) / 1);
}



page {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: column;
}


page module {
display: flex;
position: relative;
width: var(--page-max);
padding: var(--padding);
flex-direction: column;

/*width: calc(100% - 1rem);
padding: var(--padding) calc(var(--padding) / 2);*/
}

module.inactive {
opacity: 0.5;
}

module.wide {
width: 100%;
padding-left: 0;
padding-right: 0;
}


stat-bar {
display: flex;
position: relative;
width: var(--page-max);
height: fit-content;
margin-top: var(--margin);
padding: var(--padding-x);
background-color: var(--light);
border-radius: var(--rounded-xs);
border-bottom: 0.1rem solid var(--line);
/*box-shadow: rgba(64,69,64, 0.1) 0px 0px 2px 1px;*/
}

stat-bar:first-of-type {
margin-top: 0;
}

stat-bar data:last-of-type {
margin-left: auto;
}


stat-bar data:first-of-type * {
font-weight: bold;
}


stat-list {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: column;
background-color: var(--light);
border-radius: var(--rounded-xs);
/*box-shadow: rgba(64,69,64, 0.1) 0px 0px 2px 1px;*/
}

stat-list list-header {
display: flex;
position: relative;
width: var(--page-max);
padding: 0 var(--padding);
height: 4.2rem;
align-items: center;
border-radius: var(--rounded-xs);
border-bottom: 0.1rem solid var(--line);
}

stat-list stat-bar {
margin-top: 0;
border-bottom: 0.1rem solid var(--line);
box-shadow: none;
}

stat-list stat-bar data:first-of-type * {
font-weight: normal;
}



stock-list {
display: flex;
position: relative;
width: 100%;
height: fit-content;
margin: calc(var(--margin) * 2) auto;
flex-direction: column;
}

stock-list stock-brand {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: column;
margin-top: calc(var(--margin) * 2);
}

stock-list stock-item {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: row;
margin-top: calc(var(--margin) / 1);
}

stock-list stock-item * {
font-size: 1.5rem;
}

stock-list stock-item stock {
margin-left: auto;

}


stock-list stat-list stat-bar {
padding-top: var(--padding);
padding-bottom: var(--padding);
}

stock-list stat-list stat-bar data:first-of-type {
margin-right: var(--margin);
}

stock-list stat-list stat-bar data:last-of-type {
margin-left: 0;
}