/* DEFAULTS
----------------------------------------------------------*/
html
{
    background: #F6F8FC url(Images/topbkgnd.jpg) repeat-x top left;
    height: 100%;
    overflow-y: scroll;
}
body {
  background: url(Images/botbkgnd.jpg) repeat-x bottom left;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: 0.75em;
  color: #000000;
  background: white;
}
html > body
{
    min-height: 100%;
    height: auto;
}
/* CSS hack for FF2 */

/* common elements */
.ie8fix
{
    z-index: 1000;
}
.fullheight
{
    height: 100%;
}
.fullwidth
{
    width: inherit;
    display: block;
}
.autowidth
{
    width: auto !important;
}
.autoheight
{
    height: auto !important;
}
.inheritheight
{
    height: inherit !important;
}
.scroll
{
    overflow-y: scroll;
    width: 100%;
    height: 0;
}
.verticalscroll
{
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
.noscroll
{
    overflow: hidden;
}
.error
{
    color: #FF0000;
}
.leftalign
{
    text-align: left !important;
}
.rightalign
{
    text-align: right !important;
}
.centeralign
{
    text-align: center !important;
}
.topalign
{
    vertical-align: top !important;
}
.middlealign
{
    vertical-align: middle !important;
}
.bottomalign
{
    vertical-align: bottom !important;
}
.clear
{
    clear: both !important;
}
.bold
{
    font-weight: bold !important;
}
.disabled, .watermark
{
    color: #B6B6B6;
}
.visible
{
    display: inline !important;
}
.hidden
{
    display: none !important;
}
.spacer
{
    background-image: url('Images/spacer.gif');
    height: 12px;
}
.mousepointer
{
    cursor: pointer !important;
}
.border
{
    border: solid 1px #000000;
}
.noborder
{
    border: none !important;
}
.underline
{
    text-decoration: underline !important;
}
.nounderline
{
    text-decoration: none !important;
}
.nowraptext
{
    white-space: nowrap !important;
}
.highlight
{
    background-color: #FF9933;
    color: #000000;
    font-weight: normal;
}
.legend
{
    font-size: .8em;
}
.deletedback
{
    background: url(Images/sqr_deleted.gif) no-repeat center;
}
.deletedbackground
{
    background: url(Images/deletedbkg.gif) repeat top right;
}
.pad4
{
    padding: 4px;
}
.footer {
  /*background-image: url(Images/bg-line.gif);*/
  background-repeat: repeat-x;
  background-position: left top;
  padding: 8px 0px 0px 0px; /*margin: 0px auto;*/
  position: relative;
  line-height: normal;
  background: #1E3A8A;
  color: #FFFFFF;
}

.footer td {
  color: #FFFFFF;
}

.footer a {
  color: #FFFFFF;
}

.footer .pagelink {
  color: #FFFFFF;
}

button
{
    border: none !important;
    background: none;
}

/* page container elements */
#contents-wrapper-table
{
    vertical-align: top;
    height: 100%;
    width: 100%;
    border: none;
}
.contentTL, .contentTR, .contentBL, .contentBR
{
    width: 9px;
}
.contentTS
{
    background: url(Images/midsqrts.gif) repeat-x top left;
    height: 9px;
}
.contentBS
{
    background: url(Images/midsqrbs.gif) repeat-x top left;
    height: 9px;
}
.contentLS
{
    background: url(Images/midsqrls.gif) repeat-y top left;
    width: 9px;
}
.contentRS
{
    background: url(Images/midsqrrs.gif) repeat-y top left;
    width: 9px;
}
.contentM
{
    vertical-align: top;
    background-color: #FFFFFF;
    height: 100%;
}
.contentBox
{
    padding: 4px;
}
.contentCopyrightBox
{
    padding: 0px 4px 4px 4px;
    color: #000000;
    font: normal bold 0.95em Arial;
}

/* link element */
a.pagelink:link, a.pagelink:visited, a.pagelink:active {
  font-family: "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, Helvetica, Verdana, "Lucida Grande", sans-serif;
  color: #1E3A8A;
  cursor: pointer;
  text-decoration: none;
}
a.pagelink:hover
{
    color: #1E3A8A;
    text-decoration: underline;
}

/* form fields */
input.textbox, select, textarea {
  background: #FFFFFF url(Images/text.jpg) repeat-x bottom left;
  font-family: "Segoe UI", Arial;
  font-size: 1em;
  border: solid 1px #c2c2c2;
  text-align: left;
  padding: 1px 4px 1px 4px;
}
label
{
    font-family: "Trebuchet MS" , "Helvetica Neue" , "Segoe UI" , Arial, Helvetica, Verdana, "Lucida Grande" , sans-serif;
    color: #000000;
}
.buttonwrapper
{
}
input.button
{
    /* min-width: 80px; color: #FFFFFF; font: normal bold 0.8em "Segoe UI" , "Helvetica Neue" , Arial; height: 20px; border: none; cursor: pointer; text-align: center !important; background: url(Images/buttonbkgnd.jpg) repeat-x top left; */
}

/* breadcrum */
.breadcrum-wrapper
{
    width: auto;
    height: 24px;
    clear: both;
    font-size: inherit;
}
.breadcrum-links
{
    width: auto;
    margin: 4px 0px 0px 4px;
    float: left;
}
.breadcrum-pagelabel
{
    margin: 4px 4px 0px 0px;
    float: right;
    font-size: inherit;
}
.breadcrum-divider
{
    clear: both;
    height: 16px;
    background: url(Images/hdots.gif) repeat-x left;
}

/* fieldset */
div.item-container
{
    border: solid 1px #c2c2c2;
    padding: 0.6em;
    text-align: justify;
    z-index: 0;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
}
div.item-legend
{
    background-color: #FFFFFF;
    height: 18px;
    position: relative;
    top: -1.4em;
    float: left;
}
div.item-legend span.item-legend-title
{
    position: relative;
    font-weight: bold;
    top: 0.2em;
    margin: auto 0.4em auto 0.4em;
}
div.item-data
{
    text-align: left;
    vertical-align: top;
    width: auto;
    top: -0.6em;
    z-index: 0;
}

/* menubar */

.menubar {
  margin: 0px;
  width: 100%;
  height: 32px;
  padding-top: 2px;
  background: #00384d;
}
.menuItem
{
    color: #FFFFFF;
    padding: 4px 2px 4px 2px;
    font: normal bold 0.9em Arial;
}
  .menuItem:Hover {
    background: #1E3A8A;

  }
.subMenuItem
{
    color: #FFFFFF;
    font: normal bold 0.9em Arial;
    text-decoration: none;
}
.subMenuDivider {
  display: block;
  background: #fff0;
  height: 2px;
}
a.rootnode, a.rootnode:hover, a.rootnode:visited
{
    color: #000;
    font: normal bold 0.95em Arial;
    text-decoration: none;
}
a.linknode, A.linknode:hover, a.linknode:visited
{
    color: #000000;
    font: normal bold 0.95em Arial;
    text-decoration: none;
}
.menubar .currentNode
{
    color: #3366CC;
    font: normal bold 0.95em Arial;
    text-decoration: none;
}

/* table */
table.tableFixedLayout
{
    table-layout: fixed;
}
table td, table th
{
    word-wrap: break-word;
}
table th
{
    font-weight: normal;
    text-align: left;
}
table
{
    _width: 99%;
}
.tableHeader
{
    text-align: left;
    background: url(Images/gridheaderl.jpg) repeat-x left top;
    font: normal bold 1em Arial;
    color: #003399;
    vertical-align: top;
    height: 22px;
    min-height: 22px;
    padding-top: 6px;
}
.tableItem {
  background-color: #f2f2f2;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #cacaca;
  font-weight: normal;
  color: #000000;
  vertical-align: top;
  clear: both;
}

/* tr.gridItem, td.gridItem { background-color: #E5EBF8; font-weight: normal; color: #000000; vertical-align: top; clear: both; }
tr.gridAlternateItem, td.gridAlternateItem { background-color: #CDDCFF; font-weight: normal; color: #000000; vertical-align: top; clear: both; } */

/* topbar styles */
#Logo-Panel
{
    height: 62px;
    background: #E5EBF6 url(Images/topspliter.jpg) no-repeat top right;
    text-align: center;
}
#Userdetails-Panel {
  width: auto;
  height: 50px;
  background-color: #fff;
  text-align: right;
  vertical-align: bottom;
}
a.topbarlink, a.topbarlink:visited, a.topbarlink:hover {
  text-decoration: none;
  color: #023a4e;
  font: normal bold 0.95em Arial;
}
.userName {
  color: #023a4e;
  font: normal bold 1.1em Arial;
}
.todayDate {
  color: #1E3A8A;
  font: normal normal 0.95em Arial;
  font-weight: 200;
}

/* login box */
.loginbox
{
    width: 50%;
}
.box-wrapper
{
    margin: 0 auto;
    border: solid 1px #C7C7C7;
    border-top: none;
}

/* modal popup */
.modalbackground
{
    background-color: #9D9D9D;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.modalpopup
{
    background-color: #FFFFFF;
    border: 3px solid #9D9D9D;
    padding: 10px;
    width: 100%;
    height: auto;
}

/* list styles */
ul, ol
{
    width: 100%;
    margin: 0em;
    padding-left: 1em;
}

/* autocomplete */
.autocompleteList
{
    background-color: #FFF;
    margin: 0px !important;
    border: 1px solid #999;
    cursor: pointer;
    overflow: auto;
    text-align: left;
    max-height: 200px;
}
.autocompleteListItem
{
    color: #666;
    padding: 4px;
    border-bottom: 1px solid #ddd;
}
.autocompleteListItemHighlight
{
    background-color: #E5E5E5;
    color: #000;
    padding: 4px;
    border-bottom: 1px solid #ddd;
}

/* page loading contents */
.loading
{
    border: solid 1px #CF4342;
    padding: 1px;
    margin: 1px;
    left: 0px;
    bottom: 0%;
    position: absolute;
    z-index: 100015;
}
.loading-content
{
    padding: 2px;
    margin: 2px;
    background-color: #CF4342;
    white-space: nowrap;
    height: 30px;
    top: 2px;
    left: 6px;
}
.loading-text
{
    color: #FFFFFF;
}

/* MODAL POPUP ELEMENTS   
----------------------------------------------------------*/
.modalbackground
{
    background-color: #9D9D9D;
    filter: alpha(opacity=70);
    opacity: 0.7;
    width: 100% !important;
    height: 100% !important;
}
.modalpopup
{
    background-color: #FFFFFF;
    border: 3px solid #9D9D9D;
    padding: 6px;
    width: 100%;
    height: auto;
    -moz-box-shadow: 8px 8px 12px #888, 8px 8px 12px #888;
    -webkit-box-shadow: 8px 8px 12px #888, 8px 8px 12px #888;
    -o-box-shadow: 8px 8px 12px #888, 8px 8px 12px #888;
    -ms-box-shadow: 8px 8px 12px #888, 8px 8px 12px #888;
    box-shadow: 8px 8px 12px #888, 8px 8px 12px #888;
}

.popup-wrapper
{
    width: auto;
    height: 30px;
    clear: both;
    font-size: inherit;
}
.popup-links
{
    width: auto;
    margin: 4px 0px 0px 4px;
    float: left;
}
.popup-pagelabel
{
    margin: 4px 4px 0px 0px;
    float: right;
    font-size: inherit;
}
.popup-divider
{
    clear: both;
    height: 16px;
    background: url(Images/hdots.gif) repeat-x left;
}

/* calendar control */
.ccdayheader
{
    background-color: #CCCCCC;
    font-weight: bold;
    font-size: 0.9em;
    color: #333333;
    border: solid 1px #999999;
    height: 14pt;
}
.ccday
{
    text-align: left;
    vertical-align: top;
    border: solid 1px #999999;
    width: 14%;
}
.ccotherday
{
    color: #555555;
    background-color: #E9E9E9;
}
.whiteback
{
    background-color: #FFFFFF;
    height: 100% !important;
}
.calendarLabel
{
    font-size: x-small;
    color: #333333;
}
/* Style sheet for Freezing the headers and columns */
.sBase
{
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 100%;
}
.sHeader
{
    z-index: 3;
    position: absolute;
    background-color: #ffffff;
}
.sHeaderInner
{
    position: relative;
}
.sHeaderInner TABLE
{
    table-layout: fixed !important;
    width: 1px !important;
    border-collapse: collapse !important;
    background-color: #ffffff;
    border-spacing: 0px 0px;
}
.sFHeader
{
    z-index: 4;
    overflow: hidden;
    position: absolute;
}
.sFHeader TABLE
{
    table-layout: fixed !important;
    width: 1px !important;
    border-collapse: collapse !important;
    background-color: #ffffff;
    border-spacing: 0px 0px;
}
.sData
{
    z-index: 2;
    overflow: auto;
    position: absolute;
    background-color: #ffffff;
}
.sData TABLE
{
    table-layout: fixed !important;
    width: 1px !important;
    border-collapse: collapse !important;
    border-spacing: 0px 0px;
}
.sFData
{
    z-index: 1;
    position: absolute;
    background-color: #ffffff;
}
.sFDataInner
{
    position: relative;
}
.sFData TABLE
{
    table-layout: fixed !important;
    width: 1px !important;
    border-collapse: collapse !important;
    border-spacing: 0px 0px;
}
.sDefault
{
    padding-right: 0px;
    padding-left: 0px;
    font-size: 0.8em;
    padding-bottom: 0px;
    margin: 0px;
    border-top-style: none;
    padding-top: 0px;
    font-family: Verdana, Arial, sans serif;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
}
.sDefault TH
{
    border-right: #cccccc 1px solid;
    padding-right: 6px;
    border-top: #cccccc 1px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #cccccc 1px solid;
    padding-top: 3px;
    border-bottom: #cccccc 1px solid;
    white-space: nowrap;
}
.sDefault TD
{
    border-right: #cccccc 0px solid;
    padding-right: 6px;
    border-top: #cccccc 0px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #cccccc 0px solid;
    padding-top: 3px;
    border-bottom: #cccccc 0px solid;
    white-space: nowrap;
}
.sDefault TH
{
    border-left-color: #c5c5c5;
    border-bottom-color: #c5c5c5;
    border-top-color: #c5c5c5;
    background-color: #e5e5e5;
    border-right-color: #c5c5c5;
}
.sDefault-Fixed
{
    border-left-color: #c5c5c5;
    border-bottom-color: #c5c5c5;
    border-top-color: #c5c5c5;
    background-color: #eeeeee;
    border-right-color: #c5c5c5;
}
.sSky
{
    padding-right: 0px;
    padding-left: 0px;
    font-size: 0.8em;
    padding-bottom: 0px;
    margin: 0px;
    border-top-style: none;
    padding-top: 0px;
    font-family: Verdana, Arial, sans serif;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
}
.sSky TH
{
    border-right: #89BCCC 1px solid;
    padding-right: 6px;
    border-top: #89BCCC 0px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #89BCCC 0px solid;
    padding-top: 3px;
    border-bottom: #89BCCC 1px solid;
    white-space: nowrap;
}
.sSky TD
{
    border-right: #89BCCC 1px solid;
    padding-right: 6px;
    border-top: #89BCCC 0px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #89BCCC 0px solid;
    padding-top: 3px;
    border-bottom: #89BCCC 1px solid;
    white-space: nowrap;
}
.sSky TH
{
    background-color: #B9D8E2;
}
.sSky-Fixed
{
    background-color: #C8E0E8;
}
.sOrange
{
    padding-right: 0px;
    padding-left: 0px;
    font-size: 0.8em;
    padding-bottom: 0px;
    margin: 0px;
    border-top-style: none;
    padding-top: 0px;
    font-family: Verdana, Arial, sans serif;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
}
.sOrange TH
{
    border-right: #cebb9e 1px solid;
    padding-right: 6px;
    border-top: #cebb9e 1px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #cebb9e 1px solid;
    padding-top: 3px;
    border-bottom: #cebb9e 1px solid;
    white-space: nowrap;
}
.sOrange TD
{
    border-right: #cebb9e 1px solid;
    padding-right: 6px;
    border-top: #cebb9e 0px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #cebb9e 1px solid;
    padding-top: 3px;
    border-bottom: #cebb9e 1px solid;
    white-space: nowrap;
}
.sOrange TH
{
    background-color: #ecd8c7;
}
.sOrange-Fixed
{
    background-color: #f7ede4;
}
.sDark
{
    padding-right: 0px;
    padding-left: 0px;
    font-size: 0.8em;
    padding-bottom: 0px;
    margin: 0px;
    color: #ffffff;
    border-top-style: none;
    padding-top: 0px;
    font-family: Verdana, Arial, sans serif;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
}
.sDark TH
{
    border-right: #555555 1px solid;
    padding-right: 6px;
    border-top: #555555 1px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #555555 1px solid;
    padding-top: 3px;
    border-bottom: #555555 1px solid;
    white-space: nowrap;
}
.sDark TD
{
    border-right: #555555 1px solid;
    padding-right: 6px;
    border-top: #555555 0px solid;
    padding-left: 4px;
    padding-bottom: 3px;
    border-left: #555555 1px solid;
    padding-top: 3px;
    border-bottom: #555555 1px solid;
    white-space: nowrap;
}
.sDark TH
{
    background-color: #000000;
}
.sDark-Fixed
{
    background-color: #222222;
}
.sDark-Main
{
    background-color: #333333;
}
.fakeContainer
{
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    overflow: hidden; /*width: 965px; 	height: 520px;*/
    border-top-style: none;
    padding-top: 0px;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border: 1px solid #8DBFCF;
}
.originalTextareaInfo
{
    font-size: 10px;
    color: red;
}

.warningTextareaInfo
{
    font-size: 10px;
    color: red;
}

/* liScroll styles */

.tickeroverlay-left
{
    /*background-image: url('Images/left.png');*/
    display: block;
    pointer-events: none;
    position: absolute;
    z-index: 30;
    height: 12px;
    width: 150px;
    top: 0;
    left: -2px;
}

.tickeroverlay-right
{
    /*background-image: url('Images/right.png');*/
    display: block;
    pointer-events: none;
    position: absolute;
    z-index: 30;
    height: 12px;
    width: 150px;
    top: 0;
    right: -2px;
}
.tickercontainer
{
    /* the outer div */
    color: red;
    background-color: #D1E1FA;
    width: 1000px;
    height: 27px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.tickercontainer .mask
{
    /* that serves as a mask. so you get a sort of padding both left and right */
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    top: 8px;
    height: 18px; /*width: 718px;*/
    overflow: hidden;
}
ul.newsticker
{
    /* that's your list */ /*Transitions have been added in order set css3 transitions; and have linear easing. Changing these lines you might have unexpected results */
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    transition: all 0s linear;
    position: relative;
    margin-left: 20px;
    font: bold 10px Verdana;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.newsticker li
{
    float: left; /* important: display inline gives incorrect results when you check for elem's width */
    margin: 0;
    padding-right: 15px; /*background: #fff;*/
}
ul.newsticker a
{
    white-space: nowrap;
    padding: 0;
    color: #ff0000;
    margin: 0 50px 0 0;
}
ul.newsticker span
{
    margin: 0 10px 0 0;
}


/*CSS by NIhal*/
.chgPass {
  border-right: 1px solid white;
  padding-right: 0.5em;
}

.logOut {
  padding-left: 0.5em;
}

.logoInn {
  border-right: 1px solid black;
  padding-right: 1.5em;
}

.headTable {
  background: white;
  padding: 0px 0.5em;
}

.ourStateDefault {
  border: 1px solid #1E3A8A;
  background: #1E3A8A;
  font-weight: normal;
  color: #ffffff;
}

td.ui-state-default, th.ui-state-default {
  border-right: 1px solid #1E3A8A;
}

.ui-savesubmit {
  background: #1E3A8A;
  border-color: #1E3A8A;
  padding: 0.70em 0px;
}

/* ========================================
   MODERN UI CONTROLS - 2024 UPDATE
   ======================================== */

/* CSS Variables for consistent theming */
:root {
    --primary-color: #1E3A5F;
    --primary-hover: #2D4A6F;
    --primary-light: #EFF6FF;
    --accent-color: #10B981;
    --accent-hover: #059669;
    --danger-color: #EF4444;
    --danger-hover: #DC2626;
    --warning-color: #F59E0B;
    --text-dark: #1F2937;
    --text-muted: #6B7280;
    --text-light: #9CA3AF;
    --border-color: #E5E7EB;
    --border-focus: #1E3A5F;
    --bg-white: #FFFFFF;
    --bg-gray: #F9FAFB;
    --bg-light: #F3F4F6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: all 0.2s ease;
}

/* ========================================
   MODERN TEXT INPUTS & TEXTAREAS
   ======================================== */

.main-content input.textbox,
.main-content input[type="text"],
.main-content input[type="password"],
.main-content input[type="email"],
.main-content input[type="number"],
.main-content textarea {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 5px 8px !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    color: #374151 !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
    height: auto !important;
}

.main-content input.textbox:focus,
.main-content input[type="text"]:focus,
.main-content input[type="password"]:focus,
.main-content input[type="email"]:focus,
.main-content input[type="number"]:focus,
.main-content textarea:focus {
    border-color: #1E3A5F !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15) !important;
    background: #FFFFFF !important;
}

.main-content input.textbox:hover,
.main-content input[type="text"]:hover,
.main-content input[type="password"]:hover,
.main-content input[type="email"]:hover,
.main-content input[type="number"]:hover,
.main-content textarea:hover {
    border-color: var(--text-muted) !important;
}

.main-content input.textbox::placeholder,
.main-content input[type="text"]::placeholder,
.main-content input[type="password"]::placeholder,
.main-content textarea::placeholder {
    color: var(--text-light) !important;
}

.main-content input.textbox:disabled,
.main-content input[type="text"]:disabled,
.main-content textarea:disabled {
    background: var(--bg-light) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.main-content textarea {
    resize: vertical !important;
    min-height: 40px !important;
}

/* ========================================
   MODERN DROPDOWNS / SELECT
   ======================================== */

.main-content select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center !important;
    background-color: #FFFFFF !important;
    background-size: 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 5px 28px 5px 8px !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
    min-width: 80px !important;
    height: auto !important;
}

.main-content select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1) !important;
}

.main-content select:hover {
    border-color: var(--text-muted) !important;
}

.main-content select:disabled {
    background-color: var(--bg-light) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.main-content select option {
    padding: 8px !important;
}

/* ========================================
   MODERN BUTTONS & LINK BUTTONS
   ======================================== */

.main-content .buttonwrapper a,
.main-content .buttonwrapper input[type="submit"],
.main-content .buttonwrapper input[type="button"],
.main-content input.button,
.main-content a.ui-button,
.main-content .ui-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: #1E3A5F !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    min-height: 28px !important;
    line-height: 1.3 !important;
}

/* Ensure button text is always white */
.main-content .buttonwrapper a span,
.main-content .buttonwrapper a .ui-button-text {
    color: #FFFFFF !important;
}

.main-content .buttonwrapper a:hover,
.main-content .buttonwrapper input[type="submit"]:hover,
.main-content .buttonwrapper input[type="button"]:hover,
.main-content input.button:hover,
.main-content a.ui-button:hover,
.main-content .ui-button:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, #3D5A7F 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.main-content .buttonwrapper a:active,
.main-content .buttonwrapper input[type="submit"]:active,
.main-content .buttonwrapper input[type="button"]:active,
.main-content input.button:active,
.main-content a.ui-button:active,
.main-content .ui-button:active {
    box-shadow: none !important;
}

/* Secondary Button Style - for links like Upload Visit Plan - BLUE */
.main-content .btn-secondary,
.main-content a[id*="LinkButton"]:not(.buttonwrapper a) {
    display: inline-flex !important;
    align-items: center !important;
    background: #1E3A5F !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
}

.main-content .btn-secondary:hover,
.main-content a[id*="LinkButton"]:not(.buttonwrapper a):hover {
    background: #2D4A6F !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* Buttonwrapper should be inline */
.main-content .buttonwrapper {
    display: inline !important;
    vertical-align: middle !important;
}

/* Force buttons to stay on same line */
.main-content td.rightalign {
    white-space: nowrap !important;
}

.main-content td.rightalign .buttonwrapper,
.main-content td.rightalign a[id*="LinkButton"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 2px 4px !important;
}

/* Success Button */
.main-content .ui-savesubmit,
.main-content .btn-success {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%) !important;
    border-color: var(--accent-color) !important;
}

.main-content .ui-savesubmit:hover,
.main-content .btn-success:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, #047857 100%) !important;
}

/* Danger/Delete Button */
.main-content .btn-danger,
.main-content .ui-icon-trash {
    color: var(--danger-color) !important;
}

.main-content .btn-danger:hover,
.main-content .ui-icon-trash:hover {
    color: var(--danger-hover) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* ========================================
   UNIVERSAL BUTTON TEXT WHITE COLOR
   Ensures ALL button text is white regardless of context
   ======================================== */
.buttonwrapper a,
.buttonwrapper a *,
.buttonwrapper input,
.buttonwrapper button,
.main-content .buttonwrapper a,
.main-content .buttonwrapper a *,
.main-content .buttonwrapper a span,
.main-content .buttonwrapper input[type="submit"],
.main-content .buttonwrapper input[type="button"],
.main-content input.button,
.main-content a.ui-button,
.main-content a.ui-button *,
.main-content .ui-button,
.main-content .ui-button *,
a[id*="LinkAdd"],
a[id*="LinkAdd"] *,
a[id*="LinkSubmit"],
a[id*="LinkSubmit"] *,
a[id*="LinkSave"],
a[id*="LinkSave"] *,
a[id*="LinkSearch"],
a[id*="LinkSearch"] *,
a[id*="LinkButton"],
a[id*="LinkButton"] * {
    color: #FFFFFF !important;
}

/* ========================================
   MODERN DATA TABLES / GRIDS
   ======================================== */

/* Table Container - Only for content tables, not header/footer */
.main-content table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Table Header Row - Global styling for ui-state-default headers */
td.ui-state-default,
th.ui-state-default {
    background: #1E3A5F !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
    text-align: left !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 2px solid #152a47 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

/* Table Header Row - Scoped to main content area */
.main-content tr.ui-widget-header,
.main-content tr:has(td.ui-state-default),
.main-content tr:has(th.ui-state-default) {
    background: #1E3A5F !important;
}

.main-content td.ui-state-default,
.main-content th.ui-state-default {
    background: #1E3A5F !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
    text-align: left !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 2px solid #152a47 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

/* Multi-row header support - rowspan headers */
.main-content td.ui-state-default[rowspan],
.main-content th.ui-state-default[rowspan] {
    vertical-align: middle !important;
}

.main-content td.ui-state-default:first-child,
.main-content th.ui-state-default:first-child {
    border-radius: 0 !important;
}

.main-content td.ui-state-default:last-child,
.main-content th.ui-state-default:last-child {
    border-radius: 0 !important;
    border-right: none !important;
}

/* Table Data Rows - Scoped to main content */
.main-content .tableItem,
.main-content td.tableItem {
    background: #FFFFFF !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #374151 !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

.main-content tr:hover .tableItem {
    background: #f0f9ff !important;
}

/* Alternating Row Colors */
.main-content tr:nth-child(even) .tableItem {
    background: #fafafa !important;
}

.main-content tr:nth-child(even):hover .tableItem {
    background: #f0f9ff !important;
}

/* Links in tables */
.main-content .tableItem a {
    color: #1E3A5F !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.main-content .tableItem a:hover {
    color: #10B981 !important;
    text-decoration: underline !important;
}

/* Grid Wrapper Styling */
.grid-wrapper {
    background: var(--bg-white);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #d1d5db;
}

/* ========================================
   MODERN PANELS - Scoped to main content
   ======================================== */

.main-content .panel,
.main-content div[id*="PanelGrid"],
.main-content div[id*="PanelView"] {
    background: var(--bg-white);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    padding: 8px;
    margin: 6px 0;
    box-shadow: none;
}

/* Panel Headers */
.main-content .panel-header {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--primary-color) !important;
}

/* Popup header title - white text on dark background */
.popup-wrapper h2.popup-links,
.popup-wrapper h4.popup-links,
.popup-wrapper .popup-links {
    color: #FFFFFF !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ========================================
   MODERN MODAL POPUP
   ======================================== */

.modalbackground {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 9998 !important;
}

.modalpopup {
    background: #FFFFFF !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    z-index: 9999 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Popup Header */
.popup-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    background: #1E3A5F !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    min-height: 20px !important;
}

.popup-wrapper * {
    color: #FFFFFF !important;
}

.popup-wrapper h2,
.popup-wrapper h4,
.popup-wrapper .bold,
.popup-wrapper .popup-links,
.popup-links,
.popup-links.bold,
h2.popup-links,
h4.popup-links {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.popup-pagelabel {
    margin-left: auto !important;
}

.popup-pagelabel a,
.popup-pagelabel a.pagelink,
.popup-wrapper .popup-pagelabel a,
.popup-wrapper .popup-pagelabel a.pagelink,
a[id*="LinkClose"],
a[href*="closePopup"] {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.popup-pagelabel a:hover,
.popup-pagelabel a.pagelink:hover,
a[id*="LinkClose"]:hover,
a[href*="closePopup"]:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Popup Content Area */
.modalpopup #wrapper-table {
    padding: 16px !important;
    background: #FFFFFF !important;
}

.modalpopup table {
    background: #FFFFFF !important;
}

/* Popup Form Elements */
.modalpopup .tableItem {
    padding: 8px 10px !important;
    font-size: 12px !important;
    color: #374151 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #f0f0f0 !important;
    vertical-align: middle !important;
}

.modalpopup .tableItem.bold {
    font-weight: 600 !important;
    color: #1f2937 !important;
    background: #f8fafc !important;
    width: 150px !important;
}

.modalpopup input.textbox,
.modalpopup input[type="text"],
.modalpopup input[type="password"],
.modalpopup input[type="email"],
.modalpopup textarea {
    background: #FFFFFF !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: #374151 !important;
}

.modalpopup input.textbox:focus,
.modalpopup input[type="text"]:focus,
.modalpopup input[type="password"]:focus,
.modalpopup textarea:focus {
    border-color: #1E3A5F !important;
    outline: none !important;
}

.modalpopup select {
    background: #FFFFFF !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: #374151 !important;
}

/* Popup Save/Submit Buttons */
.modalpopup a[id*="LinkSave"],
.modalpopup a[id*="LinkSubmit"],
.modalpopup .ui-button {
    display: inline-block !important;
    padding: 8px 20px !important;
    background: #1E3A5F !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.modalpopup a[id*="LinkSave"]:hover,
.modalpopup a[id*="LinkSubmit"]:hover,
.modalpopup .ui-button:hover {
    background: #2D4A6F !important;
}

.modalpopup a[id*="LinkSave"] .ui-button-text,
.modalpopup .ui-button .ui-button-text {
    color: #FFFFFF !important;
}

/* Popup Links */
.modalpopup a.pagelink {
    color: #1E3A5F !important;
    font-size: 11px !important;
    text-decoration: none !important;
}

.modalpopup a.pagelink:hover {
    text-decoration: underline !important;
}

/* Fix for wrapper-table inside popup */
#wrapper-table {
    border-radius: 0 0 8px 8px !important;
}

/* ========================================
   POPUP FORM ALIGNMENT & SCROLLABLE CONTENT
   ======================================== */

/* Popup header using breadcrum-wrapper (for Address popup etc.) */
.modalpopup .breadcrum-wrapper,
#wrapper-table .breadcrum-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    background: #1E3A5F !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    min-height: 20px !important;
    height: auto !important;
    width: auto !important;
    clear: none !important;
}

.modalpopup .breadcrum-wrapper .breadcrum-links,
.modalpopup .breadcrum-wrapper .breadcrum-links.bold,
#wrapper-table .breadcrum-wrapper .breadcrum-links {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

.modalpopup .breadcrum-wrapper .breadcrum-pagelabel,
#wrapper-table .breadcrum-wrapper .breadcrum-pagelabel {
    margin: 0 !important;
    float: none !important;
    margin-left: auto !important;
}

.modalpopup .breadcrum-wrapper .breadcrum-pagelabel a,
.modalpopup .breadcrum-wrapper a.pagelink,
#wrapper-table .breadcrum-wrapper a.pagelink,
a[id*="LinkAddressClose"],
a[id*="LinkClose"] {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.modalpopup .breadcrum-wrapper a.pagelink:hover,
#wrapper-table .breadcrum-wrapper a.pagelink:hover,
a[id*="LinkAddressClose"]:hover,
a[id*="LinkClose"]:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Hide breadcrum divider in popup */
.modalpopup .breadcrum-divider,
#wrapper-table .breadcrum-divider {
    display: none !important;
}

/* Popup form table alignment */
.modalpopup table tr td,
#wrapper-table table tr td {
    vertical-align: middle !important;
    padding: 8px 10px !important;
    background: #FFFFFF !important;
}

/* Form label alignment - left column */
.modalpopup .tableItem.bold,
.modalpopup td.bold,
#wrapper-table .tableItem.bold {
    text-align: left !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 180px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    background: #f8fafc !important;
    vertical-align: middle !important;
}

/* Form field alignment - right columns */
.modalpopup table tr td:not(.bold),
#wrapper-table table tr td:not(.bold) {
    text-align: left !important;
}

/* Radio button group alignment */
.modalpopup input[type="radio"],
#wrapper-table input[type="radio"] {
    margin-right: 4px !important;
    vertical-align: middle !important;
}

.modalpopup label,
#wrapper-table label {
    margin-right: 15px !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    color: #374151 !important;
}

/* Scrollable popup content area */
.modalpopup .item-container,
.modalpopup .item-data {
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
}

/* Fix popup content width to prevent horizontal scroll */
.modalpopup #wrapper-table,
.modalpopup table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    overflow: hidden !important;
}

.modalpopup {
    overflow-x: hidden !important;
}

/* Item container styling in popup */
.modalpopup .item-container {
    margin: 10px 0 !important;
    padding: 15px 10px 10px 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #fafafa !important;
}

.modalpopup .item-legend {
    background: #fafafa !important;
    margin-bottom: -10px !important;
}

.modalpopup .item-legend-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1E3A5F !important;
}

/* Modal popup inner table headers - ensure white text on dark background */
.modalpopup td.ui-state-default,
.modalpopup th.ui-state-default,
.modalpopup .ui-state-default,
.modalpopup table td.ui-state-default,
.modalpopup table th.ui-state-default,
.modalpopup .item-data td.ui-state-default,
.modalpopup .item-data th.ui-state-default,
#wrapper-table td.ui-state-default,
#wrapper-table th.ui-state-default {
    background: #1E3A5F !important;
    background-color: #1E3A5F !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 10px 8px !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.2) !important;
    text-align: left !important;
}

.modalpopup td.ui-state-default:last-child,
.modalpopup th.ui-state-default:last-child,
#wrapper-table td.ui-state-default:last-child,
#wrapper-table th.ui-state-default:last-child {
    border-right: none !important;
}

/* Fix for table header row background */
.modalpopup table tr:first-child td.ui-state-default,
.modalpopup .item-data table tr:first-child td,
#wrapper-table table tr:first-child td.ui-state-default {
    background: #1E3A5F !important;
    color: #FFFFFF !important;
}

/* Modal popup data rows */
.modalpopup .tableItem {
    padding: 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 12px !important;
    color: #374151 !important;
    background: #FFFFFF !important;
}

/* Fix for highlighted/selected rows - ensure text is visible */
.modalpopup tr.ui-state-highlight td,
.modalpopup tr.selected td,
.modalpopup tr:hover td.tableItem,
.modalpopup .item-data tr.ui-state-highlight td,
.modalpopup .item-data tr.selected td {
    background: #e8f4fc !important;
    color: #1E3A5F !important;
}

/* Fix for rows with dark background in data section */
.modalpopup .item-data table tr td {
    background: #FFFFFF !important;
    color: #374151 !important;
}

/* Ensure all data rows in scrollable area have white background and visible text */
.modalpopup .item-data div[style*="overflow"] table tr td,
.modalpopup .item-data div[style*="scroll"] table tr td,
.modalpopup div[style*="overflow-y"] table tr td.tableItem {
    background: #FFFFFF !important;
    color: #374151 !important;
}

/* Override any alternating row colors */
.modalpopup table tr:nth-child(odd) td.tableItem,
.modalpopup table tr:nth-child(even) td.tableItem {
    background: #FFFFFF !important;
    color: #374151 !important;
}

/* Hover effect for data rows */
.modalpopup .item-data table tr:hover td.tableItem {
    background: #f5f5f5 !important;
    color: #374151 !important;
}

/* Popup content area styling */
.popup-content {
    background: #FFFFFF !important;
    padding: 15px !important;
}

/* Popup form table styling */
.popup-content table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.popup-content .tableItem.bold {
    background: #f8fafc !important;
    font-weight: 600 !important;
    color: #374151 !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
}

/* Consistent dropdown width in popups */
.modalpopup select,
#wrapper-table select {
    min-width: 100px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Wider dropdown for specific fields */
.modalpopup select[id*="Rejection"],
.modalpopup select[id*="Reason"],
#wrapper-table select[id*="Rejection"],
#wrapper-table select[id*="Reason"] {
    width: 100% !important;
    max-width: none !important;
}

/* Consistent textbox width in popups */
.modalpopup input.textbox,
.modalpopup input[type="text"],
#wrapper-table input.textbox,
#wrapper-table input[type="text"] {
    min-width: 80px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Wider textbox for search/autocomplete fields */
.modalpopup input.textbox[id*="Search"],
.modalpopup input.textbox[id*="Supplier"],
#wrapper-table input.textbox[id*="Search"],
#wrapper-table input.textbox[id*="Supplier"] {
    width: 100% !important;
    max-width: none !important;
}

/* Note/Help text styling in popup - NOT validation errors */
.modalpopup td[colspan] font[color],
#wrapper-table td[colspan] font[color] {
    font-size: 11px !important;
    line-height: 1.4 !important;
    display: block !important;
    margin-top: 8px !important;
    padding: 8px !important;
    background: #FEF2F2 !important;
    border-radius: 4px !important;
}

/* Required field asterisk - keep red but no background */
.modalpopup .error,
#wrapper-table .error {
    color: #DC2626 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
}

/* Save button in popup - ensure proper spacing */
.modalpopup .buttonwrapper,
#wrapper-table .buttonwrapper {
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

/* Wrapper table padding */
#wrapper-table {
    padding: 0 16px 16px 16px !important;
    background: #FFFFFF !important;
    border-radius: 0 0 8px 8px !important;
}

/* ========================================
   MODAL FORM - MULTI-COLUMN LAYOUT FIX
   ======================================== */

/* Ensure modal popup tables use proper table layout */
.modalpopup table.tableFixedLayout {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Override inline colgroup widths for better distribution */
.modalpopup table colgroup col {
    width: auto !important;
}

/* Ensure all table cells have proper padding and don't overlap */
.modalpopup table td {
    padding: 6px 8px !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

/* Label cells - ensure proper width and no wrapping */
.modalpopup table td.tableItem.bold {
    min-width: 130px !important;
    max-width: 160px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 5px !important;
}

/* Input field cells - consistent sizing */
.modalpopup table td.tableItem:not(.bold) {
    min-width: 100px !important;
    overflow: visible !important;
}

/* Override inline width styles on textboxes - allow full width */
.modalpopup input.textbox.rightalign {
    width: 100% !important;
    min-width: 80px !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* RadioButtonList alignment */
.modalpopup table input[type="radio"] {
    margin: 0 4px 0 0 !important;
    vertical-align: middle !important;
}

.modalpopup table label {
    margin-right: 12px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

/* ========================================
   MODERN CALENDAR / DATEPICKER
   ======================================== */

/* Calendar Popup - Fixed Display - NO TRANSPARENCY */
.ui-datepicker {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    padding: 12px !important;
    width: 280px !important;
    z-index: 99999 !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    opacity: 1 !important;
}

/* Ensure datepicker has solid background */
#ui-datepicker-div {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    opacity: 1 !important;
}

.ui-datepicker-header {
    background: #1E3A5F !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
    position: relative !important;
}

.ui-datepicker-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: center !important;
}

.ui-datepicker-title select {
    background: #FFFFFF !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    color: #1E3A5F !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    margin: 0 4px !important;
}

.ui-datepicker-title select option {
    background: #FFFFFF !important;
    color: #1E3A5F !important;
    padding: 4px 8px !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 40% !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    width: 24px !important;
    height: 24px !important;
    top: 8px !important;
    position: absolute !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

.ui-datepicker-prev {
    left: 8px !important;
}

.ui-datepicker-next {
    right: 8px !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none !important;
}

.ui-datepicker-prev::after {
    content: '\2039' !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.ui-datepicker-next::after {
    content: '\203A' !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.ui-datepicker table {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
}

.ui-datepicker th {
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 6px 2px !important;
    text-transform: uppercase !important;
    border: none !important;
}

.ui-datepicker td {
    padding: 1px !important;
    border: none !important;
    background: transparent !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
    background: #f3f4f6 !important;
    border: none !important;
    border-radius: 4px !important;
    color: #374151 !important;
    text-align: center !important;
    padding: 6px 2px !important;
    display: block !important;
    font-size: 12px !important;
    transition: all 0.15s ease !important;
}

.ui-datepicker td a:hover {
    background: #EBF4FF !important;
    color: #1E3A5F !important;
}

.ui-datepicker .ui-state-active {
    background: #1E3A5F !important;
    color: #FFFFFF !important;
}

.ui-datepicker .ui-state-highlight {
    background: #10B981 !important;
    color: #FFFFFF !important;
}

.ui-datepicker-today a {
    border: 2px solid #1E3A5F !important;
    font-weight: bold !important;
}

/* Ensure calendar displays on top of everything */
#ui-datepicker-div {
    z-index: 99999 !important;
}

/* Hide external datepicker button - calendar opens on input click */
.main-content button.ui-datepicker-trigger,
button.ui-datepicker-trigger {
    display: none !important;
}

/* Ensure datepicker input stays inline with cursor pointer */
.main-content input.hasDatepicker {
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

/* Modern calendar icon using CSS - Bigger input with visible icon - HIGH SPECIFICITY */
.main-content input.hasDatepicker,
.main-content input[type="text"].hasDatepicker,
input.hasDatepicker {
    position: relative !important;
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%231E3A5F'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 18px 18px !important;
    padding: 6px 32px 6px 10px !important;
    font-size: 12px !important;
    min-width: 110px !important;
    cursor: pointer !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
}

.main-content input.hasDatepicker:focus,
.main-content input[type="text"].hasDatepicker:focus,
input.hasDatepicker:focus {
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%231E3A5F'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 18px 18px !important;
    padding: 6px 32px 6px 10px !important;
    border-color: #1E3A5F !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15) !important;
}

/* Calendar icon class replacement */
.ui-icon-calendar {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E3A5F' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 14px 14px !important;
    background-position: center !important;
}

/* ========================================
   MODERN FORM LAYOUT
   ======================================== */

/* Form Row Container */
.form-row,
table[cellpadding="4"] tr {
    margin-bottom: 8px;
}

/* Form Labels */
.main-content strong,
.main-content .bold,
.main-content td.tableItem.bold {
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    font-size: 10px !important;
}

/* Required Field Indicator */
.main-content .error,
.main-content span.error {
    color: var(--danger-color) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
}

/* ========================================
   MODERN PAGINATION
   ======================================== */

.pagination,
div[id*="Pager"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

.pagination a,
.pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-dark) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
}

.pagination a:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.pagination .current,
.pagination span.aspNetDisabled {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}

/* ========================================
   MODERN AUTOCOMPLETE
   ======================================== */

.ui-autocomplete {
    position: absolute !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100000 !important;
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
}

.ui-autocomplete .ui-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
}

.ui-autocomplete .ui-menu-item a {
    display: block !important;
    padding: 10px 16px !important;
    color: #1E293B !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    cursor: pointer !important;
}

.ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete .ui-state-active {
    background: #EEF2FF !important;
    color: #1E3A5F !important;
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding: 10px 16px !important;
    color: #1E293B !important;
    font-size: 14px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    transition: all 0.2s ease !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-state-active {
    background: #EEF2FF !important;
    color: #1E3A5F !important;
}

.ui-autocomplete .legend {
    color: #64748B !important;
    font-size: 12px !important;
}

/* ========================================
   MODERN VALIDATION MESSAGES
   ======================================== */

.validation-error,
span[id*="Validator"] {
    color: var(--danger-color) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    display: block !important;
}

/* ========================================
   MODERN CONTENT DIVIDER
   ======================================== */

hr,
.content-divider,
.breadcrum-divider {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent) !important;
    margin: 20px 0 !important;
}

/* ========================================
   MODERN ICONS IN BUTTONS
   ======================================== */

.ui-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition) !important;
}

.ui-icon-trash::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* ========================================
   MODERN PAGE INFO BAR
   ======================================== */

#TrNoRecord,
div[id*="NoRecord"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px 10px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 15px !important;
    margin: 20px 0 !important;
}

/* Total Records / Showing / Page Index Bar */
table:has(td:contains("Total Record")) tr td,
table:has(#LabelTotalRecords) tr td {
    padding: 12px 16px !important;
    background: var(--bg-light) !important;
    border-radius: var(--radius-sm) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    input.textbox,
    input[type="text"],
    input[type="password"],
    select,
    textarea {
        width: 100% !important;
        padding: 12px !important;
    }

    .buttonwrapper a,
    .ui-button {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    td.ui-state-default,
    th.ui-state-default,
    .tableItem {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* ========================================
   SIDEBAR MENU - WHITE TEXT OVERRIDES
   ======================================== */
.sidebar-menu a,
.sidebar-menu a:link,
.sidebar-menu a:visited,
.sidebar-menu a:active,
.sidebar-menu a:hover,
.sidebar-menu .menu-item,
.sidebar-menu .menu-item:link,
.sidebar-menu .menu-item:visited,
.sidebar-menu .menu-item:active,
.sidebar a.menu-item,
.sidebar a.linknode,
.sidebar a.rootnode,
#sidebar a,
#sidebar .menu-item,
nav.sidebar a {
    color: #FFFFFF !important;
}