div.col .row .col { border: 1px solid black; } div.form-group .center { position: relative; height: 40px; } div.form-group .center label { position: absolute; top: 50%; width: 100%; transform: translate(-50%, -50%); margin: 0; } div.signatures { margin-top: 30px; } div.signatures .col .row { border: 1px solid black; } div.forSign { border: 1px solid black; margin-left: auto; margin-right: auto; width: 70vw; height: 30vw; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } div.forSign canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .margin-bottom { margin-bottom: 50px; } div.signDiv { margin-bottom: 50px; } p.highlightAbs { margin-bottom: 0; } p.highlightAbs.n-1 { color: blue; } p.highlightAbs.n-2 { color: red; } p.highlightAbs.n-3 { color: rgb(15, 184, 0); } .margin-top { margin-top: 20px; } input[type="checkbox"].absent, input[type="checkbox"].late { -webkit-appearance: initial; appearance: initial; background: rgb(207, 207, 207); width: 20px; height: 20px; border: 1px solid black; margin-top: 3px; position: relative; } input[type="checkbox"].absent:checked { background: red; } input[type="checkbox"].absent:checked:after { content: "X"; color: white; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } input[type="checkbox"].late:checked { background: rgb(15, 184, 0); } input[type="checkbox"].late:checked:after { content: "φ"; color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .logout { width: 40%; margin-bottom: 10px; margin-left: 30%; } button.logout { margin-left: 0 !important; }