// RIGHT PANEL .rightpanel { position: absolute; width: 17%; /* background-color: rgba(255, 0, 254, 0.4);*/ top: 0; right: 0; bottom: 0; } .btnPrint { margin: 1% 5% 5% 0%; width: 100%; max-width: 163px; height: auto; float: right; } .btnStop { margin: 5% 10% 1% 5%; float: right; width: 90%; max-width: 98px; height: auto; } .btnsSettingsInfo { position: absolute; bottom: 25px; right: 5px; width: 80%; margin: 1% 5%; max-width: 160px; } .btnInfo { width: 40%; max-width: 53px; height: auto; } .btnSettings { width: 40%; max-width: 53px; height: auto; float: right; } /* PROGRESSGUAGE AND THERMOMETER SHARED STYLES */ .progressbarAppear, .thermometerAppear { // margin-right: 1.5% !important; right: 1.5% !important; } /* PROGRESS GUAGE */ .progressbarCanvasContainerParent { position:relative; width:100%; } #progressbarCanvasContainer { position: relative; width: 50%; float:right; transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55); right: -50%; } #progressbarCanvas { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: auto; background-color: #fff; border: solid #000; border-width: 2px 0 2px 2px; border-radius: 15px 0 0 15px; padding: 5px 0px 5px 5px; -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); } /* THERMOMETER */ .thermometerContainerParent { position:relative; width:100%; } #thermometerContainer { position: relative; width: 45%; float: right; transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55); right: -45%; } #thermometerCanvas { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: auto; background-color: #fff; border: solid #000; border-width: 2px 0 2px 2px; border-radius: 15px 0 0 15px; padding: 5px 0px 5px 5px; -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); } //#thermometerContainer { // position: absolute; // right: 25px; // top: 370px; //} //#thermometerCanvas { ///*background: #59b2b8;*/ ///*zoom: 2;*/ //}