:root { --ruco-red: #800000; --ruco-blue: #000080; --ruco-green: #009900; --ruco-lime-green: #66EE66; --ruco-shadow: 4px 4px 6px rgba(0, 0, 0, .3); --radial-highlight: radial-gradient(circle closest-side at 12% 12%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 500%); --ruco-gray: #D4D4D2; --shadow-close: 2px 2px 4px rgba(0, 0, 0, .5); --shadow-med: 4px 4px 8px rgba(0, 0, 0, .5); --shadow-far: 8px 8px 16px rgba(0, 0, 0, .5); --shadow-over: 195px 8px 8px rgba(0, 0, 0, .25); --even-row: rgba(0, 0, 0, .1); --odd-row: rgba(255, 255, 255, .4); --pad-close-top: .25rem; --pad-close-sides: .5rem; --yellow-hilite: #FFFF99; } span.finder { color: rgba(0, 0, 0, .01); } /* Either BODY or HTML has to have a PX font size. Unit REM will be based upon that. REM is relative to the root font size (the or element). EM is relative to the current font size of the nearest parent element font size. */ HTML { font-size: 18px; /* KEEP */ } BODY { font-family: verdana, arial, sans-serif; background-repeat: repeat; background-color: var(--ruco-gray); position: relative; margin: 0; padding: 0; } th { margin: 0; padding: 0; border: 0; font-size: .9rem; font: inherit; vertical-align: baseline; font-weight: bold; } A.mainlink { color: #000099; text-decoration: none; } A:Visited.mainlink { color: #000099; text-decoration: none; } A:Active.mainlink { color: #0000ff; text-decoration: underline; } A:Hover.mainlink { color: #0000ff; text-decoration: underline; } A.buttonlink { color: #ffff00; text-decoration: none; } A:Visited.buttonlink { color: #ffff00; text-decoration: none; } A:Active.buttonlink { color: #ffff00; text-decoration: none; } A:Hover.buttonlink { color: #ffcc00; text-decoration: none; } A.subjectlink { color: #FFFF00; text-decoration: none; } A:Visited.subjectlink { color: #33ff33; text-decoration: none; } A:Active.subjectlink { color: #33ff33; text-decoration: none; } A:Hover.subjectlink { color: #FFFF99; text-decoration: underline; } A.outboxlink { color: #33FFFF; text-decoration: none; } A:Visited.outboxlink { color: #33FFFF; text-decoration: none; } A:Active.outboxlink { color: #33FFFF; text-decoration: none; } A:Hover.outboxlink { color: #FF9999; text-decoration: underline; } A.messagelink { color: #000099; text-decoration: none; } A:Visited.messagelink { color: #6C0C02; text-decoration: none; } A.order { color: #FFFFFF; font-weight: bold; text-decoration: none; } A:hover.order { color: #000000; font-weight: bold; text-decoration: none; } A.ok { color: #00FF00; font-weight: bold; text-decoration: none; } A:hover.ok { color: #FFFF00; font-weight: bold; text-decoration: none; } A.low { color: #000000; font-weight: bold; text-decoration: none; } A:hover.low { color: #FF0000; font-weight: bold; text-decoration: none; } td.bottom { color: red; font-family: verdana, arial, helvetica, sans-serif; border-bottom: 1px solid #999999; font-size: .9rem; height: 20px; } td.top { font-family: verdana, arial, helvetica, sans-serif; border-top: 1px solid #999999; font-size: 1rem; } td.left { font-family: verdana, arial, helvetica, sans-serif; border-left: 1px solid #999999; font-size: 1rem; } td.right { font-family: verdana, arial, helvetica, sans-serif; border-right: 1px solid #000000; font-size: 1rem; } td.rightleft { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-right: 1px solid #000000; border-left: 1px solid #000000; font-size: 1rem; } td.nobot { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-right: 1px solid #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; font-size: 1rem; } td.notop { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; font-size: 1rem; } td.sw { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-bottom: 1px solid #000000; border-left: 1px solid #000000; font-size: 1rem; } td.nw { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-top: 1px solid #000000; border-left: 1px solid #000000; font-size: 1rem; } td.se { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-bottom: 1px solid #000000; border-right: 1px solid #000000; font-size: 1rem; } td.ne { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-top: 1px solid #000000; border-right: 1px solid #000000; font-size: 1rem; } td.box { font-family: verdana, arial, helvetica, sans-serif; border-top: 1px solid #666666; border-right: 1px solid #666666; border-left: 1px solid #666666; border-bottom: 1px solid #666666; font-size: 1rem; } td.rbox { font-family: verdana, arial, helvetica, sans-serif; background-color: #ffffff; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; font-size: .8rem; text-align: center; height: 18px; } td.note2 { font-size: x-small; font-weight: bold; color: blue; } td.note3 { font-size: 1rem; font-weight: normal; color: #000000; } td.green { font-size: .9rem; font-weight: bold; color: #ffffff; } td.yellow { font-size: .9rem; font-weight: bold; color: #000000; } td.red { font-size: .9rem; font-weight: bold; color: #000000; } td.smlabel { font-size: .6rem; font-weight: normal; color: #000000; } td.prtchg { font-size: .6rem; font-weight: normal; color: #000000; border-top: 2px solid #FF0000; border-right: 2px solid #FF0000; border-left: 2px solid #FF0000; border-bottom: 2px solid #FF0000; } A:Active.messagelink { color: #0000ff; } A:Hover.messagelink { color: #0000ff; } /* table { width: 100%; font-size: .5rem; } */ th { color: #000066; font-family: verdana, arial, sans-serif; /* font-size: 8px;*/ font-weight: bold; ; } th.inv { color: #FFFFFF; font-family: verdana, arial, sans-serif; /* font-size: 8px;*/ font-weight: bold; ; } td { color: #000000; font-family: verdana, arial, sans-serif; font-size: .9rem; /*here*/ font-weight: none; } td.prt { color: #000000; font-family: verdana, arial, sans-serif; /* font-size: .9rem;*/ text-decoration: bold; border-color: #ffffff; } td.minitd { font-family: verdana, arial, sans-serif; /* font-size: .9rem;*/ } td.lime { font-family: verdana, arial, sans-serif; /* font-size: .9rem;*/ color: lime; } tr.minititle { background-color: #000000; } td.tbltitle { color: #ffffff; font-weight: bold; text-align: center; white-space: nowrap !important; padding: .5rem !important; } h1 { color: #000000; font-family: verdana, arial, sans-serif; font-size: 2.0rem; &.spaced { letter-spacing: .5rem; } } h2 { color: #000000; font-family: verdana, arial, sans-serif; font-size: 1rem; text-decoration: bold; } h3 { color: var(--ruco-red); &.spaced { letter-spacing: .5rem; } } h4 { color: #000000; font-family: verdana, arial, sans-serif; font-size: 1rem; &.spaced { letter-spacing: .3rem; } } #menubar { position: fixed; left: 1.5rem; top: 6rem; } ul#menubar { margin: 2rem -.5rem; padding: 0; list-style-type: none; font-size: .8rem; font-weight: bold; li { padding: .3rem 0 .3rem 24px; background-image: url('/images/blue-arrow-16.png?8800118'); background-repeat: no-repeat; color: #F00; &.paragraph { padding-bottom: 2.5rem; } &.break { padding-bottom: 1.5rem; } a { color: var(--ruco-blue); } } } #menubar2 { position: absolute; left: 24px; top: 22px; } #content { position: absolute; left: 200px; top: 82px; } #content2 { position: absolute; top: 62px; } #menucontent { position: absolute; left: 200px; top: 140px; } #pagecontent { position: absolute; left: 200px; top: 95px; } #netlogo { position: absolute; left: 35px; top: 550px; } #BOMSPQ { position: absolute; left: 430px; top: 85px; } #BOMSPQpo { position: absolute; left: 200px; top: 230px; } th.headerbar { background-color: var(--ruco-blue); color: #ffffff; font-family: verdana, arial, sans-serif; font-size: 8px; } .warning { color: var(--ruco-red); text-decoration: none; font-family: verdana, arial, sans-serif; font-size: .9rem; } .edit { color: var(--ruco-green); text-decoration: none; font-family: verdana, arial, sans-serif; font-size: .9rem; } A.addLink { color: var(--ruco-blue); ; font-family: verdana, arial, sans-serif; font-size: 1rem; text-decoration: none; display: inline-block; margin: 1rem 0 .5rem 0; } A.editLink { color: var(--ruco-blue); ; font-family: verdana, arial, sans-serif; font-size: .9rem; text-decoration: none; } A.miniLink { color: #047473; font-family: verdana, arial, sans-serif; font-size: .9rem; text-decoration: bold; } A.miniLinkLime { color: #99FF00; font-family: verdana, arial, sans-serif; font-size: .9rem; text-decoration: bold; } A.menulink { color: #000000; font-family: verdana, arial, sans-serif; font-size: .9rem; text-decoration: bold; } A:Visited.addLink { text-decoration: none; } A:Active.addLink { color: #0012FA; text-decoration: underline; } A:Hover.addLink { color: #0012FA; text-decoration: underline; } select.inback { z-index: -1; } td.infront { z-index: 1; } .form-wrapper-green input[type="submit"] { display: block; background: #088A08; color: #088A08; border: none; padding: 10px 20px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer; } .button { background-color: #2F9FE7; border: 2px; color: white; padding: 1px 1px; text-align: center; text-decoration: none; display: inline-block; font-size: 12.5px; margin: 1px 1px; cursor: pointer; border-radius: 8px; } .button1 { border-radius: 8px; width: 100px; } /* ******************************************************************************** * styles added BRM, 2025-11-25 ******************************************************************************** */ table { th { font-size: .8rem; } border-collapse: collapse; &.bordered { td { border: 1px solid gray; } } td { vertical-align: top; &.active { text-align: center; } } td.active-yes { color: var(--ruco-green); } td.active-no { color: var(--ruco-red); } &.pad-close { td, th { padding: var(--pad-close-top) var(--pad-close-sides); } } &.pad-notsoclose { td, th { padding: .5rem .35rem; } } &.pad-medium { td, th { padding: .5rem 1rem; } } &.pad-excessive { td, th { padding: .75rem; } } &.everyother { tbody { tr:not([hidden]):nth-child(even) { background-color: var(--even-row); } tr:not([hidden]):nth-child(odd) { background-color: var(--odd-row); } } &.openclosed { tbody { tr.closed { &:nth-child(even) { background-color: #FFDDEE; } &:nth-child(odd) { background-color: #FFEEEE; } } tr.open { &:nth-child(even) { background-color: #DBEADC; } &:nth-child(odd) { background-color: #E9F1EA; } } } } } tbody { /* for times when rows still need to be colored but are grouped so nth-child(even/odd) won't work */ tr.even { background-color: var(--even-row); } tr.odd { background-color: var(--odd-row); } } &.row-hover { tr:hover { background-color: rgba(0, 0, 127, .1); } } th.smallHeader { select { font-size: .8rem; } } } thead { td, th { padding: .6rem; } &.header-subtle { background-color: RGBA(0, 0, 0, .2); } &.header-dark { background-color: RGBA(0, 0, 0, .4); } &.header-darker { background-color: RGBA(0, 0, 0, .8); th, td { color: #FFF !important; } } &.bordered { border-bottom: 1px solid rgba(0, 0, 0, .8); } &.double-bordered { border-bottom: 3px double rgba(0, 0, 0, .5); } } tag-yes::after { content: "yes"; color: green; display: inline; } tag-no::after { content: "no"; color: red; display: inline; } .buttonlink { border-radius: .2rem; background-color: #666; border: 1px solid black; white-space: nowrap; display: inline-block; padding: .5rem 1rem; margin: 1rem 0; font-size: 1rem; font-weight: 600; box-shadow: 2px 2px 4px rgba(0, 0, 0, .5); } .mailtable { border-collapse: collapse; tbody { text-transform: uppercase; background: #000; font-size: .9rem; tr:nth-child(even) { background: rgba(255, 255, 255, .1); } tr:hover { background: rgba(255, 255, 255, .2); } td { color: #FF3399; &.read { color: #33FFFF; } } } thead { background: #fff; &.thead2 { background: #000; * { color: #FFF; white-space: nowrap; } } } td { padding: .5rem; &.nomessages { color: #FF0000; } } } .error { color: #aa0000; } .screen-centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } input, select, textarea { font-family: inherit; font-size: 1rem; padding: .2rem; border-radius: .3rem !important; border: 1px solid gray; background-color: white; outline: 0; } label { font-size: 1rem; padding: .2rem; border: 0; outline: 0; cursor: pointer; background-color: transparent; } input[type=submit], button { padding: .25rem 1rem; font-size: .9rem; border-radius: .3rem; border: 1px solid gray; background: linear-gradient(to bottom, #eeeeee, #aaaaaa); &:hover { background: linear-gradient(to bottom, #eeeeee, #bbbbbb); } &:active { background: linear-gradient(to bottom, #ffffff, #cccccc); } } .nowrap { white-space: nowrap; } .xsmall { font-size: .7rem; } .small { font-size: .85rem; } .middled { vertical-align: middle; } .redtext { color: red; } h1.rucoLogo { background-image: url(/images/ruco-logo.svg?2116); background-size: 250px auto; background-repeat: no-repeat; display: inline-block; width: 250px; height: 80px; text-indent: -10000px; margin: 0; } div#bar.vertical-bar, vertical-bar { position: fixed; left: 160px; top: 100px; margin-left: 1rem; width: 9px; height: 87%; border-left: 2px solid var(--ruco-blue); border-right: 4px solid var(--ruco-red); box-sizing: border-box; box-shadow: var(--ruco-shadow); } div#bar { position: absolute; left: 160px; top: 100px; } .printToPDF { background-image: url(/app/img/pdf-icon.png); display: inline-block; text-indent: -1000px; background-size: contain; height: 24px; width: 24px; cursor: pointer; } table#listopen { thead { tr { background-color: #000000 !important; th, td { color: #FFFFFF !important; } } } tbody { tr.pastdue { background-color: #FFBB00 !important; } tr.current { background-color: #ffffcc !important; } td.lineTotal { background-color: rgba(255, 255, 255, .5); text-align: right; &.left { text-align: left !important; } } a.edit { color: green; font-weight: bold; } a.delete { color: var(--ruco-red); font-weight: bold; } } } .v-align { vertical-align: top; } .r-align { text-align: right; } .bluetext { color: var(--ruco-blue); } .redtext { color: var(--ruco-red); } .spaced-heading-default { letter-spacing: .3rem; } .spaced-heading-close { letter-spacing: .15rem; } .pinkish { background-color: rgba(255, 0, 0, .08); } .numeric { text-align: right; &.red { color: var(--ruco-red); } } form.fromSubmit input[type=submit] { display: inline-block; color: white; font-size: .8rem; border-radius: 1rem; text-decoration: none; padding: .25rem 1rem; white-space: nowrap; background: var(--radial-highlight), linear-gradient(to bottom, #008299, #003388), #008299; font-weight: bold; &:hover { background: var(--radial-highlight), linear-gradient(to bottom, #35d8f5, #005eff), #35d8f5; } } .ship-button { display: inline-block; color: white; font-size: .8rem; border-radius: 1rem; text-decoration: none; padding: .25rem 1rem; white-space: nowrap; opacity: .8; transition: all .5s; &:hover { opacity: 1; } &.print { background: var(--radial-highlight), linear-gradient(to bottom, #008299, #003388), #008299; font-weight: bold; &:not(.nocaption)::after { content: "Print"; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, #F66, #f00), #0199d9; } } &.manual { background: var(--radial-highlight), linear-gradient(to bottom, #000099, #000033), #000080; font-weight: bold; &::after { content: "Manual"; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, #F66, #f00), #0199d9; } } &.bol { background: var(--radial-highlight), linear-gradient(to bottom, #000099, #000033), #000080; font-weight: bold; color: white; &::after { content: "Print BOL"; } &:hover { color: white; background: var(--radial-highlight), linear-gradient(to bottom, #4848c4, #363679), #000080; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, #Fff, #0199d9), #0199d9; color: white; } } &.order { background: var(--radial-highlight), linear-gradient(to bottom, #000099, #000033), #000080; font-weight: bold; color: white; &::after { content: "Order"; } &:hover { color: white; background: var(--radial-highlight), linear-gradient(to bottom, #4848c4, #363679), #000080; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, #Fff, #0199d9), #0199d9; color: white; } } &.ship { background: var(--radial-highlight), linear-gradient(to bottom, red, var(--ruco-red)), #0199d9; font-weight: bold; &::after { content: "Ship"; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, rgb(255, 169, 169), rgb(255, 72, 72)), #ff0000; } &:hover { background: var(--radial-highlight), linear-gradient(to bottom, rgb(192, 76, 76), rgb(255, 67, 67)), #ff0000; } } &.addnew { font-weight: bold; background: var(--radial-highlight), linear-gradient(to bottom, rgb(124, 245, 77), rgb(64, 127, 33)), rgb(64, 127, 33); &::after { content: "Add New"; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, rgb(182, 255, 154), rgb(70, 119, 45)), rgb(70, 119, 45); } &:hover { background: var(--radial-highlight), linear-gradient(to bottom, rgb(146, 255, 103), rgb(71, 131, 42)), rgb(64, 127, 33); } } &.reprint { font-weight: bold; background: var(--radial-highlight), linear-gradient(to bottom, rgb(85, 182, 46), rgb(40, 83, 18)), rgb(43, 90, 20); &::after { content: "Reprint"; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, rgb(200, 255, 200), rgb(105, 167, 74)), rgb(105, 167, 74); } &:hover { background: var(--radial-highlight), linear-gradient(to bottom, rgb(146, 255, 103), rgb(71, 131, 42)), rgb(64, 127, 33); } } &.acknowledge { background: var(--radial-highlight), linear-gradient(to bottom, #2F9FE7, #154a6b); font-size: .9rem; border: 1px solid gray; text-transform: uppercase; &::after { content: "acknowledge"; } &:active { background: var(--radial-highlight), linear-gradient(to bottom, #bee6ff, #32b1ff); } } &.larger { font-size: 1.1rem; } } .outlined { &.black { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } &.gray { text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666; } } tr.whiteheading { th { background: white !important; } } .btn-blue { color: blue; } .btn-red { color: var(--ruco-red); } .btn-white { color: white; } .btn-black { color: black; } .btn-green { color: green; } .btn-lime { color: #0f0; } #tblInvoiceListing { width: 95%; } .tblOpenSdhipmentItems { tr { background-color: #FBFCEB; &:nth-child(even) { background-color: #F9FCC4; } td { font-size: .8rem; } } } img.icomenu { margin-right: .75rem; } #RUCO_logo { position: fixed; left: 0; top: 0; padding: .7rem 0 0 1rem; background-color: var(--ruco-gray); width: 100vw; z-index: 10; &.shadowed { box-shadow: var(--shadow-over); } } #tblDocuments { tr:nth-child(even) { background-color: rgba(0, 0, 0, .15); } td:not(.description) { font-size: .8rem; } thead { tr { background: var(--ruco-blue); th { color: white; padding: 1em; } } } } arrow-left-red { &:after { content: '\2190'; } font-weight: bold; font-size: 2rem; color: red; } .searchbox { background-image: url("/images/interface/magnifier16.png"); background-position: calc(100% - 4px); background-repeat: no-repeat; } .formfieldhints { padding: .5rem; font-style: italic; font-size: .8rem; } .div-textarea { width: 640px; background-color: white; border: 2px inset; outline: 0; padding: 1rem; &.short { height: 100px; } &.med { height: 200px; } } @media print { .noprint, .noPrint { display: none; } .hugTheEdge { top: 0 !important; left: 0 !important; } } me-drawer { --drawer-width: 750px; --drawer-closed: -780px; /* drawer width + 50 */ z-index: 1001; display: block; height: 100vw; width: var(--drawer-width); background-color: #efefef; border: 1px solid black; top: 0; right: var(--drawer-closed); position: fixed; box-shadow: -4px 0px 4px rgba(0, 0, 0, .5); padding: 1rem; &.open { right: -5px; } drawer-head { position: absolute; height: 48px; left: 1rem; top: 1rem; width: 100%; /* border: 1px solid red; */ } drawer-foot { position: absolute; height: 48px; left: 0; bottom: -48px; width: 100%; /* border: 1px solid red; */ } } modal-overlay { z-index: 1000; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(60, 60, 60, 0.85); backdrop-filter: blur(2px); } .table_sortable thead th.desc:after { content: '\2193'; } .table_sortable thead th.asc:after { content: '\2191'; } #scrollContainer .dz-file-preview { position: absolute !important; left: 50px !important; top: 50px !important; } .ico-hoverable { opacity: .25; transition: all .5s; cursor: pointer; &:hover { opacity: 1; } } fieldset { padding: 1rem; border-radius: .5rem; &.table-like { legend { color: #008; font-weight: bold; font-size: .9rem; padding: 0 1rem } } } ul.breadcrumbs { font-size: .8rem; font-weight: bold; margin: 2rem 0; padding: 0; height: 32px; list-style-type: '⬅'; list-style-type: '\2B9C'; li { float: left; margin-right: 1.5rem; margin-left: 1rem; padding-left: .5rem; a { text-decoration: none; &:hover { text-decoration: underline; } } } } a.fauxbutton { all: unset; /* Reset all styles */ padding: .25rem 1rem; font-size: .9rem; border-radius: .3rem; border: 1px solid gray; background: linear-gradient(to bottom, #eeeeee, #aaaaaa); cursor: default; &:hover { background: linear-gradient(to bottom, #eeeeee, #bbbbbb); } } .trumbowyg-editor ol, .trumbowyg-editor ul { margin: 1rem; } .trumbowyg-editor-box { background: white; border: 1p solid gray; } #dhtmltooltip { position: absolute; width: 150px; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; box-shadow: var(shadow-med); } table.tooltip { thead { td { font-weight: bold; } } td { white-space: no-wrap; } } tag-no::after { color: var(--ruco-red); content: 'No'; } tag-yes::after { color: var(--ruco-green); content: 'Yes'; } err-msg { color: var(--ruco-red); display: block; margin: 0 0 .5rem 0; } .black-white { background-color: black; th, td { padding: calc(var(--pad-close-top) * 1.1) calc(var(--pad-close-sides) * 1) !important; color: white !important; } } radio-block { margin-right: 1.5rem; input { margin-right: .35rem; } } .body-bom { #tblSummary { tr { td { white-space: nowrap; &:nth-child(2) { font-weight: bold; } } &.trBuildLevel { background-color: var(--ruco-blue); td:first-child { color: white; } td:nth-child(2) { color: var(--ruco-lime-green); } } } } div#topmessage { font-size: 1rem; color: red; margin: 0 0 1rem 0; } #tblInsertBOM { tr { &:first-child { background-color: black; th { color: white; font-weight: bold; } } &.trlist { background-color: #FF9999; &.tr-True-True { background-color: #ccffcc; } &.tr-True-False { background-color: #ffffff; } } td { white-space: nowrap; &.td-rowlabel { width: 80px; &::after { content: "Raw Material"; &.td-rowlabel-0::after { content: "Component"; } } } &.tdAlternate { color: red; &::after { content: "Primary"; } &.tdAlternate-True { color: green; &::after { content: "Alternate"; } } } } } } } yellow-hilite { display: inline-block; padding: .1rem; background-color: var(--yellow-hilite); } #tblInvoiceListing { .open-status { background-color: #ffcc66; } .open-credit { background-color: #FFCC99; } .closed-status { background-color: #CCCCFF; } .closed-credit { background-color: #CCCCFF; } .partial-status { background-color: #DDDDFC; } .partial-credit { background-color: #DDDDFC; } .invoice-open { background-color: #e8fbea; } .closed-invoice-zero { background-color: #f6fbab; } .closed-invoice-due { background-color: #fbc2bc; } .white-status { background-color: #FFFFFF; } }