/* font */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('/common_resources/fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('/common_resources/fonts/Roboto-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100;
    src: url('/common_resources/fonts/Roboto-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/common_resources/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('/common_resources/fonts/Roboto-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/common_resources/fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('/common_resources/fonts/Roboto-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/common_resources/fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('/common_resources/fonts/Roboto-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: url('/common_resources/fonts/Roboto-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: url('/common_resources/fonts/Roboto-BlackItalic.ttf') format('truetype');
}

/* design variables */
@set {
    font_family_heading: Roboto, Oswald, arial, sans-serif;
    font_family_general: Roboto, Lato, arial, sans-serif;
}

:root {
    --white: #ffffff;
    --bs-modal-bg: #ffffff;


    --ebg-brand-primary-blue: #2537E2;
    --ebg-brand-primary-navy: #142196;
    --ebg-brand-primary-light-highlight: #E9EBFC;
    --ebg-brand-secondary-1: #36DDF4;
    --ebg-brand-secondary-2: #DCFCFD;

    --primary-dark-highlight: #D2D7F8;

    --secondary-1: #36DDF4;
    --secondary-2: #DCFCFD;
    --secondary-3: #E9FDFF;

    --neutral-1: #E2E7F1;
    --neutral-2: #F5F7FB;

    --main-black: #444444;
    --silver-sonic: #757575;
    --accent: #FF6900;
    --accent-shadow: rgba(255, 105, 0, 0.5);
    --dark-shadow: rgba(0, 0, 0, 0.1);
    --black-disabled: rgba(68, 68, 68, 0.5);
    --accent-errors: #D72D2D;
    --light-grey-border: #90939D;
    --ebg-promo-color: #B40B0B;

    /* buttons */
    --primary-blue-5opacity: rgba(37, 55, 226, 0.05);
    --primary-blue-50opacity: rgba(37, 55, 226, 0.5);
    --primary-blue-15opacity: rgba(37, 55, 226, 0.15);

    --primary-blue: var(--primary-color);
    --primary-navy: var(--primary-color-two);
    --primary-hover: color-mix(in srgb, var(--primary-color) 80%, #000000 20%);
    --primary-active: color-mix(in srgb, var(--primary-color) 80%, #000000 30%);
    --primary-blue-5opacity: color-mix(in srgb, var(--primary-color) 5%, #000000 20%);
    --primary-blue-15opacity: color-mix(in srgb, var(--primary-color) 15%, #000000 20%);
    --primary-blue-50opacity: color-mix(in srgb, var(--primary-color) 50%, #000000 20%);
    --primary-click: color-mix(in srgb, var(--primary-color) 85%, #000000 15%);
    --secondary-1: var(--secondary-color);
    --secondary-2: var(--secondary-color-two);
    --primary-light-highlight: var(--accent-color);
    --secondary-btn-hover: color-mix(in srgb, var(--primary-color) 15%, #ffffff 85%);
}