/*
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
*/

/* Increase the left indent of adminLTE sub menu items */
.nav-treeview .nav-link {
    padding-left: 35px !important;
}

/* change Sweetalert2 styles here OR define in adminlte.css. */
.swal2-icon {
    font-size: 10px; /* Adjusts the size of the sweetalert2 icon */
}
.swal2-icon.swal2-question {
    border-color: red; /* This changes the border color, which is the circle color */
    color: red;        /* This changes the inside color */
}
.swal2-icon.swal2-errorXXX {
    border-color: red; /* This changes the border color, which is the circle color */
    color: red;        /* This changes the inside color */
}
.swal2-icon.swal2-warning {
    border-color: orange; /* This changes the border color, which is the circle color */
    color: orange;        /* This changes the inside color */
}
.swal2-icon.swal2-info {
    border-color: dodgerblue; /* This changes the border color, which is the circle color */
    color: dodgerblue;        /* This changes the inside color */
}
/* For success, it should be changed as below since this style defenition is there in adminlte.css */
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: limegreen;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: limegreen;
}

/* colour for expired and expiring-soon documents */
.expired {
    color: red;
}

.expiring-soon {
    color: orange;
}

.blue {
    color: blue;
}

.dark-green {
    color: #006400;
}

.green {
    color: green;
}

.red {
    color: red;
}

/* Custom style for the photo placeholder. This can be used to display a placeholder image when the actual image is not available. */
.photo-placeholder {
    border: 1px dashed #ccc;
    background-color: #f8f9fa;
    color: #6c757d;
}

/* Custom style for immitating input-like-border. This can be used to enclose the radio buttons inorder to give it the appearance of an input box. */
.input-like-border {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem); /* Matches the height of a standard input.  + 2px  */
    background-color: #fff;
}

/*--- dataTable customizations. 
      Note: you can specify a different style for a particular datatable by referencing the datatable by its id. 
            Ex: #bankTable tbody tr:hover { }  ---*/

/* To ensure that the lengthMenu, buttons, and search input are displayed on the same row and properly aligned */
div.topStart, div.topCenter, div.topEnd {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
}

div.topCenter {
    margin-left: 20px; /* ie. Buttons */
}

div.topEnd {
    float: right; /* ie. Search box */
}

div.bottomStart {
    float: left; /* ie. Table information */
    margin-top: 20px;
}

div.bottomEnd {
    float: right; /* ie. Pagination */
    margin-top: 11px;
}

/* Custom header background color for all DataTables */
.dataTable thead tr {
    background-color: darkgray;
}

/* Custom style for row hover */
.dataTable tbody tr:hover {
    background-color: #e6f4ea !important; /* Change this color to your desired hover color */
}

/* Custom styles for odd and even rows */
.dataTable tbody tr:nth-child(odd) {
    background-color: #FEFEFE; /* very light gray for odd rows. slightly darker shades are #FCFCFC  #FAFAFA  #F9F9F9 */
}

.dataTable tbody tr:nth-child(even) {
    background-color: #F8FCFF; /* Lighter shade of AliceBlue (#F0F8FF) for even rows */
}

/* Ensure text does not wrap in table heading and table data */
th, td {
    white-space: nowrap;
}

/*--- end of dataTable customizations ---*/

/* Reduce the vertical padding between the input elements */
.form-group {
    margin-bottom: 0.5rem;
}
.form-control {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* For making the text invisible/transparent */
.zero-value {
    color: transparent;
}