/*!
  © Microsoft. All rights reserved.

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

  Build: 1.0.9200.20602.win8_ldr.130108-1504

  Version: Microsoft.WinJS.1.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");
}

/*
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;
}

@media (-ms-view-state: snapped) {
    h1, .win-type-xx-large {
        font-size: 20pt;
        font-weight: 200;
        line-height: 1.2; /* 32px when font-size is 20pt */
    }
    h2, .win-type-x-large {
        font-size: 11pt;
        font-weight: 600;
        line-height: 1.3636; /* 20px when font-size is 11pt */
    }
    h3, .win-type-large {
        font-size: 11pt;
        font-weight: 400;
        line-height: 1.3636; /* 20px when font-size is 11pt */
    }
    h1.win-type-ellipsis, .win-type-xx-large.win-type-ellipsis {
        line-height: 1.5; /* 40px when font-size is 20pt */
    }
    h2.win-type-ellipsis, .win-type-x-large.win-type-ellipsis {
        line-height: 1.3636; /* 20px when font-size is 11pt */
    }
}

/* 
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;
    opacity: 0;
    background-color: Purple;
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    -ms-touch-action: none;
}
.win-flyoutmenuclickeater {
    z-index: 1006;
    opacity: 0;
    background-color: Lime;
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    -ms-touch-action: none;
}

/*
Back button.
*/
.win-backbutton {
    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 {
    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 {
    content: "\E0AE";
}
.win-backbutton:disabled, .win-backbutton:disabled:active {
    visibility: hidden;
}

/*
Back button snapped view sizing.
*/
@media (-ms-view-state: snapped) {
    .win-backbutton {
        width: 30px;
        height: 30px;
        font-size: 10pt;
        line-height: 26px; /* line-height must match the content box height */
        vertical-align: -0.37em;
    }
}

/*
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 &#xE0D5;. */
    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.
*/
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;
}

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

/* 
AppBar control.
*/
.win-commandlayout {
    text-align: right;
    padding-left: 10px;
    padding-right: calc(((100% + 5px) mod 20px) + 5px);
    width: calc(100% - 10px - (((100% + 5px) mod 20px) + 5px));
        
    /* 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 when < 1024px. */
@media (max-width: 1023px) {      
    button.win-command .win-label {
        display: none;
    }
    button.win-command .win-commandicon {
        margin: 0 8px; /* 2px margin for focus */
    }
    .win-commandlayout {
        min-height: 68px;
    }
    hr.win-command {
        margin-bottom: 14px;
        margin-top: 14px;
    }
}

@media (min-width: 321px) and (max-width: 1023px) {    
    hr.win-command {
        margin-left: 10px;        
        margin-right: 9px;        
    }
    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;
    }  
}

/* Snapped AppBar reduced margins. */
@media (max-width: 320px) {
    .win-commandlayout {
        padding-right: 10px;
        width: calc(100% - 20px);
    }
    
    .win-commandlayout.win-bottom {
        /* Overflow buttons up instead of down */
        writing-mode: lr-bt;
    }
    
    .win-commandlayout.win-bottom:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        writing-mode: rl-bt;
    }    
}

/*
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 {
        padding-bottom: 10px;
    }
    .win-appbar.win-bottom button.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: 66px;
    }
}
/* Portrait and snapped slightly different */
@media (-ms-high-contrast) and (max-width: 1023px) {      
    .win-commandlayout {
        min-height: 66px;
    }    
    .win-appbar.win-top hr.win-command {
        margin-bottom: 12px;
    }
    .win-appbar.win-bottom hr.win-command {
        margin-top: 12px;
    } 
}

/*
Flyout control.
*/
.win-flyout {
    z-index: 1008;
    position: 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;
    -ms-touch-select: none;
    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;
}

/*
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) */
    -ms-touch-select: none;
}
.win-settingsflyout.win-wide {
    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; 
}

/*
Common AppBar/Flyout/SettingsFlyout styles
*/

.win-flyout input[type=text],
.win-settingsflyout input[type=text],
.win-appbar input[type=text] {
    -ms-touch-select: grippers;
}

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

.win-rating .win-star {
    -ms-flex: 1 1 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. */
    -ms-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;
    -ms-touch-action: auto;
}

/*
DatePicker control.
*/
.win-datepicker {
    display: -ms-inline-flexbox;
    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: -ms-inline-flexbox;
    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;
}

@media (-ms-view-state: snapped) {
    .win-tooltip {
        max-width: 310px;
        box-sizing: border-box;
    }
}

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

.win-semanticzoom {
    height: 400px;
    -ms-touch-action: pan-x pan-y double-tap-zoom;
}
.win-semanticzoom * {
    -ms-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;
    -ms-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.rtl {
    left: 4px;
}

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

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

/*
ListView control.
*/
.win-listview {
    overflow: hidden;
    height: 400px;
}
.win-listview .win-backdrop {
    position: absolute;
}
.win-listview .win-surface {
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
}
.win-listview > .win-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.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-horizontal .win-container {
    margin: 5px;
}
.win-listview > .win-vertical .win-container {
    margin: 5px 24px 5px 7px;
}
.win-listview.win-rtl > .win-vertical .win-container {
    margin: 5px 7px 5px 24px;
}
.win-listview .win-container {
    cursor: default;
    position: absolute;
    z-index: 0;
}
.win-listview .win-container.win-swipe {
    z-index: 1;
}
.win-listview.win-swipeable .win-horizontal .win-container  {
    -ms-touch-action:pan-x pinch-zoom double-tap-zoom;
}
.win-listview.win-swipeable .win-vertical .win-container  {
    -ms-touch-action:pan-y pinch-zoom double-tap-zoom;
}
.win-semanticzoom  .win-listview > .win-viewport * {
    -ms-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-item {
    /* Used to place above .win-selectionbackground in ListView */
    z-index: 1;
}
.win-listview .win-item {
    overflow: hidden;
    position: absolute;
}
.win-listview > .win-vertical .win-item
{
    /* Allow flex box to fill win-item in list layout */
    width: 100%; 
}
.win-listview .win-item:focus {
    outline-style: none;
}
.win-listview .win-focusedoutline {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    left: -2px;
    top: -2px;
    position: absolute;
    z-index: 5;
}
.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 {
    position: absolute;
    top: 0;
    padding: 10px 10px 10px 2px;
    cursor: default;
    overflow: hidden;
    margin-left: 70px;
    font-size: 20pt;
    font-weight: 200;
    line-height: 1.2; /* 32px when font-size is 20pt */
}
.win-listview.win-rtl .win-groupheader {
    margin-left: 0;
    margin-right: 70px;
    padding-left: 10px;
    padding-right: 2px;
}
.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: absolute;
    width: 0;
    height: 0;
    -ms-touch-action: none;
}
.win-selectionborder {
    position: absolute;
    opacity: inherit;
    z-index: 2;
}
.win-container.win-selected .win-selectionbordertop {
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-right-style: hidden !important;
    border-bottom-style: hidden !important;
    border-left-style: hidden !important;
}
.win-container.win-selected .win-selectionborderright {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    border-top-style: hidden !important;
    border-bottom-style: hidden !important;
    border-left-style: hidden !important;
}
.win-container.win-selected .win-selectionborderbottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-top-style: hidden !important;
    border-right-style: hidden !important;
    border-left-style: hidden !important;
}
.win-container.win-selected .win-selectionborderleft {
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    border-top-style: hidden !important;
    border-right-style: hidden !important;
    border-bottom-style: hidden !important;
}
.win-selectionbackground {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Used to place behind .win-item in the ListView */
    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 {
    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 {
    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 {
    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;
}

/*
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:-ms-flexbox;
    height: 100%;
    width: 100%;
    -ms-flex-align:center;
    -ms-flex-pack:center;
}

/*
Typographic color definitions.
*/

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

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

.win-type-interactive:-ms-keyboard-active {
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-light .win-type-interactive:hover {
    color: rgba(0, 0, 0, 0.8);
}
.win-ui-light .win-type-interactive:hover:active {
    color: rgba(0, 0, 0, 0.4);
}
.win-ui-light .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-dark {
    color: rgb(255, 255, 255);
    background-color: rgb(29, 29, 29);
}
.win-ui-light {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

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

/*
Text input, checkbox, radio, and select control 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-clip: border-box;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: transparent;
    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, 
.win-textarea:hover, select:hover, input:hover::-ms-check {
    background-clip: border-box;
    background-color: rgba(255, 255, 255, 0.87);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
input:hover:active::-ms-check { /* only checkbox and radio have press state */
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
input:-ms-keyboard-active::-ms-check { /* only checkbox and radio have press state */
    background-color: rgb(255, 255, 255);
}
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-clip: border-box;
    background-color: rgb(255, 255, 255);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
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 {
    background-clip: border-box;
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.4);
}
input:disabled::-ms-check, 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);
}
.win-ui-light input[type=text], .win-ui-light input[type=password],
.win-ui-light input[type=email], .win-ui-light input[type=number],
.win-ui-light input[type=tel], .win-ui-light input[type=url],
.win-ui-light input[type=search], .win-ui-light select, .win-ui-light textarea,
.win-ui-light .win-textarea, .win-ui-light 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);
}
.win-ui-light input[type=text]:hover, .win-ui-light input[type=password]:hover, 
.win-ui-light input[type=email]:hover, .win-ui-light input[type=number]:hover, 
.win-ui-light input[type=tel]:hover, .win-ui-light input[type=url]:hover,
.win-ui-light input[type=search]:hover, .win-ui-light textarea:hover,
.win-ui-light select:hover, .win-ui-light .win-textarea:hover, .win-ui-light 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);
}
.win-ui-light input[type=text]:focus, .win-ui-light input[type=text]:active,
.win-ui-light input[type=password]:focus, .win-ui-light input[type=password]:active,
.win-ui-light input[type=email]:focus, .win-ui-light input[type=email]:active,
.win-ui-light input[type=number]:focus, .win-ui-light input[type=number]:active,
.win-ui-light input[type=tel]:focus, .win-ui-light input[type=tel]:active,
.win-ui-light input[type=url]:focus, .win-ui-light input[type=url]:active,
.win-ui-light input[type=search]:focus, .win-ui-light input[type=search]:active,
.win-ui-light textarea:focus, .win-ui-light textarea:active,
.win-ui-light .win-textarea:focus, .win-ui-light .win-textarea:active,
.win-ui-light select:focus, .win-ui-light select:active {
    background-color: rgb(255, 255, 255);
    border-color: rgba(0, 0, 0, 0.6);
    color: rgb(0, 0, 0);
}
.win-ui-light 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);
}
.win-ui-light 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);
}
.win-ui-light input[type=text]:disabled, .win-ui-light input[type=password]:disabled,
.win-ui-light input[type=email]:disabled, .win-ui-light input[type=number]:disabled,
.win-ui-light input[type=tel]:disabled, .win-ui-light input[type=url]:disabled, 
.win-ui-light input[type=search]:disabled, .win-ui-light input[type=file]::-ms-value,
.win-ui-light textarea:disabled, .win-ui-light .win-textarea:disabled, .win-ui-light select:disabled,
.win-ui-light input:disabled::-ms-check, .win-ui-light 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.
*/
input[type]:-ms-input-placeholder, .win-ui-light input[type]:-ms-input-placeholder,
textarea:-ms-input-placeholder, .win-ui-light textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6); /* same in dark and light */
}
input[type]:disabled:-ms-input-placeholder, textarea:disabled:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.22);
}
.win-ui-light input[type]:disabled:-ms-input-placeholder, .win-ui-light 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);
}
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(255, 255, 255, 0.4);
    color: rgba(0, 0, 0, 0.6);
}
.win-ui-light option:checked:disabled, .win-ui-light option:checked:disabled:active,
.win-ui-light optgroup:disabled option:checked, .win-ui-light optgroup:disabled option:checked:active,
.win-ui-light select:disabled option:checked, .win-ui-light select:disabled option:checked:active,
.win-ui-light select:disabled:focus::-ms-value {
    background-color: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.6);
}

/*
Button control colors.
*/
button, input[type=button], input[type=submit],
input[type=reset], input[type=file]::-ms-browse {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
}
button[type=submit], input[type=submit] {
    background-clip: padding-box;
    background-color: rgb(70, 23, 180);
}
button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}
button[type=submit]:hover, input[type=submit]:hover {
    background-clip: padding-box;    
    background-color: rgb(95, 55, 190);
    border-color: rgb(255, 255, 255);
}
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(255, 255, 255);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
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(255, 255, 255);
    border-color: transparent;
    color: rgb(0, 0, 0);
}
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: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-light button, .win-ui-light input[type=button], .win-ui-light input[type=submit],
.win-ui-light input[type=reset], .win-ui-light 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);
}
.win-ui-light button[type=submit], .win-ui-light input[type=submit]{
    background-clip: border-box;
    background-color: rgb(70, 23, 180);
    border-color: transparent;
    color: rgb(255, 255, 255);
}
.win-ui-light button:hover, .win-ui-light input[type=button]:hover, .win-ui-light input[type=reset]:hover,
.win-ui-light input[type=file]::-ms-browse:hover {
    background-color: rgba(205, 205, 205, 0.82);
    border-color: rgba(164, 164, 164, 0.45);
}
.win-ui-light button[type=submit]:hover, .win-ui-light input[type=submit]:hover {
    background-clip: border-box;
    background-color: rgb(95, 55, 190);
    border-color: transparent;
}
.win-ui-light button:hover:active, .win-ui-light button[type=submit]:hover:active,
.win-ui-light input[type=button]:hover:active, .win-ui-light input[type=reset]:hover:active,
.win-ui-light input[type=submit]:hover:active, .win-ui-light 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);
}
.win-ui-light button:-ms-keyboard-active, .win-ui-light button[type=submit]:-ms-keyboard-active,
.win-ui-light input[type=button]:-ms-keyboard-active, .win-ui-light input[type=reset]:-ms-keyboard-active,
.win-ui-light input[type=submit]:-ms-keyboard-active {
    background-clip: border-box;
    background-color: rgb(0, 0, 0);
    border-color: transparent;
    color: rgb(255, 255, 255);
}
.win-ui-light button:disabled, .win-ui-light button[type=submit]:disabled,
.win-ui-light input[type=button]:disabled, .win-ui-light input[type=reset]:disabled,
.win-ui-light input[type=submit]:disabled, .win-ui-light input[type=file]:disabled::-ms-browse,
.win-ui-light button:disabled:active, .win-ui-light button[type=submit]:disabled:active,
.win-ui-light input[type=button]:disabled:active, .win-ui-light input[type=reset]:disabled:active,
.win-ui-light input[type=submit]:disabled:active, .win-ui-light 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);
}
.win-ui-light input[type=file]:disabled::-ms-browse, .win-ui-light 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.
*/
a {
    color: rgb(156, 114, 255);
}
a:hover:active {
    color: rgba(156, 114, 255, 0.6);
}
a:hover {
    color: rgba(156, 114, 255, 0.8);
}
a[disabled], a[disabled]:active { /* :disabled pseudo-class doesn't apply to a, even though disabled attribute stops navigation */
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-light a {
    color: rgb(79, 26, 203);
}
.win-ui-light a:hover:active {
    color: rgba(79, 26, 203, 0.6);
}
.win-ui-light a:hover {
    color: rgba(79, 26, 203, 0.8);
}
.win-ui-light a[disabled], .win-ui-light 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;
}

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

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

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

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

/*
Progress control colors.
*/
progress {
    background-color: rgba(255,255,255,0.35);
    color: rgb(91, 46, 197);
}
.win-ui-light progress {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgb(70, 23, 180);
}
progress:indeterminate {
    color: rgb(138, 87, 255);
}
.win-ui-light 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".
*/
progress:indeterminate, .win-ui-light progress:indeterminate {
    background-color: transparent;
}

/*
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-listview .win-container:not(.win-footprint) {
    background-color: rgb(29, 29, 29);
}
.win-ui-light .win-listview .win-container:not(.win-footprint) {
    background-color: rgb(255, 255, 255);
}
.win-listview .win-container:hover {
    outline: rgba(255, 255, 255, 0.3) solid 3px;
}
.win-listview.win-selectionstylefilled .win-container:hover {
    background-color: rgba(255, 255, 255, 0.3);
}
.win-listview .win-focusedoutline {
    outline: rgb(255, 255, 255) solid 2px;
}
.win-ui-light .win-listview .win-container:hover {
    outline: rgba(0, 0, 0, 0.3) solid 3px;
}
.win-ui-light .win-listview.win-selectionstylefilled .win-container:hover {
    background-color: rgba(0, 0, 0, 0.3);
}
.win-ui-light .win-listview .win-focusedoutline {
    outline: rgb(0, 0, 0) solid 2px;
}
.win-listview.win-selectionstylefilled .win-container.win-selected:hover {
    background-color: rgb(95, 55, 190);
}
.win-listview .win-container.win-swipe:hover {
    background-color: rgb(29, 29, 29);
    outline: none;
}
.win-ui-light .win-listview .win-container.win-swipe:hover {
    background-color: rgb(255, 255, 255);
    outline: none;
}
.win-listview.win-selectionstylefilled .win-selected {
    color: rgb(255, 255, 255);
}
.win-listview: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 {
    border-color: transparent;
}
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder {
    border-color: rgb(95, 55, 190);
}
.win-listview.win-selectionstylefilled .win-selected .win-selectionbackground {
    background-color: rgb(70, 23, 180);
}
.win-listview.win-selectionstylefilled .win-selected:hover .win-selectionbackground {
    background-color: rgb(95, 55, 190);
}
.win-selectioncheckmark {
    color: rgb(255, 255, 255);
}
.win-selectionhint {
    color: rgb(255, 255, 255);
}
.win-ui-light .win-selectionhint {
    color: rgb(70, 23, 180);
}
.win-listview: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 {
    border-color: transparent;
}
.win-listview: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 {
    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 {
    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 {
    color: rgb(255, 255, 255);
}
.win-listview.win-selectionstylefilled .win-selected a:hover:active {
    color: rgba(255, 255, 255, 0.6);
}
.win-listview.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 {
    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] {
    border-color: rgb(255, 255, 255);
}
.win-listview.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 {
    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 {
    background-color: rgba(255, 255, 255, 0.16);
}
.win-listview.win-selectionstylefilled .win-selected progress:indeterminate {
    background-color: transparent;
}
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-empty {
    color: rgba(255, 255, 255, 0.16);
}

/*
Back button control colors.
*/
.win-backbutton {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
}
.win-backbutton:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}
.win-backbutton:hover:active {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.win-backbutton:-ms-keyboard-active {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.win-backbutton:disabled, .win-backbutton:disabled:active {
    background-clip: padding-box;
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-light .win-backbutton {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
}
.win-ui-light .win-backbutton:hover {
    background-color: rgba(0, 0, 0, 0.13);
    border-color: rgb(0, 0, 0);
}
.win-ui-light .win-backbutton:hover:active {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}
.win-ui-light .win-backbutton:-ms-keyboard-active {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}
.win-ui-light .win-backbutton:disabled, .win-ui-light .win-backbutton:disabled:active {
    background-clip: padding-box;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.4);
}

/*
Command button colors.
*/
button.win-command {
    background-color: transparent;
    border-color:  transparent;
}
button.win-command:hover {
    background-color: transparent;
    border-color:  transparent;
}
button.win-command:active {
    background-color: transparent;
    color: inherit;
}
button.win-command:hover:active {
    background-color: transparent;
    color: inherit;
}
button.win-command:-ms-keyboard-active {
    background-color: transparent;
    color: inherit;
}
button.win-command:disabled {
    border-color: transparent;
    background-color: transparent;
}
button.win-command:focus {
    border-color: rgb(255, 255, 255);
}
.win-ui-light button.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-command.win-hidefocus:focus,
.win-ui-light .win-command.win-hidefocus:focus {
    border-color: transparent;
}
.win-commandimage {
    color: rgb(255, 255, 255);
}
button:hover:active .win-commandimage {
    color: rgb(0, 0, 0);
}
button:-ms-keyboard-active .win-commandimage {
    color: rgb(0, 0, 0);
}
button:disabled .win-commandimage,
button:disabled:active .win-commandimage {
    color: rgba(255, 255, 255, 0.4);
}
button[aria-checked=true] .win-commandimage,
button[aria-checked=true]:active .win-commandimage {
    color: rgb(0, 0, 0);
}

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

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

/*
Command ring colors.
*/
.win-commandring, button:active .win-commandring {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
}
button:hover .win-commandring {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}
button:hover:active .win-commandring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}
button:-ms-keyboard-active .win-commandring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}
button:disabled .win-commandring,
button:disabled:active .win-commandring {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
}
button[aria-checked=true] .win-commandring,
button[aria-checked=true]:active .win-commandring {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}
button[aria-checked=true]:hover .win-commandring {
    background-color: rgb(222, 222, 222);
    border-color: rgb(222, 222, 222);
}
button[aria-checked=true]:hover:active .win-commandring {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
}
button[aria-checked=true]:-ms-keyboard-active .win-commandring {
    background-color: transparent;
    border-color: rgb(255, 255, 255);
}
button[aria-checked=true]:disabled .win-commandring, 
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-ui-light .win-commandring, .win-ui-light button:active .win-commandring {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
}
.win-ui-light button:hover .win-commandring {
    background-color: rgba(0, 0, 0, 0.13);
    border-color: rgb(0, 0, 0);
}
.win-ui-light button:hover:active .win-commandring {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
.win-ui-light button:-ms-keyboard-active .win-commandring {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
.win-ui-light button:disabled .win-commandring, 
.win-ui-light button:disabled:active .win-commandring {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.4);
}
.win-ui-light button[aria-checked=true] .win-commandring,
.win-ui-light button[aria-checked=true]:active .win-commandring {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
.win-ui-light button[aria-checked=true]:hover .win-commandring {
    background-color: rgb(33, 33, 33);
    border-color: rgb(33, 33, 33);
}
.win-ui-light button[aria-checked=true]:hover:active .win-commandring {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
}
.win-ui-light button[aria-checked=true]:-ms-keyboard-active .win-commandring {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
}
.win-ui-light button[aria-checked=true]:disabled .win-commandring,
.win-ui-light 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.
*/
button.win-command:disabled .win-label,
button.win-command:disabled:active .win-label {
    color: rgba(255, 255, 255, 0.4);
}
.win-ui-light button.win-command:disabled .win-label,
.win-ui-light 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-appbar {
    background-color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
}
.win-ui-light.win-appbar, .win-ui-light .win-appbar {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}

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

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

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

.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.
*/

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

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

/*
Rating control colors.
*/
.win-rating .win-star.win-user.win-full,
.win-rating .win-star.win-user.win-full.win-disabled {
    color: rgb(91, 46, 197);
}
.win-rating .win-star.win-tentative.win-full {
    color: rgb(129, 82, 239);
}
.win-rating .win-star.win-average.win-full,
.win-rating .win-star.win-average.win-full.win-disabled {
    color: rgb(255, 255, 255);
}
.win-rating .win-star.win-empty {
    color: rgba(255, 255, 255, 0.35);
}
.win-ui-light .win-rating .win-star.win-user.win-full,
.win-ui-light .win-rating .win-star.win-user.win-full.win-disabled {
    color: rgb(70, 23, 180);
}
.win-ui-light .win-rating .win-star.win-tentative.win-full {
    color: rgb(114, 65, 228);
}
.win-ui-light .win-rating .win-star.win-average.win-full,
.win-ui-light .win-rating .win-star.win-average.win-full.win-disabled {
    color: rgb(0, 0, 0);
}
.win-ui-light .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);
}
button.win-semanticzoom-button:active {
    background-color: rgb(255, 255, 255);
}
.win-ui-light button.win-semanticzoom-button:active {
    background-color: rgb(0, 0, 0);
}

/*
Toggleswitch control colors.
*/

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

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

.win-toggleswitch .win-switch::-ms-track {
    background-color: transparent;
}
.win-toggleswitch .win-switch::-ms-track {
    border-color: rgba(255, 255, 255, 0.35);
}
.win-toggleswitch .win-switch::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.26);
}
.win-toggleswitch .win-switch:hover::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.29);
}
.win-toggleswitch .win-switch:active::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.35);
}
.win-toggleswitch .win-switch:disabled::-ms-track {
    border-color: rgba(255, 255, 255, 0.2);
}
.win-toggleswitch .win-switch:disabled::-ms-fill-lower,
.win-toggleswitch .win-switch:disabled::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.12);
}
.win-ui-light .win-toggleswitch .win-switch::-ms-track {
    border-color: rgba(0, 0, 0, 0.35);
}
.win-ui-light .win-toggleswitch .win-switch::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.26);
}
.win-ui-light .win-toggleswitch .win-switch:hover::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.29);
}
.win-ui-light .win-toggleswitch .win-switch:active::-ms-fill-upper {
    background-color: rgba(0, 0, 0, 0.35);
}
.win-ui-light .win-toggleswitch .win-switch:disabled::-ms-track {
    border-color: rgba(0, 0, 0, 0.2);
}
.win-ui-light .win-toggleswitch .win-switch:disabled::-ms-fill-lower,
.win-ui-light .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);
}

/*
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, input[type=button], input[type=reset],
    input[type=file]::-ms-browse, input::-ms-clear,
    input::-ms-reveal, select::-ms-expand, .win-backbutton, .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-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-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-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,
    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 {
        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;
    }

    /*
    Command button label high contrast colors.
    */
    button.win-command,
    button.win-command:active,
    button.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 {
        border-color: ButtonText;
    }
    button.win-hidefocus:focus {
        outline: none;
    }
    button.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;   
    }

    /*
    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 high contrast colors.
    */
    .win-listview.win-selectionstylefilled .win-container {
        background-color: Window;
        color: WindowText;
    }
    .win-listview .win-container:hover {
        outline: Highlight solid 3px;
    }
    .win-listview.win-selectionstylefilled .win-container:hover {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-listview .win-focusedoutline {
        outline-color: WindowText;
    }
    .win-listview.win-selectionstylefilled .win-container.win-selected,
    .win-listview.win-selectionstylefilled .win-container.win-selected:hover {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-listview .win-groupheader {
        color: WindowText;
    }
    .win-listview:not(.win-selectionstylefilled) .win-container.win-selected .win-selectionborder {
        border-color: Highlight;
    }
    .win-listview.win-selectionstylefilled .win-container.win-selected .win-selectionborder {
        border-color: transparent;
    }
    .win-listview: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
    {
        background-color: Highlight;
        color: HighlightText;
    }    
    .win-selectioncheckmark {
        color: HighlightText;
    }
    .win-listview.win-selectionstylefilled .win-selectioncheckmarkbackground {
        border-color: transparent;
    }
    .win-listview: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 {
        border-top-color: Highlight;
        border-right-color: Highlight;
    }
    .win-listview.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 {
        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{
        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 {
        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 {
        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 {
        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 {
        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 {
        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;
    }
 }

@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-enterContent-snapped     { from { transform: translateX( 20px); } to { transform: none; } }
@keyframes WinJS-enterContent-snapped-rtl { from { transform: translateX(-20px); } 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-enterPage-snapped        { from { transform: translateX( 40px); } to { transform: none; } }
@keyframes WinJS-enterPage-snapped-rtl    { from { transform: translateX(-40px); } 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 Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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(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 Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-type-xx-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-type-x-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-type-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-type-medium:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-type-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-type-x-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-type-xx-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
input:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
textarea:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
.win-textarea:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
button:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
select:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
option:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te) {
    font-family: 
        "Nirmala UI",
        "Segoe UI",
        "Ebrima",
        "Gadugi",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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:lang(chr-CHER-US),
.win-type-xx-large:lang(chr-CHER-US),
.win-type-x-large:lang(chr-CHER-US),
.win-type-large:lang(chr-CHER-US),
.win-type-medium:lang(chr-CHER-US),
.win-type-small:lang(chr-CHER-US),
.win-type-x-small:lang(chr-CHER-US),
.win-type-xx-small:lang(chr-CHER-US),
input:lang(chr-CHER-US),
textarea:lang(chr-CHER-US),
.win-textarea:lang(chr-CHER-US),
button:lang(chr-CHER-US),
select:lang(chr-CHER-US),
option:lang(chr-CHER-US) {
    font-family: 
        "Gadugi",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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:lang(ja),
.win-type-xx-large:lang(ja),
.win-type-x-large:lang(ja),
.win-type-large:lang(ja),
.win-type-medium:lang(ja),
.win-type-small:lang(ja),
.win-type-x-small:lang(ja),
.win-type-xx-small:lang(ja),
input:lang(ja),
textarea:lang(ja),
.win-textarea:lang(ja),
button:lang(ja),
select:lang(ja),
option:lang(ja) {
    font-family: 
        "Meiryo UI",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Symbol",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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:lang(km),
.win-type-xx-large:lang(km),
.win-type-x-large:lang(km),
.win-type-large:lang(km),
.win-type-medium:lang(km),
.win-type-small:lang(km),
.win-type-x-small:lang(km),
.win-type-xx-small:lang(km),
input:lang(km),
textarea:lang(km),
.win-textarea:lang(km),
button:lang(km),
select:lang(km),
option:lang(km) {
    font-family: 
        "Khmer UI",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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:lang(ko),
.win-type-xx-large:lang(ko),
.win-type-x-large:lang(ko),
.win-type-large:lang(ko),
.win-type-medium:lang(ko),
.win-type-small:lang(ko),
.win-type-x-small:lang(ko),
.win-type-xx-small:lang(ko),
input:lang(ko),
textarea:lang(ko),
.win-textarea:lang(ko),
button:lang(ko),
select:lang(ko),
option:lang(ko) {
    font-family: 
        "Malgun Gothic",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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",
        "Cambria Math";
}

body:lang(lo),
.win-type-xx-large:lang(lo),
.win-type-x-large:lang(lo),
.win-type-large:lang(lo),
.win-type-medium:lang(lo),
.win-type-small:lang(lo),
.win-type-x-small:lang(lo),
.win-type-xx-small:lang(lo),
input:lang(lo),
textarea:lang(lo),
.win-textarea:lang(lo),
button:lang(lo),
select:lang(lo),
option:lang(lo) {
    font-family: 
        "Lao UI",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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:lang(th),
.win-type-xx-large:lang(th),
.win-type-x-large:lang(th),
.win-type-large:lang(th),
.win-type-medium:lang(th),
.win-type-small:lang(th),
.win-type-x-small:lang(th),
.win-type-xx-small:lang(th),
input:lang(th),
textarea:lang(th),
.win-textarea:lang(th),
button:lang(th),
select:lang(th),
option:lang(th) {
    font-family: 
        "Leelawadee",
        "Segoe UI",
        "Ebrima",
        "Nirmala UI",
        "Gadugi",
        "Segoe UI Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "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(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 Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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(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 Symbol",
        "Meiryo UI",
        "Khmer UI",
        "Tunga",
        "Lao UI",
        "Raavi",
        "Iskoola Pota",
        "Latha",
        "Leelawadee",
        "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",
        "Cambria Math";
}

