@media only screen { /* desktop and mobile  (vs paper) MEDIA ONLY SCREEN START  {{{ */
*[console]  {
  background-color:black    !important;
  color           :#AFA     !important;
  line-height     :1.2em;
}

@font-face{
  font-family: 'source_code_pro';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src: url('./source-code-pro/EOT/SourceCodePro-Regular.eot') format('embedded-opentype'),
       url('./source-code-pro/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'),
       url('./source-code-pro/WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'),
       url('./source-code-pro/OTF/SourceCodePro-Regular.otf') format('opentype'),
       url('./source-code-pro/TTF/SourceCodePro-Regular.ttf') format('truetype') ;
}

#upper_bar {
    position: fixed; top: 0; width: 100%; z-index: 100; height: 1.8rem;
    font-size:2.0rem;
    padding:0.2em;
    background-color:#DDD;
    outline: 1px solid black;
    white-space: nowrap;
    box-shadow: 0 0 200px orange;
    margin-left: -0.5rem; /* must match inverted body.margin-left*/
    margin-bottom: 0.5rem;
}

body {
  font-family: sans-serif;
  font-size:16px;  /* overrided in mobile */
  padding: 0;
  margin: 0;
  line-height:1.0;
  background-color:#EEE;
  margin-left: 0.5rem; /* must match inverted upper_bar.margin-left*/
  padding-top: 3rem;
}

#zoomDiv, #searchForm  { 
   display:none;
   left: 1%;
   height:auto;
   max-height: 95%; 
   min-width:50%; 
   max-width: 94%; 
   overflow: auto;
   color:#000; border-radius: 0.5rem; border: 4px solid black; font-size: 1rem;
   box-shadow: 0 0 10px black;
   padding: 0.5rem;
}


#zoomDivControls {
   width: 100%;
   border-bottom: 1px solid black;
   position: fixed;
}

@keyframes searchFormTransparency {
  from   { opacity: 0.9; }
  50%    { opacity: 0.3; }
  to     { opacity: 0.9; }
}
#searchForm  { 
   position: fixed;
   top: 2.8rem;
   z-Index:9;
   width:96%;
   height:auto;
   box-shadow: 0 0 10px black;
   background-color: #FFE;
   transition: width 1s;
   opacity: 0.9;
   max-height: 90%;
}
#searchForm[resultFound] {
   animation-name     : searchFormTransparency;
   animation-duration : 1.00s;
   animation-delay    : 0.0s;
}

#searchAndMode { margin-bottom: 0.7em; }

@keyframes zoomDivAnimation {
  from   { bottom: 100%; }
  to     { bottom: 0.5rem; }
}
#zoomDiv {
   z-Index:10;
   position: fixed;
   width:auto; 
   bottom: 0.5rem;
   animation-name     : zoomDivAnimation;
   animation-duration : 1.50s;
   animation-delay    : 0.0s;
   background-color: #EFF;
   opacity: 0;
   transition: opacity 1s ease-out;
   max-height: calc( 100% - 5.5em );
}
#zoomDiv[maximized=true] {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  max-width: 100%; max-height: 100%; z-index: 1000;
}

.lectureMode0 { }
.lectureMode1 {
   line-height: 1.4em;
}
pre.lectureMode1 {
   white-space: pre-wrap;
}

.lectureMode2 {
   white-space: break-spaces;
   font-family: sans-serif;
   letter-spacing: 0.05em !important;
   line-height: 1.7em;
}

#historyBackFor { 
  font-family:monospace; 
  color:blue;
  font-size:1.7rem;
} 

th, h1, h2, h3, h4 { font-family: sans-serif; }

b { 
  color: #0A9;
  font-weight:500;
  text-decoration: underline; 
  background-color: white;
}

*[zoom] {
  opacity:0.7;
  background-color:#EEEEEE; 
  margin: 3px 0 0 3px;
  outline: 1px solid grey;
  padding : 2px 1px 2px 1px;
  background: linear-gradient(to bottom, #F3F9A7 33%, #CAC531 100%);
}
@keyframes zoomOverAnimation {
  from   {transform:scale(1.5); opacity: 0.3; }
  90%    {transform:scale(1.0); opacity: 0.3; }
  to     {transform:scale(1.0); opacity: 1.0; background: white }
}

* > *[zoom]:hover {
  font-weight: bold;
  background-color   : white;
  animation-name     : zoomOverAnimation;
  animation-duration : 1.50s;
  animation-delay    : 0.0s;
  z-index            : 5;
  transform          : scale(1.05);
  background         : white;
  outline            :  3px solid green;
}


#zoomHTMLContent > *[zoom]:hover {
  font-weight: inherit;
  transform: none; 
}

#zoomHTMLContent { }
#zoomHTMLContent > * > *[xsmall] ,
#zoomHTMLContent > * > *[title] {
  font-size: 1.5em;
}


*[id=zoomHTMLContent] > * {
  opacity:1.0;
}

div[group] > *[zoom] {
  padding : 2px 10px 2px 1px;
}

#zoomDiv *[zoom] {
    line-height: initial;
    margin-right: 1.0rem;
    box-shadow: none;
    background-color: inherit;
    letter-spacing: -0.1em;
    max-width: 100%;
    overflow: auto;
    display: contents;
}
#zoomDiv math[zoom] { display: initial; }

*[title] {
    width:auto; 
    font-family: monospace;
    font-weight: bold;
    font-size:0.7rem;
    color: brown;
    text-align:right;
    line-height:1.0em;
    padding-top:0;
    padding-bottom:0;
    word-wrap:break-word;
    padding-right:0.1rem;
    padding-left:0.0rem;
    outline:0px; 
}

pre[zoom] {
  float: left; width: auto;
  margin:0 0 2px 0;
}

pre, code, kbd, samp, tt {
  font-family:'source_code_pro',monospace, monospace;
  font-size:1em;
}
*[zoom] pre  { outline: 0px; }
math[zoom]{ padding:1.1em 0 1.1em 0; }
pre > b { }

*[cite]         { font-style: italic; }
*[TODO]:before  { content: "◔ "; }
pre[labels*="TODO"] { border-left: 3px solid red; }

*[zoom] { font-size:0.0006rem; }
img[zoom],svg[zoom]{ max-width:8rem; max-height:8rem;}
#zoomDiv svg[zoom]{ max-width:none; max-height:none;}
*[xsmall],*[zoom] > *[title]  
  { white-space:normal; font-size:0.7rem; word-wrap: normal; }
*[xxbig]  { font-size:1.7em; font-weight: bold; color:#007733;}
*[xbig]  { font-size:1.5em; }

*[hidden]  { display:none; }
div[floatl] { float:left ; margin-right:1em; border-left:1px solid #99f; border-top:1px solid #99f; max-width:calc(49% - 1em);}
div[floatr] { float:right; margin-left :1em; border-left:1px solid #99f; border-top:1px solid #99f; max-width:calc(49% - 1em);}
ul,ol { margin-top:0.3em; margin-bottom:0.3em;  margin-left: 1.0em; padding-left: 0rem; }
#zoomDiv [zoom] , #zoomDiv * [zoom], #zoomDiv * * [zoom], #zoomDiv * * * [zoom]{ font-size:1em; } 
#zoomDiv img[zoom] , #zoomDiv * img[zoom], #zoomDiv * * img[zoom], #zoomDiv * * * img[zoom]{ max-width:100%; max-height:100%;} 

/* REF: https://stackoverflow.com/questions/4910077/select-all-child-elements-recursively-in-css */
#zoomDiv *[xsmall] , #zoomDiv *[title] , 
{ font-size:2em; font-weight: bold; text-decoration: underline; }
#zoomDiv * td { font-size:1em; }

a            { text-decoration:none; font-family:'Source Code Pro',monospace; padding:0.0;}
a[href^="#"]:before /* mark internal anchor */ {  content: ">"; }
a[href^="#"]:after  /* mark internal anchor */ {  content: "<"; }
a:visited { color:blue; }
td { 
   font-size: 0.8rem;
   vertical-align: top;
   padding:2px;
   margin:0;
}
td,th               {background-color:#FFFFFF; overflow: hidden; }

table { width:100% border:0; margin: 0;}

           *[zoom] { min-height:0.4rem; cursor: cell; }
/*       div[zoom] { white-space: pre; } */
#zoomDiv > *[zoom] { border-top:0px   ; cursor: pointer; }

hr {
    color: black;
    outline: 1px solid #999;
    border: 0px;
    height: 0.1em;
    margin: 0.1rem 0.0rem 0.0rem 0.0rem ; 
}

#idLabelsFilter
{
    vertical-align: middle;
    font-size:2.5rem;
    height:0.9em;
    outline: 1px solid black;
    box-shadow: 1px -1px 4px #000;
    cursor: crosshair;
}
#loupe,#zoomSlider { float:right; }
#idLabelsFilter[active=true] {
    background-color: #AFA;
}

#inputQuery, #matchNumber { 
  font-size:1.0em;
  font-weight:bold;
  margin: 1.0rem 0 0.1rem 0;
  cursor: auto;
  color:green;
}
#inputQuery  { width: 75%; box-shadow: 0 0 4px blue; }
#matchNumber { width: 15%; float: right; display: inline-block; } 

#buttonRefineSeach {
    padding: 0;
}

#divElementLabels {
  display: table-footer-group:
  text-align: right;
  vertical-align: top;
  padding-top: 3.5rem;
}

.labelButton {
    margin-left:0.5rem;
    margin-bottom:0.5rem;
    border: 3px solid black;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    font-size:0.9em;
    cursor: crosshair;
    display: inline-block;
}
.labelButton[selected=false] {
    background-color: white;
}
.labelButton[selected=true] {
    background-color: black;
    color: white;
}

/* TODO:(qa) refactor styles for buttons */
#divClose1, #divClose2, 
#switchMaximize, #unhide, #butSwitchLectureMode, #textSizeSlider, #cellIDPanell, #copyLabels {
    font-size:1.1rem;
    padding: 0.1rem  0.3rem 0.1rem 0.3rem;
    border-radius: 1rem;
    text-align: center;
    background-color: #EEF;
    box-shadow: 0 0 4px blue;
    white-space: nowrap;
    cursor: context-menu;
}
#switchMaximize, #unhide, #butSwitchLectureMode, #textSizeSlider, #cellIDPanell, #copyLabels {
    color:blue;
    border: 3px solid blue;
}
#copyLabels { float: right; }
#divClose1, #divClose2 {
    color:grey;
    border: 3px solid black;
    display: inline-block;
    margin-right:0.5em;
    font-weight: bold;
}

#cellIDPanell {
    color: black;
    border: none;
    border-radius: 0.5rem;
    display: inline;
}
#cellIDPanell:empty {
    display: none;
}

#switchMaximize, #butSwitchLectureMode, #textSizeSlider {
    display: inline;
    margin-right:0.5em;
}
#textSizeSlider {
    vertical-align: text-top;
}
#unhide {
    float: right; width: auto;
    margin-right:0.5em; 
}

#historyBackFor {
    display:inline;
    margin-left:0rem;
    font-family: 'Source Code Pro',monospace, monospace;
}


div[group], div[groupv] {
    /*outline: 3px solid black;*/
    margin-right: 0.3rem;
    margin-bottom: 0.6rem;
    vertical-align: top;
    padding-left: 2px; /* helps with color hint during navigation */
    border-radius: 0.5rem;
    box-shadow: 5px 5px 5px grey;
}

*[textFound="true"] {
  outline: 1px solid #0F0;
  background-color: #DFD;
  border-top: 5px dotted green;
}

#zoomDiv *[textFound="true"] {
  outline: inherit;
  background-color: inherit;
}


*[textFound="false"],div[textFound="false"] { display:none; !important; }
*[textFound="debug"],div[textFound="debug"] { background-color: #AAA; }

/*
div[group]:empty, div[groupv]:empty {
  display: none;
}
*/

*[groupv] {
   width: min-content;
   max-width: min-content;
   display:inline-grid;
   background: linear-gradient(to bottom, #FFF 33%, #AAA 100%);
}
*[group] {
  display: inline-block; 
  background: linear-gradient(to right, #FFF 33%, #DDD 100%);
  background-image: url('/IT_notes/background.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
/*   max-width: min-content; */
}

*[groupv] > *[zoom] { margin: 0 0.1rem 0.2rem 0.1rem; }
*[group]  > *[zoom] { margin: 0.2rem; }

#idLabelSearchAndMode {
    color: #0000CC;
}

span[labelcount] {
     font-family: monospace;
     font-size: 0.7em;
     vertical-align: top;
     color: grey;
}

*[tagCount] {
  font-size:0.8rem;
  position: relative; float: right;
  top: 0.0em; right: -0.6em; 
  outline: 1px solid gray;  background-color:white;
  margin:0; padding:0; 
}

#previewTop {
  background: linear-gradient(to bottom, #F3F9A7 33%, #CAC531 100%);
  padding: 1px 0 3px 0;
  margin: 0;
  text-align: center;
  font-family: inherit;
  font-weight: bold;
  letter-spacing: 0.1em;
}

#closePreview {
    position: absolute; right: 0; top: -1px;
    float: right;
    padding: 2px;
    outline: 1px solid black;
}

/* WARN: We don't want cell's background colors
 * for printed media, only screen displays  { */
  *[bggray]   { background-color:gray   !important;}  
  *[bgyellow] { background-color:yellow !important;}  
  *[bgblue]   { background-color:#CCF   !important;}  
  *[bgorange] { background-color:#FFDF5F!important;}  
  *[bggreen]  { background-color:#AFA   !important;}  
  *[bgbrown]  { background-color:#FFEBCD!important;}  
  *[bgred]    { background-color:#FF8888!important;}  
/* } */

.labelBlock { margin-bottom: 0.2em }

.labelBlockTitle {
    display: inline-block;
    width: 10em;
    text-align: right;
}

.labelPrefixGroup {
    display: inline-block;
    width: calc( 98% - 10em);
    vertical-align: top;
    border-bottom: 2px solid black;
}

} /* }}} MEDIA ONLY SCREEN END  */

@media (hover:on-demand), (pointer  : coarse) { /* MOBILE devices */
/* 
 * ^^^ REF: https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen 
 **/

    /* START LONG-PRESS { */
    *[zoom] {
    /* Disable select https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
      -webkit-touch-callout: none;    /* iOS Safari */
        -webkit-user-select: none;    /* Safari */
         -khtml-user-select: none;    /* Konqueror HTML */
       /*  -moz-user-select: none; */ /* Firefox */
            -ms-user-select: none;    /* Internet Explorer/Edge */
                user-select: none;    /* Non-prefixed version, currently
                                      supported by Chrome and Opera */

    }

    #zoomDiv [zoom] , #zoomDiv * [zoom], #zoomDiv * * [zoom], #zoomDiv * * * [zoom]
    {
    /* Disable select https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
      -webkit-touch-callout: initial;    /* iOS Safari */
        -webkit-user-select: initial;    /* Safari */
         -khtml-user-select: initial;    /* Konqueror HTML */
           -moz-user-select: initial;    /* Firefox */
            -ms-user-select: initial;    /* Internet Explorer/Edge */
                user-select: initial;    /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
    }
    body { font-size:32px; !important; }
  
    *[xsmall], *[zoom] *[title] { font-size:0.9rem; }
    /* END   LONG-PRESS } */
    #printButton,#hint01 { display: none; color:red; }

    *[zoom] > not:span[title] { display: normal; !important; }

    #zoomSlider, #loupe { display: none; }

    *[group],*[groupv] {
        max-width: initial;
    }
    *[group]  { width: 95%; }
    *[groupv] { width: 45%; }

/*    #searchForm  { max-height: 20rem; } */
}

@media print { /* printed paper / "PDFs" */
  *[zoom] {
    page-break-after:always;
  }
  body { margin: 8mm 8mm 8mm 8mm; }
  div { padding: 0; margin: 0 }
  .noprint { display: none !important; }
  *[title] {
      /*font-family: monospace;*/
      font-weight: bold;
      font-size:1.3rem;
      color: brown;
      text-align:right;
      line-height:1.0em;
  }
  *[xsmall]  {
      font-weight:bold; 
      color: orange;
  }

  pre, code, kbd, samp, tt{
    font-family:'Source Code Pro',monospace, monospace;
    font-size:1em;
    white-space: break-spaces;
  }

  *[textFound="false"] { display:none; }
}

@media all {  /* screen and paper */

*[gray]     { color:gray   !important; } 
*[yellow]   { color:#DD0   !important; } 
*[blue]     { color:#559   !important; } 
*[orange]   { color:#D09   !important; } 
*[green]    { color:green  !important; } 
*[brown]    { color:brown  !important; } 
*[red]      { color:red    !important; } 
 
/* cli (command-line-interface) allows to format text
 * as computer-console output:
 * Just wrap text inside <div cli> or similar.
 * probably oneline alternative: $º$ ... º is simpler
 * and more suitable when adding left/right comments.
 * {{{ */
*[cli] {
 /* clear: both; */
 /* box-sizing: border-box; */
 /* position: relative; */
 /* border-radius: 0 0 1em 1em; */
 /* box-shadow: 0.1em 0.1em 2px #090909; */
 /* padding: 1em; */
 /* word-wrap: break-word; */
 /* overflow-wrap: break-word; */
 /*  font-family: "Ubuntu Mono","DejaVu Sans Mono", "Courier New", Courier, monospace; */
    background: rgba(9, 9, 9, 0.6);
    color: #63de00;
    max-width: min-content;
    padding-left: 0.2em;
    padding-bottom: 0.2em;
    border-radius: 0 0 0.5em 0em;
    box-shadow: 4px 2px 8px #090909;
}

*[cli]::before {
    display: inline-block;
    position: relative;
    width: 100%;
    content: "⏺ Console ⏎";
    color: #c9c9c9;
    font-size: smaller;
    font-weight: bold;
    background: #010101;
/*
    left: -12px;
    top: -12px;
    padding: 12px;
    line-height: 4px;
    */
}
/* }}} */
.innerSearch,.innerLink { 
  display: inline;
  color:blue; 
}

span[sub]   { vertical-align: sub  ; font-size:0.5em; letter-spacing: 0.6em; }
span[super] { vertical-align: super; font-size:0.5em; letter-spacing: 0.6em; }

} /*media all, screen and paper */