html {
    margin: 0;
    padding: 0;
}

.selected-row {
  background-color: #e3f2fd; /* Light blue background, you can change this color */
}



html body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Fira Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

header {
  width: 100%;
}

/* STATEMENT AND CONTRACT REVIEW PAGES */
.data-container {
    height: 80vh;
    overflow: auto;
}

.contract-data-container {
    height: 80vh;

}

/* RIGHT ALIGNED SELECTS */
.date-review, .alert-primary, .contract-selector, .change-contract-id {
  font-size: .8rem;
  font-family: 'Fira Sans', sans-serif;
  border: 1px solid #e0e0e0;
  text-align: right;  
}

/* RIGHT ALIGNED SELECTS */
.advance-review-select {
  font-size: .8rem;
  font-family: 'Fira Sans', sans-serif;
  border: 1px solid #e0e0e0;
  padding-right: 5px;
  min-width: 30px;
}

/* LEFT ALIGNED SELECTS */
.advance-milestone-select {
  font-size: .8rem;
  font-family: 'Fira Sans', sans-serif;
  border: 1px solid #e0e0e0;
  text-align: left;  
}

.advance-milestone-status-select {
  font-size: .8rem;
  font-family: 'Fira Sans', sans-serif;
  border: 1px solid #e0e0e0;
  text-align: right;  
}


.contract-id-modal {
  font-family: 'Fira Sans', sans-serif;
}



.pdf-container embed {
    height: 100%;
    border-radius: 4px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}


form, form label, form button {
    font-family: 'Fira Sans', sans-serif;
} /* This does help set the font*/ 


.form-row {
  display: flex;
  justify-content: space-between; /* Bootstrap's justify-content-between class */
  margin-bottom: .4rem
}


.form-row label {
  flex: 1;
  background-color: #ffffff; 
  border-radius: 0.25rem; 
  font-size: 0.9rem;
  margin-bottom: 0 !important;
}

.form-row label:hover {
    background-color: #d8d8d8; /* Slightly darker on hover for a subtle effect */
}

.form-row input[type="text"],
.form-row input[type="number"] {
  text-align: right; /* Bootstrap's text-right class */
  background-color: #ffffff; 
  border: none;
  border-radius: 0.25rem; /* Bootstrap has .rounded class */
  font-size: 0.9rem;
  color: #2400a8;
  transition: all 0.3s ease;
  outline: none;
  cursor: pointer;  /* or cursor: text; */
}

.form-row input[type="text"][readonly],
.form-row input[type="number"][readonly] {
    color: #000000;    /* Optional: add a subtle border */
}


.contract_bonus_description {
  text-align: left; /* Typically, textareas are better left-aligned for multi-line input */
  background-color: #ffffff;
  border: 1px solid #ccc; /* Adding a subtle border for better definition */
  border-radius: 0.25rem;
  font-size: 0.9rem;
  color: #2400a8;
  transition: all 0.3s ease;
  outline: none;
  cursor: text; /* Ensure the cursor indicates text input */
  width: 100%; /* Full-width to use available space */
  height: 150px; /* Increased height to accommodate more text */
  padding: 10px; /* Adequate padding for text input */
  box-sizing: border-box; /* Include padding and border in the width and height calculations */
  resize: vertical; /* Allow only vertical resizing */
}

.form-row textarea#bonus_description:focus {
  border-color: #2400a8; /* Highlight focus with the same color as the text */
  box-shadow: 0 0 5px rgba(36, 0, 168, 0.5); /* Optional: add a subtle shadow on focus */
}

.form-row input[type="text"]:focus,
.form-row input[type="number"]:focus,
.form-row-title input[type="text"]:focus,
.form-row-title input[type="number"]:focus {
    border-color: #888888;  /* Darker border when focused */
    box-shadow: 0 0 5px #aaaaaa;  /* Subtle shadow for emphasis */
}




input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


::-webkit-scrollbar {
    width: 8px;
}

/
::-webkit-scrollbar-thumb {
    border-radius: 5px;  
    background: #888; 
}


::-webkit-scrollbar-track {
    border-radius: 5px;  /* Match with thumb for consistency */
    background: #e6e6e6; 
}

::-webkit-scrollbar:horizontal {
  height: 8px;  /* Instead of width for horizontal scrollbars */
}

::-webkit-scrollbar-thumb:horizontal {
  border-radius: 5px;
  background: #888;
}

::-webkit-scrollbar-track:horizontal {
  border-radius: 5px;
  background: #e6e6e6;
}

button, button.btn.btn-secondary, button.submit, .btn-custom-primary {
    background-color: #00032e; /* Dark blue from your header */
    color: #fcfcfc; /* Light color from your header */
    border: none;
    border-radius: 4px;
    padding: 6px 12px; /* Standard padding for buttons */
    cursor: pointer;
    font-family: 'Fira Sans', sans-serif;
    transition: background-color 0.3s ease;
    font-size: .85rem; /* Standard font-size for buttons */
    width: 100px;
    box-sizing: border-box;
}

button:hover, button.btn.btn-secondary:hover, button.submit:hover {
    background-color: #00021e; /* Slightly darker blue */
}

button:active {
    background-color: #00001e; /* Even darker shade for active (pressed) state */
}

button:disabled {
    background-color: #aaa; /* Grayed out background */
    color: #777; /* Grayed out text */
    cursor: not-allowed;
}

/*UPLOAD STATEMENTS AND CONTRACT PAGES*/

input[type="file"] {
    display: none;
} /* Hide the default input */


.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[list],
.form-group select {
  text-align: left; 
  background-color: #ffffff; 
  border: 1.5px solid #d9d9d9;
  font-size: 0.9rem;
  color: #000000;
  transition: all 0.3s ease;
  cursor: pointer;
}






.fa-cloud-arrow-up {
    margin-right: 5px;
}

.upload-zone {
    width: 100%;
    height: 200px; /* Or adjust to the desired height */
    border: 1.5px solid #d9d9d9;
    border-radius: 4px;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children along the cross axis (vertically, since flex-direction is column) */
    align-items: center; /* Center children along the main axis (horizontally) */
    color: #00032e;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #ffffff;
    font-size: .9rem;
}

.upload-zone:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.fa-cloud-arrow-up {
    font-size: 80px; /* Or any size you want */
}





#statement_submit {
  width: 100%;
  height: 50px;
  background-color: #00032e;
  border: 1.5px solid #c7c7c7;
  border-radius: 4px;
  color: #ffffff;
  font-size: 1.1rem;
}


/* CSS FOR THE REPORTING SCREEN*/
i[data-reporting="true"] {
  color:  #000000
}



/* CSS FOR THE LIST ITEMS ON THE SUMMARY SCREEN*/


.submit-button {
    margin-right: 6px;
}

.edit-button {
    margin-left: 6px;
}

.larger-logo {
  height: 80px;
}

.button-icon-container .fa-times {
    color: #aa3131;
}

.button-icon-container .fa-square-check {
    color: #00021e;
}

/* Territory Reporting */
.top-filter-card, .filter-results {
  background-color: #f5f5f5;
  border-color:  #a0a1a6;
  border-radius: 8px;
  border-style: solid;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}


.royalty-manager-review {
  font-size: .9rem;
  background-color: transparent !important;
  --bs-table-bg: transparent !important;
}

.white-top-filter-card, .filter-results {
  background-color: #ffffff;
  border-color:  #a0a1a6;
  border-radius: 8px;
  border-style: solid;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}



.white-top-filter-card-thinner-border, .filter-results {
  background-color: #ffffff;
  border-color:  #a0a1a6;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  height: 100%;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}


.form-control {
  font-size: .9rem !important;
}

/* Reporting Page*/

.form-check-input {
  border: 2px solid #dee2e6;
  outline: 2px solid #dee2e6;
  visibility: visible !important;
}


.generic-card-with-light-grey-borders {
  border-width: 1.5px;
  border-style: solid;
  border-radius: 4px;
  border-color: #e0e0e0;
}

.generic-card-with-light-grey-borders-more-rounded-edges {
  border-width: 1.5px;
  border-style: solid;
  border-radius: 8px;
  border-color: #e0e0e0;
}

.generic-card-with-light-grey-borders-and-navy-accent-on-left {
  border-width: 1.5px; 
  border-style: solid; 
  border-radius: 4px; 
  border-color: #e0e0e0; 
  border-left-color: #1b0274ff; 
  border-left-width: 4px;
}

.generic-card-with-light-grey-borders-and-navy-accent-on-right {
  border-width: 1.5px; 
  border-style: solid; 
  border-radius: 4px; 
  border-color: #e0e0e0; 
  border-right-color: #1b0274ff; 
  border-right-width: 4px;
}


.home-page-card {
  border-width: 1.5px;
  border-style: solid;
  border-radius: 4px;
  border-color: #ededed;
}

.home-page-card .home-page-list-item {
  color: #616161; /* Adjust this value to your desired font color */
}

.home-page-card p {
  color: #ababab; /* Adjust this value to your desired font size */
}

.data-card {
  background-color: #ffffff; 
  border-radius: 4px; /* Bootstrap has .rounded class but may not be the exact size */
  border: 1.5px solid #e0e0e0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem; /* Use Bootstrap's mb-* classes */
  padding: 1.25rem; /* Use Bootstrap's p-* classes */
}


.data-card2 {
  background-color: #ffffff; 
  border-radius: 4px; /* Bootstrap has .rounded class but may not be the exact size */
  border: 1.5px solid #e0e0e0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem; /* Use Bootstrap's mb-* classes */
}

.primary-label {
  font-size: .8rem;
}



.report-square {
  border: 1.5px solid #c2c2c2;
  min-height: 85px;
  border-radius: .5rem;
  font-weight: 200;
  font-size: .9rem;
}


.home-page-list {
  font-size: .9rem;
}

.home-page-list-item {
  border-bottom: none !important;
}

.data-card h4, 
.data-card2 h4 {
    margin-top: 1px; /* Override Bootstrap's top margin */
    margin-bottom: .6rem; /* Override Bootstrap's bottom margin */
    font-size: 0.9rem; /* Override Bootstrap's font size */
    font-weight: 600; /* Make sure this is what you want */
}


.loader-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;  /* Adjust based on your needs */
}

.upload-and-payee-container {
  background-color: #fafafa;
  border: 1.5px solid #c7c7c7;
  border-radius: 4px;
}

.custom-table {
  font-size: .9rem;
  border-bottom-color: #dedede;
  font-family: 'Fira Sans', sans-serif;
}

.custom-table th {
  border-bottom-color: #dedede !important;
  background-color: #fbfbfb !important;
}

.custom-table input[type="text"], .custom-table input[type="date"] {
  font-size: .9rem;
  border: none !important;
}

.custom-table input:hover {
  transition: background-color 0.3s;
  cursor: pointer;
  color: #2400a8; 
}

.border-required {
  border: 2px solid #fe9f9f !important;
}

select.form-select.reporting {
    font-size: 0.9rem;
}

.text-danger {
  color: red;
}

.red-line {
  position: absolute;
  width: 100%;
  height: 6px;
  background-color: red;
  cursor: pointer; /* Add cursor pointer to indicate clickable */
  pointer-events: auto;
}

#reserves_dollars.border-red {
  border: 1px solid red;
}

#reserves_dollars.border-orange {
  border: 1px solid orange;
}

.card-with-navy-accent {
  font-size: 0.9rem;
  border-top: 1.5px solid #e0e0e0;
  border-left: 1.5px solid #e0e0e0;
  border-bottom: 1.5px solid #e0e0e0;
  border-right: 3px solid navy; /* Adjust the thickness and color here */
  border-radius: 4px;
}

.advance-review-table {
  font-size: .9rem;
  border-bottom-color: #dedede;
  table-layout: fixed;
  width: 100%;
  min-width: 0; /* Remove any minimum width constraints */
}

/* Base styles for all cells */
.advance-review-table td, 
.advance-review-table th {
  width: 15%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  padding: 5px 8px;
}

/* Base styles for all inputs and selects */
.advance-review-table input,
.advance-review-table select,
.advance-review-table .advance-milestone-select,
.advance-review-table .advance-milestone-status-select {
  width: 100%;
  box-sizing: border-box;
  font-size: .9rem;
  border: none !important;
  min-width: 0; 
}

/* Specific styling for text/date inputs */
.advance-review-table input[type="text"],
.advance-review-table input[type="date"] {
  text-align: right;
  color: #777676;
}

.v-data-table .v-text-field input {
  font-size: 0.9rem; /* Adjust the size as needed */
}

.v-data-table .v-text-field .v-input__control .v-input__slot::before,
.v-data-table .v-text-field .v-input__control .v-input__slot::after {
  display: none; /* This will hide the underline */
}

.contract-background-div {
  background-color: #f5f5f5;
  
}

.milestone-date-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}


/* PAYMENT REVIEW CSS BELOW */

.payment-details {
  width: 100%;
  max-width: 800px; /* Adjust this value as needed */
  margin: 0 auto;
}

.payment-details table {
  width: 100%;
  border-collapse: collapse;
}

.payment-details.letterhead p {
  font-size: 0.9rem;
}

.payment-details.letterhead h3 {
    font-size: 1.3rem; /* Override Bootstrap's font size */
    font-weight: 500; /* Make sure this is what you want */
}

.payment-details th,
.payment-details td {
  padding: 3px;
  text-align: left;
}

.payment-details th {
  font-weight: normal;
  background-color: rgba(0, 3, 46, 0.015);
}

.payment-details .total {
  font-weight: normal;
}

.payment-details button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.payment-details button:hover {
  background-color: #45a049;
}

.v-text-field--is-booted:focus-within,
.v-input--is-focused {
  border-bottom: 2px solid #1e50d2 !important;
}

.v-data-footer__icons-after,
.v-data-footer__icons-before {
  display: none;
}




.css-v-select .vs__dropdown-toggle .vs__search::placeholder,
.css-v-select .vs__dropdown-toggle .vs__placeholder {
  font-size: 0.85rem !important;

}

.css-v-select .vs__dropdown-menu {
  background: var(--vs-dropdown-bg) !important;
  color: var(--vs-dropdown-color) !important;
  display: block !important;
  left: 0 !important;
  max-height: var(--vs-dropdown-max-height) !important;
  min-width: var(--vs-dropdown-min-width) !important;
  position: absolute !important;
  top: calc(100% - 1px) !important;
  width: 100% !important;
  z-index: var(--vs-dropdown-z-index) !important;
  box-shadow: var(--vs-dropdown-box-shadow) !important;
}

.css-v-select .vs__dropdown-option {
  padding: var(--vs-dropdown-option-padding) !important;
  color: var(--vs-dropdown-color) !important;
}

.css-v-select .vs__dropdown-option--highlight {
  background: var(--vs-dropdown-option--active-bg) !important;
  color: var(--vs-dropdown-option--active-color) !important;
}

/* Ensure dropdown container has proper positioning context */
.css-v-select {
  position: relative !important;
}

.css-v-select .vs__selected-options {
  white-space: nowrap;       
  flex-wrap: nowrap !important;
}

/* Fix for any potential overflow issues */
.advance-review-table td {
  overflow: visible !important;
}

.reporting-icon img {
  max-height: 50px; /* or whatever height works best for your design */
  width: auto;
}



/* ---STATEMENTS RECEIVED SCREEN --- */

/* Sticky header cells - Add col3 */
.custom-sticky-table .v-data-table__wrapper > table > thead > tr > th.sticky-header-col1 {
  position: sticky !important;
  left: 0;
  z-index: 4;
  background-color: #f5f5f5;
}

.custom-sticky-table .v-data-table__wrapper > table > thead > tr > th.sticky-header-col2 {
  position: sticky !important;
  left: 200px;
  z-index: 4;
  background-color: #f5f5f5;
}

.custom-sticky-table .v-data-table__wrapper > table > thead > tr > th.sticky-header-col3 {
  position: sticky !important;
  left: 450px;  /* 200px + 250px (width of first two columns) */
  z-index: 4;
  background-color: #f5f5f5;
}

/* Sticky body cells - Add col3 */
.custom-sticky-table .v-data-table__wrapper > table > tbody > tr > td.sticky-col-1 {
  position: sticky !important;
  left: 0;
  z-index: 2;
  background-color: white;
}

.custom-sticky-table .v-data-table__wrapper > table > tbody > tr > td.sticky-col-2 {
  position: sticky !important;
  left: 200px;
  z-index: 2;
  background-color: white;
}

.custom-sticky-table .v-data-table__wrapper > table > tbody > tr > td.sticky-col-3 {
  position: sticky !important;
  left: 450px;  /* 200px + 250px (width of first two columns) */
  z-index: 2;
  background-color: white;
}

/* Handle row hover states - Add col3 */
.custom-sticky-table .v-data-table__wrapper > table > tbody > tr:hover > td.sticky-col-1,
.custom-sticky-table .v-data-table__wrapper > table > tbody > tr:hover > td.sticky-col-2,
.custom-sticky-table .v-data-table__wrapper > table > tbody > tr:hover > td.sticky-col-3 {
  background-color: #eeeeee;
}



.file-available {
  font-size: 0.9rem;
  margin: 0;
  color: rgb(136, 110, 252);
  cursor: pointer;
  text-decoration: underline;
  display: flex;
  align-items: center;
}

.file-unavailable {
  font-size: 0.9rem;
  margin: 0;
  color: rgb(192, 192, 192);
  cursor: default;
  display: flex;
  align-items: center;
}


.v-data-table .right-align-input input {
  text-align: right !important;
}

.v-data-table .right-align-input {
  text-align: right;
}

.v-data-table .light-text-color input {
  color: #a0a0a0; /* A good, readable light grey. Feel free to change this! */
}

.lighter-column input {
  color: #797878 !important; /* A nice, subtle light gray */
}

.lighter-column .v-text-field__suffix {
  color: #797878 !important; /* Use the same color as your input for consistency */
}

.blue-input-text {
  color: #0d6efd !important; /* A standard Bootstrap blue, or any blue you prefer */
  padding: .2rem;
  padding-right: .5rem;
  border-width: 1px; 
  border-style: solid; 
  border-radius: 4px; 
  border-color: #f3f2f2;
}

.blue-input-text-darker-borders {
  color: #0d6efd !important; /* A standard Bootstrap blue, or any blue you prefer */
  padding: .2rem;
  padding-right: .5rem;
  border-width: 1px; 
  border-style: solid; 
  border-radius: 4px; 
  border-color: #dbdbdb;
}


.not-changeable-text {
  color: #6c757d !important; 
  padding: .2rem;
  padding-right: .5rem;
  border-width: 1px; 
  border-style: solid; 
  border-radius: 4px; 
  border-color: #ffffff;
  text-align: right;
}


/* 1. Target the first table cell (TD) in every row */
/* 1. Target the first table cell (TD) in every row */
.calculation-table tbody tr td:first-child {
  background-color: #f7f7f7; /* Apply the grey background directly to the cell */
  width: 120px;
  vertical-align: middle !important;
  padding: 0 !important; /* Remove padding to let the inner div fill it */
}

/* 2. The Inner Div for content alignment */
.explanation-column-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #868686;
}

/* 3. Add a gap by padding the second column (the "label" column) */
.label-column {
  padding-left: 1rem !important; /* Creates the space between the grey column and the labels */
}

/* --- 4. APPLY ROUNDED CORNERS - CORRECTED --- */
/*  - Target the first cell of the first row and round BOTH top corners */
.calculation-table tbody tr:first-child td:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px; /* This was missing */
}

/*  - Target the first cell of the last row and round BOTH bottom corners */
.calculation-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px; /* This was missing */
}

/* FAQ page starts */

.faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.faq-question {
  background-color: #f8f9fa;
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

.faq-question:hover {
  background-color: #e9ecef;
}

.faq-question.active {
  background-color: #007bff;
  color: white;
}

.faq-question h6 {
  font-weight: 600;
}

.faq-question i {
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-answer {
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  color: #495057;
  line-height: 1.6;
}

.faq-answer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.faq-answer a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.faq-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  display: block;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.faq-header h2 {
  color: #333;
}

/* FAQ page ends */