/*
#tipy is the basic ( and only ) element.
The least you have to do, is to style this one.
*/
#tipy {
    z-index: 1001;
    position: absolute;
    min-width: 30px;
    width: max-content;
    max-width: 600px;
    min-height: 30px;
    border-radius: 4px;
    padding: 8px;
    opacity: 0;
    color: white;
    font: 400 12px 'Inter';
    display: inline-block;
    /*border: 1px solid transparent;*/
    background: white;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.15));
}

/*
The Default Style, uses ::before and ::After to style the little arrow
*/
#tipy:before {
    background: inherit;
    display: block;
    position: absolute;
    z-index: -1;
    /*border: inherit;
    border: 0;*/
}

#tipy.position-tr::before,
#tipy.position-tl::before,
#tipy.position-br::before,
#tipy.position-bl::before {
    width: 18px;
    height: 18px;
    content: '';
}

#tipy.position-t::before,
#tipy.position-b::before,
#tipy.position-r::before,
#tipy.position-l::before {
    width: 20px;
    height: 20px;
    content: '';
}

#tipy.position-t:before, #tipy.position-b:before{
    left: 0;
    right: 0;
    margin: 0 auto;
}

#tipy.position-r:before, #tipy.position-l:before {
    top: 0;
    bottom: 0;
    margin: auto 0;
}

#tipy.position-tr:before{ bottom: 1px; left:  1px; transform: matrix(0, -1, -1,  0.5, -1,  6);}
#tipy.position-br:before{ top:    0; left:  1px; transform: matrix(0,  1, -1, -0.5, -1, -6);}
#tipy.position-bl:before{ top:    0; right: 1px; transform: matrix(0,  1,  1, -0.5,  1, -5);}
#tipy.position-tl:before{ bottom: 1px; right: 1px; transform: matrix(0, -1,  1,  0.5,  1,  5);}

#tipy.position-t:before{ bottom: 6px; transform: scale(1, 1.8) translate(0%, 50%) rotate(-45deg);}
#tipy.position-b:before{ top:    6px; transform: scale(1, 1.8) translate(50%, -50%) rotate(135deg)}
#tipy.position-l:before{ right:  6px; transform: scale(1.8, 1) translate(50%) rotate(225deg);}
#tipy.position-r:before{ left:   6px; transform: scale(1.8, 1) translate(-50%) rotate(45deg);}

#tipy.position-t { margin-top:  -30px;}
#tipy.position-b { margin-top:   30px;}
#tipy.position-r { margin-left:  30px;}
#tipy.position-l { margin-left: -30px;}

#tipy.position-tr{ margin-top: -10px; }
#tipy.position-br{ margin-top:  10px; }
#tipy.position-bl{ margin-top:  10px; }
#tipy.position-tl{ margin-top: -10px; }

/* Let the user know that there is a tooltip on this element */
[data-tipy] {
    position: relative;
}

[data-tipy-content] {
    display: none;
}

#tipy.position-tr{ border-right: 2px solid; }
#tipy.position-br{ border-right: 2px solid; }
#tipy.position-bl{ border-left: 2px solid; }
#tipy.position-tl{ border-left: 2px solid; }

#tipy.position-t{ border-top: 2px solid; }
#tipy.position-b{ border-bottom: 2px solid; }
#tipy.position-l{ border-left: 2px solid; }
#tipy.position-r{ border-right: 2px solid; }

#tipy.primary { border-color: #3996FF; color: #3996FF;}
#tipy.success { border-color: #1BC5BD; color: #1BC5BD;}
#tipy.warning { border-color: #F6954E; color: #F6954E;}
#tipy.danger { border-color: #F64E60; color: #F64E60;}
#tipy.secondary { border-color: #8F9EAE; color: #8F9EAE;}

@-moz-keyframes shaky {
    10% {
        transform: translate(5px,0);
    }
    20% {
        transform: translate(0px,0);
    }
    30% {
        transform: translate(4px,0);
    }
    40% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(3px,0);
    }
    60% {
        transform: translate(0px,0);
    }
    70% {
        transform: translate(2px,0);
    }
    80% {
        transform: translate(0,0);
    }
    90% {
        transform: translate(1,0);
    }
    100% {
        transform: translate(0,0);
    }
}