/* FORMATOS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.muda	{font-size:0.875em; text-align:right;  font-style:italic; color: var(--texgm);}
.mudak  {background: var(--fundo6); border-radius: 10px;  border-style: outset; border:solid var(--texn) 1pt;
         padding: 0px 4px 0px 4px; text-align:right; margin-right:2mm; font-style:italic;} /* color: var(--texgm);  line-height: 200%; */
.gm	    {color: var(--texgm);   font-size:0.875em; 	text-align:right; font-style:italic;}
.inis	{color: var(--texinis); font-size:1.1em; 	font-weight:bold;}
.inisn	{color: var(--texinis); font-size:1.1em; 	font-weight:normal;}
.inip	{color: var(--texr); 	font-size:1.1em; 	font-weight:bold;}
.inipn	{color: var(--texr); 	font-size:1.1em; 	font-weight:normal;}
.ps                 {color: var(--texn);    text-indent:3mm;}
.ps::first-letter   {color: var(--texinis); font-size:1.1em; font-weight: bold;}
.pssi	            {color: var(--texn); font-size:0.85em; text-indent:3mm; line-height: 1.1; font-style: italic;}
.pssi::first-letter {color: var(--texinis); font-size:1.1em; font-weight: bold;}
.psk	            {color: var(--texk); text-indent:3mm;	;}		
.psk::first-letter	{color: var(--texinis); font-size:1.1em; font-weight: bold;}	
.pss	            {color: var(--texn); font-size:0.85em; text-indent:3mm; line-height: 1.2; }
.pss::first-letter	{color: var(--texinis); font-size:1.0em; text-indent:3mm; line-height: 1.2; font-weight: bold; }
.pp                 {color: var(--texn); text-indent:3mm;}
.pp::first-letter   {color: var(--texr); font-size:1.1em; font-weight:bold;}
.ppk	            {color: var(--texk); text-indent:3mm;	;}		
.ppk::first-letter	{color: var(--texr); text-indent:3mm; font-weight:bold;	;}		
.pps	            {color: var(--texn); font-size:0.85em; text-indent:3mm; line-height: 1.2; }
.pps::first-letter	{color: var(--texr); font-size:1.0em; text-indent:3mm; line-height: 1.2; font-weight: bold; }
.OMm {background:maroon;  padding: 0404; font-size:0.85em; color: white;
    border-radius: 10px; border-style: outset; border:solid var(--texn) 1pt; }
.OMg {background:#3e8602;  padding: 0404; font-size:0.85em; color: white;
    border-radius: 10px; border-style: outset; border:solid var(--texn) 1pt; }

.DLf    {padding: 0px 3px 0px 3px; border: 1px solid; border-color: white; color: black; font-weight: bold; }
.ref	{color: var(--texr);    font-weight:bold; font-style:normal;}
.datatotal{color:gold;         font-weight:bold;}
.esp	{font-size:6pt;}
.espaco {font-size:0.875em;}
.mes	{font-size:0.875em;	 font-weight:bold; text-align:center;     }
.diab	{font-weight:bold;}
.dia	{font-weight:normal; }
.Na	{color: var(--texn); } .Na::first-letter {padding: 0px 5px 0px 5px; color: var(--fundo); font-weight:bold; background: var(--texn); }
.JC	{color: var(--texcy);} .JC::first-letter {padding: 0px 7px 0px 7px; color: var(--fundo); font-weight:bold; background: var(--texcy);}
.Ou	{color: var(--texr);}     .Ou::first-letter {padding: 0px 5px 0px 6px; color: var(--fundo); font-weight:bold; background:  var(--texr) }


/* FUNDOS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.fAR2 {background: var(--fundoAR2) !important;}    
.bg	    {background:--texcy;}  
.bk	    {background:khaki;}
.FOM	{background:var(--fundocx); line-height: 120%;}
.TA     {background:#c800c8;      text-indent:1mm; color:white; margin-top:5pt;}
.TN     {background:#00CCFF;      text-indent:1mm; color:white; margin-top:5pt;}
.TP     {background:#FF6600;      text-indent:1mm; color:white; margin-top:5pt;}
.TS     {background:gold;         margin-top:3pt; margin-bottom:3pt; text-indent:1mm; color:red;   margin-top:5pt;}
.Gr     {background:gray;  	   text-indent:1mm; color:white;}
.mar    {background:maroon;}
.bw     {background:#777777; border:solid var(--texn) 2pt;  padding:1pt 4pt 1pt 4pt; color:white; margin-top:5pt;}
.bwc    {background:#777777; border:solid var(--texn) 2pt;  padding:1pt 4pt 1pt 4pt; font-weight:bold; text-align:center; color:white;}
.brc    {background:#777777; border:solid red 2pt;	    padding:1pt 4pt 1pt 4pt; font-weight:bold; text-align:center; color:white;}
.bnc    {background:#777777; border:solid #00CCFF 2pt;     padding:1pt 4pt 1pt 4pt; font-weight:bold; text-align:center; color:white;}
.bfc    {background:#777777; border:solid #c800c8 2pt;    padding:1pt 4pt 1pt 4pt;	  }
.MS  	{background:green;  color:white; border-color: white; }
.MD     {background:maroon; color:white; border-color: white; }
.MM     {background:blue; border: 1pt solid white;  color:white; }


/* Caixas / botões xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.btw06  {display: inline-block; width: 6%; background:maroon; color:white; font-size:70%; font-weight: bold; 
        border-radius: 5px; border-style: outset; border:solid var(--texn) 1pt; text-align: center; } /*  height: 1.5em; */
.btw07  {display: inline-block; width: 7%; background:coral; color:black; font-size:70%; font-weight: bold; 
        border-radius: 5px; border-style: outset; border:solid var(--texn) 1pt; }
.btw14  {display: inline-block; width: 14%; background:maroon; color:white; font-size:70%; font-weight: bold; 
        border-radius: 5px; border-style: outset; border:solid var(--texn) 1pt; text-indent: 0; }
.btw16  {display: inline-block; width: 16%; background:lime; color:black; font-size:70%; font-weight: bold; 
        border-radius: 5px; border-style: outset; border:solid var(--texn) 1pt; text-indent: 0; }
.btw20 {width: 27px; height:27px; display: inline-block; /* */
        color:var(--texn); font-size:16px; text-align: center; font-weight: bold; 
        border-radius: 5px; border-style: outset; border:solid var(--texn) 1pt; text-indent: 0; }
.btw20m {width: 25px; background: var(--fundo); display: inline-block; /*height:2em; */
        color:var(--texn); font-size:16px; text-align: center; font-weight: bold; 
        border-radius: 5px; border-style: outset; border:solid var(--texn) 1pt; text-indent: 0; }
.btw45 {width: 45px; height:2em; background-color: var(--fundo); display: inline-block; 
        text-indent: 0; color:var(--texn); font-size:16px; text-align: center; font-weight: bold; 
        border-radius: 5px; border-style: outset; border:solid var(--texn) 1pt; }
.BMC    {background: white; border: 2px solid gray; font-size:1.0em; color:black;}
.BME    {background: black; border: 2px solid gray; font-size:1.0em; color:white;}

.footer {position: fixed; bottom:0; padding: 0px; text-align: center; width: 100%;} /* opacity: 0.95; */
#regua       {opacity: 0.2;}


/*.main   {width: 75%;  float: left;}*/
.previous   {background:green; color: white;}
.next       {background:green; color: white;}

img {max-inline-size: 100%; block-size: auto;  object-fit: contain;}  /*  aspect-ratio: 2/1; object-fit: cover; */

.container {display: grid; grid-template-columns: 20% auto; /* grid-template-rows: 100px auto;  */ gap: 5px; padding: 0.5em; align-items: center;
    background:#666;  text-align: center; border:solid var(--texn) 2pt; color:white; margin-top:0pt;}
    /*  align-items: center;    */
/*.ex2 .parent {    display: flex;    flex-wrap: wrap;    justify-content: center;  }   */
/*.ex2 .box {    flex: 1 1 200px; /*  Stretching: */   /* flex: 0 1 150px;   No stretching:     margin: 5px;  }*/

.parent {display: flex; flex-wrap: wrap; justify-content: center; text-align: center;}
.child  {               
        /*  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]*/
                        /*  If we don't want the items to stretch:  */
        flex: 0 1 390px;
                        /*  If we do want the items to stretch: */
                        /*flex: 1 1 280px;  etc.    gap: 15px; */
        align-items: center; text-align: center; } /* border: 1px solid red;  background: #222; font-size: 2rem; */
.child2  {align-items: center; background:#333;}

:is(h1,h2,h3,p,li,article) 
    {max-inline-size: initial;  margin-block-start: var(--metric-box-spacing);}
@media (min-width: 30em) {article {column-count: 2;}; }    /*  (min-width: 50em)   */
@media print {body {background-color: transparent;}}
/* @media (min-width: 500px) {background-color: var(--fundo);}  /* Styles for viewports wider than 400 pixels.   */

article { background:var(--fundoAR);} /*max-inline-size: 66ch;*/

/*@media (min-width: 45em) {body {display: grid; grid-template-columns: 3fr 1fr;  }   } */
.media {display: flex; align-items: center; gap: 0.1em;}
.media-illustration {flex: 1; align-items: center;}      /*  max-inline-size: 40px;  */
.media-content      {flex: 3; align-items: center;}

::-webkit-scrollbar {  width: 4px;}     /* width */
::-webkit-scrollbar-track {background: var(--fundo) } /* Track  border-radius: 10px; background: #f1f1f1;  */
::-webkit-scrollbar-thumb {background: #888;  background: red;  border-radius: 10px;} /* Handle */
::-webkit-scrollbar-thumb:hover {  background: #990d0d;}   /* Handle on hover */
/*.scroller {scrollbar-color: rebeccapurple green}*/