body { position: relative; margin: 0px; height: calc(var(--vh, 1vh) * 100); width: 100%; overflow: hidden; } #whiteboardContainer { height: calc(var(--vh, 1vh) * 100); width: 100%; } .btn-group button { background: transparent; border: 1px solid #636060; /* Green border */ color: black; /* White text */ padding: 11px 14px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ float: left; /* Float the buttons side by side */ font-size: 1.2em; height: 45px; } button::-moz-focus-inner { border: 0; } .btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } /* Clear floats (clearfix hack) */ .btn-group:after { content: ""; clear: both; display: table; } /* Add a background color on hover */ .btn-group button:hover { background-color: #9a9a9a; } button { outline-width: 0; } .btn-group { background-color: #808080ab; margin-left: 5px; float: left; position: relative; } .whiteboardTool.active { background: #bfbfbf; } #whiteboardThicknessSlider { -webkit-appearance: none; width: 100%; height: 10px; border-radius: 3px; background: transparent; outline: none; opacity: 1; -webkit-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } .textBox.active { border: 1px dashed gray; } .textBox>.removeIcon, .textBox>.moveIcon { display: none; } .textBox.active>.removeIcon, .textBox.active>.moveIcon { display: block; } .modalBtn { padding: 5px; border-radius: 5px; border: 0px; min-width: 50px; cursor: pointer; }