/* OBRAS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.obras  {background: var(--fundo2); margin-top: 1em; vertical-align: text-top; justify-content: center; 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5em,7.5em)); grid-gap: .4em;} /*  grid-gap: .2em; */
.obrasg {background: var(--fuglo);  margin-top: 1em; vertical-align: text-top; justify-content: center; 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5em,7.5em)); grid-gap: .4em;} /*  grid-gap: .2em; */
.OMm    {background:gray;  padding: 0404; font-size:0.85em; color: white;
        border-radius: 10px; border-style: outset; border:solid var(--texn) 1pt; }

.obras0 {background:var(--fundo1); overflow: visible;
        grid-template-columns: auto auto auto auto; align-content: center; vertical-align: text-top;
        display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5em,7.5em)); grid-gap: .2em;}

.obra  {background: var(--fundo3); font-size:0.7em; color:var(--texn);
        text-align:center; vertical-align: text-top; border: 1px solid var(--texn);}
        /* padding: 0px; text-indent:0px; place-items: center;   align-content: center;
            margin-left: auto; margin-right: auto; */

.obraT {background: var(--fundo3); text-align:center; font-size:0.7em; color:var(--texn);
        position: relative; max-width: 40em;  vertical-align: text-top;
        border: 3px solid; border-color: red; border-top-style: 3px solid red;
        border-right-style: none; border-bottom-style: none; border-left-style: none;  }
.obraTB {background: var(--fundo3); text-align:center; font-size:0.7em; color:var(--texn);
        position: relative; max-width: 40em; border: 3px solid; vertical-align: text-top;
        border-color: red; border-top-style: 3px solid; border-left-style: none;
        border-bottom-color:cyan; border-bottom-style: 3px solid; border-right-style: none; }
.obraB {background: var(--fundo3); text-align:center; font-size:0.7em; color:var(--texn);
        position: relative; max-width: 40em; border: 3px solid; vertical-align: text-top;
        border-bottom-color:cyan; border-bottom-style: 3px solid;
        border-top-style: none; border-right-style: none; border-left-style: none;  }

.overT {position: absolute; top: 0; background: rgba(255, 0, 0, 1); opacity:0; /* Black see-through */
        width: 100%; color: white; font-size: 0.9em; text-align: center;} /*transition: .5s ease;*/
.overB {position: absolute; bottom: 0; background: rgba(0, 255, 255, 1); opacity:0; /* Black see-through */
        color: white; font-size: 0.9em; text-align: center;}  /*  padding: 5px;  */
.obraT:hover  .overT {opacity: 1;}
.obraTB:hover .overT {opacity: 1;}
.obraTB:hover .overB {opacity: 1;}
.obraB:hover  .overB {opacity: 1;}
.verest {position: absolute; bottom: 0; width: 100%; text-align: center; font-weight: bold; color: cyan;
     background: rgba(0, 255, 255, 0.2); border: 1px solid cyan;}
.verest:hover {cursor: pointer; background-color: red; color: white;} 

/* <span class="overO"><img src="I/02I/2JR/1920/1926-01-__-DL-Lisboa-Velha.jpg" alt="x"></span></span>*/
.obraO {display: inline-block ; width: 100%; position: relative; color: cyan;}
.overO {position: absolute; top:20; left:0; right:0; background-color:gray; overflow: hidden;
     width:100%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}
.obraO:hover .overO {opacity: 1; transform: scale(1);}

.obraO80 {display: inline-block ; width: 100%; position: relative; color: cyan;}
.overO80 {position: absolute; top:20; right:0; background-color:gray; overflow: hidden;
     width:80%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}
.obraO80:hover .overO80 {opacity: 1; transform: scale(1);}

.obraO100 {display: inline; color: cyan;}
.overO100 {position: relative; width: 100%; transition: .5s ease; opacity:0; background: rgba(255, 0, 0, 0.7);}
.obraO100:hover .overO100 {opacity: 1;}

.cont-c {position: relative;}  /*  width: 50%; Tamanho da imagem  max-width: 300px;  */
.overlayc    {position: absolute; top:20; left:0; right:0; background-color:gray; overflow: hidden;
     width:100%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}

.cont-c:hover .overlay {transform: scale(1);}
.cont-c:hover .overlay {opacity: 1; }

p.vermais {background: rgba(0, 255, 255, 0.2); margin: 0px; width: 100%; border: 1px solid; border-color: cyan; }
.vermais {position: absolute; bottom:0; background: rgba(0, 255, 255, 0.2); 
         text-align: center; border-radius: 10px; border: 1px solid; border-color: cyan; } /* width: 100%; */
.vermaisb{position: absolute; bottom:0; background: rgba(0, 255, 255, 0.2); width: 100%; /* */
        /*margin-left: auto; margin-right: auto; align-items: center ; */
        /*text-align: center; */
        border: 1px solid; border-radius: 10px; border-color: cyan; }  /**/

.verc { border: 1px solid cyan;}
.verm {position: absolute; bottom:0; background: rgba(0, 255, 255, 0.2);  flex: 1; /*display:inline-flex ; */
        border: 1px solid cyan; border-radius: 10px;  padding: 0 0.5em 0 0.5em; }
.verm::before, .verm::after {content: ""; border-top: 0.7em double #8a7501; align-self: center;}

.dfc {display: flex; justify-content: center; }
.dfc > div  {position: absolute; bottom:0; background-color:rgba(0, 255, 255, 0.2);
  width: auto; padding: 0 0.5em 0 0.5em; text-align: center; border: 1px solid cyan;  border-radius: 10px; }

.vermc:hover, .dfc>div:hover {cursor: pointer; background-color: red; color: white;}



.bea  {background: var(--fundo3); padding: 0 0 0 5px; border: solid 2px yellow; border-style: solid; border-width: 0 0 0 2px; }
.beg2  {background: var(--fundo3); padding: 0 0 0 5px; border: solid 2px gold; border-style: solid; border-width: 0 0 0 2px; }

/*.descreve {background: var(--fundo); margin-left: 0.1em; margin-right: 0.1em; margin-bottom: 0.5em; text-align: left; color: var(--texn);
         padding-left: 0.3em; padding-right: 0.3em; border: solid 2px var(--texk2); }*/

.descreve {background: var(--fundo);  text-align: left; color: var(--texn); justify-content: center;
         padding-left: 0.3em; padding-right: 0.3em; border: solid 1px var(--texk2); }

.glosas {position: fixed; top: 1.4em; left:0; background: rgba(0,0,0,0); 
        text-align: center; color: var(--texgg); z-index: 1; }  /* */

.Glosa {background-color:  var(--fuglo); border: 2px solid var(--pdf); color: var(--texn); font-size: 0.9em;
        margin-top: 1em; padding: 0 0.3em 0 0.3em; }
.Glosa4 {background-color: var(--fuglo); border: 2px solid var(--pdf); color: var(--texn); font-size: 0.9em;
        min-height: 4.5em; margin-top: 1em; padding: 0 0.3em 0 0.3em; }
.Glosa5 {background-color: var(--fuglo); border: 2px solid var(--pdf); color: var(--texn); font-size: 0.9em;
        min-height: 5.5em; margin-top: 1em; padding: 0 0.3em 0 0.3em; }
.Glosa6 {background-color: var(--fuglo); border: 2px solid var(--pdf); color: var(--texn); font-size: 0.9em;
        min-height: 6.5em; margin-top: 1em; padding: 0 0.3em 0 0.3em; }
.fuglo {background-color: var(--fuglo);}


.cxO1  {background-color: var(--fundo4); margin-top: 0.5em; min-height: 5.5em; border: 1px solid; border-color: lime; }
.cxO5e {min-height: 5em;}
.cxO6e {min-height: 6em;}

.cxO2 {display: block; margin-left: 0.3em; margin-right: 0.3em; z-index: 2;
    background-color: red; border: 2px solid; border-color: white;}





.Gloinact {background-color: var(--fundo3); width: auto; cursor: pointer;
    font-size:0.90em; color: var(--texn); text-align: left;   }
.Glo:before {content: '► '; color: var(--texgg); font-size: 1.2em; }
.Gloinact:hover  {cursor: pointer; background-color: orangered; color: white; }
.Gloact {background-color:brown; width: auto; font-size:0.8em; text-align: left; color: white;
            border: 2px solid var(--texgg); }  /*   maroon;  */
.Gloact:before  {background-color: white; content: "▼"; color: var(--texr); } /* font-size: 1.2em; */
.Gloact:after   {content: "..Ver menos ▲"; color:lime; }    /* color:#01f06c;  */
.Gloact:after:hover {content: "..Ver menos ▲"; border: 2px solid var(--texn); color:cyan; font-size: 1.2em;}
.Gloacte:hover  {cursor: pointer; background:red; border: 2px solid var(--texn); color: black; }





.impo {margin-left: auto; margin-right: auto; width: 96%;
    border-collapse: collapse; font-size:0.8em; border: solid 2px var(--texgg);}
.impo td {text-align:left; color: var(--texn); }  /* padding: 0px 15px 0px 3px; min-width: 5.5em;   */
.impo tr, td {border: 0.5px solid silver; color: var (--texn);}
.impo td:nth-of-type(1)   {text-align:left; min-width: 5.5em; }  /*  5.5em   */
.impo td:nth-of-type(2)   {width:95%;}                           /*  width:99%;  */
.impo tr:nth-child(even)  {background-color: var(--fundo4);}
.impo tr:nth-child(odd)   {background-color: var(--fundo2);}

/* SELOS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.inactivoSe {display: inline; background-color: var(--fundo3); width: auto; cursor: pointer;
    font-size:0.90em; color: var(--texn); text-align: left;
    margin-top: 1em; border: 2px solid var(--texn); border-radius: 0.5em; border-style: outset; }
.inactivoSe:before {content: '► '; color: var(--texgg); font-size: 1.2em; }
.inactivoSe:hover  {cursor: pointer; background-color: orangered; color: white; }
.activoSe {background-color:brown; width: auto; font-size:0.8em; text-align: left; color: white;
            border: 2px solid var(--texgg); }  /*   maroon;  */
.activoSe:before  {background-color: white; content: "▼"; color: var(--texr); } /* font-size: 1.2em; */
.activoSe:after   {content: "..Ver menos ▲"; color:lime; }    /* color:#01f06c;  */
.activoSe:after:hover {content: "..Ver menos ▲"; border: 2px solid var(--texn); color:cyan; font-size: 1.2em;}
.activoSe:hover  {cursor: pointer; background:red; border: 2px solid var(--texn); color: black; }

.casoSe {background-color: var(--fundo2);  margin-top: 0.5em; min-height: 5.5em;
    margin-left: auto; margin-right: auto; border: 2px solid; border-color: gold;}
.fo4 {max-width: 40%; max-height: 4em; }
.foS {max-height: 5em;  }   /* max-width: 20em; */
.cxselo {margin-left: 0.5em; margin-right: 0.5em;
    background-color: red; color: var(--texn); font-size:0.8em;  }
        /*border: 2px solid; border-color: gold; text-indent: 1em;*/
.cxselos {background-color: var(--fuglo); margin-top: 0.2em; vertical-align: text-top; display: flex; justify-content: center; 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5em,7.5em)); grid-gap: .2em;
    /*margin-left: 0.3em; margin-right: 0.3em; vertical-align: text-top; border: 2px solid gold; */
    }
.fcs    {background-color: rgba(0, 75, 0, 0.8);}

.selos {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9em,10em));
    grid-gap: .2em;
    margin-left: 0.5em; margin-right: 0.5em; background: var(--fundo1);
    vertical-align: text-top; border: 1px solid var(--texr)    } /*margin-top: 1em; */
.selos1  {background: var(--fundo2); margin: 0; text-indent:0;font-size: 1.2em; color:var(--texn);
        text-align:center; vertical-align: text-top; border: 1px solid var(--texn);}



.inactivoHP {background-color: var(--fundo3); width: auto; cursor: pointer; font-size:0.8em; color: var(--texk) ;
        border: 2px solid var(--texn); border-radius: 0.5em; border-style: outset; text-align: left;
        display: inline ; }  /* text-align: left;  */
.inactivoHP:before {content: '► Ver mais..'; color: var(--texg); font-size: 1em;  }
/*.inactivo:after {content: '- Abrir '; color: var(--texli); font-weight:bold; } /*  font-size: 1.2em; */
.inactivoHP:hover  {cursor: pointer; background-color: orangered; color: white; }  /*  font-size:0.93em;      */

.activoHP {background-color:brown; width: auto; font-size:0.8em; text-align: left; color: white;
            border: 2px solid var(--texgg); }  /*   maroon;  */
.activoHP:before  {background-color: white; content: "▼"; color: var(--texr); } /* font-size: 1.2em; */
.activoHP:after   {content: "..Ver menos ▲"; color:lime; }    /* color:#01f06c;  */
.activoHP:after:hover  {content: "..Ver menos ▲"; border: 2px solid var(--texn); color:cyan; font-size: 1.2em;}  /* color:#01f06c; */
.activoHP:hover  {cursor: pointer; background:red; border: 2px solid var(--texn); color: black; }  /*  font-size:0.93em;      */
.abertoHP {background: var(--fundo); padding-left: 0.2em; font-size:0.8em; color: var(--texn);
           border: solid 2px var(--texgg); margin-bottom: 5px; }  /* padding: 0px 0px 0px 3px; */

.fechaHP {background-color: var(--texgg); cursor: pointer; border-style: none;
          display: inline; padding: 0px 6px 0px 6px;}
.casoHP {background-color: var(--fundo2); margin-top: 0.5em; min-height: 5.5em; border: 2px solid; border-color: gold;}
.foHP {max-width: 25%; max-height: 5em; }
.thp {/*border: 2px solid; border-color: gold;*/  padding-left: 0.5em;
    color: var(--texn); font-size:0.8em; text-indent: 1em; }
.hp {color: var(--texn); font-size:0.8em; border-style: none; border-collapse: collapse;  }
.co2 {width: 20%; text-align:right;}
.hp tr:nth-child(odd) {background-color: var(--fundo2);}



/* MURAL XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.casoM {background-color: var(--fundo2); margin-top: 0.5em; min-height: 5.5em;
    margin-top: 1em; border: 2px solid; border-color: gold;}
.foM {max-width: 40%; max-height: 5em; }
.cxmural {background-color: var(--fundo); width: 100%; padding-left: 0.5em; color: var(--texn); font-size:0.8em;
    border: 1px solid var(--texr);   }
.mural {background: var(--fundo1); vertical-align: text-top; border: 1px solid var(--texr); width: 98%;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9em,9em)); grid-gap: .2em;}
.mural1  {background: var(--fundo2); margin: 0; text-indent:0;font-size: 1.2em; color:var(--texn);
        text-align:center; vertical-align: text-top; border: 1px solid var(--texn);}

.inactivoM {display: inline; background-color: var(--fundo3); width: auto; cursor: pointer;
    font-size:0.90em; color: var(--texn); text-align: left;
    margin-top: 1em; border: 2px solid var(--texn); border-radius: 0.5em; border-style: outset; }
.inactivoM:before {content: '► '; color: var(--texgg); font-size: 1.2em; }
.inactivoM:hover  {cursor: pointer; background-color: orangered; color: white; }

.activoM {background-color:brown; width: auto; font-size:0.8em; text-align: left; color: white;
            border: 2px solid var(--texgg); }  /*   maroon;  */
.activoM:before  {background-color: white; content: "▼"; color: var(--texr); } /* font-size: 1.2em; */
.activoM:after   {content: "..Ver menos ▲"; color:lime; }    /* color:#01f06c;  */
.activoM:after:hover  {content: "..Ver menos ▲"; border: 2px solid var(--texn); color:cyan; font-size: 1.2em;}
.activoM:hover  {cursor: pointer; background:red; border: 2px solid var(--texn); color: black; }


/* cont-F needed to position the overlay. Adjust the width as needed */
.cont-F {position: relative; max-width: 40em;      /*  Tamanho da imagem  width: 50%; max-width: 30em - 300px;     */
        border: 3px solid; border-color: red;  /*   border-color: lime;  */
        border-top-style: 3px solid;  border-bottom-color:red;
        border-right-style: none;   
        border-bottom-style: none; 
        border-left-style: none; } 
.cont-F:hover .over-F {opacity: 1;}
.over-F {position: absolute;   top: 0;   /*   bottom: 0;   */
        background: rgba(255, 0, 0, 0.5); /* Black see-through */
        color: #f1f1f1;  width: 100%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
        color: white;  font-size: 0.9em;  text-align: center;}   /*  padding: 5px;  */

.cont-L{position: relative; max-width: 30em;      /*  max-width: 300px;   border: 1px solid;    */
        border-color: cyan;
        border-top-style: none;
        border-right-style: none;   
        border-bottom-style:solid;
        border-left-style: none; }  
.cont-L:hover .over-L {opacity: 1;}
.over-L{position: absolute;  bottom: 0;  
        background: rgba(0, 255, 255, 0.9); /* Black see-through */
        color:black;  width: 100%;  transition: .5s ease;  opacity:0;  /*  color: #f1f1f1;    opacity:0; */
        font-size: 0.9em;   text-align: center;}   /* padding: 5px;  */

.cont-L2{position: relative;      /* max-width: 30em;  max-width: 300px;   border: 1px solid;    */
        color: white; text-align: center;
        border: 2px solid; border-color: rgb(255, 215, 0);
        border-top-style: solid;
        border-right-style: solid;   
        border-bottom-style:solid;
        border-left-style:solid; }  
.cont-L2:hover .over-L2 {opacity: 1;}
.over-L2{position: absolute;  bottom: 0; left:20%; right:20%; 
        background: rgba(127, 255, 212, 0.5); /* Black see-through */
        width: 60%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
        font-size: 0.9em; text-align: center;}   /* padding: 5px;  */


/* Make the image to responsive */
.image      {display: block;  width: 100%;  height: auto;  }
.img      {display: block;  width: 100%;  height: auto; }
/* The overlay effect - lays on top of the cont-F and over the image */
.overtx     {position: absolute;  bottom: 0;  
            background: rgb(0, 0, 0);  
            background: rgba(0, 0, 0, 0.5); /* Black see-through */
            color: #f1f1f1;  width: 100%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
            color: white;  font-size: 0.9em;  padding: 5px;  text-align: center;}
/* When you mouse over the cont-F, fade in the overlay title */

.cont-c {position: relative;}  /*  width: 50%; Tamanho da imagem  max-width: 300px;  */
.overlayc    {position: absolute; top:20; left:0; right:0; background-color:gray; overflow: hidden; 
     width:100%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}

.cont-c:hover .overlay {transform: scale(1);}
.cont-c:hover .overlay {opacity: 1; }

.over100 {position: relative; width: 100%;
        background: rgba(127, 255, 212, 0.5); /* Black see-through */
        transition: .5s ease;  opacity:0;   text-align: center;}   /* padding: 5px;  */










/*table  {background: var(--fundo3); border: 1px solid  white; border-collapse: collapse; 
        text-align:left; font-size:0.9em; color: var(--texn);}
/*  table tr {border: 1px solid  maroon;}   */
/*table, tr, td {text-align:left; border: 1px solid  var(--texn); border-collapse: collapse;}

table td:nth-of-type(1) {border: 0.3px solid gray; padding: 0px 5px 3px 3px; text-align:right;}
table td:nth-of-type(2) {border: 0.3px solid gray; padding: 0px 5px 3px 3px; text-align:left;}
table tr:nth-child(odd) {background-color: var(--fundo2);}  /* tr:nth-child(even) {background-color: var(--fundo6);}    */

/*  table.grupos  {font-size:0.8em; padding: 0px 5px 0px 3px; border: 1px solid gray; width: 100%;} */
.grupos  {font-size:0.8em; border-collapse: collapse; padding: 10px 15px 0px 3px; border: 1px solid gray; width: auto;} /*   width: 99%;    */
.grupos td:nth-of-type(1) {text-align:center; max-width: 5em; padding-top: 5px; padding-bottom: 5px;}
.grupos td:nth-of-type(2) {text-align:left; padding-top: 5px; padding-bottom: 5px; min-width: 10em; width: auto;}  /*  width: 99%;    */
.grupos tr:nth-child(even) {background-color: var(--fundo4);} 
.grupos tr:nth-child(odd) {background-color: var(--fundo2);} 

.liv td:nth-of-type(1) {min-width: 6em;  color: var(--texn);}
.liv td:nth-of-type(2) {min-width: 99%;  color: var(--texn);}
.Índice td:nth-of-type(1) {text-align:left; }
.Índice td:nth-of-type(2) {text-align:right;}

.imp {border-collapse: collapse; font-size:0.8em; border: solid 2px var(--texgg); margin: 0;}  /* width: 99%; */
.imp td {text-align:left; color: var(--texn); }  /* padding: 0px 15px 0px 3px; min-width: 5.5em;   */
.imp tr, td {border: 0.5px solid silver; color: var (--texn);} 
.imp td:nth-of-type(1)   {text-align:left; min-width: 5.5em; }  /*  5.5em   */
.imp td:nth-of-type(2)   {width:95%;}                           /*  width:99%;  */
.imp tr:nth-child(even)  {background-color: var(--fundo4);}
.imp tr:nth-child(odd)   {background-color: var(--fundo2);} 
/* .imp tr:first-child td:first-child {color: red; }*/


/* IMPRENSA XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
.IMP         {background-color: gray; font-size:0.9em; color: var(--texn); font-weight: bold; text-align: left;
               border-style: outset;border: 2px solid lime; border-radius: 0.7em; margin-top: 0.5em; margin-bottom: 0.5em;}
.IMP:before  {content:'► Ver'; color: var(--texg2);  font-size:0.9em; font-weight: bold; margin-right: 0.5em; }  
.IMP:hover   {background-color: orangered; border: 2px solid lime; color: white; cursor: pointer;} 

.IMP.on          {background-color:brown; margin-top: 0.5em; border: 2px solid var(--texgg); border-radius: 0em; width: 100%; 
                 text-align: left; font-size:0.90em; color: white;  margin-bottom: 0em;} 
.IMP.on:before   {background-color: white; border-radius: 1em; content: "▼"; color: red; margin-right: 0.5em; font-size: 1.2em;} 
.IMP.on:after    {background-color: white; border-radius: 1em; content: "▲"; color:#01f06c; margin-left: 0.5em; font-size: 1.2em;} 
.IMP.on:hover    {background-color: orangered; border: 2px solid lime; color: white; cursor: pointer;} 

.fecIMP       {background-color: var(--texgg); padding: 0px 15px 0px 15px; width: 100%; margin-bottom: 0.5em;
                border-style: none; cursor: pointer; font-size:0.8em; color: maroon; font-weight:bold; text-align:center; }
.fecIMP:before{background-color:white; margin-right: 0.5em; content: "▲"; border-radius: 1em; color: lime; font-size: 1.2em;}
.fecIMP:after {background-color:white; margin-left:  0.5em; content: "▲"; border-radius: 1em; color: lime; font-size: 1.2em;}
.fecIMP:hover {cursor: pointer; background:orangered; color:white}

/*.IMP-         {background-color: var(--fundo6); margin-top: 0.5em; margin-bottom: 1em; display: inline; 
                border: 2px solid var(--texn); border-radius: 0.5em; border-style: outset;
                text-align: left; font-size:0.90em; color: var(--texn); }  
.IMPoff         {background-color: var(--fundo6); margin-top: 0.5em; margin-bottom: 1em; display: inline; 
                border: 2px solid var(--texn); border-radius: 0.5em; border-style: outset;
                text-align: left; font-size:0.90em; color: var(--texn); }  
.IMPoff:before  {content:'► Ver'; color: gold; font-weight: bold; margin-right: 0.5em; }  
.IMPoff:hover   {background-color: orangered; border: 2px solid lime; color: white; cursor: pointer;} 

.IMPon          {background-color:brown; margin-top: 0.5em; border: 2px solid var(--texgg); width: 99%;
                text-align: left; font-size:0.90em; color: white } 
.IMPon:before   {background-color: white; border-radius: 1em; content: "▼"; color: red; margin-right: 0.5em; font-size: 1.2em;} 
.IMPon:after    {background-color: white; border-radius: 1em; content: "▲"; color:#01f06c; margin-left: 0.5em; font-size: 1.2em;} 
.IMPon:hover    {background-color: orangered; border: 2px solid lime; color: white; cursor: pointer;} */
/* IMPRENSA XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */




.qq {font-size:0.8em; padding: 0px 15px 0px 3px; border-collapse: collapse;  width: 100%; border: 1px solid  maroon; }  
    /*  border-collapse: collapse;  background: var(--fundo3);  */
.qq td {text-align:left; color: var(--texn);   }    /*  min-width: 5.5em;   */
.qq tr, td {border: 0.5px solid silver; color: var (--texn);} 
.qq tr:nth-child(even)  {background-color: var(--fundo4);}    /* tr:nth-child(even) {background-color: var(--fundo6);}    */
.qq tr:nth-child(odd)   {background-color: var(--fundo2);}    /* tr:nth-child(even) {background-color: var(--fundo6);}    */
.qq td:nth-of-type(1)   {text-align:left; min-width: 6.5em; }   /*  5.5em   */
.qq td:nth-of-type(2)   {width:95%;}                          /*  width:99%;  */

.qqar td:nth-of-type(1) {text-align:right; width: 6em; }   /*  5.5em   */
.qqar td:nth-of-type(2) {text-align:left; width: auto; }

/* .qqr {border:solid gold 1.5pt;} /*   {border:solid orange 3pt;    */
.qqr td:nth-of-type(1) {min-width: 6.5em; }
.qqr tr:nth-child(odd) {background-color: var(--fundo3);}    /* tr:nth-child(even) {background-color: var(--fundo6);}    */

.overlay    {position: absolute; top:20; left:0; right:0; background-color:gray; overflow: hidden; 
            width:100%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}

.cont-F:hover .overlay {transform: scale(1);}
.cont-F:hover .overlay {opacity: 1; }

.cont-I  {position: relative; width: 50%; max-width: 300px;}  /* Tamanho da imagem    */
.cont-I:hover .overlay {transform: scale(1);}
.cont-I:hover .overlay {opacity: 1; }
.cxbt:hover {cursor: pointer; background:red}
.center {margin-left: auto; margin-right: auto;}


.sover {margin-top: 1em; padding: 0px 15px 0px 3px; margin-left: auto; margin-right: auto;
        background: var(--fundo3); border: 1px solid  white; border-collapse: collapse; 
        text-align:left; font-size:0.9em; color: var(--texn);} 
/*.sover td:nth-of-type(1) {max-width: 5.5em; } */
.sover td:nth-of-type(2) {text-align:left; width: auto; padding: 0px 5px 0px 5px;} 
.sover tr:nth-child(even)  {background-color: var(--fundo4);}
.sover tr:nth-child(odd)   {background-color: var(--fundo2);} 


.cel1 {width: 100%; background: var(--fundo); text-align:left; color: var(--texn); font-size:1em; 
         border-style: none; border-collapse: collapse;  }         /*  border: 1px solid  white;   */
.cel1.td:nth-of-type(1) {text-align:center; color: var(--texn); max-width: 1em; }
.cel1.td:nth-of-type(2) {text-align:left; color: var(--texn); width: auto;  }
.cont-cel1 {position: relative;}  /* width: 50%; max-width: 300px; Tamanho da imagem    */
.cont-cel1 .overlay {transform: scale(1);}
.cont-cel1 .overlay {opacity: 1; }
.overlay-cel1    {position: absolute; top:20; left:0; right:0; background-color:gray; overflow: hidden; 
     width:100%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}




.TaLivros  {background: var(--fundo3); border: 1px solid  white; border-collapse: collapse; 
        text-align:left; font-size:0.9em; color: var(--texn);}
.TaLivros tr {border: 2px solid  maroon;}
.TaLivro  {background: var(--fundo); border: 1px solid  white; border-collapse: collapse; 
        text-align:left; font-size:0.9em; color: var(--texn);}
.TaLivro tr {border: 2px solid  maroon; border-collapse: collapse; color: var(--texn);}
.Índice {background: var(--fundo3); border: 1px solid  white; border-collapse: collapse; 
        text-align:left; font-size:0.9em; color: var(--texn);}
.TaLivro tr:nth-child(even)  {background-color: var(--fundo1);}
.TaLivro tr:nth-child(odd)   {background-color: var(--fundo);} 



.glosa td:nth-of-type(1) {width: 20%; }   /*  5.5em   */
.glosa td:nth-of-type(2) {width: auto; }






/* cont-F needed to position the overlay. Adjust the width as needed */
.cont-F {position: relative; max-width: 40em;      /*  Tamanho da imagem  width: 50%; max-width: 30em - 300px;     */
        border: 3px solid; border-color: red;  /*   border-color: lime;  */
        border-top-style: 3px solid;  border-bottom-color:red;
        border-right-style: none;   
        border-bottom-style: none; 
        border-left-style: none; } 
.cont-F:hover .over-F {opacity: 1;}
.over-F {position: absolute;   top: 0;   /*   bottom: 0;   */
        background: rgba(255, 0, 0, 0.5); /* Black see-through */
        color: #f1f1f1;  width: 100%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
        color: white;  font-size: 0.9em;  text-align: center;}   /*  padding: 5px;  */

.cont-L{position: relative; max-width: 30em;      /*  max-width: 300px;   border: 1px solid;    */
        border-color: cyan;
        border-top-style: none;
        border-right-style: none;   
        border-bottom-style:solid;
        border-left-style: none; }  
.cont-L:hover .over-L {opacity: 1;}
.over-L{position: absolute;  bottom: 0;  
        background: rgba(0, 255, 255, 0.9); /* Black see-through */
        color:black;  width: 100%;  transition: .5s ease;  opacity:0;  /*  color: #f1f1f1;    opacity:0; */
        font-size: 0.9em;   text-align: center;}   /* padding: 5px;  */

.cont-L2{position: relative;      /* max-width: 30em;  max-width: 300px;   border: 1px solid;    */
        color: white; text-align: center;
        border: 2px solid; border-color: rgb(255, 215, 0);
        border-top-style: solid;
        border-right-style: solid;   
        border-bottom-style:solid;
        border-left-style:solid; }  
.cont-L2:hover .over-L2 {opacity: 1;}
.over-L2{position: absolute;  bottom: 0; left:20%; right:20%; 
        background: rgba(127, 255, 212, 0.5); /* Black see-through */
        width: 60%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
        font-size: 0.9em; text-align: center;}   /* padding: 5px;  */


/* Make the image to responsive */
.image      {display: block;  width: 100%;  height: auto;  }
.img      {display: block;  width: 100%;  height: auto; }
/* The overlay effect - lays on top of the cont-F and over the image */
.overtx     {position: absolute;  bottom: 0;  
            background: rgb(0, 0, 0);  
            background: rgba(0, 0, 0, 0.5); /* Black see-through */
            color: #f1f1f1;  width: 100%;  transition: .5s ease;  opacity:0;  /*     opacity:0; */
            color: white;  font-size: 0.9em;  padding: 5px;  text-align: center;}
/* When you mouse over the cont-F, fade in the overlay title */

.cont-c {position: relative;}  /*  width: 50%; Tamanho da imagem  max-width: 300px;  */
.overlayc    {position: absolute; top:20; left:0; right:0; background-color:gray; overflow: hidden; 
     width:100%; height:auto; transform: scale(0);  transition: .3s ease; z-index: 1;}

.cont-c:hover .overlay {transform: scale(1);}
.cont-c:hover .overlay {opacity: 1; }

.over100 {position: relative; width: 100%;
        background: rgba(127, 255, 212, 0.5); /* Black see-through */
        transition: .5s ease;  opacity:0;   text-align: center;}   /* padding: 5px;  */



.inactivoHP {background-color: var(--fundo3); width: auto; cursor: pointer; font-size:0.8em; color: var(--texk) ;
        border: 2px solid var(--texn); border-radius: 0.5em; border-style: outset; text-align: left;
        display: inline ; }  /* text-align: left;  */
.inactivoHP:before {content: '► Ver mais..'; color: var(--texg); font-size: 1em;  }
/*.inactivo:after {content: '- Abrir '; color: var(--texli); font-weight:bold; } /*  font-size: 1.2em; */
.inactivoHP:hover  {cursor: pointer; background-color: orangered; color: white; }  /*  font-size:0.93em;      */

.activoHP {background-color:brown; width: auto; font-size:0.8em; text-align: left; color: white;
            border: 2px solid var(--texgg); }  /*   maroon;  */
.activoHP:before  {background-color: white; content: "▼"; color: var(--texr); } /* font-size: 1.2em; */
.activoHP:after   {content: "..Ver menos ▲"; color:lime; }    /* color:#01f06c;  */
.activoHP:after:hover  {content: "..Ver menos ▲"; border: 2px solid var(--texn); color:cyan; font-size: 1.2em;}  /* color:#01f06c; */
.activoHP:hover  {cursor: pointer; background:red; border: 2px solid var(--texn); color: black; }  /*  font-size:0.93em;      */
.abertoHP {background: var(--fundo); padding-left: 0.2em; font-size:0.8em; color: var(--texn);
           border: solid 2px var(--texgg); margin-bottom: 5px; }  /* padding: 0px 0px 0px 3px; */

.fechaHP {background-color: var(--texgg); cursor: pointer; border-style: none;
          display: inline; padding: 0px 6px 0px 6px;}
.casoHP {background-color: var(--fundo2); margin-top: 0.5em; min-height: 5.5em; border: 2px solid; border-color: gold;}
.foHP {max-width: 25%; max-height: 5em; }
.thp {/*border: 2px solid; border-color: gold;*/  padding-left: 0.5em;
    color: var(--texn); font-size:0.8em; text-indent: 1em; }
.hp {color: var(--texn); font-size:0.8em; border-style: none; border-collapse: collapse;  }
.co2 {width: 20%; text-align:right;}
.hp tr:nth-child(odd) {background-color: var(--fundo2);}