.sumputin {
  visibility: hidden !important;
}

::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #838278; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.jokanbah {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 1em;
}

.bg-success-50 {
  background-color: #28a74688 !important;
}

.bg-primary-50 {
  background-color: #007bff85 !important;
}



#btn-light:hover {
  background-color: #28a74688 !important;
}

#btn-display:hover {
  background-color: #007bff85 !important;
}

.btn-ac:hover {
  background-color: #007bff85 !important;
  cursor: pointer;
}

.btn-ac-disabled:hover {
  background-color: #e91e1e91 !important;
  cursor: not-allowed;
}

.tbl-icon-size, .tbl-icon-size-light,.tbl-icon-size-input {
  cursor: pointer;
  background-color: #fff;
  border-radius: .3rem;
}

.tbl-icon-size:hover {
  background-color: #007bff85 !important;
}

.tbl-icon-size-light:hover {
  background-color: #28a74688 !important;
}

.napigasi {
  text-align: center;
}


#title-right {
  font-weight: 700;
  background-color: #515a5da8;
    border-radius: 0.3rem;
}

.img-command {
  background-color: #ffffff47;
  border-radius: .3rem;
  cursor: pointer;
}

#btn-ca.active {
  background-color: #2d88ef !important;
}

#btn-ca:hover {
  background-color: #2d88ef !important;
}

#btn-fm.active {
  background-color: #d8502b !important;
}

#btn-fm:hover {
  background-color: #d8502b !important;
}

#btn-rl.active {
  background-color: #87be00 !important;
}

#btn-rl:hover {
  background-color: #87be00 !important;
}

#btn-cc.active {
  background-color: #bb1d48 !important;
}

#btn-cc:hover {
  background-color: #bb1d48 !important;
}

#btn-1.active {
  background-color: #5c39b6 !important;
}

#btn-vt:hover {
  background-color: #0456b4 !important;
}
#btn-vt.active {
  background-color: #0456b4 !important;
}

#btn-db:hover {
  background-color: #2def8e !important;
}
#btn-db.active {
  background-color: #2def8e !important;
}

#btn-1.disabled {
  cursor: not-allowed;
}

#btn-1:hover {
  background-color: #5c39b6 !important;
}

#btn-2.active {
  background-color: #3b980c !important;
}

#btn-2.disabled {
  cursor: not-allowed;
}

#btn-2:hover {
  background-color: #3b980c !important;
}

body.multiple-scenes #titleBar {
  left:0;
}

#titleBar {
  right: 0px;
  height: 80px;
}

#titleBar .sceneName {
  background-color: #3a445454;
}

body.multiple-scenes.mobile #titleBar {
  left: 0;
}

.mobile #titleBar {
  height: 80px;
  right: 0;
}

@media (min-width: 1920px) {
  #ipad-controller {
    background-image: url("img/controller/ipad.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 600px;
    height: 420px;
  }

  .posisi-bg-controller {
    position: fixed;
    padding: 1.6em 3em 1em 3em;
  }

  .bg-controller {
    background-image: url("img/controller/background.png");
    background-repeat: no-repeat;
    background-size: 33.2em;
    width: 600px;
    height: 420px;
  }

  .bg-controller-command {
    width: 600px;
    padding-top: 2.5rem;
  }

  .row-button {
    margin-top: 2rem;
  }

  .pembagidua-kiri {
    float: left;
    width: 225px;
    height: 368.2px;
  }

  .pembagidua-kanan {
    float: left;
    width: 308px;
    height: 369.2px;
  }

  .napigasi {
    position: fixed;
    padding: 1.8em 0.1em 0.1em 0.1em;
  }

  .napigasi-list {
    padding: 0.1em 0.4em 0.1em 0.1em;
  }

  .tbl {
    width: 180px;
    height: 95px;
    position: relative;
    display: inline-block;
  }

  .tbl .aktip {
    /*display: none;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .tbl:hover .aktip {
    display: inline;
  }

  .tbl-size {
    width: 180px;
    height: 95px;
    cursor: pointer;
    border-radius: .3rem;
  }

  .title {
    position: relative;
    padding: 1em 1em;
  }

  .content {
    position: relative;
    padding-top: 2em 0.1em 0.1em 0.1em;
  }

  .baris-icon {
    position: relative;
    padding: 0.1em;
  }

  .icon {
    position: relative;
    float: left;
    padding: 0.7em;
  }

  .tbl-icon {
    width: 130px;
    height: 130px;
    position: relative;
    display: inline-block;
  }

  .tbl-icon .aktip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .tbl-icon:hover .aktip {
    display: inline;
  }

  .tbl-icon-size, .tbl-icon-size-light, .tbl-icon-size-input {
    width: 130px;
    height: 130px;
    cursor: pointer;
  }

  #span-date {
    font-size: 1.75rem;
    font-weight: bold;
  }

  
  #span-dates, #span-loc {
    font-weight: 500;
    font-size: 1rem;
  }

  .napigasi-list-first {
    padding-top: 0rem;
  }



  .offset-btn-command  {
    margin-left: 7%;
  }

  .offset-btn-command-right  {
    margin-left: 2%;
  }

  #div-scroll {
    overflow-x: hidden;
    height: 265px;
    margin-top: 1rem;
    width: 215px;
    padding-bottom: 1rem;
  }
}

@media (max-width: 1919px) {


  #span-date {
    font-size: 1.5rem;
    font-weight: bold;
  }

  #span-dates, #span-loc {
    font-weight: 500;
    font-size: .75rem;
  }

  .napigasi-list-first {
    padding-top: 0rem!important;
  }

  #ipad-controller {
    background-image: url("img/controller/ipad.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 434px;
    height: 300px;
  }

  .posisi-bg-controller {
    position: fixed;
    padding: 1em 2em;
  }

  .bg-controller {
    background-image: url("img/controller/background.png");
    background-repeat: no-repeat;
    background-size: 24.2em;
    width: 434px;
    height: 300px;
  }

  .bg-controller-command {
    width: 434px;
    margin-top: 2rem;
  }

  .row-button {
    margin-top: 1rem;
  }

  .offset-btn-command  {
    margin-left: 8.333333%;
  }

  .pembagidua-kiri {
    float: left;
    width: 170.97px;
    height: 266.2px;
  }

  .pembagidua-kanan {
    float: left;
    width: 211px;
    height: 266.2px;
  }

  .napigasi {
    position: fixed;
    padding: .8em 0.1em 0.1em 0.1em;
  }

  .napigasi-list {
    padding: 0em;
  }

  .tbl {
    width: 140px;
    height: 70px;
    position: relative;
    display: inline-block;
  }

  .tbl .aktip {
    /*display: none;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .tbl:hover .aktip {
    display: inline;
  }

  .tbl-size {
    width: 135px;
    height: 70px;
    cursor: pointer;
    border-radius: .3rem;
  }

  .title {
    position: relative;
    padding: 1em 1em;
  }

  .content {
    position: relative;
    padding-top: 2em 0.1em 0.1em 0.1em;
  }

  .baris-icon {
    position: relative;
    padding: 0.1em;
  }

  .icon {
    position: relative;
    float: left;
    padding: 0.3em;
  }

  .tbl-icon {
    width: 90px;
    height: 90px;
    position: relative;
    display: inline-block;
  }

  .tbl-icon .aktip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .tbl-icon:hover .aktip {
    display: inline;
  }

  .tbl-icon-size, .tbl-icon-size-light, .tbl-icon-size-input {
    width: 90px;
    height: 90px;
    cursor: pointer;
  }

  #div-scroll {
    overflow-x: hidden;
    height: 183px;
    margin-top: 1rem;
    width: 157px;
    padding-bottom: 1rem;
  }
}

.btn-command {
  background-color: #555;
}

.tbl-icon-size-disabled {
  cursor: not-allowed;
}

.tbl-icon-size-disabled:hover {
  background-color: #e91e1e91 !important;
}

#btn-switch-multimedia {
  padding: 0;
    background: transparent;
    border: 0px;
}

#btn-switch-multimedia-back {
  padding: 0;
    border: 0px;
}

.tbl-size {
  padding: 0;
    background: transparent;
    border: 0px;
}

.tbl-size:focus {
  border: 0px;
  outline: 0;
}

#btn-switch-multimedia:focus {
  border: 0px;
  outline: 0;
}

#btn-switch-multimedia-back:focus {
  border: 0px;
  outline: 0;
}

.btn-command {
  background-color: #8f918a5e;
}

#btn-switch-command:hover {
  background-color: #e91e1e91 !important;
}

#btn-switch-input:hover {
  background-color: #5200be75  !important;
}

.bg-input-50 {
  background-color: #5200be75  !important;
}

.tbl-icon-size-input:hover {
  background-color: #5200be75  !important;
}

#on-ac, #on-ac2 {
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.8;
  transition: opacity 0.2s;
  cursor: pointer;
  background: #fff;
  color: #555;
  padding: 0.5rem;
  border-radius: 0.3rem;
}

#on-ac:hover, #on-ac2:hover {
  opacity: 1;
  color: #28a746;
}

#off-ac, #off-ac2 {
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.8;
  transition: opacity 0.2s;
  cursor: pointer;
  background: #fff;
  color: #28a746;
  padding: 0.5rem;
  border-radius: 0.3rem;
}

#off-ac:hover, #off-ac2:hover {
  opacity: 1;
  color: #e91e1e;
}

#iframespot-lcd-command, #iframespot-lcd-command2{

}

#iframespot-lcd-command, #iframespot-lcd-command2 {
  /*background-color: rgba(68, 68, 68, 0.685);*/
  background-color: #444;
  position: relative;
  width: 1500px;
  height: 535px;
  opacity: 1;
}

.video-frame {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.info-hotspot .info-hotspot-text {
  max-height: none;
  width: 285px;
  top: 24px;
}

.info-hotspot .info-hotspot-close-icon {
  width: 55%;
  height: 55%;
  margin: 20%;
}

.info-hotspot .info-hotspot-header {
  width: 25px;
  height: 25px;
  background-color: #062c5bbf;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 25px;
  height: 25px;
}

.info-hotspot .info-hotspot-title-wrapper {
  height: 25px;
}

.info-hotspot .info-hotspot-close-wrapper {
  height: 25px;
  width: 25px;
}

.ac-toggle {
  padding: 0;
  border: 0;
}

.ac-toggle:focus {
  border: 0;
  outline: 0;
}

.ac-toggle-disabled:hover {
  background-color: #e91e1e91 !important;
  cursor: not-allowed;
}