.calculator__operation-button,.calculator__digit-button{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;border-radius:5px;border:1px rgb(63,59,59) solid;transition:all .1s linear;background:#fff}.calculator__row-1,.calculator__row-2,.calculator__row-4{padding:5px;box-shadow:var(--rows-shadow);border-radius:5px;display:flex;align-items:center;width:100%;color:#fff;background:var(--rows-background);transition:all .1s linear}.calculator__row-1:not(:last-child),.calculator__row-2:not(:last-child),.calculator__row-4:not(:last-child){margin-bottom:16px}.calculator{position:relative;display:flex;flex-direction:column;padding:10px;width:260px;border-radius:5px;background-color:#08000023}.calculator__row-1{cursor:pointer;height:60px;justify-content:right}.calculator__row-2{height:56px;justify-content:space-between}.calculator__operation-button{cursor:pointer;padding:13px 21px;color:#000;background-color:var(--background-color)}.calculator__operation-button:hover{border:1px var(--background-color) solid}.calculator__row-3{box-shadow:var(--rows-shadow);border-radius:5px;padding:5px;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px;background:var(--rows-background);transition:all .2s ease-in}.calculator__digit-button{cursor:pointer;padding:14px 21px;color:#000;background-color:var(--background-color)}.calculator__digit-button:hover{border:1px var(--background-color) solid}.calculator__row-4{cursor:pointer;min-height:72px;height:72px}.calculator__evaluate{width:100%;height:100%;border:none;border:1px rgb(63,59,59) solid;font-size:20px;border-radius:5px;transition:all .1s linear;display:flex;justify-content:center;align-items:center;color:#000;background-color:var(--background-color)}.calculator__evaluate:hover{border:1px var(--background-color) solid}.calculator__output{background-color:var(--background-color);border:1px rgb(63,59,59) solid;padding:0 2px;border-radius:5px;overflow:hidden;height:100%;width:100%;color:#000}.calculator__previous-operand{padding-top:2px;color:#333;font-size:15px;margin-bottom:5px;text-align:right;height:14px}.calculator__current-operand{font-size:25px;font-weight:600;text-align:right;height:30px}.calculator__current-operand.operand--small{font-size:16px}.drop-over{transition:all .1s ease-in;box-shadow:0 0 8px 4px #eaf9ffbd}.disable{opacity:20%}.calculator__row.calculator__row-1.disable .calculator__previous-operand,.calculator__row.calculator__row-1.disable .calculator__current-operand{display:none}.calculator__digit-button.hover-btns-off,.calculator__operation-button.hover-btns-off,.calculator__evaluate.hover-btns-off{border:1px rgb(63,59,59) solid;box-shadow:none;background-color:var(--background-color)}.calculator__row.drag-start{opacity:60%}.calculator__row.calculator__row-1.drop-over>*,.calculator__row.calculator__row-2.drop-over>*,.calculator__row.calculator__row-3.drop-over>*,.calculator__row.calculator__row-4.drop-over>*{pointer-events:none}.field{position:relative}.buttons{position:absolute;width:100%;top:-70px;border-radius:5px;display:flex;gap:10px;height:38px;padding:1px 2px}.buttons__item{cursor:pointer;height:90%;margin:auto 0;flex:1 1;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:14px;font-weight:500;border:1px rgb(237,249,253) solid;transition:all .1s linear}.buttons__item.buttons__active .buttons__icon{fill:#000;stroke:#000}.buttons__item.buttons__active .buttons__button{color:#000}.buttons__item:hover{border:1px rgb(237,249,253) solid;box-shadow:0 0 10px 2px #ecececc9}.buttons__item.buttons__active:hover{box-shadow:none}.buttons__icon{fill:#fff;stroke:#fff}.buttons__button{border:none;padding:3px 10px;color:#fff}.buttons__active{background:#fff}.canvas{padding:15px;width:269px;height:498px;border:2px dashed rgba(253,253,253,.2196078431);border-radius:6px;display:flex;justify-content:start;align-items:center;flex-direction:column}.canvas__inner{padding-top:200px;display:flex;flex-direction:column;justify-content:center;align-items:center}.canvas__icon{fill:#fff;width:20px;height:20px;margin-bottom:10px}.canvas__text-1{text-transform:uppercase;color:#fff;font-size:14px;font-weight:500;margin-bottom:10px}.canvas__text-2{color:#fff;font-size:12px;font-weight:400;line-height:15px;text-align:center}.canvas__droppable-1{width:100%;height:60px;margin-bottom:16px}.canvas__droppable-2{width:100%;height:56px;margin-bottom:16px}.canvas__droppable-3{width:100%;height:241px;margin-bottom:16px}.canvas__droppable-4{width:100%;height:72px;margin-bottom:16px}.drag-start{transition:all .1s linear;background-color:#f4f4f513}.app{position:relative;padding:100px 100px 40px;width:870px;background:#fff;display:flex;justify-content:space-between;align-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);flex-wrap:wrap;background:#ffffff0f;border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)}.app__tips{margin-top:60px;color:#edf9fd}.app__tips-icon{cursor:pointer;position:absolute;bottom:145px;left:217px;width:25px;height:25px;fill:#edf9fd;border-radius:50%}.app__tips-icon:hover{fill:#fff;box-shadow:0 0 4px 2px #ecececc9}.app__tips-icon:hover+.app__tips-text{opacity:1}.app__tips-text{transition:all .1s linear;color:#fff;line-height:1.6;font-size:15px}*{font-family:Roboto Condensed,sans-serif;margin:0;padding:0;box-sizing:border-box}*,*:before,*:after{box-sizing:border-box}:focus,:active{outline:none}a:focus,a:active{outline:none}nav,footer,header,aside{display:block}html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%}input,button,textarea{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer}button::-moz-focus-inner{padding:0;border:0}a,a:visited,a:hover{text-decoration:none}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}:root{--background-color: rgb(255, 255, 255);--buttons-shadow: 0px 0px 0px 0px #ecececc9;--rows-background: rgba(66, 58, 58, .527);--rows-shadow: 0px 0px 4px 0px rgba(209, 209, 209, .637)}.container{padding:0 10px;max-width:1200px;margin:0 auto}html *{color:#1d1d1d;font-family:Roboto,sans-serif}body{background:url(/drag-and-drop-calculator/assets/abstrakt-9-TpIECdoS.jpg) no-repeat center/cover;-webkit-user-select:none;user-select:none}