.tooltip{position:fixed;padding:7px 5px;opacity:0;min-width:100px;transition:.2s;transform-origin:center center;text-align:center;font-size:10px;border-radius:5px;z-index:20;&:after{content:"";height:0;width:0;position:absolute;border:6px solid transparent}&.light-blue{color:#040876;border:1px solid #0408763b;box-shadow:0 0 10px #0408763b;background-color:#f5f3ff}&.orange{color:#ed6300;border:1px solid #ed63003b;box-shadow:0 0 10px #ed63003b;background-color:#f6f1ee}&.tooltip--top{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-top-color:#ed6300!important}}&.light-blue{&:after{border-top-color:#0408763b!important}}&:after{top:100%;left:50%;transform:translate(-50%)}}&.tooltip--bottom{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-bottom-color:#ed6300!important}}&.light-blue{&:after{border-bottom-color:#0408763b!important}}&:after{bottom:100%;left:50%;transform:translate(-50%)}}&.tooltip--left{transform:translateY(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-left-color:#ed6300!important}}&.light-blue{&:after{border-left-color:#0408763b!important}}&:after{top:50%;left:100%;transform:translate(-1px,-50%)}}&.tooltip--right{transform:translateY(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-right-color:#ed6300!important}}&.light-blue{&:after{border-right-color:#0408763b!important}}&:after{top:50%;right:100%;transform:translate(1px,-50%)}}&.tooltip--top-left{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-top-color:#ed6300!important}}&.light-blue{&:after{border-top-color:#0408763b!important}}&:after{top:100%;left:50%;transform:translate(-50%)}}&.tooltip--top-right{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-top-color:#ed6300!important}}&.light-blue{&:after{border-top-color:#0408763b!important}}&:after{top:100%;left:50%;transform:translate(-50%)}}&.tooltip--bottom-left{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-bottom-color:#ed6300!important}}&.light-blue{&:after{border-bottom-color:#0408763b!important}}&:after{bottom:100%;left:50%;transform:translate(-50%)}}&.tooltip--bottom-right{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-bottom-color:#ed6300!important}}&.light-blue{&:after{border-bottom-color:#0408763b!important}}&:after{bottom:100%;left:50%;transform:translate(-50%)}}&.tooltip--left-top{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-left-color:#ed6300!important}}&.light-blue{&:after{border-left-color:#0408763b!important}}&:after{top:50%;left:100%;transform:translate(-1px,-50%)}}&.tooltip--left-bottom{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-left-color:#ed6300!important}}&.light-blue{&:after{border-left-color:#0408763b!important}}&:after{top:50%;left:100%;transform:translate(-1px,-50%)}}&.tooltip--right-top{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-right-color:#ed6300!important}}&.light-blue{&:after{border-right-color:#0408763b!important}}&:after{top:50%;right:100%;transform:translate(1px,-50%)}}&.tooltip--right-bottom{transform:translate(-50%) scale(0);animation:animateIn .4s forwards;&.orange{&:after{border-right-color:#ed6300!important}}&.light-blue{&:after{border-right-color:#0408763b!important}}&:after{top:50%;right:100%;transform:translate(1px,-50%)}}}@keyframes animateIn{0%{opacity:0}to{opacity:1}}