body {
    padding-top: 50px;
    padding-bottom: 40px;
    background-color: #f5f5f5!important;
    overflow-y: scroll;
}
.test-env {
    background: url(/img/test-env.png);
}
.thumbnails>li {
    width: 84px;
    text-align: center;
    line-height: 14px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 120px;
}

ul.thumbnails {
    border-bottom: 1px dotted #C0C0C0;
    border-style: none none dotted;
    margin-right: -20px;
}

div.inner {
    overflow-x: hidden;
}

.overlay {
    position: absolute;
    width: 85px;
    height: 110px;
    padding: 8px;
    margin: -8px 0 26px -8px;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}
/*.overlay:hover {
    background: rgba(240,240,240,0.6);
}*/

.overlay.selected {
    background: rgba(156,233,242,0.4)!important;
}

.overlay.in-progress {
    background: rgba(156,233,242,0.6)!important;
}

.survey {
    padding: 10px;
    background-color: white;
    border-top: 0 solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.panel {
    padding: 0 10px 0;
    background-color: white;
    border: 1px solid #e5e5e5;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

#section-tabs.nav {
    margin-bottom: 0;
}

.freeform {
    background-color: #E9F39C;
    padding: 5px;
}

.freeform textarea {
    color: #111;
    border: 0;
    width: 98%;
    box-shadow: none;
    border-radius: 0;
    background-image: -webkit-linear-gradient(left, #E9F39C 10px, transparent 10px), -webkit-linear-gradient(right, #E9F39C 10px, transparent 10px), -webkit-linear-gradient(#E9F39C 24px, #C7E214 24px, #C7E214 25px, #E9F39C 25px);
    background-image: -moz-linear-gradient(left, #E9F39C 10px, transparent 10px), -moz-linear-gradient(right, #E9F39C 10px, transparent 10px), -moz-linear-gradient(#E9F39C 24px, #C7E214  24px, #C7E214  25px, #E9F39C 25px);
    background-image: -ms-linear-gradient(left, #E9F39C 10px, transparent 10px), -ms-linear-gradient(right, #E9F39C 10px, transparent 10px), -ms-linear-gradient(#E9F39C 24px, #C7E214 24px, #C7E214  25px, #E9F39C 25px);
    background-image: -o-linear-gradient(left, #E9F39C 10px, transparent 10px), -o-linear-gradient(right, #E9F39C 10px, transparent 10px), -o-linear-gradient(#E9F39C 24px, #C7E214 24px, #C7E214 25px, #E9F39C 25px);
    background-image: linear-gradient(left, #E9F39C 10px, transparent 10px), linear-gradient(right, #E9F39C 10px, transparent 10px), linear-gradient(#E9F39C 24px, #C7E214 24px, #C7E214 25px, #E9F39C 25px);
    background-size: 100% 100%, 100% 100%, 100% 25px;
    line-height: 25px;
    padding: 8px;
}

.freeform textarea:focus {
    border: 0 solid black;
    border-bottom: 1px;
}

.multiple {
    padding: 10px 0 10px 0;
}

.section h2 {
    color: #1C6434;
    border-bottom: 8px solid #C7E214;
    margin: 0;
}

.page {
    border-bottom: 8px solid #EC008C !important;
}

#start {
    padding-top: 60px;
    background-color: #C7E214;
}

#start h1 {
    margin: 25px 0;
    padding: 30px 40px;
    color: white;
    background-color: #1C6434;
}

#start h2 {
    padding: 20px 40px;
    color: #1C6434;
    font-weight: normal;
}

#start img {
    padding-right: 40px;
}

#start .inner {
    margin: 0 200px 50px 200px;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    border: 0;
}

#start input#pupil {
    width: 78%;
}

#start input[type='text'] {
    width: 98%;
}

#preamble {
    background-color: #C7E214;
}

#preamble .inner {
    padding: 15px;
}

#preamble h1,
#preamble h3 {
    color: #1C6434;
    line-height: 34px;
}

#section-7 {
    background-color: #C7E214;
}

#section-7 h2 {
    padding: 15px;
    border-bottom: 75px solid #1C6434 !important;
    background-color: #C7E214;
}

#section-7 .inner {
    margin: 30px;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    border: 0;
}

#start .page,
#section-7 .page {
    border-bottom: 32px solid #EC008C !important;
}

#section-7 .freeform {
    background-color: white;
    padding: 0px;
}

#section-7 .freeform textarea {
    color: #111;
    border: 0;
    width: 98%;
    box-shadow: none;
    border-radius: 0;
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 24px, #ccc 24px, #ccc 25px, white 25px);
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 24px, #ccc  24px, #ccc  25px, white 25px);
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 24px, #ccc 24px, #ccc  25px, white 25px);
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 24px, #ccc 24px, #ccc 25px, white 25px);
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 24px, #ccc 24px, #ccc 25px, white 25px);
    background-size: 100% 100%, 100% 100%, 100% 25px;
    line-height: 25px;
}

#section-7 div .yes_no {
    padding-bottom: 10px;
}

.label-none:hover {
    background-color: #f0f0f0;
}

#start span .gender,
#start span .answer,
#section-7 span .answer {
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.label-none, .badge-none {
    background-color: white;
    color: black;
    font-weight: normal;
}

.form-signin {
    max-width: 300px;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
  }
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin .add-on {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
    width: 100%;
}
.scroll-pane {
    padding-left: 50px;
    padding-right: 50px;
}

.scroll-pane tbody {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: auto;
    display: block;
}

.scroll-pane thead>tr {
    display: block;
}

.scroll-pane td>strong {
    color: #555;
}

.scroll-pane th.pupil,
.scroll-pane td.pupil,
.scroll-pane th.login,
.scroll-pane td.login {
    width: 150px;
}

.scroll-pane th.date,
.scroll-pane td.date {
    width: 100px;
}

.scroll-pane th.date-range,
.scroll-pane td.date-range {
    width: 100px;
}

.scroll-pane th.school,
.scroll-pane td.school {
    width: 370px;
}

.scroll-pane th.school.long,
.scroll-pane td.school.long {
    width: 715px;
}

.scroll-pane th.type,
.scroll-pane td.type {
    width: 90px;
}

.page-pdf-report .scroll-pane th.type,
.page-pdf-report .scroll-pane td.type {
    width: 427px;
}

.page-pdf-report .scroll-pane th.date-range,
.page-pdf-report .scroll-pane td.date-range {
    width: 140px;
}


.scroll-pane th.question,
.scroll-pane td.question {
    width: 403px;
}
.scroll-pane th.full-name,
.scroll-pane td.full-name {
    width: 417px;
}

.scroll-pane th.freeformat-text,
.scroll-pane td.freeformat-text {
    width: 123px;
}

.scroll-pane th.count,
.scroll-pane td.count,
.scroll-pane th.status,
.scroll-pane td.status,
.scroll-pane th.actions,
.scroll-pane td.actions {
    width: 85px;
}

.scroll-pane th.filter,
.scroll-pane td.filter {
    width: 55px;
    text-align: center
}

.user-status {
    cursor: pointer;
}

.access-denied {
    padding: 50px 100px;
    min-height: 450px;
}

.access-denied .alert {
    margin: 100px;
}

.access-denied p {
    padding-top: 200px;
    text-align: center;
}

.datepicker input {
    cursor: pointer!important;
}

#update-choices-dialog select[multiple] {
    height: 190px;
    width: 430px;
    margin: 0 50px;
}

#footer.navbar-fixed-bottom {
    left: auto;
}

#footer div.pagination {
    margin: 5px;
    padding: 5px 5px 0;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

td.right {
    text-align: right;
}

.control-group.error input {
    background-color:#f2dede!important;
}

span.text-error {
    color:#b94a48!important;
}

input[readonly]#diary-date {
    background-color: white;
    cursor: pointer;
}
#video-tutorial-link {
    text-decoration: underline;
}
.noerror {
    color: #333!important;
}

form#pupil-data {
    margin: 0;
}
.control-group:last-child {
    margin-bottom: 0;
}

/* https://github.com/twbs/bootstrap/issues/3287 */
td .btn-group {
    position: absolute;
}
td .btn-group a.btn {
    top: -5px;
}

/* table sorting */
table.tablesorter .header {
    cursor: pointer;
}
table.tablesorter thead tr .header {
    background-image: url(../img/bg.gif);
    background-repeat: no-repeat;
    background-position: center left;
    cursor: pointer;
}
table.tablesorter thead tr .header span {
    margin-left: 12px;
}

table.tablesorter tbody td {
    vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(../img/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(../img/desc.gif);
}
.table-bordered {
    border: 1px solid #ddd!important;
}
.table-bordered td,
.table-bordered th {
    border-left: 0;
}
.filter-by {
    padding: 5px 10px 0 0;
    display: inline-block;
    min-height: 20px;
    vertical-align: middle;
}
form#dispatcher {
    margin: 0;
}

#participating-schools-panel select {
    margin: 0 30px 30px;
    width: 740px;
    height: 150px;
}

span a#toggle-all {
  font-size: smaller;
  margin-right: 5px;
}