html,body{margin:0;padding:0;font-family:Open Sans}header{background-color:#5e308b;padding:2px;text-align:center;font-size:35px}form{margin:0 auto;text-align:center;font-size:20px}input[type=number],select{width:6em;padding:8px 12px;margin:8px 0;display:inline-block;border:3px solid #ccc;border-radius:8px;box-sizing:border-box}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=number]:focus,select{border:3px solid #ccc}input[type=submit],input[type=reset]{background-color:#0eb779;border:2px solid black;border-radius:8px;color:#fff;padding:12px 24px;text-decoration:none;margin:2px;cursor:pointer}input[type=submit]:hover,input[type=reset]:hover{background-color:#0d9e6a;outline:3px solid #065a3a;outline-offset:2px}input[type=submit]:focus,input[type=reset]:focus,input[type=submit]:focus-visible,input[type=reset]:focus-visible{outline:3px solid #065a3a;outline-offset:2px}h1{font-size:33px}a{color:#fff;text-decoration:none}a:hover{color:#add8e6;text-decoration:underline}.viz-bar{position:relative;height:80px;width:1000px;margin:10px auto;border-bottom:1px dashed #ccc;background:linear-gradient(to right,#eee 49.9%,#ccc,#eee 50.1%);display:flex;align-items:center}.viz-label{width:60px;text-align:center;font-size:14px;color:#333;font-weight:700;margin-right:10px}.viz-square{position:absolute;background-color:red;opacity:.7;border:1px solid #000;transform:translate(-50%);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}.viz-square:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background-color:#000;transform:translate(-50%)}#container{position:relative;width:1000px;margin:0 auto;height:auto}.line{position:absolute;top:0;bottom:0;width:2px;background-color:red;z-index:10;left:50%;transform:translate(-50%)}.controls{margin-top:10px}.input-group{margin:10px}.measurement-table{margin:0 auto 8px;border-collapse:collapse}.measurement-table td{padding:4px 0;vertical-align:middle}.measurement-table .col-label{text-align:right;padding-right:12px}.measurement-table .col-mm{width:5.5em}.measurement-table .col-in{width:7em;padding-left:24px;text-align:right}.measurement-table .col-mm input,.measurement-table .col-in input{width:100%;box-sizing:border-box;text-align:right}.measurement-table .col-in input{padding:8px 12px;border:3px solid #ccc;border-radius:8px}.measurement-table input{font-size:1.25rem}.day-calculator{margin-top:2rem;padding:1rem;text-align:center}.day-calculator h1{font-size:33px}.day-calculator input[type=date]{padding:8px 12px;margin:8px;border:3px solid #ccc;border-radius:8px;font-size:1.25rem}#day-range-output{font-size:1.25rem;margin-top:12px;font-weight:700}.dashed-line{position:absolute;top:0;bottom:0;width:1px;border-left:1px dashed black;z-index:2}.ruler{position:relative;width:1000px;height:30px;margin:0 auto 10px;border-bottom:1px solid #000}.tick{position:absolute;bottom:0;width:1px;background-color:#000}.tick.small{height:5px}.tick.medium{height:10px}.tick.large{height:15px}.tick-label{position:absolute;bottom:50%;transform:translate(-50%);font-size:10px;margin-top:2px}