/* Basisstijlen */
.breathboxcontainer {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* height: 140vh;*/
    margin: 0;
    background-color: #000000;
    color: white;
  }
  
  .breathboxcontainer label {
    margin: 10px;
  }
  
  .breathboxcontainer #animationBorder {
    position: absolute;
    background-color: black;
  }
  
  .breathboxcontainer button,
  .breathboxcontainer select,
  .breathboxcontainer input {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
  }
  
  .breathboxcontainer button {
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }
  
  .breathboxcontainer button:disabled {
    background-color: #ccc;
  }
  
  .breathboxcontainer #animationBorder {
    position: absolute;
    background-color: white; /* Zichtbare kleur, wit of een andere kleur naar keuze */
  }
  
  /* Aanpassen op basis van animatienamen */
  .breathboxcontainer #animationBorder.topToBottom,
  .breathboxcontainer #animationBorder.bottomToTop {
    left: 50%; /* Centreer horizontaal */
    width: 2px; /* Smal voor verticale animaties */
    transform: translateX(-50%); /* Centreer precies in het midden */
  }
  
  .breathboxcontainer #animationBorder.leftToRight,
  .breathboxcontainer #animationBorder.rightToLeft {
    top: 50%; /* Centreer verticaal */
    height: 2px; /* Smal voor horizontale animaties */
    transform: translateY(-50%); /* Centreer precies in het midden */
  }
  
  .breathboxcontainer .container {
    width: initial;
    position: relative;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .breathboxcontainer #breathBox {
    width: 250px;
    height: 250px;
    background-image: url(../images/box.jpg);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
  
  .breathboxcontainer #displayText {
    /*top: 10%;*/
    font-size: 20px;
    text-align: center;
    width: 300px;
    opacity: 0; /* Begin met een onzichtbare tekst */
    transition: opacity 1s ease-in-out; /* Voeg een overgang toe voor de opacity */
    height: 100px;
    padding-top: 10px;
    color: white;
  }
  
  /* Animatie om de tekst zachtjes te laten verschijnen */
   @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  .breathboxcontainer .fadeIn {
    animation: fadeIn 1s forwards; /* Gebruik de fadeIn animatie om de tekst zichtbaar te maken */
  }
  
  /* Animatie sleutelframes */
   @keyframes leftToRight {
    from {
      width: 0;
      left: 0;
      top: 0;
      height: 2px;
    }
  
    to {
      width: 100%;
      left: 0;
      top: 0;
      height: 2px;
    }
  }
  
   @keyframes rightToLeft {
    from {
      width: 0;
      right: 0;
      bottom: 0;
      height: 2px;
    }
  
    to {
      width: 100%;
      right: 0;
      bottom: 0;
      height: 2px;
    }
  }
  
   @keyframes topToBottom {
    from {
      height: 0;
      top: 0;
      right: 0;
      width: 2px;
    }
  
    to {
      height: 100%;
      top: 0;
      right: 0;
      width: 2px;
    }
  }
  
   @keyframes bottomToTop {
    from {
      height: 0;
      bottom: 0;
      left: 0;
      width: 2px;
    }
  
    to {
      height: 100%;
      bottom: 0;
      left: 0;
      width: 2px;
    }
  }
  
  /* Keyframes voor de pulserende animatie */
   @keyframes pulseAnimation {
    0%, 100% {
      background-color: #007bff;
    }
  
    50% {
      background-color: #0056b3;
    }
  }
  
  .breathboxcontainer .button-container {
    display: flex; /* Zet de display mode op flex om flexbox functionaliteiten te gebruiken */
    justify-content: center; /* Centreert de knoppen horizontaal */
    align-items: center; /* Centreert de knoppen verticaal */
    gap: 10px; /* Voegt een ruimte van 10 pixels tussen de knoppen toe */
  }
  
  .breathboxcontainer .buttonswitch {
    padding: 10px 20px; /* Voegt padding toe voor een betere vorm */
    background-color: #212223; /* Kleur van de knop */
    color: white; /* Tekstkleur van de knop */
    border: none; /* Geen rand */
    border-radius: 5px; /* Afgeronde hoeken */
    cursor: pointer; /* Cursor verandert in een handje wanneer je over de knop hovert */
    transition: background-color 0.3s; /* Vloeiende overgang voor achtergrondkleurverandering */
  }
  
  .breathboxcontainer .buttonswitch.active {
    background-color: #0056b3; /* Donkerdere blauwe kleur voor de actieve knop */
  }
  
  .breathboxcontainer .buttonswitch:hover {
    background-color: #0056b3; /* Donkerdere blauwe kleur bij hover */
  }
  
  .breathboxcontainer .runbuttons {
    padding: 10px 20px; /* Voegt padding toe voor een betere vorm */
    color: white; /* Witte tekstkleur */
    border: none; /* Geen rand */
    border-radius: 5px; /* Afgeronde hoeken */
    cursor: pointer; /* Cursor verandert in een handje wanneer je over de knop hovert */
    transition: background-color 1s ease-in-out; /* Vloeiende overgang voor achtergrondkleurverandering */
    animation-duration: 3s; /* Duur van de animatie */
    animation-iteration-count: infinite; /* Herhaal de animatie oneindig */
  }
  
  .breathboxcontainer #startBtn {
    background-color: #007bff; /* Blauwe achtergrondkleur voor de startknop */
    animation-name: pulseAnimation; /* Verwijzing naar de animatie */
  }
  
  .breathboxcontainer #stopBtn {
    background-color: #ff4d4d; /* Rode achtergrondkleur voor de stopknop */
  }
  
  .breathboxcontainer .setting {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Geeft ruimte tussen de instellingen */
  }
  
  .breathboxcontainer .setting label {
    flex: 1 0 180px; /* Zorgt ervoor dat alle labels even breed zijn */
    text-align: right;
    margin-right: 10px; /* Geeft ruimte tussen label en select */
  }
  
  .breathboxcontainer .setting select {
    flex: 1 0 15px; /* Zorgt ervoor dat alle select elementen even breed zijn */
  }
  
  /* Optioneel: Voeg wat padding en margin toe aan de containers voor visuele scheiding */
  .breathboxcontainer #breathingSettings,
  .breathboxcontainer #boxSettings {
    padding: 10px;
    margin-bottom: 20px;
  
    border-radius: 5px; /* Afgeronde hoeken */
  }
  
  .breathboxcontainer #boxSettings {
    display: none; /* Deze regel is al aanwezig maar wordt hier ter herinnering genoemd */
  }
  
  .breathboxcontainer #displayTextTop,
  .breathboxcontainer #displayTextRight,
  .breathboxcontainer #displayTextBottom,
  .breathboxcontainer #displayTextLeft {
    position: absolute;
    color: white;
    font-size: 20px;
    transition: opacity 1s ease-in-out; /* Voeg een overgang toe voor de opacity */
    opacity: 0; /* Begin met een onzichtbare tekst */
  
    top: 50%; /* Voorbeeld */
    left: 50%; /* Voorbeeld */
    transform: translate(-50%, -50%); /* Voorbeeld */
  }
  
  .breathboxcontainer #displayTextTop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%) rotate(0deg);
  }
  
  .breathboxcontainer #displayTextRight {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(60%, 100%) rotate(90deg);
  }
  
  .breathboxcontainer #displayTextBottom {
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 100%);
  }
  
  .breathboxcontainer #displayTextLeft {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%) rotate(-90deg);
  }
  
  .breathboxcontainer #volumeControls {
    display: flex ;
    flex-direction: column;
  }