/* -------------------------------------------- *
/* ----- DEFAULT FONT FAMILY AND SETTINGS ----- */
/* -------------------------------------------- */
    * {
      FONT-SIZE: 12px;
      COLOR: black;
      FONT-FAMILY: Arial;
      }
    
    tr {
      margin: 0px 0px 0px 0px; /* TOP, RIGHT, BOTTOM, LEFT */
      padding: 0px 0px 0px 0px;
    }

    td {
      vertical-align: top;
    }

    HTML, BODY {
      height: 100%;
      margin: 0px 0px 0px 0px; /* TOP, RIGHT, BOTTOM, LEFT */
      padding: 0px 0px 0px 0px;
      min-height: 100%;
    }

    A {
      FONT-SIZE: 12px;
      COLOR: #0000ff;
      FONT-FAMILY: Arial;
    }

    A:hover {
      FONT-SIZE: 12px;
      COLOR: #cf068f;
      FONT-FAMILY: Arial;
    }

/* ------------------------------------------------------------- */
/* ------------------ GENERIC TABLE STANDARDS ------------------ */
/* ------------------------------------------------------------- */
TD.left {
  text-align: left;
}

TD.center {
  text-align: center;
}

TD.right {
  text-align: right;
}


/* ------------------------------------------------------------ */
/* ---------------------- MAIN PAGE & HEADER ------------------ */
/* ------------------------------------------------------------ */

    /* FULL PAGE TABLE -------------------------------------------------------------- */
    table.fullpage {
      width: 100%;
      height: 100%;
      border: 0px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px; /* TOP, RIGHT, BOTTOM, LEFT */
      border-collapse: collapse; 
    }
        /* TD - HEADER -------------------------------------------------------------- */
        td.fullpage_header {
          width: 100%;
          height: 30px;
          
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px; /* TOP, RIGHT, BOTTOM, LEFT */
          
        }

          table.header {
            width: 100%;
            height: 100%;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            vertical-align: top;
            border-collapse: collapse;
          }

            /* SOFTWARE LOGO | SEARCH | COMPANY LOGO -------------------------------------------------------------- */
            table.header_search {
              width: 100%;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              vertical-align: top;
            }
                  /* Left side of header - App Logo */
                  td.header-left {
                    width: 25%;
                    text-align: left;
                    vertical-align: middle;
                  }
                      /* App Name - Logo on Left */
                      div.headername {
                        FONT-SIZE: 24px;
                        FONT-FAMILY: Tahoma;
                        font-weight: bold;
                      }

                  /* Center of header - Global Search */
                  td.header-center {
                    width: 50%;
                    text-align: center;
                    vertical-align: middle;
                  }
                    

                  /* Right of header - Company Logo */
                  td.header-right {
                    width: 25%;
                    text-align: right;
                    vertical-align: middle;
                  }
                      /* restrict company logo to fit in height */
                      img.companylogo {
                        height: 20px;
                      }
          


/* ------------------------------------------------------------ */
/* -------------------------- TOP MENU ------------------------ */
/* ------------------------------------------------------------ */

    

    /* ----- TOP/MIDDLE MENU ----- */
    table.topmenu {
      background-color: #06276a;
      COLOR: white;
      width: 100%;
      border: 0px;
      padding: 2px;
      border-spacing: 0px;
    }
    /* For plain text (like user name) */
    table.topmenu td {
      COLOR: white;
      font-weight: bold;
    }

    /* for menu links */
    table.topmenu a {
      COLOR: white;
    }

      /* for menu links - hover */
      table.topmenu a:hover {
        COLOR: #e2ee0c;
        TEXT-DECORATION: underline;
      }




/* ------------------------------------------------------------ */
/* ------------------------ LEFT NAV MENU --------------------- */
/* ------------------------------------------------------------ */
        /* MENU ON LEFT SIDE */
        td.fullpage_leftnav {
          width: 14%;
          height: 100%;
          border: 0px;
          padding: 0px 0px 0px 0px;
          margin: 0px 5px 0px 5px; /* TOP, RIGHT, BOTTOM, LEFT */
          background-color: #000000;
          text-align: left;
          vertical-align: top;
          COLOR: white;
          FONT-SIZE: 20px;
          FONT-FAMILY: Tahoma;
        }

        /* MENU LINKS ON LEFT SIDE */
        td.fullpage_leftnav a {
          FONT-SIZE: 12px;
          FONT-FAMILY: Tahoma;
          font-weight: bold;
          COLOR: white;
          padding: 0px 5px 0px 5px;
          
        }
      
      /* APPLICATION HEADER MENUS IN LEFT NAV */
      div.applicationheader {
        FONT-SIZE: 13px;
        FONT-FAMILY: Tahoma;
        font-weight: bold;
        COLOR: rgb(223, 139, 80);
        padding: 0px 0px 0px 0px;
      }



/* ------------------------------------------------------------ */
/* -------------------------- RIGHT NAV ----------------------- */
/* ------------------------------------------------------------ */
 /* MENU ON LEFT SIDE */
 td.fullpage_rightnav {
  width: 20%;
  height: 100%;
  border: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px 5px 0px 5px; /* TOP, RIGHT, BOTTOM, LEFT */
  background-color: #bdbdbd;
  text-align: left;
  vertical-align: top;
  COLOR: white;
  FONT-SIZE: 20px;
  FONT-FAMILY: Tahoma;
}




/* ------------------------------------------------------------ */
/* -------------------------- MAIN BODY ----------------------- */
/* ------------------------------------------------------------ */
      table.fullpage_body {
        width: 100%;
        border: 0px; /* TEMP - WHILE WORKING ON*/
        border-style: solid; /* TEMP - WHILE WORKING ON*/
        border-color: red;
        height: 100%;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px; /* TOP, RIGHT, BOTTOM, LEFT */
        text-align: left;
        vertical-align: top;
      }


      td.fullpage_body {
        width: 100%;
        border: 0px; /* TEMP - WHILE WORKING ON*/
        border-style: solid; /* TEMP - WHILE WORKING ON*/
        border-color: red;
        height: 100%;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px; /* TOP, RIGHT, BOTTOM, LEFT */
        text-align: left;
        vertical-align: top;
      }

      
    
/* --------------------------------------------------- */
/* ------------ BODY PAGE OBJECT HEADER -------------- */
/* --------------------------------------------------- */

table.objectheader {
  width: 100%;
  border: 0px;
  border-color: red;
  border-style: solid;
  
}

      td.iconleft {
        width:2%;
        border: 0px;
        border-color: red;
        border-style: solid;
        vertical-align: top;
        text-align: left;
      }

      td.objectheaderleft {
        width:35%;
        border: 0px;
        border-color: red;
        border-style: solid;
        vertical-align: top;
        text-align: left;
      }

      td.objectheadercenter {
        width:23%;
        border: 0px;
        border-color: red;
        border-style: solid;
        vertical-align: middle;
        text-align: center;
      }

      td.objectheaderright {
        width:35%;
        border: 0px;
        border-color: red;
        border-style: solid;
        vertical-align: middle;
        text-align: right;
      }

 
        /* Page/Object Name (next to logo) */
        div.objecttype {
          font-size: 24px;
          font-family: Tahoma;
          font-weight: bold;
          color: black;
          vertical-align: top;
        }

        div.objectname {
          FONT-SIZE: 16px;
          FONT-FAMILY: Tahoma;
          font-weight: bold;
          color: rgb(172, 172, 172);
          vertical-align: top;
        }

        /* Page/Object Status (center) */
        div.pagestatus {
          FONT-SIZE: 14px;
          FONT-FAMILY: Tahoma;
          font-weight: bold;
          background-color: #c2c0ff;
          padding: 4px 22px 4px 22px;
          text-align: center;
        }

        /* Page/Object Status (center) -- CLEAR */
        div.pagestatus_white {
          FONT-SIZE: 14px;
          FONT-FAMILY: Tahoma;
          font-weight: bold;
          background-color: #ffffff;
          padding: 4px 22px 4px 22px;
          text-align: center;
        }

/* Page/Object Alerts */
/*
      div.pagealert {
        FONT-SIZE: 14px;
        FONT-FAMILY: Tahoma;
        font-weight: bold;
        font-style: italic;
        background-color: #ffffff;
        padding: 4px;
        text-align: center;
      }
        div.pagealert-success {
          background-color: #afebaf;
        }
        div.pagealert-error {
          background-color: #f99191;
        }  
*/
    

    
/* NO IDEA WHAT THIS IS -- bad?


    table.submenu {
      background-color: #8b8b8b;
      COLOR: white;
      width: 100%;
      border: 0px;
      padding: 4px;
      border-spacing: 0px;
    }

    table.submenu td {
      COLOR: white;
      font-weight: bold;
    }
*/
    

/* ------------------------------------------------------------ */
/* ------------------------- MID PAGE MENU -------------------- */
/* ------------------------------------------------------------ */
  

div.centermenu {
  background-color:#06276a;
  display: inline-block;

  COLOR: #ffffff;
  TEXT-DECORATION: none;
  cursor: pointer;
}

td.whiteline {
  background-color:#ffffff;
}

div.centermenuselected {
  background-color:#1972cb;
  display: inline-block;

  COLOR: #ffffff;
  TEXT-DECORATION: none;
  cursor: pointer;
}

div.submenu {
  background-color:#8b8b8b;
  display: inline-block;

  COLOR: #ffffff;
  TEXT-DECORATION: none;
  cursor: pointer;
}

div.centermenubody_show {
  display: block; /*block or none to hide/show div*/
}


div.centermenubody_hide {
  display: none; /*block or none to hide/show div*/
}

/* -------------------------------------------- */
/* --------------- QUICKSEARCH ---------------- */
/* -------------------------------------------- */

   
div.qsparent {
  position: relative;
}

div.qsresults {
  border: .25px solid #000000;
  background-color: #e2ecff;
  position: absolute;
  z-index: 1;
}

div.qsresultline {
  border: .25px solid #cccccc;
  background-color: #e2efff;
  padding:4px;
}

div.qsresultline_hover {
  border: .25px solid #000000;
  background-color: #ffb5ef;
  cursor: pointer;
  padding:4px;
}

div.qsresultline:hover {
  border: .25px solid #000000;
  background-color: #ffb5ef;
  cursor: pointer;
  padding:4px;
}

input.searchbox_customer {
  width: 300px;
}

input.searchbox_user {
  width: 175px;
}

/* -------------------------------------------- */
/* ------------------ FORMS ------------------- */
/* -------------------------------------------- */

    td.label {
      font-weight: bold;
    }

    td.label_green {
      font-weight: bold;
      background-color: #afffaf;
    }

    td.label_blue {
      font-weight: bold;
      background-color: #b1b4ff;
    }

    td.sectionheader {
      width: 100%;
      font-weight: bold;
      color: white;
      background-color: #7d3265;
      padding: 4px;
    }

    table.actionbuttons {
      width: 100%;
      background-color: #eeeeee;
    }

    /* FIELD CLASSES - INPUT TYPES */
    
    input[type=text].alignright { 
      text-align: right; 
    }

    input[type=text].alignright_gray { 
      text-align: right; 
      color: #cccccc;
    }


/* ------------------------------------------------- */
/* ---------------- ACTION BUTTONS ----------------- */
/* ------------------------------------------------- */

    /* "SUBMIT" BUTTONS */
    input[type=submit] {
      color: white;
      background-color: #888888;
      font-weight: bold;
      padding: 7px;
      margin-right: 7px;
      border-style: solid;
      border-width: 1px;
      cursor: pointer;
    }
   
    input[type=submit].bluebutton {
      background-color: #4075e8;
    }

    input[type=submit].orangebutton {
      background-color: #d87128;
    }

    input[type=submit].graybutton {
      background-color: #888888;
    }

    input[type=submit].greenbutton {
      background-color: #3cbc1f;
    }

    input[type=submit].redbutton {
      background-color: #ff0000;
    } 

    input[type=submit].blackbutton {
      background-color: #000000;
    } 

    input[type=submit].purplebutton {
      background-color: #c0539d;
    }

    input[type=submit]:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      background-color: #ddd;
      color: #999;
      border: 1px solid #ccc;
    }

  
    /* "BUTTON" BUTTONS */
    button {
      color: white;
      font-weight: bold;
      padding: 7px;
      margin-right: 7px;
      border-style: solid;
      border-width: 1px;
      cursor: pointer;
    }

    button img {
      width: 20px;
      height: 20px;

    }

    button.graybutton {
      background-color: #888888;
    }

    button.bluebutton {
      background-color: #4075e8;
    }

    button.blackbutton {
      background-color: #000000;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      background-color: #ddd;
      color: #999;
      border: 1px solid #ccc;
    }

/* ------------------------------------------------- */
/* ------------------- LIST VIEW ------------------- */
/* ------------------------------------------------- */

    /* --------- FILTER AREA -------- */
    table.filtertable {
      background-color: rgba(216, 255, 209, 0.8);
      /*border-spacing: 4px;*/
      padding: 4px;
      margin: 5px 5px 5px 20px;
      /*position: sticky;*/
      top: 0;
      
    }
    
    .filter-button {
      display: inline-block;
      margin: 5px;
      padding: 8px 12px;
      background-color: #888888;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .filter-button:hover {
      background-color: #e9ecef;
    }

    #btnClearAll {
      margin-top: 10px;
      display: block;
    }

    #configDropdown {
      font-size: 14px;
      background-color: #888888;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  
    #stickyButtons {
      position: fixed;      
      right: 10px;
      transform: translateY(-50%);
      z-index: 1000;
      display: flex;
      flex-direction: row;
      gap: 10px;
      font-size: 14px;
      background-color: #888888;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;        
      align-items: center;
    }

    #stickyButtons button {      
      padding: 5px 10px;
    }
    
    #stickyButtons:hover {
        background-color: #e9ecef;
    }
    
    #stickyButtons .fa-save {
        font-size: 16px;
    }

    /* --------- TABLE FORMAT -------- */
    table.listview {
      border-spacing: 0px;
      padding: 2px;
      margin: 5px 5px 5px 15px;
      position: sticky;
      top: 0;
      z-index: 0;
    }

    table.listview a {
      COLOR: rgb(98, 0, 255);
    }

    table.listview a:hover {
      COLOR: #117101;
      TEXT-DECORATION: underline;
    }

    /* Resizing columns */
    table.listview th {
      position: relative;
    }

    table.listview th .resizable-handle {
      position: absolute;
      top: 0;
      right: 0;
      width: 5px;
      height: 100%;
      cursor: col-resize;
      z-index: 1;
    }

    .no-select {
      user-select: none;
      cursor: col-resize;
    }

    /* TABLE HEADERS */
    th.headercell {
      cursor: pointer;
      background-color: #eeeeee;
      font-weight: bold;
      position: sticky;
      top: 0;
      z-index: 9999;
      padding: 8px;
      border: .25px solid lightgray;
    }
 
    th.headercell_green {
      background-color: #a7ffad;
    }

    th.headercell_blue {
      background-color: #e7e7ff;
    }

    th.headercell_orange {
      background-color: #ffd289;
    }

    th.headercell_aqua {
      background-color: #00dfd4;
    }

    th.headercell_purple {
      background-color: #d357cf;
    }

    table.listview td {
      border-spacing: 0px;
      padding: 4px;
      border: .25px solid lightgray;      
    }

    /* DRAGGING */
    .headercell.dragging {
      background-color: #e0e0e0;
      opacity: 0.7;
    }

    /* SORTABLE */
    .sortable-placeholder {
      background-color: #f0f0f0;
      border: 1px dashed #ccc;
      visibility: visible !important;
    }

    /* LINE COLORS: ALT AND REG LINE COLORS */

    tr.altrow {
      background-color: #def0ff;
    }

    tr.regrow {
      background-color: #ffffff;
    }

    /* TOTAL LINE FORMAT */
   
    tr.totalrow {
      background-color: #eeeeee;
      font-weight: bold;
    }

    /* LIST BUTTONS */
    td.addbutton {
      padding: 0px;
      margin: 0px 0px 0px 0px;
    }

    /* HEADER MENUS */
    .columnMenu {
      display: none;
      position: absolute;
      z-index: 1000;
      background-color: white;
      border: 1px solid #ddd;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      padding: 10px;
      min-width: 200px;
      overflow: visible;
    }

    .columnMenu ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .columnMenu ul li {
      cursor: pointer;
      padding: 8px 12px;
      background-color: #f8f9fa;
      border: 1px solid #ddd;
      margin: 2px 0;
    }

    .columnMenu ul li:hover {
      background-color: #e9ecef;
    }

    .columnMenu ul li.disabled {
      color: #6c757d;
      pointer-events: none;
      background-color: #e9ecef;
      cursor: not-allowed;
    }

    .columnMenuHeader {
      font-weight: bold;
      text-align: center;
      padding: 8px;
      border-bottom: 1px solid #ddd;
      background-color: #f9f9f9;
      font-size: 16px;
    }

    #checkboxContainer {
      display: none;
      background: #fff;
      border: 1px solid #ccc;
      max-height: 200px;
      overflow-y: auto;
      margin-top: 10px;
    }

    #checkboxContainer div {
      margin-bottom: 5px;
    }

    #checkboxContainer label {
      margin-left: 5px;
    }

/* ----------------------------------------------------------------- */
/* ------------------- SPECIFIC FIELD DATA TYPES ------------------- */
/* ----------------------------------------------------------------- */
    td.currency {
      text-align: right;
    }

    td.pounds {
      text-align: right;
    }

    td.sqft {
      text-align: right;
    }

    td.percent {
      text-align: right;
    }

    td.qty {
      text-align: center;
    }

    .serialized {
      color: rgb(163, 73, 0);
      font-weight: bold;
      font-style: italic;
    }

/* ------------------------------------------------- */
/* ------------------- MODAL ----------------------- */
/* ------------------------------------------------- */
    #stickyModal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2000;
      display: none;
    }

    .modal {
      display: none;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);      
      width: 250px;
      overflow-y: auto;
  }

  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }

/* ------------------------------------------------- */
/* ------------------- HOVERABLE ------------------- */
/* ------------------------------------------------- */
  th.sortable:hover {
    background-color: #e5e5e5;
  }

  th.sort-up::after {
    content: " ▲"; /* Up arrow character */
  }

  th.sort-down::after {
    content: " ▼"; /* Down arrow character */
  }

/* ------------------------------------------------- */
/* ------------------- Autocomplete----------------- */
/* ------------------------------------------------- */
  .ui-autocomplete {
    width: 300px !important;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1060 !important;
    position: absolute;
}
/**/

  .ui-menu-item {
    display: block !important;
}

  .ui-menu-divider {
  display: none !important;
}

/* ------------------------------------------------- */
/* ------------------- Filter Row ------------------ */
/* ------------------------------------------------- */
  #filterRow {
    display: none;
  }

/* ----- TAB MENU DIVS ----- */