#app div:focus {
    outline: none;
}

/** For covering expanding MAST ad */
#atomic .YDC-Header {
    z-index: 2000 !important;
}

/** For covering Overlay layout temporaily*/
#atomic #YDC-Overlay-Stack {
    z-index: 3000 !important;
}

/* Stream ad money icon */
#YDC-Stream i svg,
.StreamAd i svg {
    width: 13px;
    height: 13px;
    fill: #979ba7 !important;
}

#news-story a,
#news-story a:link,
#news-story a:visited,
#news-story a:hover,
#news-story a:active,
#news-story a:focus {
    text-decoration: none;
    color: inherit;
}

@media only screen and (max-width: 768px) {
    /** shared style of ads and normal content item */
    #atomic .TopicList li[class^='Stream'] .Cf div:nth-child(2).Ov\(h\) > div {
        color: #b9bdc5;
        font-size: 14px;
        position: absolute;
        top: 86px;
    }
    /** mobile ads */
    #atomic .TopicList li.StreamAd .Cf {
        background-color: #fafaff;
        margin-top: 0;
    }
    #atomic .TopicList li.StreamAd .Cf > div > a {
        top: 85px;
        left: 194px;
        color: #b9bdc5 !important;
        max-width: 143px;
        max-height: 20px;
        overflow: hidden;
    }
    #atomic .TopicList li.StreamAd .Cf > div > div > a:nth-child(2) {
        top: -67px;
        left: 207px;
        position: absolute;
    }
    #atomic .TopicList li.StreamAd .Cf > div.Ov\(h\) {
        padding-right: 20px;
    }
    /** text only */
    #atomic .TopicList li.StreamMegaItem .Cf div:first-child.Ov\(h\) {
        height: 72px;
        padding-right: 0 !important;
    }
    #atomic .TopicList li.StreamMegaItem .Cf div:first-child.Ov\(h\) > div {
        color: #b9bdc5;
        font-size: 14px;
        position: absolute;
        top: 72px;
    }
    /** with image */
    #atomic .TopicList li.StreamMegaItem .Cf div:nth-child(2).Ov\(h\) {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Navigation: second tier nav item */
#atomic .nr-applet-nav-item.nr-subnav-link {
    font-size: 15px !important;
}
#atomic .nr-secondtier-nav-item.Hblue a:nth-child(n) {
    color: #0f69ff;
}

.fallback-image-dark {
    background-image: url(https://s.yimg.com/dh/ap/default/161211/bg_dark.jpg);
}
.fallback-image-warm {
    background-image: url(https://s.yimg.com/dh/ap/default/161211/bg_warm.jpg);
}
.fallback-image-cool {
    background-image: url(https://s.yimg.com/dh/ap/default/161211/bg_cool.jpg);
}

/* for lib under smartcontent */
.archive .scroll-bound {
    -webkit-overflow-scrolling: touch;
}
.archive .native-indicator .scroll-bound,
.archive .native-indicator .scroll-content {
    margin: 0 !important;
}
.archive .SelectBox {
    top: 0 !important;
}
.archive .SelectBox-Pick {
    top: 0 !important;
    padding: 4px 25px 4px 10px !important;
}
.archive .SelectBox-Pick svg {
    vertical-align: middle !important;
    margin-right: 4px;
}
.archive .SelectBox-Text {
    font-weight: 400;
}

/* tdv2-dev-info */
.tdv2-dev-info {
    z-index: 3000 !important;
}
/* Modal */
.CompanionSlot {
    width: 100px !important;
}
.YDC-Height-Container {
    padding-bottom: 10px;
}

/* Modal customize */
div.YDC-Bottom1-Stack {
    background-color: #fff;
    padding: 0 48px;
}
/* The follow css is hidden for testing modal view with only one comment */
/* div.RList,div.RCarousel,div#modalAS6-6-sizer{padding:0 352px 0 0;} */
div.YDC-Bottom1,
div.YDC-Bottom {
    background-color: #fff !important;
    padding: 0 !important;
}
div.YDC-Bottom1 {
    padding: 0 0 100px !important;
}
div.modalRight {
    z-index: 100;
}
div[data-test-locator='article'] {
    border-top: 0 !important;
}
article header.canvas-header,
article div.auth-attr {
    display: none;
}
div.YDC-CONTENT0-Stack header.canvas-header,
div.YDC-CONTENT1-Stack header.canvas-header {
    padding-top: 35px;
    border-top: 1px solid #979ba7;
}
div[data-test-locator='article'] .Maw\(635px\) {
    max-width: 730px !important;
    min-width: 454px !important;
    margin: 0 395px 0 50px !important;
}

/* Topic navigation */
.flex-container::before,
.flex-container::after {
    content: '';
    width: 100%;
    order: 1;
}
.flex-item:nth-child(n + 4) {
    order: 1;
}
.flex-item:nth-child(n + 7) {
    order: 2;
}

/* lightbox container style */
#myLightboxContainer {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
}

/* ybar*/
div#YDC-UH-Stack {
    border: 0;
    margin-bottom: 20px;
}
#ybar-inner-wrap {
    left: 0;
    background: white;
    box-shadow: none !important;
}

.provider-anchor:before {
    content: '';
    display: block;
    height: 140px;
    margin: -140px 0 0;
}
.twnews-mobi-container .provider-anchor:before {
    content: '';
    display: block;
    height: 100px;
    margin: -100px 0 0;
}

.topic-desc:before {
    content: '';
    background-color: #b9bdc5;
    border-radius: 5px;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
}

.topic-story-class-list::-webkit-scrollbar,
.topic-videoplaylist-desktop-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.topic-story-class-list::-webkit-scrollbar-thumb,
.topic-videoplaylist-desktop-list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.topic-issues {
    -ms-overflow-style: none; /* IE and Edge hide scrollbar */
    scrollbar-width: none; /* Firefox hide scrollbar */
}

.topic-issues::-webkit-scrollbar {
    display: none;
}

.tooltips:hover .tooltips-label-svg {
    color: #7759ff;
}

.tooltips:hover .tooltips-label-svg svg {
    fill: #7759ff !important;
    stroke: #7759ff !important;
}

@media only screen and (max-width: 767px) {
    .topic-desc-social-share {
        width: calc(100vw - 40px);
    }

    .topic-desc {
        width: calc(100vw - 40px);
    }

    .topic-desc:before {
        display: none;
    }

    .topic-navigation,
    .topic-mobile-scroller {
        -ms-overflow-style: none; /* IE and Edge hide scrollbar */
        scrollbar-width: none; /* Firefox hide scrollbar */
    }

    .topic-navigation::-webkit-scrollbar,
    .topic-mobile-scroller::-webkit-scrollbar {
        display: none;
    }

    #MedalCount.medal-count-custom th[data-id='country'] {
        min-width: 100px;
    }
}

/** For follow page background-color */
html[class*='AbuThreeColumnLayout'] body {
    background-color: #f8f8f8;
}

/* jac-custom added in applet */
.jac-custom .jac-container {
    margin: 0 auto;
}

.simple-spinner {
    animation: spin 1s ease-out infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.mobileModalSlideIn {
    animation: slideIn 0.2s;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(300px);
        animation-timing-function: ease-out;
    }
    90% {
        transform: translateY(10px);
        animation-timing-function: ease-in;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }
}

.mobileModalSlideOut {
    animation: slideOut 0.2s;
}

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateY(290px);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        transform: translateY(300px);
        animation-timing-function: ease-out;
    }
}

@font-face {
    font-family: 'Yahoo Sans';
    src: url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Regular.eot');
    src:
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Regular.eot?#iefix')
            format('embedded-opentype'),
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Regular.woff2') format('woff2'),
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Yahoo Sans';
    src: url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Semibold.eot');
    src:
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Semibold.eot?#iefix')
            format('embedded-opentype'),
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Semibold.woff2') format('woff2'),
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Yahoo Sans';
    src: url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Bold.eot');
    src:
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Bold.eot?#iefix')
            format('embedded-opentype'),
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Bold.woff2') format('woff2'),
        url('https://s.yimg.com/cv/ae/sports/fonts/2017/Yahoo_Sans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

.Ff\(YahooSans\) {
    font-family: 'Yahoo Sans' !important;
}

/*

CSS veriable for fuji
cp from HL/color-palette
*/

html {
    --C-DirtySeagull: #e0e4e9;
    --C-Black: #000000;
    --C-White: #ffffff;
    --C-Batcave: #232a31;
    --C-Dolphin: #6e7780;
    --C-Battleship: #5b636a;
    --C-Blurple: #5d5eff;
    --C-Bob: #b0b9c1;
    --C-Dory-rgb: 15, 105, 225;

    --single-line-primary: var(--C-DirtySeagull);
    --single-line-article: var(--C-Black);
    --bg-1: var(--C-White);
    --text-primary: var(--C-Batcave);
    --text-secondary: var(--C-Dolphin);
    --text-secondary-alt: var(--C-Battleship);
    --text-teritary: var(--C-Bob);
    --text-hover: var(--C-Blurple);
    --icon-primary: var(--C-Batcave);
    --link-active-rgb: var(--C-Dory-rgb);

    scroll-behavior: smooth;
}

/* TWMOBI-8085: workaround for logo update in utility header */
/* https://git.ouryahoo.com/abu-news/tdv2-applet-header/blob/master/src/components/UtilityHeader.jsx#L36 */
/* new logo needs bigger space */
#UH-0-UtilityHeader-Proxy h1 img[src*='logo2024/Mobile/Yahoo_'] {
    width: 100px;
}
/* https://git.ouryahoo.com/abu-news/tdv2-applet-header/blob/6c273dd4030d951364dab683f90205f3e1520dbc/src/components/UtilityHeader.jsx#L74 */
/* change back btn color */
#UH-0-UtilityHeader-Proxy [data-icon='caret-left'] {
    fill: #7d2eff !important;
    stroke: #7d2eff !important;
}