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

.color-active{
    color: #625EA7;
}

.scrollable-list {
      max-height: 135px; /* Pas deze waarde aan op basis van de gewenste hoogte */
      overflow-y: scroll;
      background-color: white;
      border-radius: 10px;
      margin-right: 8px;
  }
  .scrollable-list::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 4px;
  }
  
  .scrollable-list::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.399);
      box-shadow: 0 0 1px rgba(255,255,255,.5);
  }
  .gradient-text {
      font-size: 56px;
      font-weight: 900;
      background: linear-gradient(90deg, rgba(98,94,167,1) 0%, rgba(227,166,55,1) 25%, rgba(46,113,184,1) 50%, rgba(151,199,116,1) 75%, rgba(230,125,115,1) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: inline-block; /* Zorgt ervoor dat de grootte van de div zich aanpast aan de tekst */
  }
  .card-hover:hover {
      transform: translateY(-5px);
      transition: 0.4s;
      cursor: pointer;
  }
  
  /* CSS voor het icoontje, standaard verborgen */
  .card-hover .icon {
      opacity: 0; /* Icoontje is standaard onzichtbaar */
      transform: translateY(20px); /* Begint 20px lager */
      transition: opacity 0.4s, transform 0.4s; /* Vloeiende overgang voor beide eigenschappen */
  }
  
  /* CSS voor het tonen van het icoontje bij hover over de card */
  .card-hover:hover .icon {
      opacity: 1; /* Maakt het icoontje zichtbaar bij hover */
      transform: translateY(0); /* Terug naar oorspronkelijke positie */
  }
  .card-height {
      height: 111px;
  }
  .message-bubble { /* New class for recipient bubble */
    background-color: #f4f2ee;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px;
    max-width: 45%;
    display: inline-block;
    position: relative;
    word-wrap: break-word;
    color: rgb(18, 18, 18);
    font-weight: 600;
  }
  .message-bubble {
    background-color: #f4f2ee;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px;
    max-width: 45%;
    display: flex; /* Nieuw */
    position: relative;
    word-wrap: break-word;
    color: rgb(18, 18, 18);
    font-weight: 600;
  }
  
  .message-bubble {
    background-color: #f4f2ee;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px;
    max-width: 45%;
    position: relative;
    word-wrap: break-word;
    color: rgb(18, 18, 18);
    font-weight: 600;
  
    &::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: -16px;
    border-top: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #f4f2ee;
    border-left: 16px solid transparent;
    transform: rotate(-45deg);
  }
  }
  
  .bottom-row{
    flex-grow: 1; /* Laat deze groeien om alle beschikbare ruimte in te nemen, duwend naar beneden */
    display: flex;
    flex-direction: column; /* Hiermee kunt u verdere aanpassingen doen als dat nodig is */
    justify-content: flex-end; 
  }
  .card-container {
    flex-grow: 0;
    max-height: 75vh;
    overflow-y: scroll;
  }
  .col-lg-12 {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verdeelt de ruimte tussen boven en onder */
    height: 95vh; /* Zorgt ervoor dat het de volledige viewport hoogte inneemt */
    padding: 0rem 1.5rem; /* Aangepast, margin-top verwijderd */
  }
  .code-container {
    background-color: #1E1F20; /* Donkere achtergrond */
    color: #f8f8f2; /* Lichte tekst */
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    max-width: 45%;
    max-height: 250px;
    word-wrap: break-word;
    overflow-x: auto;
    overflow-y: auto;
  }
  
  pre {
    margin: 0;
  }
  
  code {
    font-family: 'Source Code Pro', monospace; /* Of een andere monospace lettertype */
    font-size: 0.9em;
  }
  
  #second-output table {
      border-collapse: collapse;
      font-family: 'Courier New', monospace;
  }
  
  #second-output td {
      padding: 5px;
      border-bottom: 1px solid #ddd; /* Optioneel: voeg een subtiele lijn toe onder elke rij */
  }
  
  #second-output td:nth-child(2) {
      text-align: right; /* Statuscodes rechts uitlijnen */
  }
  
  #second-output th, #second-output td {
      padding: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  
  #second-output th:first-child, #second-output td:first-child {
      max-width: 90%;
  }
  
  .code-header {
    background-color: #2F2F2F; /* Grijze achtergrond */
    color: #B4B4B4;
    display: flex;
    justify-content: space-between; /* Dit zorgt ervoor dat de linkerkant en de rechterkant uit elkaar worden geplaatst */
    align-items: center;
    font-size: 16px;
    margin: -10px;
    padding: 10px;
    margin-bottom: 8px;
    position: sticky;
    z-index: 10;
    top: -10px;
  }
  
  .header-left {
    display: flex;
    align-items: center;
    font-size: 12px;
  }
  
  .header-right {
    display: flex;
    align-items: center;
    font-size: 12px;
  }
  
  .fa-clipboard,
  .fa-download {
    margin-right: 10px; /* Ruimte na het icoon */
    cursor: pointer; /* Maak de iconen klikbaar */
  }

  .copy-action{
    cursor: pointer;
  }
  .fa-check, .fa-times {
    margin-right: 10px; /* Behoud ruimte na het icoon */
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Donkere transparante achtergrond */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 14px;
  }

  .card-closed .icon {
    display: none;
}
  
  .card-overlay i.fa-lock {
    font-size: 1.0rem; /* Grootte van het hangslot-icoon */
    margin-bottom: 0.5rem;
  }
  
  .card-body {
    position: relative; /* Zorg ervoor dat de overlay de juiste positie inneemt */
  }

  .btn-scaler-main {
  --bs-btn-color: white;
  --bs-btn-bg: none;
  --bs-btn-border-color: none;
  --bs-btn-hover-bg: none;
  --bs-btn-hover-border-color: white;
  --bs-btn-active-bg: none;
  --bs-btn-active-border-color: none;
  --bs-btn-disabled-bg: none;
  --bs-btn-disabled-border-color: none;
  
  color: var(--bs-btn-color);
  background-color: #0400C7;
  border: 1px solid transparent;
}

  .btn-scaler-main:hover {
  background-color: #030094;
  border: 1px solid transparent;
}