:root {
    --body-bg: #ffffff;
    --body-text: #912501;
    --link: #0646c4;
    --link-hover: #000000;
    --link-hover2: #000000;
    --link-hover-decoration: none;
    --link-active: green;
    --table-header-bg: #cf6220;
    --table-header-border: #ffd1a4;
    --row-odd-bg: #ffffff;
    --row-even-bg: #FFEEEE;
    --row-hover-bg: #acf378;
    --row-hover-text: #ff3600;
    --enabled-bg: #ffffff;
    --enabled-text: #000;
    --disabled-bg: #F7F7F7;
    --disabled-text: #575757;
    scrollbar-width: thin;
}

html[data-theme='dark'], body.darkmode {
    --body-bg: #161a1e;
    --body-text: #c3c6d6;
    --link: #9ac4ff;
    --link-hover: #9ac4ff;
    --link-hover2: #000000;
    --link-hover-decoration: underline solid 2px;
    --link-active: #fff;
    --table-header-bg: #cf6220;
    --table-header-border: #808080;
    --row-odd-bg: #24282d;
    --row-even-bg: #1d2226;
    --row-hover-bg: black;
    --row-hover-text: #FFF;
    --enabled-bg: #22272d;
    --enabled-text: #e8e8e8;
    --disabled-bg: #40474f;
    --disabled-text: #e8e8e8;
    scrollbar-width: thin;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--body-text);
    background-color: var(--body-bg);
    font-size: 11px;
}

/*input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']):not([type='radio']), textarea, select {*/
input, textarea, select {
    border-width: 1px;
    padding: 2px 2px;
    -webkit-border-radius:3px;
    color: var(--enabled-text);
}

html[data-theme='dark'] input:not([disabled]),
html[data-theme='dark'] textarea:not([disabled]),
html[data-theme='dark'] select:not([disabled]) {
    background-color: var(--enabled-bg) !important;
    color: var(--enabled-text) !important;
}

input[disabled],
input[disabled='disabled'] {
    cursor:default;
    background: var(--disabled-bg);
    color: var(--disabled-text);
}

textarea[disabled='disabled'] {
    background: var(--disabled-bg);
    cursor:default;
    color: var(--disabled-text);
}

input [readonly='true'], input[readonly] {
    background-color: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: default;
}

textarea [readonly='true'], textarea[readonly] {
    background-color: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: default;
}

select:not([disabled]) {
    background: var(--enabled-bg);
}

select[disabled] {
    background: var(--disabled-bg);
    cursor:default;
    color: var(--disabled-text);
}

table {
    empty-cells: show;
}

/* ASLI tambahan coba"*/
a:link {
    color: var(--link);
    text-decoration:none;
    cursor: pointer;
}
a:visited {
    color: var(--link);
    text-decoration:none;
    cursor: pointer;
}
a:hover {
    color: var(--link-hover);
    text-decoration:none;
    cursor: pointer;
}
a:active {
    color: var(--link-active);
    text-decoration:none;
    cursor: pointer;
}

/* link dalam table
a:link {color:maroon;text-decoration:none;}
a:visited {color:maroon;text-decoration:none;}
a:hover {color:black;text-decoration:none;}
a:active {color:green; text-decoration:none;}*/

/* link pada form  jsfcrud_list_form*/
form.jsfcrud_list_form a:link{
    color:#ffffff;
    text-decoration:none;
}
form.jsfcrud_list_form a:visited{
    color:#ffffff;
    text-decoration:none;
}
form.jsfcrud_list_form a:hover{
    color: var(--link-hover2);
    text-decoration:none;
}
form.jsfcrud_list_form a:active{
    color: var(--link-active);
    text-decoration:none;
}

/* link pada header column*/
form.jsfcrud_list_form th, td th a:link{
    color:#ffffff;
    text-decoration:none;
}
form.jsfcrud_list_form th, td th a:visited{
    color:#ffffff;
    text-decoration:none;
}
form.jsfcrud_list_form th, td th a:hover{
    color: var(--link-hover);
    text-decoration:none;
}
form.jsfcrud_list_form th, td th a:active{
    color: var(--link-active);
    text-decoration:none;
}

/* link pada form  jsfcrud_list_form*/
div.jsfcrud_list_form a:link{
    color:#ffffff;
    text-decoration:none;
}
div.jsfcrud_list_form a:visited{
    color:#ffffff;
    text-decoration:none;
}
div.jsfcrud_list_form a:hover{
    color: var(--link-hover);
    text-decoration:none;
}
div.jsfcrud_list_form a:active{
    color: var(--link-active);
    text-decoration:none;
}

/* link pada header column*/
div.jsfcrud_list_form th, td th a:link{
    color:#ffffff;
    text-decoration:none;
}
div.jsfcrud_list_form th, td th a:visited{
    color:#ffffff;
    text-decoration:none;
}
div.jsfcrud_list_form th, td th a:hover{
    color: var(--link-hover);
    text-decoration:none;
}
div.jsfcrud_list_form th, td th a:active{
    color: var(--link-active);
    text-decoration:none;
}


/* link pada baris */
tr.jsfcrud_odd_row a:link{
    color: var(--link);
    text-decoration:none;
}
tr.jsfcrud_odd_row a:visited{
    color: var(--link);
    text-decoration:none;
}
tr.jsfcrud_odd_row a:hover{
    color: var(--link-hover);
    text-decoration:var(--link-hover-decoration);
}
tr.jsfcrud_odd_row a:active{
    color: var(--link-active);
    text-decoration:none;
}

tr.jsfcrud_even_row a:link{
    color: var(--link);
    text-decoration:none;
}
tr.jsfcrud_even_row a:visited{
    color: var(--link);
    text-decoration:none;
}
tr.jsfcrud_even_row a:hover{
    color: var(--link-hover);
    text-decoration:var(--link-hover-decoration);
}
tr.jsfcrud_even_row a:active{
    color: var(--link-active);
    text-decoration:none;
}

tr.jsfcrud_odd_row_list a:link{
    color:#ffffff;
    text-decoration:none;
}
html[data-theme='dark'] tr.jsfcrud_odd_row_list a[style*="color:blue"]:link {
    color: var(--link) !important;
    text-decoration: none;
}
tr.jsfcrud_odd_row_list a:visited{
    color:#ffffff;
    text-decoration:none;
}
tr.jsfcrud_odd_row_list a:hover{
    color: var(--link-hover);
    text-decoration:none;
}
tr.jsfcrud_odd_row_list a:active{
    color: var(--link-active);
    text-decoration:none;
}
html[data-theme='dark'] tr.jsfcrud_odd_row_list a[style*="color:blue"]:visited {
    color: var(--link) !important;
    text-decoration: none;
}
html[data-theme='dark'] tr.jsfcrud_odd_row_list a[style*="color:blue"]:hover {
    color: var(--link) !important;
    text-decoration: var(--link-hover-decoration);
}

tr.jsfcrud_even_row_list a:link{
    color:#ffffff;
    text-decoration:none;
}
html[data-theme='dark'] tr.jsfcrud_even_row_list a[style*="color:blue"]:link {
    color: var(--link) !important;
    text-decoration: none;
}
html[data-theme='dark'] tr.jsfcrud_even_row_list a[style*="color:blue"]:visited {
    color: var(--link) !important;
    text-decoration: none;
}
html[data-theme='dark'] tr.jsfcrud_even_row_list a[style*="color:blue"]:hover {
    color: var(--link) !important;
    text-decoration: var(--link-hover-decoration);
}
tr.jsfcrud_even_row_list a:visited{
    color:#ffffff;
    text-decoration:none;
}
tr.jsfcrud_even_row_list a:hover{
    color: var(--link-hover);
    text-decoration:none;
}
tr.jsfcrud_even_row_list a:active{
    color: var(--link-active);
    text-decoration:none;
}

/* button all
form.jsfcrud_list_form td.a:link{color:red;text-decoration:none;}
form.jsfcrud_list_form td.a:visited{color:red;text-decoration:none;}
form.jsfcrud_list_form td.a:hover{color:black;text-decoration:none;}
form.jsfcrud_list_form td.a:active{color:white;text-decoration:none;}
*/


form.jsfcrud_list_form th, td th {
    font-size: 11px;
    color: #ffffff;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-color: var(--table-header-border);
    border-bottom-color: var(--table-header-border);
    border-left-color: var(--table-header-border);
    border-right-color: var(--table-header-border);
    letter-spacing: 1px;
    text-align: left;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    background-color: var(--table-header-bg);
}

form.jsfcrud_list_form th{
    cursor: pointer;
}

td {
    vertical-align: top;
    padding-bottom: 1px;
    font-size: 11px;
}

form.jsfcrud_list_form td, td td {
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-color: var(--table-header-border);
    border-bottom-color: var(--table-header-border);
    border-left-color: var(--table-header-border);
    border-right-color: var(--table-header-border);
    vertical-align: top;
    padding-bottom: 0px;
}

div.jsfcrud_list_form th, td th {
    font-size: 11px;
    color: #ffffff;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-color: var(--table-header-border);
    border-bottom-color: var(--table-header-border);
    border-left-color: var(--table-header-border);
    border-right-color: var(--table-header-border);
    letter-spacing: 1px;
    text-align: left;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    background-color: var(--table-header-bg);
}

div.jsfcrud_list_form th{
    cursor: pointer;
}

div.jsfcrud_list_form td, td td {
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-color: var(--table-header-border);
    border-bottom-color: var(--table-header-border);
    border-left-color: var(--table-header-border);
    border-right-color: var(--table-header-border);
    vertical-align: top;
    padding-bottom: 0px;
}

tr:hover.jsfcrud_odd_row {
    color: var(--row-hover-text);
    background-color: var(--row-hover-bg);
    text-decoration:none;
    cursor: pointer;
}

tr:hover.jsfcrud_even_row {
    color: var(--row-hover-text);
    background-color: var(--row-hover-bg);
    text-decoration:none;
    cursor: pointer;
}

tr.jsfcrud_odd_row {
    background-color: var(--row-odd-bg);
}
tr.jsfcrud_even_row {
    background-color: var(--row-even-bg);
}

tr:hover.jsfcrud_odd_row_list {
    color: var(--row-hover-text);
    background-color: var(--row-hover-bg);
    text-decoration:none;
    cursor: pointer;
}

tr:hover.jsfcrud_even_row_list {
    color: var(--row-hover-text);
    background-color: var(--row-hover-bg);
    text-decoration:none;
    cursor: pointer;
}

tr.jsfcrud_odd_row_list {
    background-color: var(--row-odd-bg);
}
tr.jsfcrud_even_row_list {
    background-color: var(--row-even-bg);
}

div {
    scrollbar-width: thin;
}

fieldset {
    scrollbar-width: thin;
}

#busyImage {
    position: absolute;
    left: 50%;
    top: 50%;
}

.centerAlign {
    text-align: center;
}

.leftAlign {
    text-align: left;
}

.rightAlign {
    text-align: right;
}

.width10 {
    width: 10px;
}
.width30 {
    width: 30px;
}

/* Untuk menghilangkan border hanya pada table dengan class no-border */
table.no-border,
table.no-border th {
    border: none !important;
}
table.no-border tr,
table.no-border td {
    border: none !important;
    border-collapse: collapse;
}

.jscalendar-DB-div-style {
    position: fixed;
}

html[data-theme='dark'] span[style*="color:blue"],
html[data-theme='dark'] span[style*="color: blue"],
html[data-theme='dark'] span[style*="color:#00f"],
html[data-theme='dark'] span[style*="color: rgb(0, 0, 255)"] {
    color: #9ac4ff !important;
}

html[data-theme='dark'] label[style*="color: blue"] {
    color: #9ac4ff !important;
}

html[data-theme='dark'] a[style*="color: blue"] {
    color: #9ac4ff !important;
}

html[data-theme='dark'] a[style*="color: blue"]:hover {
    text-decoration: var(--link-hover-decoration);
}

html[data-theme='dark'] tr[style*="background-color:#c3c6d6"] {
    color: #000 !important;
}

html[data-theme='dark'] tr[style*="background-color:#c3c6d6"] a,
html[data-theme='dark'] tr[style*="background-color:#c3c6d6"] a:link,
html[data-theme='dark'] tr[style*="background-color:#c3c6d6"] a:visited {
    color: #000 !important;
    text-decoration: none;
}

html[data-theme='dark'] tr[style*="background-color:#c3c6d6"] a:hover {
    color: #000 !important;
    text-decoration: var(--link-hover-decoration);
}

html[data-theme='dark'] div[style*="background-color:#F7E3D7"],
html[data-theme='dark'] div[style*="background-color: #F7E3D7"] {
    background-color: #161a1e !important;
    border: 1px solid #808080 !important;
}

html[data-theme='dark'] table[style*="border: 1px maroon"],
html[data-theme='dark'] table[style*="border:1px maroon"] {
    border-color: #808080 !important;
}

html[data-theme='dark'] img[src*="YES3.ICO"] {
    content: url("../../images/YES3-dark.ico");
}

/* --- START DARK MODE CALENDAR --- */

html[data-theme='dark'] .jscalendar-DB-body-style {
    background-color: #22272d;
}

html[data-theme='dark'] .jscalendar-DB-div-style {
    background-color: #22272d;
    color: #22272d;
    border-color: #22272d;
    box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}

html[data-theme='dark'] .jscalendar-DB-title-background-style {
    background-color: #22272d;
    color: #22272d;
}

html[data-theme='dark'] .jscalendar-DB-table-style {
    background-color: #22272d;
}

html[data-theme='dark'] .jscalendar-DB-table-style td a,
html[data-theme='dark'] .jscalendar-DB-normal-day-style {
    color: #c3c6d6;
    background: transparent;
    background-color: #22272d;
}
html[data-theme='dark'] .jscalendar-DB-title-control-normal-style {
    border-color: #22272d;
}

html[data-theme='dark'] .jscalendar-DB-selected-day-style {
    background-color: #fff;
    color: #c3c6d6;
    font-weight: bold;
}

html[data-theme='dark'] .jscalendar-DB-today-style {
    color: #c3c6d6;
    background-color: #22272d;
}

html[data-theme='dark'] .jscalendar-DB-dropdown-style {
    background-color: #c3c6d6;
    border-color: #444;
    color: #2a2f34;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

html[data-theme='dark'] .jscalendar-DB-normal-day-style:hover {
    background-color: #000;
    color: #fff;
}

/* --- END DARK MODE CALENDAR --- */


/* BEGIN - STYLE INPUT TEXT HEADER TRANSAKSI */
.inputDate {
    width : 70px; 
}

.inputTime {
    width : 50px; 
}

.inputIdNum {
    width : 70px; 
}

.selectTrtype {
    width : 145px; 
}

.inputNo {
    width : 145px; 
}

.inputId {
    width : 110px; 
}

.inputManualRef {
    width : 200px; 
}

.inputRegisterDate {
    width : 120px; 
}

/* END - STYLE INPUT TEXT HEADER TRANSAKSI */

/* BEGIN - STYLE INPUT TEXT DETAIL TRANSAKSI */
.inputAmt {
    text-align: right;
    width : 100px; 
}

.inputQty {
    text-align: right;
    width : 65px; 
}

.inputPct {
    text-align: right;
    width : 40px; 
}

.inputItemDesc {
    width : 275px;         
}

.inputRemark {
    width : 275px;     
}

/* END - STYLE INPUT TEXT DETAIL TRANSAKSI */

/* BEGIN - STYLE INPUT TEXT HEADER & DETAIL TRANSAKSI */
.lookupIcon {
    vertical-align: bottom;
    padding-left: 2px;
    padding-right: 5px;
}

.inputExtraStr {
    width : 145px; 
}

.inputExtraNum {
    text-align: right;
    width : 145px;     
}
/* END - STYLE INPUT TEXT HEADER & DETAIL TRANSAKSI  */


/* BEGIN - STYLE KOLOM DETAIL TRANSAKSI  */
.columnLineNo {  
    text-align: right;
    min-width: 10px;
}

.columnItemId {  
    min-width: 100px;
}

.columnItemtype {  
    min-width: 70px;
}

.columnItemDesc {  
    min-width: 200px;
}

.columnLocationId {  
    min-width: 52px;
}

.columnQty {  
    text-align: right;
    min-width: 30px;
}

.columnUnitId {  
    min-width: 41px;
}

.columnInvUnitId {  
    min-width: 50px;
}

.columnInventoryUnit {  
    min-width: 100px;
}

.columnUnitPrice {  
    text-align: right;
    min-width: 60px;
}

.columnGrossAmt {  
    text-align: right;
    min-width: 70px;
}

.columnDiscAmt {  
    text-align: right;
    min-width: 55px;
}

.columnInvDisc {  
    text-align: right;
    min-width: 50px;
}
/* END - STYLE KOLOM DETAIL TRANSAKSI  */

/* BEGIN - STYLE KOLOM LIST TRANSAKSI  */
.columnStatus { 
    text-align: center;
    min-width: 10px;
} 
.columnSiteId {  
    min-width: 50px;
}
.columnEntityId {  
    min-width: 50px;
}
.columnDate {  
    min-width: 60px;
}
.columnTime {  
    min-width: 60px;
}
.columnTrno {  
    min-width: 95px;
}
.pickingorderno {  
    min-width: 120px;
}
.columnManualRef {  
    min-width: 200px;
}
.columnOtherRef {  
    min-width: 200px;
}
.columnCustName {  
    min-width: 200px;
}
.columnSuppName {  
    min-width: 200px;
}
.columnEmployeeName {  
    min-width: 200px;
}
.columnCcy {  
    min-width: 30px;
}
.columnNetAmt {  
    text-align: right;
    min-width: 100px;
}
.columnNetAmtAfterRejection {  
    text-align: right;
    min-width: 120px;
}
.columnInvoicedtaxable {  
    text-align: right;
    min-width: 120px;
}
.columnUninvoicedtaxable {  
    text-align: right;
    min-width: 130px;
}
.columnOutstandingapadvance {  
    text-align: right;
    min-width: 180px;
}
.columnNextapadvance {  
    text-align: right;
    min-width: 120px;
}
.columnCtrlTotal {  
    text-align: right;
    min-width: 110px;
}
.columnSalesRep {  
    min-width: 80px;
}
.columnEmployeeID {  
    min-width: 100px;
}
.columnProjectId {  
    min-width: 70px;
}
.columnProjectDescription {  
    min-width: 200px;
}
.columnGroupId {  
    min-width: 100px;
}
.columnGroupDescription {  
    min-width: 200px;
}
.columnRouteId {  
    min-width: 70px;
}
.columnRouteDescription {  
    min-width: 200px;
}
.columnQtyOnHand {  
    text-align: right;
    min-width: 85px;
}

.columnRemainingBudgetQty {  
    text-align: right;
    min-width: 140px;
}
.columnTotalQty {  
    text-align: right;
    min-width: 85px;
}
/* END - STYLE KOLOM LIST TRANSAKSI  */

.tableTotalAmt {  
    border-style: solid; 
    border-width: 1px; 
    border-color: #f49f6e;
    width: 250px;
}

.tableSaveCloseHdr {  
    border-style: solid; 
    border-width:1px; 
    border-color:#f49f6e
}

.tabHdrHeight {  
    min-height: 145px; 
}

.tabDtlHeight {  
    min-height: 300px; 
}

.tableApprover {  
    min-height: 100px; 
    max-height: 135px; 
    overflow-y:scroll;
}

.tableAddRemarkHdr {  
    min-height: 100px; 
    max-height: 135px; 
    overflow-y:scroll;
}

.tableAddRemarkDtl {  
    min-height: 100px; 
    max-height: 270px; 
    overflow-y:scroll;
}

.btnSaveChanges {  
    min-width: 90px;
}

.btnSelectAll {  
    min-width: 90px;
}

.btnConfirmPaymentAllocation {  
    min-width: 160px;
}

.columnSuppId {  
    min-width: 80px;
}

.columnPrioritySuppId {  
    min-width: 120px;
}

.columnCustId {  
    min-width: 80px;
}

.columnUserId {  
    min-width: 80px;
}

.columnCustAddress {  
    min-width: 300px;
}

.columnId {  
    min-width: 100px;
}

.columnDescription {  
    min-width: 200px;
}

.columnWarehouseId {  
    min-width: 70px;
}

.columnLongScheduleDate {  
    min-width: 125px;
}

.columnLongScheduleNo {  
    min-width: 110px;
}

.columnLongNote {  
    min-width: 300px;
}

.columnFirstOrLastName {  
    min-width: 200px;
}

.columnMaxDays {  
    min-width: 60px;
}

.columnLeaveType {  
    min-width: 200px;
}

.columnTRType {  
    min-width: 60px;
}

.columnLeaveID {  
    min-width: 80px;
}

.columnHRCalendarID {  
    min-width: 100px;
}

.columnRateID {  
    min-width: 60px;
}

.columnTaxCalc { 
    text-align: left;
    min-width: 30px;
}