/*
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://static.igem.wiki/teams/4150/wiki/fonts/open-sans-300.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://static.igem.wiki/teams/4150/wiki/fonts/open-sans-400.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://static.igem.wiki/teams/4150/wiki/fonts/open-sans-600.woff) format('woff');
}
*/

/* * {
	font-family:'Open Sans';
} */

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

body { 
	overflow-x:hidden;
	font-family: "IBM Plex Mono", sans-serif;
  	font-weight: 300; /* thin weight */
  	font-style: normal;
}


  
	
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #132343 !important; }
.bg-hero { background-color: #7952b3; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* header */
.main-header {
	height:70vh;
	background: transparent no-repeat center;
	background-size: cover;
	background-attachment: fixed;
}

.main-header {
    background-image: url("{% block main_image_url %}https://static.igem.wiki/teams/4150/wiki/home/bigphoto.jpg{% endblock %}");
}

.main-header .transbox {
	background-color:#acacac;
	height:100%;
	width: 100%;

}

.main-header .header-title {
	display:block;

	color: #f5f5f5;/*a6b4d0;*/
	font-weight:900;
	font-size: 75px;
	font-family:'Open Sans';
	text-transform: uppercase;

	text-shadow: 5px 5px #132343;
	position: absolute; 
	height:fit-content;
	width:auto;
	max-width:90vw;
	margin:0;
	text-align:center;

	left: 50vw;
	top:35vh;
	transform:translate(-50%, -50%);

}
.lower {
	text-transform:none !important;
}

/* loader */
.loader {
  border: 0px solid #f5f5f5;
  border-radius: 50%;
  border-top: 5px solid #0f1626;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 0.7s linear infinite; /* Safari */
  animation: spin 0.7s linear infinite;

  position:fixed;
  display:block;
  top:50vh;
  left: 50vw;
  margin-top: -40px;
  margin-left: -40px;
  z-index:100;

}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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


.loader-background {
	position:fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	background-color:#f5f5f5;
	opacity: 0.9;
	z-index:100;
}

.main-container {
	padding:0 !important;
}

/* menu */
.navbar {
  background-color: rgb(252,248, 235);
}

.navbar .navbar-nav .nav-link {
  color: #23231A;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: #6B8E23;
}

.navbar .navbar-nav .active > .nav-link {
  color: #6B8E23;
}

.navbar-brand {
  color: #23231A;
}
.navbar-brand :hover,
.navbar-brand :focus {
  color: #6B8E23;
}

/*dirbar*/
.dirbar-container {
  padding: 20px;
  background-color: #f5f5f5;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.dirbar {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 30px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  margin-bottom: 200px;
  margin-top: 150px;
  padding-left: 20px;
}

.dirbar-container .dirbar div div {
  margin-bottom: 10px;
}

.dirbar-container .dirbar div div a {
  text-decoration: none;
  color: #333;
}

.dirbar-container .dirbar div div a:hover {
  color: #d4cbcb;
}

@media (max-width: 768px) {
  .dirbar-container .dirbar div {
	display: flex;
	flex-direction: column;
  }
  .image-container {
    padding: 7px 7px;
  }
}

@media (max-width: 480px) {
  .dirbar-container .dirbar div {
	display: flex;
	flex-direction: column;
  }
  .dirbar-container .dirbar div div a {
	font-size: 16px;
  }
  .image-container {
    padding: 5px 5px;
  }
}


html {
  scroll-padding-top: 130px;
}

/* abbrieviation-list */

.Abbreviations-list {
  list-style-type: none;  /* Remove default numbers */
}

.Abbreviations-list li::before {
  content: "•";          /* Add a black dot (bullet) */
  color: black;          /* Black dot color */
  font-size: 16px;       /* Adjust dot size */
  position: absolute;      /* Position arrow absolutely */
  left: -1.5em;            /* Position arrow to the left */
  top: 0;
}

/* arrow list */
.arrow-list, .Abbreviations-list {
  list-style-type: none;   /* Remove default list numbers */
  padding-left: 0;         /* Remove default padding */
  margin-left: 0;          /* Remove default margin */
  position: relative;      /* Enable relative positioning */
}

.arrow-list li, .Abbreviations-list li {
  margin-left: 1.5em;      /* Adjust list item position */
  position: relative;      /* Ensure list item is positioned relative to the pseudo-element */
}

.arrow-list li::before {
  content: "↓ ";           /* Add downwards arrow */
  color: black;            /* Color of the arrow */
  font-size: 16px;         /* Adjust arrow size */
  position: absolute;      /* Position arrow absolutely */
  left: -1.5em;            /* Position arrow to the left */
  top: 0;                  /* Align vertically with text */
}

.arrow-list li p, .Abbreviations-list li p {
  margin: 0;               /* Remove paragraph margins to prevent extra spacing */
  text-indent: 0;          /* Prevent additional text indent */
}


/* tables */


table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #e0f7fa; /* Light blue header background */
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

th {
  font-weight: bold;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Alternating row color */
}

tbody tr:hover {
  background-color: #ddd; /* Hover effect */
}

td {
  vertical-align: middle;
}


.Figure {
  font-family: "IBM Plex Mono", sans-serif;
  	font-weight: 500; /* thin weight */
  	font-size: 0.56rem;
  	font-style: normal;
    text-decoration: none;
}

.Figure:before {
  content: "";
  display: block;
  margin-left: -10px; /* adjust the value to match the blank space */
}

.note {
  font-weight: bold;
  font-size: 10px;
  text-decoration: none;
}

.fza .text-center ::before {
  content: "";
  display: block;
  margin-left: -2.9rem; /* adjust the value to match the blank space */
}


.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image {
  width: 30%;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image:hover {
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

.image-container .horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.image-gallery {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.gallery-image {
  width: 30%;
  margin: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.gallery-image:hover {
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}


.button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }}

  .accordion-button::after {
    content: none; /* Removes the default icon */
  }

  
.pill-button {
  background-color: #c4c8cb; /* Green background */
  border: none; /* Remove default border */
  color: white; /* White text */
  padding: 10px 30px; /* Size of the button */
  text-align: center; /* Center text */
  text-decoration: none; /* Remove underline */
  display: inline-block; /* Inline block for proper spacing */
  font-size: 16px; /* Text size */
  border-radius: 50px; /* Makes it pill-shaped */
  cursor: pointer; /* Pointer on hover */
  transition: background-color 0.3s ease; /* Smooth hover effect */
  margin-right: 30px;
}

.pill-button:hover {
    background-color: #a4a8ac; /* Darker green on hover */
}

.pill-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}