@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

@import url('https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap');

@import url('https://i.icomoon.io/public/temp/ba2428c8f3/UntitledProject/style.css');

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: 'Open Sans', sans-serif;
}
body {
    overflow:hidden;
}
body::-webkit-scrollbar { 
    display: none; 
}
* {
  box-sizing: border-box;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#svg {
  background-color: white;
  border: 0px solid gray;
  width: 100%;
  height: 100%;
}
.VPline{
  stroke-width: 0.6;
   vector-effect: non-scaling-stroke;

}
.left.VPline{

}
.right.VPline{

}
.up.VPline, .down.VPline{

}
.VPcenter{
   fill: white;
}
.horizonLine{

  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.VPbackground{
fill:white;
}
#leftGrid{
}



#movementControlsWrapper{ 
  position:fixed;
  left:40px;
  top:40px;
}
.controllerHandle{
  position:absolute;
  cursor:pointer;
  padding-left:40px;
  padding-right:20px;
  padding-top:40px;
  padding-bottom:30px;
  box-sizing:border-box;
  top:-30px;
  left:-35px;
  border:0px solid;
  text-align:center;
  opacity:.3;
  
}
.controllerHandle.on{
  opacity:.5;
}

.VPswitches{
  display:block;
  border:0px solid red;
}
.gridSettingsLite{
  display:block;
  border:0px solid blue;
  margin-top: 10px;
  font-size:.9em;
}

.controlBox{
  display:inline-block;
  margin-right:10px;
  margin-bottom:0px;
}

.movementControlBox div{
  width:40px;
  float:left;
}
#leftVPctrl{
  margin-left:40px;
}



.moveControl{
  cursor:pointer;
  background-color:#d1dee0;
  padding:5px;
  width:30px;
  box-sizing:border-box;
  text-align:center;
  display:inline-block;
  color:white;
}
.toggleVisibility{
  cursor:pointer;
  padding:10px;
  width:30px;
  text-align:center;
  box-sizing:border-box;
  color:white;
  opacity:.4;
}
.switchDirection{
  cursor:pointer;
  padding:10px;
  width:30px;
  text-align:center;
  box-sizing:border-box;
  color:#d7bfe3;
  opacity:.4;
  background-color:none;
  margin-top:-30px;
  position:absolute;
}
#leftVPctrl .toggleVisibility{
    background-color:#90cee0;
}
#rightVPctrl .toggleVisibility{
    background-color:#edc687;
}
#upVPctrl .toggleVisibility{
    background-color:#d7bfe3;
}



.toggleVisibility.on{
  opacity:1;
}
.switchDirection.on{
  opacity:1;
}


.gridSettingsLite  ul{
  margin-top: 0px;
  margin-bottom:10px;
  border:0px solid #2a82b5;
  padding-inline-start: 40px;
  
}

.gridSettingsLite li{
  list-style:none;
  display: inline-block;
  width:80px;
  background-color: #d1d1d1;
  text-align: center;
  padding:5px;
  box-sizing:border-box;
  margin-right:0px;
  margin-left:0px;
  cursor:pointer;
  opacity:.7;
  color:white;
  font-size:.8em
}
.gridSettingsLite li.on{
  background-color:#7cd9ad;
}

.pageRefresh{
  position:fixed;
  top:40px;
  right:100px;
  padding:10px;
  box-sizing:border-box;
  width:50px;
  font-size:1.5em;
  text-align:center;
  cursor:pointer;
  opacity:.3;
}
.camera{
  padding:10px;
  width:50px;
  font-size:1.5em;
  text-align:center;
  cursor:pointer;
  opacity:.1;
  position: fixed;
  left: 50%;
  top: 50%;
  box-sizing:border-box;
  margin-top:80px;
  transform: translate(-50%, -50%);
}
.helpText.cameraIcon{
  position:fixed;
  bottom:95px;
  right:80px;
  padding:10px;
  text-align:right;
  
}
.donate{
  position:fixed;
  top:100px;
  right:40px;
}
.donate .logo{
  width:30px;
}

.gridSettingsLite li:hover{
  opacity:.9;
}
.hover:hover{
  opacity:.5;
}

.artboardPreview .none{
  width:40px;
}
.artboardPreview .r11{
  width:28px;
}
.artboardPreview .r169{
  width:40px;
}
.artboardPreview .r219{
  width:70px;
}


.gridSettings{
  position:absolute;
  top: 50px;
  left: 40px;
  display:none;
}
.gridSettings input{
  font-size:1em;
  width:40px;
  padding:5px;
  text-align:center;
}
.gridSettings span{
  display:block;
  margin-bottom:5px;
}
.gridSettings label{                                                              
  font-size:.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity:.5;
  margin-left:5px;
  
}

.startAngle{
  margin-top:15px
}






#sliderRange{
  position:fixed;
  width:90%;
  bottom:20px;
  margin:5%;
  box-sizing: border-box;
}

.leftDragger{
  fill:#90cee0;
  opacity:.3;
    cursor:pointer !important;
}

.rightDragger{
  fill:#edc687;
  opacity:.3;
    cursor:pointer !important;
}
.upDragger{
  fill:#e8caed;
  opacity:.3;
    cursor:pointer !important;
}




.controllLeft{
  width:40px;
  height:40px;
  background-color:#90cee0;
  opacity:.3;
  cursor:pointer;
}





.zoomDragger{
  fill:gray;
  opacity:.2;
}

.ui-slider-handle{

  box-sizing:border-box !important;
  width:40px !important;
  height:40px !important;
  margin-top:-15px;
  background:none !important;
  background-color: #7cd9ad !important;
  opacity:.5;
  border: 0px !important;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; /* future proofing */
  -khtml-border-radius: 20px; /* for old Konqueror browsers */
  cursor:pointer !important;
  color:white  !important;
  text-align:center;
  padding-top:12px;
}
.ui-slider-handle.ui-state-focus{
  outline-width: 0px;
}

.ui-slider-horizontal {
    height: 1px;
}

.ui-slider-range{
  background:none !important;
}
#mainGrid{
  cursor:pointer;
}



.VPhelp{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; /* future proofing */
  -khtml-border-radius: 20px; /* for old Konqueror browsers */
  cursor:pointer;
  border:2px solid black;
  color:black;
  padding-top:5px;
  padding-bottom:10px;
  width:40px;
  height:40px;
  text-align:center;
  font-size:1.2em;
  position:fixed;
  top:40px;
  right:40px;
  opacity:.3;
  font-weight:bold;
}
.VPhelp.on{
  color:#2a82b5;
    border-color:#2a82b5;
  opacity:1;
}
.strokeWeight{
  display:inline-block;
}
.gridWeight{
  display:inline-block;
}
.artboardPreview{
   display:inline-block;
}
.helpText{
  display:inline-block;
  font-family: 'Architects Daughter', cursive;
  color:#2a82b5;
  font-size: 18px;
  text-transform: uppercase;
  margin-left:5px;
  margin-top:-10px;
  border :0px solid black;
  height:20px;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */  
  text-align:left;
  line-height:1.3em;
}

.VPswitches .helpText{
  position: absolute;
  margin-top:8px !important;
  width:500px;
}
.VPswitches .switchDirection .helpText{
  position: absolute;
  margin-top: 0px !important;
  width:350px;
}

.helpText.controllerHandleHelp{
  position:absolute;
  left:-146px;
  top:190px;
  transform: rotate(90deg);
  
}

.leftVpDrag{
  width:40px;
  height:40px;
  background-color:red;
  position: absolute;
  left:500px;
  top:300px;
}

.artboard{
  outline-style:solid;
  outline-width:1000px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing:border-box;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity:.3;
}
.artboard span{
  font-size:.7em;
  position:absolute;
  left:10px;
  bottom:8px;
}

.helpText.vphandles, .helpText.gridhandles{
  position: fixed;
  left: 50%;
  top: 50%;
  box-sizing:border-box;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align:center;
  
}

.helpText.vphandles{
  margin-top:120px;
  margin-left:-1px;
  width:100%;
}
.helpText.gridhandles{
  left: 50%;
  top: 80%;

}

#capture{
  border:1px solid black;
  position:fixed;
  top:500px;
  left:100px;
  width:400px;
  height:200px;
}

#img-out{
  border:1px solid black;
  position:fixed;
  top:500px;
  left:500px;
  width:400px;
  height:200px;
}

.screenshotInstructions{
  font-family: 'Open Sans', sans-serif;
  display:block;
  font-size:12px;
  text-transform: none;
  margin-top:20px;
  color:gray;
  line-height:1.4em;
}
.screenshotInstructions strong{
  color:#2a82b5;
}


#screenshot{
  border:0px solid;
  position: fixed;
  left: 50%;
  top: 50%;
  box-sizing:border-box;
  transform: translate(-50%, -50%);
  background-color:white;
  object-fit:contain;
  display:block;
/*
-webkit-box-shadow: 0px 2px 43px 2px rgba(0,0,0,0.59);
-moz-box-shadow: 0px 2px 43px 2px rgba(0,0,0,0.59);
box-shadow: 0px 2px 43px 2px rgba(0,0,0,0.59);
  */

}
.overlay{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  opacity:.8;
  background-color:black;
}
#screenshot .data{
  position:absolute;
  left:0px;
  top:-45px;
  color:white
}
#screenshot .data .instructions{
  opacity:.5;
  font-size:.8em;
  display:block;
}
#screenshot.wide{
    width:80%;
}
#screenshot.tall{
    width:700px;
}
#screenshot.portrait{
    width:90%;
}

#screenshot canvas{
display:none;
}

#screenshot img{
  width:100%;
}
#screenshot .close{
  position:absolute;
  top:-20px;
  right:-20px;
   -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; /* future proofing */
  -khtml-border-radius: 20px; /* for old Konqueror browsers */
  cursor:pointer;
  color:white;
  padding-top:10px;
  padding-bottom:10px;
  width:40px;
  height:40px;
  text-align:center;
  font-size:1.2em;
  background-color:#ff8080;
  
}
#canvas, #canvasCrop{display:none;}

.winData{
  position:fixed;
  top:300px;
  display:none;
}
.winData li{
  list-style:none;
}
#VPdata{
  display:none;
  position:fixed;
}