/*----- Off Canvas Comments -----*/
.lf-no-scroll, .lf-no-scroll body {
    overflow: hidden;
}
.lf-no-scroll body {
    position: fixed;
    width: 100%;
}
html.lf-no-scroll.gigya-mobile-modal-mode body {
    /* fixes issue where gigya injects a style that sets body height to 0 */
    height: 100%;
}
.off-canvas, .off-canvas * {
    box-sizing: border-box;
}
.off-canvas {
    position: fixed;
    display: flex !important;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    transition: 300ms ease all;
}
.off-canvas--west {
    top: 0;
    right: -100vw;
}
.off-canvas--west:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20em;
    right: -5em;
    display: block;
    background: #fff;
    z-index: -1;
}
.off-canvas--west.show {
    transform: translateX(-100vw);
}
.off-canvas__header {
    display: flex;
    height: 3em;
    padding: .5em;
    background: #fff;
    border-bottom: 1px solid #999;
    box-shadow: 0 3px 3px rgba(0,0,0,.25);
    z-index: 1;
}
.off-canvas__header-count {
    text-transform: capitalize;
}
.off-canvas--header-item:nth-child(2) {
    display: flex;
    flex: 1 1 auto;
    align-self: auto;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: capitalize;
}
.off-canvas__body {
    height: calc(100vh - 3em);
    background: rgba(255,255,255,1);
    overflow: auto;
    -webkit-overflow-scrolling: touch !important;
}
.off-canvas__body > * {
    padding: 1em;
}
.off-canvas__body > *:empty {
    background-size: 200% 200%;
    background-image: linear-gradient(-55deg, #eee 0%, #eee 40%, #fff 50%, #eee 60%, #eee 100%);
    animation: AnimateBG 1.5s linear infinite;
    height: 100%;
    padding: 0;
}
@keyframes AnimateBG {
    0% {
        background-position: -50% 50%;
    }
    100% {
        background-position: 150% 50%;
    }
}
.off-canvas__toggle {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='48' viewBox='0 0 38 48'%3E%3Cpath fill='%23474747' d='M34.768 35.41q0 1.072-.75 1.822l-3.643 3.643q-.75.75-1.82.75t-1.822-.75L18.858 33l-7.875 7.875q-.75.75-1.82.75t-1.822-.75L3.7 37.232q-.75-.75-.75-1.82t.75-1.822l7.875-7.875-7.875-7.875q-.75-.75-.75-1.82t.75-1.822l3.643-3.643q.75-.75 1.822-.75t1.82.75l7.876 7.875 7.875-7.875q.75-.75 1.82-.75t1.822.75l3.643 3.643q.75.75.75 1.82t-.75 1.822l-7.875 7.875 7.875 7.875q.75.75.75 1.82z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}
.off-canvas__toggle--round {
    position: relative;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}
.off-canvas__body .fyre .fyre-stream-stats {
    display: none;
}
[name=comments].show {
    display: block;
    max-width: 50%;
    min-width: 25%;
    margin: 1em auto;
    padding: .25em 1em;
    border: 1px solid #0582ff;
    border-radius: .25em;
    text-align: center;
    cursor: pointer;
}
[name=comments].show:hover {
    background: #0582ff;
    color: #fff;
}

/* desktop off-canvas media queries */
@media screen and (min-width: 1025px) {
    .lf-no-scroll, .lf-no-scroll body {
        overflow: auto;
    }
    .off-canvas {
        width: 35vw;
        border-left: 1px solid #ccc;
    }
    .off-canvas--west {
        right: -35vw;
    }
    .off-canvas--west.show {
        transform: translateX(-35vw);
    }
    #rtb-comments .fyre .fyre-login-bar .fyre-user-loggedout::after {
        white-space: nowrap;
    }
    #rtb-comments .fyre .fyre-user-loggedout {
        white-space: nowrap;
    }
}
@media screen and (min-width: 1200px) {
    .off-canvas {
        width: 38vw;
    }
    .off-canvas--west {
        right: -38vw;
    }
    .off-canvas--west.show {
        transform: translateX(-38vw);
    }
}
@media screen and (min-width: 1500px) {
    .off-canvas {
        width: 41vw;
    }
    .off-canvas--west {
        right: -41vw;
    }
    .off-canvas--west.show {
        transform: translateX(-41vw);
    }
}

/* ---- RPSSL-884: Hiding LF Notification Bubble ---- */
.off-canvas .fyre-notifier-container {
    display: none !important;
}

/* ---- RPSSL-918: `Show More Comments` not exposed on OAP mobile ---- */
.off-canvas .fyre-comment-stream {
    padding-bottom: 60px;
}

/* ---- RPSSL-919: Desktop Comment Expander ---- */
.icon-enlarge, .icon-shrink {
    display: none;
}
.icon-enlarge, .icon-shrink {
    flex: 0 1 auto;
    align-self: auto;
    width: 1.25em;
    fill: #474747;
    cursor: pointer;
}
.off-canvas #rtb-comments {
    transition: 300ms ease width;
}

.fyre-stream-header {
    width: 100%;
}
.adi-lf-notification-settings {
    color: #0088EE;
    font-size: 12px;
    padding-top: 1em;
    font-weight: bold;
}
#feedforum-header .adi-lf-notification-settings {
    display: block;
    margin-top: 1em;
    text-align: right;
    border-bottom: 0;
}
.adi-lf-notification-settings::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("/static/common/img/sprites/svg/cogs-0088EE.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.adi-lf-notification-settings .settings {
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    margin-top: -2px;
    margin-left: 5px;
}

@media screen and (min-width: 1025px) {
    .expandable.active .icon-enlarge, .expandable .icon-shrink {
        display: none;
    }
    .expandable .icon-enlarge,.expandable.active .icon-shrink {
        display: block;
    }
    .off-canvas.fullscreen {
        width: 100vw;
    }
    .off-canvas--west.fullscreen {
        right: -100vw;
    }
    .off-canvas--west.show.fullscreen {
        transform: translateX(-100vw);
    }
    .off-canvas #rtb-comments {
        max-width: 50em;
        margin: 0 auto;
    }
}

/* off-canvas gigya login fix */
.cma .gigya-style-modern.gigya-screen-dialog-mobile div.gigya-screen-dialog-main {
    position: fixed;
    top: 0;
    height: 100vh;
}
.cma .gigya-style-modern.gigya-screen-dialog-mobile {
    position: fixed;
}
.lf-no-scroll body.cma {
    position: absolute;
}

/* notify user if commenting is unavailable */
.off-canvas__readonly {
    display: none;
}
[data-state="frozen"] > .off-canvas__readonly,
[data-state="disabled"] > .off-canvas__readonly {
    display: block;
}
[data-state="disabled"] > #rtb-comments {
    display: none;
}

/* RPSSL-1040: fix for MMS  */
.off-canvas #rtb-comments .fyre .fyre-live-container {
    display: block;
    min-height: 1em;
    float: none;
    margin-bottom: -2em;
}
#rtb-comments .fyre .fyre-live-container > * {
    display: none;
}

/* RPSSL-1247: Shoehorn blue bar styles */
.alert-viafoura {
  box-sizing: border-box;
  margin-bottom: 1em;
  padding: 1em;
  color: #222222;
  border-top: 2px solid #007EFF;
  background: #BBDEFB;
}

.alert-viafoura p {
    margin-bottom: 0;
}