body {
  font-family: 'Noto Sans', sans-serif;
}


.footer .icon-link {
    font-size: 25px;
    color: #000;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {
}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {
}

.publication-title {
    font-family: 'Google Sans', sans-serif;
}

.publication-authors {
    font-family: 'Google Sans', sans-serif;
}

.publication-venue {
    color: #555;
    width: fit-content;
    font-weight: bold;
}

.publication-awards {
    color: #ff3860;
    width: fit-content;
    font-weight: bolder;
}

.publication-authors {
}

.publication-authors a {
   color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
    text-decoration: underline;
}

.author-block {
  display: inline-block;
}

.publication-banner img {
}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    overflow: hidden;
    border-radius: 10px !important;
}

.publication-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.publication-body img {
}

.results-carousel {
  overflow: hidden;
}
.custom-width {
  flex: 0 0 auto;
  width: 1250px;
  /* width:  83.33%; 5/6 of the available width */
}
.results-carousel .item {
  /* margin: 5px; */
  overflow: hidden;
  /* padding: 20px; */
  font-size: 24;
  width: 100%;
  align-items: center;
}
.caption-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  width: 1150px;
}
.results-carousel video {
  margin: 0;
}

.slider-pagination .slider-page {
  background: #000000;
}

.eql-cntrb { 
  font-size: smaller;
}



/* video grid  */
.video-grid {
  /* display: grid; */
  /* grid-template-columns: repeat(3, 1fr); /* Adjust the number of columns as needed */
  /* gap: 1px; /* Adjust the gap between videos as needed */
}

.video-wrapper {
  display: inline-block;
  position: relative;
  width: 48%;
  /* height: 350px; /* Set the desired width */
  /* padding-bottom: 350px; */
  /* overflow: hidden; */
}


.video-wrapper video {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-wrapper .hover-video {
  display: none;
}

.video-wrapper .overlay-text {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(0, 0, 0);
  font-size: 18px;
  font-family: "Chalkduster";
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5); /* White color with transparency */
  padding: 0px; /* Padding around the text */
  border-radius: 10px; /* Rounded border radius */
}

.video-wrapper:hover .default-video {
  display: none;
}

.video-wrapper:hover .hover-video {
  display: block;
}

.video-wrapper:hover .overlay-text {
  opacity: 1;
}


.video-wrapper video::-webkit-media-controls {
  display: none !important;
}

.video-wrapper video::-webkit-media-controls-enclosure {
  display: none !important;
}

.video-wrapper video::-webkit-media-controls-panel {
  display: none !important;
}

.video-wrapper video::-webkit-media-controls-play-button {
  display: none !important;
}




.video-grid-wide {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Adjust the number of columns as needed */
  gap: 1px; /* Adjust the gap between videos as needed */
}

.video-warpper-wide {
  position: relative;
  width: 350px; /* Set the desired width */
  height: 350px;
  overflow: hidden;
}

.video-warpper-wide video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-warpper-wide .hover-video {
  display: none;
}

.caption-vid {
  display: inline-block;
}

.video-warpper-wide .overlay-text {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-family: "Chalkduster";
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
}

.video-warpper-wide:hover .default-video {
  display: none;
}

.video-warpper-wide:hover .hover-video {
  display: block;
}

.video-warpper-wide:hover .overlay-text {
  opacity: 1;
}


.video-warpper-wide video::-webkit-media-controls {
  display: none !important;
}

.video-warpper-wide video::-webkit-media-controls-enclosure {
  display: none !important;
}

.video-warpper-wide video::-webkit-media-controls-panel {
  display: none !important;
}

.video-warpper-wide video::-webkit-media-controls-play-button {
  display: none !important;
}

.carousel {
  display: flex;
  justify-content: center;
}

.img-fluid{
     /*height: 400px;*/
    width: auto;
    /*width: 576px;*/
    /*height: 640px;*/
    /*height: 100%;*/
    /* height: 80%;*/
    /*    width: 80%;*/
 }

.custom-video{
    width: 576px;
    height: 640px;
 }


.caption {
    font-family: Chalkduster;
    color: gray;
    width: auto;
    display: inline-block;
    padding: 11px 15px 11px 15px;
    border-radius: 10px;
}

.prompt{
    font-size: 19px;
/*    center align*/
    text-align: center;
}

  #videoCarousel{
     /*margin-top:5px;*/
     width: 650px;
     margin: auto;
 }



/* bootstrap 4 multi-col carousel */
#slick {
  /*display: none;*/

  &.slick-initialized {
    display: block;
  }

  /* .slick-list emulates .row */
  .slick-list {
    margin-left: -15px;
    margin-right: -15px;
  }

  .card-body{
    /*max-height:30px*/
    font-size: 90%;
  }

  /* .slick-slide emulates .col- */
  .slick-slide {
    /*max-width: 576px;*/
    padding-right: 15px;
    padding-left: 15px;
    cursor: initial;

    &:focus {
      outline: none;
    }

  }

  /* slick arrows */
  .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 20px;
    height: 20px;
    background: no-repeat 50%/100% 100%;
    text-indent: -999px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: .5;
    transition: opacity .5s ease;

    &:hover {
      opacity: 1;
    }

    &.slick-prev {
      left: 0;
      transform: translate(calc(-100% - 15px),-35%);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
    }

    &.slick-next {
      right: 0;
      transform: translate(calc(100% + 15px),-35%);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
    }
  }

  /* slick dots */
  .slick-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    padding: 0;
    list-style: none;
    z-index: 1;
    margin: 0;
    display: block;
    transform: translate(-50%,calc(100% + 15px));

    > LI {
      display: inline-block;
      margin: 10px 3px;

      BUTTON {
        display: block;
        width: 30px;
        height: 3px;
        text-indent: -999px;
        cursor: pointer;
        background: #212529;
        opacity: .5;
        transition: opacity .5s ease;
        padding: 0;
        overflow: hidden;
        border: 0;

        &:hover {
          opacity: 1;
        }
      }

      &.slick-active BUTTON {
        opacity: 1;
      }
    }
  }

}

.content table td, .content table th{
  border-width: 0 0 0;
}

#carousel {
  /* Default width for small screens or when no media query matches */
  width: 100%;

  /* Media query for screens with a minimum width of 768 pixels (adjust as needed) */
  @media screen and (min-width: 768px) {
    /* Set the width to 60% for larger screens */
    width: 60%;
  }
}

#metrics_image {
  /* Default width for small screens or when no media query matches */
  width: 100%;

  /* Media query for screens with a minimum width of 768 pixels (adjust as needed) */
  @media screen and (min-width: 768px) {
    /* Set the width to 60% for larger screens */
    width: 50%;
  }
}

.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
    overflow-x: auto;
    overflow-y: hidden;
}