/*! Hint.css (base version) - v2.7.0 - 2021-10-01
* https://kushagra.dev/lab/hint/
* Copyright (c) 2021 Kushagra Gour */

[class*=hint--]
{
position:relative;
display:inline-block
}
[class*=hint--]:after,[class*=hint--]:before
{
position:absolute;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
visibility:hidden;
opacity:0;
z-index:10000000000000;
pointer-events:none;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
transition:.3s ease;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
transition-delay:0s
}
[class*=hint--]:hover:after,[class*=hint--]:hover:before
{
visibility:visible;
opacity:1;
-webkit-transition-delay:.1s;
-moz-transition-delay:.1s;
transition-delay:.1s
}
[class*=hint--]:before
{
content:'';
position:absolute;
background:0 0;
border:6px solid transparent;
z-index:10000000000001
}
[class*=hint--]:after
{
background:#000;
color:#fff;
padding:5px;
font-size:12px;
line-height:12px;
white-space:nowrap
}
[class*=hint--][aria-label]:after
{
content:attr(aria-label)
}
[class*=hint--][data-hint]:after
{
content:attr(data-hint)
}
[aria-label='']:after,[aria-label='']:before,[data-hint='']:after,[data-hint='']:before
{
display:none!important
}
.hint--top-left:before,.hint--top-right:before,.hint--top:before
{
border-top-color:#000
}
.hint--bottom-left:before,.hint--bottom-right:before,.hint--bottom:before
{
border-bottom-color:#000
}
.hint--top:after,.hint--top:before
{
bottom:100%;
left:50%
}
.hint--top:before
{
margin-bottom:-5px;
left:calc(50% - 6px)
}
.hint--top:after
{
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%)
}
.hint--top:hover:before
{
-webkit-transform:translateY(-4px);
-moz-transform:translateY(-4px);
transform:translateY(-4px)
}
.hint--top:hover:after
{
-webkit-transform:translateX(-50%) translateY(-4px);
-moz-transform:translateX(-50%) translateY(-4px);
transform:translateX(-50%) translateY(-4px)
}
.hint--bottom:after,.hint--bottom:before
{
top:100%;
left:50%
}
.hint--bottom:before
{
margin-top:-11px;
left:calc(50% - 6px)
}
.hint--bottom:after
{
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%)
}
.hint--bottom:hover:before
{
-webkit-transform:translateY(4px);
-moz-transform:translateY(4px);
transform:translateY(4px)
}
.hint--bottom:hover:after
{
-webkit-transform:translateX(-50%) translateY(4px);
-moz-transform:translateX(-50%) translateY(4px);
transform:translateX(-50%) translateY(4px)
}
.hint--right:before
{
border-right-color:#000;
margin-left:-11px;
margin-bottom:-6px
}
.hint--right:after
{
margin-bottom:-14px
}
.hint--right:after,.hint--right:before
{
left:100%;
bottom:50%
}
.hint--right:hover:after,.hint--right:hover:before
{
-webkit-transform:translateX(4px);
-moz-transform:translateX(4px);
transform:translateX(4px)
}
.hint--left:before
{
border-left-color:#000;
margin-right:-11px;
margin-bottom:-6px
}
.hint--left:after
{
margin-bottom:-14px
}
.hint--left:after,.hint--left:before
{
right:100%;
bottom:50%
}
.hint--left:hover:after,.hint--left:hover:before
{
-webkit-transform:translateX(-4px);
-moz-transform:translateX(-4px);
transform:translateX(-4px)
}
.hint--top-left:after,.hint--top-left:before
{
bottom:100%;
left:50%
}
.hint--top-left:before
{
margin-bottom:-11px;
left:calc(50% - 6px)
}
.hint--top-left:after
{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
transform:translateX(-100%);
margin-left:12px
}
.hint--top-left:hover:before
{
-webkit-transform:translateY(-4px);
-moz-transform:translateY(-4px);
transform:translateY(-4px)
}
.hint--top-left:hover:after
{
-webkit-transform:translateX(-100%) translateY(-4px);
-moz-transform:translateX(-100%) translateY(-4px);
transform:translateX(-100%) translateY(-4px)
}
.hint--top-right:after,.hint--top-right:before
{
bottom:100%;
left:50%
}
.hint--top-right:before
{
margin-bottom:-11px;
left:calc(50% - 6px)
}
.hint--top-right:after
{
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
transform:translateX(0);
margin-left:-12px
}
.hint--top-right:hover:after,.hint--top-right:hover:before
{
-webkit-transform:translateY(-4px);
-moz-transform:translateY(-4px);
transform:translateY(-4px)
}
.hint--bottom-left:after,.hint--bottom-left:before
{
top:100%;
left:50%
}
.hint--bottom-left:before
{
margin-top:-11px;
left:calc(50% - 6px)
}
.hint--bottom-left:after
{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
transform:translateX(-100%);
margin-left:12px
}
.hint--bottom-left:hover:before
{
-webkit-transform:translateY(4px);
-moz-transform:translateY(4px);
transform:translateY(4px)
}
.hint--bottom-left:hover:after
{
-webkit-transform:translateX(-100%) translateY(4px);
-moz-transform:translateX(-100%) translateY(4px);
transform:translateX(-100%) translateY(4px)
}
.hint--bottom-right:after,.hint--bottom-right:before
{
top:100%;
left:50%
}
.hint--bottom-right:before
{
margin-top:-11px;
left:calc(50% - 6px)
}
.hint--bottom-right:after
{
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
transform:translateX(0);
margin-left:-12px
}
.hint--bottom-right:hover:after,.hint--bottom-right:hover:before
{
-webkit-transform:translateY(4px);
-moz-transform:translateY(4px);
transform:translateY(4px)
}
.hint--large:after,.hint--medium:after,.hint--small:after
{
white-space:normal;
line-height:1.4em;
word-wrap:break-word
}
.hint--small:after
{
width:80px
}
.hint--medium:after
{
width:150px
}
.hint--large:after
{
width:300px
}
.hint--always:after,.hint--always:before
{
opacity:1;
visibility:visible
}
.hint--always.hint--top:before
{
-webkit-transform:translateY(-4px);
-moz-transform:translateY(-4px);
transform:translateY(-4px)
}
.hint--always.hint--top:after
{
-webkit-transform:translateX(-50%) translateY(-4px);
-moz-transform:translateX(-50%) translateY(-4px);
transform:translateX(-50%) translateY(-4px)
}
.hint--always.hint--top-left:before
{
-webkit-transform:translateY(-4px);
-moz-transform:translateY(-4px);
transform:translateY(-4px)
}
.hint--always.hint--top-left:after
{
-webkit-transform:translateX(-100%) translateY(-4px);
-moz-transform:translateX(-100%) translateY(-4px);
transform:translateX(-100%) translateY(-4px)
}
.hint--always.hint--top-right:after,.hint--always.hint--top-right:before
{
-webkit-transform:translateY(-4px);
-moz-transform:translateY(-4px);
transform:translateY(-4px)
}
.hint--always.hint--bottom:before
{
-webkit-transform:translateY(4px);
-moz-transform:translateY(4px);
transform:translateY(4px)
}
.hint--always.hint--bottom:after
{
-webkit-transform:translateX(-50%) translateY(4px);
-moz-transform:translateX(-50%) translateY(4px);
transform:translateX(-50%) translateY(4px)
}
.hint--always.hint--bottom-left:before
{
-webkit-transform:translateY(4px);
-moz-transform:translateY(4px);
transform:translateY(4px)
}
.hint--always.hint--bottom-left:after
{
-webkit-transform:translateX(-100%) translateY(4px);
-moz-transform:translateX(-100%) translateY(4px);
transform:translateX(-100%) translateY(4px)
}
.hint--always.hint--bottom-right:after,.hint--always.hint--bottom-right:before
{
-webkit-transform:translateY(4px);
-moz-transform:translateY(4px);
transform:translateY(4px)
}
.hint--always.hint--left:after,.hint--always.hint--left:before
{
-webkit-transform:translateX(-4px);
-moz-transform:translateX(-4px);
transform:translateX(-4px)
}
.hint--always.hint--right:after,.hint--always.hint--right:before
{
-webkit-transform:translateX(4px);
-moz-transform:translateX(4px);
transform:translateX(4px)
}



{