/*!
  © Microsoft. All rights reserved.

  This library is supported for use in Windows Store apps only.

  Build: 1.0.9600.17018.winblue_gdr.140204-1946

  Version: Microsoft.WinJS.2.0
*/

/* 
Modifications for top-level elements html, body and iframe.
*/
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    -ms-user-select: none;
    cursor: default;
    -ms-scroll-translation: vertical-to-horizontal;
}
html {
    overflow: hidden;
}
body {
    -ms-content-zooming: none;
}
iframe {
    border: 0;
}
html:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    direction: rtl;
}

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

/*
Explicitly define font-families for Microsoft Yahei UI and Microsoft JhengHei UI so that we can fallback requests for, 
    Microsoft Yahei UI Semilight and Microsoft JhengHei UI Semilight, to Regular instead of Light fonts.
*/
@font-face {
    font-family: "Microsoft Yahei UI";
    font-weight: 200;
    src: local("Microsoft Yahei UI Light");
}
@font-face {
    font-family: "Microsoft Yahei UI";
    font-weight: 300;
    src: local("Microsoft Yahei UI");
}
@font-face {
    font-family: "Microsoft Yahei UI";
    font-weight: 500;
    src: local("Microsoft Yahei UI");
}
@font-face {
    font-family: "Microsoft Yahei UI";
    font-weight: 600;
    src: local("Microsoft Yahei UI Bold");
}

@font-face {
    font-family: "Microsoft JhengHei UI";
    font-weight: 200;
    src: local("Microsoft JhengHei UI Light");
}
@font-face {
    font-family: "Microsoft JhengHei UI";
    font-weight: 300;
    src: local("Microsoft JhengHei UI");
}
@font-face {
    font-family: "Microsoft JhengHei UI";
    font-weight: 500;
    src: local("Microsoft JhengHei UI");
}
@font-face {
    font-family: "Microsoft JhengHei UI";
    font-weight: 600;
    src: local("Microsoft JhengHei UI Bold");
}

/*
Weight and size definitions for typographic classes and elements.
*/
h1, .win-type-xx-large {
    font-size: 42pt;
    font-weight: 200;
    letter-spacing: 0;
    line-height: 1.1429; /* 64px when font-size is 42pt */
}
h2, .win-type-x-large {
    font-size: 20pt;
    font-weight: 200;
    line-height: 1.2; /* 32px when font-size is 20pt */
}
h3, .win-type-large {
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
h4, .win-type-medium, code, pre, samp {
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
body, h5, .win-type-small, legend {
    font-size: 11pt;
    font-weight: 300;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
.win-type-x-small {
    font-size: 11pt;
    font-weight: 300;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
h6, caption, figcaption, small, .win-type-xx-small {
    font-size: 9pt;
    font-weight: 400;
    line-height: 1.6667; /* 20px when font-size is 9pt */
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
}
.win-type-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
h1.win-type-ellipsis, .win-type-xx-large.win-type-ellipsis {
    line-height: 1.4286; /* 80px when font-size is 42pt */
}
h2.win-type-ellipsis, .win-type-x-large.win-type-ellipsis {
    line-height: 1.5; /* 40px when font-size is 20pt */
}
dt, th {
    font-size: 11pt;
    font-weight: 700;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
abbr, acronym, address, blockquote, cite, dl, dd, li, ol, p, q, td, tr {
    font-weight: 300;
}
b, strong {
    font-weight: 700;
}
em {
    font-style: italic;
}

/* 
Additional letter-spacing for the document and its controls.
*/
body, 
button, input,
textarea, .win-textarea, 
select, option {
    letter-spacing: 0.02em;
}

/*
Fixed font-family rules.
*/
code, pre, samp {
    font-family: "Consolas";
}

/*
Text input controls.
*/

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=tel], input[type=url], input[type=search], textarea, .win-textarea {
    -ms-user-select: element;
    min-height: 28px;
    min-width: 64px;
    margin: 4px 0;
    border-width: 2px;
    border-style: solid;
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=tel], input[type=url], input[type=search] {
    width: 276px;
    padding: 0;
}
input::-ms-value {
    margin: 4px 8px;
}

textarea, .win-textarea {
    overflow-y: scroll;
    word-wrap: break-word;
    padding: 4px 8px;
    /* Leave space for autohiding scrollbar on elements that enable text selection. */
    padding-right: 17px;
}
textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm), .win-textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    /* Flip sides for autohiding scrollbar padding on RTL layouts. */
    padding-right: 8px;
    padding-left: 17px;
}
textarea {
    min-width: 260px;
    min-height: 39px;
}
.win-textarea {
    width: 260px;
    height: 39px;
}

/*
Clear and reveal button styles.
*/

input::-ms-clear, input::-ms-reveal {
    margin-left: 2px;
}
input:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-clear,
input:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-reveal {
    margin-left: 0;
    margin-right: 2px;
}

/*
Button control.
*/
button, input[type=button], input[type=reset], input[type=submit] {
    min-height: 32px; /* content (20px) + padding + border */
    min-width: 90px;
    padding: 4px 8px;
    border-width: 2px;
    border-style: solid;
    background-clip: padding-box;
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}

/*
File upload control.
*/
input[type=file] {
    border: none;
    min-width: 100px;
    min-height: 20px;
    width: 340px;
    height: 32px;
    padding: 0;
    margin: 7px 8px 21px 8px;
    background-clip: padding-box;
}
input[type=file]::-ms-value {
    margin: 0;
    border-width: 2px;
    border-style: solid;
    border-right-style: none;
    border-radius: 0;
    background-clip: padding-box;
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
input[type=file]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-value {
    border-left-style: none;
    border-right-style: solid;
}
input[type=file]::-ms-browse {
    margin: 0;
    padding: 0 18px;
    border-width: 2px;
    border-style: solid;
    background-clip: padding-box;
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}

/*
No underline or special cursor on links.
*/
a {
    text-decoration: none;
    cursor: default;
}

/*
No border on images when in a link.
*/
img {
    border-style: none;
}

/*
Select control.
*/
select {
    min-height: 32px;
    min-width: 80px;
    border-width: 2px;
    border-style: solid;
    margin: 4px 0;
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
select::-ms-value {
    padding: 4px 8px;
    margin: 0;
}
select::-ms-expand {
    border: 0;
    padding-left: 6px;
    padding-right: 6px;
    background-color: transparent;
}

/*
Radio button and checkbox shared styles.
*/
input::-ms-check {
    border-width: 2px;
    border-style: solid;
    display: inline-block;
}

/*
Radio button.
*/
input[type=radio] {
    width: 23px;
    height: 23px;
    margin-left: -1px;
    margin-right: 4px;
    margin-bottom: -2px;
}
input[type=radio]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-left: 4px;
    margin-right: -1px;
}

/*
Checkbox.
*/
input[type=checkbox] {
    width: 21px;
    height: 21px;
    margin-right: 5px;
}
input[type=checkbox]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 0;
    margin-left: 5px;
}

/*
Range control.
*/
input[type=range] {
    width: 280px;
    height: auto;
    padding: 17px 0 32px 0;
}
input[type=range]::-ms-track {
    padding: 0;
    width: auto;
    height: 11px;
    border-style: none;
    color: transparent; /* ticks hidden by default */
}
input[type=range]::-ms-thumb {
    width: 11px;
    height: 11px;
    border-style: none;
}
input[type=range]::-ms-ticks-before, input[type=range]::-ms-ticks-after {
    width: 100%;
    height: 5px;
    display: none;
}
input[type=range]:disabled::-ms-fill-lower {
    margin-right: 5px;
}
input[type=range]:disabled::-ms-fill-upper {
    margin-left: 6px;
}
input[type=range]:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-lower {
    margin-right: 0;
    margin-left: 5px;
}
input[type=range]:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-upper {
    margin-left: 0;
    margin-right: 6px;
}

/*
Vertical range control.
*/
input[type=range].win-vertical {
    width: auto;
    height: 191px;
    padding: 0 17px;
    writing-mode: bt-lr; 
}
input[type=range].win-vertical:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    writing-mode: bt-rl;
}
input[type=range].win-vertical::-ms-track {
    width: 11px;
    height: auto;
}
input[type=range].win-vertical:disabled::-ms-fill-lower {
    margin-right: 0;
    margin-top: 6px;
}
input[type=range].win-vertical:disabled::-ms-fill-upper {
    margin-left: 0;
    margin-bottom: 5px;
}
input[type=range].win-vertical:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-lower {
    margin-left: 0;
}
input[type=range].win-vertical:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-upper {
    margin-right: 0;
}

input[type=range].win-vertical::-ms-ticks-before,
input[type=range].win-vertical::-ms-ticks-after {
    width: 5px;
    height: 100%;
    display: none;
}

/*
Progress control.
*/
progress {
    width: 180px;
    height: 6px;
    border-style: none;
}
progress.win-medium {
    width: 280px;
}
progress.win-large {
    width: 100%;
}
progress::-ms-fill {
    border-style: none;
}
progress:indeterminate {
    height: 4px;
    padding: 1px 0; /* Indeterminate dots should be 4px tall, but overall control stays 6px. */
}
@keyframes win-progress-fade-out {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.5;
    }
}
progress.win-paused:not(:indeterminate) {
    animation-name: win-progress-fade-out;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.03, 0.76, 0.31, 1.0);
    opacity: 0.5;
}
progress.win-error::-ms-fill {
    opacity: 0;
}
progress.win-ring:indeterminate::-ms-fill {
    animation-name: -ms-ring;
}
progress.win-ring {
    width: 20px;
    height: 20px;
}
progress.win-medium.win-ring {
    width: 40px;
    height: 40px;
}
progress.win-large.win-ring {
    width: 60px;
    height: 60px;
}

form {
    margin: 0;
    padding: 0;
}
legend {
    margin: 0 0 10px 0;
    padding: 0;
    color: inherit;
}

/*
AppBar/Flyout z-index values:
    1000 - AppBar/settings click-eating div
    1002 - AppBar
    1004 - Settings Flyout
    1006 - Flyout click-eating div 
    1008 - Flyout
*/

@font-face {
    font-family: "Segoe UI Command";
    src: local("Segoe UI Symbol");
    font-weight: normal;
    font-style: normal;
}

.win-appbarclickeater {
    z-index: 1000;
    background-color: transparent;
    display: none;
    width: 110%;
    height: 110%;
    left: -5%;
    top: -5%;
    position: fixed;
    touch-action: none;
    outline: 1px solid Purple; /*Necessary to block passthrough over webviews*/
    -ms-high-contrast-adjust:none; 
}
.win-flyoutmenuclickeater {
    z-index: 1006;
    background-color: transparent;
    display: none;
    width: 110%;
    height: 110%;
    left: -5%;
    top: -5%;
    position: fixed;
    touch-action: none;
    outline: 1px solid Lime; /*Necessary to block passthrough over webviews*/
    -ms-high-contrast-adjust:none;
}

/*
Back buttons.
*/
.win-backbutton, .win-back {
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    padding: 0;
    text-align: center;

    /* Normal sizing. */
    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; /* line-height must match the content box height. */
    vertical-align: baseline;
}

.win-backbutton:hover, .win-backbutton:hover:active {
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
}
.win-backbutton::before, .win-back::before {
    font-family: "Segoe UI Symbol";
    font-weight: normal;
    content: "\E0D5";
    vertical-align: 50%;
}
.win-backbutton:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::before, .win-back:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::before {
    content: "\E0AE";
}
.win-backbutton:disabled, .win-backbutton:disabled:active,
.win-navigation-backbutton:disabled, .win-navigation-backbutton:disabled:active {
    visibility: hidden;
}

button.win-navigation-backbutton, button.win-navigation-backbutton:active, 
button.win-navigation-backbutton:hover, button.win-navigation-backbutton:active:hover
{
    display: inline-block;
    padding: 2px;
    min-height: 0px;
    min-width: 0px;
    
    /* Overwrite default background and border styles from HTML button element */
    background-color: transparent;
    border: none;

    /* Normal Sizing */
    height: 45px;
    width: 45px;
}

/* Default positioning for a Navigation BackButton in the App Body*/
body > .win-navigation-backbutton {
    position: absolute;
    top: 50px;
    left: 20px;
}

/*
Command buttons.
*/
button.win-command {
    background: none;
    background-clip: border-box;
    height: auto; /* height is 88px (label) or 68px (no label) */
    padding: 12px 0; /* bottom dependent on label/img, 2px margin */
    margin: 0;
    border: 2px solid; /* reserve focus rect */
    min-width: 40px;
    text-align: center;
    font-size: 9pt;
    line-height: 16px;
    font-weight: normal;
    
    /* Commands are lrtb */
    writing-mode: lr-tb;
}
button.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    writing-mode: rl-tb;
}
button.win-command:focus {
    outline: none;
}

/*
Command button icons.
*/
.win-commandicon {
    display: inline-block;
    margin: 0 28px; /* padding for command buttons, 2px/side for focus */
    min-width: 0;
    min-height: 0;
    padding: 0;

    /* Normal sizing */
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    cursor: default;
}
.win-commandimage {
    /* Default font for glyphs. */
    font-family: "Segoe UI Command";
    letter-spacing: 0;
    
    /* Applications provide their own content, like . */
    vertical-align: middle;
    font-size: 14pt;
    margin: -2px;
    line-height: 40px; /* line-height must match the content box height */    
    background-position: 0 0;
    background-origin: border-box;
    display: inline-block;
    /* Still 40px */
    width: 40px;
    height: 40px;
    background-size: 160px 80px;
}

/* 
Offsets for sprite versions.
*/
button:hover .win-commandimage, button:active .win-commandimage {
    background-position: -40px 0;
}
button:hover:active .win-commandimage {
    background-position: -80px 0;
}

button:-ms-keyboard-active .win-commandimage {
    background-position: -80px 0;
}
button:disabled .win-commandimage,
button:disabled:active .win-commandimage {
    background-position: -120px 0;
}

/*
Offsets for sprite versions in selected state.
*/
button[aria-checked=true] .win-commandimage {
    background-position: 0 -40px;
}
button[aria-checked=true]:hover .win-commandimage, 
button[aria-checked=true]:active .win-commandimage {
    background-position: -40px -40px;
}
button[aria-checked=true]:hover:active .win-commandimage {
    background-position: -80px -40px;
}
button[aria-checked=true]:-ms-keyboard-active .win-commandimage {
    background-position: -80px -40px;
}
button[aria-checked=true]:disabled .win-commandimage, 
button[aria-checked=true]:disabled:active .win-commandimage {
    background-position: -120px -40px;
}

/*
Command button "ring".
*/
.win-commandring, 
button:hover .win-commandring,
button:active .win-commandring,
button.win-command:disabled .win-commandring,
button.win-command:disabled:active .win-commandring {
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    background-clip: border-box;
}
button:hover:active .win-commandring,
button[aria-checked=true] .win-commandring,
button[aria-checked=true]:active .win-commandring,
button[aria-checked=true]:disabled .win-commandring, 
button[aria-checked=true]:disabled:active .win-commandring {
    background-clip: border-box;
}

/*
Command button labels.
*/
button.win-command .win-label {
    position: relative;
    line-height: 16px;
    display: block;
    max-width: 88px; /* 100px button, but allow for 2px margins and 4px padding on each side */
    margin-top: 5px;
    margin-bottom: -1px;
    padding-left: 4px;  /* 12px between buttons, 6px per side, minus 2px margins */
    padding-right: 4px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: keep-all;
}

/* 
AppBarCommand separator types.
*/
hr.win-command {
    display: inline-block;
    padding: 0;
    margin: 14px 29px 34px 30px;
    width: 1px;
    height: 40px;
    border: 0;
    vertical-align: top;
}
hr.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-left: 29px;
    margin-right: 30px;
}

/* 
AppBarCommand content types. 
*/
div.win-command {

    display: inline-block;   
    min-width: 0;
    min-height: 0;
    padding: 12px 30px;
    border: 2px solid; /* reserve focus rect */
    text-align: center;
    font-size: 9pt;
    line-height: 16px;
    font-weight: normal;    
    vertical-align: top;

    /* Content Commands are lrtb */
    writing-mode: lr-tb;
    
}
div.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
   writing-mode:rl-tb;
}
div.win-command:focus {
    outline: none;
}

/*
AppBar Edgy Container
*/
.win-appbar {
    z-index: 1002;
    border-width: 0;
    width: 100%;
    height: auto;
    left: 0;
    position: -ms-device-fixed;
}

/* 
AppBar control.
*/
.win-commandlayout {
    text-align: right;   
        
    /* Hide whitespace between buttons. */
    font-size: 0;
        
    min-height: 88px;
}
.win-commandlayout .win-selection {
    float: left;
}
.win-commandlayout:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    text-align: left;
}
.win-commandlayout .win-selection:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    float: right;
}

/* Narrow buttons and no labels */  
.win-reduced button.win-command .win-label {
    display: none;
}
.win-reduced button.win-command .win-commandicon {
    margin: 0 8px; /* 2px margin for focus */
}

/* Narrow Separators */
.win-reduced hr.win-command {
    margin-bottom: 14px;
    margin-top: 14px;
}
.win-reduced hr.win-command {
    margin-left: 10px;        
    margin-right: 9px;        
}
    .win-reduced hr.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-left: 9px;
    margin-right: 10px;
}  

/* Narrow Content Commands */
.win-reduced div.win-command {
    padding-left: 10px;
    padding-right: 10px;
}

/* AppBar reduced height and width. */
.win-commandlayout.win-reduced {
    padding-left: 10px;
    padding-right: 10px;
    width: calc(100% - 20px);
    min-height: 68px;
}     

/*
High contrast AppBar needs a border
*/
@media (-ms-high-contrast) {
    /*
    AppBar Borders
    */
    .win-appbar {
        border: solid 2px;
    }
    .win-appbar.win-top {
        border-top: none;
        border-left: none;
        border-right: none;  
    }
    .win-appbar.win-bottom {
        border-bottom: none;
        border-left: none;
        border-right: none;          
    }
    .win-appbar.win-top button.win-command, 
    .win-appbar.win-top div.win-command {
        padding-bottom: 10px;
    }
    .win-appbar.win-bottom button.win-command, 
    .win-appbar.win-bottom div.win-command {
        padding-top: 10px;
    }
    .win-appbar.win-top hr.win-command {
        margin-bottom: 32px;
    }
    .win-appbar.win-bottom hr.win-command {
        margin-top: 12px;
    }    
    .win-commandlayout {
        min-height: 86px;
    }

    /* High Contrast Reduced sizes slightly different */
    .win-commandlayout.win-reduced {
        min-height: 66px;
    }    
    .win-appbar.win-reduced.win-top hr.win-command {
        margin-bottom: 12px;
    }
    .win-appbar.win-reduced.win-bottom hr.win-command {
        margin-top: 12px;
    } 
}

/*
Flyout control.
*/
.win-flyout {
    z-index: 1008;
    position: -ms-device-fixed;
    padding: 25px 20px 20px 20px;
    border-style: solid;
    border-width: 2px;
    margin: 5px;
    min-width: 26px; /* 70px - padding - border = 26px */
    max-width: 466px; /* 510px - padding - border = 466px */
    min-height: 5px; /* 54px - padding - border = 5px */
    max-height: calc(100% - 59px); /* 768px - margin - padding - border = 709px */
    width: auto;
    height: auto;
    word-wrap: break-word;
    overflow: auto;
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
.win-flyout.win-leftalign {
    margin-left: 0;
}
.win-flyout.win-rightalign {
    margin-right: 0;
}
.win-flyout.win-scrolls {
    overflow: auto;
}

/*
    Hub Control.
*/
.win-hub {
    height: 100%;
    width: 100%;
    position: relative;
}
.win-hub-progress {
    position: absolute; 
    top: 10px; 
    width: 100%;
    z-index: 1;
}
.win-hub-viewport {
    height: 100%;
    width: 100%;
    /* Allow win-hub-surface margin/padding right to work */
    display: flex;
    flex-shrink: 0;
    -ms-scroll-snap-type: proximity;
}
.win-hub-horizontal .win-hub-viewport {
    overflow-x: auto;
    overflow-y: hidden;
}
.win-hub-vertical .win-hub-viewport {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
}
.win-hub-surface {
    display: flex;
    flex-shrink: 0;
}
.win-hub-vertical .win-hub-surface {
    width: 100%;
    padding: 15px 0;
    flex-direction: column;
}
.win-hub-horizontal .win-hub-surface {
    height: 100%;
    padding: 0 80px;
}

/*
    HubSection Control.
*/
.win-hub-section {
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto 1fr;
    padding: 0 40px;
}
.win-hub-horizontal .win-hub-section {
    height: 100%;
}
.win-hub-vertical .win-hub-section {
    width: calc(100% - 80px);
    padding: 14px 40px;
}
.win-hub-section-header {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    margin: 4px 0;
    font-size: 20pt;
    text-align: left;
}
.win-hub-section-header:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    text-align: right;
}
.win-hub-horizontal .win-hub-section-header {
    margin-top: 129px;
}
.win-hub-vertical .win-hub-section-header {
    margin-top: 1px;
}
/* Override default button styles */
/* Button is used so that both piece of UI change color. button:active becomes active if the children are pressed. */
button.win-hub-section-header-tabstop, 
button.win-hub-section-header-tabstop:hover, 
button.win-hub-section-header-tabstop:hover:active {
    display: -ms-inline-grid;
    background-color: transparent;
    border: 0;
    padding: 0;
    min-height: 0;
    min-width: 0;
    font-size: 20pt;
    -ms-grid-columns: minmax(0, max-content) 3px;
    -ms-grid-rows: max-content;
}
button.win-hub-section-header-tabstop:focus {
    outline: none;
}

button.win-hub-section-header-tabstop:-ms-keyboard-active {
    background-color: transparent;
}
/* Use grid and top level layout for truncation */
button.win-hub-section-header-tabstop.win-hub-section-header-interactive,
button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover, 
button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover:active {
    -ms-grid-columns: minmax(0, max-content) 7px max-content 3px;
}
.win-hub-section-header-content {
    display: inline-block;
}
.win-hub-section-header-chevron {
    display: none;
}
.win-hub-section-header-interactive .win-hub-section-header-chevron {
    -ms-grid-column: 3;
    display: inline-block;
}
.win-hub-section-header-chevron::before {
    font-family: 'Segoe UI Symbol';
    content: "\E26B";
}
.win-hub-section-header-chevron:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::before {
    font-family: 'Segoe UI Symbol';
    content: "\E26C";
}
.win-hub-section-content {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}
.win-hub-horizontal .win-hub-section-content {
    height: calc(100% - 44px);
}
.win-hub-vertical .win-hub-section-content {
    width: 100%;
}

/*
    NavBar
*/
.win-navbar {
    min-height: 60px;
}

/*
    NavBarContainer
*/
.win-navbarcontainer {
    width: 100%;
    position: relative;
}
.win-navbarcontainer-pageindicator-box {
    position: absolute;
    width: 100%;
    text-align: center;
    pointer-events: none;
}
.win-navbarcontainer-vertical .win-navbarcontainer-pageindicator-box {
    display: none;
}
.win-navbarcontainer-pageindicator {
    display: inline-block;
    width: 40px;
    height: 4px;
    margin: 5px 2.5px 11px 2.5px;
}
.win-navbarcontainer-horizontal .win-navbarcontainer-viewport {
    padding: 15px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-x: snapInterval(0%, 100%);
    -ms-overflow-style: none;
    touch-action: pan-x;
}
.win-navbarcontainer-vertical .win-navbarcontainer-viewport {
    padding: 10px 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 250px;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    touch-action: pan-y;
}
.win-navbarcontainer-horizontal .win-navbarcontainer-surface {
    display: -ms-grid;
    -ms-grid-columns: auto;
    -ms-grid-rows: auto;
}
.win-navbarcontainer-navarrow {
    position: absolute;
    top: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: calc(100% - 40px);
    width: 17px;
    margin: 20px 0;
    font-size: 16pt;
    overflow: hidden;
}
.win-navbarcontainer-vertical .win-navbarcontainer-navarrow {
    display: none;
}
.win-navbarcontainer-navleft {
    left: 0;
    margin-right: 8px;
}
.win-navbarcontainer-navleft::before {
    content: '\E0E2';
}
.win-navbarcontainer-navright {
    right: 0;
    margin-left: 8px;
}
.win-navbarcontainer-navright::before {
    content: '\E0E3';
}

/*
    NavBarCommand
*/
.win-navbarcommand {
    display: -ms-grid;
    -ms-grid-columns: 1fr auto;
    -ms-grid-rows: 1fr;
}
.win-navbarcontainer-horizontal .win-navbarcommand {
    margin: 5px;
    width: 210px;
}
.win-navbarcontainer-vertical .win-navbarcommand {
    margin: 10px 30px;
}
.win-navbarcommand-button {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    width: 100%;
    position: relative;
}
.win-navbarcommand-button-content {
    position: relative;
    padding: 5px 10px;
    display: -ms-grid;
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: auto;
}
.win-navbarcommand-button:focus {
    z-index: 1;
    outline: none;
}
.win-navbarcommand-icon {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    font-family: "Segoe UI Symbol";
    height: 40px;
    width: 40px;
    font-size: 20pt;
    margin-left: 0;
    margin-right: 10px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.win-navbarcommand-icon:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 0;
    margin-left: 10px;
}
.win-navbarcommand-label {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11pt;
    margin: 10px 0;
}
.win-navbarcommand-splitbutton {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 40px;
    font-family: 'Segoe UI Symbol';
    font-size: 11pt;
    margin-right: 0;
    margin-left: 2px;
    position: relative;
}
.win-navbarcommand-splitbutton:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-left: 0;
    margin-right: 2px;
}
.win-navbarcommand-splitbutton::before {
    content: '\E019';
}
.win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened::before {
    content: '\E018';
}
.win-navbarcommand-splitbutton:focus {
    outline: none;
}

/*
Menu control.
*/
.win-menu {
    padding: 5px 0 5px 0;
    line-height: 33px;
    text-align: left; /* Set explicitly in case our parent has different alignment, like appbar overflow. */
    min-height: 38px; /* 54px - padding - border = 38px */
    max-height: calc(100% - 26px); /* 768px - margin - padding - border = 742px */
    max-width: none;
}
.win-menu:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    text-align: right; /* Set explicitly in case our parent has different alignment, like appbar overflow. */
}

/*
Menu commands.
*/
.win-menu button.win-command {
    display: block;
    border: none;
    padding: 10px 20px 12px 20px;
    margin-left: 0;
    margin-right: 0;
    float: none;
    text-align: left;
    width: 100%;
    font-size: 11pt;
    font-weight: 600;
    line-height: 18px; /* 40px - 10px top padding - 12px bottom padding */
}
.win-menu button.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    text-align: right;
}
.win-menu button.win-command:focus {
    outline: none;
}
.win-menu hr.win-command {
    display: block;
    height: 1px;
    width: auto;
    border: 0;

    padding: 0;
    margin: 9px 20px 10px 20px;
}

/*
Menu toggle buttons.
*/
.win-menu-toggle button.win-command::before {
    font-family: 'Segoe UI Symbol';
    content: "\E0E7";
    visibility: hidden;
    padding-left: 0px;
    padding-right: 10px;
}
.win-menu-toggle button[aria-checked=true].win-command::before {
    /* Display a checkbox if aria-checked is set */
    visibility: visible;
}
.win-menu-toggle button.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::before {
    padding-right: 0;
    padding-left: 10px;
    float: right;
}

/*
Settings Pane
*/
.win-settingsflyout {
    z-index: 1004;  /* above appbar and below flyouts */
    border-left: 1px solid;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 345px; /* 346px - border (1px) */
}
.win-settingsflyout:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    border-left: none;
    border-right: 1px solid;
}
.win-settingsflyout.win-wide {/* .win-wide is deprecated in Windows 8.1 */
    width: 645px; /* 646px - border (1px) */
}
.win-settingsflyout .win-header {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 32px;
    height: 48px;
}
/* Settings back button is slightly smaller. */
.win-settingsflyout .win-backbutton {
    position: absolute;
    width: 30px;
    height: 30px;
    font-size: 8pt;
    line-height: 26px;
    margin-top: 3px;
}
.win-settingsflyout .win-header .win-label {
    display: inline-block;
    padding-left: 40px;
    font-size: 20pt;
    line-height: 33px;
}
.win-settingsflyout .win-content {
    overflow: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 33px;
    height: calc(100% - 112px);
}

.win-settingsflyout .win-label {
    font-size: 20pt;
    font-weight: 200;
    line-height: normal;
}
.win-settingsflyout:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid;
}
.win-settingsflyout .win-header .win-label:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    padding-right: 40px;
    padding-left: 0;
}

.win-settingsflyout .win-content .win-settings-section {
    padding-top: 0;
    padding-bottom: 39px;
}

.win-settingsflyout .win-content .win-settings-section p {
    margin: 0;
    padding-top: 0;
    padding-bottom: 25px;
}

.win-settingsflyout .win-content .win-settings-section a {
    margin: 0;
    padding-top: 0;
    padding-bottom: 25px;
    display:inline-block;
}

.win-settingsflyout .win-content .win-settings-section .win-toggleswitch  {
    margin: 0;
    padding-top: 0;
    padding-bottom: 20px;
}

.win-settingsflyout .win-content .win-settings-section label {
    display:block;
    padding-bottom: 7px;
}

.win-settingsflyout .win-content .win-settings-section button,
.win-settingsflyout .win-content .win-settings-section select,
.win-settingsflyout .win-content .win-settings-section input[type=button],
.win-settingsflyout .win-content .win-settings-section input[type=text] {
    margin-bottom: 25px;   
    margin-left: 0;
    margin-right:  20px;
}

.win-settingsflyout .win-content .win-settings-section input[type=radio] {
    margin-top: 0;   
    margin-bottom: 0;   
    padding-bottom: 15px;
}

.win-settingsflyout .win-content .win-settings-section button:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-bottom: 25px;   
    margin-left: 20px;   
    margin-right:  0; 
}
.win-settingsflyout .win-content .win-settings-section select:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-bottom: 25px;   
    margin-left: 20px;   
    margin-right:  0; 
}

.win-settingsflyout .win-content .win-settings-section input[type=text]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-bottom: 25px;   
    margin-left: 20px;   
    margin-right:  0; 
}

.win-settingsflyout .win-content .win-settings-section input[type=button]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-bottom: 25px;   
    margin-left: 20px;   
    margin-right:  0; 
}

/*
Grippers in touch selection do not dissapear when focus moves to an element outside of the selection range and they are always drawn on a layer above all HTML elemements.
When an _Overlay derived control such as AppBar/Flyout/Menu/SettingsFlyout is invoked and steals focus, if that _Overlay is laid out on top of the elements in the touch selection,
the grippers can still be seen over the _Overlay and its contents. However, all grippers any where in the document will be hidden whenever the current active element has or inherits 
the style "-ms-touch-select: none;" 
*/
.win-overlay {
    -ms-touch-select: none;
}

/* For input elements we filter type using the :not selector to capture any unrecognized user specified types which would just default to the form and function of a textbox*/
.win-overlay input:not([type="file"]),
.win-overlay input:not([type="radio"]),
.win-overlay input:not([type="checkbox"]),
.win-overlay input:not([type="button"]),
.win-overlay input:not([type="range"]),
.win-overlay input:not([type="image"]),
.win-overlay input:not([type="reset"]),
.win-overlay input:not([type="hidden"]),
.win-overlay input:not([type="submit"]),
.win-overlay textarea,
.win-overlay [contenteditable=true]{
    -ms-touch-select: grippers;
}

/* Singleton element maintained by _Overlay, used for getting accurate floating point measurements of the total size of the visual viewport. 
    Floating point is necesary in high DPI resolutions. */
.win-visualviewport-space {
    position:-ms-device-fixed;
    height: 100vh;
    width: 100vw;
    visibility:hidden;
}

/*
Rating control.
*/
.win-rating {
    display: inline-flex;
    height: auto;
    width: auto;
    white-space: normal;
    align-items: stretch;
    justify-content: center;
}

.win-rating .win-star {
    flex: auto;
    height:28px;
    width: 28px;
    padding: 0 6px;
    font-family: "Segoe UI Symbol";
    font-size: 28px;
    overflow: hidden;
    text-indent: 0;
    line-height: 1;
    cursor: default;
    position: relative;
    letter-spacing: 0; /* Use letter-spacing: 0 to make average star look like one glyph. */
    touch-action: none;
}
.win-rating.win-small .win-star {
    width: 14px;
    height: 14px;
    font-size: 14px;
    padding: 0 3px;
}
.win-rating .win-star:before {
    content: "\E082";
}
.win-rating .win-star.win-disabled {
    cursor: default;
    touch-action: auto;
}

/*
DatePicker control.
*/
.win-datepicker {
    display: inline-flex;
    height: auto;
    width: auto;
}
.win-datepicker .win-datepicker-month {
    margin-right: 20px;
}
.win-datepicker .win-datepicker-date.win-order0,
.win-datepicker .win-datepicker-date.win-order1 {
    margin-right: 20px;
}
.win-datepicker .win-datepicker-year.win-order0 {
    margin-right: 20px;
}
.win-datepicker .win-datepicker-month:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 0;
    margin-left: 20px;
}
.win-datepicker .win-datepicker-date.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm),
.win-datepicker .win-datepicker-date.win-order1:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 0;
    margin-left: 20px;
}
.win-datepicker .win-datepicker-year.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm){
    margin-right: 0;
    margin-left: 20px;
}

/*
TimePicker control.
*/
.win-timepicker {
    display: inline-flex;
    height: auto;
    width: auto;
}
.win-timepicker .win-timepicker-hour {
    margin-right: 20px;
}
.win-timepicker .win-timepicker-period.win-order0 {
    margin-right: 20px;
}
.win-timepicker .win-timepicker-minute.win-order1 {
    margin-right: 20px;
}
.win-timepicker .win-timepicker-period.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 0;
    margin-left: 20px;
}
.win-timepicker .win-timepicker-minute.win-order1:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm), 
.win-timepicker .win-timepicker-minute.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-left: 20px;
    margin-right: 0;
}
.win-timepicker .win-timepicker-hour:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 0;
    margin-left: 20px;
}

/*
Toggle control.
*/
.win-toggleswitch {
    padding: 0;
    background-color: transparent;
    vertical-align: top;
    margin: 0;
    display: block;
}
.win-toggleswitch .win-switch {
    display: inline-block;
    height: 19px;
    width: 50px;
    padding: 5px;
    margin: 0;
    background-color: transparent;
    -ms-grid-column: 2;
}
.win-toggleswitch .win-switch::-ms-tooltip {
    display: none;
}
.win-toggleswitch .win-switch::-ms-ticks-before,
.win-toggleswitch .win-switch::-ms-ticks-after {
    display: none;
}
.win-toggleswitch .win-switch::-ms-track {
    height: 15px; /* 19px - 2px borders */
    width: 46px;
    padding: 0;
    margin: 0;
    border-width: 2px;
    border-style: solid;
}
.win-toggleswitch .win-switch::-ms-fill-lower,
.win-toggleswitch .win-switch::-ms-fill-upper {
    height: 13px; /* 19px - 2px borders - 1px margins */
    padding: 0;
}
.win-toggleswitch .win-switch::-ms-fill-lower {
    margin-left: 1px;
}
.win-toggleswitch .win-switch:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-lower {
    margin-left: 0;
    margin-right: 1px;
}
.win-toggleswitch .win-switch::-ms-fill-upper {
    margin-right: 1px;
}
.win-toggleswitch .win-switch:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-upper {
    margin-right: 0;
    margin-left: 1px;
}
.win-toggleswitch .win-switch::-ms-thumb {
    height: 19px;
    width: 12px;
}
.win-toggleswitch .win-title {
    display: block;
    vertical-align: top;
    max-width:470px;
    font-size: 11pt;
    font-weight: 300;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
.win-toggleswitch .win-label {
    display: inline-block;
    vertical-align: top;
    padding: 5px 20px 5px 0px;
    min-width: 65px; 
    direction: inherit;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.3636; /* 20px when font-size is 11pt */
}
.win-toggleswitch .win-label:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    padding: 5px 0px 5px 20px;
}
.win-toggleswitch .win-label.win-hidden {
    visibility: hidden;
}
.win-focus-hide {
    outline: none;
}

/*
Tooltip control.
*/
.win-tooltip {
    display: block;
    position: fixed;
    top: 30px;
    left: 30px;
    max-width: 380px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 10px 7px 10px;
    border-style: solid;
    border-width: 2px;
    z-index: 9999;
    word-wrap: break-word;
    animation-fill-mode: both;
    font-size: 9pt;
    font-weight: 400;
    line-height: 1.6667; /* 20px when font-size is 9pt */
}
.win-tooltip-phantom {
    display: block;
    position: fixed;
    top: 30px;
    left: 30px;
    background-color: transparent;
    border-width: 0;
    margin: 0;
    padding: 0;
}

.win-viewbox {
    width: 100%;
    height: 100%;
    position: relative;
}

.win-semanticzoom {
    height: 400px;
    touch-action: pan-x pan-y double-tap-zoom;
}
.win-semanticzoom * {
    touch-action: inherit;
}

.win-semanticzoom-button {
    z-index:  100;
    position: absolute;
    min-width: 25px;
    min-height: 25px;
    width: 25px;
    height: 25px;
    padding: 0px;
    bottom: 21px;
    touch-action: none;
}

.win-semanticzoom-button::before {
    font-family: "Segoe UI Symbol";
    font-weight: normal;
    font-size: 11pt;
    content: "\E0B8"; /* minus sign */
}

.win-semanticzoom-button-location{
    left: auto;
    right: 4px;
}

.win-semanticzoom-button-location:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    left: 4px;
    right: auto;
}

/*
ScrollView control.
*/
.win-scrollview {
    overflow-x: auto;
    overflow-y: hidden;
    height: 400px;
    width: 100%;
}

/*Flyout control animations*/
@keyframes WinJS-showFlyoutTop               { from { transform: translateY(50px); } to { transform: none; } }
@keyframes WinJS-showFlyoutBottom            { from { transform: translateY(-50px); } to { transform: none; } }
@keyframes WinJS-showFlyoutLeft              { from { transform: translateX(50px); } to { transform: none; } }
@keyframes WinJS-showFlyoutRight             { from { transform: translateX(-50px); } to { transform: none; } }

/*
SearchBox control.
*/

.win-searchbox {
    white-space: normal;    
    position: relative;
    width: 265px;
    height: 28px;
    border-style: solid;
    border-width: 2px;  
}

.win-searchbox-flyout {
    position: absolute;
    min-width: 265px;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    z-index: 100;
    padding: 5px 0 10px 0;
    top: 30px;
    left: -2px;
    right: -2px;
    max-height: 272px;
    overflow: auto;
    -ms-scroll-chaining:none;  
    touch-action:none;
}

.win-searchbox input {
    height: 100%;
    border-style: none;
    margin: 0px;
    padding-right: 28px;
    width: calc(100% - 28px);
    font-size: 11pt;  
    -ms-ime-align: after;
    line-height: 20px;
}

.win-searchbox input:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    padding-right: 0;
    padding-left: 28px;
}

/*
Hide clear button in search box control.
*/

.win-searchbox input[type=search]::-ms-clear {
    display: none;
}

.win-searchbox-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    font-family: "Segoe UI Symbol";
    font-size: 15pt;    
    border-style: none;
    height: 100%;    
    text-align:center;
}

.win-searchbox-button:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    right: auto;
    left: 0;
}

.win-searchbox-button.win-searchbox-button:before {
    content: "\E094";
}

.win-searchbox-suggestion-result {
    padding: 0 18px;
    display: flex;
    height: 60px;
    font-family: "Segoe UI";
    font-size: 11pt;
    outline: none;
}

.win-searchbox-suggestion-result div {   
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.win-searchbox-suggestion-result-text {
    padding-top: 9px;
    padding-bottom: 11px;
    height: 60px;   
    width: 179px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 20px;
}

.win-searchbox-suggestion-result-detailed-text {
    display: inline-block; 
    overflow: hidden; 
    -ms-text-overflow: ellipsis;        
    line-height: 22px; /* Some characters get clipped if line height is < 22px. Work around by setting -2 margin. */
    margin-top: -1px;
    width: 100%;
}

.win-searchbox-suggestion-result img {
    width: 40px;
    height: 40px;
    margin-left: 0;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.win-searchbox-suggestion-result img:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 0;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 0;
}

.win-searchbox-suggestion-query {
    padding: 9px 18px 11px 18px;
    font-family: "Segoe UI";
    font-weight: normal;
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 11pt;
    line-height: 20px;
}

.win-searchbox-suggestion-separator {
    display: -ms-grid;
    -ms-grid-columns: auto 1fr;
    padding: 0 18px;
    height: 40px;    
    font-family: "Segoe UI";
    font-size: 11pt;  
}

.win-searchbox-suggestion-separator hr {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    margin-top: 18px;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
}

.win-searchbox-suggestion-separator hr:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-right: 10px;
    margin-left: auto;
}

.win-searchbox-suggestion-separator div {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 9px;
    padding-bottom: 11px;
    line-height: 20px;
    margin-right: 10px;
}

.win-searchbox-suggestion-separator div:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin-left: 10px;
    margin-right: auto;
}

/*
Search box control animations
*/
@keyframes WinJS-flyoutBelowSearchBox-showPopup { from { transform: translateY(0px); } to { transform: none; } }
@keyframes WinJS-flyoutAboveSearchBox-showPopup { from { transform: translateY(0px); } to { transform: none; } }

/*
ListView control.
*/
.win-listview {
    overflow: hidden;
    height: 400px;
}
.win-listview .win-surface {
    overflow: visible;
}
.win-listview > .win-viewport.win-horizontal .win-surface {
    height: 100%;
}
.win-listview > .win-viewport.win-vertical .win-surface {
    width: 100%;
}
.win-listview > .win-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.win-listview > .win-viewport.win-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
}
.win-listview > .win-viewport.win-vertical {
    overflow-x: hidden;
    overflow-y: auto;
}
.win-listview .win-itemscontainer {
    overflow:hidden;
}
.win-listview .win-itemscontainer-padder {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
.win-listview > .win-horizontal .win-container {
    margin: 10px 5px 0px 5px;
}
.win-listview > .win-vertical .win-container {
    margin: 10px 24px 0px 7px;
}
.win-listview.win-rtl > .win-vertical .win-container {
    margin: 10px 7px 0px 24px;
}
.win-listview .win-container, .win-listview .win-itembox,
.win-itemcontainer.win-container, .win-itemcontainer .win-itembox {
    cursor: default;
    z-index: 0;
}
.win-listview .win-container  {
    touch-action:pan-x pan-y pinch-zoom;
}
.win-listview.win-swipeable .win-horizontal .win-container,
.win-listview.win-swipeable .win-horizontal .win-itembox.win-nonswipeable  {
    touch-action:pan-x pinch-zoom;
}
.win-listview.win-swipeable .win-vertical .win-container,
.win-listview.win-swipeable .win-vertical .win-itembox.win-nonswipeable  {
    touch-action:pan-y pinch-zoom;
}
.win-listview.win-swipeable .win-horizontal .win-itembox  {
    touch-action:pan-x pinch-zoom double-tap-zoom cross-slide-y;
}
.win-listview.win-swipeable .win-vertical .win-itembox  {
    touch-action:pan-y pinch-zoom double-tap-zoom cross-slide-x;
}
.win-semanticzoom  .win-listview > .win-viewport * {
    touch-action: auto;
}
.win-semanticzoom .win-listview > .win-viewport.win-zooming-x {
    overflow-x: visible;
}
.win-semanticzoom .win-listview > .win-viewport.win-zooming-y {
    overflow-y: visible;
}
.win-listview .win-itembox,
.win-itemcontainer .win-itembox {
    width:100%;
    height:100%;
}
.win-listview .win-item,
.win-itemcontainer .win-item {
    /* Used to place above .win-selectionbackground in ListView */
    z-index: 1;
}
.win-listview .win-item,
.win-itemcontainer .win-item {
    overflow: hidden;
    position: relative;
}
.win-listview > .win-vertical .win-item
{
    /* Allow flex box to fill win-item in list layout */
    width: 100%; 
}
.win-listview .win-item:focus,
.win-itemcontainer .win-item:focus {
    outline-style: none;
}
.win-listview .win-focusedoutline,
.win-itemcontainer .win-focusedoutline {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    left: -2px;
    top: -2px;
    position: absolute;
    z-index: 5;
    pointer-events: none;
}
.win-container.win-selected .win-selectionborder {
    border-width: 4px;
    border-style: solid;
}
.win-container.win-selected:hover .win-selectionborder {
    border-width: 4px;
    border-style: solid;
}
.win-listview .win-groupheader {
    padding: 10px 10px 10px 2px;
    overflow: hidden;
    outline-width: 0.01px;
    outline-style: none;
    /* Causes the focus outline to tightly wrap the header content */
    float: left;
    font-size: 20pt;
    font-weight: 200;
    line-height: 1.2; /* 32px when font-size is 20pt */
}
.win-listview .win-groupheadercontainer {
    z-index: 1;
    touch-action:pan-x pan-y pinch-zoom;
    overflow: hidden;
}
.win-listview .win-groupheader.win-focused {
    outline-style: dotted;
}
.win-listview.win-rtl .win-groupheader {
    padding-left: 10px;
    padding-right: 2px;
    float: right;
}
.win-listview.win-groups .win-horizontal .win-groupleader {
    margin-left: 70px;
}
.win-listview.win-groups.win-rtl .win-horizontal .win-groupleader {
    margin-left: 0;
    margin-right: 70px;
}
.win-listview.win-groups .win-vertical .win-listlayout .win-groupleader, 
.win-listview.win-groups .win-vertical .win-gridlayout .win-groupleader {
    margin-top: 70px;
}
.win-listview.win-groups > .win-vertical .win-surface.win-listlayout,
.win-listview.win-groups > .win-vertical .win-surface.win-gridlayout {
    margin-top: -65px;
}
.win-listview.win-groups > .win-horizontal .win-surface {
    margin-left: -70px;
}
.win-listview.win-groups.win-rtl > .win-horizontal .win-surface {
    margin-left: 0;
    margin-right: -70px;
}
.win-surface ._win-proxy {
    /* Position relative + overflow hidden are applied to this element to stop margin collapsing of a margin-top on a header + the margin-top on the surface in list layout */
    position: relative;
    overflow: hidden;
    width: 0;
    height: 0;
    touch-action: none;
}
.win-selectionborder {
    position: absolute;
    opacity: inherit;
    z-index: 2;
    pointer-events: none;
}
.win-container.win-selected .win-selectionborder {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.win-selectionbackground {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Used to place behind .win-item in the ListView/ItemContainer */
    z-index: 0;
}
.win-selectioncheckmarkbackground {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border-width: 20px;
    border-style: solid;
    z-index: 3;
}
.win-listview.win-rtl .win-selectioncheckmarkbackground,
.win-itemcontainer.win-rtl .win-selectioncheckmarkbackground {
    left: 0;
    right: auto;
}
.win-selectioncheckmark {
    position: absolute;
    margin: 0;
    padding: 2px;
    right: 0;
    top: 0;
    font-family: Segoe UI Symbol;
    font-size: 11pt;
    z-index: 4;
}
.win-listview.win-rtl .win-selectioncheckmark,
.win-itemcontainer.win-rtl .win-selectioncheckmark {
    left: 0;
    right: auto;
}
.win-selectionhint {
    position: absolute;
    margin: 0;
    padding: 2px;
    right: 0;
    font-family: Segoe UI Symbol;
    font-size: 11pt;
    opacity: 0.5;
}
.win-selectionhint.win-revealed {
    opacity: 1;
}
.win-listview.win-rtl .win-selectionhint,
.win-itemcontainer.win-rtl .win-selectionhint {
    left: 0;
    right: auto;
}
.win-listview .win-progress {
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    z-index: 1;
    position: absolute;
}
.win-listview .win-progress::-ms-fill {
    animation-name: -ms-ring;
}

.win-listview .win-itemsblock {
    overflow: hidden;
}
.win-listview .win-horizontal .win-itemscontainer, .win-listview .win-horizontal .win-itemsblock:not(.win-clip) {
    margin-top: -200px;
    margin-bottom: -200px;
    padding-top: 200px;
    padding-bottom: 200px;
}
.win-listview .win-vertical .win-itemscontainer, .win-listview  .win-vertical .win-itemsblock:not(.win-clip) {
    margin-left: -200px;
    margin-right: -200px;
    padding-left: 200px;
    padding-right: 200px;
}
/*
ListLayout
*/
.win-listview.win-groups .win-vertical .win-listlayout.win-headerpositionleft .win-itemscontainer,
.win-listview.win-groups .win-vertical .win-listlayout.win-headerpositionleft .win-groupheadercontainer,
.win-listview.win-groups .win-horizontal .win-listlayout .win-itemscontainer,
.win-listview.win-groups .win-horizontal .win-listlayout .win-groupheadercontainer {
    display: none;
}
.win-listview.win-groups .win-vertical .win-listlayout.win-headerpositionleft .win-itemscontainer.win-laidout,
.win-listview.win-groups .win-vertical .win-listlayout.win-headerpositionleft .win-groupheadercontainer.win-laidout, 
.win-listview.win-groups .win-horizontal .win-listlayout .win-groupheadercontainer.win-laidout {
    display: block;
}
.win-listview .win-listlayout .win-itemscontainer {
    overflow: visible;
}
.win-listview .win-listlayout .win-itemsblock {
    /* Avoid clipping of the focus and hover visuals */
    padding-bottom: 4px;
    margin-bottom: -4px;
}
/*
ListLayout - Vertical
*/
/* Vertical grouped list layout needs to remove float from group headers when headers are above so that static positioning gets applied properly */
.win-listview > .win-vertical .win-listlayout.win-headerpositiontop .win-groupheader {
    float: none;
}
.win-listview > .win-vertical .win-surface.win-listlayout {
    margin-bottom: 5px;
}
/* Headers on the left */
.win-listview.win-groups > .win-vertical .win-surface.win-listlayout.win-headerpositionleft {
    margin-left: 70px;
}
.win-listview.win-groups.win-rtl > .win-vertical .win-surface.win-listlayout.win-headerpositionleft {
    margin-left: 0px;
    margin-right: 70px;
}
.win-listview .win-vertical .win-listlayout.win-headerpositionleft.win-surface {
    display: -ms-inline-grid;
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: auto;
}
.win-listview .win-vertical .win-listlayout.win-headerpositionleft .win-groupheadercontainer {
    -ms-grid-column: 1;
}
.win-listview .win-vertical .win-listlayout.win-headerpositionleft .win-itemscontainer {
    -ms-grid-column: 2;
}
/*
ListLayout - Horizontal
*/
.win-listview > .win-horizontal .win-surface.win-listlayout {
    display: -ms-inline-grid;
    -ms-grid-columns: auto;
    -ms-grid-rows: auto;
    /* Use vertical-align:top when using display:-ms-inline-grid to avoid extra spacing around itself */
    vertical-align:top;
}
.win-listview > .win-horizontal .win-surface.win-listlayout {
    margin-left: 70px;
}
.win-listview.win-rtl > .win-horizontal .win-surface.win-listlayout {
    margin-left: 0px;
    margin-right: 70px;
}
.win-listview .win-horizontal .win-listlayout .win-itemsblock {
    height: 100%;
}
.win-listview .win-horizontal .win-listlayout .win-itemscontainer {
    /* itemscontainers have a -200px margin by default, but here we want to increase it by 24px to leave room for the scrollbar */
    margin-bottom: -176px;
}
.win-listview .win-horizontal .win-listlayout .win-container {
    height: calc(100% - 10px);
}
/* Headers above */
.win-listview > .win-horizontal .win-surface.win-listlayout.win-headerpositiontop {
    -ms-grid-rows: auto 1fr;
}
.win-listview .win-horizontal .win-listlayout.win-headerpositiontop .win-groupheadercontainer {
    -ms-grid-row: 1;
}
.win-listview .win-horizontal .win-listlayout.win-headerpositiontop .win-itemscontainer {
    -ms-grid-row: 2;
}
/*
GridLayout
*/
.win-listview .win-gridlayout.win-surface {
    /* Use a grid even in non-grouped layouts so that there is consistent margin
       collapsing behavior between the surface and itemsContainer in all grid layouts */
    display: -ms-inline-grid;
    /* Use vertical-align:top when using display:-ms-inline-grid to avoid extra spacing around itself */
    vertical-align:top;
}
.win-listview .win-vertical .win-gridlayout.win-surface {
    margin-left: 20px;
}
.win-listview.win-rtl .win-vertical .win-gridlayout.win-surface {
    margin-left: 0px;
    margin-right: 20px;
}
.win-horizontal .win-gridlayout .win-container {
    margin: 5px;
}
.win-vertical .win-gridlayout .win-container {
    margin: 5px 24px 5px 7px;
}
.win-rtl > .win-vertical .win-gridlayout .win-container {
    margin: 5px 7px 5px 24px;
}
/* Headers */
.win-listview .win-vertical .win-gridlayout.win-headerpositionleft .win-groupheadercontainer,
.win-listview .win-vertical .win-gridlayout.win-headerpositiontop .win-groupheadercontainer {
    -ms-grid-column: 1;
}
.win-listview.win-groups .win-gridlayout .win-itemscontainer,
.win-listview.win-groups .win-gridlayout .win-groupheadercontainer {
    display: none;
}
.win-listview.win-groups .win-gridlayout .win-groupheadercontainer.win-laidout {
    display: block;
}
/* Horizontal - Headers above */
.win-listview .win-horizontal .win-gridlayout.win-headerpositiontop.win-surface {
    -ms-grid-columns: auto;
    -ms-grid-rows: auto 1fr;
}
.win-listview .win-horizontal .win-gridlayout.win-headerpositiontop .win-groupheadercontainer {
    -ms-grid-row: 1;
}       
.win-listview .win-horizontal .win-gridlayout.win-headerpositiontop .win-itemscontainer {
    -ms-grid-row: 2;
}       
/* Horizontal - Headers on the left */
.win-listview .win-horizontal .win-gridlayout.win-headerpositionleft.win-surface {
    -ms-grid-columns: auto;
    -ms-grid-rows: auto;
}
.win-listview .win-horizontal .win-gridlayout.win-headerpositionleft .win-groupheadercontainer {
    -ms-grid-row: 1;
}
.win-listview .win-horizontal .win-gridlayout.win-headerpositionleft .win-itemscontainer {
    -ms-grid-row: 1;
}
/* Vertical - headers above */
.win-listview .win-vertical .win-gridlayout.win-headerpositiontop.win-surface {
    -ms-grid-columns: auto;
    -ms-grid-rows: auto;
}  
.win-listview .win-vertical .win-gridlayout.win-headerpositiontop .win-itemscontainer {
    -ms-grid-column: 1;
}
/* Vertical - headers on the left */
.win-listview .win-vertical .win-gridlayout.win-headerpositionleft.win-surface {
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: auto;
}
.win-listview .win-vertical .win-gridlayout.win-headerpositionleft .win-itemscontainer {
    -ms-grid-column: 2;
}
/* Uniform and cell spanning groups */
.win-listview .win-gridlayout.win-structuralnodes .win-uniformgridlayout.win-itemscontainer.win-laidout {
    display: flex;
    flex-flow: row;
}
.win-listview .win-horizontal .win-listlayout .win-itemscontainer,
.win-listview.win-groups .win-horizontal .win-listlayout .win-itemscontainer.win-laidout,
.win-listview .win-horizontal .win-listlayout .win-itemsblock,
.win-listview .win-horizontal .win-gridlayout .win-uniformgridlayout.win-itemscontainer.win-laidout,
.win-listview .win-horizontal .win-gridlayout .win-uniformgridlayout .win-itemsblock {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
}
.win-listview .win-horizontal .win-itemscontainer-padder {
    height: 100%;
}
.win-listview .win-horizontal .win-gridlayout .win-uniformgridlayout .win-itemsblock {
    height: 100%;
}
.win-listview .win-horizontal .win-gridlayout .win-cellspanninggridlayout.win-itemscontainer.win-laidout {
    display: -ms-grid;
}
/* Vertical - uniform group */
.win-listview .win-vertical .win-gridlayout.win-structuralnodes .win-uniformgridlayout.win-itemscontainer.win-laidout {
    display: flex;
    flex-flow: column;
}
.win-listview .win-vertical .win-gridlayout .win-uniformgridlayout.win-itemscontainer.win-laidout,
.win-listview .win-vertical .win-gridlayout .win-uniformgridlayout .win-itemsblock {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}
.win-listview .win-vertical .win-gridlayout .win-uniformgridlayout .win-itemsblock {
    width: 100%;
}
/* Cell spanning */
.win-listview .win-cellspanninggridlayout .win-container.win-laidout {
    display: block;
}
.win-listview .win-cellspanninggridlayout .win-container {
    display: none;
}
.win-listview .win-itembox {
    position: relative;
    transition: transform cubic-bezier(0.1, 0.9, 0.2, 1) 220ms;
}
.win-listview.win-dragover .win-itembox {
    transform: scale(0.86);
}
.win-listview .win-itembox.win-dragsource,
.win-itemcontainer .win-itembox.win-dragsource {
    opacity: 0.5;
    transition: opacity cubic-bezier(0.1, 0.9, 0.2, 1) 167ms, transform cubic-bezier(0.1, 0.9, 0.2, 1) 220ms;
}
.win-listview.win-dragover .win-itembox.win-dragsource {
    opacity: 0;
    transition: none;
}
.win-listview.win-dragover .win-container:hover {
    outline: none;
}
.win-listview .win-container.win-swipe, .win-listview .win-container.win-swipe .win-itembox,
.win-itemcontainer.win-container.win-swipe, .win-itemcontainer.win-container.win-swipe .win-itembox {
    position: relative;
    z-index: 1;
}
/*
FlipView control.
*/
.win-flipview {
    overflow: hidden;
    height: 400px;
}

.win-flipview .win-surface {
    -ms-scroll-chaining: none;
}

.win-flipview .win-navleft {
    left: 0%;
    top: 50%;
    margin-top: -19px;
}
.win-flipview .win-navright {
    left: 100%;
    top: 50%;
    margin-left: -69px;
    margin-top: -19px;
}
.win-flipview .win-navtop {
    left: 50%;
    top: 0%;
    margin-left: -35px;
}
.win-flipview .win-navbottom {
    left: 50%;
    top: 100%;
    margin-left: -35px;
    margin-top: -39px;
}
.win-flipview .win-navbutton {
    border: none;
    width: 69px;
    height: 39px;
    z-index: 1;
    position: absolute;
    font-family: "Segoe UI Symbol";
    font-size: 16pt;
    padding: 0;
    min-width: 0;
}
.win-flipview .win-item, .win-flipview .win-item > .win-template {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/*
ItemContainer control.
*/
.win-itemcontainer .win-itembox,
.win-itemcontainer.win-container {
    position:relative;
}
.win-itemcontainer {
    touch-action:pan-x pan-y pinch-zoom;
}
.win-itemcontainer.win-swipeable.win-horizontal .win-itembox {
    touch-action:pan-y pinch-zoom cross-slide-x;
}
.win-itemcontainer.win-swipeable.win-vertical .win-itembox {
    touch-action:pan-x pinch-zoom cross-slide-y;
}

/*
Typographic color definitions.
*/

body {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.win-ui-dark .win-type-interactive:hover {
    color: rgba(255, 255, 255, 0.8);
}
.win-ui-dark .win-type-interactive:hover:active {
    color: rgba(255, 255, 255, 0.4);
}

.win-ui-dark .win-type-interactive:-ms-keyboard-active {
    color: rgba(255, 255, 255, 0.4);
}
.win-type-interactive:hover {
    color: rgba(0, 0, 0, 0.8);
}
.win-type-interactive:hover:active {
    color: rgba(0, 0, 0, 0.4);
}
.win-type-interactive:-ms-keyboard-active {
    color: rgba(0, 0, 0, 0.4);
}

/*
These classes reverse the colors on the subtree to which they are applied.
*/

.win-ui-light {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}
.win-ui-dark {
    color: rgb(255, 255, 255);
    background-color: rgb(29, 29, 29);
}

/*
Text selection color
*/
::selection {
    background-color: rgb(87, 41, 193);
    color: rgb(255, 255, 255);
}

/*
Text input, checkbox, radio, and select control colors.
*/
.win-ui-dark input[type=text], .win-ui-dark input[type=password],
.win-ui-dark input[type=email], .win-ui-dark input[type=number],
.win-ui-dark input[type=tel], .win-ui-dark input[type=url],
.win-ui-dark input[type=search], .win-ui-dark textarea, .win-ui-dark .win-textarea,
.win-ui-dark select, .win-ui-dark input::-ms-check {
    background-clip: border-box;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
.win-ui-dark input[type=text]:hover, .win-ui-dark input[type=password]:hover, 
.win-ui-dark input[type=email]:hover, .win-ui-dark input[type=number]:hover, 
.win-ui-dark input[type=tel]:hover, .win-ui-dark input[type=url]:hover,
.win-ui-dark input[type=search]:hover, .win-ui-dark textarea:hover, 
.win-ui-dark .win-textarea:hover, .win-ui-dark select:hover, .win-ui-dark input:hover::-ms-check {
    background-clip: border-box;
    background-color: rgba(255, 255, 255, 0.87);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
.win-ui-dark input:hover:active::-ms-check { /* only checkbox and radio have press state */
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.win-ui-dark input:-ms-keyboard-active::-ms-check { /* only checkbox and radio have press state */
    background-color: rgb(255, 255, 255);
}
.win-ui-dark input[type=text]:focus, .win-ui-dark input[type=text]:active,
.win-ui-dark input[type=password]:focus, .win-ui-dark input[type=password]:active,
.win-ui-dark input[type=email]:focus, .win-ui-dark input[type=email]:active,
.win-ui-dark input[type=number]:focus, .win-ui-dark input[type=number]:active,
.win-ui-dark input[type=tel]:focus, .win-ui-dark input[type=tel]:active,
.win-ui-dark input[type=url]:focus, .win-ui-dark input[type=url]:active,
.win-ui-dark input[type=search]:focus, .win-ui-dark input[type=search]:active,
.win-ui-dark textarea:focus, .win-ui-dark textarea:active,
.win-ui-dark .win-textarea:focus, .win-ui-dark .win-textarea:active,
.win-ui-dark select:focus, .win-ui-dark select:active {
    background-clip: border-box;
    background-color: rgb(255, 255, 255);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
.win-ui-dark input[type=text]:disabled, .win-ui-dark input[type=password]:disabled,
.win-ui-dark input[type=email]:disabled, .win-ui-dark input[type=number]:disabled,
.win-ui-dark input[type=tel]:disabled, .win-ui-dark input[type=url]:disabled, 
.win-ui-dark input[type=search]:disabled, .win-ui-dark input[type=file]::-ms-value,
.win-ui-dark textarea:disabled, .win-ui-dark .win-textarea:disabled, .win-ui-dark select:disabled {
    background-clip: border-box;
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-dark input:disabled::-ms-check, .win-ui-dark input:disabled:active::-ms-check { /* checkbox and radio have filled disabled state in dark */
    background-clip: border-box;
    background-color: rgba(255, 255, 255, 0.4);
    border-color: transparent;
    color: rgba(0, 0, 0, 0.4);
}
input[type=text], input[type=password],
input[type=email], input[type=number],
input[type=tel], input[type=url],
input[type=search], select, textarea,
.win-textarea, input::-ms-check {
    background-clip: padding-box;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.27);
    color: rgb(0, 0, 0);
}
input[type=text]:hover, input[type=password]:hover, 
input[type=email]:hover, input[type=number]:hover, 
input[type=tel]:hover, input[type=url]:hover,
input[type=search]:hover, textarea:hover,
select:hover, .win-textarea:hover, input:hover::-ms-check {
    background-color: rgba(255, 255, 255, 0.87);
    border-color: rgba(0, 0, 0, 0.44);
    color: rgb(0, 0, 0);
}
input[type=text]:focus, input[type=text]:active,
input[type=password]:focus, input[type=password]:active,
input[type=email]:focus, input[type=email]:active,
input[type=number]:focus, input[type=number]:active,
input[type=tel]:focus, input[type=tel]:active,
input[type=url]:focus, input[type=url]:active,
input[type=search]:focus, input[type=search]:active,
textarea:focus, textarea:active,
.win-textarea:focus, .win-textarea:active,
select:focus, select:active {
    background-color: rgb(255, 255, 255);
    border-color: rgba(0, 0, 0, 0.6);
    color: rgb(0, 0, 0);
}
input:hover:active::-ms-check { /* only checkbox and radio have press state */
    background-clip: border-box;
    background-color: rgb(0, 0, 0);
    border-color: transparent;
    color: rgb(255, 255, 255);
}
input:-ms-keyboard-active::-ms-check { /* only checkbox and radio have press state */
    background-clip: border-box;
    background-color: rgb(0, 0, 0);
    border-color: transparent;
    color: rgb(255, 255, 255);
}
input[type=text]:disabled, input[type=password]:disabled,
input[type=email]:disabled, input[type=number]:disabled,
input[type=tel]:disabled, input[type=url]:disabled, 
input[type=search]:disabled, input[type=file]::-ms-value,
textarea:disabled, .win-textarea:disabled, select:disabled,
input:disabled::-ms-check, input:disabled:active::-ms-check {
    background-clip: padding-box;
    background-color: rgba(202, 202, 202, 0.4);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.4);
}

/*
Placeholder text style.
*/
.win-ui-dark input[type]:-ms-input-placeholder, input[type]:-ms-input-placeholder,
.win-ui-dark textarea:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6); /* same in dark and light */
}
.win-ui-dark input[type]:disabled:-ms-input-placeholder, .win-ui-dark textarea:disabled:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.22);
}
input[type]:disabled:-ms-input-placeholder, textarea:disabled:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.22);
}

/*
Invalid style.
*/
input[type]:invalid {
    outline-color: rgb(255, 128, 51);
    outline-width: 2px;
}

/*
Clear and reveal buttons.
*/
input::-ms-clear, input::-ms-reveal {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
input::-ms-clear:hover, input::-ms-reveal:hover {
    background-color: rgb(222, 222, 222);
}
input::-ms-clear:hover:active, input::-ms-reveal:hover:active {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

/*
Option for select control (all colors are same for both light and dark).
*/
option:checked, select:focus::-ms-value {
    color: rgb(255, 255, 255);
    background-color: rgb(70, 23, 180);
}
option:hover {
    color: rgb(0, 0, 0);
    background-color: rgb(197, 197, 197);
}
select:focus option:hover {
    color: rgb(0, 0, 0);
    background-color: rgb(222, 222, 222);
}
option:checked:hover, select:focus option:checked:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(95, 55, 190);
}
option:hover:active, select:focus option:hover:active{
    color: rgb(0, 0, 0);
    background-color: rgb(211, 211, 211);
}
.win-ui-dark option:checked:disabled, .win-ui-dark option:checked:disabled:active,
.win-ui-dark optgroup:disabled option:checked, .win-ui-dark optgroup:disabled option:checked:active,
.win-ui-dark select:disabled option:checked, .win-ui-dark select:disabled option:checked:active,
.win-ui-dark select:disabled:focus::-ms-value {
    background-color: rgba(255, 255, 255, 0.4);
    color: rgba(0, 0, 0, 0.6);
}
option:checked:disabled, option:checked:disabled:active,
optgroup:disabled option:checked, optgroup:disabled option:checked:active,
select:disabled option:checked, select:disabled option:checked:active,
select:disabled:focus::-ms-value {
    background-color: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.6);
}

/*
Button control colors.
*/
.win-ui-dark button, .win-ui-dark input[type=button], .win-ui-dark input[type=submit],
.win-ui-dark input[type=reset], .win-ui-dark input[type=file]::-ms-browse {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
}
.win-ui-dark button[type=submit], .win-ui-dark input[type=submit] {
    background-clip: padding-box;
    background-color: rgb(70, 23, 180);
}
.win-ui-dark button:hover, .win-ui-dark input[type=button]:hover, .win-ui-dark input[type=reset]:hover,
.win-ui-dark input[type=file]::-ms-browse:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button[type=submit]:hover, .win-ui-dark input[type=submit]:hover {
    background-clip: padding-box;    
    background-color: rgb(95, 55, 190);
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button:hover:active, .win-ui-dark button[type=submit]:hover:active,
.win-ui-dark input[type=button]:hover:active, .win-ui-dark input[type=reset]:hover:active,
.win-ui-dark input[type=submit]:hover:active, .win-ui-dark input[type=file]::-ms-browse:hover:active {
    background-clip: border-box;
    background-color: rgb(255, 255, 255);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
.win-ui-dark button:-ms-keyboard-active, .win-ui-dark button[type=submit]:-ms-keyboard-active,
.win-ui-dark input[type=button]:-ms-keyboard-active, .win-ui-dark input[type=reset]:-ms-keyboard-active,
.win-ui-dark input[type=submit]:-ms-keyboard-active {
    background-clip: border-box;
    background-color: rgb(255, 255, 255);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
.win-ui-dark button:disabled, .win-ui-dark button[type=submit]:disabled,
.win-ui-dark input[type=button]:disabled, .win-ui-dark input[type=reset]:disabled,
.win-ui-dark input[type=submit]:disabled, .win-ui-dark input[type=file]:disabled::-ms-browse,
.win-ui-dark button:disabled:active, .win-ui-dark button[type=submit]:disabled:active,
.win-ui-dark input[type=button]:disabled:active, .win-ui-dark input[type=reset]:disabled:active,
.win-ui-dark input[type=submit]:disabled:active, .win-ui-dark input[type=file]:disabled::-ms-browse:active {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.4);
}
button, input[type=button], input[type=submit],
input[type=reset], input[type=file]::-ms-browse {
    background-color: rgba(182, 182, 182, 0.7);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgb(0, 0, 0);
}
button[type=submit], input[type=submit]{
    background-clip: border-box;
    background-color: rgb(70, 23, 180);
    border-color: transparent;
    color: rgb(255, 255, 255);
}
button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
    background-color: rgba(205, 205, 205, 0.82);
    border-color: rgba(164, 164, 164, 0.45);
}
button[type=submit]:hover, input[type=submit]:hover {
    background-clip: border-box;
    background-color: rgb(95, 55, 190);
    border-color: transparent;
}
button:hover:active, button[type=submit]:hover:active,
input[type=button]:hover:active, input[type=reset]:hover:active,
input[type=submit]:hover:active, input[type=file]::-ms-browse:hover:active {
    background-clip: border-box;
    background-color: rgb(0, 0, 0);
    border-color: transparent;
    color: rgb(255, 255, 255);
}
button:-ms-keyboard-active, button[type=submit]:-ms-keyboard-active,
input[type=button]:-ms-keyboard-active, input[type=reset]:-ms-keyboard-active,
input[type=submit]:-ms-keyboard-active {
    background-clip: border-box;
    background-color: rgb(0, 0, 0);
    border-color: transparent;
    color: rgb(255, 255, 255);
}
button:disabled, button[type=submit]:disabled,
input[type=button]:disabled, input[type=reset]:disabled,
input[type=submit]:disabled, input[type=file]:disabled::-ms-browse,
button:disabled:active, button[type=submit]:disabled:active,
input[type=button]:disabled:active, input[type=reset]:disabled:active,
input[type=submit]:disabled:active, input[type=file]:disabled::-ms-browse:active {
    background-color: rgba(202, 202, 202, 0.4);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.4);
}
input[type=file]:disabled::-ms-browse, input[type=file]:disabled::-ms-browse:active {
    border-color: rgba(0, 0, 0, 0.15);
}

/*
File upload control colors.
*/
input[type=file] {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
}

/*
Link colors.
*/
.win-ui-dark a {
    color: rgb(156, 114, 255);
}
.win-ui-dark a:hover:active {
    color: rgba(156, 114, 255, 0.6);
}
.win-ui-dark a:hover {
    color: rgba(156, 114, 255, 0.8);
}
.win-ui-dark a[disabled], .win-ui-dark a[disabled]:active { /* :disabled pseudo-class doesn't apply to a, even though disabled attribute stops navigation */
    color: rgba(255, 255, 255, 0.4);
}
a {
    color: rgb(79, 26, 203);
}
a:hover:active {
    color: rgba(79, 26, 203, 0.6);
}
a:hover {
    color: rgba(79, 26, 203, 0.8);
}
a[disabled], a[disabled]:active { /* :disabled pseudo-class doesn't apply to a, even though disabled attribute stops navigation */
    color: rgba(0, 0, 0, 0.4);
}

/*
Range control colors.
*/
input[type=range], input[type=range]::-ms-track {
    background-color: transparent;
}

.win-ui-dark input[type=range]::-ms-fill-lower {
    background-color: rgb(91, 46, 197);
}
.win-ui-dark input[type=range]:hover::-ms-fill-lower {
    background-color: rgb(114, 75, 205);
}
.win-ui-dark input[type=range]:active::-ms-fill-lower {
    background-color: rgb(129, 82, 239);
}
.win-ui-dark input[type=range]:disabled::-ms-fill-lower {
    background-color: rgba(255, 255, 255, 0.23);
}
input[type=range]::-ms-fill-lower {
    background-color: rgb(70, 23, 180);
}
input[type=range]:hover::-ms-fill-lower {
    background-color: rgb(95, 55, 190);
}
input[type=range]:active::-ms-fill-lower {
    background-color: rgb(114, 65, 228);
}
input[type=range]:disabled::-ms-fill-lower {
    background-color: rgba(0, 0, 0, 0.2);
}

.win-ui-dark input[type=range]::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.16);
}
.win-ui-dark input[type=range]:hover::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.18);
}
.win-ui-dark input[type=range]:active::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.23);
}
.win-ui-dark input[type=range]:disabled::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.16);
}
input[type=range]::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.1);
}
input[type=range]:hover::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.15);
}
input[type=range]:active::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.2);
}
input[type=range]:disabled::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.1);
}

.win-ui-dark input[type=range]::-ms-thumb {
    background-color: rgb(255, 255, 255);
}
.win-ui-dark input[type=range]:disabled::-ms-thumb {
    background-color: rgb(126, 126, 126);
}
input[type=range]::-ms-thumb {
    background-color: rgb(0, 0, 0);
}
input[type=range]:disabled::-ms-thumb {
    background-color: rgb(146, 146, 146);
}

.win-ui-dark input[type=range]::-ms-ticks-before,
.win-ui-dark input[type=range]::-ms-ticks-after {
    color: rgba(255, 255, 255, 0.5);
}
input[type=range]::-ms-ticks-before,
input[type=range]::-ms-ticks-after {
    color: rgba(0, 0, 0, 0.5);
}

/*
Progress control colors.
*/
.win-ui-dark progress {
    background-color: rgba(255,255,255,0.35);
    color: rgb(91, 46, 197);
}
progress {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgb(70, 23, 180);
}
.win-ui-dark progress:indeterminate {
    color: rgb(138, 87, 255);
}
progress:indeterminate {
    color: rgb(70, 23, 180);
}
progress::-ms-fill {
    background-color: currentColor;
}
/* 
Explicitly define indeterminate background transparent for dark and light 
because ".win-ui-light progress" has higher specificity than "progress:indeterminate".
*/
.win-ui-dark progress:indeterminate, progress:indeterminate {
    background-color: transparent;
}

/*
Hub colors.
*/
.win-ui-dark button.win-hub-section-header-tabstop,
.win-ui-dark button.win-hub-section-header-tabstop:hover,
.win-ui-dark button.win-hub-section-header-tabstop:hover:active {
    color: rgb(255, 255, 255);
}
.win-ui-dark button.win-hub-section-header-tabstop.win-keyboard:focus {
    outline: 1px dotted rgb(255, 255, 255);
}
.win-ui-dark button.win-hub-section-header-tabstop:-ms-keyboard-active {
    color: rgb(255, 255, 255);
}
.win-ui-dark button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover {
    color: rgba(255, 255, 255, 0.8);
}
.win-ui-dark button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover:active {
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-dark button.win-hub-section-header-tabstop.win-hub-section-header-interactive:-ms-keyboard-active {
    color: rgba(255, 255, 255, 0.4);
}
button.win-hub-section-header-tabstop,
button.win-hub-section-header-tabstop:hover,
button.win-hub-section-header-tabstop:hover:active {
    color: rgb(0, 0, 0);
}
button.win-hub-section-header-tabstop.win-keyboard:focus {
    outline: 1px dotted rgb(0, 0, 0);
}
button.win-hub-section-header-tabstop:-ms-keyboard-active {
    color: rgb(0, 0, 0);
}
button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover {
    color: rgba(0, 0, 0, 0.8);
}
button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover:active {
    color: rgba(0, 0, 0, 0.4);
}
button.win-hub-section-header-tabstop.win-hub-section-header-interactive:-ms-keyboard-active {
    color: rgba(0, 0, 0, 0.4);
}

/*
NavBarContainer colors.
*/
.win-ui-dark .win-navbarcontainer-pageindicator {
    background-color: rgba(255,255,255,0.4);
}
.win-navbarcontainer-pageindicator {
    background-color: rgba(0,0,0,0.3);
}
.win-ui-dark .win-navbarcontainer-pageindicator-current {
    background-color: rgba(255,255,255,0.8);
}
.win-navbarcontainer-pageindicator-current {
    background-color: rgba(0,0,0,0.66);
}
.win-ui-dark .win-navbarcontainer-pageindicator:hover {
    background-color: rgba(255,255,255,0.6);
}
.win-navbarcontainer-pageindicator:hover {
    background-color: rgba(0,0,0,0.44);
}
.win-ui-dark .win-navbarcontainer-pageindicator:hover:active {
    background-color: rgba(255,255,255,0.7);
}
.win-navbarcontainer-pageindicator:hover:active {
    background-color: rgba(0,0,0,0.58);
}
.win-ui-dark .win-navbarcontainer-navarrow {
    background-color: rgb(74,74,74);
    color: rgb(30,30,30)
}
.win-ui-dark .win-navbarcontainer-navarrow:hover {
    background-color: rgb(202,202,202);
    color: rgb(0,0,0)
}
.win-ui-dark .win-navbarcontainer-navarrow:hover:active {
    background-color: rgb(30,30,30);
    color: rgb(255,255,255);
}
.win-navbarcontainer-navarrow {
    background-color: rgb(231,231,231);
    color: rgb(92,92,92)
}
.win-navbarcontainer-navarrow:hover {
    background-color: rgb(218,218,218);
    color: rgb(0,0,0)
}
.win-navbarcontainer-navarrow:hover:active {
    background-color: rgb(93,93,93);
    color: rgb(255,255,255);
}

/*
    NavBarCommand colors.
*/
.win-ui-dark .win-navbarcommand-button,
.win-ui-dark .win-navbarcommand-splitbutton {
    background-color: rgba(255,255,255,0.11);
    color: rgb(255,255,255);
}
.win-navbarcommand-button,
.win-navbarcommand-splitbutton {
    background-color: rgba(0,0,0,0.09);
    color: rgb(0,0,0);
}
.win-ui-dark .win-navbarcommand-button:hover,
.win-ui-dark .win-navbarcommand-splitbutton:hover {
    background-color: rgba(255,255,255,0.22);
}
.win-navbarcommand-button:hover,
.win-navbarcommand-splitbutton:hover {
    background-color: rgba(199,199,199,0.31);
}
.win-ui-dark .win-navbarcommand-button.win-keyboard:focus,
.win-ui-dark .win-navbarcommand-splitbutton.win-keyboard:focus {
    outline: 2px solid rgb(255,255,255);
}
.win-navbarcommand-button.win-keyboard:focus,
.win-navbarcommand-splitbutton.win-keyboard:focus {
    outline: 2px solid rgb(0,0,0);
}
.win-ui-dark .win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened,
.win-ui-dark .win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened:hover,
.win-ui-dark .win-navbarcommand-button.win-pressed,
.win-ui-dark .win-navbarcommand-button.win-pressed:hover,
.win-ui-dark .win-navbarcommand-splitbutton.win-pressed,
.win-ui-dark .win-navbarcommand-splitbutton.win-pressed:hover {
    background-color: rgb(255,255,255);
    color: rgb(0,0,0);
}
.win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened,
.win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened:hover,
.win-navbarcommand-button.win-pressed,
.win-navbarcommand-button.win-pressed:hover,
.win-navbarcommand-splitbutton.win-pressed,
.win-navbarcommand-splitbutton.win-pressed:hover {
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
}

/*
FlipView control colors.
*/
.win-flipview .win-navbutton {
    background-color: rgba(213, 213, 213, 0.35);
    color: rgba(0, 0, 0, 0.60);
}
.win-flipview .win-navbutton:hover {
    background-color: rgba(215, 215, 215, 0.94);
    color: rgba(0, 0, 0, 1.0);
}
.win-flipview .win-navbutton:hover:active {
    background-color: rgba(41, 41, 41, 0.74);
    color: rgba(255, 255, 255, 1.0);
}

/*
ListView control colors.
*/
.win-ui-dark .win-listview .win-itembox,
.win-ui-dark .win-itemcontainer .win-itembox {
    background-color: rgb(29, 29, 29);
}
.win-listview .win-itembox,
.win-itemcontainer .win-itembox {
    background-color: rgb(255, 255, 255);
}
.win-ui-dark .win-listview .win-container.win-backdrop {
    background-color: rgba(155,155,155,0.23);
}
.win-listview .win-container.win-backdrop {
    background-color: rgba(155,155,155,0.23);
}
.win-ui-dark .win-listview .win-container:hover,
.win-ui-dark .win-itemcontainer.win-container:hover {
    outline: rgba(255, 255, 255, 0.3) solid 3px;
}
.win-ui-dark .win-listview .win-groupheader {
    outline-color: rgb(255, 255, 255);
}
.win-ui-dark .win-listview.win-selectionstylefilled .win-container:hover .win-itembox,
.win-ui-dark .win-itemcontainer.win-selectionstylefilled.win-container:hover .win-itembox {
    background-color: rgba(255, 255, 255, 0.3);
}
.win-ui-dark .win-listview .win-focusedoutline,
.win-ui-dark .win-itemcontainer .win-focusedoutline {
    outline: rgb(255, 255, 255) solid 2px;
}
.win-listview .win-container:hover,
.win-itemcontainer.win-container:hover {
    outline: rgba(0, 0, 0, 0.3) solid 3px;
}
.win-listview .win-groupheader{
    outline-color: rgb(0, 0, 0);
}
.win-listview.win-selectionstylefilled .win-container:hover .win-itembox,
.win-itemcontainer.win-selectionstylefilled.win-container:hover .win-itembox {
    background-color: rgba(0, 0, 0, 0.3);
}
.win-listview .win-focusedoutline,
.win-itemcontainer .win-focusedoutline {
    outline: rgb(0, 0, 0) solid 2px;
}
.win-listview.win-selectionstylefilled .win-container.win-selected:hover .win-itembox,
.win-itemcontainer.win-selectionstylefilled.win-container.win-selected:hover .win-itembox
{
    background-color: rgb(95, 55, 190);
}
.win-ui-dark .win-listview .win-container.win-swipe:hover .win-itembox,
.win-ui-dark .win-itemcontainer.win-container.win-swipe:hover .win-itembox {
    background-color: rgb(29, 29, 29);
    outline: none;
}
.win-listview .win-container.win-swipe:hover .win-itembox,
.win-itemcontainer.win-container.win-swipe:hover .win-itembox {
    background-color: rgb(255, 255, 255);
    outline: none;
}
.win-listview.win-selectionstylefilled .win-selected,
.win-itemcontainer.win-selectionstylefilled.win-selected {
    color: rgb(255, 255, 255);
}
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected .win-selectionborder,
.win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected .win-selectionborder {
    border-color: rgb(70, 23, 180);
}
.win-listview.win-selectionstylefilled .win-container.win-selected .win-selectionborder,
.win-itemcontainer.win-selectionstylefilled.win-container.win-selected .win-selectionborder {
    border-color: transparent;
}
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder,
.win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected:hover .win-selectionborder {
    border-color: rgb(95, 55, 190);
}
.win-listview.win-selectionstylefilled .win-selected .win-selectionbackground,
.win-itemcontainer.win-selectionstylefilled.win-selected .win-selectionbackground {
    background-color: rgb(70, 23, 180);
}
.win-listview.win-selectionstylefilled .win-selected:hover .win-selectionbackground,
.win-itemcontainer.win-selectionstylefilled.win-selected:hover .win-selectionbackground {
    background-color: rgb(95, 55, 190);
}
.win-selectioncheckmark {
    color: rgb(255, 255, 255);
}
.win-ui-dark .win-selectionhint {
    color: rgb(255, 255, 255);
}
.win-selectionhint {
    color: rgb(70, 23, 180);
}
.win-listview:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground,
.win-itemcontainer:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
    border-top-color: rgb(70, 23, 180);
    border-right-color: rgb(70, 23, 180);
    border-left-color: transparent;
    border-bottom-color: transparent;
}
.win-listview.win-selectionstylefilled .win-selectioncheckmarkbackground,
.win-itemcontainer.win-selectionstylefilled .win-selectioncheckmarkbackground {
    border-color: transparent;
}
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectioncheckmarkbackground,
.win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected:hover .win-selectioncheckmarkbackground {
    border-top-color: rgb(95, 55, 190);
    border-right-color: rgb(95, 55, 190);
    border-left-color: transparent;
    border-bottom-color: transparent;
}
.win-listview.win-rtl:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground,
.win-itemcontainer.win-rtl:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
    border-left-color: rgb(70, 23, 180);
    border-right-color: transparent;
}
.win-listview.win-rtl:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectioncheckmarkbackground,
.win-itemcontainer.win-rtl:not(.win-selectionstylefilled).win-container.win-selected:hover .win-selectioncheckmarkbackground {
    border-left-color: rgb(95, 55, 190);
    border-right-color: transparent;
}

.win-listview.win-selectionstylefilled .win-selected a,
.win-listview.win-selectionstylefilled .win-selected progress,
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-full,
.win-itemcontainer.win-selectionstylefilled.win-selected a,
.win-itemcontainer.win-selectionstylefilled.win-selected progress,
.win-itemcontainer.win-selectionstylefilled.win-selected .win-rating .win-star.win-full {
    color: rgb(255, 255, 255);
}
.win-listview.win-selectionstylefilled .win-selected a:hover:active,
.win-itemcontainer.win-selectionstylefilled.win-selected a:hover:active {
    color: rgba(255, 255, 255, 0.6);
}
.win-listview.win-selectionstylefilled .win-selected a:hover,
.win-itemcontainer.win-selectionstylefilled.win-selected a:hover {
    color: rgba(255, 255, 255, 0.8);
}
.win-listview.win-selectionstylefilled .win-selected button,
.win-listview.win-selectionstylefilled .win-selected input[type=button],
.win-listview.win-selectionstylefilled .win-selected input[type=reset],
.win-listview.win-selectionstylefilled .win-selected input[type=text],
.win-listview.win-selectionstylefilled .win-selected input[type=password],
.win-listview.win-selectionstylefilled .win-selected input[type=email],
.win-listview.win-selectionstylefilled .win-selected input[type=number],
.win-listview.win-selectionstylefilled .win-selected input[type=tel],
.win-listview.win-selectionstylefilled .win-selected input[type=url],
.win-listview.win-selectionstylefilled .win-selected input[type=search],
.win-listview.win-selectionstylefilled .win-selected input::-ms-check,
.win-listview.win-selectionstylefilled .win-selected textarea,
.win-listview.win-selectionstylefilled .win-selected .win-textarea,
.win-listview.win-selectionstylefilled .win-selected select,
.win-itemcontainer.win-selectionstylefilled.win-selected button,
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=button],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=reset],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=text],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=password],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=email],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=number],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=tel],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=url],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=search],
.win-itemcontainer.win-selectionstylefilled.win-selected input::-ms-check,
.win-itemcontainer.win-selectionstylefilled.win-selected textarea,
.win-itemcontainer.win-selectionstylefilled.win-selected .win-textarea,
.win-itemcontainer.win-selectionstylefilled.win-selected select {
    background-clip: border-box;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
.win-listview.win-selectionstylefilled .win-selected button[type=submit],
.win-listview.win-selectionstylefilled .win-selected input[type=submit],
.win-itemcontainer.win-selectionstylefilled.win-selected button[type=submit],
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=submit] {
    border-color: rgb(255, 255, 255);
}
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-lower,
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=range]::-ms-fill-lower {
    background-color: rgb(255, 255, 255);
}
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-thumb,
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=range]::-ms-thumb {
    background-color: rgb(0,0,0);
}
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-upper,
.win-listview.win-selectionstylefilled .win-selected progress,
.win-itemcontainer.win-selectionstylefilled.win-selected input[type=range]::-ms-fill-upper,
.win-itemcontainer.win-selectionstylefilled.win-selected progress {
    background-color: rgba(255, 255, 255, 0.16);
}
.win-listview.win-selectionstylefilled .win-selected progress:indeterminate,
.win-itemcontainer.win-selectionstylefilled.win-selected progress:indeterminate {
    background-color: transparent;
}
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-empty,
.win-itemcontainer.win-selectionstylefilled.win-selected .win-rating .win-star.win-empty {
    color: rgba(255, 255, 255, 0.16);
}

/*
Color for the BackButton controls
*/
.win-ui-dark .win-navigation-backbutton, .win-ui-dark .win-navigation-backbutton:active, 
.win-ui-dark .win-navigation-backbutton:hover, .win-ui-dark .win-navigation-backbutton:active:hover
{
    background-color: transparent;
}
.win-ui-dark .win-backbutton, .win-ui-dark .win-back {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
}
.win-ui-dark .win-backbutton:hover,
.win-ui-dark .win-navigation-backbutton:hover .win-back {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}
.win-ui-dark .win-backbutton:hover:active,
.win-ui-dark .win-navigation-backbutton:hover:active .win-back, 
.win-ui-dark .win-navigation-backbutton:active .win-back {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.win-ui-dark .win-backbutton:-ms-keyboard-active,
.win-ui-dark .win-navigation-backbutton:-ms-keyboard-active .win-back {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.win-ui-dark .win-backbutton:disabled, .win-ui-dark .win-backbutton:disabled:active,
.win-ui-dark .win-navigation-backbutton:disabled .win-back,
.win-ui-dark .win-navigation-backbutton:disabled:active .win-back {
    background-clip: padding-box;
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.4);
}
.win-navigation-backbutton, .win-navigation-backbutton:active, 
.win-navigation-backbutton:hover, .win-navigation-backbutton:active:hover
{
    background-color: transparent;
}
.win-backbutton, .win-back {    
    background-color: transparent;
    border-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
}
.win-backbutton:hover,
.win-navigation-backbutton:hover .win-back {
    background-color: rgba(0, 0, 0, 0.13);
    border-color: rgb(0, 0, 0);
}
.win-backbutton:hover:active,
.win-navigation-backbutton:hover:active .win-back {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}
.win-backbutton:-ms-keyboard-active,
.win-navigation-backbutton:-ms-keyboard-active .win-back {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}
.win-backbutton:disabled, .win-backbutton:disabled:active,
.win-navigation-backbutton:disabled .win-back,
.win-navigation-backbutton:disabled:active .win-back {
    background-clip: padding-box;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.4);
}

/*
Colors for command buttons and AppBarCommand "content" types.
*/
button.win-command, div.win-command {
    background-color: transparent;
    border-color:  transparent;
}
button.win-command:hover, div.win-command:hover {
    background-color: transparent;
    border-color:  transparent;
}
button.win-command:active, div.win-command:active {
    background-color: transparent;
    color: inherit;
}
button.win-command:hover:active, div.win-command:hover:active {
    background-color: transparent;
    color: inherit;
}
button.win-command:-ms-keyboard-active, div.win-command:-ms-keyboard-active {
    background-color: transparent;
    color: inherit;
}
button.win-command:disabled, div.win-command:disabled {
    border-color: transparent;
    background-color: transparent;
}
.win-ui-dark button.win-command:focus, .win-ui-dark div.win-command:focus {
    border-color: rgb(255, 255, 255);
}
button.win-command:focus, div.win-command:focus  {
    border-color: rgb(0, 0, 0);
}
.win-hidefocus:focus {
    outline: none;
}
/*
    win-hide-focus needs the qualifier for win-ui-light or dark,
    otherwise .win-ui-dark button.win-command:focus is more
    qualified and stomps on the transparent that doesn't have .win-ui-dark
*/
.win-ui-dark .win-command.win-hidefocus:focus,
.win-command.win-hidefocus:focus {
    border-color: transparent;
}
.win-ui-dark .win-commandimage {
    color: rgb(255, 255, 255);
}
.win-ui-dark button:hover:active .win-commandimage {
    color: rgb(0, 0, 0);
}
.win-ui-dark button:-ms-keyboard-active .win-commandimage {
    color: rgb(0, 0, 0);
}
.win-ui-dark button:disabled .win-commandimage,
.win-ui-dark button:disabled:active .win-commandimage {
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-dark button[aria-checked=true] .win-commandimage,
.win-ui-dark button[aria-checked=true]:active .win-commandimage {
    color: rgb(0, 0, 0);
}

.win-ui-dark button[aria-checked=true]:hover .win-commandimage {
    color: rgb(0, 0, 0);
}

.win-ui-dark button[aria-checked=true]:hover:active .win-commandimage {
    color: rgb(255, 255, 255);
}
.win-ui-dark button[aria-checked=true]:-ms-keyboard-active .win-commandimage {
    color: rgb(255, 255, 255);
}
.win-ui-dark button[aria-checked=true]:disabled .win-commandimage, 
.win-ui-dark button[aria-checked=true]:disabled:active .win-commandimage {
    color: rgb(0, 0, 0);
}
.win-commandimage {
    color: rgb(0, 0, 0);
}
button:hover:active .win-commandimage {
    color: rgb(255, 255, 255);
}
button:-ms-keyboard-active .win-commandimage {
    color: rgb(255, 255, 255);
}
button:disabled .win-commandimage,
button:disabled:active .win-commandimage {
    color: rgba(0, 0, 0, 0.4);
}
button[aria-checked=true] .win-commandimage,
button[aria-checked=true]:active .win-commandimage {
    color: rgb(255, 255, 255);
}
button[aria-checked=true]:hover .win-commandimage {
    color: rgb(255, 255, 255);
}
button[aria-checked=true]:hover:active .win-commandimage {
    color: rgb(0, 0, 0);
}
button[aria-checked=true]:-ms-keyboard-active .win-commandimage {
    color: rgb(0, 0, 0);
}
button[aria-checked=true]:disabled .win-commandimage, 
button[aria-checked=true]:disabled:active .win-commandimage {
    color: rgb(255, 255, 255);
}

/*
Command ring colors.
*/
.win-ui-dark .win-commandring, .win-ui-dark button:active .win-commandring {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button:hover .win-commandring {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button:hover:active .win-commandring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button:-ms-keyboard-active .win-commandring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button:disabled .win-commandring,
.win-ui-dark button:disabled:active .win-commandring {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
}
.win-ui-dark button[aria-checked=true] .win-commandring,
.win-ui-dark button[aria-checked=true]:active .win-commandring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button[aria-checked=true]:hover .win-commandring {
    background-color: rgb(222, 222, 222);
    border-color: rgb(222, 222, 222);
}
.win-ui-dark button[aria-checked=true]:hover:active .win-commandring {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button[aria-checked=true]:-ms-keyboard-active .win-commandring {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
}
.win-ui-dark button[aria-checked=true]:disabled .win-commandring, 
.win-ui-dark button[aria-checked=true]:disabled:active .win-commandring {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}
.win-commandring, button:active .win-commandring {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
}
button:hover .win-commandring {
    background-color: rgba(0, 0, 0, 0.13);
    border-color: rgb(0, 0, 0);
}
button:hover:active .win-commandring {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
button:-ms-keyboard-active .win-commandring {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
button:disabled .win-commandring, 
button:disabled:active .win-commandring {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.4);
}
button[aria-checked=true] .win-commandring,
button[aria-checked=true]:active .win-commandring {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
button[aria-checked=true]:hover .win-commandring {
    background-color: rgb(33, 33, 33);
    border-color: rgb(33, 33, 33);
}
button[aria-checked=true]:hover:active .win-commandring {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
}
button[aria-checked=true]:-ms-keyboard-active .win-commandring {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
}
button[aria-checked=true]:disabled .win-commandring,
button[aria-checked=true]:disabled:active .win-commandring {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 0, 0, 0.4);
}

/*
Command button labels colors.
*/
.win-ui-dark button.win-command:disabled .win-label,
.win-ui-dark button.win-command:disabled:active .win-label {
    color: rgba(255, 255, 255, 0.4);
}
button.win-command:disabled .win-label,
button.win-command:disabled:active .win-label {
    color: rgba(0, 0, 0, 0.4);
}

/* 
AppBarCommand (and MenuCommand) separator.
*/
hr.win-command {
    /* Same color in both light and dark. */
    background-color: rgb(123, 123, 123);
}

/*
AppBar control colors.
*/
.win-ui-dark.win-appbar, .win-ui-dark .win-appbar {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
.win-appbar {
    background-color: rgb(240, 240, 240);
    border-color: rgb(240, 240, 240);
}

/*
Flyout control colors, flyout normally has light theme.
*/
.win-flyout {
    border-color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.win-settingsflyout {
    border-color: rgba(0, 0, 0, 0.24);
}

.win-ui-dark.win-flyout, .win-ui-dark .win-flyout {
    border-color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
}

.win-ui-dark.win-settingsflyout, .win-ui-dark .win-settingsflyout {
    border-color: rgba(255, 255, 255, 0.24);
}

/*
Settings flyout is light in both themes unless the app explicitly overrides it.
*/
.win-settingsflyout {
    background-color: rgb(255, 255, 255);
}
.win-settingsflyout.win-ui-dark {
    background-color: rgb(0, 0, 0);
}

/*
Settings flyout will be white in dark theme so we need to have the header stay 
aligned with the theme unless the app explicitly overrides it.
*/

/*
Menu button colors, menu is always light theme.
*/
.win-menu button {
    background-color: transparent;
    color: rgb(0, 0, 0);
}
.win-menu button:focus,
.win-menu button:active {
    background-color: rgb(222, 222, 222);
}
.win-menu button:hover:active {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
}
.win-menu button:-ms-keyboard-active {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
}
.win-menu button:disabled,
.win-menu button:disabled:active {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.1);
}
.win-ui-dark.win-menu button, .win-ui-dark .win-menu button {
    background-color: transparent;
    color: rgb(255, 255, 255);
}
.win-ui-dark.win-menu button:focus, .win-ui-dark .win-menu button:focus,
.win-ui-dark.win-menu button:active, .win-ui-dark .win-menu button:active {
    background-color: rgb(222, 222, 222);
}
.win-ui-dark.win-menu button:hover:active, .win-ui-dark .win-menu button:hover:active {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}
.win-ui-dark.win-menu button:-ms-keyboard-active, .win-ui-dark .win-menu button:-ms-keyboard-active {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}
.win-ui-dark.win-menu button:disabled, .win-ui-dark .win-menu button:disabled,
.win-ui-dark.win-menu button:disabled:active, .win-ui-dark .win-menu button:disabled:active {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.1);
}

/*
Rating control colors.
*/
.win-ui-dark .win-rating .win-star.win-user.win-full,
.win-ui-dark .win-rating .win-star.win-user.win-full.win-disabled {
    color: rgb(91, 46, 197);
}
.win-ui-dark .win-rating .win-star.win-tentative.win-full {
    color: rgb(129, 82, 239);
}
.win-ui-dark .win-rating .win-star.win-average.win-full,
.win-ui-dark .win-rating .win-star.win-average.win-full.win-disabled {
    color: rgb(255, 255, 255);
}
.win-ui-dark .win-rating .win-star.win-empty {
    color: rgba(255, 255, 255, 0.35);
}
.win-rating .win-star.win-user.win-full,
.win-rating .win-star.win-user.win-full.win-disabled {
    color: rgb(70, 23, 180);
}
.win-rating .win-star.win-tentative.win-full {
    color: rgb(114, 65, 228);
}
.win-rating .win-star.win-average.win-full,
.win-rating .win-star.win-average.win-full.win-disabled {
    color: rgb(0, 0, 0);
}
.win-rating .win-star.win-empty {
    color: rgba(0, 0, 0, 0.35);
}

/* 
SemanticZoom button colors.
*/
.win-semanticzoom-button {
    background-color: rgba(216, 216, 216, 0.33);
    border-color: transparent;
}
button:hover.win-semanticzoom-button {
    background-color: rgba(216, 216, 216, 1.0);
}
.win-ui-dark button.win-semanticzoom-button:active {
    background-color: rgb(255, 255, 255);
}
button.win-semanticzoom-button:active {
    background-color: rgb(0, 0, 0);
}

/*
Toggleswitch control colors.
*/

.win-ui-dark .win-toggleswitch .win-title {
    color: rgb(255, 255, 255);
}
.win-ui-dark .win-toggleswitch .win-title.win-disabled {
    color: rgba(255, 255, 255, 0.4);
}
.win-toggleswitch .win-title {
    color: rgb(0, 0, 0);
}
.win-toggleswitch .win-title.win-disabled {
    color: rgba(0, 0, 0, 0.4);
}

.win-ui-dark .win-toggleswitch .win-label {
    color: rgb(255, 255, 255);
}
.win-ui-dark .win-toggleswitch .win-label.win-disabled {
    color: rgba(255, 255, 255, 0.4);
}
.win-toggleswitch .win-label {
    color: rgb(0, 0, 0);
}
.win-toggleswitch .win-label.win-disabled {
    color: rgba(0, 0, 0, 0.4);
}

.win-toggleswitch .win-switch::-ms-track {
    background-color: transparent;
}
.win-ui-dark .win-toggleswitch .win-switch::-ms-track {
    border-color: rgba(255, 255, 255, 0.35);
}
.win-ui-dark .win-toggleswitch .win-switch::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.26);
}
.win-ui-dark .win-toggleswitch .win-switch:hover::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.29);
}
.win-ui-dark .win-toggleswitch .win-switch:active::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.35);
}
.win-ui-dark .win-toggleswitch .win-switch:disabled::-ms-track {
    border-color: rgba(255, 255, 255, 0.2);
}
.win-ui-dark .win-toggleswitch .win-switch:disabled::-ms-fill-lower,
.win-ui-dark .win-toggleswitch .win-switch:disabled::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.12);
}
.win-toggleswitch .win-switch::-ms-track {
    border-color: rgba(0, 0, 0, 0.35);
}
.win-toggleswitch .win-switch::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.26);
}
.win-toggleswitch .win-switch:hover::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.29);
}
.win-toggleswitch .win-switch:active::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.35);
}
.win-toggleswitch .win-switch:disabled::-ms-track {
    border-color: rgba(0, 0, 0, 0.2);
}
.win-toggleswitch .win-switch:disabled::-ms-fill-lower,
.win-toggleswitch .win-switch:disabled::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.12);
}

/*
Tooltip control colors.
*/
.win-tooltip {
    background-color: rgb(255, 255, 255);
    border-color: rgb(128, 128, 128);
    color: rgba(0, 0, 0, 0.6);
}

/*
SearchBox control colors.
*/

.win-ui-dark .win-searchbox {
    border-color:rgba(255, 255, 255, 0.8);
    background-color:rgba(255, 255, 255, 0.8);
    color:rgba(0, 0, 0, 0.6);  
}

.win-ui-dark .win-searchbox-button {
    color:rgba(0, 0, 0, 0.6);
}

.win-ui-dark .win-searchbox[disabled=false]:hover {
    border-color:rgba(255, 255, 255, 0.87);
    background-color:rgba(255, 255, 255, 0.87);
}

.win-ui-dark .win-searchbox-input-focus {    
    border-color:rgb(42, 42, 42);
    background-color:rgb(255, 255, 255);
}

.win-ui-dark .win-searchbox-button[disabled=false]:hover {
    background-color: rgb(95, 55, 190);
}

.win-ui-dark .win-searchbox-button:active {
    background-color:rgb(0, 0, 0);  
    color:rgb(255,255,255);
}

.win-ui-dark .win-searchbox-input-focus:hover {    
    border-color:rgb(42, 42, 42);
    background-color:rgb(255, 255, 255);
}

.win-ui-dark .win-searchbox-button-input-focus {
    background-color: rgb(70, 23, 180);
    color: rgb(255, 255, 255);
}

.win-ui-dark .win-searchbox-button-input-focus:hover {
    background-color: rgb(95, 55, 190);
}

.win-ui-dark .win-searchbox-flyout {
    border-color:rgb(42, 42, 42);
    background-color:rgb(255, 255, 255);
}

.win-ui-dark .win-searchbox-suggestion-result:hover,
.win-ui-dark .win-searchbox-suggestion-query:hover {
    background-color:rgb(229, 229, 229);
}

.win-ui-dark .win-searchbox-suggestion-selected {
    background-color: rgb(70, 23, 180);
}

.win-ui-dark .win-searchbox-suggestion-query,
.win-ui-dark .win-searchbox-suggestion-result {
    color: rgb(0, 0, 0);
}

.win-ui-dark .win-searchbox-suggestion-separator {
    color:rgb(122, 122, 122);
}

.win-ui-dark .win-searchbox-suggestion-separator hr {
    border-color:rgb(122, 122, 122);
}

.win-ui-dark .win-searchbox-flyout-highlighttext {
    color: rgb(70, 23, 180);
}

.win-ui-dark .win-searchbox-disabled {    
    background-color:transparent;
    border-color:rgba(255, 255, 255, 0.4); 
}

.win-ui-dark .win-searchbox-disabled input[disabled] {
    background-color:transparent;
    color:rgba(255, 255, 255, 0.4); 
}

.win-ui-dark .win-searchbox-disabled div {
    background-color:transparent;
    color:rgba(255, 255, 255, 0.4); 
}

.win-ui-dark .win-searchbox-suggestion-selected:hover {
    background-color: rgb(95, 55, 190);
}

.win-ui-dark .win-searchbox-suggestion-selected .win-searchbox-flyout-highlighttext {
    color: rgb(163,139,218);
}

.win-searchbox {
    border-color:rgba(0, 0, 0, 0.27);
    background-color:rgba(255, 255, 255, 0.8);  
    color:rgba(0, 0, 0, 0.6);
}

.win-searchbox-button {
    color:rgba(0, 0, 0, 0.6);
}

.win-searchbox[disabled=false]:hover {
    background-color:rgba(255, 255, 255, 0.87);
}

.win-searchbox-input-focus {    
    border-color:rgb(42, 42, 42);
}

.win-searchbox-button[disabled=false]:hover {
    background-color: rgb(95, 55, 190);
}

.win-searchbox-button:active {
    background-color:rgb(0, 0, 0);  
    color:rgb(255,255,255);
}

.win-searchbox-button-input-focus {
    background-color: rgb(70, 23, 180);
    color: rgb(255, 255, 255);
}

.win-searchbox-button-input-focus:hover {
    background-color: rgb(95, 55, 190);
}

.win-searchbox-flyout-highlighttext {
    color: rgb(70, 23, 180);
}

.win-searchbox-flyout {
    border-color:rgb(42, 42, 42);
    background-color:rgb(255, 255, 255);
}

.win-searchbox-suggestion-result:hover,
.win-searchbox-suggestion-query:hover {
    background-color:rgb(229,229,229);
}

.win-searchbox-suggestion-selected {
    background-color: rgb(70, 23, 180);
}

.win-searchbox-suggestion-query,
.win-searchbox-suggestion-result {
    color: rgb(0,0,0);
}

.win-searchbox-suggestion-separator {
    color:rgb(122,122,122);
}

.win-searchbox-suggestion-separator hr {
    border-color:rgb(122,122,122);
}

.win-searchbox-disabled {    
    background-color:rgba(202, 202, 202, 0.4);
    border-color:rgba(0, 0, 0, 0.15); 
}

.win-searchbox-disabled input[disabled] {
    background-color:rgba(202, 202, 202, 0.4);
    color: rgba(0, 0, 0, 0.22);  
}

.win-searchbox-disabled div {
    background-color:rgba(202, 202, 202, 0.4);
    color: rgba(0, 0, 0, 0.22);
}

.win-searchbox-suggestion-selected:hover {
    background-color: rgb(95, 55, 190);
}

.win-searchbox-suggestion-selected .win-searchbox-flyout-highlighttext {
    color: rgb(163,139,218);
}

/*
High contrast colors.
*/
@media (-ms-high-contrast) 
{
    /*
    Typographic color definitions.
    */
    .win-type-interactive {
        color: WindowText;
    }
    .win-type-interactive:hover, .win-type-interactive:hover:active {
        color: -ms-hotlight;
    }
    .win-type-interactive:-ms-keyboard-active {
        color: -ms-hotlight;
    }

    /*
    Text selection high contrast color.
    */
    ::selection, select:focus::-ms-value {
        background-color: Highlight;
        color: HighlightText;
    }

    /*
    Button high contrast colors.
    */
    button.win-navigation-backbutton, button.win-navigation-backbutton:active,
    button.win-navigation-backbutton:hover, button.win-navigation-backbutton:active:hover
    {
        /* Overwrite default background and border styles from BackButton control's <button> element */
        background-color: transparent;
        border: none;
    }
    button, input[type=button], input[type=reset],
    input[type=file]::-ms-browse, input::-ms-clear,
    input::-ms-reveal, select::-ms-expand, .win-backbutton, .win-back, .win-semanticzoom-button {
        background-color: ButtonFace;
        border-color: ButtonText;
        color: ButtonText;
    }
    button[type=submit], input[type=submit] {
        background-color: Highlight;
        border-color: ButtonText;
        color: HighlightText;
    }
    button:hover, input[type=button]:hover, input[type=reset]:hover,
    input::-ms-clear:hover, input::-ms-reveal:hover,
    input[type=file]::-ms-browse:hover, .win-backbutton:hover,
    .win-navigation-backbutton:hover .win-back,
    .win-semanticzoom-button:hover {
        background-color: Highlight;
        border-color: ButtonText;
        color: HighlightText;
    }
    button:hover:active, button[type=submit]:hover:active, input[type=button]:hover:active,
    input[type=submit]:hover:active, input[type=reset]:hover:active,
    input::-ms-clear:hover:active, input::-ms-reveal:hover:active,
    input[type=file]::-ms-browse:hover:active, .win-backbutton:hover:active,
    .win-navigation-backbutton:hover:active .win-back,
    .win-semanticzoom-button:hover:active {
        background-clip: border-box;
        background-color: ButtonText;
        border-color: transparent;
        color: ButtonFace;
    }
    button:-ms-keyboard-active, button[type=submit]:-ms-keyboard-active, input[type=button]:-ms-keyboard-active,
    input[type=submit]:-ms-keyboard-active, input[type=reset]:-ms-keyboard-active,
    .win-backbutton:-ms-keyboard-active, win-navigation-backbutton:-ms-keyboard-active .win-back, 
    .win-semanticzoom-button:-ms-keyboard-active {
        background-clip: border-box;
        background-color: ButtonText;
        border-color: transparent;
        color: ButtonFace;
    }
    button:disabled, button[type=submit]:disabled, input[type=button]:disabled,
    input[type=submit]:disabled, input[type=reset]:disabled,
    input[type=file]:disabled::-ms-browse, input:disabled::-ms-clear, input:disabled::-ms-reveal,
    select:disabled::-ms-expand, .win-backbutton:disabled, .win-navigation-backbutton:disabled .win-back,
    button:disabled:active, button[type=submit]:disabled:active, input[type=button]:disabled:active,
    input[type=submit]:disabled:active, input[type=reset]:disabled:active,
    input[type=file]:disabled::-ms-browse:active, .win-backbutton:disabled:active,
    .win-navigation-backbutton:disabled:active .win-back {
        background-color: ButtonFace;
        border-color: GrayText;
        color: GrayText;
    }

    /*
    Text input, checkbox, radio, and select high contrast colors.
    */
    input[type=text], input[type=password],
    input[type=email], input[type=number],
    input[type=tel], input[type=url],
    input[type=search], textarea, .win-textarea, select,
    input::-ms-check {
        background-color: ButtonFace;
        border-color: ButtonText;
        color: ButtonText;
    }
    input:hover::-ms-check { /* only checkbox and radio have hover state */
        background-color: Highlight;
        color: HighlightText;
    }
    input:hover:active::-ms-check { /* only checkbox and radio have active state */
        background-clip: border-box;
        background-color: ButtonText;
        border-color: transparent;
        color: ButtonFace;
    }
    input:-ms-keyboard-active::-ms-check { /* only checkbox and radio have active state */
        background-clip: border-box;
        background-color: ButtonText;
        border-color: transparent;
        color: ButtonFace;
    }
    input[type=text]:disabled, input[type=password]:disabled,
    input[type=email]:disabled, input[type=number]:disabled,
    input[type=tel]:disabled, input[type=url]:disabled, 
    input[type=search]:disabled, input[type=file]::-ms-value,
    textarea:disabled, .win-textarea:disabled, select:disabled,
    input:disabled::-ms-check, input:disabled:active::-ms-check {
        border-color: GrayText;
        color: ButtonText;
        background-color: ButtonFace;
    }
    input:disabled::-ms-check, input:disabled:active::-ms-check,
    input[type]:-ms-input-placeholder, textarea:-ms-input-placeholder,
    select:disabled::-ms-value {
        color: GrayText;
    }

    /*
    Select option high contrast colors.
    */
    option:checked, select:focus::-ms-value {
        color: HighlightText;
        background-color: Highlight;
    }
    select:active:not(:disabled)::-ms-value, select:active:not(:disabled)::-ms-expand,
    option:hover:active, option:checked:hover:active {
        color: ButtonFace;
        background-color: ButtonText;
    }
    option:checked:disabled, option:checked:disabled:active,
    optgroup:disabled option:checked, optgroup:disabled option:checked:active,
    select:disabled option:checked, select:disabled option:checked:active,
    select:disabled:focus::-ms-value {
        color: ButtonFace;
        background-color: GrayText;
    }

    /*
    Link high contrast colors.
    */
    a {
        color: -ms-hotlight;
    }
    a[disabled] {
        color: GrayText;
    }

    /*
    Progress high contrast colors.
    */
    progress {
        border: 1px solid ButtonText;
        background-color: ButtonFace;
        color: Highlight;
    }
    progress:indeterminate {
        border: transparent;
    }
    progress::-ms-fill {
        border-right: 1px solid ButtonText;
        background-color: Highlight;
    }
    progress.win-paused:not(:indeterminate)::-ms-fill {
        background-color: GrayText;
    }
    progress.win-paused:not(:indeterminate) {
        opacity: 1.0;
    }

    /*
    Range control high contrast colors.
    */
    input[type=range]::-ms-track {
        border: 1px solid ButtonText;
        background-color: ButtonFace;
        color: transparent;
    }
    input[type=range]:disabled::-ms-track {
        border-color: GrayText;
    }
    input[type=range]::-ms-fill-lower {
        background-color: Highlight;
    }
    input[type=range]:disabled::-ms-fill-lower {
        background-color: transparent;
    }
    input[type=range]::-ms-ticks-before,
    input[type=range]::-ms-ticks-after {
        color: ButtonText;
    }
    input[type=range]:disabled::-ms-ticks-before,
    input[type=range]:disabled::-ms-ticks-after {
        color: GrayText;
    }
    input[type=range]::-ms-thumb {
        background-color: ButtonText;
        border-left: 1px solid HighlightText;
        border-right: 1px solid HighlightText;
    }
    input[type=range].win-vertical::-ms-thumb {
        border-left-style: none;
        border-right-style: none;
        border-top: 1px solid HighlightText;
        border-bottom: 1px solid HighlightText;
    }
    input[type=range]:hover::-ms-thumb {
        background-color: Highlight;
    }
    input[type=range]:active::-ms-thumb {
        background-color: HighlightText;
        border-color: ButtonText;
    }
    input[type=range]:disabled::-ms-thumb,
    input[type=range]:disabled:active::-ms-thumb {
        background-color: GrayText;
        border-color: GrayText;
    }

    /*
    AppBar high contrast colors.
    */
    .win-appbar {
        background-color: ButtonFace;
        border-color: Highlight;
    }

    /*
    AppBarCommand and Command button high contrast colors.
    */
    button.win-command,
    button.win-command:active,
    button.win-command:hover:active,
    div.win-command,
    div.win-command:active,
    div.win-command:hover:active {
        background-color: transparent; 
        border-color: transparent;
    }
    hr.win-command {
        background-color: ButtonText;
    } 
    .win-label {
        background-color: transparent;
        color: ButtonText;
    }
    button:disabled .win-label,
    button:disabled:active .win-label {
        color: GrayText;
    }
    button.win-command:focus,
    div.win-command:focus {
        border-color: ButtonText;
    }
    button.win-hidefocus:focus,
    div.win-hidefocus:focus {
        outline: none;
    }
    button.win-command.win-hidefocus:focus,
    div.win-command.win-hidefocus:focus {
        border-color: transparent;
    }

    /*
    Command Image high contrast colors with states
    */       
    .win-commandimage {
        background-color: transparent;
        color: ButtonText;
    } 
    button:active .win-commandimage,
    button:hover:active .win-commandimage {
        color: ButtonFace;
    }
    button:hover .win-commandimage {
        color: HighlightText;
    }
    button:disabled .win-commandimage,
    button:disabled:active .win-commandimage {
        color: GrayText;
    }
    button[aria-checked=true] .win-commandimage {
        color: ButtonFace;
    }
    button[aria-checked=true]:active .win-commandimage,
    button[aria-checked=true]:hover:active .win-commandimage {
        color: ButtonText;
    }    
    button[aria-checked=true]:hover .win-commandimage {
        color: HighlightText;
    }
    button[aria-checked=true]:disabled .win-commandimage, 
    button[aria-checked=true]:disabled:active .win-commandimage {
        color: ButtonFace;
    }

    /*
    Command Image high contrast colors with states
    */ 
    .win-commandring {
        background-color: transparent;
        border-color: ButtonText;
    }
    button:active .win-commandring,
    button:hover:active .win-commandring {
        background-color: ButtonText;
        border-color: ButtonText;
    }
    button:hover .win-commandring {
        background-color: Highlight;
        border-color: ButtonText;
    }
    button:disabled .win-commandring,
    button:disabled:active .win-commandring {
        background-color: transparent;
        border-color: GrayText;
    }
    button[aria-checked=true] .win-commandring {
        background-color: ButtonText;
        border-color: ButtonText;
    }
    button[aria-checked=true]:active .win-commandring,
    button[aria-checked=true]:hover:active .win-commandring {
        background-color: ButtonFace;
        border-color: ButtonText;
    }
    button[aria-checked=true]:hover .win-commandring {
        background-color: Highlight;
        border-color: ButtonText;
    }    
    button[aria-checked=true]:disabled .win-commandring, 
    button[aria-checked=true]:disabled:active .win-commandring {
        background-color: GrayText;
        border-color: GrayText;
    }

    /*
    Menu command high contrast colors
    */
    .win-menu hr.win-command {
        background-color: ButtonText;
    }
    .win-menu button.win-command {
        background-color: ButtonFace;
        color: ButtonText;
    }
    .win-menu button.win-command:focus {
        outline: none;
        background-color: Highlight;
        color: HighlightText;        
    }
    .win-menu button.win-command:active {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-menu button.win-command:hover:active {
        background-color: ButtonText;
        color: ButtonFace;
    }
    .win-menu button.win-command:-ms-keyboard-active {
        background-color: ButtonText;
        color: ButtonFace;
    }
    .win-menu button.win-command:disabled, 
    .win-menu button.win-command:disabled:active {
        background-color: ButtonFace;
        color: GrayText;   
    }

    /*
    Hub colors.
    */
    button.win-hub-section-header-tabstop,
    button.win-hub-section-header-tabstop:hover, 
    button.win-hub-section-header-tabstop:hover:active {
        background-color: transparent;
        color: WindowText;
    }
    button.win-hub-section-header-tabstop:-ms-keyboard-active {
        color: WindowText;
    }
    button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover, 
    button.win-hub-section-header-tabstop.win-hub-section-header-interactive:hover:active {
        color: -ms-hotlight;
    }
    button.win-hub-section-header-tabstop.win-hub-section-header-interactive:-ms-keyboard-active {
        color: -ms-hotlight;
    }

    /*
        NavBarContainer colors.
    */
    .win-navbarcontainer-pageindicator {
        background-color: ButtonFace;
    }
    .win-navbarcontainer-pageindicator:after {
        display: block;
        border: 1px solid ButtonText;
        content: "";
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
    .win-navbarcontainer-pageindicator-current {
        background-color: ButtonText;
    }
    .win-navbarcontainer-pageindicator:hover {
        background-color: Highlight;
    }
    .win-navbarcontainer-pageindicator-current:hover {
        background-color: ButtonText;
    }
    .win-navbarcontainer-pageindicator:hover:active {
        background-color: ButtonText;
    }
    .win-navbarcontainer-navarrow {
        background-color: ButtonFace;
        color: ButtonText;
    }
    .win-navbarcontainer-navarrow:after {
        position: absolute;
        top: 0;
        left:0;
        border: 2px solid ButtonText;
        content: "";
        width: calc(100% - 3px);
        height: calc(100% - 3px);
    }
    .win-navbarcontainer-navarrow:hover {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-navbarcontainer-navarrow:hover:active {
        background-color: ButtonText;
        color: ButtonFace;
    }

    /*
        NavBarCommand colors.
    */
    .win-navbarcommand-button,
    .win-navbarcommand-splitbutton {
        background-color: ButtonFace;
        color: ButtonText;
    }
    .win-navbarcommand-button:after,
    .win-navbarcommand-splitbutton:after {
        position: absolute;
        top: 0;
        left:0;
        border: 2px solid ButtonText;
        content: "";
        width: calc(100% - 3px);
        height: calc(100% - 3px);
        pointer-events: none;
    }
    .win-navbarcommand-button:hover,
    .win-navbarcommand-splitbutton:hover {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened,
    .win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened:hover,
    .win-navbarcommand-button.win-pressed,
    .win-navbarcommand-button.win-pressed:hover,
    .win-navbarcommand-splitbutton.win-pressed,
    .win-navbarcommand-splitbutton.win-pressed:hover {
        background-color: ButtonText;
        color: ButtonFace;
    }

    /*
    FlipView high contrast colors.
    */
    .win-flipview .win-navbottom {
        left: 50%;
        top: 100%;
        margin-left: -35px;
        margin-top: -35px;
    }
    .win-flipview .win-navbutton {
        background-color: ButtonFace;
        color: ButtonText;
        border: 2px solid ButtonText;
        width: 65px;
        height: 35px;
    }
    .win-flipview .win-navbutton:hover {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-flipview .win-navbutton:active {
        background-color: ButtonText;
        color: ButtonFace;
    }
    .win-flipview .win-navright {
        margin-left: -65px;
    }

    /*
    Flyout control high contrast colors.
    */
    .win-flyout, .win-settingsflyout {
        background-color: Window;
        border-color: WindowText;
        color: WindowText;
    }

    /*
    ListView/ItemContainer high contrast colors.
    */
    .win-listview.win-selectionstylefilled .win-itembox,
    .win-itemcontainer.win-selectionstylefilled .win-itembox {
        background-color: Window;
        color: WindowText;
    }
    .win-listview .win-container:hover,
    .win-itemcontainer.win-container:hover {
        outline: Highlight solid 3px;
    }
    
    .win-listview.win-selectionstylefilled .win-container:hover .win-itembox,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover .win-itembox {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-listview .win-focusedoutline,
    .win-listview .win-groupheader,
    .win-itemcontainer .win-focusedoutline {
        outline-color: WindowText;
    }
    .win-listview.win-selectionstylefilled .win-container.win-selected .win-itembox,
    .win-listview.win-selectionstylefilled .win-container.win-selected:hover .win-itembox,
    .win-itemcontainer.win-selectionstylefilled.win-container.win-selected .win-itembox,
    .win-itemcontainer.win-selectionstylefilled.win-container.win-selected:hover .win-itembox {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-listview .win-groupheader {
        color: WindowText;
    }
    .win-listview:not(.win-selectionstylefilled) .win-container.win-selected .win-selectionborder,
    .win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected .win-selectionborder {
        border-color: Highlight;
    }
    .win-listview.win-selectionstylefilled .win-container.win-selected .win-selectionborder,
    .win-itemcontainer.win-selectionstylefilled.win-container.win-selected .win-selectionborder {
        border-color: transparent;
    }
    .win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder,
    .win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected:hover .win-selectionborder {
        border-color: Highlight;
    }
    .win-listview.win-selectionstylefilled .win-selected .win-selectionbackground,
    .win-listview.win-selectionstylefilled .win-selected:hover .win-selectionbackground,
    .win-itemcontainer.win-selectionstylefilled.win-selected .win-selectionbackground,
    .win-itemcontainer.win-selectionstylefilled.win-selected:hover .win-selectionbackground {
        background-color: Highlight;
        color: HighlightText;
    }    
    .win-selectioncheckmark {
        color: HighlightText;
    }
    .win-listview.win-selectionstylefilled .win-selectioncheckmarkbackground,
    .win-itemcontainer.win-selectionstylefilled .win-selectioncheckmarkbackground {
        border-color: transparent;
    }
    .win-listview:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground,
    .win-itemcontainer:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
        border-top-color: Highlight;
        border-right-color: Highlight;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }
    .win-listview:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground:hover,
    .win-itemcontainer:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground:hover {
        border-top-color: Highlight;
        border-right-color: Highlight;
    }
    .win-listview.win-rtl:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground,
    .win-itemcontainer.win-rtl:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
        border-top-color: Highlight;
        border-left-color: Highlight;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    .win-listview .win-selectionhint,
    .win-itemcontainer .win-selectionhint {
        color: WindowText;
    }
    .win-listview.win-selectionstylefilled .win-selected a,
    .win-listview.win-selectionstylefilled .win-container:hover a,
    .win-listview.win-selectionstylefilled .win-selected progress,
    .win-listview.win-selectionstylefilled .win-container:hover progress,
    .win-listview.win-selectionstylefilled .win-selected .win-rating .win-star:after,
    .win-listview.win-selectionstylefilled .win-container:hover .win-rating .win-star:after,
    .win-itemcontainer.win-selectionstylefilled.win-selected a,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover a,
    .win-itemcontainer.win-selectionstylefilled.win-selected progress,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover progress,
    .win-itemcontainer.win-selectionstylefilled.win-selected .win-rating .win-star:after,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover .win-rating .win-star:after {
        color: HighlightText;
    }
    .win-listview.win-selectionstylefilled .win-selected input,
    .win-listview.win-selectionstylefilled .win-container:hover input,
    .win-listview.win-selectionstylefilled .win-selected input::-ms-check,
    .win-listview.win-selectionstylefilled .win-container:hover input::-ms-check,
    .win-listview.win-selectionstylefilled .win-selected input::-ms-value,
    .win-listview.win-selectionstylefilled .win-container:hover input::-ms-value,
    .win-listview.win-selectionstylefilled .win-selected input::-ms-track,
    .win-listview.win-selectionstylefilled .win-container:hover input::-ms-track,
    .win-listview.win-selectionstylefilled .win-selected button,
    .win-listview.win-selectionstylefilled .win-container:hover button,
    .win-listview.win-selectionstylefilled .win-selected progress,
    .win-listview.win-selectionstylefilled .win-container:hover progress,
    .win-listview.win-selectionstylefilled .win-selected progress::-ms-fill,
    .win-listview.win-selectionstylefilled .win-container:hover progress::-ms-fill,
    .win-listview.win-selectionstylefilled .win-selected select,
    .win-listview.win-selectionstylefilled .win-container:hover select,
    .win-listview.win-selectionstylefilled .win-selected textarea,
    .win-listview.win-selectionstylefilled .win-container:hover textarea,
    .win-listview.win-selectionstylefilled.win-selected input,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover input,
    .win-itemcontainer.win-selectionstylefilled.win-selected input::-ms-check,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover input::-ms-check,
    .win-itemcontainer.win-selectionstylefilled.win-selected input::-ms-value,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover input::-ms-value,
    .win-itemcontainer.win-selectionstylefilled.win-selected input::-ms-track,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover input::-ms-track,
    .win-itemcontainer.win-selectionstylefilled.win-selected button,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover button,
    .win-itemcontainer.win-selectionstylefilled.win-selected progress,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover progress,
    .win-itemcontainer.win-selectionstylefilled.win-selected progress::-ms-fill,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover progress::-ms-fill,
    .win-itemcontainer.win-selectionstylefilled.win-selected select,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover select,
    .win-itemcontainer.win-selectionstylefilled.win-selected textarea,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover textarea {
        border-color: HighlightText;
    }
    .win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-lower,
    .win-listview.win-selectionstylefilled .win-container:hover input[type=range]::-ms-fill-lower,
    .win-listview.win-selectionstylefilled .win-selected progress::-ms-fill,
    .win-listview.win-selectionstylefilled .win-container:hover progress::-ms-fill,
    .win-itemcontainer.win-selectionstylefilled.win-selected input[type=range]::-ms-fill-lower,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover input[type=range]::-ms-fill-lower,
    .win-itemcontainer.win-selectionstylefilled.win-selected progress::-ms-fill,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover progress::-ms-fill {
        background-color: HighlightText;
    }
    .win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-upper,
    .win-listview.win-selectionstylefilled .win-container:hover input[type=range]::-ms-fill-upper,
    .win-listview.win-selectionstylefilled .win-selected progress,
    .win-listview.win-selectionstylefilled .win-container:hover progress,
    .win-itemcontainer.win-selectionstylefilled.win-selected input[type=range]::-ms-fill-upper,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover input[type=range]::-ms-fill-upper,
    .win-itemcontainer.win-selectionstylefilled.win-selected progress,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover progress {
        background-color: Highlight;
    }
    .win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-full:before,
    .win-listview.win-selectionstylefilled .win-container:hover .win-rating .win-star.win-full:before,
    .win-itemcontainer.win-selectionstylefilled.win-selected .win-rating .win-star.win-full:before,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover .win-rating .win-star.win-full:before {
        color: ButtonFace;
    }
    .win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-empty:before,
    .win-listview.win-selectionstylefilled .win-container:hover .win-rating .win-star.win-empty:before,
    .win-itemcontainer.win-selectionstylefilled.win-selected .win-rating .win-star.win-empty:before,
    .win-itemcontainer.win-selectionstylefilled.win-container:hover .win-rating .win-star.win-empty:before {
        color: HighLight;
    }

    /*
    Rating control high contrast colors.
    */
    .win-rating .win-star:before {
        content: "\E082" !important;
    }
    .win-rating .win-star.win-full {
        color: HighLight;
    }
    .win-rating .win-star.win-tentative.win-full {
        color: ButtonText;
    }
    .win-rating .win-star.win-empty {
        color: ButtonFace;
    }
    .win-rating .win-star:after {
        content: "\E224" !important;
        position: relative;
        top: -100%;
        color: ButtonText;
    }

    /*
    Toggle control high contrast colors.
    */
    .win-toggleswitch .win-switch::-ms-thumb {
        height: 17px; /* 19px - 1px borders */
    }
    .win-toggleswitch .win-switch:disabled::-ms-fill-lower {
        background-color: GrayText;
    }

    /*
    Tooltip high contrast colors.
    */
    .win-tooltip {
        background-color: Window;
        border-color: WindowText;
        color: WindowText;
    }

    /*
    SearchBox high contrast colors.
    */

    .win-searchbox {
        border-color:ButtonText;
        background-color:ButtonFace;
        color:ButtonText;  
    }

    .win-searchbox-button {
        background-color:ButtonFace;
        color:ButtonText; 
    }

    .win-searchbox:-ms-input-placeholder {
        color:GrayText;
    }
   
    .win-searchbox-button[disabled=false]:hover {
        border-color:ButtonText; 
        background-color:HighLight;
        color:HighLightText;
    }

    .win-searchbox-button-input-focus {
        background-color:ButtonText;
        color:ButtonFace; 
    }

    .win-searchbox-button-input-focus:hover {
        border-color:ButtonText; 
        background-color:HighLight;
        color:HighLightText;
    }

    .win-searchbox-button:active {
        background-color:ButtonText;
        color:ButtonFace;
    }

    .win-searchbox-flyout {
        border-color:ButtonText;
        background-color:ButtonFace;
    }

    .win-searchbox-suggestion-result:hover,
    .win-searchbox-suggestion-query:hover {
        background-color:Highlight;
        color:HighlightText;
    }

    .win-searchbox-suggestion-result:hover .win-searchbox-flyout-highlighttext,
    .win-searchbox-suggestion-query:hover .win-searchbox-flyout-highlighttext {
        color: HighlightText;
    }

    .win-searchbox-suggestion-query,
    .win-searchbox-suggestion-result {
        color:ButtonText;
    }

    .win-searchbox-suggestion-selected {
        background-color:Highlight;
        color:HighlightText;
    }

    .win-searchbox-suggestion-separator {
        color:ButtonText;
    }

    .win-searchbox-suggestion-separator hr {
        border-color:ButtonText;
    }

    .win-searchbox-flyout-highlighttext {
        color: ButtonText;
    }

    .win-searchbox-disabled {    
        background-color:ButtonFace;
        border-color: GrayText;
    }

    .win-searchbox-disabled input[disabled] {
        background-color:ButtonFace;
        color: GrayText;
        border-color: GrayText;
    }

    .win-searchbox-disabled div {
        color: GrayText;
        background-color: ButtonFace;
    }

    .win-searchbox-suggestion-selected .win-searchbox-flyout-highlighttext {
        color: HighlightText;
    }

 }

@keyframes WinJS-opacity-in               { from { opacity: 0; } to { opacity: 1; } }
@keyframes WinJS-opacity-out              { from { opacity: 1; } to { opacity: 0; } }

@keyframes WinJS-scale-up                 { from { transform: scale(0.85); } to { transform: scale(1); } }
@keyframes WinJS-scale-down               { from { transform: scale(1); } to { transform: scale(0.85); } }

@keyframes WinJS-default-remove           { from { transform: translateX( 11px); } to { transform: none; } }
@keyframes WinJS-default-remove-rtl       { from { transform: translateX(-11px); } to { transform: none; } }

@keyframes WinJS-default-apply            { from { transform: none; } to { transform: translateX( 11px); } }
@keyframes WinJS-default-apply-rtl        { from { transform: none; } to { transform: translateX(-11px); } }

@keyframes WinJS-showEdgeUI               { from { transform: translateY(-70px); } to { transform: none; } }
@keyframes WinJS-showPanel                { from { transform: translateX( 364px); } to { transform: none; } }
@keyframes WinJS-showPanel-rtl            { from { transform: translateX(-364px); } to { transform: none; } }
@keyframes WinJS-hideEdgeUI               { from { transform: none; } to { transform: translateY(-70px); } }
@keyframes WinJS-hidePanel                { from { transform: none; } to { transform: translateX( 364px); } }
@keyframes WinJS-hidePanel-rtl            { from { transform: none; } to { transform: translateX(-364px); } }

@keyframes WinJS-showPopup                { from { transform: translateY(50px); } to { transform: none; } }

@keyframes WinJS-dragSourceEnd            { from { transform: translateX( 11px) scale(1.05); } to { transform: none; } }
@keyframes WinJS-dragSourceEnd-rtl        { from { transform: translateX(-11px) scale(1.05); } to { transform: none; } }

@keyframes WinJS-enterContent             { from { transform: translateX( 40px); } to { transform: none; } }
@keyframes WinJS-enterContent-rtl         { from { transform: translateX(-40px); } to { transform: none; } }

@keyframes WinJS-exit                     { from { transform: none; } to { transform: none; } }

@keyframes WinJS-enterPage                { from { transform: translateX( 100px); } to { transform: none; } }
@keyframes WinJS-enterPage-rtl            { from { transform: translateX(-100px); } to { transform: none; } }

@keyframes WinJS-updateBadge              { from { transform: translateY(24px); } to { transform: none; } }

body,
.win-type-xx-large,
.win-type-x-large,
.win-type-large,
.win-type-medium,
.win-type-small,
.win-type-x-small,
.win-type-xx-small,
input,
textarea,
.win-textarea,
button,
select,
option {
    font-family: 
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(am, ti),
.win-type-xx-large:-ms-lang(am, ti),
.win-type-x-large:-ms-lang(am, ti),
.win-type-large:-ms-lang(am, ti),
.win-type-medium:-ms-lang(am, ti),
.win-type-small:-ms-lang(am, ti),
.win-type-x-small:-ms-lang(am, ti),
.win-type-xx-small:-ms-lang(am, ti),
input:-ms-lang(am, ti),
textarea:-ms-lang(am, ti),
.win-textarea:-ms-lang(am, ti),
button:-ms-lang(am, ti),
select:-ms-lang(am, ti),
option:-ms-lang(am, ti) {
    font-family: 
        "Ebrima",
        "Segoe UI",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-type-xx-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-type-x-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-type-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-type-medium:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-type-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-type-x-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-type-xx-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
input:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
textarea:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
.win-textarea:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
button:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
select:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te),
option:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, sat-Olck, si, srb-Sora, ta, te) {
    font-family: 
        "Nirmala UI",
        "Segoe UI",
        "Ebrima",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(chr-CHER-US),
.win-type-xx-large:-ms-lang(chr-CHER-US),
.win-type-x-large:-ms-lang(chr-CHER-US),
.win-type-large:-ms-lang(chr-CHER-US),
.win-type-medium:-ms-lang(chr-CHER-US),
.win-type-small:-ms-lang(chr-CHER-US),
.win-type-x-small:-ms-lang(chr-CHER-US),
.win-type-xx-small:-ms-lang(chr-CHER-US),
input:-ms-lang(chr-CHER-US),
textarea:-ms-lang(chr-CHER-US),
.win-textarea:-ms-lang(chr-CHER-US),
button:-ms-lang(chr-CHER-US),
select:-ms-lang(chr-CHER-US),
option:-ms-lang(chr-CHER-US) {
    font-family: 
        "Gadugi",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(ja),
.win-type-xx-large:-ms-lang(ja),
.win-type-x-large:-ms-lang(ja),
.win-type-large:-ms-lang(ja),
.win-type-medium:-ms-lang(ja),
.win-type-small:-ms-lang(ja),
.win-type-x-small:-ms-lang(ja),
.win-type-xx-small:-ms-lang(ja),
input:-ms-lang(ja),
textarea:-ms-lang(ja),
.win-textarea:-ms-lang(ja),
button:-ms-lang(ja),
select:-ms-lang(ja),
option:-ms-lang(ja) {
    font-family: 
        "Meiryo UI",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(km, lo, th, bug-Bugi),
.win-type-xx-large:-ms-lang(km, lo, th, bug-Bugi),
.win-type-x-large:-ms-lang(km, lo, th, bug-Bugi),
.win-type-large:-ms-lang(km, lo, th, bug-Bugi),
.win-type-medium:-ms-lang(km, lo, th, bug-Bugi),
.win-type-small:-ms-lang(km, lo, th, bug-Bugi),
.win-type-x-small:-ms-lang(km, lo, th, bug-Bugi),
.win-type-xx-small:-ms-lang(km, lo, th, bug-Bugi),
input:-ms-lang(km, lo, th, bug-Bugi),
textarea:-ms-lang(km, lo, th, bug-Bugi),
.win-textarea:-ms-lang(km, lo, th, bug-Bugi),
button:-ms-lang(km, lo, th, bug-Bugi),
select:-ms-lang(km, lo, th, bug-Bugi),
option:-ms-lang(km, lo, th, bug-Bugi) {
    font-family: 
        "Leelawadee UI",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(ko),
.win-type-xx-large:-ms-lang(ko),
.win-type-x-large:-ms-lang(ko),
.win-type-large:-ms-lang(ko),
.win-type-medium:-ms-lang(ko),
.win-type-small:-ms-lang(ko),
.win-type-x-small:-ms-lang(ko),
.win-type-xx-small:-ms-lang(ko),
input:-ms-lang(ko),
textarea:-ms-lang(ko),
.win-textarea:-ms-lang(ko),
button:-ms-lang(ko),
select:-ms-lang(ko),
option:-ms-lang(ko) {
    font-family: 
        "Malgun Gothic",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(jv-Java),
.win-type-xx-large:-ms-lang(jv-Java),
.win-type-x-large:-ms-lang(jv-Java),
.win-type-large:-ms-lang(jv-Java),
.win-type-medium:-ms-lang(jv-Java),
.win-type-small:-ms-lang(jv-Java),
.win-type-x-small:-ms-lang(jv-Java),
.win-type-xx-small:-ms-lang(jv-Java),
input:-ms-lang(jv-Java),
textarea:-ms-lang(jv-Java),
.win-textarea:-ms-lang(jv-Java),
button:-ms-lang(jv-Java),
select:-ms-lang(jv-Java),
option:-ms-lang(jv-Java) {
    font-family: 
        "Javanese Text",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Cambria Math";
}

body:-ms-lang(cop-Copt),
.win-type-xx-large:-ms-lang(cop-Copt),
.win-type-x-large:-ms-lang(cop-Copt),
.win-type-large:-ms-lang(cop-Copt),
.win-type-medium:-ms-lang(cop-Copt),
.win-type-small:-ms-lang(cop-Copt),
.win-type-x-small:-ms-lang(cop-Copt),
.win-type-xx-small:-ms-lang(cop-Copt),
input:-ms-lang(cop-Copt),
textarea:-ms-lang(cop-Copt),
.win-textarea:-ms-lang(cop-Copt),
button:-ms-lang(cop-Copt),
select:-ms-lang(cop-Copt),
option:-ms-lang(cop-Copt) {
    font-family: 
        "Segoe UI Symbol",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-type-xx-large:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-type-x-large:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-type-large:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-type-medium:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-type-small:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-type-x-small:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-type-xx-small:-ms-lang(zh-CN, zh-Hans, zh-SG),
input:-ms-lang(zh-CN, zh-Hans, zh-SG),
textarea:-ms-lang(zh-CN, zh-Hans, zh-SG),
.win-textarea:-ms-lang(zh-CN, zh-Hans, zh-SG),
button:-ms-lang(zh-CN, zh-Hans, zh-SG),
select:-ms-lang(zh-CN, zh-Hans, zh-SG),
option:-ms-lang(zh-CN, zh-Hans, zh-SG) {
    font-family: 
        "Microsoft YaHei UI",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft JhengHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}

body:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-type-xx-large:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-type-x-large:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-type-large:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-type-medium:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-type-small:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-type-x-small:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-type-xx-small:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
input:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
textarea:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
.win-textarea:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
button:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
select:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
option:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO) {
    font-family: 
        "Microsoft JhengHei UI",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Leelawadee UI",
        "Microsoft YaHei UI",
        "Malgun Gothic",
        "Estrangelo Edessa",
        "Microsoft Himalaya",
        "Microsoft New Tai Lue",
        "Microsoft PhagsPa",
        "Microsoft Tai Le",
        "Microsoft Yi Baiti",
        "Mongolian Baiti",
        "MV Boli",
        "Myanmar Text",
        "Javanese Text",
        "Cambria Math";
}