/*! =========================================================
 * Description: WBTV Video Annotations Front end styling sheet
 * Author: WorkerBee.TV
 * Date created: June 6, 2022
 * @package WBTV Video Annotations
 * ========================================================= */

.wb-jw-va {
    pointer-events: all;
}

.wb-jw-va-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    height: 100%;
    width: 100%;
}

.wb-jw-va img {
    height: 100%;
    width: 100%;
}

.wb-jw-va .wb-va-text-content {
    line-height: 1.7;
}

.wb-jw-va .blank-content {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Single Annotations Styling  */
.wb-jw-va.wb-va-mini-top-right .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-right .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-top-left .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-left .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-top-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-center .wb-jw-va-pos-1 {
    position: absolute;
    width: 46% !important;
    height: 11% !important;
    max-width: 46% !important;
    max-height: 11% !important;
}

.wb-jw-va.wb-va-medium-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-top-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-bottom-center .wb-jw-va-pos-1 {
    position: absolute;
    width: 72% !important;
    height: 16% !important;
    max-width: 72% !important;
    max-height: 16% !important;
}

.wb-jw-va.wb-va-large-center .wb-jw-va-pos-1 {
    position: absolute;
    width: 72% !important;
    height: 33% !important;
    max-width: 72% !important;
    max-height: 33% !important;
}

.wb-jw-va.wb-va-16-9-center .wb-jw-va-pos-1 {
    position: absolute;
    width: 60% !important;
    height: 60% !important;
    max-width: 60% !important;
    max-height: 60% !important;
}

.wb-jw-va.wb-va-16-9-large-center .wb-jw-va-pos-1 {
    position: absolute;
    width: 80% !important;
    height: 80% !important;
    max-width: 80% !important;
    max-height: 80% !important;
}

.wb-jw-va.wb-va-mini-top-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-top-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-bottom-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-large-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-large-center .wb-jw-va-pos-1 {
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}

.wb-jw-va.wb-va-mini-top-right .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-right .wb-jw-va-pos-1 {
    right: 4%;
    text-align: right;
    transform: translate(0%, -50%);
}

.wb-jw-va.wb-va-mini-top-left .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-left .wb-jw-va-pos-1 {
    left: 4%;
    text-align: left;
    transform: translate(0%, -50%);
}

.wb-jw-va.wb-va-mini-top-left .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-top-right .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-top-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-top-center .wb-jw-va-pos-1 {
    top: 14%;
}

.wb-jw-va.wb-va-mini-bottom-left .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-right .wb-jw-va-pos-1,
.wb-jw-va.wb-va-mini-bottom-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-bottom-center .wb-jw-va-pos-1 {
    bottom: 3%;
}

.wb-jw-va.wb-va-medium-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-large-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-center .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-large-center .wb-jw-va-pos-1 {
    top: 50%;
}
/* Single Annotations Styling End */


/* Multiple Annotations Styling */

/* Medium Two-Up  */
.wb-jw-va.wb-va-medium-two-up {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 72% !important;
    width: 72% !important;
    height: 37% !important;
    max-height: 37% !important;
}

.wb-jw-va.wb-va-medium-two-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-three-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-three-up .wb-jw-va-pos-2 {
    margin-bottom: 0.8rem;
}

.wb-jw-va.wb-va-medium-two-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-two-up .wb-jw-va-pos-2 {
    width: 100% !important;
    height: 46% !important;
}

/* Medium Two-Up  */
.wb-jw-va.wb-va-medium-three-up {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 72% !important;
    width: 72% !important;
    height: 58% !important;
    max-height: 58% !important;
}

.wb-jw-va.wb-va-medium-three-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-three-up .wb-jw-va-pos-2,
.wb-jw-va.wb-va-medium-three-up .wb-jw-va-pos-3 {
    width: 100% !important;
    height: 30% !important;
}


/* 16:9 Two-Up  */
.wb-jw-va.wb-va-16-9-two-up {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 85% !important;
    width: 85% !important;
    height: 40% !important;
    max-height: 40% !important;
}

.wb-jw-va.wb-va-16-9-two-up .wb-jw-va-pos-1 {
    margin-right: 1.2rem;
}

.wb-jw-va.wb-va-16-9-two-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-two-up .wb-jw-va-pos-2 {
    display: inline-block;
    width: 46% !important;
    height: 100% !important;
}

/* Three-Up Grid */
.wb-jw-va.wb-va-three-up-grid {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 85% !important;
    width: 85% !important;
    height: 40% !important;
    max-height: 40% !important;
}

.wb-jw-va.wb-va-three-up-grid .wb-grid-col-1,
.wb-jw-va.wb-va-three-up-grid .wb-grid-col-2 {
    display: inline-block;
    width: 48% !important;
    max-width: 48% !important;
    height: 100% !important;
    max-height: 100% !important;
}

.wb-jw-va.wb-va-three-up-grid .wb-grid-col-1 {
    margin-right: 1.2rem;
}

.wb-jw-va.wb-va-three-up-grid .wb-grid-col-1 .wb-jw-va-pos-1 {
    width: 100% !important;
    height: 100% !important;
}

.wb-jw-va.wb-va-three-up-grid .wb-grid-col-2 .wb-jw-va-pos-2 {
    margin-bottom: 0.8rem;
}

.wb-jw-va.wb-va-three-up-grid .wb-grid-col-2 .wb-jw-va-pos-2,
.wb-jw-va.wb-va-three-up-grid .wb-grid-col-2 .wb-jw-va-pos-3 {
    width: 100% !important;
    height: 46% !important;
}

/* Medium Four-Up */
.wb-jw-va.wb-va-medium-four-up {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 78% !important;
    width: 78% !important;
    height: 37% !important;
    max-height: 37% !important;
}

.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-2,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-3,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-4,
.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-2 {
    margin-bottom: 0.8rem;
}

.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-3,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-5,
.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-3 {
    margin-right: 1.2rem;
}

.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-2,
.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-3,
.wb-jw-va.wb-va-medium-four-up .wb-jw-va-pos-4 {
    width: 48% !important;
    max-width: 48% !important;
    height: 46% !important;
    max-height: 46% !important;
}

/* 16:9 Four-Up */
.wb-jw-va.wb-va-16-9-four-up {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 84% !important;
    width: 84% !important;
    height: 88% !important;
    max-height: 88% !important;
}

.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-2 {
    margin-bottom: 1.2rem;
}

.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-3 {
    margin-right: 1.2rem;
}

.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-2,
.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-3,
.wb-jw-va.wb-va-16-9-four-up .wb-jw-va-pos-4 {
    width: 48% !important;
    max-width: 48% !important;
    height: 48% !important;
    max-height: 48% !important;
}

/* Medium Six-Up */
.wb-jw-va.wb-va-medium-six-up {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 78% !important;
    width: 78% !important;
    height: 58% !important;
    max-height: 58% !important;
}

.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-1,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-2,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-3,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-4,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-5,
.wb-jw-va.wb-va-medium-six-up .wb-jw-va-pos-6 {
    width: 48% !important;
    max-width: 48% !important;
    height: 30% !important;
    max-height: 30% !important;
}

/* Four-Up Grid */
.wb-jw-va.wb-va-four-up-grid {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    max-width: 84% !important;
    width: 84% !important;
    height: 58% !important;
    max-height: 58% !important;
}

.wb-jw-va.wb-va-four-up-grid .wb-grid-col-1,
.wb-jw-va.wb-va-four-up-grid .wb-grid-col-2 {
    display: inline-block;
    width: 48% !important;
    max-width: 48% !important;
    height: 100% !important;
    max-height: 100% !important;
}

.wb-jw-va.wb-va-four-up-grid .wb-grid-col-1 {
    margin-right: 1.2rem;
}

.wb-jw-va.wb-va-four-up-grid .wb-grid-col-1 .wb-jw-va-pos-1 {
    width: 100% !important;
    height: 100% !important;
}

.wb-jw-va.wb-va-four-up-grid .wb-grid-col-2 .wb-jw-va-pos-2,
.wb-jw-va.wb-va-four-up-grid .wb-grid-col-2 .wb-jw-va-pos-3 {
    margin-bottom: 0.8rem;
}

.wb-jw-va.wb-va-four-up-grid .wb-grid-col-2 .wb-jw-va-pos-2,
.wb-jw-va.wb-va-four-up-grid .wb-grid-col-2 .wb-jw-va-pos-3,
.wb-jw-va.wb-va-four-up-grid .wb-grid-col-2 .wb-jw-va-pos-4 {
    width: 100% !important;
    height: 30% !important;
}

.wb-opacity-0 {
    opacity: 0;
}