﻿:root {
    --exexlargefontsize: 64px;
    --exexlargelineheight: 72px;
    --exexlargeletterspace: -1.92px;
    --exlargefontsize: 48px;
    --exlargelineheight: 56px;
    --exlargeletterspace: -0.96px;
    --largefontsize: 32px;
    --largelineheight: 36px;
    --large-letter-space: -0.32px;
    --medium-font-size: 24px;
    --medium-line-height: 28px;
    --medium-letter-space: 0px;
    --bodymedium-font-size: 20px;
    --bodymedium-line-height: 24px;
    --bodymedium-letter-space: -1.92px;
    --body-font-size: 16px;
    --body-line-height: 20px;
    --body-letter-space: 0px;
    --small-font-size: 14px;
    --small-line-height: 18px;
    --small-letter-space: 0.07px;
    --exsmall-fontsize: 12px;
    --exsmall-line-height: 16px;
    --exsmall-letter-space: 0.12px;
    --border-radius-2px:2px;
    --border-radius-4px:4px;
    --border-radius-6px:6px;
    --border-radius-22px:22px;
    --border-radius-24px:24px;
    --border-radius-999px:999px;
    --color-primary-black:#000000;
    --color-primary-white:#ffffff;
    --background-primary-black:#000000;
    --background-primary-white:#ffffff;
    --background-gray:#F2F2F2;
    --background-gray:#F2F2F2;
    --color-surface-gray-4:#D9D9D9;

    --color-primary-accent:#D5D616;
    --color-primary-accentrgba20:rgba(213,214,22,0.20);
    --color-primary-accentcolor:#000000;

    --color-secondry-text:#d0397b;
    --color-surface-gray-1:#F7F7F7;
    --color-surface-gray-2:#f2f2f2;
    --border-bottom-gray:1px solid #F2F2F2;
    --border-bottom-gray-4:1px solid #D9D9D9;
    --border-bottom-black:1px solid #000000;
    --color-backdrop-black-tint-1:rgba(0, 0, 0, 0.05);
    --color-backdrop-white-tint-4:rgba(255, 255, 255, 0.75);
    --color-surface-black-tint-1:rgba(0, 0, 0, 0.03);
    --color-surface-black-tint-2: rgba(0, 0, 0, 0.15);
    --color-surface-black-tint-3: rgba(0, 0, 0, 0.05);
    --color-surface-black-tint-4: rgba(0, 0, 0, 0.30);
    --color-surface-black-tint-5: rgba(0, 0, 0, 0.10);
    --color-surface-black-opacity-4:rgba(0, 0, 0, 0.4);
    --color-surface-white-tint-2:rgba(255, 255, 255, 0.15));

    --color-text-black-2:rgba(0, 0, 0, 0.50);
    --color-text-black-1:#000000;
    --gap-8px:8px;
}


@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Light-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Light-Web.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Thin-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Thin-Web.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Bold-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Bold-Web.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Semibold-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Semibold-Web.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Medium-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Medium-Web.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Extralight-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Extralight-Web.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-ThinItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-ThinItalic-Web.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-RegularItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-RegularItalic-Web.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}


@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-SuperItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-SuperItalic-Web.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}


@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-BlackItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-BlackItalic-Web.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-MediumItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-MediumItalic-Web.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Super-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Super-Web.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Black-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Black-Web.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-Regular-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-Regular-Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-LightItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-LightItalic-Web.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-BoldItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-BoldItalic-Web.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-ExtralightItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-ExtralightItalic-Web.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fontfuture/graphik/Graphik-SemiboldItalic-Web.woff2') format('woff2'), url('../fontfuture/graphik/Graphik-SemiboldItalic-Web.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}



body {
    margin: 0;
    font-family: Graphik;
    color: var(--color-primary-black);
    font-size: var(--body-font-size);
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--body-letter-space);
    line-height: var(--body-line-height);
}

.justifyflexend {
    justify-content: flex-end;
}

.anchor-button, .anchor-button-accent, .anchor-button-withover, .search-input-header {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: var(--border-radius-4px);
    color: var(--color-primary-black);
    text-align: center;
    font-family: Graphik;
    font-size: var(--small-font-size);
    font-style: normal;
    font-weight: 500;
    line-height: var(--small-line-height);
    letter-spacing: var(--small-letter-space);
    position: relative;
    transition: 0.3s;
    white-space: nowrap;
    text-decoration: none;
    text-transform:capitalize;
}

.anchor-button-withover {
    width: 100%;
}

.input-wrpper {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    margin: 0;
    padding: 0;
    position: relative;
}

.anchor-button-withover:hover, .anchor-button:hover {
    background: var(--color-surface-black-tint-1);
}

.anchor-button-withover.active {
    background: var(--color-surface-black-tint-5);
}

.anchor-button-accent {
    background: var(--color-primary-accent);
    color: var(--color-primary-accentcolor);
}
.subsection-defult .anchor-button:hover {
      background: var(--color-primary-accent);
    color: var(--color-primary-accentcolor);
}

.search-input-header .input-wrpper input {
    overflow: hidden;
    color: var(--color-surface-black-tint-4);
    text-overflow: ellipsis;
    width: 100%;
    padding: 4px 30px;
    height: 30px;
    border-radius: var(--border-radius-4px);
    outline: none;
    background: var(--color-surface-black-tint-3);
}

    .search-input-header .input-wrpper input:hover, .search-input-header .input-wrpper input:focus {
        background: var(--color-surface-black-tint-5) !important;
    }

    .search-input-header .input-wrpper input:focus-visible {
        border-radius: 4px;
        border: 1px solid var(--color-primary-accent);
        background: var(--color-surface-black-tint-3);
    }

    .search-input-header .input-wrpper input:not(:placeholder-shown) {
        background: var(--color-surface-black-tint-3);
        color: var(--color-primary-black,#000);
    }

.gap8 {
    gap: 8px;
}

.layeriframe {
    top: 54px !important;
    z-index: 1111;
    border-top: var(--border-bottom-gray);
}

    .layeriframe.hidelayerclass {
        display: none !important;
    }

iframe {
    border: none;
}

.makeitbackgroundcall {
    position: absolute !important;
    top: -100000px !important;
    left: -100000px !important;
}

.exsmallerletterclass {
    font-size: var(--exsmall-fontsize, 12px);
    color: var(--color-text-black-2, rgba(0, 0, 0, 0.50));
    font-family: Graphik;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--exsmall-letter-space, 0.12px);
    line-height: var(--exsmall-line-height, 18px);
}
.exsmallerletterclassblack {
    font-size: var(--exsmall-fontsize, 12px);
    color: var(--color-primary-black,#000);
    font-family: Graphik;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--exsmall-letter-space, 0.12px);
    line-height: var(--exsmall-line-height, 18px);
}
.smallerletterclass {
    font-family: Graphik;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--small-letter-space,0.07px);
    font-size: var(--small-font-size,14px);
    line-height: var(--small-line-height,18px);
}

.smallerletterclassblack {
    font-family: Graphik;
    color: var(--color-primary-black,#000);
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--small-letter-space,0.07px);
    font-size: var(--small-font-size,14px);
    line-height: var(--small-line-height,18px);
}

.smallerletterclasswhite {
    font-family: Graphik;
    color: var(--color-primary-white,#ffffff);
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--small-letter-space,0.07px);
    font-size: var(--small-font-size,14px);
    line-height: var(--small-line-height,18px);
}

.bodyletterclassblack {
    font-family: Graphik;    
    color: var(--color-primary-black,#000);
    font-size: var(--body-font-size);
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--body-letter-space);
    line-height: var(--body-line-height);
}
.bodyletterclasswhite {
    font-family: Graphik;    
    color: var(--color-primary-white,#ffffff);
    font-size: var(--body-font-size);
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--body-letter-space);
    line-height: var(--body-line-height);
}

.mediumletterclass {
    font-family: Graphik;
    font-size: var(--medium-font-size,24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--medium-line-height,28px);
    letter-spacing: var(--medium-letter-space,0px);
}

.mediumletterclassblack {
    font-family: Graphik;
    color: var(--color-primary-black,#000);
    font-size: var(--medium-font-size,24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--medium-line-height,28px);
    letter-spacing: var(--medium-letter-space,0px);
}

.mediumletterclasswhite {
    font-family: Graphik;
    color: var(--color-primary-white,#ffffff);
    font-size: var(--medium-font-size,24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--medium-line-height,28px);
    letter-spacing: var(--medium-letter-space,0px);
}

.largeletterclassblack {
    color: var(--color-primary-black,#000);
    font-family: Graphik;
    font-size: var(--largefontsize,32px);
    font-style: normal;
    line-height: var(--largelineheight,36px);
    letter-spacing: var(--large-letter-space,-0.32px);
}

.largeletterclasswhite {
    color: var(--color-primary-white,#ffffff);
    font-family: Graphik;
    font-size: var(--largefontsize,32px);
    font-style: normal;
    line-height: var(--largelineheight,36px);
    letter-spacing: var(--large-letter-space,-0.32px);
}

.largeletterclassaccent {
    color: var(--color-primary-accent);
    font-family: Graphik;
    font-size: var(--largefontsize,32px);
    font-style: normal;
    line-height: var(--largelineheight,36px);
    letter-spacing: var(--large-letter-space,-0.32px);
}

.exlargeletterclassblack {
    color: var(--color-primary-black,#000);
    font-family: Graphik;
    font-size: var(--exlargefontsize,32px);
    font-style: normal;
    line-height: var(--exlargelineheight,36px);
    letter-spacing: var(--exlargeletterspace,-0.32px);
}

.exlargeletterclasswhite {
    color: var(--color-primary-white,#ffffff);
     font-family: Graphik;
    font-size: var(--exlargefontsize,32px);
    font-style: normal;
    line-height: var(--exlargelineheight,36px);
    letter-spacing: var(--exlargeletterspace,-0.32px);
}
.exexlargeletterclasswhite {
    color: var(--color-primary-white,#ffffff);
     font-family: Graphik;
    font-size: var(--exexlargefontsize,32px);
    font-style: normal;
    line-height: var(--exexlargelineheight,36px);
    letter-spacing: var(--exexlargeletterspace,-0.32px);
}


.cls-tab-ulli {
    display: flex;
    padding: 4px;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    background: var(--color-surface-black-tint-1, rgba(0, 0, 0, 0.03));
    margin: 0;
}

    .cls-tab-ulli li a {
        display: flex;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        flex: 1 0 0;
        border-radius: 4px;
    }

ul.cls-tab-ulli li {
    flex: 1 0 auto;
}

.cls-tab-ulli li.active a, .cls-tab-ulli li:hover a {
    background: var(--color-primary-white,#ffffff);
}

input:focus, input:hover {
    border-radius: 2px;
    border: 1px solid var(--color-text-black-1, #000) !important;
    background-color: var(--color-primary-white,#ffffff) !important;
}

input {
    background-color: var(--color-primary-white,#ffffff);
    border: 1px solid var(--color-surface-black-tint-2);
    font-family: Graphik;
    font-size: var(--body-font-size);
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--body-letter-space);
    line-height: var(--body-line-height);
}

    input::-webkit-input-placeholder {
        color: var(--color-surface-black-tint-4) !important;
        opacity: 1 !important;
    }

    input ::placeholder {
        color: var(--color-surface-black-tint-4) !important;
        opacity: 1 !important;
    }

    input :-ms-input-placeholder {
        color: var(--color-surface-black-tint-4) !important;
        opacity: 1 !important;
    }

.search-input-header .input-wrpper input::-webkit-input-placeholder {
    color: var(--color-surface-black-tint-4) !important;
}

.search-input-header .input-wrpper input ::placeholder {
    color: var(--color-surface-black-tint-4) !important;
}

.search-input-header .input-wrpper input :-ms-input-placeholder {
    color: var(--color-surface-black-tint-4) !important;
}
