html, body {height: 100%}
body {margin: 0; padding: 0; overflow: auto;}
iframe {margin: 0;padding: 0;border: 0;width: 100%;background-color:#fff;}
.navbar-container {position: relative;overflow:auto;z-index: 2;}
.navbar-container.shadow {box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);}
.template-container {position: absolute;bottom: 0;left: 0;right: 0;top: 70px; /* same as #navbar height */}
#navbar, .navbar-container {height: 70px;}
#template {height: 100%;}
.frames-wrapper {position: absolute;background: rgba(0, 0, 0, 0.6);bottom: 0;right: 0;left: 0;top:0;}
.modal-canvas {width: 70px;height: 70px;border-radius:70px;background-color:rgba(0, 0, 0, 0.4);color:white;position: absolute;top: 50%;left: 50%;margin-top: -35px;margin-left: -35px;}
.modal-canvas canvas, .modal-canvas .canvas-value {position: absolute;text-align: center;width: 100%;line-height: 70px;}
.dropdown {display: none;}
@media only screen and (max-width: 767px){
    body .template-container {top: 50px; /* same as #navbar height */}
    body #navbar, body .navbar-container {height: 50px;}
}