.win-appbar {
    background-color: #DD0056;
}

/* Show white colors in all areas of the appbar buttons. */
.win-appbar .win-label,
.win-appbar .win-commandicon,
.win-appbar .win-commandimage, 
.win-appbar .win-commandring,
.win-appbar button:hover .win-commandring, /* The hover feedback color for the button circle. */
.win-appbar button:active .win-commandring, /* The pressed feedback color for the button circle. */
.win-appbar button.win-command:focus /* Keyboard focus rect for buttons on the appbar. */
{
    color: #ffffff;
    border-color: #ffffff;
}

.win-appbar button:hover .win-commandring {
    background-color: rgba(255, 255, 255, 0.13);
}

.win-appbar button:active .win-commandring {
    background-color: #ffffff;
}

.win-appbar button:active .win-commandimage {
    color: #DD0056;
}

button[aria-checked=true] .win-commandring, button[aria-checked=true]:active .win-commandring,
button[aria-checked=true]:hover .win-commandring {
    background-color: #ffffff;
    border-color: #ffffff;
}

button[aria-checked=true] .win-commandimage, button[aria-checked=true]:active .win-commandimage,
button[aria-checked=true]:hover .win-commandimage {
    color: #DD0056;
}

/* Do not allow keyboard focus to appear on the appbar buttons unless the user is interacting with the keyboard. */
.win-appbar button.win-hidefocus:focus {
    border-color: transparent;
}

/* Set the color of the appbar separator as white. */
.win-appbar hr.win-command {
    background-color: #ffffff;
}

/* Font containing the glyph for the Categorize button in the app bar */
@font-face {
    font-family: "Reading Symbol";
    src: url("/fonts/ReadingListSymbol.woff");
}

#cmdCategorize .win-commandimage {
    font-family: "Reading Symbol";
}

#cmdCategorizeAnchor {
    float: left;
    min-height: 1px; 
    min-width: 1px; 
    max-height: 1px; 
    max-width: 1px;
    visibility: hidden; 
}

#cmdCategorizeAnchor:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    float: right;
}

#cmdRenameCategory:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm), #cmdDeleteCategory:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    float: left;
}

#navBar {
    background-color: #DD0056;
}
    
#navBar .win-navbarcommand {
    font-weight: 600;
}

#navBar .win-navbarcommand-button {
    background-color: rgba(0, 0, 0, 0.09); 
}

#navBar .win-navbarcommand-button:focus {
    outline-color: #ffffff;
}

#navBar .win-navbarcommand-button-content {
    color: #ffffff;
    padding-left: 20px;
}

#navBar .win-navbarcommand-button.win-pressed .win-navbarcommand-button-content {
    color: #AC004F;
}

#navBar .win-navbarcommand-button-content:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    padding-left: 5px; /* default padding reapplied */
    padding-right: 20px;
}

#navBar .win-navbarcommand-button:hover {
    background-color: rgba(0, 0, 0, 0.22); 
}
        
#navBar .win-navbarcommand-button.win-pressed {
    background-color: rgba(255, 255, 255, 1.0);
}

/* Increase the top and bottom margins of the navbar from 5px to 9px. This increases the height 
   of the navbar to 98px. With this height we prevent the descenders in the appname text from 
   protruding below the navbar. */
#navBar .win-navbarcontainer-horizontal .win-navbarcommand {
    margin-top: 9px;
    margin-bottom: 9px;
}

#navBarCategories .win-navbarcontainer-horizontal .win-navbarcommand {
    margin-top: 0px;
    margin-bottom: 0px;
}

#navBarCategories .win-navbarcommand-button-content {
    height: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#navBarCategories .win-navbarcommand-button-content .win-navbarcommand-label {
    white-space: pre;
    direction: ltr;
}

    #navBarCategories .win-navbarcommand-button-content .win-navbarcommand-label:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)  {
        direction: rtl;
    }

#navBarCategories .win-navbarcommand-button {
    /*category buttons*/
    background-color: transparent;
}

/*limits the navbar to 4 rows of items in the vertical layout*/
#navBarCategories .win-navbarcontainer-vertical .win-navbarcontainer-viewport {
    max-height: 200px;
}

#navBarCategories .win-navbarcontainer-pageindicator {
    /*regular page indicators for categories*/
    background-color: rgba(255, 255, 255, 0.4);
}

#navBarCategories .win-navbarcontainer-pageindicator-current {
    /*current page indicator for categories*/
    background-color: rgba(255, 255, 255, 1.0);
}

#navBarCategories .win-navbarcontainer-navarrow {
    background-color: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.80);
}

    #navBarCategories .win-navbarcontainer-navarrow:hover {
        background-color: rgba(0, 0, 0, 0.22);
        color: rgba(255, 255, 255, 1.0);
    }

    #navBarCategories .win-navbarcontainer-navarrow:active {
        background-color: rgba(255, 255, 255, 1.0);
        color: #DD0056;
    }

/* Do not use only a ".emptyCategory" here as that would be overridden by other css. */
.manageCategoriesViewItem .emptyCategory,
#navBarCategories .emptyCategory {
    opacity: 0.84;
    font-weight:300;
}

#categoryDivider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    margin-left: 30px;
    margin-right: 30px;
}

#emptyListContainer {
    /* The empty list message is initially not shown. It is shown if no items 
       have been added to the list within a short time after startup. */
    display: none;

    height: auto;
    -ms-grid-row: 3;
    -ms-grid-column: 1;

    margin-left: 105px;
    /* negative margin to adjust the text to match redlines, the top banner
       takes up too much space so this margin is necessary to reclaim some space */
    margin-top: -4px;
}

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

/* The emptyListLabel is used for text shown when the Deleted Items view is empty, or a Search returns no results. */
.emptyListLabel {
    margin: 22px 15px 10px 15px;
}

 #emptyCategoryListItem {
        margin-left: 15px;
    }

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

.emptyListCategoryLabel {
    margin: 17px 15px 10px 0px;
}

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

.emptyListInfoLabel {
    -ms-grid-column: 2;
    -ms-grid-row: 1;

    width: auto;
    color: #000000;
    opacity: 0.84;
}

#emptyListDeleteCategoryLink {
    color: #cd0059;
}

#emptyListDeleteCategoryLink:hover {
    opacity: 0.8;
}

#emptyListDeleteCategoryLink:active {
    opacity: 0.6;
}

#emptyListInformationButton {
    margin-top: 20px;
    max-width: 220px;
    background-color: transparent;
    border: none;
    padding: 0px;
}

    #emptyListInformationButton:hover {
        outline: 3px solid #ABABAB;
    }

#emptyListInformationButton .win-itembox {
    background-color: transparent;
}

#emptyListInformationButton .win-itembox .win-item {
    width: 220px;
    display: -ms-grid;
}

#emptyListInfoIcon {
    background-color: #CD0059;
    color: #FFFFFF;
}

/* By default, all group headers get a background color associated with the oldest group. 
   We will override that for all groups that are newer than the those that should show
   the oldest color. */
.win-groupheadercontainer {
    background-color: #510006;
}

/* NOTE: If the element hierarchy changes beneath the win-surface, then the index
   values used to identify the win-groupheadercontainer below must be updated. */


/* The Hero group header has a transparent background. */
.win-groupheadercontainer:nth-child(2) {
    background-color: transparent;
}

/* Assign explicit colors to the five newest groups that follow the Hero group. */
.win-groupheadercontainer:nth-child(4) {
    background-color: #CD0059;
}

.win-groupheadercontainer:nth-child(6) {
    background-color: #BD004D;
}

.win-groupheadercontainer:nth-child(8) {
    background-color: #AD0042;
}

.win-groupheadercontainer:nth-child(10) {
    background-color: #8F001E;
}

.win-groupheadercontainer:nth-child(12) {
    background-color: #700005;
}

/* Assign explicit colors to the header groups within the category view*/

/* This is the default color of the group headers and is applied to all group headers from the 6th group onwards
    The background colors of groups 1-5 are overridden below.*/
.win-groupheadercontainer.win-laidout.win-groupleader.category-groupheadercontainer {
    background-color: #510006;
}

.win-groupheadercontainer.win-laidout.win-groupleader.category-groupheadercontainer:nth-child(2) {
    background-color: #CD0059;
}

.win-groupheadercontainer.win-laidout.win-groupleader.category-groupheadercontainer:nth-child(4) {

    background-color: #BD004D;
}

.win-groupheadercontainer.win-laidout.win-groupleader.category-groupheadercontainer:nth-child(6) {

    background-color: #AD0042;
}

.win-groupheadercontainer.win-laidout.win-groupleader.category-groupheadercontainer:nth-child(8) {

    background-color: #8F001E;
}

.win-groupheadercontainer.win-laidout.win-groupleader.category-groupheadercontainer:nth-child(10) {

    background-color: #700005;
}

/* IMPORTANT: If changes are made to the group-header or heroGroupHeader classes, it is required that 
   the win-groupheadercontainers associated with all headers have the same height. The height of the 
   first win-groupheadercontainer, (ie the one associated with the Hero group,) will be used in
   determining the space available for items in the columns of any group. */

.group-header {
    display: -ms-grid;
    -ms-grid-columns: 350px 1fr; /* The first column includes the 340px item width plus the 5px margins of either side of the items. */
    -ms-grid-rows: 10px 1fr 30px; /* These rows are for the colorful top bar, the appName and the group header text. */
    margin-left: 0px;
    color: #ffffff;

    /* The group header runs up to the top of the app. */
    height: 150px;
}

    .group-header:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin-right: 0px;
    }

.heroGroupHeader {
    margin-top: 120px;

    /* The height of the heroGroupHeader dictates the height of its ancestor win-groupheadercontainer. 
       All groups have a win-groupheadercontainer, but the height of the first win-groupheadercontainer
       is used to calcuate the space available for items in each list column, regardless of the height
       of the win-groupheadercontainer for the group in which the column lies. As such, the height of the
       first win-groupheadercontainer must be the same as that for the later groups. Add the necessary 
       bottom margin here to force the total height of the Hero group's win-groupheadercontainer to be 
       the same as it is for the other groups. */
    margin-bottom: 16px;

    pointer-events: visiblePainted; /* Default */
}

.heroHeaderColor {
      color: #707070;
}

/* === Search Box Related Styles === */

/* Search Control + Show Search Button Styles*/
.win-searchbox-button {
    color: inherit; /* Let the glyph inherit color */
    font-size: 16pt;
    height: 32px;
    width: 32px;
}

/* Styles for the Search Control Box */
#searchControlId {
    position: absolute;
    top: 65px;
    right: 130px;
    height: 32px; /* adjust for border */
    width: 266px; /* adjust for border */
    border-color: rgba(0,0,0,0.27); 

    pointer-events: visiblePainted; /* Default */
}

#searchControlId .win-searchbox-button {
    color: #ffffff;
    background-color: #CD0059;
}

    #searchControlId:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        left: 130px;
        right: auto;
    }

#searchControlId .win-searchbox-input::selection {
    background-color: #CD0059;
}

/* The Show Search Button styles */
#showSearchButton  {
    position: absolute;
    top: 65px;
    right: 130px;
    background-color: transparent;
    height: 36px;
    width: 36px;
    color: #ffffff;
    
    /* override default button styles */
    min-height: 32px;
    min-width: 32px;
    padding: 0px;
    margin: 0px;
    border: none;
    font-weight: 300;

    pointer-events: visiblePainted; /* Default */
}

    #showSearchButton .win-searchbox-button {
        background-color: transparent;
        margin: 2px;
    }

    #showSearchButton:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)  {
        left: 130px; /* adjust for border */
        right: auto;
    }

/* Set a background color on the button so the user can see it
   if the button leaves the header area, making it hard to see
   since it's white on very light gray */
#showSearchButton.show-background {
    background-color: #CD0059;
}

/* Active and Hover styles.*/
/* Hover for the search button when it is transparent (over a color block) */
#showSearchButton:hover {
    background-color: rgba(255, 255, 255, .13);
}

/* Hover for the search button when it is over the gray area and when it is in the expanded search control */
#showSearchButton.show-background:hover, #searchControlId .win-searchbox-button:hover {
    background-color: #D3206D;
}

#showSearchButton:active, #searchControlId .win-searchbox-button:active {
    background-color: white;
    color: #CD0059;
}

/* textForScreenReadersAssertive and textForScreenReadersPolite are LiveRegions used only to provide text 
   to screen readers. They show no visuals on the screen. */
#textForScreenReadersAssertive, #textForScreenReadersPolite {
    max-width: 0px;
    max-height: 0px;
    color: transparent;
}

/* Position the progress ring in the center of the app. */
#listLoadingProgressRing {
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    -ms-grid-row-align: center;    
    -ms-grid-column: 1;
    -ms-grid-column-align: center;    

    /* Initially the progress ring is not displayed. */
    display: none;
    color: #CD0059;
}

.stashPage .itemslist .win-groupheader {
    margin: 0px;
    padding: 0px;

    /* If we don't override the default behavior of having the group header tighten 
       around its content, the header color won't fill the entire header. */
    float: none;
}

/* Without this, an undesirable gap appears to the left of the first group header. 
   This overrides the default win-groupleader left margin of 70px defined in ui-light.css.
   Only apply this win-groupleader of zero to the win-groupheadercontainer, because we 
   need a different group-leader override for the win-itemscontainer below. */
.win-listview.win-groups .win-horizontal .win-groupleader.win-groupheadercontainer {
    margin-left: 0px;
}

.win-listview.win-groups.win-rtl .win-horizontal .win-groupleader {
    margin-right: 0px;
}

/* Override the default itemscontainer margins to 0. this applies to everything
   including the hero item in the horizontal gridview . The normal items will 
   override this for styling purposes.
   This rule is needed so that the listview measurements won't be off by 70px */
#itemsList .win-horizontal .win-itemscontainer {
    margin-left: 0px;
    margin-right: 0px;
}

/* Shift the win-itemscontainer further to the left than the win-groupheadercontainer,
   in order to have the inside of the left edge of the hover feedback align with the 
   left edge of the displayed group header. This rule throws off listview measurements
   by 5px but that shouldn't affect the experience that much. */
#itemsList .win-itemscontainer.win-cellspanninggridlayout.win-groupleader.win-laidout {
    margin-left: -5px;

    /* Add a 5 pixel margin to the right of the win.itemscontainer. This prevents the win.itemscontainer 
       to the right of this one touching it when all win.itemscontainers are shifted 5 pixels to the left. */
    margin-right: 5px;
}

    /* Reverse the previous margins for RTL mode */
    #itemsList .win-itemscontainer.win-cellspanninggridlayout.win-groupleader.win-laidout:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin-left: 5px;
        margin-right: -5px;
    }

/* Override some styling done by WinJS for RTL listviews */
.win-rtl.win-listview ._win-absolutelayout .win-groupheader {
    margin: 0px;
}

/* The ListView surface's margins are the same for all views except for the Categories view. */
.stashPage .itemslist .listViewportDefault.win-horizontal.win-viewport .win-surface {
    margin-left: 100px; /* Add a gap between the left edge of the list's scrollable region, and the first item in the list. */
    margin-right: 206px;

    /* Visually we desire a minimum margin of 18 pixels beneath the last row of items in the list. This visual 
       margin will include the bottom margin of the win-container that surrounds the bottom item in each column. 
       Each item we generate is presented by the WinJS ListView inside a win-container which includes a 5px margin 
       around the item. (It's the 5px bottom margin of one item plus the 5px top margin of the item below it, that 
       leads to a 10px gap appearing between items in a column.) We must account for the win-container margin when 
       setting the margin below the list here. So if we want a total visual margin of 18px, we achieve that with a 
       13px margin below the list plus the 5px bottom margin of the lowest win-container in the column. */
    margin-bottom: 13px;
}

    .stashPage .itemslist .listViewportDefault.win-horizontal.win-viewport .win-surface:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin-right: 100px; /* Add a gap between the right edge of the list's scrollable region, and the first item in the list. */
        margin-left: 206px;
    }

.stashPage .itemslist .listViewportCategories.win-horizontal.win-viewport .win-surface {
    margin: 0px 206px 114px 115px;
}

    .stashPage .itemslist .listViewportCategories.win-horizontal.win-viewport .win-surface:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin: 0px 115px 114px 206px;
    }

/* The z-index of the win-viewport must be set to be higher than the listContinuationBar in order for 
    the win-surface contained inside the win-viewport to appear in front of the listContinuationBar. */
.stashPage .itemslist .win-horizontal.win-viewport {
    background-color: transparent;
    z-index: 1; 
}

/* The listContinuationBar is a bar which appears to run from the right of the list up to right of the screen. */
#listContinuationBar {

    /* Calculate the width of the bar at run-time. */
    height: 120px;

    position: absolute;
    top: 0px;
    right: 0px;

    /* The bar will lie underneath the group headers, so the user only sees what protrudes beyond the right of the list. */
    z-index: 0;
}

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

#beforeListBar {
    position: absolute;
    top: 0px;
    left: 0px;

    height: 150px;
    width: 300px;

    background-color: transparent;
}

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

/* Override the color set by ui-light.css when the checkmark behind the item is shown during a swipe to select. */
.win-selectionhint, 
.win-selectionhint.win-revealed {
    color: #CD0059;
}

/* Override the white background that WinJS applies to a background in the first-run UI. */
.hero-item-never-added.win-itemcontainer .win-itembox {
    background-color: transparent;
}

/* The color of the selection border, (with and without hover). */
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected .win-selectionborder,
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder,
.win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected .win-selectionborder,
.win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected:hover .win-selectionborder {
    border-color: #CD0059;
}

/* The color of the triangle behind the selection checkmark. */
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected .win-selectioncheckmarkbackground,
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectioncheckmarkbackground,
.win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected .win-selectioncheckmarkbackground,
.win-itemcontainer:not(.win-selectionstylefilled).win-container.win-selected:hover .win-selectioncheckmarkbackground {
    border-top-color: #CD0059;
    border-right-color: #CD0059;
}

/* The color of the RTL triangle behind the selection checkmark. */
.win-listview.win-rtl:not(.win-selectionstylefilled) .win-container.win-selected .win-selectioncheckmarkbackground,
.win-listview.win-rtl:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectioncheckmarkbackground,
.win-itemcontainer.win-rtl:not(.win-selectionstylefilled).win-container.win-selected .win-selectioncheckmarkbackground,
.win-itemcontainer.win-rtl:not(.win-selectionstylefilled).win-container.win-selected:hover .win-selectioncheckmarkbackground {
    border-left-color: #CD0059;
    border-right-color: transparent;
}

/* Disable the hover feedback for the Hero item and empty list item. If displayed, the Hero item will be contained 
   within the first .win-itemscontainer to follow a .win-groupheadercontainer. This means the 
   container is fixed as the third child of the .win-surface. To ensure that only the Hero item group has this styling applied
   we explicitly check if it has the .win-uniformgridlayout class which is only appplied to the hero item.
   If the list is not grouped, (ie we're showing the Deleted Items or search results), then the
   .win-itemscontainer will not be found as the third child. */
.win-itemscontainer.win-uniformgridlayout:nth-child(3) .win-container:hover, #emptyListItem:hover {
    outline: none;
}

/* Control the gap between cells, so that we're guaranteed to show items that have
   heights that are an exact match for cell heights and the gaps between cells. */
.stashPage .itemslist .win-container {
    background-color: transparent;
}

/* The first group header in the list contains a bar of the same color as the appname text shown in that header. */
.group-header-topbar {
    -ms-grid-column: 1;
    -ms-grid-row: 1;

    background-color: #CD0059; 
}

/* The group header text also gets the win-type-medium class applied, as that has the required 11pt font-size. */
.group-header-text {
    -ms-grid-column: 1;
    -ms-grid-row: 1; /* For non-Hero group headers, the text will be pushed down by top padding applied below. */

    margin-left: 20px;

    /* This margin leaves the base line of the group header text at 130px from the top of the app. Note
       that whenever this top margin is adjusted, the heroGroupHeader top margin must also be adjusted 
       to force the text on the Hero group header to align with the text on the other group headers. */
    margin-top: -6px; 
    font-weight: 600; /* Semibold. */
}

    /* Reverse the group header text margin in RTL languages. */
    .group-header-text:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin-right: 20px;
        margin-left: 0px;
    }

/* For group-header-text elements that are not a part of the Hero item's group, increase the size of the 
   element to fill most of the group header. This allows the element to be hit by touch screen readers
   when the user is touching in most of the group header. */
.group-header .group-header-text {
    -ms-grid-column-span: 2;
    padding-top: 120px;
}

/* This "discontinuity" allows an apparent space to appear at the bottom of the group header, in the 
   part of the header that lies to the right of the part which sits above the first column of items. */
.group-header-discontinuity {
    -ms-grid-row: 3;
    -ms-grid-column: 2;

    background-color: #f4f4f4;
}

.stashPage .itemslist {
    height: 100%;
    width: 100%;

    /* The list is not shown until it contains at least one item. */
    display: none;
}

    /* We have four heights of items, to account for the contained image and summary text.
       Three of the images have a variable height 3rd row in which we present an image.
       All items have heights which are some multiple of the cell height (100px) plus
       the gaps between the cells, (10 pixels). */
    
    .tallestItem, .tallItem, .largeItem, .mediumItem, .shortItem {
        width: 340px;
        background-color: #f4f4f4;
    }

    .tallestItem, .tallItem, .largeItem, .mediumItem {
        display: -ms-grid;
        -ms-grid-rows: auto auto auto 1fr auto;
        -ms-grid-columns: 1fr;
    }

    .tallestItem {
        height: 590px;
    }

    .tallItem {
        height: 490px;
    }

    .largeItem {
        height: 390px;
    }

    .mediumItem {
        height: 290px;
    }

    .shortItem {
        height: 190px;
    }
    
/* Overwrite ui-light.css styling to make the item boxes to be transparent. the default white
   color was causing a noticeable flicker in the hero item refresh and when resizing vertically
   laid-out items. */
#itemsList .win-itembox {
    background-color: #f4f4f4;
}

/* Styling to align the hero item container text */
#itemsList .win-horizontal .win-itemscontainer.win-uniformgridlayout:nth-child(3) {
    /*  negative margin to align the hero text baseline. The group header takes up
        too much space and there isn't enough room for the hero item text to meet the
        appropriate baseline margin so we need to move up to reclaim some of the header
        space. This takes into account the default -200px pixel margin on the container */
    margin-top: -211px;
}

/* Styling to auto size the hero item container 
   Note that this is necessary to get the hero item win container
   to be sized by its content when the item is updated. The listview won't remeasure
   the item without us forcing re-layout and we shouldn't do that since it will cause the list
   to flicker when the hero item is updated. This hack should have no side effects currently
   but I've been told that this might affect drag-and-drop + semantic zoom */
#itemsList .win-horizontal .win-uniformgridlayout .win-container {
    height: auto;
}

/* Allow the high level stashPage color to show through the win-itembox containing the 
   Hero item. This overrides the default of a white background set by ui-light.css. 
   Only the Hero item is presented with a win-uniformgridlayout. */
#itemsList .win-horizontal .win-uniformgridlayout .win-itembox {
    background-color: transparent;
}

    .heroItem {
        display: -ms-grid;
        -ms-grid-rows: auto auto;
        -ms-grid-columns: 1fr;

        /* Allow the high level stashPage color to show through the Hero item. */
        background-color: transparent;

        height: auto;
    }

    /* Both the regular list's Hero item and the "empty list" UI are 380px wide. */
    .heroItem {
        width: 380px;
    }

    /* The "How to add an item" UI fills most of the app. */
    .hero-item-never-added {
        width: 930px;
    }

    /* The selectionButton class allows custom UI to be presented on the item when it's 
       selected. We never show this UI when the list is presented in a grid layout. */
    .selectionButton {
        display: none;
    }

    .item-rtlhandler {
        direction: ltr;
    }

    /* Allow some text elements to show RTL independently of the RTL layout of the whole list. */
    .item-rtlhandler:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        direction: rtl;
    }

    /* The item-textcontainer contains the title and summary text on items in a grid layout.
       It exists only to limit the amount of the text shown on the two shortest tile heights.
       Note that the item-textcontainer does not have a display of -ms-grid, and so when it's
       used to hold the item-name and item-summary, the -ms-grid-row defined in those elements 
       is irrelevant. */
    .item-textcontainer {
        -ms-grid-row: 2;
        width: auto;
        height: auto;
        max-height: 132px;
        overflow: hidden;
    }

    .item-name {
        -ms-grid-row: 2;
        -ms-grid-column: 1;

        line-height: 27pt;
        height: auto; /* The size of the this element is based on the amount of text we show. */
        max-height: 54pt; /* We show at most two lines of text. */

        overflow: hidden;
        margin: 12px 18px 0px 18px;
    }

/* Special handling for Chinese in the grid view because the YaHei font causes text clipping witht he default line-height
   max-height combination */
@media (min-width: 580px) {
    .item-name:-ms-lang(zh-CN, zh-Hans, zh-SG) {
        font-size: 26px;
    }
}

    .heroItem .hero-item-name {
        line-height: 48pt;
        overflow: hidden;
        color: #000000;

        font-size: 42pt;
        letter-spacing: 0px;
        font-weight:100; /*Thin*/
        /* Margins should account for the items container margin */
        margin: 0px 15px 0px 15px;
        padding-bottom: 5px;
        max-height: 240pt;
        white-space: normal;
        -ms-hyphens: auto;
        -ms-hyphenate-limit-zone: 100px;
        -ms-hyphenate-limit-chars: auto 5 5;
    }

    /* Special line height combo for hindi */
    .heroItem .hero-item-name:-ms-lang(hi) {
        line-height: 53pt;
        max-height: 260pt;
    }

    /* Any class below with "never-added" in its name relates to the "How to add an item" UI. */
    .hero-item-never-added-name {           
        letter-spacing: 0px;
        line-height: 48pt;
        margin: 20px 11px 0px 11px;
        opacity: 0.7;
    }

    .item-never-added-instructions-container {
        display: -ms-grid;
        -ms-grid-rows: auto;
        -ms-grid-columns: auto auto;

        /* By default all instructions for the "How to add an item" UI is arranged horizontally. */
        width: 880px;
    }

    .item-never-added-instructions-part1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1;

        margin-left: 15px;
        margin-right: 125px;
    }
        .item-never-added-instructions-part1:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 125px;
            margin-right: 15px;
        }

    .item-never-added-instructions-part2 {
        -ms-grid-row: 1;
        -ms-grid-column: 2;

        margin-left: 15px;
        margin-right: 0px;
    }
        .item-never-added-instructions-part2:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 0px;
            margin-right: 15px;
        }

    .item-never-added-instructions-part-container {
        display: -ms-grid;
        -ms-grid-rows: auto auto auto;
        -ms-grid-columns: auto;

        width: 380px; 
        margin-top: 30px;
        margin-bottom: 55px;
    }

    .item-never-added-instructions-image {
        -ms-grid-row: 1;
        -ms-grid-column: 1;

        width: 360px;
        height: 220px;
    }

    .item-never-added-instructions-title {
        -ms-grid-row: 2;
        -ms-grid-column: 1;

        margin: 15px 0px 10px 0px;
        color: #CD0059;
    }

    .item-never-added-instructions-detail {
        -ms-grid-row: 3;
        -ms-grid-column: 1;

        width: 360px;
        opacity: 0.7;
    }

    .item-summary {
        -ms-grid-row: 3;
        -ms-grid-column: 1;

        line-height: 15pt; 
        height: auto; /* The size of the this element is based on the amount of text we show. */
        max-height: 45pt; /* We show at most three lines of text. */

        overflow: hidden;
        margin: 8px 19px 0px 19px;
        opacity: 0.7;
    }

    /* The imagepresenter present the primary image is there is one,
        or when snapped, it may show the icon. */
    .item-imagepresenter {
        -ms-grid-row: 4;
        -ms-grid-column: 1;

        margin: 10px 20px 0px 20px;

        /* Override the default WinJS behavior of hiding background images when high contrast is active. */
        -ms-high-contrast-adjust: none;
    }

    /* The item-details element contains the icon, datetime and appname. */
    .item-details {
        -ms-grid-row: 5;
        -ms-grid-column: 1;

        display: -ms-grid;
        -ms-grid-columns: 44px 1fr;
        -ms-grid-rows: 20px 20px;

        height: auto;
        margin: 10px 20px 10px 20px;
    }

    /* Allow tiles with no image to customize the gap between the bottom of the summary text and the top of the details. */
    .item-details-topmargin-shortitem {
        margin-top: 6px;
    }

    .hero-item-never-added .hero-item-details,
    .heroItem .hero-item-details {
        /* Margins should account for the items container margin and text line height */
        margin: 11px 15px 10px 15px;
        -ms-grid-column-align: start;
        padding-right: 20px;
        -ms-grid-rows: auto;
        display: -ms-inline-grid;
    }
        .hero-item-never-added .hero-item-details:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm),
        .heroItem .hero-item-details:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            padding-left: 20px;
            padding-right: 0px;
        }

        /* item-app-icon is the outermost element specifically related to the item logo. */
        .item-app-icon {
            -ms-grid-column: 1;
            -ms-grid-row: 1;

            /* We need the not-fixed size image to be centered in this element. So 
               create a 1x1 grid whose content will be center aligned in the grid. */
            display: -ms-grid;
            -ms-grid-rows: 100%;
            -ms-grid-columns: 100%;

            width: 36px;
            height: 36px;
            margin-top: 4px;

            /* Override the default WinJS behavior of hiding background images when high contrast is active. */
            -ms-high-contrast-adjust: none;
        }

        /* All content within the item-app-icon will be center aligned in that element. */
        .item-web-icon-wrapper, .item-web-icon-image, .item-app-icon-image {
            -ms-grid-column: 1;
            -ms-grid-column-align: center;
            -ms-grid-row: 1;
            -ms-grid-row-align: center;
        }

        /* item-web-icon-wrapper is used only with web logos, (not app logos). */
        .item-web-icon-wrapper {
            width: 32px;
            height: 32px;
            background-color: #FFFFFF;
            opacity: 0.5;
        }

        /* item-app-icon-image presents the image itself. the image will be shown at its natural size
           if smaller than 32x32. JS logic is used to determine the actual size */
        .item-web-icon-image {
            max-width: 32px;
            max-height: 32px;

            /* Raise this in the z-order to force it to appear above the item-web-icon-wrapper if necessary. */
            z-index: 2;
            position: relative;
        }

        .hero-item-app-icon {
            background-color: #CD0059;
            color: #FFFFFF;
            width: 36px;
            height: 36px;
            margin: 0px 8px 0px 0px;
            
            /* Overwrite the high-contrast-adjust: none declared in .item-app-icon */
            -ms-high-contrast-adjust: auto;
        }
            .hero-item-app-icon:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
                margin: 0px 0px 0px 8px;
            }

        .hero-item-app-icon:before {
            content: "\E143";
        }

            .hero-item-app-icon:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm):before {
                content: "\E1AA";
            }

        .item-app-icon-image {
            max-width: 32px;
            max-height: 32px;
        }

        .item-details-appname {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            line-height: 15pt;
            opacity: 0.7;
        }

        .item-details-category {
            -ms-grid-column: 2;
            -ms-grid-row: 2;
            opacity: 0.7;
        }

        .hero-item-details-action {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            line-height: 14pt;

            width: auto;

            font-weight: 300; /* Semi Light */
            font-size: 11pt;
            letter-spacing: 0.02em;
            color: #000000;
            opacity: 0.87;
            margin-top: 2px;
        }

        .hero-item-never-added-details-action {
            -ms-grid-column: 2;
            -ms-grid-row: 1;

            width: auto;
            margin: 0px 2px 0px 2px;
            font-weight: 400; /* Regular */
            line-height: 14pt;
            color: #CD0059;
        }


.manageCategoriesViewItemBase {
    height: 90px;
    width: 210px;    
}

.manageCategoriesViewItemAddButton {
    color: #cd0059;
    background-color: #dedede;
    font-size: 15pt;

    display: -ms-grid;
    -ms-grid-columns: 0.5fr auto 0.5fr;
    -ms-grid-rows: 0.5fr auto 0.5fr;
}

.manageCategoriesViewItemAddButtonLabel {
    -ms-grid-row: 2;
    -ms-grid-column: 2;

    padding: 5px 7px 5px 7px;

    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
}

.manageCategoriesViewItem {
    color: #ffffff;
    background-color: #cd0059;
}

.manageCategoriesViewItemLabel {
    padding: 64px 15px 0px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    direction: ltr;
}
    .manageCategoriesViewItemLabel:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        direction: rtl;
    }

.manageCategoriesViewItemLabelTextAlignLeft {
    text-align: left;
}

.manageCategoriesViewItemLabelTextAlignRight {
    text-align: right;
}

.manageCategoriesViewItemTooltipEnabled {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: block;
}

.manageCategoriesViewItemTooltipDisabled {
    display: none;
}

/* ============ Special Styling for the small image tile =========== */
.mediumItem.smallImageLayout {
    -ms-grid-rows: auto auto auto auto;
    -ms-grid-columns: 1fr;
}

.mediumItem.smallImageLayout .imageTextWrapper {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    display: -ms-grid;
    -ms-grid-columns: 110px 1fr;
    margin-left: 19px;
    margin-right: 19px;
}

.mediumItem.smallImageLayout .item-summary {
    /* Different top margin in this layout */
    margin-top: 3px;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    margin-left: 0px;
    margin-right: 0px;
}

.mediumItem.smallImageLayout .item-imagepresenter {
    /* Different top margin in this layout */
    margin-top: 7px;
    margin-right: 10px;
    margin-left: 0px;
    width: 100px;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

    .mediumItem.smallImageLayout .item-imagepresenter:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin-right: 0px;
        margin-left: 10px;
    }
.mediumItem.smallImageLayout .item-details {
    -ms-grid-row: 4;
}
/* ===== */

@media screen and (-ms-high-contrast) {

    .manageCategoriesViewItem, .manageCategoriesViewItemAddButton {
        border-style: solid;
    }

    /* Enable hover feedback, such that the feedback is not obscurred by any selection feedback. */
    .tallestItem:hover, .tallItem:hover, .largeItem:hover, .mediumItem:hover, .shortItem:hover {
        outline: 6px solid Highlight;
    }

    /* When any button on the navbar gets keyboard focus, highlight its outline using the current system Highlight color. */
    #navBar .win-navbarcommand-button:focus {
        outline: 6px solid Highlight;
    }

    /* Setting the color to transparent here is required, despite this being unchanged from the not-high contrast style. */
    #textForScreenReadersAssertive, #textForScreenReadersPolite {
        color: transparent;
    }

    /* Override WinJS for the selection count button in the appbar */
    button.win-command:disabled .win-label,
    button.win-command:disabled:active .win-label {
        color: ButtonText;
    }

    /* Show a border around all items in high contrast. Reduce the dimensions of 
       the tiles to account for the border. The size of the item within the border
       plus the size of the border must work with the cell height and gap between
       cells, just as it does when a border is not shown. */

    .tallestItem, .tallItem, .largeItem, .mediumItem, .shortItem, .heroItem {
        border-style: solid;

        /* All keyboard focus feedback, hover feedback and selection feedback is applied to 
           the winitem, which is narrower then the width of the item elements when they're 
           showing a border. So in order to present all this feedback exactly around the 
           items in high contrast, reduce the width of the item from 340 to 334 pixels. */
        width: 334px;
    }

    .tallestItem {
        height: 584px;
    }

    .tallItem {
        height: 484px;
    }

    .largeItem {
        height: 384px;
    }

    .mediumItem {
        height: 284px;
    }

    .shortItem {
        height: 184px;
    }

    /* All text should be as high contrast as possible. */
    .hero-item-never-added-name, .item-never-added-instructions-detail,
    .hero-item-details-action, .item-details-appname, .item-details-time, .item-summary, .item-details-category,
    .emptyCategory {
        opacity: 1.0;
    }

    .mb-button2 {
        color: #FFFFFF;
    }

    #categoryDivider {
        background-color: ButtonHighlight;
        opacity: 1.0;
    }

    /* Use system colors to highlight the most recently invoked item in the vertical list. */
    .shortItemVerticalRecentlyInvoked {
        background-color: Highlight;
        color: HighlightText;
    }

    .emptyListInfoLabel {
        opacity: 1.0;
    }

}

/* When the app is portrait, layout the "Items never added" UI vertically. */
@media all and (orientation:portrait) {

    /* This scrollable container will be shown if there's insufficient height to present 
       all the "How to add an item" UI. */
    .hero-item-never-added-scrollable-container {
        width: calc(100vw - 105px);
        height: calc(100vh - 146px);
        overflow-y: scroll;
    }

    .item-never-added-instructions-container {
        -ms-grid-rows: auto auto;
        -ms-grid-columns: auto;
    }

    .item-never-added-instructions-part-container {
        margin-top: 50px;
        margin-bottom: 5px;
    }

    .item-never-added-instructions-part2 {
        -ms-grid-row: 2;
        -ms-grid-column: 1;

        margin-bottom: 45px;
    }

    .hero-item-never-added {
        /* The text should not wrap in portrait layout. The text is never clipped because
           before that can occur, we change layout to show the "snapped" laid-out UI. */
        width: 490px;
    }
}

/* Show a vertical list layout once the app width falls beneath 580px. */
@media (min-width: 320px) and (max-width: 579px) {

    /** This styling is for the new hero item as a header of the list.*/
    #headerForHero {
        height: auto;

        /* Give the element a position of absolute to prevent it from occupying any space in the ListView DOM. 
           This means that items in the list will not be pushed down due to the existence of the custom Hero UI. 
           We set a top margin on the ListView's surface element to match the height of the custom Hero UI. By 
           doing this, the ListView can account for this height in its calcuations around such things as scrolling. */
        position: absolute;
    }

    /* The styling used above to set the background colors for group headers must be overridden here,
   because the vertically laid out list does not show group headers with colored backgrounds. 
   Instead, the color of the text is set based on the index of the associated group. */

    /* By default the group header gets colors associated with the oldest group. */
    .win-groupheadercontainer {
        background-color: transparent;
        color: #510006;
    }

        .win-groupheadercontainer:nth-child(2) {
            background-color: transparent;
            color: #CD0059;
        }

        .win-groupheadercontainer:nth-child(4) {
            background-color: transparent;
            color: #BD004D;
        }

        .win-groupheadercontainer:nth-child(6) {
            background-color: transparent;
            color: #AD0042;
        }

        .win-groupheadercontainer:nth-child(8) {
            background-color: transparent;
            color: #8F001E;
        }

        .win-groupheadercontainer:nth-child(10) {
            background-color: transparent;
            color: #700005;
        }

        /* this rule is needed to overwrite the background color set for the horizontal view.
           That rule has a higher specificity compared to our catchall "oldest group" rule above due to 
           the nth-child term */
        .win-groupheadercontainer:nth-child(12) {
            background-color: transparent;
        }

    #emptyListContainer {
        margin-left: 14px;
        margin-top: 23px;
    }

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

    #emptyListItem {
        padding: 0px;
        height: auto;
    }

        #emptyListItem .empty-list-label-vertical {
            width: calc(100% - 30px);
            margin-left: 5px;
            margin-right: 5px;
        }

    #emptyCategoryListItem {
        padding: 0px;
        height: auto;
        margin-left: 5px;
        margin-right: 5px;
    }

    .emptyListLabel {
        margin-left: 5px;
        margin-right: 5px;
    }
    
    #emptyListInformationContainer {
        margin-left: 5px;
    }
        
        #emptyListInformationContainer:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 0px;
            margin-right: 5px;
        }

    /* === Search Related Styling for the vertical list view */
    #searchControlId {
        top: 35px;
        right: 25px;
        width: calc(100% - 49px); /* adjust width to fit box across title minus the margins and borders */
    }

        #searchControlId:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            left: 25px;
            right: auto;
        }

    #showSearchButton {
        top: 35px;
        right: 25px;
    }

        #showSearchButton:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            left: 25px;
            right: auto;
        }

    /* Allow items in the vertically laid-out list to run the entire width of the app. */
    .stashPage .itemslist {
        width: 100%;
    }

        .stashPage .itemslist .listViewportDefault .win-container {
            margin-left: 0px;
            margin-right: 0px;
            /* Show color behind the item as the user swipes to select it.
       Each item is contained within one win-container. */
            background-color: #E8E8E8;
        }

    /* Override the default item container margins specified in ui-light.css. */
    .win-rtl.win-listview > .listViewportDefault.win-vertical .win-container {
        margin-left: 0px;
        margin-right: 0px;
    }

    /* Always hide the selection border, checkbox and the checkbox background when presenting the list with a vertical list layout. */
    .win-selectioncheckmark, .win-selectioncheckmarkbackground, .win-selectionborder {
        display: none;
    }

    /* When not showing the Categories view, do not allow any outline to appear on hover over the items. */
    .stashPage .itemslist .listViewportDefault .win-itemscontainer .win-container:hover {
        outline: none;
    }

    /* When vertically laid out, items are as wide at the app itself. So move the left and 
   right borders of the focus feedback rect in towards the center of the item, in order 
   to make them visible to the user. */
    .win-listview .listViewportDefault .win-focusedoutline {
        width: calc(100% - 20px);
        left: 10px;
    }

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

    /* Show an outline only for the empty list item and only in snapped mode 
   This behavior might change when design determines what the proper behavior is */
    #emptyListItem.win-itemcontainer:hover {
        outline: 3px solid #ABABAB;
    }

    /* Override the opacity setting taken by ui-light.css when the checkmark behind the item is shown during a swipe to select. */
    .win-selectionhint,
    .win-selectionhint.win-revealed {
        opacity: 0;
    }

    /* The selectionButton* classes relate to the buttons shown on vertically laid out items, when the items are selected.
   selectionButtonContainer is used to obscure the regular item content around the button that's displayed when the 
   item's selected. */
    .win-listview .win-container.win-selected .selectionButtonContainer {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2; /* This element must span two rows, otherwise the first row's height increases and pushes the second row off the item. */
        -ms-grid-column: 2;
        -ms-grid-column-span: 2; /* The element can flow over the blank column at the far end of the item. */
        -ms-grid-column-align: end;
        background-color: #f4f4f4;
        /* Position the buttons higher in the z-order than the other item UI. */
        z-index: 2;
        position: relative;
        padding-left: 10px;
        padding-right: 5px;
        width: 60px; /* Actual width is width plus padding. */
        height: 100%;
    }

        .win-listview .win-container.win-selected .selectionButtonContainer:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            padding-left: 5px;
            padding-right: 10px;
        }

    /* In the vertical list, the most recently invoked item has a specific background color. This will
       be overridden by whatever color is applied when the item shows selection or hover feedback. */
    .shortItemVerticalRecentlyInvoked {
        background-color: #dedede;
    }

    /* The following background colors relate to the selected items in a vertical list layout.
       All items are presented using the shortItem class in that layout. We must set the color
       for the selectionButtonContainer here rather than use a transparent background, because
       that element must obscure item text near the selection-related button shown on the item. */
    .win-listview .win-container.win-selected .shortItem,
    .win-listview .win-container.win-selected:active .shortItem,
    .win-listview .win-container.win-selected .selectionButtonContainer,
    .win-listview .win-container.win-selected:active .selectionButtonContainer {
        background-color: #dedede;
    }
    
    .win-listview .win-container.win-selected:hover .selectionButtonContainer,
    .win-listview .win-container.win-selected:hover .shortItem,
    .win-listview .win-container:hover .shortItem {
        background-color: #d4d4d4;
    }

    /* selectionButtonHitTarget provider a hit target around the button, which is larger than the button. */
    .win-listview .win-container.win-selected .selectionButtonHitTarget {
        /*top padding helps to center the button, the middle point is 9.4vw+5px of a 18.75vw+10px item. 
          With a button height of 40px, the top padding is 9.4+5px-20px=9.4vw-15px ,*/
        padding: calc(9.4vw - 15px) 0px 0px 0px;
        width: 40px; /* Actual width is width plus padding. */
        height: 100%;
    }

    /* selectionButton presents the visuals that the user considers the button. */
    .win-listview .win-container.win-selected .selectionButton {
        display: block;
        color: #CD0059;
        border-color: #CD0059;
        background-color: transparent;
        /* The following properties are based on the Back button styling. 
       The width, height and line-height have been reduced relative 
       to the Back button styling. */
        min-width: 0;
        min-height: 0;
        border-radius: 50%;
        border-width: 2px;
        border-style: solid;
        padding: 0;
        text-align: center;
        width: 40px;
        height: 40px;
        font-size: 14pt;
        line-height: 16px;
        font-family: "Segoe UI Symbol";
        font-weight: normal;
        vertical-align: middle;
    }

        /* This color is 13% of the primary color. So if the primary color changes, update this value. */
        .win-listview .win-container.win-selected .selectionButton:hover {
            background-color: #d8c5c9;
        }

        .win-listview .win-container.win-selected .selectionButton:active {
            background-color: #CD0059;
            color: #f4f4f4;
        }

    /* Set the contents of the Delete and AddBack buttons in the same way the Back button content is set. */
    .deleteButton::before {
        content: "\E107";
    }

    .addBackButton::before {
        content: "\E109";
    }

    /* Override the default tall group header through the win-groupleader. This requires us to 
   also change the win-listlayout class, because the height over the first group in the list
   is affected by both classes. */
    .win-listview.win-groups > .win-vertical .win-surface.win-listlayout {
        margin-top: 5px;
    }

    .win-listview.win-groups .win-vertical .win-listlayout .win-groupleader {
        margin-top: 5px;
    }

    /* Set the height of the group header such that along with its top margin, the text 
   in the header appears at the expected distance from the elements above it. */
    .stashPage .itemslist .win-groupheader {
        height: 30px;
        margin: 5px 0px 0px 0px;
    }

    /* When showing a vertical list layout, the group headers have a transparent background, 
   and a foreground color for the text which matches the background color shown when the
   list is presented with a grid layout. */

    .group-header {
        display: block;
        background-color: transparent;
        padding-bottom: 0px;
        font-size: 11pt;
        font-weight: 600; /* Semi-bold */
        margin-left: 20px;
        margin-top: 10px;
    }

    .heroGroupHeader {
        display: block;
        background-color: transparent;
        padding-bottom: 0px;
        margin-left: 20px;
        margin-top: 24px;
        margin-bottom: 6px;
        color: #cd0059;
    }

        .group-header:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm),
        .heroGroupHeader:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-right: 20px;
            margin-left: 0px;
        }

    /* When the list is vertically-aligned, the text color set by the group-header above 
       should be overridden by the color of the win-groupheadercontainer class associated 
       with the element that contains this element. */
    .group-header {
        color: inherit;
    }

    .heroItem .hero-item-details {
        margin-left: 15px;
        margin-right: 15px;
    }

    .heroItemEmptyVertical .hero-item-details {
        margin-left: 5px;
        margin-right: 5px;
    }

    .heroItemEmptyVertical .hero-item-details {
        margin-top: 15px;
    }

    .heroItemEmptyVertical.win-itemcontainer .win-itembox {
        background-color: transparent;
    }

    /* All items have the same height and layout when snapped. */
    .heroItem {
        display: -ms-grid;
        -ms-grid-rows: auto auto;
        -ms-grid-columns: auto;
        width: calc(100% - 40px);
        height: auto;
        margin-top: 10px;
        margin-bottom: 5px;
        margin-left: 20px;
        margin-right: 20px;
        background-color: #f4f4f4;

    }
        .heroItem .hero-item-name {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            line-height: 24pt;
            max-height: 72pt;
            width: calc(100vw - 40px);
            font-size: 20pt;
            font-weight: 200; /* For Segoe UI Light. */
            letter-spacing: 0.02em;
            margin-right: 0px; /* Overwrite the margins set in full view. */
            margin-left: 0px;
            -ms-hyphens: auto;
            -ms-hyphenate-limit-zone: 50px;
            -ms-hyphenate-limit-chars: auto 5 5;
        }

        .heroItem .hero-item-name:-ms-lang(hi) {
            line-height: 27pt;
            max-height: 135pt;
        }

    .item-details {
        display: -ms-grid;
        -ms-grid-columns: 34px auto;
        -ms-grid-rows: 1fr;

        height: auto;
    }

    .heroItem .hero-item-details {
        /* Margins should account for the items container margin and text line height */
        margin: 20px 0px 0px 0px;
        max-width: 200px;
    }

        /* item-app-icon is the outermost element specifically related to the item logo. */
        .item-app-icon {
            -ms-grid-column: 1;
            -ms-grid-row: 1;

            /* We need the not-fixed size image to be centered in this element. So 
               create a 1x1 grid whose content will be center aligned in the grid. */
            display: -ms-grid;
            -ms-grid-rows: 100%;
            -ms-grid-columns: 100%;

            width: 36px;
            height: 36px;
            margin-top: 4px;
            font-size: 15pt;
            /* Override the default WinJS behavior of hiding background images when high contrast is active. */
            -ms-high-contrast-adjust: none;
        }

        /* item-web-icon-wrapper is used only with web logos, (not app logos). */
        .item-web-icon-wrapper {
            width: 32px;
            height: 32px;
            background-color: #FFFFFF;
            opacity: 0.5;
        }

        /* item-app-icon-image presents the image itself. the image will be shown at its natural size
           up till 32x32px, after that it scales down to 30px. */
        .item-web-icon-image {
            max-width: 32px;
            max-height: 32px;

            /* Raise this in the z-order to force it to appear above the item-web-icon-wrapper if necessary. */
            z-index: 2;
            position: relative;
        }

        .hero-item-app-icon {
            background-color: #CD0059;
            color: #FFFFFF;
            width: 32px;
            height: 32px;
            margin: 0px 8px 0px 0px;
            
            /* Overwrite the high-contrast-adjust: none declared in .item-app-icon */
            -ms-high-contrast-adjust: auto;
        }
            .hero-item-app-icon:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
                margin: 0px 0px 0px 8px;
            }

        .item-app-icon-image {
            max-width: 32px;
            max-height: 32px;
        }

        .hero-item-details-action {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            line-height: 14pt;

            width: auto;
            margin-left: 8px;

            color: #000000;
            opacity: 0.87;
        }

            .hero-item-details-action:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
                margin-left: 0px;
                margin-right: 8px;
            }

    
    /* heroItemEmptyVertical is used to present the "empty list" and "How to add an item" message text when the Default view has a vertical layout. */
    .heroItemEmptyVertical {
        width: calc(100% - 15px);
        height: 90px;

        /* The baseline of the text is 130px from the top of the app. */
        margin-top: 28px;
    }

    #itemsList .shortItem {
        display: -ms-grid;
        -ms-grid-columns: calc(18.75vw + 10px) 1fr; /*The size is based on the viewport width*/
        -ms-grid-rows: auto 1fr;
        height: calc(18.75vw + 10px);
        
        width: calc(100% - 40px);
        padding-left: 20px;
        padding-right: 20px;
    }

    .item-imagepresenter {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        visibility: visible;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        margin: 5px 0px 5px 0px;
    }

    .item-name {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        line-height: 15pt;
        height: auto;
        max-height: 30pt;
        margin: 5px 0px 0px 0px;
    }

    .item-details-appname {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        line-height: 13pt;
        margin: 5px 0px 0px 0px;
    }

    .item-summary  {
        line-height:15pt;
        height: auto; /* The size of the this element is based on the amount of text we show. */
        max-height: 30pt; /* We show at most 2  lines of text. */
        overflow: hidden;
        margin: 0px 0px 0px 0px; 
    }
}

/* Show a vertical list layout and summary once the app width falls over 420px */
@media (min-width: 420px) and (max-width: 529px) {
   
     /* The item-textcontainer contains the title and summary text on items in a vertical layout.
       It exists only to limit the amount of the text shown */
    .item-textcontainer {
        width: auto;
        height: auto;
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        /* allow for 3 lines of text at most (+ the 5px margin on the title text) */
        max-height: calc(45pt + 5px);
        overflow: hidden;
    }

}

/* To update the limit of lines of text shown between 530-580px*/
@media (min-width: 530px) and (max-width: 579px) {

    .item-textcontainer {
        width: auto;
        height: auto;
        /* allow for 4 lines of text at most (+ the 5px margin on the title text) */
        max-height: calc(60pt + 5px);
        overflow: hidden;
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

           .item-summary  {
                max-height: 45pt; /* We show at most 3  lines of text. */
            }

}

/* Some general style declarations that can be reused */
.image-tile {
    background-clip: content-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
}

.invisible-element {
    visibility: hidden;
}

.hidden-element {
    display: none;
}

/* Error Bar related styles */
.messageBar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: calc(100% - 126px);
    min-height: 62px;
    background-color: azure;
    border-bottom: 2px solid #000000;
    z-index: 100;
    padding-left: 60px;
    padding-right: 66px;
    /* 19px top/bottom margin achieved by 4px padding here and 15px padding in the button wrapper */
    padding-top: 4px;
    padding-bottom: 4px;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: start;
}

/* Reverse the padding in RTL languages */
.messageBar:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    padding-left: 66px;
    padding-right: 60px;
}

.messageText {
    color: #000000;
    /* text baseline of 40px is achieved by a margin here and the error bar's padding */
    margin-top: 21px;
}

.messageBarClear {
    /* min width = min margin between the button and the text */
    min-width: 110px;
    -ms-flex: 1;
}

.messageBarButtonWrapper {
    -ms-flex: 1;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-pack: end;
    -ms-flex-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.messageCloseButton {
    border: 0px;
    font-weight: 600;
    padding-top: 0.24em;
    padding-right: 20px;
    padding-bottom: 0.35em;
    padding-left: 20px;
    min-width: 90px;
    /* 70px - 19px - 19px */
    min-height: 32px;
    color: #000000;
    background-color: rgba(182, 182, 182, 0.7);
}

.messageCloseButton:hover
{
    color: #000000;
    background-color: rgba(205, 205, 205, 0.82);
}

.messageCloseButton:active
{
    color: #FFFFFF;
    background-color:#000000;
}

/* Update error bar margins in vertical mode */
@media (min-width: 320px) and (max-width: 579px) {
    .messageBar {
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100% - 40px);
    }

    /* we need this rule so that we override the one set for grid view (the -ms-lang term gives it one more point of specificity) */
    .messageBar:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Adjust the margins of the list in Categories view. */
@media (min-width: 470px) and (max-width: 579px) {

    .stashPage .itemslist .listViewportCategories.win-horizontal.win-viewport .win-surface {
        margin: 11px 0px 114px 13px;
    }

        .stashPage .itemslist .listViewportCategories.win-horizontal.win-viewport .win-surface:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin: 11px 13px 114px 0px;
        }
}

@media (min-width: 320px) and (max-width: 469px) {

    .stashPage .itemslist .listViewportCategories.win-vertical.win-viewport .win-surface {
        margin-top: 6px;
        margin-left: 11px;
    }

        .stashPage .itemslist .listViewportCategories.win-vertical.win-viewport .win-surface:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 0px;
            margin-right: 11px;
        }

    /* Do not allow the whitespace to the right of vertically laid-out items in Categories view to invoke the item. */
    .win-listview > .listViewportCategories .win-container {
        width: 210px;
    }
}