/* COMMON
==============================================================================*/
/*#region*/


/* MAIN CONTAINERS
--------------------------------------------------------------------*/
/*#region*/
.debug-stats {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #212121;

  width: 100%;
  /* max-width: 240px; */
  height: auto;
  max-height: 70vh;
  overflow-y: auto;

  border: solid 1px #f1f1f1;
  margin-bottom: 20px;

  transition: border .3s;
}

.debug-stats.is-open {
  border-color: #ccc;
}

.debug-stats.is-fixed {
  position: fixed;
  left: 2px;
  bottom: 2px;
  z-index: 50000;

  background-color: rgba(255, 255, 255, .98);
  margin-bottom: 0;
}

.debug-stats .collapse-content {
  height: auto;
  padding: 1.5em 2em 2em;
  /* border-top: solid thin #ccc; */
}
.debug-stats.is-open .collapse-content {
  /* height: calc(100% - 30px); */
  /* overflow-y: auto; */
}
/*#endregion*/


/* TITLES FONTS
--------------------------------------------------------------------*/
/*#region*/
.debug-stats h2, 
.debug-stats h3, 
.debug-stats h4, 
.debug-stats h5,
.debug-stats .item-title {
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
  font-weight: bold;
}

.debug .debug-content,
.debug-content h3,
.debug-content h4,
.debug-content h5 {
  font-family: "Courier New", "Courier", monospace;
}


.debug-stats .collapse-header {
  font-size: 1.1em;
}

.debug-stats .item-title {
  font-size: 1.05em;
  letter-spacing: 0.03em;
}

.debug-stats h3:not(.item-title) {
  font-size: 1.2em;
}

.debug-content h4 {
  font-size: 1.1em;
}
.debug-content h5 {
  font-size: 1em;
}

/*#endregion*/


/* COLLAPSE HEADER
--------------------------------------------------------------------*/
/*#region*/
.debug-stats .collapse-header {
  height: 30px;
  position: sticky; /* 2023.09.29 */
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background-color: #fff;
  border-bottom: solid thin #ccc;
  /* background-color: lavender; */
}

.debug-stats .collapse-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  height: 100%;
  padding: 6px 12px 5px;

  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;

  opacity: .6;
  transition: opacity .3s, color .3s;
}

.debug-stats .collapse-trigger:hover,
.debug-stats.is-open .collapse-trigger {
  color: royalblue;
  opacity: 1;
}


.debug-stats .collapse-trigger span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.debug-stats .collapse-trigger i {
  font-size: .8em;
  transition: transform .3s;
}
.debug-stats.is-open .collapse-trigger i {
  transform: rotate(90deg);
}
/*#endregion*/


/*#endregion COMMON*/



/* DEBUG
==============================================================================*/
/*#region*/


/* MAIN WRAPS
--------------------------------------------------------------------*/
/*#region*/
.debug {
  /* height: 60vh; */
  max-height: 70%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.debug.is-fixed {
  width: 100%;
  max-width: 960px;
}
.debug.is-open {
  /* height: auto; */
  max-height: 70vh;
}

.debug .debug-content {
  color: #2E3192;
  padding-bottom: 1em;
  border-bottom: solid 0.1px #bbb;
  /* background: #fff; */
  margin: 0 0 2.5em 0;
}
.debug .debug-content:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}

.debug-content pre {
  display: block;
  width: 100%;
  font-size: 110%;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  /* background-color: #fc0; */
}
/*#endregion*/


/* ITEM TITLE
--------------------------------------------------------------------*/
/*#region*/
.debug-content .wrap-title {
  margin-top: 1em;
  border-bottom: dashed thin #bbb;
  margin-bottom: 1em;
}
.only-title .wrap-title {
  border-bottom: none;
}

.debug-content .item-title {
  padding: 0;
  color: #000;
}
.debug-content .item-title:first-child {
  margin-top: 0;
}

/* FILE AND LINE */
.debug-content .file-and-line {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  padding: .2em 0 .3em;
  color: #bbb;
  
}
/*#endregion*/


/* DISPLAY SINGLE VALUES
--------------------------------------------------------------------*/
/*#region*/

/* DATA WRAP */
.debug-content .data-wrap {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  /* padding: .5em .5em .5em 0; */
  overflow-wrap: break-word;
  /* white-space: pre-wrap; */
}

/* DATA VALUE */
.debug-content .data-val {
  /* font-size: 105%; */
  font-weight: 400;
  color: #000;
}

/* DATA TYPE */
.debug-content .data-type {
  text-transform: lowercase;
  font-style: italic;
  font-size: 13px;
  color: #bbb;
  margin-left: 1em;
}

/*#endregion*/


/* LIST - TREE
--------------------------------------------------------------------*/
/*#region*/
.debug .title-tree {
  border-top: dashed thin #ccc;
  padding-bottom: 0;
  padding-top: .5em;
}
.debug ol,
.debug ol.tree-wrap li {
  list-style: inside decimal;
}
.debug ol.tree-wrap {
  padding: .3em .5em .5em;
  
}
.debug ol.tree-wrap li {
  padding: 0;
  font-size: .9em;
  font-style: italic;
  line-height: 1.3;
  color: grey;
}
/*#endregion*/


/* 👴 LIST - NORMAL [BAK - not used anymore...]
--------------------------------------------------------------------*/
/*#region*/
.debug-content ul {
  margin-bottom: .5em;
}

.debug-content ul,
.debug-content ul li {
  display: block;
  padding: 0 0 0 .5em;
  line-height: 1.4;
}
.debug-content ul li:first-child {
  padding-top: 0;
}
.debug-content .dlist.l2 li {
  font-weight: normal;
  margin: 0 0 .3em;
}
.debug-content .dlist.l3 li {
  font-weight: normal;
  margin: 0;
  padding-bottom: 0;
}
.debug-content .dlist.l4 li {
  font-weight: 300;
  margin: 0;
  padding-bottom: 0;
}
/*#endregion*/


/*#endregion DEBUG*/



/* STATS
==============================================================================*/
/*#region*/


/* MAIN
--------------------------------------------------------------------*/
/*#region*/
.stats {
  max-width: 240px;
}

.stats.is-large {
  max-width: 570px;
}

.debug-stats.stats {
  left: auto;
  right: 2px;
}

.stats .collapse-content {
  padding: 1.2em 1.5em 1em;
  /* border-top: solid thin #ccc; */
}
/*#endregion*/


/* LISTS
--------------------------------------------------------------------*/
/*#region*/
.stats .list-title {
  font-weight: 600;
  margin: 1em 0 .5em 0;
}

.stats .stats-list {
  height: 100%;
  overflow: auto;
  margin: 0 0 0 1em;
  list-style: none;
  text-align: left;
  font-size: 13px;
}
/*#endregion*/


/* STATS COLS
--------------------------------------------------------------------*/
/*#region*/
.stats-left-col {
  display: inline-block;
  min-width: 110px;
}
.stats-right-col {
  font-weight: bold;
  color: #DC2221;
}
/*#endregion*/


/*#endregion STATS*/



/* CROSS BROWSER OPACITY 0 TO TRANSITION REVEAL
==============================================================================*/
/*#region*/

/* OPACITY 0 AND TRANSITION */
.stats-fade-this {
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
}

/* TRANSITION DURATION */
.stats-fade-this.time-200 {
	transition-duration: .2s;
}
.stats-fade-this.time-300 {
	transition-duration: .3s;
}
.stats-fade-this.time-400 {
	transition-duration: .4s;
}

/* OPACITY 1 */
.stats-fade-this.reveal {
	opacity: 1;
}
/*#endregion*/



/* MEDIA QUERIES
==============================================================================*/
/*#region*/
@media screen and (max-width: 768px) {
  
  .debug.is-fixed {
    width: 75%;
  }

}


@media screen and (max-width: 480px) {
  
  .debug.is-fixed {
    width: 90%;
  }

}
/*#endregion*/