/* Generelle stiler */
body {
 font-family: 'Roboto', sans-serif;
  background-color: rgb(186, 208, 229);
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #212529;
}

/* Stiler for navigasjonsmenyen */
nav {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px;
  overflow: auto;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

nav li {
  border-bottom: 1px solid #e7e7e7;
}

nav li:last-child {
  border-bottom: none;
}

nav a {
  display: block;
  padding: 30px 65px;
  color: #007bff; /* Blå farge for lenker for en subtil pop av farge */
  text-decoration: none;
  transition: background-color 0.3s ease;
}

nav a:hover,
nav a:focus {
  background-color: #dbdbdb;
}

/* Responsivitet for større skjermer */
@media (min-width: 768px) {
  nav ul {
    flex-direction: row; /* Arrange items horizontally */
  }

  nav a {
    padding: 30px 65px; /* Larger padding for wider screens */
  }
}

.container {
  width: 80%;
  max-width: 1100px; /* Or any maximum size you prefer */
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.container h1 {
  color: #007bff; /* Blå farge for overskriften */
  background-color: #fff;
  text-align: left;
  padding-left: 20px;
  margin-top: 0;
  font-size: 30px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

/* Stiler for formen */
form {
  background-color: #ffffff;
  max-width: 500px;
  width: 90%;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.form-group label {
  color: #333; /* Endre tekstfargen */
  font-size: 18px; /* Endre skriftstørrelsen */
  font-weight: bold; /* Gjør teksten fet */
  margin-bottom: 5px; /* Legg til litt plass under label */
  margin-top: 25px; /* Legg til litt plass under label */
  display: block; /* Sørger for at label tar opp hele bredden */
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ced4da; /* Grå farge for input border */
  border-radius: 4px;
  background-color: #e9ecef; /* Lys grå bakgrunn for input-felt */
}

/* Style for buttons only */
button,
input[type="submit"],
input[type="button"] {
  background-color: #007bff; /* Blue background */
  color: #ffffff;
  padding: 14px 13.2px; /* Increased padding for larger button size */
  font-size: 0.9em; /* Larger font size for button text */
  border: none;
  border-radius: 5px; /* Adjusted border radius for aesthetics */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #0056b3; /* Darker blue for hover effect */
}

/* Style for text input fields */
input[type="text"],
input[type="date"] {
  font-size: 1em;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  cursor: text; /* Cursor as text indicator for text fields */
}

/* Specific style for date input field */
input[type="date"] {
  background-color: #e9ecef; /* Grey background */
  cursor: pointer; /* Cursor as pointer for date picker */
  padding: 10px 15px;
  font-size: 1em;
}

/* Lenker i menyen */
p a {
  background-color: #ffffff; /* Hvit bakgrunn for lenker */
  color: #007bff; /* Blå tekstfarge som matcher overskriften */
  transition: background-color 0.3s ease;
}

p a:hover {
  background-color: #e7e7e7; /* Grå bakgrunnsfarge ved hover */
}

.layout-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-container {
  display: flex;
  /* align-items: flex-start; /* Dette vil linje dem opp på toppen */
  justify-content: space-between; /* Dette gir plass mellom skjemaet og output-boksene */
  /* padding: 20px;*/
}

.form-container {
  flex: 1; /* Tilpass størrelsen etter behov */
  /* margin-right: 20px; /* Legg til en margin mellom form og output container */
  width: 48%; /* Juster dette etter behov for å passe innholdet ditt */
  float: left;
}

.output-container {
  flex: 1; /* Tilpass størrelsen etter behov */
  max-width: 520px; /* Eller en annen verdi som fungerer for designet ditt */
  width: 48%; /* Juster dette etter behov for å passe innholdet ditt */
  /* margin-top: 10px;  Juster denne verdien for å justere vertikal plassering */
}

.output-display {
  /*margin-bottom: 10px;*/
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  min-height: 20px;
}

.json-output {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  overflow: auto;
  height: fit-content;
  white-space: pre-wrap; /* For å sikre at formatert JSON vises korrekt */
}

.validation-message {
  padding: 10px;
  /*margin-top: 10px;*/
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
}

.validation-success {
  background-color: #28a745; /* Grønn bakgrunn */
}

.validation-error {
  background-color: #dc3545; /* Rød bakgrunn */
}

#add-patient-form {
  margin-right: 20px; /* Add space between the form and the JSON box */
}

.json-box,
.info-box {
  border: 1px solid #ccc; /* Creates a border around the boxes */
  padding: 10px; /* Adds space inside the boxes */
  margin-left: 20px; /* Adds space between the form and the boxes */
  flex: 1; /* Allows the boxes to grow */
  overflow: auto; /* Adds scroll if content is too big */
  margin-bottom: 10px; /* Adds space below the JSON box */
}

.json-box {
  min-height: 400px; /* Minimum height of the JSON box */
}

.info-box {
  height: 30px; /* Height of the info box */
  /* You can adjust the height as needed */
}

.right-container {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  width: 50%; /* Adjust the width as needed */
  float: left;
}

.content-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

#dental-chart-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* Fjern max-width hvis du ikke trenger å begrense bredden på dental-chart-container */
}

/* CSS stil */
.tooth-details-container {
  display: flex;
  flex-direction: column;
}

#tooth-conditions {
  flex-grow: 1; /* Gjør at denne delen tar all tilgjengelig plass */
  margin-left: 30px; /* Juster som nødvendig */
  width: auto; /* Tillater at bredden ekspanderer opp til størrelsen tillatt av flex-grow */
  /* Fjern width: 250px; om du hadde den, bruk width: auto; eller ikke sett en bredde */
  min-width: 400px;
}

#tooth-procedures {
  flex-grow: 1; /* Gjør at denne delen tar all tilgjengelig plass */
  margin-left: 30px; /* Juster som nødvendig */
  width: auto; /* Tillater at bredden ekspanderer opp til størrelsen tillatt av flex-grow */
  /* Fjern width: 250px; om du hadde den, bruk width: auto; eller ikke sett en bredde */
  min-width: 400px;
}

#tooth-details {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px; /* Juster denne verdien basert på din faktiske layout */
  background-color: #f9f9f9;
  box-sizing: border-box;
  /* max-width: 70%; kan også fjernes om du ønsker at den skal fylle hele bredden under knappen */
}

.patient-result {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.patient-result p {
  margin: 5px 0;
}

.patient-result strong {
  color: #333;
}

.compact-checkbox-group {
  font-size: 12px; /* Reduserer skriftstørrelsen */
  margin-bottom: 5px; /* Reduserer avstand mellom gruppene */
}
.compact-checkbox-group label,
.compact-checkbox-group input {
  margin: 0; /* Fjerner marg */
  padding: 2px; /* Minimal padding for elementene */
  vertical-align: middle; /* Sentrerer tekst og boks vertikalt */
}

/* Add your CSS styles here */
.selected-tooth {
  stroke: blue; /* Eller hvilken som helst stil du vil bruke for å vise at en tann er valgt */
  stroke-width: 5; /* Gjør streken tykkere for å markere valgt tann */
}

#dental-chart1 {
  display: flex; /* This will lay out children (SVGs) in a row */
  flex-grow: 0;
}

#dental-chart2 {
  display: flex; /* This will lay out children (SVGs) in a row */
  flex-grow: 0;
}
svg {
  margin-right: 1px; /* Adjust the space between SVGs */
  cursor: pointer; /* Change cursor to indicate clickable items */
}
path {
  transition: fill 0.2s; /* Smooth transition for color change */
}

#dmft-container {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

#dmft-container h2 {
  margin-top: 0;
  color: #333;
}

#dmftDisplay {
  font-size: 1.2em;
}

#dmftTotalDisplay {
  font-size: 1.2em;
}

.condition-detail,
.procedure-detail {
  /*  width: auto; */
  max-width: 450px; /* Eksempel på maksbredde */
  word-wrap: break-word; /* Gjør det mulig å bryte lange ord og forhindre at de går utenfor beholderen */
  overflow-wrap: break-word; /* Sikrer at tekst brytes korrekt ved å bryte ord ved linjeskift */
  margin: 0 auto; /* Sentrerer elementet */
  overflow-x: auto;
  /*    padding: 1em; /* Eller prosent, avhengig av foretrukket skala */
  /*    margin: 1em auto;*/
}

button {
  margin-bottom: 10px;
}

/* Stiler for navigasjonsmenyen */
.menu-container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.menu-container h1 {
  color: #007bff;
  background-color: #fff;
  text-align: center;
  margin-top: 0;
  font-size: 30px;
  padding-bottom: 10px;
  width: 100%;
  border-bottom: 2px solid #007bff;
  position: relative;
}

.menu-container h1 button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px;
}

.menu-container h1 button img {
  width: 24px;
  height: 24px;
  filter: brightness(0.5);
  transition: filter 0.3s ease;
}

.menu-container h1 button img:hover {
  filter: brightness(1);
}

.menu-container nav {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
  width: 100%;
}

.menu-container ul.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.menu-container li {
  flex: 1;
  margin: 10px;
  text-align: center;
}

.menu-container a {
  display: block;
  padding: 25px 15px;
  color: #007bff;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 18px;
  border-radius: 5px;
}

.menu-container a:hover,
.menu-container a:focus {
  background-color: #dbdbdb;
  transform: scale(1.05);
}

/* Fjerner strekene under lenkene */
.menu-container a {
  text-decoration: none;
  border-bottom: none;
}

/* Fikser lik høyde og bredde på knappene */
.menu-container li {
  flex-grow: 1;
}

.menu-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Responsivitet for mindre skjermer */
@media (max-width: 768px) {
  .menu-container ul.menu-list {
    flex-direction: column;
    align-items: center;
  }

  .menu-container a {
    padding: 15px 30px;
  }
}

.btn-link {
  padding: 0;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.right-0 {
  right: 0;
}