.circular-progress {

            position: relative;

            width: 120px;

            height: 120px;

        }

        .circular-progress circle {

            fill: none;

            stroke-width: 8;

            stroke-linecap: round;

            transform: rotate(-90deg);

            transform-origin: 50% 50%;

        }

        .progress-background {

            stroke: #e5e7eb;

        }

        #progressBar {
        height: 20px;
        background-color: #4CAF50;
        width: 0%;
        border-radius: 2px;
        transition: width 0.3s ease-in-out;
        position: relative;
        }

        #progressContainer {
        height: 20px;
        border-radius: 2px;
        transition: width 0.3sease-in-out;
        position: relative;
        }
        
        .shadow-text {

            text-shadow: 0 2px 4px rgba(0,0,0,0.5);

        }

        /* Added styles for horizontal scrolling */

        .scroll-container {

            overflow-x: auto;

            scrollbar-width: thin;

            scrollbar-color: #3b82f6 #e5e7eb;

        }

        .scroll-container::-webkit-scrollbar {

            height: 8px;

        }

        .scroll-container::-webkit-scrollbar-track {

            background: #e5e7eb;

            border-radius: 4px;

        }

        .scroll-container::-webkit-scrollbar-thumb {

            background: #3b82f6;

            border-radius: 4px;

        }

        select#voiceSelect {

            padding: 5px;

        }

        div#imageUploadBox {

    align-content: center;

}