/* ubuntu-mono-regular - latin */
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-mono-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
       url('../fonts/ubuntu-mono-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ubuntu-mono-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ubuntu-mono-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ubuntu-mono-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ubuntu-mono-v9-latin-regular.svg#UbuntuMono') format('svg'); /* Legacy iOS */
}

:root{
  --main-bg-color:white;
  --main-color:white;
  --main-highlight:#F5D80C;
  --main-shadow:2px 2px 3px grey;
  --main-lightgreen:rgba(136,255,204,.9);
  --nice-blue: rgba(143,206,238,.3);
  --name-pink:rgba(255,192,202,.7);
  --dot-blue:rgba(143,206,238,1);
  --dot-pink:rgba(255,192,202,1);
  --dot-yellow:rgb(245,216,12,.4);
  --dot-green:rgba(136,255,204,1);
  --random-turn: 10deg;

}
html,
body,
a {
  margin: 0px;
  font-family: 'Ubuntu Mono', monospace;
  /* background-color: #e9e4d7; */
  font-size: 16px;

}
#screen-shader{
  transition: opacity 0.1s ease 0s;
  z-index: 2147483647;
  margin: 0;
  border-radius: 0;
  padding: 0;
  background: #c5b791;
  /* background:var(--nice-blue); */
  pointer-events: none;
  position: fixed;
  top: -10%;
  right: -10%;
  width: 120%;
  height: 120%;
  opacity: .1;
  mix-blend-mode: multiply;
  display: block;
}
canvas {
  position:relative;
  z-index: -1;
    }

#all{
display:block;
}

#particle {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
#button {
  position:absolute;
  top:100px;
  left:100px;
  padding: 10px;
}
#rightside{
    box-sizing: border-box;
  	/* background: #faf9f1; */
    background:var(--main-highlight);
    /* font-size: 0; */
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    width: 0vw;
    z-index: 400;
    border-bottom:1px solid #eee;

    transition: width .5s;
  	-webkit-transition: width .5s;
}

#rightside.open {
	width: 15vw;
}
#leftmenu{
  width:300px;
  display: block;
  position: fixed;
  /* margin:10px; */
  top:0;
  right:0;
  z-index: 200;
  text-align: right;
}
.navwrap{
  display: grid;
  overflow: visible;
  width:100%;
  cur
  /* margin:10px; */
}
#navslide{
  display: grid;
    box-sizing: border-box;
  	/* background: #faf9f1; */
    /* background:white; */
    /* font-size: 0; */
    height: 80px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 20;
    width: 0vw;
    z-index: 0;
    /* border-bottom:1px solid #eee; */
    transition: width .5s;
  	-webkit-transition: width .5s;
}

#navslide.open {
  width: 340px;
}

#leftnav{
  width: 80vw;
}
#rightmenu{
  margin-right:20px;
  padding-left:5px;
  padding-right:5px;
  padding-bottom:1px;

}

#rightMenuTop{
  /* border-bottom: 1px solid black; */
  /* border-left: 1px solid black; */
  box-sizing: border-box;
  height: 50vh;
  overflow: hidden;
  padding: 20px;
  position: relative;
  width: 50vw;
}
#rightMenuBottom{
    /* background: #e9fafb; */
    /* border-left: 1px solid black; */
    box-sizing: border-box;
    float: left;
    font-size: 10pt;
    height: 50vh;
    overflow: hidden;
    /* padding: 20px; */
    position: relative;
    width: 50vw;
}

.signwrap{

  display: inline-flex;
  position: fixed;

  /* bottom: 21px; */
  /* right: 21px; */
  z-index: 200;
  width:auto;
}
#signature{
  position: fixed;
  display: flex;
  bottom: 16px;
  right:21px;
  z-index: 200;
  padding-bottom:1px;

  cursor: pointer;
  user-select: none;
  background-color: var(--nice-blue);

}
#signature:hover{
  background-color: var(--main-lightgreen);
}
#boardstatus{
  position: fixed;
  display: flex;
  top: 21px;
  right:5px;
  z-index: 200;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom:1px;
  margin-right: 21px;

  cursor: pointer;
  user-select: none;
  background-color: var(--nice-blue);
}
#boardstatus:hover{
  background-color: var(--main-lightgreen);
}
#info{
  position: fixed;
  display: flex;
  bottom: 16px;
  left:21px;
  z-index: 200;
}

#select{
    border: 1px dotted #000;
    position: absolute;
    z-index: 200;
}

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 2px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;

}
.radio-item label {
  color: #666;
  font-weight: normal;
  cursor: pointer;

}

.radio-item:nth-child(1) label:before{
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  margin: 0 5px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  border: 2px solid var(--nice-blue);
  background-color: transparent;
}
.radio-item:nth-child(2) label:before{
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  margin: 0 5px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  border: 2px solid var(--name-pink);
  background-color: transparent;
}
.radio-item:nth-child(3) label:before{
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  margin: 0 5px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  border: 2px solid var(--main-highlight);
  background-color: transparent;
}
.radio-item:nth-child(4) label:before{
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  margin: 0 5px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  border: 2px solid var(--main-lightgreen);
  background-color: transparent;
}
  #cyan:checked + label:after {
    border-radius: 11px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    content: " ";
    display: block;
    background: var(--nice-blue);
  }


  #magenta:checked + label:after {
    border-radius: 11px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    content: " ";
    display: block;
    background: var(--name-pink);
  }
  #yellow:checked + label:after {
    border-radius: 11px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    content: " ";
    display: block;
    background: var(--main-highlight);
  }
  #green:checked + label:after {
    border-radius: 11px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    content: " ";
    display: block;
    background: var(--main-lightgreen);
  }

form{
  margin-top:0;
  margin-bottom: 10px;
}

.dotcyan{
  display:none;
  background-color: var(--dot-blue);
  z-index: 200;
  margin-left: 5px;
  margin-right: 5px;

  margin-bottom: 1px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}
.dotpink{
  display:none;
  background-color: var(--dot-pink);
  z-index: 200;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 1px;
  height: 5px;
  width: 5px;
  border-radius: 50%;

}
.dotyellow{
  display:none;
  background-color: var(--dot-yellow);
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 1px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}
.dotgreen{
  display:none;
  background-color: var(--dot-green);
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 1px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.legend{
  /* font-style: normal;
  font-weight: 700; */

  user-select: none;
  position:fixed;
  display: block;
  bottom:21px;
  left:21px;
  overflow: hidden;
}
.legend div{
   float:left;
   margin-right: 10px;
   cursor: pointer;
}
.legend div:hover{
text-decoration: underline;
}
#lgdBlue{
  display:inline-block;
  background-color:var(--dot-blue);
  margin-right: 5px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
#lgdPink{
  display:inline-block;
  background-color:var(--dot-pink);
  margin-right: 5px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
#lgdYellow{
  display:inline-block;
  background-color:var(--dot-yellow);
  margin-right: 5px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
#lgdGreen{
  display:inline-block;
  background-color:var(--dot-green);
  margin-right: 5px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

#imgmixit{
  cursor:pointer;
  width:22px;
  top:19px;
  /* right:160px; */
  height:auto;
  position: fixed;
  /* padding-right: 230px; */
  z-index: 999;
 transition: rotate(0deg) 2s;
background-color: var(--nice-blue);
}

#imgmixit:hover{
  /* transition: 300ms ease all;
  transform: rotate(30deg); */
  background-color: var(--main-lightgreen);
  background-blend-mode: hue;
}

#mixIt{
  cursor: pointer;
  /* user-select: none; */
  /* background-color: var(--main-color); */
  /* z-index: 200; */
  margin-right: 32px;
  /* margin-left:30px; */
  /* width:auto; */

}
#mixIt:hover{
  background-color: var(--main-lightgreen);
}

#lock{
  cursor: pointer;
  margin-left: 2px;
  margin-top:1px;
  user-select:none;
}

#m-nav{
  display: flex;
  position: fixed;
  bottom: 15px;
  left: 25px;
  z-index: 200;
  width:100%;
  /* justify-content: flex-start; */
}
#m-nav * {
    /* padding-right: 30px; */
    background-color:var(--nice-blue);
    cursor: pointer;
    user-select: none;
}

#m-textArr {

  margin-right:25px;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:1px;
}
#m-textArr:hover{
  background-color: var(--main-lightgreen);
}
#m-borrow{
  margin-right:22px;
  padding-left:5px;
  padding-right:6px;

}
#m-clear{
  padding-left:2px;
  padding-right:2px;
}
#m-temp{
  position: fixed;
  display: flex;
  bottom: 15px;
  right:5px;
  background-color:var(--nice-blue);
  z-index: 200;
  padding-left:3px;
  padding-right:3px;

}

.leftbar{
  display: flex;
  position: fixed;
  top: 21px;
  left: 20px;
  z-index: 200;
  width:100%;
  /* justify-content: space-around; */
}
#hide{
  width:300px;

  display: flex;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  /* width:100%; */
  max-height: 18px;
  top: 21px;
  left: 20px;
  /* width:100%; */

}

#hide div{
  cursor: pointer;
  user-select: none;
  background-color:var(--nice-blue);
  z-index: 200;
}

#hide div:hover{
    background-color: var(--main-lightgreen);
}
#noteCopy{

  display:block;
  position: fixed;
  background:white!important;
  z-index: 3500;
  top:60px;
  left:20px;
  padding: 5px;
  border: 1px solid black;
  animation: fadeOut 4s forwards;
  -webkit-animation: fadeOut 4s forwards;

}
@keyframes fadeOut {
   0% {opacity: 0%;}
   4%{opacity: 100%}
   20%{opacity:100%}
   100% {opacity: 0%;}

}

#navbutton {
  color: thistle;
  display: flex;
  position: fixed;
  top: 20px;
  left: 0px;
  /* margin-right: 20px; */
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 1px;
  z-index: 250;
  cursor: pointer;
  padding-top: 3px;
}
#navbutton:hover{
color:black;}

#textArr {
  margin-right:20px;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:1px;
}

#title {

  margin-right:2px;
  padding-bottom:1px;
}

#borrow{

  margin-right:20px;
  padding-left:6px;
  padding-right:6px;

}

.navthing{
  margin:0px 0px 0px 0px;
  padding:10px;
  height:20px;
  position:fixed;
  display:block;
  width: 100%;
  margin-left: auto;
  background-color: white;
  z-index: 150;
}
#empty {
  display: grid ;
  margin-right: 20px;
  padding-left:9px;
  padding-right:9px;
}

#export {
  margin-right: 21px;
  padding-left:10px;
  padding-right:10px;
}

#infoS{
  /* margin-right: 20px; */
  bottom:20px;
  right:20px;
}

.selectable{
  background-color: rgba(55, 151, 252, .5) !important;
  /* padding-bottom: 3px; */
}

.all{
  min-width: auto;
  max-height:10px;
  width:auto;
  display:block;
  white-space: nowrap;
  cursor:default;
}

.box {

  font-size: inherit;
  position: absolute;
  cursor: pointer;
  background-color: var(--main-color);
  user-select: none;
  min-width: auto;
  white-space: nowrap:
  /* animation:; */
  /* -webkit-animation: fade 1.5s cubic-bezier(0.1, 0.7, 1.0, 0.1); */
  /* -moz-animation:    fade 1.5s cubic-bezier(0.1, 0., 1.0, 0.1);
  -o-animation:         fade 1.5s cubic-bezier(0.1, 0.7, 1.0, 0.1); */
  /* animation:            fade 1s forwards ease-out; */

}
.box:hover {
  box-shadow: 2px 2px 3px grey;

}
.box:active {
  box-shadow: 2px 2px 3px grey;

  /* transform: rotate(33deg); */
}
.box:focus {
  box-shadow: 2px 2px 3px grey;
  transform: rotate3d();

}
.titles{
  -webkit-animation:fade 1.5s linear forwards;
  animation-name:fade 1.5s linear forwards;

  position: absolute;
  cursor: pointer;
  background-color:var(--main-highlight);
  animation: fade 1.5s linear forwards;
  user-select: none;
  min-width: auto;
  white-space: nowrap:
  -webkit-animation: fade 1.5s; /* Safari 4+ */
  -moz-animation:    fade 1.5s; /* Fx 5+ */
  -o-animation:      fade 1.5s; /* Opera 12+ */
  animation:         fade .5s;
}
#clrdot{
  display:inline-block;
  /* background-color:var(--name-pink); */
  margin-left: 5px;
  margin-bottom: 1px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
}
#legDot{
  margin-left: 2px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

@keyframes fade {
  /* 0%   {background-color: lightblue;opacity:0.2;transform: translate(-20px);}
  100% { background-color: var(--main-color);opacity:1;transform: translate(0px);} */
  /* 0%   {background-color: lightblue;}
  100% { background-color: var(--main-color);} */

  0%   {background-color: lightblue;}
  100% { background-color: var(--main-color);transform: translate(0px);}


}
@keyframes slide {
  /* 0%   {background-color: lightblue;opacity:0.2;transform: translate(-20px);}
  100% { background-color: var(--main-color);opacity:1;transform: translate(0px);} */
  /* 0%   {background-color: lightblue;}
  100% { background-color: var(--main-color);} */

  0%   {transform: rotate(20deg);}
  100% {transform: translate(0px);}

}
@keyframes fadeout {
  0%   {background-color: var(--main-color);}
  100% { background-color: pink;}
}
@-webkit-keyframes fade {
  0%   {background-color: lightblue;}
  100% { background-color: var(--main-color);}
}

#drgdrp{
user-select: none;
cursor: default;
}


button{
font:inherit;
border: none;
/* border: 1px solid black; */
background-color: var(--nice-blue);
/* color: white; */
padding: 2px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
/* font-size: 16px; */
margin: 10px 20px 10px 20px;
cursor: pointer;
user-select: none;

}

button:hover{
  background-color: var(--main-lightgreen);
  /* box-shadow: 2px 2px 3px grey; */

}
/* The Modal (background) */

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
/* padding-top: 32vh; /* Location of the box */ */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,80,150,0.2); /* Fallback color */
/* background-color: rgba(0,0,0,0.2); /* Black w/ opacity */ */
}
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 0; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,80,150,0.2); /* Fallback color */
/* background-color: rgba(0,0,0,0.2); /* Black w/ opacity */ */
}


/* Modal Content */
.modal-content {
  position: absolute;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* for IE 9 */
  -webkit-transform: translate(-50%, -50%); /* for Safari */
  left: 50%;
  top: 50%;
  background-color: #fefefe;
  margin: auto;
  padding: 5px 10px 5px 10px;
  border: 1px solid #888;
  width: 410px;
  text-align: center;
}
.modal-content2 {
  position: absolute;
  /* display: grid; */
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* for IE 9 */
  -webkit-transform: translate(-50%, -50%); /* for Safari */
  left: 50%;
  top: 50%;
/* position:relative; */
/* word-wrap: break-word; */
background-color: #fefefe;
/* margin: auto; */
padding: 5px 10px 5px 13px;
border: 1px solid #888;
width: 200px;
height:auto;
text-align: center;
/* top:30vh; */
}

#importInput{
  background-image: linear-gradient(transparent, transparent calc(3ch - 2px), var(--nice-blue) 1px);
  background-size: 100% 3ch;
  font-size: inherit;
  font: inherit;
  width:350px;
  height:150px;
  resize: none;
  /* height:30%; */
  /* border:0px; */
  outline:0px;
  border:none;
  -webkit-border:none;
  margin: 5px 5px 0px 5px;
  line-height: 3ch;
  scrollbar-width: none;

  /* justify-content: center */
}
.divTest{
  position:relative;
  background-image: linear-gradient(transparent, transparent calc(3ch - 2px), var(--nice-blue) 1px);
  background-size: 100% 3ch;

}
#importInput::-webkit-scrollbar {
    display: none;
}
#importInput2{
  font-size: inherit;
  font: inherit;
  width:auto;
  top:50%;

  /* height:350px; */
  resize: none;
  outline:0px;
  border: 1px;
  -webkit-border:1px;
  margin: 5px 5px 5px 5px;
  line-height: 3ch;
  scrollbar-width: none;
  text-align: left;
}
#importInput2::-webkit-scrollbar {
    display: none;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}