@keyframes graduallyEmergingFirst{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes graduallyEmergingAfter{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes graduallyEmergingHide{
  from{opacity:1;}
  to{opacity:0;}
}
@keyframes buttonEffectsSd {
  0%{
    background:#f6f6f6;
  }
  50%{
    background: #c2c2c2;
  }
  100%{
    background:#f6f6f6;
  }
}
@keyframes buttonEffectsSe {
  0%{
    background:#f6f6f6;
  }
  50%{
    background:#c2c2c2;
  }
  100%{
    background:#f6f6f6;
  }
}
.svgNode{
  user-select: none;
  pointer-events: painted;
  opacity: 0;
}
.svgAreaPathLine{
  opacity:0.5;
  stroke-linecap:round;
  fill-rule:evenodd;
  transition: 0.5s;
}
.svgAreaHighlight{
  stroke-width:5px;
  stroke-linecap:round;
}
.svgAreaSelectText{
  font-size:15px;
  text-shadow:1px 1px 1px #343434;
  user-select:none;
  pointer-events:none;
}
.svgLineSelectText{
  font-size:15px;
  text-shadow:1px 1px 1px #737373;
  user-select:none;
  pointer-events:none;
}
.svgCurveSelectText{
  font-size:15px;
  text-shadow:1px 1px 1px #737373;
  user-select:none;
  pointer-events:none;
}
.svgPointSelectText{
  transform:translateX(0px) translateY(-14px);
  font-size:15px;
  text-shadow:1px 1px 1px #737373;
  text-anchor:middle;
  user-select:none;
  pointer-events:none;
}
.svgLineTextPath{
  fill:none;
  user-select:none;
  pointer-events:none;
}
.svgCurveTextPath{
  fill:none;
  user-select:none;
  pointer-events:none;
}
.svgCircleHighlight{
  stroke-width: 2;
  fill: rgba(255,255,255,0.75);
  pointer-events: fill;
}
.svgCircleInner{
  pointer-events: fill;
  fill-opacity: 0.8;
}
.svgLineFillNode{
  stroke-width:1;
  pointer-events:fill;
}
.svgCurveFillNode{
  stroke-width:1;
  pointer-events:fill;
}
.svgLineNodeEffect{
  pointer-events:fill;
  fill:#ffffff;
  stroke:#000000;
  stroke-width:1;
}
.svgCurveNodeEffect{
  pointer-events:fill;
  fill:#ffffff;
  stroke:#000000;
  stroke-width:1;
}
.svgLineVirtualNode{
  stroke-width:1;
  pointer-events:fill;
  fill:#ffffff;
}
.svgCurveVirtualNode{
  stroke-width:1;
  pointer-events:fill;
  fill:#ffffff;
}
.svgPointTempCircle{
  pointer-events: fill;
  fill-opacity: 0.8;
  stroke-width: 1;
}
.svgLineTempPreview{
  fill:rgba(10,10,10,0.2);
  stroke-width:3px;
  stroke:rgba(10,10,10,0.2);
}
.svgCurveTempPreview{
  fill:rgba(0,0,0,0);
  stroke-width:3px;
  stroke:rgba(10,10,10,0.2);
}
.svgLineTempCircle{
  stroke-width:1;
  stroke:#010101;
  pointer-events:fill;
  fill:#ffffff;
}
.svgCurveTempCircle{
  stroke-width:1;
  stroke:#010101;
  pointer-events:fill;
  fill:#ffffff;
}
.svgLineTempMain{
  fill: rgba(255,255,255,0);
}
.svgCurveTempMain{
  fill: rgba(255,255,255,0);
  stroke: rgba(0,0,0,0.5);
  stroke-width: 2px;
}
.svgAreaTempPreviewA{
  stroke: #c8c8c880;
  stroke-width: 3;
  opacity: 0.5;
  stroke-linecap: round;
}
.svgAreaTempPreviewB{
  pointer-events:fill;
  fill-opacity:0.8;
  fill: #C3C3C380;
}
.svgAreaTempMain{
  fill:rgba(255,255,255,0);
}
.svgAreaTempCircle{
  stroke-width: 1;
  stroke: #010101;
  pointer-events: fill;
  fill: #ffffff;
}
.graduallyEmergingFirst{animation:graduallyEmergingFirst 1s forwards;}
.graduallyEmergingAfter{animation:graduallyEmergingAfter 1s forwards;}
/*PO↓*/
.pomeloCM{position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);}
.pomeloCMB{cursor:pointer;-webkit-appearance:none;width:auto;min-width:100px;border-radius:24px;text-align:center;padding:5px 10px;background-color:#7dc5ff;color:#fff;font-size:14px;font-weight:500;-webkit-box-shadow:0 2px 6px -1px rgba(0,0,0,.13);box-shadow:0 2px 6px -1px rgba(0,0,0,.13);border:none;-webkit-transition:all .3s ease;transition:all .3s ease;outline:0;}
.pomeloCMB:hover{background:#289ffe;}
.pomeloCMB:active{background:#ffffff;color:#000000;}
.pomeloCMA{user-select:none;min-width:240px;background-color:white;padding:20px 25px;border-radius:5px;}
.pomeloCMD{width:100%;height:auto;display:flex;flex-direction:row;justify-content:space-around;align-items:center;}
.pomeloCMP{font-size:16px;margin:10px 0 16px 0;color:#5d5d5d;}
/*PO end*/
/*PL↓*/
.pomeloLD-end{
  animation:graduallyEmergingHide 0.5s forwards !important;
}
.pomeloLD{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2000;
  background: #e9e9e9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation:graduallyEmergingFirst 0.5s forwards;
}
.pomeloLDT{
  font-size: 24px;
  font-weight: 800;
  color:#826a67;
  margin: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pomeloLDC{
  font-size: 18px;
  font-weight: 800;
  color:#826a67;
  margin: 14px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pomeloLDR{
  font-size: 14px;
  font-weight: 400;
  color:#826a67;
  margin: 14px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pomeloLDA{
  width: 256px;
  height: 256px;
  animation: floatEarth 5s infinite ease-in-out;
}
.pomeloLD1{
  width: 30px;
  height: 24px;
  animation: JumpingPoints 1.5s infinite ease-in-out;
}
.pomeloLD2{
  width: 16px;
  height: 24px;
  animation: JumpingPoints 1.5s infinite ease-in-out;
}
.pomeloLD1[data-s='1']{animation-delay:0ms;}
.pomeloLD1[data-s='2']{animation-delay:100ms;}
.pomeloLD1[data-s='3']{animation-delay:200ms;}
.pomeloLD1[data-s='4']{animation-delay:300ms;}
.pomeloLD1[data-s='5']{animation-delay:400ms;}
.pomeloLD1[data-s='6']{animation-delay:500ms;}
.pomeloLD1[data-s='7']{animation-delay:600ms;}
.pomeloLD2[data-s='8']{animation-delay:700ms;margin-left: 4px;}
.pomeloLD2[data-s='9']{animation-delay:800ms;}
.pomeloLD2[data-s='10']{animation-delay:900ms;}
.pomeloLD2[data-s='11']{animation-delay:1000ms;}
.pomeloLD2[data-s='12']{animation-delay:1100ms;}
.pomeloLD2[data-s='13']{animation-delay:1200ms;}
@keyframes floatEarth{
  0%{transform: translateY(0px);}
  50%{transform: translateY(-100px);}
  100%{transform: translateY(0px);}
}
@keyframes JumpingPoints{
  0%{transform: translateY(0px);}
  50%{transform: translateY(-10px);}
  100%{transform: translateY(0px);}
}
/*PL end*/
/*PI↓*/
.PomeloInput{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #101010;
}
.PomeloInput-universal{
  width: inherit;
  height: inherit;
  display: inherit;
  flex-direction:inherit;
  justify-content: flex-start;
  align-items: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}
.PomeloInput-bool{
  width: inherit;
  height: inherit;
  display: inherit;
  flex-direction:inherit;
  justify-content: start;
  align-items: center;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}
.PomeloInput-input-list{
  user-select: none;
  width: 92%;
  margin-top:1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  padding: 5px 0px;
  height: 28px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  color: #000;
  font-weight: 400;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.PomeloInput-input-select{
  user-select: none;
  transform: scale(0);
  position: absolute;
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0px 0px 6px #8b8b8b;
  padding: 5px 0px;
  border-radius: 5px;
}
.PomeloInput-input-select-open{
  transition: 0.3s;
  transform: scale(1);
}
.PomeloInput-input-select div{
  cursor: default;
  width: 100%;
  height: 24px;
  margin: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.PomeloInput-input-select div:hover{
  background: #434343;
  color: #ffffff;
}
.PomeloInput-input-select div:last-child{
  color: #1ba903;
}
.PomeloInput-input-select div:last-child:hover{
  background: #1ba903;
  color: #ffffff;
}
.PomeloInput-input{
  width: 92%;
  margin-top:1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  padding: 5px 0px;
  height: 28px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  color: #000;
  font-weight: 400;
  -webkit-appearance: none;
  outline: none;
}
.PomeloInput-input:focus{
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
}
.PomeloInput-cent:focus{
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
}
.PomeloInput-cent{
  width: 80%;
  margin-top:1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  padding: 5px 0px;
  height: 28px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  color: #000;
  font-weight: 400;
  -webkit-appearance: none;
  outline: none;
}
.PomeloInput-per{
  width: 12%;
  margin:1px 0px 0px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  padding: 5px 0px;
  height: 28px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  color: #000;
  font-weight: 400;
  -webkit-appearance: none;
  outline: none;
}
.PomeloInput-input[type='number']{
  text-align: start;
}
.PomeloInput-input[disabled]{
  background-image: url('../InputLockBackground.svg');
  background-repeat: no-repeat;
  background-position: center center;
}
/*PI end*/
/*PFT↓*/
.PomeloFloatBox{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.PomeloFloatTip{
  position: fixed;
  z-index: 570;
  width: 300px;
  height: 80px;
  border: 1px solid #e9e9e9;
  background-color: #fcf2f2;
  color: #d8000c;
  padding: 10px;
  animation: popUpAnimation 3s ease-in-out infinite;
  font-size: 18px;
}
@keyframes popUpAnimation {
  0%{
    opacity:0;
  }
  10%{
    opacity:0;
  }
  40%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
.PomeloFloatSpan{
  padding: 10px 0px 10px 0px;
}
.PomeloFloatTip button{
  font-size: 18px;
  float: right;
  background-color: #fcf2f2;
  color: #d8000c;
  border: none;
  padding: 10px 10px;
  margin-top: 20px;
  border-radius: 5px;
  cursor: pointer;
}
/*PFT end*/
/*rename board*/
.renameClose{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 555;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.26);
}
.renameY{
  width: 400px;
  height: 150px;
  background: rgba(255, 255, 255, 0.84);
  position: fixed;
  z-index: 556;
  border-radius: 15px;
  left: calc(50% - 200px);
  top: calc(50% - 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.renameY input{
  width: 300px;
  height: 30px;
  font-size: 15px;
  padding: 2px 4px;
  outline: none;
  border: none;
  border-bottom: 1px dashed #8e8e8e;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0.84);
}
.renameY input:focus{
  border-bottom: 1px solid #292929;
}
.renameRow{
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  font-size: 16px;
}
.renameButton{
  cursor: pointer;
  -webkit-appearance: none;
  width: auto;
  min-width: 100px;
  border-radius: 24px;
  text-align: center;
  padding: 5px 20px;
  background-color: #7dc5ff;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  -webkit-box-shadow: 0 2px 6px -1px rgba(0,0,0,.13);
  box-shadow: 0 2px 6px -1px rgba(0,0,0,.13);
  border: none;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  outline: 0;
}
.renameButton:hover{
  background: #289ffe;
}
.renameButton:active{
  background: #ffffff;
  color: #000000;
}
/*rename board end*/
/*PDelay start*/
.PomeloDelay{
  position: fixed;
  z-index: 550;
  top: 0px;
  left: 50%;
  font-size: 16px;
  font-weight: 600;
  color: #0BFF05;
  text-shadow: 0px 0px 1px #09A004;
  width: auto;
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.PomeloDelay div{
  margin-left: 7px;
}
/*PDelay end*/