/**
 * Tatoeba Project, free collaborative creation of multilingual corpuses project
 * Copyright (C) 2010  HO Ngoc Phuong Trang <tranglich@gmail.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http: //www.gnu.org/licenses/>.
 */

/*
 * --------------------------------------------------------------------
 *
 *   autocompletion.css
 *
 * --------------------------------------------------------------------
 */

#autocompletionDiv {
    position: absolute;
    width: 100%;
}

#autocompletionDiv ul {
    border: 1px solid #CCC;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 22px;
    z-index: 999;
    background: #FFF;
}

#autocompletionDiv .selected {
    background: #FFE684;
    color: #FFF;
}

#autocompletionDiv a {
    display: block;
    padding: 2px 2px 2px 10px;
    text-indent: -10px;
}


/*
 * --------------------------------------------------------------------
 *
 *   current_contributors.css
 *
 * --------------------------------------------------------------------
 */

 .currentContributor {
    border: 1px solid #DDD;
    margin: 5px;
    padding: 5px;
}

.currentContributor .image,
.currentContributor .info,
.currentContributor .activityBar {
    display: inline-block;
    vertical-align: middle;
}

.currentContributor .image {
    margin-right: 10px;
}

.currentContributor .image img {
    display: block;
}

.currentContributor .info {
    width: 155px;
}

.currentContributor .username {
    font-size: 1.2em;
    line-height: 20px;
}

.currentContributor .score {
    display: inline-block;
    color: #777;
    font-size: 0.8em;
    line-height: 15px;
}

.activityBar {
    border: 1px solid #CCC;
    width: 10px;
    margin: 2px 0;
}

.activityBar .box{
    height: 5px;
    margin: 1px;
}

.activityBar .level0 {
}

.activityBar .level1 {
    background: #00CBE7;
}

.activityBar .level2 {
    background: #00DA3C;
}

.activityBar .level3 {
    background: #F4F328;
}

.activityBar .level4 {
    background: #FD8603;
}

.activityBar .level5 {
    background: #DF151A;
}


/*
 * --------------------------------------------------------------------
 *
 *   Logs
 *
 * --------------------------------------------------------------------
 */

#logs md-list-item {
    padding: 5px 15px;
    border-width: 12px;
    border-left-style: solid;
}

html[dir="rtl"] #logs md-list-item {
    border-right-style: solid;
    border-left-style: none;
}

#logs md-list-item.sentence-insert {
    border-color: #4CAF50;
}

#logs md-list-item.sentence-delete {
    border-color: #F44336;
}

#logs md-list-item.sentence-update {
    border-color: #FFEB3B;
}

#logs md-list-item.sentence-obsolete {
    border-color: #e0e0e0;
}

#logs md-list-item.link-insert {
    border-color: #03a9f4;
}

#logs md-list-item.link-delete {
    border-color: #ff9800;
}

#logs md-list-item.md-2-line {
    border-bottom: 1px solid #f1f1f1;
}

#logs .lang {
    margin: 0 10px;
}

#logs .content {
    text-align: left;
}

html[dir="rtl"] #logs .content {
    text-align: right;
}

/*
 * Logs hovering feature
 */

.sentences_set .highlighted {
    background-color: #f7d6b2;
}

#logs .link-insert.hovered {
    cursor: pointer;
    background-color: #fafafa;
}

#logs .link-insert.historyHighlighted {
    background-color: #eeeeee;
}


/*
 * --------------------------------------------------------------------
 *
 *   Comments
 *
 * --------------------------------------------------------------------
 */

.comment {
    margin: 40px 0px;
}

.comment .md-title {
    font-weight: 700;
}

.comment .md-title a {
    color: inherit;
}

.comment .md-subhead {
    max-width: 340px;
    cursor: help;
}

.comment.sentence {
    background: #fafafa;
    padding: 10px 16px;
    margin-bottom: -38px;
}

.comment.sentence .info {
    font-size: 14px;
    margin: 0 10px;
}

.comment.sentence .lang {
    margin: 0 10px;
    display: block;
}

.comment.sentence .text {
    margin: 5px 10px;
    text-align: left;
}

html[dir="rtl"] .comment.sentence .text {
    text-align: right;
}

.comment.inappropriate .warning-info p {
    padding: 0 10px;
}

.comment.inappropriate {
    opacity: 0.6;
}

.comment.inappropriate .content {
    color: #d50000;
}

/*
 * --------------------------------------------------------------------
 *
 *   message.css
 *
 * --------------------------------------------------------------------
 */

.message {
    border-left: 9px solid #cae2aa;
    border-bottom: 1px solid #ddd;
    margin: 40px 0;
}

.message a:hover {
    color: #DD8800;
}


/*
 * Message header (general)
 */

.message .header {
    position: relative;
}

.message .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.message .header li {
    display: inline-block;
}

.message .header a {
    background-color: #EAF2E6;
    border: 1px solid #D9EAAB;
}

.message .header a:hover {
    background-color: #FFF1DD;
    border: 1px solid #FFD7A3;
}


/*
 * Message header (info)
 */

.message .info {
    display: inline-block;
    bottom: 0;
}

.message .other {
    display: inline-block;
    vertical-align: top;
    padding-top: 5px;
}

.message .avatar {
    border: 1px solid #ccc;
    border-bottom: none;
    border-left: none;
    padding: 10px 10px 3px 10px;
    background-color: #fff;
    margin-bottom: -1px;
    border-top-right-radius: 4px;
    display: inline-block;
    vertical-align: top;
}

.message .avatar img {
    display: inline-block;
}

.message .avatar a, .message .avatar a:hover {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    display: block;
    width: 36px;
    height: 36px;
}

.message .username {
    display: inline-block;
}

.message .username > :first-child {
    display: inline-block;
    border-left: none;
    text-align: center;
    padding: 0 10px;
    min-width: 120px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    font-size: 16px;
}

.message .username a:hover {
    border-left: none;
}

.message .pm {
    display: inline-block;
    margin-left: 2px;
    margin-bottom: 2px;
    vertical-align: bottom;
}

.message .pm a {
    border: none;
    display: block;
    background: url('../../img/pm.svg') center;
    background-size: cover;
    width: 18px;
    height: 18px;
}

.message .pm a:hover {
    border: none;
    background: url('../../img/pm-hover.svg') center;
    background-size: cover;
}

.message .date {
    margin-left: 10px;
    padding-right: 30px;
    margin-top: 2px;
    color: #999;
    bottom: 0;
    font-size: 12px;
    min-width: 120px;
    text-align: center;
}

.message .date .created,
.message .date .edited {
    cursor: help;
}


/*
 * Message header (menu)
 */

.message .menu {
    position: absolute;
    right: 5px;
    bottom: 0;
    display: inline-block;
}

.message .menu li {
    vertical-align: bottom;
}

.message .menu li a{
    display: block;
    border-bottom: none;
    padding: 2px 5px;
    margin: 0 2px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.message .menu li a:hover {
    border-bottom: none;
}

.message .menu img {
    margin: 2px 0;
}


/*
 * Message body
 */

.message .body {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.message .body .sentence {
    position: relative;
    border-bottom: 1px dotted #ddd;
    padding: 10px;
}

.message .body .sentenceText {
    color: #666;
    margin: 0 5px 0 7px;
}

.message .body .langIcon {
    display: inline-block;
    vertical-align: middle;
}

.message .body .content {
    padding: 20px;
}

.message .body > .textarea {
    padding: 20px 20px 0 20px;
}


/*
 * Inappropriate messages
 */

.inappropriate .body {
    color: #CC2828;
}

.inappropriate .warningInfo {
    color: #999;
    padding: 10px 10px 10px 47px;
    background: url(../../img/warning.svg) no-repeat 7px center;
}

.inappropriate .separator {
    border-top: 1px dotted #ccc;
}

.inappropriate .header a {
    color: #bbb;
    text-decoration: none;
}
.inappropriate .username a, .inappropriate .menu a {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
}

.inappropriate .username a {
    border-left: none;
}


/*
 * Form
 */
.message.form .title {
    display: inline-block;
    vertical-align: bottom;
    font-size: 16px;
    margin: 10px;
    font-weight: bold;
}

.message.form textarea {
    width: 100%;
    height: 200px;
}

.message.form .body, .message.form .avatar {
    background-color: #f1f1f1;
}


/*
 * --------------------------------------------------------------------
 *
 *   navigation.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Navigation links (previous, next, random)
 */
.navigation {
    margin: 40px 20px 10px 20px;
}

.navigation .options {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation .options li {
    display: inline;
    padding: 3px 6px;
    margin-right: 10px;
}

.navigation .active {
    background: #D3F3B9;
}

.navigation .active a{
    color: #257D0C;
}

.navigation .inactive {
    color: #849684;
    background: #F1F1F1;
}


/*
 * Navigation "go to" form
 */
#SentenceGoToSentenceForm {
    float: right;
}

#SentenceGoToSentenceForm input#SentenceSentenceId {
    width: 80px;
    text-align: right;
}

#SentenceGoToSentenceForm div.submit, #SentenceGoToSentenceForm div.input, #UserSearchForm div.submit, #UserSearchForm div.input {
    display: inline;
}


/*
 * --------------------------------------------------------------------
 *
 *   new_sentence_form.css
 *
 * --------------------------------------------------------------------
 */

/*
 * New sentence form
 */
#SentenceText {
    width: 100%;
    font-size: 1em;
}

#newSentence .submit, #newSentence .input {
    display: inline;
}

/*
 * --------------------------------------------------------------------
 *
 *   pagination.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Pagination
 */

.paging {
    margin: 20px 0;
    text-align: center;
}

.numbers a {
    padding: 5px 8px;
    margin: 3px;
    background: #EEEEEE;
    color: #757575;
}

.numbers a:hover {
    background: #E0E0E0;
    color: #757575;
}

.paging .disabled {

    background: #EEE;
    color: #BDBDBD;
}

.paging .current {
    padding: 5px 8px;
    margin: 3px;
    background: #4caf50;
    color: #FFFFFF;
    font-weight: bold;
}

.paging .numbers {
    padding: 0 10px;
    font-size: 10.5pt;
}

a.prev {
    background: none;
}

a.next {
   background: none;
}

md-icon.disabled.material-icons {
   background: none;
}

/*
 * --------------------------------------------------------------------
 *
 *   private_message_form.css
 *
 * --------------------------------------------------------------------
 */

#PrivateMessageSendForm {
    margin-top: 0;
}

#PrivateMessageSendForm .pmFields {
    margin: 20px 20px -10px 20px;
}

#PrivateMessageSendForm label {
    width: 100px;
    display: block;
    float: left;
}

#PrivateMessageSendForm .input {
    margin: 3px 0;
}

#PrivateMessageSendForm .input input {
    width: 455px;
    border: 1px solid #ddd;
}


/*
 * --------------------------------------------------------------------
 *
 *   profile_pic.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Profile picture
 */
#pimg {
    padding: 1px;
    width: 130px;
}

#pimg img {
    width: 128px;
    height: 128px;
}


/*
 * --------------------------------------------------------------------
 *
 *   sentences_group.css
 *
 * --------------------------------------------------------------------
 */


/*
 * Sentence menu
 */
.sentences_set .menu {
    border-bottom: 1px dotted #CCC;
    margin: 2px;
    padding: 5px;
}

.sentences_set .menu li {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 8px;
}

.sentences_set .menu .adopt-item {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin: 2px;
    font-weight: bold;
    font-size: 14px;
}

.sentences_set .menu .is-native {
    font-weight: normal;
    color: #999999;
}

.sentences_set .menu li.adopt {
    margin: 0px;
    float: right;
}

.sentences_set .menu li a {
    display: block;
}

.sentences_set .menu .option a,
.sentences_set .menu .option,
.sentences_set .link.button {
    color: #aaaaaa;
    height: 16px;
    width: 16px;
}

.sentences_set .menu .option a:hover,
.sentences_set .menu .option:hover,
.sentences_set .link.button:hover {
    color: #222;
}

.sentences_set .menu a.disabled,
.sentences_set .menu a.disabled:hover,
.sentences_set .menu .adopt-item.uneditable {
    color: #CCC;
}

.listOfLists {
    width: 150px;
}

.draggableLink {
    box-shadow: inset 0 0 2px 2px #f8ad15;
}

.sentences_set .menu .correctness {
    display: inline-block;
    width: 100px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.sentences_set .menu .correctness .option {
    margin: 0 3px;
}

.sentences_set .menu .correctness .selected {
    opacity: 1;
}


/*
 * Sentence
 */
.addTranslations .navigationIcon,
.sentence .navigationIcon {
    width: 25px;
    height: 25px;
    border-radius: 15px;
    display: inline-block;
}

.addTranslations .navigationIcon {
    vertical-align: top;
}

.sentence {
    padding: 4px 0px;
}

.sentences_set .sentence:hover {
    background: #f1f1f1;
}

.sentence .column {
    display: inline-block;
    vertical-align: text-top;
    margin: 0 4px;
}

.sentence .nav.column {
    height: 25px;
}

.sentence .lang.column {
    height: 25px;
    position: relative;
}

.sentence .content.column {
    width: 520px;
}

.sentence .content.column.add{
    font-style: italic;
    width: 604px;
    font-size: 14px;
    vertical-align: middle;
}

.sentence .content.column.remove {
    width: 532px;
}


.sentence .audio.column {
}

.sentence .link.button {
    float: left;
    margin: 4px 7px 0 5px;
    height: 16px;
}

.sentence .copy.column {
    float: right;
    height: 16px;
}
.sentence .copy-btn {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 5px;
}

.sentence .copy-btn.copied {
    background: greenyellow;
}

.sentence .languageFlag {
    margin-top: 2px;
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
}

.sentence .audioButton {
    margin-top: 3px;
}

.sentence .favorite-page.column{
    list-style-type: none;
}

.sentence .favorite-page.column a{
    color: gray;
    width: 24px;
    height: 24px;
} 

.sentence .favorite-page.column svg:hover{
    color: black;
} 

.translations .text {
    margin-top: 3px;
}


/*
 * Transcriptions
 */

.transcriptions .menu li {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 8px;
}

.transcriptions .menu .option {
    color: #aaaaaa;
    height: 16px;
    width: 16px;
}

.transcriptions .menu .option a:hover,
.transcriptions .menu .option:hover {
    color: #222;
}

.transcriptions .menu a.disabled,
.transcriptions .menu a.disabled:hover {
    color: #CCC;
}

.hidden {
    display: none;
}

.transcribe-buttons {
    display: inline-block;
    padding-left: 0;
}

.script-icon {
    color: #222;
    background: #CCC;
    border-radius: 25%;
}

.script-icon.altscript {
    color: #CCC;
    background: #222;
}

.menu .option.script {
    width: 20px;
    height: 20px;
}

.menu .review svg {
    position: absolute;
}

.menu .review svg.check {
    display: none;
}

.menu .review:hover svg.check {
    cursor: pointer;
    display: block;
}

.transcriptions .menu {
    border: none;
    margin: 0;
    padding: 0;
}

.transcriptions .column {
    margin: 0;
}

.transcriptions .transcription {
    color: #A1A1A1;
    width: 500px;
    padding-left: 8px;
    vertical-align: middle;
}

.mainSentence .transcription {
    font-size: 80%;
}

.mainSentence .transcription.altscript {
    font-size: 100%;
}

.transcriptions .script img {
    display: block;
    font-size: 7px;
}

.inlined-icon {
    display: inline;
    vertical-align: text-bottom;
    height: 16px;
    width: 16px;
}

.validation-errors {
    color: #222;
    background: #FF2020;
    font-size: 13px;
    border-radius: 10px;
    padding: 10px;
}

.validation-errors ul {
    margin: 5px 0;
}

/*
 * Flag
 */
.editableFlag:hover {
    cursor: pointer;
    border-top: 1px solid #AAA;
    border-left: 1px solid #AAA;
}

.selectLang {
    display: none;
    position: absolute;
    top: -3px;
    left: 40px;
}



/*
 * Main sentences
 */

.mainSentence, .mainSentence .editableSentence textarea {
    font-size: 24px;
}

.mainSentence .navigationIcon {
    color: #98CB4A;
    margin-top: 3px;
}

.mainSentence:hover .navigationIcon {
    color: #FFF;
    background: #98CB4A;
}

.mainSentence .languageFlag {
    margin-top: 4px;
}


/*
 * Translations
 */

.indirectTranslation {
    color: #998778;
}

.directTranslation .navigationIcon {
    color: #64C8E6;
}

.directTranslation:hover .navigationIcon {
    color: #FFFFFF;
    background: #64C8E6;
}

.indirectTranslation .navigationIcon {
    opacity: 0.6;
    color: #998778;
}

.indirectTranslation:hover .navigationIcon {
    color: #FFFFFF;
    background: #998778;
}


/*
 * Editing sentences
 */
.sentences_set div.submit {
    display: inline;
}

.sentences_set div.input {
    display: inline;
}



/*
 * Edit in place
 */
.edit, .edit_transcription {
   cursor: pointer;
}

.editableSentence button{
    padding: 1px 20px;
    min-width: 120px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    float: right;
    margin-top: 10px;
}

.editableSentence button[type="cancel"]{
    margin-right: 20px;
    display: inline-block;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    color: #000000;
}

.editableSentence button[type="submit"] {
    background-color: #4caf50;
    border: 1px solid #4caf50;
    color: #fff;
}

.editableSentence button[disabled]{
    background-color: #ccc;
    border-color: #aaa;
}

.editableSentence textarea{
    margin: 0;
    padding: 0;
}

.editableSentence {
   overflow:hidden;
}

.translations .editableSentence textarea {
    font-size: 15px;
}

/*
 * Link to a sentence number
 */
input.sentenceId {
    width: 120px;
    text-align: right;
}


/*
 * Add Translations
 */
.addTranslations {
    display: none;
    padding:4px 0 24px;
    font-size: 16px;
    margin-bottom:10px;
}

.addTranslations input {
    display: inline;
}

.addTranslations textarea  {
    display: inline;
    height: 75px;
    width: 100%;
    font-size: 16px;
}

.addTranslations button{
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    min-width: 120px;
    padding: 3px 30px;
    float:right;
    line-height: 18px;
}

.addTranslationsTextInput {
    width: 100%;
    font-size: 14px;
    margin-bottom: 10px;
}

.addTranslations .navigationIcon {
    margin-left: 4px;
    margin-right: 5px;
    margin-top: 0px;
    color: #64C8E6;
}

.addTranslations .form {
    width: 530px;
    display: inline-block;
}

.addTranslations .languageSection label,
.addTranslations .languageSection select,
.addTranslations .languageSection img {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.addTranslation_buttons{
    margin-top: 15px;
}

/*
 * Audio
 */
.audioButton {
    display: block;
    width: 20px;
    height: 20px;
}

.audioAvailable {
    background: url(../../img/audio.svg);
}

.audioUnavailable {
    background: url(../../img/audio-unavailable.svg);
    opacity: 0.3;
}

#audioPlayer {
    width: 0;
    height: 0;
}


/*
 * Sentence correctness
 */
.correctnessNegative1 {
    background: url("/img/warning-small.svg") no-repeat;
    padding-right: 25px;
    color: #EE0000;
}

.mainSentence .correctnessNegative1 {
    background-position: right 5px;
}

.translations .correctnessNegative1 {
    background-position: right 2px;
}

.correctness-info .ok,
.sentences_set .menu .ok.selected a {
    color: #00AA00;
}
.correctness-info .not-ok,
.sentences_set .menu .not-ok.selected a {
    color: #EE0000;
}
.correctness-info .unsure,
.sentences_set .menu .unsure.selected a {
    color: #FF9900;
}


/*
 * Ajax messages
 */

.sentences_set .error {
    padding: 8px 8px 8px 32px;
    border: #E1E1E1 1px solid;
    background: #F1F1F1 url(/img/error_16x16.png) no-repeat 8px center;
}


/*
 * collapsible sentence lists
 */
.more {
    display: none;
}

div.showLink, div.hideLink {
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
}

div.showLink {
    background: rgba(0, 102, 170, 0.1);
    color: #06A;
    padding: 2px 10px;
}

div.hideLink {
    display: none;
    background: #06A;
    color: #fff;
    padding: 3px 10px;
}


/*
 *
 */

.sentence-and-translations {
    padding: 10px;
}

.sentence-and-translations .text,
.sentence-and-translations .lang {
    margin: 3px 0;
    padding: 0 10px;
}

.sentence-and-translations .sentence {
    font-size: 24px;
}

.sentence-and-translations .md-subheader {
    background: transparent;
}

.sentence-and-translations .md-subheader ._md-subheader-inner {
    padding: 10px 5px;
}

.sentence-and-translations .direct.translations .chevron {
    color: #000000;
}

.sentence-and-translations .indirect.translations .chevron {
    color: #bdbdbd;
}

.sentence-and-translations .sentence:hover,
.sentence-and-translations .translation:hover {
    background-color: #f5f5f5;
}

.sentence-and-translations .lang img {
    display: block;
}

.sentence-and-translations .not-reliable .text {
    color: #D32F2F;
}


/*
 * --------------------------------------------------------------------
 *
 *   sentences_stats.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Sentences statistics
 */
.sentencesStats {
    margin: 5px 0;
}

.stat {
    overflow: auto;
    margin: 5px 0;
}

.stat .total,
.stat .langCode {
    display: inline-block;
}

.stat .langCode {
    display: none;
}

.stat .total {
    width: 200px;
    margin: 0 5px;
}

.stat img {
    float: left;
}


/*
 * --------------------------------------------------------------------
 *
 *   status_colors.css
 *
 * --------------------------------------------------------------------
 */

.status1 {
    color: red;
}

.status2 {
    color: orange;
}

.status3 {
    color: #00B712;
}

.status4 {
    color: #42B0FF;
}


/*
 * --------------------------------------------------------------------
 *
 *   tool_form_and_result.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Tool form and result
 */
#ToolQuery {
    width: 100%;
    height: 150px;
}

#ToolFuriganaForm {
    font-size: 16px;
    margin: 20px;
}

#ToolFuriganaForm fieldset {
    border: none;
}

#ToolFuriganaForm legend {
    display: inline;
}

#ToolFuriganaForm div.submit, #ToolFuriganaForm p {
    text-align: center;
}

#ToolFuriganaForm * {
    font-size: 16px;
}

#conversion {
    font-size: 20px;
    margin: 20px;
    padding: 10px 0;
}


/*
 * --------------------------------------------------------------------
 *
 *   wall_messages.css
 *
 * --------------------------------------------------------------------
 */

.wall .message {
    border-left: none;
    border-bottom: none;
}

.wall .message .body {
    border-right: none;
}

.root .message .header {
    border-right: 1px solid #fff;
    margin-right: -1px;
}

.root .message, .replies .message {
    margin: 5px 0 0 0;
    padding-bottom: 15px;
}

.topThread {
    border-left: 9px solid #cae2aa;
    border-bottom: 1px solid #ddd;
    margin: 40px 0;
    border-right: 1px solid #ddd;
}

.thread {
    border-left: 7px solid #eaf2e6;
    margin-left: 2px;
    padding-top: 1px;
}

.new.thread {
    border-left: 7px solid #D3F2A9;
    background: #E8FFCC;
}

.wall .toggleRepliesButton {
    cursor: pointer;
    display: inline-block;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.wall .showReplies {
    background: #06A;
    color: #fff;
    padding: 3px 10px;
}

.wall .hideReplies {
    background: rgba(0, 102, 170, 0.1);
    color: #06A;
    border: 1px solid rgba(0, 102, 170, 0.2);
    border-left: none;
    padding: 2px 10px;
}


/*
 * --------------------------------------------------------------------
 *
 *   Buttons
 *
 * --------------------------------------------------------------------
 */

.form .button {
    display: inline-block;
    min-width: 120px;
    padding: 2px 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin-left: 20px;
    font-size: 16px;
    box-sizing: border-box;
}

.form .button.submit {
    background-color: #4caf50;
    border: 1px solid #4caf50;
    color: #fff;
}

.form .button.cancel {
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    color: #000000;
}

/*
 * --------------------------------------------------------------------
 *
 *   Sort
 *
 * --------------------------------------------------------------------
 */

.sortBy {
    text-align: center;
    margin: 20px;
}



/*
 * --------------------------------------------------------------------
 *
 *   Tags
 *
 * --------------------------------------------------------------------
 */

.tag {
    display: inline-block;
    border-bottom: 1px solid #DDD;
    border-right: 1px solid #DDD;
    background: #FFE684;
    padding: 2px 8px;
    margin: 5px;
    border-radius: 5px;
}



/*
 * --------------------------------------------------------------------
 *
 *   Languages
 *
 * --------------------------------------------------------------------
 */

.usersLanguages .languageInfo {
    margin: 0;
    padding: 0;
}

.usersLanguages td {
    padding: 5px;
}

.languageLevel {
}

.languageLevel.unknown {
    color: #AAAAAA;
}

.languageLevel .level {
    background: #06A;
    width: 20px;
    height: 100%;
    display: inline-block;
}

.warning-add-language {
    font-size: 16px;
    padding: 10px 15px;
    margin: 10px;
    background: #F1F1F1;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
}

.warning-add-language .text {
    text-align: left;
    margin-bottom: 20px;
}


.warning-add-language {
    text-align: right;
}


/*
 * --------------------------------------------------------------------
 *
 *   Lists
 *
 * --------------------------------------------------------------------
 */

.listSummary td {
    padding: 5px;
    border-top: 1px dotted #DDD;
}

.listSummary .count {
    color: #777;
    background: #E5E5E5;
    float: right;
    padding: 10px 0;
    min-width: 45px;
    text-align: center;
    font-size: 1.2em;
}

.listSummary .name {
    font-size: 1.2em;
    min-width: 250px;
}

.noNameMinLength .name{
    width:400px;
}


.noNameMinLength .spacer{
    width: 60%;
}

.listSummary .creator {
    padding: 3px 10px;
    font-style: italic;
    color: #444;
}


.listSummary .date {
    width: 120px;
    text-align: center;
    color: #aaaaaa;
}

.listSummary .createdDate{
    text-align:left;
}

.listSummary .lastUpdatedDate .date{
    text-align:right;
    margin-right: 10px;
}

.noBorder td{
    border-top:none;
}

.listSummary .icon {
    color: #777777;
}

.listSummary .icon {
    width: 16px;
    height: 16px;
}

.listSummary.inactiveList a {
    color: #AAAAAA;
}


/*
 * --------------------------------------------------------------------
 *
 *   Loader
 *   http://codepen.io/bernethe/pen/dorozd
 *
 * --------------------------------------------------------------------
 */

.loader {
    display: inline-block;
    border: 4px rgba(0, 0, 0, 0.25) solid;
    border-top: 4px rgba(0, 0, 0, 1) solid;
    border-radius: 50%;
    -webkit-animation: spCircRot .6s infinite linear;
    animation: spCircRot .6s infinite linear;
}
@-webkit-keyframes spCircRot {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@keyframes spCircRot {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

.loader-small {
    width: 11px;
    height: 11px;
    border-width: 3px; 
}

.sentence-loader {
    width: 20px;
    height: 20px;
    margin: 2px 0 0 10px;
}

.translation-loader {
    display: block;
    margin: 0px auto;
    width: 30px;
    height: 30px;
    border-width: 6px;
}

.block-loader {
    display: block;
    margin: 40px auto;
    width: 50px;
    height: 50px;
    border-width: 8px;
}