@charset "UTF-8"; /* ==================================================
 * Microtip Main Stylesheet by Ghosh, Modify by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

[data-microtip] { position: relative; } [data-microtip]:before, [data-microtip]:after { position: absolute; pointer-events: none; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transform-origin: top; box-sizing: border-box; transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; opacity: 0; z-index: 10; } [data-microtip]:before { content: ""; background-size: 100% auto !important; } [data-microtip]:after { content: attr(data-microtip); padding: .5em 1em; white-space: nowrap; box-sizing: content-box; font-size: var(--microtip-font-size, 13px); color: white; font-weight: var(--microtip-font-weight, normal); text-transform: var(--microtip-text-transform, none); border-radius: 4px; background: rgba(17, 17, 17, .9); } [data-microtip]:hover:before, [data-microtip]:hover:after { pointer-events: auto; opacity: 1; } [data-microtip-position|="top"]:before { margin-bottom: 5px; width: 18px; height: 6px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; } [data-microtip-position|="top"]:after { margin-bottom: 11px; } [data-microtip-position|="top"]:before { bottom: 100%; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-microtip-position|="top"]:hover:before { -webkit-transform: translate3d(-50%, -5px, 0); -moz-transform: translate3d(-50%, -5px, 0); -ms-transform: translate3d(-50%, -5px, 0); -o-transform: translate3d(-50%, -5px, 0); transform: translate3d(-50%, -5px, 0); } [data-microtip-position|="top"]:after { bottom: 100%; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-microtip-position="top"]:hover:after { -webkit-transform: translate3d(-50%, -5px, 0); -moz-transform: translate3d(-50%, -5px, 0); -ms-transform: translate3d(-50%, -5px, 0); -o-transform: translate3d(-50%, -5px, 0); transform: translate3d(-50%, -5px, 0); } [data-microtip-position="top-left"]:after { bottom: 100%; -webkit-transform: translate3d(calc(-100% + 16px), 0, 0); -moz-transform: translate3d(calc(-100% + 16px), 0, 0); -ms-transform: translate3d(calc(-100% + 16px), 0, 0); -o-transform: translate3d(calc(-100% + 16px), 0, 0); transform: translate3d(calc(-100% + 16px), 0, 0); } [data-microtip-position="top-left"]:hover:after { -webkit-transform: translate3d(calc(-100% + 16px), -5px, 0); -moz-transform: translate3d(calc(-100% + 16px), -5px, 0); -ms-transform: translate3d(calc(-100% + 16px), -5px, 0); -o-transform: translate3d(calc(-100% + 16px), -5px, 0); transform: translate3d(calc(-100% + 16px), -5px, 0); } [data-microtip-position="top-right"]:after { bottom: 100%; -webkit-transform: translate3d(calc(0% + -16px), 0, 0); -moz-transform: translate3d(calc(0% + -16px), 0, 0); -ms-transform: translate3d(calc(0% + -16px), 0, 0); -o-transform: translate3d(calc(0% + -16px), 0, 0); transform: translate3d(calc(0% + -16px), 0, 0); } [data-microtip-position="top-right"]:hover:after { -webkit-transform: translate3d(calc(0% + -16px), -5px, 0); -moz-transform: translate3d(calc(0% + -16px), -5px, 0); -ms-transform: translate3d(calc(0% + -16px), -5px, 0); -o-transform: translate3d(calc(0% + -16px), -5px, 0); transform: translate3d(calc(0% + -16px), -5px, 0); } [data-microtip-position|="bottom"]:before { margin-top: 5px; margin-bottom: 0; width: 18px; height: 6px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; } [data-microtip-position|="bottom"]:after { margin-top: 11px; } [data-microtip-position|="bottom"]:before { bottom: auto; left: 50%; top: 100%; -webkit-transform: translate3d(-50%, -10px, 0); -moz-transform: translate3d(-50%, -10px, 0); -ms-transform: translate3d(-50%, -10px, 0); -o-transform: translate3d(-50%, -10px, 0); transform: translate3d(-50%, -10px, 0); } [data-microtip-position|="bottom"]:hover:before { -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-microtip-position|="bottom"]:after { top: 100%; left: 50%; -webkit-transform: translate3d(-50%, -10px, 0); -moz-transform: translate3d(-50%, -10px, 0); -ms-transform: translate3d(-50%, -10px, 0); -o-transform: translate3d(-50%, -10px, 0); transform: translate3d(-50%, -10px, 0); } [data-microtip-position="bottom"]:hover:after { -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-microtip-position="bottom-left"]:after { top: 100%; -webkit-transform: translate3d(calc(-100% + 16px), -10px, 0); -moz-transform: translate3d(calc(-100% + 16px), -10px, 0); -ms-transform: translate3d(calc(-100% + 16px), -10px, 0); -o-transform: translate3d(calc(-100% + 16px), -10px, 0); transform: translate3d(calc(-100% + 16px), -10px, 0); } [data-microtip-position="bottom-left"]:hover:after { -webkit-transform: translate3d(calc(-100% + 16px), 0, 0); -moz-transform: translate3d(calc(-100% + 16px), 0, 0); -ms-transform: translate3d(calc(-100% + 16px), 0, 0); -o-transform: translate3d(calc(-100% + 16px), 0, 0); transform: translate3d(calc(-100% + 16px), 0, 0); } [data-microtip-position="bottom-right"]:after { top: 100%; -webkit-transform: translate3d(calc(0% + -16px), -10px, 0); -moz-transform: translate3d(calc(0% + -16px), -10px, 0); -ms-transform: translate3d(calc(0% + -16px), -10px, 0); -o-transform: translate3d(calc(0% + -16px), -10px, 0); transform: translate3d(calc(0% + -16px), -10px, 0); } [data-microtip-position="bottom-right"]:hover:after { -webkit-transform: translate3d(calc(0% + -16px), 0, 0); -moz-transform: translate3d(calc(0% + -16px), 0, 0); -ms-transform: translate3d(calc(0% + -16px), 0, 0); -o-transform: translate3d(calc(0% + -16px), 0, 0); transform: translate3d(calc(0% + -16px), 0, 0); } [data-microtip-position="left"]:before, [data-microtip-position="left"]:after { bottom: auto; left: auto; right: 100%; top: 50%; -webkit-transform: translate3d(10px, -50%, 0); -moz-transform: translate3d(10px, -50%, 0); -ms-transform: translate3d(10px, -50%, 0); -o-transform: translate3d(10px, -50%, 0); transform: translate3d(10px, -50%, 0); } [data-microtip-position="left"]:before { margin-right: 5px; margin-bottom: 0; width: 6px; height: 18px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; } [data-microtip-position="left"]:after { margin-right: 11px; } [data-microtip-position="left"]:hover:before, [data-microtip-position="left"]:hover:after { -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } [data-microtip-position="right"]:before, [data-microtip-position="right"]:after { bottom: auto; left: 100%; top: 50%; -webkit-transform: translate3d(-10px, -50%, 0); -moz-transform: translate3d(-10px, -50%, 0); -ms-transform: translate3d(-10px, -50%, 0); -o-transform: translate3d(-10px, -50%, 0); transform: translate3d(-10px, -50%, 0); } [data-microtip-position="right"]:before { margin-bottom: 0; margin-left: 5px; width: 6px; height: 18px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; } [data-microtip-position="right"]:after { margin-left: 11px; } [data-microtip-position="right"]:hover:before, [data-microtip-position="right"]:hover:after { -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } [data-microtip-size="small"]:after { white-space: initial; width: 80px; } [data-microtip-size="medium"]:after { white-space: initial; width: 150px; } [data-microtip-size="large"]:after { white-space: initial; width: 260px; }