@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

/* ---------------------------ROOT--------------------------------- */
:root {
  /* Typography */
  --font-family: 'DM Sans', sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 8px; /* Adjust the base spacing unit as needed */

  /* Border radius */
  --border-radius: 4px; /* Adjust border-radius as needed */

  /* Shadows */
  --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Example box shadow */
  --sharp-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Professional box shadow */
  --crispy-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 3px 0 rgba(0,0,0,.1);

  /* Light theme colors */
  --primary-color-light: #EAEAEA;
  --secondary-color-light: #FFFFFF;
  --crazy-color-light: #A2ECD2;

  /* Medium theme colors */
  --primary-color-medium: #454545;
  --secondary-color-medium: #FFFFFF;
  --crazy-color-medium: #73E3BB;

  /* Dark theme colors */
  --primary-color-dark: #303030;
  --secondary-color-dark: #F2F2F2;
  --crazy-color-dark: #26C089;

  /* for mgmt console */
  --faint-background: #F2F3F3;
  --console-headers: #f5f5f5;

  /* Rand theme colors */
  --link-font: #541fd8;
  --eranova-green: #26C089;
  --eranova-black: #303030;


}

/* handling of page and top bar contents------------------------- */



/* DEMO CURSOR CLICKING __________________________________ */

/* Apply custom cursor to all elements */
/* *, *:before, *:after {
  cursor: url('/static/core/cursors/cursor_demo_reg.png'), auto !important;
}

/* Apply custom cursor on hover to ensure it's used over clickable elements */
/* *:hover {
  cursor: url('/static/core/cursors/cursor_demo_reg.png'), auto !important;
} */

/* Change cursor on mouse down (click effect) */
/* body.click-effect, body.click-effect *:before, body.click-effect *:after, body.click-effect *:hover {
  cursor: url('/static/core/cursors/cursor_demo_clicked.png'), auto !important;
} */ */



/* regular items and elemtns----------------------- */
body {
  font-family: var(--font-family) !important;
  background-color: var(--secondary-color); /* Or use another variable as needed */
  font-size: .8rem;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  color: var(--primary-color-medium);
  margin-top: 0;
  font-weight: 400;
}

p {
  line-height: 1.6;
  color: var(--primary-color-medium);
  font-size: .7rem;
  font-weight: 400;
}

h5 {
  font-size: .9rem;
}
h3 {
  font-size: .95rem;
}
h2 {
  font-size: 1.2rem;
}

.btn {
  background-color: var(--primary-color-medium);
  color: var(--secondary-color-light);
  border-radius: var(--border-radius);
  padding: 10px 15px;
  transition: background-color 0.3s;
  border: none;
  font-size: .6rem;
}

.btn:hover {
  background-color: var(--primary-color-medium);
}

input[type="text"],
input[type="email"],
textarea,
select {
  padding: 8px;
  width: 100%;
}

.footer {
  background-color: var(--primary-color-medium);
  color: var(--secondary-color-light);
  padding: 20px;
  text-align: center;
}

*, *:before, *:after {
  box-sizing: border-box;
}

a {
  
  text-decoration: none;
}

a:focus,
a:hover {
  color: var(--primary-color-medium);
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

a span{
  color: var(--primary-color-medium);
  text-decoration: none;
}


/* BOOTSTRAP OVERIDE----------------------- */


.card {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
.card {
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.card:hover {
  /* transform: scale(1.02);  */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Add shadow for depth */
}


:focus {
  outline: 2px solid var(--accent-color-medium);
  outline-offset: 2px;
}

button:focus, 
a:focus, 
input:focus, 
select:focus, 
textarea:focus {
    outline: none; /* Removes the default outline */
    /* Add your custom styles for focus state here */
}

.btn:focus,
button:focus {
  background-color: var(--primary-color-medium);
  outline: none; /* Disables the blue outline */
  box-shadow: none; /* In case Bootstrap uses box-shadow for focus state */
  border: none;

}
button, 
.btn { /* Applies to both <button> elements and elements with .btn class */
  background-color: var(--primary-color-dark);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: var(--primary-color-medium);
  border-color: var(--primary-color-medium);
  opacity: .2;
}

.container {
  width: 100%;

  max-width: none;
}


/* TABLES-------------------------- */
#resultsTable {
  overflow-x: auto; /* Enables horizontal scrolling for overflow */
  overflow-y: auto; /* Hides vertical scrollbar */
  max-width: 100%; /* Ensures the container does not exceed the width of its parent */
  background-color: var(--secondary-color-light);
  flex: 1; /* Take up remaining space */
  position: relative;
}

#resultsTable table {
  width: 100%; /* Set table to take up 100% of its container */
  table-layout: fixed; /* Fixed layout for equal column widths */
  border-collapse: collapse; /* For table styling */
  border-spacing: 0 10px; /* Creates space between columns */
}

#resultsTable th, #resultsTable td {
  white-space: nowrap; /* Prevent text wrapping in cells */
  text-align: left; /* Align text to the left */
  padding: 8px; /* Padding for cells */
}

#resultsTable th {
  position: sticky;
  top: 0;
  background-color: var(--primary-color-dark);
  color: var(--secondary-color-light);
  border-bottom: 1px solid #ddd;
  z-index: 1; /* Ensures the header stays above other content */
  font-weight: 500;
  white-space: nowrap;
}

/* Separators between headers */
#resultTable th:not(:last-child) {
  border-right: 1px solid #fff; /* White border for separation */
}

/* Body Styling */
#resultsTable tbody {
  background-color: #fff; /* To match the white space */
  line-height: 1;
  border-top: 1px solid #efefef;
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Display ellipsis for clipped text */
  white-space: nowrap; /* Keep text in a single line */
  max-width: 0; /* Allows ellipsis to work in a table */
  text-align: center;
}

/* tooltips below------------------------------------------------- */
/* Tooltip container */
/* Dynamic Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default, shown on trigger */
  width: auto; /* Adjust width based on content, with a max-width */
  max-width: 280px; /* Prevent tooltips from becoming too wide */
  background-color: #333333cd; /* Slightly softer than pure black for a modern look */
  color: #fff;
  text-align: center;
  border-radius: 4px; /* Subtle rounded corners */
  padding: 8px 12px; /* Slightly larger padding for a roomier feel */
  position: fixed; /* Position relative to the viewport */
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for depth */
  font-size: 14px; /* Clear, readable font size */
  opacity: 0; /* Start fully transparent */
  transition: opacity 0.3s, visibility 0.3s; /* Smooth transition for opacity */
}




.cool-button {
  background-color: transparent;
  color: var(--primary-color-dark);
  padding: 5px 15px;
  border: 1px solid #cccccc9c;
  border-radius: 25px;
  margin: 10px;
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  outline: none;
  transition: box-shadow 0.4s ease, background-color 0.3s ease;
  font-size: .8rem;
}
.cool-button:focus, .cool-button:hover {
  box-shadow: 0 0 0 2px var(--crazy-color-medium);
  background-color: transparent;
}



#source-back-btn {
  font-size: 1.35rem;
  margin-right: 1rem;
  color: var(--eranova-black);
}
.head{
  display: flex;
  align-items: center;
}



/* IPHONE PORTATRAIT */
@media (max-width: 768px) {


}

/* responsive styles for landascape phones */
@media only screen 
and (min-device-width : 390px) 
and (max-device-width : 940px) 
and (orientation : landscape) {

}

/* Styles for screens larger than 1920 pixels wide (typical for large monitors) */
@media screen and (min-width: 1720px) {

}