body {
    background-color: #f4f4f4;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr auto;
}

/* ======== Common Styles ============ */

/* a wrapper div with children that are centered horizontally and vertically */
.centerChildren { 
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
}

.localizedText {
    direction: ltr;
}

.localizedText:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    direction: rtl;
}

/* ======== Main Content ============ */
#mainWrapper {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

#stashAllButton {
    color: white;
    background-color: #AC193D;
    border: 2px solid #AC193D;
    position: absolute;
    top: 38px;
    right: 34px;
}

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

#stashAllButton:hover {
    background-color: #B73756;
    border: 2px solid #B73756;
}

#stashAllButton:active {
    background-color: #212121;
    border: 2px solid #212121;
}

#errorText {
    width: 300px;
    margin-top: 20px;
    margin-left: 80px;
}

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

/* ============ Bookmark Tile ============ */
#bookmarkTile {
    /* Redlines defined the spacing from the baseline so we need to account for the line height */
    /* Split top margin in 60px and 40px chunk. that will make this styling more comparable to the 
       Main UX version */
    margin: 20px 0px 0px 80px;
    width: 300px;
    overflow: hidden;
    display:-ms-flexbox;    
    -ms-flex-align: stretch;
    -ms-flex-direction: column;
}

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

#tileTopText {
    /* The two smallest tile sizes can only show up to 2 lines of title text and 3 lines of summary text
       This value will be adjusted to 140px (to allow for the third line of text) when the share code
       finds an image that pushes the tile size to C,D or E */
    max-height: 129px;
    overflow: hidden;
}

#entryName {
    line-height: 26pt;
    height: auto; /* The size of the this element is based on the amount of text we show. */
    max-height: 52pt; /* We show at most two lines of text. */
    
    /* Redlines defined the spacing from the baseline so we need to account for the line height + text vertical alignment
       in the line box. I have no good way to do this other than pixel measuring. */
    margin-top: 12px;
    overflow: hidden;
    width: 100%;
}

/* Special edge case for certain languages. Their default fonts clip certain characters with 26pt line-heights */
#entryName:-ms-lang(zh-CN, zh-Hans, zh-SG) {
    /* Make the font-size smaller */
    font-size: 26px;
}

#summaryText {
    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. */
    margin-top: 8px;

    /* We need a bottom margin to keep the space between the baseline of the summary text and the
       bottom edge of the summary text box to be the same as the baseline of the title text and
       the bottom edge of the title text box (they are different because they have different font
       sizes and line heights). This will make it so that the gap between the image and the text above 
       the image to be constant whether we have summary text or not */
    margin-bottom: 2px;

    overflow: hidden;
    width: 100%;
    opacity: 0.6;
}

#primaryImage {
    display: none;
    opacity: 0;
    -ms-flex: 1;

    /*  Margin needs to adjust for the gap between the bottom of the text element box and
        the baseline of the text itself */
    margin-top: 9px;
    /*  A bottom margin is needed to give the keep the gap between item details section and
        whatever is above it consistent. 
        The text elements have a gap between the text baseline and the bottom edge of the element
        box, so this margin simulates that gap */
    margin-bottom: 6px; 
    
    background-clip: content-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* 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. */
#itemDetails {
    display: -ms-grid;
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: 20px 20px;

    height: auto;
    /*  Top margin implemented as padding so that the margin isn't collapsed. The padding needs to adjust for the gap 
        between the bottom of the text element box and the baseline of the text itself. The rest of the margin is split 
        into a 4px margin on the wrapper and 4px on the icon itself (to align the text with the icon)  */
    padding-top: 4px;
}
    #secondaryIconWrapper{
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;

        /* Set this wrapper to be position:relative so that the overlay can be position:absolute */
        position: relative;
                
        width: 36px;
        height: 36px;
        margin: 4px 8px 0px 0px;
    }

        #secondaryIconWrapper:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 8px;
            margin-right: 0px;
        }
            
    #secondaryIcon {
        max-width: 32px;
        max-height: 32px;
        z-index: 2;
    }

    #secondaryIconOverlay {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 2px;
        /* No need to RTL handling here, since we're centering this element. The right margin is 2px */
        left: 2px;
        opacity: 0.5;
        background-color: white;
    }

    #sourceAppName {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        opacity: 0.6;
    }

/* ============ Special Styling for the small square image B Tile (DCR) =========== */
#bookmarkTile.smallImageLayout #tileTopText {
    display: -ms-grid;
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: auto auto;
}

#bookmarkTile.smallImageLayout #entryName {
    -ms-grid-column-span: 2;
}

#bookmarkTile.smallImageLayout #summaryText {
    /* Different top margin in this layout */
    margin-top: 3px;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
}

#bookmarkTile.smallImageLayout #primaryImage {
    /* Different top margin in this layout */
    margin-top: 7px;
    margin-right: 10px;
    margin-left: 0px;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}

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

/* ============ Category Selection Button and Menu ============ */
#categoryButton {
    width: 300px;
    margin: 20px 0px 6px 80px;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.27);
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 1fr 28px;
    padding: 0px;
}

#categoryButton:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    margin: 20px 80px 6px 0px;
}

#categoryButton:hover {
    border-color: rgba(0, 0, 0, 0.44);
}

#categoryButton:hover:active {
    background-color: white;
    border-color: rgba(0, 0, 0, 0.64);
}

#categoryButton:hover:active #categoryButtonNameContainer {
    background-color: rgb(211, 211, 211);
}

#categoryButton:focus {
    background-color: white;
    border-color: rgba(0, 0, 0, 0.64);
}

#categoryButton:focus #categoryButtonNameContainer {
    background-color: rgb(172, 25, 61);
}

#categoryButton:focus:hover #categoryButtonNameContainer {
    background-color: rgba(172, 25, 61, 0.85);
}

#categoryButtonNameContainer {
    position: relative;
    top: 0;
    left: 0;
}

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

#categoryButtonName {
    padding: 4px 0px 4px 10px;
    text-align: left;
}

#categoryButtonName:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
    padding: 4px 10px 4px 0px;
    text-align: right;
}

.categoryButtonNameNotChosen {
    color: rgba(0, 0, 0, 0.6);
}

.categoryButtonNameChosen {
    color: black;
}

#categoryButton:focus .categoryButtonNameNotChosen,
#categoryButton:focus .categoryButtonNameChosen {
    color: white;
}

#categoryButtonChevron {
    -ms-grid-column: 2;
    padding-top: 4px;
    padding-bottom: 4px;
    color: black;
}

#categorizeMenu {
    width: 296px; /* 300px - 4px border */
}

/* ============ Bottom Gradient Bar ============ */
#bottomGradientBar {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-align: stretch;
    height: 10px;
}

    #bottomGradientBar:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        -ms-flex-direction: row-reverse;
    }

#gradientColor1 {
    -ms-flex: 1;
    background-color: #CD0059;
}
#gradientColor2 {
    width: 40px;
    background-color: #BD004D;
}
#gradientColor3 {
    width: 40px;
    background-color: #AD0042;
}
#gradientColor4 {
    width: 40px;
    background-color: #8F001E;
}
#gradientColor5 {
    width: 40px;
    background-color: #700005;
}
#gradientColor6 {
    width: 40px;
    background-color: #510006;
}
#gradientColor7 {
    width: 65px;
    background-color: #510006;
}

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

    /* Make all text as high contrast as possible. */
    #summaryText, #sourceAppName {
        opacity: 1.0;
    }
}