/*
* Wordsworth Theme for GetSimple CMS
* 2015, Timbow
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* This file defines styles specific to this theme overiding skeleton defaults
*/


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
	font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.6;
	font-weight: 200;
	font-family: 'Helvetica Nueue', sans-serif;
	color: #222;
	padding-bottom: 4rem;
	  text-align: justify;
   }
  
  
  /* Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  h1, h2, h3, h4, h5, h6 {
	font-family: 'Helvetica Nueue', sans-serif;
	margin-bottom: 2rem;
	font-weight: 500; 
	  color: #363636;
	  text-align: center;
  }
  h1 { font-size: 3.6rem; line-height: 1.2;  letter-spacing: -.1rem;}
  h2 { font-size: 2.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 2rem; margin-top: 4rem;}
  h3 { font-size: 2.4rem; line-height: 1.3;  letter-spacing: -.1rem; }
  h4 { font-size: 2.2rem; line-height: 1.35; letter-spacing: -.08rem; }
  h5 { font-size: 2.0rem; line-height: 1.5;  letter-spacing: -.05rem; }
  h6 { font-size: 1.8rem; line-height: 1.6;  letter-spacing: 0; }
  
  /* p, ul, ol,  {
	  color: #666;
  } */
  
  /* Additional Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
	  /*	Blockquotes  */
  
  blockquote, blockquote p {
	  font-size: 1.7rem;
	  line-height: 2.4rem;
	  color: #777;
	  font-style: italic;
  }
  
  blockquote {
	  margin: 0 0 2.0rem;
	  padding: .9rem 2.0px 0 1.9rem;
	  border-left: 2px solid #ddd;
  }
	  blockquote cite { display: block; font-size: 1.2rem; color: #555; }
	  blockquote cite:before { content: "\2014 \0020"; }
	  blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
	  
	  /* Images */
  
  img, img.scale-with-grid {
	  max-width: 100%;
	  height: auto;
	  border: 0px;
  }
  
  video {
	  max-width: 100%;
	  height: auto;
  }
  
  li {
	  margin-bottom: 0rem
  }
  
  span {
	  font-style: inherit;
	  font-weight: inherit;
  }
  
	  /* Links */
	  
  a {
	  color: #990000;
	  text-decoration: none;
	  border-bottom: 1px solid #e1e1e1; }
	  
  a:hover {
	  color: #990000;
	  border-bottom: 1px solid #990000; }
  
  /*Theme Specific Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
  #container {
	  max-width: 60%;
	  padding-top: 2rem;
	  margin-bottom: 0rem;
  }
  
  header h1{
	  font-family: 'Helvetica Nueue', sans-serif;
	  font-weight: 700;
	  font-size: 6rem;
	  margin-bottom: 0.2rem;
	  float: left;
  }
  header h5.tagline {
	  font-family: 'Helvetica Nueue', sans-serif;
	  font-weight: 400;
	  font-size: 1.6rem;
	  font-style: italic;
	  float: left;
	  text-align: right;
	  width: 100%
  }
  
  header a, header a:hover, footer a {
	  text-decoration: none;
	  color: inherit;
  }
  
  header a, header a:hover, .nm_post_image a, .custom_display a {
	  border-bottom: none;
  }
  
  
  
  nav {
	  margin-bottom: 2rem;
  }
  
  nav ul {
	  text-align: center;
	  margin: 0;
  }
  
  nav li {
	  display: inline;
	  text-transform:uppercase;
	  font-size: 1.4rem;
	  line-height: 4rem
  }
  
  nav a {
	  color: inherit;
	  display: inline-block;
	  text-decoration:none;
	  padding:0 2rem;
	  border-bottom: none;
  }
  
  nav li a:hover, nav li a:focus, nav li.current a {
	  color: inherit;
	  border-bottom: 1px solid black;
  }
  
  aside img {
	  margin: 1rem;
  }
  
  nav hr, footer hr, aside hr{
	  margin-top: 0;
  }
  
  nav hr {
	  margin-bottom: 0;
  }
  
  footer hr, aside hr {
	  margin-bottom: 2rem;
  }
  
  footer small {
	  font-family: 'Helvetica Nueue', sans-serif;
	  text-align:center;
	  display: block;
  }
  
  
  /*News Manager Custom Display for News Homepage
  (Copies skeleton declarations onto post blocks)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
	  .my_recent {
		  width: 100%;
		  float: left;
		  box-sizing: border-box;
		  position: relative;
		  margin-bottom: 2.5rem;
	  }
  
	  .my_recent a:hover img {
		  box-shadow: 0 0 8px #777;
	  }
  
  /* For devices larger than 550px */
  @media (min-width: 550px) {
  
	  
	  .my_recent			{margin-left: 4%;}
  
	  .my_recent_1,
	  .my_recent_3		{margin-left: 0;}
	  
	  .my_recent_3,
	  .my_recent_4,
	  .my_recent_5		{ margin-bottom: 0;}
  
	   .my_recent_0 		{ width: 65.3333333333%; }
	  .my_recent_1,
	  .my_recent_2		{ width: 48%;            }
	  .my_recent_3,
	  .my_recent_4,
	  .my_recent_5		{ width: 30.6666666667%; }
	
	/* Offsets */
	  .my_recent_0        { margin-left: 17.3333333333%; }
	  
  }
  
	.my_recent h4 {
	  position: absolute;
	  left: 1%;
	  bottom: 10%;
	  color: white;
	  text-align: center;
	  text-shadow: 0 1px 0 black;
	  background-color: rgba(0, 0, 0, 0.4);
	  padding: 0.5rem;
	  margin: 0 auto;
	  }
  
	  
  /*News Manager Main News Page 
  –––––––––––––––––––––––––––––––––––––––––––––––––– */	
  
  /*removes page heading on demo page (where slug is 'all-posts')*/
  #all-posts section>h1 {
	  display: none;
  }
  
  .nm_post {
	  position: relative;
	  margin: 2rem 0;
	  content: "";
	  /*display: table;*/
	  clear: both;
  }
	
  .nm_post_image {
	  width: 48%;
	  height: auto;
	  /*float: left;*/
	  position: absolute;
	  right: 50%;
	  top: 0.5rem;
  }
  
  .nm_post_content,
  .nm_post_title,
  .nm_post_date {
	  margin-left: 52%;
  }
  
  /* For devices smaller than 550px */
  @media (max-width: 550px) {
  
  .nm_post_image {
	  width: 36%;
	  height: auto;
	  position: static;
	  float: left;
	  margin-right: 1rem;
  }
  
  .nm_post_content,
  .nm_post_title,
  .nm_post_date {
	  margin-left: 0;
  }
  
  }
  
  /* BEGIN AUTHOR BLOCK */
  
  .author-block-sm {
	  display:inline-block;
	  font-size: 1.3rem;
  }
  
  .author-block {
	  display: ineline-block;
	  line-height: 1.3rem;
  }
  
  .text-author {
	  padding: 0;
	  margin-bottom: 1.0rem;
	  color: hsl(121, 100%, 36%) !important
  }
  
  .text-author:hover {
	  border-bottom: 1px solid hsl(121, 100%, 36%) !important;
  }
  
  /* END AUTHOR BLOCK */
  
  /* BEGIN BODY TEXT STYLES */
  .coda-inline-title {
	  color: #bf5700;
	  font-size: 2.6rem;
	  font-weight: 400;
  }
  
  .text-caption {
	  font-size: 1.3rem;
	  font-style: italic;
	  color: #777;
	  text-align: center;
  }
  
  .text-content {
	  font-size: 1.8rem;
	  line-height: 2.4rem;
	  text-align: justify;
	  color: #777;
  }
  
  .code-block {
	font-family: 'Courier New', monospace;
	background-color: #f4f4f4;
	padding: 10px;
	border: 1px solid #ccc;
	margin: 10px 0;
	  font-size: 1.2rem;
  }
  
  .bullet-content {
	  font-size: 1.8rem;
	  line-height: 2.0rem;
	  color: #777;
	  text-align: left;
	  font-weight: 200;
  }
  
  /* END BODY TEXT STYLES */
  
  /* BEGIN PLOT STYLES */
  
  .pc-plot-container {
	  margin: 0 auto;
	  max-width: none;
	  height: 92%;
	  /* height: 100%; */
  }
  
  .progress-container {
	  display: flex;
	  align-items: center; /* Align items vertically */
	  height: 8%;
  }
  
  .toggle-button {
	  width: 60px; /* Set a fixed width */
	  height: 30px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 0;
  }
  
  .progress-bar {
	  flex-grow: 1; /*Allow progress bar to grow and fill available space*/
	  position: relative;
	  height: 30px;
	  background-color: #f3f3f3;
	  border-radius: 0px;
	  border: none;
	  padding: 0;
  }
  
  .progress-start, .progress-end, .progress-current {
	  position: absolute;
	  height: 100%;
	  text-align: center;
	  line-height: 30px;
	  font-weight: bold;
	  color: #fff;
  }
  
  .progress-current {
	  left: 0%;
	  right: 0%;
	  background-color: #2196F3;
  }
  
  .draggable-circle {
	  width: 30px;
	  height: 30px;
	  background-color: white;
	  border-radius: 50%;
	  position: absolute;
	  cursor: pointer;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
  }
  .bbox-container {
	  display: block;
  }
  
  input[type="checkbox"] {
	  display: inline-block;
  }
  label {
	  display: inline-block;
	  vertical-align: middle;
	  /* font-size: 1.6rem; */
  }
  
  /* END PLOT STYLES */
  
  /* BEGIN CHECKBOX STYLES */
  .custom-checkbox {
	  display: inline-block;
	  position: relative;
	  padding-left: 0px; /* change to enable checkbox*/
	  margin-bottom: 0;
	  cursor: pointer;
	  font-size: 18px;
  }
  
  .custom-checkbox input[type="checkbox"] {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
  }
  
  .checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 25px;
	  width: 25px;
	  background-color: #eee;
	  border-radius: 5px;
  }
  
  .custom-checkbox input[type="checkbox"]:checked + .checkmark {
	  background-color: #007bff;
  }
  
  .checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
  }
  
  .custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
	  display: block;
	  margin: 0;
  }
  
  .custom-checkbox .checkmark:after {
	  left: 9px;
	  top: 5px;
	  width: 5px;
	  height: 10px;
	  border: solid white;
	  border-width: 0 3px 3px 0;
	  transform: rotate(45deg);
  }
  
  #toggleButton {
	  position:absolute;
	  width: 0;
	  display: none;
  }
  
  #toggleCheckmark {
	  position: absolute;
	  width: 0;
	  display: none;
  }
  
  /* END CHECKBOX STYLES */
  
  /* BEGIN TOC STYLES */
  
  .toc-container {
	  display: flex;
	  flex-wrap: wrap;
  }
  
  .column {
	  flex: 1;
	  min-width: 150px;
	  margin-right: 20px;
  }
  
  .column h2 {
	  margin-top: 0;
  }
  
  /* END TOC STYLES */
  
  /* BEGIN DOCUMENTATION STYLES */
  
  .img-container {
	  display: flex;
	  flex-wrap: wrap;
	  max-width: 40%;
	  margin: auto;
  }
  
  .img-container img {
	  width: 100%;
  }
  
  .img-paragraph-container {
	  display: grid;
	  align-items: center; 
	  text-align: justify;
	  grid-template-columns: 10fr 8fr;
	  column-gap: 5px;
  }
  
  /* END DOCUMENTATION STYLES */
  
  /* BEGIN MEDIA SMALL FORMAT STYLES */
  
  /* For devices smalled than 800px */
  @media (max-width: 800px) {
	  #container {
		  max-width: 100%;
		  padding-top: 2rem;
		  margin-bottom: 0rem;
	  }
  
	  .container {
		  width: 100%;
	  }
  
	  .text-content {
		  font-size: 1.5rem;
	  }
  
	  .img-container {
		  display: flex;
		  flex-wrap: wrap;
		  max-width: 40%;
		  margin: auto;
	  }
  
	  .bullet-content {
		  font-size: 1.2rem;
		  line-height: 2.0rem;
		  color: #777;
		  text-align: left;
		  font-weight: 200;
	  }
  }
  
  @media (max-width: 600px) {
	  #container {
		  max-width: 95%;
		  padding-top: 2rem;
		  margin-bottom: 0rem;
	  }
  
	  .container {
		  width: 95%;
	  }
  
	  .text-content {
		  font-size: 1.3rem;
	  }
  
	  .img-container {
		  display: flex;
		  flex-wrap: wrap;
		  max-width: 100%;
		  margin: auto;
	  }
  
	  .bullet-content {
		  font-size: 1.3rem;
		  line-height: 2.0rem;
		  color: #777;
		  text-align: left;
		  font-weight: 200;
	  }
  }
  
  /* For devices larger than 800px */
  @media (min-width: 600px) {
	  nav hr, footer hr, aside hr{
		  margin-left: -10%;
		  margin-right: -10%;
	  }
  }
  
  /* END MEDIA SMALL FORMAT STYLES */
  
  /* BEGIN FRONT PAGE STYLES */
  .icon-container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 20px;
	}
  
	.icon-button {
	  font-size: 24px; /* Icon size */
	  color: #333; /* Icon color */
	  text-decoration: none;
	  margin: 0 15px; /* Spacing between buttons */
	  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for color and background */
	  padding: 10px 20px; /* Padding inside the button */
	  border: 1px solid transparent; /* Button border */
	  border-radius: 5px; /* Rounded corners */
	  text-align: center; /* Center the text icon */
	  display: inline-block; /* Necessary for the width to wrap content */
	}
  
	.icon-button:hover, .icon-button:focus {
	  color: #fff; /* Text color on hover/focus */
	  background-color: #007bff; /* Background color on hover/focus */
	  border-color: #007bff; /* Border color on hover/focus */
	  text-decoration: none; /* No underline on hover/focus */
	}
  
	.icon-button i {
	  margin-bottom: 4px; /* Space between icon and text */
	  display: block; /* Ensures that the icon is above the text */
	}
  
	/* You can customize the hover color for each button based on brand */
	.icon-button.github:hover, .icon-button.github:focus {
	  background-color: #6e5494;
	  border-color: #6e5494;
	}
  
	.icon-button.dataset:hover, .icon-button.dataset:focus {
	  background-color: #28a745; /* Example green background for datasets */
	  border-color: #28a745;
	}
  
	.icon-button.youtube:hover, .icon-button.youtube:focus {
	  background-color: #FF0000;
	  border-color: #FF0000;
	}
  
	.icon-button.arxiv:hover, .icon-button.arxiv:focus {
	  background-color: #B31B1B;
	  border-color: #B31B1B;
	}
  
	/* Responsive text size */
	@media (max-width: 768px) {
	  .icon-button {
		font-size: 20px;
	  }
	}
  
  /* END FRONT PAGE STYLES */

.carousel-control-prev,
.carousel-control-next {
	background-color: rgba(0, 0, 0, 0.5); /* Dark with 50% transparency */
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
}

.my-hr {
	color: grey; /* Color of the line */
	background-color: grey; /* Background color of the line */
	height: 1px; /* Thickness of the line */
	border: none; /* Removes the default border */
	width: 100%; /* Width of the line */
	margin: 3px auto; /* Centering the line and adding space around it */
}

.video-description{
	font-size: 12px;
	font-style: italic;
}