:root {
    interpolate-size: allow-keywords;
    /* for height auto animation */

    --forecolor: #000;
    /* --backbase: #5e207a;
    --backbase :#583585;
    --backbase: #48207a; */
    --backcolor: #fff;
    --backbase: #fff;
    --backmenu: #fff;
    --backtwin: #ccc2;
    --selectcolor: #99a2;
    --selectbackcolor: #222;
    --selectforecolor: #fff;
    /* --primarycolor: #527; */
    /* --primarycolor: #93c; */
    --primarycolor: #84c;
    --backgradient: linear-gradient(0deg, #8951f4 0%, #6a3ba8 50%, #240059 100%);
    --linetall: 2.6;
    --linemid: 1.8;
    --linesmall: 1.2;
    --linemini: 1;
    --fontname: 'Open Sans';
    /*--fontname: 'Lato';*/
    --fontname2: 'Montserrat';
    /* --fontlarge: 1.3em; */
    --fontlarge: 1.25em;
    --fontsmall: 0.85em;
    /*--shadow: 0 0 50px #8792;*/
    /*--shadow: 0 0 50px #8792;
    --shadow: 0 6px 15px #8792;*/
    /*--shadow: 0 2px 5px #8792;*/
    --shadow: 0 1px 2px #8792;
    --border: 1px solid #7792;
    --hovercolor: #ccc1;
    --highlight: #fe93;
    --size: 3;
    --fieldcount: 1;
    --radiusbig: 10px;
    --radius: 6px;
    /*--fldbasis: 80px;*/
    --fldbasis: 45px;
    --letterspacing: 0.5px;
    /*--maxwidth: 1320px;*/
    /*--maxwidth: 1280px;*/
    /* --maxwidth: 1000px; */

    --maxwidth: 1200px;
    /* --maxwidth: 900px; */
    --maxwidth: 960px;
    --maxwidth: 1100px;

    /* --maxwidth: 1330px; */
    --lessopacity: 0.3;
    --maxheight: calc(100vh - 200px);
    /* 
    --maxwidth: 960px;*/
    /*  --cardsize: calc(var(--size) * 80px);*/
    /*--fontname: 'Montserrat';*/
}

body.dark {
    --forecolor: #ddd;
    --backcolor: #222427;
    --backmenu: #222427;
    --backbase: #191919;

}


/* makes sizing simpler */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* remove default spacing */
/* force styling of type through styling, rather than elements */

* {
    /*    margin: 0;
    padding: 0;*/
    font-family: inherit;
}

/* dark mode user-agent-styles */

html {
    color-scheme: dark light;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}


/* min body height */

body {
    min-height: 100vh;
    /*scrollbar-gutter: stable both-edges;*/
}

/* responsive images/videos */
img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}



body {
    font-family: var(--fontname), -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Roboto", "Oxygen", "Cantarell", "Helvetica Neue", "Ubuntu", sans-serif;
}

body {
    cursor: default;
    box-sizing: border-box;
    padding: 0px 5%;
    margin: 0 auto;
    /* font-family: var(--fontname) ; */
    /* font-family: "Jost", sans-serif; */
    background-color: var(--backbase);
    color: var(--forecolor);
}

main {
    container-name: menu-main;
    container-type: inline-size;
}

main.pinned {
    display: flex;
    gap: 1%;
}

main.pinned>div {
    flex-grow: 1;
}


main.pinned #ticker {
    width: 30%;
    box-shadow: var(--shadow);
    max-height: 80vw;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    resize: horizontal;
    flex-grow: 1;
}

/* #main, */
article,
.toolbar,
.menu,
nav {
    margin: 0 auto;
    max-width: var(--maxwidth);
    container-name: menu-main;
    container-type: inline-size;
    /*    max-width: 1280px;*/
    /*
    max-width: 840px;*/
    /*max-width: 90%;*/
}

article:has(section.fullwidth) {
    --maxwidth: 100%;
    /* max-width: 100%; */
}

[data-name="home"]>div {
    display: none;
}

/* 
[data-name="home"] {
    & .dropdown {
        display: none;
    }

    & #_view {
        display: flex;
    }
}

[data-name="ticker"] {

    & #_filter,
    #_sort {
        display: none;
    }
} */

[data-name="0"] {
    --size: 0;
}

[data-size="0"] {
    --size: 0;
}

[data-size="1"] {
    --size: 1;
}

[data-size="2"] {
    --size: 2;
}

[data-size="3"] {
    --size: 3;
}

[data-size="4"] {
    --size: 4;
}

[data-size="5"] {
    --size: 5;
}

[data-size="6"] {
    --size: 6;
}

[data-size="7"] {
    --size: 7;
}

[data-size="8"] {
    --size: 8;
}

[data-size="9"] {
    --size: 9;
}

/*[data-size="xs"] {
    --size: 1;
}

[data-size="s"] {
    --size: 2;
}

[data-size="m"] {
    --size: 3;
}

[data-size="l"] {
    --size: 4;
}

[data-size="xl"] {
    --size: 5;
}*/
.uppercase {
    text-transform: uppercase;
}

section.multi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    /*grid-template-columns: repeat( auto-fit, minmax(170px, 1fr) );*/
    gap: 1.6em;
    align-items: start;
}

.widget section.multi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.6em;
    align-items: start;
}


.multi .group {
    /*min-height: 190px;*/
    /* min-width: 24%; */
    flex-grow: 1;
    max-height: 80vh;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.multi .group:hover {
    overflow-y: auto;
}

section.graph,
.multi section.graph,
.highcharts-container {
    /* min-height: 70vh; */
    min-height: var(--maxheight);
    max-height: var(--maxheight);
    /*overflow: hidden;*/
}

.multi:has(.multi) section.graph {
    min-height: 25vh;
    max-height: 25vh;
}

.widget section.graph {
    min-height: 90% !important;
}

/* .widget:has(section.graph) {
    flex-grow: 0;
} */

/*section .graphic, .multi section .graphic {
    min-height: 70vh;
    overflow: hidden;
}*/

/*section.graph > div {
        max-width: 100%;
    }*/

.multi .group:before {
    /*font-weight: lighter;
    font-size: 1.8em;
    line-height: 1;*/
    padding: 0.2em 0.5em 0;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 1.15em;
}

.multi .multi:before {
    text-align: left;
    line-height: 0.5;
    /* margin-top: 1.6em; */
    /* margin-top: 1.6em; */
    position: absolute;
}


.multi .group.topx:before {
    /*text-transform:uppercase;*/
    font-weight: normal;
    font-size: 1.01em;
    /* font-size: 0.95em; */
    /* line-height: 2.2; */
}

section.list {
    /*display: grid;*/
    display: flex;
    flex-flow: column;
    /*align-items:center;*/
    /*   column-count:auto;
    column-fill:balance;*/
}

section.list.multi {
    flex-flow: row;
    /*gap:1em;*/
}

section.list.multi.group {
    flex-flow: column;
    flex-grow: 1;
}

section.card {
    display: grid;
    --cardsize: calc(var(--size) * 40px + 80px);
    grid-template-columns: repeat(auto-fill, minmax(var(--cardsize), 1fr));
    gap: 2em;
    gap: calc(var(--cardsize) * 0.13);
    position: relative;
}

section.card .group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--cardsize), 1fr));
    gap: 2em;
    gap: calc(var(--cardsize) * 0.13);
    position: relative;
    grid-column: 1 / -1;
    border: 0;
}

.useanimate section.card {
    display: block;
}




.group:before {
    content: attr(data-group);
    white-space: nowrap;
    /*overflow-x: hidden;*/
    text-align: center;
    grid-column: 1 / -1;
    /*padding: 0.5em 0.2em 0.2em;*/
    padding: 0.2em;
    font-weight: bold;
    line-height: 2.2;
    font-size: 0.95em;
    /* dont use sticky as it messes up in multi views on scroll*/
    /*    position: sticky;
    top: 0;
    z-index: 1;*/
    background-color: var(--backbase);
    order: -2;
    /* above fieldheads also*/
}

.topx.group:before {
    text-align: center;
    width: 100%;
    line-height: 2.2;
    line-height: 2.6;
}



.card .group:before {
    font-weight: lighter;
    /*opacity: 0.3;*/
    font-size: 1.6em;
    line-height: 0.9;
    /*margin-bottom: -0.6em;*/
    text-align: left;
}

/*section.list.topx{
    display:flex;
}*/

.topx {
    border-radius: 1em;
    border: var(--border);
    padding: 0em 8% 1.5em 5%;
    /*min-height: 210px;*/
    /*max-height: 210px;*/
    max-height: var(--maxheight);
    overflow: hidden;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.topx:hover {
    overflow-y: auto;
    box-shadow: var(--shadow);
}

.list.topx .scripinfo {
    border: 0;
    padding: 0.2em;
    line-height: var(--linemid);
}

.scripinfo {
    display: none;
    cursor: pointer;
    position: relative;
    /*transition-behavior: allow-discrete;*/
    box-sizing: content-box;
    /*font-size: calc(1 + var(--size)*0.1em );*/
    font-size: calc(12px + var(--size) * 2px);
    /* font-size: calc(12px + var(--size) * 1.6px); */
    /*font-size: calc(9px + var(--size) * 3px );*/
}


.card .scripinfo {
    border: var(--border);
    padding: 1em 1.5em 2em;
    /*padding: calc(var(--size) * 5px ) calc(var(--size) * 8px ) 1.7rem;*/
    /*padding: calc(var(--size) * 4px ) calc(var(--size) * 6px ) 1.7rem;*/
    /*padding: calc(var(--size) * 3px + 2px ) calc(var(--size) * 5px + 2px ) 1.7rem;*/
    /*padding: calc(var(--size) * 4px + 2px ) calc(var(--size) * 7px + 2px ) 2.2em;*/
    padding: calc(var(--size) * 3px + 0px) calc(var(--size) * 6px + 3px) 1.62em;
    /* box-shadow: var(--shadow); */
    border-radius: 1em;
    /*height: 200px;*/
    height: calc(var(--cardsize) * 0.7);
    /* width: calc(var(--cardsize) * 0.8); */
    /* width: 300px; */
    /*overflow: hidden;*/
    transition: 0.8s;
    transition-behavior: allow-discrete;
    /* scale: 0.8;*/
    opacity: 0;
    flex-grow: 1;
    /* display: inline-block; */


}

.useanimate .card .scripinfo {
    width: calc(var(--cardsize) * 0.8);
    /* position: absolute;
    top: 0;
    left: 0; */
    transition: 0.5s;
    /* display: flex; */
    display: flex;
}

.list .scripinfo {
    width: 100%;
    flex-flow: row;
    border-bottom: var(--border);
    /*font-size :0.9em;*/
    /*font-size: calc(11px + var(--size) * 1px);*/
    /* font-size: calc(11px + var(--size) * 0.85px); */
    /* font-size: calc(12px + var(--size) * 0.8px); */
    font-size: calc(12px + var(--size) * 0.6px);
    /*letter-spacing:0.5px;*/
    /*padding: 0.2em;*/
    /* padding: 0.1em 0.2em; */
    padding: 0.22em;
    line-height: var(--linemid);
    /* line-height: 1.6; */
    /*padding: 0.14em 0.2em;*/
    /*padding: 0.5em 0.2em;*/
}

/*.list .group .scripinfo{
    width:fit-content;
}*/

.list .scripinfo>div {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: var(--fldbasis);
    /*align-items: center;*/
    align-items: flex-start;
}


.scripinfo.heads {
    padding: 0;
    display: flex;
    /*font-weight:bold;*/
    /*text-transform: uppercase;*/
    font-size: 0.8em;
    letter-spacing: var(--letterspacing);
    order: -1;
    /*always on top*/
    z-index: 15;
    background-color: var(--backbase) !important;
    /* u dont want this to change on hover*/
    position: sticky;
    top: 70px;
    border-top: var(--border);
    padding-top: 1em;
    /*border-width:1px !important;*/
}

.heads div {
    padding: 0 0 0.5em 4px;

}

.heads div:has(div) {
    /* for all divs having any subdivs*/
    padding: 0;
}

/* 
.heads .subgrp>div,
.heads .scrip>div {
    padding: 1em 0;
} */

.group .scripinfo.heads {
    top: 0px;
    position: static;
    /*opacity:0.3;*/
    font-size: 0.6em !important;
    display: flex !important;
}

.caption {
    display: none;

}

.topx .caption {
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0.5em auto;
    flex-basis: 100%;
    line-height: 1.6;
    border-bottom: 1px solid transparent;
}

/* .caption:hover {
    border-bottom: 1px solid;
} */

/*.heads [data-field] {
}*/

.card .scripinfo.heads {
    display: none !important;
}


.topx .scripinfo.heads {
    display: none !important;
}

.subinfo {
    /*    display: flex;
    flex-wrap: wrap;*/
    flex-grow: 3 !important;
    /* to scale & stretch sub grid*/
    gap: 1px 1px;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--fldbasis), 1fr));
}

.card .subinfo {
    display: flex !important;
    flex-flow: column;
    flex-basis: 100%;
    font-size: 0.85em;
}

.card .single .subinfo {
    /* position: absolute;
    top: 40px; */
    flex-basis: initial;
    flex-flow: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    gap: 0.1em 2em;
    margin: 0.25em 2em 0 0;
    font-size: 0.9rem;
}


.list .scripinfo .subgrp {
    gap: 1px 5px;
    /*    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;*/
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--fldbasis), 1fr));
}

.list .group .scripinfo .subgrp {
    display: flex !important;
    /* flex-wrap: nowrap; */
    flex-wrap: wrap;
    flex-grow: 1;
}

.list .scripinfo .subgrp>div {
    flex-basis: 40px;
    flex-grow: 1;
}

.list .scripinfo .subgrp>div.value {
    flex-basis: var(--fldbasis);
    flex-grow: 1;
}


/*.group.list .subgrp , */
/*.group.list .subinfo {
    display: flex !important;
}*/

.group.list .scripinfo,
.list .group .scripinfo {
    /* padding: 0.04em 0.2em; */
    padding: 0.05em;
    line-height: 1.35;
    line-height: 1.6;
    /* padding: 0.2em 0.2em;
    line-height: 1.2; */
    border-width: 0;
    /*font-size: calc(10px + var(--size) * 0.85px );*/
    /*font-size: calc(10px + var(--size) * 0.8px );*/
    /*font-size: calc(12px + var(--size) * 0.6px );*/
    font-size: calc(11px + var(--size) * 0.6px);
}


/*.topx .scripinfo {
    font-size: 0.84em;
}
*/
/*.list.topx .scripinfo:nth-child(n + 10) {
    display: none;
}
   */

.scripinfo .scrip {
    /* width: 100px; */
    /* padding: 0 3px 0 0; */
    padding: 0 2% 0 0;
    /* text-align: right; */
    flex-grow: 0 !important;
}

.group .scripinfo .scrip {
    /* flex-grow: 0 !important; */
}

.scripinfo .symbol {
    width: 100px;
    white-space: nowrap;
    flex-basis: 100px !important;
    flex-grow: 1 !important;
    /*text-align:right;*/
}

.topx .scripinfo .symbol,
.group .scripinfo .symbol {
    text-align: right;
}

.list .sparks {
    width: 100px;
    max-width: 120px;
    /*overflow:hidden;*/
    min-height: 30px;
    flex-grow: 2 !important;
    margin: 0 1em 0 0;
}


.scripinfo {
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 0 3px;
    /*gap:5px;*/
}

.scripinfo.filter {
    display: flex;
    scale: 1;
    opacity: 1;
}

tr.scripinfo.filter {
    display: table-row;
}


.scripinfo.fade {
    /*opacity:0;*/
    /*transition:0.5s;*/
    /*transform:scale(0.1);*/
}

.scripinfo.animate {
    transition: 0.5s;
}

.card .scripinfo.single {
    width: 100%;
    height: 70vh;
    /* height: 100%; */
    min-height: calc(100% - 150px);
    /*box-shadow:none;*/
    border-radius: 0;
    grid-column: 1 / -1;
    border: 0;
    box-sizing: border-box;
}

#ticker .card .scripinfo.single {
    height: 100%;
}

.widget .card .scripinfo.single {
    height: 100%;
    padding: 0.5em;
    overflow: visible;
}

.widget section.card {
    height: 100%;
}

.widget .topx.group:before {
    /*line-height: 2;*/
}

.widget .scripinfo {
    /*padding: 0.2em;*/
    font-size: 0.85em;
}

.card i {
    font-style: normal;
}

.card .scripinfo:hover {
    /*box-shadow: 0 0 15px #2355;*/
    box-shadow: var(--shadow);
}

.list .scripinfo:hover {
    background-color: var(--highlight);
}

.scripinfo:hover {
    overflow: visible;
}

.up,
.rising,
.above,
.high,
.top,
.hi_range,
.high_range {
    white-space: nowrap;
    color: #2b8;
    color: #00b386;
    color: #0b6;
    color: #0a4;
    color: #095;
    /* color: #1d6d4b; */
    /* color: #084;
    color: #075;*/
}

.dn,
.falling,
.below,
.low,
.bottom,
.lo_range,
.low_range {
    white-space: nowrap;
    /*color: #e45;*/
    color: #D45;
    color: #e53;
    color: #eb5b3c;
    color: #D43;

    /*color: #c32;*/
    /* color: #b22; */
}

.percent.up:before {
    content: '+';
    font-size: 0.9em;
}

.sign.up::before {
    content: '▲ ';
}

.sign.dn::before {
    content: '▼ ';
}

/*.sign.high{
    border-top:2px solid;
}

.sign.low {    
    border-bottom: 2px solid;
}*/

.change {
    white-space: nowrap;
    margin: 0 0px 0 5px;
}

.change.up::before {
    content: '+';
    margin-right: -5px;
    /*margin-left:5px;*/
}


.tag {
    font-size: 0.7rem;
    font-weight: normal !important;
    min-width: 20px;
    margin-left: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 0px 2px;
    line-height: 1.1;
    display: inline-block;
    text-align: center;
}

.hilo .tag {}

/*.hilo .low.tag{
    border-bottom:1px solid;
}
.hilo .high.tag {
    border-top: 1px solid;
}
*/
.sparks {
    flex-basis: 100%;
    flex-grow: 1;
    width: 100%;
    /* display: initial; */
    /* height: 90%; */
    position: relative;
    height: calc(100% - 30px);
}

.sparks {
    display: none;
}

.useanimate .sparks {
    display: initial;
}

.inview .sparks {
    display: initial;
}

.sparks canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block;
}

/*.scripinfo:hover .sparks::after, .scripinfo:hover .sparks::before {*/
.scripinfo .sparks::after,
.scripinfo .sparks::before {
    position: absolute;
    /*transition: 0.15s;*/
    display: block;
    border-radius: 2px;
    line-height: 1;
    /*color: #fff;
    left: 0;
    right: inherit;*/
    z-index: 1;
}

.list .subinfo {
    order: 2;
}

.list .sparks {
    order: 1;
}

/* .card .sparks {
    margin-top: 0.95em;
    order: 3;
} */


/*.sparks::before {
    font-size: calc(0.5em + 6px);
    top: inherit;
    bottom: 100%;
    left: 0;
    right: inherit;
    content: attr(data-price) "   " attr(data-arrow) " " attr(data-percent) "%";
    content: attr(data-price);
    white-space: nowrap;
    color: var(--forecolor);
}

.sparks::after {
    font-size: calc(0.5em + 6px);
    top: inherit;
    bottom: 100%;
    left: 0;
    left: 70px;
    left: 4.4em;
    right: inherit;
    content: attr(data-arrow) " " attr(data-percent) "%";
    white-space: nowrap;
}
*/

/*.card .sparks::before {
    font-size: calc(0.5em + 6px);
}*/

.list .sparks::before {
    content: attr(data-arrow) "" attr(data-percent) "% ";
    bottom: calc(100% - 0.25em);
    opacity: 0;
    visibility: hidden;
}

.list .scripinfo:hover .sparks::before {
    opacity: 1;
    visibility: visible;
}



.sparks:hover::before,
.mytip .sparks::before {
    font-size: 12px;
    bottom: inherit;
    top: 0;
    /* top: inherit;
    bottom: 100%; */
    /* right: 0;
    left: inherit; */
    left: 0;
    right: inherit;
    background-color: #0b3c;
    color: #fff;
    /*content: "H: " attr(data-high);*/
    content: attr(data-high) " (H)";
    padding: 2px 3px;
}

.sparks:hover::after,
.mytip .sparks::after {

    font-size: 12px;
    top: inherit;
    bottom: 0;
    /* bottom: inherit;
    top: 100%; */
    /* right: 0;
    left: inherit; */
    left: 0;
    right: inherit;
    background-color: #e33c;
    color: #fff;
    /*content: "L: " attr(data-low);*/
    content: attr(data-low) " (L)";
    padding: 2px 3px;
}

.panelinfo {
    z-index: 100;
    /*padding: 2px;*/
    /*max-width: 100px;*/
    /*width: 100%;*/
    position: absolute;
    top: 0px;
    /*bottom: 50%;*/

    margin: 0;
    padding: 0.2em;
    text-align: left;
    /*left:auto;*/
    /*left: 2px;*/
    font-size: 0.85rem;
    /*background-color: transparent;*/
    opacity: 0;
    line-height: 1.1;
    pointer-events: none;
    transition: 0.15s;
    color: var(--forecolor);
}

.panelinfo.floating {
    padding: 0.8em;
    background-color: var(--backcolor);
    box-shadow: 0 0 2px #666;
    border-radius: 0.5em;
}

.panelinfo span {
    margin: 8px;
}

.panelinfo.floating span {
    display: block;
    margin: 6px;
}

.sparks:hover .panelinfo,
.sparks:hover .ball,
.sparks:hover .crossx,
.sparks:hover .crossy {
    opacity: 0.95;
    display: block;
}

.crossx,
.crossy {
    font-size: 16px;
    z-index: 900;
    /*z-index important to be lesser than overlay canvas.. else it will appear choppy display: none;*/
    position: absolute;
    top: 0;
    left: 2px;
    background-color: transparent;
    display: none;
    font-weight: bold;
    pointer-events: none;
    /*transition: 0.2s ease-out;
    transition-property: top, left;*/
}

.list .crossxxxx,
.list .crossy {
    display: none !important;
}

.crossx {
    height: calc(100% - 0px);
    /*height: 100%;*/
    width: 1px;
    border-left: 1px dashed rgba(15, 15, 15, 0.5);
    /*border-left: 1px solid rgba(244,50,50,0.8);*/
}

.crossy {
    display: none;
    width: calc(100% - 40px);
    height: 1px;
    border-top: 1px dashed rgba(15, 15, 15, 0.5);
}


.crossx::after {
    content: attr(xval);
    /*padding: 1px 3px;
    line-height: 1;*/
    /*top: 100%;*/
    bottom: -13px;
    left: -24px;
    /*min-width: 50px;*/
    text-align: center;
}

.crossy::after {
    content: attr(yval);
    /*padding: 1px 3px;*/
    left: 100%;
    top: -12px;
    /*min-width: 30px;*/
    text-align: left;
}

.crossy:after,
.crossx:after {
    background-color: #333;
    color: #fff;
    font-size: 0.8em;
    padding: 0px 4px;
    line-height: 1.5;
    font-weight: normal;
    position: absolute;
    white-space: nowrap;
    border-radius: 2px;
    text-shadow: 0 0 0 rgba(27, 31, 37, 1);
}


.ball {
    display: block;
    box-sizing: border-box;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    /*border-radius: 3px;
    width: 6px;
    height: 6px;*/
    border: 1px solid #fff9;
    position: absolute;
    color: transparent;
    background-color: #fff;
    /*transform: translate(-50%,-50%);*/
    /*transform: scale(0);*/
    box-shadow: 0 0 5px;
    opacity: 0;
    /*transition: 1s opacity;*/
    /*transition: 0.03s cubic-bezier(0.4, 0, 0.2, 1), 1s opacity;*/
    transition: 1.2s opacity;
    /*transition: 0.15s ease-out, 1.2s opacity;*/
    z-index: 99;
    top: 0px;
    left: 0px;
    font-size: 0.85em;
    pointer-events: none;
}

.ball.bubble {
    background-color: transparent !important;
    box-shadow: 0 0 2px !important;
    border: 0 !important;
    transition: 0.05s linear all, 1s opacity;
}

.tiplabel.ball {
    transition: 0.15s ease-out, 1.2s opacity;
}

/*.dark .ball {
    border: 1px solid #fffe;
}*/
.sparks:hover>.ball {
    /*transform:scale(1);*/
    opacity: 1;
}

.tiplabel.ball:before {
    border: 1px solid;
    content: attr(data-val);
    z-index: inherit;
    right: 13px;
    top: -5px;
    display: block;
    position: absolute;
    background: #fffffff6;
    border-radius: 3px;
    padding: 9px 6px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0px 0px 1px;
    /*max-width:150px;*/
    /*min-width:80px;*/
}

.tiplabel.ball:after {
    background: #fffffff6;
    content: '';
    width: 7px;
    height: 7px;
    border: 1px solid;
    transform: rotate(45deg);
    position: absolute;
    left: -9px;
    top: 2px;
    z-index: inherit;
    border-left: 0;
    border-bottom: 0;
}

/*.tiplabel.ball.bubble:before {
    top: -20px;
    left: -50px;
    right: auto;
}*/

/*.ball.labelfill{
    width:100px;
    height:auto;
    padding:10px;
    margin:0 15px;
    box-shadow:0 0 1px #6666;
}

 */
.ball span {
    display: block;
}

.ball:hover {
    z-index: 10000;
}


.flex {
    display: flex;
}

.flex.column {
    flex-flow: column;
}

.wrap {
    flex-wrap: wrap;
}

.condition {
    font-size: 0.85em;
}

fieldset {
    margin: 0 3px;
    padding: 0 2px;
    border: 0px solid;
    border-radius: 3px;
    /* box-shadow: inset 0 0 20px #9992; */
    border: 1px dashed #9998;
}

.condition>div {
    /* padding: 10px; */
    margin: -1px;
}

.condition:hover {
    background-color: #ccc2;
    box-shadow: inset 0 0 2px #ccc9;
}


.condition label {
    /* width: 70px; */
    display: block;
    display: none;
    opacity: 0.5;
    margin: 0 4px;
    text-transform: lowercase;
    /* text-align: right; */
}

input,
select {
    /* width: 80px; */
    /* font-family: inherit; */
    padding: 5px 5px 5px 10px;
    margin: 4px;
    border-radius: var(--radius);
    letter-spacing: var(--letterspacing);
    border: 1px solid;
    /* border:1px solid #ccc9; */
    color: var(--forecolor);
    background-color: var(--backcolor);
    cursor: pointer;
    transition: 0.15s ease-in-out;
    outline: none;
    font-size: 1rem;
}

/*select {
    appearance: none;
}*/

input:focus,
input:active,
select:focus,
select:focus {
    box-shadow: 0 0 10px -2px #06c;
    border: 1px solid #06c;
    /* width: 100%; */
}

.condition input,
.condition .limit {
    width: 50px;
}

.hide {
    display: none !important;
}

.hidealways {
    display: none !important;
}

.choose.hide,
button.hide {
    display: none !important;
}



button {

    border-radius: 50px;
    padding: 0.5em 1em;
    margin: 0.5em;
    /*font-size: 0.8em;*/
    /*text-transform: uppercase;*/
    font-size: 0.95em;
    letter-spacing: var(--letterspacing);
    cursor: pointer;
    transition: 0.2s ease;
    border: 1px solid;
    /* opacity: 0.57; */
    color: var(--forecolor);
    background-color: transparent;
    /*text-transform: inherit;*/
}

button:hover {
    /*background-color: var(--primarycolor);*/
    border-color: var(--primarycolor);
    box-shadow: 0 0 4px var(--primarycolor);
    background-color: var(--forecolor);
    color: var(--backcolor);
    opacity: 1;
}

button.primary {
    border: 2px solid !important;
    /* color: var(--primarycolor); */
    white-space: nowrap;
}

button i {
    vertical-align: middle;
    margin-right: 3px;
}

#outside {
    border-radius: 2em;
    width: 420px;
    height: 640px;
    padding: 0;
    overflow: hidden;
    resize: both;
}

dialog iframe {
    height: 100%;
    width: 100%;
    border: 0;

}

dialog {
    display: none;

    /* user agent style */
    opacity: 0;
    translate: 0 25vh;
    transition-property: overlay display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
}

[popover] {
    display: none;
    /* user agent style */
    opacity: 0;
    translate: 0 -1vh;
    transition-property: opacity, transform;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
    background-color: var(--backbase);
}

[popover]:popover-open {
    display: block;
    /* user agent style */
    opacity: 1;
    translate: 0 0;
    transition: 0.5s;

    @starting-style {
        opacity: 0;
        translate: 0 1vh;
    }
}

dialog::backdrop {
    transition-property: opacity display overlay;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
    opacity: 0;
    /* background-image: linear-gradient(45deg, red, blue); */
    /* background-color: var(--primarycolor); */
    background-image: var(--backgradient);
}

dialog[open]::backdrop {
    opacity: 0.75;
}

@starting-style {
    dialog[open]::backdrop {
        opacity: 0;
    }
}

dialog[open] {
    display: block;
    /* user agent style */
    opacity: 1;
    translate: 0 0;

    @starting-style {
        opacity: 0;
        translate: 0 -25vh;
    }
}

/*dialog {
    background-color: var(--backcolor);
    color: var(--forecolor);
    z-index: 1;
    padding: 3em;
    border-radius: 2em;
    opacity: 0;
    transition: all 0.3s allow-discrete;
}

    dialog[open] {
        opacity: 1;
    }

::backdrop {*/
/*background-image: linear-gradient( 45deg, magenta, rebeccapurple, dodgerblue, green );*/
/*opacity: 0.75;*/
/*opacity: 0.85;
}

@starting-style {
    dialog[open] {
        opacity: 0;
    }
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0);*/
/*background-image: linear-gradient(45deg, #680f68, rebeccapurple, dodgerblue, #001380);*/
/*transition: all 0.3s allow-discrete;
}

dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

@starting-style {
    dialog[open]::backdrop {
        background-color: rgba(0, 0, 0, 0);
    }
}*/



.group {
    /*display: none;*/
    flex-flow: column;
    padding: 0 0.3em 1em 0.8em;
    padding: 0 0.2em 1em;
    border: var(--border);
    overflow: hidden;
    /*break-inside:avoid-column;*/
}

/*.group.graph{
        display:block;
    }
*/
.group:has(.scripinfo.filter) {
    display: grid;
}

.group:has(.group) {
    border: 0 !important;
    gap: 1em;
    display: flex !important;
    flex-flow: row;
    position: relative;
    padding: 2em 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.group:has(.group.graph) {
    display: grid !important;
}

.group .group {
    min-width: 160px;
}

.multi:has(.multi) {
    display: block !important;
    overflow: initial !important;
}

.multi:has(.card) {
    display: grid !important;
}

.card .group {
    margin-bottom: 2em;
}


.bracket {
    display: flex;
    /* border:1px solid; */
    /* box-shadow: inset 0 0 2px #6666; */
    /* padding: 0.5em; */
    background-color: #9991;
    border-radius: 1em;
    border: 0;
    border-left: 3px solid;
    border-right: 3px solid;
    padding: 0 5px;
}



a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.scripinfo:hover a.symbol {
    text-decoration: underline;
    /*color:var(--primarycolor);*/
    /*text-decoration-style:dashed;*/
    /*text-decoration: 2px solid underline red;*/
    /*border-bottom:1px dashed*/
}

/*a.symbol{
    font-weight:900;
}*/

.card a.symbol {
    /*font-size: 1.3em;*/
    /*font-size: 1.15em;*/
    /*font-size: 1.1em;*/
    line-height: 1.36;
    font-weight: 800;
    /*font-weight: calc(var(--size) * 100 * 2 );*/
}




.menu,
.toolbar {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--backbase);
    position: sticky;
    top: 0;
    z-index: 11;
    /*padding: 0.3em 0 1.5em 0;*/
    padding: 0.5em 0 1.2em 0;
    gap: 7px 4px;
    justify-content: center;

}

.justify-center {
    justify-content: center;
}

.menu:hover {
    z-index: 20;
}

.toolbar .dropbtn {
    /* border-radius: var(--radiusbig); */
    border-color: transparent;
    /* border: var(--border); */
    /*width:100%;*/
    /*background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAATElEQVR42mNgGAUjESQkJNxPTExMRxaLj4/PBIpdI9oQoIZoIP4N0ggzAGjwDyAOIMk1QI1+UI3Lgfg7iE+Wt6AGPQN6w2k0kocqAACBVh7PrOYBvAAAAABJRU5ErkJggg==") right center no-repeat;*/
    background: right center no-repeat;
    margin: 5px 3px;
    background-color: #8881;
    /* padding: 0.6em; */
    /* padding: 0.6em 0.6em 0.6em 1em; */
    padding: 0.35em 0.77em;
    line-height: 1.1;
    /*padding: 0.8em;*/
    padding-right: 17px;
    /* border-width: 2px; */
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 1px;
}

/*.toolbar > div:hover button.dropbtn {
    border-color: inherit;
    background-color: var(--backmenu);
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAATElEQVR42mNgGAUjESQkJNxPTExMRxaLj4/PBIpdI9oQoIZoIP4N0ggzAGjwDyAOIMk1QI1+UI3Lgfg7iE+Wt6AGPQN6w2k0kocqAACBVh7PrOYBvAAAAABJRU5ErkJggg==");
}
*/
.toolbar .dropbtn:hover,
.toolbar .dropbtn.active {
    /* */

    border-color: inherit;
    background-color: var(--backmenu);
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAATElEQVR42mNgGAUjESQkJNxPTExMRxaLj4/PBIpdI9oQoIZoIP4N0ggzAGjwDyAOIMk1QI1+UI3Lgfg7iE+Wt6AGPQN6w2k0kocqAACBVh7PrOYBvAAAAABJRU5ErkJggg==");
}

.toolbar .dropbtn:has(select) {
    padding: 0;
    margin-right: 1em;
}

/* if any fav is selected .. then dont show text val */
/*.toolbar .drop:has(.favs .selected) .dropbtn span {    
    display: none;
}

.toolbar .drop:has(.favs) .dropbtn span {
    display: inline-block;
}
*/

.toolbar button {
    position: relative;
    /*transition: 0.3s;*/
}

button .star {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    font-size: 18px;
    margin: 3px;
    transform: scale(0.1);
    opacity: 0.1;
    transition: 0.3s;
    display: none;
    font-style: normal;
}

button:hover .star {
    transform: scale(1);
    opacity: 1;
}

button .star:hover {
    color: var(--highlight);
}

.star.yes {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.star.yes:before {
    content: "★"
}

.star.no:before {
    content: "☆"
}


.listholder {
    padding-left: 0.5em;
    font-weight: bold;
    /*font-size: var(--fontlarge);*/
    max-width: 250px;
    margin: 0px;
}


.inline.flex {
    align-items: self-end;
}

.toolbar .inline h3 {
    display: inline-block;
}

.toolbar .inline .buttonlist {
    display: inline-block;
}

.menu>div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu>div>div {
    position: absolute;
    top: 120%;
    background-color: var(--backmenu);
    border: 1px solid;
    padding: 1em 2em 2em;
    margin: 0;
    z-index: -1;
    transition: 0.3s;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    border-radius: 1em;
    scrollbar-width: thin;
    width: 100%;
    min-width: 320px;
}

.menu>div.rightside>div {
    right: 0;
    left: initial;
}

.dropbox .drop {
    display: none;
}

/*.menu .dropbtn:hover ~ div*/

.dropbox:has(input:focus)>div,
.menu>div:hover>div {
    display: block;
    transform: translateY(-10px);
    opacity: 1;
    visibility: visible;
    z-index: 100;
}


.dropdown.pinned {
    display: flex;
    /* flex-basis: 100%; */
    flex-grow: 1;
    order: 10;
    border: var(--border);
    border-radius: var(--radiusbig);
    background-color: var(--backtwin);
}

.dropdown.pinned>div {
    flex-basis: 100%;
    position: static !important;
    opacity: 1;
    visibility: visible;
    display: flex;
    transform: none;
    transition: none;
    border: 0;
    height: auto;
    padding: 0.6em 0.6em 0;
    margin-bottom: 0;
    z-index: 0;
    background-color: transparent;
    /* border-top: var(--border); */
    border-radius: 0;

}

.dropdown.pinned>.dropbtn {
    display: none;
}



.dropbox .group {
    border: 0;
    padding: 0;
}

.dropdown {
    display: flex;
    justify-content: center;
}

/*.buttonlist {
    display: flex;
    flex-wrap: wrap;
}*/
.drops {
    background-color: var(--backmenu);
    margin: 0.5em 0;
    padding: 0.1em 0.6em 2em 2em;
    border-radius: var(--radiusbig);
    min-width: 300px;
    /* width: 375px; */
    width: 320px;
    max-height: 70vh;
    scrollbar-width: thin;
    /*display:flex;*/
    /*border:1px solid;*/
}

.drops button {
    text-decoration: none;
    /*border-radius: 9px;*/
    /* border-radius: var(--radiusbig); */
    transition: 0.15s;
    /*line-height: var(--linemid);*/
    border: var(--border);
    padding: 0.6em;
    /*margin: 5px;*/
    margin: 5px;
    /*margin-bottom: 1px;*/
    /*text-align: left;*/
    font-size: 0.9em;
    /*text-transform: capitalize;*/
    line-height: var(--linesmall);
}

button.selected {
    font-weight: bold !important;
    background-color: var(--selectcolor);
    /*background-color: var(--selectbackcolor);
    color: var(--selectforecolor);*/
    border-color: inherit !important;
}



/*.toolbar .choose {
    display: flex;
    flex-wrap: wrap;   
}
*/


.buttonlist button {
    /*border: 1px solid #9993;*/
    border: var(--border);
    margin: 4px;
    display: inline-block;
    display: inline-flex;
    text-align: center;
    /*font-size: 0.8em;*/
    min-width: 30px;
    /*flex-grow: 1;*/
    line-height: 1;
}

/*.iconlist button {
    padding: 0.35em 0.2em;
}
*/
.iconlist i {
    font-size: 2em;
    display: block;
}

span.multicheck {
    text-transform: lowercase;
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.8em;
    margin-left: 1em;
    letter-spacing: var(--letterspacing);
    cursor: pointer;
}

/* .mini {
    font-size: 0.85em;
} */

/* .micro {
    font-size: 0.75em;
} */

.quote {
    /* display: none !important; */
    font-size: 0.8em;
    margin: 0 0em 0 0em;
    /* text-align: center; */
    min-width: 150px;
    text-align: left;
}

.quote .xdate {
    /* display: block; */
    margin: 2px;
}

.mini button {
    font-size: 0.85em;
    /*padding: 3px 5px;*/
    /*padding: 0px 6px;*/
    margin: 3px 3px;
    /* padding: 0.6em 0.2em; */
    /* line-height: 0.8; */
    /* border-radius: var(--radiusbig); */
}

.micro button {
    font-size: 0.75em;
    border: var(--border);
    margin: 5px;
}

/*.menu .iconlist {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(70px, 1fr) );
}
*/
.menu .iconlist.big {
    font-size: 1.2em;
    line-height: 2;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.4em 0.8em;
}

.toolbar h3 {
    /*    grid-column: 1/-1;
    flex-basis: 100%;*/
    line-height: 1;
    display: block;
    /*text-transform: uppercase;*/
    font-size: 1em;
    padding: 0.6em 0.3em;
    font-weight: bold;
    /* margin: 0; */
    margin: 1.5em 0.35em 0.1em;
    color: var(--forecolor);
    /*grid-column: 1 /-1;*/
    /*letter-spacing:1px;*/

}

.toolbar .grp h3 {
    margin-top: 0.7em;
}

.toolbar i {
    vertical-align: middle;
    /* margin: -2px 2px 0 0; */
    margin: -2px 5px 0 0;
    /* font-weight: bold; */
    /* font-size: 32px;
    font-size: 20px; */
    font-size: 18px;
    /*color:#92c*/
}

.toolbar button:hover {
    background-color: var(--hovercolor);
    color: var(--forecolor);
    border-color: inherit;
    /*box-shadow:0 0 2px inherit;*/
    /*background-color: var(--primarycolor);
    color:#fff;*/
}

.checklist button {
    display: flex;
    gap: 4px;
    border: 0;
    border-bottom: var(--border);
    border-radius: 2px;
    margin: 1px;
    padding: 0.3em;
    width: 100%;
    white-space: nowrap;
    /*line-height: 1;*/
}

.checklist button>span {
    width: 110px;
    /* margin-right: 5px; */
    text-align: left;
}

.taller button {
    line-height: var(--linemid);
}


.grp {
    display: none;
    padding: 0.5em 0;
    flex-wrap: wrap;
    align-content: flex-start;
}

.grp:before {
    content: attr(data-head);
    /*font-weight: bold;*/
    /* text-transform: uppercase; */
    font-size: 0.85em;
    letter-spacing: var(--letterspacing);
    flex-grow: 1;
    width: 100%;
    display: block;
    padding: 6px;
    line-height: 1.36;
}

.grp:has(button:not(.hide)) {
    display: flex;
    /* display: initial; */
    /* width: 200px;
    max-width: 360px; */
}

/* .grp:has(button.filter) {
    display: flex;
} */

/*.buttonlist:before, .checklist:before {
    content: attr(data-heading);
    display: block;
    width: 100%;
    margin: 5px;
    margin-top: 1.6em;
    text-transform: uppercase;
    font-weight: bold;
    opacity: var(--header-opacity);
}
*/


.checklist button:before {
    display: none;
    border: 1px solid rgba(120, 120, 120, 0.5);
    /*background-color: rgba(180,180,180,0.2);*/
    content: ' ';
    line-height: 1;
    padding: 1px;
    margin: 1px 10px 2px 0;
    text-align: center;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    border-radius: 2px;
}

.multi.checklist button:before {
    display: inline-block;
}

.checklist button.selected:before {
    content: "\2713";
}

.checklist button.selected:after {
    font-weight: bold;
    opacity: 1;
}



/*.choose.checklist  a.selected:before {
    content: "";
}*/

.checklist [data-keyboard] {
    min-width: 160px;
}

/*.checklist b{
    font-weight:bold;
    border:0;
    text-decoration:none;
}*/
[data-keyboard] {
    position: relative;
    min-width: 16px;
    /*margin: 2px 8px;*/
    /*display:inline-block;*/
}

.checklist [data-keyboard]::after {
    content: attr(data-keyboard);
    /*font-weight: bold;*/
    text-transform: capitalize;
    position: absolute;
    right: 20px;
    /*left:125px;*/
    padding: 4px;
    margin: -1px;
    line-height: 1;
    font-size: 12px;
    min-width: 22px;
    text-align: center;
    display: inline-block;
    border: 1px solid rgba(180, 180, 180, 0.5);
    border-radius: 4px;
    /*letter-spacing: -0.5px;*/
    opacity: 0.5;
    transition: 0.2s ease all;
    /*background-color:rgba(180,180,180,0.2);
    border-radius:50px;*/
}

[data-keyboard]:hover:after {
    opacity: 1;
    box-shadow: inset 0 -1px 0px #aaa;
}


iconlist i {
    display: block;
}


/*.inview {
    background-color:#fe91;
}*/

/*.highcharts-tooltip{
    transition:0.15s;
}*/

.centerscreen {
    display: grid;
    justify-content: center;
}


#logo img {
    width: 100px;
    min-width: 70px;
    margin: 5px;
}


.tags {
    /*display: flex;*/
    /*flex-wrap:wrap;*/
    /*min-height: 30px;*/
    font-size: 0.7rem;
    order: 4;
    /*gap: 2px 4px;*/
}

.tags i {
    display: inline-block;
    border: 1px solid;
    padding: 0 2px;
    margin: 2px 2px;
    border-radius: 4px;
}

/*.card .scripinfo[data-tags]:after{
    content:attr(data-tags);
    font-size:0.7em;
}*/


#splashscreen {
    /*background-color: #74499c;*/
    /*background-color: #638;*/
    background-color: var(--backmenu);
    /*background-image: linear-gradient(0deg, #baa7ee 0%, #8a1fc2 50%, #450567 100%);*/
    /*background-image: linear-gradient(0deg, #986ba8 0%, #672295 50%, #313 100%);*/
    /* background-image: linear-gradient(0deg, #8951f4 0%, #6a3ba8 50%, #240059 100%); */
    background-image: var(--backgradient);
    /*color: #fff;*/
    transition: 0.5s all ease-in-out;
    z-index: 9000;
    text-align: center;
    display: grid;
    justify-content: center;
    align-content: center;
}

#splashscreen img {

    margin-top: -5vh;
    /*width: 50vw;*/
    width: clamp(500px, 66vw, 66vh);
}

#logo.fullwindow {
    display: grid;
    margin-top: -2em;
    align-content: center;
    z-index: 10000 !important;
}

#logo.fullwindow img {
    width: 50%;
    margin: 0 auto;
}

#splashscreen.remove {
    transform: scale(1.2);
    opacity: 0;
    z-index: -10000;
}

.fullwindow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}


.loading {
    min-width: 24px;
    min-height: 24px;
    /*width: 100%;
    height: 100%;*/
    /*background: url(images/dots-white.gif) no-repeat 50% 50%;*/
    background: url(images/loading-small.gif) no-repeat 50% 50%;
    /*background: url(images/preload.gif) no-repeat 50% 50%;*/
}

.dark .loading {
    /*background-color: #000;*/
    background: url(images/dots-white.gif) no-repeat 50% 50%;
    /*background-image: url(images/ajax-loader.gif);*/
    /*background-image: url(images/preloaddark.gif);*/
}

.list .loading {
    background: url(images/dots-white.gif) no-repeat 50% 50%;
}

.xdate {
    font-size: 0.8em;
    opacity: 0.3;
}

.percent:after,
.pct:after,
.times:after,
.ratio:after,
.level:after,
.volume_turnover:after,
.cr:after {
    font-size: 10px;
    font-weight: normal;
    margin-left: 2px;
    font-family: initial;
    opacity: 0.6;
}

.ratio:after {
    content: '%';
}

.percent:after,
.pct:after,
.level:after {
    content: '%';
}

.times:after {
    content: 'x';
}

.cr:after,
.volume_turnover::after {
    content: 'cr';
}


.graphed {
    /*border-radius:4px;*/
    /*padding-left: 3px;*/
    padding-left: 0.3em;
    white-space: nowrap;
    color: var(--forecolor) !important;
}

.sign {
    white-space: nowrap;
}

.scripinfo .blank {
    flex-grow: 1;
    flex-basis: 100%;
}



/*table {
    font-size: 0.9em;
    white-space: nowrap;
    width: 100%;
    table-layout: fixed;
}
    tbody{
    display:inline-block;
}

td {*/
/*font-size: 0.8em;*/
/*padding: 2px;
    border-bottom: var(--border);
}

tr:hover {
    background-color: var(--hovercolor);*/
/*transition:0.1s;*/
/*}

td.blank {
    display: none;
}*/


.card .subgrp {
    display: none;
    gap: 0.25em;
}

.single.scripinfo .symbol {
    width: auto;
}

/* .card .single .subgrp, */
.card .subgrp.price {
    display: flex;
}

/* .single .sparks {
    order: -1;
} */

.mytip {
    font-size: 1.1em;
    letter-spacing: -0.2px;
}

.mytip .scripfull {
    /* border-bottom: 1px solid; */
    flex-basis: 100%;
    font-size: 0.75em;
    /* opacity: 0.65; */
    margin-bottom: 5px;
    white-space: nowrap;
    /* line-height: 1.5; */
    order: -3;
}



.mytip.card .subgrp {
    display: flex;
    /*flex-wrap:wrap;*/
    margin: 1px;
    gap: 0 2px;
}

/* .single .subgrp::before, */
.mytip .subgrp::before {
    content: attr(data-fieldgrp) ": ";
    margin-right: 5px;
}

.mytip .subgrp.price::before,
.single .subgrp.price::before {
    content: "";
    margin-right: 0;
}

.mytip .subgrp.price {
    font-size: 1.1em;
    font-weight: bold;
    margin: 3px;
    margin-left: -2px;
    flex-wrap: wrap;
}

.mytip .price.value {
    font-weight: 800;
    font-size: 2em;
    width: 100%;
    line-height: 1;
    margin: 2px;
    margin-top: 3px;
}

.mytip .sparks {
    order: -2;
    margin-bottom: 0.5em;
    height: 120px;
}


.highcharts-tooltip {
    transition: 0.05s ease;
}

.volume,
.volume .tag {
    color: #06c;
    /* color: #039; */
}

.delivery,
.delivery .tag {
    color: #94c;
    /* color: #509; */
}

.mktcap {
    color: #c90;
}

/*.volume.dn, .delivery.dn {*/
/*color: inherit;*/
/*opacity:0.35;*/
/*}*/



#mytip {
    /*display: none;*/
    position: fixed;
    /*background: #fffce0;*/
    background-color: var(--backbase);
    background: linear-gradient(180deg, #fff 0%, rgba(255, 246, 228, 1) 80%, #fe9 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0px 100px rgba(150, 150, 150, 0.2);
    /*padding: 1em;*/
    /*width: auto;*/
    min-width: 180px;
    max-width: 250px;
    width: 200px;
    height: auto;
    margin: 0 auto;
    padding: 2em;
    z-index: -1;
    overflow: hidden;
    transition: 0.3s ease-out;
    opacity: 0;
    visibility: hidden;
    border-radius: 1em;
    color: black;
}

#mytip.show {
    /*display:block;*/
    opacity: 1;
    z-index: 1000;
    visibility: visible;
    z-index: 10000;
}




.topright {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
}

.buttonlist.topright {
    /* margin: 1em; */
}


.actionset button {


    width: auto;
    display: inline-block;
    padding: 0.5em;
    margin: 0.3em 0.3em;
    border-radius: var(--radius);
    border: 1px solid !important;
    box-shadow: var(--shadow);
}

.actionset button i {
    line-height: 1.2;
    font-size: 24px;
    display: block;
}

.actionset button:hover {
    color: var(--backbase);
    background-color: var(--forecolor);
}

.topleft {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.margin5 {
    margin: 5px
}

.margin10 {
    margin: 10px
}

.margin20 {
    margin: 20px
}

.addtowatch {
    position: absolute;
    top: 0;
}

.list .addtowatch {
    right: 100%;
}

.card .addtowatch {
    /*right: 0;*/
    /*right: 100%;*/
    right: inherit;
    left: 0;
    margin: -0.3em;
}


.addtowatch {
    transition: 0.3s;
    padding: 5px;
    /*margin: 15px;*/
    line-height: 10px;
    opacity: 0.1;
    transform: scale(0.1);
    z-index: 10000;
}

.scripinfo:hover .addtowatch {
    opacity: 1;
    transform: scale(1);
}

.bold {
    font-weight: bold;
}

#btn_scrip.dropbtn {
    font-weight: 900;
    /* font-size: 1.15em; */
    font-size: var(--fontlarge);
    line-height: 0.8;
    /* line-height: 0.9; */
    /*font-size: 1.1em;
    line-height: 0.5;*/
    letter-spacing: 0.5px;
    /*padding:0;*/
    border: 1px solid;
    min-width: 200px;
    padding-right: 10px;
    /*text-align: left;*/
    margin-right: 1em;
    margin-left: 0.5em;
    /*text-align:left;*/
    /*white-space:normal;
    overflow:hidden*/
}

#btn_scrip .xtra {
    display: block;
    font-size: 12px;
    /*margin-top: 7px;*/
    /*margin-bottom: -2px;*/
    font-weight: normal;
    font-style: normal;

}

/* button .xtra {
    margin-left: 5px;
} */

.widget #btn_scrip.dropbtn {
    font-weight: normal;
    padding: 0 1em !important;
    min-width: 100px;
    margin-right: 0em;
    font-size: 0.9em;
    background-color: #9993;
    border: 0;
}

#btn_name {
    display: none;
}




/* 
[data-title] {
    position: relative !important;
}

[data-title]::before {
    font-size: 0.9rem;
    display: inline-block;
    position: absolute;
    content: attr(data-title) !important;
    text-transform: capitalize;
    top: -37px;
    /*bottom: 30px;*/
left: 50%;
padding: 1px 8px;
text-align: center;
/*min-width:50px;*/
white-space: nowrap;
width: auto;
height: auto;
border-radius: 4px;
/*background-color: #136;
        color: #fff;*/
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 4px rgba(150, 150, 150, 0.3);
/*background-color: #fe9;
        color: #111;*/
background-color: #111;
color: #fff;
text-indent: 0;
line-height: 22px;
min-height: 22px;
opacity: 0;
visibility: hidden;
/*display: none;*/
/*-webkit-transform: translateX(-50%) translateY(-50%);*/
transform: translateX(-50%) translateY(10%);
/*-webkit-transition: -webkit-transform 0.1s ease, opacity 0.1s ease, visibility 0s 0.1s ease;
        transition: transform 0.1s ease, opacity 0.1s ease, visibility 0s 0.1s ease;*/
/*transition: all 0.3s ease-in-out;*/
-webkit-backface-visibility: hidden;
}

[data-title]::after {
    position: absolute;
    left: 60%;
    margin-left: -10%;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 8px;
    border-color: transparent;
    /*border-bottom-color: #136;*/
    /*border-bottom-color: #fe9;*/
    border-top-color: #111;
    content: '';
    opacity: 0;
    visibility: hidden;
    /*display: none;*/
    pointer-events: none;
    top: -12px;
    /*bottom: 15px;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*-webkit-transform: translateX(-50%) translateY(-50%);*/
    transform: translateX(-50%) translateY(15%);
    /*-webkit-transition: -webkit-transform 0.1s ease, opacity 0.1s ease, visibility 0s 0.1s ease;
        transition: transform 0.1s ease, opacity 0.1s ease, visibility 0s 0.1s ease;*/
    /*transition: all 0.2s ease-in-out;*/
    -webkit-backface-visibility: hidden;
}

[data-title]:hover::before,
[data-title]:hover::after {
    z-index: 10001;
    visibility: visible;
    opacity: 1;
    /*display: inline;*/
    transform: translateX(-50%) translateY(-0%);
    transition: all 0.3s ease-in-out;
}

*/ #filterset {
    display: flex;
    flex-wrap: wrap;
}

.pinned #filterset {
    display: flex;
    flex-wrap: nowrap;
}

.pinned .actionset {
    margin-right: 1em !important;
}

.pinned #filterset .grp {
    /* width: 200px; */
    max-width: 360px;
    line-height: 0.618;
}

.pinned #filterset button {

    line-height: 0.618;
}

.pinned .choose {
    /* margin-top: 0.5em; */
    flex-wrap: wrap;
    display: flex;
    align-content: flex-start;
    /* justify-content: center; */
}

.pinned button i {
    display: inline-block;
    line-height: 0.6;
}

.pinned button i~span {
    display: none;

}

.pinned button,
.pinned input {
    margin: 2px;
    /* line-height: 0.618; */
    font-size: 0.8em;
    white-space: nowrap;
    transition: none !important;
    border: var(--border);
    display: inline-block;
    border-radius: var(--radiusbig);
    width: auto;
    /* text-transform: capitalize; */
}

/* .pinned .grp::before {
    display: none;
} */

.pinned .buttonlist {
    margin: 0px;
    /* margin-right: 2em; */
    /* position: static; */
    /* background-color: var(--backbase); */
}

.subset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}


.pinned .choose h3 {
    /* display: none; */
    display: inline-block;

    /* line-height: 0; */
    font-size: 0.85em;
    margin: auto 1.5em;
    /* margin-right: 1em; */
}

.pinned .dropbox {
    display: none;
}

/* .pinned .choose h3::after {
    content: ":";
} */


nav.menu {
    /*  display: flex;
    z-index: 10 !important;*/
    /*padding: 0 !important;*/
    margin: 0 auto;
    /*padding: 1em 0 0.5em !important;*/
    padding: 0.75em 0 0.15em !important;
    /*max-width: 800px;*/
    /*align-items: center;*/
    flex-wrap: nowrap;
}

/*nav > div {
        flex-grow: 1;
    }*/

.nogrow {
    flex-grow: 0;
}

.noborder {
    border: 0;
}

button.noborder {
    border: 0 !important;
}

.toggle-auth {
    font-size: 0.85em;
    margin: 1em;
    cursor: pointer;
}

.toggle-auth:hover {
    color: var(--primarycolor);
}

form label {
    display: block;
    margin: 10px 2px 2px;
}


h2.small-title {
    /*color:var(--highlight);*/
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 2px solid;
    margin-bottom: 1.5em;
    line-height: 1.4;
}

p.favs {
    margin: 0;
    padding: 0;
    display: flex;
    /*display:none;*/
    /*border-bottom: var(--border);*/
    /*background-color:#4444;*/
}

.favs button {
    border: 0;
    border: var(--border);
    /* border: 1px solid transparent;
    border-right: var(--border); */
    /*padding: 0.2em 10px;*/
    padding: 0.15em 10px;
    margin: 5px 3px;
    /*background-color: #ccc3;*/
    /*margin: 0 0.3em;*/
    /*min-width:70px;*/
    /*    margin: 4px -1px 4px 0;
    border-radius: 1px;*/

    /* border-radius: 4px; */
    border-radius: var(--radiusbig);
    line-height: 1;
    /*margin: 0.5em 13px;*/
    /*border-color:var(--selectcolor);*/
    white-space: nowrap;
    /*    overflow: hidden;*/
    /*padding: 5px;*/
    /*width: 32px;*/
}

.favs button:hover {
    /* border-radius: 2em; */
}

.favs button.selected {
    /* border-bottom: 2px solid !important; */
    /* border-radius: 0; */
    /* border-radius: 2em; */
    background-color: transparent;
}

.favs span {
    /*display: none;*/
    font-size: 0.85em;
}

.favs button:has(i) span {
    /*display: none;*/
    /*opacity: var(--lessopacity);*/
    /*font-size: 0.85em;*/
}

.favs .star {
    /*display: none;*/
}

.favs i {
    /*margin-right: -3px;*/
    /*margin-top:-3px;*/
    display: block;
    /*display: none;*/
    /*font-size: 24px;*/
    /*font-size: 22px;*/
    /*font-size: 32px;*/
    font-size: 28px;
    /*font-size: 25px;*/
    /*font-weight:bold;*/
}

/* #btn_view {
    display: none !important;
} */

#_view .favs .selected span {
    display: inline-block;
    opacity: 1;
}



#_blank {
    /* display: none; */
    visibility: hidden;
    order: 3;
    height: 0;
    flex-basis: 100%;
    border-top: 1px solid;
}

#btn_blank {
    display: none;
}

/*.choose[data-name='name']{
    display:none
}*/

#_scrip:has(.favs button) {
    flex-basis: 100%;
    /*order: -1;*/
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    justify-content: flex-start;
}

#_scrip:has(.favs button):hover {
    overflow-x: auto;
}

/* .overflow-x,
.overflow-y {
    scrollbar-gutter: stable;
    scrollbar-width: none;
    scroll-behavior: smooth;
    
}

.overflow-x:hover {
    overflow-x: auto;
    scrollbar-width: thin;
}

.overflow-y:hover {
    overflow-y: auto;
    scrollbar-width: thin;
}

*/

#_others {
    order: 2;
}

button#_ span:before {
    content: "none";
}

#_name {
    display: none;
    margin-right: 2em;
}


/*#_name:has(.favs button) {
    flex-basis: 100%;
    justify-content:center;
 
}
*/
/*#_name > button {
    display:none;
}*/
/*#_name .favs button {*/
/*border: 0;*/
/*margin: 2px 4px;
    box-shadow: none;*/
/*border-radius: 0px;*/
/*white-space: nowrap;
    padding: 6px 8px;
    line-height: 1;
    width: auto;
    font-size: 1.135em;*/
/*font-size: 1.35em;*/
/*font-weight: 100;
}*/
/*#_name .favs span {
    display:none;
    font-size:0.7em;
}*/
/*#_name .favs .selected span {

}
*/
/*
#_view .favs {
    order: -1;
}
*/
/*#_view .favs button {
   
    margin: 4px -1px 4px 0;
    border-radius: 1px;
}
*/
/*#_view{
    min-width:300px;
}*/


/*
section .scripinfo:nth-child(odd){
    background-color:#5555;
}*/

/* .grid {
    display: grid;
} */

.center {
    text-align: center;
}





#ticker {
    border-radius: 2em;
    padding: 1em;
    border: 2px solid;
    position: fixed;
    width: clamp(360px, 90vw, 760px);
    height: clamp(420px, 90vh, 600px);
    margin: auto;
    /* box-shadow: 0 0 100px 1000px #fffe; */
    /* box-shadow: 0px -200px 20px 100px #fffe; */
    box-shadow: 0px 0px 100px #9992;
    /*min-width: 60vw;*/
    /*z-index: 100;*/
    /*position:absolute;*/
    /* display: flex;
    flex-flow: column; */
    resize: both;
    scrollbar-width: none;
}

#ticker header {
    /* flex-flow: row; */
    justify-content: flex-start;
}

#ticker>section {
    height: calc(100% - 70px);
    /* flex-grow: 1; */
}




#toast-container {
    position: fixed;
    /*top: 20px;
    right: 20px;*/
    z-index: 1000;
    top: 20px;
    right: 40%;

}

.toast {
    border: 1px solid;
    /*background: #333;
    color: white;*/
    padding: 1em;
    font-size: 1.35em;
    line-height: 2;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.5s;
    text-align: center;
}

.toast.show {
    opacity: 1;
}

.toast-notification {
    /*background-color: #3498db;*/
    background-color: #fd6;
}

.toast-warning {
    background-color: #f39c12;
}

.toast-alert {
    background-color: #e74c3c;
}

.toast-error {
    background-color: #c0392b;
}

.toast-success {
    background-color: #2ecc71;
}


table {
    table-layout: fixed;
    width: 100%;
}


.selectable {
    font-size: var(--fontsmall);
    /*line-height: var(--linesmall);*/
    border-bottom: 1px solid #ccc6;
    padding: 0.5em;
    letter-spacing: 1px;
    /* font-family: monospace; */
}

.selectable.chosen,
.selectable:hover {
    background-color: var(--highlight);
}



.ohlc b {
    font-size: 13px;
    font-weight: normal;
    position: absolute;
    display: inline-block;
    /* top: 25%;
    height: 50%;*/
    height: 100%;
    /*color: transparent;*/
    box-sizing: border-box;
    line-height: 0.8;
    /*text-align: center;*/
    padding: 2px;
    /*border-radius:2px;*/
}

.ohlc,
.ohlcinfo {
    position: relative;
    height: 1em;
    width: 90%;
    max-width: 100px;
    margin: auto;
    /*min-height:16px;*/
}

.ohlc:before {
    content: '';
    width: calc(100% - 2px);
    display: block;
    position: absolute;
    top: 49%;
    left: 1px;
    height: 0px;
    border-top: 1px solid;
    /*height: 1px;
        background-color: #0b06;*/
}

.ohlc.dn:before {
    background-color: #f446;
}

.heads .ohlc:before {
    border-top: 0 !important;
}

.ohlcinfo {
    position: relative;
    padding: 0 5px;
    text-align: center;
}

.ohlcinfo::before,
.ohlcinfo::after,
.ohlcinfo b::before,
.ohlcinfo b::after {
    line-height: 1;
    font-size: 13px;
    border-radius: 2px;
    padding: 1px 4px;
    position: absolute;
    top: 25%;
    color: #fff;
    /*transition: 0.5s;*/
    background-color: #247;
    z-index: 1;
}

.ohlcinfo:hover::before {
    right: 100%;
    background-color: #e43;
    content: 'Lo: ' attr(data-low);
}

.ohlcinfo:hover::after {
    left: 100%;
    background-color: #3b2;
    content: 'Hi: ' attr(data-high);
}


.ohlcinfo:hover b::before {
    top: 110%;
    content: 'Cl: ' attr(data-close);
    /*right: 0;*/
    left: 100%;
}

.ohlcinfo:hover b::after {
    bottom: 110%;
    content: 'Op: ' attr(data-open);
    top: auto;
    /*left: 0;*/
    right: 100%;
}

.ohlcinfo.dn:hover b::before {
    right: 100%;
    left: auto;
}

.ohlcinfo.dn:hover b::after {
    right: auto;
    left: 100%;
}

.ohlc>i {
    display: none;
}

.links {
    /*min-width:300px;*/
    /* margin: 0 2em; */
    /* margin: 0 2%; */
    margin: 0 1.5em;
    /* display: none !important; */
}

.links a i {
    display: block;
    border-radius: var(--radiusbig);
    display: none;
    /* font-size: 24px;
    font-size: 26px; */
    font-size: 32px;
    font-weight: inherit;
    line-height: 1.15;
    /* line-height: 1.3; */
    margin-right: 1px;

}

.links a {
    /* margin: 6px; */
    margin: 0.3em 0.6em;
    /* padding: 0.3em 0.4em; */
    padding: 0.3em 0.25em;
    /* padding: 0 0.5em; */
    /*display: inline-flex;*/
    /*font-size: 1.15em;
        font-size: 1.618em;
        font-size: 1.35em;
    
        font-size: 1.2em;*/
    /* font-size: 0.95em; */
    /* font-size: 1.15em; */
    font-size: 1.08em;
    /* font-size: var(--fontlarge); */

    line-height: 1.1;
    font-weight: 100;
    letter-spacing: 0.3px;
    /* opacity: 0.35; */
    text-align: center;
    /*transition:0.05s;*/
}

.links a.selected {
    opacity: 1;
    font-weight: bold;
    /* border-bottom: 2px solid #9993; */
    border-bottom: 1px solid;
    letter-spacing: normal;
}

.icononly i {
    display: block !important;
    font-size: 36px !important;
    line-height: 0.2 !important;
}

.icononly {
    border-bottom: 0 !important;
}

/*#_scans i, .links [href="#scans"] i {
        transform: rotate(90deg);
    }*/


[data-h="0"] {
    --h: 0;
}

[data-h="1"] {
    --h: 1;
}

[data-h="2"] {
    --h: 2;
}

[data-h="3"] {
    --h: 3;
}

[data-w="0"] {
    --w: 0;
}

[data-w="1"] {
    --w: 1;
}

[data-w="2"] {
    --w: 2;
}

[data-w="3"] {
    --w: 3;
}



.widget {
    border: var(--border);
    flex-grow: 1;
    width: 30%;
    min-width: 300px;
    /*min-width: 30%;*/
    /*height: 40vh;*/
    /*height: 20vh;*/
    height: calc(var(--h) * 220px);
    max-height: 80vh;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    padding: 0em 1em 1em;
    /* margin: 1em; */
    /* margin: 0.5%; */
    resize: both;
    border-radius: 1em;
    overflow: hidden;
    display: flex;
    flex-flow: column;
}

.widget[data-w="2"] {
    width: 60%
}

.widget[data-w="3"] {
    width: 90%
}

/*  .widget[data-h="2"] {
        height:40vh;
    }*/

.widget section section,
.widget .card .scripinfo {
    border: 0;
    box-shadow: none;
}

.widget section.multi {
    gap: 0;
}


.widget:hover {
    overflow-y: auto;
}

section.multi:has(.widget) {
    display: flex !important;
    flex-wrap: wrap;
}

.widget .heads {
    position: static;
}

.widget h3 {
    background-color: var(--backbase);
    z-index: 10;
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0.7em;
    padding-bottom: 0.2em;
    order: -1;
    font-size: 1.35em;
    font-weight: 900;
}



.sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
}


/* Close button for menus */
.close-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    padding: 4px 8px;
}

.close-menu:hover {
    color: #333;
}

#searchbox {
    min-width: 150px;
    /* flex-grow: 1; */
}

#searchbox input {
    padding: 0.5em;
    width: 100%;
    background-color: #6661;
    border-color: transparent;
}

#searchbox input:focus {
    background-color: var(--backbase);
    /*z-index:10;*/
}

#searchbox i {
    position: absolute;
    right: 10px;
    z-index: 1;
}

.scripbtn {
    /*line-height: 1;*/
    /* width: 90px; */
    /*font-size:0.8em!important;*/
    overflow: hidden;
    /* margin: 3px; */
}

#ticker #btn_filter,
#ticker #btn_sort {
    display: none;
}

.widget header {
    display: flex;
    display: none;
    flex-wrap: nowrap;
    justify-content: left;
    margin: 0;
}

.widget .dropbtn {
    padding: 0.2em !important;
    margin: -5px;
}

.widget .dropbtn:has(i) span {
    display: none;
}


/* .grp[data-group="LISTS"] {
    order: 3;
} */

#_LISTS {
    display: none;
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.breadth {
    /* margin: 0 auto; */
    margin-right: 10px;
    text-align: center;
    /* background-color: #f444; */
    background-size: 100% 4px !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    position: relative;
    /* color:transparent; */
    /* --breadth: attr(data-breadth); */
}


.breadth:before,
.breadth:after {
    font-size: 10px;
    content: '';
    display: block;
    position: absolute;
    bottom: 0%;
    height: 3px;
    margin: 0 -1.5px;
    opacity: 1;
    /* border: 1px solid; */

}

.breadth:before {
    width: calc(var(--breadth));
    left: 0px;
    background-color: #0b64;
}

.breadth:after {
    width: calc(100% - var(--breadth));
    right: 0px;
    background-color: #f434;
}

.breadth:hover::before {
    content: attr(data-ups);
    COLOR: #0c3;
    text-align: left;
}

.breadth:hover::after {
    content: attr(data-dns);
    color: #f43;
    text-align: right;
}



@container menu-main (width <900px) {


    nav,
    .menu,
    .toolbar {
        justify-content: center;
        flex-wrap: wrap !important;
    }

    /*.menu > div {
        position: static;
    }
*/
    /* .quote {
        display: none !important;
    } */


    #logo {
        width: 90px;
    }

    .menu .links {
        order: 5;
        /* font-size: var(--fontsmall); */
    }

    .links a {
        padding: 0.3em;
        margin: 0.63em;
        font-size: 1.05em;
    }

    .toolbar {
        gap: 0;

        & button.dropbtn {
            /*text-transform: uppercase;*/
            /* font-size: var(--fontsmall); */
            margin: 5px 3px !important;
            /* min-width: 50px; */
            background-image: none;
            /* border: var(--border); */
            /* padding: 0.6em; */
            /* border-radius: var(--radiusbig); */

            & i {
                /* font-weight: normal;
                font-size: 18px; */
                /* margin-right: 0px; */
            }
        }
    }

    .drops {
        /*top: 200px;*/
        /* max-height: 60vh; */
    }




}

@container menu-main (width <500px) {


    nav #logo {
        position: absolute;
        left: 10px;
    }

    #searchbox {
        flex-grow: 1;
    }

    .quote {
        display: none !important;
    }
}

#back {

    position: absolute;
    z-index: 100;
    padding: 9px 10px;
    left: 10px;
}

.fillspace {
    width: 100%;
    height: 100%;
}


#share {
    /* width: clamp(360px, 90vw, 600px);
    width: clamp(420px, 90vh, 600px); */
    max-width: 400px;
    max-height: 600px;
    padding: 1em;
    border-radius: 1em;
    text-align: center;

}

#share img {
    width: 100%;
    height: 300px;
}

#share .url {
    line-height: 2;
    background-color: #fea;
}

.selectall {
    user-select: all;
}