﻿/* CSS Palette http://paletton.com/#uid=7000v0ku1pVq3uFtKu2uAn3vGkw */
/* Global */
body {
    margin: 0px;
    padding: 0px;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
}
/* Menu system */
.TopMenuCont {
    border-bottom: 1px solid #999;
    width: 100%;
    height: 55px;
    color: #39668e;
    background-color: #e0e9f1;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 1024px;
}

    .TopMenuCont div {
        float: left;
        display: block;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    }

/* Logo */
.LogoCont {
    border-right: 1px solid #999;
    padding: 2px 5px 0px 5px;
    background-color: white;
    height: 53px;
}

/* Menu header */
.MenuHeaderCont {
    padding: 10px 12px 9px 12px;
    border-right: 1px solid #999;
    background-color: rgba(255, 255, 255, 0.498039);
    height: 36px;
}

    .MenuHeaderCont h1 {
        font-size: 16px;
        margin-top: 6px;
        display: block;
    }

/* Left navigation menu*/
.Left_NavigationMenu {
    list-style: none;
    padding: 0px 0px 0px 10px;
    margin: 0px;
    height: 100%;
    float: left;
}

li.NavigationItem {
    float: left;
    padding-left: 10px;
    height: 58px;
    display: block;
    position: relative;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    background-color: transparent;
}

    li.NavigationItem.HasDelay {
        -webkit-transition: background 0s, border 0s;
        -moz-transition: background 0s, border 0s;
        -ms-transition: background 0s, border 0s;
        -o-transition: background 0s, border 0s;
        transition: background 0s, border 0s;
        transition-delay: .15s;
    }

        li.NavigationItem.HasDelay:hover, li.NavigationItem.Expanded {
            border-left: 1px solid #999;
            border-right: 1px solid #999;
            background-color: #ffffff;
        }

    li.NavigationItem div.Navigation_Header {
        text-decoration: none;
        color: inherit;
        font-weight: bold;
        font-size: 1.025rem;
        display: block;
        margin-top: 16px;
        padding-right: 25px;
        background-image: url("/Images/Menu/arrow_blue.png");
        background-size: 24px 24px;
        background-repeat: no-repeat;
        background-position: right 1px;
        box-shadow: none;
        cursor: pointer;
    }

.Submenu {
    position: absolute;
    list-style: none;
    white-space: nowrap;
    padding: 5px;
    background-color: white;
    border: 1px solid #999;
    margin-left: -11px;
    top: 56px;
    border-top: none;
    opacity: 0;
    visibility: hidden;
    z-index: 5000;
}

    .Submenu.HasDelay {
        transition-delay: .15s;
    }

        .Submenu.HasDelay.Expanded {
            transition: visibility 0.0s,opacity 0.0s;
            -o-transition: visibility 0.0s,opacity 0.0s;
            -ms-transition: visibility 0.0s,opacity 0.0s;
            -moz-transition: visibility 0.0s,opacity 0.0s;
            -webkit-transition: visibility 0.0s,opacity 0.0s;
            transition-delay: .15s;
        }

    .Submenu.Expanded {
        opacity: 1;
        visibility: visible;
        transition: visibility 0.0s,opacity 0.0s;
        -o-transition: visibility 0.0s,opacity 0.0s;
        -ms-transition: visibility 0.0s,opacity 0.0s;
        -moz-transition: visibility 0.0s,opacity 0.0s;
        -webkit-transition: visibility 0.0s,opacity 0.0s;
    }

    .Submenu li.Submenu_Item:hover {
        background-color: #E0E9F1;
    }

    .Submenu li.Submenu_Item {
        padding: 5px 10px;
    }

        .Submenu li.Submenu_Item a {
            height: 16px;
            display: block;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .Submenu li.Submenu_Item.UnderHeader {
            padding-left: 15px;
        }

    .Submenu li.Submenu_Header {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 16px;
    }

    .Submenu li.Submenu_Divider hr {
        border: none;
        border-top: 1px solid #999;
        padding: 0px;
        margin: 3px;
    }

    .Submenu li.Submenu_Divider {
        height: 1px;
        padding-bottom: 3px;
    }

/* Right navigation menu*/
.Right_NavigationMenu {
    float: right;
    list-style: none;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    height: 100%;
}

    .Right_NavigationMenu ul.Submenu {
        margin-left: -200px;
    }


    .Right_NavigationMenu li.NavigationItem {
        padding-left: 0px;
    }




.NavigationItem div.Glyph {
    margin-top: 12px;
    width: 32px;
    height: 32px;
    display: block;
    box-shadow: none;
    cursor: pointer;
}

    .NavigationItem div.Glyph.User {
        background-image: url("/Images/Menu/User.png");
        background-size: 32px;
    }



li.Submenu_Item.UserInfo {
    height: 16px;
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

    li.Submenu_Item.Disabled:hover, li.Submenu_Item.UserInfo:hover {
        background-color: transparent;
    }

li.Submenu_Item.Disabled a {
    color: #bbbbbb;
    cursor: default;
}

/* Every page */
#PageCont {
    padding: 10px;
}

/* Revenue */
.ReportTitleCont {
    border-bottom: 1px solid #aaa;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    overflow: hidden;
}

.ReportTitle {
    margin: 0px;
    float: left;
}

#DaysLeft {
    float: right;
}

/*

#DLNumber1, #DLNumber2 {
	background-color: #3A678E;
	color: white;
	font-size: 31px;
	height: 38px;
	display: block;
	float: left;
	width: 30px;
	text-align: center;
	margin-left: 4px;
	border-radius: 5px;
}*/

#DLMessage {
    display: block;
    float: left;
    margin-top: 9px;
    margin-left: 10px;
}

.GaugeLabel, .GaugeValue {
    display: block;
}

.GaugeLabel {
    color: green;
    font-size: 32px;
}

#NCAChange .GaugeLabel {
    color: red;
    font-size: 22px;
    margin-left: 55px;
    margin-bottom: 20px;
}

.GaugeLabel.Reverse {
    color: red;
}

.GaugeValue {
    font-size: 20px;
    margin-left: 15px;
    margin-top: -5px;
}

#NCAChange .GaugeValue {
    font-size: 20px;
    margin-left: 0px;
    margin-right: 40px;
    margin-top: -25px;
}

.ChartRow {
    clear: both;
    overflow: hidden;
    padding-bottom: 10px;
    float: left;
}

    .ChartRow .ChartCont:not(:first-child) {
        margin-left: 10px;
    }

.ChartTitle {
    margin: 0px;
    border-bottom: 1px solid #aaa;
    font-size: 22px;
    text-shadow: 1px 1px 1px #ccc;
    padding: 5px;
    background: rgb(246,248,249); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
    border-radius: 5px 5px 0px 0px;
    font-weight: normal;
}

#NonSetupCompletionChart, #SetupCompletionChart {
    clear: both;
}

.StatCont {
    overflow: hidden;
    float: left;
    margin: 10px;
}

    .StatCont:not(:last-child) {
        margin-right: 50px;
    }

    .StatCont .NumberBoxCont {
        margin-top: 10px;
    }

    .StatCont > div {
        margin-right: 20px;
    }

.StatContTitle {
    font-size: 15pt;
    margin: 0px;
    text-align: center;
}


#SetupCompletionChart, #NonSetupCompletionChart, #SetupHistoricChart, #NonSetupHistoricChart,
#TTFAMTDChart, #TTFAHistoricChart {
    width: 450px;
    height: 230px;
    float: left;
}

#TTAWeeklyChart, #TTAMonthlyChart {
    float: left;
    height: 308px;
    width: 450px;
}

.ChartCont {
    float: left;
    border: 1px solid #aaa;
    box-shadow: 0px 2px 5px #aaa;
    border-radius: 5px 5px 0px 0px;
    position: relative;
}

.ChartPanel.QuarterPanel .ChartCont {
    width: 100%;
}

.ChartPanel.QuarterPanel {
    width: 920px;
    height: 390px;
    margin: auto 10px 10px 10px;
    float: left;
}

.TTFATable {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    border-collapse: collapse;
    text-align: center;
    width: 99%;
}



    .TTFATable th {
        font-weight: normal;
    }

        .TTFATable th.Urgent, .TTFATable th.High, .TTFATable th.Medium {
            font-size: 1.3em;
        }

        .TTFATable th.Urgent {
            color: #F42D2D;
            border-bottom: 1px solid #F42D2D;
            background-color: rgba(244, 45, 45, 0.3);
        }

    .TTFATable .UrgentBorder {
        border-right: 1px solid #F42D2D;
    }

    .TTFATable th.High {
        color: #EF7811;
        border-bottom: 1px solid #EF7811;
        background-color: rgba(244,137,45,0.3);
    }

    .TTFATable .HighBorder {
        border-right: 1px solid #EF7811;
    }

    .TTFATable th.Medium {
        color: #069306;
        border-bottom: 1px solid #069306;
        background-color: rgba(6, 147, 6, 0.3);
    }

    .TTFATable th.StatTH {
        width: 90px;
        font-size: 1.2em;
    }

#TTFACont .StatCont {
    margin-right: 0px;
}

#TTFACont .StatContTitle {
    text-align: left;
}

.ChartCont.Loading .ChartTitle {
    opacity: .4;
}

.ChartCont.Loading .LoadingCont {
    display: block;
}

.StatGroupHeader {
    float: left;
}

.StatGroupHeader {
    float: left;
    margin-top: 29px;
    text-align: right;
    width: 77px;
    clear: both;
    color: #333;
}

    .StatGroupHeader:first-child {
        margin-top: 50px;
    }

.LoadingCont {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 144px;
    height: 15px;
}


.Chart.Gauge {
    min-width: 500px;
    min-height: 360px;
}

.Chart.Area {
    min-width: 800px;
    min-height: 360px;
}

/*.Chart.NumberBoxCont {
	float: left;
	display: block;
	overflow: hidden;
}
.Chart.NumberBoxCont div {
	float: left;
	display: block;
	overflow: hidden;
}
.Chart.NumberBoxCont div .NumberBox	{
	margin-bottom:10px;
}
.Chart.NumberBoxCont .NumberBoxTitle {
	margin:0 0 10px 0px;
} 
.Chart.NumberBoxCont .NumberBoxLabel {
	text-align:center;*/

}

.Chart.Summary {
    min-height: 180px;
    min-width: 450px;
    padding: 5px;
}

.ChartCont.YTD {
    margin-bottom: 10px;
}

.TotalChartTable {
    border-collapse: collapse;
    width: 100%;
}

    .TotalChartTable .TotalChart_Value {
        font-size: 37px;
        text-align: right;
    }

.TotalChart_Value.Positive {
    color: #008000;
}

.TotalChart_Value.Negative {
    color: #FF0000;
}

.TotalChart_Icon {
    text-align: right;
}

    .TotalChart_Icon img {
        width: 48px;
    }

.TotalChart_SummaryRow td {
    border-top: 1px solid #aaaaaa;
}

.TotalChart_Description {
    color: #444;
    padding-left: 20px;
    font-weight: bold;
    padding-right: 20px;
}

/* Year/Month Picker */
.YearMonthPicker {
    position: absolute;
    z-index: 200;
    width: 168px;
    display: block;
    background-color: white;
    border-radius: 3px;
    border: 1px solid #999;
    box-shadow: 0px 0px 3px #666;
}

.YearMonthPicker_Year {
    border: 1px solid #999;
    margin: 2px;
    border-radius: 3px;
    background: rgb(226,226,226); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}

    .YearMonthPicker_Year select {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

.YearMonthPicker_Months {
    margin: 3px;
}


    .YearMonthPicker_Months ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
        overflow: hidden;
    }

        .YearMonthPicker_Months ul li {
            display: block;
            float: left;
            width: 50px;
            border: 1px solid #ccc;
            margin: 1px;
            text-align: center;
            height: 31px;
            background: #f5f5f5;
            box-shadow: 0px 0px 1px #ddd;
        }

            .YearMonthPicker_Months ul li:hover {
                border: 1px solid #aaaaaa;
                background: rgb(235,241,246); /* Old browsers */
                background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,241,246,1)), color-stop(50%,rgba(171,211,238,1)), color-stop(51%,rgba(137,195,235,1)), color-stop(100%,rgba(213,235,251,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* IE10+ */
                background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
            }

            .YearMonthPicker_Months ul li a {
                padding-top: 5px;
                padding-bottom: 5px;
                display: block;
                text-decoration: none;
                color: #333;
            }

.Glyph.Calendar {
    background-image: url("../Images/Calendar.png");
    background-size: 32px 32px;
    background-repeat: no-repeat;
    display: block;
    float: left;
    width: 32px;
    height: 32px;
}

#ChangeReport {
    margin-left: 12px;
    margin-top: 2px;
}
/* Old CSS */
.ProductChart {
    float: left;
}

.HeaderBox {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    display: table;
    margin-bottom: 20px;
    text-align: center;
}

.slick-box {
    position: relative;
    border: 1px solid #efefef;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}


    .slick-box:before, .slick-box:after {
        content: '';
        z-index: -1;
        position: absolute;
        left: 10px;
        bottom: 10px;
        width: 70%;
        max-width: 300px; /* avoid
rotation causing ugly appearance at large container widths */
        height: 55%;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        transform: skew(-15deg) rotate(-6deg);
        -webkit-transform: skew(-15deg) rotate(-6deg);
    }

    .slick-box:after {
        left: auto;
        right: 10px;
        transform: skew(15deg) rotate(6deg);
        -webkit-transform: skew(15deg) rotate(6deg);
    }

#NavBar {
    height: 90px;
    margin-bottom: 20px;
    position: fixed;
    min-width: 195px;
}

    #NavBar img {
        border: 1px solid #999;
        box-shadow: 1px 1px 5px gray;
        padding: 10px;
        border-radius: 5px;
        float: left;
        background-color: White;
    }

    #NavBar ul {
        float: left;
        display: block;
        margin-top: auto;
        height: 60px;
        padding: 15px 0px 15px 0px;
    }

    #NavBar li {
        float: left;
        display: block;
        background-color: white;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        border-left: none;
        box-shadow: 1px 1px 5px gray;
        width: 100px;
        height: 100%;
        overflow: hidden;
    }

        #NavBar li.Selected {
            background-color: #F6A20A;
            box-shadow: 1px 1px 5px gray, inset 0px 0px 10px white;
        }

        #NavBar li a {
            text-align: center;
            text-decoration: none;
            display: block;
            padding-top: 22px;
            height: 100%;
        }

        #NavBar li:last-child {
            border-radius: 0 10px 10px 0;
        }

        #NavBar li a:visited, #NavBar li a:link {
            color: inherit;
        }

        #NavBar li:hover {
            box-shadow: inset 1px 1px 5px gray;
        }

        #NavBar li.Selected a {
            font-weight: bold;
            color: White;
        }

    #NavBar:after {
        clear: both;
    }

#CurrentUserCont {
    right: 0px;
    position: absolute;
    top: 0px;
    padding: 10px 10px 10px 130px;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(101,153,193,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(101,153,193,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(101,153,193,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(101,153,193,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(101,153,193,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(101,153,193,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6599c1',GradientType=1 ); /* IE6-9 */
}

    #CurrentUserCont span {
        color: white;
        text-shadow: 1px 1px 6px black;
    }

#ProgBar {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#ProductGoals {
    padding-top: 20px;
}

#HistDayList {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    #HistDayList li {
        display: inline-block;
    }

        #HistDayList li a {
            display: inline-block;
            text-decoration: none;
            border: 1px solid #666666;
            border-radius: 5px;
            padding: 10px;
            color: Black;
        }

            #HistDayList li a.Selected {
                background-color: #FFFFBB;
                box-shadow: inset 2px 2px 5px gray;
            }

#MatchupTable {
    float: left;
}

#HistoricTable {
    float: left;
    margin-left: 20px;
}

    #HistoricTable tbody td {
        border: none;
    }

.HistoricWin {
    color: #00aa00;
    font-weight: bold;
}

.HistoricLose {
    color: #ee0000;
    font-weight: bold;
}

.dataTables_wrapper {
    clear: none !important;
    width: 600px;
    float: left;
    margin-right: 40px;
    box-shadow: 0px 5px 5px -1px rgba(0,0,0,.5);
}

#InactiveTable .TableTitle, #GameTable .TableTitle {
    background-color: #38658D;
    color: white;
    padding: 10px;
}

/* Buttons */
.Button.Left {
    float: left;
}

.Button.Right {
    float: right;
}

.Button.Flat {
    border-radius: 2px;
    text-decoration: none;
    padding: 3px;
    border: 1px solid transparent;
    box-shadow: 0px 1px 2px #aaa;
    transition: all linear .125s;
    -webkit-transition: all linear .125s;
    -moz-transition: all linear .125s;
    -o-transition: all linear .125s;
    display: block;
    text-align: center;
    cursor: pointer;
}

    .Button.Flat.Small {
        min-width: 60px;
        font-size: 9pt;
    }

    .Button.Flat.Medium {
        min-width: 80px;
        font-size: 10pt;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .Button.Flat.Large {
        min-width: 120px;
        height: 20px;
        padding-top: 10px;
    }

    .Button.Flat.Blue {
        color: white;
        background-color: #38658D;
        border-color: #0A131B;
    }

        .Button.Flat.Blue:hover:not(.Disabled) {
            background-color: rgba(56, 101, 141, 0.65);
        }

    .Button.Flat.Green {
        background-color: #AAC543;
        color: white;
        border-color: #8DA825;
    }

        .Button.Flat.Green:hover:not(.Disabled) {
            background-color: #BBD262;
        }

    .Button.Flat.Red {
        color: white;
        border-color: #990000;
        background-color: #CC4444;
    }

        .Button.Flat.Red:hover:not(.Disabled) {
            background-color: #CC7777;
        }

    .Button.Flat.Black {
        background-color: #333;
        border-color: black;
        color: white;
    }

        .Button.Flat.Black:hover:not(.Disabled) {
            background-color: #666;
        }


    .Button.Flat.Gray {
        color: #333333;
        border-color: #666666;
        background-color: #dddddd;
    }

        .Button.Flat.Gray:hover:not(.Disabled) {
            background-color: #eeeeee;
        }

    .Button.Flat.Disabled {
        background-color: #f5f5f5;
        color: #aaa;
        box-shadow: none;
        border-color: #aaa;
        cursor: default;
    }

.ButtonCont {
    margin-bottom: 10px;
    padding: 5px;
    overflow: hidden;
}

    .ButtonCont a.Button {
        margin-right: 10px;
    }
