body {
    font-family: sans-serif;
}

/* Make content area fill the entire browser window */
html,
.fullscreen {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Center the content in the browser window */
.container {
    margin: auto;
    text-align: center;
}

.title {
    font-size: 2rem;
}


.title {
    font-size: 1.2rem;
}


.connStatus {
    font-size: 1rem;
}

.unknown
{
    color:#2a2a2a;
}

.online
{
    color:#1b5e20;
}

.offline
{

    color:#d32f2f;
}


#notification {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
}

#notification.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

button.topNavMenuButton{
    background: #ff8300;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff8300), to(#ffbf61)) !important;
    background: linear-gradient(to bottom, #ff8300 70%, #f9e7d0 100%) !important;
    font-size: 9px;
    font-family: sans-serif;
    color: #FFF;
    letter-spacing: 1px;
    width:35px;
    height:35px;
    padding:0px;
    margin:0px;

}

#raceButtonsWrap
{
    float:right;


}


button.topNavMenuRace
{
    border: 1px solid #FFF;
    border-radius: 3px;

    color:#FFF;

    font-size: 18px;
    font-weight: bold;
    width: 25px;
    height: 30px;
    font-family: sans-serif;

}


button.topNavMenuRace:hover
{

}

button.topNavMenuRace:active
{

}

#topLedger1
{
    background:#000;
    font-size:11px;
    height:4%;
    letter-spacing:0.5px;
}

#butWatchLive
{
    background: linear-gradient(180deg,#6098ff4a 0,#1854c3)!important;
}

#butWatchLive i
{
    font-size:18px;

}

#topLedger1_betmode
{
    background:#3d1300;
    font-size:12px;
}

#topLedger2
{
    height:25px;
    border-top:2px solid #c63e0c;
    background:#303030;
    font-size:12px;
}

#mainSection
{
    height:75%;
    width:100%;
    overflow:auto;
}

#footerLedger1
{
    background:#acacae;
    font-size:11px;
/*    height:4%;    */
    height:30px;
    letter-spacing:0.5px;
    border-top:2px solid #09224b;
}

#footerLedger2
{
  
    bottom:0px;
    background:#0a0f35;
    font-size:12px;
}


div .rowRunner
{

    color:#000;
    font-size:12px;
    font-family:Arial;
    border-bottom:1px solid #000;
}
.fs--5
{
    font-size:5px;
}


.fs--6{
    font-size:6px;
}

.fs--7{
    font-size:7px;
}
.fs--9{
    font-size:9px;
}
.fs--10{
    font-size:10px;
}

span.spnJockey ,span.spnStable, span.spnWeight
{
    font-size:8px;
}

div.butWin ,div.butPlace
{
    width:50px;
    height:30px;
    background: linear-gradient(to bottom, #ccf0e8 70%, #f9e7d0 100%) !important;
    border:1px solid #000;
    font-size:12px;
    color:#000;
    font-weight:bold;
    border-radius: 10px;
}

div.butWinSelected ,div.butPlaceSelected
{
    width:50px;
    height:30px;
    background: linear-gradient(to bottom, #09224b 70%, #3b44f9 100%) !important;
    border:1px solid #CCC;
    font-size:12px;
    color:#FFF;
    font-weight:bold;
    letter-spacing:1px;
    border-radius: 10px;
}





.dvRunnerNumber
{
    font-size:16px;
    font-weight:bold;

}

#footerLedger1_announcement , #row_footerLedger1_betString
{
    color:#000;
    font-weight:bold;
    height:25px;

}






.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}

@keyframes marquee {
    0% { transform: translate(80%, 0); -webkit-transform: translateX(80%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}
.marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 30s linear infinite;
}



.spnRunnerName
{
    font-size:14px;
    font-weight:bold;
    color:#09224b;
}

#amountLabel
{

    float: left;
    font-size: large;

    margin-right: 5px;
}


#amountInput
{

    height: 35px;
    float: right;
    width: 70px;
}




#butAddBet{
    color:#000;
    background: #4bac00d1;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4bac00d1),to(#173400))!important;
    background: linear-gradient(180deg,#4bac00d1    0,#173400)!important;
    padding: 2px 4px;
    border: 1px solid #FFF;
}

#butClear {
    color:#000;
    background: #ff0000;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ff0000),to(#993535))!important;
    background: linear-gradient(180deg,#ff0000 0,#993535)!important;
    padding: 2px 4px;
    border: 1px solid #FFF;
}

#raceButtonsWrap .inactiveBut
{
    background: #a9a9a973;
    color: #FFF;
}


#raceButtonsWrap .activeBut
{
    background: #08234b;
    color: #FFF;
}

#raceButtonsWrap .selectedBut
{
    background: #70f451;
    color: #09224b;
}


.toast-body {
    padding:0px;
}


div.butRank
{
    width:25px;
    height:25px;
    background: linear-gradient(to bottom, #ccf0e8 70%, #f9e7d0 100%) !important;
    border:1px solid #000;
    font-size:10px;
    color:#000;
    font-weight:normal;
    border-radius: 15px;
    margin:0px 3px;
}

div.butRankSelected
{
    width:30px;
    height:30px;
    background: linear-gradient(to bottom, #09224b 70%, #3b44f9 100%) !important;
    border:1px solid #CCC;
    font-size:10px;
    color:#FFF;
    font-weight:bold;
    letter-spacing:1px;
    border-radius: 20px;
    margin:0px 3px;
}