* {
    box-sizing: border-box;
}

:root {
    --primary-background-color: #ffffff;
    --primary-text: #333333;
    --menu-background: #eae6e6;
    --menu-font-color: #777;
    --menu-link-hover-background-color: var(--primary-background-color);
    --menu-link-hover-text-color: var(--primary-text);
    --header-background-color: #2d3e50;
    --black-rgb: 0, 0, 0;
    --header-font-color: grey;
    --header-link-hover-color: green;
    --first-col-width: 150px;
    --button-border-background-color:white;
    --button-border-color: grey;  /* #007bff; */
    --button-border-font-color: black;
}

html, body, h1, h2, h3, h4, h5 {
    font-family: "Raleway", sans-serif
}

html,body {
    margin: 0px;
    height: 100%;
}

body {
    line-height: 1.7;
    color: #7f8c8d;
    font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #34495e;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px; /* adjust to match your current header height */
  background: var(--header-background-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1em;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.1);
}

#header .logo {
  color: var(--primary-text);
  text-decoration: none;
  font-weight: bold;
}

#header .header-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5em;
  align-items: center;
}

#header .header-menu li {
  color: var(--header-font-color);
}

#header .header-menu a {
  color: var(--header-font-color);
  text-decoration: none;
}

#header .header-menu li:hover {
  color: var(--header-link-hover-color);
}
/* generic styles */

.hidden {
    display: none;
}

[x-cloak] {
    display: none !important;
}

.greenicon {
    color: green;
}

.normal {
    font-weight: unset;
}

.verticalspacer {
    height: 80px;
}

/* modal window CSS */
.modalWindowBackground {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100vh;
    /* bottom: 0; left: 0;  */
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--black-rgb), 0.7);
    justify-content: center;
    align-items: center;
    z-index: 999; /* Set a high z-index to make sure it appears above other elements */
}

.popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(var(--black-rgb), 0.3);
    z-index: 1000; /* Set a higher z-index than the overlay to ensure it appears above */
    max-width: 1000px;
    position:relative;
}


 .btn {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid var(--button-border-color);
    border-radius: 4px;
    color: var(--button-border-font-color);
    cursor: pointer;
    background: transparent;
    text-align: center !important;
}

/* .uploadsubmitbutton is used on button for querySelector, so no actual css */

.btn:hover {
    background-color: var(--button-border-color);
    color: var(--button-border-background-color);
}

/* 
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}
*/


/* display on X on top right of popup overlay window */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background-color:grey;
}

.modalWindow {
    position: relative;
    padding: 20px;
    margin: 50px 20vh;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    /* overflow:scroll;  */
    z-index: 11;
    box-shadow: 3px 3px 5px #535353;
    border-radius: 6px 6px 6px 6px;
    border: solid 2px steelblue
}

/* tablegenerator CSS */
.tableheadercell div {
    display: flex;
    justify-content: space-between;
}

.notification {
    color: red;
    font-size: 130%;
}

/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

/* Custom checkbox styles */
input[type="checkbox"] {
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */
    appearance: none;
    width: 16px; /* Adjust the size as needed */
    height: 16px; /* Adjust the size as needed */
    border: 2px solid #333; /* Border color */
    border-radius: 4px; /* Rounded corners */
    display: inline-block;
    vertical-align: middle;
    position: relative;
 }
 
 input[type="checkbox"]:checked {
    background-color: #f69b09; /* Background color when checked */
    border-color: #f69b09; /* Border color when checked */
 }
 
 /* Check mark styles */
 input[type="checkbox"]::before {
    content: '\2713'; /* Unicode check mark character */
    font-size: 12px; /* Adjust the size as needed */
    color: #fff; /* Check mark color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Initially hidden */
 }
 
 input[type="checkbox"]:checked::before {
    opacity: 1; /* Show the check mark when checked */
 }
 
/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.footer {
    background: #111;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footer a {
    color: grey;
}

/* generics */

.toolname {
    /* for span */
    color:orange; 
    font-weight: bold;
    text-transform:none;
}

.stressimportance {
    /* for span */
    color:rgb(90, 226, 160); 
    text-transform:none; 
    font-style:italic; 
    font-size:110%;
}

.bolditalic {
    font-style:italic; 
    font-weight: bold;
}

.confirmBoxGreen {
    font-style:italic;
    border: 2px solid green;
    padding:10px;
    margin:10px;
}

.fake-link {
    color: blue; /* Set the text color */
    text-decoration: underline; /* Underline the text to mimic a link */
    cursor: pointer; /* Change cursor to pointer on hover to indicate interactivity */
}

/* Change color on hover to mimic link behavior */
.fake-link:hover {
    color: darkblue;
}

.box {
    padding: 10px 10px;
    max-width: 75%;
    margin-bottom: 20px;   
    overflow-x: auto; 
}

.box > table {
    width: 100%;
    /* table-layout: fixed; */
}

.alertbox {
    border: red 2px solid;
}

.attentionbox {
    border: orange 2px solid;
}

.generalbox {
    border: grey 1px solid;
}

.confirmbox {
    border: green 2px solid;
    font-size: 90%;
    padding:0px 5px;
}

.uncommittedbox {
    border: grey 2px dashed;
}

.backgroundbox {
    border: lightgray 2px solid;
    font: size 90%;

}

.box h3 {
    margin: 5px 0px;
}

.filename-link {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;    
display: inline-block;  /* Use inline-block to keep it on the same line as the label */
vertical-align: top;  /*Ensure the element behaves like a block for width control */
}

.manifestations-row {
    display: flex; 
    gap: 5px;
}

.manifestation-child {
    width: 250px; 
    flex: 0 1 250px;
    border: 1px solid grey;
    box-sizing: border-box; 
    margin: 5px;
    padding: 0px 10px; 
    transition: flex 0.3s ease;
    
}

.manifestation-child.selected {
    flex: 1 1 auto; /* Expand the selected div */
}

.manifestation-child.shrink {
    flex: 0 1 100px; /* Shrink the non-selected divs */
}

.manifestation-child > p:first-child:hover {
    background-color: var(--primary-text);
    color: var(--primary-background-color);
}

.h3-slim {
    font-size:120%;
    font-weight: bold;
    margin:10px 0px 0px 0px;
}

.h4-slim {
    font-size:110%;
    font-weight: bold;
    margin:10px 0px 0px 0px;
}

.first-p {
    margin-top: 5px;
}

.last-p {
    margin-bottom: 5px;
}

.first-p.last-p {
    display: grid;
    grid-template-columns: var(--first-col-width) 1fr; /* 120px for labels, rest for content */
    gap: 10px;
}

.first-p.last-p b {
    text-align: left;
}

.button-container {
    display: inline-flex;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
    
.button-container button {
    width:150px;
    max-width: 200px; /* Set maximum width */
    margin: 0 10px; /* Set 20px space between each button */
    padding: 8px 8px; /* Adjust vertical padding as needed */
    border: 1px solid #999;
    border-radius: 3px;
    background-color: #e0e0e0;
    color: #333;
    cursor: pointer;
    white-space: nowrap; /* Prevent button text from wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflow text */
}
    
.button-container button:hover {
    background-color: #d0d0d0;
}

/* tablegenerator */
.pure-table td {
        padding: 4px 8px !important; /* Reduce default padding */
        line-height: 1.2 !important; /* Tighten line spacing */
}

.pure-table th {
        padding: 6px 8px !important;
        line-height: 1.2 !important;
}

.compact-table td {
        padding: 2px 6px !important;
        font-size: 90% !important;
        line-height: 1.1 !important;
}

.compact-table th {
        padding: 4px 6px !important;
        font-size: 85% !important;
}

.custom-restricted-width {
    display: inline-block;
}

#cookie-warning {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    z-index: 1000;
}

#accept-cookies {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}