﻿:root {
    --headerHeightNumber: 60px;
    --headerLogoImage: url(../Images/Icons/Netbackup/nss_logo.png);
    --headerBackgroundImage: none;
    --headerBackgroundColor: #F9F9F9;
    --pageOuterColor: #F0F0F0;
    --pageOuterBackgroundImage: none;
    --noticeInformationBackgroundColor: #FFFFFF;
    --noticeInformationTextColor: #1D1D1D;
    --noticeAlertBackgroundColor: #990101;
    --noticeAlertTextColor: #FFFFFF;
}

.PageTopContainer {
    background-color: var(--headerBackgroundImage);
    background-image: var(--headerBackgroundColor);
}

    .PageTopContainer .PageTop {
        background-color: transparent;
        background-repeat: repeat-x;
        position: relative;
    }

        .PageTopContainer .PageTop .Logo {
            background-image: var(--headerLogoImage);
            background-color: transparent;
            background-position: left center;
            background-repeat: no-repeat;
            width: 100%;
        }

            .PageTopContainer .PageTop .Logo a.LogoClickable {
                height: var(--headerHeightNumber);
                width: 300px;
                display: block;
                background-color: transparent;
                text-align: left;
            }

.TheBackground {
    background: var(--pageOuterBackgroundImage) var(--pageOuterColor) no-repeat fixed top center;
    background-size: cover;
    height: calc(100vh - var(--headerHeightNumber));
}

.TickerContent {
    --_tickerHeight: 30px;
    position: relative;
    margin-top: 6px;
    background-color: var(--noticeInformationBackgroundColor);
    color: var(--noticeInformationTextColor);
    height: var(--_tickerHeight);
    clear: both;
}

    .TickerContent ol {
        list-style-type: none;
        padding: 0 0 0 10px;
        margin: 0 77px 0 0;
        height: 100%;
    }

        .TickerContent ol li {
            height: var(--_tickerHeight);
            line-height: var(--_tickerHeight);
            font-size: 1.2em;
            vertical-align: middle;
            display: none;
            white-space: nowrap;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            width: 100%;
        }

            .TickerContent ol li .ClickableTickerItem {
                cursor: pointer;
            }

                .TickerContent ol li .ClickableTickerItem:hover {
                    text-decoration: underline;
                }

    .TickerContent .TickerControls {
        display: none;
        position: absolute;
        top: 0;
        right: 3px;
        height: var(--_tickerHeight);
        width: calc(var(--_tickerHeight)* 3 * 0.8);
        color: var(--noticeInformationTextColor);
    }

        .TickerContent .TickerControls .TickerPlayPauseControl, .TickerContent .TickerControls .TickerPreviousControl, .TickerContent .TickerControls .TickerNextControl {
            display: inline-block;
            width: calc(var(--_tickerHeight) * 0.8);
            height: var(--_tickerHeight);
            line-height: var(--_tickerHeight);
            vertical-align: middle;
            cursor: pointer;
            font-size: 1.4em;
            text-align: center;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .TickerContent .TickerControls .TickerPlayPauseControl {
            margin-top: calc(-var(--_tickerHeight) / 20);
        }

        .TickerContent .TickerControls.NoticeTypeAlert {
            color: var(--noticeAlertTextColor);
        }

            .TickerContent .TickerControls.NoticeTypeAlert .TickerPlayPauseControl.PauseButton:before, .TickerContent .TickerControls.NoticeTypeAlert .TickerPlayPauseControl.PauseButton:after {
                background-color: var(--noticeAlertTextColor);
            }

    .TickerContent.SingleItemMode ol {
        margin: 0 10px 0 0;
    }

    .TickerContent.SingleItemMode .TickerControls {
        display: none;
    }

    .TickerContent.NoticeTypeAlert {
        background-color: var(--noticeAlertBackgroundColor);
        color: var(--noticeAlertTextColor);
    }
