@charset "UTF-8";
*, *:before, *:after {box-sizing: border-box;}

:root {
    --textcolor:black;
    --accentcolor:#269;
    --lightaccentcolor:#9df;
    --reversecolor:#fff;
}

body>#speaker { float: left; }

#speaker { display: none; }

#speaker {
    background:var(--accentcolor);
    color:var(--reversecolor);
    margin:0;padding:0;
    line-height:1.5;
    font-size:10px;
    font-family:Trebuchet,sans-serif;
    margin:0 auto;padding:1.2rem;
    height:auto;
    min-width:200px;
    max-width:400px;
    background:var(--reversecolor);
    color:var(--textcolor);
    text-align:left;
    border:2px solid var(--accentcolor);
    border-radius:0 0 16px 16px;
    box-shadow:4px 4px 16px #333;
}
#speaker h1, #speaker h2 {
    color:var(--accentcolor);
    text-align:left;
}

#speaker p {font-size:1rem;}
#speaker a:link, #speaker a:visited {color:var(--accentcolor);}
#speaker a:hover {text-decoration:none;}

#rateFld {text-align:center;padding:0;margin:0 0 0 4px;}
#txtFld {display:block;font-family:inherit;}
button {
    -webkit-appearance:none;
    font-size:1rem;
    font-weight:normal;
    background:var(--lightaccentcolor);
    border-radius:12px;
    border:2px solid var(--accentcolor);
    color:var(--textcolor);
    cursor:pointer;
}
#speaker button:hover {
    color:var(--reversecolor);
    background:var(--accentcolor);
}
#speaker button:disabled, select:disabled {
    cursor:not-allowed;
    opacity:0.3;
}
#speaker select {
    background:var(--lightaccentcolor);
    color:var(--textcolor);
    width:auto;
    font-size:inherit;
    font-weight:normal;
    text-align:center;
    height:auto;
    border-radius:8px;
    margin:10px 0;
}
#speaker .uiunit {display:block;text-align:left;}
#warning {color:red;font-size:1rem;display:none;}