
/* ==========================================================
   LIVE TV PAGE INFORMATION NOTICE
   ========================================================== */

.gm-live-page-info {
    position: absolute;

    display: flex;
    align-items: center;

    min-height: 118px;

    padding:
        20px 24px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(20,24,32,.96),
            rgba(11,14,20,.98)
        );

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.20);

    color:
        rgba(255,255,255,.93);

    z-index: 4;
}


.gm-live-page-info::before {
    content: "📡";

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    margin-right: 17px;

    border-radius: 14px;

    background:
        rgba(244,37,77,.12);

    border:
        1px solid
        rgba(244,37,77,.22);

    font-size: 25px;
}


.gm-live-page-info-content {
    min-width: 0;
}


.gm-live-page-info-title {
    display: block;

    margin-bottom: 7px;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 800;

    color: #fff;
}


.gm-live-page-info-text {
    display: block;

    margin: 0;

    font-size: 13px;
    line-height: 1.65;

    color:
        rgba(255,255,255,.74);
}


.gm-live-page-info[
    dir="rtl"
] {
    text-align: right;
}


.gm-live-page-info[
    dir="rtl"
]::before {
    margin-right: 0;
    margin-left: 17px;
}


@media (
    max-width: 1000px
) {

    .gm-live-page-info {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        height: auto !important;

        margin:
            10px 0 22px;
    }
}


@media (
    max-width: 640px
) {

    .gm-live-page-info {
        align-items:
            flex-start;

        padding:
            16px;
    }


    .gm-live-page-info::before {
        flex-basis: 42px;

        width: 42px;
        height: 42px;

        margin-right: 12px;

        font-size: 20px;
    }


    .gm-live-page-info-title {
        font-size: 14px;
    }


    .gm-live-page-info-text {
        font-size: 12px;
        line-height: 1.55;
    }
}


@media (max-width: 1000px) {

    #gm-live-page-info.gm-live-page-info {

        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        transform:
            none !important;

        width:
            100% !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            16px 0 20px
            !important;

        z-index:
            2 !important;
    }
}


/* ==========================================================
   GM LIVE TV MOBILE NOTICE FLOW FIX V3
   Prevent initial clipped/absolute notice and reflow jump
   ========================================================== */

@media (max-width: 1000px) {

    #gm-live-tv-page-notice,
    .gm-live-tv-page-notice {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        inset: auto !important;

        transform: none !important;

        float: none !important;

        clear: both !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin-top: 18px !important;
        margin-right: 0 !important;
        margin-bottom: 28px !important;
        margin-left: 0 !important;

        z-index: 1 !important;

        overflow: visible !important;
    }


    #gm-live-tv-page-notice *,
    .gm-live-tv-page-notice * {

        max-height: none !important;
    }

}


/* ==========================================================
   GM LIVE TV NOTICE FINAL MOBILE FLOW V4
   Actual element = #gm-live-page-info.gm-live-page-info
   ========================================================== */

@media (max-width: 1000px) {

    html body #gm-live-page-info.gm-live-page-info,
    html body .gm-live-page-info,
    html body #gm-live-tv-page-notice,
    html body .gm-live-tv-page-notice {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        inset: auto !important;

        transform: none !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 16px 0 22px !important;

        overflow: visible !important;

        z-index: 1 !important;

        box-sizing: border-box !important;
    }


    html body #gm-live-page-info.gm-live-page-info *,
    html body .gm-live-page-info *,
    html body #gm-live-tv-page-notice *,
    html body .gm-live-tv-page-notice * {

        max-height: none !important;
    }

}
