.popup-banner {
  display: flex;
  animation: fadeIn 1s ease-in-out forwards;
  align-items: center;  /* Keeps items centered */
  justify-content: space-between;  /* Ensures spacing between elements */
  
  position: fixed;
  bottom: 0;
  transform: translateY(125px);
  
  
  background-color: #000000;
  color: rgb(255, 255, 255);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
  padding: 10px;
  
  height: 120px;
  width: 100%; /* Adjust width */
  max-width: 100%; /* Ensures it doesn’t stretch too much */
}
@keyframes fadeIn {
  from {
      transform: translateY(125px);

      opacity: 0;
  }
  to {
    transform: translateY(0px);

      opacity: 1;

  }
}
.fadeOutter {
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  from {
      transform: translateY(0px);

      opacity: 1;
  }
  to {
    transform: translateY(125px);

      opacity: 0;

  }
}


.appdownload {
  height: 70px; /* Adjust size as needed */
  padding:10px;
  flex-shrink: 0; /* Prevents the image from shrinking */
  border-radius:10px;
  background-color: #ffffff;

}

.app_info {
  flex: 1; /* Makes text take the remaining space */
  margin-left: 20px; /* Adds spacing between image and text */
  text-align: left;
  overflow: hidden; /* Ensures text doesn’t overflow */
  white-space: wrap; /* Prevents text from overlapping */
}


.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
.alert {
  opacity:0;
  display:none;
  position:relative;
  z-index:-9999;
  


}

.alertAnim {
  display:block !important;
  animation: showAlert 1s ease-out forwards !important;

  
}
.alert-title {
  display:inline-flex;
  gap:10px;
}
.bi {
height:min-content;
align-self:center;
width:30px;
margin-right:10px;

}
@keyframes showAlert {
  from {
      transform: translateY(-15px);

      opacity: 0;
  }
  to {
    transform: translateY(0px);

      opacity: 1;

  }
}

/*--.popup-banner.show { display: block; bottom: 30px;}*/
.darker {
  background-color: #eee;
}

html {
  height: 100%;
}

body {
  background-image: url("../images/grassy-hill.jpg") !important; 
  background-size: cover;
  background-repeat:no-repeat;
  
}

footer {
  position: fixed;
  color: white;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.index {
  
  position: relative;
}
.containerMainLogin {
  display:flex;
 align-items: center; 
 margin-left:-10;
}


.boxcol {
  background-color: white;
  opacity: 0.9;
}

.navbar-nav > li {
  padding-left: 100px;
  padding-right: 100px;
  margin-left: 15px;
  margin-right: 15px;
}

#new-problem,
#loading {
  display: none;
}

.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}
@keyframes blink {
  50% {
    color: transparent;
  }
}
.loader__dot {
  animation: 1s blink infinite;
}
.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}

.slide-up {
  bottom: 0px !important;
}

.slide-down {
  bottom: -475px !important;
}

#generate-problem {
  display: block;
  font-size: 10px;
  text-align: right;
}

#new-problem {
  position: relative;
  color: rgb(0, 0, 0);
  animation-name: fadeprob;
  animation-duration: 700ms;
}

@keyframes fadeprob {
  from {
    color: rgba(0, 0, 0, 0);
    top: 100px;
  }
  to {
    color: rgb(0, 0, 0);
    top: 0px;
  }
}