body {
    background: linear-gradient(160deg, rgba(0, 73, 144, 0.04), #f8fbfe);
    min-height: 100vh;
}

#footer {
	position: relative;
}
#copyrights {
	padding: 20px 0;
	font-size: 14px;
	line-height: 1.8;
}


.title-div {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(0, 73, 144, 0.2);
  margin-bottom: 2rem;
}

.title-div h1 {
/*  font-size: 2.25rem; */
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #212529;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.04); /* soft */
}



select,
input[type="checkbox"] {
  cursor: pointer;
}

/**************************************/
/**** JQuery DataTables Custom CSS ****/
/**************************************/

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    box-shadow: none;
}
/* Responsive DataTable column title (when collapsed) */
table.dataTable > tbody > tr.child span.dtr-title {
    margin-right: 2em;
}
.table-striped > tbody > tr:nth-child(odd)>td {
  background-color: rgba(0, 0, 0, 0.023);
}
table.dataTable th.dt-type-numeric, 
table.dataTable th.dt-type-date, 
table.dataTable td.dt-type-numeric, 
table.dataTable td.dt-type-date {
   text-align: left;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child {
    padding-left: 30px;
}

table.table.dataTable tbody tr td {
    font-size: 0.875rem;
}
table.table.dataTable thead tr th {
    font-weight: 600;
    font-size: 0.93rem;
}
.dt-container {
    width: 90%;
}
.dt-container .dt-info {
    font-size: 0.75rem;
}
.dt-paging .page-link {
    font-size: 0.8rem;
}
table.table.dataTable tr.search-row input,
.dt-length,
.dt-search {
    font-size: 0.875rem;
}

table.table.dataTable > :not(caption) > * > * {
    padding: 0.5rem 0.3rem;
}

table.dataTable input::placeholder {
   font-style: italic;
   opacity: 0.5;
}


table.table.dataTable thead tr th {
    background-color: transparent;
}

.dt-button.btn-xs {
    font-size: 0.75rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    border-radius: 0.2rem;
}

@media only screen and (max-width: 767px) {
  .dt-buttons {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 0.75rem;
  }

  .dt-button.btn-xs {
    font-size: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 0.375rem;
  }

}

/* Ensure the title and content cells are aligned to the top in both the title and content columns */
.child-row td {
    vertical-align: top; /* Align text at the top of both cells */
    padding: 8px 15px; /* Add padding inside the cells */
}

/* Apply bold and padding to the title cell only (first cell in each row) */
.child-row-title {
    font-weight: 600; /* Make title bold */
    padding-right: 15px; /* Space between title and content cell */
}

/* Add a faint horizontal line between rows if there are two or more rows */
.child-row td {
    border-bottom: 1px solid #e0e0e0; /* Faint horizontal line between rows */
}

/* Remove the border after the last row */
.child-row:last-child td {
    border-bottom: none; /* No line after the last row */
}

.child-row-title,
.child-row td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 1199px) {

    .child-row-title {    
        width: 40%;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {

    .child-row-title {    
        width: 25%;
    }
}

@media (min-width: 1600px) {

    .child-row-title {    
        width: 20%;
    }
}


/***************************************/
/**** DataTable Action Icons ***********/
/***************************************/

.action-icon {
  color: #004990;
  margin: 0 0.75rem;
  transition: color 0.2s ease;
  font-size: 1.2rem;
}

.action-icon:hover {
  color: #368ad8;
}

.action-icon:active {
  color: #003B74;
}

.action-icon:focus {
  outline: 2px solid #66B2FF;
  outline-offset: 2px;
}

.action-icon.disabled {
  color: #99B4D1;
  pointer-events: none;
  opacity: 0.6;
}

.delete-icon {
  color: #CC3300; 
}

.delete-icon:hover {
  color: #E64500; 
}


/***********************************/
/**** Bootstrap Modal Custom CSS ***/
/***********************************/

.modal-body input::placeholder {
    font-weight: 400;
    font-style: italic;
}

.modal-title {
    font-weight: 600;
}

.view-modal .form-floating > label {
    padding-top: 0.8rem;
}
.modal-body .required-field {
    color: red;
    font-weight: bold;
    margin-left: 2px;
//    vertical-align: super;
}
.modal-header {
   flex-direction: column;
}
.modal-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/***********************************/
/**** Bootstrap Form Custom CSS ****/
/***********************************/
 
.form-floating > label {
    font-style: italic;
    color: rgba(33, 37, 41, 0.65);
}
.form-floating > input:focus ~ label,
.form-floating > input:valid ~ label,
.form-floating > input:not(:placeholder-shown) ~ label,
.form-floating > textarea:focus ~ label,
.form-floating > textarea:valid ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label,
.form-floating > select ~ label {
    line-height: 0.7em;
}

.form-floating p.product-description {
    display: block;
    height: auto;
    overflow: hidden;
    word-wrap: break-word;
    white-space: normal;    
}

.form-check label {
    cursor: pointer;
    font-size: 0.875rem;
}

.required-note {
    font-size: 0.875rem;
    font-style: italic;
    margin-top: 5px;
    color: #6c757d;
}
.required-emphasis {
    color: red;
    font-weight: bold;
}

.btn-close {
    position: absolute;
    top: 16px;  
    right: 16px;  
}

/***************************************/
/**** Bootstrap Tooltips Custom CSS ****/
/***************************************/

/** (Default tooltip-inner max-width is 200px) **/ 

.tooltip-w300 .tooltip-inner {
    max-width: 300px;  
    white-space: normal; /* Ensures text breaks correctly */
}

.tooltip-w350 .tooltip-inner {
    max-width: 350px;  
    white-space: normal; /* Ensures text breaks correctly */
}

.tooltip-w400 .tooltip-inner {
    max-width: 400px;  
    white-space: normal; /* Ensures text breaks correctly */
}
.tooltip-w450 .tooltip-inner {
    max-width: 450px;  
    white-space: normal; /* Ensures text breaks correctly */
}
.tooltip-w500 .tooltip-inner {
    max-width: 500px;  
    white-space: normal; /* Ensures text breaks correctly */
}

.tooltip-no-maxwidth .tooltip-inner {
  max-width: none !important;
  white-space: normal; /* wrap text */
}

@media only screen and (max-width: 767px) {
    i.tooltip-info-icon,
    svg.tooltip-info-icon {
        display: none;  /* Hide tooltip icons on mobile screens */
    }
}

/** CSS styling for non-floating form labels **/
.form-unfloating > label {
    font-size: 14px;
    padding-left: 0.2rem;
    margin-bottom: 0.2rem;
    font-style: italic;
    color: rgba(33, 37, 41, 0.65);
}
.form-unfloating p {
    height: 38px;
}
           
.truncate-long {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; 
}
.no-wrap {
    white-space: nowrap;
}

.tooltip {
  --bs-tooltip-bg: rgb(0, 73, 144);
}

.tooltip.alert-tooltip {
  --bs-tooltip-bg: rgb(204, 51, 0);
}

.tooltip.warning-tooltip {
  --bs-tooltip-bg: #daa520;
}

.invalid-feedback {
    line-height: 1.2em;
}

#main-content {
    transition: opacity 0.15s ease-in;
}