/* font-reset */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p, .p,
dl , dt , dd {
    margin: 0;
}


body { 
    color: #4D4D4D;
}

.c-mint {color: #45C2B1}

.c-remark {color: #f32b3c;}

.outbound-traveller {
    font-family: "kurious-looped-cond";
}
/* ===================== container ===================== */
.container {padding-left: 16px;padding-right: 16px;}

img {width: 100%;}

/* ===================== sc-header ===================== */
header {position: sticky; top: 0; z-index: 10000; }
#header-kplus .header-inner {min-height: 44px; width: 100%; position: relative; border-radius:  0 0 8px 8px; background-image: url(../img/bg-header.jpg); background-repeat: no-repeat; background-size: cover;    display: grid;align-items: center; justify-content: center;}
#header-kplus .button-back {width: 44px; height: 44px; position: absolute; top: 50%; transform: translateY(-50%); left: 4px;}
#header-kplus .header-title {color: #ffffff; font-weight: 600; font-size: 20px; line-height: 31.74px; font-family: "kurious-looped-cond"; margin: 0;}

@media screen and (min-width: 200px) {
/* ===================== sc-banner ===================== */
    .sc-banner .sc-inner {padding-top: 16px; padding-bottom: 16px;}
    .sc-banner .banner-swiper .banner-swiper-image {position: relative;overflow: hidden;padding-top: 33.333%;border-radius: 8px; display: block;}
    .sc-banner .banner-swiper .banner-swiper-image img {position: absolute;width: 100%;height: auto;top: 50%;transform: translateY(-50%);left: 0;}

    .sc-banner .banner-swiper .swiper-pagination {display: flex; align-items: center;justify-content: center; gap: 9px; position: static;  margin-top: 8px;}
    .sc-banner .banner-swiper .swiper-pagination .swiper-pagination-bullet {background-color: #4D4D4D; width: 7px;height: 7px; margin: 0;}
    .sc-banner .banner-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {opacity: 1; background-color: #4D4D4D;}

/* ===================== flatpickr custom ===================== */
    .flatpickr-calendar.inline {border-radius: 0; background-color: unset; box-shadow: none; max-width: 312px; top: 0;}
    .flatpickr-calendar {width: 328px;}
    .flatpickr-innerContainer {justify-content: center;}
    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay,
    .rangeMode .flatpickr-day.prevMonthDay,
    .rangeMode .flatpickr-day.nextMonthDay {opacity: 0; visibility: hidden; }
    .flatpickr-day.nextMonthDay,
    .rangeMode .flatpickr-day.nextMonthDay {display: none;}
    .rangeMode .flatpickr-day {max-width: 40px; width: 40px; max-height: 40px; height: 40px; border: 0; font-size: 15px; font-weight: 600; line-height: 23.81px; color: #4D4D4D;display: flex;align-items: center;}
    .dayContainer {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: 8px;}
    .flatpickr-days {overflow: visible;}

    .calendar-perview {background-color: #ffffff; display: flex;justify-content: space-between;}
    .calendarContainer {background-color: #ffffff;}
    .sc-popup-default .sc-heading .calendar-label,
    .sc-popup-default .sc-heading .perview-result-date {text-align: start;}
    .calendar-perview-container.has-value .perview-result-date { position: absolute; left: 16px; bottom: 8px; font-size: 15px; font-weight: 600;line-height: 23.81px; color: #4D4D4D; height: 17px;}
    .calendar-perview-container .calendar-label {font-size: 15px; font-weight: 500; line-height: 23.81px;color: #808080; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); transition: all 0.2s ease-in-out;}
    .calendar-perview-container.has-value .calendar-label  {top: 8px; transform: unset; font-size: 12px; font-weight: 500; line-height: 19.04px;height: 17px;}
    .calendar-perview-container { border-radius: 8px; border: 1px solid #DBDBDB; height: 52px; max-width: 140px; width: 100%; position: relative; padding: 0 16px;}
    .calendar-perview-container.active {border-color: #45C2B1;}
    .flatpickr-calendar.open {position: fixed;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%);}
    .flatpickr-calendar.arrowTop:before {display: none !important;}
    .flatpickr-calendar.arrowTop:after {display: none !important;}
    .flatpickr-current-month .numInputWrapper {width: auto;}
    .flatpickr-current-month {padding: 0;}
    .numInputWrapper span.arrowDown{display: none !important;}
    .numInputWrapper span.arrowUp{display: none !important;}
    .numInputWrapper span,
    .flatpickr-current-month span.cur-month{cursor: auto;font-size: 20px;line-height: 31.74px;font-weight: 600;opacity: 1;height: auto;width: auto;padding: 0;position: relative;border: 0;margin: 0; margin-left: 7px; color: #4D4D4D;}
    .flatpickr-current-month {height: 28px;}

    .flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month {padding: 0; display: flex; justify-content: center; align-items: center;height: fit-content;}
    
    .flatpickr-weekdays {height: 32px; margin-top: 8px; margin-bottom: 8px;}
    .flatpickr-months .flatpickr-month {height: 28px;}
    span.flatpickr-weekday {font-size: 18px; font-weight: 600; line-height: 28.57px; }
    .flatpickr-months {padding-bottom: 8px; border-bottom: 1px solid #EBEBEB;}
    .flatpickr-day.selected {background-color: #45C2B1; color: #FFFFFF;}
    .flatpickr-day.selected.startRange, 
    .flatpickr-day.startRange.startRange,
    .flatpickr-day.endRange.startRange {position: relative;}
    .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {border-radius: 0;}
    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {background-color: unset; color: #FFFFFF; z-index: 100;}
    .flatpickr-day.inRange {-webkit-box-shadow: -18px 0 0 #DAF3EF, 22px 0 0 #DAF3EF;box-shadow: -18px 0 0 #DAF3EF, 22px 0 0 #DAF3EF;}
    .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {    background: #DAF3EF;border-color: #DAF3EF;}
    /* .flatpickr-day, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay:focus {background-color: unset;} */
    .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {box-shadow:unset; position: relative;}
    .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1))::before, .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1))::before {content: "";  }
    .flatpickr-day:hover {background: unset;}
    .flatpickr-day.inRange:hover {background: #DAF3EF;border-color: #DAF3EF;}
    /* .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1))::before, .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1))::before {width: 72%;right: 37%;left: auto; } */
    #input-calendar .sc-heading {border-bottom: 0;}
    .custom-day {position: relative; z-index: 1;}
    /* .flatpickr-day.selected.startRange::before {content: ""; position: absolute;width: 50%;right: 0; height: 100%;background-color: #DAF3EF; z-index: -1;}
    .flatpickr-day.selected.endRange::before {content: ""; position: absolute;width: 50%;left: 0; height: 100%;background-color: #DAF3EF; z-index: -1;} */
    .flatpickr-day.selected::after,
    .flatpickr-day.startRange::after {content: "";position: absolute;width: 100%;right: 0;height: 100%;background-color: #45C2B1;z-index: -1;border-radius: 50%;}
    .flatpickr-day.endRange::after {content: ""; position: absolute;width: 100%;left: 0; height: 100%;background-color: #45C2B1;z-index: -1;border-radius: 50%;}
    .calendarContainer { padding-bottom: 8px;}
    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover {color: #B3B3B3;}

    /* ===================== .slide-picker ===================== */
    .slide-picker {width: 100%;height: 100%;position: relative;}
    .slide-picker::after {content: '';position: absolute;top: calc(50% - 20px);transform: translateY(-50%);height: 1px;width: 100%;background: #45C2B1;z-index: 1;}
    .slide-picker::before {content: '';position: absolute;top: calc(50% + 20px);transform: translateY(-50%);height: 1px;width: 100%;background: #45C2B1;z-index: 2;}
    .slide-picker .swiper-slide {text-align: center;font-size: 15px;background: #fff;display: flex;justify-content: center;align-items: center;transition: all 0.05s ease-in-out;}
    .slide-picker .swiper-slide-active {font-size: 18px;}
    /* ===================== peopleCount ===================== */
    .peopleCount-container {max-width: 295px; width: 295px;}
    .peopleCount-container .slide-picker-input{height: 232px;overflow: hidden; width: 100%; padding-left: 32px; padding-right: 32px;}

    /* ===================== version-alert ===================== */
    .version-alert-container {display: grid; grid-template-columns: 20px 1fr; padding: 8px 12px; background-color: #FFF3CC; color: #E29C0F; gap: 4px; border-radius: 8px; margin-bottom: 16px;}
    .version-alert-container .content {font-weight: 600;font-size: 14px;line-height: 22.22px; }

    /* ===================== heading-banner ===================== */
    .heading-banner {position: relative; position: relative; text-align: start; max-width: 576px; margin: 0 auto; /* width: 100%; */ padding: 16px 16px; margin-bottom: -15px;}
    .heading-banner::before {content: ""; background: url(/SiteCollectionDocuments/webview_kplus/multi-offer/img/health-insurance_kplus_illus.png) no-repeat; background-size: contain; background-position: right center; width: 100%; height: 100%; position: absolute; top: 0; right: 0; }
    .heading-banner .title {color: #333333; font-size: 18px;font-weight: 600;margin-bottom: 4px;}
    .heading-banner .desc {color: #45c2b1; font-size: 14px;font-weight: 700;}
}