Mini Shell

.tooltipster-base {

    /* this ensures that a constrained height set by functionPosition,

	if greater that the natural height of the tooltip, will be enforced

	in browsers that support display:flex */

    display: flex;

    pointer-events: none;

    /* this may be overriden in JS for fixed position origins */

    position: absolute;

}



.tooltipster-box {

    /* see .tooltipster-base. flex-shrink 1 is only necessary for IE10-

	and flex-basis auto for IE11- (at least) */

    flex: 1 1 auto;

}



.tooltipster-content {

    /* prevents an overflow if the user adds padding to the div */

    box-sizing: border-box;

    /* these make sure we'll be able to detect any overflow */

    max-height: 100%;

    max-width: 100%;

    overflow: auto;

}



.tooltipster-ruler {

    /* these let us test the size of the tooltip without overflowing the window */

    bottom: 0;

    left: 0;

    overflow: hidden;

    position: fixed;

    right: 0;

    top: 0;

    visibility: hidden;

}





/* ANIMATIONS */





/* Open/close animations */





/* fade */



.tooltipster-fade {

    opacity: 0;

    -webkit-transition-property: opacity;

    -moz-transition-property: opacity;

    -o-transition-property: opacity;

    -ms-transition-property: opacity;

    transition-property: opacity;

}



.tooltipster-fade.tooltipster-show {

    opacity: 1;

}





/* grow */



.tooltipster-grow {

    -webkit-transform: scale(0, 0);

    -moz-transform: scale(0, 0);

    -o-transform: scale(0, 0);

    -ms-transform: scale(0, 0);

    transform: scale(0, 0);

    -webkit-transition-property: -webkit-transform;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

    -ms-transition-property: -ms-transform;

    transition-property: transform;

    -webkit-backface-visibility: hidden;

}



.tooltipster-grow.tooltipster-show {

    -webkit-transform: scale(1, 1);

    -moz-transform: scale(1, 1);

    -o-transform: scale(1, 1);

    -ms-transform: scale(1, 1);

    transform: scale(1, 1);

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

}





/* swing */



.tooltipster-swing {

    opacity: 0;

    -webkit-transform: rotateZ(4deg);

    -moz-transform: rotateZ(4deg);

    -o-transform: rotateZ(4deg);

    -ms-transform: rotateZ(4deg);

    transform: rotateZ(4deg);

    -webkit-transition-property: -webkit-transform, opacity;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

    -ms-transition-property: -ms-transform;

    transition-property: transform;

}



.tooltipster-swing.tooltipster-show {

    opacity: 1;

    -webkit-transform: rotateZ(0deg);

    -moz-transform: rotateZ(0deg);

    -o-transform: rotateZ(0deg);

    -ms-transform: rotateZ(0deg);

    transform: rotateZ(0deg);

    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);

    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);

    -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);

    -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);

    -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);

    transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);

}





/* fall */



.tooltipster-fall {

    -webkit-transition-property: top;

    -moz-transition-property: top;

    -o-transition-property: top;

    -ms-transition-property: top;

    transition-property: top;

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

}



.tooltipster-fall.tooltipster-initial {

    top: 0 !important;

}



.tooltipster-fall.tooltipster-show {}



.tooltipster-fall.tooltipster-dying {

    -webkit-transition-property: all;

    -moz-transition-property: all;

    -o-transition-property: all;

    -ms-transition-property: all;

    transition-property: all;

    top: 0 !important;

    opacity: 0;

}





/* slide */



.tooltipster-slide {

    -webkit-transition-property: left;

    -moz-transition-property: left;

    -o-transition-property: left;

    -ms-transition-property: left;

    transition-property: left;

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

}



.tooltipster-slide.tooltipster-initial {

    left: -40px !important;

}



.tooltipster-slide.tooltipster-show {}



.tooltipster-slide.tooltipster-dying {

    -webkit-transition-property: all;

    -moz-transition-property: all;

    -o-transition-property: all;

    -ms-transition-property: all;

    transition-property: all;

    left: 0 !important;

    opacity: 0;

}





/* Update animations */





/* We use animations rather than transitions here because

 transition durations may be specified in the style tag due to

 animationDuration, and we try to avoid collisions and the use

 of !important */





/* fade */



@keyframes tooltipster-fading {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



.tooltipster-update-fade {

    animation: tooltipster-fading 400ms;

}





/* rotate */



@keyframes tooltipster-rotating {

    25% {

        transform: rotate(-2deg);

    }

    75% {

        transform: rotate(2deg);

    }

    100% {

        transform: rotate(0);

    }

}



.tooltipster-update-rotate {

    animation: tooltipster-rotating 600ms;

}





/* scale */



@keyframes tooltipster-scaling {

    50% {

        transform: scale(1.1);

    }

    100% {

        transform: scale(1);

    }

}



.tooltipster-update-scale {

    animation: tooltipster-scaling 600ms;

}





/**



 * DEFAULT STYLE OF THE SIDETIP PLUGIN



 * 



 * All styles are "namespaced" with .tooltipster-sidetip to prevent



 * conflicts between plugins.



 */





/* .tooltipster-box */



.tooltipster-sidetip .tooltipster-box {

    background: #565656;

    border: 1px solid black;

    border-radius: 4px;

}



.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {

    margin-top: 8px;

}



.tooltipster-sidetip.tooltipster-left .tooltipster-box {

    margin-right: 8px;

}



.tooltipster-sidetip.tooltipster-right .tooltipster-box {

    margin-left: 8px;

}



.tooltipster-sidetip.tooltipster-top .tooltipster-box {

    margin-bottom: 8px;

}





/* .tooltipster-content */



.tooltipster-sidetip .tooltipster-content {

    color: white;

    line-height: 18px;

    padding: 6px 14px;

    font-size: 10pt;

}





/* .tooltipster-arrow : will keep only the zone of .tooltipster-arrow-uncropped that



corresponds to the arrow we want to display */



.tooltipster-sidetip .tooltipster-arrow {

    overflow: hidden;

    position: absolute;

}



.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {

    height: 10px;

    /* half the width, for centering */

    margin-left: -10px;

    top: 0;

    width: 20px;

}



.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {

    height: 20px;

    margin-top: -10px;

    right: 0;

    /* top 0 to keep the arrow from overflowing .tooltipster-base when it has not



	been positioned yet */

    top: 0;

    width: 10px;

}



.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {

    height: 20px;

    margin-top: -10px;

    left: 0;

    /* same as .tooltipster-left .tooltipster-arrow */

    top: 0;

    width: 10px;

}



.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {

    bottom: 0;

    height: 10px;

    margin-left: -10px;

    width: 20px;

}





/* common rules between .tooltipster-arrow-background and .tooltipster-arrow-border */



.tooltipster-sidetip .tooltipster-arrow-background,

.tooltipster-sidetip .tooltipster-arrow-border {

    height: 0;

    position: absolute;

    width: 0;

}





/* .tooltipster-arrow-background */



.tooltipster-sidetip .tooltipster-arrow-background {

    border: 10px solid transparent;

}



.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {

    border-bottom-color: #565656;

    left: 0px;

    top: 3px;

}



.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {

    border-left-color: #565656;

    left: -3px;

    top: 0px;

}



.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {

    border-right-color: #565656;

    left: 3px;

    top: 0px;

}



.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {

    border-top-color: #565656;

    left: 0px;

    top: -3px;

}





/* .tooltipster-arrow-border */



.tooltipster-sidetip .tooltipster-arrow-border {

    border: 10px solid transparent;

    left: 0;

    top: 0;

}



.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {

    border-bottom-color: black;

}



.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {

    border-left-color: black;

}



.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {

    border-right-color: black;

}



.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {

    border-top-color: black;

}





/* tooltipster-arrow-uncropped */



.tooltipster-sidetip .tooltipster-arrow-uncropped {

    position: relative;

}



.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {

    top: -10px;

}



.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {

    left: -10px;

}