:root { 
    --scrollbar-bg: rgba(50,50,50,0.25);
    --thumb-bg: rgba(50,50,50,0.5);
    --scrollbar-width: 0.35rem; 
    --scrollbar-width_hover: 0.5rem; 
    --scrollbar-thumb-radius: 0.5rem;
    --scrollbar-thumb-border: 0.2rem;
}
::-webkit-scrollbar{width: var(--scrollbar-width);height:var(--scrollbar-width);}
::-webkit-scrollbar:hover{width: var(--scrollbar-width_hover);}
::-webkit-scrollbar-track{background-color: var(--scrollbar-bg);}
::-webkit-scrollbar-thumb{background-color: var(--thumb-bg);border-radius: var(--scrollbar-thumb-radius);border: var(--scrollbar-thumb-border) solid var(--scrollbar-bg);}
*{scrollbar-width: var(--scrollbar-width);scrollbar-color: var(--thumb-bg) var(--scrollbar-bg);}
/* 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;}
[data-title]:after {content: attr(data-title);position: absolute;top: -1.75em;left: 5%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color: #0a6f75;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;}
[data-title] {position: relative;cursor: alias; z-index: 9998;}
[data-title-bottom]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible; transform: rotate(180deg)}
[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: #0a6f75;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; transform: rotate(180deg)}
[data-title-bottom] {position: relative;cursor: alias;z-index: 9998; transform: rotate(180deg);}
[data-title-left]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;transform: rotate(270deg)}
[data-title-left]:after {content: attr(data-title-left);position: absolute;left: -2.75em;left: 5%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color: #0a6f75;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;transform: rotate(270deg)}
[data-title-left] {position: relative;cursor: alias;z-index: 9998; transform: rotate(270deg)}
[data-title-left-alt]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;transform: rotate(90deg)}
[data-title-left-alt]:after {content: attr(data-title-left);position: absolute;left: -2.75em;left: 5%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color: #0a6f75;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;transform: rotate(90deg)}
[data-title-left-alt] {position: relative;cursor: alias;z-index: 9998; transform: rotate(90deg)}
[data-title-right]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;}
[data-title-right]:after {content: attr(data-title-right);position: absolute;right: 1.75em;left: 5%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color: #0a6f75;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;}
[data-title-right] {position: relative;cursor: alias;z-index: 9998;}


.info {display:inline-block;width: 25px;height: 15px;color:#ddd;font-size: 0.8rem;text-transform:lowercase;margin: 0;font-family: monospace;text-align: center;}
.info span {width: 15px;height: 15px;background: #175579;display:inline-block;border-radius:50%;}.info span:hover {background:#31728d;color:white;}