/*
 *   TOOLTIPS
 *   ========
 *   WWW.DIGITALALBUM.PL
 *   COPYRIGHT © 2006 - 2020
 *   DESIGNED AND CREATED BY FOX
 */





@keyframes tooltips-vert {
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}





[tooltip].hide-tooltip::before,
[tooltip].hide-tooltip::after {
    display: none !important;
}

[tooltip-clicked] { position: relative; }
[tooltip] { position: relative; }
[tooltip]::before,
[tooltip]::after {
    text-transform: none;
    font-size: .9em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}

[tooltip]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1001;
}

[tooltip]::after {
    content: attr(tooltip);
    font-family: Helvetica, sans-serif;
    text-align: center;
    min-width: 3em;
    max-width: 32em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, .35);
    background: #000001;
    color: #fff;
    z-index: 1000;
    font-weight: 400;
}

[tooltip].switch::after { content: attr(data-switch-tooltip); }
[tooltip].clicked::after { content: attr(tooltip-clicked); }
[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #000001;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #000001;
}

[tooltip][flow^="down"]::after { top: calc(100% + 5px); }
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #000001;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
    padding-top: 0;
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #000001;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

[tooltip]:not([flow]):hover::before,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="down"]:hover::before {
    animation: tooltips-vert 250ms cubic-bezier(.785, .135, .15, .86) .15s forwards;
}

[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 200ms cubic-bezier(.785, .135, .15, .86) .15s forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 200ms cubic-bezier(.785, .135, .15, .86) .15s forwards;
}





/* --   KOLORY TOOLTIPÓW   -- */

/* --   NIEBIESKI   -- */

[tooltip][color="blue"]::after { background: #137eff; }
[tooltip][color="blue"]:not([flow])::before { border-top-color: #137eff; }
[tooltip][flow^="up"][color="blue"]::before { border-top-color: #137eff; }
[tooltip][flow^="left"][color="blue"]::before { border-left-color: #137eff; }
[tooltip][flow^="down"][color="blue"]::before { border-bottom-color: #137eff; }
[tooltip][flow^="right"][color="blue"]::before { border-right-color: #137eff; }

/* --   BIAŁY   -- */

[tooltip][color="white"]::after { background: #fff; color: #444; }
[tooltip][color="white"]:not([flow])::before { border-top-color: #fff; }
[tooltip][flow^="up"][color="white"]::before { border-top-color: #fff; }
[tooltip][flow^="left"][color="white"]::before { border-left-color: #fff; }
[tooltip][flow^="down"][color="white"]::before { border-bottom-color: #fff; }
[tooltip][flow^="right"][color="white"]::before { border-right-color: #fff; }

/* --   KOLOR SERWISU   -- */

[tooltip][color="webcolor"]::after { background: #000001; }
[tooltip][color="webcolor"]:not([flow])::before { border-top-color: #000001; }
[tooltip][flow^="up"][color="webcolor"]::before { border-top-color: #000001; }
[tooltip][flow^="down"][color="webcolor"]::before { border-bottom-color: #000001; }
[tooltip][flow^="left"][color="webcolor"]::before { border-left-color: #000001; }
[tooltip][flow^="right"][color="webcolor"]::before { border-right-color: #000001; }

/* --   CIEMNY SZARY   -- */

[tooltip][color="darkgray"]::after { background: #282828; }
[tooltip][color="darkgray"]:not([flow])::before { border-top-color: #282828; }
[tooltip][flow^="up"][color="darkgray"]::before { border-top-color: #282828; }
[tooltip][flow^="down"][color="darkgray"]::before { border-bottom-color: #282828; }
[tooltip][flow^="left"][color="darkgray"]::before { border-left-color: #282828; }
[tooltip][flow^="right"][color="darkgray"]::before { border-right-color: #282828; }

/* --   ZIELONY   -- */

[tooltip][color="green"]::after { background: #00a820; }
[tooltip][color="green"]:not([flow])::before { border-top-color: #00a820; }
[tooltip][flow^="up"][color="green"]::before { border-top-color: #00a820; }
[tooltip][flow^="down"][color="green"]::before { border-bottom-color: #00a820; }
[tooltip][flow^="left"][color="green"]::before { border-left-color: #00a820; }
[tooltip][flow^="right"][color="green"]::before { border-right-color: #00a820; }

/* --   CZERWONY   -- */

[tooltip][color="red"]::after { background: #f00; }
[tooltip][color="red"]:not([flow])::before { border-top-color: #f00; }
[tooltip][flow^="up"][color="red"]::before { border-top-color: #f00; }
[tooltip][flow^="down"][color="red"]::before { border-bottom-color: #f00; }
[tooltip][flow^="left"][color="red"]::before { border-left-color: #f00; }
[tooltip][flow^="right"][color="red"]::before { border-right-color: #f00; }

/* --   ŻÓŁTY   -- */

[tooltip][color="yellow"]::after { background: #ffc700; color: #666; }
[tooltip][color="yellow"]:not([flow])::before { border-top-color: #ffc700; }
[tooltip][flow^="up"][color="yellow"]::before { border-top-color: #ffc700; }
[tooltip][flow^="down"][color="yellow"]::before { border-bottom-color: #ffc700; }
[tooltip][flow^="left"][color="yellow"]::before { border-left-color: #ffc700; }
[tooltip][flow^="right"][color="yellow"]::before { border-right-color: #ffc700; }

/* --   KOLORY SERWISÓW   -- */

/* --   DIGITALALBUM   -- */

[tooltip][color="digitalalbum"]::after { background: #e75400; color: #fff; }
[tooltip][color="digitalalbum"]:not([flow])::before { border-top-color: #e75400; }
[tooltip][flow^="up"][color="digitalalbum"]::before { border-top-color: #e75400; }
[tooltip][flow^="down"][color="digitalalbum"]::before { border-bottom-color: #e75400; }
[tooltip][flow^="left"][color="digitalalbum"]::before { border-left-color: #e75400; }
[tooltip][flow^="right"][color="digitalalbum"]::before { border-right-color: #e75400; }

/* --   EFOTO   -- */

[tooltip][color="efoto"]::after { background: #137eff; color: #fff; }
[tooltip][color="efoto"]:not([flow])::before { border-top-color: #137eff; }
[tooltip][flow^="up"][color="efoto"]::before { border-top-color: #137eff; }
[tooltip][flow^="down"][color="efoto"]::before { border-bottom-color: #137eff; }
[tooltip][flow^="left"][color="efoto"]::before { border-left-color: #137eff; }
[tooltip][flow^="right"][color="efoto"]::before { border-right-color: #137eff; }

/* --   JIGGYALBUMS   -- */

[tooltip][color="jiggyalbums"]::after { background: #609b96; color: #fff; }
[tooltip][color="jiggyalbums"]:not([flow])::before { border-top-color: #609b96; }
[tooltip][flow^="up"][color="jiggyalbums"]::before { border-top-color: #609b96; }
[tooltip][flow^="down"][color="jiggyalbums"]::before { border-bottom-color: #609b96; }
[tooltip][flow^="left"][color="jiggyalbums"]::before { border-left-color: #609b96; }
[tooltip][flow^="right"][color="jiggyalbums"]::before { border-right-color: #609b96; }

/* --   EXTREMAALBUM   -- */

[tooltip][color="extremaalbum"]::after { background: #8b8b00; color: #fff; }
[tooltip][color="extremaalbum"]:not([flow])::before { border-top-color: #8b8b00; }
[tooltip][flow^="up"][color="extremaalbum"]::before { border-top-color: #8b8b00; }
[tooltip][flow^="down"][color="extremaalbum"]::before { border-bottom-color: #8b8b00; }
[tooltip][flow^="left"][color="extremaalbum"]::before { border-left-color: #8b8b00; }
[tooltip][flow^="right"][color="extremaalbum"]::before { border-right-color: #8b8b00; }

/* --   DIGITALALBEN24   -- */

[tooltip][color="digitalalben24"]::after { background: #228b22; color: #fff; }
[tooltip][color="digitalalben24"]:not([flow])::before { border-top-color: #228b22; }
[tooltip][flow^="up"][color="digitalalben24"]::before { border-top-color: #228b22; }
[tooltip][flow^="down"][color="digitalalben24"]::before { border-bottom-color: #228b22; }
[tooltip][flow^="left"][color="digitalalben24"]::before { border-left-color: #228b22; }
[tooltip][flow^="right"][color="digitalalben24"]::before { border-right-color: #228b22; }

/* --   STUDIOEWA   -- */

[tooltip][color="studioewa"]::after { background: #8b0000; color: #fff; }
[tooltip][color="studioewa"]:not([flow])::before { border-top-color: #8b0000; }
[tooltip][flow^="up"][color="studioewa"]::before { border-top-color: #8b0000; }
[tooltip][flow^="down"][color="studioewa"]::before { border-bottom-color: #8b0000; }
[tooltip][flow^="left"][color="studioewa"]::before { border-left-color: #8b0000; }
[tooltip][flow^="right"][color="studioewa"]::before { border-right-color: #8b0000; }

/* --   EFOTOKSIAZKA   -- */

[tooltip][color="efotoksiazka"]::after { background: #75a0c3; color: #fff; }
[tooltip][color="efotoksiazka"]:not([flow])::before { border-top-color: #75a0c3; }
[tooltip][flow^="up"][color="efotoksiazka"]::before { border-top-color: #75a0c3; }
[tooltip][flow^="down"][color="efotoksiazka"]::before { border-bottom-color: #75a0c3; }
[tooltip][flow^="left"][color="efotoksiazka"]::before { border-left-color: #75a0c3; }
[tooltip][flow^="right"][color="efotoksiazka"]::before { border-right-color: #75a0c3; }

/* --   CARDINALALBUMS   -- */

[tooltip][color="cardinalalbums"]::after { background: #c83c3c; color: #fff; }
[tooltip][color="cardinalalbums"]:not([flow])::before { border-top-color: #c83c3c; }
[tooltip][flow^="up"][color="cardinalalbums"]::before { border-top-color: #c83c3c; }
[tooltip][flow^="down"][color="cardinalalbums"]::before { border-bottom-color: #c83c3c; }
[tooltip][flow^="left"][color="cardinalalbums"]::before { border-left-color: #c83c3c; }
[tooltip][flow^="right"][color="cardinalalbums"]::before { border-right-color: #c83c3c; }

/* --   PCPDRUK   -- */

[tooltip][color="pcpdruk"]::after { background: #ff7f2a; color: #fff; }
[tooltip][color="pcpdruk"]:not([flow])::before { border-top-color: #ff7f2a; }
[tooltip][flow^="up"][color="pcpdruk"]::before { border-top-color: #ff7f2a; }
[tooltip][flow^="down"][color="pcpdruk"]::before { border-bottom-color: #ff7f2a; }
[tooltip][flow^="left"][color="pcpdruk"]::before { border-left-color: #ff7f2a; }
[tooltip][flow^="right"][color="pcpdruk"]::before { border-right-color: #ff7f2a; }





/* --   WYŁĄCZONY   -- */

[tooltip].-tip-off::before,
[tooltip].-tip-off::after {
    display: none !important;
}

/* --   UKRYTY Z KLASĄ ".EXPAND"   -- */

[tooltip].expand::before,
[tooltip].expand::after {
    display: none !important;
}

/* --   WYŁĄCZONY PO MOUSEDOWNIE NA OBIEKCIE   -- */

[tooltip].mousedown-tooltip-off._off::before,
[tooltip].mousedown-tooltip-off._off:after {
    display: none !important;
}

/* --   ODSUNIĘTE BARDZIEJ OD OBIEKTU   -- */

[tooltip][flow^="right"].distance::before { right: calc(0em - 10px); }
[tooltip][flow^="right"].distance::after { left: calc(100% + 10px); }




















/* --   TOOLTIPY NA WIĘKSZĄ ILOŚĆ INFORMACJI   -- */

.extended-tooltip {
    position: absolute;
    width: 200px;
    height: 80px;
    background: #000001;
    font-family: Helvetica, sans-serif;
    text-align: center;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .35);
    background: #000001;
    color: #fff;
    z-index: 1000;
    left: 50%;
    margin: 0 0 0 -100px;
    top: calc(100% + 4px);
}

.extended-tooltip .arrow {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 12px;
    height: 12px;
    border: 6px solid rgba(0, 0, 0, 0);
    border-bottom-color: #000001;
}