.calendar.template-4 {
    background: var(--section-background);
	margin: 0 auto;

	& .calendar-container {
        width: 100%;
    }

	& .section-title {
        padding: calc(var(--sectionTitle-padding-mobile-top, 0) * 1rem) calc(var(--sectionTitle-padding-mobile-right, 0) * 1rem) calc(var(--sectionTitle-padding-mobile-bottom, 0) * 1rem) calc(var(--sectionTitle-padding-mobile-left, 0) * 1rem);
        margin: var(--sectionTitle-margin-mobile-top, 1rem) var(--sectionTitle-margin-mobile-right, 0) var(--sectionTitle-margin-mobile-bottom, 1rem) var(--sectionTitle-margin-mobile-left, 0);
        font-size: calc(var(--sectionTitle-font-mobile-fontSize, 2) * 1rem);
        font-weight: var(--sectionTitle-font-mobile-fontWeight, 500);
        line-height: var(--sectionTitle-font-mobile-lineHeight, 1);
        text-align: var(--sectionTitle-font-mobile-textAlign, center);
        font-family: var(--sectionTitle-font-mobile-fontFamily, var(--heading-font-family));
        text-transform: var(--sectionTitle-font-mobile-textTransform, none);
    }

    & .section-desc {
        padding: calc(var(--sectionDesc-padding-mobile-top, 0) * 1rem) calc(var(--sectionDesc-padding-mobile-right, 0) * 1rem) calc(var(--sectionDesc-padding-mobile-bottom, 0) * 1rem) calc(var(--sectionDesc-padding-mobile-left, 0) * 1rem);
        margin: var(--sectionDesc-margin-mobile-top, 1rem) var(--sectionDesc-margin-mobile-right, 0) var(--sectionDesc-margin-mobile-bottom, 1rem) var(--sectionDesc-margin-mobile-left, 0);
        font-size: calc(var(--sectionDesc-font-mobile-fontSize, 1) * 1rem);
        font-weight: var(--sectionDesc-font-mobile-fontWeight, 500);
        line-height: var(--sectionDesc-font-mobile-lineHeight, 1);
        text-align: var(--sectionDesc-font-mobile-textAlign, center);
        font-family: var(--sectionDesc-font-mobile-fontFamily, var(--global-font-family));
        text-transform: var(--sectionDesc-font-mobile-textTransform, none);
    }

    & .amelia-v2-booking #amelia-container .am-fs-sb {
        background: var(--calendar-background);
    }

    & #am-step-booking-catalog0-calendar.am-select-date.am-show-calendar {
        background: var(--calendar-background);
    }

    & .amelia-app-booking #am-service-booking .am-service {
        background: var(--container-background) !important;
    }

    & .amelia-app-booking #am-service-booking .am-service-gallery {
        background-image: linear-gradient(90deg, var(--calendar-background), var(--calendar-background));
    }

    & #am-category .am-category-service .am-category-service-image {
        background-image: linear-gradient(90deg, var(--calendar-background), var(--calendar-background));
    }

    & .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking {
        background: var(--container-background) !important;
    }

    & .am-service-info div,
    .am-service-info span,
    .am-service h3,
    .am-service h2,
    .am-category-url,
    .am-category-title,
    .am-category span {
        color: var(--text-color, #000) !important;
    }

    & .am-confirmation-booking div,
    .am-confirmation-booking span,
    .am-confirmation-booking h2,
    .am-confirmation-booking p,
    .am-confirmation-booking label {
        color: var(--text-color, #000) !important;
    }

    & .el-button--primary,
    #am-continue-button,
    .amelia-app-booking #amelia-booking-wrap .el-button--primary.el-button {
        background-color: var(--btn1Color, #265CF2FF);

        &:hover {
            background-color: var(--btn1Color, #265CF2FF) !important;
        }

        & span {
            color: var(--btn1TextColor, #fff) !important;
        }
    }

    & .el-button--default {
        background-color: var(--btn2Color, #fff);

        &:hover {
            background-color: var(--btn2Color, #fff) !important;
        }

        & span {
            color: var(--btn2TextColor, #fff) !important;
        }
    }

    & .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-select-date .am-appointment-times .el-radio-button .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: var(--calendar-activeDate-color) !important;
        border-color: var(--calendar-activeDate-color) !important;
    }

    & .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-select-date .am-appointment-times .el-radio-button .el-radio-button__inner {
        background-color: var(--calendar-date-color);
        border-color: var(--calendar-date-color);
        color: var(--text-color, #000) !important;
    }

    & #am-catalog .am-category {
        background: var(--container-background) !important;
    }

    .am-category-headline span,
    .am-category-headline h3 {
        color: var(--text-color, #000) !important;
    }

    & .am-select-date-title,
    .c-title,
    .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-select-date * {
        color: var(--text-color, #000) !important;
    }

    & .el-input__inner {
        background: var(--input-background, #FFF) !important;
        background-color: var(--input-background, #FFF) !important;
        color: var(--text-color, #000) !important;
    }
}

@container page-container (min-width: 768px) {
    .calendar.template-4 {
        & .section-title {
            padding: calc(var(--sectionTitle-padding-tablet-top, 0) * 1rem) calc(var(--sectionTitle-padding-tablet-right, 0) * 1rem) calc(var(--sectionTitle-padding-tablet-bottom, 0) * 1rem) calc(var(--sectionTitle-padding-tablet-left, 0) * 1rem);
            margin: var(--sectionTitle-margin-tablet-top, 1rem) var(--sectionTitle-margin-tablet-right, 0) var(--sectionTitle-margin-tablet-bottom, 1rem) var(--sectionTitle-margin-tablet-left, 0);
            font-size: calc(var(--sectionTitle-font-tablet-fontSize, 2) * 1rem);
            line-height: var(--sectionTitle-font-tablet-lineHeight, 1);
            text-align: var(--sectionTitle-font-tablet-textAlign, center);
        }

        & .section-desc {
            padding: calc(var(--sectionDesc-padding-tablet-top, 0) * 1rem) calc(var(--sectionDesc-padding-tablet-right, 0) * 1rem) calc(var(--sectionDesc-padding-tablet-bottom, 0) * 1rem) calc(var(--sectionDesc-padding-tablet-left, 0) * 1rem);
            margin: var(--sectionDesc-margin-tablet-top, 1rem) var(--sectionDesc-margin-tablet-right, 0) var(--sectionDesc-margin-tablet-bottom, 1rem) var(--sectionDesc-margin-tablet-left, 0);
            font-size: calc(var(--sectionDesc-font-tablet-fontSize, 1) * 1rem);
            line-height: var(--sectionDesc-font-tablet-lineHeight, 1);
            text-align: var(--sectionDesc-font-tablet-textAlign, center);
        }
    }
}

@container page-container (min-width: 992px) {
    .calendar.template-4 {
        & .section-title {
            padding: calc(var(--sectionTitle-padding-desktop-top, 0) * 1rem) calc(var(--sectionTitle-padding-desktop-right, 0) * 1rem) calc(var(--sectionTitle-padding-desktop-bottom, 0) * 1rem) calc(var(--sectionTitle-padding-desktop-left, 0) * 1rem);
            margin: var(--sectionTitle-margin-desktop-top, 1rem) var(--sectionTitle-margin-desktop-right, 0) var(--sectionTitle-margin-desktop-bottom, 1rem) var(--sectionTitle-margin-desktop-left, 0);
            font-size: calc(var(--sectionTitle-font-desktop-fontSize, 2) * 1rem);
            line-height: var(--sectionTitle-font-desktop-lineHeight, 1);
            text-align: var(--sectionTitle-font-desktop-textAlign, center);
        }

        & .section-desc {
            padding: calc(var(--sectionDesc-padding-desktop-top, 0) * 1rem) calc(var(--sectionDesc-padding-desktop-right, 0) * 1rem) calc(var(--sectionDesc-padding-desktop-bottom, 0) * 1rem) calc(var(--sectionDesc-padding-desktop-left, 0) * 1rem);
            margin: var(--sectionDesc-margin-desktop-top, 1rem) var(--sectionDesc-margin-desktop-right, 0) var(--sectionDesc-margin-desktop-bottom, 1rem) var(--sectionDesc-margin-desktop-left, 0);
            font-size: calc(var(--sectionDesc-font-desktop-fontSize, 1) * 1rem);
            line-height: var(--sectionDesc-font-desktop-lineHeight, 1);
            text-align: var(--sectionDesc-font-desktop-textAlign, center);
        }
    }
}