:root {
    --v-font-icon:'qubav2';
    --v-color:170,170,170;
    --v-text:33,33,33;
    --v-background:255,255,255;
    --v-light:0,0,0;
    --v-dark:33,33,33;
    --v-red:238,59,46;
    --v-orange:251,176,51;
    --v-green:61,176,154;

    --color-25:rgba(var(--v-color),.25);
    --color-50:rgba(var(--v-color),.50);
    --color-75:rgba(var(--v-color),.75);
    --color:rgb(var(--v-color));
    --text-25:rgba(var(--v-text),.25);
    --text-50:rgba(var(--v-text),.50);
    --text-75:rgba(var(--v-text),.75);
    --text:rgb(var(--v-text));
    --background-25:rgba(var(--v-background),.25);
    --background-50:rgba(var(--v-background),.50);
    --background-75:rgba(var(--v-background),.75);
    --background:rgb(var(--v-background));
    --light-5:rgba(var(--v-light),.05);
    --light-10:rgba(var(--v-light),.10);
    --light-25:rgba(var(--v-light),.25);
    --light-50:rgba(var(--v-light),.50);
    --light-75:rgba(var(--v-light),.75);
    --light-90:rgba(var(--v-light),.90);
    --light-95:rgba(var(--v-light),.95);
    --light:rgb(var(--v-light));
    --dark-5:rgba(var(--v-dark),.05);
    --dark-10:rgba(var(--v-dark),.10);
    --dark-25:rgba(var(--v-dark),.25);
    --dark-50:rgba(var(--v-dark),.50);
    --dark-75:rgba(var(--v-dark),.75);
    --dark-90:rgba(var(--v-dark),.90);
    --dark-95:rgba(var(--v-dark),.95);
    --dark:rgb(var(--v-dark));
    --red-25:rgba(var(--v-red),.25);
    --red-50:rgba(var(--v-red),.50);
    --red-75:rgba(var(--v-red),.75);
    --red:rgb(var(--v-red));
    --orange-25:rgba(var(--v-orange),.25);
    --orange-50:rgba(var(--v-orange),.50);
    --orange-75:rgba(var(--v-orange),.75);
    --orange:rgb(var(--v-orange));
    --green-25:rgba(var(--v-green),.25);
    --green-50:rgba(var(--v-green),.50);
    --green-75:rgba(var(--v-green),.75);
    --green:rgb(var(--v-green));

}
.darkmode {
    --v-text:255,255,255;
    --v-background:40,40,40;
    --v-light:147,149,151;
    --v-dark:255,255,255;
    --v-red:238,59,46;
    --v-orange:251,176,51;
    --v-green:61,176,154;

    --light-5:rgba(var(--v-light),.10);
    --light-10:rgba(var(--v-light),.15);
    --light-25:rgba(var(--v-light),.25);
    --light-50:rgba(var(--v-light),.50);
    --light-75:rgba(var(--v-light),.75);
    --light-90:rgba(var(--v-light),.90);
    --light-95:rgba(var(--v-light),.95);
}
[class^="qb-"], [class*=" qb-"] {
    display: inline-block;
}
[class^="qb-"]:before, [class*=" qb-"]:before {
    font-size: 1.4em;
    line-height: 0em;
    vertical-align: middle;
}
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
html, body, container {
    height: 100%;
}
html {
    background: var(--background);
}
body {
    font-family: "Poppins", sans-serif;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.47;
    color: var(--text);
    margin: 0;
    padding: 0; 
}
span {
    display: inline-block;
    vertical-align: middle;
}
container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}
body:not(.panel-open) panel {
    display: none;
}
body.panel-open main {
    display: none;
}
body:not(.panel-open) .if-panel-open { 
    display:none!important;
}
body.panel-open .if-not-panel-open { 
    display:none!important;
}
.d-none {
	display: none!important;
}
.container {
	width: 100%;
	padding-right: .75rem;
	padding-left: .75rem;
	margin-right: auto;
	margin-left: auto;
}
.bb-1 { border-bottom: 1px dashed var(--light-10)!important; }
.bb-2 { border-bottom: 2px solid var(--light-10)!important; }
.bt-1 { border-top: 1px dashed var(--light-10)!important; }
.bt-2 { border-top: 2px solid var(--light-10)!important; } /* */

.m-0 { margin:0; } .m-1 { margin:6px; } .m-2 { margin:12px; } .m-3 { margin:24px; } .m-4 { margin:32px; }
.mb-0 { margin-bottom:0; } .mb-1 { margin-bottom:6px; } .mb-2 { margin-bottom:12px; } .mb-3 { margin-bottom:24px; } .mb-4 { margin-bottom:32px; }
.mt-0 { margin-top:0; } .mt-1 { margin-top:6px; } .mt-2 { margin-top:12px; } .mt-3 { margin-top:24px; } .mt-4 { margin-top:32px; }
.mr-0 { margin-right:0; } .mr-1 { margin-right:6px; } .mr-2 { margin-right:12px; } .mr-3 { margin-right:24px; } .mr-4 { margin-right:32px; }
.ml-0 { margin-left:0; } .ml-1 { margin-left:6px; } .ml-2 { margin-left:12px; } .ml-3 { margin-left:24px; } .ml-4 { margin-left:32px; }

.p-0 { padding:0; } .p-1 { padding:6px; } .p-2 { padding:12px; } .p-3 { padding:24px; } .p-4 { padding:32px; }
.pb-0 { padding-bottom:0; } .pb-1 { padding-bottom:6px; } .pb-2 { padding-bottom:12px; } .pb-3 { padding-bottom:24px; } .pb-4 { padding-bottom:32px; }
.pt-0 { padding-top:0; } .pt-1 { padding-top:6px; } .pt-2 { padding-top:12px; } .pt-3 { padding-top:24px; } .pt-4 { padding-top:32px; }
.pr-0 { padding-right:0; } .pr-1 { padding-right:6px; } .pr-2 { padding-right:12px; } .pr-3 { padding-right:24px; } .pr-4 { padding-right:32px; }
.pl-0 { padding-left:0; } .pl-1 { padding-left:6px; } .pl-2 { padding-left:12px; } .pl-3 { padding-left:24px; } .pl-4 { padding-left:32px; }

.t-c { text-align:center; }
.t-l { text-align:left; }
.t-r { text-align:right; }

@media (min-width: 576px){ .container { max-width: 540px; }}
@media (min-width: 7612px){.container {	max-width: 720px;}}
@media (min-width: 992px){.container {	max-width: 960px;}}
@media (min-width: 1200px){.container {	max-width: 1140px;}}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    line-height: 1.1em;
    margin: 0 0 0.2em 0;
}
h1, .h1 { font-size: 1.2rem; }
h2, .h2 { font-size: 1.8rem; }
h3, .h3 { font-size: 1.6rem; font-weight: 400; }
a:not(.btn), a:not(.btn):hover, a:not(.btn):visited, a:not(.btn):active {
	text-decoration: none;
	color: inherit;
}
input, select {
    background: var(--light-5);
    color: var(--text);
    align-items: center;
    align-self: center;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 36px;
    font-weight: initial;
    font-size: 1.1em;
    position: relative;
    border: 0;
    outline: none;
    width: -webkit-fill-available;
    line-height: inherit;
}
input::placeholder, select::placeholder {
  color: var(--light-25);
  /* font-style: italic; */
}
[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-50);
}
button {
    padding: 12px 24px;
    background: var(--light-5);
    color: var(--text);
}
.radio-button {
    overflow: auto;
    white-space: nowrap;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}
.radio-button::-webkit-scrollbar { display: none; }
.radio-button { -ms-overflow-style: none; }
.radio-button { scrollbar-width: none; }
.radio-button button:first-child {
    border-radius: 36px 0 0 36px;
    padding-left: 24px;
}
.radio-button button:last-of-type {
    border-radius: 0 36px 36px 0;
    padding-right: 24px;
}
.radio-button button[checked] {
    background: var(--color);
    color: #FFF;
}
.radio-button button {
    display: inline-block;
    margin: 0 1px 0 0;
    cursor: pointer;
    user-select: none;
    border: 0;
    font-weight: initial;
    font-size: 1.1em;
    padding: 12px 14px;
}
label {
    font-size: 0.9em;
    font-weight: 600;
    margin: 12px 0 6px 0;
    display: block;
}
.btn {
    display: flex;
    background: var(--light-10);
    color: var(--text);
    align-items: center;
    align-self: center;
    padding: 12px 18px 12px 18px;
    text-decoration: none;
    border-radius: 36px;
    font-weight: initial;
    font-size: 1.1em;
    position: relative;
    align-items: center;
    gap:6px;
}
.btn > span,
.nav-item > span {
    flex:1;
}
.btn [class^="qb-"]:before, .btn [class*=" qb-"]:before, .nav-item [class^="qb-"]:before, .nav-item [class*=" qb-"]:before {
    font-size: 2em;
    line-height: 0;
}
.btn-dark {
    background: #111;
    color: #FFF;
}
.btn-bordered {
    background: transparent;
    border: 1px solid var(--light-10);
}
.darkmode .btn-bordered {
    background: #FFFFFF11;
    border: 0px solid var(--light-10);
}
.btn-color {
    background: var(--color);
    color: #FFF;
}
[href] {
	cursor: pointer;
}
.colored, .c, c {
	color:var(--color)!important;
}
.grid {
    display: grid;
    grid-gap: 1rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fit,minmax(10px,1fr));
}
body .ico-nav {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 60px;
    vertical-align: middle;
    padding: 0 12px 0 0;
}
body .ico-nav.active {
    color: var(--color);
}
header {
    border-bottom: 1px solid var(--dark-5);
    background: var(--background);
    margin-top: 0;
    transition: margin-top 1s;
}
header bar {
    display: grid;
    position: relative;
    grid-gap: 1rem;
    justify-content: center;
    grid-template-columns: 1fr auto;
    padding: 0 12px 0 12px;
    z-index: 1000;
    background:var(--background);
} 
footer {
    border-top: 1px solid var(--dark-5);
    background: var(--background);
    margin-bottom: 0;
    transition: margin-bottom 1s;
}
footer bar {
    display: grid;
    position: relative;
    grid-gap: 1rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fit,minmax(10px,1fr));
    padding: 0 26px;
    text-align: center;
    z-index: 1000;
    background:var(--background);
}
header.close, body.header-close header {
    margin-top: -60px;
}
footer.close, body.footer-close footer {
    margin-bottom: -60px;
}
header nav {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
    /* padding: 24px 24px; */
    border-top:1px solid var(--dark-5);
    z-index: 500;
    background:var(--background);
    box-shadow: 0 0 6px #00000011;
}
footer nav {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
    /* padding: 24px 24px; */
    border-bottom:1px solid var(--dark-5);
    z-index: 500;
    background:var(--background);
    box-shadow: 0 0 6px #00000011;
}
.nav-item {
    display: flex;
    padding:12px;
    position: relative;
    font-size:1.1em;
    align-items: center;
    gap:6px;
}
.nav-item/* :not(:last-child) */{
    border-bottom: 1px solid var(--dark-5);
}
[class^="ch-"]:after, [class*=" ch-"]:after {
    content: '\E00D';
    width: 20px;
    font-family: var(--v-font-icon);
    font-size: 24px;
    text-align: center;
    align-items: center;
    line-height: 0;
    transform: translateY(1px);
    display: inline-block;
}
.ch-left:after { display:none; }
.ch-left:before { 
    content: '\E00C'; 
    width: 20px;
    font-family: var(--v-font-icon);
    font-size: 24px;
    text-align: center;
    align-items: center;
    line-height: 0;
    transform: translateY(1px);
    display: inline-block;
}
.ch-right:after { content: '\E00D'; }
.ch-bottom:after { content: '\E00B'; }
.ch-top:after { content: '\E00E'; }
body:not(.footer-nav-open) footer nav,
body:not(.header-nav-open) header nav {
    display: none;
}
main {
    overflow: auto;
    max-height: 100%;
}
.logo {
    width: 100%;
    height: 50px;
    display: inline-block;
}