h1{
  font-size: 35px;
}

h2{
  font-size: 28px;
  text-align: center;
}

pre{
  margin-bottom: 0;
}

.title {
  padding-top: 3rem;
  text-align: center;
}

.bmvc_label{
  text-align: center;
  font-size: 20px;
}

.authors{
  font-size: 20px;
  text-align: center;
}

.center_video{
  margin: 0 auto;
  display: block;
  width: 99%;
  max-width: 100%;
  height: auto;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 95%; */
}

.codebox {
        /* color: #343a40; */
        /* background-color: #f8f9fa; */
        padding-top: 20px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
        font-size: 0.9em;
        max-width: 100%;
        width: 100%;
        display: inline-block;
        text-align: left;
}


.column {
  float: left;
  width: 50%;
  /* padding: 10px; */
  height: auto;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

div.polaroid {
  /* width: 250px; */
  /* text-align: center; */
  border: none;       /* Removes any border */
  box-shadow: none;   /* Removes the drop shadow */
  border-radius: 10px; /* Add this line */
  overflow: hidden;    /* Add this line to ensure content rounds with the border */ 
}

.pos_left {
  position: absolute;
  left: 20px;
}
.pos_right {
  position: absolute;
  right: 20px;
}


/* Container to hold the new buttons */
.image-nav-container {
    display: flex;
    justify-content: center;  /* This is the changed line */
    align-items: center;
    padding: 15px 0;
    gap: 20px;              /* This adds a nice space between the buttons */
}
/* The new custom button style */
.image-nav-btn {
    background-color: #ffffff;    /* White background */
    border: 1px solid #ddd;       /* Light grey border */
    color: #333;                 /* Dark text */
    padding: 8px 18px;
    border-radius: 50px;          /* This creates the "pill" shape */
    font-weight: 600;             /* Bolder text */
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: all 0.2s ease-in-out; /* Smooth hover transition */
    user-select: none; /* Prevents text selection when clicking */
}

/* On hover, the button "pops" */
.image-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Stronger shadow on hover */
    border-color: #bbb;
}

/* Click effect */
.image-nav-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}


/* Force the Dics slider container to fill its parent */
.b-dics {
    width: 100% !important; /* Force override JavaScript inline styles */
}

.video-button-grid {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on small screens */
    justify-content: center; /* Centers the buttons */
    gap: 10px; /* Adds a nice space between each button */
    padding: 15px 0 20px 0; /* Adds some spacing above and below the grid */
}

/* Creates a 16:9 aspect-ratio box */
.video-wrapper {
    position: relative;
    padding-bottom: 30.25%; /* 16:9 ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    background-color: #000; /* Black background for letterboxing */
    border-radius: 10px; /* Add this line */
}

/* Makes the video fill the wrapper */
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures video fits, adding black bars if needed */
}

/* Container for the video titles */
.video-titles-wrapper {
    position: absolute;     /* Position it relative to the .video-wrapper */
    top: 0;                 /* Pin it to the top */
    left: 0;
    width: 100%;
    z-index: 10;            /* Make sure it's on top of the video */
    
    display: flex;
    justify-content: space-around;
    padding: 10px 0;        /* Adjust padding as needed */
}

/* Style for each individual video title */
.video-title-item {
    flex: 1;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;         /* Change color to white to show on black bars */
    font-size: 1.25rem;
}

/* Replaces .k-percent-wrapper */
.k-percent-breakout {
    /* 1. Set the width using the variable */
    width: var(--k-percent-width, 90vw);
    
    /* 2. Move the element's left edge to the center of the page */
    position: relative;
    left: 50%;

    /* 3. Pull the element back by half of its *own* width */
    transform: translateX(-50%);
}

.full-width-wrapper {
    /* 1. Full-width breakout */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;

    /* 2. Set the background color from your image */
    background-color: #f8f8f8;

    /* 3. Add padding for the content inside */
    padding-top: 0px;
    padding-bottom: 10px;
}

/* Style for the active/selected video button */
.image-nav-btn.active-btn {
    background-color: #333;
    color: #ffffff;
    border-color: #333;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transform: none; /* No 'pop' effect */
}

/* Optional: Make the active button not change on hover */
.image-nav-btn.active-btn:hover {
    background-color: #333;
    border-color: #333;
    transform: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}


.styled-list {
    list-style-type: disc;  /* This adds the bullets back */
    margin-top: 5px;       /* Adds a little space below your text */
    padding-left: 40px;     /* This adds the indentation */
}

.text-justify {
    text-align: justify;
}