.disabled-button {
  background-color: #ccc !important;
  color: #565656 !important;
  cursor: not-allowed !important;
  border: 1px #565656 !important;
}

.copy-button{
  display: block;
  transform: translate(-105%,10%);
  padding: 0px 0px;
  border-width: 0px;
  color: #565656;
  cursor: pointer;
  border-color: #565656;
  background-color: transparent;
  height:18px;
  width:20px;
}

.copy-button:hover, .copy-button:focus  {
  display: block;
  transform: translate(-105%,10%);
  padding: 0px 0px;
  border-width: 0px;
  color: #565656;
  cursor: pointer;
  border-color: #565656;
  background-color: transparent;
  height:18px;
  width:20px;
}

.copy-icon {
  width: 12px;
  height: 12px;
}



.copy-tooltip {
  position: absolute;
  bottom: 100%; /* plaats boven de knop */
  margin-bottom: 6px;
  /* background-color: #ffffff; */
  color: #565656;
  padding: 4px 8px;
  /* border: 1px solid #ccc; */
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
  z-index: 10;
  transform: translateX(-55%);
}

.copy-button:hover .copy-tooltip {
  opacity: 1;
  visibility: visible;
}

.feedback-dropdown {
  height: 20px;
  background-color: #ffffff;
  color: #BFBFBF;
  border-radius: 2px;
  border:1px solid #BFBFBF;
  width:5%;
  font-size: clamp(14px, 1.5vh, 16px);
  margin-left: auto;
  margin-right:2%;
}

.title-container{
 display: flex;
 align-items: baseline; 

}

.feedback{
  margin-left: auto;
  margin-right:2%;
  font-size: clamp(12px, 1.2vh, 14px);
  color: #1b1464;
  
}


.tooltip-container {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #1b1464;
  font-weight: bold;
}

.tooltip-text {
  visibility: hidden;
  /* width: max-content; */
  background-color: #fff;
  color: #BFBFBF;
  text-align: left;
  padding: 4px 8px;
  border-radius: 4px;
  width: 30vw;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  border-radius: 2px;
  border:1px solid #BFBFBF;

  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 0.65rem;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}




@font-face {
  font-family: 'Jakarta';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
}

html, body {
  min-width: 681px;
}

main {
  flex: 1;
  display: flex;
  justify-content: space-between;
  min-height: 92vh;
}

body {
  font-family: 'Jakarta';
  background-color: #F7F7F7;
  padding:0;
  margin:0;
  color: #565656;
  height: 100%;

}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1b1464;
  padding: 0em 1em;
  color: white;
  height: 8vh;
  flex-wrap: wrap; /* voorkomt overflow */
  overflow: hidden; /* optioneel: voorkomt dat elementen buiten de header vallen */
}


/* Pas het lettertype aan voor schermen met breedte van 800px of minder */
@media (min-height: 601px) and (max-height: 800px) {

  .logo h1 {
      font-size: 1.5rem;
  }

  .user-info{
      font-size: 0.8rem;
  }

  .logout-button{
    font-size: 0.8rem;
  }

  .blok-klein{
    height: 8vh !important;
  }

  .blok{
     height: 8vh !important;
  }


}

@media (max-height: 600px) {

  .logo h1 {
      font-size: 1.2rem;
  }

  .user-info{
      font-size: 0.6rem;
  }

  .logout-button{
    font-size: 0.6rem;
  }

  .blok-klein{
    height: 8vh !important;
  }

  .blok{
     height: 8vh !important;
  }
}

@media screen and (max-width: 1000px) {

  .container-wrapper{

    width: 80% !important;
    margin-left:10% !important;

  }

  .back-button2{
    margin-left:2% !important;
  }

}



.logout-button{
  color: #88c1ff;
  padding:0%;
}


pre {
  font-family: 'Jakarta';
  white-space: pre-wrap;         /* Laat de tekst wrappen en behoud nieuwe regels */
  word-wrap: break-word;         /* Breek lange woorden */
  overflow-wrap: break-word;
  margin: 0 0 0px;
  /* color: #565656; */
  font-size: 16px;
  padding: 10px;
  color: #BFBFBF;
}


pre[contenteditable="true"] {
  outline: None;
}


.header-title {
  font-family: 'Jakarta';
  color: #1b1464;
  text-align: left;
}

.heading-container {
  font-family: 'Jakarta';
  background-color: #88c1ff;
  color: white;
  /* border: 1px solid #1b1464; */
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  /* overflow-y: hidden; */
  font-size: clamp(15px, 1.6vh, 17px);
  font-weight: bold;
  box-sizing: border-box;

  height: 3vh; /* Zorg voor een minimale hoogte */
  display: flex;
  align-items: center; /* Verticale uitlijning */
  }


.container-wrapper {
  margin-top:5vh;
  width: 60%;
  margin-left:20%;
  align-items: center;
}


.grouped-container {
  justify-content: space-between;
  /* width: 65%; */
  margin-bottom: 3vh;
}


.blokken-episode-progress{
  width: 80%;
}

.blokken-episode{
  display: flex;
  justify-content: space-evenly;
}

.blokken-links{
  display: flex;
  justify-content: flex-start;
}

.blok{
  margin-top: 1vh;
  margin-bottom: 1vh;
  border-radius: 5px;
  display: flex;
  justify-content: center; /* horizontaal centreren */
  align-items: center;     /* verticaal centreren */
  text-align: center;
  height: 6vh;
  width: 30%;
  font-size: 16px;
  position:relative;
}

.blok-active{
  background-color: #88c1ff;
  color:white;
}

.blok-inactive{
  background-color: #D9D9D9;
  color:#BFBFBF;
}

.blok-complete{
  background-color: #D9F2D0;
  color:#569042;
}

.blok-notcomplete{
  background-color: #F6C6AD;
  color:#CB6936;
}

.progress-bar {
  flex: 1;
  margin-top: 0px;
  height: 1.5vh;
  background-color: #F6C6AD; /* Rode achtergrond = niet voltooid deel */
  overflow: hidden;
  position: relative;
}

.progress {
  height: 100%;
  background-color: #D9F2D0; /* Groene voortgang */
  width: 0%; /* Zet dit via inline style of JavaScript */
  /* transition: width 0.4s ease; */
}

.progress-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-info span {
  font-size: 14px;
  width: 30px;
  text-align: center;
  height:1vh;
}

.label {
  margin-bottom: 0vh;
  margin-top: 1vh;
  font-weight: bold;
  min-height: 2.5vh;
  font-size: 14px;

}

.blok-klein{
  flex-wrap: wrap;
  text-align: center;
  margin-top: 1vh;
  border-radius: 5px;
  display: flex;
  justify-content: center; /* horizontaal centreren */
  align-items: center;     /* verticaal centreren */
  height: 6vh;
  width: 13.75%;
  position:relative;
  font-size: 12px;
  box-sizing: border-box;
}

@media (min-width: 1281px) and (max-width: 1600px) {
  .blok-klein{
    font-size: clamp(8px, 2vw, 11px);
    hyphens: auto;
    word-break: normal;
    overflow-wrap: break-word; /* Backup for older browsers */
  }
}

@media (min-width: 1281px) and (max-width: 1600px) {
  #toestemming-bijzondere-behandeling,
  #toestemming-patient{
    font-size: clamp(8px, 1.5vw, 10px);
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .blok-klein{
    font-size: clamp(8px, 1.5vw, 12px);
  }
}



.container {
  background-color: white;
  border-radius: 5px;
  padding: 15px;
  /* border: 1px solid #1b1464; */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: auto;
  min-height: 100px;
  overflow: hidden;
  box-sizing: border-box;
  overflow: visible;
}

.container-episode{
  display: flex;
  justify-content: space-evenly;
}

/* niet aanpasbaar */
.container1 {
  background-color: #FFFAF5;
}



.blok  .hover-text {
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  bottom: 125%; /* boven het element */
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 0.3s;
  z-index: 5;
}

.blok-klein .hover-text {
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  bottom: 125%; /* boven het element */
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 0.3s;
  z-index: 5;
}

.vragen .hover-text{
  width:300px;
}
.blok-complete:hover .hover-text {
  visibility: visible;
  opacity: 1;
}

.blok-notcomplete:hover .hover-text {
  visibility: visible;
  opacity: 1;
}


.long{
  min-height: 75vh;
}

.medium {
  min-height: 34.333vh;
}


/* Input-container voor input en knop */
.input-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Input-veld styling */
.input-container input {
  width: 100%;
  padding: 12px 50px 12px 15px;
  border: 1px solid #ddd;
  border-radius: 24px;
  outline: none;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.input-container input:focus {
  border-color: #007bff;
}

/* Knop styling */
.input-container button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #88c1ff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.input-container button:hover {
  background-color: #1b1464;
}

.input-container button:active {
  background-color: #1b1464;
}


/* SVG-icoon styling */
.input-container button svg {
  fill: white;
}

svg {
  fill: white;
  transform: translateY(2px); /* ook naar beneden, flexibeler */
}

svg:hover {
  fill: white;
}

.flex-container {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

button{
  background-color: #1b1464;
  border-radius: 5px;
  border: 1px solid #1b1464;
  cursor: pointer;
  transition: background-color 0.3s;
  color: white;
  padding: 0.7em;
  font-size: 15px;
}

button:hover  {
  background-color: #1b1464;
  color: white;
}

button:focus {
  background-color: #1b1464;
  color: white;
}


.buttons-container {
  margin-top: 5px;
  height: 5vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}



.rightbuttons-container {
  display: flex;
  justify-content: space-between;
  width: 8%;
  height: 5vh;
  margin-bottom: 20px;
}


.record-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#recordButton {
  background-color: red;
  color: white;
  border: none;
  width: 80px;
  height: 80px;
  font-size: 30px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}
#recordButton.recording {
  background-color: darkred;
  animation: pulse 1.5s infinite;
}

#recordButton svg {
  width: 40px;
  height: 40px;
  fill: white;
  transition: fill 0.3s;

}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
#stopButton {
  display: none;
  background-color: gray;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}
#status {
  font-size: 18px;
  font-weight: bold;
  color: gray;
}


.transcription-container{
  display: none;
}

.transcription-container.open{
  display: block;
}


.button-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.intake-title {
  color: #1b1464;
  margin: 0%;
  padding-top: 5%;
  font-size: clamp(15px, 1.6vh, 17px);
}

.intake-summary-rule,
.intake-summary-rule-nofeedback,
.intake-summary-notext{
  width: 100%;
  display: flex;
  position: relative;
  margin-top: 0.5vh;
  color:#BFBFBF
}

.intake-summary-field{
  width: 25%;
  font-size: clamp(14px, 1.5vh, 16px);
  color:#BFBFBF
}

.intake-summary-value{
  width: 60%;
  color:#BFBFBF;
  border-radius: 2px;
  border:1px solid #BFBFBF;
  font-size: clamp(14px, 1.5vh, 16px);
  /* box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1); */
  outline:none;
  padding-left:10px;
  padding-right: 10px; /* prevents copy-buttion overlap */
}

.button-right{
  display: inline-flex;
  gap:15px;
  align-items: center;

}

.green{
  background-color: #92D050;
  border:#92D050;
}


.icon{
  transform: translateY(-1px);
}

.login-title {
  text-align: center;

}

.centered-login{
  margin-left:10%;
  margin-top:4%;
  width: 80%;
  display: flex;
  flex-direction: column;     /* Onder elkaar */
  gap: 15px;                  /* Ruimte tussen de blokken */          /* (optioneel) volle hoogte van scherm */
  justify-content: center;    /* (optioneel) verticale centrering */
}

.centered-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  padding: 20px;
  width: 700px;
}


.login-input{
  width: 100%;
  color:#565656;
  border-radius: 2px;
  border:1px solid #BFBFBF;
  font-size: 16px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
  outline:none;
  padding-left:10px;
  height:25px;
}

.password-link {
  color:#007bff;
  font-size: 14px;
  cursor: pointer;
}

.start{
  padding-left:7.5%;
  padding-top:5%;
  width:90%

}

.start-row{
  display: flex;
  margin-bottom: 3%;
}


.start-left{
  display: flex;
  width:75%;
}


.start-right{
  width: 25%;
}


.start-button{
  width:140px;
  font-size: 12px;
  background-color: #1b1464;
  text-align: left;
  transform: translate(0%, 40%);
  display:flex;
  justify-content: space-between;
}

.circle {
  width: 30px;
  height: 30px;
  background-color: #88C1FF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translate(-40%, 65%);
}

.start-left .intake-title{
  font-size: 15px;
}

.error_message{
  color:red;
  font-size: 14px;
  margin:0;
}

.treatment-container{
  padding-top: 2vh;
}

.treatment-progress{
  padding-bottom:4.5vh;
}

.container-medium {
  background-color: white;
  border-radius: 5px;
  padding: 15px;
  padding-top: 0;
  padding-bottom: 2vh;
  /* border: 1px solid #1b1464; */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: auto;
  min-height: 100px;
  overflow: hidden;
  box-sizing: border-box;
  overflow: visible;
  height:35vh;


}

.dropdown-field{
  color:#BFBFBF;
  border-radius: 2px;
  border:1px solid #BFBFBF;
  font-size: clamp(14px, 1.5vh, 16px);
}

.duur{
  width:20%;
  margin-right: 2vw;
}

.psk{
  width: 45%;
  margin-right: 2vw;
}

.score{
  width: 5%;
  margin-left: 9px; /* Experimenteel vastgelegd door PSK score rechts te alignen bij schermbreedte van ~ 1281 pixels */
}

@media (max-width: 1280px) {
  .score{
  width:5%;
  margin-left: 27px; /* Experimenteel vastgelegd door PSK score rechts te alignen bij minimale window breedte (zie .container-wrapper opmerking) */
  }
}
.input-patientnummer{
  transform: translateY(17px)
}

input::placeholder {
  font-family: 'Jakarta';
  font-weight: bold;
  font-size: 15px;
  color:#BFBFBF;
}



select{
  max-width: 353px; /* Experimenteel vastgelegd door "beloop tot nu toe" <select> tag niet groter te laten worden dan "Beloop" wanneer het scherm ~ 1281 pixels breed is */
  overflow: hidden;
}


textarea {
  font-family: 'Jakarta';
  background-color: #fafafa;
  color: #333;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical; /* allow vertical resize only */
  outline-offset: 2px;
}

input:focus,
textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  background-color: #fff;
  outline: none;
}

textarea::placeholder {
  color: #999;
  font-style: italic;
}



.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    background-color: white;
    color:#565656;
    padding: 8px 16px;
    margin: 0 5px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #1b1464;
    color:white;

}

.pagination a.active {
    background-color: #88c1ff;
    color: white;
    border-color: #88c1ff;
}

.table-container{
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translate(-50%);
  width: 700px;
}

.table-container table {
    width: 100%;
    background-color: white;
    color:#565656;
    border-collapse: collapse;
}

.table-container table th, .table-container table td {
    border-bottom: 2px solid #88c1ff;
    padding: 0.5em;
    text-align: left;
}

.table-container table thead {
  color:white;
}

.table-container table th {
    background-color: #88c1ff;
    font-weight: bold;
}

.table-container table {
  border: 2px solid #88c1ff;
}

.table-container{
  border-radius: 5px;
}

.table-container table tr {
    cursor: pointer;
    transition: background-color 0.3s;
}

.table-container table tr:hover {
    background-color: #1b1464;
    color:white;
}


.zoek-input, .zoek-input:focus {
      flex: 1;
      width:675px;
      padding: 12px;
      border: 2px solid #BFBFBF;
      border-radius: 5px;
      font-size: 16px;
  }

.zoek-container{

  margin-bottom: 2vh;
}


.search-btn-integrated {
  position: absolute;
  right: 0px;
  color: #88c1ff;
  background-color: white;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  border: 2px solid #BFBFBF;
  border-left:none;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn-integrated:hover {
    background-color: #88c1ff;
    color:white;
}

.search-btn-integrated svg {
    width: 20px;
    height: 20px;
}

.search-input-container {
    position: relative;
    display: flex;
    flex: 1;
    
}

.back-button{
  border-radius: 50%;
  border: none;
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translate(-420px);
  background-color: #F7F7F7;
  color:#BFBFBF;
}

.back-button:hover, .back-button:focus{
  background-color: #BFBFBF;
  color:white;
}


.back-button2{
  border-radius: 50%;
  border: none;
  position: absolute;
  margin-top: 5vh;
  margin-left:15%;
  background-color: #F7F7F7;
  color:#BFBFBF;
}

.back-button2:hover, .back-button2:focus{
  background-color: #BFBFBF;
  color:white;
}

.banner{
  background: #ffeeba; 
  color: #856404; 
  padding: 1em; 
  text-align: center; 
  font-weight: bold;
  width: 100%;
  height: 3vh;
}