:root{--delay-delete:0.5s}*,:after,:before{box-sizing:border-box;padding:0;margin:0}button,button:active,button:focus{outline:none}body{position:relative;font-family:monospace;font-family:ethnocentric,monospace}.start{position:absolute;width:100%;min-height:100vh;background-color:grey;display:flex;justify-content:center;align-items:center}.start__btn{font-family:monospace;color:#faebd7;height:20vh;width:20vh;border-radius:10vh;background-color:transparent;cursor:pointer}.start__btn:hover{font-weight:700}.container{max-width:1920px;min-height:100vh;margin:0 auto;position:relative;flex-direction:column}.container,.header{display:flex;justify-content:space-between}.header{width:100%;height:40px;align-items:center;user-select:none}.header-btn{width:40px;height:40px;border-radius:5px;padding-left:5px;padding-right:5px;margin-left:10px;font-size:1.5rem;text-align:center;cursor:pointer;background-size:80%;background-repeat:no-repeat;background-position:50%}.header-btn__draw{background-image:url(../img/draw-mode.5e6103184a88f924c52afcd44b3358bc.svg)}.header-btn__new-element{background-image:url(../img/add-element.ad037bb3aba1353507e03d0a12a57fa1.svg)}.header-btn__settings{background-image:url(../img/settings.57e43fb00625f236ebd8f2599f7ce1ec.svg);margin:0}.header-btn__trash{background-image:url(../img/trash.7fdaa10b703be3f7002ed759f1206060.svg);margin-right:10px}.header-btn:hover{transform:scale(1.1)}.header h1{flex-grow:2;text-align:center}.settings{width:100%;height:40px;padding:0 20px;background-color:#333;top:0;left:0;display:flex;justify-content:space-between;align-items:center;transition:all .15s linear;position:absolute;top:-40px}.settings-switch__mode{display:flex;color:#777;font-size:2rem;font-weight:700;font-family:monospace;text-transform:uppercase;width:150px;border:1px solid #000}.settings-switch__mode-point{width:50%;text-align:center;border:1px solid #777;cursor:pointer;transition:all .5s linear}.settings-switch__mode-active{color:bisque;border:1px solid bisque}.colors__palette{margin-right:10px;height:35px;border:1px solid #fff;cursor:crosshair;position:relative}.colors__palette-marker{width:10px;height:10px;border-radius:50%;position:absolute;top:0;left:0;border:2px solid #777;z-index:10}.line-width-slider{width:150px;height:20px;margin:5px;position:relative;display:flex;align-items:center}.line-width-slider .line{width:100%;height:16px;border-radius:5px;background:#e0e0e0;background:linear-gradient(left top,#e0e0e0,#eee)}.line-width-slider .marker{width:10px;height:30px;border-radius:3px;position:absolute;left:0;top:-5px;background:#00f;cursor:pointer}.settings .example{width:150px;height:35px;background-color:#fff;border-radius:12px;position:relative}.example__line{width:100%;border-top:1px solid #000;position:absolute;top:50%}.settings .exit-btn{width:35px;height:35px;border-radius:12px;background-color:#fff;background-size:80%;background-repeat:no-repeat;background-position:50%;background-image:url(../img/back.ff809686048d8a56eda54b991a09a5f4.svg);cursor:pointer}.structure{height:100%;flex:1 1 auto;display:flex}.draw-area{width:100%;overflow:hidden;margin:0;position:relative;border:1px solid #000}.draw-area__bg{width:100%;min-height:100%;position:absolute;z-index:0}.canvas{padding:0;margin:0;position:absolute}#canvas-bg{top:0;left:0;z-index:1}#canvas-draw{z-index:2}#canvas-draw,.element{background-color:transparent}.element{position:absolute;font-size:14px;padding:15px;overflow:hidden;border-radius:9999px;text-align:center;display:flex;justify-content:center;align-items:center;font-family:monospace;user-select:none;cursor:move;z-index:5}.element-smooth-move{transition:all var(--delay-delete) linear}.element:hover{z-index:10}.element__text{padding:10px 20px;border-radius:9999px;background-color:#fff;border:1px dashed #000;z-index:2;transition:all .2s linear}.element__text:hover{box-shadow:0 4px 4px 1px #000;transform:scale(1.05);font-weight:700}.element__btn{position:absolute;width:100%;height:100%;line-height:30px;color:#000;opacity:0;cursor:pointer;transition:all .3s linear}.element:hover .element__btn{opacity:1}.element__btn-remove{background-color:#c33;bottom:-50%;right:-50%}.element__btn-create{background-color:#80cc33;cursor:copy;top:-50%;left:-50%}.element__btn-edit{background-color:#7f33cc;cursor:text;top:-50%;right:-50%}.element__btn-info{background-color:#3cc;cursor:help;bottom:-50%;left:-50%}.element__input{border:none;text-align:center}.footer{height:30px;background-color:#303030;text-align:center;color:#faebd7;line-height:30px}.hide{display:none}