@charset "utf-8";

html { overflow-y: auto; } /* override common.css */

/* top-bar right */
#mode-menu {
  z-index: 1001;
  float: right;
  font-size: 14px;
  width: 150px;
  position: relative;
}
#mode-button { cursor: pointer; padding-left: 15px}
#mode-button img { /* down arrow */
  position: absolute;
  top: 18px;
  right: 15px;
  display: inline-block;
}
#other-modes {
  position: absolute;
  width: 150px;
  display: none;
  cursor: pointer;
}
#other-modes a {
  display: block;
  padding: 8px 15px;
}

#left-bar {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 40px;
  background: black;
  z-index: -1;
}

#right-bar {
  position: fixed;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 40px;
  background: black;
  z-index: -2;
}

#bottom-bar {
  position: fixed;
  bottom: 0px;
  box-sizing: border-box;
  width: 100%;
}

#speed-control {
  position: fixed;
  left: 5%;
  bottom: 15px;
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 15%;
  max-width: 175px;
  line-height: 100%;
}
#speed-control .ui-slider {
  position: relative;
  display: inline-block;
  margin: 0px 10px;
  border-left: 5px solid #777;
  border-right: 5px solid #777;
  background-color: #777;
  height: 6px;
  width: 90%;
}
#speed-control .ui-slider-handle {
  position: absolute;
  margin-left: -6px;
  margin-top: -3px;
  border-radius: 20%;
  border: none;
  outline: none;
  background-color: white;
  height: 12px;
  width: 12px;
}

#media-controls > * {
  z-index: 1;
}
.media-control-button {
  cursor: pointer;
  position: fixed;
  opacity: 0.75;
}
.media-control-button:hover {
  opacity: 1.0;
}
.media-control-button img {
  display: inline-block;
}
#go-to-end {
  bottom: 10px;
  left: 50%;
  margin-left: -175px; /* 20px space */
}
#next {
  bottom: 10px;
  left: 50%;
  margin-left: -207px;
}
#pause, #play {
  bottom: 8px;
  left: 50%;
  margin-left: -243px;
  opacity: 1.0;
}
#previous {
  bottom: 10px;
  left: 50%;
  margin-left: -275px;
}
#go-to-beginning {
  bottom: 10px;
  left: 50%;
  margin-left: -305px;
}
#stop {
  bottom: 10px;
  left: 50%;
  margin-left: 195px;
  opacity: 1.0;
}
#progress-bar.ui-slider {
  bottom: 17px;
  left: 50%;
  margin-left: -150px;
  background-color: #777;
  height: 6px;
  width: 350px;
  opacity: 1.0;
}
#progress-bar .ui-slider-handle {
  position: absolute;
  border: none;
  outline: none;
  background-color: #fff;
  height: 6px;
  width: 5px;
}
#progress-bar .ui-slider-range {
  position: absolute;
  height: 6px;
}

#draw-viz {
  text-align: center;
  overflow: hidden;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#viz {
  text-align: center;
  overflow: hidden;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  /* 40px bottom bar + 45px top bar + 5px padding. */
  height: min(85vh, 100vh - 90px);
  width: 100%;
}

#viz > svg {
    width: 90%;
    height: 100%
}

#info {
  flex-grow: 0;
  flex-shrink: 0;
}

/*.execAction { background: black; color: white; }*/
.execAction { cursor: pointer; }
.execAction p:hover { background: black; color: white; }
.menu-highlighted { font-weight: bold; text-decoration: underline; }


.execAction { padding: 5px 8px; }
.err { padding: 5px 0px; }

#actions-extras input {
  width: 50px;
  padding: 5px 8px 7px;
}

.panel {
  position: fixed;
  color: white;
  width: 0px;
  overflow: hidden;
  background: #777;
  white-space: nowrap;
}
.panel-hide { position: fixed; cursor: pointer; background: #777; }

#current-action {
  bottom: 320px;
  right: 60px;
  width: 400px;
  display: block;
  background: none;
  overflow: normal;
  white-space: normal;
  text-align: right;
  color: black; font-weight: bold; font-size: 20px;
}
/*#current-action p { color: black; font-weight: bold; font-size: 20px; }*/

#actions {
  bottom: 60px;
  left: 43px;
}
#actions p { padding: 5px 10px; cursor: pointer; }
#actions { color: white; }
#actions p:hover { background: black; color: white; }
#actions p:first-of-type { padding-top: 10px; }
#actions p:last-of-type { padding-bottom: 10px; }
#actions-hide {
  bottom: 60px;
  left: 0px;
  padding-left: 14px;
  padding-right: 14px;
}
.action-menu-pullout { display: none; position: fixed; }
.action-menu-pullout input { background: black; color: white; }
.new-menu-option { margin-left: 3px; }
.err { color: red; margin-left: 6px; }

.rating-star {
  font-size: 25px;
  font-weight: bold;
}

/* #status-subtitles {
  position: fixed;
  bottom: 10%;
  left: 70%;
  padding: 5px;
  color: black;
  font-size: 17px;
  border-radius: 2px;
  font-weight: bolder;
  transform: translateX(-30%);
  display: none;
} */

#status {
  bottom: 255px;
  right: 43px;
  height: 54px;
  white-space: normal;
}
#status p { padding: 10px; }
#status-hide {
  bottom: 255px;
  right: 0px;
  padding: 19px 14px 19px 15px;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
  -moz-transform: rotate(180deg); /* Firefox */
}

#codetrace {
  bottom: 60px;
  right: 43px;
  height: 192px;
  font-family: "Courier New", Courier, monospace;
}
#codetrace p { padding: 5px 10px; }
#codetrace p.highlighted { background: black; }
#codetrace-hide {
  bottom: 60px;
  right: 0px;
  padding: 88px 14px 88px 15px;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
  -moz-transform: rotate(180deg); /* Firefox */
}

.rotateRight {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
  -moz-transform: rotate(180deg); /* Firefox */

  /* if you want to do this move with animate use transition */
  transition: .5s;
  -moz-transition: .5s; /* Firefox 4 */
  -webkit-transition: .5s; /* Safari and Chrome */
  -o-transition: .5s; /* Opera */
}
.rotateLeft {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari and Chrome */
  -o-transform: rotate(0deg); /* Opera */
  -moz-transform: rotate(0deg); /* Firefox */

  /* if you want to do this move with animate use transition */
  transition: .5s;
  -moz-transition: .5s; /* Firefox 4 */
  -webkit-transition: .5s; /* Safari and Chrome */
  -o-transition: .5s; /* Opera */
}

/* tutorial stuffs */
.electure-dialog {
  position: fixed;
  background: #212529;
  color: white;
  padding: 12px 12px 24px 12px;
  border-radius: 3px;
  display: none;
  line-height: 150%;
  z-index: 9000;
}
.electure-dialog:before {
  content: " ";
  position: absolute;
  height: 0px;
  width: 0px;
  border-style:solid;
  border-width:10px;
  border-color: transparent;
}
/* on 4 Jan 2022, I move X (ESC) button to top right, independent of all slides
.electure-end {
  position: fixed;
  top: -10px;
  bottom: -12px;
  right: -10px;
  padding: 3px 8px;
  background: #999;
  color: white;
  cursor: pointer;
  border-radius: 2px;
}

also I move this print to top right, next to ESC
.electure-print {
  position: absolute;
  top: -10px;
  bottom: -12px;
  left: -10px;
  padding: 3px 8px;
  background: #999;
  color: white;
  cursor: pointer;
  border-radius: 2px;
}*/

#electure-dropdown {
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -30%;
  width: 60%;
  padding: 8px 8px 0px 8px;
  background: #212529;
  color: white;
  cursor: pointer;
  border-radius: 2px;
}
/*
.electure-section-prev {
  left: -10px;
  bottom: -37px;
}
.electure-section-next {
  right: -10px;
  bottom: -37px;
  color: white;
}
*/

#popup {
  width: 600px;
  height: 480px;
  background-color: #ccc;
  border-radius: 3px;

  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  margin: auto;
}

#popup-content {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px;
  box-shadow: -1px 1px 3px #222;
}

#hide-popup {
  position: absolute;
  top: -10px;
  right: -10px;

  padding: 1px 5px;
  color: white;
  text-align: center;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  background-color: green;
}

#overlay {
  background-color: black;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 8000;
}

/* Makes elements with this class unselectable */
*.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


@keyframes green-pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(1 253 1 / 0.8);
    box-shadow: 0 0 0 0px rgba(1 253 1 / 0.8);
  }
  90% {
      -moz-box-shadow: 0 0 0 15px rgba(1 253 1 / 0);
      box-shadow: 0 0px 0 15px rgba(1 253 1 / 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(1 253 1 / 0);
      box-shadow: 0 0 0 0 rgba(1 253 1 / 0);
  }
}

@-webkit-keyframes green-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(1 253 1 / 0.8);
  }
  90% {
    -webkit-box-shadow: 0 0 0 15px rgba(1 253 1 / 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(1 253 1 / 0);
  }
}