/* Add here all your CSS customizations */
.container-fluid {
    background-color: #fff;
    border-radius: 5px;
}

a.nav-link.top-nav-active {
    color: #0077b3 !important;
}

li.nav-seperator {
    padding: 10px 0px 10px 25px;
    color: #73a0b6 !important;
    font-weight: 50;
}

.default-background {
    background-color: #eeeeee;
}

.search-form-panel {
    background-color: #eeeeee;
    padding: 10px 10px 20px 15px;
    border-radius: 5px;
}

form label {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 1em;
}

form label .label-sm {
    font-weight: bold;
    font-size: 1.2em;
}


/* pagination override */
.pagination>li>a, .pagination>li>span, .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    font-weight: bolder;
    padding: 8px;
}

.pagination>.active>a, body.dark .pagination>.active>a {
    background-color: #990000;
    border-color: #770000;
    color: #fff;
    padding: 8px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus, .pagination .page-item.active .page-link {
    background-color: #990000 !important;
    border-color: #770000;
    padding: 8px;
}

.paginator p {
    font-weight: 800;

    padding-left: 20px;
}

.strong {
    font-weight: bold !important;
}

textarea.small-textarea {
    height: 65px;
}

.message {
    background-color: rgb(242, 242, 242);
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    font-weight: bold;
}

.message.error {
    background-color: #ffd0d0;
}

.message.success {
    background-color: rgb(207, 247, 224);
}

.message.info {
    background-color: rgb(255, 240, 164);
}

.label-success {
    color: #07c51d;
    font-weight: 600;
}

.tab-nav-active-tab {
    background-color: #0088CC !important;
    color: #fff;
    border-radius: 10px 10px 0px 0px;
}

.right, .text-right, .text-align-right {
    text-align: right;
}

.mr-5 {
    margin-right: 50px
}

.mr-4 {
    margin-right: 40px
}

.mr-3 {
    margin-right: 30px
}

.mr-2 {
    margin-right: 20px
}

.mr-1 {
    margin-right: 10px
}

.ml-5 {
    margin-left: 50px
}

.ml-4 {
    margin-left: 40px
}

.ml-3 {
    margin-left: 30px
}

.ml-2 {
    margin-left: 20px
}

.ml-1 {
    margin-left: 10px
}

.pr-5 {
    padding-right: 50px
}

.pr-4 {
    padding-right: 40px
}

.pr-3 {
    padding-right: 30px
}

.pr-2 {
    padding-right: 20px
}

.pr-1 {
    padding-right: 10px
}

.pl-5 {
    padding-left: 50px
}

.pl-4 {
    padding-left: 40px
}

.pl-3 {
    padding-left: 30px
}

.pl-2 {
    padding-left: 20px
}

.pl-1 {
    padding-left: 10px
}

.display-none {
    display: none
}

h2.admin-grant-app-section {
    font-weight: bold;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.form-check-input {
    margin-top: 15px;
}

.side-nav.dropdown-menu {
    margin-left: 10px !important;
}


.btn-group {
    float: right;
    margin-bottom: 20px;
}

.content-body {

    padding: 20px;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.required {
    display: inline;
}

h4 {
    font-weight: bold;
    margin: 3px 0px;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
    padding-top: 20px;
    ;
}

/* remove spinners from integer fields */
input[type='number'] {
    -moz-appearance: textfield;
    text-align: right;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


.call-to-action.call-to-action-top {
    margin-right: 0 !important;
    margin-left: -10px;
}


/* SEARCH DROPDOWN BUTTON */

.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

#myInput {
    box-sizing: border-box;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#myInput:focus {
    outline: 3px solid #ddd;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

/* END COMBOBOX */

/* THEME OVERRIDES */
div.row-compact {
    --bs-gutter-x: .1rem !important;
}

.form-control {
    padding: .25rem .25rem !important;
}

.login-form-field-icon {
    font-size: 2.1em;
    color: #8f8f8f;
}

/* left menu highlight section */
.nav-link .nav-active .nav-expanded {
    background-color: #0088CC !important;
    color: #fff !important;
}



.clickable-row {
    cursor: pointer;
}

tr.clickable-row:hover {
    background: linear-gradient(to top, #ececec, #f0f0f0, #d3d3d3);
    background-attachment: fixed;
    font-weight: bolder;
    border: solid 1px #ccc;
}

.table-50 {
    width: 50%
}

.table-60 {
    width: 60%
}

.table-70 {
    width: 70%
}

.table-80 {
    width: 80%
}

.table-90 {
    width: 90%
}

.table-100 {
    width: 100%
}

.table-cell-padding-5 td th {
    padding: 10px
}

.table-cell-padding-10 td th {
    padding: 10px
}

.table-cell-padding-15 td th {
    padding: 15px
}


.font-weight-lighter {
    font-weight: lighter;
}

/* table scrollable */
.scrollable-table {
    width: 100%;
    /* Full width of the container */
    overflow-x: auto;
    /* Enables horizontal scrolling */
    overflow-y: hidden;
    /* Hides vertical scrollbar */
    border: 1px solid #ddd;
    /* Optional: adds a border around the div */
    margin-bottom: 20px;
    /* Adds some space below the div */
}

.scrollable-table table {
    width: auto;
    /* Allows the table to expand horizontally as needed */
    border-collapse: collapse;
    /* For styling: collapses border */
}

.scrollable-table td, .scrollable-table th {
    border: 1px solid #ddd;
    /* For styling: adds border to cells */
    padding: 8px;
    /* For styling: adds padding inside cells */
    white-space: nowrap;
    /* Prevents text wrapping in cells */
}


/* Small table */
.table-sm td,
.table-sm th {
    padding: 4px 8px;
    /* Smaller padding */
    font-size: 0.85em;
    /* Slightly smaller font size */
}

/* end table scrollable */

/* Extra small table */
.table-xs td,
.table-xs th {
    margin: 1px 1px 1px 1px !important;
    padding: 1px 1px 1px 1px !important;
    /* Even smaller padding */
    font-size: 0.75em !important;
    /* Even smaller font size */
}



.font-size-8 {
    font-size: 8px !important;
}

.font-size-10 {
    font-size: 10px !important;
}

.font-size-12 {
    font-size: 12px !important;
}

.font-size-xs {
    font-size: 0.75em !important;
}

.font-size-sm {
    font-size: 0.85em !important;
}

.font-size-md {
    font-size: 1em !important;
}

.font-size-lg {
    font-size: 1.15em !important;
}

.font-size-xl {
    font-size: 1.25em !important;
}

.font-size-xxl {
    font-size: 1.45em !important;
}

.modal-80w {
    max-width: 80% !important;
    max-height: 80% !important;
}

.modal-90w {
    max-width: 90% !important;
    max-height: 90% !important;
}

.modal-95w {
    max-width: 95% !important;
    max-height: 95% !important;
}

.modal-100w {
    max-width: 100% !important;
    max-height: 100% !important;
}

.modal-open-noscroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

.modal-title {
    font-weight: bold;
    font-size: 1.75em;
}

.form-check-input.inline {
    display: inline-block;
    align-items: center;
}

.form-group.inline {
    display: flex;
    align-items: center;
}

.form-group.inline label {
    margin-right: 10px;
}

th.align-top, td.align-top {
    vertical-align: top;
}


.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    /* Set to whatever height you want */
    --relative-font-size: calc(0.22 * 100px);
    /* 50% of the container's height */
    font-size: var(--relative-font-size);
    padding-top: calc(0.11 * 100px);
}

.fas.fa-bars {
    font-size: var(--relative-font-size);
}

.parent-container {
    position: relative;
    /* Establish a point of reference for children */
    height: 40%;
    /* 100% of parent's height */
    margin-bottom: 30px;
}


.table-container {
    max-height: 100%;
    max-width: 100%;
    /* 70% of the viewport height */
    overflow: auto;
    /* Scrollable in both directions */
}

.table-sm th, .table-sm td {
    padding: 0.3rem;
}

.table-xs th, .table-xs td {
    padding: 0.5rem;
    font-size: 0.9em;
}

.table-xxs th, .table-xxs td {
    padding: 0.1rem;
    font-size: 0.7em;
}

.greyed-out {
    background-color: red !important;
    color: red !important;
    font-size: 0.3em;
}

.accordion-button .collapsed {
    background-color: #fff !important;
    color: #000 !important;
}

.accordion-button:not(.collapsed) {
    background-color: #fff !important;
    color: #000 !important;
}

#sidebar-left {
    display: none;
}

.page-header {
    display: none;
}

.focused-dropdown {
    border: 2px solid blue;
    background-color: #dee9f3;
    font-weight: bold;
}

.highlight-import-col {
    color: #000 !important;
    background-color: #fefcc1 !important;
    font-weight: bold;
    /* italic */
    font-style: italic;
}

.highlight-import-col-2 {
    color: #000 !important;
    background-color: hsl(64, 70%, 38%);
    font-weight: bold;
    /* italic */
    font-style: italic;
    /* Change as needed */
}

.highlight-import-col {
    background-color: #96872f;
    /* Light blue background for highlighted column */
    /* Other styles if necessary */
}



.border-bottom-1 {
    border-bottom: 1px solid #000;
}

.imported-col-orig-data {
    color: #000 !important;
    background-color: #cfcfcf !important;
    font-weight: bold;
    /* italic */
    font-style: italic;
    /* Change as needed */
}

.imported-col-new-data {
    color: #000 !important;
    background-color: #f1f1f1 !important;
    font-weight: bold;
    /* italic */
    font-style: italic;
    /* Change as needed */
}

.label-toggle-all {
    font-size: 1em !important;
    font-weight: normal !important;
    cursor: pointer;
    font-style: italic;
}


.fa-minus-circle {
    color: red !important;
}

.fa-check-circle {
    color: green !important;
}

/* Main pagination container */
.pagination {
    list-style-type: none;
    /* Removes default list styling */
    padding: 0;
    /* Removes default padding */
    margin: 0;
    /* Adjusts margin as needed */
    display: flex;
    /* Aligns the pagination items in a row */
    flex-wrap: wrap;
    /* Allows wrapping for smaller screens */
    justify-content: center;
    /* Centers the pagination */
}

/* Targets all list items in the pagination, including nested lists */
.pagination li,
.pagination ul li {
    list-style-type: none;
    /* Removes list item bullets/dots */
    margin: 0 5px;
    /* Adds space between pagination items */
}

/* Style for links to make them look like buttons */
.pagination a {
    text-decoration: none;
    /* Removes underline from links */
    color: #007bff;
    /* Sets the link color */
    background-color: #f8f9fa;
    /* Light background for the button */
    border: 1px solid #ddd;
    /* Border for the button */
    padding: 5px 10px;
    /* Padding inside the button */
    border-radius: 5px;
    /* Rounded corners for the button */
    font-size: 0.9em;
    /* Adjust font size as needed */
    transition: background-color 0.3s, color 0.3s;
    /* Smooth transition for hover effect */
}

/* Hover state for links/buttons */
.pagination a:hover {
    background-color: #e2e6ea;
    /* Slightly darker background on hover */
    color: #0056b3;
    /* Darker color on hover */
    border-color: #ccc;
    /* Darker border on hover */
}

/* Current page indicator */
.pagination .active a {
    font-weight: bold;
    /* Makes the current page number bold */
    background-color: #007bff;
    /* Background color for active button */
    color: #fff;
    /* Text color for active button */
    border-color: #007bff;
    /* Border color for active button */
}


/* import progress bar */
.import-progress {
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
}

.import-progress h4 {
    margin-bottom: 10px;
}

.import-progress .progress {
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.import-progress .progress-bar {
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 20px;
    transition: width 0.6s ease;
}

.import-progress .progress-list {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    padding: 0;
    margin-top: 15px;
}

.import-progress .progress-list li {
    color: #555;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.import-progress .progress-list li.completed::before {
    content: '\2714';
    /* Unicode for check mark */
    color: #4caf50;
    margin-right: 8px;
}

.import-progress .progress-list li.pending::before {
    content: '\2717';
    /* Unicode for cross mark */
    color: #ff9800;
    margin-right: 8px;
}

.import-progress .progress-list li.highlighted {
    font-weight: bold;
}

.progress-step-link {
    color: inherit;
    /* or any specific color */
    text-decoration: none;
    /* if you prefer no underlines */
    /* Additional styling as needed */
}


/* end import progress bar */

/* view import icons */
.icon-link {
    padding: 5px;
    color: #007bff;
    /* Adjust the color as needed */
    text-decoration: none;
}

.icon-link:hover {
    color: #0056b3;
    /* Darker color on hover */
}

.icon-text {
    margin-right: 10px;
    /* Space between text and icon link */
}

.error-message {
    color: red;
    font-weight: bold;
}

.error-message-small {
    color: red;
    font-weight: bold;
    font-size: 0.8em;
}


/* custom xs form control */
.form-control-plaintext.form-control-xs {
    padding-right: 0;
    padding-left: 0;
}

.form-control-xs {
    min-height: calc(1.2em + 0.35rem + 1px) !important;
    padding: 0.15rem 0.35rem !important;
    font-size: 0.65rem !important;
    border-radius: 0.1rem !important;
}

.form-control-xs {
    min-height: calc(1.2em + 0.35rem + 1px) !important;
    padding: 0.15rem 0.35rem !important;
    font-size: 0.65rem !important;
    border-radius: 0.1rem !important;
}

.form-control-xs::-webkit-file-upload-button,
.form-control-xs::file-selector-button {
    padding: 0.15rem 0.35rem;
    margin: -0.25rem -0.5rem;
    -webkit-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
}

/* end custom xs form control */