.section_addon_for_updates
{
 position: relative;
 font-size: 13px;
 text-align: center;
 margin: 0 auto;
 width: 60%;
 padding: 7px 10px 7px 10px;
 background: rgba(0, 0, 0, 0.35); /*35%*/
 border: 1px solid rgb(255 255 255 / 35%); /*35%*/
 box-shadow: 0px 4px 4px -1px #00000063;
 line-height: 20px;
}

/*================*/
/*collapsed - content - CSS */
/*================*/
/*details - but not 'summary'*/
details > summary 
{
 font-family: Arial,Helvetica,sans-serif;
 position: relative;
 cursor: pointer;
 font-weight: 500;
 transition: 0.5s;
 /* margin-bottom: 2px; */
}
summary 
{
 color: #fff;
}
summary:hover 
{
 background:#80808066;
}
summary, summary:hover 
{
 /**/
 width: fit-content;
 margin: 0 auto;
 padding: 0px 5px 0px 5px;
}

/* marker '▶▼' Default - normal - fallback to Default html icon - unset */
summary::marker {
  content: unset; /*back to normal html icon*/
  color: #b2b2b2;
}

/* Font Awesome version
only will work - if we link the library
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
and add a class into 'marker'  -  '.fa-icons'
Note: we use 2 slash and not 1 - because if we use 1 slash in load sometimes is remove it
*/
/*normal*/
summary.fa-icons::marker 
{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0a9";
}
/*on click - show down icon*/
details[open] summary.fa-icons::marker 
{
  content: "\f0ab";
}
/*if was the Default icon from HTML - do unset - hide*/
summary.fa-icons:before {
    content: unset !important;
}

/*Summary_Pure_Page_Different_CSS*/
.Summary_Pure_Page_Different_CSS
{
 background: #252525;
 padding: 1px 10px 1px 10px;
 border-radius: 3px;
}
.Summary_Pure_Page_Different_CSS:hover 
{
 color: #E09900; 
 background:#252525;
 padding: 1px 10px 1px 10px;
}
/*only if have class 'Summary_Pure_Page_Different_CSS + 'marker' */
.Summary_Pure_Page_Different_CSS::marker 
{
 /* decrease the original px that was in 'font-size' - for example if was 14px if i do - calc(1em + -3px) - is take the px that was before and decrease by -3px - so in the end we get 11px. */
 font-size: calc(1em + -3px); 
}

pre 
{
 /* 
  if we do display:none, the transition will never work,
  with this trick of
  max-height: 0; overflow: hidden; - we do transion
 */
 max-height: 0; /* collapsed */
 overflow: hidden;
 opacity: 0;
 transition: 0.3s;
  
 padding: 0;
 margin: 0;
 font-family: "Open Sans", sans-serif; /* font-family: Arial,Helvetica,sans-serif; */
 white-space: unset; /*pre*/   
 font-weight: 300;
 font-size: 17px;
 margin-top: 3px;
 margin-bottom: 7px; /* -5px */
}
.pre_css_addon_for_updates
{
 background: #00000000;
 color: #fff; 
 line-height: 15px;
 font-weight: 400;
 font-size: unset; /*take the first px that was in body*/
 white-space: pre-line;
}
.Note_Updates_color_bold_orange_repeated
{
  color: #FEAC2F;
}
/*================*/