.op3-element[data-op3-element-type="webinardate"] {
    display: table;
    margin: 0 auto;
    width: 100%;

    [data-op3-element-container] {
        display: flex;
        visibility: hidden;
        align-items: center;
        justify-content: center;

        &.op3-active {
            visibility: visible;
        }

        .op3-webinar-month-box {
            position: relative;
            display: flex;
            flex-direction: column;
            margin: 10px;
            width: 70px;
            height: 80px;
            background-color: #fff;
            text-align: center;
            overflow: hidden;
            margin-right: 15px;

            .op3-webinar-month {
                height: 30%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                text-transform: capitalize;
            }

            .op3-webinar-day {
                height: 70%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px 10px;
            }
        }

        .op3-webinar-timezone {
            margin-bottom: 0px;
        }

        .op3-webinar-timezone p {
            font-size: inherit !important;
            font-weight: inherit !important;
            font-family: inherit !important;
            color: inherit !important;
        }

        .separator-wrapper {
            display: inline-block;
        }

        .op3-webinar-timezone-value {
            display: inline;
        }
    }
}

// To satisfy Typography Control Panel we must use stronger
// CSS selector for webinardate paragraphs.
html[data-op3-support] #op3-designer-element .op3-element[data-op3-element-type="webinardate"] {
    p {
        margin: 0;
    }

    .op3-webinar-month,
    .op3-webinar-day,
    .op3-webinar-date {
        margin-bottom: 0px;
    }
}