body.theme {
    font-family: 'PT Sans', sans-serif;
}

button:focus {
    outline: none !important;
}

.theme #topPanel {
    height: 56px;
    padding: 0.5rem;
    padding-left: 28px;
    justify-content: start;
}

.theme #toggleDrawer {
    padding-right: 1.5rem;
    width: 3rem;
    justify-content: start;
}

.theme #topPanel {
    display: flex;
    position: absolute;
    flex-direction: row;
    align-items: center;
}

.theme #currentContext {
    width: initial;
    line-height: 2rem;
    font-size: 1.2rem;
    margin-left: 0.2rem;
    line-height: 2.2rem;
    letter-spacing: 0.05rem;
}

.theme .material-icons {
    font-size: 2rem;
}

.theme #toggleRecognition {
    bottom: 78px;
    right: 22px;
}

.theme .fa-microphone {
    font-size: 2rem;
}

.theme #contextData {
    margin-top: 56px;
    font-family: 'PT Sans', sans-serif;
}

.theme #properties {
    text-transform: capitalize;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.theme #properties li {
    margin: 0;
    margin-top: 7px;
    font-size: 0.85rem;
}

.theme #properties li:first-child {
    margin-top: 0;
}

.theme #dataToEnter {
    text-transform: capitalize;
}

.theme #tokens {
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: auto;
}

.theme #properties span.dataToEnterKey:after {
    content: ":"
}

.theme #dataToEnter {
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 30px;
}

.theme #dataToEnter li {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 1rem;
    height: 2.3rem;
    line-height: 2.3rem;
    padding-left: 5px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

.theme #dataToEnter span.dataToEnterValue {
    width: 57px;
    font-weight: bold;
}

.theme .chat #messages {
    font-size: 1.1rem;
    font-family: 'PT Sans', sans-serif;
}

.theme .message {
    border-radius: 10px;
}

/* theme 1 */

.theme1 .toolbar {
    background-color: #5EC6A3;
}

.theme1 #toggleRecognition {
    background-color: #5EC6A3;
}

.theme1 .message {
    background-color: #73CBD4;
}

.theme1 #properties {
    background-color: #003845;
}

.theme1 #properties span.dataToEnterValue  {
    font-weight: bold;
}

.theme1 #dataToEnter {
    background-color: #5E99C1;
}

.theme1 #dataToEnter li {
    border-bottom: 0;
}

.theme1 #contextData {
    background-color: #5E99C1;
}

/* theme 2 */

.theme2 .toolbar {
    background-color: #5EC6A3;
}

.theme2 #toggleRecognition {
    background-color: #FF826E;
}

.theme2 .message {
    background-color: #8398C5;
}

.theme2 #properties {
    background-color: #3A4152;
}

.theme2 #properties span.dataToEnterValue  {
    font-weight: initial;
    text-transform: uppercase;
}

.theme2 #dataToEnter li {
    border-bottom-color: rgba(128, 123, 130, 0.4);
}

.theme2 #contextData {
    background-color: #E2E1E0;
}

.theme2 #dataToEnter {
    background-color: #E2E1E0;
    color: black;
}

.theme2 #tokens {
    color: black;
}

.theme2 .helperPhrasesHeader {
    color: darkgreen;
}

.theme2 .helperPhrasesGroupName {
    color: darkcyan;
}

/* theme 3 */

.theme3 .toolbar {
    background-color: #5EC6A3;
}

.theme3 #toggleRecognition {
    background-color: #5EC6A3;
}

.theme3 .message {
    background-color: #A6D5DC;
}

.theme3 #properties {
    background-color: #3A4152;
}

.theme3 #properties span.dataToEnterValue  {
    font-weight: initial;
    text-transform: uppercase;
}

.theme3 #dataToEnter {
    background-color: #5B80AC;
}

.theme3 #dataToEnter li {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.theme3 #contextData {
    background-color: #5B80AC;
}

/* theme 4 */

.theme4 .toolbar {
    background-color: #FF826E;
}

.theme4 #toggleRecognition {
    background-color: #FF826E;
}

.theme4 .message {
    background-color: #5EC6A3;
}

.theme4 #properties {
    background-color: #545454;
}

.theme4 #dataToEnter {
    background-color: white;
}

.theme4 #contextData {
    background-color: white;
}

.theme4 #dataToEnter li {
    border-bottom-color: rgba(0, 0, 0, 0.4);
}

.theme4 #dataToEnter {
    background-color: white;
    color: black;
}

.theme4 #tokens {
    color: black;
}

.theme4 .helperPhrasesHeader {
    color: darkgreen;
}

.theme4 .helperPhrasesGroupName {
    color: darkcyan;
}


.theme4 #properties span.dataToEnterValue  {
    font-weight: bold;
}

/* theme 5 */

.theme5 .toolbar {
    background-color: #FF826E;
}

.theme5 #toggleRecognition {
    background-color: #818787;
}

.theme5 .message {
    background-color: #D5E6D6;
    color: #545454;
}

.theme5 #properties {
    background-color: #007785;
}

.theme5 #dataToEnter {
    background-color: white;
}

.theme5 #contextData {
    background-color: white;
}

.theme5 #dataToEnter li {
    border-bottom-color: rgba(84, 84, 84, 0.3);
}

.theme5 #dataToEnter {
    background-color: white;
    color: #545454;
}

.theme5 #tokens {
    color: #545454;
}

.theme5 .helperPhrasesHeader {
    color: darkgreen;
}

.theme5 .helperPhrasesGroupName {
    color: darkcyan;
}

.theme5 #properties span.dataToEnterValue  {
    font-weight: bold;
}

/* theme 6 */

.theme6 .toolbar {
    background-color: #818787;
}

.theme6 #toggleRecognition {
    background-color: #818787;
}

.theme6 .message {
    background-color: #A6D5DC;
    color: white;
}

.theme6 #properties {
    background-color: #5EC6A3;
}

.theme6 #dataToEnter {
    background-color: white;
}

.theme6 #contextData {
    background-color: white;
}

.theme6 #dataToEnter li {
    border-bottom-color: rgba(0, 0, 0, 0.2);
}

.theme6 #dataToEnter {
    background-color: white;
    color: black;
}

.theme6 #tokens {
    color: black;
}

.theme6 .helperPhrasesHeader {
    color: darkgreen;
}

.theme6 .helperPhrasesGroupName {
    color: darkcyan;
}

.theme6 #properties span.dataToEnterValue  {
    text-transform: uppercase;
}

/* theme 7 */

.theme7 .toolbar {
    background-color: #5EC6A3;
}

.theme7 #toggleRecognition {
    background-color: #5EC6A3;
}

.theme7 .message {
    background-color: #C2D1F2;
    color: #545454;
}

.theme7 #properties {
    background-color: #3365CB;
}

.theme7 #dataToEnter {
    background-color: white;
}

.theme7 #contextData {
    background-color: white;
}

.theme7 #dataToEnter {
    background-color: white;
    color: black;
}

.theme7 #tokens {
    color: black;
}

.theme7 .helperPhrasesHeader {
    color: darkgreen;
}

.theme7 .helperPhrasesGroupName {
    color: darkcyan;
}

.theme7 #properties span.dataToEnterValue  {
    font-weight: bold;
}

.theme7 .chat {
    background-color: #E6E8EC
}

.theme7 #messages {
    background-color: #E6E8EC
}

#themeThumb {
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.4);
}