:root {--scr-width:7px;--scr-trk-brd-rad:6px;--scr-thb-bdr-rad: 6px;--scr-trk-bg: #ddd;--scr-thb-bg: #aaa;--scr-trk-box-shd:#999;--scr-thb-hover:#aaa;}::-webkit-scrollbar {  width: var(--scr-width);}::-webkit-scrollbar-track {background: var(--scr-trk-bg);box-shadow: inset 0 0 5px var(--scr-trk-box-shd);border-radius: var(--scr-trk-brd-rad);}::-webkit-scrollbar-thumb {background: var(--scr-thb-bg);border-radius: var(--scr-thb-bdr-rad);}::-webkit-scrollbar-thumb:hover {background: var(--scr-thb-hover);}
:root {--info-span-bg:#175579;--info-span-bg-hover:#31728d;--info-fg:#ddd;--info-fg-hover:#fff;} 
/* smooth-scroll CSS */
html { scroll-behavior: smooth;}
/*************//* use for any tag on your page */
[data-title]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;background: var(--info-span-bg);}
[data-title]:after {content: attr(data-title);position: absolute;background: var(--info-span-bg);top: -1.75em;left: 5%;z-index: 9998;visibility: hidden;font-family: sans-serif;white-space: nowrap;color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title] {position: relative;cursor: alias; z-index: 9998;}
[data-title]:hover {z-index: 9999;background: var(--info-span-bg);}
[data-title-bottom]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;}
[data-title-bottom]:after {content: attr(data-title-bottom);position: absolute;bottom: -1.75em;left: 5%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color: var(--scroll-bg);color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title-bottom] {position: relative;cursor: alias;z-index: 9998;}
[data-title-bottom]:hover {z-index: 9999;}
[data-title-left]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;}
[data-title-left]:after {content: attr(data-title-left);position: absolute;left: -100%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color:var(--scroll-bg);color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title-left] {position: relative;cursor: alias;z-index: 9998;}
[data-title-left]:hover {z-index: 9999;}
[data-title-right]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;}
[data-title-right]:after {content: attr(data-title-right);position: absolute;left: 100%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color:var(--scroll-bg);color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title-right] {position: relative;cursor: alias;z-index: 9998;}
[data-title-right]:hover {z-index: 9999;}

.info {display:inline-block;width: 25px;height: 15px;color:var(--info-fg);font-size: 0.8rem;text-transform:lowercase;margin: 0;font-family: monospace;text-align: center;}
.info span {width: 15px;height: 15px;background: var(--info-span-bg);display:inline-block;border-radius:50%;}.info span:hover {background:var(--info-span-bg-hover);color:var(--info-fg-hover);}