@keyframes linearPlay{
  from{
    width:1px;
    height:20px;
    margin-bottom: 12px;
    border-radius: 0px;
    background-color: lavender;
  }
  to{
   width:100px;
   height:150%;
   margin-bottom: 0px;
   border-radius: 12px;
   background-color: rgb(218, 191, 191);
  }
}

@keyframes shake{
   from{
      transform: 0deg;
   }
   to{
      transform: 360deg;
   }
}



.blocklyFlyoutBackground {
   fill:darkgrey;
   transition-property: all;
   transition-duration: 1s;
}
.blocklyFlyout{
   opacity: .9;
   backdrop-filter: blur(8px);
}


.blocklyToolboxDiv{
   background-image: linear-gradient(0deg,rgba(154, 237, 226, 0.729),rgb(231, 192, 230),rgba(154, 223, 202, 0.844));
   background-color: rgb(210, 181, 181);
   height:100%;
   border-bottom-left-radius: 9px;
   backdrop-filter:blur(6px) grayscale(20%);
   opacity: .9;
}
.blocklyCheckbox{
   fill:#edbc0c
}

.blocklyScrollbarHandle{
  fill: rgb(168, 220, 202);
}

button{
   background-color: rgb(207, 173, 62);
   border-color: cornflowerblue;
   border-style: groove;
   border-radius: 8px;
   box-shadow: 0 0 2px 1px lightblue,0 0 ;
}
.blocklyFlyout{
   transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.blocklyPath{
  transition: all 0.2s cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: 1px 2pt 34px 8px lemonchiffon;
}
.blocklyOutlinePath{
   box-shadow: 2px 1px 30px 8px lightseagreen;
}
.blocklyHtmlInput{
   box-shadow: 9px 2px 30px 4px rgb(137, 239, 239);
   transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
   text-shadow: 2px 0px 5px sandybrown;
   background-color: lightblue;
   font-weight: bold;
}

.blocklyPath:hover{
   filter:grayscale(80%) blur(0.1px)
}

#save{
   position: absolute;
   left:10px;
   top:30px;
   z-index:999;
   transition: all 2s linear;
}

#saves{
   position: absolute;
   left:10px;
   top:50px;
   z-index:999;
}

#close{
      position: absolute;
      left:10px;
      top:70px;
      z-index:999;
}

.blocklyToolboxDiv{
   left:0px;
   top:12px;
}

.blocklyContextMenu{
   height:150%;
   animation-name: linearPlay;
   animation-duration: 0.2s;
   animation-timing-function:ease-in-out;
   background-color: rgb(141, 10, 10);
   color:aqua;
}

.blocklyContextMenu:hover{
   background: rgb(218, 210, 210) ;
}
.blocklyMenuItem:hover{
   color:rgb(234, 190, 190);
   background-color: rgb(222, 62, 62);
   text-shadow: 2px 1px 29px 6px rgb(71, 255, 255);
}
.blocklyDraggable{
   transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   box-shadow: 0px 1px 12px 5px lightblue;
}

.blocklyFlyout{
   animation: 'linears' 900ms cubic-bezier(0.77, 0, 0.175, 1);
}

.swal-title{
   text-shadow: 2px 1px 5px lightblue,0px 1px 4px rgb(154, 101, 197),2px 0px 6px rgb(196, 107, 107);
   transition: all 1s cubic-bezier(0.23, 1, 0.320, 1);
   color:rgb(17, 255, 17)
}

.swal-text{
   color:rgb(64, 212, 64);
   text-shadow: 2px 1px 5px rgb(32, 124, 155),0px 1px 4px rgb(131, 59, 189),2px 0px 6px rgb(196, 107, 107);
   transition: all 1s cubic-bezier(0.23, 1, 0.320, 1);
   font-weight: 700;
}

.swal-modal{
   box-shadow: 6px 3px 20px 2px rgb(178, 210, 209),5px 4px 19px 3px rgb(205, 179, 73),2px 5px 28px 4px rgb(195, 245, 195);
   background-color: rgba(81, 142, 142, 0.762);
}

.swal-icon--error__x-mark{
   animation-timing-function: ease-in-out;
   animation-fill-mode: both;
   animation-duration: 0.7s;
}

.swal-icon{
   border-radius:60%;
   border-width: 6px;
   border-style: double;
}

.swal-button--confirm{
   background-image: linear-gradient(-90deg,rgb(61, 153, 224),rgb(79, 224, 79));
   text-shadow: 13px 13px 12px #edbc0c;
   border-radius: 8px;
}
.blocklyWorkspace{
   scale:1;
}


.blocklyText{
   max-width: 100%;
   text-overflow: ellipsis;
   display: block;
   font-size: 15px !important;
   fill: aliceblue !important;
}

.blocklyEditableText > .blocklyText{
  fill:black !important
}

.blocklyMenu::-webkit-scrollbar{
   height: 5px;
   width: 5px;
   background-color: whitesmoke;
   border-radius: 3px;
}

.blocklyMenu{
   scrollbar-color: whitesmoke;
   scrollbar-width: 5px;
}