.ssblock { position: fixed; background: rgba(0,0,0,.3); z-index: 1000000000; color: white; width: 150px; height: 45px; display: block; padding: 0; margin: 0; display: flex !important; opacity: 1 !important; flex-flow: row; justify-content: center; align-items: center; } .ssblock > a { margin-right: 5px; } .ssblock.top { top: 50px; } .ssblock.bottom { bottom: 50px; } .ssblock.left { left: 0px; } .ssblock.right { right: 0px; } span.ssnum { display: unset !important; padding: 5px; font-size: 18px; font-family: cursive; opacity: 1 !important; color: white; } .xtooltip { position: relative; display: inline-block; border-bottom: 1px dotted #ccc; cursor: help; color: #006080; } .xtooltip .tooltiptext { visibility: hidden; position: absolute; width: 150px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; z-index: 1; opacity: 0; transition: opacity .6s; } .xtooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .xtooltip .tooltiptext2 { visibility: hidden; position: absolute; width: 150px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; z-index: 1; } .xtooltip:hover .tooltiptext2 { visibility: visible; } .xtooltip-right { top: -5px; left: 125%; } .xtooltip-right2 { top: -5px; left: 105%; } .xtooltip-right::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #555 transparent transparent; } .xtooltip-bottom { top: 135%; left: 50%; margin-left: -60px; } .xtooltip-bottom2 { top: 125%; left: 50%; margin-left: -60px; } .xtooltip-bottom::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent; } .xtooltip-top { bottom: 125%; left: 50%; margin-left: -60px; } .xtooltip-top2 { bottom: 115%; left: 50%; margin-left: -60px; } .xtooltip-top::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .xtooltip-left { top: -5px; bottom:auto; right: 128%; } .xtooltip-left2 { top: -5px; bottom:auto; right: 105%; } .xtooltip-left::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #555; } .xtooltip .tooltiptext-bottomarrow { visibility: hidden; width: 150px; background-color: #111; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 130%; left: 50%; margin-left: -60px; } .xtooltip .tooltiptext-bottomarrow::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .xtooltip:hover .tooltiptext-bottomarrow { visibility: visible; } .xtooltip .tooltiptext-toparrow { visibility: hidden; width: 150px; background-color: #111; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; } .xtooltip .tooltiptext-toparrow::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .xtooltip:hover .tooltiptext-toparrow { visibility: visible; } .xtooltip .tooltiptext-leftarrow { visibility: hidden; width: 150px; background-color: #111; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; left: 110%; } .xtooltip .tooltiptext-leftarrow::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .xtooltip:hover .tooltiptext-leftarrow { visibility: visible; } .xtooltip .tooltiptext-rightarrow { visibility: hidden; width: 150px; background-color: #111; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; right: 110%; } .xtooltip .tooltiptext-rightarrow::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .xtooltip:hover .tooltiptext-rightarrow { visibility: visible; }