body { font-family: 'Lato', sans-serif; padding-bottom: 45px; } .jumbotron { padding: 30px; text-align: center; margin-top: 30px; } .jumbotron h1 { font-size: 40px; margin: 0; } label { margin-bottom: 0; } small { color: #999999; font-weight: 400; } .checkbox, .radio { margin-left: 20px; margin-top: 0; margin-bottom: 10px; } .checkbox:last-child, .radio:last-child { margin-bottom: 20px; } /* Doughnut CSS */ .chart { margin: 0 auto; width: 450px; height: 450px; position: relative; } .doughnutTip { position: absolute; float: left; min-width: 30px; max-width: 300px; padding: 5px 15px; border-radius: 1px; background: rgba(0,0,0,.8); color: #ddd; font-size: 17px; text-shadow: 0 1px 0 #000; text-transform: uppercase; text-align: center; line-height: 1.3; letter-spacing: .06em; box-shadow: 0 1px 3px rgba(0,0,0,0.5); transform: all .3s; pointer-events: none; } .doughnutTip:after { position: absolute; left: 50%; bottom: -6px; content: ""; height: 0; margin: 0 0 0 -6px; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 6px solid rgba(0,0,0,.7); line-height: 0; } .doughnutSummary { position: absolute; top: 50%; left: 50%; color: black; text-align: center; text-shadow: 0 -1px 0 #111; cursor: default; } .doughnutSummaryTitle { position: absolute; top: 50%; width: 100%; margin-top: -27%; font-size: 22px; letter-spacing: .06em; } .doughnutSummaryNumber { position: absolute; top: 50%; width: 100%; margin-top: -15%; font-size: 55px; } .chart path:hover { opacity: .65; }