/*
    Grammar checker
*/
div#grammalecte_gc_panel_content {
    margin: 0;
    padding: 5px;
}

div.grammalecte_paragraph_block {
    margin: 0 0 5px 0;
}

p.grammalecte_paragraph {
    margin: 0;
    padding: 10px;
    background-color: hsl(0, 0%, 96%);
    border-radius: 2px;
    line-height: normal;
    text-align: left;
    font-size: 14px;
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    color: hsl(0, 0%, 0%);
    hyphens: none;
}


/*
    Action buttons
*/
div.grammalecte_paragraph_actions {
    float: right;
    margin: 0 0 5px 10px;
}

div.grammalecte_paragraph_button {
    display: inline-block;
    background-color: hsl(0, 0%, 50%);
    text-align: center;
    margin-left: 2px;
    padding: 1px 4px 3px 4px;
    cursor: pointer;
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    font-size: 14px;
    color: hsl(0, 0%, 96%);
    border-radius: 2px;
}
div.grammalecte_paragraph_button:hover {
    background-color: hsl(0, 0%, 40%);
    color: hsl(0, 0%, 100%);
}

div.grammalecte_paragraph_actions .grammalecte_green {
    width: 80px;
    background-color: hsl(120, 30%, 50%);
    color: hsl(0, 0%, 96%);
}
div.grammalecte_paragraph_actions .grammalecte_green:hover {
    background-color: hsl(120, 50%, 40%);
    color: hsl(0, 0%, 100%);
}
div.grammalecte_paragraph_actions .grammalecte_red {
    background-color: hsl(0, 30%, 50%);
    color: hsl(0, 0%, 96%);
}
div.grammalecte_paragraph_actions .grammalecte_red:hover {
    background-color: hsl(0, 50%, 40%);
    color: hsl(0, 0%, 100%);
}


/* 
    TOOLTIP
*/
img#grammalecte_tooltip_arrow {
    position: absolute;
    display: none;
}

div#grammalecte_tooltip {
    position: absolute;
    margin: 0;
    display: none;
    width: 300px;
    border-radius: 5px;
    box-shadow: 0 0 6px hsla(0, 0%, 0%, 0.3);
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 12px;
    line-height: 18px;
    cursor: default;
    text-decoration: none;
    border: 3px solid hsl(210, 50%, 30%);
    color: hsl(210, 10%, 20%);
    z-index: 1000;
    text-align: left;
    /*box-shadow: 0px 0px 0px 4px hsla(210, 0%, 50%, 0.4);*/
}

div#grammalecte_tooltip_message_block {
    margin: 0;
    padding: 5px 10px 10px 10px;
    background-color: hsl(210, 50%, 30%);
    color: hsl(210, 50%, 96%);
}
div#grammalecte_tooltip_rule_id {
    display: none;
    margin: 0 0 5px 0;
    border: 1px solid hsl(210, 50%, 60%);
    background-color: hsl(210, 50%, 40%);
    padding: 2px 5px;
    border-radius: 2px;
    color: hsla(210, 0%, 96%, 1);
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 11px;
    font-style: normal;
    text-align: center;
}
div#grammalecte_tooltip_message {
    margin: 0 0 5px 0;
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 15px;
    color: hsl(210, 50%, 96%);
}
div#grammalecte_tooltip_ignore {
    display: inline-block;
    padding: 1px 5px;
    background-color: hsl(30, 30%, 40%);
    color: hsla(30, 0%, 96%, 1);
    border-radius: 2px;
    cursor: pointer;
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 12px;
    text-decoration: none;
}
div#grammalecte_tooltip_ignore:hover {
    background-color: hsl(30, 30%, 50%);
    color: hsla(0, 0%, 100%, 1);
    text-shadow: 0 0 3px hsl(30, 30%, 60%);
}
div#grammalecte_tooltip_url {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 5px;
    background-color: hsl(210, 50%, 50%);
    color: hsla(210, 0%, 96%, 1);
    border-radius: 2px;
    cursor: pointer;
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 12px;
    text-decoration: none;
}
div#grammalecte_tooltip_url:hover {
    background-color: hsl(210, 50%, 60%);
    color: hsla(0, 0%, 100%, 1);
    text-shadow: 0 0 3px hsl(210, 30%, 60%);
}
div#grammalecte_tooltip_sugg_title {
    padding: 0 10px;
    background-color: hsl(210, 10%, 90%);
    color: hsl(210, 50%, 30%);
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 10px;
    font-weight: bold;
}
div.grammalecte_tooltip_other_sugg_title {
    margin: 5px 0;
    padding: 0px 10px;
    line-height: normal;
    border-radius: 2px;
    background-color: hsl(210, 10%, 90%);
    color: hsl(210, 50%, 30%);
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 10px;
    font-weight: bold;
}
div#grammalecte_tooltip_sugg_block {
    padding: 10px;
    background-color: hsl(210, 10%, 96%);
    border-radius: 0 0 2px 2px;
    line-height: 24px;
}
div.grammalecte_tooltip_sugg {
    display: inline-block;
    padding: 1px 6px;
    min-height: 18px;
    background-color: hsl(180, 60%, 40%);
    color: hsl(180, 0%, 96%);
    border-radius: 2px;
    cursor: pointer;
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
}
div.grammalecte_tooltip_sugg:hover {
    background-color: hsla(180, 70%, 45%, 1);
    color: hsla(0, 0%, 100%, 1);
}


/*
    ERRORS
*/
mark.grammalecte_error {
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 2px;
    /* default color */
    background-color: hsl(240, 10%, 50%);
    color: hsl(240, 0%, 96%);
    font-size: 14px;
    font-style: normal;
    font-family : "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    text-decoration: none;
    text-shadow: unset;
    text-align: left;
    hyphens: none;
}
mark.grammalecte_error:hover {
    background-color: hsl(240, 10%, 40%);
    color: hsl(240, 0%, 100%);
    box-shadow: 0px 0px 0px 3px hsla(0, 0%, 50%, 0.2);
}

mark.grammalecte_error_corrected,
mark.grammalecte_error_ignored {
    margin: 0;
    padding: 0;
    display: inline-block;
    border-radius: 2px;
    text-decoration: none;
    background-color: hsla(120, 50%, 70%, 1);
    color: hsla(0, 0%, 4%, 1);
    font-size: 14px;
    font-style: normal;
    font-family : "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    text-decoration: none;
    text-shadow: unset;
    text-align: left;
    hyphens: none;
}
mark.grammalecte_error_ignored {
    background-color: hsla(30, 20%, 80%, 1);
}


/* elems */
mark.grammalecte_error_WORD {
    /*border-bottom: 2px solid hsl(0, 10%, 30%);*/
    background-color: hsl(0, 50%, 50%);
    color: hsl(0, 0%, 96%);
    /*text-decoration: underline wavy hsl(0, 50%, 50%);*/
}
mark.grammalecte_error_WORD:hover {
    background-color: hsl(0, 60%, 40%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0px 0px 0px 3px hsla(0, 50%, 50%, 0.2);
}

/* elems */
mark.grammalecte_error_typo, 
mark.grammalecte_error_esp, 
mark.grammalecte_error_nbsp, 
mark.grammalecte_error_eif, 
mark.grammalecte_error_maj, 
mark.grammalecte_error_virg, 
mark.grammalecte_error_tu, 
mark.grammalecte_error_num, 
mark.grammalecte_error_unit, 
mark.grammalecte_error_nf, 
mark.grammalecte_error_liga, 
mark.grammalecte_error_mapos, 
mark.grammalecte_error_chim {
    background-color: hsl(30, 70%, 50%);
    color: hsl(30, 10%, 96%);
    /*text-decoration: underline wavy hsl(30, 70%, 50%);*/
}

mark.grammalecte_error_typo:hover, 
mark.grammalecte_error_esp:hover, 
mark.grammalecte_error_nbsp:hover, 
mark.grammalecte_error_eif:hover, 
mark.grammalecte_error_maj:hover, 
mark.grammalecte_error_virg:hover, 
mark.grammalecte_error_tu:hover, 
mark.grammalecte_error_num:hover, 
mark.grammalecte_error_unit:hover, 
mark.grammalecte_error_nf:hover, 
mark.grammalecte_error_liga:hover, 
mark.grammalecte_error_mapos:hover, 
mark.grammalecte_error_chim:hover {
    background-color: hsl(30, 80%, 45%);
    color: hsl(30, 10%, 96%);
    box-shadow: 0px 0px 0px 3px hsla(30, 50%, 50%, 0.2);
}

/* elems */
mark.grammalecte_error_apos {
    background-color: hsl(40, 90%, 50%);
    color: hsl(40, 10%, 96%);
    /*text-decoration: underline wavy hsl(40, 70%, 45%);*/
}
mark.grammalecte_error_apos:hover {
    background-color: hsl(40, 100%, 45%);
    color: hsl(40, 10%, 96%);
    box-shadow: 0px 0px 0px 3px hsla(40, 50%, 50%, 0.2);
}

/* elems */
mark.grammalecte_error_gn,
mark.grammalecte_error_sgpl {
    background-color: hsl(210, 50%, 50%);
    color: hsl(210, 10%, 96%);
    /*text-decoration: underline wavy hsl(210, 50%, 50%);*/
}
mark.grammalecte_error_gn:hover,
mark.grammalecte_error_sgpl:hover {
    background-color: hsl(210, 60%, 40%);
    color: hsl(210, 10%, 96%);
    box-shadow: 0px 0px 0px 3px hsla(210, 50%, 50%, 0.2);
}

/* elems */
mark.grammalecte_error_conj, 
mark.grammalecte_error_infi, 
mark.grammalecte_error_imp, 
mark.grammalecte_error_inte, 
mark.grammalecte_error_ppas, 
mark.grammalecte_error_vmode  {
    background-color: hsl(300, 30%, 40%);
    color: hsl(300, 10%, 96%);
    /*text-decoration: underline wavy hsl(300, 40%, 40%);*/
}

mark.grammalecte_error_conj:hover, 
mark.grammalecte_error_infi:hover, 
mark.grammalecte_error_imp:hover, 
mark.grammalecte_error_inte:hover, 
mark.grammalecte_error_ppas:hover, 
mark.grammalecte_error_vmode:hover {
    background-color: hsl(300, 40%, 30%);
    color: hsl(300, 10%, 96%);
    box-shadow: 0px 0px 0px 3px hsla(300, 50%, 50%, 0.2);
}

/* elems */
mark.grammalecte_error_conf, 
mark.grammalecte_error_ocr {
    background-color: hsl(270, 40%, 30%);
    color: hsl(270, 10%, 96%);
    /*text-decoration: underline wavy hsl(270, 40%, 30%);*/
}

mark.grammalecte_error_conf:hover, 
mark.grammalecte_error_ocr:hover {
    background-color: hsl(270, 50%, 20%);
    color: hsl(270, 10%, 96%);
    box-shadow: 0px 0px 0px 3px hsla(270, 50%, 50%, 0.2);
}

/* elems */
mark.grammalecte_error_bs, 
mark.grammalecte_error_pleo, 
mark.grammalecte_error_neg, 
mark.grammalecte_error_redon1, 
mark.grammalecte_error_redon2, 
mark.grammalecte_error_mc, 
mark.grammalecte_error_date, 
mark.grammalecte_error_notype {
    background-color: hsl(180, 50%, 40%);
    color: hsl(180, 10%, 96%);
    /*text-decoration: underline wavy hsl(180, 50%, 40%);*/
}

mark.grammalecte_error_bs:hover, 
mark.grammalecte_error_pleo:hover, 
mark.grammalecte_error_neg:hover, 
mark.grammalecte_error_redon1:hover, 
mark.grammalecte_error_redon2:hover, 
mark.grammalecte_error_mc:hover, 
mark.grammalecte_error_date:hover, 
mark.grammalecte_error_notype:hover {
    background-color: hsl(180, 60%, 30%);
    color: hsl(180, 10%, 96%);
    box-shadow: 0px 0px 0px 3px hsla(180, 50%, 50%, 0.2);
}
