html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.plain {
    text-decoration: none;
    position: relative;
    font-weight: 600;
}

.plain:hover {
     text-decoration: underline;
}
.plain:active,.plain:visited, .plain:focus{
    outline:dotted;
}

    .plain::after {
        content: ">"; /* Unicode of Bootstrap's chevron-right icon */
        margin-left: 10px;
        vertical-align: -.125em;
        position: absolute;
    }



/* Make the focus visible with a smaller blue dotted line around the icons */
.carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-control-next:focus .carousel-control-next-icon {
    border: 2px dotted #007bff; /* Blue dotted border around the icon */
    padding: 2px; /* Padding around the icon for space inside the dotted border */
    background-color: transparent; /* Ensure no background is applied to the icon */
}

/* Optional: Smooth transition for focus effect */
.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon {
    transition: border 0.3s ease, padding 0.3s ease;
}

/* Styling for the play/pause button */
#playPauseButton {
    background-color: transparent; /* Transparent background */
    border: none; /* No border */
    color: black; /* Black color for the button */
    font-size: 16px; /* Font size for the icon */
    cursor: pointer; /* Pointer cursor on hover */
}

.carousel-controls {
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: center; /* Center the controls horizontally */
    align-items: center; /* Vertically align the elements */
    gap: 15px; /* Space between the play button and the indicators */
    margin-top: 20px; /* Add spacing above the controls */
    z-index: 10; /* Ensure it's on top of other elements */
}

#focus-link {
    display: block;
    margin: 10px;
    color: blue;
    font-size: 12px;
}