:root {
    --h1-knd: Poppins;
    /* fonts */
    --p-bold: Poppins;
    --p-bold-knd: Poppins;
    /* font sizes */
    --font-size-smi: 13px;
    --font-size-xs: 12px;
    --p-bold-size: 15px;
    --p-font-family: Poppins;
    --p-line-height: 134%;
    --p-font-weight: 400;
    --p-font-style: normal;
    --p-font-size: 15px;
    --p-bold-font-family: Poppins;
    --p-bold-font-size: 15px;
    --p-bold-line-height: 134%;
    --p-bold-font-weight: 500;
    --p-bold-font-style: normal;
    --font-size-sm: 14px;
    --h1-knd-size: 19px;
    --h2-size: 17px;
    --p-bold-knd-size: 15px;
    --h3-knd-size: 14px;
    --h1-font-family: Poppins;
    --h1-font-size: 21px;
    --h1-line-height: normal;
    --h1-font-weight: 600;
    --h1-font-style: normal;
    --h2-font-family: Poppins;
    --h2-font-size: 19px;
    --h2-line-height: normal;
    --h2-font-weight: 600;
    --h2-font-style: normal;
    --h3-font-family: Poppins;
    --h3-font-size: 17px;
    --h3-line-height: normal;
    --h3-font-weight: 600;
    --h3-font-style: normal;
    --h4-font-family: Poppins;
    --h4-font-size: 15px;
    --h4-line-height: normal;
    --h4-font-weight: 600;
    --h4-font-style: normal;
    --font-size-2xs: 11px;
    --font-size-mid: 17px;
    --disclaimer-font-family: Poppins;
    --disclaimer-font-size: 12px;
    --disclaimer-line-height: 130%;
    --disclaimer-font-weight: 500;
    --disclaimer-font-style: normal;
    --label-font-family: Poppins;
    --label-font-size: 13px;
    --label-line-height: normal;
    --label-font-weight: 600;
    --label-font-style: normal;
    --list-font-family: Poppins;
    --list-font-size: 15px;
    --list-line-height: 134%;
    --list-font-weight: 500;
    --list-font-style: normal;
    --list-bold-font-family: Poppins;
    --list-bold-font-size: 15px;
    --list-bold-line-height: 134%;
    --list-bold-font-weight: 600;
    --list-bold-font-style: normal;
    /* Colors */
    --black: #f8f8f6;
    --white: #fff;
    --black1: #e7e7e5;
    --black2: #2e2a25;
    --black3: #f2f2ef;
    --black4: #e7e7e5;
    --black5: #615e5a;
    --black6: #eeedeb;
    --black7: #bebdba;
    --black8: #fafaf8;
    --black9: #95938f;
    --main: #00b288;
    --red: #e35454;
    --yellow: #fff8b7;
    --green: #eff5ee;
    --red-button-bg: #fef5e6;
    --color-mediumseagreen: #00b288;
    --color-gainsboro-100: #ddddda;
    --green-button-bg: #dcf3eb;
    --color-darkcyan: #42917f;
    --input-bg: #fbfbfb;
    /* Spacing */
    --very-large: 24px;
    --small: 8px;
    --standart: 12px;
    --large: 16px;
    --quater: 4px;
    /* Gaps */
    --gap-0: 0px;
    --gap-mini: 15px;
    --gap-xl: 20px;
    --gap-9xs: 4px;
    --gap-3xs: 10px;
    --gap-xs: 12px;
    --gap-base: 16px;
    --gap-11xs: 2px;
    --gap-5xs: 8px;
    --gap-8xs: 5px;
    /* Paddings */
    --padding-5xs: 8px;
    --padding-sm: 14px;
    --padding-12xs: 1px;
    --padding-10xs: 3px;
    --padding-9xs: 4px;
    --padding-4xs: 9px;
    --padding-xs: 12px;
    --padding-base: 16px;
    --padding-3xs: 10px;
    --padding-mini: 15px;
    --padding-5xl: 24px;
    --padding-31xl: 50px;
    --padding-8xs: 5px;
    --padding-33xl: 52px;
    --padding-2xs: 11px;
    --padding-6xs: 7px;
    --padding-7xs: 6px;
    --padding-13xl: 32px;
    /* Border radiuses */
    --padding-xl: 20px;
    --br-11xl: 30px;
    --br-5xs: 8px;
    --br-4xs: 9px;
    --br-3xs: 10px;
    --br-21xl: 40px;
    /* Border radiuses */
    --br-mini: 15px;
    --br-6xs: 7px;
    --br-6xs-5: 6.5px;
    --br-xl: 20px;
    --d: 100vh;
}

.pointer{
    cursor:pointer;
}

.flex{
    display:flex;
}

.font-bold{
    font-weight:600;
}

.font-medium {
    font-weight: 500;
}

.rounded-10{
    border-radius:10px;
}

.rounded-15 {
    border-radius: 15px;
}

.rounded-20 {
    border-radius: 15px;
}

.bg-green {
    background-color: #00b288 !important;
}

.bg-pitch {
    background-color: #FEF5E6 !important;
}

.bg-light-green {
    background-color: #dcf3eb !important;
}

.bg-black-50 {
    background-color: #F2F2EF !important;
}

.bg-black-150 {
    background-color: #DDDDDA !important;
}

.bg-black-700 {
    background-color: #615E5A !important;
}

.bg-red {
    background-color: #E35454 !important;
}

.text-black {
    color: #2E2A25 !important;
}

.text-black-500 {
    color: #95938F !important;
}

.text-black-700 {
    color: #615E5A !important;
}

.text-white {
    color: #FFFFFF !important;
}

.text-green {
    color: #42917F !important;
}

.text-red {
    color: #E35454 !important;
}

.keynest-button {
    background: var(--green-button-bg, #dcf3eb);
    border-radius: 20px;
    padding: 5px 12px 5px 12px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.keynest-button-inner {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.keynest-button-txt {
    color: var(--black2, #2e2a25);
    text-align: center;
    font-family: var(--h4-font-family, "Poppins");
    font-size: var(--h4-font-size, 15px);
    font-weight: var(--h4-font-weight, 600);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kn-green-btn {
    display: flex;
    justify-content: center;
    border-radius: var(--br-3xs);
    background-color: var(--main);
    overflow: hidden;
    flex-direction: row;
    align-items: center;
    padding: var(--padding-xs) var(--padding-13xl) var(--padding-xs) var(--padding-13xl);
    gap: var(--gap-9xs);
    color: var(--white);
    cursor: pointer;
    position: relative;
    line-height: 135%;
    font-weight: 600;
    text-transform: none;
    border: none;
    font-size: var(--font-size-mid);
    width: 100%;
}

@supports (-webkit-touch-callout: none) {
    .floating-text-field > .input-txt:focus ~ .key-text-field-label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px;
        line-height: 15px;
        font-weight: 600;
        color: #95938F;
    }

    .floating-text-field > .text-field-text-input:focus ~ .text-field-label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px;
        line-height: 15px;
        font-weight: 600;
        color: #95938F;
    }

    .floating-text-field > .input-txt.filled ~ .key-text-field-label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px;
        line-height: 15px;
        font-weight: 600;
        color: #95938F;
    }

    .floating-text-field > .text-field-text-input.filled ~ .text-field-label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px;
        line-height: 15px;
        font-weight: 600;
        color: #95938F;
    }

    /*.floating-text-field > .input-txt:focus, .floating-text-field > .input-txt.filled {
        padding-top: 19px;
        padding-bottom: 6px;
    }*/

    .floating-text-field > .text-field-text-input:focus, .floating-text-field > .text-field-text-input.filled {
        padding-top: 15px;
    }
}
.floating-text-field > .input-txt.filled ~ .key-text-field-label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
    color: #95938F;
}
@supports not (-webkit-touch-callout: none) {
    .floating-text-field > .input-txt:focus ~ .key-text-field-label, .floating-text-field > .input-txt:not(:placeholder-shown) ~ .key-text-field-label, .floating-text-field > .input-txt:-webkit-autofill ~ .key-text-field-label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px;
        line-height: 15px;
        font-weight: 600;
        color: #95938F;
    }

    .field-phone .filled ~ .key-text-field-label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px;
        line-height: 15px;
        font-weight: 600;
        color: #95938F;
    }

    .text-label-float {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px !important;
        line-height: 15px !important;
        font-weight: 600 !important;
        color: #95938F !important;
    }

    .floating-text-field > .input-txt:focus, .floating-text-field > .input-txt:not(:placeholder-shown), .floating-text-field > .input-txt:-webkit-autofill {
        padding-top: 19px;
        padding-bottom: 6px;
    }

    .field-phone .input-txt-phone:focus, .field-phone .input-txt-phone:not(:placeholder-shown) {
        padding-top: 15px;
        padding-bottom: 10px;
    }

    .floating-text-field > .text-field-text-input:focus ~ .text-field-label, .floating-text-field > .text-field-text-input:not(:placeholder-shown) ~ .text-field-label, .floating-text-field > .text-field-text-input:-webkit-autofill ~ .text-field-label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        font-size: 10px;
        line-height: 15px;
        font-weight: 600;
        color: #95938F;
    }

    .floating-text-field > .text-field-text-input:focus, .floating-text-field > .text-field-text-input:not(:placeholder-shown) {
        padding-top: 10px;
    }
}

    .text-field-label {
        position: absolute;
        letter-spacing: 0.035em;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 16px;
        margin-bottom: 0px;
        left: 0;
        top: 0;
        height: 100%;
        padding: 6px 6px 6px 0;
        transition: opacity .1s ease-in-out,transform .1s ease-in-out;
        transform-origin: 0 0;
        pointer-events: none;
        color: #95938F;
    }

    .icons-20 {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        position: relative;
        overflow: visible;
    }

    input[type=checkbox]:checked + .toggle-checkbox, input[type=checkbox]:checked + input + .toggle-checkbox {
        border-color: var(--green-button-bg, #dcf3eb);
        background: var(--green-button-bg, #dcf3eb);
    }

        input[type=checkbox]:checked + .toggle-checkbox .toggle-checkmark, input[type=checkbox]:checked + input + .toggle-checkbox .toggle-checkmark {
            display: block;
        }

        input[type=checkbox]:checked + .toggle-checkbox .toggle-label, input[type=checkbox]:checked + input + .toggle-checkbox .toggle-label {
            color: var(--black2, #2e2a25);
        }

        input[type=checkbox]:checked + .toggle-checkbox .un-checked-dark, input[type=checkbox]:checked + input + .toggle-checkbox .un-checked-dark {
            display: none;
        }