@import url('./module.css');
.toolbar-icon-webpro-widgets-admin-clients-list::after,.toolbar-icon-webpro-widgets-admin-networks-list::after {
    content: '';
    display: inline-block;
    width: 80px;
    height: 20px;
    background-image: url('../icons/temp.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -10px;
}

/***********************************
default css
***********************************/
body {
    background: #fff !important;
    container-type: inline-size;
    container-name: body;
}

.layout-main .grid-full {
    display: block;
}

.layout-main .social-bar {
    display: none;
}

.page-wrapper, .layout-main .main-content {
    width: 100%;
    max-width: unset !important;
    padding: 0;
}

.layout-main .main-content .container {
    max-width: 1440px;
    margin-inline:auto; 
    padding: 0;
    padding-left: 10px;
    padding-right:10px;
}

.layout-main div, .layout-main .region > *:where(:not([data-big-pipe-placeholder-id])) {
    margin: 0;
}

* {
    box-sizing: border-box;
}
.layout-main :where(h1, h2, h3, h4, h5, h6, p, ul){
    margin:0;
    padding:0;
}
.layout-main #block-olivero-page-title {
    margin-block: 0 50px; 
}

.layout-main .page-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
}

footer.site-footer {
    display: none;
}
/*margin*/
.mxs-1{
  margin-left: 5px !important;
}
.mxs-2{
  margin-left: 10px !important;
}
.mxs-3{
  margin-left: 15px !important;
}
.mxs-4{
  margin-left: 20px !important;
}
.mxs-5{
  margin-left: 25px !important;
}
.mxs-6{
  margin-left: 30px !important;
}
.mxe-1{
  margin-right: 5px !important;
}
.mxe-2{
  margin-right: 10px !important;
}
.mxe-3{
  margin-right: 15px !important;
}
.mxe-4{
  margin-right: 20px !important;
}
.mxe-5{
  margin-right: 25px !important;
}
.mxe-6{
  margin-right: 30px !important;
}
.mys-1{
  margin-top: 5px !important;
}
.mys-2{
  margin-top: 10px !important;
}
.mys-3{
  margin-top: 15px !important;
}
.mys-4{
  margin-top: 20px !important;
}
.mys-5{
  margin-top: 25px !important;
}
.mys-6{
  margin-top: 30px !important;
}
.mye-1{
  margin-bottom: 5px !important;
}
.mye-2{
  margin-bottom: 10px !important;
}
.mye-3{
  margin-bottom: 15px !important;
}
.mye-4{
  margin-bottom: 20px !important;
}
.mye-5{
  margin-bottom: 25px !important;
}
.mye-6{
  margin-bottom: 30px !important;
}
/***********************************
EVENT COLOR
***********************************/
:root {
    --ev-calendar-background-colour: #1d2c5d;
    --ev-calendar-year-background-colour: #9cc1e2;
    --ev-calendar-year-text-colour: #fff;
    --ev-calendar-date-background-colour: #fff;
    --ev-event-title-colour: #1d2c5d;
    --ev-event-body-colour: #868688;
    --ev-event-start-background-colour: #e1f1ff;
    --ev-event-start-text-colour: #1d2c5d;
}

/***********************************
BUTTON
***********************************/
body .event-btn,
body:has(form.webpro-forms-display-custom-form, form.book-event-form, .event-wrap) form .button{
    height: auto;
    display: inline-flex;
    background-color: var(--ev-event-title-colour);
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    padding-block: 26px; padding-inline: 60px; border-radius: 70px;
    transition: all 0.3s;
    border: 1px solid var(--ev-event-title-colour);
    border-width: 1px !important;
    outline: 0 !important;
}
body .event-btn:hover,
body:has(form.webpro-forms-display-custom-form, form.book-event-form, .event-wrap) form .button:hover{
    background-color: #fff;
    color: var(--ev-event-title-colour);
    font-weight: 500;
    letter-spacing: 1px;
}
@container body (max-width: 767px) {
    body .event-btn,
    body:has(form.webpro-forms-display-custom-form, form.book-event-form, .event-wrap) form .button{
        font-size:16px;
        padding-block:15px;
        padding-inline:30px;
    }
}
/***********************************
EVENT CARD
***********************************/
.event-display-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    grid-gap: 50px;
    padding-right: calc(85px / 2 + 15px);
    padding-bottom: 15px;
}

.event-display-list li {
    list-style: none;
}

.event-display-list .list-item {
    --ev-arrow-width: 85px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 10px;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.16);
    border-radius: 15px;
    padding: 15px;
    padding-right: calc(var(--ev-arrow-width) / 2 + 15px);
    position: relative;
}

/*calander*/
.event-display-list .list-item .list-date {
    width: 130px;
    height: 130px;
    background-color: var(--ev-calendar-background-colour);
    color: #fff;
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
}

.event-display-list .list-item .list-date .year {
    background-color: var(--ev-calendar-year-background-colour);
    position: absolute;
    top: -5px;
    inset-inline: 0;
    font-size: 12px;
    width: 70px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1;
    color: var(--ev-calendar-year-text-colour);
    margin-inline:auto; padding: 5px 5px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.event-display-list .list-item .list-date .year .year-shape {
    width: 15px;
    height: 5px;
    background-color: inherit;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.event-display-list .list-item .list-date .year .year-left-shape {
    left: -10px;
    border-top-left-radius: 5px;
}

.event-display-list .list-item .list-date .year .year-right-shape {
    right: -10px;
    border-top-right-radius: 5px;
}

.event-display-list .list-item .list-date .year .year-shape::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
}

.event-display-list .list-item .list-date .year .year-left-shape::after {
    left: 0;
}

.event-display-list .list-item .list-date .year .year-right-shape::after {
    right: 0;
}

.event-display-list .list-item .list-date .date {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 600;
    color: var(--ev-calendar-date-text-colour);
    display: block;
}

.event-display-list .list-item .list-date .month {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ev-calendar-date-text-colour);
    display: block;
}

/*image*/
.event-display-list .list-item .list-icon {
    width: 230px;
    min-height: 130px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 15px;
}

.event-display-list .list-item .list-icon img {
    width: 100%;
    height: auto;
    position: absolute;
    object-fit: cover;
    object-position: top;
    transition: all 0.3s;
}

/*body*/
.event-display-list .list-item .list-body {
    min-width: 300px;
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}

.event-display-list .list-item .list-body .title {
    font-size: 24px;
    font-weight: 600;
    color: var(--ev-event-title-colour);
}

.event-display-list .list-item .list-body .body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ev-event-body-colour);
}

.event-display-list .list-item .list-body .body p {
    all: inherit;
    margin-block:10px 0; display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-display-list .list-item .list-body .timing {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0 10px;
    background-color: var(--ev-event-start-background-colour);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    color: var(--ev-event-start-text-colour);
    padding: 5.5px 15px;
    border-radius: 25px;
}

.event-display-list .list-item .list-body .timing i {
    font-size: 14px;
}

/*arrow button*/
.event-display-list .list-item .list-link {
    display: flex;
    justify-content: center;
    /* height: 0; */
}

.event-display-list .list-item .list-link .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--ev-arrow-width);
    height: var(--ev-arrow-width);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc((var(--ev-arrow-width) - var(--ev-arrow-width) * 2) / 2);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.09);
    border-radius: 50%;
    margin: auto;
    background-color: #fff;
    transition: all 0.3s;
    font-size: 40px;
    color: var( --ev-event-title-colour);
    text-decoration: none;
}

.event-display-list .list-item .list-link .arrow:hover {
    color: #fff;
    background-color: var(--ev-event-title-colour);
}

@container body (max-width: 525px) {
    .event-display-list{
        padding-right: 0;
        padding-bottom: 50px;
    }
    .event-display-list .list-item {
        --ev-arrow-width: 60px;
        flex-direction: column;
        align-items: center;
        padding-right: 15px;
        padding-bottom: calc(var(--ev-arrow-width) / 2 + 0px);
    }

    .event-display-list .list-item .list-icon {
        width: 100%;
        margin-right: 0;
    }
    .event-display-list .list-item .list-body{
        width:100%;
        min-width: unset;
    }
    .event-display-list .list-item .list-link .arrow {
        inset-inline: unset;
        top: auto;
        bottom: calc((var(--ev-arrow-width) - var(--ev-arrow-width) * 2) / 2);
        font-size: 30px;
    }
}

/***********************************
EVENT DETAILS
***********************************/
.event-details-body {
    padding-bottom: 15px;
}

.event-details-body .back-to-list a,
.book-event-form .back-with-arrow{
    display: inline-flex;
    align-items: center;
    grid-gap: 5px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--ev-event-title-colour);
    text-decoration: none;
    margin-bottom: 30px;
    transition: all 0.3s;
    outline: 0 !important;
}

.event-details-body .back-to-list a:hover,
.book-event-form .back-with-arrow:hover{
    color: #000;
}

.event-details-body .event-img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.event-details-body .event-title {
    margin-top: 50px;
    font-size: 50px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ev-event-title-colour);
}

.event-details-body .event-info {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 25px;
}

.event-details-body .yearly {
    font-size: 28px;
    line-height: 0;
    font-weight: 600;
    color: var(--ev-event-title-colour);
}

.event-details-body .yearly i {
    margin-right: 10px;
}

.event-details-body .timing {
    height: 45px;
    display: inline-flex;
    align-items: center;
    gap: 0 10px;
    background-color: var(--ev-event-start-background-colour);
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    color: var(--ev-event-start-text-colour);
    padding: 5.5px 15px;
    border-radius: 25px;
}

.event-details-body .timing i {
    font-size: 24px;
}

.event-details-body .flyer {
    display: inline-flex;
    align-items: center;
    grid-gap: 5px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ev-event-title-colour);
    text-decoration: none;
}

.event-details-body .flyer i {
    font-size: 24px;
}

.event-details-body .event-body {
    margin-top: 30px;
}

.event-details-body .event-body p {
    font-size: 16px;
    color: var(--ev-event-body-colour);
    margin-block:0 15px; }

.event-details-body .event-body p a {
    color: var(--ev-event-title-colour);
}

.event-details-body .event-body p a:hover {
    color: inherit;
}

.event-details-body .book-btn {
    margin-top: 30px;
}

@container body (max-width: 525px) {
    .event-details-body .event-title{
        margin-top:30px;
        font-size:30px;
    }
    .event-details-body .event-info{
        margin-top:20px;
        grid-gap: 15px;
    }
    .event-details-body .yearly{
        font-size:20px;
    }
    .event-details-body .yearly i{
        margin-right:0;
    }
    .event-details-body .timing{
        height: 30px;
        font-size: 12px;
    }
    .event-details-body .timing i{
        font-size: 16px;
    }
    .event-details-body .flyer i{
        font-size:16px;
    }
    .event-details-body .book-btn {
        margin-top: 15px;
    }
}

/***********************************
FORM ELEMENTS
***********************************/
.fields-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0 30px;
}
.field-col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.field-col-3 {
    grid-template-columns: repeat(3, 1fr);
}
.field-col-4 {
    grid-template-columns: repeat(4, 1fr);
}
@container body (max-width: 767px) {
    .field-col-2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .field-col-3 {
        grid-template-columns: repeat(1, 1fr);
    }
    .field-col-4 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/***********************************
DONATION WIDGET
***********************************/
body.path-donation{
    background-color: transparent !important;
}
body.path-donation .layout-container{
    max-width: calc(var(--dn-widget-width) * 1px);
    margin-inline: auto;
    background-image: var(--dn-background-image);
    border-radius: calc(var(--dn-border-radius) * 1px);
    overflow: hidden;
}
body.path-donation .layout-container::after{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--dn-background-color);
    opacity: var(--dn-background-opacity);
    mix-blend-mode: multiply;
}
body.path-donation .layout-container .layout-main{
    position: relative;
    z-index: 1;
    padding-block: 100px;
}
body.path-donation :where(h2, h4){
    color: var(--dn-title-color);
}
body.path-donation h2{
    font-size:46px;
}
/**/
body.path-donation #edit-amount-section{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    /* grid-gap: 30px; */
}
body.path-donation #edit-amount-section h2,
body.path-donation #edit-amount-section .fields-wrap{
    width: 50%;
}
body.path-donation #edit-amount-section .fields-wrap{
    padding-left:15px;
}
/**/
body.path-donation #edit-gift-aid-section{
    color: var(--dn-title-color);
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    grid-gap: 10px;
    margin-block: 25px;
}
body.path-donation #edit-gift-aid-section h4{
    margin:0;
}
body.path-donation #edit-gift-aid-section > p{
    width:100%;
} 
body.path-donation #edit-gift-aid-section fieldset,
body.path-donation #edit-gift-aid-section fieldset .fieldset__legend,
body.path-donation #edit-gift-aid-section fieldset .fieldset__legend .fieldset__label,
body.path-donation #edit-gift-aid-section fieldset .fieldset__wrapper{background-color: transparent;border: 0;margin: 0;padding: 0;width: auto;font-weight: 400;color: var(--dn-title-color);}
body.path-donation #edit-gift-aid-section fieldset{
    display: flex !important;
    align-items: center;
    grid-gap: 15px;
}
body.path-donation #edit-gift-aid-section fieldset .fieldset__wrapper{
    flex-shrink:0;
}
/***********************************
DONATION FORM
***********************************/
form:is(.webpro-widgets-display-donation-form){
    padding-inline: 30px;
}
form:is(.webpro-widgets-display-donation-form) .form-item{
    margin-block:0 20px;
}
form:is(.webpro-widgets-display-donation-form) h4{
    font-size: 24px;
    margin-bottom: 17px;
}
/*input*/
form:is(.webpro-widgets-display-donation-form) .form-item input:not([type="checkbox"], [type="radio"]),
form:is(.webpro-widgets-display-donation-form) .form-item textarea,
form:is(.webpro-widgets-display-donation-form) .form-item select{
    display: inline-block;
    width:100%;
    border: 1px solid var(--dn-input-bg-color);
    background-color: var(--dn-input-bg-color);
    border-radius: 0;
    font-size:18px;
    font-weight: 600;
    color: var(--dn-input-text-color);
    padding: 5px 20px;
    outline:0;
    opacity: 1;
}
form:is(.webpro-widgets-display-donation-form) .form-item input:not([type="checkbox"], [type="radio"])::placeholder,
form:is(.webpro-widgets-display-donation-form) .form-item textarea::placeholder{
    color: var(--dn-input-text-color);
    opacity: 1;
}
/*label*/
form:is(.webpro-widgets-display-donation-form) .form-item label.form-item__label {
    display: none;
    font-size: 16px;
    color: var(--dn-input-text-color);
    margin-block: 0 10px;
}
/*checkbox*/
form:is(.webpro-widgets-display-donation-form) .form-boolean-group{
    display: flex;
    grid-gap: 15px;
}
form:is(.webpro-widgets-display-donation-form) .form-item.form-type-boolean{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    grid-gap:15px;
    position: relative;
    margin: 0;
}
form:is(.webpro-widgets-display-donation-form) .form-item.form-type-boolean input{
    all: unset;
    flex-shrink:0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--dn-input-bg-color);
    background-color: transparent;
    border: 1px solid var(--dn-input-bg-color);
    cursor:pointer;
}
form:is(.webpro-widgets-display-donation-form) .form-item.form-type-boolean input::after{
    content: '\f00c';
    font-family: "Font Awesome 6 Pro";
    opacity:0;
}
form:is(.webpro-widgets-display-donation-form) .form-item.form-type-boolean input:checked::after{
    opacity:1;
}
form:is(.webpro-widgets-display-donation-form) .form-item.form-type-boolean label{
    width: calc(100% - 36px - 20px);
    font-size:18px;
    font-weight: 600;
    color:var(--dn-input-bg-color);
    margin:0;
    padding: 0;
}
form:is(.webpro-widgets-display-donation-form) .form-item.form-type-boolean .form-item--error-message {
    width: 100%;
}
body.path-donation form:is(.webpro-widgets-display-donation-form) #edit-amount-section .fields-wrap:has(.form-item-donation-type){
    grid-template-columns: repeat(1, 1fr);
}
form:is(.webpro-widgets-display-donation-form) .form-item-donation-type{
    display: none;
}
form:is(.webpro-widgets-display-donation-form) .form-item.form-item-gift-aid label{
    display: block;
    width: 40px;
}
/**/
form:is(.webpro-widgets-display-donation-form) .donation-from-card-and-action{
    display: flex;
    flex-wrap:wrap;
    grid-gap: 30px 0;
}
form:is(.webpro-widgets-display-donation-form) .donation-from-card-and-action #edit-credit-card-section{
    width: 100%;
    /* width: calc(100% - 430px); */
    height: 101px;
    padding-right: 20px;
}
form:is(.webpro-widgets-display-donation-form) .donation-from-card-and-action #edit-credit-card-section #checkout-form{
    max-width: 767px;
}
form:is(.webpro-widgets-display-donation-form) .captcha{
    margin-right: 30px;
}
form:is(.webpro-widgets-display-donation-form) #paypalPayDonationBtn{
    all: unset;
    display: inline-block;
    width: auto;
    height: auto;
    border: 1px solid var(--dn-input-bg-color);
    background-color: var(--dn-input-bg-color);
    border-radius: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--dn-input-text-color);
    padding: 18px 40px 18px 20px;
    outline: 0;
    margin: 0;
    transition:all 0.3s;
    cursor: pointer;
}
form:is(.webpro-widgets-display-donation-form) #paypalPayDonationBtn:hover{
    background-color:var(--dn-input-text-color);
    color:#fff;
}
form:is(.webpro-widgets-display-donation-form) .paypalPayDonationBtn-wrap{
    margin-block: 5px auto;
    position:relative;
    color:var(--dn-input-text-color);
}
form:is(.webpro-widgets-display-donation-form) .paypalPayDonationBtn-wrap::after{
    content:"\f0da";
    position:absolute;
    font-family: "Font Awesome 6 Pro";
    top: 50%;
    right: 11px;
    font-size: 38px;
    font-weight: 900;
    color: inherit;
    transform: translateY(-50%);
}
form:is(.webpro-widgets-display-donation-form) .paypalPayDonationBtn-wrap:hover::after{
    color:#fff;
}
@container body (max-width: 767px) {
    form:is(.webpro-widgets-display-donation-form){
        padding-inline: 15px;
    }
    body.path-donation .layout-container .layout-main {
        padding-block: 50px;
    }
    body.path-donation #edit-amount-section h2{
        width: 100%;
    }
    body.path-donation #edit-amount-section .fields-wrap{
        margin-top: 30px;
        width: 100%;
        padding-left: 0;
    }
    form:is(.webpro-widgets-display-donation-form) .donation-from-card-and-action{
        grid-gap: 0px 0;
    }
    form:is(.webpro-widgets-display-donation-form) .donation-from-card-and-action #edit-credit-card-section{
        width: 100%;   
        height: auto;
        padding-right: 0;
    }
}
/***********************************
ERROR
***********************************/
form .form-item .form-item--error-message {
    font-size: 14px;
    color: #ff0000;
    margin-block: 5px 0;
    padding-left: 0;
    background-image: unset;
}
form .form-item .form-item--error-message::before{
    content: "\f06a";
    font-family: "Font Awesome 6 Sharp";
    font-size: 16px;
    font-weight: 700;
}
/***********************************
ANYTHING BY KARUN AND NEED TO LOOK BY YOGESH
***********************************/
form .tmp-text-to-colour-field{width: 100%}

/***********************************
CUSTOM DROPDOWN
***********************************/
.select2.select2-container{
    width: 100%;
}
.select2-container .select2-selection{
    width: 100%;
    min-height: var(--sp3);
    display: flex;
    align-items: center;
    border: 1px solid var(--dn-input-bg-color);
    background-color: var(--dn-input-bg-color);
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dn-input-text-color);
    padding: 5px 20px;
    outline: 0;
    opacity: 1;
}
.select2-container .select2-selection .select2-selection__rendered{
    color: inherit;
    line-height: inherit;
    padding: 0;
}
/*arrow*/
.select2-container--default .select2-selection__arrow b {
  display: none !important;
}
.select2-container--default .select2-selection--single::after {
  content: "\f107";
  font-family: "Font Awesome 6 Pro"; 
  font-weight: 900; 
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--dn-input-text-color);
  pointer-events: none;
}
/*dropdown*/
.select2-dropdown{
    border: 0;
}
/*option*/
.select2-results .select2-results__options .select2-results__option{
    font-size: 16px;
    font-weight: 500;
    color: var(--dn-input-text-color);
    padding: 5px 20px;
    background-color: var(--dn-input-bg-color);
}
.select2-container--default .select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option.select2-results__option--highlighted{
    color: var(--dn-dropdown-color);
    background-color: var(--dn-dropdown-hover-color);
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, 
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, 
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}