/* Syntax der CSS Klassen: [Name des Themes] + '-theme' */
/* Name des Themes wird dann beim Aufruf des Tooltips benötigt */

/* Info-I im KPI Infobereich eines Videos */

.tippy-tooltip.video-kpi-info-theme {
    background-color: white;
    border-radius: 5px;
    border: 1px solid #ECECEC;
    padding: 20px;
    padding-bottom: 0px;
    color: #030314;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);
    text-align: left;
}

.tippy-tooltip.video-kpi-info-theme[data-animatefill] {
    background-color: transparent;
}

.tippy-tooltip.video-kpi-info-theme .tippy-backdrop {
    background-color: white;
}

/* Create Video Overlay Youtube Video ID */

.tippy-tooltip.youtube-video-id-theme {
    background-color: white;
    border-radius: 5px;
    border: 1px solid #ECECEC;
    padding: 20px;
    color: #030314;
    font-size: 12px;
    font-family: meslo_regular;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);
    text-align: left;
}

.tippy-tooltip.youtube-video-id-theme[data-animatefill] {
    background-color: transparent;
}

.tippy-tooltip.youtube-video-id-theme .tippy-backdrop {
    background-color: white;
}

/* Nav Icon Tooltip für Left Bar im Video Editor */

.tippy-tooltip.nav-icon-theme {
    background-color: #5AB49F;
    border-radius: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: white;
    font-size: 12px;
    font-family: meslo_regular;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}

.tippy-tooltip.nav-icon-theme[data-animatefill] {
    background-color: transparent;
}

.tippy-tooltip.nav-icon-theme .tippy-backdrop {
    background-color: #5AB49F;
}

/* Video Player Timeline Tooltip */

.tippy-tooltip.video-player-timeline-theme {
    background-color: #00AFE3;
    border-radius: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: white;
    font-size: 12px;
    font-family: meslo_regular;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}

.tippy-tooltip.video-player-timeline-theme[data-animatefill] {
    background-color: transparent;
}

.tippy-tooltip.video-player-timeline-theme .tippy-backdrop {
    background-color: #00AFE3;
}

/* For triangle arrow (Sharp) */
.tippy-popper[x-placement^=right] .tippy-tooltip.video-player-timeline-theme .tippy-arrow { border-right: 7px solid #00AFE3; }
.tippy-popper[x-placement^=left] .tippy-tooltip.video-player-timeline-theme .tippy-arrow { border-left: 7px solid #00AFE3; }
.tippy-popper[x-placement^=top] .tippy-tooltip.video-player-timeline-theme .tippy-arrow { border-top: 7px solid #00AFE3; }
.tippy-popper[x-placement^=bottom] .tippy-tooltip.video-player-timeline-theme .tippy-arrow { border-bottom: 7px solid #00AFE3; }