/* Neomorphic Styles */
        body {
            background-color: #e0e0e0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: auto;
            font-family: Arial, sans-serif;
            padding: 20px;
        }

textarea {
    height:300px;
}

        textarea, select, button {
            width: 100%;
            max-width: 600px;
            margin-bottom: 5px;
            padding: 10px;
            border-radius: 10px;
            border: 1px solid black;
            outline: none;
            font-size: 16px;
            color: #333;
            background: #e0e0e0;
            box-shadow: 9px 9px 16px #bebebe, -9px -9px 16px #ffffff;
            transition: all 0.3s ease;
        }

        textarea:focus, select:focus, button:focus {
            box-shadow: inset 9px 9px 16px #bebebe, inset -9px -9px 16px #ffffff;
        }

        button {
            cursor: pointer;
            font-weight: bold;
        }

        button:active {
            box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
        }

        #log-box {
            margin-top: 5px;
            width: 100%;
            max-width: 600px;
            height: 200px;
            overflow-y: auto;
            background-color: #e0e0e0;
            padding: 10px;
            border-radius: 10px;
            font-size: 14px;
            box-shadow: inset 9px 9px 16px #bebebe, inset -9px -9px 16px #ffffff;
            border: 1px solid black;
            color: #333;
        }

        #progress {
            margin-top: 5px;
            font-weight: bold;
            color: #333;
        }

        #progress-bar {
            margin-top: 1px;
border:1px solid black;
            width: 80%;
            max-width: 600px;
            height: 20px;
            border-radius: 10px;
            background: #e0e0e0;
            box-shadow: inset 9px 9px 16px #bebebe, inset -9px -9px 16px #ffffff;
            position: relative;
        }

        #progress-bar-inner {
            height: 100%;
            border-radius: 10px;
            background: linear-gradient(145deg, #96c93d, #76b852);
            box-shadow: 9px 9px 16px #bebebe, -9px -9px 16px #ffffff;
            width: 0;
            transition: width 0.3s ease;
        }
 
 
#audio-container {
    text-align: center;
    display: flex;
            flex-direction: column;
}

#audio-container audio {
    width: 90vw;
            
            
}

#audio-container a {
     display: block;
            width: 90vw;
         
            margin: 10px 0;
            text-align: center;
            padding: 10px;
            border-radius: 10px;
            background: #e0e0e0;
            box-shadow: 9px 9px 16px #bebebe, -9px -9px 16px #ffffff;
            font-weight: bold;
                    
}

#audio-container a:hover {
    text-decoration: underline;
}
 
 
/* Style for the usage table */
.usage-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

.usage-table th, .usage-table td {
    border: 1px solid #ddd; /* Add border color */
    padding: 8px;
    text-align: center;
}

.usage-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.usage-table td {
    background-color: #fff;
}

/* Optional: Add border to the table itself */
.usage-table {
    border: 1px solid #000; /* Table border color */
}

 
 
        
        /* Flexbox for API and Voice Selector */
.select-container {
    display: flex;
    gap: 10px; /* Optional: adds space between the selectors */
    align-items: center;
    justify-content: center;
}



/* Optional: Adjust widths of the select elements */
.select-container select {
    flex: 1;
    max-width: 300px;
}


    
        .hidden {
            display: none;
        }
        #usage-bar {
            width: 100%;
            background-color: #ddd;
            border-radius: 5px;
            margin: 10px 0;
        }
        .usage-bar-inner {
            height: 20px;
            background-color: #4caf50;
            width: 0;
            border-radius: 5px;
        }
        .usage-container {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }