/* hero banner */
.webinar-hero-banner {
    max-height: 350px;
    min-height: 350px;
}

.webinar-hero-img {
    width: 100%;
    max-height: 350px;
    min-height: 350px;
}

.webinar-hero-img-bg {
    max-height: 350px;
    min-height: 350px;
}

.webinar-heading {
    position: absolute;
    top: 30px;
    left: 45px;
}

.w-170 {
    width: 170px !important;
}

/* webinar card */

.webinar-card-img {
    max-height: 250px;
    min-height: 250px;
    width: 100% !important;
}

.webinar-card {
    border: none;
    border-radius: 0;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%), 0 3px 6px rgb(0 0 0 / 10%);
}

.hr-line-webinar {
    width: inherit;
    height: 1px;
    margin: 29px 184px 35px 3px;
    background-image: linear-gradient(to right, #002f6d 1%, #175187 0%, #68cae1);
}

.color-success {
    color: green;
}

@media only screen and (max-width: 768px) {
    .mobile-p-0 {
        padding: 0px !important;
    }

    .mobile-font-10 {
        font-size: 10px !important;
    }

    .webinar-hero-img-bg {
        width: 100%;
        max-height: 350px;
        min-height: 350px;
    }

    .webinar-heading {
        position: absolute;
        top: 0;
        left: 0;
    }

        .webinar-heading h3 {
            font-size: 25px;
        }

        .webinar-heading .field-hero-content {
            font-size: 14px;
        }
}


/* form */
.register-section-webinar {
    background-color: #ebebeb;
    min-width: 450px;
    max-width: 475px;
    color: white;
    padding: 20px 40px;
    border-radius: 16px;
    color: #444444;
}

.register-privacy-webinar {
    font-style: italic;
    padding: 20px 8px;
    min-width: 300px;
    max-width: 400px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #dddddd;
}

.modal-close-form {
    text-align: end;
    padding: 10px 13px;
}

/* ------------- Webinar Landing Page ----------------- */
.webinar-month-view,
.webinar-filter-view {
    margin: auto;
    width: 70%;
}
    .webinar-filter-view .custom-select {
        webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
        background: none;
        padding: 0.375rem 1.75rem 0.375rem 0.3rem;
    }
.webinar__wrapper {
    width: 100%;
    
}

    .webinar__wrapper .webinar__tiles {
        width: 100%;
        background: #fff;
        box-shadow: 0 0 9px 0 rgba(134, 134, 134, 0.22);
        display: inline-block;
        text-decoration: none;
        border: none;
        border-radius: 0;
    }

    .webinar__wrapper .image__wrapper {
        width: 100%;
        height: 100%;
        position: relative;
    }

        .webinar__wrapper .image__wrapper img {
            position: absolute;
            max-height: 100%;
            width: 100%;
            /*object-fit: cover;*/
            object-fit: contain;
        }

    .webinar__wrapper .webinar__content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 20px 18px 18px 40px;
    }

.webinar__content .top-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0;
}

.date__time {
    display: flex;
    padding-left: 0;
}

    .date__time li {
        font-size: 14px;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.35;
        letter-spacing: normal;
        text-align: left;
        color: #707070;
        list-style: none;
        margin-right: 30px;
        position: relative;
    }

        .date__time li::after {
            border-right: solid 1px #d1d1d1;
            content: "";
            position: absolute;
            height: 20px;
            right: -15px;
            top: 1px;
        }

        .date__time li:last-child::after {
            display: none;
        }

.webinar__content .ondemand-title {
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
    color: #444444;
}

.webinar__content h6 {
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.36;
    letter-spacing: normal;
    text-align: left;
    color: #002f6d;
    margin-bottom: 10px;
}

.webinar__content p {
    font-size: 18px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.36;
    letter-spacing: normal;
    text-align: left;
    color: #002f6d;
}

.webinar__content hr {
    width: 80%;
    margin: 0 0 0 3px;
    height: 1px;
    background-image: linear-gradient(to right, #002f6d 1%, #175187 10%, #68cae1 60% );
}

.webinar__content .common__btn {
    min-width: 160px;
    height: 45px;
    margin: 25px 0 0 0;
    padding: 0.3rem 2rem 0.3rem 0.75rem;
    border-radius: 4px;
    background: var(--primary-green);
    border: none;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    display: flex;
    align-items: center;
}

    .webinar__content .common__btn i {
        font-size: 22px;
        margin-right: 15px;
    }


@media (max-width:1536px) {
    .webinar-month-view,
    .webinar-filter-view {
        width: 75%;
    }
}

@media (max-width:1366px) {
    .webinar-month-view,
    .webinar-filter-view {
        width: 80%;
    }

    .webinar__wrapper .image__wrapper img {
        object-fit: contain;
    }
}

@media (max-width:1199.98px) {
    .webinar-month-view,
    .webinar-filter-view {
        width: 85%;
    }
}

@media (max-width:991.98px) {
    .webinar-month-view,
    .webinar-filter-view {
        width: 90%;
    }
}

@media (max-width:768px) {

    .webinar-month-view,
    .webinar-filter-view {
        width: 100%;
    }

    .webinar__wrapper .date__time li,
    .webinar__content .ondemand-title,
    .webinar__wrapper .common__btn {
        font-size: 14px;
    }

    .webinar__wrapper .top-wrap {
        padding: 10px 4px;
    }

    .webinar__wrapper .date__time {
        display: flex;
        padding-left: 0;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

        .webinar__wrapper .date__time li:last-child {
            color: #444444;
            margin-right: 0;
            font-weight: 600;
            text-align: right;
        }

        .webinar__wrapper .date__time li:first-child {
            color: #707070;
            margin-right: 0;
            font-weight: 400;
            text-align: left;
        }

        .webinar__wrapper .date__time li::after {
            content: none;
        }

    .webinar__wrapper .webinar--tiles .img-pad {
        padding-left: 15px !important;
    }

    .webinar__wrapper .img-pad {
        padding-right: 0;
    }

    .webinar__wrapper .image__wrapper {
        height: 200px;
        padding: 0;
    }


    .webinar__wrapper .webinar__content {
        padding: 20px 4px;
    }

    .webinar__content h6 {
        font-size: 18px;
    }

    .webinar__content p {
        font-size: 16px;
        margin-bottom: 0;
    }

    .webinar__content hr {
        width: 100%;
        margin: 16px 0px 20px 0px;
        height: 1px;
    }

    .webinar__content .common__btn i {
        font-size: 22px;
        margin-left: 8px;
        margin-right: 0;
    }

    .webinar__content .common__btn {
        margin: auto 0;
        width: auto;
        height: 40px;
        padding: 0 12px;
        min-width: 132px;
    }

    .webinar__wrapper .image__wrapper img {
        object-fit: inherit;
    }
}



/*No Webinar To Display Component */

.no-webinar-row {
    width: 100%;
    
}

    .no-webinar-row .no-webinar-wrap {
        width: 100%;
        position: relative;
        padding: 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .no-webinar-row .no-webinar-wrap::before {
            content: "";
            background-size: 100%;
            position: absolute;
            top: 0;
            background-position: 0 40%;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.3;
        }

        .no-webinar-row .no-webinar-wrap .no-webinar-container {
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .no-webinar-row .no-webinar-description {
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: left;
        color: #444444;
        padding: 0 12% 0 12%;
        position: relative;
        
    }

        .no-webinar-row .no-webinar-description .no-webinar-title {
            color: #707070;
            font-size: 25px;
            padding-bottom: 1rem;
            font-weight: 600;
        }

    .no-webinar-row .no-webinar-button a {
        font-size: 18px;
    }

    .no-webinar-row .no-webinar-button a {
        color: var(--primary-green);
        cursor: pointer;
    }

        .no-webinar-row .no-webinar-button a:hover,
        .no-webinar-row .no-webinar-button a:focus,
        .no-webinar-row .no-webinar-button a:active {
            color: var(--primary-green);
            text-decoration: underline;
        }

    .no-webinar-row .no-webinar-button span {
        color: #707070;
        cursor: pointer;
    }

    .no-webinar-row .nowebinar-content-wrap {
        flex: 1;
    }

        .no-webinar-row .nowebinar-content-wrap.description-wrap {
            flex: 2;
        }

    .no-webinar-row .no-webinar-figure img {
        max-width: 320px;
    }

@media (max-width: 1536px) {
    .no-webinar-row .no-webinar-description {
        font-size: 18px;
    }

        .no-webinar-row .no-webinar-description .no-webinar-title {
            font-size: 22px;
            padding-bottom: 0.75rem;
        }

    .no-webinar-row .no-webinar-button a {
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    .no-webinar-row .no-webinar-wrap .no-webinar-container {
        width: 90%;
    }
}


@media (max-width: 767.98px) {
    .no-webinar-row .no-webinar-wrap .no-webinar-container {
        flex-direction: column;
    }

    .no-webinar-row .no-webinar-figure {
        margin-bottom: 20px;
    }

        .no-webinar-row .no-webinar-figure img {
            height: 140px;
        }

    .no-webinar-row .no-webinar-description {
        padding: 0;
        font-size: 14px;
        text-align: center;
    }

        .no-webinar-row .no-webinar-description .no-webinar-title {
            font-size: 20px;
            padding-bottom: 0.5rem;
        }

    .no-webinar-row .no-webinar-button a {
        font-size: 14px;
    }

    .no-webinar-row .no-webinar-wrap .no-webinar-container {
        width: 100%;
    }
}


/*skeletal loader*/

.webinar-list-loader .webinar-loader-item {
    width: 100%;
    background: #fff;
    box-shadow: 0 0 9px 0 rgba(134,134, 134,.22);
    max-width: 1094px;
}

.webinar-loader-content .one,
.webinar-list-loader .webinar-loader-image,
.webinar-loader-content .two,
.webinar-loader-content .three {
    position: relative;
    background-color: #CCC;
    height: 10px;
    margin: 15px 0px;
    animation-name: animate-template;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #f2f2f1), color-stop(18%, #d5d5d5), color-stop(33%, #f2f2f1));
    background: -webkit-linear-gradient(left, #f2f2f1 8%, #d5d5d5 18%, #f2f2f1 33%);
    background: linear-gradient(to right, #f2f2f1 8%, #d5d5d5 18%, #f2f2f1 33%);
    -webkit-background-size: 800px 104px;
}

.webinar-list-loader .webinar-loader-image {
    width: 100%;
    min-height: 160px;
    margin: 0px;
}

@keyframes animate-template {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}