/* This hides the mobile notification for desktops and larger tablets */
.mobile-notification {
    display: none;
    text-align: center;
    background-color: #f9f9f9;
    color: black;
    padding: 20px;
    font-size: 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

/* This hides all other content on the page for mobile users and displays the mobile notification */
@media only screen and (max-width: 768px) {
    body > *:not(.mobile-notification) {
        display: none;
    }
    .mobile-notification {
        display: block;
    }
}


.mobile-notification button {
    padding: 10px 20px;
    border: none;
    background-color: #333; /* Dark grey background */
    color: #fff; /* White text */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.mobile-notification button:hover {
    background-color: #555; /* Slightly lighter grey for hover effect */
}


body.dark-mode {
    font-family: 'Arial', sans-serif;
    background-color: #111;
    color: #eee;
    margin: 0;
    padding: 0;
}

#teleprompter-controls {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.copyright-info {
    width: 100%;
    font-size: 20px;  /* Adjust to your preference */
    font-weight: bold;
    color: white;
    text-align: center;
    margin-top: 20px;  /* Adds some space above the text */
    margin-bottom: 20px;
}

.copyright-info a {
    color: white;
    text-decoration: none;  /* Removes the underline from the hyperlink */
}

.copyright-info a:hover {
    text-decoration: underline;  /* Adds underline on hover for better visibility and feedback */
}


/* Optional: If you want to add some space between individual controls */
#teleprompter-controls > * {
    margin-left: 10px;
}
button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.highlighted {
    background-color: #ffff99;  /* Yellow background */
    transition: background-color 1s;
}
#tooltip {
    top: 100%;  /* Positions it at the bottom of the textarea */
    left: 50%;  /* Centers it horizontally */
    transform: translateX(-50%);  /* Ensures it's perfectly centered */
    z-index: 10;  /* Ensures it appears above other elements */
}


#teleprompter {
    height: 470px;
    margin: 20px auto;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
    background-color: #000;
    color: #fff;
    padding: 20px;
}
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    border-bottom: 1px solid white;  /* This adds a white bottom border */
}

#su-logo {
    max-width: 150px;
    height: 150px;
    margin-right: 20px;
    margin-bottom: -27px;
    margin-top: -22px;
}

#elvis-logo {
    max-width: 70px;
    height: 70px;
    margin-right: 20px;
    margin-bottom: -27px;
    margin-top: -15px;
}

#countdown-timer {
    font-size: 30px;  /* Adjust as necessary */
    color: white;
    margin: 0 20px;  /* Some space around the timer */
}


textarea#content {
    width: 100%;
    height: calc(100% - 60px); /* Adjust as needed */
    border: none;
    outline: none;
    resize: none;
    background-color: #000;
    color: #fff;
    font-size: 24px;
    overflow-y: auto;
    padding: 20px;
    white-space: pre-line;
}

#content:not(:focus):empty::before {
    content: attr(data-placeholder);
    color: #aaa;  /* Placeholder text colour */
}

button {
    background-color: #444;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #555;
}

label {
    margin-right: 10px;
}

input[type="range"], input[type="number"] {
    margin: 0 10px;
}

input[type="number"] {
    width: 50px;
}

/* Webkit browsers like Chrome, Safari */
#teleprompter::-webkit-scrollbar {
    width: 10px;
}

#teleprompter::-webkit-scrollbar-track {
    background: #333;
}

#teleprompter::-webkit-scrollbar-thumb {
    background: #555;
}

#teleprompter::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Firefox */
#teleprompter {
    scrollbar-width: thin;
    scrollbar-color: #555 #333;
}

#controls-and-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    width: 80%; /* Matches the width of the teleprompter div */
    margin-left: auto;
    margin-right: auto;
}

.playback-controls {
    display: flex;
    gap: 10px;
}

#word-count {
    text-align: right;
    color: #aaa;
}


@media (max-width: 900px) {
    #teleprompter {
        max-width: 90%;
    }
}
/* Existing styles... */

#teleprompter-controls {
    display: flex;
    flex-wrap: wrap;  /* Allows items to wrap onto the next line */
    justify-content: space-between;
    align-items: center;
     padding: 10px 0;
    gap: 10px;
    flex-direction: column;}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    #teleprompter-controls {
        justify-content: center;  /* Center items on smaller screens */
    }
    
    #teleprompter-controls label, 
    #teleprompter-controls input, 
    #teleprompter-controls button {
        margin-bottom: 10px;  /* Add some space below each item for better touch accessibility */
        width: 90%;  /* Make items take up most of the screen width */
        max-width: 300px;  /* But not too wide on larger mobile devices */
    }
}
.playback-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 20px; /* Adjust as needed */
    margin-right: 5px;  /* Adjust as needed */
}

#scroll-top-btn {
    display: none; /* Initially hidden */
}

button i.fa-microphone {
    color: red;
    margin-right: 5px;  /* To create a small gap between the icon and the text */
}
.control-group {
    padding-left: 20px;  /* Adjust as needed */
    padding-right: 20px;  /* Adjust as needed */
}