/* .card {
    max-width: 500px;
    padding: 2rem;
    border-radius: 0.5rem;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
}

.checkbox-group label {
    margin-left: 0.5rem;
    font-weight: 400;
}

#fileupload {
    padding: 0.5rem;
} */
.header {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 10px 20px;
  background-color: #f8f9fa;
}

.header .btn-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #007bff;
  color: #007bff;
  font-size: 1.5rem;
  text-decoration: none;
  background-color: #fff;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.header .btn-circle:hover {
  background-color: #007bff;
  color: white;
}

/* .content-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap; 
} */

.google-signin-container {
  display: flex;
  justify-content: center;
  margin-top: 10px; /* Small margin above the Google Sign-In button */
}

#g_id_signin {
  width: max-content; /* Adjust the width of the Google Sign-In button */
  text-align: center;
}

.d-grid {
    position: relative; /* Needed for the loader to center itself relative to the container */
    height: 50px; /* Optional: set a height to define the container size */
  }
  
  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 16px;
    }
    .loader:before , .loader:after{
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #555353;
      box-shadow: 32px 0 #555353;
      left: 0;
      top: 0;
      animation: ballMoveX 2s linear infinite;
    }
    .loader:after {
      box-shadow: none;
      transform: translateX(64px) scale(1);
      z-index: 2;
      animation: none;
      animation: trfLoader 2s linear infinite;
    }
    
    @keyframes trfLoader {
      0% , 5%{
        transform: translateX(64px) scale(1);
        background: #555353;
      }
      10%{
        transform: translateX(64px) scale(1);
        background: #ff3d00;
      }
      40%{
          transform: translateX(32px) scale(1.5);
          background: #ff3d00;
        }
      90%, 95% {
        transform: translateX(0px) scale(1);
        background: #ff3d00;
      }
      100% {
        transform: translateX(0px) scale(1);
        background: #555353;
      }
    }
    @keyframes ballMoveX {
      0% , 10%{  transform: translateX(0) }
      90%, 100% { transform: translateX(32px) }
    }