/* mod bootstrap*/
:root {
 /*mod*/
 --primary: #393939;
 --secondary: #B3DAF1;
 --primary-color: #393939;
 --primary-dark: #212121;
 --primary-light: #626262;
 --secondary-color: #B3DAF1;
 --tertiary-color: #d2d2d2;
 --background-color: white;
 --text-color: #393939;

}



.sample-data-link, .nav-link {
  color:#247ba0;
}

.sample-data-link:hover, .nav-link:hover{
  color:#1c607d;
  cursor: pointer;

}

.tertiary-button, .tertiary-button i {
  display: inline-block;
  color: var(--primary-light);
  background-color: transparent; /* Ensure no conflicting background */
  border: none; /* Remove Bootstrap borders */
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.tertiary-button:hover i  {
  color: var(--primary-dark); /* Ensure text remains visible */
  background-color: transparent; /* Avoid any background issues */
  outline: none; /* Optional, but removes focus ring */
}



#cuadro-header-logo:hover {
  opacity: 60%;
}

body {
  overflow-y: scroll; /* Always show vertical scrollbar */
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

#step-body{
  margin-top: 100px;
  margin-bottom: 100px;
}


.clickable-breadcrumb-item {
  color:#247ba0;
}

.clickable-breadcrumb-item:hover {
  color:#1c607d;
  text-decoration: underline;
  cursor: pointer;
}

.btn:focus {
  color: #fff;
}

#grapesMenuButton:focus {
  color:#212121;
}

.btn-primary {
  /*mod*/
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  /*mod*/
  background-color: #fff !important;
  color:var(--primary);

}

.btn-primary.disabled, .btn-primary:disabled {
  /*mod*/
  cursor: not-allowed;
}


.btn-secondary {

  /*mod*/
  background-color: var(--background-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary)
}

.btn-secondary.disabled, .btn-secondary:disabled {
  /*mod*/
  cursor: not-allowed;

}

.btn-secondary:hover {

  background-color: var(--primary) !important;
  border-color: var(--primary-color) !important;
  color:#fff;
}

.btn-secondary:focus{
  color:var(--primary);
}

.btn-secondary:hover:focus{
  color:#fff
}

.btn-secondary:hover .fa-solid, .btn-secondary:hover .fa-regular{
  color:#fff;
}


.btn-success:hover {

  background-color: var(--bs-success-light) !important;
  color:white;
}

.btn-secondary {
  --bs-btn-color: black;
   --bs-btn-hover-color: black;
   --bs-btn-active-color: black;
  --bs-btn-disabled-color: black;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-grey {

  /*mod*/
  background-color: rgb(224, 224, 224)  ;
  border-color: rgb(224, 224, 224)  ;
  color: var(--primary);
}

.btn-grey.disabled, .btn-grey:disabled {
  /*mod*/
  cursor: not-allowed;

}

.btn-grey:hover {

  background-color: rgb(200, 200, 200)  ;
  border-color: rgb(200, 200, 200)  ;
  color: var(--primary);}

.btn-grey:focus{
  color:var(--primary);
}

.truncate-btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordion {

--bs-accordion-active-bg: var(--tertiary-color);
}

.accordion-button {
  background-color: var(--background-color);
  color: var(--primary);
}

.accordion-button:not(.collapsed) {
  color: var(--primary); /* Keeps text color consistent when expanded */
}

.accordion-button i {
  color: var(--primary); /* Icon color */
}


/* new styles */
.nav-hover:hover {
  color: blue; /* Your desired hover color */
}

.card-hover:hover {
  background: var(--tertiary-color);
}


.stepper-paragraph {
  margin-bottom: 0rem;
  font-size: large;
}


.stepper {
  padding-left: 1rem;
  padding-right: 1rem;
}

.stepper-primary{
  text-decoration:underline;
  font-weight: bold;
}

@media (max-width: 991px) {
  .stepper-paragraph {
      font-size: 0.9rem; /* Adjust the font size as needed */
  }

  .stepper {
    padding-left: 0.5rem;
    padding-right:0.5rem
  }
}

.sticky-header {
  position: sticky;
  top: 100px; /* Adjust the offset as needed */
  z-index: 1000;
  background-color: rgb(255, 255, 255);
}

.title {
  font-size: 1rem;
  font-weight: 500;
}

/* Adjusting for smaller screens */
@media (max-width: 576px) {
  .circle {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
  .title {
    font-size: 0.9rem;
  }
}


#bottom-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.12); /* Box shadow to create floating effect */
  background-color: var(--background-color);
}


#bottom-panel .btn {
  width: 100px; /* Ensure consistent button width */
}

/* General sticky styles for headers */

table {
  border-collapse: collapse; /* Ensures borders collapse into one another */
  border-spacing: 0; /* Eliminates any inherent spacing */
}

th {
  position: sticky;
  z-index: 2;
  background: white; /* Ensures content underneath doesn't show through */
  border: 1px solid #ddd; /* Match table borders for seamless appearance */
  width: 200px;
}
tr{
  border: 1px solid #ddd; /* Match table borders for seamless appearance */
}

/* Sticky top row */
th {
  top: 0; /* Sticks to the top */
  border: 1px solid #ddd; /* Match table borders for seamless appearance */
  font-weight: normal;
}

/* Sticky first column */
td:first-child, th:first-child {
  position: sticky;
  left: 0; /* Sticks to the left */
  z-index: 1; /* Lower z-index than top row but higher than regular cells */
  background: white;
}

/* Sticky top-left cell (intersection of first row and first column) */
th:first-child {
  z-index: 3; /* Highest z-index for proper layering */
}


/* Custom  styles for the review table */
.custom-table {
  border-collapse: collapse;
  width: 100%;
}

.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;

}

.custom-table th {
  text-align: left;
  background-color: var(--primary);
  color: white;
}


/* Custom styles for checkbox when checked */
.dropdown-menu .dropdown-item input[type="checkbox"]:checked {
  accent-color: var(--primary-light); /* Change this to your desired color */
}

/* Custom styles for menu item when active */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.show,
.dropdown-menu .dropdown-item:focus {  background-color: var(--primary-light); /* Change this to your desired background color */
}



.filter-badge {
  display: inline-flex;
  align-items: center;
  background-color: #e0e0e0; /* Bootstrap primary color */
  color: var(--primary); /* White text */
  border-radius: 1rem; /* Rounded corners */
  padding: 0.25rem 0.5rem; /* Padding for the badge */
  margin:0.25rem;
  font-size: 0.875rem; /* Font size for the badge text */
  position: relative; /* Position for the pseudo-element */
  width: auto; /* Width as wide as the text */
  white-space: nowrap; /* Prevent text from wrapping */
}

.filter-badge::before {
  content: '\f0b0'; /* Unicode for filter icon from FontAwesome */
  font-family: 'Font Awesome 6 Free'; /* Font family for FontAwesome */
  font-weight: 900; /* FontAwesome solid icons weight */
  margin-right: 0.25rem; /* Space between icon and text */
}


/* Responsive adjustment */
@media (max-width: 768px) {
  .preview-box {
    width: 80%; /* Wider on smaller screens */
    height: 70vh; /* Adjust height for smaller screens */
    padding: 15px; /* Reduced padding for smaller screens */
  }
}

/* Media query for mobile devices */
@media (max-width: 480px) {
  .preview-box {
    width: 90%; /* Full width for mobile */
    height: auto; /* Allow height to adjust based on content */
    padding: 10px; /* Further reduced padding for mobile */
  }
}


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
}

.overlay .close-overlay-btn {
  font-size: 36px;
  color: var(--primary-light);
  text-decoration: none;
}

.overlay .close-overlay-btn:hover,
.overlay .close-overlay-btn:focus {
  color: #f1f1f1;
  cursor: pointer;
}

/* Responsive adjustment */
@media screen and (max-height: 450px) {
  .overlay .close-overlay-btn {
      font-size: 30px;
  }
}


.data-type-settings-overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
}

.data-type-settings-overlay .close-data-type-settings-overlay-btn {
  font-size: 36px;
  color: var(--primary-light);
  text-decoration: none;
}

.data-type-settings-overlay .close-data-type-settings-overlay-btn:hover,
.data-type-settings-overlay .close-data-type-settings-overlay-btn:focus {
  color: #f1f1f1;
  cursor: pointer;
}

/* Responsive adjustment */
@media screen and (max-height: 450px) {
  .data-type-settings-overlay .close-data-type-settings-overlay-btn {
      font-size: 30px;
  }
}

#earlyAccessForm {
	background: #fff;
	clear: left;
	font: 14px Helvetica, Arial, sans-serif;
}
.form-control {
	width: 100%; /* Full width */
	padding: 10px; /* Padding for the input */
	border: 1px solid #ccc; /* Border style */
	border-radius: 4px; /* Rounded corners */
	box-shadow: none; /* Remove default shadow */
}
.form-control:focus {
	border-color: #007bff; /* Focus color */
	outline: none; /* Remove default outline */
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Custom shadow on focus */
}