@import url('https://fonts.googleapis.com/css?family=Handlee');

.noteHolder {
  position:fixed;
  display:inline-block;
 width: 12em;
  height: 12em;
  font-family: 'Handlee', cursive;
  margin:15px;
  cursor: all-scroll;
  z-index:6000;
  overflow:hidden;
/*  box-shadow: 0px 0px 10px 2px #00000010; */
}
.posAbsolute{
  position: absolute !important;
}
.noteHolder input[type="checkbox"] {
  position:absolute;
  z-index:0;
  width:12em;
  height:12em;
  opacity:0;
  cursor:pointer;
  marign:0;
  padding:0;
}

.noteHolder .saveNote{
  width: auto !important;
  padding: 0 5px;
}

.note {
  position: relative;
  width: 100%;
  height: 100%;
  color: #4c4e67;
  background: #f1e000;
  overflow: hidden;
  padding:0;
  font-size:16px;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff0 #fff0 #ffffffe6 #ffffffe6;
  background: #fff;
  -webkit-box-shadow:0px 0px 15px 4px #0c0f4180;
  -moz-box-shadow: 0px 0px 15px 4px #0c0f4180;
  box-shadow: 0px 0px 15px 4px #0c0f4180;
  /* Firefox 3.0 damage limitation */
  display: block; 
  width: 0;
}
.note.rounded {
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 36px 5px 5px;
}

.note.rounded:before {
  border-width: 12px;
  border-color: #fff #fff transparent transparent;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
  transition: border .4s ease-in;
}
#fold1:checked + .note.rounded::before
{
  border-width: 100px;
  box-shadow:none;
  animation: folding .4s;
  animation-delay: .4s;
}
/* @keyframes folding{
  0%{
    border-color: #fff #fff transparent transparent;
  }
  40%{
    border-color: #fff #fff #fff transparent;
  }
  100%{
    border-color: #fff;
  }
} */
.note textarea
{
  border:none;
  background-color:transparent;
  width:100%;
  height:100%;
  resize: none;
  font-family: 'Handlee', cursive;
  margin:0px;
  padding:10px;
  color: #2e2f3c;
  font-size:16px;
  padding-top: 30px;
}
.note textarea:focus
{
  outline:none;
}
.btn
{
  box-shadow:none;
  cursor:pointer;
}
.btn:focus
{
  outline:none;
}
.btn-edit
{
  background-color:#fff;
  border:none;
  color:#1c7fff;
  padding:0px;
  margin: 5px 2px;
  width:30px;
  height:30px;
  border-radius:50%;
  box-shadow: 0px 0px 10px 5px #0c0f411a;
}
.btn-del
{
  background-color:#fff;
  border:none;
  color:#fd1f1f;
  padding:0px;
  margin: 5px 2px;
  width:30px;
  height:30px;
  border-radius:50%;
  box-shadow: 0px 0px 10px 5px #0c0f411a;
}
.noteHolder .action
{
  position: absolute;
  right: 0px;
  left: 0;
  top: 0px;
  text-align:left;
  padding: 0 5px;
  transition: all  .4s;
}
.noteHolder .btn{
  box-shadow: none;
  border-radius: 3px;
  margin-top: 7px;
  height: 23px;


}
.colors
{
  display:flex;
  width:100%;
  height:0px;
  padding:0px;
  background-color:#fff;
  flex-wrap:wrap;
  transition: height .3s;
}
.colors.act
{
  height:30px;
  padding: 5px 0;
  box-shadow: 0px 0px 10px 5px #0c0f411a;
}
.colors div
{
  display:block;
  flex:1;
  height:100%;
  margin: 0 5px;
  cursor:pointer;
}
.colors div:first-child,.note.note-yellow
{
  background-color:#f1e000;
}
.colors div:nth-child(2),.note.note-green
{
  background-color:#63d816;
}
.colors div:nth-child(3),.note.note-levendor
{
  background-color:#bb38f5;
}
.colors div:last-child,.note.note-orange
{
  background-color:#f18e00;
}
.btn-note-add
{
  width:50px;
  height:50px;
  border-radius:50%;
  border:none;
  background-color:#6039e0;
  color:#fff;
  position:fixed;

  box-shadow: 0px 0px 0px 4px #6039e066;
  animation: pulse 2s infinite;
  z-index: 9;
}

#add-note{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
   background-color:#e10707;
  color:#fff;
  width:70px;
  height:70px;
  box-shadow: 0px 0px 0px 4px #6039e066;
  animation: pulse 2s infinite;
  border-radius:50%;
  font-weight: bold;
}
.swal2-container.swal2-shown{
  z-index: 999999;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(96,57,224, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(96,57,224, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(96,57,224, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(96,57,224, 0.4);
    box-shadow: 0 0 0 0 rgba(96,57,224, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(96,57,224, 0);
      box-shadow: 0 0 0 10px rgba(96,57,224, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(96,57,224, 0);
      box-shadow: 0 0 0 0 rgba(96,57,224, 0);
  }
}