@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap);*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.wrapper{margin-top:15px;width:100%;background:#fff;border-radius:10px}.calDiv{margin-top:15px;width:100%;background:#fff;border-radius:10px;box-shadow:0 15px 40px transparent;border-bottom:1px solid rgba(0,0,0,.03)}.calDiv header{display:flex;align-items:center;padding:20px 25px 10px;justify-content:space-between}.wrapper header{display:flex;align-items:center;padding:20px 25px 10px;justify-content:space-between}header .icons{display:flex}header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.5rem;user-select:none;border-radius:50%}.icons span:last-child{margin-right:-10px}header .icons span:hover{background:#f2f2f2}header .current-date{font-size:1.25rem;font-weight:500}.calendar{padding:5px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center}.calendar .days{margin-bottom:20px}.calendar li{color:#333;width:calc(100% / 7);font-size:1.07rem}.calendar .weeks li{font-weight:500;cursor:default}.calendar .days li{z-index:1;cursor:pointer;position:relative;margin-top:30px}.days li.inactive{color:#aaa}.days li.active{color:#fff}.days li::before{position:absolute;content:"";left:50%;top:50%;height:40px;width:40px;z-index:-1;border-radius:50%;transform:translate(-50%,-50%)}.days li.active::before{background:#9b59b6}.days li:not(.active):hover::before{background:#f2f2f2}.classUL{padding-left:.1rem}.classOL{padding-left:.1rem}.app{display:flex;justify-content:center;align-items:center}.calculator{background-color:#22252d;width:100%;max-width:550px;min-height:340px;display:flex;flex-direction:column;border-radius:1.5rem;overflow:hidden}.display{min-height:140px;padding:1.5rem;display:flex;justify-content:flex-end;align-items:flex-end;color:#fff;text-align:right;flex:1 1 0%}.display .input{font-size:1.25rem;margin-bottom:.5rem}.display .output{font-size:1.5rem;font-weight:700;width:100%;max-width:100%;overflow:auto}.display .operator{color:#eb6666}.display .brackets,.display .percent{color:#26fed7}.keys{background-color:#292d36;padding:1.5rem;border-radius:1.5rem 1.5rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);grid-gap:1rem;box-shadow:0 -2px 16px rgba(0,0,0,.2)}.keys .key{position:relative;cursor:pointer;display:block;height:0;padding-top:100%;background-color:#262933;border-radius:1rem;transition:.2s;user-select:none}.keys .key span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;color:#fff;font-weight:700}.keys .key:hover{box-shadow:inset 0 0 8px rgba(0,0,0,.2)}.keys .key.operator span{color:#eb6666}.keys .key.action span{color:#26fed7}.completed{text-decoration:line-through;color:gray}.completed input[type=checkbox]{text-decoration:line-through;color:gray}.delete-btn{margin-left:5px;padding-left:5px;padding-right:1px}.clock{width:15rem;height:15rem;border:7px solid #282828;box-shadow:-4px -4px 10px rgba(67,67,67,.5),inset 4px 4px 10px rgba(0,0,0,.5),inset -4px -4px 10px rgba(67,67,67,.5),4px 4px 10px rgba(0,0,0,.3);border-radius:50%;margin:2px auto;position:relative;padding:1rem}.outer-clock-face{position:relative;width:100%;height:100%;border-radius:100%;background:#282828;overflow:hidden}.outer-clock-face::after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);transform:rotate(90deg)}.outer-clock-face .marking,.outer-clock-face::after,.outer-clock-face::before{content:'';position:absolute;width:5px;height:100%;background:#1df52f;z-index:0;left:49%}.outer-clock-face .marking{background:#bdbdcb;width:3px}.outer-clock-face .marking.marking-one{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)}.outer-clock-face .marking.marking-two{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);transform:rotate(60deg)}.outer-clock-face .marking.marking-three{-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);transform:rotate(120deg)}.outer-clock-face .marking.marking-four{-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);transform:rotate(150deg)}.inner-clock-face{position:absolute;top:10%;left:10%;width:80%;height:80%;background:#282828;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;z-index:1}.inner-clock-face::before{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:18px;margin-left:-9px;margin-top:-6px;background:#4d4b63;z-index:11}.hand{width:50%;right:50%;height:6px;background:#61afff;position:absolute;top:50%;border-radius:6px;transform-origin:100%;transform:rotate(90deg);transition-timing-function:cubic-bezier(.1,2.7,.58,1)}.hand.hour-hand{width:30%;z-index:3}.hand.min-hand{height:3px;z-index:10;width:40%}.hand.second-hand{background:#ee791a;width:45%;height:2px}#main{height:100%;min-height:74vh;padding-bottom:20px;display:flex;flex-wrap:wrap}.note{width:300px;height:380px;background-color:#fff;margin:8px;margin-top:10px}.tool{width:100%;background-color:#2d3436;color:#fff;padding:5px;display:flex;justify-content:end}.tool i{padding:5px;cursor:pointer}.note textarea{border:none;width:100%;height:92%;resize:none;padding:10px;font-size:14px;background-color:#fbefbf}.note textarea:focus{border:0;outline:0}