.timer-box {
  position: fixed;
  left: -10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  background-color: rgba(255, 255, 0, 0.5);
  color: black;
  padding: 5px 10px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: left 0.5s; /* Smooth transition for sliding effect */

}

.timer-box p {
  font-size: 18px;
  margin-bottom: 8px;
}

.timer-box button {
  padding: 3px 6px;
  margin-right: 6px;
}
.timer-box.closed {
    left: -100%; /* Adjust value as needed to hide timer */
}

#toggleTimerButton {
    width: 30px; /* Width of the handle */
    height: 30px; /* Height of the handle */
    background: #333;
    position: absolute;
    color: rgba(255, 255, 255, 1);
    top: 10px; /* Adjust as needed */
    right: -40px; /* Adjust so it's outside the timer box */
    /* Style as needed */
}
.timer-handle {
    background: #333; /* Background of the handle */
    position: fixed;
    top: 50%; /* Center it vertically, or adjust as per your design */
    left: 0; /* Adjust if you want it slightly offscreen */
    line-height: 20px; /* Center the '+' vertically */
    cursor: pointer;
    transform: translateX(-100%); /* Hide it behind the left edge */
    transition: transform 0.5s; /* Smooth transition for sliding effect */
     display: flex; /* Use flexbox for centering */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Align items horizontally */
    /* Ensure the handle is large enough to fit the icon, adjust as necessary */
    width: 30px; /* Width of the handle */
    height: 30px; /* Height of the handle */
    /* Other styling */
}
.timer-handle-icon  {
    /* Style the icon specifically */
    font-size: 20px !important; /* Smaller font size for the icon, adjust as needed */
    color: rgba(255, 255, 255, 1) !important; /* Solid white for high contrast */
}

.close-timer-icon {
   font-size: 20px !important; /* Smaller font size for the icon, adjust as needed */
    color: rgba(255, 255, 255, 1) !important; /* Solid white for high contrast */
}
.timer-box.closed + .timer-handle {
    transform: translateX(0%); /* Slide in when timer box is closed */
}
    /* Style for the dropdown container */
    .video-dropdown-box-container {
        position: relative;
        display: inline-block;
    }

    /* Style for the dropdown button */
    .video-dropdown-box-button {
        background-color: purple;
        color: white;
        padding: 12px;
        border: none;
        cursor: pointer;
    }

    /* Style for the dropdown content */
    .video-dropdown-box-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        width: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    /* Style for iframes within dropdown content */
.video-dropdown-box-content iframe {
        width: 500px;  /* Default width */
        height: 281px;  /* Default height */
        margin: 5px auto;  /* Top and bottom margin: 5px, left and right: auto */
        border: 2px solid black;
        display: block;  /* Necessary for margin: auto to work */
    }
.video-dropdown-box-content iframe {
            width: 100%;  /* Full width of the parent container */
            height: auto;  /* Automatically calculated based on aspect ratio */
            min-width: 300px;  /* Minimum width */
     }
/* Close button style */
.video-content-close-button {
    background-color: red;
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
}