.stato-umldiagram html, .stato-umldiagram body{height:100%;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden;background:rgb(253,246,227)} .stato-umldiagram hr{border:0;background:rgb(253,246,227);height:5px} .stato-umldiagram h1{font-size:100%;display:inline;margin:0} .stato-umldiagram img{vertical-align:middle;border:0} .stato-umldiagram .download-buttons{justify-content:start} .stato-umldiagram .download-buttons>*{margin-left:0.5rem} .stato-umldiagram .download-button{cursor:pointer} .stato-umldiagram .download-button:hover{background:rgb(221,221,221)} .stato-umldiagram .download-button i{margin-right:5px} .stato-umldiagram .wrap{height:100%} .stato-umldiagram #linemarker{background:rgba(220,50,47,0.5);position:absolute;left:0;top:-30px;width:40px;height:22px;z-index:4} .stato-umldiagram #textarea{outline:none;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0);box-sizing:border-box;border:0;font-family:Consolas,Menlo,monospace;color:rgb(101,123,131);padding:30px 0 0 40px;resize:none;opacity:1;transition:opacity 0.3s} .stato-umldiagram .CodeMirror{height:100%;border:0;width:100%;padding:22px 0 0 0;line-height:25px;font-size:16px;font-family:Consolas,Monaco,monospace;opacity:1;transition:opacity 0.3s} .stato-umldiagram .CodeMirror .CodeMirror-linenumber{color:rgb(212,206,189);padding-left:12px} .stato-umldiagram .canvas-mode .CodeMirror{opacity:0;transition:opacity 1s} .stato-umldiagram #canvas-panner{position:absolute;z-index:2;width:33%;height:100%;background:rgba(0,0,0,0);top:0;right:20px;bottom:0;cursor:move} .stato-umldiagram #linenumbers{position:absolute;top:0;left:0;width:40px;height:100%;background:rgb(238,232,213);color:rgb(212,206,189)} .stato-umldiagram #linenumbers.error{background:rgba(220,50,47,0.2);z-index:4} .stato-umldiagram #canvas{position:absolute;cursor:move} .stato-umldiagram a, .stato-umldiagram a:active{color:rgb(0,0,0);opacity:0.5;text-decoration:none} .stato-umldiagram a:hover{color:rgb(0,0,0);opacity:0.75;text-decoration:none} .stato-umldiagram .tools{display:block;position:absolute;z-index:4;top:20px;right:20px;font-family:Calibri,Helvetica,sans-serif;font-weight:bold;background:rgb(253,246,227);border-radius:5px} .stato-umldiagram .tools .canvas-tools{display:block;position:absolute;top:60px;right:0;width:24px;opacity:0;transition:opacity 1s} .stato-umldiagram .canvas-mode .canvas-tools{opacity:1;transition:opacity 0.3s} .stato-umldiagram .tools img{width:24px;height:24px;margin-bottom:5px} .stato-umldiagram .tools>a{margin-left:5px} .stato-umldiagram .tools>.logo{color:rgb(0,0,0);font-size:150%} .stato-umldiagram .tools>#tooltip{font-size:90%;color:rgb(128,124,114);position:fixed;top:7px;right:20px;text-align:right;background:rgb(253,246,227);border-radius:2px;padding:0 5px} .stato-umldiagram .tools>#storage-status{display:none;color:rgb(0,0,0);opacity:0.5;font-style:italic;position:fixed;top:7px;right:0;width:100%;text-align:center} .stato-umldiagram .tools>#storage-status a{border:2px solid rgb(51,51,51);padding:0 5px;border-radius:4px;font-style:normal;opacity:1} .stato-umldiagram .sidebar{display:none;position:absolute;z-index:3;top:0px;right:0;bottom:0;width:325px;background-color:rgb(253,246,227);box-shadow:-3px 0 6px rgba(0,0,0,0.28)} .stato-umldiagram .sidebar.visible{display:block;overflow:auto} .stato-umldiagram .sidebar .logo-background{position:fixed;top:0;right:20px;width:300px;height:70px;background:rgb(253,246,227)} .stato-umldiagram .content{display:block;color:rgb(88,110,117);font-family:Consolas,Monaco,monospace;padding:70px 10px 200px 20px} .stato-umldiagram .content p{font-family:Calibri,Helvetica,sans-serif} .stato-umldiagram .content label{display:block;font-family:Calibri,Helvetica,sans-serif;color:rgb(147,161,161);margin-top:1em} .stato-umldiagram .content h2{font-size:inherit;display:block;font-family:Calibri,Helvetica,sans-serif;color:rgb(147,161,161);margin-top:1em} .stato-umldiagram .content b{display:inline-block;font-weight:normal;width:40%;font-family:Calibri,Helvetica,sans-serif;color:rgb(147,161,161)} .stato-umldiagram .textarea-container{position:sticky;top:0;left:0;width:100%;height:40vh} .stato-umldiagram .textarea-container:before{content:none;position:absolute;top:0;right:100%;width:24px;height:100%;background:linear-gradient(to left,rgba(255,255,255,0.7),transparent);opacity:0;transition:opacity 250ms ease-in-out} .stato-umldiagram textarea{background:rgba(255,255,255,0.8);width:100%;height:100%;position:absolute;z-index:2;border:0;padding:16px;font-family:monospace;font-size:16px;transition:opacity 250ms ease-in-out;top:0;right:0;opacity:0} .stato-umldiagram .textarea-container .CodeMirror{opacity:0;transition:opacity 250ms ease-in-out} .stato-umldiagram .textarea-container .CodeMirror-focused, .stato-umldiagram .textarea-container:hover .CodeMirror, .stato-umldiagram .textarea-container:hover:before{opacity:1 !important} .stato-umldiagram .textarea-container textarea:invalid{height:56px} .stato-umldiagram .CodeMirror{padding:0;background:rgba(255,255,255,0.8);font-size:14px} .stato-umldiagram #diagram svg{max-width:100%;width:auto;height:auto}