body p {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
}



/* ========================================
        Navbar Alternative
======================================== */
.navbar-alt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-main);
    min-height: 60px;
}
.navbar-alt__close-btn {
    padding: 8px;
    text-decoration: none;
    color: var(--neutral-80);
    transition: color 0.25s ease-in-out;
}
.navbar-alt__close-btn > i {
    display: block;
    font-size: 20px;
    width: 20px;
    height: 20px;
}
.navbar-alt__close-btn:hover {
    color: var(--neutral-100);
}



/* ========================================
        Show Password
======================================== */
.show-password .eye-open,
.show-password.is-shown .eye-close {
    display: none;
}
.show-password .eye-close,
.show-password.is-shown .eye-open {
    display: inline;
}


/* ========================================
        Input Icon
======================================== */
.input--icon .good,
.input--icon .wrong {
    display: none;
}
.input--icon.is-shown.good .good {
    display: inline;
}
.input--icon.is-shown.wrong .wrong {
    display: inline;
}


/* ========================================
        Pricelist Table
======================================== */
.pricelist__table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #FFFFFF;
    border-radius: 30px;
    padding: 8px 0px;
    isolation: isolate;
    -ms-overflow-style: none; 
    scrollbar-width: none;
}
.pricelist__table-wrapper::-webkit-scrollbar { 
    display: none;
}

.pricelist__table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    transition: opacity 0.3s ease-in-out;
}
.pricelist__table tr {
    transition-duration: 0.25s;
    transition-property: background;
}
.pricelist__table th,
.pricelist__table td {
    padding: 24px 16px;
    font-size: var(--fs-text-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text-xl);
    color: var(--neutral-100);
    position: relative;
}
.pricelist__table th {
    font-weight: var(--fw-semibold);
}
.pricelist__table th:nth-child(1),
.pricelist__table td:nth-child(1) {
    width: 100px;
    white-space: nowrap;
}
.pricelist__table th:nth-child(3),
.pricelist__table td:nth-child(3) {
    width: 180px;
    white-space: nowrap;
}

.pricelist__table .pricelist--thead {
    background: var(--neutral-20);
}
.pricelist__table .pricelist--bullet {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0px auto;
    border-radius: 50px;
    margin-right: 12px;
    background: var(--neutral-40);
    border: 1px solid var(--neutral-10);
    position: relative;
    transition: 0.2s;
}
.pricelist__table .pricelist--bullet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neutral-50);
    transition: 0.2s;
}
.pricelist__table .pricelist--label {
    white-space: nowrap;
    color: var(--neutral-60);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pricelist__table .pricelist--label .desc-normal {
    color: var(--neutral-60);
}

/* Pricelist Badge */
.pricelist--question-badge {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    margin-left: 5px;
    cursor: pointer;
}
.pricelist--question-badge svg {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.25s ease-in-out;
}
.pricelist--question-badge svg path {
    fill: var(--primary);
    transition: fill 0.25s ease-in-out;
}
.pricelist--question-badge.active svg,
.pricelist--question-badge:hover svg {
    background: var(--primary);
}
.pricelist--question-badge.active svg path,
.pricelist--question-badge:hover svg path {
    fill: var(--neutral-10);
}

.pricelist__table .pricelist--counter {
    display: flex;
    justify-content: flex-end;
}
.pricelist__table .pricelist--counter [data-quantity] {
    pointer-events: none;
}
.pricelist__table .pricelist--price {
    white-space: nowrap;
    color: var(--neutral-70);
}
.pricelist__table .pricelist--price .desc-mini {
    color: var(--primary);
    opacity: .7;    
}

/* Disabled */
.pricelist__table tr.disabled {
    background: var(--neutral-30);
    pointer-events: none;
}

/* Enabled */
.pricelist__table tr.enabled {
    pointer-events: visible;
}

/* Checked */
.pricelist__table tr.checked {

}
.pricelist__table tr.checked .pricelist--bullet {
    background: var(--neutral-10);
    border: 1px solid var(--primary);
}
.pricelist__table tr.checked .pricelist--bullet::after {
    background: var(--primary);
}
.pricelist__table tr.checked .pricelist--label {
    color: var(--neutral-100);
}
.pricelist__table tr.checked .pricelist--label .desc-normal {
    color: var(--neutral-90);
}
.pricelist__table tr.checked .pricelist--counter [data-quantity] {
    pointer-events: visible;
}
.pricelist__table tr.checked .pricelist--price {
    color: var(--neutral-100);
}
.pricelist__table tr.checked .pricelist--price .desc-mini {
    opacity: 1;
}

/* Design */
.pricelist__tr-design {
    background: transparent;
    position: relative;
}


/* Swicth */
.package-section .switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 24px;
}
.package-section .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.package-section .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.package-section .switch .slider:before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
.package-section .switch .slider.start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.package-section .switch .slider.end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.package-section .switch .slider.round {
    border-radius: 34px;
}
.package-section .switch .slider.round:before {
    border-radius: 50%;
}
.package-section .switch input:checked + .slider {
    background: var(--primary);
}
.package-section .switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.package-section .switch .slider .text-slider {
    padding: 8px;
    font-family: var(--montserrat);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-text-sm);
    line-height: var(--lh-text-sm);
    color: var(--neutral-10);
    user-select: none;
}




/* Card Box */
.wrap-card-box {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: scroll;
    -ms-overflow-style: none; 
    scrollbar-width: none;
    width: 100%;
    padding: 0px 75px 32px;
    margin: auto;
}
.wrap-card-box::-webkit-scrollbar { 
    display: none;
}

.wrap-card-box .slick-list {
    outline: none;
}

.wrap-card-box .card-box-template-slider {
    padding: 10px;
    outline: none;
}

.wrap-card-box .card-box-template {
    width: 210px;
    flex-shrink: 0;
    border-radius: 25px;
    /* border: 2px solid transparent; */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: #FFFFFF;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.12));
    margin: 0px;     
    transition: 0.25s;
}

.wrap-card-box .card-box-template.box-shadow-choice {
    /* border: 2px solid #EB2F59; */
    box-shadow: 0px 0px 2px 2px #EB2F59,
              3px 3px 6px rgba(248, 186, 200, 1);

    transition: border 0.1s;
}

.wrap-card-box .card-box-template .preview-image-wrap {
    width: 100%;
    height: 320px;
    overflow-y: auto;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.wrap-card-box .card-box-template .preview-image-wrap::-webkit-scrollbar {
    display: none;
}

.wrap-card-box .card-box-template .preview-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
}

.wrap-card-box .card-box-template .child-card-box {
    width: 100%;
    padding: 2px 16px 16px;
    gap: 8px;
    display: flex;
    flex-direction: column;    
    align-items: center;
    justify-content: center;
}

.wrap-card-box .card-box-template .child-card-box .wrap-radio-template {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wrap-card-box input[type='radio'] {
    display: none;
}

.wrap-card-box .card-box-template .child-card-box .wrap-radio-template .child-radio-template {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1),
                0px 0px 0px 4px rgba(0, 0, 0, .05);
    transition: 0.3s;
}

.wrap-card-box .card-box-template .child-card-box .wrap-radio-template .child-radio-template:hover {
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1),
                0px 0px 0px 4px rgba(0, 0, 0, .15);
}
.wrap-card-box .card-box-template .child-card-box .wrap-radio-template .child-radio-template.active {
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,1),
                0px 0px 0px 4px rgba(var(--rgb), 1);
}

.wrap-card-box .card-box-template .child-card-box a.title-hero {
    text-align: center;
    font-family: var(--montserrat);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-text-md);
    line-height: var(--lh-text-md);
    color: var(--neutral-90);
    padding: 0px 16px 4px;
    text-decoration: none;
    transition: color .25s;
}
.wrap-card-box .card-box-template .child-card-box a.title-hero:hover {
    color: var(--neutral-70);
}

.wrap-card-box .card-box-template .child-card-box .button-choice {
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: 100%;
    background: var(--neutral-10);
    border: 1px solid var(--primary-surface);
    border-radius: 25px;
    font-family: var(--montserrat);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-text-md);
    line-height: var(--lh-text-md);
    color: var(--primary);
    transition: 0.3s;
}
.wrap-card-box .card-box-template .child-card-box .button-choice:hover {
    background: var(--neutral-100);
    color: var(--neutral-10);
}
.wrap-card-box .card-box-template .child-card-box .button-choice.active {
    background: var(--primary);
    color: var(--neutral-10);
}
.wrap-card-box .card-box-template .child-card-box .button-choice.active:hover {
    background: var(--primary-hover);
    color: var(--neutral-10);
}


/* Slick Button */
.slick-button {
    outline: none;
    border: none;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: var(--neutral-30);
    color: var(--neutral-100);
    border-radius: 100px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    
    position: absolute;
    z-index: 1;
    top: 50%;
    transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
}
.slick-button:hover {
    background: var(--neutral-100);
    color: var(--neutral-10);
}

.slick-button > i {
    font-size: 32px;
}
.slick-button.previous > i{
    transform: scaleX(-1);
}

.slick-button.previous {
    left: 16px;
    transform: translateY(-50%);
}
.slick-button.next {
    right: 16px;
    transform: translateY(-50%);
}


/* Plus Minus */
.pricelist__table .plus-minus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pricelist__table .plus-minus button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    width: 36px;
    height: 36px;
    background: var(--neutral-10);
    border: 1px solid var(--neutral-30);
    color: var(--neutral-100);
    border-radius: 50px;
    transition: 0.3s;
}
.pricelist__table .plus-minus button:hover {
    background: var(--primary);
    color: var(--neutral-10);
}
.pricelist__table .plus-minus button:focus {
    background: var(--primary);
    color: var(--neutral-10);
}
.pricelist__table .plus-minus button:disabled {
    opacity: .25;
}
.pricelist__table .plus-minus button svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke-width: 3;
}

.pricelist__table .plus-minus input[type="number"] {
    -moz-appearance: textfield;
    box-sizing: border-box;
    padding: 10px;
    width: 100px;
    background: var(--neutral-10);
    border: 1.5px solid var(--primary);
    border-radius: 50px;
    text-align: center;
    font-family: var(--montserrat);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    color: var(--primary);
}
.pricelist__table .plus-minus input[type="number"].packet {
    width: 100%;
}
.pricelist__table .plus-minus input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
}
.pricelist__table .plus-minus input[type="number"]:disabled {
    opacity: .25;
}


@media (max-width: 768px) {

    .pricelist__table .plus-minus {
        gap: 2px;
    }
    .pricelist__table .plus-minus button svg {
        width: 16px;
        height: 16px;
    }
    .pricelist__table .plus-minus input[type='number'] {
        padding: 6px;
        width: 60px;
        /* font-size: var(--fs-text-md);
        line-height: var(--lh-text-md); */
    }

    .pricelist__table th,
    .pricelist__table td {
        padding: 12px 10px;
        /* font-size: var(--fs-text-lg);
        line-height: var(--lh-text-lg); */
    }
    .pricelist__table th:nth-child(1), 
    .pricelist__table td:nth-child(1) {
        width: 65px;
        padding: 12px 0px;
    }
    .pricelist__table th:nth-child(3),
    .pricelist__table td:nth-child(3) {
        width: 1%;
    }

    .wrap-card-box {
        padding: 0px 12px 32px;
    }
    .slick-button {
        display: none!important;
    }

}

@media (max-width: 600px) {
    
    .pricelist__table .pricelist--label {
        white-space: normal;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .pricelist__table .pricelist--price {
        white-space: normal;
    }
    
}

@media (max-width: 560px) {
    .wrap-card-box {
        padding: 0px 0px 32px;
    }
}


/* Pickadate */
.picker__holder {
    outline: none;
}
.picker__select--year {
    width: auto;
    border: none;
    height: auto;
    padding: .5em;
    margin-left: 0;
    margin-right: 0.5em;
}
.picker__month {
    color: var(--primary);
    font-weight: var(--fw-bold);
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
    background: var(--secondary);
}
.picker__day {
    font-weight: 400;
}
.picker__day:hover {
    background: var(--primary-surface);
    border-color: var(--primary-surface);
}
.picker__day--highlighted {
    border-color: var(--primary-border);
}
.picker__day--highlighted:hover, 
.picker--focused .picker__day--highlighted {
    color: var(--primary);
    background: var(--primary-surface);
}
.picker__day--selected, 
.picker__day--selected:hover, 
.picker--focused .picker__day--selected {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--neutral-10);
}

.picker__button--today:hover,
.picker__button--clear:hover, 
.picker__button--close:hover {
    background: var(--secondary);
    border-bottom-color: var(--secondary);
}



/* Image Preview */
.img-preview--wrap {
    display: none;
}
.img-preview--wrap.show {
    display: block;
}


/* Form Split */
.form-split {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.form-split > * {
    width: 100%;
}
.form-split.split-2 > * {
    width: calc(50% - 10px);
}

@media (max-width: 600px) {
    .form-split {
        flex-direction: column;
        gap: 16px;
    }
    .form-split.split-2 > * {
        width: 100%;
    }
}



/* ========================================
        On Failure Trial
======================================== */
.onfailure-trial__content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    font-family: var(--montserrat);
    margin-top: auto;
}

/* banner */
.onfailure-trial__banner {
    width: 100%;
    max-width: 675px;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
}
.onfailure-trial__banner img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* caption */
.onfailure-trial__caption {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    padding: 68px 0px;
}
.onfailure-trial__caption h2 {
    color: var(--primary);
    font-size: var(--fs-display-md);
    line-height: var(--lh-display-md);
    font-weight: var(--fw-bold);
}
.onfailure-trial__caption p {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    font-weight: var(--fw-regular);
}

@media (max-width: 1024px) {
    .onfailure-trial__content {
        flex-direction: column;
        align-items: center;
        padding: 68px 20px;
    }
    
    .onfailure-trial__banner {
        align-self: inherit;
        max-width: 400px;
    }
    
    .onfailure-trial__caption {
        gap: 16px;
        padding: 20px 0px;
    }
}

@media (max-width: 600px) {
    .onfailure-trial__banner {
        max-width: none;
    }

    .onfailure-trial__caption {
        max-width: none;
    }
    .onfailure-trial__caption h2 {
        /* font-size: var(--fs-display-sm);
        line-height: var(--lh-display-sm); */
    }
    .onfailure-trial__caption p {
        /* font-size: var(--fs-text-lg);
        line-height: var(--lh-text-lg); */
    }
}

@media (max-width: 600px) {
    .onfailure-trial__caption h2 > br {
        content: "";
    }
    .onfailure-trial__caption h2 > br::after {
        content: " ";
    }
}



/* ========================================
        Form Data
======================================== */
.formdata__page {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-grow: 1;
}

.formdata__left {
    width: 100%;
    max-width: 500px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}
.kat__navbar.fixed + .kat__app .formdata__left {
    top: 70px;
}

.formdata__right {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.formdata__left + .formdata__right {
    margin-left: 500px;
}
    
/* navbar alt */
.formdata__left .navbar-alt {
    display: none;
}

/* back button */
.kat__step-back-btn {
    position: absolute;
    top: 16px;
    left: 24px;
}

/* step list */
.kat__step-list {
    max-width: 840px;
}
.formdata__left + .formdata__right .kat__step-list {
    max-width: 720px;
}

/* banner */
.formdata__banner {
    position: relative;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 40px 75px 120px;
    gap: 32px;
    background: var(--hijau-tua);
}
.formdata__banner.center {
    justify-content: flex-start;
    padding: 40px 75px;
    overflow-y: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.formdata__banner.center::-webkit-scrollbar {
    display: none;
}

.formdata__banner > picture {
    position: absolute;
    inset: 0;
}
.formdata__banner > picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.formdata__banner.wp > picture .wp {
}
.formdata__banner.wp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .25);
    z-index: 1;
}

.formdata__banner .formdata__banner-img {
    display: block;
    width: 85%;
    height: auto;
    max-width: 500px;
    max-height: 500px;
    border-radius: 24px;
    border: 2px solid var(--neutral-100);
}

.formdata__banner #bannerCaption {
    position: relative;
    color: var(--hijau-muda);
    font-size: var(--fs-display-sm);
    line-height: var(--lh-display-sm);
    font-family: var(--montserrat);
    font-weight: var(--fw-extra-bold);
    margin: 0px auto;
    z-index: 1;
}
.formdata__banner #bannerCaption.hide {
    display: none;
}

.formdata__banner.center .formdata__banner-img {
    margin-top: auto;
}
.formdata__banner.center #bannerCaption {
    margin-bottom: auto;
}


/* Form Data Content */
.formdata__content {
    width: 100%;
    max-width: 840px;
    margin: 0px auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.formdata__content.max-width-none {
    max-width: none;
}
.formdata__content.password {
    max-width: 480px;
}
.formdata__left + .formdata__right .formdata__content {
    max-width: 720px;
}


.formdata__content form {
    margin: 0px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Form Data - Form */
.formdata__form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 24px;
    padding: 60px 0px;
}

/* Form Header */
.formdata__form-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.formdata__form-header .kat__navbar-brand {
    height: 48px;
    margin-bottom: 16px;
}

.formdata__title {
    color: var(--primary);
    font-size: var(--fs-display-sm);
    line-height: var(--lh-display-sm);
    font-weight: var(--fw-medium);
}
.formdata__title .dark {
    color: var(--neutral-100);
}
.formdata__title .bold {
    font-weight: var(--fw-bold);
}

.formdata__subtitle {
    font-family: var(--fs-headline-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline-sm);
    color: var(--primary);
}
.formdata__subtitle + .formdata__title {
    font-weight: var(--fw-semibold);
    color: var(--neutral-100);
}

.formdata__description {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.formdata__caption {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    font-weight: var(--fw-regular);
}

/* Form Content */
.formdata__form-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Map Box */
.formdata__form-content .map-box {
    position: relative;
}
.formdata__form-content .map-box .kat__form-control {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    box-shadow: var(--shadow-1);
}
.formdata__form-content .map-box #map-view {
    width: 100%; 
    height: 240px;
    background-color: var(--neutral-50);
    overflow: hidden;
}


/* Required text */
.formdata-required-text {
    text-align: right;
    color: var(--neutral-80);
    font-size: var(--fs-text-md);
    line-height: var(--lh-text-md);
    font-weight: var(--fw-regular);
}

/* Agreement Text */
.formdata-agreement-text {
    color: var(--neutral-80);
    font-size: var(--fs-text-md);
    line-height: var(--lh-text-md);
    font-weight: var(--fw-regular);
}
.formdata-agreement-text.hide {
    display: none;
}
.formdata-agreement-text > a {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--fw-semibold);
}

/* sticky button */
.formdata-button__sticky-bar {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
    bottom: 0;
    padding: 16px 0px 40px;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.formdata-button__sticky-bar.inc-price .price--info {
    margin-right: auto;
}

.kat__form-control[name="subdomain"]:not(:disabled) {
    padding-right: 20px;
}



/* guestbook page */
.guestbook-page {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    display: none;
}
.guestbook-page .formdata__form {

}
.guestbook-page .formdata-button__sticky-bar {
    opacity: 0;
    transform: translateY(50px);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    background: var(--neutral-10);
}
.guestbook-page.active .formdata-button__sticky-bar {
    opacity: 1;
    transform: translateY(0px);
}


/* Guestbook Card */
.guestbook-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px 32px;
    border-radius: 50px;
    background: var(--neutral-10);
}

.guestbook-card__header {
    display: flex;
    flex-direction: column;
    gap: 8px;    
}
.guestbook-card__title {
    color: var(--primary);
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: var(--fw-semibold);
}   
.guestbook-card__caption {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    font-weight: var(--fw-regular);
}

.guestbook-card__content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.guestbook-card__content ul {
    width: 100%;
    margin: 0px;
}
.guestbook-card__content ul > li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 0px;
}
.guestbook-card__content ul > li > img {
    width: 40px;
    padding: 8px;
}
.guestbook-card__content ul > li.learn-more { 
    padding: 12px;
}
.guestbook-card__content ul > li.learn-more > a { 
    text-decoration: none;
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-semibold);
}

.guestbook-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.guestbook-card__footer .button-text-sm {
    display: none;
}
.guestbook-card__footer .button-text-lg {
    display: block;
}


/* guestbook item */
.formdata__form-content.digital-guestbook__wrapper {
    align-items: center;
    position: relative;
}
.guestbook-item-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    padding: 0px 24px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
}    
.guestbook-item-wrap::-webkit-scrollbar {
    display: none;
}

/* arrow */
.digital-guestbook__wrapper .guestbook-arrows {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0px;
    display: none;
}
.digital-guestbook__wrapper .guestbook-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    font-size: 32px;
    background-color: var(--neutral-10);
    box-shadow: var(--shadow-2);
    color: var(--neutral-100);
    position: absolute;
    top: 80px;
    text-decoration: none;
}
.digital-guestbook__wrapper .guestbook-arrow.show {
    display: flex;
}
.digital-guestbook__wrapper .guestbook-arrow.prev {
    left: -15px;
}
.digital-guestbook__wrapper .guestbook-arrow.next {
    right: -15px;
}

/* item */
.guestbook-item {
    width: 100%;
    /* max-width: 380px; */
    max-width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* align-self: stretch; */
    position: relative;
}

.guestbook-item__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 16px;
    padding: 32px;
    border-radius: 30px 30px 0px 0px;
    background: var(--neutral-10);
}
.guestbook-item__label {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    min-height: 110px;
}
.guestbook-item__title {
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--fw-semibold);
    color: var(--primary);
}
.guestbook-item__price {
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--fw-bold);
}
.guestbook-item__price.fake-price {
    color: #757575;
    text-decoration: line-through;
    font-weight: normal;
    font-size: 0.7em;
}

.guestbook-item hr {
    margin: 0px;
    border-color: var(--neutral-30);
    opacity: 1;
}

.guestbook-item ul {
    width: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guestbook-item ul li {
    display: flex;
    align-items: center;
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    gap: 12px;
    padding: 4px 8px;
}
.guestbook-item ul li i {
    color: var(--primary);
}

.guestbook-item ul li a[data-bs-target] {
    text-decoration: none;
    color: var(--primary);
    margin-right: 24px;
}
.guestbook-item ul li a[data-bs-target] > i {
    color: var(--primary);
    vertical-align: middle;
}

.guestbook-item__consult {
    width: 100%;
    text-align: center;
    font-size: var(--fs-text-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-text-xl);
    padding: 24px 16px;
    text-decoration: none;
    border-radius: 0px 0px 25px 25px;
    color: var(--neutral-10);
    background: var(--primary);
    transition: background 0.25s ease-in-out;
}
.guestbook-item__consult:hover {
    background: var(--primary-hover);
}
.guestbook-item__consult:focus {
    background: var(--primary-pressed);
}

.guestbook-item__consult.purchase {
    background: var(--neutral-90);
}
.guestbook-item__consult.purchase:hover {
    background: var(--neutral-70);
}
.guestbook-item__consult.purchase:focus {
    background: var(--neutral-100);
}

.guestbook-item__consult.disabled,
.guestbook-item__consult.disabled:hover,
.guestbook-item__consult.disabled:focus {
    background: var(--neutral-50);
    cursor: not-allowed;
}



/* Package Page */
.package-page .formdata__form {
    gap: 60px;
}
.package-page .formdata-button__sticky-bar {
    background: var(--neutral-10);
    padding: 16px 32px;
}
.package-page .formdata-button__sticky-bar .price-label {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    font-weight: var(--fw-semibold);
}
.package-page .formdata-button__sticky-bar .price-tag {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: var(--fw-semibold);
}


/* Basic Card */
.basic-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 32px;
    background: var(--neutral-10);
}
.basic-card__title {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: var(--fw-semibold);
    color: var(--neutral-100);
}
.basic-card hr {
    margin: 0px;
    border-color: var(--neutral-30);
    opacity: 1;
}
.basic-card__list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.basic-card__list ul {
    width: 100%;
    margin: 0px;
}
.basic-card__list ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 8px;
}
.basic-card__list ul li i {
    margin: 4px;
    color: var(--primary);
}
.basic-card__list ul li .basic-card__item {
    display: flex;
    flex-direction: column;
}
.basic-card__list ul li .basic-card__item p {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    font-weight: var(--fw-regular);
    color: var(--neutral-100);
}
.basic-card__list ul li .basic-card__item small {
    font-size: var(--fs-text-md);
    line-height: var(--lh-text-md);
    font-weight: var(--fw-regular);
    color: var(--neutral-80);
}


/* Package Section */
.package-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.package-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.package-section__label {
    font-size: var(--fs-headline-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline-sm);
}
.package-section__label {

}


/* Recommend Card */
.recommend-card-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}
.recommend-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-radius: 32px;
    border: 2px solid transparent;
    background: var(--neutral-10);
    box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: border-color 0.3s ease-in-out;
}
.recommend-card.special {
    border-color: var(--neutral-100);
    background: var(--soft);
}
.recommend-card.active {
    border-color: var(--primary);
}

.recommend-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 40px;
}

.recommend-card__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.recommend-card__label {
    font-size: var(--fs-headline-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline-sm);
    color: var(--primary);
}
.recommend-card__price {
    font-size: var(--fs-headline-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline-lg);
}

.recommend-card__content hr {
    margin: 0px;
    border-color: var(--neutral-30);
    opacity: 1;
}
.recommend-card.special .recommend-card__content hr {
    border-color: var(--neutral-100);
}

.recommend-card__content ul {
    width: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.recommend-card__content ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0px;
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    font-weight: var(--fw-regular);
}
.recommend-card__content ul li .ph-check {
    color: var(--primary);
}
.recommend-card__content ul li.bold {
    font-weight: var(--fw-semibold);
}
.recommend-card__content ul li img {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    object-fit: contain;
    object-position: center;
}

.recommend-card__more {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary);
}

.recommend-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 40px 32px;
    margin-top: auto;
}
.recommend-card.active .select-feature-button {
    background: var(--neutral-10);
    color: var(--primary);
}


/* Custom Fitur */
.reset-custom {
    padding: 0px;
    color: var(--neutral-70);
}
.reset-custom:hover {
    color: var(--neutral-100);
}



/* invoice page */
.invoice-page {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* form */
.invoice-page .formdata__form {
    gap: 40px;
}

/* header */
.invoice-page .formdata__title {
    font-weight: var(--fw-semibold);
}   
.invoice-page .formdata__title + .formdata__subtitle {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
}
.invoice-page .formdata__subtitle {
    color: var(--neutral-100);
}

/* badge */
.invoice-page .formdata__form-header .badge {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 8px 12px;
    font-size: var(--fs-text-sm);
    line-height: var(--lh-text-sm);
    font-weight: var(--fw-semibold);
    border-radius: 25px;
    color: var(--neutral-100);
    background: var(--neutral-30);
    border: 1px solid var(--neutral-60);
}
.invoice-page .formdata__form-header .badge.pending {
    color: var(--warning);
    border: 1px solid var(--warning-border);
    background: var(--warning-surface);
}
.invoice-page .formdata__form-header .badge.expired {
    color: var(--danger);
    border: 1px solid var(--danger-border);
    background: var(--danger-surface);
}
.invoice-page .formdata__form-header .badge.success {
    color: var(--success);
    border: 1px solid var(--success-border);
    background: var(--success-surface);
}

/* invoice card */
.invoice-card {
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
    border-radius: 24px;
    gap: 32px;
    background-color: var(--neutral-10);
}
.invoice-card > hr {
    margin: 0px;
    opacity: 1;
    border: 0;
    border-top: 1px solid var(--neutral-50);
}

/* invoice cart */
.invoice-card--cart {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* cart header */
.invoice-cart--header {

}
.invoice-cart--title {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
}

/* cart content */
.invoice-cart--content {
    
}
.invoice-cart--table {

}
.invoice-cart--table table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.invoice-cart--table table tr {

}
.invoice-cart--table table tr td {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    padding: 8px 0px;
}
.invoice-cart--table table tr td:nth-child(2) {
    text-align: center;
    padding: 8px 16px;
}
.invoice-cart--table table tr td:nth-child(2) .skeleton {
    margin-left: auto;
    margin-right: auto;
}
.invoice-cart--table table tr td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}
.invoice-cart--table table tr td:nth-child(3) .skeleton {
    margin-left: auto;
}

/* invoice payment */
.invoice-card--payment {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* payment header */
.invoice-payment--header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.invoice-payment--title {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
}
.invoice-payment--date {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
}

/* payment content */
.invoice-payment--content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.invoice-payment--form {
    
}
.invoice-payment--form .kat__form-group {
    flex-direction: initial;
    margin-bottom: 0px;
}
.invoice-payment--form .kat__form-control {
    flex-grow: 1;
    min-width: 0;
}
.invoice-payment--form .kat__button {
    width: auto;
    gap: 4px;
}

.invoice-payment--content .voucher-error {
    font-size: var(--fs-text-md);
    line-height: var(--lh-text-md);
}
.invoice-payment--content .voucher-error.hide {
    display: none;
}

/* payment footer */
.invoice-payment--footer {

}
.invoice-payment--price {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.invoice-payment--price > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.invoice-payment--price .voucher-field:not(.show) {
    display: none;
}
.invoice-payment--price p {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
}
.invoice-payment--price .payment--total p {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
}

/* sticky bars */
.invoice-page .formdata-button__sticky-bar {
    background: var(--neutral-10);
    padding: 16px 32px;
}
.invoice-page .formdata-button__sticky-bar .price-label {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
    font-weight: var(--fw-semibold);
}
.invoice-page .formdata-button__sticky-bar .price-tag {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: var(--fw-semibold);
}



/* manual page */
.manual-page {

}
.manual-page .formdata__form-content {
    padding: 40px;
    border-radius: 30px;
    background: var(--neutral-10);
}
.manual-page .manual-page__content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.manual-page .manual-page__content .kat__form-wrapper {
    width: 100%;
}



/* claim page */
.claim-page {
    
}
.claim-page__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
    border-radius: 30px;
    background: var(--neutral-10);
}
.claim-page__content > hr {
    margin: 0px;
    border-color: var(--neutral-30);
    opacity: 1;
}

.claim-page__section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.claim-page__section.confirm-account {
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-main);
}

.claim-page__section-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.claim-page__section-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.claim-page__section-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.claim-page__section.kat__form-group {
    margin-bottom: 0px;
}
.claim-page__section .kat__form-group {
    margin-bottom: 0px;
}

.claim-page__title {
    font-size: var(--fs-headline-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline-sm);
}
.claim-page__caption {
    font-size: var(--fs-text-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text-md);
}
.claim-page__caption.xl {
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
}

.claim-page .formdata-button__sticky-bar {
    flex-direction: column;
}

.claim-page .account-information {
    display: none;
}
.claim-page #accountRegistrationForm {
    display: none;
}
.claim-page #purchaseList {
    display: none;
}
.claim-page #registerAgreement {
    display: none;
}
.claim-page #hr {
    display: none;
}





/* purchase table */
.purchase__table-wrap {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.purchase__table-wrap::-webkit-scrollbar {
    display: none;
}

.purchase__table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}
.purchase__table th,
.purchase__table tr {

}
.purchase__table th td,
.purchase__table tr td {
    white-space: nowrap;
    padding: 12px;
    font-size: var(--fs-text-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text-xl);
}
.purchase__table th td:first-child,
.purchase__table tr td:first-child {
    padding-left: 16px;
}
.purchase__table th td:last-child,
.purchase__table tr td:last-child {
    padding-right: 16px;
}






@media (max-width: 1440px) {
    .kat__navbar.fixed + .kat__app .formdata__left {
        top: 60px;
    }

    .formdata__left + .formdata__right .kat__step-list {
        max-width: 500px;
    }
    
    .formdata__left + .formdata__right .formdata__content {
        max-width: 500px;
    }
}

@media (max-width: 1200px) {
    .formdata__left {
        max-width: 400px;
    }
    
    .formdata__left + .formdata__right {
        margin-left: 400px;
    }

    .kat__step-back-btn {
        position: relative;
        top: initial;
        left: initial;
    }
    .formdata__left + .formdata__right .kat__step-back-btn {
        position: absolute;
        top: 16px;
        left: 24px;
    }

    .formdata__form-content.digital-guestbook__wrapper {
        align-items: initial;
    }
    .guestbook-item-wrap {
        padding: 0px 24px;
    }
}

@media (max-width: 1024px) {
    .formdata__page {
        flex-direction: column;
    }

    .formdata__left {
        position: relative;
        top: initial;
        left: initial;
        bottom: initial;
        max-width: none;
    }
    .formdata__left .navbar-alt {
        display: flex;
    }

    .formdata__banner {
        height: 480px;
        padding: 40px 48px;
    }
    
    .formdata__banner #bannerCaption {
        width: 100%;
        max-width: 500px;
    }   
    .formdata__banner #bannerCaption > br {
        content: '';
    }
    .formdata__banner #bannerCaption > br::after {
        content: ' ';
    }
    
    .formdata__right {
        min-height: 100vh;
    }
    .formdata__left + .formdata__right {
        margin-left: 0px;
    }
    .formdata__right .navbar-alt {
        display: none;
    }

    .formdata__left + .formdata__right .kat__step-back-btn {
        top: 24px;
    }

    .kat__modal-content .basic-card__list {
        flex-wrap: wrap;
    }

    .kat__app.login-page .formdata__page {
        flex-direction: column-reverse;
    }
    .kat__app.login-page .formdata__banner {
        height: initial;
    }
    .kat__app.login-page .formdata__banner.center {
        align-items: center;
    }
    .kat__app.login-page .formdata__right {
        min-height: 0;
    }

    .kat__app.forgot-password-page .formdata__page {
        flex-direction: column-reverse;
    }
    .kat__app.forgot-password-page .formdata__banner {
        height: initial;
    }
    .kat__app.forgot-password-page .formdata__banner.center {
        align-items: center;
    }
    .kat__app.forgot-password-page .formdata__right {
        min-height: 0;
    }
}

@media (max-width: 920px) {
    .formdata__form {
        padding: 40px 0px;
    }
    
    .package-page .formdata__form {
        padding: 40px 24px;
        gap: 40px;
    }
    
    .guestbook-page .formdata__form {
        padding: 40px 24px;
    }
    .guestbook-item-wrap {
        margin: 0px -24px;
    }
    
    .invoice-page .formdata__form {
        padding: 40px 24px;
    }
}

@media (max-width: 768px) {
    .formdata__banner {
        height: 240px;
        padding: 20px 24px;
    }

    .formdata__left + .formdata__right .kat__step-back-btn {
        position: relative;
        top: initial;
        left: initial;
    }

    .formdata__form {
        padding: 24px 0px;
    }

    .guestbook-card__content {
        flex-wrap: wrap;
        gap: 0;
    }

    .guestbook-item__consult {
        padding: 16px 8px;
    }
    .guestbook-card__footer .button-text-sm {
        display: block;
    }
    .guestbook-card__footer .button-text-lg {
        display: none;
    }

    .guestbook-page.active .formdata-button__sticky-bar {
        flex-direction: column;
    }

    .basic-card__list {
        flex-wrap: wrap;
    }
    .basic-card {
        border-radius: 24px;
        gap: 12px;
    }
    .basic-card__list ul li {
        padding: 2px 0px;
    }

    .recommend-card-wrap {
        flex-wrap: wrap;
    }
    .recommend-card {
        border-radius: 24px;
    }
    .recommend-card__header {
        gap: 4px;
    }
    .recommend-card__content {
        padding: 24px;
        gap: 12px;
    }
    .recommend-card__footer {
        padding: 0px 24px 24px;
    }

    .manual-page .manual-page__content {
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .kat__step-back-btn,
    .kat__step-back-btn.show {
        display: none;
    }

    .formdata__content {
        max-width: none;
        padding: 0px 24px;
    }
    .formdata__content.inc-invoice {
        padding: 0px;
    }

    .formdata__title {
        /* font-size: var(--fs-headline-md);
        line-height: var(--lh-headline-md); */
        word-break: break-word;
    }

    .guestbook-card {
        padding: 32px 16px;
    }

    .guestbook-item-wrap {
        gap: 16px;
    }
    .guestbook-item {
        max-width: 300px;
    }
    .guestbook-item__content {
        padding: 32px 16px;
    }

    .package-page {
        padding: 0px;
    }
    .package-page .package-section {
        gap: 24px;
    }

    .formdata-button__sticky-bar {
        padding: 16px 0px;
    }
    .formdata-button__sticky-bar.inc-price {
        flex-direction: column;
    }
    .formdata-button__sticky-bar.inc-price .price--info {
        margin-right: initial;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .formdata-button__sticky-bar.inc-price .price--info .price-tag {
        text-align: right;
        word-break: break-word;
    }
    .formdata-button__sticky-bar.inc-price button.submit {
        width: 100%;
    }

    
    .invoice-card {
        padding: 32px 16px;
        gap: 24px;
    }

    .invoice-card--cart {
        gap: 16px;
    }

    .invoice-cart--title {
        font-size: calc(var(--fs-title-lg) - 2px);
        line-height: calc(var(--lh-title-lg) - 2px);
    }

    .invoice-cart--table table tr td {
        padding: 4px 0px;
        font-size: var(--fs-text-md);
        line-height: var(--lh-text-md);
    }
    .invoice-cart--table table tr td:nth-child(2) {
        padding: 4px 12px;
    }

    .invoice-card--payment {
        gap: 24px;
    }

    .invoice-payment--header {
        gap: 4px;
    }
    .invoice-payment--title {
        font-size: calc(var(--fs-title-lg) - 2px);
        line-height: calc(var(--lh-title-lg) - 2px);
    }
    .invoice-payment--date {
        font-size: var(--fs-text-md);
        line-height: var(--lh-text-md);
    }

    .invoice-payment--content {
        gap: 16px;
    }

    .invoice-payment--form .kat__form-group {
        gap: 8px;
    }
    .invoice-payment--form .kat__form-control {
        padding: 8px 12px;
    }
    .invoice-payment--form .kat__button {
        padding: 8px 12px;
    }

    .invoice-payment--content .voucher-error {
        font-size: var(--fs-text-sm);
        line-height: var(--lh-text-sm);
    }

    .invoice-payment--price p {
        font-size: var(--fs-text-md);
        line-height: var(--lh-text-md);
    }
    .invoice-payment--price .payment--total p {
        font-size: var(--fs-text-lg);
        line-height: var(--lh-text-lg);
    }
}

@media (max-width: 360px) {
    .guestbook-item {
        max-width: 260px;
    }

    .invoice-payment--form .kat__form-group {
        flex-direction: column;
    }
    .invoice-payment--form .kat__form-control {
        width: 100%;
    }
    .invoice-payment--form .kat__button {
        width: 100%;
    }

    .formdata-button__sticky-bar.inc-price .price--info {
        flex-direction: column;
        gap: 4px;
    }
    .invoice-page .formdata-button__sticky-bar .price-label {
        /* font-size: var(--fs-text-md);
        line-height: var(--lh-text-md); */
    }
    .invoice-page .formdata-button__sticky-bar .price-tag {
        /* font-size: var(--fs-title-lg);
        line-height: var(--lh-title-lg); */
    }

    .formdata-button__sticky-bar {
        padding: 12px 16px;
    }
    .package-page .formdata-button__sticky-bar {
        padding: 12px 16px;
    }
    .invoice-page .formdata-button__sticky-bar {
        padding: 12px 16px;
    }

    .formdata-button__sticky-bar .kat__button {
        width: 100%;
    }
}

@media (max-width: 320px) {
    .digital-guestbook__wrapper .guestbook-arrows {
        display: block;
    }
}



/* ========================================
        Upgrade Paket and Add Ons
======================================== */
.kat__app.upgrade-page {
    padding: 60px 0px 0px;
    gap: 40px;
}

.kat__app.upgrade-page .formdata__right {
    gap: 40px;
}

.kat__app.upgrade-page .kat__toolbar-wrap {
    background: transparent;
    border: none;
}

.kat__app.upgrade-page .formdata__content {
    max-width: none;
}
.kat__app.upgrade-page .formdata__form {
    gap: 24px;
    padding: 0px;
}

.kat__app.upgrade-page .kat__tab-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.kat__app.upgrade-page .kat__tab-content .kat__tab-pane {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

@media (min-width: 769px) {
    .kat__app.upgrade-page .kat__toolbar-wrap .kat__toolbar {
        padding: 8px 30px;
    }
}

.kat__app.upgrade-page .upgrade-page__content {
    display: flex; 
    flex-direction: column; 
    flex-grow: 1;
    gap: 40px;
    padding-bottom: 40px;
}
.kat__app.upgrade-page .upgrade-page__content + .formdata-button__sticky-bar {
    background: var(--neutral-10);
    padding: 16px 32px;
}

/* upgrade card */
.upgrade-card__wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 0px 24px;
    margin: 0px auto;
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.upgrade-card__wrapper::-webkit-scrollbar {
    display: none;
}
.upgrade-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    border-radius: 25px;
    overflow: hidden;
    background: var(--neutral-10);
    border: 2px solid transparent;
    transition: border 0.3s ease-in-out;
}
.upgrade-card.active {
    border: 2px solid var(--primary);
}
.upgrade-card.md {
    width: 100%;
    max-width: 330px;
}
.upgrade-card.sm {
    width: 100%;
    max-width: 180px;
}
.upgrade-card__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 24px;
}
.upgrade-card__header.package {
    padding: 24px 8px;
}
.upgrade-card__header.equal {
    min-height: 225px;
}
.upgrade-card__header.align-center { 
    align-items: center;
    gap: 4px;
}
.upgrade-card__header.align-right { 
    text-align: right;
}

.upgrade-card__title {
    font-size: var(--fs-headline-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-headline-sm);
}
.upgrade-card__title.fake-price {
    color: #757575;
    text-decoration: line-through;
    font-weight: normal;
    font-size: var(--fs-text-xl);
    line-height: var(--lh-text-xl);
}
.upgrade-card__header.align-center .upgrade-card__title {
    text-align: center;
}
.upgrade-card__header.align-right .upgrade-card__title {
    text-align: right;
}
.upgrade-card__caption {
    font-size: var(--fs-text-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text-lg);
}
.upgrade-card__header.align-center .upgrade-card__caption {
    text-align: center;
}
.upgrade-card__header.align-right .upgrade-card__caption {
    text-align: right;
}

.upgrade-card__content {
    padding: 0px 24px;
}
.upgrade-card__content ul {
    display: flex;
    flex-direction: column;
}
.upgrade-card__content ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: var(--fs-text-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text-lg);
    min-height: 57px;
    white-space: nowrap;
    padding: 16px 0px;
    border-top: 1px solid var(--neutral-30);
}
.upgrade-card__content.align-center ul li {
    justify-content: center;
}
.upgrade-card__content.align-right ul li {
    justify-content: flex-end;
}

.upgrade-card__content .upgrade-item--label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.upgrade-card__content .upgrade-item--label.qty {
    min-height: 38px;
}
.upgrade-card__content .upgrade-item--label .pricelist--question-badge {
    margin: -7px 0px 0px;
}

.upgrade-card__footer {
    display: flex;
    flex-direction: column;
}
.upgrade-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px;
    background: var(--primary);
    color: var(--neutral-10);
    font-size: var(--fs-text-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-text-lg);
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}
.upgrade-card__button:hover {
    background: var(--primary-hover);
}
.upgrade-card__button:focus {
    background: var(--primary-pressed);
}

.upgrade-card__button.purchase {
    background: var(--neutral-90);
}
.upgrade-card__button.purchase:hover {
    background: var(--neutral-70);
}
.upgrade-card__button.purchase:focus {
    background: var(--neutral-100);
}

@media (max-width: 1360px) {
    .kat__app.upgrade-page .formdata__content {
        max-width: none;
        padding: 0px;
    }
}

@media (max-width: 1366px) {
    .upgrade-card {
        flex: 1 0 auto;
    }
}

@media (max-width: 1024px) {
    .kat__app.upgrade-page {
        padding: 40px 0px 0px;
    }
}

@media (max-width: 768px) {
    .kat__app.upgrade-page {
        padding: 24px 0px 0px;
    }

    .kat__app.upgrade-page .formdata__right {
        gap: 24px;
    }
}



/* ========================================
        Dropdown Invitation List
======================================== */
.dropdown__invitation-list-control.selectize-control .selectize-input,
.dropdown__invitation-list-control.selectize-control .selectize-input.input-active {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0px;
    cursor: pointer;
    border-radius: 0px;
}

/* Item */
.dropdown__invitation-list-control.selectize-control .selectize-input > .item {
    font-size: var(--fs-text-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-text-lg);
    color: var(--neutral-10);
}

/* Input */
.dropdown__invitation-list-control.selectize-control .selectize-input > input {
    display: none !important;
}
.dropdown__invitation-list-control.selectize-control .selectize-input:after {
    position: relative;
    top: unset;
    right: unset;
    margin-top: 0px;
}

/* Line */
.dropdown__invitation-list-control.selectize-control .selectize-input.dropdown-active::before {
    content: none;
}

/* Dropdown */
.dropdown__invitation-list-control.selectize-dropdown {
    background: var(--neutral-10);
    border: none;
    outline: none;
    margin-top: 20px;
    border-radius: 6px;
    padding: 0px;
    box-shadow: var(--shadow-3);
}
.dropdown__invitation-list-control.selectize-dropdown:hover {
    background: var(--neutral-10);
}

/* Dropdown content */
.dropdown__invitation-list-control.selectize-dropdown .selectize-dropdown-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 8px;
}
.dropdown__invitation-list-control.selectize-dropdown .selectize-dropdown-content::-webkit-scrollbar {
    display: none;
}

/* Options */
.dropdown__invitation-list-control.selectize-dropdown .option {
    padding: 0px;
    margin-bottom: 8px;
    color: var(--neutral-70);
}
.dropdown__invitation-list-control.selectize-dropdown .option:last-of-type {
    margin-bottom: 0px;
}
.dropdown__invitation-list-control.selectize-dropdown .option.active {
    background-color: initial;
    color: initial;
}
.dropdown__invitation-list-control.selectize-dropdown .option:hover {
    background-color: var(--neutral-20);
    color: var(--neutral-100);
}
.dropdown__invitation-list-control.selectize-dropdown .option.selected,
.dropdown__invitation-list-control.selectize-dropdown .option.selected:hover {
    background-color: var(--danger-surface);
    color: var(--primary);
}

/* List */
.dropdown__invitation-list {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}
.dropdown__invitation-list .dil--icon {
    font-size: 24px;
}
.dropdown__invitation-list .dil--details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}
.dropdown__invitation-list .dil--title {
    font-size: var(--fs-text-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text-lg);
}
.dropdown__invitation-list .dil--status {
    font-size: var(--fs-text-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-text-sm);
    background: var(--neutral-30);
    border: 1px solid var(--neutral-50);
    color: var(--neutral-80);
    padding: 0px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
}
.dropdown__invitation-list .dil--status.suspend {
    color: var(--danger);
    border: 1px solid var(--danger-border);
    background: var(--danger-surface);
}
.dropdown__invitation-list .dil--status.pending {
    color: var(--warning);
    border: 1px solid var(--warning-border);
    background: var(--warning-surface);
}

/* Modal content */
.modal--dropdown__invitation-list .kat__modal-content {
    gap: 28px;
}
















































/* ========================================
        Invoices
========================================  */
.invoices_page {
    display: flex;
    padding: 32px 200px 48px 200px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}
.invoices_page .formdata__form{
    display: flex;
    padding: 40px;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
}
.invoices_page .formdata__head{
    border-bottom: 1px solid #EDEDED;;
    padding: 0px 0px 32px;
    text-align: left;
}

.invoices_page .formdata__head h3{
    color: #000;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.kat__app.invoices_page .kat__toolbar-wrap {
    background: transparent;
    border: none;
    text-align: left;
}
.invoices_page .kat__toolbar-wrap.center {
    justify-content: left;
}

.kat__toolbar li span{
    font-weight: 650;
}
.invoices_page .content_wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    align-self: stretch;
    padding-bottom: 32px;
}
.content_wrap .content_card{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 16px; */
    align-self: stretch;
    border-radius: 24px;
    border: 1px solid var(--neutral-30, #EDEDED);
    background: var(--neutral-10, #FFF);
    width: 100%;
}
.kat__toolbar-wrap {
   border: none;
}
.kat__toolbar{
    padding: 16px 0px;
}
.content_wrap .content_card .card_header{
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    position: relative;
}
.content_wrap .content_card .card_header .header_title {
    display: flex;
    gap: 16px;
    align-items: center;
}

.card_header .header_title span{
    color: var(--primary-main, #EB2F59);
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.content_wrap .content_card .card_header .badge{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 8px 12px;
    font-size: var(--fs-text-sm);
    line-height: var(--lh-text-sm);
    font-weight: var(--fw-semibold);
    border-radius: 25px;
    color: var(--neutral-100);
    background: var(--neutral-30);
    border: 1px solid var(--neutral-60);
    font-family: var(--montserrat);
}

.content_wrap .content_card .card_header .badge.pending{
    border: 1px solid var(--warning-border);
    background: var(--warning-surface);
    color: var(--warning);
}
.content_wrap .content_card .card_header .badge.paid{
    border: 1px solid var(--success-border);
    background: var(--success-surface);
    color: var(--success);
}

.content_wrap .content_card .card_header  .badge.expired{
    border: 1px solid var(--primary-border);
    background: var(--primary-surface);
    color: var(--primary);
}
.card_header .download_link{
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.card_header .download_link a{
    text-decoration: none;
}
.card_header .download_link a#\#isDisable {
    color: #757575;
}
a[aria-disabled="true"] {
    display: inline-block;
    pointer-events: none;
    text-decoration: none;
}
.invoices_wrap{
    display: block;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}
/* .invoices_wrap .content_wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    align-self: stretch;
} */


.invoices_wrap .content_wrap .invoices_info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 16px;
    align-self: stretch;
}

.invoices_wrap .content_wrap .invoices_info .datetime{
    color: var(--neutral-90, #404040);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.invoices_wrap .content_wrap .invoices_info .info_value{
    color: #0A0A0A;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}

.invoices_wrap .content_wrap .invoices_desc{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.invoices_wrap .content_wrap .invoices_desc .desc_title{
    color: #404040;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.invoices_wrap .content_wrap .invoices_desc .desc_value{
    color: #0A0A0A;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}

.invoices_wrap .content_wrap .invoices_amount{
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-bottom: 1px solid #EDEDED;
    padding-bottom: 8px;

}

.invoices_wrap .content_wrap .invoices_amount p{
    color: var(--neutral-100);
    text-align: center;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

.invoices_wrap .content_wrap .invoices_amount .price{
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 4px;
    margin-left: auto;  

}

.invoices_wrap .content_wrap .invoices_amount .amount_title{

}

.content_wrap .content_card .card_footer{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    padding-top: 24px;

}

@media (max-width:1080px) {
    .card_header .download_link span{
        display: none;
    }
    .invoices_page{
        padding: 32px 48px 48px 48px;
    }
}

@media (max-width:660px) {
    .footer_wrap .footer_content .copyright {
        gap: 4px;
    }
    .kat__app.print-page .formdata__right {
        /* gap: 40px; */
        font-size: 12px;
    }
    .card_header .download_link{
        gap: 0px;
        padding: 0px;
    }
    .content_wrap .content_card {
        gap: 0px;
    }
    .content_wrap .content_card .card_footer {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
        align-self: stretch;
    }
    .content_wrap .content_card .card_footer .kat__button {
        width: 100%;
        font-size: 14px;
    }
    .card_header .header_title span{
        font-size: 14px;
    }
    .content_wrap .content_card .card_header {
        align-items: self-start;
        flex-direction: column;
    }
    .invoices_page{
        padding: 0px;
        
    }
    .invoices_page .formdata__form{
        border-radius: 0px;
    }
    .invoices_wrap .content_wrap .invoices_desc .desc_title{
        font-size: 12px;
    }
    
    .invoices_wrap .content_wrap .invoices_desc .desc_value{
        font-size: 14px;
    }
    
    .invoices_wrap .content_wrap .invoices_amount p{
        font-size: 14px;
    }

    .invoices_wrap .content_wrap .invoices_info {
        padding: 0;
    }
    
    .invoices_wrap .content_wrap .invoices_info .datetime{
        font-size: 12px;
    }

    .invoices_wrap .content_wrap .invoices_info .info_value{
        font-size: 14px;
    }
    .card_header .download_link a {
        position: absolute;
        top: 2px;
        right: 0;
    }
}



/* PRINTED INVOICE */
.kat__app.print-page .formdata__page .formdata__right .formdata__content {
    padding-top: 30px;
}
.print_wrap{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 60px;
}
.first_header{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

 .content_wrap{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
}

.details{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.header_wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
}
.kat__app.print-page {
    padding: 0px 10px 0px;
    /* gap: 40px; */
}

.bridegroom_info, .event_info{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.bridegroom_title h4, .event_title h4{
    font-size: 18px;
    font-weight: 700;
}
.bridegroom_table thead{
    background: var(--primary-surface) !important;
    color: var(--neutral-100);
    text-align: center;
    
    font-size: 14px;
    font-style: normal;
    line-height: 16px;
    letter-spacing: -0.084px;
}

.bridegroom_table th, .event_table th{
    font-weight: 500;
    font-size: 15px;
}

.bridegroom_table td, .event_table td{
    font-weight: 500;
    font-size: 15px;
}

.event_table thead{
    background: var(--primary-surface) !important;
    color: var(--neutral-100);
    text-align: left;
    
    font-size: 14px;
    font-style: normal;
    line-height: 16px;
    letter-spacing: -0.084px;
}

.bridegroom_table tbody {
    color: var(--neutral-100);
    text-align: center;
    
    font-size: 14px;
    font-style: normal;
    line-height: 16px;
    letter-spacing: -0.084px;
}

.event_table tbody, .items_table tbody{
    color: var(--neutral-100);
    text-align: left;
    
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.084px;
}
.content_wrap .total_wrap .total_price{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.footer_wrap {
    background-color: var(--primary-surface);
    color: var(--neutral-100);
    font-weight: 500;
    padding: 4px 24px;
    margin-top: auto;
  }
  
  .footer_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .copyright {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 12px;
}
    .copyright .copy{
        font-size: 24px;
    }
  .footer_wrap .footer_content .copyright .img img{
    height: 16px;
  }
  
  .datetime p {
    margin: 0;
  }
.total_right, .desc_value.total_right{
    text-align: right;
}

.col.info h3{
    font-weight: 800;
}
.col.details p.title{
    font-weight: 700;
}
.total_wrap .total_price .total_invoice{
    font-weight: 700;
    font-size: 18px;
}

.total_wrap .total_price .total_tag{
    font-size: 18px;
}
@media (max-width: 480px) { 
    .kat__app.print-page .formdata__page .formdata__right .formdata__content {
        max-width: none;
        padding: 0px;
    }
    .kat__app.print-page .formdata__right .formdata__content .footer_content{
        /* gap: 40px; */
        font-size: 10px;
    }
    .footer_wrap {
        padding: 4px 12px;
    }
    .col.info h3 {
        font-size: 18px;
    }
    .bridegroom_table th, .event_table th {
        font-weight: 500;
        font-size: 10px;
    }
    .bridegroom_table td, .event_table td {
        font-weight: 500;
        font-size: 10px;
    }
    .bridegroom_title h4, .event_title h4 {
        font-size: 14px;
    }
    .total_wrap .total_price .total_invoice{
        font-size: 14px;
    }
    
    .total_wrap .total_price .total_tag{
        font-size: 14px;
    }
}



/* ========================================
        2023-10-27 17:43
======================================== */
.kat__guestbook-modal .modal-head{
    display: flex;
    padding: 24px 32px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    background: var(--neutral-10);
    border-bottom: 1px solid var(--neutral-40);
}
.modal-head .modal-title{
    color: var(--neutral-100);
    /* Heading S/SemiBold */
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
}

.kat__modal-close-btn{
    background-color: transparent;
    border: none;
}
.guest-session-body.locked{
    background-color: #d4d4d4d5;
    pointer-events: none;
}
.kat__guestbook-modal .modal-body{
    background: var(--neutral-10);
}
.session-list-head p{
    color: var(--neutral-70);
    /* Title L/SemiBold */
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}
.switch-wrap-top, .switch-wrap{
    padding: 0;
}
.guest-session-head, .guest-session-body{
    padding: 24px 32px;
}
.switch-label .name-session{
    color: var(--neutral-100);
    /* Title M/SemiBold */
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}
.switch-label .name{
    color: var(--neutral-70);
    /* Body Text M/Medium */
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.056px;
}
.switch-label .date{
    color: var(--neutral-80);
    /* Body Text S/Regular */
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.048px;
}
.switch-guest{
    position: relative;
    display: inline-block;
    width: 52px;
    height: 24px;
}
.switch-label input[type="checkbox"]{

}
.switch-guest input{
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-guest .slider.round{
    border-radius: 34px;
}
.switch-guest .slider.end{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.switch-guest .slider.start{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.switch-guest .slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.switch-guest .slider .text-slider {
    padding: 8px;
    font-family: var(--montserrat);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-text-sm);
    line-height: var(--lh-text-sm);
    color: var(--neutral-10);
    user-select: none;
}
.switch-guest .slider.round:before{
    border-radius: 50%;
}
.switch-guest .slider:before{
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
.switch-guest input:checked + .slider{
    background: var(--primary);
}
.switch-guest input:checked + .slider:before{
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.switch-wrap-top, .switch-wrap{
    display: flex;
    padding: 8px 0px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.kat__guestbook-modal .modal-foot{
    display: flex;
    padding: 24px 32px;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-top: 1px solid var(--neutral-40);
    background: #FFF;
}
.btn.btn-guest.submit{
    border-radius: 100px;
    border: 1px solid var(--neutral-100);
    background: var(--primary);
    color: var(--neutral-10, #FFF);
    /* Body Text L/SemiBold */
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    padding: 12px 16px;
    align-items: center;
    gap: 4px;
}
.kat__guestbook-modal .modal-foot .kat__modal-cancel-btn.close-modal{
    border-radius: 100px;
    border: 1px solid var(--primary-border);
    background: var(--neutral-10);
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 4px;
    color: var(--primary-main, #EB2F59);
    /* Body Text L/SemiBold */
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}