/* dollx3 main style sheet */

@import url(reset.css);

/* Log-in */
.unsuccessful-log-in-box {
    width: 300px;
    margin: 50px auto;
    padding: 10px;
    border: 2px solid red;
    text-align: center;
    color: red;
}

.login_form_box {
    width: 300px;
    margin: 50px auto 0 auto;
    border: 2px solid green;
    padding: 20px;
}

    .form_header_box {
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 30px;
    }
    
    .login_form_row {
        margin-bottom: 20px;
    }

        .login_form_row label {
            font-weight: bold;
            font-size: 1.3rem;
        }
    
        .login_textbox {
            font-size: 1.1rem;
            padding: 5px;
            color: #999;
        }
        
        .login_submit {
            border: none;
            background: darkgreen;
            color: #fff;
            padding: 10px;
            font-size: 1.4rem;
            font-weight: bold;
            cursor: pointer;
        }

            .login_submit:hover {
                background: green;
            }

/* Voice Control */
.voice-control-container {

}

    .voice-control-head {
        margin: 30px auto;
        text-align: center;
    }

        .voice-control-head h1 {
            font-size: 3rem;
            font-weight: bold;
        }

    .voice-control-buttons-box {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }

        .listen-button {
            width: 400px;
            background: green;
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
        
        .stop-listening-button {
            width: 400px;
            background: darkorange;
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
        
        .device-stop-button {
            width: 400px;
            background: darkred;
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            padding: 10px;
            border: none;
            cursor: pointer;
        }

    .voice-control-status {
        font-size: 1.5rem;
        color: blue;
        text-align: center;
        margin: 15px;
    }
        
    .voice-control-received-command {
        background: #f6f6f6;
        margin-top: 20px;
        padding: 20px;
        text-align: center;
    }

        .voice-control-received-command h2 {
            font-size: 2rem;
            font-weight: bold;
        }

        .voice-control-received-command pre {
            font-style: italic;
        }