/*============================= CSS STYLES FOR Whitelabels =============================*/
/* ================================
    CSS STYLES FOR WS PORTAL 
    v1.0, 01/2001
   ================================
*/


/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */

.Background
{
    background-color: #ffffff;
    margin: 5px;
}

.bgcolor
{
    background-color: #0E3290;
}

.event
{
    font-weight: bold;
    font-size: 11px;
    color: #ffffff;
    font-family: Tahoma, Helvetica, sans-serif;
}

.event2
{
    font-weight: bold;
    font-size: 11px;
    color: #ffffff;
    background-color: #258FCD;
    font-family: Tahoma, Helvetica, sans-serif;
}

.HeaderBG
{
    background-color: #258FCD;
}

.HeaderBG2
{
    background-color: #258FCD;
}

.PendingBG
{
    background-color: #ffd700;
}

.DangerBG
{
    background-color: #ffd700;
}

.RejectedBG
{
    background-color: #ffccff;
}

.Rejected
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: red;
}
.NewBG
{
    background-color: #DCDCDC;
}

.NewBG1
{
    background-color: #DEDEDE;
}

.HDPBG
{
    background-color: #eee8aa;
}

.HDPBG2
{
    background-color: #cd853f;
}

.Sep
{
    border-collapse: collapse;
    border-left-style: solid;
    border-left-width: 2;
}

.OUBG
{
    background-color: #e6e6fa;
}

.OUBG2
{
    background-color: #7b68ee;
}

.HighLightBG
{
    background-color: #ffffCC;
}

.PanelBG
{
    background-color: #FFFBEF;
}

.Message
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    color: #FFFFFF;
}

A.Message:link
{
    text-decoration: none;
    color: #FFFFFF;
}

A.Message:visited
{
    text-decoration: none;
    color: #FFFFFF;
}

A.Message:active
{
    text-decoration: none;
    color: #FFFFFF;
}

A.Message:hover
{
    text-decoration: none;
    color: #FFFFFF;
}

.Message2
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    color: yellow;
    text-decoration: none;
}

.Tab
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color: #ffd700;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
}

A.Tab:link
{
    text-decoration: none;
    color: #ffd700;
}

A.Tab:visited
{
    text-decoration: none;
    color: #ffd700;
}

A.Tab:active
{
    text-decoration: none;
    color: #c5c5c5;
}

A.Tab:hover
{
    text-decoration: none;
    color: #c5c5c5;
}

.TabButton
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

A.TabButton:link
{
    text-decoration: none;
    color: #ffffff;
}

A.TabButton:visited
{
    text-decoration: none;
    color: #ffffff;
}

A.TabButton:active
{
    text-decoration: none;
    color: #ffffff;
}

A.TabButton:hover
{
    text-decoration: none;
    color: #ffd700;
}

.TabButton2
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

A.TabButton2:link
{
    text-decoration: none;
    color: #ffffff;
}

A.TabButton2:visited
{
    text-decoration: none;
    color: #ffffff;
}

A.TabButton2:active
{
    text-decoration: none;
    color: #ffffff;
}

A.TabButton2:hover
{
    text-decoration: none;
    color: #ffffff;
}

.GB
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
}

.Sep
{
    background-color: #ffffff;
}

.Panel
{
    background-color: #333333;
    border-color: #A8A8A8;
    border-collapse: collapse;
}

.Link
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #ffe600;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

A.Link:link
{
    text-decoration: none;
    color: #ffe600;
}

A.Link:visited
{
    text-decoration: none;
    color: #ffe600;
}

A.Link:active
{
    text-decoration: none;
    color: #ffe600;
}

A.Link:hover
{
    text-decoration: none;
    color: #ff0000;
}

.Link2
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color: blue;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

A.Link2:link
{
    text-decoration: none;
    color: blue;
}

A.Link2:visited
{
    text-decoration: none;
    color: blue;
}

A.Link2:active
{
    text-decoration: none;
    color: blue;
}

A.Link2:hover
{
    text-decoration: underline;
    color: blue;
}


.Link3
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

A.Link3:link
{
    text-decoration: none;
    color: #000000;
}

A.Link3:visited
{
    text-decoration: none;
    color: #000000;
}

A.Link3:active
{
    text-decoration: none;
    color: #000000;
}

A.Link3:hover
{
    text-decoration: none;
    color: Gray;
}


.Deleted
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color: Gray;
    font-weight: bold;
}

.Bold
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    color: Black;
    font-weight: bold;
}

.Boldbg
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color: Black;
    font-weight: bold;
    background-color: #90ee90;
}

.Heading11
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: red;
}

.Heading9
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: blue;
}

.Heading8
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: blue;
}

.Heading7
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: white;
}

.gbHeading7
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    color: white;
}

.Heading6
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: blue;
}

.Heading14
{
    font-weight: bold;
    font-size: 11px;
    color: green;
    font-family: Tahoma, Helvetica, sans-serif;
}

.Heading3
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: red;
}

.Heading1
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
}


.X12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: blue;
}

.gbX12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: blue;
}

.Parlay
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: green;
}

.gbparlay
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: green;
}

.GBHeading1
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: black;
}

.Heading2
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    color: blue;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

A.Heading2:link
{
    text-decoration: none;
    color: blue;
}

A.Heading2:visited
{
    text-decoration: none;
    color: blue;
}

A.Heading2:active
{
    text-decoration: none;
    color: blue;
}

A.Heading2:hover
{
    text-decoration: underline;
    color: blue;
}

.GBHeading2
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
}

.Normal
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: black;
}

.GridTitle
{
    background-color: #F5F5F5;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #666666;
}

.Calendar
{
    background-color: #ffffff;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: black;
}

.Grid
{
    border-color: #FFFFFF;
    background-color: #FFFFFF;
}

.GridHeader
{
    font-weight: bold;
    font-size: 11px;
    color: #ffffff;
    font-family: Tahoma, Helvetica, sans-serif;
    height: 20px;
    background-color: #258FCD;
}
.GridItem
{
    font-weight: normal;
    font-size: 11px;
    color: black;
    font-family: Tahoma, Helvetica, sans-serif;
    height: 25px;
    background-color: #C8E5F8;
}
.GridAltItem
{
    font-weight: normal;
    font-size: 11px;
    color: black;
    font-family: Tahoma, Helvetica, sans-serif;
    height: 25px;
    background-color: #ffffff;
}

.GridHeaderResult
{
    font-weight: bold;
    font-size: 11px;
    color: #000000;
    font-family: Tahoma, Helvetica, sans-serif;
    height: 20px;
    background-color: #258FCD;
}

.GridItem1
{
    font-weight: normal;
    font-size: 11px;
    color: black;
    font-family: Tahoma, Helvetica, sans-serif;
    height: 25px;
    background-color: #EEFFFF;
}
.GridAltItem1
{
    font-weight: normal;
    font-size: 11px;
    color: black;
    font-family: Tahoma, Helvetica, sans-serif;
    height: 25px;
    background-color: #EEFFFF;
}

.NegOdds
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: Red;
}

A.NegOdds:link
{
    text-decoration: none;
    color: Red;
}

A.NegOdds:visited
{
    text-decoration: none;
    color: Red;
}

A.NegOdds:active
{
    text-decoration: none;
    color: Red;
}

A.NegOdds:hover
{
    text-decoration: underline;
    color: Red;
}

.PosOdds
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: blue;
}


A.PosOdds:link
{
    text-decoration: none;
    color: blue;
}

A.PosOdds:visited
{
    text-decoration: none;
    color: blue;
}

A.PosOdds:active
{
    text-decoration: none;
    color: blue;
}

A.PosOdds:hover
{
    text-decoration: underline;
    color: blue;
}

.Negative
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: Red;
}

.Positive
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: black;
}

.OTitle
{
    background-color: #435AEC;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: Black;
    height: 15;
}

.Run
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: red;
}

.GBRun
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: red;
}

.All
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: blue;
}

.GBAll
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: blue;
}

.GBGive
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #cc0000;
}

A.GBGive:link
{
    text-decoration: none;
    color: #cc0000;
}

A.GBGive:visited
{
    text-decoration: none;
    color: #cc0000;
}

A.GBGive:active
{
    text-decoration: none;
    color: #cc0000;
}

A.GBGive:hover
{
    text-decoration: underline;
    color: #cc0000;
}

.Give
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #cc0000;
}

A.Give:link
{
    text-decoration: none;
    color: #cc0000;
}

A.Give:visited
{
    text-decoration: none;
    color: #cc0000;
}

A.Give:active
{
    text-decoration: none;
    color: #cc0000;
}

A.Give:hover
{
    text-decoration: underline;
    color: #cc0000;
}


.GBTake
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000099;
}

A.GBTake:link
{
    text-decoration: none;
    color: #000099;
}

A.GBTake:visited
{
    text-decoration: none;
    color: #000099;
}

A.GBTake:active
{
    text-decoration: none;
    color: #000099;
}

A.GBTake:hover
{
    text-decoration: underline;
    color: #000099;
}

.Take
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000099;
}

A.Take:link
{
    text-decoration: none;
    color: #000099;
}

A.Take:visited
{
    text-decoration: none;
    color: #000099;
}

A.Take:active
{
    text-decoration: none;
    color: #000099;
}

A.Take:hover
{
    text-decoration: underline;
    color: #000099;
}

.Hdp
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: Red;
}

.OU
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: Blue;
}

.GBHdp
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: Red;
}

.GBOU
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: Blue;
}

.GBOver
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: red;
}

.Over
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: red;
}

A.Over:link
{
    text-decoration: none;
    color: red;
}

A.Over:visited
{
    text-decoration: none;
    color: red;
}

A.Over:active
{
    text-decoration: none;
    color: red;
}

A.Over:hover
{
    text-decoration: underline;
    color: red;
}

.GBUnder
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: black;
}

.Under
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: black;
}

A.Under:link
{
    text-decoration: none;
    color: black;
}

A.Under:visited
{
    text-decoration: none;
    color: black;
}

A.Under:active
{
    text-decoration: none;
    color: black;
}

A.Under:hover
{
    text-decoration: underline;
    color: black;
}


.Pause
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: Gray;
}

.GBPause
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: Gray;
}



.Error
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: red;
}

.LoginButton
{
    font-weight: bold;
    font-size: 10px;
    border-left-color: #eeeeee;
    background: none transparent scroll repeat 0% 0%;
    border-bottom-color: #eeeeee;
    color: #ffffff;
    border-top-style: outset;
    border-top-color: #eeeeee;
    font-family: verdana, arial, helvetica;
    border-right-style: outset;
    border-left-style: outset;
    border-right-color: #eeeeee;
    border-bottom-style: outset;
}

.CommandButton
{
    border-right: 1px double;
    border-top: 1px window-inset;
    font-weight: bold;
    font-size: 11px;
    background: #ffffff;
    border-left: 1px window-inset;
    color: #000000;
    border-bottom: 1px double;
    font-family: Tahoma, Helvetica, sans-serif;
    height: 20px;
}
A.CommandButton:link
{
    color: #000000;
    text-align: center;
    text-decoration: none;
}
A.CommandButton:visited
{
    color: #000000;
    text-align: center;
    text-decoration: none;
}
A.CommandButton:active
{
    color: #000000;
    text-align: center;
    text-decoration: none;
}
A.CommandButton:hover
{
    color: #000000;
    text-align: center;
    text-decoration: none;
}

.lnk2
{
    font-weight: bold;
    font-size: 11px;
    color: #000000;
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}
A.lnk2:link
{
    color: #000000;
    text-decoration: none;
}
A.lnk2:visited
{
    color: #000000;
    text-decoration: none;
}
A.lnk2:active
{
    color: #000000;
    text-decoration: none;
}
A.lnk2:hover
{
    color: #888888;
    text-decoration: none;
}

.TextBox
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

.BetTextBox
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.Give_
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: red;
    text-decoration: underline;
}

A.Give_:link
{
    text-decoration: underline;
    color: red;
}

A.Give_:visited
{
    text-decoration: underline;
    color: red;
}

A.Give_:active
{
    text-decoration: underline;
    color: red;
}

A.Give_:hover
{
    text-decoration: underline;
    color: red;
}

.Take_
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: blue;
}

A.Take_:link
{
    text-decoration: underline;
    color: blue;
}

A.Take_:visited
{
    text-decoration: underline;
    color: blue;
}

A.Take_:active
{
    text-decoration: underline;
    color: blue;
}

A.Take_:hover
{
    text-decoration: underline;
    color: blue;
}

.Over_
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: red;
}

A.Over_:link
{
    text-decoration: underline;
    color: red;
}

A.Over_:visited
{
    text-decoration: underline;
    color: red;
}

A.Over_:active
{
    text-decoration: underline;
    color: red;
}

A.Over_:hover
{
    text-decoration: underline;
    color: red;
}

.Under_
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: blue;
}

A.Under_:link
{
    text-decoration: underline;
    color: blue;
}

A.Under_:visited
{
    text-decoration: underline;
    color: blue;
}

A.Under_:active
{
    text-decoration: underline;
    color: blue;
}

A.Under_:hover
{
    text-decoration: underline;
    color: blue;
}

.ENG
{
    font-weight: bold;
}

.Link4
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    color: Black;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

A.Link4:link
{
    text-decoration: none;
    color: Black;
}

A.Link4:visited
{
    text-decoration: none;
    color: Black;
}

A.Link4:active
{
    text-decoration: none;
    color: Black;
}

A.Link4:hover
{
    text-decoration: underline;
    color: Black;
}

.Bottom
{
    font-family: Times New Roman;
    font-size: 16px;
    color: Maroon;
    text-decoration: none;
    font-style: normal;
}

.Heading15
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
}

.BtnCss
{
    width: 200px;
    height: 25px;
    text-align: center;
    border: solid 1px #191970;
    background-color: #CCCCCC;
    cursor: pointer;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

.BtnCss2
{
    width: 200px;
    height: 25px;
    text-align: center;
    border: solid 1px #191970;
    background-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    cursor: pointer;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

.HeaderSetting
{
    background-color: #0820A6;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
}

.HeaderSetting2
{
    background-color: #258FCD;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
}

.HeaderSetting3
{
    background-color: #185FD1;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
}

/*newDesign*/

.Heading4
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
}

.Heading5
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #145F48;
    vertical-align: middle;
}

.Heading10
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: Yellow;
}

.MenuItem
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #000000;
    cursor: pointer;
    text-decoration: none;
    padding-left: 15px;
    vertical-align: middle;
}
.MenuItem A:link
{
    color: #000000;
    text-decoration: none;
}
.MenuItem A:visited
{
    color: #000000;
    text-decoration: none;
}
.MenuItem A:active
{
    color: #000000;
    text-decoration: none;
}
.MenuItem A:hover
{
    color: #000000;
    text-decoration: none;
}

.MenuItem2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    cursor: pointer;
    text-decoration: none;
    padding-left: 3px;
    vertical-align: top;
}
.MenuItem2 A:link
{
    color: #000000;
    text-decoration: none;
}
.MenuItem2 A:visited
{
    color: #000000;
    text-decoration: none;
}
.MenuItem2 A:active
{
    color: #000000;
    text-decoration: none;
}
.MenuItem2 A:hover
{
    color: #FF9900;
    text-decoration: none;
}

.menuButton
{
    margin-left: 5px;
}

.GridSep
{
    border-collapse: collapse;
    border-left-style: solid;
    border-left-width: 2;
    border-right-style: solid;
    border-right-width: 2;
}

.morebets
{
    background-color: #E5EEF3;
    border: 0px solid black;
    margin: 0px;
    overflow: auto;
    padding: 0px;
    position: absolute;
    z-index: 77;
}


/*---------------------------------------------------------------------- New Class ----------------------------------------------------------------------*/

.titleArea
{
    padding-left: 10px;
    border-bottom: #cdcdcd 1px solid;
}

.Button
{
    font-size: 11px;
    font-family: Arial;
    color: #404040;
}

.morebets
{
    background-color: #E5EEF3;
    border: 0px solid black;
    margin: 0px;
    overflow: auto;
    padding: 0px;
    position: absolute;
    z-index: 77;
}

/*---------------------------------------------------------------- 20121214 Forecast css  ---------------------------------------------------------------*/
.Red12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: red;
    text-decoration: underline;
}

.Black11
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    height: 16px;
    color: #000;
    background-color:#FFFFFF;
}

.Black12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}


.Blue12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: Blue;
}

.Negative12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: Red;
}

.BlueBold12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: Blue;
}

.NegativeBold12
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: Red;
}

.fcBorderColor
{
    background-color:#cecece;
}

.fcBgColor
{
    background-color:#fff;
}

.fcInBgColor
{
    background-color:#eeffff;
}

.fcAltInBgColor
{
    background-color:#d7d7d7;
}

.fcEvent
{
    font-weight: bold;
    font-size: 11px;
    color: #373836;
    background-color:#BFBFBF;
    font-family: Tahoma, Helvetica, sans-serif;
}

.fcVS
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
}

.fcScore 
{
    font-weight: normal; 
    font-size: 11px; 
    color: black; 
    font-family: Tahoma, Helvetica, sans-serif; 
}

.rounded-corners 
{
    background-color:Blue;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    text-decoration:none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
/*---------------------------------------------------------------- 20121214 END Forecast css  ------------------------------------------------------------*/

/*---------------------------------------------------------------- 20130102 STOCK HDPOU css  ---------------------------------------------------------------*/

.stockEvent  
{
    font-weight: bold;
    font-size: 11px;
    color: #373836;
    font-family: Tahoma, Helvetica, sans-serif; 
    background-color:#BFBFBF;
}

.PinkHighlight 
{
    font-weight: normal; 
    font-size: 11px; 
    color: black; 
    font-family: Tahoma, Helvetica, sans-serif; 
    height: 25px; 
    background-color: #FFDCCC; 
    padding: 0 2px;
}

.live
{
	font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    /*font-style:italic;*/
    color:#B50000;
    font-weight:bold;
}

.Bold5
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color:Black;
	font-weight: bold;
}

A.Bold5:link    {
    text-decoration:    none;
    color:Black;
}

A.Bold5:visited {
    text-decoration:    none;
    color:Black;
}

A.Bold5:active  {
    text-decoration:    none;
    color:Black;
}

A.Bold5:hover   {
    text-decoration:none;
    color:Black;
}

.Bold6
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    color:Black;
	font-weight: bold;
}

.Give2
{
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color:#cc0000;
}

A.Give2:link {
    text-decoration:    none;
    color: #cc0000;
}

A.Give2:visited  {
    text-decoration:    none;
    color: #cc0000;
}

A.Give2:active   {
    text-decoration:    none;
    color: #cc0000;
}

A.Give2:hover    {
    text-decoration:    none;
    color: #cc0000;
}

DIV.movable { POSITION: absolute }
    
/*---------------------------------------------------------------- 20130102 END STOCK HDPOU css  ------------------------------------------------------------*/

/*---------------------------------------------------------------- Member Management CSS BEGIN ------------------------------------------------------------*/
.GridBorder
{
    border-color: #a0a0a0;
    background-color: #a0a0a0;
}
/*---------------------------------------------------------------- Member Management CSS END --------------------------------------------------------------*/

/*---------------------------------------------------------------- Default Page CSS BEGIN ------------------------------------------------------------*/
.marginLoginForm {
    margin-top: 40px;
}
.txtColor {
    color: #000;
}
/*---------------------------------------------------------------- Default Page CSS END ------------------------------------------------------------*/

/*---------------------------------------------------------------- Hedaer Page CSS BEGIN ------------------------------------------------------------*/
.HeaderTopBG1 {
    background: url('Images/top.jpg') repeat-x;
    height: 68px;
}

.HeaderTopMsgBG1 {
    background: url('Images/header_bg.jpg') repeat-x;
    height: 35px;
}

.selectLang {
    font-size:xx-small;
}
/*---------------------------------------------------------------- Header Page CSS END ------------------------------------------------------------*/


/*---------------------------------------------------------------- Modern Page Layout (ux-*) START ------------------------------------------------------------*/
/* Shared responsive + modern look for list pages (filter toolbar + scrolling grid), same blue theme.
   Usage:
     <div class="ux-wrap">
       <div class="ux-filter Bold">
         <div class="ux-filter-item"> ...button / dropdown... </div>
         <asp:Panel CssClass="ux-filter-item ux-filter-wide"> label + textbox </asp:Panel>
       </div>
       <div class="ux-grid"><div class="ux-grid-scroll"> DataGrid </div></div>
     </div>
   Grid buttons : CssClass="CommandButton ux-btn ux-btn-green | ux-btn-red | ux-btn-slate | ux-btn-blue | ux-btn-light"
                  + "ux-btn-add" ("+" icon), "ux-btn-lg" (bigger button, e.g. New Member above the page)
   Form card    : <table class="ux-form"> label / value rows, optional title row <tr class="ux-form-title">
                  row modifier : <tr class="ux-form-inputrow"> (input + buttons on one line)
   Utility      : class="ux-hide-mobile" hides an element on phones
                  class="ux-pager" (page number under the grid), class="ux-input-lg" (bigger text box text on phones)
   Toolbar item : class="ux-filter-item ux-filter-grow" (shares the row) / "ux-filter-item ux-filter-fixed" (natural width) on phones
   Date pair    : <div class="ux-filter-item ux-filter-dates"> two <div class="ux-filter-item ux-filter-date"> (From / To side by side, own row on phones)
   Two columns  : <div class="ux-split"><div class="ux-split-side">..</div><div class="ux-split-main">..</div></div> (stacks on 768px and below)
   Side list    : <div class="ux-sidelist"> ux-filter + <div class="ux-panel"><div class="ux-panel-title">..</div> <select class="ux-list"> </div>
   Page title   : <div class="ux-title">title text</div> (replaces the title1.jpg / title2.jpg bar)
                  close button : <a class="ux-title-close" onclick="..">&times;</a> inside the title
                  compact      : <div class="ux-title ux-title-sm"> for popups (no icon, 11px)
   Grid links   : class="ux-pill"
   Page specific (e.g. grid min-width) stays in the page/control. */

.ux-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ===== page title (replaces the old title1.jpg / title2.jpg bar) ===== */
.ux-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 10px 0 10px;
    padding: 10px 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    color: #1d6fa5;
    background: #f2f8fd; /* very light blue */
    border: 1px solid #d3e6f3;
    border-left: 4px solid #258FCD;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* language span (e.g. .GB = 11px normal) keeps the title size */
.ux-title > span {
    font-size: inherit;
    font-weight: inherit;
}

.ux-title::before {
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #258FCD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}

/* close button at the right of a title, e.g. popup "X" */
.ux-title-close,
.ux-title-close:link,
.ux-title-close:visited {
    display: inline-flex;
    flex: 0 0 auto; /* never squeezed by a long title */
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    color: #1d6fa5;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
}

.ux-title-close:hover {
    color: #fff;
    background: #258FCD;
}

@media (max-width: 600px) {
    .ux-title {
        margin: 5px 5px 0 5px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* compact title for small popups (e.g. 150px referral list): smaller text, no icon */
.ux-title.ux-title-sm {
    gap: 2px;
    margin: 5px 5px 0 5px;
    padding: 4px 6px 4px 7px;
    font-size: 12px;
    line-height: 15px;
    border-left-width: 3px;
}

.ux-title.ux-title-sm::before {
    display: none;
}

.ux-title.ux-title-sm .ux-title-close {
    width: 18px;
    height: 18px;
    font-size: 15px;
}

/* ===== filter toolbar ===== */
.ux-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 10px 10px 0 10px;
    padding: 10px;
    white-space: nowrap;
    background: #eef4f9;
    border: 1px solid #d3e3ef;
    border-radius: 6px;
}

.ux-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ux-filter-item .btn-group {
    margin: 0;
}

/* From + To date boxes kept together as one toolbar item */
.ux-filter-item.ux-filter-dates {
    gap: 12px;
}

/* buttons, dropdowns and text box same height (toolbar + form card share this look) */
.ux-filter-item input[type="submit"],
.ux-filter-item input[type="text"],
.ux-filter-item select,
.ux-filter-item button.multiselect,
.ux-filter-item input[type="button"],
.ux-filter-item button[type="button"]:not(.multiselect),
.ux-filter-item a.CommandButton,
.ux-form input[type="text"],
.ux-form input[type="password"],
.ux-form select {
    height: 28px;
    padding: 0 12px;
    line-height: 26px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    background: #fff;
    border: 1px solid #b9cfe0;
    border-radius: 4px;
    box-sizing: border-box;
}

.ux-filter-item input[type="submit"],
.ux-filter-item button.multiselect,
.ux-filter-item input[type="button"],
.ux-filter-item button[type="button"]:not(.multiselect),
.ux-filter-item a.CommandButton {
    font-weight: bold;
    cursor: pointer;
}

/* buttons size to their text (a fixed Width="60px" minus the padding is too narrow for bold text,
   e.g. "View All", so the text overflowed off centre) */
.ux-filter-item input[type="submit"],
.ux-filter-item input[type="button"],
.ux-filter-item button[type="button"]:not(.multiselect) {
    width: auto !important;
    min-width: 70px;
}

/* LinkButton (<a>) as toolbar button; !important beats its inline Height/Width */
.ux-filter-item a.CommandButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 28px !important;
    width: auto !important;
    min-width: 70px;
    text-decoration: none;
}

.ux-filter-item input[type="submit"]:hover,
.ux-filter-item button.multiselect:hover,
.ux-filter-item input[type="button"]:hover,
.ux-filter-item button[type="button"]:not(.multiselect):hover,
.ux-filter-item a.CommandButton:hover {
    background: #e6f3fb;
    border-color: #258FCD;
}

.ux-filter-item input[type="text"]:focus,
.ux-filter-item select:focus,
.ux-form input[type="text"]:focus,
.ux-form input[type="password"]:focus,
.ux-form select:focus {
    outline: none;
    border-color: #258FCD;
    box-shadow: 0 0 0 2px rgba(37, 143, 205, 0.2);
}

/* ===== grid card ===== */
.ux-grid {
    padding: 10px;
}

/* only as wide as the table (no blank area on wide screens), scrolls when narrower */
.ux-grid-scroll {
    /*width: -moz-fit-content;
    width: fit-content;*/
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #cfe3f1;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* "> div > table": GridView wraps its table in a <div> (DataGrid does not) */
.ux-grid-scroll > table,
.ux-grid-scroll > div > table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.ux-grid-scroll > table td,
.ux-grid-scroll > table th, /* th: GridView header cells */
.ux-grid-scroll > div > table td,
.ux-grid-scroll > div > table th {
    padding: 8px 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid #c3dff0;
}

.ux-grid-scroll > table thead td,
.ux-grid-scroll > table tr.GridHeader td,
.ux-grid-scroll > table tr.GridHeader th,
.ux-grid-scroll > div > table tr.GridHeader th {
    /*padding: 9px 10px;*/
    font-weight: bold;
    color: #fff;
    border-color: #4aa3d8;
}

.ux-grid-scroll > table tbody tr.GridItem:hover,
.ux-grid-scroll > table tbody tr.GridAltItem:hover,
.ux-grid-scroll > div > table tbody tr.GridItem:hover,
.ux-grid-scroll > div > table tbody tr.GridAltItem:hover {
    background-color: #b3d9f2;
}

.ux-grid-scroll .NegOdds {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* text box inside the grid (e.g. remark) */
.ux-grid-scroll input[type="text"] {
    height: 26px;
    padding: 0 6px;
    font-size: 12px;
    border: 1px solid #b9cfe0;
    border-radius: 4px;
    box-sizing: border-box;
}

.ux-grid-scroll input[type="text"]:focus {
    outline: none;
    border-color: #258FCD;
}

/* small outline link button, e.g. History "View" */
a.ux-pill,
a.ux-pill:link,
a.ux-pill:visited {
    display: inline-block;
    padding: 2px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    color: #258FCD;
    text-decoration: none;
    background: #fff;
    border: 1px solid #258FCD;
    border-radius: 12px;
}

a.ux-pill:hover {
    color: #fff;
    background: #258FCD;
}

/* coloured action buttons in the grid */
.ux-btn {
    width: auto !important;
    min-width: 64px;
    height: 26px;
    padding: 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* LinkButton (<a>) as grid button, e.g. Restore */
a.ux-btn,
a.ux-btn:link,
a.ux-btn:visited {
    display: inline-flex !important; /* LinkButton with Width adds inline display:inline-block */
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
}

.ux-btn-green { background: #5cb85c; }
.ux-btn-red   { background: #d9534f; }
.ux-btn-slate { background: #636f83; }

.ux-btn-blue  { background: #258FCD; }
.ux-btn-blue:hover:enabled  { background: #1f7ab0; }

/* neutral outline button, e.g. Cancel */
.ux-btn-light {
    color: #333 !important;
    background: #fff;
    border: 1px solid #b9cfe0;
}

.ux-btn-light:hover:enabled {
    background: #e6f3fb;
    border-color: #258FCD;
}

/* hover for LinkButton (<a>) buttons (:enabled only matches form buttons) */
a.ux-btn:hover {
    filter: brightness(0.9);
}

a.ux-btn-light:hover {
    filter: none;
    background: #e6f3fb;
    border-color: #258FCD;
}

/* "+" icon in front of an add/new button, e.g. New Member */
.ux-btn-add::before {
    content: '+';
    margin-right: 6px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

/* bigger stand-alone button above a page (e.g. New Member) */
.ux-btn-lg {
    height: 30px !important;
    padding: 0 14px;
    font-size: 12px;
}

.ux-btn-green:hover:enabled { background: #449d44; }
.ux-btn-red:hover:enabled   { background: #c9302c; }
.ux-btn-slate:hover:enabled { background: #4f596a; }

.ux-btn:disabled,
.ux-grid-scroll .ux-btn:disabled,
a.ux-btn[disabled] { /* stronger than a page level input[type="submit"]:disabled rule */
    color: #fff;
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== two column layout: side panel + main content (e.g. member list + form) ===== */
.ux-split {
    display: flex;
    align-items: flex-start;
    column-gap: 20px; /* space between side panel and main content */
}

.ux-split-side {
    flex: 0 0 auto;
}

.ux-split-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* tables in the main column shrink to fit (e.g. a 560px form next to the side list) */
.ux-split-main table {
    max-width: 100%;
}

/* side list: search toolbar + titled list box (e.g. member list) */
.ux-sidelist {
    width: 260px;
    max-width: 100%;
    box-sizing: border-box;
}

.ux-sidelist .ux-filter-item {
    flex: 1 1 100%;
    min-width: 0; /* let the row shrink to the 260px side list */
}

.ux-sidelist .ux-filter-item select,
.ux-sidelist .ux-filter-item input[type="text"] {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
}

.ux-sidelist .ux-filter-item input[type="submit"],
.ux-sidelist .ux-filter-item input[type="button"] {
    flex: 0 0 auto;
}

/* card with a title bar, e.g. around a list box */
.ux-panel {
    margin: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfe3f1;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.ux-panel-title {
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #258FCD;
}

/* list box filling its panel */
select.ux-list {
    display: block;
    width: 100% !important;
    height: 450px;
    padding: 4px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    border: none;
    outline: none;
}

select.ux-list option {
    padding: 3px 12px;
}

/* iPhone / iPad: JS/ux.js replaces select.ux-list with this scrollable list (iOS ignores the list box size) */
.ux-list-items {
    height: 450px;
    padding: 4px 0;
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: #fff;
}

.ux-list-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eef3f7;
}

.ux-list-item:active {
    background: #e6f3fb;
}

.ux-list-item.selected {
    color: #fff;
    background: #258FCD;
}

@media (max-width: 768px) {
    .ux-split {
        display: block;
    }

    /* stacked: main content lines up with the side panels (10px sides) and uses the full width */
    .ux-split-main {
        padding: 0 10px;
    }

    /* plain wrapper tables take the column width instead of their content width
       (grids still scroll inside their card) */
    .ux-split-main table:not(.Grid) {
        table-layout: fixed;
    }

    .ux-sidelist {
        width: auto;
    }

    select.ux-list {
        height: 160px;
    }

    .ux-list-items {
        height: 220px;
    }
}

/* stacked tablet width: form card uses the full width (phones: the form is already a full-width block) */
@media (min-width: 601px) and (max-width: 768px) {
    .ux-split-main .ux-form {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* page number / pager under the grid */
.ux-pager {
    padding: 0 10px 10px 10px;
}

/* ===== form card (label / value rows), e.g. <table class="ux-form"> ===== */
.ux-form {
    background: #fff;
    border: 1px solid #cfe3f1;
    border-radius: 6px;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.ux-form > tbody > tr > td {
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #e3eef6;
}

.ux-form > tbody > tr:last-child > td {
    border-bottom: none;
}

/* title row */
.ux-form-title > td {
    background: #eef4f9 !important;
}

.ux-form-title h3 {
    margin: 0;
    font-size: 15px;
}

/* form inputs: same look as toolbar inputs (shared rule above), just less side padding */
.ux-form input[type="text"],
.ux-form input[type="password"],
.ux-form select {
    padding: 0 8px;
}

.ux-form input[type="text"]:disabled,
.ux-form input[type="password"]:disabled {
    color: #555;
    background: #f3f6f9;
}

.ux-form .ux-btn {
    height: 28px;
}

/* grid inside a form card: fill the cell but never force the form wider (the grid scrolls instead) */
.ux-form .ux-grid-scroll {
    width: 1px;
    min-width: 100%;
}

/* form row with an input + buttons on one line, e.g. amount + Submit + Cancel */
.ux-form-inputrow input[type="submit"] {
    margin-left: 8px;
}

/* ===== mobile ===== */
@media (max-width: 600px) {
    .ux-filter {
        margin: 5px 5px 0 5px;
        padding: 8px;
    }

    /* each item grows so every wrapped row fills the full width */
    .ux-filter-item {
        flex: 1 1 auto;
    }

    .ux-filter-wide {
        flex: 1 1 100%;
    }

    .ux-filter-item input[type="submit"],
    .ux-filter-item input[type="button"],
    .ux-filter-item button[type="button"]:not(.multiselect),
    .ux-filter-item input[type="text"],
    .ux-filter-item select,
    .ux-filter-item button.multiselect {
        height: 25px;
        line-height: 23px;
    }

    .ux-filter-item a.CommandButton {
        height: 25px !important;
    }

    /* buttons / text box share their row; dropdowns fill their item */
    .ux-filter-item input[type="submit"],
    .ux-filter-item input[type="button"],
    .ux-filter-item button[type="button"]:not(.multiselect),
    .ux-filter-item input[type="text"],
    .ux-filter-item select,
    .ux-filter-item a.CommandButton {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    .ux-filter-item .btn-group,
    .ux-filter-item button.multiselect {
        width: 100% !important;
    }

    .ux-grid {
        padding: 10px 5px;
    }

    /* hide on phones (e.g. a title already shown in the page title bar) */
    .ux-hide-mobile {
        display: none !important;
    }

    /* form card: keeps label | value columns, uses the full screen width (fixed widths released), inputs fill their cell */
    .ux-form {
        width: 100% !important;
        box-sizing: border-box;
    }

    .ux-form > tbody > tr > td {
        width: auto !important;
    }

    .ux-form {
        float: none; /* align="left" would float it */
    }

    .ux-form input[type="text"],
    .ux-form input[type="password"] {
        width: 100% !important;
    }

    /* input + buttons on one line */
    .ux-form-inputrow > td + td {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .ux-form-inputrow input[type="text"] {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    .ux-form-inputrow input[type="submit"] {
        margin-left: 0; /* flex gap handles spacing */
    }

    .ux-form-inputrow .Error {
        flex-basis: 100%;
    }

    /* toolbar item that shares its row (e.g. search box) / keeps its natural width (e.g. Search button) */
    .ux-filter-grow {
        flex: 1 1 0;
        min-width: 0;
    }

    .ux-filter-fixed,
    .ux-filter-fixed input[type="submit"],
    .ux-filter-fixed a.CommandButton {
        flex: 0 0 auto;
    }

    .ux-filter-fixed input[type="submit"],
    .ux-filter-fixed a.CommandButton {
        padding: 0 14px;
    }

    /* From + To pair: own row, the two date boxes split it (less padding so the full date still shows) */
    .ux-filter-item.ux-filter-dates {
        flex: 1 1 100%;
        gap: 8px;
        min-width: 0;
    }

    .ux-filter-item.ux-filter-date {
        flex: 1 1 0;
        min-width: 0;
    }

    /* 16px: iPhone Safari zooms the whole page in when a smaller text box or dropdown is tapped (and stays zoomed) */
    .ux-filter-item.ux-filter-date input[type="text"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 12px;
    }

    /* month / year dropdowns of the date picker (daterangepicker.css loads later, so one class more to win) */
    .daterangepicker .drp-calendar select.monthselect,
    .daterangepicker .drp-calendar select.yearselect {
        font-size: 12px;
    }

    /* larger text box text on phones (15px+ also stops iPhone zooming in on focus) */
    .ux-input-lg {
        font-size: 15px !important;
    }
}

/* ===== settings page (old HeaderSetting / Heading15 / BtnCss tables, e.g. Member_AZ) =====
   <div class="ux-setting"> around the page content, <table class="ux-tabs"> for the BtnCss tabs,
   <table class="ux-setting-box"> for the bordered box under the tabs. Scoped, other pages keep the old look. */
.ux-setting {
    font-family: Arial, Helvetica, sans-serif;
}

/* tabs (BtnCss = inactive, BtnCss2 = active) */
.ux-setting table.ux-tabs {
    border-collapse: separate;
    border-spacing: 4px 0;
    margin-left: -4px;
}

.ux-setting .BtnCss,
.ux-setting .BtnCss2 {
    height: 32px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #1d6fa5;
    background: #eef4f9;
    border: 1px solid #cfe3f1;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.ux-setting .BtnCss:hover {
    background: #e6f3fb;
}

.ux-setting .BtnCss2 {
    color: #fff;
    background: #258FCD;
    border-color: #258FCD;
}

/* bordered tables: light grid lines instead of the grey border="1" */
.ux-setting table[border="1"] {
    border-color: #dbe8f2;
}

.ux-setting table[border="1"] > tbody > tr > td {
    padding: 7px 8px;
    border: 1px solid #dbe8f2;
}

/* box under the tabs: white card */
.ux-setting table.ux-setting-box {
    border: 1px solid #cfe3f1;
    border-collapse: separate !important; /* inline border-collapse:collapse would drop the rounded corners */
    border-radius: 0 6px 6px 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.ux-setting table.ux-setting-box > tbody > tr > td {
    padding: 10px;
    border: none;
}

/* section headers: HeaderSetting = main, HeaderSetting2 = sub section, HeaderSetting3 = copy / enable row */
.ux-setting .HeaderSetting,
.ux-setting .HeaderSetting2,
.ux-setting .HeaderSetting3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.ux-setting .HeaderSetting {
    color: #fff;
    background: #258FCD;
}

.ux-setting table[border="1"] > tbody > tr.HeaderSetting > td,
.ux-setting table[border="1"] > tbody > tr > td.HeaderSetting {
    padding: 8px 10px;
    border-color: #258FCD;
}

.ux-setting .HeaderSetting2 {
    color: #1d6fa5;
    background: #e6f3fb;
}

.ux-setting .HeaderSetting3 {
    color: #1d6fa5;
    background: #f2f8fd;
}

/* label / value cells */
.ux-setting .Heading15 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
}

/* inputs: same look as the form card */
.ux-setting input[type="text"],
.ux-setting input[type="password"],
.ux-setting select,
.ux-setting textarea {
    height: 26px;
    padding: 0 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #b9cfe0;
    border-radius: 4px;
    box-sizing: border-box;
}

.ux-setting textarea {
    padding: 4px 6px;
}

.ux-setting input[type="text"]:focus,
.ux-setting input[type="password"]:focus,
.ux-setting select:focus,
.ux-setting textarea:focus {
    outline: none;
    border-color: #258FCD;
    box-shadow: 0 0 0 2px rgba(37, 143, 205, 0.2);
}

.ux-setting input[type="text"]:disabled,
.ux-setting input[type="text"][readonly],
.ux-setting select:disabled {
    color: #555;
    background: #f3f6f9;
}

.ux-setting input[type="radio"] {
    accent-color: #258FCD;
    vertical-align: middle;
}

/* phones: tables fit the screen width (fixed 1050px widths released);
   <table class="ux-pairs"> with <td class="ux-lbl"> labels shows one label | value pair per line.
   Wide tables (e.g. DETAIL SETTING, 7 columns) shrink as far as they can, then scroll sideways in the page */
@media (max-width: 600px) {
    .ux-setting {
        padding: 5px 5px 0 5px !important;
    }

    .ux-setting table {
        width: 100% !important;
    }

    .ux-setting td {
        width: auto !important;
    }

    .ux-setting table.ux-setting-box > tbody > tr > td {
        padding: 5px;
    }

    /* label | value pairs, one per line */
    .ux-setting table.ux-pairs,
    .ux-setting table.ux-pairs > tbody {
        display: block;
    }

    .ux-setting table.ux-pairs {
        border: 1px solid #dbe8f2;
    }

    .ux-setting table.ux-pairs > tbody > tr {
        display: flex;
        flex-wrap: wrap;
    }

    .ux-setting table.ux-pairs > tbody > tr > td {
        flex: 0 0 62%;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #dbe8f2;
    }

    .ux-setting table.ux-pairs > tbody > tr > td.ux-lbl {
        flex-basis: 38%;
        padding-top: 11px; /* lines the label up with the input next to it */
    }

    .ux-setting table.ux-pairs > tbody > tr > td.HeaderSetting {
        flex-basis: 100%;
    }

    /* blank filler cells */
    .ux-setting table.ux-pairs > tbody > tr > td[colspan="2"] {
        display: none;
    }

    .ux-setting table.ux-pairs input[type="text"],
    .ux-setting table.ux-pairs input[type="password"],
    .ux-setting table.ux-pairs textarea {
        width: 100% !important;
    }

    /* prefix + text box (e.g. User Name: "XCC" + box): the box takes the rest of the line, error message below */
    .ux-setting table.ux-pairs > tbody > tr > td[nowrap] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 4px;
        white-space: normal;
    }

    .ux-setting table.ux-pairs > tbody > tr > td[nowrap] > input[type="text"] {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    .ux-setting table.ux-pairs > tbody > tr > td[nowrap] > .Error {
        flex-basis: 100%;
    }

    /* multi column table (e.g. DETAIL SETTING) stacked: <table class="ux-stack">
       td.ux-lbl = label, other cells = value, td.ux-full = full line, td.ux-blank = hidden filler,
       td data-label=".." = value with a small heading (column heading is hidden), td.ux-sub = value with no label cell,
       td.ux-lbl data-cap=".." = label with a small caption (e.g. LIMIT SETTING / Commission) */
    .ux-setting table.ux-stack,
    .ux-setting table.ux-stack > tbody {
        display: block;
    }

    .ux-setting table.ux-stack {
        border: 1px solid #dbe8f2;
    }

    .ux-setting table.ux-stack > tbody > tr {
        display: flex;
        flex-wrap: wrap;
    }

    .ux-setting table.ux-stack > tbody > tr > td {
        flex: 0 0 62%;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #dbe8f2;
    }

    .ux-setting table.ux-stack > tbody > tr > td.ux-lbl {
        flex-basis: 38%;
        padding-top: 11px;
    }

    .ux-setting table.ux-stack > tbody > tr > td.ux-full,
    .ux-setting table.ux-stack > tbody > tr > td[colspan="7"],
    .ux-setting table.ux-stack > tbody > tr.HeaderSetting > td,
    .ux-setting table.ux-stack > tbody > tr.HeaderSetting2 > td {
        flex-basis: 100%;
    }

    /* section headers: left title only (the right one repeats it / names a hidden column) */
    .ux-setting table.ux-stack > tbody > tr > td.ux-blank,
    .ux-setting table.ux-stack > tbody > tr.HeaderSetting > td + td,
    .ux-setting table.ux-stack > tbody > tr.HeaderSetting2 > td + td {
        display: none;
    }

    /* enable / disable + copy row */
    .ux-setting table.ux-stack > tbody > tr.HeaderSetting3 > td {
        flex: 1 1 auto;
    }

    /* label with a small caption above it (e.g. LIMIT SETTING / Commission, data-cap="..") */
    .ux-setting table.ux-stack > tbody > tr > td.ux-lbl[data-cap] {
        padding-top: 5px;
    }

    .ux-setting table.ux-stack > tbody > tr > td.ux-lbl[data-cap]::before {
        content: attr(data-cap);
        display: block;
        margin-bottom: 2px;
        font-size: 10px;
        text-transform: uppercase;
        color: #1d6fa5;
    }

    /* value without its own label sits under the value column */
    .ux-setting table.ux-stack > tbody > tr > td.ux-sub {
        margin-left: 38%;
    }

    /* value with a small heading above it (the column heading is hidden), e.g. MIN/MAX PER BET */
    .ux-setting table.ux-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        color: #1d6fa5;
    }
}

/* ===== forecast tables (FC_HandicapAndOU_G / FC_HandicapAndOU_Detail) =====
   same look as ux-grid, but only on the table's own cells (child selectors),
   so the small score tables inside each cell keep their own style */
.fc-card {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #cfe3f1;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.fc-grid {
    width: 100%;
    border-collapse: collapse;
}

.fc-grid > tbody > tr > td {
    padding: 6px 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    border: 1px solid #c3dff0;
}

.fc-grid > tbody > tr.GridHeader > td {
    padding: 8px 4px;
    font-weight: bold;
    color: #fff;
    border-color: #4aa3d8;
}

/* league row */
.fc-grid > tbody > tr.fcEvent > td {
    font-weight: bold;
    color: #1d6fa5;
    background: #e6f3fb;
}

/* score columns: soft blue shading instead of the old grey */
.fc-grid > tbody > tr > td.fcInBgColor {
    background: #f7fbfe;
}

.fc-grid > tbody > tr > td.fcAltInBgColor {
    background: #eaf2f8;
}

/* ===== date picker card for asp:Calendar, e.g.
   <asp:Calendar CssClass="ux-cal"> + TitleStyle ux-cal-title / NextPrevStyle ux-cal-nav / DayHeaderStyle ux-cal-dayhdr /
   DayStyle ux-cal-day / WeekendDayStyle ux-cal-weekend / OtherMonthDayStyle ux-cal-other / TodayDayStyle ux-cal-today /
   SelectedDayStyle ux-cal-sel (!important beats the inline colours/borders asp:Calendar writes) ===== */
table.ux-cal {
    width: 230px !important;
    border: 1px solid #cfe3f1 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

table.ux-cal td {
    border: none !important;
}

/* asp:Calendar paints the selected day cell Silver inline; only the inner link shows the blue */
table.ux-cal td.ux-cal-sel {
    background: transparent !important;
}

/* month bar */
table.ux-cal .ux-cal-title,
table.ux-cal .ux-cal-title table {
    color: #fff !important;
    background: #258FCD !important;
    font-weight: bold;
    font-size: 13px;
}

table.ux-cal .ux-cal-title > td,
table.ux-cal td.ux-cal-title {
    padding: 6px 4px;
}

table.ux-cal .ux-cal-nav a {
    display: inline-block;
    width: 22px;
    line-height: 22px;
    text-align: center;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
}

table.ux-cal .ux-cal-nav a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Su Mo Tu ... */
table.ux-cal .ux-cal-dayhdr {
    padding: 5px 0;
    font-weight: bold;
    font-size: 11px;
    color: #1d6fa5;
    text-align: center;
    background: #eef4f9;
}

/* day cells */
table.ux-cal .ux-cal-day,
table.ux-cal .ux-cal-weekend,
table.ux-cal .ux-cal-other,
table.ux-cal .ux-cal-today,
table.ux-cal .ux-cal-sel {
    padding: 2px !important;
    text-align: center;
}

table.ux-cal .ux-cal-day a,
table.ux-cal .ux-cal-weekend a,
table.ux-cal .ux-cal-other a,
table.ux-cal .ux-cal-today a,
table.ux-cal .ux-cal-sel a {
    display: block;
    height: 26px;
    line-height: 26px;
    color: #333 !important;
    text-decoration: none;
    border-radius: 4px;
}

table.ux-cal .ux-cal-day a:hover,
table.ux-cal .ux-cal-weekend a:hover,
table.ux-cal .ux-cal-other a:hover,
table.ux-cal .ux-cal-today a:hover {
    background: #e6f3fb;
}

table.ux-cal .ux-cal-weekend a {
    color: #c0392b !important;
}

table.ux-cal .ux-cal-other a {
    color: #b5c3cf !important;
}

table.ux-cal .ux-cal-today a {
    font-weight: bold;
    color: #258FCD !important;
    box-shadow: inset 0 0 0 1px #258FCD;
}

table.ux-cal .ux-cal-sel a {
    font-weight: bold;
    color: #fff !important;
    background: #258FCD;
}
/*---------------------------------------------------------------- Modern Page Layout (ux-*) END ------------------------------------------------------------*/

/*---------------------------------------------------------------- Side Menu (ux-menu) ------------------------------------------------------------*/
/* modern flat side menu (blue / orange theme) for the role Menu.aspx frames: <body class="ux-menu">
   every rule is scoped under body.ux-menu, so menus without the class keep the old look */
html:has(> body.ux-menu) {
    height: 100%;
}

body.ux-menu {
    height: 100%;
    margin: 0 !important;
    background: linear-gradient(180deg, #258FCD 0%, #1d7ab3 100%) fixed;
    font-family: 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
}

.ux-menu .HeaderBG2 {
    background: transparent;
    table-layout: fixed; /* width from the frame, not from the content */
}

.ux-menu .menuButton {
    margin-left: 0;
}

/* some menu tables use cellpadding="1" */
.ux-menu .menuButton > tbody > tr > td {
    padding: 0;
}

.ux-menu .menuButton,
.ux-menu .menuButton table {
    width: 100%;
    table-layout: fixed; /* never wider than the 230px menu frame */
}

/* top grey strip -> "MENU" title bar */
.ux-menu td[background*='menu_header_bg.jpg'] {
    background: rgba(0, 0, 0, 0.18) !important;
    height: 38px;
    padding-left: 16px;
    font-size: 0;
}

.ux-menu td[background*='menu_header_bg.jpg']::before {
    content: 'MENU';
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.75);
}

/* ===== Notification box (HTML comes from Notification_G.aspx, restyled here only) ===== */
.ux-menu #tableNotification {
    margin: 12px 10px;
    text-align: left;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* title bar, same style as the MENU bar */
.ux-menu #tableNotification::before {
    content: 'NOTIFICATIONS';
    display: block;
    padding: 9px 12px 9px 34px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") no-repeat 12px center / 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* fixed 217px table -> fit the card (otherwise a horizontal scrollbar appears) */
.ux-menu #tableNotification > table {
    width: 100% !important;
    table-layout: fixed;
}

/* old rounded background images not needed */
.ux-menu #tableNotification img[src*="noticeBg_"] {
    display: none;
}

.ux-menu #tableNotification td[background*="noticeBg_C"] {
    padding: 8px 12px !important;
    background: none !important;
}

/* text: same font as the menu */
.ux-menu #tableNotification span[style],
.ux-menu #tableNotification table table {
    font-family: 'Segoe UI', Roboto, Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.85);
    line-height: 19px;
}

.ux-menu #tableNotification table table td {
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
}

/* deposit / withdraw rows: username left, "IDR 10000" right on one line; "IDR" and the amount never split,
   if a row is too long for the card the whole amount moves under the username instead */
.ux-menu #tableNotification table table,
.ux-menu #tableNotification table table > tbody {
    display: block;
    width: 100%;
}

.ux-menu #tableNotification table table tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ux-menu #tableNotification table table td {
    white-space: nowrap;
}

.ux-menu #tableNotification table table td + td {
    margin-left: auto;
}

/* member links */
.ux-menu #tableNotification a,
.ux-menu #tableNotification a:link,
.ux-menu #tableNotification a:visited {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
}

.ux-menu #tableNotification a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* section titles: Member / Deposit / Withdraw */
.ux-menu #tableNotification a[href*="MemberConfirm.aspx"],
.ux-menu #tableNotification a[href*="DepositConfirm.aspx"],
.ux-menu #tableNotification a[href*="WashCreditConfirm.aspx"] {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FF9900 !important;
}

/* usernames in deposit / withdraw lists */
.ux-menu #tableNotification table table span[style*="color"] {
    color: #ffe14d !important;
    font-weight: 600 !important;
}

/* old right edge image not needed */
.ux-menu td[background*='menu_header_bg2'] {
    display: none;
}

/* no gaps between sections, flat list */
.ux-menu .menuButton tr[style*='height:2px'],
.ux-menu .menuButton tr[style*='height:5px'] {
    display: none;
}

/* ===== Section headers ===== */
.ux-menu td.MenuItem[id$='img'] {
    position: relative;
    width: auto !important;
    height: 44px;
    padding: 0 26px 0 40px;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

.ux-menu td.MenuItem[id$='img'] a.MenuItem,
.ux-menu td.MenuItem[id$='img'] a.MenuItem:link,
.ux-menu td.MenuItem[id$='img'] a.MenuItem:visited,
.ux-menu td.MenuItem[id$='img'] a.MenuItem:hover {
    display: block;
    padding-left: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ux-menu td.MenuItem[id$='img']:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

.ux-menu td.MenuItem[id$='img'].open {
    background: rgba(0, 0, 0, 0.15) !important;
    border-left-color: #FF9900;
    border-bottom-color: transparent;
}

/* left icon */
.ux-menu td.MenuItem[id$='img']::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    opacity: 0.9;
}

/* right chevron, rotates down when open */
.ux-menu td.MenuItem[id$='img']::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(-45deg);
    transition: transform 0.2s;
}

.ux-menu td.MenuItem[id$='img'].open::after {
    transform: rotate(45deg);
}

/* icons per section (white line icons) */
.ux-menu #Aimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.ux-menu #Simg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E"); }
.ux-menu #Fimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E"); }
.ux-menu #Mimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ux-menu #Rimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); }
.ux-menu #Oimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.ux-menu #Bimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E"); }
.ux-menu #Pimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.ux-menu #Qimg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); }

/* ===== Sub menu ===== */
.ux-menu tr[id$='Menu'] img {
    display: none; /* old spacer images + old jpg icons */
}

.ux-menu td.MenuItem2 {
    width: auto !important;
    padding: 4px 0 8px 0;
    background: rgba(0, 0, 0, 0.15) !important;
    border-left: 3px solid #FF9900;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ux-menu td.MenuItem2 div {
    margin-bottom: 0 !important;
}

.ux-menu td.MenuItem2 a.MenuItem2,
.ux-menu td.MenuItem2 a.MenuItem2:link,
.ux-menu td.MenuItem2 a.MenuItem2:visited {
    position: relative;
    display: block;
    padding: 7px 10px 7px 37px;
    font-size: 13px;
    line-height: 17px;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.85);
    transition: background-color 0.15s, color 0.15s;
}

/* small dot in front of each item */
.ux-menu td.MenuItem2 a.MenuItem2::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.ux-menu td.MenuItem2 a.MenuItem2:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.ux-menu td.MenuItem2 a.MenuItem2.active,
.ux-menu td.MenuItem2 a.MenuItem2.active:link,
.ux-menu td.MenuItem2 a.MenuItem2.active:visited {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 600;
}

.ux-menu td.MenuItem2 a.MenuItem2.active::before {
    background: #FF9900;
}
/*---------------------------------------------------------------- Side Menu (ux-menu) END ------------------------------------------------------------*/