/* notebox.css
 *
 * Defines styles used with the notebox.php package.
 */
 
/* ---------------------------------------------------------
 * Styles for the info boxes. 
 * --------------------------------------------------------- */
 

.plg-infobox,
.plg-tipbox,
.plg-notebox, 
.plg-warnbox,
.plg-termbox,
.plg-errorbox {
  /*width: 75%;*/
  margin-left: auto;
  margin-right: auto;
  margin-top: 5ex;
  margin-bottom: 6ex;
  padding: 0px;
  background-color: white; /*#f7f7f7;*/
  border: 1px solid #eee;  
  border-bottom: 1px solid #eee;
  /*border: 1px solid #e8e8e8;*/ /*black;*/ 
  border-radius: 4px 4px 4px 4px; 
  /*min-height: 1in;*/
  /*box-shadow: 2px 2px 5px #CCC;*/
  box-shadow: 2px 2px 4px #ddd;
  position: relative;
}


.plg-infobox div.wiki-edittab.right,
.plg-tipbox div.wiki-edittab.right,
.plg-notebox div.wiki-edittab.right, 
.plg-warnbox div.wiki-edittab.right,
.plg-termbox div.wiki-edittab.right,
.plg-errorbox div.wiki-edittab.right {
  right: 0px;
}

.plg-infobox .wiki-edittab button.bw-button ,
.plg-tipbox .wiki-edittab button.bw-button ,
.plg-notebox .wiki-edittab button.bw-button , 
.plg-warnbox .wiki-edittab button.bw-button ,
.plg-termbox .wiki-edittab button.bw-button ,
.plg-errorbox .wiki-edittab button.bw-button  {
  color: black;
}


.plg-notebox {
  border-color: /*#63bbee;*/ #0088ee;  
  /*background-color: #c5dcea;*/
}  

.plg-warnbox {
  border-color: #ffd738; /*#ffde59;*/  
}  

.plg-errorbox {
  border-color: #c23131;  
}  

.plg-termbox {
  width: 75%;
  border-color: #592d59; /*#004cbf;*/ /* #11a9f0;*/ /*#004586;*/  
}  

.plg-tipbox {
  border-color: #00b39a; /*#00bfa5; #592d59;*/  
}  

.plg-notebox summary,
.plg-warnbox summary {
  list-style: none;
  cursor: pointer;
}


.plg-infobox summary::before,
.plg-tipbox summary::before,
.plg-notebox summary::before, 
.plg-warnbox summary::before,
.plg-termbox summary::before,
.plg-errorbox summary::before {  
    content: "-"; /* Custom marker */
    position: absolute;
    right: 10px; /* Adjust position */
    top: 0px;
    font-size: 1.2em;
    transition: transform 0.2s ease;  
}

details[open] > summary {
  content: "-";
}

details[closed] > summary {
  content: "+";
}

.termboxx {
  background-color: #f0f0f0; /*ecf8fe;*/
}

.noteboxx {
  background-color:  #edfff8; /*#ecfef5;*/ /*#ecf8fe; #e8f7fe;*/
}

.warnboxx {
  background-color: #ffff38; /*#ffffe8; #fefee0;*/  
}  

.errorboxx {
  background-color: #fee6e6; /*#fedbdb;*/
}



.plg-notebox .topbar,
.plg-tipbox .topbar,
.plg-warnbox .topbar,
.plg-errorbox .topbar,
.plg-termbox .topbar {
  color: white;
  font-weight: bold;
  text-align: left; /*center;*/
  font-size: 1em;
 /* min-height: 2.5in;
  width: 2ex;  
  height: 1.5em; */
  padding: 0px;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px 4px 0 0;
  height: 1.5em;
}


.plg-notebox .topbar {
  color: black;
  background-color: #d1e7f9; /*#aed8f9;*/ /*#90caf9; #63bbee;*/ /*#0088ee;*/ 
  /*#00796b;*/ /*#21805d;*/ /*#248f68;*/ /*29a175;*/ /*#1e6a39;*/ /*#168253;*/ /*#339966; #0093d9;*/
}

.plg-tipbox .topbar {
  color: black;
  background-color: #dff8f5; /* #ccc2da; #c3bfd9; #b7b3ca; #592d59;*/ /*#663366; *//*#339966;*/
}

.plg-warnbox .topbar {
  /* background-color: #ffff99;*/ 
  background-color: #fff3c4; /*#ffe994; #ffffa6; #ffde59;*/  /*#ffcc00;*/
  color: black;
}

.plg-errorbox .topbar {
  background-color: #ffdede; /*#ffa6a6; #c23131; #A00000;*/ 
  color: black;
}

.plg-termbox .topbar {
  color: black;
  background-color: #c3bfd9; /*#004586; #a8d9f0; *//*#95b8de; #7aaade; #004586; #004cbf;*/ /*#0044AA; */ /* #0369a3;*/
}

.plg-notebox .infotype,
.plg-tipbox .infotype,
.plg-warnbox .infotype,
.plg-errorbox .infotype,
.plg-termbox .infotype {
  width: 60px;
  background-color: white;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #DDD;
  text-align: center;  
  padding-left: 2px;
  padding-right: 2px;
  /*font-size: 11pt;*/
}

.plg-notebox .infotext,
.plg-tipbox .infotext,
.plg-warnbox .infotext,
.plg-errorbox .infotext,
.plg-termbox .infotext {
   text-align: left; 
   padding: 15px 25px 15px 25px;
   line-height: 1.4;  /*1.2*/
  /* border-bottom: 10px solid #f4f4f4;*/
}

.plg-notebox .infotext > .infobody,
.plg-tipbox .infotext > .infobody,
.plg-warnbox .infotext > .infobody,
.plg-errorbox .infotext > .infobody,
.plg-termbox .infotext > .infobody {
  font-size: 0.9em; /*11pt;*/ 
  /*background-color: white;*/
}


.plg-notebox .infohead,
.plg-tipbox .infohead,
.plg-warnbox .infohead,
.plg-errorbox .infohead,
.plg-termbox .infohead {
  /*margin-bottom: 1ex;*/
  /*margin-right: 2ex;*/  
  font-weight: bold;
  font-size: 0.95em;
  /*width: 60px;*/
  text-align: left;
  padding: 2px;
  padding-left: 50px; /*55px;*/ /*1ex;*/
} 

.plg-notebox .infoicon,
.plg-tipbox .infoicon,
.plg-warnbox .infoicon,
.plg-errorbox .infoicon,
.plg-termbox .infoicon {
 /* width: 60px;*/
 /* height: 60px;*/ 
 /* text-align: center;*/
 /* vertical-align: middle;*/
 /* margin-top: 1.5ex;*/
  display: inline-block;
  position: absolute;
  top: -6px;
  left: 10px;
}

.plg-notebox .infoimg,
.plg-tipbox .infoimg,
.plg-warnbox .infoimg,
.plg-errorbox .infoimg,
.plg-termbox .infoimg {
  width: 36px;
  height: 36px;
}

.plg-notebox .infoicon {

}

.plg-warnbox .infoicon {
  top: -6px;
}

.plg-errorbox .infoicon {
  top: -7px;
}

.plg-tipbox .infoicon {
  top: -7px; /*-3px;*/
  left: 8px; /* 13px;*/
}

.plg-tipbox .infoimg {
  width: 36px; /*28px;*/
  height: 36px; /*28px;*/
}

.plg-termbox .infoicon {
  top: -3px;
  left: 13px;
}

.plg-termbox .infoimg {
  width: 32px;
  height: 32px;
}


.plg-infoterm {
  font-weight: bold;
}

.plg-termbox .term {
  font-weight: bold;
  margin-bottom: 3px;
}

.plg-termbox.flat {
  box-shadow: none;
  border: 1px solid #eee;
  width: 70%;  
}

.plg-termbox.inline {
  box-shadow: none;
  border: 1px solid #ddd; /*#eee;*/
  width: 70%;  
  min-height: auto;
  color: #444;
  margin-top: 4ex;
  margin-bottom: 5ex;
  background-color: #F8F8F8;
}

.plg-termbox.inline .topbar {
  background-color:  #d4ccbf; /*#a59989;*/ 
  color: black;
  display: none;
}

.plg-termbox.inline .infoicon {
  top: 3px;
  left: -2px;
  display: block; 
  width: 44px;
  height: 100%; /*50px;*/
  position: relative;
  float: left;
}

.plg-termbox.inline .term {
  margin: 0px;
}

.plg-termbox.shadow {
  box-shadow: 2px 2px 5px #AAA;
  border: none;
}

.plg-termbox.sidebar {
  width: 250px;
  float: right;
  margin-left: 2ex;
  margin-top: 1ex;
  margin-bottom: 1ex;
  box-shadow: none;
}