﻿
:root {
    --communicationColors-Shade30: #004578;
    --communicationColors-Shade20: #005a9e;
    --communicationColors-Shade10: #106ebe;
    --communicationColors-Primary: #0078d4;
    --communicationColors-Tint10: #2b88d8;
    --communicationColors-Tint20: #c7e0f4;
    --communicationColors-Tint30: #deecf9;
    --communicationColors-Tint40: #eff6fc;
    --neutralColors-Black: #000000;
    --neutralColors-Gray220: #11100f;
    --neutralColors-Gray210: #161514;
    --neutralColors-Gray200: #1b1a19;
    --neutralColors-Gray190: #201f1e;
    --neutralColors-Gray180: #252423;
    --neutralColors-Gray170: #292827;
    --neutralColors-Gray160: #323130;
    --neutralColors-Gray150: #3b3a39;
    --neutralColors-Gray140: #484644;
    --neutralColors-Gray130: #605e5c;
    --neutralColors-Gray120: #797775;
    --neutralColors-Gray110: #8a8886;
    --neutralColors-Gray100: #979593;
    --neutralColors-Gray90: #a19f9d;
    --neutralColors-Gray80: #b3b0ad;
    --neutralColors-Gray70: #bebbb8;
    --neutralColors-Gray60: #c8c6c4;
    --neutralColors-Gray50: #d2d0ce;
    --neutralColors-Gray40: #e1dfdd;
    --neutralColors-Gray30: #edebe9;
    --neutralColors-Gray20: #f3f2f1;
    --neutralColors-Gray10: #faf9f8;
    --neutralColors-White: #ffffff;
    --sharedColors-PinkRed10: #750b1c;
    --sharedColors-Red20: #a4262c;
    --sharedColors-Red10: #d13438;
    --sharedColors-RedOrange20: #603d30;
    --sharedColors-RedOrange10: #da3b01;
    --sharedColors-Orange30: #8e562e;
    --sharedColors-Orange20: #ca5010;
    --sharedColors-Orange10: #ffaa44;
    --sharedColors-Yellow10: #fce100;
    --sharedColors-OrangeYellow20: #986f0b;
    --sharedColors-OrangeYellow10: #c19c00;
    --sharedColors-YellowGreen10: #8cbd18;
    --sharedColors-Green20: #0b6a0b;
    --sharedColors-Green10: #498205;
    --sharedColors-GreenCyan10: #00ad56;
    --sharedColors-Cyan40: #005e50;
    --sharedColors-Cyan30: #005b70;
    --sharedColors-Cyan20: #038387;
    --sharedColors-Cyan10: #00b7c3;
    --sharedColors-CyanBlue20: #004e8c;
    --sharedColors-CyanBlue10: #0078d4;
    --sharedColors-Blue10: #4f6bed;
    --sharedColors-BlueMagenta40: #373277;
    --sharedColors-BlueMagenta30: #5c2e91;
    --sharedColors-BlueMagenta20: #8764b8;
    --sharedColors-BlueMagenta10: #8378de;
    --sharedColors-Magenta20: #881798;
    --sharedColors-Magenta10: #c239b3;
    --sharedColors-MagentaPink20: #9b0062;
    --sharedColors-MagentaPink10: #e3008c;
    --sharedColors-Gray40: #393939;
    --sharedColors-Gray30: #7a7574;
    --sharedColors-Gray20: #69797e;
    --sharedColors-Gray10: #a0aeb2;
    --palette-Accent: #0078d4;
    --palette-Black: #000000;
    --palette-BlackTranslucent40: rgba(0,0,0,0.4);
    --palette-Blue: #0078d4;
    --palette-BlueDark: #002050;
    --palette-BlueLight: #00bcf2;
    --palette-BlueMid: #00188f;
    --palette-Green: #107c10;
    --palette-GreenDark: #004b1c;
    --palette-GreenLight: #bad80a;
    --palette-Magenta: #b4009e;
    --palette-MagentaDark: #5c005c;
    --palette-MagentaLight: #e3008c;
    --palette-NeutralDark: var(--neutralColors-Gray190);
    --palette-NeutralLight: var(--neutralColors-Gray30);
    --palette-NeutralLighter: var(--neutralColors-Gray20);
    --palette-NeutralLighterAlt: var(--neutralColors-Gray10);
    --palette-NeutralPrimary: var(--neutralColors-Gray160);
    --palette-NeutralPrimaryAlt: var(--neutralColors-Gray150);
    --palette-NeutralQuaternary: var(--neutralColors-Gray50);
    --palette-NeutralQuaternaryAlt: var(--neutralColors-Gray40);
    --palette-NeutralSecondary: var(--neutralColors-Gray130);
    --palette-NeutralSecondaryAlt: var(--neutralColors-Gray110);
    --palette-NeutralTertiary: var(--neutralColors-Gray90);
    --palette-NeutralTertiaryAlt: var(--neutralColors-Gray60);
    --palette-Orange: #d83b01;
    --palette-OrangeLight: #ea4300;
    --palette-OrangeLighter: #ff8c00;
    --palette-Purple: #5c2d91;
    --palette-PurpleDark: #32145a;
    --palette-PurpleLight: #b4a0ff;
    --palette-Red: var(--sharedColors-Red10);
    --palette-RedDark: var(--sharedColors-Red20);
    --palette-Teal: #008272;
    --palette-TealDark: #004b50;
    --palette-TealLight: #00b294;
    --palette-ThemeDark: #005a9e;
    --palette-ThemeDarkAlt: #106ebe;
    --palette-ThemeDarker: #004578;
    --palette-ThemeLight: #c7e0f4;
    --palette-ThemeLighter: #deecf9;
    --palette-ThemeLighterAlt: #eff6fc;
    --palette-ThemePrimary: #0078d4;
    --palette-ThemeSecondary: #2b88d8;
    --palette-ThemeTertiary: #71afe5;
    --palette-White: #ffffff;
    --palette-WhiteTranslucent40: rgba(255,255,255,0.4);
    --palette-Yellow: #ffb900;
    --palette-YellowLight: #fff100;
}

:root {
    --semanticColors-ActionLink: var(--palette-NeutralPrimary);
    --semanticColors-BodyBackground: var(--palette-White);
    --semanticColors-BodyFrameBackground: var(--palette-White);
    --semanticColors-BodyFrameDivider: var(--palette-NeutralLight);
    --semanticColors-BodyText: var(--palette-NeutralPrimary);
    --semanticColors-BodyTextChecked: var(--palette-Black);
    --semanticColors-BodySubtext: var(--palette-NeutralSecondary);
    --semanticColors-BodyDivider: var(--palette-NeutralTertiaryAlt);
    --semanticColors-DisabledBackground: var(--palette-NeutralLighter);
    --semanticColors-DisabledText: var(--palette-NeutralTertiary);
    --semanticColors-DisabledBodyText: var(--palette-NeutralTertiaryAlt);
    --semanticColors-DisabledBodySubtext: var(--palette-NeutralQuaternary);
    --semanticColors-FocusBorder: var(--palette-Black);
    --semanticColors-ErrorText: var(--palette-RedDark);
    --semanticColors-WarningText: #333333;
    --semanticColors-ErrorBackground: rgba(245,135,145,0.2); /*rgba(232,17,35,0.2);*/
    --semanticColors-BlockingBackground: rgba(250,65,0,0.2); /*rgba(234,67,0,0.2);*/
    --semanticColors-WarningBackground: rgba(255, 200, 10, .2); /*rgba(255,185,0,0.2);*/
    --semanticColors-WarningHighlight: #ffb900;
    --semanticColors-SuccessBackground: rgba(95,210,85,0.2); /*rgba(186,216,10,0.2);*/
    /*ErrorText = !isInverted ? RedDark : "#ff5f5f";
    WarningText = !isInverted ? "#333333" : "#ffffff";
    ErrorBackground = !isInverted ? "rgba(232; 17; 35; .2)" : "rgba(232; 17; 35; .5)";
    BlockingBackground = !isInverted ? "rgba(234; 67; 0; .2)" : "rgba(234; 67; 0; .5)";
    WarningBackground = !isInverted ? "rgba(255; 185; 0; .2)" : "rgba(255; 251; 0; .6)";
    WarningHighlight = !isInverted ? "#ffb900" : "#fff100";
    SuccessBackground = !isInverted ? "rgba(186; 216; 10; .2)" : "rgba(186; 216; 10; .4)";*/
    --semanticColors-InputBorder: var(--palette-NeutralTertiary);
    --semanticColors-InputBorderHovered: var(--palette-NeutralDark);
    --semanticColors-InputBackground: var(--palette-White);
    --semanticColors-InputBackgroundChecked: var(--palette-ThemePrimary);
    --semanticColors-InputBackgroundCheckedHovered: var(--palette-ThemeDarkAlt);
    --semanticColors-InputForegroundChecked: var(--palette-White);
    --semanticColors-InputFocusBorderAlt: var(--palette-ThemePrimary);
    --semanticColors-SmallInputBorder: var(--palette-NeutralSecondary);
    --semanticColors-InputPlaceholderText: var(--palette-NeutralSecondary);
    --semanticColors-ButtonBackground: var(--neutralColors-White);
    --semanticColors-ButtonBackgroundChecked: var(--palette-NeutralTertiaryAlt);
    --semanticColors-ButtonBackgroundHovered: var(--palette-NeutralLighter);
    --semanticColors-ButtonBackgroundPressed: var(--palette-NeutralLight);
    --semanticColors-ButtonBackgroundCheckedHovered: var(--palette-NeutralLight);
    --semanticColors-ButtonBorder: var(--palette-"transparent");
    --semanticColors-ButtonText: var(--palette-NeutralPrimary);
    --semanticColors-ButtonTextHovered: var(--palette-NeutralDark);
    --semanticColors-ButtonTextChecked: var(--palette-NeutralDark);
    --semanticColors-ButtonTextCheckedHovered: var(--palette-Black);
    --semanticColors-MenuItemBackgroundHovered: var(--palette-NeutralLighter);
    --semanticColors-MenuItemBackgroundPressed: var(--palette-NeutralLight);
    --semanticColors-MenuIcon: var(--palette-ThemePrimary);
    --semanticColors-MenuHeader: var(--palette-ThemePrimary);
    --semanticColors-ListBackground: var(--palette-White);
    --semanticColors-ListText: var(--palette-NeutralPrimary);
    --semanticColors-ListItemBackgroundHovered: var(--palette-NeutralLighter);
    --semanticColors-ListItemBackgroundChecked: var(--palette-NeutralLight);
    --semanticColors-ListItemBackgroundCheckedHovered: var(--palette-NeutralQuaternaryAlt);
    --semanticColors-ListHeaderBackgroundHovered: var(--palette-NeutralLighter);
    --semanticColors-ListHeaderBackgroundPressed: var(--palette-NeutralLight);
    --semanticColors-Link: var(--palette-ThemePrimary);
    --semanticColors-LinkHovered: var(--palette-ThemeDarker);
    --semanticColors-PrimaryButtonBackground: var(--communicationColors-Primary);
    --semanticColors-PrimaryButtonBackgroundHovered: var(--communicationColors-Shade10);
    --semanticColors-PrimaryButtonBackgroundPressed: var(--communicationColors-Shade20);
    --semanticColors-PrimaryButtonBackgroundDisabled: var(--palette-NeutralLighter);
    --semanticColors-PrimaryButtonText: var(--neutralColors-White);
}

/*:root{
    --depths-Depth0: 0 0 0 0 transparent;
    --depths-Depth4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
    --depths-Depth8: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
    --depths-Depth16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    --depths-Depth64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
}*/

/*:root {
    --effects-RoundedCorner2: 2px;
    --effects-Elevation4: var(--depths-Depth4);
    --effects-Elevation8: var(--depths-Depth8);
    --effects-Elevation16: var(--depths-Depth16);
    --effects-Elevation64: var(--depths-Depth64);
}*/

:root {
    --fontSize-Mini: 10px;
    --fontSize-XSmall: 10px;
    --fontSize-Small: 12px;
    --fontSize-SmallPlus: 12px;
    --fontSize-Medium: 14px;
    --fontSize-MediumPlus: 16px;
    --fontSize-Icon: 16px;
    --fontSize-Large: 18px;
    --fontSize-XLarge: 20px;
    --fontSize-XLargePlus: 24px;
    --fontSize-XxLarge: 28px;
    --fontSize-XxLargePlus: 32px;
    --fontSize-SuperLarge: 42px;
    --fontSize-Mega: 68px;
    --fontWeight-Light: 100;
    --fontWeight-SemiLight: 300;
    --fontWeight-Regular: 400;
    --fontWeight-SemiBold: 600;
    --fontWeight-Bold: 700;
    --iconFontSize-XSmall: 10px;
    --iconFontSize-Small: 12px;
    --iconFontSize-Medium: 16px;
    --iconFontSize-Large: 20px;
}

/*:root {
    --zindex-Nav: 1;
    --zindex-FocusStyle: 1;
    --zindex-Coachmark: 1000;
    --zindex-Layer: 1000000;
    --zindex-KeytipLayer: 1000001;
}*/

:root {
    /*Can't be used in media queries!*/
    --ScreenWidthMinSmall: 320px;
    --ScreenWidthMinMedium: 480px;
    --ScreenWidthMinLarge: 640px;
    --ScreenWidthMinXLarge: 1024px;
    --ScreenWidthMinXXLarge: 1366px;
    --ScreenWidthMinXXXLarge: 1920px;

    --ScreenWidthMaxSmall: 479px;
    --ScreenWidthMaxMedium: 639px;
    --ScreenWidthMaxLarge: 1023px;
    --ScreenWidthMaxXLarge: 1365px;
    --ScreenWidthMaxXXLarge: 1919px;
}


/*.smallPlusFont {
    font-size: var(--fontSize-Small);
    font-weight: var(--fontWeight-Regular);
}*/
/*.smallFont {
    font-size: var(--fontSize-Small);
    font-weight: var(--fontWeight-Regular);
}*/
.mediumFont{
    font-size: var(--fontSize-Medium);
    font-weight: var(--fontWeight-Regular);
}
.largeFont {
    font-size: var(--fontSize-Large);
    font-weight: var(--fontWeight-Regular);
}
.xlargeFont {
    font-size: var(--fontSize-XLarge);
    font-weight: var(--fontWeight-SemiBold);
}

/*:root {
    --animation-DURATION_1: 0.167s;
    --animation-DURATION_2: 0.267s;
    --animation-DURATION_3: 0.367s;
    --animation-DURATION_4: 0.467s;
    --animation-EASING_FUNCTION_1: cubic-bezier(0.1,0.9,0.2,1);
    --animation-EASING_FUNCTION_2: cubic-bezier(0.1,0.25,0.75,0.9);
}

@keyframes Slide_down_in_10 {
    from {
        opacity: 0;
        transform: translate3d(0,-10px,0);
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
@keyframes Slide_down_in_20 {
    from {
        opacity: 0;
        transform: translate3d(0,-20px,0);
    }
    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
@keyframes Slide_up_in_10 {
    from {
        opacity: 0;
        transform: translate3d(0,10px,0);
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
@keyframes Slide_right_in_10 {
    from {
        opacity: 0;
        transform: translate3d(-10px,0,0);
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
@keyframes Slide_right_in_40{
    from {
        opacity: 0;
        transform: translate3d(-40px,0,0);
    }
    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
@keyframes Slide_left_in_10 {
    from {
        opacity: 0;
        transform: translate3d(10px,0,0);
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
@keyframes Slide_left_in_40 {
    from {
        opacity: 0;
        transform: translate3d(40px,0,0);
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}


@keyframes Slide_right_out_40 {
    from {
        opacity: 1;
        transform: translate3d(0p,0,0);
    }

    to {
        opacity: 0;
        transform: translate3d(40px,0,0);
    }
}
@keyframes Slide_left_out_40 {
    from {
        opacity: 1;
        transform: translate3d(0p,0,0);
    }

    to {
        opacity: 0;
        transform: translate3d(-40px,0,0);
    }
}

@keyframes Fade_in{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes Fade_out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.slideDownIn10 {
    animation: Slide_down_in_10 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}
.slideDownIn20 {
    animation: Slide_down_in_20 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}
.slideRightIn10 {
    animation: Slide_right_in_10 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}
.slideRightIn40 {
    animation: Slide_right_in_40 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}
.slideUpIn10 {
    animation: Slide_up_in_10 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}
.slideLeftIn10 {
    animation: Slide_left_in_10 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}
.slideLeftIn40 {
    animation: Slide_left_in_40 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}

.slideRightOut40 {
    animation: Slide_right_out_40 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}
.slideLeftOut40 {
    animation: Slide_left_out_40 var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_1);
}

.fadeIn100{
    animation: Fade_in var(--animation-DURATION_1) var(--animation-EASING_FUNCTION_2);
}
.fadeOut100 {
    animation: Fade_out var(--animation-DURATION_1) var(--animation-EASING_FUNCTION_2);
}

.fadeIn200 {
    animation: Fade_in var(--animation-DURATION_2) var(--animation-EASING_FUNCTION_2);
}
.fadeOut200 {
    animation: Fade_out var(--animation-DURATION_2) var(--animation-EASING_FUNCTION_2);
}

.fadeIn400 {
    animation: Fade_in var(--animation-DURATION_3) var(--animation-EASING_FUNCTION_2);
}*/


/*body {
    font-size: 15px;
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}*/

/*.normalize {
    box-shadow: none;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}*/

/*.disabledBodyScroll{
    overflow: hidden !important;
}*/