@keyframes "hint_appear"{from{opacity:0}20%,
  to{opacity:1}}.with-hint{display:inline-block;position:relative}.with-hint *,
.with-hint::after,
.with-hint::before{margin:0;padding:0;box-sizing:border-box}.with-hint .hint{background:white;color:#262626;padding:1rem;position:absolute;top:50%;right:-2rem;transform:translateY(-50%) translateX(100%);opacity:0;pointer-events:none;transition:all 0.2s;z-index:10000;border:0.1rem solid #aaa;border-radius:0.4rem;-webkit-box-shadow:-0.3rem 0.6rem 1.5rem -1rem #262626;-moz-box-shadow:-0.3rem 0.6rem 1.5rem -1rem #262626;box-shadow:-0.3rem 0.6rem 1.5rem -1rem #262626}.with-hint .hint::before{background:white;width:1.2rem;height:1.2rem;content:"";position:absolute;left:-1.1rem;top:47%;transform-origin:center;transform:rotateZ(45deg) translateY(-50%);border:0.1rem solid #aaa;border-right:none;border-top:none}.simple-hint{background:white;color:#262626;padding:1rem;position:absolute;top:50%;right:-2rem;transform:translateY(-50%) translateX(100%);opacity:0;pointer-events:none;transition:all 0.2s;z-index:10000;border:0.1rem solid #aaa;border-radius:0.4rem;-webkit-box-shadow:-0.3rem 0.6rem 1.5rem -1rem #262626;-moz-box-shadow:-0.3rem 0.6rem 1.5rem -1rem #262626;box-shadow:-0.3rem 0.6rem 1.5rem -1rem #262626;transform:none}.simple-hint::before{background:white;width:1.2rem;height:1.2rem;content:"";position:absolute;left:-1.1rem;top:47%;transform-origin:center;transform:rotateZ(45deg) translateY(-50%);border:0.1rem solid #aaa;border-right:none;border-top:none}.simple-hint-target:hover > .simple-hint{opacity:1}.with-hint.hint-hover .hint-target:hover ~ .hint{opacity:1}.with-hint.hint-hover.hint-target:hover ~ .hint{opacity:1}.with-hint.hint-appear .hint{animation:hint_appear 5s 1}.with-hint.hint-bottom .hint{top:auto;left:auto;bottom:-1.9rem;transform:translateY(100%)}.with-hint.hint-bottom .hint::before{left:5%;top:-1.6rem;border:0.1rem solid #aaa;border-right:none;border-bottom:none;transform:rotateZ(45deg) translateX(100%)}.with-hint.hint-left .hint{top:50%;left:-2rem;right:auto;transform:translateY(-50%) translateX(-100%)}.with-hint.hint-left .hint::before{left:auto;right:-0.3rem;border:0.1rem solid #AAAAAA;border-left:none;border-bottom:none}.with-hint.hint-top .hint{top:-2rem;left:auto;right:auto;transform:translateY(-100%)}.with-hint.hint-top .hint::before{left:5%;top:auto;bottom:-1.2rem;border:0.1rem solid #aaa;border-top:none;border-left:none}