@charset "utf-8";
/* CSS Document */

:root {
  --blue: #000080;
  --bar-border-width:3px 3px 3px 3px;
  --bg-color:#C8C8C8;
  --bg-color-light:#F0F0F0;
  --text-color:#000;
  --button-text-color:#FFF;
  --grey-bg-color:#444;
  --grey-border-color:#999 #000 #000 #999;
  --green-bg-color:#305818;
  --green-border-color:#93AC84 #0F2800 #0F2800 #93AC84;
  --red-bg-color:#9A0718;
  --red-border-color:#F68A8A #55011C #55011C #F68A8A;
  --blue-bg-color:#014B9B;
  --blue-border-color:#0172C8 #000080 #000080 #0172C8;
  --greycolor:#e5e5e5;
}

body.light {
  --bg-color:#FFF;
  --bg-color-light:#CCC;
  --text-color:#000;
}

body.dark {
  --bg-color:#000;
  --bg-color-light:#555;
  --text-color:#FFF;
}

body.eye-care {
  --bg-color:#CFDFFF;
  --bg-color-light:#BECEEE;
  --text-color:#000;
}

a:hover {
  cursor:pointer;
}

.editform input[type=text], .editform input[type=datepicker], .editform textarea, .editform input[type=search]{
  width:calc(100% - 10px);
}

.editform textarea{
  height: calc(100% - 10px);
}

BODY {
  font-family:verdana, arial, helvetica;
  font-size:10pt;
  background-color:var(--bg-color);
  margin:0;
  padding:0;
  box-sizing: border-box;
  color: var(--text-color);
} /* Target Background Opacity 0.7 */

u {
  border-bottom: 1px dotted #000;
  text-decoration: none;
}

a {
  color:var(--blue);
}

.uiHidden {
  display:none;
}

#uiContainerGrid{
  min-width:1000px !important;
  display: grid;
  grid-template-columns: 50px minmax(900px, auto) 50px;
}

#uiContainer {
  grid-area: 1/2/span 1/span 1;
  width:100%;
  margin:0 auto;
}
#uiAdminControls{
  width:100%;
  grid-area: 3/2/span 1/span 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#uiAdminSearch {
  display: flex;
  align-items: center;
  gap: 10px;
}
#uiAdminContent{
  width:100%;
  grid-area: 4/2/span 1/span 1;
}
#uiHeader {
  min-width:1000px !important;
  min-height:100px;
  margin-bottom: 5px;
}

#uiNotificationBar {
  width:100%;
  height:auto;
  background-color:#232323;
  border: 1px solid #000;
  border-radius:7px;
}

#uiNotificationContainer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 41px;
  width: 100%;
}

#uiNotificationIconContainer{
  width:190px;
  height:41px;
}

#uiAlertNotificationIconContainer{
  height: 41px;
}

#uiAlertNotificationIconContainer a {
  color:white;
  text-decoration:none;
}

#uiAlertNotificationCount {
  display:inline-block;
  text-align:center;
  vertical-align:middle;
  height:41px;
}

#uiLoginContainer {
  width:321px;
  height:24px;
  padding-right:7px;
  color:#FFF;
  font-weight:bold;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* badge declarations */
 .badge { padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; }
 .badge:focus-visible, .badge:hover {outline: 2px solid #000;outline-offset: 2px;}
 
/* nav-menu */
#uiLoginContainer ul li ul li ul{left: 200px;top: 0;}

/* User Navigation Menu */
#user-nav-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 99;
}

#user-nav-menu > li {
    position: relative;
    right: 0;
}

#user-nav-menu a, #user-nav-menu button {
    font-size: 12pt;
    padding: 0.5rem 1rem;
    color: var(--greycolor);
    display: block;
    text-decoration: none;
    box-sizing: border-box;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

#user-nav-menu > li > a, #user-nav-menu > li > button {
    padding: 0.5rem 1rem;
}

#user-nav-menu li:hover > a, #user-nav-menu li:hover > button {
    background-color: #797979;
    color: #fff;
}

/* Submenu */
#user-nav-menu ul {
    position: absolute;
    right: 0;
    top: 100%;
    width: 330px;
    background: rgba(35, 35, 35, 1);
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #555;
}

#user-nav-menu li:hover > ul {
    display: block;
}

#user-nav-menu ul li {
    position: relative;
    width: 100%;
}

/* Sub-submenu */
#user-nav-menu ul ul {
    left: 100%;
    top: 0;
    border-radius: 4px;
    border-top: none;
}

#uiLoginContainer ul li:focus-within > ul, #uiLoginContainer ul li:hover > ul{display: initial;}

#uiLogInMessage {
  width:650px;
  height:24px;
  display:table-cell;
  vertical-align:middle;
  text-align:right;
  padding-right:10px;
  text-shadow:0.1em 0.1em 0.05em #000;
}

#uiLogInMessage > a {
  color:white;
}

#uiLogIn {
  display: flex; 
  flex-wrap: nowrap;
  align-items: center;
  width:135px;
  height:24px;
  gap: 40px;
}

#userName {
  width: 160px;
}

#uiPassword {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width:185px;
  height:24px;
  gap: 10px;
}
  

#userPass {
  width: 160px;
}
#capsWarning{
  display: none;
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-align: center;
  background-color: #9A0718;
  padding: 2px 0;
}
.iconContainer{padding: 0 5px;}

.fa-eye{
  width: 20px;
  height: 20px;
  display: block;
  background-image: url('/images/icons/eye.svg'); /* Replace with the correct path */
  background-size: cover;
  cursor: pointer;
  filter: invert(100%);
}

.fa-eye-slash{
  width: 20px;
  height: 20px;
  display: block;
  background-image: url('/images/icons/eye-slash.svg'); /* Replace with the correct path */
  background-size: cover;
  cursor: pointer;
  filter: invert(100%);
}


#uiLoginButtonContainer {
  /* height:21px; */
  position:relative;
  top:-2px;
  right:5px;
  margin:0 10px 0 10px;
  border-style:outset;
  border-radius:6px;
}

#uiLoginForm{
  display: flex;
  flex-direction: column;
  padding-left: 17px;
  gap: 10px;
}

#uiLoginButtonContainer A {
  color:#fff;
  text-decoration:none;
}

#uiLoginButtonContainer .vert {
  display:flex;
  align-items: center;
  vertical-align:middle;
  text-align:center;
  height:21px;
  width:75px;
  padding:0 10px;
}

#loginButton {
  cursor:pointer;
  min-width:100px;
}

#uiInformationRow1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
  padding:10px 0;
}

#uiAccountingMemberContainer {
  font-size:14pt;
  color:#FFF;
  padding:0 0 0 10px;
  text-shadow:0.1em 0.1em 0.05em #000;
}

#uiAccountingMemberSelector {
  text-align:center;
  display:block;
}

#uiAccountingMemberSelector #AccountingMember {
  color:var(--text-color);
  background-color:var(--bg-color-light);
  font-size:14pt;
  width:355px;
}

#uiDateBox {
  font-size:14pt;
  color:#FFF;
  width:400px;
  padding:0 10px 0 0;
  text-shadow:0.1em 0.1em 0.05em #000;
  text-align:right;
}

.uiWarningBar {
  min-width:1000px;
  height:auto;
  margin:0 0 10px 0; 
  padding: 10px 10px;
  box-sizing: border-box;
  clear:both;
  font-size:14pt;
  color:#fff;
  background-color:var(--red-bg-color);
  border: 1px solid #000;
  border-radius:7px;
  text-align:center;
  font-weight:bold;
  text-shadow:3px 3px 1px #000;
}

.uiSystemMessageBar {
  width:997px;
  min-height:48px;
  margin:0 0 10px 0; 
  float:left; 
  clear:both;
  font-size:12pt;
  color:#fff;
  background-color:#305818;
  border: 1px solid #000;
  border-radius:7px;
  font-weight:bold;
  padding:10px;
}

.uiSystemMessageExpires {
  font-size:10pt;
  float:right;
}

.uiSystemMessageBar a {
  color:#fff;
}

/* navbar*/
#uiFormNavContainer {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
  height:40px;
  margin-bottom: 10px;
  grid-area: 2 / 2 / span 1 / span 1;
}

#uiFormNameBar {
  position: absolute;
  top: 0;
  left: 46px;
  width:95%;
  font-size:14pt;
  text-shadow:0.1em 0.1em 0.05em #000; 
  border-width:3px 0;
  border-color:#8C8C8C #000 #000 #8C8C8C;
  z-index: 0;
}

h1 {
  font-size:14pt;
  margin:0;
  font-weight:500;
}

#uiFormNavContainer .vert {
  display:table-cell;
  vertical-align:middle;
  height:34px;
  width:100%;
  padding:0 5px;
}

#uiFormNavContainer .vert img {
  margin:2px 0 0 0;
}

.uiFormNavWrapper{
  position:absolute;
  top: 0;
  right: 0;
  display: flex;
  height: 34px;
}

.uiFormNav {
  width:40px;
  border-style: outset; 
  height: 34px;
}

#uiFormNameBar, #uiFormNavUnlock{
  float:left;
  border-style:outset;
  height:34px;
  padding:2px;
  border-radius:0px;
}

/* Deprecated - Only used in Admin Tools */
#uiFormNameBar_main {
  width:837px;
  height:34px;
  color:#FFF;
  font-size:14pt;
  padding:8px 0 0 15px;
  text-shadow:0.1em 0.1em 0.05em #000;
  overflow:hidden;
  background-color:#444;
  border: 1px solid #000;
  border-radius:0px;
  margin:0 0 12px 0;
}

/* Button and bar colors */

.blue {
  color:var(--button-text-color);
  background-color:var(--blue-bg-color);
  border-color:var(--blue-border-color);
}

.green {
  color:var(--button-text-color);
  background-color:var(--green-bg-color);
  border-color:var(--green-border-color);
}

.red {
  color:var(--button-text-color);
  background-color:var(--red-bg-color);
  border-color:var(--red-border-color);
}

.grey {
  color:var(--button-text-color);
  background-color:var(--grey-bg-color);
  border-color:var(--grey-border-color);
}

div.uiSimpleDelete {
  border-radius: 4px;
}

div.uiSimpleDelete.red {
  color:#D00;
  background-color:transparent;
}

div.uiSimpleDelete.grey {
  color:var(--grey-bg-color);
  background-color:transparent;
}

div.addNew{
  width:85px; 
  margin: 5px 0;
  font-size: 15px; 
  background: linear-gradient(90deg, rgba(48, 88, 24, 1) 75%, #448F01 15%);
  box-shadow: 4px 4px 4px #000;
  border: 0;border-radius: 0.188rem;
  padding: 5px 50px 5px 10px;
  position: relative;
}

div.addNew:after{
  font-size: 20px;
  font-weight: bolder; 
  content: "\002B";
  position: absolute;
  top:2px;
  right:10px;
}

div.addNewDisabled{
  width:85px;
  margin: 5px 0;
  font-size: 15px; 
  background: linear-gradient(90deg, #333 75%, #5d5d5d 15%);
  box-shadow: 4px 4px 4px #000;
  border: 0;
  border-radius: 0.188rem;
  padding: 5px 50px 5px 10px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  cursor: default;
}

div.addNewDisabled:after{
  font-size: 20px;
  font-weight: bolder; 
  content: "\002B";
  position: absolute;
  top:2px;
  right:10px;
}

div[data-type='checkbox'], td[data-type='checkbox'] {font-size:1.2em;}

/* Button and bar borders */

.left, .middle, .right, .all {
  border-style: outset;
  border-width: var(--bar-border-width);
}

.left {
  border-radius:6px 0 0 6px;
}

.middle {
  border-radius:0px;
}

.right {
  border-radius:0 6px 6px 0;
}

.all {
  border-radius:6px 6px 6px 6px;
}

#uiMiddle {
  min-width:1000px;
  display: grid;
  grid-template-columns: auto 1fr;
}

#uiLeft {
  grid-area: 1/1/span 1/span 1;
  width:175px;
  min-height:700px;
}

#uiRight {
  grid-area: 1/2/span 1/span 1;
  min-width: 835px;
  min-height:700px;
}

#uiRight .ui-widget-content {
  color:var(--text-color);
}

#uiRight .dataTables_length {
  color:var(--text-color);
}

/* new formBar Nav*/

.formNameBar{
  padding: 5px 5px;
  font-size: 13.5pt;
  font-weight: 500;
  text-shadow:0.1em 0.1em 0.05em #000; 
  line-height: 150%;
  width: 100%;
}

/*buttons*/
#uiFormNavHome2, #uiFormNavPrint, #uiFormNavUnlock, #uiFormNavLock, #uiFormNavSave, #uiFormNavService {
  background-repeat: no-repeat;
  background-position: center;
}

#uiFormNavHome2{
  background-image: url("/images/buttons/ui/home_slim.png");
}

#uiFormNavPrint{
  background-image: url("/images/buttons/ui/print_slim.png");
}

#uiFormNavUnlock{
  background-image: url("/images/buttons/ui/lock_slim.png");
}

#uiFormNavLock{
  background-image: url("/images/buttons/ui/unlock_slim.png");
}

#uiFormNavSave{
  background-image: url("/images/buttons/ui/save_slim.png");
}

#uiFormNavService{
  background-image: url("/images/buttons/ui/support.png");
}

#uiFormNavFirst{background-image: url("/images/buttons/ui/first_record.png");}
#uiFormNavPrev{background-image: url("/images/buttons/ui/prev_record.png");}
#uiFormNavNext{background-image: url("/images/buttons/ui/next_record.png");}
#uiFormNavLast{background-image: url("/images/buttons/ui/last_record.png");}

#uiFormNavAdd::after {
  content: ' \002B';
  font-size: 35px;
  font-weight: bolder;
  line-height: 30px;
}

.btn {
  text-decoration: none;
  display: inline-block;
  min-width: 40px;
  height: 34px;
  padding: 2px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.btnAddNew{
  text-decoration: none;
  display: inline-block;
  min-width: 40px;
  height: 20px;
  padding: 2px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.btnDelete{
  text-decoration: none;
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 2px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  cursor: pointer;
}

div > a.textbtn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  max-width: 100%;
  height: 34px;
  padding: 0px 10px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* DataTables Buttons Styling */
.dt-button {
    background-color: #305818 !important;
    color: #fff !important;
    border: 1px solid #0F2800 !important;
    padding: 6px 12px !important;
    margin: 2px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease !important;
}

.dt-button:hover {
    background-color: #4a7a2a !important;
}

.dt-button:active {
    background-color: #1f3d0f !important;
}

/* dialog overlay */
.no-close .ui-dialog-titlebar-close {
  display: none;
}

/*uiTicket overlay*/
#uiTicketOverlay {
  padding-top: 20px;
}

.uiTicketRow {
  display: flex;margin-bottom: 10px;
}

.uiTicketLabel {
  width: 120px; padding: 3px;
}
.uiTicketSpan{
  width: 30px;
}

.uiTicketField input[type=text] {
  width: 500px; 
  padding: 3px;
}

.uiTicketField select {
  width: 495px; 
  padding: 3px;
}

.uiTicketTextArea textarea {
  width:485px;
  height:125px;
  padding: 3px;
}

.uiTicketHide {
  display: none;
}
.employee{padding: 3px;}

/* uiForgotPassword Overlay */
#uiForgotPasswordOverlay{
  padding-top: 20px;
}

#uiForgotPasswordOverlay .uiForgotPasswordRow{ display:flex;margin-bottom: 10px;align-items: center;}
#uiForgotPasswordOverlay .uiForgotPasswordLabel{width: 120px; padding: 3px;}
#uiForgotPasswordOverlay .uiForgotPasswordField .iconContainer{background-color: #000; padding: 4px 12px; border-radius: 0px 8px 8px 0;}
#uiForgotPasswordOverlay .uiForgotPasswordField input{background-color: lightyellow;padding: 5px;width: 500px;}
#uiForgotPasswordOverlay .uiForgotPasswordField input[type=password]{background-color: lightyellow;padding: 5px;width: 500px;border-radius: 8px 0px 0px 8px;}

/*Navigation Buttons*/

#mainNavigation {
  padding:0;
  margin:0 5px 0 0;
}

#mainNavigation li {
  list-style-type:none;
  padding:0;
  margin:0 0 2px 0;
}

.uiLeftButton {
  border-style:outset;
  border-radius:6px;
  margin:0px 0px 2px 0;
  width:165px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  height:34px;
  padding:2px;
  color:var(--button-text-color);
  text-decoration:none;
  font-weight:bold;
}

/* Message Box */
#uiMessageBox {
  position: absolute;
  top: 10px;
  left: 5%;
  width:90%;
  border-style:solid;
  border-width:3px;
  color:#000;
  font-weight:bold;
  border-radius:6px;
  margin:0 0 10px 0;
  display:flex;
  align-items:center;
  height:60px;
  z-index: 9999;
}

#uiMessageBox.hidden {
  display:none;
}

#uiMessageBox.success {
  display:flex;
  background-color:#D6FAD6;
  border-color:#189A07;
}

#uiMessageBox.failure {
  display:flex;
  background-color:#FABDBD;
  border-color:var(--red-bg-color);
}

#uiMessage {
  max-height:60px;
  min-height:60px;
  overflow-y:auto;
  padding: 20px 0;
}

#uiMessage.vert {
  width:calc(100% - 30px);
  padding-left:5px;
}

#uiCloseMessage.vert {
  width:30px;
  text-align:center;
}

#uiCloseMessage.vert A {
  text-decoration:none;
  color:#000;
  margin:auto 0 auto 0;
}

#uiMessageBox.success A {
  color:#004400;
}

#uiMessageBox.failure A {
  color:#440000;
}

/* MARKED FOR DEPRECATION */
#uiMessageOverlay{
  width:405px;
  height:270px;
  position:absolute;
  top:33%;
  left:40%;
  background-image:url(../images/ui/overlay_bg.png);
  background-repeat:no-repeat;
  display:none;
}

#uiMessageOverlayTitle {
  height:24px;
  width:360px;
  position:absolute;
  padding:5px 0 0 5px;
  color:#000;
  font-size:11pt;
  font-weight:bold;
}

#uiMessageOverlayClose {
  height:30px;
  width:30px;
  position:relative;
  left:372px;
  top:4px;
}

#uiCloseMessageOverlay {
  cursor:pointer;
}

#uiMessageOverlayContent {
  overflow:auto;
  height:185px;
  width:390px;
  margin:0 5px;
  position:relative;
}

#uiMessageOverlayButtonContainer {
  height:50px
  ;width:400px;
  position:relative;
  text-align:center;
}

#uiButtonOK {
  cursor:pointer;
}

#uiLargeMessageOverlay{
  width:650px;
  height:410px;
  position:absolute;
  top:29%;
  left:32%;
  background-image:url(../images/ui/uiLargeOverlay.png);
  background-repeat:no-repeat;
  display:none;
}

#uiLargeMessageOverlayTitle {
  height:24px;
  width:600px;
  position:absolute;
  padding:5px 0 0 7px;
  color:#000;
  font-size:11pt;
  font-weight:bold;
}

#uiLargeMessageOverlayClose {
  height:30px;
  width:30px;
  position:relative;
  left:612px;
  top:4px;
}

#uiCloseLargeMessageOverlay {
  cursor:pointer;
}

#uiLargeMessageOverlayContent {
  overflow:auto;
  height:360px;
  width:630px;
  margin:5px;
  position:relative;
}

.uiContainer{
  min-width:1000px;
}

/* MRP Administation Pages */

#uiAdminContent {
  min-width:1000px;
}

.ui-accordion-content {
  padding: 0.5em !important;
}

#uiFooter {
  grid-area: 2/2/span 1/span 1;
  text-align:center;
  min-width:1000px;
  margin:20px 0 0 0;
  min-height:80px;
}

input[type=text]:focus, textarea:focus, input[type=password]:focus, input[type=search]:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);  
}


/* Universal forms layout*/

.uiRequiredField{
  color: red;
  font-weight: bold;
  font: size 12pt !important;
}

.uiFormBtnWrapper{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap:5px;
  flex-wrap: wrap;
}

.uiFormSelectWrapper{
  display: flex;
  align-items: center;
}

.uiFormSelectLabel{
  font-size: 11pt;
  padding:0 5px 0 10px;
}

.uiFormSelectInput{
  border-radius: 6px; 
  padding: 4px;
  border: 1px solid #5b5b5b;
}

.uiSearchWrapper{
  display: flex;
  align-items: center; 
  gap: 15px;
}

.uiSearchWrapper div{
  display: flex;
  align-items: center; 
  gap: 5px;
}
.uiSearchCriteriaInput{
  padding: 4px;
  border: 1px solid #5b5b5b;
  border-radius: 6px;
  color: #000;
  background-color: #fff;
}
.uiSearchLabel{
  font-size: 16pt;
  padding:0 5px 0 10px;
}

.uiFormContainer{
  display: flex;
}

.uiFormRow{
  display: flex;
  min-height: 1.7rem;
}

.uiFormRow.flex-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inputEye{display: flex; flex-direction: row; align-items: center;}

.uiFormRowTextareaRow{
  display: flex;
}

.uiFormRowFlexStart{
  display: flex;
  align-items: flex-start;
}

.uiFormLabel{
  font-weight:bold;
  font-size: 10pt;
  padding:0 5px 0 10px;
}

.uiFormInput_long,.uiFormInput, .uiFormInput .editFormField{
  font-size: 10pt;
}

.uiFormInput input[type=text],.uiFormInput textarea .uiFormInput select, .uiFormInput input[type=search]{
  border-radius: 6px;
  padding: 4px;
  border: 1px solid #5b5b5b;
}

.uiFormOneColumn, .uiFormTwoColumn, .uiFormThreeColumn, .uiFormFourColumn {
  display: flex;
}

.uiFormOneColumn {
  height: auto;
}

.uiFormFourColumn {
  align-items: center;
}

input[type=search],input[type=password],input[type=text], select, textarea{
  padding: 4px;
  border: 2px solid #5b5b5b;
  border-radius: 6px;
  color: #000;
  background-color: #fff;
}

/* table row stripping for all tables*/
table.dataTable tr:nth-child(odd){
  background-color:var(--bg-color);
}

table.dataTable tr:nth-child(even){
  background-color:var(--bg-color-light);
}

table[data-tablename] tr:nth-child(odd){
  background-color:var(--bg-color);
}

table[data-tablename] tr:nth-child(even){
  background-color:var(--bg-color-light);
}

.ui-tabs.ui-widget-content {
  background-color:var(--bg-color);
}

/* table input, textaree, datepicker */
.editgrid td input[type=text], .editgrid td textarea, .editgrid td input[type=datepicker], .editgrid td input[type=search]{
  width: calc(100% - 20px);
}

/* pagination */
/* .pagination{width: calc(350px - 78px);display: flex;justify-content: space-between;} */
.tableHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
}

.selectContainer{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 0;
  font-weight: bolder;
}

.searchContainer{
  display:flex;
  align-items:center;
  gap:5px;
  padding: 10px 0;
  font-weight: bolder;
}

.pagination{
  margin:5px 0px 5px;
  user-select: none;
}

.pagination li{
  text-align: center;
  display: inline-block;
  margin: 5px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 10%);
}

.pagination li a{
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 25px;
}

.first-page, .previous-page, .next-page, .last-page{
  background: #0066cc;
  border: 1px solid #fff;
  width: 50px;
  border-radius: 5px;
  cursor: pointer;
}

.current-page, .dots{
  background: #0088cc;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #fff;
}

.current-page:hover, .dots:hover{
  background: #0066cc;
}

.activepag{
  background: #0066cc;
  border: 1px solid #fff;
}

.disablepag{
  background:#444444;
  color: #000;
  pointer-events: none;
  cursor: default;
}

/* inputSearch */
#inputSearch{
  padding: 9px;
}

#clearSearch{
  width: 50px;
  border-radius: 5px;
  cursor: pointer;
}

td[data-type='checkbox'] {
  font-size: 15px;
}


/* non-table pager start */
.custom-pager {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 1rem 0;
}

/* Add list styling for semantic structure */
.custom-pager .pager-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
    align-items: center;
}

.custom-pager .pager-list li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.custom-pager .pager-ellipsis {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin: 1px;
    color: #666;
    font-size: 16px;
    line-height: 25px;
    vertical-align: middle;
}

.custom-pager .pager-first,
.custom-pager .pager-last {
    font-weight: 500;
}

.pager-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    padding: 0.5rem 0;
}

.pager-wrapper.bottom {
    border-top: 1px solid #e0e0e0;
    margin-top: 2rem;
    padding-top: 1rem;
}

.pager-info {
    font-size: 0.9rem;
    color: #666;
}

.pager-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-pager .pager-btn {
    padding: 0.1rem 0.5rem;
    border: 1px solid #fff;
    background: #01527a;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    line-height: 25px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 5px 25px rgb(1 1 1 / 10%);
    text-align: center;
    display: inline-block;
    margin: 1px;
    user-select: none;
}

.pager-btn:hover:not(.disabled):not(.current) {
    background: #0066cc;
}

.pager-btn.current {
    background: #0066cc;
    color: #fff;
    border: 1px solid #fff;
}

.pager-btn.disabled {
    background: #444444;
    color: #fff;
    pointer-events: none;
    cursor: default;
    border: 1px solid #fff;
    opacity: 0.6;
}

.pager-ellipsis {
    padding: 0.5rem 0.15rem;
    color: #999;
}

.pager-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70.17px;
}

.no-records{
    text-align: center;
    padding: 25px;
    font-size: 16px;
    color: #999;
}
.records-per-page{
  cursor: pointer;
}
  
@media (max-width: 768px) {
    .pager-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
    
    .pager-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pager-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* non-table pagination end */

/* .htpasswd Password Generator Styles */
.htpasswd-container {
    font-family: Arial, sans-serif;
    max-width: 600px;
    padding: 20px;
}

.htpasswd-container h1 {
    color: #333;
    margin-top: 0;
}

.htpasswd-container .form-group {
    margin-bottom: 20px;
}

.htpasswd-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

.htpasswd-container input[type="text"],
.htpasswd-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

.htpasswd-container input[type="text"]:focus,
.htpasswd-container input[type="password"]:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.htpasswd-container button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.htpasswd-container button:hover {
    background-color: #45a049;
}

.htpasswd-container .error {
    background-color: #fee;
    color: #c33;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid #c33;
}

.htpasswd-container .result {
    background-color: #efe;
    color: #3a3;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    border-left: 4px solid #3a3;
}

.htpasswd-container .result-label {
    font-weight: bold;
    margin-bottom: 10px;
}

.htpasswd-container .result-value {
    background-color: white;
    padding: 10px;
    border: 1px solid #3a3;
    border-radius: 4px;
    font-family: monospace;
    word-break: break-all;
    font-size: 12px;
    overflow-x: auto;
}

.htpasswd-container .copy-btn {
    margin-top: 10px;
    background-color: #2196F3;
    padding: 8px 15px;
    font-size: 14px;
}

.htpasswd-container .copy-btn:hover {
    background-color: #0b7dda;
}

.htpasswd-container .instructions {
    background-color: #e3f2fd;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid #2196F3;
}

.htpasswd-container .instructions h3 {
    margin-top: 0;
}

.htpasswd-container .instructions p {
    margin: 8px 0;
}