body {
  background-color: rgb(28, 27, 27);
}


button {
  font-size: 1em;
}

h1 {
  font-family: 'Noto Sans', sans-serif;
  font-size: 2em;
}


div.code {
  white-space: pre;
  display: block;
  letter-spacing: 0px;
  font-family: consalas, monaco, monospace;
  font-size: 15px;
  padding: 0.0px;
  border: 0;
}

.code-higlighting-window {
  position: relative;
  border: 1px solid #333333;
  /* width: 850px;*/
  font-size: 15px;
  overflow: hidden;
  padding: 0px;
  background-color: black;
  display: none;
}


.code-box-frame {
  position: relative;
  width: 700px; 
  /*height: 400px;*/
  border: 5px solid rgb(28, 27, 27);
  overflow: hidden;
  background-color: rgb(28, 27, 27);    /* *** This is a hardcoded color and its wrong - set it dynamically on start up */
  /* background-color: white; */
}



.code-box-window {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid black rgb(28, 27, 27);; 
  overflow: hidden;
  font-size: 15px;
  padding: 0px;
  background-color: black;
}


@media only screen and (max-width: 700px) {
  .code-box-window {

  }
  body {
  }
}


body{
  -webkit-text-size-adjust: 100%;
}



.font-measure {
    position: absolute;
    visibility: hidden;
    display: block;
    letter-spacing: 0px;
    font-family: monospace;
    padding: 0.0px;
    border-width: 0;
    font-size: 15px;
    box-sizing: border-box;
    white-space: nowrap;
}




.highlighter-box {
  position: absolute;
  width: 80px;
  height: 19px;
  top: 57px;
  left: 110px;
  background-color: transparent;
  border: 2px solid red;
  padding: -1px;
  margin:  -1px;
  z-index: 60;
  visibility: hidden;
}


.highlighter {
  position: absolute;
  width: 80px;
  height: 19px;
  top: 57px;
  left: 110px;
  letter-spacing: 0px;
  white-space:pre;
  font-family: consalas, monaco, monospace;
  font-size: 15px;
  background-color:  #ffff80;
  color: black;
  z-index: 50;
  visibility: hidden;
}

pre {
    display: inline;
    margin: 0;
}


.bg-img {
  border-radius: 20px;
  background: #73AD21;
  padding: 20px; 
  width: 550px;
  height: 300px;  
}



.filename {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  font-size: 13px;
  /*font-weight: bold;*/
  font-family: consalas, monaco, monospace;
  padding: 0.2em 2em 0.2em 2em;
  text-align: right;
  overflow: hidden;
  color: #ffffff;
  z-index: 200;
}

    .filename:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: grey;
      -webkit-transform-origin: 100% 0;
      -ms-transform-origin: 100% 0;
      transform-origin: 100% 0;
      -webkit-transform: skew(-135deg);
      -ms-transform: skew(-135deg);
      transform: skew(-135deg);
      z-index: -1;
    }


.file-codelisting {
  position: absolute;
  top: 0;
  left: 0;
  width: 650px; 
  height: 435px;
  color: white;
  overflow: auto;
  /*border: 5px solid rgb(28, 27, 27);*/ 
  padding: 5px;
  background-color: rgb(28, 27, 27);    /* *** This is a hardcoded color and its wrong - set it dynamically on start up */
  /* background-color: white; */
  z-index: 680;
  visibility: hidden;
}

    /* width */
    .file-codelisting::-webkit-scrollbar {
      -webkit-appearance: auto;
      width: 12px;

    }

    /* Track */
    .file-codelisting::-webkit-scrollbar-track {
      background: black; 
    }
    /* Track */
    .file-codelisting::-webkit-scrollbar-track:horizontal {
      background: black; 
    }
     
    /* Handle */
    .file-codelisting::-webkit-scrollbar-thumb {
      background: #888; 
    }

    /* Handle on hover */
    .file-codelisting::-webkit-scrollbar-thumb:hover {
      background: #777; 
    }



.file-codelisting-codetag {
  font-size: 15px;
}

    /* width */
    .file-codelisting-codetag::-webkit-scrollbar {
      -webkit-appearance: auto;
      height: 12px;

    }

    /* Track */
    .file-codelisting-codetag::-webkit-scrollbar-track {
      background: black; 
    }
    /* Track */
    .file-codelisting-codetag::-webkit-scrollbar-track:horizontal {
      background: black; 
    }
     
    /* Handle */
    .file-codelisting-codetag::-webkit-scrollbar-thumb {
      background: #888; 
    }

    /* Handle on hover */
    .file-codelisting-codetag::-webkit-scrollbar-thumb:hover {
      background: #777; 
    }





.codelisting-ribbon {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 35px;
  background-color: grey;
  z-index: 690;  
  visibility: hidden;
}

.codelisting-title {
  position: absolute;
  left: 20px;
  top: 10px;
  font-size: 15px;
  color: white;
  font-family: consalas, monaco, monospace;
  z-index: 700;  
  visibility: hidden;
}

.codelisting-action-area {
  position: absolute;
  top: 10px;
  right: 15px;
  height: 50px;
  z-index: 700;
  visibility: hidden;
}

.codelisting-action-icon {
  color: white; 
  font-size: 1.2em; 
  margin-right: 15px;
  cursor: pointer; 
  z-index: 700;
  visibility: hidden;
}


.codelisting-copy-message {
  border: 2px solid;
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  font-family:  consalas, monaco, monospace;
  z-index: 700;
  visibility: hidden; 
}




.play-pause-area {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: red;
  cursor: pointer;
  top: 120px;
  left: 220px;
  opacity: 0;
  z-index: 500;
}


.bigplay {
  position: absolute;
  color: #cc000088;
  top: 160px;
  left: 300px;
  font-size: 80px;
  transition: all 0.5s;
  visibility: hidden;
  z-index: 400;
}

.bigplay.showit {
    transform: scale(1.5);
    opacity: 0;
}



.bigpause {
  position: absolute;
  color: #cc000088;
  top: 160px;
  left: 300px;
  font-size: 80px;
  transition: all 0.5s;
  visibility: hidden;
  z-index: 400;
}

.bigpause.showit {
    transform: scale(1.5);
    opacity: 0;
}


.bigreplay {
  position: absolute;
  color: #cc000088;
  top: 160px;
  left: 300px;
  font-size: 80px;
  transition: all 0.5s;
  visibility: hidden;
  z-index: 400;
}

.bigreplay.showit {
    transform: scale(1.5);
    opacity: 0;
}


.bigreplaywhite {
  position: absolute;
  color: darkgrey;
  top: 180px;
  left: 300px;
  font-size: 40px;
  transition: all 0.5s;
  visibility: hidden;
  z-index: 420;
}


.bigwhiteplay {
  position: absolute;
  color: grey;
  opacity: 0.4;
  top: 160px;
  left: 280px;
  font-size: 80px;
  visibility: hidden;
  z-index: 400;
}


.bigforward {
  position: absolute;
  color: #cc000088;
  top: 160px;
  left: 300px;
  font-size: 80px;
  transition: all 0.5s;
  visibility: hidden;
  z-index: 400;
}

.bigforward.showit {
    transform: scale(1.5);
    opacity: 0;
}


.bigbackward {
  position: absolute;
  color: #cc000088;
  top: 160px;
  left: 300px;
  font-size: 80px;
  transition: all 0.5s;
  visibility: hidden;
  z-index: 400;
}

.bigbackward.showit {
    transform: scale(1.5);
    opacity: 0;
}


.controls-bg {
  position:absolute;
  bottom:0px;
  left:0px;
  width:100%;
  height:100px;
  background: linear-gradient(to bottom,  rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
  z-index: 390;
}

.smallplay {
  position: absolute;
  color: #ffffff;
  padding: 5px 15px 15px 15px;
  bottom: 0px;
  left: 20px;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  z-index: 400;
}

.smallpause {
  position: absolute;
  color: #ffffff;
  padding: 5px 15px 15px 15px;
  bottom: 0px;
  left: 20px;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  z-index: 400;
}

.smallreplay {
  position: absolute;
  color: #ffffff;
  padding: 5px 15px 15px 15px;
  bottom: 0px;
  left: 60px;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  z-index: 400;
}


.smallsections {
  position: absolute;
  color: white;
  padding: 5px 15px 15px 15px;
  bottom: 0px;
  left: 120px;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  z-index: 400;
}


.smallthreedots {
  position: absolute;
  color: #ffffff;
  padding: 5px 15px 15px 15px;
  bottom: 0px;
  right: 20px;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  z-index: 400;
}


.smallcodelisting {
  position: absolute;
  color: #ffffff;
  padding: 5px 15px 15px 15px;
  bottom: 0px;
  right: 50px;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  z-index: 400;
}


.smallaudiobutton {
  position: absolute;
  color: #ffffff;
  padding: 5px 15px 15px 15px;
  bottom: 0px;
  right: 95px;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  z-index: 400;
}



.sections-menu {
  position: absolute;
  display: grid;
  align-content: flex-start;
  bottom: 45px;
  left: 116px;
  min-width: 280px;
  min-height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #555555;      
  border-radius: 10px;
  background-color: #000000;
  color: #fff;
  opacity: 1;
  z-index: 500;
  visibility: hidden;
}


.section-item {
  text-align: left;
  color: #cccccc;
  font-size: 15px;
  padding-left: 18px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: 'Noto Sans', sans-serif;
}
.section-item:hover {
  color: white;
  background-color: grey;
  cursor: pointer;
}


.section-title {
  text-align: left;
  color: #cccccc;
  font-size: 15px;
  font-weight: bold;
  padding-left: 18px;
  padding-right: 10px; 
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: 'Noto Sans', sans-serif;
}
.section-title:hover {
  color: white;
  background-color: grey;
  cursor: pointer;
}



.section-menu-backward {
  color: white;
  padding: 15px;
  font-size: 18px;
  max-width: 50px;
  cursor: pointer;
  margin-left: 160px;
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}

.section-menu-forward {
  color: white;
  padding: 15px;
  font-size: 18px;
  max-width: 50px;
  cursor: pointer;
  margin-left: 10px;  
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}


.section-menu-close {
  text-align: left;
  color: white;
  cursor: pointer;
  font-size: 18px;
  max-width: 50px;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;  
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}


.section-name {
  position: absolute;
  color: #ffffff;
  padding: 5px;
  bottom: 13px;
  left: 155px;
  text-align: left;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 10px; 
  padding-top: 4px;
  padding-bottom: 4px;
  z-index: 400;
  visibility: hidden;
  font-family: 'Noto Sans', sans-serif;
}




.action-progress-div {
  position: absolute;
  display: flex;
  left: 30px;
  bottom: 40px;
  height: 20px;
  z-index: 400;
  align-items: center;
  opacity: 0.75; 
}
.action-progress-div:hover {
  opacity: 1;
}


.action-progress {

  width: 525px;
  height: 10px;

}

input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  width: 525px;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  /*  overflow: hidden;  remove this line*/
  
  /* New additions */
  height: 4px;
  background: #999;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 12px;
  width: 12px;
  background-color: white;
  border-radius: 50%;
  border: none;

  /* box-shadow: -407px 0 0 400px #f50; emove this line */
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  background-color: white;
  border-radius: 50%;
  border: none;
  
  /* box-shadow: -407px 0 0 400px #f50; emove this line */
}



.options-menu {
  position: absolute;
  display: grid;
  align-content: flex-start;
  bottom: 45px;
  right: 16px;
  min-width: 200px;
  min-height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #555555;    
  border-radius: 10px;
  background-color: #000000;
  color: #fff;
  opacity: 1;
  z-index: 500;
  visibility: hidden;
}

.options-menu-close {
  text-align: left;
  color: white;
  cursor: pointer;
  font-size: 18px;
  width: 100%;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;  
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}

.options-item {
  text-align: left;
  color: #cccccc;
  font-size: 15px;
  padding-left: 18px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: 'Noto Sans', sans-serif;
}
.options-item:hover {
  color: white;
  background-color: grey;
  cursor: pointer;
}



.playback-menu {
  position: absolute;
  display: grid;
  align-content: flex-start;
  bottom: 45px;
  right: 30px;
  min-width: 130px;
  min-height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #555555;      
  border-radius: 10px;
  background-color: #000000;
  color: #fff;
  opacity: 1;
  z-index: 500;
  visibility: hidden;
}


.playback-menu-close {
  text-align: left;
  color: white;
  cursor: pointer;
  font-size: 18px;
  width: 100%;
  padding-left: 5px;
  padding-top: 8px;
  padding-bottom: 8px;  
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}

.playback-menu-item {
  text-align: left;
  color: #cccccc;
  font-size: 15px;
  padding-left: 18px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: 'Noto Sans', sans-serif;
}
.playback-menu-item:hover {
  color: white;
  background-color: grey;
  cursor: pointer;
}



.shortcut-dialog {
  position: absolute;
  display: grid;
  align-content: flex-start;
  top: 70px;
  left: 120px;
  min-width: 400px;
  padding-top: 10px;
  padding-left: 20px;
  padding-bottom: 20px;
  border-style: solid;
  border-width: 2px;
  border-color: #555555;  
  border-radius: 10px;
  background-color: #000000;
  color: #fff;
  opacity: 1;
  z-index: 500;
  visibility: hidden;
}


.shortcut-dialog-close {
  text-align: left;
  color: white;
  cursor: pointer;
  font-size: 18px;
  width: 100%;
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 8px;  
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}



.shortcut-dialog-table {
  text-align: left;
  border-collapse: collapse;
  width: 95%;
  font-size: 15px;
  padding-left: 18px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: 'Noto Sans', sans-serif;
}

.shortcut-dialog-table td  {
  border: 1px solid #ddd;
  padding: 1px;
  padding-bottom: 4px;
  padding-left: 15px;

}

.shortcut-dialog-table th {
  border: 1px solid #ddd;
  padding-top: 5px;
  padding-left: 15px;
  padding-bottom: 5px;
  font-weight: normal;
  text-align: left;
  background-color: #444444;
  color: white;
}


.codelisting-dialog {
  position: absolute;
  display: grid;
  align-content: flex-start;
  top: 80px;
  left: 150px;
  min-width: 350px;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 20px;
  border-style: solid;
  border-width: 3px;
  border-color: #555555;
  border-radius: 10px;
  background-color: #000000;
  color: #fff;
  opacity: 1;
  z-index: 500;
  visibility: hidden;
}


.codelisting-dialog-close {
  text-align: left;
  color: white;
  cursor: pointer;
  font-size: 18px;
  width: 100%;
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 8px;  
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}


.codelisting-dialog-item {
  text-align: left;
  color: #cccccc;
  font-size: 15px;
  padding-left: 18px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-family: 'Noto Sans', sans-serif;
}
.codelisting-dialog-item:hover {
  color: white;
  background-color: grey;
  cursor: pointer;
}




.playing-status {
  position: absolute;
  bottom: 37px;
  right: 19px;
  color: yellow;
  text-align: right;
  font-size: 15px;
  text-shadow:  0px 0px 10px white,0px 0px 30px white,0px 0px 10px white,0px 0px 10px #553300,0px 0px 10px #553300;
  padding: 10px;
  font-family: 'Noto Sans', sans-serif;
  visibility: hidden;
  z-index: 400;
}



.scaleup-code {
  transform:scale(1.5);
  transform-origin:top left;
}


.scaledown-code {
  scale: 1;
}

.vo-text {
  color:  white;
  /* background: rgba(0, 179, 134, 1.0); */
  background: rgba(3, 129, 100, 1.0);  
  /* background: rgba(1, 107, 82, 1.0);*/
  /* background-color: #8cbcd0; */ 
  position: absolute;
  width: 200px; 
  /* max-width: 360px; */
  height: auto;
  /* top: 100px; */
  /*left: 440px;*/
  /*top: 370px;
  left: 10px;*/  
  z-index: 300;
  padding: 15px; 
  border-radius: 10px; 
  font-size: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*font-family: consalas, monaco, monospsce; */
  font-family: 'Noto Sans', sans-serif;
  /*font-family: 'Roboto', sans-serif;*/
  line-height: 1.4;
  visibility: hidden;
}

    .vo-text::after {
      content: "";
      border: 20px solid transparent;
      position: absolute;
    }


    .topleft.vo-text::after {
      border-bottom-color: rgba(3, 129, 100, 1.0);
      border-top: 0;
      top: -15px; left: 22%;
      margin-left: -20px;
    }

    .topmiddle.vo-text::after {
      border-bottom-color: rgba(3, 129, 100, 1.0);
      border-top: 0;
      top: -15px; left: 50%;
      margin-left: -20px;
    }
     
    .topright.vo-text::after {
      border-bottom-color: rgba(3, 129, 100, 1.0);
      border-top: 0;
      top: -15px; left: 80%;
      margin-left: -20px;
    }

    .left.vo-text::after {
      border-right-color: rgba(3, 129, 100, 1.0);
      border-left: 0;
      left: -11px; top: 29px;
      margin-top: -20px;
    }
     
    .right.vo-text::after {
      border-left-color: rgba(3, 129, 100, 1.0);
      border-right: 0;
      right: -11px; top: 29px;
      margin-top: -20px;
    }


    .bottomleft.vo-text::after {
      border-top-color: rgba(3, 129, 100, 1.0);
      border-bottom: 0;
      bottom: -11px; left: 20%;
      margin-left: -20px;
    }

    .bottommiddle.vo-text::after {
      border-top-color: rgba(3, 129, 100, 1.0);
      border-bottom: 0;
      bottom: -11px; left: 50%;
      margin-left: -20px;
    }

    .bottomright.vo-text::after {
      border-top-color: rgba(3, 129, 100, 1.0);
      border-bottom: 0;
      bottom: -11px; left: 80%;
      margin-left: -20px;
    }


.pulse {
  animation: ease-in-out pulse-animation 0.2s ;
}

@keyframes pulse-animation {
  0% {
    scale: 1.0;
  }
  50% {
    scale: 1.05;
  }

  100% {
    scale: 1.0;
  }
}



.textBox {
  font-size: 32px;
  line-height: 1.4;
  padding: 10px 20px 10px;
  font-weight: bold;
  font-family:  consalas, monaco, monospace;
  border-left: 5px solid red;
  background-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: left;
}



.touchtype {
  position: absolute;
  width: 80px;
  height: 19px;
  top: 57px;
  left: 110px;
  /*background-color: rgba(204, 0, 0, 0.8);*/
  background-color: black; 
  z-index: 30;
  visibility: hidden;
}




.btn {
  
}