.tooltip{width:16px;height:16px;background:#c5ced9;display:inline-block;border-radius:50%;text-align:center;cursor:pointer;position:relative;-webkit-transition:.3s;transition:.3s}.tooltip:hover{background:#546491}.tooltip:after,.tooltip:before{content:"";position:absolute;display:none}.tooltip:before{width:16px;height:16px;background:#384f7d;z-index:10}.tooltip:after{content:attr(data-tooltip);padding:8px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:200px;font:400 12px/24px Inter,Open Sans,Arial,sans-serif;color:#fff;background:#384f7d;border-radius:4px;z-index:15}.tooltip.top:hover:after{display:block;bottom:calc(100% + 10px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tooltip.top:hover:before{display:block;bottom:calc(100% + 6px);left:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.tooltip.right:hover:after{display:block;top:50%;left:calc(100% + 10px);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.tooltip.right:hover:before{display:block;top:50%;left:calc(100% + 12px);-webkit-transform:rotate(-45deg) translateY(-50%);transform:rotate(-45deg) translateY(-50%)}.tooltip.left:hover:after{display:block;top:50%;right:calc(100% + 10px);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.tooltip.left:hover:before{display:block;top:50%;left:-16px;-webkit-transform:rotate(-45deg) translateY(-50%);transform:rotate(-45deg) translateY(-50%)}.tooltip.bottom:hover:after{display:block;top:calc(100% + 10px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tooltip.bottom:hover:before{display:block;top:calc(100% + 6px);left:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.tooltip span{font:600 14px/16px Inter,Open Sans,Arial,sans-serif;color:#fff;width:100%;height:100%;display:block;position:absolute;top:0;left:0}