/* ========
|  New tooltip
|= ======== */

.newToolTip         { position: fixed; display: none !important; min-width: 300px !important; max-width: 600px;
                      background: var(--color-fg-less) !important; color: var(--color-bg-normal); text-align: left; font-size: .95rem;
                      border-radius: .2em; box-shadow: 1px 1px 4px var(--color-borders-dark); z-index: 3000; white-space: initial !important; }
#newToolTipMain:before  { content: attr(data-title); display: block; padding: .5em 1em; max-width: 598px;
                          background: var(--color-fg-less); color: var(--color-bg-raised2); font-weight: bold;
                          box-shadow: 0px 4px 2px -2px var(--color-borders-dark); }
#newToolTipMain > *     { padding: .5rem 1rem !important; }
#newToolTipMain > table td { padding: .5rem 1em; vertical-align: top; }
@media screen and (min-width: 768px) {
    #newToolTipMain.visible { display: block !important; }
}

#newToolTipMain img { max-width: 200px; max-height: 300px; }

dl#newToolTipMain dt { padding-bottom: 0; font-weight: bold; }
dl#newToolTipMain dd { margin: -1em 0 0 0; padding: 0 0 0 0; }

.newToolTipMain p + .toolTipHierarchy { padding-bottom: 0 !important; }
#newToolTipMain > h5 { padding: 0 1rem !important; margin: -.5rem 0 !important; }

.copyToDialogue { cursor: pointer; }

/* ========
|  Animations
|= ======== */

@keyframes pulseBorderSize {
    0%   { border-width: 1em; }
    50%  { border-width: 1.2em; }
    100% { border-width: 1em; }
}
@keyframes fade-in-and-vanish {
    0%   { opacity: 0; z-index: 1000; }
    5%   { opacity: .4; }
    15%  { opacity: 1; padding: .8em; }
    75%  { opacity: 1; padding: .8em; }
    85%  { opacity: .4; transform: translateY(0px);}
    99%  { opacity: 0; transform: translateY(-30px);}
    100% { opacity: 0; z-index: 0; }
}