@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

html
{
font-size:2em;
}
body
{

}


.theButs
{
position:absolute;
left:0em;
bottom:0;
padding:0.5em;
width:100%;
background:#FF9;
}

.vertical-line{
	display:none;
	position:absolute;
      width: 3px;
      background-color:#0F0;
      height: 100%;
      border-radius: 2px;
	  z-index:998;
	 -webkit-box-shadow: 0px 0px 11px 5px #3DFF0B; 
box-shadow: 0px 0px 11px 5px #3DFF0B;
    }
.horizontal-line{
	display:none;
	position:absolute;
      height: 3px;
      background-color: #0F0;
      width: 100%;
      border-radius: 2px;
	  z-index:998;
	  -webkit-box-shadow: 0px 0px 11px 5px #3DFF0B; 
box-shadow: 0px 0px 11px 5px #3DFF0B;
    }


body,html{font-family: 'Open Sans', sans-serif;}

textarea,input, select {
  resize: none;
  font-family: 'Open Sans', sans-serif;
  font-size:1em;
}


.popup {
    position: absolute;
	padding:1em;
	opacity: 0.95;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	display:none;
	z-index:9999;
    top: 40%;
    left: 50%;
	max-height:40%;
	max-width:40%;
	min-width:10%;
	overflow-y: scroll;
	background:white;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	border:1px black solid;
}
.centered
{
top: 40% !important;
left: 50% !important;
}
.icons {
    position: absolute;
	font-size:1.5em;
    top: 2%;
    right: 2%;
	cursor:pointer;
}



.but
{
padding:5px;
margin-right:5px;
background:#AC8FFD;
-webkit-border-radius: 5px;
color:white;
text-transform:uppercase;
-moz-border-radius: 5px;
border-radius: 5px;
cursor:pointer;
}
.butborder
{border:1px red solid}

.wrapper
{
margin: 35px auto;
background-size:contain;
background-repeat: no-repeat;
background-position: center; 
}

.canvas
{
position:relative;
vertical-align: middle;
text-align: center;
max-width:100%;
max-height:100%;
top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.theImg
{
position:relative;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor:crosshair;
}

.sidebar
{
position:absolute;
z-index:999;
width:25%;
height:100%;
background:grey;
display:none;
padding:10px;
}

body,html
{
padding:0;margin:0	
}



.green{background-color: lawngreen !important;}

.green::before {content: "?";font-size:0.9em}

.dot {
	position:absolute;
	height: 25px;
	width: 25px;
	background-color: red;
	-webkit-box-shadow: 0px 0px 3px 5px #FFF; 
	box-shadow: 0px 0px 3px 5px #FFF;
	border-radius: 50%;
  	display: inline-block;
	z-index:999;
	cursor:pointer;
	animation-name: example;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
@keyframes example {
  0%   {box-shadow: 0px 0px 3px 5px #FFF;}
  25%   {box-shadow: 0px 0px 4px 5px #FF6;}
  50%  {box-shadow: 0px 0px 4px 5px #FF0;}
  75%   {box-shadow: 0px 0px 4px 5px #FF6;}
  100% {box-shadow: 0px 0px 3px 5px #FFF;}
}





.dotsd {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index:999;
  display: inline-block;
  &:before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
  
  &:after {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}