html {
  overflow-y: scroll;
}
.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 25px;
  }
  
.card-body {
  background-color: rgb(255, 255, 255);
  transition: transform .1s;
  border-radius: 25px;
}

  /* On mouse-over, add a deeper shadow */
.card:hover#green-shadow {
    box-shadow: 0 8px 16px 0 rgba(64, 161, 64, 0.466);
    transform: scale(1.05);
    border-radius: 25px;
}

.card:hover#red-shadow {
    box-shadow: 0 8px 16px 0 rgba(185, 66, 66, 0.678);
    transform: scale(1.05);
    border-radius: 25px;
}
  
  /* Add some padding inside the card container */
  .container {
    padding: 5px 32px;
  }

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Information to the user / Messages*/

.info1 > #info1 {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
  margin-bottom: 15px;
  padding: 4px 12px;
  animation: fadeIn1 3s;
  border-radius: 15px;
}

@keyframes fadeIn1 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.info2 > #info2 {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
  margin-bottom: 15px;
  padding: 4px 12px;
  animation: fadeIn2 3s;
  border-radius: 15px;
}

@keyframes fadeIn2 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.info3 > #info3 {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
  margin-bottom: 15px;
  padding: 4px 12px;
  animation: fadeIn3 3s;
  border-radius: 15px;
}

@keyframes fadeIn3 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.info4 > #info4 {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
  margin-bottom: 15px;
  padding: 4px 12px;
  animation: fadeIn3 3s;
  border-radius: 15px;
}

@keyframes fadeIn4 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.request-in-progress > #admin-message {
  background-color: #fff479;
  border-left: 6px solid #575757;
  margin-bottom: 15px;
  padding: 4px 12px;
  animation: fadeIn4 0.5s;
  border-radius: 5px;
}

.pointer {
  cursor: pointer;
}


.info_button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}

.homepage-image {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-top: 5px;

}

#home {
   max-width: 100%
}

span.paddingButton {
  
  padding-left: 20px;
}

#button-redcap { 
  background-color: rgba(209, 108, 108, 0.644);
  border-color: #a72828;
  color: #ffffff;
} 

/* If you can’t remove the inline style, override it with !important: */
.django-ckeditor-widget {
  display: block !important;  /* replaces inline-block */
  width: 100% !important;
}

/* Optionally, also ensure the .cke_chrome remains at 100%. */
.cke_chrome {
  width: 100% !important;
}
.orcid-icon {
  color: rgb(166, 206, 57);
  /* Adjust vertical alignment relative to the text */
  vertical-align: middle;
  /* Shift the icon up by 2 pixels; adjust as needed */
  transform: translateY(-10px);
}