@import 'colors.css';

@keyframes colorchange {
    0% {
      color: #DF7B98;
    }
    10% {
      color: #F0A200;
    }
    20% {
      color: #CDF000;
    }
    30% {
      color: #00F000;
    }
    40% {
      color: #52D2A5;
    }
    50% {
      color: #009CF0;
    }
    60% {
      color: #0B00F0;
    }
    70% {
      color: #A200F0;
    }
    80% {
      color: #F000D2;
    }
    90% {
      color: #F00051;
    }
    100% {
      color: #DF7B98;
    }
  }

@-webkit-keyframes colorchange {
    0% {
      color: #DF7B98;
    }
    10% {
      color: #F0A200;
    }
    20% {
      color: #CDF000;
    }
    30% {
      color: #00F000;
    }
    40% {
      color: #52D2A5;
    }
    50% {
      color: #009CF0;
    }
    60% {
      color: #0B00F0;
    }
    70% {
      color: #A200F0;
    }
    80% {
      color: #F000D2;
    }
    90% {
      color: #F00051;
    }
    100% {
      color: #DF7B98;
    }
  }

  @keyframes colorchange2 {
    0% {
      color: #ff0000;
    }
    50% {
      color: #0000ff;
    }
    100% {
      color: #ff0000;
    }
  }

  @-webkit-keyframes colorchange2 {
    0% {
      color: #ff0000;
    }
    50% {
      color: #0000ff;
    }
    100% {
      color: #ff0000;
    }
  }

  @keyframes scaleup {
    0% {
        transform: scale(0);    }

    100% {
        transform: scale(1);
    }
  }

  @keyframes scaleupdown {
    0% {
        transform: scale(0);    
    }

    5% {
        transform: scale(1);    
    }

    95% {
        transform: scale(1);  
    }

    100% {
        transform: scale(0);
    }
  }

  @keyframes scaledown {
    0% {
        transform: scale(1);    }

    100% {
        transform: scale(0);
    }
  }

  @-webkit-keyframes scaledown {
    0% {
        transform: scale(1);    }

    100% {
        transform: scale(0);
    }
  }

  @keyframes scrollhorisontally {
    0% { transform: translateX(850px); }
    100% { transform: translateX(-100%); }
  }

  @keyframes inWidth {
    0% {
      transform: scale(0,1);
      opacity: 0;
    }

    100% {
      transform: scale(1,1);
      opacity: 1;
    }
  }

  @keyframes outWidth {
    0% {
      transform: scale(1,1);
      opacity: 0;
    }

    100% {
      transform: scale(0,1);
      opacity: 1;
    }
  }

  @keyframes inWidthPlain {
    0% {
      transform: scale(0,1);
    }

    100% {
      transform: scale(1,1);
    }
  }

  @keyframes outWidthPlain {
    0% {
      transform: scale(1,1);
    }

    100% {
      transform: scale(0,1);
    }
  }

  @keyframes inHeight {
    0% {
      transform: scale(1,0);
      opacity: 0;
    }
    100% {
      transform: scale(1,1);
      opacity: 1;
    }
  }

  @keyframes outHeight {
    0% {
      transform: scale(1,1);
      opacity: 0;
    }
    100% {
      transform: scale(1,0);
      opacity: 1;
    }
  }

  @keyframes inHeightPlain {
    0% {
      transform: scale(1,0);
    }
    100% {
      transform: scale(1,1);
    }
  }

  @keyframes outHeightPlain {
    0% {
      transform: scale(1,1);
    }
    100% {
      transform: scale(1,0);
    }
  }

  @keyframes inZoomRotate {
    0% {
      transform: scale(0) rotate(0deg);
      opacity: 0;
    }

    100% {
      transform: scale(1) rotate(720deg);
      opacity: 1;
    }
  }

  @keyframes inZoomRotate130 {
    0% {
      transform: scale(0) rotate(0deg);
      opacity: 0;
    }

    100% {
      transform: scale(1.3) rotate(720deg);
      opacity: 1;
    }
  }
  
  @keyframes outZoomRotate130 {
    0% {
      transform: scale(1.3) rotate(360deg);
      opacity: 1;
    }
    100% {
      transform: scale(0) rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes inFade {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes outFade {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes inLeft {
    0% {
        transform: translateX(100%);;
    }
    100% {
        transform: translateX(0%);
    }
  }

  @keyframes outLeft {
    0% {
        transform: translateX(0%);;
    }
    100% {
        transform: translateX(-100%);
    }
  }

  @keyframes inRight {
    0% {
        transform: translateX(-100%);;
    }
    100% {
        transform: translateX(0%);
    }
  }

  @keyframes outRight {
    0% {
        transform: translateX(0%);;
    }
    100% {
        transform: translateX(100%);
    }
  }

  @keyframes inUp {
    0% {
        transform: translateY(100%);;
    }
    100% {
        transform: translateY(0%);
    }
  }

  @keyframes outUp {
    0% {
        transform: translateY(0%);;
    }
    100% {
        transform: translateY(-100%);
    }
  }  

  @keyframes inDown {
    0% {
        transform: translateY(-100%);;
    }
    100% {
        transform: translateY(0%);
    }
  }

  @keyframes outDown {
    0% {
        transform: translateY(0%);;
    }
    100% {
        transform: translateY(100%);
    }
  } 

  @keyframes rgb_text {
    from {
      filter: hue-rotate(0deg);
      
    }
    to {
      filter: hue-rotate(360deg);
      
    }
}


  .colorRotate {
    color: #ea85ff;
    animation: rgb_text 10s linear infinite alternate;
}

  .anim_colorchange {
    animation: colorchange 20s infinite;
  }

  .anim_inWidth {
    animation: inWidth 1s forwards;
  }

  .anim_outWidth {
    animation: outWidth 1s forwards;
  }

  .anim_inHeight {
    animation: inHeight 1s forwards;
  }

  .anim_outHeight {
    animation: outHeight 1s forwards;
  }

  .anim_inZoomRotate {
    animation: inZoomRotate 1s forwards;
  }

  .anim_inZoomRotate130 {
    animation: inZoomRotate130 1s forwards;
  }

  .anim_outZoomRotate {
    animation: outZoomRotate 1s forwards;
  }

  .anim_outZoomRotate130 {
    animation: outZoomRotate130 1s forwards;
  }

  .anim_inZoom {
    animation: scaleup 1s forwards;
  }

  .anim_outZoom {
    animation: scaledown 1s forwards;
  }

  .anim_inFade {
    animation: inFade 1s forwards;
  }

  .anim_outFade {
    animation: outFade 1s forwards;
  }

  .anim_outFade2s {
    animation: outFade 2s forwards;
  }

  @font-face {
    font-family: 'Comic Sans';
    src: url('/fonts/LDFComicSans.woff2') format('woff2'),
         url('/fonts/LDFComicSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Comic Sans';
    src: url('/fonts/LDFComicSansHairline.woff2') format('woff2'),
         url('/fonts/LLDFComicSansHairline.woff') format('woff');
    font-weight: 100;
    font-style: normal;

}

@font-face {
    font-family: 'Comic Sans';
    src: url('/fonts/LDFComicSansLight.woff2') format('woff2'),
         url('/fonts/LDFComicSansLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;

}

@font-face {
    font-family: 'Comic Sans';
    src: url('/fonts/LDFComicSansBold.woff2') format('woff2'),
         url('/fonts/LDFComicSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}

@keyframes blinker {
    50% {
      opacity: 0;
    }
}

:root {
    --select-border: #777;
    --select-focus: blue;
    --select-arrow: var(--select-border);
  }


  input[type=range] {
    pointer-events: none;
   }
   
   input[type=range]::-webkit-slider-thumb {
    pointer-events:auto;
   }


   /* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
 }
/* Track */
 ::-webkit-scrollbar-track {
   background: dimgray;
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: #bec4c4;
}

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


.scaleUpDown {
/*     animation-name: scaleupdown;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 2; */
    animation: scaleupdown 8s linear 0s 1 forwards;
}

.scaleUp {
    animation: scaleup 0.5s linear 0s 1 forwards;
}

.scaleDown {
    animation: scaledown 0.5s linear 0s 1 forwards;
}

body {
    margin:0;
    font-family: 'Montserrat', sans-serif;
/*     background-color: var(--dark-1);
    color: var(--bright-5); */

}

p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 4px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     /* width: 15rem; */
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #444;
    border: 1px solid #777;
    border-radius: 0.5rem;
    height: 0.8rem;  
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -3px; /* Centers thumb on the track */
    border-radius: 0.3rem;
    /*custom styles*/
    background-color: #888;
    height: 1.2rem;
    width: 0.8rem;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
 
    /*custom styles*/
    background-color: #5cd5eb;
    height: 2rem;
    width: 1rem;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    margin-bottom: 4px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 0px;
    bottom: 0px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: darkcyan;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px darkcyan;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 28px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

.ceRadio {
    margin-bottom: 5px;
    margin-right: 5px;
} 

.rowRed {
    background-color: indianred;
}

#topRight {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    padding-top: 1em;
    text-align: right;
    padding-right: 10px;
}

#loginBtn {
    display: inline-block;
    border: 2px solid #ccc;
    padding: 5px;
    border-radius: 9px;
    cursor: pointer;
}

#topName {
    margin-right: 10px;
}

#topHead {
    color: #CCC;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}

#topUserMenu {
    right: 0px;
    top: 22px;
    width: 200px;
    padding-top: 6px;
    text-align: left;
    box-shadow: 3px 3px #000;
}

#bookingBg {
    background-image: url('/media/pugair.png');
    background-size: cover;
    opacity: 0.6;
}

#leftPanel {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 24%;
    background-color: var(--dark-2);
    height: 99%;
    padding: 0 0 30px 0;
    overflow-y: auto;
    box-sizing: border-box;
}

#contentPanel {
    display: inline-block;
    vertical-align: top;
    position: relative;
    height: 100%;
    overflow-y: auto;
    width: 75%;
    box-sizing: border-box;
}


.centerBlock {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 100%;
    height: 100%;
    overflow: auto;
}


.centerBlockNarrow {
    position: relative;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

.nameDlg {
    display:none;
    background-color: #333;
    position: absolute;
    top: 500px;
    left:500px;
    color:white;
    z-index: 200;
    padding: 3px;
    border: #999 solid 3px;
}

.blinking {
    animation: blinker 200ms step-start infinite;
}

#tePreset {
    display: inline-block;
    margin-right: 35px;
}

#teSampleScroll {
    display: inline-block;
}

#teSaveDiv {
    position: absolute;
    right: 24px;
    top: 0;
    color: cadetblue;
}

.teSaveBtn {
    margin-left: 10px;
    cursor: pointer;
    font-size: 20px;
}

#teSampleId {
    display: inline-block;
    position: absolute;
    right: 4px;
}

.teScrollArrow {
    color: cadetblue;
    font-size: 24px;
    padding: 0 5px 0 5px;
    vertical-align: middle;
    cursor: pointer;
}

#teHappyhourDiv {
    display: inline-block;
    margin-left: 35px;
}

#tePreview {
    height: 200px;
    width: 100%;
    background-color: #aaa;
}

.addFieldBtn {
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
    margin-bottom: 10px;
    padding: 1px 3px 1px 3px;
    border-radius: 4px;
    background-color: #DDD;
    border: 1px solid #666;
    color: #222;
    font-size: 12px;
}

.hugeBtn {
    position: relative;
    vertical-align: top;
    width: 369px;
    height: 118px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    background-color: #222935;
    cursor: pointer;
    box-shadow: 2px 2px #666;
    padding: 7px;
}

.hugeBtn:hover {
	box-shadow: none;
	top: 2px;
	left: 2px;
}

.hbBig {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 21px 3px 3px 3px;
}

.hbSmall {
    position: relative;
    font-size: 14px;
    text-align: center;
    padding: 2px 3px 3px 3px;
}

.platfromLogoSmall {
    position: absolute;
    left: 4px;
    top: 4px;
    height: 24px;
}

.iFrameParent {
    overflow: hidden;
}

.iFrameOver {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

#msdDrop {
    display: inline-block;
    width: 150px;
    height: 50px;
    border: dashed 2px #ccc;
    text-align: center;
    line-height: 50px;
    margin-left: 10px;
}

.msdDropOver {
    border: dashed 2px green !important;
    color: limegreen;
    cursor: copy;
    background-color: rgba(0,139,139,0.4);
}

#msdList {
    height: 92%;
    overflow: auto;
}

.plWsClientItem {
    position: relative;
    font-size: 11px;
    padding-top: 5px;
    margin-top: 8px;
    margin-bottom: 16px;
}

#ytplayer {
    overflow: hidden;
}

#twitchplayer {
    overflow: hidden;
}

.ytpclientid {
    display: inline-block;
    width: 75px;
    overflow: hidden;
}

.ytClientVolumeLabel {
    color: #ccc;
    position: absolute;
    top: -6px;
    left: 188px;
}

.ytClientVolume {
    display: inline-block;
    width: 233px;
}

.ytClientStatus {
    display: inline-block;
    width: 92px;
}

.ytClientUrl {
    margin-bottom: 4px;
    height: 20px;
    overflow: hidden;
}

.ytClientTime {
    width: 41px;
    margin-right: 6px;
    position: absolute;
    top: 43px;
    left: 0px;
}

.ytClientTimeLeft {
    width: 41px;
    margin-right: 6px;
    position: absolute;
    top: 43px;
    right: 1px;
}

.ytlPosBar {
    margin-top: 5px;
    width: 94%;
    margin-left: 5%;
}

.ytlpb100 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #555;
}

.ytlpbx {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: green;
}

.ytlHandle {
    position: absolute;
    display: none;
    top: -7px;
    left: 240px;
    cursor: ns-resize;
    color: #888;
    letter-spacing: -1px;
}


.videoVolume {
    display: inline-block;
    width: 98%;
}

.videoClientItem {
    font-size: 11px;
    margin-top: 11px;
    height: 30px;
    position: relative;
    padding-bottom: 12px;
}

.ttsClientItem {
    font-size: 11px;
    margin-top: 11px;
    height: 30px;
    position: relative;
    padding-bottom: 12px;
}

.ttsclientid {
    display: inline-block;
    width: 70px;
    overflow: hidden;
}

.ttsClientVolume {
    display: inline-block;
    width: 49%;
}

.ttsClientVolLabel {
    display: inline-block;
    margin-right: 5px;
}

.ttsClientTime {
    width: 41px;
    margin-right: 6px;
    position: absolute;
    top: 20px;
    left: 0px;
}

.ttsClientStatus {
    display: inline-block;
    width: 92px;
}

.ttsClientUrl {
    margin-bottom: 4px;
    height: 14px;
    overflow: hidden;
    margin-left: 78px;
}

.ttsPosBar {
    margin-top: 5px;
    width: 94%;
    margin-left: 5%;
}

.ttsMainVolume {
    display: inline-block;
    width: 68%;
    margin-top: 10px;
}

.olPic {
    background-image: url('/pics/overlay2.png');
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.3;
}

.mapPic {
    background-image: url('/pics/satmap1.png');
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.6;
}

.dbCaret {
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
    padding-right: 6px;
}

.dbCaretRight {
    font-size: 27px;
    position: absolute;
    right: -11px;
    top: 0px;
    display: none;
}

.dbcClose {
    display:none;
}

.dbLoginPanel {
    background-color: var(--dark-1);
    padding: 10px 10px;
    position: relative;
    height: 16px;
    margin-bottom: 10px;
    border: 1px solid var(--dark-4);
}

.dbLoginNick {
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
}

#dbChannels {
    height: 92%;
    overflow-y: auto;
    padding: 0 0 60px 20px;
    box-sizing: border-box;
}

.dbChannelBlock {
    position: relative;
    width: 98%;
}

.dbChannelTitle {
    display: inline-block;
    font-size: 25px;
    margin-bottom: 5px;
    margin-left: 8px;
}

/* .dbChannelBlock:hover {
    background-color: var(--dark-4);
} */

.dbTwitchLiveIcon {
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: #9146FF;
    border-radius: 4px;
    top: 3px;
    left: 14px;
}

.dbKickLiveIcon {
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: #00E700;
    border-radius: 4px;
    top: 15px;
    left: 14px;
}

.dbChannelIcons {
    display: inline-block;
    margin-left: 8px;
}

.dbChannelCommands {
    position: absolute;
    right: 5px;
    top: 0;
    display: none;
}

.dbTwitchIcon {
    height: 20px;
    top: 4px;
}

.dbKickIcon {
    height: 15px;
}

.dbKickIcon2 {
    height: 17px;
    top: 1px;
}

.dbTwitchIcon2 {
    display:none;
    height: 20px;
    top: 4px;
}

.dbSeIcon {
    height: 26px;
    top: 8px;
}

.dbSlIcon {
    height: 23px;
    top: 5px;
    background-color: #84F5D3;
    border-radius: 9px;
    left: 2px;
}

.dbKofiIcon {
    height: 24px;
    top: 5px;
    background-color: #4D91B3;
    border-radius: 9px;
    left: 2px;
}

.dbSubatimerIcon {
    padding-left: 6px;
    color: lawngreen;
    font-size: 17px;
    display: none;
}

.dbIcon {
    padding: 0;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
}

.dbIconError {
    border: 1px solid red;
    background-color: red;
}

.dbChannelOptions {
    margin-left: 14px;
    margin-bottom: 12px;
    display: none;
}

.dbChannelOption {
    padding: 6px;
    position: relative;
}

.dbChannelOption:hover {
    background-color: var(--dark-4);
    cursor: pointer;

}

.dbChannelOptionSelected {
    background-color: var(--dark-3);
}

.dbCheckIconGreen {
    color: green;
    display: none;
    font-size: 125%;
}

.dbCheckIconRed {
    color: red;
    display: none;
}

.caButton {
    position: absolute;
    left: 360px;
    top: 14px;
}

.caFoundRow {
    padding-top: 16px;
    min-height: 38px;
}

.preJson {
    background-color: inherit;
    font-size: 90%;
}

.chatRow {
    display: none;
}

.seRow {
    display: none;
}

.slRow {
    display: none;
}

.kofiRow {
    display: none;
}

.channel-info {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.basic-info p, .roomstate li {
    margin: 5px 0;
}  

.commandTable th,td {
    padding: 2px 6px; 
    text-align: left;
}

.commandTable tr:hover {
    background-color: var(--dark-4);
}

.chatAlertTable {
    width: 100%;
}

.chatAlertTable th,td {
    padding: 2px 6px; 
    text-align: left;
}

.chatAlertTable tr:hover {
    background-color: var(--dark-4);
}

.olBtn {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 275px;
    height: 125px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    background-color: #222935;
    cursor: pointer;
    box-shadow: 2px 2px #666;
    color: #FFF;
}

.olBtn:hover {
	box-shadow: none;
	top: 2px;
	left: 2px;
}

.stcBtn {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 115px;
    height: 145px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    background-color: #222935;
    cursor: pointer;
    box-shadow: 2px 2px #666;
    color: #FFF;
}

.stcBtn:hover {
	box-shadow: none;
	top: 2px;
	left: 2px;
}

.olBtnNew {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 125px;
    height: 125px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    background-color: #222935;
    cursor: pointer;
    box-shadow: 2px 2px #666;
    font-size: 79px;
    color: #777;
    text-align: center;
    padding-top: 21px;
    box-sizing: border-box;
}

.olBtnNew:hover {
	box-shadow: none;
	top: 2px;
	left: 2px;
}

#loadingImg {
    display: none;
    z-index: 201;
    position: fixed;
    top: 45%;
    left: 45%;
}

.liLeft {
    left: 4% !important;
    top: 10% !important;
}

.liLeftBottom {
    left: 8% !important;
    top: 92% !important;
}

#contentBlock {
    position: absolute;
    top: 0;
    left:0;
    width: 640px;
    height: 480px;
    box-sizing: border-box;
}

#settingsDlg {
    display:none;
}

#map {
    height: 100%; 
    width: 100%; 
}

.map {
    height: 100%; 
    width: 100%; 
}

.mapHeaderPanel {
    position: absolute;
    top: 0px;
    right: 0;
    width: 300px;
    height: 29px;
    background-color: #444;
    font-size: 19px;
    font-weight: 600;
    color: #FFF;
    padding: 5px 10px;
}

.mapInfoPanel {
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: #444;
    font-size: 19px;
    font-weight: 600;
    color: #FFF;
}

.gpsInfoPanel {
    position: relative;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: #444;
    font-size: 19px;
    font-weight: 600;
    color: #FFF;
}

.pAccuracy {
    position: absolute;
    bottom: 0;
    left: 82px;
}

.mapDistance {
    position: absolute;
    top: 1px;
    right: 4px;
    text-align: right;
}

.mapTripDistance {
    position: absolute;
    top: 1.1em;
    right: 4px;
    text-align: right;
}

.mapAvgTotal {
    display:none;
    position: absolute;
    top: 45px;
    right: 144px;
    text-align: right;
}

.mapAvgSpeed {
    display:none;
    position: absolute;
    top: 45px;
    right: 144px;
    text-align: right;
}

.mapTimeEst {
    display:inline-block;
    position: absolute;
    top: 22px;
    right: 4px;
    text-align: right;
}

.mapSpeed {
    position: absolute;
    right: 145px;
    top: 1px;
}

.mapHeight {
    position: absolute;
    top: 1.1em;
    left: 11px;
}

.mapDelay {
    position: absolute;
    top: 1px;
    left: 10px;
}

.mapDirection {
    position: absolute;
    top: 2px;
    left: 94px;
}

.mapAvgSpeedValue {
    position: absolute;
    right: 145px;
    top: 1.1em;
}


#mapButtonPanel {
    position: absolute;
    bottom: 0;
    left: 0;
}

.gpsField {
    padding: 3px;
    /* border: 1px solid #888; */
    vertical-align: top;
}

.gpsDistance {
    position: relative;
    display:inline-block;
    text-align: right;
    width: 7em;
	height:1.5em;
}

.gpsTripDistance {
    position: relative;
    display:inline-block;
    text-align: right;
    width: 7em;
	height:1.5em;
}

.gpsAvgTotal {
    display:none;
    position: relative;
    display:inline-block;
    text-align: right;
    width: 7em;
	height:1.5em;
}

.gpsAvgSpeed {
    display:none;
    position: relative;
    display:inline-block;
    text-align: right;
    width: 7em;
	height:1.5em;
}

.gpsTimeEst {
    display:none;
    position: relative;
    display:inline-block;
    text-align: right;
    width: 7em;
	height:1.5em;
}

.gpsSpeed {
    position: relative;
    display:inline-block;
    width: 7em;
	height:1.5em;
}

.gpsHeight {
    position: relative;
    display:inline-block;
    width: 7em;
	height:1.5em;
}

.gpsDelay {
    position: relative;
    display:inline-block;
    width: 7em;
	height:1.5em;
}

.gpsAccuracy {
    position: relative;
    display:inline-block;
    width: 7em;
	height:1.5em;
}

.gpsDirection {
    position: relative;
    display:inline-block;
    width: 7em;
	height:1.5em;
}


#pDelayDiv {
    position: fixed;
    bottom: 0;
    left:60px;
    padding: 4px;
    background-color: rgba(0,0,0,0.5);
    vertical-align: bottom;
}

.chatArea {
    overflow: auto !important;
}

.msgItem {
    margin-bottom: 0.2em;
    text-shadow: rgb(0, 0, 0) 2px 2px 2px;
    word-wrap: break-word;
}

.msgBadges {
    margin-right: 0;
}

.msgNick {
    margin-right: 0.2em;
    cursor: pointer;
}

.msgPlatform {
    display: inline-block;
    height: 0.8em;
    width: 0.8em;
    margin-right: 0.1em;
}

.msgEventRaid {
    background-color: #207ab7;
    padding: 4px;
    color: white;
    font-size: 100%;
}

.msgEventGift {
    background-color: red;
    padding: 4px;
    color: white;
    font-size: 100%;
}

.msgEventSub {
    background-color: green;
    padding: 4px;
    color: white;
    font-size: 100%;
}

.msgEventBan {
    background-color: darkmagenta;
    padding: 4px;
    color: white;
}

.msgEventReward {
    background-color: teal;
    padding: 4px;
    color: white;
}

.msgDeleted {
    text-decoration: line-through;
    opacity: 0.5;
}

.chatBadge {
    display: inline-block;
    height: 0.9em;
    width: 0.9em;
    margin-right: 0.1em;
}

.chatEmote {
    height: 1.0em;
    vertical-align: middle;
}

.chatCheerCount {
    font-size: 0.8em;
    font-family: 'Roboto Condensed';
}

.emotePreview {
    display: inline-block;
    height: 21px;
    vertical-align: middle;
    margin-right: 0.5em;
    font-weight: bold;
    font-size: 21px;
}

.widgetRow {
    position: relative;
    margin-bottom: 10px;
    display: inline-block;
    width: 400px;
    background-color: #444;
    height: 75px;
    vertical-align: top;
    margin-right: 10px;
    padding: 5px;
    cursor: pointer;
	box-shadow: 2px 2px #555;
}

.widgetRow:hover {
    box-shadow: none;
	top: 2px;
	left: 2px;
}

.wrDisabled {
    color:#777;
}

.wrselected {
    border: 1px solid cyan;
}

#nwList {
    height: 900px;
    overflow-y: auto;
}

.nwName {
    font-weight: bold;
}

.nwDescription {
    font-size: smaller;
    width: 100%;
    height: 75%;
    overflow: hidden;
}

#widgetList {
    max-height: 850px;
    overflow-y: auto;
    position: relative;
}


.wlRow {
    margin-bottom: 2px;
    cursor: pointer;
}

.wlRow:hover {
    color: mediumturquoise;
    background-color: #444;
}

.wlRowHover {
    color: mediumturquoise;
    background-color: #444;
}

.wlRowSelected {
    background-color: var(--teal-5);
}

.wlrIntend {
    margin-left: 36px;
}

.wlGrIcon {
    color: gold;
    margin-right: 5px;
}

.wlCheck {
    width: 4%;
}

.wlEye {
    width: 17px;
    margin-left: 5px;
    display: inline-block;
}

.dbEye {
    margin-left: 0px;
    display: inline-block;
    border: 1px outset #777;
    padding: 2px 4px 1px 4px;
}

#weShow {
    position: fixed;
    top:200px;
    left: 200px;
    border: 4px solid red;
    z-index: 30;
    display: none;
}

.wlDel {
    display: inline-block;
    width: 17px;
    margin-left: 5px;
    color: indianred;
    vertical-align: middle;
}

.wlEyeM {
    display: inline-block;
    width: 17px;
    margin-left: 5px;
    vertical-align: middle;
}

.wlClone {
    display: inline-block;
    width: 17px;
    margin-left: 5px;
    color: #aaa;
    vertical-align: middle;
}

.wlSett {
    display: inline-block;
    width: 17px;
    margin-left: 5px;
    color: #aaa;
    vertical-align: middle;
}

.wlMove {
    display: inline-block;
    width: 17px;
    margin-left: 5px;
    vertical-align: middle;
}

.wlLoad {
    display: inline-block;
    width: 17px;
    margin-left: 5px;
    vertical-align: middle;
}

.wlName {
    display: inline-block;
    width: 155px;
    vertical-align: middle;
}

.progress-bg {
    background-color: #aaa;
    position: relative;
}

.progress-bar {
	background-color: midnightblue;
}

.progress-count {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

#uploadingTotal {
    display: inline-block;
    position: absolute;
    right: 2px;
    top: 45px;
}

.wheelParent
{
    width:500px;
    position: relative;
}

.wheelImage {
    width:100%;
}

.wheelImage2 {
    position: absolute;
    width: 81px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.wheelCanvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.wheelName {
    position: absolute;
    left: 50%;
    top: 0px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0.5em;
    background-color: #222;
    border: 3px solid #CCC;
    font-family: 'DM Sans';
    font-size: 30px;
    color: white;
    text-align: center;
    line-height: 0.6em;
}

.wheelTexts {
    color: white;
    font-size: 25px;
    width: 100%;
    text-align: center;
}

.wheelPointer {
    position: absolute;
    top: 74px;
    width: 55px;
    left: 49.7%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.wheelWinnerText {
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font-size: 200%;
    font-weight: bold;
    color: limegreen;   
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.4em 0; 
}

.wheelWinnerDesc {
    position: absolute;
    display: none;
    left: 50%;
    top: 60%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.4em 0; 
}

.wheelIntroCounter {
    position: absolute;
    font-family: 'DM Mono';
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: limegreen;
    background-color: rgba(0, 0, 0, 0.7);
    /* padding: 1em; */
    border-radius: 69px;
    display: inline-block;
    width: 120px;
    height: 120px;
    line-height: 2.4em;
    text-align: center;
}

#wheelSegmentsDiv {
    height: 825px;
    overflow-y: auto;
}

#wheelRounds {
    display: none;
    height: 825px;
    overflow-y: auto;
}

#wheelPricesDiv {
    display: none;
    height: 825px;
    overflow-y: auto;
}

.wrClickable {
    cursor: pointer;
}

.wheelSegmentRow {
    margin-right: 4px;
}

.wheelSegmentRow:hover {
    border: 2px solid #999;
}

.wheelSegColBox {
    display: inline-block;
    height: 13px;
    width: 13px;
}

#wheelidDiv {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    padding: 2px 5px;
    border: 1px solid limegreen;
}

.wheelSegColorBlock {
    margin: 0 0 10px 8px;
}

.wheelSegColorSel {
    display:inline-block;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.wheelSegIcons {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    right: 8px;
}

.seg_text {
    width: 171px;
    margin-bottom: 5px;
    font-size: 17px;
    border: 1px solid #FFF;
    font-family: 'DM Sans';
}

.seg_longtext {
    width:489px; 
    height:34px; 
    margin-top:2px;
    font-family: 'DM Sans';
}

.seg_fillStyle {
    width: 75px;
    background-color: #e76e50;
    color: #000000;
    padding: 2px 0 2px 2px;
    font-size: 15px;
    font-family: 'DM Mono';
}

.wheelStatusRow {
    font-size: 125%;
    cursor: pointer;
}

.wheelStatusRow:hover {
    background-color: #444;
}

.wheelStatusCheck {
    visibility: hidden;
    margin-right: 5px;
}

.wheelRoundRow {
    padding: 3px 0 3px 6px;
}

.wheelRoundRow:hover {
    background-color: #555;
}

.wheelRoundRowRed {
    background-color: indianred;
}

.wheelRoundTime {
    display: inline-block;
    width: 65px;
    overflow: hidden;
}

.wheelRoundNick {
    display: inline-block;
    width: 102px;
    overflow: hidden;
}

.wheelRoundWheel {
    display: inline-block;
    width: 92px;
    overflow: hidden;
}

.wheelRoundText {
    display: inline-block;
    width: 160px;
    overflow: hidden;
}

.wheelRoundStatus {
    display: inline-block;
    width: 60px;
    overflow: hidden;
}

.wheelRoundIcons {
    display: none;
    width: 18px;
    overflow: hidden;
    color: indianred;
}

.wheelOffLbl {
    color: red;
    font-weight: bold;
    font-size: 125%;
}

.fbClass {
    padding: 0.1em 0.5em 0.3em 0.5em;
}

.fbHeader {
    background-color: #0000ff;
    padding: 0.5em;
    line-height: 1.5em;
    z-index: 2;
    position: relative;
}

.fbPassengers {
    overflow-y: hidden;
    height: 900px;
    line-height: 1.1em;
    position: relative;
}

.fbc3 {
    overflow-y: auto;
    height: 800px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.fbClassTitle {
    font-size: 125%;
    font-weight: bold;
    margin-bottom: 0.3em;
}

.fbPassRow {
    position: relative;
}

.fbPassSeat {
    display: inline-block;
    width: 2.2em;
    font-size: 90%;
    vertical-align: text-top;
}

.fbPassName {
    display: inline-block;
    max-width: 8em;
    overflow: hidden;
    vertical-align: text-top;
}

#flightPointsList {
    display: inline-block;
    position: relative;
}

#fbPassList {
    display: inline-block;
    position: relative;
    height: 900px;
    overflow: auto;
    width: 30em;
}

#flightPointsBlock {
    display: inline-block;
    z-index: 100;
    position: relative;
    margin-left: 1em;
}

#flightListBlock {
    display: inline-block;
    z-index: 100;
    position: relative;
}

#flightPassengerBlock {
    display:inline-block;
    vertical-align: top;
    margin-left: 1em;    
}

#flightDataBlock {
    display:inline-block;
    vertical-align: top;
    margin-left: 1em;    
}

#flightPassengerList {
    display:inline-block;
    vertical-align: top;
    margin-left: 1em;    
    height: 850px;
    overflow: auto;
}

.fbMemberRowHeader {
    margin-bottom: 0.1em;
    border-bottom: 1px solid #444;
}

.fbMemberRow {
    margin-bottom: 0.1em;
}

.fbMemberRowActive {
    background-color: #444;
}

.fbMemberRow:hover {
    background-color: #444;
}

.fbOrdno {
    display: inline-block;
    font-family: 'DM Mono', Courier, monospace;
    text-align: right;
    font-size: 80%;
    width: 3.5em;
    margin-right: 0.2em;
}

.fbNick {
    display: inline-block;
    font-family: 'DM Sans', Arial, Helvetica, sans-serif;
    width: 10em;
    overflow-x: clip;
}

.fbPoints {
    display: inline-block;
    font-family: 'DM Mono', Courier, monospace;
    font-size: 80%;
    width: 5em;
    text-align: right;
}

.fbCount {
    display: inline-block;
    font-family: 'DM Mono', Courier, monospace;
    font-size: 80%;
    width: 4em;
    text-align: right;
}

.fbDistance {
    display: inline-block;
    font-family: 'DM Mono', Courier, monospace;
    font-size: 80%;
    width: 5em;
    text-align: right;
    margin-right: 0.8em;
}

.fbLabelTight {
    display: inline-block;
    width: 110px;
    font-style: italic;
    font-size: 13px;
    vertical-align: top;
    position: relative;
}

.fbValueTight {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
    position: relative;
    width: 300px;
}

#flightsList {
    max-height: 600px;
    overflow: auto;
}

.flightListRow {
    font-size: 86%;
}

.flightListRow:hover {
    background-color: #444;
}

.flightListRowSel {
    background-color: var(--teal-4);
}

.flightListCommands {
    visibility: hidden;
}

.fligtStatusIcon {
    margin-left: 3px;
    font-size: 18px;
}


.fbPassengers321 {
    height: 975px;
    font-family: Lato;
    font-weight: 200;
    font-style: normal;
    color: rgb(255, 255, 255);
    font-size: 17px;
    line-height: 1.05em;
}

.fbSeatMapImage {
    position: absolute;
    width: 168px;
    height: 1163px;
    top: -102px;
    right: 4px;
}

.fbSeatMapImage321 {
    position: absolute;
    width: 168px;
    height: 1206px;
    top: -13px;
    right: 4px;
}

.fbSeatMapList {
    position: absolute;
    right: 16px;
    top: 122px;
    color: #777;
    font-family: 'Acme';
    font-size: 14px;
    font-weight: 700;
    text-shadow: none;
}

.fbSeatMapList321 {
    position: absolute;
    right: 16px;
    top: 205px;
    color: #777;
    font-family: 'Acme';
    font-size: 14px;
    font-weight: 700;
    text-shadow: none;
}

.fbSeatmapRow {
    margin-bottom: 3px;
    display: flex;
    line-height: 21px;
    color: #ccc;
}


.fbSeatmapRow321 {
    margin-bottom: 3px;
    display: flex;
    line-height: 17px;
    color: #ccc;
}

.fbSeatmapSeat {
    display: inline-block;
    background-color: lightseagreen;
    border: 2px solid #999;
    border-radius: 5px;
    width: 15px;
    height: 14px;
    vertical-align: middle;
    margin: 0 1px 0 1px;
}

.fbSeatmapSeatC1 {
    background-color: darkseagreen;
    border-radius: 3px;
    width: 20px;
    height: 18px;
    margin: 1px 3px 1px 4px;
}


.seat321_1 {
    background-color: darkseagreen;
    border-radius: 3px;
    width: 23.5px;
    height: 18px;
    margin: 1px 3px 1px 3px;
}

.seat321_1empty {
    background-color: transparent;
    border-radius: 3px;
    width: 0px;
    height: 18px;
    margin: 0;
}

.seat321_3 {
    display: inline-block;
    background-color: lightseagreen;
    border: 2px solid #999;
    border-radius: 5px;
    width: 15px;
    height: 14px;
    vertical-align: middle;
    margin: 0 1px 0 1px;
}

.seat321_3empty {
    display: inline-block;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 5px;
    width: 15px;
    height: 14px;
    vertical-align: middle;
    margin: 0 1px 0 1px;
}


.fbSeatmapSeatTaken {
    background-color: maroon;
}

.fbSeatmapAisle {
    display: inline-block;
    width: 17px;
    /* height: 11px; */
    text-align: center;
    font-weight: 700;
    vertical-align: middle;
    font-size: 16px;
}

.fbSeatmapExitRow {
    position: relative;
    height: 6px;
    color: red;
}

.fbSeatmapColumn {
    border: 2px solid rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    font-weight: 700;
    text-align: center;
    color:#ccc;
}

.flightNewPassTile {
    position: absolute;
    padding: 2px;
    background-color: #333;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Asap';
    text-shadow: none;
}

.flightNewPassList {
    background-color: darkgreen;
}

.flightNewPassListTile {
    position: absolute;
    background-color: forestgreen;
}
input:focus{
    outline: none;
}

code { 
    background: hsl(220, 80%, 90%); 
}

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}

.codeBlock {
    word-wrap: revert;
    background-color: #444;
    color: yellow;
    white-space: pre;
    width: 98%;
    overflow-x: scroll;
}

.codeSmall {
    word-wrap: revert;
    background-color: #444;
    color: yellow;
    width: 98%;
    overflow-x: auto;
    padding: 6px;
}

.elementContainer {
    display:none;
    position: absolute;
    scrollbar-width:none;
    cursor: move;
    width:max-content;
    padding: 0;
    box-sizing: border-box;
}

.groupContainer {
    position: absolute;
    scrollbar-width:none;
    cursor: move;
    width: fit-content;
    padding: 1px;
    min-width: 55px;
}

.elSelected {
    border: 2px dashed lime !important;
}

.elSelectedAlt {
    border: 2px dashed red !important;
}

.elDelete {
    border: 2px dashed red !important;
    background-color: rgba(255,0,0,0.5) !important;
}

.elHover {
    border: 1px dashed #DDD;
}


.weIcons {
    position: absolute;
    top: -12px;
    left: 2px;
    z-index: 2;
}

.weIcon {
    padding: 0 3px 0 3px;
    display: inline-block;
    cursor: pointer;
    color: #BBB;
    font-size: 18px;
    text-shadow: rgb(17, 17, 17) 1px 1px 0px;
}

.weIconGreen {
    color: rgba(0,255,0,0.4);
}

.weIconRed {
    color: indianred;
}

.shIcon {
    padding: 0 3px 0 3px;
    display: inline-block;
    cursor: pointer;
    color: #BBB;
    font-size: 21px;
    position: absolute;
    top:0;
    left: 8px;
}

.shIconRed {
    color:red;
}

.shIconGreen {
    color:green;
}

.showIcon {
    cursor: pointer;
}

.noMove {
    cursor: default;
}

.weOnHover {
    visibility: hidden;
}

.eHandles {
    display: none;
}

.eh {
    position: absolute;
    width:6px;
    height: 6px;
    background-color: #DDD;
}

.eshv {
    position: absolute;
    width:5px;
    height: 5px;
    background-color: #FFF;
    cursor: ew-resize;
    border: solid 1px #000;
}

.eshh {
    position: absolute;
    width:5px;
    height: 5px;
    background-color: #FFF;
    cursor: ns-resize;
    border: solid 1px #000;
}

.ehNW {
    top: -4px;
    left: -4px;
    cursor: nw-resize;
}

.ehNE {
    top: -4px;
    right: -4px;
    cursor: ne-resize;
}
.ehSE {
    bottom: -4px;
    right: -4px;
    cursor: nw-resize;
}
.ehSW {
    bottom: -4px;
    left: -4px;
    cursor: ne-resize;
}

.ehT {
    top: -4px;
    left: 50%;
}
.ehR {
    top: 50%;
    right: -4px;
}
.ehB {
    bottom: -4px;
    left: 50%;
}
.ehL {
    bottom: 50%;
    left: -4px;
}

.eventItem {
    position: relative;
    padding: 0 0.2em 0 0.2em;
    color: #FFF;
    margin-bottom: 0.1em;
    border-radius: 0.4em;
}

.eiText {
    vertical-align: bottom;
}

.eiNick {
    display: inline-block;
    width: 8em;
    margin-left: 0.2em;
    overflow: hidden;
    margin-right: 0.3em;
    font-weight: bold;
}

.elPattern {
    opacity: 0;
    background-image: url(/pics/pattern8.png);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.eiPattern {
    opacity: 0.6;
    background-image: url(/pics/pattern14.png);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

.eiType {
    display: inline-block;
    width: 4em;
    font-size: 75%;
}

.eiTier {
    display: inline-block;
    width: 2em;
    font-size: 75%;
    margin-right: 0.2em;
    text-align: right;
}

.eiMonths {
    display: inline-block;
    width: 3.2em;
    font-size: 75%;
}

.eiSmall {
    font-size: 75%;
}

.patternTile {
    display: inline-block;
    position: relative;
    padding: 0 0 0.25em 0.3em;
    color: #FFF;
    margin-bottom: 30px;
    margin-right: 15px;
    width: 180px;
    height: 50px;
}


.barItem {
    width: 17em;
    padding-bottom: 0.2em;
}

.barItemWinner {
    border: 0.2em solid limegreen;
    padding: 0.2em 0 0 0;
    border-radius: 0.5em;
}

.barText {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    text-align: right;
    overflow: hidden;
    box-sizing: border-box;
}

.barBarP {
    display: inline-block;
    position: relative;
    height: 1.3em;
    width: 57%;
    padding-left: 0.2em;
    box-sizing: border-box;
}


.barBar {
    display: inline-block;
    position: relative;
    background-color: coral;
    height: 1.3em;
}

.barNumber {
    position: absolute;
    right: 0.1em;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.barPercentage {
    position: absolute;
    left: 1em;
    top: 50%;
    font-size: 80%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.pollHeader {
    width: 17em;
    line-height: 1.1em;
    margin-bottom: 0.5em;
    border-bottom: solid 0.2em rgba(0,0,0,0.9);
    padding: 0.3em;
    text-transform: uppercase;
}

.pollInstructions {
    font-size: 75%;
    text-align: center;
    font-weight: normal;
    color: yellow;
}

.pollBarItem {
    width: 18em;
    margin-bottom: 0.3em;
}

.pollNumber {
    position: relative;
    left: 0.1em;
    display: inline-block;
    background-color: rgba(30,30,30,0.8);
    padding: 0.2em 0.4em 0.2em 0.3em;
    width: 1.5em;
    box-sizing: border-box;
    text-align: center;
    border-radius: 0.3em;
}

.pollRight {
    display: inline-block;
    position: relative;
    width: 15.7em;
    line-height: 1.3em;
}

.pollBarItemWinner {
    border: 0.2em solid limegreen;
    padding: 0.2em 0 0 0;
    border-radius: 0.5em;
}

.pollBarText {
    display: inline-block;
    vertical-align: top;
    text-align: right;
    overflow: hidden;
    box-sizing: border-box;
    font-weight: normal;
}

.pollBarBarP {
    display: inline-block;
    position: relative;
    height: 1.3em;
    width: 57%;
    padding-left: 0.2em;
    box-sizing: border-box;
}

.pollBar {
    position: relative;
    height: 0.2em;
}

.pollBarBg {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.9);
    height: 100%;
    width: 100%;
}

.pollBarBar {
    position: absolute;
    top: 0;
    left: 0;
    background-color: coral;
    height: 100%;
}

.pollBarNumber {
    position: absolute;
    right: 0.1em;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.pollBarPercentage {
    position: absolute;
    left: 1em;
    top: 50%;
    font-size: 80%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}


#raffleDiv {
    position: relative;
    width: 360px;
    height: 200px;
    overflow: hidden;
    font-size: 18px;  
}

#raffleCanvas {
    background-color: rgb(0,0,0,0.8);
}

.raffleTop {
    width: 361px;
    height: 75px;
    background-color: rgba(0,0,0,0.6);
    top: 3px;
    position: absolute;
    left: 3px;
}

.raffleBottom {
    width: 361px;
    height: 88px;
    background-color: rgba(0,0,0,0.6);
    bottom: 3px;
    position: absolute;
    left: 3px;
}

.raffleFrame {
    border: 4px solid limegreen;
    position: absolute;
    width: 358px;
    height: 30px;
    top: 78px;
    left: 2px;
}

.raffleTexts {
    color: white;
    font-size: 25px;
    width: 362px;
    text-align: center;
}

.abImgParent {
    width: 276px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}


.hwText {
    width: 17em;
    line-height: 0.9em;
    margin-bottom: 0.5em;
    border-bottom: solid 0.1em;
    padding: 0.3em;
}

.pollTimeBar {
    width: 82%;
    height: 0.3em;
    position: relative;
    background-color: cornflowerblue;
    top: -0.6em;
}

.listContent {
    position: relative;
    overflow-y: auto;
    scrollbar-width:none;
    padding: 3px;
}

.listContent::-webkit-scrollbar {
    width: 0px;
}
    
.listContent::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
}
    
.listContent::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

.lcTransparent {
    background-color: transparent !important;
}

.listRow {
    margin-bottom: 2px;
}

.listButton {
    width: 30px;
}

.lcTight {
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.imageDiv {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
}

#content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.SLContent {
    transform: translate(-27.708%, -27.685%) scale(0.445);
}


#configBlock {
    position: fixed;
    display:none;
    top: 2px;
    right: 512px;
    width: 560px;
    font-size: 13px;
    color: #444;
    background-color:antiquewhite;
    z-index: 97;
}

.customScaleIndicator {
    position: absolute;
    display: none;
    top: -11px;
    right: 46px;
    color: red;
    font-size: 12px;
}

.csiTop {
    right: -10px;
}

#configSelDiv {
    padding: 12px 0 8px 8px;
    font-size: 15px;
    position: relative;
}

.confSel {
    cursor: pointer;
    color: #bbb;
    margin-left: 10px;
    margin-right: 20px;
}


.confSelActive {
    color: #fff;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: 2px 7px 2px 7px;
    border-radius: 5px 5px 0 0;
    background-color: #444;
}

.confSelBottom {
    border-top: 1px solid #fff;
    margin-top: 1px;
}

#configScroll {
    max-height:600px;
    overflow-y: auto;
}

#configCloseBtn {
    position: absolute;
    top: -2px;
    right: 3px;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    z-index: 10;
}

.panelCloseBtn {
    position: absolute;
    top: -2px;
    right: 3px;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    z-index: 10;
}

.controlBlock {
    position: fixed;
    top: 2px;
    right: 2px;
    width: 350px;
    font-size: 12px;
    color: #444;
    background-color: rgb(190,190,190);
    z-index: 96;
}

 
.controlMinimized {
    top: auto !important;
    bottom: 0px !important;
    width: 150px !important;
}

.configMinimized {
    top: auto !important;
    bottom: 0px !important;
    width: 150px !important;
}

/* .alertMain {
    min-width: 400px;
    min-height: 200px;
} */

.alertBlock {
    visibility:hidden;
}

#alertTestDlg {
    position: fixed;
    top: 2px;
    left: 40%;
    width: 268px;
    font-size: 12px;
    color: #444;
    background-color: rgb(190,190,190);
    z-index: 99;
}

#menuBlock {
    position: fixed;
    right: 0;
    top: 0;
    width: 520px;
    height: 41px;
    padding: 4px 4px 2px 4px;
    cursor: move;
    z-index: 100;
}

#ytLocalPlayerBlock {
    display: none;
    position: absolute;
    top: 100px;
    left: 100px;
    font-size: 12px;
    background-color: rgb(190,190,190);
    z-index: 99;
}

#twLocalPlayerBlock {
    display: none;
    position: absolute;
    top: 100px;
    left: 100px;
    font-size: 12px;
    background-color: rgb(190,190,190);
    z-index: 99;
}

#ytLocalOpenBtn {
    display: inline-block;
    position: absolute;
    right: 3px;
    color: red;
    font-size: 21px;
    cursor: pointer;
}

.twlcLocalButtons {
    display: inline-block;
    padding: 5px;
    background-color: darkgreen;
}

.twlcClipButtons {
    display: inline-block;
    padding: 5px;
    margin-left: 20px;
    background-color: #444;
}

.twlcRemoteButtons {
    display: inline-block;
    padding: 5px;
    background-color: #7A0013;
    position: absolute;
    right: 0;
}

.twclError {
    color:red;
}

.lcRed {
    color:red;
}

#twlpTitle {
    max-width: 98%;
    overflow: hidden;
    padding: 5px;
}


.menuSmall {
    display: none;
    color: #FFF;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 999;
    /* border-radius: 5px; */
    border: 1px solid #666;
    padding: 5px;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: bold;
    font-size: 11pt;
    background-color: #444;
}


.menuItem {
	position: relative;
	cursor: pointer;
    padding-left: 23px;
    padding-right: 21px;
    border-radius: 5px;
	margin-bottom: 4px;
	z-index: 10;
}

.menuItem:hover {
	background-color: #777;
}

#noShowIcon {
    position: absolute;
    display: none;
    color: rgba(255,0,0,0.5);
    font-size: 48px;
    width: 100%;
    text-align: center;
    z-index: -1;
}

#modeidPanel {
    display: none;
    position: fixed;
    z-index: 10;
    background-color: #444;
    border: solid 1px #999;
    width: 350px;
    padding: 5px;
    top: 10px;
    left: 5px;
    color:#FFF;
}


.modeNick {
    display: inline-block;
    width: 8.5em;
    cursor: default;
}

.timerPauseBtn {
    display: inline-block;
    padding: 3px;
    cursor: pointer;
    margin-left: 15px;
    font-size: 26px;
}

.timerPlayBtn {
    display: none;
    padding: 3px;
    cursor: pointer;
    margin-left: 15px;
    font-size: 26px;
}

.timerStopBtn {
    display: none;
    padding: 3px;
    cursor: pointer;
    margin-left: 15px;
    font-size: 26px;
}

.timerEndOr {
    margin-bottom: 5px;
}

.timerEndRight {
    position: absolute;
    left: 178px;
    bottom: 0px;
    height: 17px;
    padding: 0 5px 4px 0px;
    width: 72px;
}

.contDots {
	display: none;
	position: absolute;
	top: 0;
	right: 1px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	opacity: 0.7;
	padding: 0 4px 4px 6px;
	z-index: 2;
    font-weight: 800;
}


.imgTile {
	position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    border: 1px solid #CCC;
	vertical-align: top;
	overflow: hidden;
}


.itCati {
	display: inline-block;
    margin-right: 0px;
    max-width: 163px;
    height: 13px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #EEE;
    background-color: var(--smalltile-color);
    color: #333;
    padding: 0 2px 1px 2px;
    font-size: 11px;
    /* overflow-wrap: break-word; */
    white-space: nowrap;
    vertical-align: top;
    line-height: 12px;
}

.itDescription {
	min-height: 17px;
}

.itHidden {
	bottom: 0;
    top: auto;
    font-size: 40px;
	left: 64px;
	color: RGBA(160,41,83,0.3);
}

.itImgFrame {
	height: 138px;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
}

.itImg {
    width: 151px;
    height: 135px;
    object-fit: contain;
}

.videoTileIcon {
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 26px;
    color: rgba(255,255,255,1);
}

.asImg {
    width: 100px;
    height: 27px;
    object-fit: contain;
}

.asFileName {
    position: absolute;
    left: 3px;
    top: 27px;
    width: 95%;
    word-break: break-all;
    height: 48px;
    overflow-y: hidden;
    font-size: 12px;
}

.asBottomPanel {
    position: absolute;
    display: none;
    left: 0;
    bottom: 5px;
    height: 17px;
    padding: 0 5px 4px 0px;
    width: 93%;
}

.aStyleBtn {
    display: inline-block;
    position:relative;
    font-size: 75px;
    height: 100px;
    padding: 0 6px 0 6px;
    cursor: pointer;
    opacity: 0.4;
}

.aStyleBtn:hover {
    opacity: 0.7;
}

.aStyleBtnActive {
    opacity: 1;
}

.aStyleBtnTC {
    width: 52px;
    height: 10px;
    border: 3px solid #ddd;
    border-radius: 5px;
    position: absolute;
    top: 38px;
    left: 14px;
    background-color: white;
}

.aStyleBtnTB {
    width: 52px;
    height: 10px;
    border: 3px solid #ddd;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 14px;
    background-color: white;
}

.aStyleBtnTR {
    width: 52px;
    height: 10px;
    border: 3px solid #ddd;
    border-radius: 5px;
    position: absolute;
    top: 38px;
    right: 0px;
    background-color: white;
}

.aStyleBImg {
    color: #bbb;
}


.itCatBlock {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: white;
	z-index: 10;
}

.itBottom {
	padding: 2px 4px 2px 4px;
	font-size: 11px;
}

.itName {
    font-size: 11px;
    font-weight: bold;
    height: 15px;
    overflow: hidden;
}

.itUsage {
	position: absolute;
    bottom: 1px;
    right: 1px;
    background-color: aquamarine;
    padding: 1px 3px 2px 2px;
    border-radius: 8px;
}

.fileTile {
	position: relative;
    display: inline-block;
    width: 160px;
    height: 134px;
	margin-left: 4px;
    margin-right: 0px;
    margin-bottom: 7px;
    cursor: pointer;
    border: 1px solid #CCC;
	vertical-align: top;
	overflow: hidden;
}

.fileTileBigger {
	width: 180px;
	height: 160px;
}

.fileTileBig {
	width: 480px;
}

.fileTileTiny {
    width: 141px;
    height: 100px;
    border: 1px solid #666;
    cursor: default;
}

.ftTopLeft {
    display: inline-block;
    width: 21%;
    box-sizing: border-box;
    position: relative;
    left: 2px;
    vertical-align: top;
    top: 4px;
}

.ftTopRight {
	display: inline-block;
	width: 75%;
	box-sizing: border-box;
}

.ftName {
	position: relative;
    font-size: 14px;
    font-weight: bold;
    max-height: 4em;
    overflow: hidden;
    width: 150px;
    margin-left: 5px;
}

.ftNameBigger {
	width: 173px;
}

.ftDescription {
    margin-left: 5px;
    margin-top: 2px;
    font-size: 12px;
}

.ftOwner {
    font-size: 13px;
    display: inline-block;
    overflow: hidden;
    width: 112px;
    vertical-align: top;
    position: relative;
    top: 2px;
}
.ftTime {
    font-size: 13px;
    display: inline-block;
    overflow: hidden;
    width: 112px;
    vertical-align: top;
    position: relative;
    top: -3px;
}

.ftImgFrame {
	height: 100px;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
}

.ftImg {
	max-height: 100%;
}

.ftHidden {
	top: 54px;
    left: 34px;
}

.ftBottom {
	height: 49px;
    overflow: hidden;
}

.ftBottomPanel {
    position: absolute;
    display: none;
    left: 0;
    bottom: 14px;
    height: 17px;
    padding: 0 5px 4px 0px;
    width: 93%;
}

.ftBtn {
    padding: 2px 6px 0 6px;
    float: right;
    cursor: pointer;
    font-size: 23px;
}

.asftBtn {
    font-size: 14px;
}

.gftBtn {
    font-size: 14px;
    float: left;
    cursor: pointer;
}

.dbTinyBtn {
    padding: 2px 6px 0 6px;
    float: right;
    cursor: pointer;
    font-size: 19px;
}

#widgetNamebox {
    position: fixed;
    left: 500px;
    background-color: darkgreen;
    padding: 2px;
    color: white;
    display: none;
    z-index: 100;
}

.itul {
	height: 180px;
}

.itulSelected {
    background-color: darkslategrey;
    border: 2px solid darkcyan;
}

.fileGroupName {
    font-size: 24px;
    font-weight: bold;
    margin-left: 11px;
    margin-bottom: 8px;
    color: var(--teal-6);
}

.giphySelected {
    background-color: darkslategrey;
    border: 2px solid darkcyan;
}

.htBottom {
	height: 65px;
    overflow: hidden;
    position: absolute;
    top: 44px;
}

.ftInfo {
    box-sizing: border-box;
    width: 100%;
    height: 12%;
    padding-left: 7px;
    margin-top: 9px;
    position: absolute;
    bottom: 5px;
}

.ftNcIcon {
	font-size: 17px;
}

.ftNc {
	position: absolute;
    top: 0px;
    left: -1px;
    font-family: monospace;
    font-size: 12px;
    width: 20px;
    text-align: center;
    display: inline-block;
}

.ftNcNew {
	padding: 1px 3px 2px 3px;
    position: absolute;
    top: 0px;
    border-radius: 4px;
    font-family: monospace;
    background-color: red;
    color: white;
    left: 17px;
    font-size: 10px;
}


.noShow {
    background-image: url(/pics/noshow.png);
}

.onAir {
    background-image: url(/pics/onair.png);
}

.helpIcon {
    display: inline-block;
    color:deepskyblue;
    cursor: pointer;
    font-size: 16px;
}

.chWigetName {
    display: inline-block;
    width: 300px;
}

.contentWH {
    background-color: rgba(142, 142, 142, 0.275);
    color: white;
    padding: 4px;
    position: absolute;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    
}

.contHeight {
    right: -26px;
    bottom: 5px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.contWidth {
    right: 5px;
    bottom: -26px;
}

.fontStyleBtn {
    padding: 2px 6px 1px 4px;
    cursor: pointer;
    border: 1px outset #777;
    background-color: #555;
    margin-left: 3px;
    color: #aaa;
}

.fontStyleBtnDown {
    padding: 2px 4px 1px 4px;
    cursor: pointer;
    border: 1px inset #777;
    background-color: #555;
    margin-left: 3px;
    color: #FFF;
}

.patternBtn {
    color: #FFF;
}

.videoContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.fsGreen {
	color: green;
}

.fsOrange {
	color: orange;
}

.fsRed {
	color: red;
}

.playerBtn {
    display: inline-block;
    padding: 2px 4px 1px 4px;
    cursor: pointer;
    border: 1px outset #777;
    background-color: #555;
    margin-left: 1px;
    color: #FFF;
}

.playerBtnBigger {
    display: inline-block;
    padding: 2px 4px 1px 4px;
    cursor: pointer;
    border: 1px outset #777;
    background-color: #555;
    margin-left: 1px;
    color: #FFF;
    min-width: 23px;
    font-size: 20px;
    text-align: center;
}

.playerBtnDisabled {
    color: #777;
}

.basicBtn {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    border: 1px solid #888;
    background-color: darkcyan;
    color:#FFF;
    cursor: pointer;
    font-family: sans-serif;
    text-align: center;
}

.basicBtn:hover {
    background-color: cadetblue;
}

.btnOrange {
    background-color: chocolate;
}

.btnOrange:hover {
    background-color: orange;
}

.btnBGreen {
    background-color: limegreen;
}

.btnBGreen:hover {
    background-color: forestgreen;
}

.btnBOrange {
    background-color: chocolate;
}

.btnBOrange:hover {
    background-color: orange;
}

.btnBRed {
    background-color: red;
}

.btnBRed:hover {
    background-color: indianred;
}

.btnDisabled {
    color: #aaa; 
    background-color: rgb(98,98,98);
    cursor: default;
    pointer-events: none;
}

.btnDisabled:hover {
    color: #777; 
    background-color: rgb(98,98,98);
}

.btnRight {
    float: right;
}

.miniBtn {
    padding: 3px;
    display: inline-block;
    border-left: 1px solid #666;
    border-top: 1px solid #666;
    border-right: 2px solid #000;
    border-bottom: 2px solid #222;
    background-color: #444;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

.miniBtn:hover {
    background-color: #555;
}

.miniBtnColor {
    padding: 3px;
    display: inline-block;
    border-left: 1px solid #666;
    border-top: 1px solid #666;
    border-right: 2px solid #000;
    border-bottom: 2px solid #222;
    background-color: darkcyan;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

.miniBtnColor:hover {
    background-color: #555;
}

.btnGreen {
    color: limegreen;
}

.btnRed {
    color: red;
}

#sSelectMain {
    position: absolute;
    left: 70px;
    top: 8px;
}

.sceneDotsTop {
    position: absolute;
    left: 294px;
    top: 14px;
    cursor: pointer;
}

#wsConnected {
    position: absolute;
    top: 3px;
    right: 170px;
    font-size: 15px;
    color: orange;
}

#wsClientConnected {
    position: absolute;
    top: 3px;
    right: 196px;
    font-size: 15px;
    cursor: pointer;
    color: orange;
}

.wscGreen {
    color: green !important;
}

.wscRed {
    color: red !important;
    font-size: 18px !important;
}

.wscBigger {
    font-size: 18px !important;
}

#infoRow {
    display:none;
}

.infoRow:hover {
    background-color: var(--dark-4);
}

.panelDark {
    background-color: #333 !important;
    color:white !important;
}

.panelSubHeader {
    padding-bottom: 10px;
}

#categoryBlock {
    height: 380px;
    overflow-y: auto;
}

.categoryItem {
	position: relative;
    display: inline-block;
    width: 120px;
    height: 183px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    border: 1px solid #CCC;
	vertical-align: top;
	overflow: hidden;
}

.categoryPic {
    width: 80%;
    vertical-align: middle;
    margin-left: 10px;
    border-radius: 4px;
}

.categoryItemSelected {
    background-color: forestgreen;
}

#cHeadName {
    position: absolute;
    right: 4px;
    top: 8px;
    display: inline-block;
    font-size: 13px;
}

#cHeadEye {
    display: inline-block;
    cursor: pointer;
    padding-left: 5px;
}

.editDark {
    background-color: #444 !important;
    color: white !important;
}

.editTiny {
    width: 30px;
}

.editSmall {
    width: 100px;
}

.editMedium {
    width: 250px;
}

.editLarge {
    width: 500px;
}

.edit90 {
    width: 90%;
}

.edit98 {
    width: 98%;
}

.textboxMedium {
    width: 292px;
    height: 60px;
}

.textboxLarge {
    width: 400px;
    height: 150px;
    font-size: 14px !important;
}


.textboxMedium98 {
    width: 98%;
    height: 60px;
}

.textboxLarge98 {
    width: 98%;
    height: 150px;
    font-size: 14px !important;
}

.textboxLarge98_100 {
    width: 98%;
    height: 100px;
    font-size: 14px !important;
}

.optionRow {
    padding: 2px 8px 5px 8px;
    border-bottom: 1px solid #ccc;
    position: relative;
    font-size: 13px;
}

.optionRow80 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 79%;
    vertical-align: top;
}

.optionRow50 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 49%;
    vertical-align: top;
}

.optionRow33 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 32%;
    vertical-align: top;
}

.optionRow30 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 29.5%;
    vertical-align: top;
}

.optionRow25 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 24.5%;
    vertical-align: top;
}

.optionRow20 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 19.5%;
    vertical-align: top;
}

.optionRow15 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 14.5%;
    vertical-align: top;
}

.optionSubRow {
    padding: 6px 1px 2px 4px;
    position: relative;
    font-size: 13px;
}

.optionLabel {
    font-style: italic;
    font-size: 13px;
    margin-bottom: 3px;
}

.optionValue {
    font-size: 14px;
    position: relative;
}

.orow33 {
    display: inline-block;
    box-sizing: border-box;
    width: 33%;
    vertical-align: top;
}

.orow50 {
    display: inline-block;
    box-sizing: border-box;
    width: 49%;
    vertical-align: top;
}

.orow60 {
    display: inline-block;
    box-sizing: border-box;
    width: 59%;
    vertical-align: top;
}

.orow40 {
    display: inline-block;
    box-sizing: border-box;
    width: 39%;
    vertical-align: top;
}

.orow40 {
    display: inline-block;
    box-sizing: border-box;
    width: 39%;
    vertical-align: top;
}

.or35 {
    display: inline-block;
    box-sizing: border-box;
    width: 34%;
    margin-left: 5%;
    vertical-align: top;
    min-height: 109px;
}

.or40 {
    display: inline-block;
    box-sizing: border-box;
    width: 39%;
    vertical-align: top;
    min-height: 84px;
}

.or45 {
    display: inline-block;
    box-sizing: border-box;
    width: 44%;
    vertical-align: top;
    min-height: 104px;
}

.or50 {
    display: inline-block;
    box-sizing: border-box;
    width: 49%;
    vertical-align: top;
    min-height: 75px;
}

.or60 {
    display: inline-block;
    box-sizing: border-box;
    width: 59%;
    vertical-align: top;
    min-height: 75px;
}

.or65 {
    display: inline-block;
    box-sizing: border-box;
    width: 64%;
    vertical-align: top;
    min-height: 104px;
}

.optionRowTight {
    margin-top:8px;
}

.orNb {
    border-bottom: none;
}

.optionLabelTight {
    display: inline-block;
    width: 30%;
    font-style: italic;
    font-size: 13px;
    vertical-align: top;
    position: relative;
}

.optionValueTight {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
    position: relative;
    width: 66%;
}

.oltRight {
    position: absolute;
    right: 13px;
    top: 0;
    font-size: 110%;
    color: limegreen;
}

.oltRightRed {
    color: red;
}

.ovt1 {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
    position: relative;
}

.ovt2 {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
    position: relative;
    margin-left: 10px;;
}

.ov100px {
    width: 100px;
    display: inline-block;
}

.orDark {
    border-bottom: 1px solid #555
}

.orNoborder {
    border-bottom: none;
}

.dPart {
    font-size: 85%;
    color: #bbb;
    display: inline-block;
    width: 2em;
    text-align: left;
}

.panelHeader {
    background-color: #222;
    padding: 5px;
    cursor: move;
}

.raffleData {
    display: none;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.listHeader {
    background-color: #222;
    border-bottom: 1px solid #555;
    padding-top: 4px;
    font-style: italic;
}

.asOl {
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
}

.asOv {
    margin-top:8px;
}

.asOvV {
    margin-left:5%;
}

.asTemplateEdit {
    width: 400px;
}

.asTemplateEditVar {
    width: 376px;
}

.asVariationDots {
    padding: 2px 6px 0 6px;
    cursor: pointer;
    font-size: 15px;
    position: absolute;
    top: 7px;
    right: 0;
    display:none;
}

.asVariationTitle {
    font-size: 18px;
    font-weight: bold;
    background-color: slategrey;
}

.asNotSaved {
    display: none;
    color: red;
    font-weight: bold;
    font-size: 125%;
}

.asTestBtn {
    position: absolute;
    left: -27px;
    bottom: 9px;
    font-size: 27px;
    cursor: pointer;
    color: darkcyan;
}

.asSceneCheck {
    display: inline-flex;
    font-size: 75%;
    padding: 2px;
    background-color: #555;
    color:#ccc;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 2px 0 2px;
}

.asScOn {
    background-color:  darkcyan;
    color: #fff;
}

.abGif {
    width:100%
}

.abTextParent {
    width: 593px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.abText {
    width: 100%;
    text-align: center;
    margin-bottom: 0.2em;
    position: relative;
}

.asBlockLeftV {
    display: inline-block;
    box-sizing: border-box;
    width: 34%;
    margin-left: 5%;
    vertical-align: top;
    min-height: 109px;
}

.asBlockLeftB {
    display: inline-block;
    box-sizing: border-box;
    width: 39%;
    vertical-align: top;
    min-height: 84px;
}

.asBlockRight {
    display: inline-block;
    box-sizing: border-box;
    width: 59%;
    vertical-align: top;
    min-height: 75px;
    position: absolute;
    top: 10px;
}

.asGif {
    width: 95px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    cursor: pointer;
}

.asBaseDiv {
    position: relative;
}

.asVariationDiv {
    border-bottom: double 5px #999;
    padding-top: 6px;
    padding-bottom: 7px;
    display: none;
    position: relative;
}

.asVolumeND {
    display: inline-block;
    width:24%;
}

.asVolumeT {
    display: inline-block;
    width:73%;
    position: relative;
    top: 3px;
}

.asVolumeS {
    display: inline-block;
    width:71%;
    position: relative;
    top: 3px;
}

.asPositionS {
    display: inline-block;
    width:71%;
    position: relative;
    top: 3px;
}

.asAlertsOffMessage {
    color: red;
    margin-left: 10px;
    font-size: 18px;
    font-weight: bold;
    display: none;
}

.rwTestBtn {
    position: absolute;
    left: 10px;
    font-size: 27px;
    cursor: pointer;
    color: darkcyan;
    top: 120px;
}

.rwBaseDiv {
    position: relative;
    padding: 8px;
    margin: 8px 0 20px 0;
}

.rwBlockLeftV {
    display: inline-block;
    box-sizing: border-box;
    width: 34%;
    margin-left: 5%;
    vertical-align: top;
    min-height: 109px;
}

.rwBlockLeftB {
    display: inline-block;
    box-sizing: border-box;
    width: 39%;
    vertical-align: top;
    min-height: 84px;
}

.rwBlockRight {
    display: inline-block;
    box-sizing: border-box;
    width: 59%;
    vertical-align: top;
    min-height: 75px;
}

.trewParent {
    width: 600px;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
}

.trewTitle {
    position: absolute;
    top: 0;
    left: 1em;
    font-size: 18px;
    line-height: 1.2;
    border: 0.3em solid white;
    border-radius: 0.8em;
    padding: 0.5em;
    background-color: #444;
}

.trewText {
    position: relative;
    left: 0;
    font-size: 21px;
    line-height: 1.2;
    border: 0.3em solid white;
    border-radius: 0.8em;
    padding: 0.8em 0.2em 0 0.2em;
    background-color: teal;
    width: 27em;
    min-height: 2em;
    margin-top: 1.4em;
}

.orAlert {
    background-color: RGB(36,59,59);
    margin-bottom: 15px;
}

.controlScroll {
    height: 700px;
    overflow: auto;
}

.asOrRight {
    position: absolute;
    top: 10px;
}

.textShort {
    width: 75px;
}

.textMedium {
    width: 130px;
}

.textLong {
    width: 290px;
}

.text80 {
    width: 80%;
}

.text90 {
    width: 90%;
}

.text100 {
    width: 100%;
}

.numberTiny {
    width: 38px;
}

.numberTinyb {
    width: 47px;
}

.numberSmall {
    width: 55px;
}

.numberMedium {
    width: 70px;
}

#topRightButtons {
    position: absolute;
    top: 0;
    right: 7px;
}

#soundEffectPanel {
    position: fixed;
    top:0;
    left:500px;
    max-width: 200px;
    z-index: 99;
    min-width: 130px;
}

.seffPosBar {
    margin-top: 5px;
    width: 99%;
    position: relative;
}

#seffContent {
    position: relative;
}

.seffItem {
    display: inline-block;
    width: 85px;
    height: 18px;
    padding: 2px 4px 1px 4px;
    cursor: pointer;
    border: 1px outset #777;
    background-color: #444;
    margin: 1px 0 1px 0;
    color: #fff;
    text-align: center;
    font-size: 12px;
}

.seffItem:hover {
    background-color: #555;
}

#seffVolumeDiv {
    position: relative;
}

#seffvolume {
    font-size: 10px;
    display: inline-block;
    width: 73%;
}

#seffvollbl {
    display: inline-block;
    margin-left: 3px;
    font-size: 10px;
}

#listWidgetBtn {
    position: absolute;
    top: -1px;
    left: 0px;
    color: cyan;
    font-size: 36px;
    cursor: pointer;
}

#newWidgetBtn {
    position: absolute;
    top: 2px;
    left: 42px;
    font-size: 18px;
    cursor: pointer;
}

#newWidgetBtn2 {
    position: absolute;
    right: 7px;
    top: 0;
    cursor: pointer;
    font-size: 18px;
}

#ownNick {
    font-style: italic;
    position: absolute;
    bottom: 3px;
    left: 311px;
    width: 105px;
    overflow: hidden;
}

#channelLbl {
    font-style: italic;
    position: absolute;
    bottom: 3px;
    right: 11px;
    width: 105px;
    overflow: hidden;
}

.trBtn {
    padding: 2px 6px 0 6px;
    float: right;
    cursor: pointer;
    font-size: 15px;
}

.iconBtn {
    padding: 2px 6px 0 6px;
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
}

.iconBtnSmall {
    padding: 2px 6px 0 6px;
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
}

.basicDots {
    padding: 2px 10px 0 10px;
    cursor: pointer;
    font-size: 15px;
}

.dotsAndMenu {
    display: inline-block;
    position: relative;
    width: 180px;
}

#lockRed {
    color: red;
    display:none;
}

#lockGreen {
    color: green;
}

#lockText {
    display:none;
    color:red;
}

#tmplEditHeader {
    position: relative;
    height: 20px;
}

#tmplEditHeaderL {
    display: inline-block;
}

#tmplEditEditorBlock {
    width: 100%;
    height: 46%;
    margin-top: 10px;
    position: relative;
    box-sizing: border-box;
    display: flex;
}

#tmplEditHtmlBlock {
    position: relative;
    height: 100%;
    width: 49%;
    box-sizing: border-box;
}

#tmplEditCssBlock {
    position: relative;
    height: 100%;
    width: 49%;
    box-sizing: border-box;
    margin-left: 1.8%;
}

#htmleditor { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 16px;
}

#csseditor { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 16px;
}

#previewArea {
    width: 100%;
    height: 297px;
    background-color: #777;
    padding: 4px;
    box-sizing: border-box;
}

#aliveBtn {
    position:absolute;
    display:none;
    top: 0;
    right: 30px;
    padding: 4px;
}

.iconSelectBlock {
    display: none;
    background-color: #222;
    border: 1px solid #666;
    position: absolute;
    left: 140px;
    bottom: -2px;
    padding: 2px;
}

.iconSelectItem {
    cursor: pointer;
    padding: 2px;
    font-size: 16px;
}

.iconSelectItem:hover {
    color: white;
    background-color: #666;
}

.customCb > span {   
    display: inline-flex;
    cursor: pointer;
    position: relative;
}

.customCb > span {
    color: #555;
   
}

.customCb > input {
    height: 15px;
    width: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid #888;
    border-radius: 3px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #555;
    cursor: pointer;
    vertical-align: middle;
  }

.customCb > input:checked {
    border: 1px solid #41B883;
    background-color: #555;
}

.customCb > input:checked + span:before {
    content: '\2714';
    color: #41B883;
    position: absolute;
    left: -1.0rem;
    top: -0.8rem;
}

.customCb > input:active {
    border: 2px solid #34495E;
}



select {
    /* appearance: none; */
    background-color: #444;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    width: auto;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    color:white;
    font-size: 13px;
    width:204px;
  }

  select:active {
    border:none;
  }

  .customSelect {
    display: inline-block;
    width: 200px;
    border: 1px solid var(--select-border);
    border-radius: 0.25em;
    padding: 0.15em 0.3em;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    background-color: #444;
    background-image: linear-gradient(to top, #555, #444 33%);
  }

  .sceneSelectFrame {
    border: 4px solid limegreen;
  }

a:-webkit-any-link {
    color:cyan;
    text-decoration: none;
    font-size: smaller;
}

.weathBlock {
    width: 400px;
    height: 60px;
}

.weathUpper {
    position: absolute;
    top: 0;
    left: 54px;
    width: 325px;
}

.weathLower {
    position: absolute;
    top: 14px;
    left: 54px;
    width: 325px;
}

.weathFlag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.2em;
}

.weathFlagBigger {
    width: 2em !important;
    height: 2em !important;
    margin-top: 8px;
}

.weathLocation {
    display: inline-block;
    max-width: 360px;
    margin-left:0.2em;
    vertical-align: middle;
}

.weathCity {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    margin-left:0.2em;
    vertical-align: middle;
}

.weathCountry {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    margin-left:0.2em;
    vertical-align: middle;
}

.weathTemp {
    display: inline-block;
    margin-left:0.5em;
    vertical-align: middle;
}

.weathIcon {
    display: inline-block;
    vertical-align:middle;
    height: 2.5em;
}

.weathTime {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: middle;
    margin-right: 0.2em;
}

.clockFlag {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.2em;
    height: 0.8em;
    position: relative;
    top: -0.1em;
}

#trSourceDiv {
    display: none;
}

#ytSearchPanel {
    position:absolute;
    left: 43px;
    top: 1px;
    width: 516px;
    z-index: 98;
}

#ytSearchResults {
    max-height: 750px;
    overflow: auto;
}

#ytCloseBtn {
    position: absolute;
    top: -2px;
    right: 3px;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    z-index: 10;
}

.ytActivePlaylist {
    display: inline-block;
    margin-left: 2px;
    font-weight: bold;
    margin-top: 17px;
    margin-bottom: 5px;
}


.twActivePlaylist {
    display: inline-block;
    margin-left: 2px;
    font-weight: bold;
    margin-top: 17px;
    margin-bottom: 5px;
}

.contToNextDiv {
    font-size: 11px;
    position: absolute;
    bottom: 2px;
    left: 363px;
}

.loopDiv {
    font-size: 11px;
    position: absolute;
    bottom: 20px;
    left: 363px;
}

#infoBox {
    display:none;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    border: 2px solid #888;
    background-color: darkturquoise;
    width: 350px;
    z-index: 1000;
    padding: 10px;
    text-align: center;
    top: 0;
    border-radius: 7px;
    box-shadow: 2px 3px #555;
    color: black;
}

.tip {
    color:deepskyblue;
    font-size: 14px;
    margin-right:6px;
    margin-left: 6px;
    cursor: pointer;
}


.tipBigger {
    font-size: 18px;
}

.playerPropIcons {
    position: absolute;
    bottom: 5px;
    right: 12px;
}

.threeDBtn {
    display: inline-block;
    width: 19px;
    height: 19px;
    border-left: 2px solid #AAA;
    border-top: 2px solid #AAA;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    background-color: #444;
    cursor: pointer;
}

.tdbDown {
    border-left: 2px solid #000;
    border-top: 2px solid #000;
    border-right: 2px solid #AAA;
    border-bottom: 2px solid #AAA;
}

.videoTimeDiv {
    display: inline-block;
    width: 133px;
    margin-left:20px;
    font-size: 13px;
}

#ytAutoplayBtn {
    position: absolute;
    right: 5px;
    top: 0px;
}

#twAutoplayBtn {
    position: absolute;
    right: 5px;
    top: 0px;
}

.ytDiv {
    background-image: url(/pics/youtube-text.png);
    background-size: 10%;
}

#ytCurrentPosLabel {
    display: none;
    position: absolute;
    top: 25px;
    left: 100px;
    background-color: #333;
    padding: 1px 3px 1px 3px;
}

#twCurrentPosLabel {
    display: none;
    position: absolute;
    top: 25px;
    left: 100px;
    background-color: #333;
    padding: 1px 3px 1px 3px;
}

.dashboard {
    position: fixed;
    top: 0;
    left: 100px;
    font-size: 11px;
    background-color: #555;
    z-index: 99;
}

.twDashboard {
    left: 210px; 
}

#subathonDashboard {
    display:none;
    left: 320px;
}

.dbTitle {
    cursor: move;
    background-color: #333;
    color: white;
    padding: 0 4px 2px 4px;
    font-weight: bold;
    font-size: 10px;
    height: 16px;
}

.dbtRed {
    background-color: red;
}

.dbhBtn {
    float:right;
}

#ytPlaylist {
    font-size: 12px;
}

#twPlaylist {
    font-size: 12px;
}

#ytPlaylistItems {
    height: 536px;
    overflow-y: auto;
}

#twPlaylistItems {
    height: 536px;
    overflow-y: auto;
}

.twListDiv {
    margin-bottom: 7px;
    position: relative;
    padding-top: 4px;
    height: 53px;
    font-size: 12px;
}

.ytListDiv {
    margin-bottom: 7px;
    position: relative;
    padding-top: 4px;
    height: 53px;
    font-size: 12px;
}

.ytlHover {
    background-color: #444;
}


.ytlHandle {
    position: absolute;
    display: none;
    top: -7px;
    left: 240px;
    cursor: ns-resize;
    color: #888;
    letter-spacing: -1px;
}

.ytPlName {
    font-weight: bold;
    margin-bottom: 6px;
}

.ytListCurrent {
    background-color: lightslategrey;
}

.ytListPlaying {
    background-color: #7A0013;
}

.ytlUrl {
    display: inline-block;
    color: #bbb;
    font-size: 11px;
    position: absolute;
    bottom: 6px;
    left: 2px;
}

.ytlAddedat {
    display: inline-block;
    font-size: 11px;
    position: absolute;
    top: 19px;
    width: 100px;
    overflow: hidden;
    right: 150px;
    text-align: right;
}

.ytlNick {
    display: inline-block;
    font-size: 11px;
    position: absolute;
    top: 19px;
    width: 100px;
    overflow: hidden;
    right: 5px;
    text-align: right;
}

.ytlTitle {
    width: 350px;
    display: inline-block;
    height: 32px;
    overflow: hidden;
}

.ytlHasClips {
    color: mediumspringgreen;
}

.ytlNotAccepted {
    display: inline-block;
    position: absolute;
    top: 1px;
    right: 70px;
    color:red;
    cursor: pointer;
}

.ytlAccepted {
    display: inline-block;
    position: absolute;
    top: 1px;
    right: 70px;
    color:green;
    cursor: pointer;
}

.ytlClipsIcon {
    display: inline-block;
    position: absolute;
    color: mediumseagreen;
    top: 1px;
    right: 61px;
    cursor: pointer;
}

.ytlLength {
    display: inline-block;
    position: absolute;
    top: 1px;
    right: 5px;
}

.ytlCreated {
    position: absolute;
    left: 130px;
    bottom: 6px;
    font-size: 11px;
}

.ytlIcons {
    display: inline-block;
    position: absolute;
    bottom: 4px;
    right: 5px;
    display: none;
}

.ytlBtn {
    padding: 0 3px 0 3px;
    cursor: pointer;
    font-size: 11px;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0);
}

.ytlBtn:hover {
    border: 1px solid #999;
}


#ytliSpacer {
    position: relative;
    height: 72px;
}

.ytlBtnBigger {
    font-size: 15px;
}

.ytlCurrPosTip {
    display: none;
    background-color: forestgreen;
    color: white;
    z-index: 5;
    position: absolute;
    bottom: 4px;
    font-weight: bold;
    padding: 0 2px;
    left: 221px;
}

.ytlRemainingTime {
    display: none;
    background-color: forestgreen;
    color: white;
    z-index: 5;
    position: absolute;
    right: 4px;
    bottom: 24px;
    font-weight: bold;
    padding: 0 2px;
}

.ytGIcons {
    position: absolute;
    bottom: 1px;
    right: 1px;
}

.ytListDivG {
    padding-bottom: 5px;
    position: relative;
    padding-top: 4px;
    width: 490px;
    height: 86px;
    font-size: 12px;
    border-bottom: 3px groove #666;
}

.ytlGrey {
    opacity: 0.4;
}

#ssrDiv {
    display: inline-block;
}

.twCLipListItem {
    cursor: pointer;
}

.twCLipListItem:hover {
    background-color: #666;
}

.twclSelected {
    background-color: darkslategrey;
}

.twclCheck {
    cursor: pointer;
}

.twclSel {
    display: none;
}

.twclInOut {
    cursor: pointer;
}

.svgIcon {
    height: 18px;
    position: relative;
    top: 4px;
}

.svgIconSmall {
    height: 15px;
    position: relative;
    top: 3px;
}

.ytListDivG:hover {
    background-color: #444;
}

.ytGThumbnailSmall {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
}

.ytGTitle {
    position: absolute;
    top: 4px;
    left: 130px;
}

.ytGUrl {
    position: absolute;
    bottom: 6px;
    left: 130px;
    max-width: 250px;
    overflow: hidden;
}

.ytGCreated {
    position: absolute;
    left: 130px;
    bottom: 36px;
}

.ytGCreator {
    position: absolute;
    left: 230px;
    bottom: 36px;
}

.ytGType {
    position: absolute;
    left: 230px;
    bottom: 22px;
    color: greenyellow;
}

.ytGRegionRestrictionIcon {
    position: absolute;
    top: 54px;
    left: 132px;
    color: red;
    font-size: 15px;
    cursor: pointer;
}

.ytRI {
    left: auto;
    right: 103px;
    top: 0;
}

.ytGAgeRestrictionIcon {
    position: absolute;
    top: 68px;
    left: 156px;
    color: red;
    font-size: 15px;
    cursor: pointer;
}

.ytNotEmbeddableIcon {
    position: absolute;
    bottom: 18px;
    left: 190px;
    color: red;
    font-size: 15px;
    cursor: pointer;
}

.ytnei {
    top: 2px;
    right: 89px;
    left: auto;
    font-size: 13px;
}

.ytGLength {
    position: absolute;
    bottom: 2px;
    left: 69px;
    padding: 3px 3px 3px 3px;
    background-color: #111;
}

.ssrDiv {
    display:inline-block;
}

.ifNoShow {
    display: inline-block;
    margin: 12px;
    color: #666;
}

.soImage {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.soLink {
    display: inline-block;
    font-size: 30px;
    text-align: center;
    width: 100%;
    font-weight: 600;
    margin-top: 0.3em;
}

.soDescription {
    display: inline-block;
    font-size: 20px;
    text-align: center;
    width: 100%;
    margin-top: 0.75em;
}

.pointCounterParent {
    width:20em;
    position:relative;
}

.pointCounterBarBg {
    width:100%;
    height:2em;
    position:relative;
    background-color:rgba(100,100,100,0.3);
}

.pointCounterBar {
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    max-width:100%;
    background-color:RGB(145,71,255)
}

.pointCounterTitle {
    width:100%;
    text-align:center
}

.pointCounterSubTitle {
    position: relative;
    width:100%;
    text-align:center;
    font-size: 80%;
}

.pointCounterNumberL {
    position:absolute;
    left:0.3em;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.pointCounterNumberC {
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
.pointCounterNumberR {
    position:absolute;
    right:0.3em;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

/* ************* counter ******************** */

.counterRow {
    display: flex;
    line-height: 27px;
    margin-bottom: 3px;
    margin-top: 3px;
}

.counterTitle {
    font-size: 15px;
    margin-right: 0;
    margin-left: auto;
    margin-bottom: 3px;
    line-height: 1.2em;
}

.counterCount {
    font-size: 25px;
    text-align: center;
    padding-left: 10px;
    margin-right: 0;
    width: 35px;
    line-height: 1em;
}

.counterRowSpacer {
    display: inline-block;
    width: 10px;
}

.counterBtn {
    font-size: 18px;
    padding: 10px 25px 10px 25px;
}

.cClearBtn {
    margin-left: 20px;
}

.counterLabel {
    margin: 0 5px 0 5px;
    padding: 5px;
    cursor: pointer;
    width: 18px;
    display: inline-block;
    text-align: center;
}


.counterRowH {
    display: inline-block;
    padding: 1px 3px 1px 3px;
}

.counterRowHidden {
    display: none;
}

.counterTitleH {
    text-align: center;
}

.counterCountH {
    width: auto;
    padding-left: 0;
}

/* ************* counter ******************** */

.tweChannel {
    margin-bottom: 10px;  
    margin-left: 10px;      
}

.tweChannelName {
    display: inline-block;
    width: 138px;
    font-size: 125%;
    font-weight: bold;
}

.tweSessionId {
    display: inline-block;
}

.tweEventItem {
    margin-left: 20px;
}

.tweEventItemDisabled {
    color: #999;
}

.tweType {
    display: inline-block;
}

.tweStatus {
    display: inline-block;
}


/* Widget 40 */

.fiContent {
    width: 450px;
    height: 200px;
    position: relative;
}

.fiData {
    width: 100%;
    height: 100%;
    position: relative;
}

.fiLogo {
    position: absolute;
    top: -14px;
    left: 156px;
}

.fiBox {
    position: absolute;
    border: white solid 12px;
    width: 393px;
    height: 86px;
    top: 27px;
    border-radius: 50px;
    left: 15px;
    box-shadow: rgb(0, 0, 0) 0.286em 0.286em 0.748em;
    background: linear-gradient(to right,  #1e83b9 0%,#41b5e1 20%,#1e83b9 50%,#41b5e1 80%,#1e83b9 100%);
}

.fiDiv1 {
    position: absolute;
    top: 49px;
    left: 40px;
    font-size: 32px;
    width: 100px;
    height: 75px;
}

.fiDiv2 {
    position: absolute;
    top: 46px;
    left: 127px;
    font-size: 20px;
    width: 100px;
    height: 75px;
}

.fiDiv3 {
    position: absolute;
    top: 46px;
    left: 227px;
    font-size: 20px;
    width: 100px;
    height: 75px;
}

.fiDiv4 {
    position: absolute;
    top: 49px;
    left: 310px;
    font-size: 32px;
    width: 100px;
    height: 75px;
}

.fiDepLbl {
    position: absolute;
    top: 3px;
    left: 0;
    color: yellow;
    width: 100%;
    text-align: center;
}

.fiDepVal {
    position: absolute;
    top: 43px;
    left: 0;
    color: white;
    width: 100%;
    text-align: center;
}

.fiArrLbl {
    position: absolute;
    top: 3px;
    left: 0;
    color: yellow;
    width: 100%;
    text-align: center;
}

.fiArrVal {
    position: absolute;
    top: 43px;
    left: 0;
    color: white;
    width: 100%;
    text-align: center;
}

.fiDivLbl {
    position: absolute;
    top: 14px;
    left: 0;
    color: white;
    width: 100%;
    text-align: center;
}

.fiDivVal {
    position: absolute;
    top: 40px;
    left: 0;
    color: white;
    width: 100%;
    text-align: center;
}

.fiHeading {
    position: absolute;
    top: 62px;
    left: 215px;
    transform: rotate(0deg);
}

.fieDatablock {
    padding: 2px 0 2px 4px;
    border-bottom: 1px solid #555;
}

.fieDatarow {
    margin-bottom: 1px;
}

.fieLblCol {
    display: inline-block;
    box-sizing: border-box;
    width: 27%;
    vertical-align: top;
}

.fieValCol {
    display: inline-block;
    box-sizing: border-box;
    width: 43%;
    vertical-align: top;
}

.fieUnitCol {
    display: inline-block;
    box-sizing: border-box;
    width: 27%;
    vertical-align: top;
}

.fieLabel {
    display: inline-block;
    box-sizing: border-box;
    width: 75px;
    vertical-align: top;
}

.fieValue {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}

.fieTextS {
    width: 38px;
}

.fieTextL {
    width: 131px;
}

/* commandtimers */
#commandsDbBlock {
    position: relative;
}

.cEditable {
    cursor: pointer;
}

.comAliases {
    display: inline-block;
    width: 125px;
    max-height: 20px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}

.cttimername {
    display: inline-block;
    width: 100px;
    max-height: 20px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}

.ctrtext {
    display: inline-block;
    width: 300px;
    max-height: 20px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}

.sueTokenBlock {
    display: inline-block;
    width: 100px;
}

.sueToken {
    display: inline-block;
    width: 75%;
    max-height: 20px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}

.sueInfo {
    width: 6S40px;
}

.shorturltext {
    display: inline-block;
    width: 800px;
    max-height: 18px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}

.caType {
    display: inline-block;
    width: 10%;
    min-width: 92px;
    max-height: 20px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}

.caText {
    display: inline-block;
    width: 35%;
    max-height: 20px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}

.caSwitch {
    display: inline-block;
    width: 5%;
    min-width: 50px;
    max-height: 20px;
    overflow: hidden;
    vertical-align: middle;
    mask-image: linear-gradient(90deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    word-break: break-all;
}


.WLGaugeTop {
    position:absolute;
    top:0;
    left:0;
    width: 100%;    
}

.WLGaugeNeedle {
    position: absolute;
    top: 18px;
    left: 43.7%;
    height: 140px;
    transform-origin: 50% 95%;
    transform: rotate(64deg);
}

.WLGaugeBottom {
    position:absolute;
    top:0;
    left:0;
    width: 100%;    
}

.WLGaugeLeftCount {
    position: absolute;
    top: 118px;
    left: 27px;
    font-weight: bold;
    text-shadow: rgb(10, 10, 10) 0.054em 0.054em 0.077em;
    font-size: 30px;
    width: 2em;
    text-align: right;
}

.WLGaugeRightCount {
    position: absolute;
    top: 118px;
    left: 221px;
    font-weight: bold;
    text-shadow: rgb(10, 10, 10) 0.054em 0.054em 0.077em;
    font-size: 30px;
}

.blBlock {
    font-size:13px;
}

.blRow {
    padding: 2px 0 2px 4px;
}

.blNick {
    display: inline-block;
    width: 120px;
    max-height: 20px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
}

.blModerator {
    display: inline-block;
    width: 80px;
    max-height: 20px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
}

.blType {
    display: inline-block;
    width: 64px;
    max-height: 20px;
    overflow: hidden;
}

.blDuration {
    display: inline-block;
    width: 40px;
    max-height: 20px;
    overflow: hidden;
}

.blTime {
    display: inline-block;
    width: 80px;
    max-height: 20px;
    overflow: hidden;
}

@media only screen and (max-width: 500px)  {


    #contentBlock {
        position: absolute;
        top: 20px;
        left:0;
        transform: translate(-25%,-25%) scale(0.5);
        overflow: hidden;
    }

    .controlBlock {
        top:50px;
        left: 9px;
        right: auto;
        box-sizing: border-box;
    }

    
    .listRow {
        margin-bottom: 6px;
    }

    .listButton {
        width: 40px;
    }

    #configBlock {
        top:auto;
        bottom:0;
        left: 0;
        right: auto;
        width: 100%;
    }

    
    .chatAlertTable {
        width: 600px;
    }
    
    .panelHeader {
        height:18px;
        padding: 7px 8px 3px 8px;
    }

    #configSelDiv {
        padding: 4px 0 8px 8px;
    }

    #widgetList {
        max-height: 100px;
    }

    .configDots {
        display:none;
    }

    #configScroll {
        max-height: 200px;
    }

    
    .controlScroll {
        height: 403px;
    }

    #commandsByWeid {
        display:none;
    }

    #configMinimizeBtn {
        right: 25px;
    }

    #controlMinimizeBtn {
        right: 25px;
    }

    .controlMinimized {
        top: auto !important;
        bottom: -5px !important;
        width: 150px !important;
        left: 175px !important;
        z-index: 99;
    }

    .configMinimized {
        top: auto !important;
        bottom: -5px !important;
        left: 3px !important;
        width: 150px !important;
        transform: none !important;
    }

    .overlayContent {
        padding-top: 8px;
    }

    #categoryBlock {
        height: 300px;
    }    

    .categoryItem {
        width: 85px;
        height: 138px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 20px;
        font-size: 65%;
    }

    #cHeadName {
        position: absolute;
        right: 54px;
        top: -24px;
        width: 254px;
        text-align: right;
    }

    #cHeadEye {
        position: absolute;
        top: 0px;
        left: 29px;
    }

    #menuBlock {
        width: 100%;
        height: 27px;
        box-sizing: border-box;
        left: 0;
        /* right: 0; */
    }

    .panelCloseBtn {
        top: 5px;
        right: 3px;
        padding: 1px;
    }

    .hugeBtn {
        width: 85%;
        height: auto;
    }

    .wlRow {
        margin-bottom: 7px;
        cursor: pointer;
    }
    
    .wlSett {
        display:none;
    }

    .wlClone {
        display:none;
    }

    .wlEyeM {
        display:none;
    }

    .wlDel {
        display:none;
    }

    .wlMove {
        display:none;
    }

    .wlLoad {
        display:none;
    }

    .liLeft {
        left: 60% !important;
        top: 16% !important;
    }

    .liLeftBottom {
        left: 60% !important;
        top: 82% !important;
    }    

    #textData {
        width: 98%;
        height: 40%;
    }
   
    .textLong {
        width: 98%;
    }

    .textboxLarge {
        width: 98%;
        height: 190px;
        font-size: 14px !important;
    }

    .seg_longtext {
        width: 98%;
    }

    #listWidgetBtn {
        display: none;
    }

    .fontStyleBtn {
        padding: 2px 2px 1px 2px;
    }

    .fontStyleBtnDown {
        padding: 2px 2px 1px 2px;
    }

    .sceneDotsTop {
        display: none;
        left: 165px;
        top: 8px;
    }

    .customScaleIndicator {
        right: 18px;
    }

    .csiTop {
        right: -10px;
    }

    .ttsClientStatus {
        width: auto;
    }

    #sSelectMain {
        position: absolute;
        left: 5px;
        border: 2px solid limegreen;
    }

    #leftPanel {
        width: 100%;
        height: 99%;
        font-size: 14px;
    }

    .dbChannelTitle {
        font-size: 19px;
    }

    .shorturltext {
        width: 300px;
    }

    .sueInfo {
        width: 340px;
    }

    .olBtn {
        width: 170px;
        height: 96px;
        margin-left: 1px;
        margin-right: 10px;
        box-shadow: 2px 2px #666;
    }    

    .olBtnNew {
        width: 85px;
        height: 94px;
        margin-left: 5px;
        margin-right: 0px;
        margin-bottom: 20px;
        font-size: 75px;
        padding-top: 2px;
    } 
    
    .optionRow {
        padding: 13px 8px 5px 8px;
    }

    .optionRow33 {
        width: 31%;
    }

    .optionLabelTight {
        width: 29%;
    }

    .optionValueTight {
        width: 68%;
    }    

    .asNotSaved {
        width: 50%;
        line-height: 1em;
    }

    .asVolumeND {
        width: 33%;
    }

    .asVolumeT {
        width: 64%;
    }

    .asVolumeS {
        width: 61%;
    }

    .asBlockLeftV {
        display: inline-block;
        box-sizing: border-box;
        width: 34%;
        margin-left: 5%;
        vertical-align: top;
        min-height: 109px;
    }
    
    .asBlockLeftB {
        width: 48%;
    }
    
    .asBlockRight {
        width: 51%;
    }

    .asTemplateEdit {
        width: 88%;
    }

    .asTemplateEditVar {
        width: 88%;
    }   
    
    
    .edit90 {
        width: 82%;
    }
    
    .fileTileTiny {
        width: 77px;
        height: 80px;
    }

    .asGif {
        width: 100%;
    }

    #ownNick {
        display:none;
    }

    #channelLbl {
        right: auto;
        left: 153px;
        width: 80px;
    }

    #speakBtn {
        display: none;
    }

    #linkBtn {
        display: none;
    }

    #homeBtn {
        position: absolute;
        left: -42px;
        top: 1px;
        color: cyan;
    }

    #wsClientConnected {
        right: auto; 
        left: 242px;
    }

    #wsConnected {
        display:none
    }    

    #topDots {
        font-size: 21px;
    }

    .trBtn {
        padding: 2px 11px 0 6px;
    }

    .customSelect {
        width: 128px;
    }

    select {
        width: 131px;
    }

    #aliveBtn {
        display:none;
        z-index:10;
        right:15px;
        top:24px;
    }

    #refreshBtn {
        display: none;
    }

    #configBtn {
        display: none;
    }

    #newWidgetBtn {
        display: none;
    }

    #newWidgetBtn2 {
        display:none;
        top: 6px;
    }

    .dashboard {
        transform: translate(158%, -232.8438%) scale(6);
    }

    #ytDashboard {
        left: 145px;
        display: none;
    }

    .twDashboard {
        left: 693px;
        display: none;
    }

    #subathonDashboard {
        display:none;
        left: 320px;
    }    

    #twLocalPlayerBlock {
        left: 0 !important;
        top: 51px !important;
        width: 100%;
    }

    #ytLocalPlayerBlock {
        left: 0 !important;
        top: 51px !important;
        width: 100%;
    }

    #ssrDiv {
        display: none;
    }

    #ytPlaylistItems {
        height:400px
    }

    #twPlaylistItems {
        height:400px
    }

    .videoTimeDiv {
        position: absolute;
        top: 5px;
        left: 149px;
    }

    .ytGTitle {
        height: 48px;
        overflow: hidden;
    }

    #twSeekEdit {
        width: 55px;
        position: absolute;
        top: -19px;
        left: 167px;
    }

    #twSeekBtn {
        position: absolute;
        top: -20px;
        left: 233px;
    }

    #ytSeekEdit {
        width: 55px;
        position: absolute;
        top: -19px;
        left: 167px;
    }

    #ytSeekBtn {
        position: absolute;
        top: -20px;
        left: 233px;
    }

    #ytSearchPanel {
        left: 0px !important;
        top: 21px !important;
        width: 100%;
    }

    .ssrDiv {
        display:none;
    }

    .ytListDivG {
        width:350px;
        height: 107px;
    }

    .ytGCreated {
        bottom: 47px;
    }

    .ytGUrl {
        bottom: 31px;
    }

    .ytGType {
        bottom: 48px;
    }

    .ytGIcons {
        left: auto;
        right: 0;
    }

    .ytlBtnBigger {
        font-size: 20px;
    }

    #twAutoplayBtn {
        top: -19px;
    }

    #ytVideoTime {
        font-size: 11px;
        width: 110px;
        display: inline-block;
    }

    #videoPlaylistEdit {
        width: 305px;
        margin-top: 10px;
    }

    .ytlTitle {
        width:260px;
        height: 32px;
    }

    .ytlUrl {
        top: 38px;
    }

    .ytlCreated {
        left: 70px;
        bottom: 20px;
        top: auto;
    }

    .ytlIcons {
        bottom: 0px;
        right: auto;
        left: 0;
        width: 100%;
    }

    .ytlBtn {
        width: 9%;
    }

    .ytlRemainingTime {
        bottom: 37px;
    }
    
    .ytListDiv {
        height: 71px;
    }

    .twListDiv {
        height: 67px;
    }

    .wlEye {
        width: 20px;
        margin-left: 5px;
        margin-right: 0;
    }

    .contentWH {
        display: none;
    }

    #listEditBlock {
        max-height: 250px;
        overflow: auto;
    }

    .blBlock {
        font-size:11px;
    }
    
    .blNick {
        width: 77px;
    }
    
    .blDuration {
        width: 23px;
    }
    
    .blType {
        width: 44px;
    }

    .blModerator {
        width: 79px;
    }
    
    .blTime {
        width: 62px;
    }

}