@font-face {
    font-family: 'VelaSans';
    src: url('../font/VelaSans/Static/OTF/VelaSans-Regular.otf') format('opentype'),
    url('../font/VelaSans/Static/TTF/VelaSans-Regular.ttf') format('truetype'),
    url('../font/VelaSans/Static/Web/VelaSans-Regular.woff2') format('woff2'),
    url('../font/VelaSans/Static/Web/VelaSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'VelaSans';
    src: url('../font/VelaSans/Static/OTF/VelaSans-Medium.otf') format('opentype'),
    url('../font/VelaSans/Static/TTF/VelaSans-Medium.ttf') format('truetype'),
    url('../font/VelaSans/Static/Web/VelaSans-Medium.woff2') format('woff2'),
    url('../font/VelaSans/Static/Web/VelaSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'VelaSans';
    src: url('../font/VelaSans/Static/OTF/VelaSans-SemiBold.otf') format('opentype'),
    url('../font/VelaSans/Static/TTF/VelaSans-SemiBold.ttf') format('truetype'),
    url('../font/VelaSans/Static/Web/VelaSans-SemiBold.woff2') format('woff2'),
    url('../font/VelaSans/Static/Web/VelaSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'VelaSans';
    src: url('../font/VelaSans/Static/OTF/VelaSans-Bold.otf') format('opentype'),
        url('../font/VelaSans/Static/TTF/VelaSans-Bold.ttf') format('truetype'),
        url('../font/VelaSans/Static/Web/VelaSans-Bold.woff2') format('woff2'),
        url('../font/VelaSans/Static/Web/VelaSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'VelaSans';
    src: url('../font/VelaSans/Static/OTF/VelaSans-ExtraBold.otf') format('opentype'),
    url('../font/VelaSans/Static/TTF/VelaSans-ExtraBold.ttf') format('truetype'),
    url('../font/VelaSans/Static/Web/VelaSans-ExtraBold.woff2') format('woff2'),
    url('../font/VelaSans/Static/Web/VelaSans-ExtraBold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}



:root{
    --black: #000000;
    --white: #FFFFFF;
    --blue: #5853e5;
    --lightgrey: #F5F6F7;
    --grey: #eff1f3;
    --grey-shadowed: #e6e8e9;
    --grey-shadowed-alternative: #c5bcff;
    --darkgrey: #00000088;
    --grey-alternative: #bfbfbf;
    --lightblue: #7765f3;
    --darkblue: #0d188d;
    --deep-blue: #452C86;
    --indigo-blue:#475188;
    --marine-blue: #497989;
    --yellow: #f5db91;
    --transparentblue: #efeefa;
    --red: #d0011b;
    --orange:#ff9800;
    --pink: #DCBCDD;
    --light-green: #82C546;
    --green:#8BC400;
    --medium-green:#40A159;
    --dark-green: #448D71;
    --dark-mareen:#016EA6;
    --light-mareen:#12B3CD;
    --cyan: #0B97BD;

    --default-font-family: VelaSans, sans;
    --font-family-h: VelaSans;
    --default-background-color: var(--lightgrey);
    --default-text-color: var(--black);
    --secondary-text-color: var(--white);
    --default-border-color: var(--grey-alternative);
    --primary-border-color: var(--black);
    --accent-border-color: var(--yellow);
    --grey-text-color: var(--darkgrey);
    --content-background: var(--white);
    --content-border-radius: 16px;
    --content-padding: 16px;
    --default-margin: 16px;

    --main-content-padding: 16px;
    --content-margin: 0;
    --blue-gradient-background: linear-gradient(90deg, var(--lightblue) 0%, var(--darkblue) 100%);
    --blue-pink-gradient-background: linear-gradient(43deg, var(--dark-mareen) 0%, var(--light-mareen) 38%, var(--pink) 100%);

    --pro-gradient-backgroud: linear-gradient(90deg, var(--lightblue) 0%, var(--deep-blue) 100%);

    --primary-background-color: var(--black);
    --secondary-background-color: var(--lightgrey);
    --secondary2-background-color: var(--darkgrey);
    --accent-background-color: var(--yellow);
    --accent-light-background-color: #ff980005;
    --mobile-menu-panel-background: var(--white);

    --link-text-color: var(--blue);
    --link-alternative-text-color: var(--white);

    --primary-button-text-color: var(--white);
    --primary-button-background-color: var(--black);
    --primary-button-border: none;

    --primary-button-alternative-text-color: var(--black);
    --primary-button-alternative-background-color: var(--white);
    --primary-button-alternative-border: none;

    --secondary1-button-text-color: var(--black);
    --secondary1-button-background-color: var(--white);
    --secondary1-button-border: 2px solid var(--black);

    --secondary1-button-alternative-text-color: var(--white);
    --secondary1-button-alternative-background-color: transparent;
    --secondary1-button-alternative-border: 2px solid var(--white);

    --secondary2-button-text-color: var(--black);
    --secondary2-button-background-color: var(--lightgrey);
    --secondary2-button-border: none;

    --secondary2-button-alternative-text-color: var(--black);
    --secondary2-button-alternative-background-color: var(--white);
    --secondary2-button-alternative-border: none;

    --segment-control-text-color: var(--black);
    --segment-control-background-color: var(--grey);
    --segment-control-border: none;

    --primary-segment-control-text-color: var(--white);
    --primary-segment-control-background-color: var(--black);
    --primary-segment-control-border: none;

    --switch-text-color: var(--black);
    --switch-background-color: var(--grey);
    --switch-selected-background-color: var(--white);

    --options-text-color: var(--black);
    --options-background-color: var(--white);
    --options-border: 1px solid var(--black);
    --options-list-text-color: var(--black);
    --options-list-background-color: var(--content-background);
    --options-list-border: none;
    --options-list-radius: 8px;

    --options-alternative-text-color: var(--white);
    --options-alternative-background-color: var(--black);
    --options-alternative-border: 1px solid var(--white);


    --notification-info-background-color: var(--transparentblue);
    --notification-info-text-color: var(--black);
    --notification-info-badge-background-color: var(--black);
    --notification-info-badge-text-color: var(--white);

    --default-input-background-color: #EAECED;
    --default-input-text-color: var(--black);
    --default-input-border: none;
    --default-input-before-text-color: var(--darkgrey);
    --default-input-after-text-color: var(--darkgrey);
    --default-select-border: 1px solid var(--default-text-color);

    --table-row-primary-background-color: var(--default-background-color);
    --table-row-seconday-background-color: #EAECED;

    --package-p2-color: var(--cyan);
    --package-p3-color: var(--green);
    --package-p4-color: #CEBE10;
    --package-p5-color: #FF8400;
    --package-p6-color: #FF004B;
    --package-p7-color: #5853E5;


}