@keyframes readBackAnimation {
    0%   {background-color: #87cefa;}
    50%  {background-color: #3333ff;}
    100% {background-color: #87cefa;}
}

#mainDiv
{
    border: 2px solid cornflowerblue;
    background-color: aliceblue;
    display: inline-block;
    padding: 10px 10px 16px 10px;
    margin: 5px;
    border-radius: 16px;
}

#settingsDiv
{
    border: none;
    background-color: #f4f0e4;
    display: inline-block;
    margin: 5px 20px 5px 20px;
    padding: 2px;
    border-radius: 10px;
}

#languageSelect
{
    color: black;
    background-color: white;
    margin: 5px 9px 5px 9px;
    padding: 2px 5px 2px 5px;
    border: 1px solid gray;
    border-radius: 7px;
}

#recognitionButton
{
    width: content-box;
    min-width:70px;
    margin: 5px 25px 5px 5px;
    padding: 2px 5px 2px 5px;
    border: 1px solid #bbbbbb;
    border-radius: 7px;
    background-color: #f9f9f9;
}

#readBackButton
{
    width: content-box;
    min-width:70px;
    margin: 5px 5px 5px 25px;
    padding: 2px 5px 2px 5px;
    border: 1px solid #bbbbbb;
    border-radius: 7px;
    background-color: #f9f9f9;
}

#onDiv
{
    border: none;
    background-color: green;
    display: inline-block;
    margin: 2px;
    padding: 5px 9px 5px 9px;
    border-radius: 10px;
    color: white;
}

#offDiv
{
    border: none;
    background-color: red;
    display: inline-block;
    margin: 2px;
    padding: 5px 9px 5px 9px;
    border-radius: 10px;
    color: white;
}

#readBackDiv
{
    display: inline-block;
    width: fit-content;
    margin: 2px;
    padding: 10px;
    border: 2px dotted #3333ff;
    border-radius: 10px;
    color: white;
    background-color: #87cefa;
    animation-name: readBackAnimation;
    animation-duration: 2s;
    animation-iteration-count: 10;
}

#errorsDiv
{
    border: 1px solid lightcoral;
    background-color: white;
    display: inline-block;
    padding: 5px;
    margin: 5px;
    border-radius: 7px;
}

#emptyMessageDiv
{
    float: left;
    border: 1px dotted gray;
    background-color: ghostwhite;
    color: gray;
    display: inline-block;
    padding: 5px 9px 5px 9px;
    border-radius: 10px;
}

div.phrases
{
    float: left;
    border: 1px dashed cadetblue;
    display: inline-block;
    margin: 4px;
    padding: 4px 8px 4px 8px;
    border-radius: 10px;
}

div.phrase
{
    border: 1px solid white;
    background-color: palegreen;
    display: block;
    margin: 2px 0px 2px 0px;
    padding: 1px 10px 1px 10px;
    border-radius: 7px;
}

div.error
{
    border: none;
    background-color: yellow;
    color: red;
    display: block;
    margin: 4px;
    padding: 4px 8px 4px 8px;
    border-radius: 5px;
}

span.readBack
{
    border: 1px dotted white;
    margin: 5px;
    padding: 2px;
    border-radius: 3px;
}