/*======================IMPORT FONTS AND GOOGLE FONTS=========================*/

/*
btn_save
btn_exit
btn_new
btn_delete
btn_print
btn_other
*/
/*==================================================
  GOOGLE FONTS
==================================================*/

/* Primary UI Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* Optional Accent Font */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&display=swap');

/* Decorative Logo Font */
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');


/*==================================================
  GOOGLE ICONS
==================================================*/
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');


:root{
 --font-body:'Inter',sans-serif; 
 --font-heading:'Manrope',sans-serif;
 --font-accent:'Space Grotesk',sans-serif;
 --font-logo:'Courgette',cursive;
}

/*==================================================
  GLOBAL TYPOGRAPHY
==================================================*/

/* Main App Font */
body,
.t-Body,
.t-PageBody,
.t-Body-content,
input,
select,
textarea,
button,
.a-IRR-table,
.a-GV-table {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.t-Body-content {
/*background-image: url('#APP_FILES#payroll2.jpg');*/
/*background-image: url('#APP_FILES#PAYROLL-D4.png');*/
background-color: rgb(206, 129, 129) !important;
background: transparent !important;
background-image: transparent !important;
/*background-color: transparent !important;*/
background-repeat: no-repeat;
background-size: cover;
background-position: top;
/*background-attachment: fixed;*/
width: 100%;
height: auto;
}
.t-Body {
    background-color: transparent !important;
}
.a-IG {
   background-image: none !important; 
}
.a-IG-body {
    background-color: transparent !important;
}
.t-DialogRegion-body {
    background-image: none !important; 
    background-color: transparent !important;
}


/* Headings / Titles */
h1, h2, h3, h4, h5, h6,
.t-Breadcrumb-label,
.page-title {
    font-family: var(--font-heading);
    font-size: clamp(14px,0.5rem+1vw,18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
}


/* Buttons */
.t-Button-label {
    font-family: var(--font-body);
    font-weight: 600;
}

.t-ButtonRegion-wrap {
    border: none !important;
}


/*=================== HEADER / NAVIGATION BAR / MENU HEIGHT AND FOOTER SETTINGS===================*/
/* ===== Top navigation bar ===== */
/*.t-Header {
  background: linear-gradient(90deg, #6b3fa0 0%, #7c5cbf 100%) !important;
  box-shadow: 0 2px 12px rgba(108, 63, 160, 0.25) !important;
}*/


.t-Header-nav .a-MenuBar-item {
height:30px;
font-size:12px;
}

.t-Footer {    
    padding-top:0px;
    padding-bottom:0px ;
    margin:0px;
    min-height: 10px;
}

.apex-logo-text {
    font-size: 14px;
    font-weight:normal;
    color:rgb(0, 0, 0);
    font-family: "Trirong", sans-serif;
}


/*===========REGION SETTING=================*/
.t-Region-title {
    font-size: clamp(14px,0.5rem+1vw,18px);
    white-space: nowrap;    
}

.t-Region-header, .a-MediaBlock, .a-IG-header  {
    height:40px;
    min-height: 40px;
    padding:0px;
    margin:0px;
}

.ui-dialog-titlebar {
    display:none !important;
}

.t-Region-header {
     background-image: linear-gradient(to bottom right, #dfd9e9, #ffffff);     
     border-left: 3px solid #472291;
     color:black;
     
}

.t-Header { background: #07202D; height: 56px; }
.t-NavigationBar-item .a-NavigationBar-button {
  color:          rgba(255,255,255,0.55);
  border-bottom:  3px solid transparent;
  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  height:         56px;
  padding:        0 16px;
}
.t-NavigationBar-item.is-active .a-NavigationBar-button {
  color:              #4DACCC;
  border-bottom-color: #1A94BD;
}
.t-NavigationBar-item .a-NavigationBar-button:hover {
  color: rgba(255,255,255,0.9);
}

/* ------------form field formating --------*/
/*.t-Form-fieldContainer--floatingLabel {
--ut-field-fl-label-line-height: .25rem;
--ut-field-fl-label-offset: calc(var(--ut-field-fl-label-line-height, .75rem) + var(--a-field-input-padding-y, .1rem) - var(--a-field-input-border-width, 1px));
}
.t-Form-fieldContainer--floatingLabel {
--ut-field-fl-label-line-height: .25rem;
--ut-field-fl-label-offset: calc(var(--ut-field-fl-label-line-height, .75rem) + var(--a-field-input-padding-y, .1rem) - var(--a-field-input-border-width, 1px));
}*/

.t-Form-itemWrapper  .a-Button,
.t-Form-itemWrapper .apex-item-display-only,
.t-Form-itemWrapper, .apex-item-multi,
.t-Form-itemWrapper input, .t-Form-itemWrapper select, .t-Form-itemWrapper textarea, 
.t-Form-itemWrapper .apex-item-popup-lov, 
.t-Form-itemWrapper .oj-text-field-input, 
.apex-item-group--rc input:checked+label, .apex-item-group--rc input+label
 {
    font-size: 12px;
    color:black;   
    text-transform: none;    
}



/* STOP BEING ATUO CAPITALIZE 1ST LETTER */
.t-Form-inputText {
    text-transform: none;
}

.t-Icon {
    height: auto !important;   
}

.radio .t-Form-itemWrapper {
    background-color: transparent;
}

.t-Form-label, .t-Form-labelContainer{
    padding-right: 10px;
    margin-right: 5px;
}
.apex-item-display-only, .read_only {
    color: black !important;
    font-weight: normal;    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-left: 5px;
    font-size: 14px;

}

.a-GV-table tr.is-selected {
    --a-gv-background-color:rgb(212, 238, 252);      
}

.apex-rds-container { /* SELECTOR AREA */
background-color: rgb(227, 227, 227);
}

/*.t-Form-inputContainer { ----input box with label and input text item
    margin-top: -.5vh;
}*/

.t-Form-labelContainer { 
    text-transform:capitalize;
    font-size: 10px;
    padding: 0px;
    margin:0px
}

.t-Form-itemWrapper{
    margin-top: -.5vh;
}

/*.t-Form-label {
    font-size: 11px;
    color:rgb(73, 71, 71);
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    padding-inline: 0px;
    padding-block: 0px;
}*/

/* TO PREVENT IOS SCREEN TO ZOOM ON TEXT ITEM FOCUS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {
        font-size: 16px;
    }
    .apex-item-select, .apex-item-text, .apex-item-textarea {
        font-size: 16px;
    }
}
/*--------------------------------------------------*/


.t-Header-branding {    
    padding:0px;
    margin:0px;
    min-height: 10px;
    border-style: solid 1px;
    border-bottom-color: black;    
}




/* GROUP HEADER ROW */
.a-GV-table th.a-GV-controlBreakHeader {
    /*background-color:rgb(219, 218, 213);*/
    color: rgb(44, 43, 43);
    font-weight: normal;
    border-color:black;
    border-style: 1px solid;
    margin-top:5px;
}

/* GROUP SUM ROW */
.a-GV-aggregate--SUM  {
    font-weight: bold;
    /*background-image: linear-gradient(to bottom right, #edf3f3, dfdfdf);*/
}


/* TOP BAR TITLE / USER MENU */
.t-Header-branding {
    /*background-image: linear-gradient(to bottom right, #ecebe6, #dfdfdf);*/
     color:black;
}

/* INTERACTIVE GRID HEADER */
.a-GV-header {
    font-size: 12px;
    /*background-color:rgb(221, 221, 221);*/
}
.a-GV-rowLabel{display:none;}

/*---------TEXT FILEDS / LABELS RESPONSIVE FONT SIZE---------------*/
    /*.t-Form-label {
        font-size: 0.7rem !important;
        white-space: nowrap;
    }
    .t-Region-title {
        font-size: 0.8rem !important;
        white-space: nowrap;    
    }*/
    .t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio {
        font-size: 0.7rem !important;
        white-space: nowrap;
    }

@media only screen and (max-width: 780px) {

/*.t-Form-label {
    font-size: 0.5rem !important;
    white-space: nowrap;    
}
.t-Region-title {
    font-size: 8px !important;
    overflow-wrap: break-word;
    max-width: 100px !important;
}*/
#SEARCHBAR .t-Region-title {
    display: none;
}
#SEARCHBAR {
    margin: 0px;
    padding: 0px;
}
.t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio, .display_only {
    font-size: 0.5rem !important;
    white-space: nowrap;    
}
.t-Form-fieldContainer {
  margin-left: 8px !important;
}
.t-Button-label {
    font-size: 0.5rem !important;
    padding: 2px !important;
    white-space: nowrap;
}
.a-GV-cell {
    white-space: nowrap !important;
    height: 12px !important;
    font-size: 10px !important;
}

#entry_grid .a-GV-cell {
    white-space: nowrap !important;
    height: 25px !important;
    font-size: 11px !important;
}

}

/*  LARGE WIDE SCREEN MONITORS */
@media only screen and (max-width: 1920px) {
.t-Form-label {
    font-size: 0.7rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
    text-transform: capitalize !important;
}
/*.t-Region-title {
    font-size: 0.8rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
    text-transform: capitalize !important;
}
.t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio, .display_only {
    font-size: 0.75rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
    text-transform:capitalize  !important;
}
.t-Button-label {
    font-size: 0.75rem !important;
    padding: 2px !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
    text-transform:capitalize  !important;
}*/
.a-GV-cell {
    white-space: nowrap !important;
    height: 12px !important;
    font-size: 12px !important;
}
#entry_grid .a-GV-cell {
    white-space: nowrap !important;
    height: 25px !important;
    font-size: 11px !important;
}


}

/*  NORMAL DESKTOP WIDE SCREEN MONITORS HALIMA */
@media only screen and (max-width: 1440px) {
/*.t-Form-label {
    font-size: 0.7rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
}
.t-Region-title {
    font-size: 0.7rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
}
.t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio, .display_only {
    font-size: 0.68rem !important;
    white-space: nowrap;
    font-weight: 400;
    font-family:Arial, Helvetica, sans-serif !important;
}
.t-Button-label {
    font-size: 0.68rem !important;
    padding: 2px !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
}*/
.a-GV-cell {
    white-space: nowrap !important;
    height: 12px !important;
    font-size: 11px !important;
}
#entry_grid .a-GV-cell {
    white-space: nowrap !important;
    height: 25px !important;
    font-size: 11px !important;
}

}

/*  NORMAL LAPTOP SCREEN */
@media only screen and (max-width: 1024px) {
/*.t-Form-label {
    font-size: 0.7rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;    
}
.t-Region-title {
    font-size: 0.7rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;    
}
.t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio, .display_only {
    font-size: 0.7rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;    
}
.t-Button-label {
    font-size: 0.55rem !important;
    padding: 2px !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
}*/
.a-GV-cell {
    white-space: nowrap !important;
    height: 12px !important;
    font-size: 11px !important;
}
#entry_grid .a-GV-cell {
    white-space: nowrap !important;
    height: 25px !important;
    font-size: 11px !important;
}


}

/*  SMALL LAPTOP SCREEN */
/*@media only screen and (max-width: 1366px) {
.t-Form-label {
    font-size: 0.5rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;    
}
.t-Region-title {
    font-size: 0.5rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;    
}
.t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio, .display_only {
    font-size: 0.5rem !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;    
}
.t-Button-label {
    font-size: 0.55rem !important;
    padding: 1px !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
}
.a-GV-cell {
    white-space: nowrap !important;
    height: 18px !important;
    font-size: 10px !important;
}

}*/

.apex-edit-pencil {    
    height: 12px !important;
    width: 12px !important;
    margin: 0px !important;
}

.apex-edit-view {
    height: 12px !important;
    width: 12px !important;
    margin: 0px !important;
}

.a-Icon .icon-ig-actions {
    height: 12px !important;
    width: 12px !important;
    margin: 0px !important;
}

.a-GV-cell .a-Button.a-Button--actions {
    --a-button-padding-y: 2px !important;
    --a-button-padding-x: 2px !important;
}


.a-IG-gridView tr {
    height: 1.2vh; 
}


.a-IG-header {
    padding: 0px !important;
}
.a-IG {
   background-image: linear-gradient(to bottom right, #f0f0f0, rgb(199, 219, 230)); 
}


.a-IG-gridView td {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.a-GV-cell {
    white-space: nowrap !important;
    height: 4vh !important;
    font-size: 0.9em !important;
    padding-right: 0px !important;
    padding-left: 3px !important;
    
}

/*---------------------------------- RESPONSIVE SETTINGS ----------------------------------------------------*/


#bigrow .a-GV-cell {
   white-space: nowrap !important;
    height: 4vh !important;
    font-size: 0.9em !important;
    padding-right: 1px !important;
    padding-left: 3px !important;
}

#bigrow .a-GV-cell.is-active.is-focused {
    font-size: 1em !important;
    height: 4vh !important;
}


#bigrow2 .a-GV-cell {
   white-space: nowrap !important;
    height: 4vh !important;
    font-size: 0.90em !important;
    padding-right: 2px !important;
    padding-left: 3px !important;
}

#bigrow3 .a-GV-cell {
   white-space: nowrap !important;
    height: 4vh !important;
    font-size: 0.90em !important;
    padding-right: 2px !important;
    padding-left: 3px !important;
}


.t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio, .display_only {
    font-size: 0.90em !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;    
}
.t-Button-label {
    font-size: 0.90em !important;
    padding: 2px !important;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif !important;
}



/*-----------END OF RESPONSIVE FONT SIZE-----------*/


/*===========================================END OF GLOBAL SETTING================================================================*/

/*==================== DESIGN SYSTEM==============================*/


/*>>>>>>>>>BUTTONS STYLING GLOBAL<<<<<<<<<<===*/

/* Base .t-Button — shared structure */
.t-Button {
  display:        inline-flex;
  align-items:    center;
  height:         32px;
  padding:        8 14px;
  border-radius:  10px;
  font-family:    "DM Sans", sans-serif;
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor:         pointer;
  border:         1.5px solid transparent;
  /*transition:     all 150ms ease;*/
  transition: all 0.25s ease;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);        
}

.t-Button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* app.css */
.t-Button#Primary {
  background:   #007FA3;
  color:        #ffffff;
  border-color: #007FA3;
}
.t-Button#Primary:hover {
  background:   #006B8A;
  border-color: #006B8A;
}
.t-Button#Primary:focus {
  box-shadow: 0 0 0 3px rgba(0,127,163,0.30);
}
.t-Button#Primary:active {
  background: #005771;
}
.t-Button#Primary[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
}

/* Small / Large via separate Static IDs */
.t-Button#SmallBtn { height:28px; font-size:11px; padding:0 12px; }
.t-Button#LargeBtn { height:40px; font-size:13px; padding:0 20px; }

/* Page Designer: Button → Static ID = Secondary */

/* app.css */
.t-Button#Secondary {
  background:   transparent;
  color:        #006B8A;
  border:       1.5px solid #007FA3;
}
.t-Button#Secondary:hover {
  background: #E6F4F8;
}
.t-Button#Secondary[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
}

/* Page Designer: Button → Static ID = Danger */
/* ALWAYS set: Confirmation Required: Yes      */

/* app.css */
.t-Button#Danger {
  background:   #DC3545;
  color:        #ffffff;
  border-color: #DC3545;
}
.t-Button#Danger:hover {
  background:   #BD2130;
  border-color: #BD2130;
}
.t-Button#Danger:active {
  background: #9B1A27;
}

/*OLD BUTTON CSS*/
.btn_delete {
  background:   #DC3545;
  color:        #ffffff !important;
  border-color: #DC3545;
}
.btn_delete:hover {
  background:   #BD2130;
  border-color: #BD2130;
}
.btn_delete:active {
  background: #9B1A27;
}

.btn_exit {
  background:   transparent;
  color:        #006B8A;
  border:       1.5px solid #007FA3;
}
.btn_exit:hover {
  background: #E6F4F8;
}
.btn_exity[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
}


.btn_save {
  background:   #66da96;
  color:        #414141;
  border-color: #66da96;
}
.btn_save:hover {
  background:   #25b661;
  border-color: #25b661;
}
.btn_save:focus {
  box-shadow: 0 0 0 3px rgba(0,127,163,0.30);
}
.btn_save:active {
  background: #005771;
}
.btn_save[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
}


.btn_new {
  background: linear-gradient(135deg, #6f42c1, #8e63d9);  
  color:        #ffffff !important;
  border-color: #6f42c1;
}
.btn_new:hover {
  background:   #6f42c1;
  border-color: #6f42c1;
}
.btn_new:focus {
  box-shadow: 0 0 0 3px rgba(0,127,163,0.30);
}
.btn_new:active {
  background: #51279e;
}
.btn_new[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
}

.btn_other {
  background:   transparent;
  color:        #2e2e2e !important;
  border-color: #009ea3;
}
.btn_other:hover {
  background:   transparent;
  border-color: #004042;
}
.btn_other:focus {
  box-shadow: 0 0 0 3px rgba(0,127,163,0.30);
}
.btn_other:active {
  background: #006c70;
}



.btn_other2 {
  background:   rgb(248, 248, 248);
  color:        #2e2e2e !important;
  border-color: #009ea3;
  width: 170px !important;
  margin-top: 8px !important;
}
.btn_other2:hover {
  background:   transparent;
  border-color: #004042;
}
.btn_other2:focus {
  box-shadow: 0 0 0 3px rgba(0,127,163,0.30);
}
.btn_other2:active {
  background: #006c70;
}




.btn_print {
  background:   transparent;
  color:        #ffffff;
  border-color: #007FA3;
}
.btn_print:hover {
  background:   #d3d7d8;
  border-color: #006B8A;
}
.btn_print:focus {
  box-shadow: 0 0 0 3px rgba(0,127,163,0.30);
}
.btn_print:active {
  background: #005771;
}



/*------------ CUSTOMIZED BUTTONS STYLING -----------------*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 8px 14px;
    border-radius: 10px;
    border: none;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;

    cursor: pointer;
    transition: all 0.25s ease;

    box-shadow: 0 3px 8px rgba(0,0,0,0.12);        
}

/* Hover + Click Effects */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-new {
    background: linear-gradient(135deg, #6f42c1, #8e63d9);
    color: #fff !important;
}

.btn-new:hover {
    background: linear-gradient(135deg, #5a32a3, #7a52c7);
}

.btn-save {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff !important;
}

.btn-save:hover {
    background: linear-gradient(135deg, #27ae60, #1e8449);
}
.btn-delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff !important;
}

.btn-delete:hover {
    background: linear-gradient(135deg, #c0392b, #922b21);
}
.btn-print {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff !important;
}

.btn-print:hover {
    background: linear-gradient(135deg, #e67e22, #ca6f1e);
}
.btn-general {
    background: #d4d4d4;
    color: #2b2b2b !important;
    border: 1px solid #ddd !important;
}

.btn-general:hover {
    background: #cacaca;
}

.btn-exit {
    background: linear-gradient(135deg, #e5e4e7, #8e63d9);
    color: #fff !important;
}

.btn-exit:hover {
    background: linear-gradient(135deg, #5a32a3, #e6e5e7);
}

.btn_white {
    background-color: rgb(235, 235, 235);     
    color:black;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    
}

/*>>>>>INPUT PAGE ITEMS<<<<<<<<<<*/

.apex-item-text,
.apex-item-select-list,
.apex-item-textarea {
  /*height:        36px;
  padding:       0 12px;
  border:        1.5px solid #C8CDD8;*/
  border-radius: 4px;
  font-family:   "DM Sans", sans-serif;
  /*font-size:     12px;
  color:         #1E2333;
  background:    #ffffff;*/
  transition:    border-color 150ms ease,
                 box-shadow 150ms ease;
  outline:       none;
}
.apex-item-text:focus,
.apex-item-select-list:focus {
  border-color: #007FA3;
  box-shadow:   0 0 0 3px rgba(0,127,163,0.15);
}
.apex-item-wrapper--error .apex-item-text {
  border-color: #DC3545;
}
.apex-item-text:disabled {
  background: #F0F2F5;
  color:      #9EA5B5;
  cursor:     not-allowed;
}
.apex-item-textarea { height:auto; padding:12px; resize:vertical; }
.apex-item-label    { font-size:12px; font-weight:600; color:#333A4D; margin-bottom:4px; }
.apex-item-helper   { font-size:10px; color:#9EA5B5; margin-top:4px; }

.t-Form-itemWrapper, .apex-item-text, .popup_lov, .apex-item-popup-lov, .apex-item-select, .apex-item-display-only, .u-checkbox, .u-radio {
    font-size: clamp(12px, 0.5rem , 16px);
    white-space: nowrap;
}


.t-Form-label {
    font-size: clamp(12px, 0.5rem , 16px);
    white-space: nowrap;
   font-family: var(--font-body);
   color:rgb(73, 71, 71);
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    padding-inline: 0px;
    padding-block: 0px;
}

/* Checkbox */
.apex-item-checkboxes input[type="checkbox"] {
  width:        18px;
  height:       18px;
  border-radius: 3px;
  accent-color: #007FA3;
  cursor:       pointer;
}

/* Radio */
.apex-item-radiogroup input[type="radio"] {
  accent-color: #007FA3;
  width:  18px;
  height: 18px;
  cursor: pointer;
}

/* Toggle (HTML region) */
.apex-toggle-track {
  width:         40px;
  height:        22px;
  border-radius: 9999px;
  background:    #C8CDD8;
  cursor:        pointer;
  position:      relative;
  transition:    background 150ms ease;
}
.apex-toggle-track.is-on { background: #007FA3; }
.apex-toggle-thumb {
  position:   absolute;
  top: 3px; left: 3px;
  width:      16px;
  height:     16px;
  border-radius: 50%;
  background: #ffffff;
  transition: left 150ms ease;
}
.apex-toggle-track.is-on .apex-toggle-thumb { left: 21px; }


/*>>>BADGES>>>>*/
.t-Badge {
  display:       inline-flex;
  align-items:   center;
  padding:       5px 10px;
  border-radius: 20px;
  font-size:     clamp(10px,0.5rem+1vw,14px);
  font-weight:   700;
  border: none;
}
.t-Badge--success { background:#1E7E34; color:#e7e7e7; }
.t-Badge--warning { background:#FFF8E1; color:#856404; }
.t-Badge--danger  { background:#FDECEA; color:#BD2130; }
.t-Badge--info    { background:#E8F4FD; color:#138496; }
.t-Badge--default { background:#F0F2F5; color:#6B7487; }

/*<<<<<<<<<<<<<<  t-Dialog (Modal) >>>>>>>>>>>>*/
.t-Dialog-header {
  padding:         16px 20px;
  border-bottom:   1px solid #F0F2F5;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.t-Dialog-title {
  font-weight: 700;
  font-size:   16px;
  color:       #07202D;
}
.t-Dialog-body   { padding: 20px; }
.t-Dialog-footer {
  padding:         16px 20px;
  border-top:      1px solid #F0F2F5;
  display:         flex;
  gap:             12px;
  justify-content: flex-end;
}

/* <<<<<<<<<<< t-Header / t-Tabs / t-Breadcrumb >>>>>>>>>>>>>>*/
.t-Header { background: #07202D; height: 56px; }
.t-NavigationBar-item .a-NavigationBar-button {
  color:          rgba(255,255,255,0.55);
  border-bottom:  3px solid transparent;
  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  height:         56px;
  padding:        0 16px;
}
.t-NavigationBar-item.is-active .a-NavigationBar-button {
  color:              #4DACCC;
  border-bottom-color: #1A94BD;
}
.t-NavigationBar-item .a-NavigationBar-button:hover {
  color: rgba(255,255,255,0.9);
}


/* <<<<<<<<<<<<<< a-IRR (Interactive Report / Grid) >>>>>>>>>>>>>>>> */
/* 1. Remove default region box */
.t-Region { border:none; box-shadow:none; background:transparent; }

/* 2. IR container card */
.a-IRR {
  background:    #ffffff;
  border-radius: 12px;
  border:        1px solid #E1E5EC;
  overflow:      hidden;
  box-shadow:    0 4px 12px rgba(0,0,0,0.05);
  margin-top:    16px;
}

/* 3. Toolbar */
.a-IRR-toolbar {
  background:    #F8F9FB;
  padding:       12px 16px;
  border-bottom: 1px solid #E1E5EC;
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-wrap:     wrap;
}
.a-IRR-toolbar input, .a-IRR-toolbar select {
  height:32px; border-radius:6px;
  border:1px solid #E1E5EC;
  background:#ffffff; font-size:12px; padding:0 10px;
}

/* 4. Column header — targets real DOM: th.a-IRR-header > a.a-IRR-headerLink */
.a-IRR-table th.a-IRR-header {
  background:     #F8F9FB;
  padding:        0;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color:          #4A5268;
  border-bottom:  1.5px solid #E1E5EC;
  white-space:    nowrap;
  vertical-align: middle;
}

/* padding lives on the link, not the th — fixes alignment */
.a-IRR-table th.a-IRR-header .a-IRR-headerLink {
  display:         block;
  padding:         10px 16px;
  color:           #4A5268;
  text-decoration: none;
  font-size:       10px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.6px;
  line-height:     1.4;
  box-sizing:      border-box;
}

/* right-align numeric columns (u-tR), left-align text (u-tL) */
.a-IRR-table th.a-IRR-header.u-tR .a-IRR-headerLink { text-align:right; }
.a-IRR-table th.a-IRR-header.u-tL .a-IRR-headerLink { text-align:left;  }

/* width-sizer div inside th — must stay invisible */
.a-IRR-table th.a-IRR-header .t-fht-cell {
  display:block;
  overflow:hidden; height:0; padding:0; margin:0;
}

/* 5. Table body */
.a-IRR-table td {
  padding:        10px 16px;
  font-size:      13px;
  color:          #2D3142;
  border-bottom:  1px solid #F0F2F5;
  vertical-align: middle;
}
.a-IRR-table td.u-tR { text-align:right; }
.a-IRR-table td.u-tL { text-align:left;  }
.a-IRR-table tr:hover td { background:#E6F4F8; }
.a-IRR-table a { color:inherit; text-decoration:none; }

/* 6. Pagination */
.a-IRR-paginationWrap {
  background: #F8F9FB;
  border-top: 1px solid #E1E5EC;
  padding:    10px 16px;
}
.a-IRR-pagination {
  display:flex; align-items:center;
  justify-content:end; gap:4px;
  list-style:none; margin:0; padding:0;
}
.a-IRR-pagination-item button,
.a-IRR-pagination-item a {
  border-radius:6px; border:1px solid #E1E5EC;
  background:#ffffff; font-size:12px;
  padding:4px 8px; min-width:28px; cursor:pointer;
  color:#4A5268; text-decoration:none;
}
.a-IRR-pagination-item.is-active button,
.a-IRR-pagination-item.is-active a {
  background:#007FA3; color:#ffffff; border-color:#007FA3;
}
.a-IRR-pagination-label { font-size:12px; color:#4A5268; }

/* 7. Checkbox column */
.a-IRR-table td:first-child,
.a-IRR-table th:first-child { text-align:center; width:40px; }


/* <<<<<<<<<<<<<<<<<< CARD REPORT >>>>>>>>>>>> */

/* CARD WIDTH */
:root {
  --a-cv-item-width: 250px;
}

/* card region header */
.t-ButtonRegion-wrap {
    background-color: #f5f5f5;    
    padding-left:10px;
    border: 1px solid;
    border-color: rgb(141, 141, 141);
}

.a-CardView-items{
background-color: transparent;
}


/*-------- FULL CARD FRAME-AREA -----------*/
.a-CardView {
     background-image: none;
    border: 1px solid;     
    padding: 10px;
    box-shadow: 2px 5px #c5c5c5;
     transition: all 0.25s ease;
}

.a-CardView:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);

}

/* CARD TITLE AREA */
.a-CardView-header{
   background-color: #dfdfdf;
   border-radius: 0%;
   display: flex;
   justify-content: center;
}

/* CARD BODY AREA */
.a-CardView-body, .a-CardView-actions{
background-color: transparent;
border-radius: 0%;
margin-top:-2px;
} 

.round {
    border-radius: 50%;
}


/*<<<<<<<<<<<<<<<<<<<<<<  KPI CARDS >>>>>>>>>>>>>>>>>>>*/

/* app.css */
/*.t-Region {
  border:     none;
  box-shadow: none;
  background: transparent;
}*/

.t-Cards .t-Card {
  background:    #ffffff;
  border-radius: 12px;
  box-shadow:    0 1px 3px rgba(0,0,0,0.07);
  border:        1px solid #E1E5EC;
  padding:       20px;
  transition:    box-shadow 250ms ease, transform 250ms ease;
}
.t-Cards .t-Card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.09);
  transform:  translateY(-2px);
}
.t-Cards .t-Card-title {
  font-size:   32px;
  font-weight: 700;
  color:       #07202D;
  line-height: 1;
}
.t-Cards .t-Card-subTitle {
  font-size: 12px;
  color:     #6B7487;
}


/* app.css */
.t-Cards .t-Card.is-spotlight {
  border:     1.5px solid rgba(0,0,0,0.06);
  cursor:     pointer;
  transition: all 250ms ease;
}
.t-Cards .t-Card.is-spotlight:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.09);
  transform:  translateY(-2px);
}


/*<<<<<<<<<<<   t-Alert   >>>>>>>>>>>>>>>*/

/* app.css */
.t-Alert { border-radius: 8px; font-size: 12px; }
.t-Alert--success { background:#E6F5EB; border-color:#b3e0bf; color:#1a6b2f; }
.t-Alert--warning { background:#FFF8E1; border-color:#ffd966; color:#7a5c00; }
.t-Alert--danger  { background:#FDECEA; border-color:#f5b8bd; color:#9b1a27; }
.t-Alert--info    { background:#E8F4FD; border-color:#9fd8e3; color:#0c6e7c; }

/*=================END OF DESIGN SYSTE,============================*/



/* Hide APEX page footer */
.t-Footer {
    display: none !important;
}