.portaltype-seantis-translators-translator {
    #formfield-form-widgets-references_by_authorities textarea,
    #formfield-form-widgets-native_languages textarea,
    #formfield-form-widgets-spoken_languages textarea,
    #formfield-form-widgets-written_languages textarea,
    #formfield-form-widgets-qualifications textarea,
    #formfield-form-widgets-other_certificates textarea,
    #formfield-form-widgets-notes textarea {
        height: 8em;   
    }
}

.seantis-translators-translator-list {
    table td:nth-child(6) {
        text-align: right;
    }
}

.seantis-translators-translator-list {
    /* German only for now, but the whole product really is.. if this changes,
    the easiest way would be to translate here in CSS (using body[lang="en"]).
    
    Albeit a more practical than pretty solution.

    It's not that easy to translate the content itself, since the list output
    is meant to be content and is as such not translatable using gettext.
    */

    $mobile-text: "Natel";
    $mobile-bg: #3b7883;
    $mobile-fg: #fff;

    $private-text: "Privat";
    $private-bg: #d5b05d;
    $private-fg: #fff;

    $work-text: "Geschäft";
    $work-bg: #d5685d;
    $work-fg: #fff;

    .mobile-phone:before,
    .private-phone:before,
    .work-phone:before {
        font-size: 1em;
        white-space: nowrap;
        line-height: 1em;
        display: inline-block;
        padding: 1px 2px;
        border-radius: 2px;
        margin-right: 5px;
    }

    .mobile-phone:hover,
    .private-phone:hover,
    .work-phone:hover {
        font-weight: bold;
    }

    .mobile-phone:before {
        background-color: $mobile-bg;
        color: $mobile-fg;
        content: str-slice($mobile-text, 1, 1);
    }
    .mobile-phone:hover:before {
        content: $mobile-text
    }

    .private-phone:before {
        background-color: $private-bg;
        color: $private-fg;
        content: str-slice($private-text, 1, 1);
    }
    .private-phone:hover:before {
        content: $private-text;
    }

    .work-phone:before {
        background-color: $work-bg;
        color: $work-fg;
        content: str-slice($work-text, 1, 1)
    }
    .work-phone:hover:before {
        content: $work-text;
    }
}