/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}
.card {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 10px;
            text-align: center;
            overflow: auto; /* Add scrollbars when content overflows */
    word-wrap: break-word; /* Breaks long words if necessary */
        }
.hidden {
    display: none;
}
.position-absolute.top-50.start-0.translate-middle-y {
    left: -30px; /* Adjust as needed */
}

.position-absolute.top-50.end-0.translate-middle-y {
    right: -30px; /* Adjust as needed */
}
.flashcard {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.swipe-left {
    transform: translateX(-100%);
    opacity: 0;
}

.swipe-right {
    transform: translateX(100%);
    opacity: 0;
}
.btn-flap {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 10;
}

#prev {
   left: 10px;
}

#next {
  right: 0;
}

.flashcard-container {
  position: relative;
  overflow: hidden; /* To prevent the flaps from overflowing */
}

.flashcard {
  transition: transform 0.5s ease, opacity 0.5s ease;
  position: relative;
  z-index: 5; /* Ensure the card is below the flaps */
}
.btn-square {
    width: 200px;  /* or the size you want */
    height: 200px; /* equal to the width for square shape */
    padding: 20;   /* Adjust padding as needed */
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-square.bulb i {
    font-size: 150px; /* Adjust this value as needed to fit the button */
    color: #ebca3b;
}
.bulb {
    color: #ebca3b;
}
.btn-square i {
    font-size: 150px; /* Adjust this value as needed to fit the button */
}
#startFromFirst {
  left: -40px; /* Adjust this value as needed to create a gap */
}
.beige {
    background-color: beige;
    padding: 10px;
}
.taupe {
    background-color: #f5d5ba;
    padding: 10px;
}
.dustyrose {
    background-color: #fcc8bd;
    padding: 10px;
}
.lightgreen {
    background-color: #e1f7e4;
    padding: 10px;
}


/* Adjust swipe-left and swipe-right if needed */
/*.swipe-left,
.swipe-right {
  transform: translateX(-100%);
  opacity: 0;
}
*/