html {
    scroll-behavior: smooth;
    }

    video {
        border-radius:0px;
    }
    body {
    background-color:white;
    font-family:arial;
    margin:0px;
    padding:0px;
    overflow-x:hidden;
    }

    .arialblack {
        font-family:'Alfa Slab One', cursive, arial black;
    }
    .ab {
        font-family:'Alfa Slab One', cursive, arial black;
    }    
    h2, .realarialblack {
        font-family:arial black, 'Alfa Slab One', cursive;
        padding:0px;
        margin:0px;
    }
    li {
        
        margin-top:10px;
    }
    input {
        margin:2px;
    }
    select {
        margin:2px;
    }
    
    .logo, .ttl32 {
        font-size:28px;
    }
   
    .abs {
        position:absolute;
        z-index:2;
    }
    .fxd {
        position:fixed;
        z-index:0;
        margin-left:7vw;
    }
    .hdn {
        display:none;
    }
    .white {
        color:white;
    }
    .ctr {
        text-align:center;
    }
    .indent {
        margin-left:30px;
        font-size:16px;
        display:inline-block;
    }
    .w100 {
        width:40vw;
        display:inline-block;
    }
    
    #vSize {
        display:inline-block;
    }
    .hscard {
        border:solid 1px #aaa;
        border-radius:5px;
        padding:10px;
        margin:10px;
    }
    .fr {
        float:;
        width:250px;
    }
    .spacer {
        position:relative;
        width:100%;
        height:20px;
    }
    .ta {
        font-size:45px;
        padding:200px;
        color:#aaa;
    }
    #testframe {
        text-align:center;
        margin-top:10px;
        margin-bottom:100px;
        display:none;
        width:100vw;
        
    }

    .exmpl {
        color:blue;
        text-decoration:underline;
        cursor:pointer;
    }
    
    .plangrid div {
        margin:3;
        border-top:solid 1px #aaa;
        border-left:solid 1px #aaa;
        padding:5px;
        min-height:35px;
    }
    .plangrid  button {
        margin:5;
    }
    .br {
        border-right:solid 1px #aaa;
    }
    .bb {
        border-bottom:solid 1px #aaa;
    }
    .bld {
        font-weight:bold;
        font-size:18px;
    }
    .grn {
        color:#0b0;
    }
    .fs {
        font-size:10px;
    }
    
    video::-webkit-media-controls-panel {
        background-image: linear-gradient(transparent, transparent) !important;
    }
    
    video::-webkit-media-controls-timeline {
          background-color: #f00;
          padding-bottom: 0;
          margin-bottom: 20px;
          color:#22c1ff;
    }

    video::-webkit-media-controls-play-button {
      color: #f00;
    }

    .landscape { width:80px;height:50px;border:dotted 0px #f90;cursor:pointer;margin:2px;font-size:10px;font-family:arial;text-align:center;}
    .square { width:80px;height:80px;border:dotted 1px #f90;cursor:pointer;margin:2px;font-size:10px;font-family:arial;text-align:center; }
    .portrait { width:80px;height:120px;border:dotted 1px #f90;cursor:pointer;margin:2px;font-size:10px;font-family:arial;text-align:center; }
    .btn-secondary { background-color:#ccc !important;}
    .cur {cursor:pointer;}
    .bdr1 { border:solid #999 1px; background-color:#efefef;}
    .helpsubmenu {margin-top:1px;width:150px;margin-left:10px;}
    .w160 { width:160px;}
    .hsdrag { position: absolute;z-index:1; cursor: move !important; }
    .tpvbg { background-color:#18B8FF; color:white;}
    .tpvbg:hover { color:#ddd;}
    .pTtlTxt { width:50vw;font-size:46px;padding:15px;radius:10px;font-weight:normal;}
    .ib {display:inline-block;}
    .mTtl { font-size:32px; font-weight:bold;} 
    .wizHeight { height:480px;}
    .padTsm { padding-top:10px;}
    .marBsm { margin-bottom:30px;}
    .b0 { border:0px;}
    .fsBig { font-size:28px; }
    .tbSide { font-size:14px; padding:5px;} 
    
    .thintop {border-top:1px solid;}
    .grey {color:#aaa;}
.rotate {
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.rotate.right {
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg);
}    
.rot {
    border:solid 1px #000;
    border-radius:25px;
    width:25px;
    height:25px;
    font-size:15px;
    padding:5px;
    margin-bottom:10px;
}
.strokesub {
    -webkit-text-stroke: 1px black;
}

/* Works on Firefox */
.primaryscroll {
  scrollbar-width: thin;
  scrollbar-color: #21c4ff white;
}

/* Works on Chrome, Edge, and Safari */
.primaryscroll::-webkit-scrollbar {
  width: 12px;
}

.primaryscroll::-webkit-scrollbar-track {
  background: white;
}

.primaryscroll::-webkit-scrollbar-thumb {
  background-color: #21c4ff;
  border-radius: 20px;
  border: 3px solid #fff;
}
.modal-backdrop.in {
	opacity: 0.2;
	overflow:hidden;
}
.modal{
    overflow:hidden;
}
.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}
#pidmenu {
    display: none;
    overflow:hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
    width:150px;
    height:23px;
    padding-top:6px;
    margin-bottom:-3px;
}
#prjttl {
    display:inline-block;
    overflow:hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
    width:750px;
    height:30px;
}
.b {
    font-weight:bold;
}
.r {
    text-align:right;
}
.bb {
    border-bottom: solid 1px #ccc;
}
.br {
    border-right: solid 1px #ccc;
}
.pad {
    padding:10px;
}
.lgbg {
    background-color:#7dc248;
    color:white;
}
.red {
    color:red;
}

.reqhotspots {
    width:25px;
    display:inline-block;
    position:absolute;
}

.smallplayer {
    width:240px;
    height:160px;
    border-radius:10px;
    margin-left:10px;
}

#showblp {
    background-color:#ffffff;
    width:24px;
    height:24px;
    border-radius:12px;
    display:inline-block;
    margin-top:7px;
    position:absolute;
}
#showbls {
    background-color:#ffffff;
    width:24px;
    height:24px;
    border-radius:12px;
    display:inline-block;
    margin-top:7px;
    position:absolute;
}

#colorplayer {
    margin-top:15px;
    display:inline;
    z-index:9;
    width:300px;
    height:220px;
    border-radius:10px;
    margin-left:10px;
}

.clearcolor {
    text-align:center;
    font-size:10px;
    padding:5px;
    background-color:#ffffff;
    border:solid 1px #999;
    width:24px;
    height:24px;
    border-radius:12px;
    display:inline-block;
    margin-top:7px;
    position:absolute;
    margin-left:32px;
}

.h3div {
    background-color:#fff;
    color:#555;
    padding:8px;
    margin-bottom:10px;
    width:35vw;
    position:relative;
    display:inline-block;
}

.tagline {
    letter-spacing:3px;
    position:absolute;
    font-size:12px;
    margin-top:-10px;
    margin-left:75px;
}

.smltb {
    width:100px;
    display:inline-block;
}
.hotspotnum {
    width:50px;
    position:relative;
    display:inline-block;
}

.embedcode {
    width:600px;
    height:120px;
    font-size:16px;
    font-family:courier new;
}

#vidlength {
    width:80px;
    position:relative;
    display:inline-block;
}

#vidpos {
    width:80px;
    position:relative;
    display:inline-block;
}

#spin {
    display:none;
    color:#aaa;
    position:absolute;
    margin-left:50px;
    width:15px;
    height:15px;
}

#pId {
    position:absolute;
    right:20px;
    top:0px;
    text-align:right;
}

#showpbc {
    background-color:#ffffff;
    width:24px;
    height:24px;
    border-radius:12px;
    display:inline-block;
    margin-top:7px;
    position:absolute;
}

#wizardsetup {
    border-bottom:solid 1px;
    margin-top:15px;
    margin-bottom:15px;
    z-index:0;
}
    
#topic_pt {
    font-size:46px;
    font-weight:bold;
}

#mainview {
    display:inline;
    width:100vw;
    z-index:0;
}

#logorow {
    margin-left:20px;
    z-index:0;
}
.ib {
    display:inline-block;
}
.fs10px {
    font-size:10px;
}

#embedresponse {
    position:absolute;
    width:0px;
}

#startbtn {
    font-size:32px;
    width:270px;
    margin-bottom:2px;
}

#returnlastbtn {
    font-size:32px;
    width:270px;
    margin-bottom:2px;
}

#jscode {
    width:550px;
    height:35px;
    font-size:18px;
    font-family:courier new;
}

.fs18 {
    font-size:18px;
}

#previewblock {
    width:100vw;
    padding-left:50px;
    text-align:left;
}

#buildcontainer { 
    display:inline-block;
    width:720px;
    height:400px;
    position:relative;
    top:0px;
    left:0px;
}
#hostframe {
    margin-top:80px;
    padding-left:50px;
    text-align:left;
}
#testpage {
    width:100vw;
    height:100vh;
    position:relative;
    top-border:solid 1px #aaa;
    border-radius:0px;
}

#blprimarycolor {
    width:70px;
    display:inline-block;
}    
#blsecondarycolor {
    width:70px;
    display:inline-block;
}