/*
 * Copyright (c) 2006-2010 Pixware. 
 *
 * This file is part of the XMLmind XML Editor project.
 * For conditions of distribution and use, see the accompanying legal.txt file.
 *
 * Styles for DITA topic elements. 
 */

@import "common.imp";

/* ---------------------------------------------------------------------------
  Topic elements
--------------------------------------------------------------------------- */

/* topic ------------------------------------------------------------------ */

dita {
    display: block;
}

concept,
task,
reference,
topic {
    display: block;
}

/* Vertical margins for nested topics or topics contained in a dita. */
* > concept,
* > task,
* > reference,
* > topic {
    margin: 1.33ex 0;
}

concept > title,
task > title,
reference > title,
topic > title { 
    font-size: 1.5em;
    margin: 0.83ex 0;
    border-width: 1px;
    border-style: solid;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

section > title { 
    font-size: 1.3em;
    margin: 1ex 0;
}

body > section > title,
topic > title {
    color: #6090B0;
    border-bottom-color: #6090B0;
}

titlealts {
    display: block;
    margin: 1.33ex 0;
}

searchtitle,
navtitle,
abstract,
shortdesc,
example,
related-links {
    display: block;
    margin-left: 16ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

searchtitle:before,
navtitle:before,
abstract:before,
shortdesc:before,
example:before,
related-links:before {
    display: marker;
    content: element-name(); /*Support for specialization*/
    marker-offset: fill; /*Nicer*/
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

conbody,
taskbody,
refbody,
body {
    display: block;
    /*Vertical margins set in child elements*/
}

section {
    display: block;
    margin: 1.33ex 0;
}

/* ---------------------------------------------------------------------------
  Body elements
--------------------------------------------------------------------------- */

/* topic ------------------------------------------------------------------ */

/*
 * Simple lists
 */

sl {
    display: block;
    margin-left: 2ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

sli {
    display: block;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

sl[compact=yes] > sli {
    margin-top: 0;
    margin-bottom: 0;
}

/*
 * Ordered and unordered lists
 */

ol,
ul { 
    display: block;
    margin-left: 2ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

ul { 
    list-style-type: disc;
}

ul ul { 
    list-style-type: square;
}

ul ul ul { 
    list-style-type: circle;
}

ol { 
    list-style-type: decimal;
}

li {
    display: list-item;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

ul[compact=yes] > li,
ol[compact=yes] > li {
    margin-top: 0;
    margin-bottom: 0;
}

li > *:first-child {
    margin-top: 0; 
    margin-bottom: 0; 
}
      
/*
 * Definition lists
 */

dl {
    display: block;
    margin-left: 2ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

dlhead,
dlentry {
    display: block;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

dl[compact=yes] > dlhead,
dl[compact=yes] > dlentry {
    margin-top: 0;
    margin-bottom: 0;
}

dthd,
dt {
    display: block;
    font-weight: bold; 
}

ddhd,
dd {
    display: block;
    margin-left: 4ex;
}

dl:contains-element(dlhead) {
    display: table;
    border: 1 solid #E0E0E0;
}

dl:contains-element(dlhead) > dlhead,
dl:contains-element(dlhead) > dlentry {
    display: table-row;
    margin-top: 0;
    margin-bottom: 0;
}

dl:contains-element(dlhead) > dlhead {
    background-color: #E0E0E0;
}

dl:contains-element(dlhead) > dlentry {
    background-color: inherit; /*e.g. from read-only dl*/
}

dl:contains-element(dlhead) > dlhead > dthd,
dl:contains-element(dlhead) > dlhead > ddhd,
dl:contains-element(dlhead) > dlentry > dt,
dl:contains-element(dlhead) > dlentry > dd {
    display: table-cell;
    margin-left: 0;
    border: 1 solid #E0E0E0;
    padding: 2px;
    background-color: inherit;
}

/*
 * Figures
 */

fig {
    display: block;
    margin: 1.33ex 0;
}

figgroup {
    display: block;
    margin: 1.33ex 0;
}

desc {
    display: inline;
}

desc:before {
    display: inline;
    content: " [";
    color: #333333;
}

desc:after {
    display: inline;
    content: "]";
    color: #333333;
}

fig > desc,
object > desc,
table > desc,
linklist > desc {
    display: block;
    margin: 1.33ex 0;
}

/*
 * Objects
 */

object,
param {
    display: block;
    collapsible: yes;
    not-collapsible-head: 1;
    border: 1 solid #E0E0E0;
    padding: 1;
    margin: 8 4;
}

object:before,
param:before {
    display: inline;
    content: division(content(paragraph(content(collapser(collapsed-icon, 
                                                          icon(pop-right), 
                                                          expanded-icon,
                                                          icon(pop-down)), " ",
                                                element-name(), "  ", 
                                                add-attribute-button(
                                                   check-has-attributes, yes,
                                                   tool-tip, "Add attribute",
                                                   color, navy)),
                               background-color, #E0E0E0,
                               padding-left, 4),
                     attributes(margin-top, 2,
                                margin-bottom, 2,
                                margin-left, 2,
                                margin-right, 2)));  
}

object::attribute,
param::attribute {
    attribute-content-left: attribute-name();
    attribute-content-middle: value-editor(attribute, attribute());
    attribute-content-right: 
        remove-attribute-button(attribute, attribute(),
                                tool-tip, "Remove attribute",
                                check-required, yes,
                                color, navy);
    show-attribute: when-added;
}

param::attribute(name),
param::attribute(value) {
    show-attribute: always;
}

/*
 * Block elements
 */

p {
    display: block;
    margin: 1.33ex 0;
}

lines {
    display: block;
    white-space: pre;
    margin: 1.33ex 0;
}

pre {
    display: block;
    white-space: pre;
    font-family: monospace;
    background-color: #EEEEEE; 
    border: 1px solid gray; 
    padding: 2px; 
    margin: 1.33ex 0;
}

note {
    display: block;
    margin-left: 16ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

note:before {
    display: marker;
    content: element-name();
    marker-offset: fill;
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

note[type]:before {
    content: attr(type);
}

note[type=other][othertype]:before {
    content: xpath("substring(@othertype,1,14)");
}

note > *:first-child {
    margin-top: 0; 
    margin-bottom: 0; 
}

lq {
    display: block;
    line-height: 1.2;
    margin: 1.33ex 10ex;
}

lq[reftitle]:after {
    display: inline;
    content: " (" attr(reftitle) ")";
    font-size: smaller;
    color: #333333;
}

/*
 * Inline elements
 */

cite {
    display: inline;
    font-style: italic;
}

xref {
    display: inline;
    color: navy;
    text-decoration: underline;
}

xref:after {
    display: inline;
    content: icon(left-link) attr(href);
    text-decoration: none;
    font-family: monospace;
    font-size: smaller;
    color: #333333;
}

/* ---------------------------------------------------------------------------
  Table elements
--------------------------------------------------------------------------- */

/* topic ------------------------------------------------------------------ */

/*
 * Simple table
 *
 * Specialization of simpletables is supported: suffice to modify
 * property element having dita.simpleTableEdit.tableSpecification as its name 
 * in the DITA configuration. This property is used by both 
 * com.xmlmind.xmleditext.dita.SimpleTableSupport (cell renderer) and 
 * com.xmlmind.xmleditext.dita.SimpleTableEdit (table editor).
 */

/*
 * Support for the relcolwidth and keycol attributes of simpletable.
 * Not really important. Just nice to have it.
 */
@extension 
"com.xmlmind.xmleditext.dita.SimpleTableSupport dita.simpleTableEdit.tableSpecification";

simpletable {
    display: table; 
    border: 1 outset gray;
    margin: 1.33ex 0; 
}

sthead {
    display: table-row;
    font-weight: bold;
    background-color: #E0E0E0;
}

strow {
    display: table-row; 
    background-color: inherit; /*e.g. from read-only simpletable*/
}

stentry {
    display: table-cell; 
    background-color: inherit;
    border: 1 inset gray;
    padding: 2px; 
}

stentry > *:first-child {
    margin-top: 0; 
    margin-bottom: 0; 
}

/*
 * CALS table (but simplified: no spanspec, tfoot, entrytbl, 
 * no colspec inside thead)
 *
 * SPECIALIZATION OF TABLE ``STRUCTURE'' NOT SUPPORTED:
 * The extension used to properly style CALS tables uses element names.
 */

/*
 * "black" is the color used to draw a border around the table and its
 * cells based on values of attributes such as frame, rowsep and colsep.
 *
 * "rgb(238,238,224)" (a very light gray) is the color used to draw 
 * a border around each cell whether the cell actually has borders or not.
 * Remove this parameter if this ``cell footprint'' disturbs you.
 *
 * For more information about CALS table support, see 
 * XMLmind XML Editor - Configuration and Deployment.
 */
@extension 
"com.xmlmind.xmleditext.docbook.table.TableSupport black rgb(238,238,224)";

table {
    display: block;
    margin: 1.33ex 0; 
}
          
table > title {
    font-weight: normal;
    font-style: italic; 
    text-align: center; 
    /* keep margin because tgroup has no margin */
}

colspec {
    display: table-column;
    collapsed: yes;
}

tgroup {
    display: table; 
    border-style: solid;
    border-width: 1;
}
    
thead {
    display: table-row-group;
    font-weight: bold; 
    background-color: #E0E0E0;
}
       
tbody {
    display: table-row-group;
    background-color: inherit; /*e.g. from read-only tgroup*/
}

row {
    display: table-row; 
    background-color: inherit; /*e.g. from read-only tbody*/
}
          
entry {
    display: table-cell; 
    background-color: inherit; /*e.g. from read-only row*/
    border-style: solid;
    border-width: 1;
    padding: 2px; 
}

entry > *:first-child {
    margin-top: 0; 
    margin-bottom: 0; 
}

/* ---------------------------------------------------------------------------
  Typographic elements
--------------------------------------------------------------------------- */

/* hi-d ------------------------------------------------------------------- */

b {
    display: inline;
    font-weight: bold;
}

i {
    display: inline;
    font-style: italic;
}

u {
    display: inline;
     text-decoration: underline;
}

tt {
    display: inline;
    font-family: monospace;
}

sup,
sub {
    display: inline-block;
    white-space: nowrap;
    font-size: smaller;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

/* ---------------------------------------------------------------------------
  Software elements
--------------------------------------------------------------------------- */

/* pr-d ------------------------------------------------------------------- */

codeblock,
codeph {
    font-family: monospace;
}

codeph {
    display: inline;
}

codeblock {
    display: block;
    white-space: pre;
    margin: 1.33ex 0;
    padding: 2px;
}

option {
    display: inline;
    font-weight: bold;
}

apiname,
parmname {
    display: inline;
    font-family: monospace;
}

parmname {
    font-style: italic;
}

parml {
    display: block;
    margin-left: 2ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

plentry {
    display: block;
}

pt {
    display: block;
    font-weight: bold; 
}

pd {
    display: block;
    margin-left: 4ex;
}

/*
 * Syntax diagram elements
 */

syntaxdiagram > title,
synblk > title,
groupseq > title,
groupchoice > title,
groupcomp > title,
fragment > title {
    margin-top: 0;
    margin-bottom: 0;
}

syntaxdiagram {
    display: block;
    margin-left: 16ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

synblk,
groupseq,
groupchoice,
groupcomp,
fragment,
synnote,
fragref,
synnoteref {
    display: block;
    margin-left: 16ex;
}

syntaxdiagram:before,
synblk:before,
groupseq:before,
groupchoice:before,
groupcomp:before,
fragment:before,
synnote:before,
fragref:before,
synnoteref:before {
    display: marker;
    content: element-name();
    marker-offset: fill;
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

fragref {
    color: navy;
    text-decoration: underline;
}

fragref:after,
synnoteref {
    content: icon(left-link) attr(href);
    text-decoration: none;
    font-family: monospace;
    font-size: smaller;
    color: #333333;
}

fragref:after {
    display: inline;
}

synnoteref:after {
    /* Inherits from xref: would mean link displayed twice */
    content: "";
}

repsep {
    display: block;
}

repsep:before {
    content: "(";
    color: #333333;
}

repsep:after {
    content: ")";
    color: #333333;
}

synph,
oper,
sep,
delim,
var,
kwd {
    display: inline;
}

oper:before,
sep:before,
delim:before,
var:before,
kwd:before {
    display: inline;
    content: " ";
}

oper:first-child:before,
sep:first-child:before,
delim:first-child:before,
var:first-child:before,
kwd:first-child:before {
    content: "";
}

kwd {
    font-weight: bold;
}

var {
    font-style: italic;
}

oper {
    color: rgb(96,0,96);
}

sep {
    color: rgb(96,96,0);
}

delim {
    color: rgb(0,96,96);
}

/* ---------------------------------------------------------------------------
  Software elements
--------------------------------------------------------------------------- */

/* sw-d ------------------------------------------------------------------- */

msgnum,
msgblock,
msgph {
    font-family: monospace;
    background-color: #E0E0E0;
}

msgph {
    display: inline;
}

msgblock {
    display: block;
    white-space: pre;
    margin: 1.33ex 0;
    padding: 2px;
}

msgnum {
    display: inline;
    font-weight: bold;
}

userinput,
systemoutput,
filepath,
varname,
cmdname {
    display: inline;
    font-family: monospace;
}

cmdname {
    font-weight: bold;
}

varname {
    font-style: italic;
}

userinput {
    background-color: rgb(192,255,192);
}

systemoutput {
    background-color: rgb(255,255,192);
}

/* ---------------------------------------------------------------------------
  User interface elements
--------------------------------------------------------------------------- */

/* ui-d ------------------------------------------------------------------- */

uicontrol,
wintitle {
    display: inline;
    font-weight: bold;
}

menucascade {
    display: inline;
}

menucascade > uicontrol:before {
    content: " \279C  ";
    color: #333333;
}

menucascade > uicontrol:first-child:before {
    content: "";
}

shortcut {
    display: inline;
    text-decoration: underline;
}

screen {
    display: block;
    white-space: pre;
    font-family: monospace;
    background-color: #E0E0E0; 
    border: 2px ridge gray; 
    padding: 5px; 
    margin: 1.33ex 0;
}

/* ---------------------------------------------------------------------------
  Utility elements
--------------------------------------------------------------------------- */

/* ut-d ------------------------------------------------------------------- */

imagemap {
    display: block;
    margin: 1.33ex 0;
    border: 1px solid #C0C0C0; 
    padding: 5px; 
}

area {
    display: block;
    margin-left: 20px;
}

area:before {
    display: marker;
    content: square;
}

shape,
coords {
    display: inline;
}

shape:before,
coords:before {
    display: inline;
    content: element-name() " ";
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

shape:after,
coords:after {
    display: inline;
    content: " ";
}

/* ---------------------------------------------------------------------------
  Miscellaneous elements
--------------------------------------------------------------------------- */

/* topic ------------------------------------------------------------------ */

draft-comment {
    display: block;
    margin-left: 16ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

draft-comment:before {
    display: marker;
    content: element-name();
    marker-offset: fill;
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

fn {
    font-size: smaller;
    display: block;
    margin-left: 8ex;
    margin-right: 8ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

fn:before {
    display: marker;
    content: xpath("concat(index-of-node(//fn,.),'.')");
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

fn[callout]:before {
    content: attr(callout);
}

fn,
fn:before {
    border-width: 1px;
    border-style: solid;
    border-top-color: gray;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    padding: 2px; 
}

/* ---------------------------------------------------------------------------
  Related links elements
--------------------------------------------------------------------------- */

/* topic ------------------------------------------------------------------ */

linklist,
linkpool {
    display: block;
    margin-left: 2ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

linklist {
    list-style-type: circle;
}

linkpool {
    list-style-type: square;
}

linkinfo {
    display: block;
    margin-left: 16ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

linkinfo:before {
    display: marker;
    content: element-name();
    marker-offset: fill;
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

linktext {
    display: inline;
}

link {
    display: list-item;
}

link:after {
    content: icon(left-link) attr(href);
    font-family: monospace;
    font-size: smaller;
    color: #333333;
}

/* ---------------------------------------------------------------------------
  Specialization elements
--------------------------------------------------------------------------- */

/* topic ------------------------------------------------------------------ */

itemgroup {
    display: block;
    margin: 1.33ex 0;
}

required-cleanup {
    display: block;
    border-width: 2px;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: red;
    border-right-color: transparent;
    padding: 5px; 
    margin: 1.33ex 0;
}

/*
 * no-topic-nesting does not need to be styled.
 */

/* ---------------------------------------------------------------------------
  Concept elements
--------------------------------------------------------------------------- */

/* concept ---------------------------------------------------------------- */

conbody > section > title,
concept > title {
    color: rgb(139,0,0);
    border-bottom-color: rgb(139,0,0);
}

/* ---------------------------------------------------------------------------
  Task elements
--------------------------------------------------------------------------- */

/* task ------------------------------------------------------------------- */

task > title { 
    color: rgb(0,100,0);
    border-bottom-color: rgb(0,100,0);
}

/* 
 * parent>child selectors are needed by only for the classed CSS.
 * Without it, the weight of the following rules would be less than
 * the weight of section rules.
 */

taskbody > prereq,
taskbody > context,
taskbody > result,
taskbody > postreq,
info,
tutorialinfo,
stepxmp,
stepresult {
    display: block;
    margin-left: 16ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

taskbody > prereq:before,
taskbody > context:before,
taskbody > result:before,
taskbody > postreq:before,
info:before,
tutorialinfo:before,
stepxmp:before,
stepresult:before {
    display: marker;
    content: element-name();
    marker-offset: fill;
    font-size: smaller;
    font-weight: bold;
    color: #333333;
}

choices,
substeps,
steps-unordered,
steps {
    display: block;
    margin-left: 2ex;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

step {
    display: block;
}

steps-unordered > step {
    margin-left: 20px;
}

steps-unordered > step:before {
    display: marker;
    content: url(icons/step_marker.gif);
}

steps > step {
    margin-left: 6ex;
}

steps > step:before {
    display: marker;
    content: simple-counter(n, decimal) " " url(icons/step_marker.gif);
}

substep {
    display: block;
    margin-left: 6ex;
}

substep:before {
    display: marker;
    content: simple-counter(n, lower-alpha) " " url(icons/step_marker.gif);
}

choice {
    display: block;
    margin-left: 20px;
}

choice:before {
    display: marker;
    content: url(icons/choice_marker.gif);
}

cmd {
    display: block;
    /* Mandatory first element of a step or a substep: 
       no need to add vertical margins. */
}

choicetable {
    display: table;
    border: 1 solid #D0FFD0;
    margin: 1.33ex 0;
}

chhead,
chrow {
    display: table-row;
}

chhead {
    background-color: #D0FFC0;
}

chrow {
    background-color: inherit; /*e.g. for a read-only choicetable*/
}

choptionhd,
chdeschd,
choption,
chdesc {
    display: table-cell;
    border: 1 solid #D0FFD0;
    padding: 2px;
    background-color: inherit;
}

chdeschd,
chdesc {
    width: 66%;
}

/* ---------------------------------------------------------------------------
  Reference elements
--------------------------------------------------------------------------- */

/* reference -------------------------------------------------------------- */

refbody > section > title,
reference > title { 
    color: rgb(85,26,139);
    border-bottom-color: rgb(85,26,139);
}

refsyn {
    display: block;
    margin: 1.33ex 0;
    background-color: #F0E0FF;
    padding: 2px;
}

properties {
    display: table;
    border: 1 solid #F0D0FF;
    margin: 1.33ex 0;
}

prophead,
property {
    display: table-row;
}

prophead {
    background-color: #F0E0FF;
}

property {
    background-color: inherit; /*e.g. from read-only properties*/
}

proptypehd,
propvaluehd,
propdeschd,
proptype,
propvalue,
propdesc {
    display: table-cell;
    margin-left: 0;
    border: 1 solid #F0D0FF;
    padding: 2px;
    background-color: inherit;
}

propdeschd,
propdesc {
    width: 50%;
}

proptypehd,
proptype {
    start-column: 0;
}

propvaluehd,
propvalue {
    start-column: 1;
}

propdeschd,
propdesc {
    start-column: 2;
}

/* ---------------------------------------------------------------------------
  Glossentry elements
--------------------------------------------------------------------------- */

/* glossentry ------------------------------------------------------------- */

glossentry {
    display: block;
    margin: 1.33ex 0;
}

/* 
 * parent>child selectors are needed by only for the classed CSS.
 * Without it, the weight of the following rules would be less than
 * the weight of concept>title rules.
 */

glossentry > glossterm {
    display: block;
    font: normal bold medium sans-serif; 
    color: black;
    border-style: none;
    margin-bottom: 0;
}

glossentry > glossdef {
    display: block;
    margin-top: 0;
    margin-left: 4ex;
}

glossentry > glossdef:before {
    content: "";
}

/* ---------------------------------------------------------------------------
  Display attributes
--------------------------------------------------------------------------- */

*[scale="50"] {
    font-size: 50%;
}

*[scale="60"] {
    font-size: 60%;
}

*[scale="70"] {
    font-size: 70%;
}

*[scale="80"] {
    font-size: 80%;
}

*[scale="90"] {
    font-size: 90%;
}

*[scale="100"] {
    font-size: 100%;
}

*[scale="110"] {
    font-size: 110%;
}

*[scale="120"] {
    font-size: 120%;
}

*[scale="140"] {
    font-size: 140%;
}

*[scale="160"] {
    font-size: 160%;
}

*[scale="180"] {
    font-size: 180%;
}

*[scale="200"] {
    font-size: 200%;
}

*[frame] {
    border: 1px solid black;
    padding: 2px;
}

*[frame=none],
table[frame] {
    border-width: 0;
    padding: 0;
}

*[frame=top] {
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

*[frame=bottom] {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

*[frame=topbot] {
    border-left-color: transparent;
    border-right-color: transparent;
}

*[frame=sides] {
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* ---------------------------------------------------------------------------
  Make topics and sections collapsible
--------------------------------------------------------------------------- */

section,
concept,
task,
reference,
topic {
    collapsible: yes;
    not-collapsible-head: 1; /* title */
}

section > title:before,
concept > title:before,
task > title:before,
reference > title:before,
topic > title:before {
    display: inline;
    content: collapser(collapsed-icon, icon(pop-right), 
                       expanded-icon, icon(pop-down)) " ";
}

glossentry {
    collapsible: no;
}

glossentry > glossterm:before {
    content: "";
}

/* ---------------------------------------------------------------------------
  When printing
--------------------------------------------------------------------------- */

@media print {
    * {
        line-height: 1.2; 
    }

    *:read-only {
        background-color: transparent;
    }

    colspec {
        display: none; 
    }
}

