body { margin:5px; font-size:12px; font-family:arial; }
table { font-size:12px; }
form { margin:0; padding:0; display:inline; }
img { border:0; }
label:hover { cursor:pointer; background:rgba(0,0,255,.1); }
A:visited { color:#000090; }
A:hover { text-decoration: underline; }
pre { margin:0; font-family:arial; }

table.bscTbl { border-collapse: collapse; } /* basic table */
table.bscTbl td { border: 1px solid gray; padding: 2px 4px; }

.resetAllCSS { all:initial }; /* blocking inheritance for all properties */
.resetAllCSS * { all:unset }; /* allowing inheritance within #mydiv */

.nobr { white-space:nowrap; }
.ptr {cursor:pointer}
.actlnk {color:#0000ff; cursor:pointer}
.actlnku {color:#0000ff; cursor:pointer; text-decoration:underline}
.nrmlnk A {text-decoration:underline; color:#0000ff; cursor:pointer}
.nrmlnk A:visited {text-decoration:underline; color:#0000ff}
.clkPrvInp { cursor:pointer; }
.clkPrvInp:hover { background-color:rgba(0, 0, 255, .1); }
.abid { text-align:right; }
.vt { vertical-align:top; }
.vs { vertical-align:sub; }
.vm { vertical-align:middle; }

.modtypes { font-size:10px; text-decoration:underline; }
.modcount{ font-size:10px; color:a2a2a2; }
.modselectMakes A { color:blue; font-size:14px; font-weight:bold; cursor:pointer; }
.chas2 { font-size:10px; color:#999999; }
.trnsl8 { font-size:10px; text-decoration:none; color:#9999ff; }
.vst A:link { color:purple; }
.vst A:visited { color:purple; }
.vwd A.crlnk:link { color:#aaaaff; }
.vwd A.crlnk:visited { color:purple; }

.tpln A { cursor:help; }
.tpln A:link { cursor:pointer; }
.hlp { cursor:help; }
.hlp2 { cursor:help; border-bottom:1px dashed #bbbbbb; text-decoration:none; }
a.tip { cursor:help; }
a.tip { text-decoration:none; }
a.tip:hover  { text-decoration:none; border-bottom:1px dashed; }

.tipbox { margin:10px; font-size:12px; font-family:arial; background-color:ffffd9; }

.myStkRw { background-color:#f0f0ff; } /*above colors used for favs, so they can override easily*/
.carBlock { background-color:#f0f0f0; } /*above colors used for favs, so they can override easily*/

.ylw {background-color:#ffffd9 !important} /*yellow, very light*/
.ylwHiLt{background-color:#ffff55}  /*yellow, manila*/
.bgy {background-color:yellow} /*bg yellow*/
.lgn {background-color:#ddffdd}
.lrd {background-color:#ffcccc}
.lbl {background-color:#ddddff}
.wht {background-color:#ffffff}
.blk {background-color:#000000}
.lgr {background-color:#bbbbbb}
.lgr TD{background-color:#bbbbbb}
.dgr {background-color:#888888}
.dgr  A{color:white}

.cLgr {color:#bbbbbb}

.pl20 {padding-left:20px}

.bdtp {color:#aa0000; font-weight:bold}
.rwbg2 {background-color:#f4f4f4}
.rwlnk {font-size:11px}
.blcklnk {/* block links */}
.tg {display:block; cursor:pointer; font-size:10px; color:#888888; cursor:pointer; margin-top:-2px; text-decoration:none}
.carDetRow {background-color:#f0f0f0}
.nobdr {border:0px}
.infoIcon  {color:#7777FF; font-weight:bold; font-size:16px; font-family:Courier}
.actionlink  {text-decoration:none}
.fbs  {font-size:11px}  /*used in js*/
.fbs A{text-decoration:none; color:#9999ff}  /*used in js*/
.fbs2  {font-size:12px; font-weight:bold} /*used in js*/
.whtlnk  A { color:white; }
.whtlnk  A:visited { color:white; }
.lnkclr A { color:inherit; } /*use color of parent*/
.lnkclr A:visited { color:inherit; }
.noln, .noln  A, .noline  A { text-decoration:none; }
.nolnk, .nolnk:hover, .nolnk A, .nolnk A:hover { text-decoration:inherit; color:inherit; }
.alrt, .alnR  { text-align:right; }
.allf , .alnL { text-align:left; }
.alcn { text-align:center; } /*kw:.center.cntr*/
.bdr1 {border:1px solid black}
.mailnk {color:#0000aa;text-decoration:none;cursor:pointer}

.ph { vertical-align:top; }
/* .iil { display: box; float: left; margin: 1px; }  */
.iil { display: box; margin: 1px; } /* image-page image link */
.carlist { font-size: 12px; background-color:#eeeeee; }
.carlist tr { text-align:center; }
.crw  { height:35px; }
.spc {background-color:#888888}
.spc2 {background-color:#bbbbbb}
.spc3 {background-color:#dddddd}
.spc, .spc2, .spc3 td {height:2px; padding:0}
.eqptbl {width:100%}
.eqptbl tr {text-align:left}
.mk,.gr,.ch,.eqp {text-align:left}
.km ,.strt,.bdRslt {text-align:right}
.strt A{color:blue}
.bdRslt A{color:blue}
.loc { font-size:10px; }
.mrtd { text-align:center; }
.auctd { font-weight:bold; padding:0; background-color:#ffff00; }
.grd  {font-size:10px}
.insage {font-size:10px; color:#ffffff; background-color:#aaaaaa}
.RecNt  {background-color:#ffffff; text-align:center}
.blocBdRslt {background-color:#E6E6E6; text-align:center}
A.bdStrt {color:#888888}
A.bdStrtX {color:#888888; text-decoration:line-through}

.mnymsg {height:15px; width:15px; cursor:pointer; background-image:url('/cars/images/write_many.png')} /* used also for setting title */
.bdarea {background-color:#aaccaa}
.rcmdarea {text-align:center; padding:2px; background-color:#aaccaa}
.bidrtd {padding:0 5px 0 5px !important; text-align:left}
.bidtd {text-align:right; padding-left:3px; font-weight:bold}
.bidtdCst {text-align:right; padding-left:3px; color:#666666; text-decoration:line-through} /* bidtd Cost */
.bidr {margin-top:-4px}
.bidmy {margin-top:-4px; font-weight:bold}
.bidr2 {font-size:9px; margin-top:-2px; margin-bottom:-2px}
.hde,.unhde {text-decoration:none; cursor:pointer; color:#BBBBDD; font-size:10px}
A.stfmsg,A.bstfmsg,A.chngbd,A.cpy,A.bdlg  {text-decoration:none; cursor:pointer; color:#BBBBDD; font-size:10px; margin-right:15px}
.addmsg {text-decoration:none; cursor:pointer; color:#7777AA; font-size:10px; margin-right:15px}
.edtbdask {text-decoration:none; cursor:pointer; color:#BBBBBB; font-size:10px; margin-right:15px}
.chngbd2{text-decoration:none; cursor:pointer; color:#dd8888; font-size:10px}
.msg {width:100%}
.msg tr{text-align:left}
.MsgDel {text-decoration:none; cursor:pointer; color:#777777; font-size:10px}
.MsgTm {color:green; font-weight:bold}
.BdNt {color:#515151; word-break:break-word;}
.BdTbl {width:100%; border-collapse:collapse; border-spacing:0}
.BdTbl td {padding:0}
.BdTbl tr {text-align:left}
.BdHdn {color:#cccccc; word-break:break-word;}
.BdHdn A{color:#ccccff}
.BdHdn A:visited{color:#ccccff; padding-right:10px}
.BdWthBmp {display:inline-block; font-size:9px; color:#bb0000; padding-right:10px}
.BdWthBmpHdn {display:inline-block; font-size:9px; padding-right:10px}
.bidPrc { display:inline-block; }
.bdrMsgAlrt { display:inline-block; vertical-align:top; padding:3px 5px; background-color:yellow; color:red; font-weight:bold; font-size:12px; border:1px dashed red; margin-right:5px; }
.CrCstBig {display:inline-block; font-size:11px; padding-right:20px; background-color:#ffff00}
.CrCst {display:inline-block; font-size:10px; padding-right:20px;}
A.abidAuto { display:inline-block; text-decoration:none; color:#882222; opacity:.8; margin-right:10px; }
A.abidAuto[href] { border-bottom:1px dashed; }
.bdtls {margin-top:-3px; margin-bottom:-2px; text-align:right; padding-right:10px}
.aucSel A{cursor:pointer}
.unAtndAucSel A{color:#666688; cursor:pointer}
.aucCnt {text-align:right; padding-left:10px}
.aucCnt A{color:blue; cursor:pointer}
.unAtndAucCnt{text-align:right; padding-left:10px; color:#666688}
.unAtndAucCnt A{color:#4444ff; cursor:pointer}
.aucUpdt {text-align:right}
.aucUpdt A {text-decoration:none}
.aucUpdt A:hover {text-decoration:underline}
.mrp {color:blue}
.bstat {font-size:10px; float:right}
.bstatdv {font-size:12px; width:100px; position:relative; float:right; text-align:right}
.prmx {text-decoration:none; color:#6666dd}
.filtFail .prm {color:red; font-weight:bold}
.filtFail .prmx {color:red}
.LgIVwdDet {border:2px dashed #777777} /*lg i - vwd det*/
.LgIVwd {border:1px solid #777777} /*lg i - not vwd*/
.LgINtVwd {border:1px solid black} /*lg i - vwd*/
#vexTblNtsSpecial td {vertical-align:top}
.vexTbl {border: 2px solid black; border-collapse:collapse} /* vex table */
.vexTblNts {border: 2px solid black; border-collapse:collapse; margin-top:20px} /* vex notes */
.vexL { text-align:left; padding:1px 4px 1px 4px;
	background-color:#dddddd; border-right:1px dashed #999999; border-left: 1px solid black; border-bottom: 1px solid black;
} /*vex table, Label*/
.vexV { text-align:left; padding:1px 12px 1px 12px; border-bottom: 1px solid black; } /*vex table, Value*/
.vexTopDtls {text-align:left; padding:5px 0 15px 10px}
#vexMlg {font-weight:bold; padding:5px 0}
#vexCond {display:block; width:120px; float:right}
.cNts { text-align:left; padding:3px } /*car notes*/
.cbLbl { cursor:pointer } /*checkbox label*/
.cbLbl:hover { text-decoration:underline }
.vstat { font-weight:bold; padding:0 4px; color:white; cursor:help; }
.dest, .destc, .smartinsp, .smartphoto, a.nwAtoBd { text-decoration:none; cursor:pointer; color:#BBD; font-size:10px; padding-right:15px; }
.dest.set, .destc.set { color:black; background-color:#EFE; }
.dest.miss, .destc.miss { color:red; }
.smartinsp.yes, .smartphoto.yes  { color:black; background-color:#EFE; }
.smartinsp.no, .smartphoto.no { color:red; text-decoration:line-through; }
/*.smartinsp.off { display:none }*/
.destItm { padding:5px; color:blue; cursor:pointer; }
.destItm:hover { background-color:#DFD; }
.msgalrt  { position:fixed; top:0; color:white !important; padding:3px 0; text-decoration:none; width:90px; text-align:center; border:1px solid white; }
.blVid { font-size:10px; vertical-align:text-top; } /*block list vid*/

.nwc {position:relative; font-weight:bold; text-align:left; font-style:italic}
.nwc18 {position:relative; font-weight:bold; text-align:left; font-style:italic; font-size:18px;}
.nwtag { font-size:14px; top:2px; right:8px; color:#54ff00; position:absolute; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.dscnt { font-size:14px; top:2px; right:8px; color:red; position:absolute; text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.vdico,.vdicoimg,.vdicoimg2 {border:0}
.vdicoimg { position:absolute; top:6px; right:8px; }
.vdicoimg2 { position:absolute; top:21px; right:8px; }
.lpVwChs { float:right; max-width:110px; text-align: right; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* large photo view chassis */

.b {font-weight:bold}
.nb {font-weight:normal}
.i {font-style:italic}
.strike {text-decoration:line-through}
.c0 {color:#000} /*.blk is bgclr*/
.c1 {color:#111}
.c2 {color:#222}
.c3 {color:#333}
.c4 {color:#444}
.c5 {color:#555}
.c6 {color:#666}
.c7 {color:#777}
.c8 {color:#888}
A.c8 {color:#888}
.c9 {color:#999}
.cf {color:#fff} /*.wht is bgclr*/
.cr, .r {color:red}
.cb {color:blue}
.cg {color:green}
.bcff0 {background-color:#ffff00}
.p10 {font-size:10px}
.p11 {font-size:11px}
.p12 {font-size:12px}
.p13 {font-size:13px}
.p14 {font-size:14px}
.p15 {font-size:15px}
.p16 {font-size:16px}
.bdAftrChng {font-weight:bold; color:white; background-color:#ffaa88; padding:0 4px 0 4px}

.fade {opacity: 0.75}
.fade5 {opacity: 0.5}

.rwAltClr tr:nth-child(odd) {background-color: #eeeeee}
.rwAltClr2 tr:nth-child(even) {background-color: #eeeeee}
.rwHovLG tr:hover { background-color:lightgray; } /*come after rwAltClr*/
.rwHovGrn tr:hover { background-color:rgba(200,255,200,.40); }
.rwHovBlu tr:hover { background-color:rgba(200,200,255,.40); }
.rwHrzPad10 td, .rwHrzPad10 th {padding-left:10px; padding-right:10px}
.rwVrtPad2 td {padding-top:2px; padding-bottom:2px}
.wnUnsld {color:#bbbbbb; border-bottom:1px dashed #bbbbbb; cursor:help}

ul.tmpl8 {line-height:1.5em; margin:0 0 0 20px; padding:0; color:#666}

#carDataWrap {border:1px solid #888888}
#carListWrap {border:1px solid #888888}
#rcmdLstLbl {font-weight:bold; font-size:14px}
#defaultlink {font-weight:bold}

.pan1 {background-color: #DEE7F2} /* can be replaced with !important version in some sites */
.pan2 {background-color: #A7C4E2} /* can be replaced with !important version in some sites */
.pan3 {background-color: #8DB6E1} /* can be replaced with !important version in some sites */
.pan1s {background-color: #D5DEEA} /* stock. can be replaced with !important version in some sites */
.pan2s {background-color: #DEE7F2} /* stock. can be replaced with !important version in some sites */
.pan1tbl,.pan2tbl,.pan3tbl td {text-align:left}

td.msgTxt, td.msgTxt2 { width:98%; word-break:break-word; }
td.newMsgTxt { outline:1px solid rgba(255,0,255,1); background-color:rgba(255,0,255,0.25); }

div.modalbarrier { filter:alpha(opacity=20); -moz-opacity:.20; opacity:.20; background-color:#888888; position:absolute; top:0px; left:0px; width:100%; height:100%; }
div.modalshadow { filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60; background-color:#000000; }
iframe.modaliframe { background-color:#ffffff; border:2px solid black; }

@media print {
  .npr {display:none}
  .sprtlnk, .TNavArea  {display:none}
}

.normalText A { TEXT-DECORATION: underline; }
.btn { BORDER-RIGHT:black 1px double; PADDING-RIGHT:2px; BORDER-TOP:black 1px double; PADDING-LEFT:2px; FONT-WEIGHT:bold; FONT-SIZE:11px; PADDING-BOTTOM:2px; BORDER-LEFT:black 1px double; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:black 1px double; FONT-FAMILY:Arial, Helvetica, sans-serif; BACKGROUND-COLOR:#d4d0c8; TEXT-DECORATION:none }

.btnCfrmDlgBlue, .btnCfrmDlgRed { cursor:pointer; box-sizing:border-box; border-radius:8px; font-family:Arial; color:#FFF; font-size:16px; padding:10px 20px; text-decoration:none; display:inline-block; width:45%; margin:2%; text-align:center; vertical-align:middle; font-weight:bold; }
.btnCfrmDlgBlue:hover, .btnCfrmDlgRed:hover { text-decoration: none; }
.btnCfrmDlgBlue { background: rgb(52, 152, 219) linear-gradient(to bottom, rgb(52, 152, 219), rgb(41, 128, 185)) repeat scroll 0% 0%; }
.btnCfrmDlgBlue:hover {  background: #3cb0fd; }
.btnCfrmDlgRed { background: rgb(219, 152, 52) linear-gradient(to bottom, rgb(219, 152, 52), rgb(185, 128, 41)) repeat scroll 0% 0%; }
.btnCfrmDlgRed:hover { background: rgb(219, 152, 52); }
.ui-widget-content  a.btnCfrmDlgBlue, .ui-widget-content  a.btnCfrmDlgRed  { color:#FFF; }
#AgreeToTermsLink { display:block; text-align:center; }
#CampaignTermsLink { display:block; text-align:center; text-decoration:none; border:1px dashed blue; padding:5px; margin-top:10px; }

/* was: /cars/images/star-sprite.png - converted for use in mail */
.starSprite { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAaCAYAAADovjFxAAACMUlEQVRYR+2YsWrVUBiAvz8Zim/QycJdCoJSbn4uXHDyBRzbpV0L4gMoOAqKawdXERS8Di6+wEVxyD3JYMHRoVOhDyAOyS83pOlNmtg4noMZE77hfMn5D1+EgSvLsv0kST4MPe+77ysjQ4t0zv0EHqrq6VgRvjK9EvI8n5dl+Q14qapPx0jwmemVkGXZiZk9Bs5UdWeMBJ8ZSdN0L47jeHOhZvYZ2F7fM7OjKIp+bD4vimIrjuPfoTDinLsPfLxc9A1vvQCeAV9DYqrtkKbpdhRF74AHf5FwXpblwWw2W4bGNDNhsVjEk8nkOfCkK0JElkVRrAWcbz4LhWkNxnprfOn5GgZPiRCYroQXG1/CL+BWLeRUVe/1bRXnnPdMV8J34C7wHnhkZoci8qqWsaOqZ10RzjnvmUaCc+424ETkOEmST5eLXa1WuyLyFnijqq83JYTCNBLyPL8DXEyn04vu264H4FxV10djc4XCDLaDZexLwj8FlK/MsARHFVCijA4o85TplWA5c0qqgBJlVED5zPRLyDjBqAJKlFEBZR4zYil7xLQCCqMJKIwjIloBRcEWMa2A8pkRc/wPqCqXU7aJuDGgKDmQGVVAhcQ0M8EWxEzoDSiEJUUloBVQoTCtwVhvjd6AGjolQmC6EgZjSJTegDKH90xXQiuGMA4RmoAS5VpAmcN75momOKqAQjiWhCagbMUuQhVQorQCygJhriTkVAElU64FVD0A56LVv8XmskCYP1zyRQCqSn6HAAAAAElFTkSuQmCC) 0 0; }
.starSpriteNeg13 { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAaCAYAAADovjFxAAACMUlEQVRYR+2YsWrVUBiAvz8Zim/QycJdCoJSbn4uXHDyBRzbpV0L4gMoOAqKawdXERS8Di6+wEVxyD3JYMHRoVOhDyAOyS83pOlNmtg4noMZE77hfMn5D1+EgSvLsv0kST4MPe+77ysjQ4t0zv0EHqrq6VgRvjK9EvI8n5dl+Q14qapPx0jwmemVkGXZiZk9Bs5UdWeMBJ8ZSdN0L47jeHOhZvYZ2F7fM7OjKIp+bD4vimIrjuPfoTDinLsPfLxc9A1vvQCeAV9DYqrtkKbpdhRF74AHf5FwXpblwWw2W4bGNDNhsVjEk8nkOfCkK0JElkVRrAWcbz4LhWkNxnprfOn5GgZPiRCYroQXG1/CL+BWLeRUVe/1bRXnnPdMV8J34C7wHnhkZoci8qqWsaOqZ10RzjnvmUaCc+424ETkOEmST5eLXa1WuyLyFnijqq83JYTCNBLyPL8DXEyn04vu264H4FxV10djc4XCDLaDZexLwj8FlK/MsARHFVCijA4o85TplWA5c0qqgBJlVED5zPRLyDjBqAJKlFEBZR4zYil7xLQCCqMJKIwjIloBRcEWMa2A8pkRc/wPqCqXU7aJuDGgKDmQGVVAhcQ0M8EWxEzoDSiEJUUloBVQoTCtwVhvjd6AGjolQmC6EgZjSJTegDKH90xXQiuGMA4RmoAS5VpAmcN75momOKqAQjiWhCagbMUuQhVQorQCygJhriTkVAElU64FVD0A56LVv8XmskCYP1zyRQCqSn6HAAAAAElFTkSuQmCC) 0 -13px; }
.cancelAttach { text-decoration:none; cursor:pointer; color:#777777; font-size:10px; margin-left:5px; }
.AucBidStatUsr { margin-top:5px; color:green; }
.AucBidStatUsrPend { font-size:11px; opacity:.75; }

/* ===== MOBILE  ===== */

/* if mobile moved to other file, may need to keep some rules here, such as .notouch */
.notouch { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

#rfnMenu { display:none; position:fixed; top:62px; left:0; right:0; bottom:0; overflow-y:scroll; background-color:white; z-index:100; text-align:left; font-size:16px; }
#rfnClear { opacity:0.4; }
.rfnNavLarr { float:left;font-size:35px;line-height:.5em;margin-left:-10px;color:#0D3B8A; }
.rfnNavRarr { float:right;font-size:25px;line-height:.55em;margin-right:-7px;color:#BBB; }
.rfnList { display:none; }
.rfnNav { border-bottom:1px solid #DDD; padding:15px 20px; text-decoration:none; cursor:pointer; background-color:#eee; text-align:center; }
.rfnFltr, .rfnFltrClr, #rfnSrch { border-bottom:1px solid #DDD; padding:15px 20px; text-decoration:none; cursor:pointer; }
.rfnLI, .rfnListSub { border-bottom:1px solid #DDD; padding:15px 20px; text-decoration:none; cursor:pointer; }
.rfnFltrLbl { float:right; margin-right:20px; color:#666; font-size:15px; }
.rfnSelected { font-weight: bold; }

.riReady { display:inline-block; padding:1px 5px; margin:2px; text-decoration:none; color:green; font-weight:bold; background-color:#9d9; border:1px dashed green; }
.riReadyGrp { border:1px dashed red; }
.riOld, .bidOld  { border:1px solid orange; background-color:#ffa60278; padding:2px 6px 0 4px; }
.riOld a, .bidOld a { text-decoration:none; }
.riOld a:hover, .bidOld a:hover { text-decoration:underline; background-color:orange; }
.riOld b, .bidOld b  { text-shadow: 1px 1px 1px black, -1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black; color: white; }
.riOld .emoji { font-size:1.25em; }
.bidOld .monoMoji { font-size:1.25em; filter:grayscale(100%) brightness(120%) contrast(150%); }

.custOfr { border-top:1px dashed rgba(0,0,0,.3); padding:3px 0; margin-top:5px; background-color:rgba(0,255,0,.4); text-align:left; }
.ofrCancl { opacity:.4; text-decoration: line-through; }

.bulktip { margin:12px 0 0; font-size:12px; opacity:.6; cursor:help; }
.bulktip:hover { opacity:1; background-color:rgba(0,255,0,.2); } 

/* ===== Account Balance  ===== */
/* Tab */
.tab-wrap { display: flex;  flex-wrap: wrap; }
.tab-label { font-size: 14px; color: #000; line-height:1.5em; background: LightGray; margin-right: 5px; padding: 3px 12px; order: -1; }
.tab-label:hover { cursor: pointer; color: #fff; background: #1e90ff; }
.tab-content { width: 100%; display: none; padding: 10px 20px; background-color: #f0f8ff; border: 1px solid #ccc; }
.tab-switch:checked+.tab-label { color: #fff; background: #1e90ff; }
.tab-switch:checked+.tab-label+.tab-content { display: block; }
.tab-switch { display: none; }
/* Table */
.list th { border-bottom:1px solid #333; }
.fixed-th { position: sticky; top: 0; color: #fff; background: #333; &:before{ content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #ccc; }}

/* Japan Market Avg. Price */
.avg-price-tab{
  margin-top: 10px;
}
.avg-price-tab a{
  font-size: 13px;
  cursor: pointer;
}
.avg-price-tab .more-dtl-btn{
  border: 1px solid #0000aa;
  text-decoration: none;
  padding: 4px;
  background: #f0f0f0;
}
.avg-price-tab .more-dtl-btn:hover{
  background:#dbdada ;
}
.avg-data table{
  margin-top:20px!important;
}
/* chatbot css */
.chat-icon {
  position: fixed;
  right: 20px;
  bottom: 60px;
  background:#8dd8e8;
  color: #fff;
  border-radius: 50%;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 1000;
}

.chatbot-container {
  position: fixed;
  right: 20px;
  bottom: 140px;
  width: 350px;
  height: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: scaleY(1);
  transition: transform 0.3s ease, opacity 0.4s ease;
  z-index: 999;
}

.hidden-chatbox {
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
}

.chatbot-header {
  background: linear-gradient(90deg, rgb(2 0 36 / 67%) 0%, rgb(9 51 121 / 64%) 35%, rgb(0 212 255 / 64%) 100%);
  color: #fff;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.chatbot-messages {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
}

.chatbot-input {
  display: flex;
}

.chatbot-input input {
  flex-grow: 1;
  border: none;
  padding: 10px;
  border-bottom-left-radius: 10px;
}

.chatbot-input button {
  border: none;
  background-color: #007bff;
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom-right-radius: 10px;
}

.chatbot-input button:hover {
  background-color: #0056b3;
}

.chatbot-message-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.chatbot-message-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.chatbot-message {
  background-color: #e7e7e7;
  color: #000000;
  padding: 10px;
  border-radius: 10px;
  max-width: 80%;
  word-wrap: break-word;
  font-size: 14px;
}

.btn-group {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.service-button,
.service-button-1 {
  margin-right: 5px;
  margin-bottom: 5px;
  background: #bffad975;
  border: 1px solid #3a3a3a8a;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
}


.service-button:hover,
.service-button-1:hover{
  background: #a2faca;
}

.btn:last-child {
  margin-right: 0;
}
.user-message-container {
  justify-content: flex-end;
}

.user-message {
  background-color: #007bff;
  color: #fff;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  margin-left: 10px;
}
.user-label {
  color: #888;
  font-size: 10px;
  margin-right: 10px;
}
#chatbot-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  ;
}

.reset-button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 2px 10px;
  cursor: pointer;
  font-size: 13px;
}

.reset-button:hover {
  background-color: #ff1a1a;
}

/* related cars slider css */
.slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 30px;
  height: 30px;
  background: #ff513f; /* Change this to your preferred color */
  color: #fff;
  border: none;
  border-radius: 50%;
  z-index: 99;
  cursor: pointer;
  outline: none; /* Remove the default focus outline */
  opacity: 1;
}

.slick-prev:focus, .slick-next:focus,
.slick-prev:active, .slick-next:active,
.slick-prev:hover, .slick-next:hover {
  background: #000; /* Ensure the background color stays consistent */
  color: #fff; /* Ensure the text color stays consistent */
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}
.l-wrapper {
  width: 320px;
  z-index: 9;

}

.card {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
  margin: 10px;
  cursor: grab;
}

.card__header {
  display: flex;

  flex-wrap: wrap;
}

.card__title {
  padding: 0rem 1rem 0;
  font-size: 1rem;
  /* margin: 0.4rem 0; */
  order: 1;
  text-align: center !important;
  margin-top: 1rem;
  margin-bottom: 0.3rem;
}

.card__thumbnail {
  margin: 0;
  order: 0;
}

.card__image {
  width: 100%;
}

.card__body {
  padding: 0rem 1rem;
}

.card__text {
  font-size: .75rem;
}

.card__text + .card__text {
  margin-top: .3rem;
}

.card__text.-number {
  text-align: right;
}

.card__footer {
  padding: 0rem 1rem;
  padding-bottom: 0.3rem;
  border-top: 1px solid #ddd;
}

.related-vehicle-wrapper .button {
  display: inline-block;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
}

.related-vehicle-wrapper .button.-compact {
  padding: .5rem 1rem;
  border-radius: .25rem;
  background-color: #3149A6;
  color: #fff;
  font-weight: bold;
}

.related-vehicle-wrapper .button.-compact:hover,
.related-vehicle-wrapper .button.-compact:focus {
  background-color: #5972d4;
}
.related-vehicle-wrapper .button.-compactAA {
  padding: .5rem 1rem;
  border-radius: .25rem;
  background-color: #ff4d4d;
  color: #fff;
  font-weight: bold;
}

.related-vehicle-wrapper .button.-compactAA:hover,
.related-vehicle-wrapper .button.-compactAA:focus {
  background-color: #ff7777;
}

.related-vehicle-wrapper img {
  max-width: 100%;
  vertical-align: bottom;
}
.card__price{
  font-size: 16px;
  color: red;
}
.card__list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.card__list-item {
  flex: 0 0 33.3333%; /* Each item takes up one third of the row */
  box-sizing: border-box;
  padding: 5px;
  font-size: 14px;
  font-weight: 600;
  /* text-align: center; */
}
/* For 1024px to 1440px Resolution (Laptops) */
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
  .card__list-item{
    flex: 0 0 50%;
    
  }
  .card__title{
    font-size: 16px;
 
  }
}

/* Add Bump Botton user.asp */
a.btn-radius-solid {
  font-weight: bold; 
  border: 1px solid #ccc;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#d4d0c8));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #d4d0c8 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #d4d0c8 100%);
  -webkit-box-shadow: inset 1px 1px 1px #fff;
  box-shadow: inset 1px 1px 1px #fff;
  text-decoration: none;
	line-height: 1.5;
	position: relative;
	display: inline-block;
  margin: 0.4rem 0 0.4rem 0;
	padding: 0.2rem 0.4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all .3s;
	transition: all .3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: #212529;
	border-radius: .1rem
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* height: 80%; */
  overflow: scroll;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.BalanceDateExtract {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* .BalanceDateExtract form {
  display: flex;
  align-items: center;
} */

.BalanceDateExtract input,
.BalanceDateExtract select
 {
  padding: 5px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  width: 140px;
  text-align: center;
}
.BalanceDateExtract select{
  width: 250px!important;
}
#BalanceDateBtn:disabled {
  background-color: #ccc;  /* Gray background */
  color: #666;             /* Gray text */
  cursor: not-allowed;     /* 'Not allowed' cursor */
  border: 1px solid #ccc;  /* Optional: make border match the background */
}
.BalanceDateExtract input:focus {
  outline: none;
  border-color: #007BFF;
}

.BalanceDateExtract button {
  padding: 6px 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 10px;
}

.BalanceDateExtract button:hover {
  background-color: #0056b3;
}

.BalanceDateExtract span {
  margin: 0 5px;
  color: #666;
}

a.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}
/* japan and newzealand market price button */
.jp_nz_mrk_btn button{
  background: #a3c2ff;
  border: 2px dashed #ff4545;
  padding:5px;
  cursor: pointer;
}
.jp_nz_mrk_btn button:hover{
  background: #9d9;
}

.multi_bid {
  background-color: #76a17f; /* Light green background */
  padding: 2px;
  display: inline-block;
  /* border-radius: 5px; */
  border: 1px solid #b5d1b6; /* Border color */
  font-family: Arial, sans-serif;
}

.multi_bid b {
  margin-right: 5px;
}

.multi_bid input[type="text"],
input[type="number"] {
  width: 37px;
  padding: 3px;
  text-align: right;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/*** START for the confirmation message popup ***/
.form-title {
  margin-bottom: 15px;
  font-size: 14px;
}
.form-row {
  display: flex;
  align-items: center;
  margin: 10px 0 10px 0;
  padding: 5px 0 5px 0;
}
.form-label {
  font-weight: bold;
  color: #0000FF;
  margin-right: 10px;
  white-space: nowrap;
}
.fee-wrapper {
  position: relative;
  flex: 0;
  min-width: 160px;
}

#fee-input, #tpf-input {
  /*width: 100%;*/
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}
#tpf-input { width: 90px; }
.dropdown-btn, .tpf-dropdown-btn {
  position: absolute;
  /*right: 0;*/
  left: 34px;
  top: 0;
  height: 100%;
  width: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpf-dropdown-btn { left: 64px; }
.dropdown-btn:after, .tpf-dropdown-btn:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
}
.dropdown-list, .tpf-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /*width: 100%;*/
  width: 60px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 10;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown-list, .tpf-dropdown-list li {
  padding: 6px 8px;
  cursor: pointer;
}
.dropdown-list, .tpf-dropdown-list li:hover {
  background: #f5f5f5;
}
.button-row {
  display: flex;
  justify-content: space-between;
}
.left-buttons {
  display: flex;
  gap: 5px;
}
#resultMsg {
  margin: 20px 0 20px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  min-height: 20px;
}
.positive-ccsValue{
  float: right;
  background:#a7f3ad ;
  padding: 1px;
  border-radius: 15px;
  width: 90px;
  text-align: center;
}
.negative-ccsValue{
  float: right;
  background:#ffa6a6 ;
  padding: 1px;
  border-radius: 15px;
  width: 90px;
  text-align: center;
}
.negative-ccsValue-bg{
  background: #ffa6a6;
}
.positive-ccsValue-bg{
  background:#a7f3ad ;
}
/* Container for the tooltip */
.tooltip-container {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border-bottom: 1px dotted #333;
  font-weight: bold;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-control {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-actions {
  margin-top: 20px;
  text-align: right;
}

.btn-save, .btn-cancel {
  padding: 8px 16px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-save {
  background-color: #4CAF50;
  color: white;
}

.btn-cancel {
  background-color: #f44336;
  color: white;
}

/* Tooltip styling */
/* Container for the tooltip */
.tooltip-container {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border-bottom: 1px dotted #333;
  font-weight: bold;
}

/* Tooltip styling */
.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 10px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  font-size: 14px;
  text-align: left;
  border: 2px solid #ccc;
}

/* Arrow for the tooltip */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Tooltip rows */
.tooltip-row {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tooltip values */
.tooltip-value {
  font-weight: bold;
}

/* Color-specific backgrounds for tooltips */
.positive-ccsValue {
  color: #008800;
}

.negative-ccsValue {
  color: #cc0000;
}

.positive-ccsValue.tooltip {
  background-color: #f0ffe0;
  border-color: #90EE90;
}

.positive-ccsValue.tooltip::after {
  border-color: #f0ffe0 transparent transparent transparent;
}

.negative-ccsValue.tooltip {
  background-color: #fff0f0;
  border-color: #ffcccc;
}

.negative-ccsValue.tooltip::after {
  border-color: #fff0f0 transparent transparent transparent;
}

/*** END ***/

@media only screen and (min-width: 1024px) and (max-width: 1440px) {
  /* Styles for laptops */
  .balance-print-buttons {
    margin-left: 80%!important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Styles for smaller laptops */
  .balance-print-buttons {
    margin-left: 80%!important;
  }
}
/* End */