/* General styling */
h1 {
  margin-top: 2.2em;
  opacity: 0.9;
  font-size: 2.5em;

}

h2 {
  margin-top: 2.0em;
  opacity: 0.7;
  font-size: 2.1em;

}

h3 {
  margin-top: 1.8em;
  opacity: 0.6;
  font-size: 1.3em;
}

h4 {
  margin-top: 1.4em;
  opacity: 0.6;
  font-size: 1.2em;
  padding-top: 5px !important;

}

h5 {
  opacity: 0.6;
  font-size: 1.1em;
}
code {
  color: rgb(230, 150, 0);
  /* Text color */
  background-color: rgba(230, 150, 0, 0.1);
  /* Light background color */
  padding: 0.4em 0.6em;
  /* Padding to create space around the text */
  border-radius: 0.5em;
  /* Rounded corners */
}

p a:not(.nav-link, .btn),
li a:not(.nav-link, .btn) {
  display: inline-block;
  padding: 2px 6px;
  margin: 0px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

p a:not(.nav-link, .btn):hover,
li a:not(.nav-link, .btn):hover {
  background-color: #d0d0d0;
  color: #000;
}

p a:not(.nav-link, .btn):active,
li a:not(.nav-link, .btn):active {
  background-color: #c0c0c0;
  color: #ffffff;
}

p a:not(.nav-link, .btn):focus,
li a:not(.nav-link, .btn):focus {
  background-color: rgb(230, 150, 0);
  color: #ffffff;
}


code {
  display: inline-block;
  color: rgb(230, 150, 0);
  background-color: rgba(230, 150, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}


/* Navigation bar */
.nav-link {
  color: #909090;
  transition: all 0.5s;
}

.nav-item {
  margin-left: 6px;
  margin-right: 6px;
}

.nav-link:hover {
  font-weight: 400;
  color: black;
}


.dropdown-item {
  background-color: rgba(0, 0, 0, 0);
  color: #606060;

}

.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #333333;
  margin-left: 8px;
}

.dropdown-item:active {
  background-color: #fafafa;
  font-weight: 500;
  color: black;
}

.logout-btn {
  color: rgb(220, 53, 69) !important;
  margin: 10px !important;
}

.logout-btn:hover {
  color: #ffffff !important;
}

/* Adjust alert messages */
.alert {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding: 8px;
}

.alert-dismissible .btn-close {
  font-size: 0.6rem;
  top: auto;
  padding: 8px 8px;
  margin-right: 8px;
}

.btn-close:focus {
  display: none;
}

/* Registration form */
.mandatory::after {
  color: rgba(255, 0, 0, 0.5);
  content: " *";
}

/* Gradient so that captions are easier to read on images */
.img-gradient {
  position: relative;
  display: inline-block;
}

.img-gradient:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.7) 100%);
}

.img-gradient img {
  display: block;
}

.card {
  transition: all 0.15s !important;
}

.card:hover {
  border-color: #909090;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) !important;
  /* Shadow on hover */

}

.filestash {
  width: 100%;
  height: 100%;
  background-color: white;
}

/* css for log table */

.log-table {
  max-height: 512px;
  overflow-y: scroll;
}

.log-table th,
.log-table td {
  text-align: left;
}

.tutorial-img {
  width: 100%;
  height: 256px;
  object-fit: cover;
  object-position: center;
}


/* Version history */

/* Timenline */
.timeline li {
  list-style: none !important;
  border-left: 4px dotted #bababa !important;
  position: relative !important;
  padding-left: 20px !important;
  margin-left: -25px !important;
  margin-bottom: -5px !important;
  padding-top: 0px !important;
  padding-bottom: 32px !important;
  outline-offset: 150px !important;
  transition: all .5s ease-out;
}

.timeline li:hover {
  border-left: 4px dotted rgb(230, 150, 0) !important;
}

.timeline li:first-child {
  border-left: 4px dotted rgba(0, 0, 0, 0) !important;
  background-color: #fafafa !important;
  border-radius: 8px !important;
  padding-bottom: 16px !important;
  padding-top: 8px !important;
  margin-bottom: 16px !important;

}

.timeline li:first-child:hover {
  background-color: #f2f2f2 !important;
}

.timeline li:first-child:before {
  content: '';
  width: 8px;
  height: 100%;
  background: rgb(230, 150, 0);
  border-radius: 5px;
  position: absolute;
  left: -6px;
  top: 0;
}

.timeline li:last-child {
  padding-bottom: 0 !important;
}

.timeline li:before {
  content: '';
  width: 8px;
  height: 28px;
  background: rgb(230, 150, 0);
  border-radius: 5px;
  position: absolute;
  left: -6px;
  top: 0;
}

.menu-badge {
  vertical-align: text-top !important;
  color: #ffffff !important;
  background-color: rgb(90, 90, 90) !important;
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: 0.375rem;
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}

.text-img {
  border-radius: 8px;
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 100%;
  height: 100%;
}

.w64 {
  width: 64px;
}

.w92 {
  width: 92px;
}

.w128 {
  width: 128px;
}

.w150 {
  width: 150px;
}

.w192 {
  width: 192px;
}

.w256 {
  width: 256px;
}

.w512 {
  width: 512px;
}

.w768 {
  width: 768px;
}

.w1024 {
  width: 1024px;
}


.h64 {
  height: 64px;
}

.h92 {
  height: 92px;
}

.h128 {
  height: 128px;
}

.btn-link {
  display: inline-block;
  font-weight: 400;
  color: #007bff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid #007bff;
  padding: 0.3rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  margin-bottom: 0.4rem;
  /* Bootstrap-like button hover effect */
  text-decoration: none;
}

.btn-link:hover {
  color: #ffffff;
  background-color: #0056b3;
  border-color: #0056b3;
  text-decoration: none;
}

.btn-link:focus,
.btn-link:active {
  color: #0056b3;
  background-color: #e9ecef;
  border-color: #0056b3;
  outline: none;
  text-decoration: none;
}

/* Additional styles for file links */
.file-link {
  color: #5dc275;
  /* Green color for files */
  border-color: #5dc275;
}

.file-link:hover {
  background-color: #5dc275;
  border-color: #5dc275;
  color: #ffffff;
}

/* Additional styles for folder links */
.folder-link {
  color: #17a2b8;
  /* Blue color for folders */
  border-color: #17a2b8;
}

.folder-link:hover {
  background-color: #117a8b;
  border-color: #117a8b;
  color: #ffffff;
}

.files-container {
  max-width: 800px;
  margin: 0 auto;
  /* Center the container horizontally */
  padding: 20px;
  /* Add some padding for better readability */
}

.pager {
  display: flex;
  justify-content: center;
  /* Centers the pager horizontally */
  align-items: center;
  /* Centers the pager vertically */
  margin-top: 48px;

}

.pager a {
  margin-left: 8px;
  margin-right: 8px;
  font-weight: 400;
  color: #535353;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid #535353;
  padding: 0.3rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  margin-bottom: 0.4rem;
  /* Bootstrap-like button hover effect */
  text-decoration: none;
}

.pager a:hover {
  color: #ffffff;
  background-color: #535353;
  border-color: #535353;
  text-decoration: none;
}

.btn-kill-job {
  width: 192px;

}

.profile-img-circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  object-fit: cover;
  object-position: center;
}

.red {
  color: rgba(255, 0, 0, 0.5);
}

.usage-report {
  max-height: 512px;
  overflow-y: scroll;
}

.usage-plot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

/* Hides the arrows for number input */
input.no-spinners::-webkit-outer-spin-button,
input.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.no-spinners {
  appearance: none;
  -moz-appearance: textfield; /* Firefox */
}

blockquote{
  background-color:rgb(253, 235, 236);
  padding: 1rem;
}

.loader {
  margin: 2em auto 20px auto; /* to right bottom left */
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* General banner style */
.banner {
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 3px;
  position: relative;
  font-family: Arial, sans-serif;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Error Category */
.banner.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Info Category */
.banner.info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Warning Category */
.banner.warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

/* Banner Content */
.banner-content {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Dismiss button */
.banner button {
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  margin-left: auto;
  padding: 2px 5px;
}

.banner.error button {
  border: 1px solid #721c24;
}

.banner.info button {
  border: 1px solid #0c5460;
}

.banner.warning button {
  border: 1px solid #856404;
}

.banner.error button:hover {
  text-decoration: underline;
  background: #721c24;
  color: #ffffff;
}

.banner.info button:hover {
  text-decoration: underline;
  background: #0c5460;
  color: #ffffff;
}
.banner.warning button:hover {
  text-decoration: underline;
  background: #856404;
  color: #ffffff;
}

.tutorial_page_img {
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
}

.tutorial_page_fig_text {
  font-size: 14px; 
  color: gray; 
  text-align: left;
  margin-top: 8px;
}