/* for screenshot */
    .fullscreen {
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
    }

    .uk-checkbox {
        transform: scale(1.1);
    }

    /* Navbar styling */
    .uk-navbar-container {
        background-color: #fff; /* Clean white background */
        /*border-bottom: 1px solid #e0e0e0;  Subtle bottom border for separation */
        padding: 0 10px; /* Add padding for spacing */
    }

    /* Navbar alignment adjustments */
    .uk-navbar-right {
        display: flex;
        align-items: center; /* Center vertically */
    }

    /* Icon button styles */
    .video-lab-tools button {
        border: none;
        background: none;
        padding: 5px;
        border-radius: 50%; /* Rounded icon buttons */
        transition: background-color 0.3s, color 0.3s; /* Smooth hover transitions */
    }

    /* Hover effect for icon buttons */
    .video-lab-tools button svg:hover {
        fill: #4a90e2; /* White icons on hover for better visibility */
        cursor: pointer;
    }
    
    /* main content styling */
    .video-lab-main-content {
        margin-left: 50px; /* Leave space for the vertical navbar */
        width: calc(100% - 60px); /* Remaining width */
        height: 93vh; 
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
    }

    /* video player styling */
    iframe { /* div element with id video-lab-film hosts the YT player instance by youtube iframe api */
        width: 95%; 
        height: 95%; 
        border: 2px solid #ddd; /* Subtle border for the iframe */
        border-radius: 15px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    }
    
    /* Sidebar styling */
    .sidebar {
        height: 95%; /* Same as iframe height */
        width: 33%; /* One third of iframe width */
        border-radius: 15px;
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        padding: 15px;
        overflow-y: auto; /* Scroll if content overflows */
    }
    
    .video-lab-tools button {
        border-radius: 50%;
        padding: 5px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s, background-color 0.3s;
    }
    .video-lab-tools button.uk-button-default {
        background-color: #f1f3f6;
        color: #4e5a6a;
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    .video-lab-tools button.uk-button-default:hover {
        background-color: #d0d9e3;
        transform: translateY(-2px);
    }
    .video-lab-tools button.uk-button-default:active {
        background-color: #a0b5d4;
        transform: translateY(0);
    }
    
    /* placeholder styling */
    .video-lab-tools input[type='text']::placeholder {
        color: #888;           /* Subtle placeholder color */
        font-size: 16px;
        font-style: italic;    /* Optional: italicized text for better distinction */
    }
    .video-lab-tools textarea::placeholder {
        white-space: pre-line; /* Preserve line breaks in the placeholder */
        line-height: 1.5;      /* Adjust line spacing for readability */
        color: #888;           /* Subtle placeholder color */
        font-size: 16px;
        font-style: italic;    /* Optional: italicized text for better distinction */
    }
    .input-error-message {
        margin-top: 0;
        color: #ff0000;
        font-size: 12px;
        font-family: sans-serif;
    }
    
    
    /* pad list item styling */
    .video-lab-pad-list-item {
        display: flex;
        flex-direction: row;
        padding: 10px;
        border-bottom: 1px solid #b5b5b5; /* Preferred gray color */
        gap: 10px;
        text-decoration: none;
        color: inherit;
    }

    .video-lab-pad-list-item-timestamp {
        font-size: 0.9rem;
        font-weight: bold;
        white-space: nowrap; /* Prevent line wrapping */
        width: 60px;
    }

    .video-lab-pad-list-item-description {
        flex: 1; /* Let the description take up the remaining space */
        font-size: 0.85rem;
        font-weight: bold;
        color: #4a4a4a;
        font-family: sans-serif;
    }
    .video-lab-pad-list-item-description:hover {
        background-color: #f7f7f7; /* Light hover background */
        cursor: pointer;
    }
    .video-lab-pad-list-item-delete {
        background: none;
        border: none;
        font-size: 1rem;
        cursor: pointer;
        color: #b5b5b5; /* Use preferred gray color */
        margin-left: 10px;
        padding: 0;
        align-self: center; /* Align with other items */
        transition: color 0.2s;
    }
    .video-lab-pad-list-item-delete svg:hover {
        fill: #ff0000; /* Highlight on hover */
    }
    
    /* Scrollbar Styling */
    #video-lab-pad-sidebar::-webkit-scrollbar,
    textarea::-webkit-scrollbar	{
        width: 8px;
    }
    #video-lab-pad-sidebar::-webkit-scrollbar-thumb,
    textarea::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 8px;
    }
    #video-lab-pad-sidebar::-webkit-scrollbar-thumb:hover,
    textarea::-webkit-scrollbar-thumb:hover	{
        background-color: #555;
    }

    /* delete modal styling */
    .delete-modal {
        border-radius: 12px; 
        /*overflow: hidden; /* Prevents child elements from breaking border-radius */
    }

    .delete-item-name {
        font-weight: bold;
    }

    /* playlist modal styling */
    .playlist-modal-dialog {
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        width: 360px; /* Fixed width */
        max-height: 500px; /* Fixed height */
        display: flex;
        flex-direction: column;
    }

    .playlist-modal-body {
        flex: 1;
        overflow-y: auto; /* Enables scrolling */
        padding: 20px;
    }

    .playlist-modal-search-container {
        position: relative;
        margin-bottom: 10px;
    }
    .playlist-modal-search-input {
        width: 100%;
        padding: 10px 35px 10px 12px;
        border-radius: 6px;
        border: 1px solid #ccc;
        outline: none;
        transition: border-color 0.3s;
    }
    .playlist-modal-search-input:focus {
        border-color: #999;
    }
    .playlist-modal-search-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #777;
        pointer-events: none;
    }

    .playlist-modal-playlist-list {
        padding: 10px 0;
        max-height: 260px;
        overflow-y: auto; /* Enables scrolling when content overflows */
        margin-top: 10px; /* Ensures the scroll bar starts at the playlist items, not the title */
        padding-top: 0px; /* Removes any extra spacing above the first item */
    }
    .playlist-modal-playlist-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background 0.2s;
        cursor: pointer;
    }
    .playlist-modal-playlist-item:hover {
        background: #eceff1;
    }

    .playlist-modal-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-radius: 0 0 12px 12px;
    }

    .playlist-modal-create-playlist-container {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 5px;
    }
    .playlist-modal-create-playlist-container .uk-input {
        flex: 1;
        border-radius: 6px;
        height: 40px;
    }
    .playlist-modal-create-playlist-container .uk-button {
        border-radius: 6px;
        height: 40px;
        padding: 0 15px;
        font-size: 18px;
    }