/* sitename */

/* colours: */

/* Zero down margin and padding on all elements */
* {
    margin: 0;
    padding: 0;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,
img {
    border: 0;
}
img {
    border-style: none;
    vertical-align: middle;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}
ol,
ul {
    list-style: none;
}
caption,
th {
    text-align: left;
}
q:before,
q:after {
    content: "";
}
abbr,
acronym {
    border: 0;
}

html {
    background: #fff;
}

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Tahoma", sans-serif;
    font-size: 75%; /* Resets 1em to 12px */
    line-height: 1.6em;
    color: #333;
    text-align: center;
}

input,
select {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Tahoma", sans-serif;
}

.serif {
    font-family: "Lucida Bright", Times, "Times New Roman", serif;
}

a {
    color: #33a;
}

a:hover {
    color: #5180d5;
}

#outer-wrapper {
    width: 100%;
}

#wrapper {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#content {
    text-align: left;
    margin-top: 200px;
}

/* h1 {
  position: absolute;
  right: 25px;
  margin-top: 21px;
} */

h1 {
    height: 71px;
    width: 296px;
    text-indent: -9999px;
    background: url(/images/logos/RCVS_logo.gif);
    position: absolute;
    right: 25px;
    margin-top: 25px;
}

h2 {
    color: #555;
    font-size: 1.6em;
    margin: 0 0 0.8em 0;
    font-weight: normal;
    clear: both;
}

h3 {
    color: #555;
    font-size: 1.3em;
    font-weight: normal;
}

h4 {
    color: #555;
    font-size: 1.1em;
    margin: 10px 0 5px 0;
    font-weight: normal;
}

p {
    margin-bottom: 1em;
}

.printOnly {
    display: none;
}

#topLinks {
    list-style: none;
    padding-top: 4px;
    margin-left: 0px;
    margin-bottom: 0px;
    height: 17px;
    background: linear-gradient(
        0deg,
        rgba(200, 200, 200, 1) 0%,
        rgba(240, 240, 240, 1) 100%
    );
}

#topLinks li {
    float: left;
}

#primaryNavigation {
    list-style: none;
    width: 100%;
    height: 40px;
    position: absolute;
    top: 115px;
    left: 0px;
    background: linear-gradient(
        0deg,
        rgba(28, 59, 110, 1) 0%,
        rgba(46, 88, 159, 1) 100%
    );
}

#primaryNavigation li {
    float: left;
    height: 40px;
}

#primaryNavigation li:hover {
    background: linear-gradient(
        0deg,
        rgba(14, 29, 55, 0.25) 0%,
        rgba(23, 44, 79, 0.25) 100%
    ) !important;
}

#primaryNavigation li.divider {
    background: url(/img/primary_nav_divider.gif) no-repeat 50% 1px;
    text-indent: -9999px;
    width: 1px;
    height: 38px;
    margin-top: 0;
    padding: 0;
}

#primaryNavigation a {
    display: block;
    padding: 0 20px 0 10px;
    height: 40px;
    color: #fff;
    text-decoration: none;
    float: left;
    line-height: 40px;
    font-size: 1.2em;
    max-width: 240px;
}

body.primary-first #p_nav-first a,
body.primary-second #p_nav-second a,
body.primary-third #p_nav-third a,
body.primary-fourth #p_nav-fourth a,
body.primary-fifth #p_nav-fifth a,
body.primary-sixth #p_nav-sixth a,
body.primary-seventh #p_nav-seventh a,
body.primary-eighth #p_nav-eighth a {
    cursor: default;
    background: linear-gradient(
        0deg,
        rgba(56, 118, 220, 0.5) 0%,
        rgba(92, 110, 255, 0.5) 100%
    );
}

body.primary-first #p_nav-first a:hover,
body.primary-second #p_nav-second a:hover,
body.primary-third #p_nav-third a:hover,
body.primary-fourth #p_nav-fourth a:hover,
body.primary-fifth #p_nav-fifth a:hover,
body.primary-sixth #p_nav-sixth a:hover,
body.primary-seventh #p_nav-seventh a:hover,
body.primary-eighth #p_nav-eighth a:hover {
    background: linear-gradient(
        0deg,
        rgba(38, 79, 143, 0.5) 0%,
        rgba(61, 118, 212, 0.5) 100%
    );
}

#primaryNavigation a:hover,
#primaryNavigation a:focus {
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
}

#secondaryNavigation {
    width: 100%;
    height: 26px;
    position: absolute;
    left: 0px;
    top: 155px;
    list-style: none;
    background: #afafaf;
    background: linear-gradient(
        0deg,
        rgba(175, 175, 175, 1) 0%,
        rgba(240, 240, 240, 1) 100%
    );
}

#secondaryNavigation li {
    float: left;
    margin-left: 2em;
    padding-right: 2em;
    background: url(/img/secondary_nav_divider.gif) no-repeat 100% 1px;
}

#secondaryNavigation a {
    color: #888;
    text-decoration: none;
    line-height: 26px;
}

#secondaryNavigation a:hover,
#secondaryNavigation a:focus {
    color: #666;
    outline: none; /* hide dotted outline in Firefox */
}

body.secondary-first #s_nav-first a,
body.secondary-second #s_nav-second a,
body.secondary-third #s_nav-third a,
body.secondary-fourth #s_nav-fourth a {
    color: #192e5d;
    font-weight: bold;
    cursor: default;
}

#content img {
    /*border: 1px solid #000;*/
}

#content strong {
    font-weight: bold;
}

#content em {
    font-style: oblique;
}

.contentLozengeFullWidth {
    padding: 0 40px 30px 40px;
    color: #fff;
    background: linear-gradient(
        0deg,
        rgba(28, 59, 110, 1) 0%,
        rgba(46, 88, 159, 1) 100%
    );
    overflow: hidden;
}

.contentLozengeFullWidth h3 {
    padding: 20px 40px 0 40px;
    margin-bottom: 30px;
    margin-left: -40px;
    width: 880px;
    color: #fff;
    font-size: 2em;
}

.contentLozengeHalfWidth {
    background: url(/img/contentLozengeHalfWidth.gif) 0 100%;
    padding: 0 40px 30px 40px;
    color: #fff;
    width: 420px;
    margin: 0 auto;
}

.contentLozengeHalfWidth h3 {
    background: url(/img/contentLozengeHalfWidth.gif) 0 0;
    padding: 20px 40px 0 40px;
    margin-bottom: 30px;
    margin-left: -40px;
    width: 420px;
    color: #fff;
    font-size: 2em;
}

.contentLozengeInsideTable {
    background: url(/img/contentLozengeInsideTable.gif) 0 100%;
    padding: 0 40px 30px 40px;
    color: #fff;
    margin: 0 auto;
    width: 800px;
}

.contentLozengeInsideTable h3 {
    background: url(/img/contentLozengeInsideTable.gif) 0 0;
    padding: 20px 40px 0 40px;
    margin-bottom: 20px;
    margin-left: -40px;
    width: 800px;
    color: #fff;
    font-size: 2em;
}

.contentLozengeForm p {
    margin-bottom: 1em;
    overflow: hidden;
    line-height: 32px;
}

.contentLozengeForm label {
    width: 200px;
    display: block;
    clear: left;
    float: left;
    text-align: right;
}

.contentLozengeForm select {
    width: 450px;
    float: left;
    margin: 7px 1em 0 0.6em;
    padding: 2px;
}

.contentLozengeForm .cbox {
    width: 40px;
    float: left;
    margin: 0.8em 1em 0 0.6em;
    padding: 2px;
    border: none;
}

.contentLozengeForm .HECommCbox {
    margin-right: 1em;
}

.contentLozengeForm .textInput {
    width: 450px;
    float: left;
    margin: 7px 1em 0 0.6em;
    padding: 2px;
    border: none;
}

.contentLozengeForm .date-pick {
    width: 100px;
}

.contentLozengeForm .date-autofill {
    width: 100px;
}

.contentLozengeForm .submit,
.box-rule .submit,
.formSubmit {
    font-weight: bold;
    font-size: 0.8em;
    display: block;
    border: none;
    width: fit-content;
    background-color: #ffb011;
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    height: 32px;
}

.box-rule .submit {
    float: right;
    margin-top: -40px;
}

.flexBox {
    display: flex;
}

#s1 .submit {
    display: inline;
    margin-left: 5px;
}

#loginForm {
    position: relative;
}

#loginForm p {
    margin-bottom: 0em;
}

#loginForm label {
    width: 80px;
}

#loginForm .textInput {
    width: 290px;
}

#loginForm #forgotPasswordLink {
    position: absolute;
    left: 88px;
}

#loginForm #forgotPasswordLink a {
    color: #4a6ebc;
    text-decoration: none;
}

#loginForm #forgotPasswordLink a:hover {
    text-decoration: underline;
}

#loginForm #rememberMeCheckbox {
    position: absolute;
    right: 40px;
}

#loginForm #rememberMeCheckbox label {
    width: auto;
    padding-right: 4px;
    color: #4a6ebc;
}

#loginForm #loginButton {
    margin: 50px auto 10px auto;
    width: 68px;
}

#loginForm #loginButton .submit {
    margin-left: 0;
}

#loginForm span {
    margin-left: 85px;
}

.loginError {
    margin-top: -10px;
    color: red;
}

#table1 {
    margin-top: 20px;
}

#progressTable {
    margin-top: 20px;
}

.standardTable,
.progressTable {
    padding: 20px 20px 20px 20px;
    background: linear-gradient(
        0deg,
        rgba(175, 175, 175, 1) 0%,
        rgba(240, 240, 240, 1) 100%
    );
}

.survey {
    margin: 0px auto;
    padding: 0px 20px 0px 20px;
    border: 1px solid #d4d4d4;
    width: 880px;
    margin-top: -20px;
    margin-bottom: 3em;
    height: 8em;
}

.borderedFlexContainer {
    border: 1px solid #d4d4d4;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
}

.borderedFlexContainer h3,
.survey h3 {
    font-weight: bold;
}

#keyTable {
    margin-top: 20px;
}

.standardTable table,
.progressTable table {
    width: 920px;
    border-left: 1px solid #d4d4d4;
    border-top: 1px solid #d4d4d4;
}

.standardTable tr,
.standardTable td,
.standardTable th,
.progressTable tr,
.progressTable td,
.progressTable th,
#keyTable tr,
#keyTable td,
#keyTable th {
    border-right: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
}

.standardTable .continueTable {
    margin-top: -1px;
}

/*
--------------------
2 column standard table
--------------------
*/

.standardTable table.columns2 th,
.standardTable table.columns2 td {
    background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
    padding: 8px 10px;
}

.standardTable table.columns2 th {
    font-weight: bold;
    color: #000;
}

.standardTable table.columns2 td.column1 {
    width: 550px;
}

.standardTable table.columns2 td.column2 {
    width: 327px;
}

.standardTable table.columns2 th.column2 {
    text-align: right;
    width: 327px;
}

/*
--------------------
3 column standard table
--------------------
*/

.standardTable table.columns3 th,
.standardTable table.columns3 td {
    background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
    padding: 8px 10px;
}

.standardTable table.columns3 th {
    font-weight: bold;
    color: #000;
}

.standardTable table.columns3 td.column1 {
    width: 550px;
}

.standardTable table.columns3 td.column2 {
    width: 285px;
}

.standardTable table.columns3 td.column3 {
    width: 20px;
}

#trackLogins table.columns3 th {
    /* background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
  padding: 4px 10px;
  font-weight: bold;
  color: #000; */
    font-size: 0.9em;
}

#trackLogins table.columns3 td {
    padding: 2px 10px;
    font-size: 0.9em;
}

.standardTable table.columns3 td.lastLoginDate {
    width: 85px;
}

.standardTable table.columns3 td.columnUnitsWorkedOn {
    width: 710px;
}

.standardTable table.columns3 td.columnAdditional {
    width: 60px;
}

/*
--------------------
Professional Behaviours pb-eval-header standard table
--------------------
*/

.forceDisplay {
    display: table-row-group !important;
}

.standardTable table.pb-eval-header th,
.standardTable table.pb-eval-header td {
    background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
    padding: 8px 10px;
}

.standardTable table.pb-eval-header th {
    font-weight: bold;
    color: #000;
}

.standardTable table.pb-eval-header td.column1 {
    width: 550px;
}

.pb-evaluate,
.eval-notes {
    display: none;
}

.pb-text-area {
    width: 100%;
}

.standardTable table.pb-evaluate th span.pb-have-comment-hl {
    color: green;
    font-size: 1.5em;
    line-height: 1em;
}

.pb-tutor-review {
    font-weight: normal;
    font-style: italic;
}

.pb-comment-roles {
    font-style: italic;
    font-weight: bold;
}

.standardTable table.pb-evaluate td.pb-overlay-td {
    font-size: xx-small;
}

.standardTable table.pb-evaluate td.pb-overlay-td-hl {
    background-color: #99ff99;
}

.standardTable table.pb-evaluate td.student-comment-hl,
.standardTable table.pb-evaluate td span.student-hl {
    background-color: #ffffa1;
}

.standardTable table.pb-evaluate td.peer-comment-hl,
.standardTable table.pb-evaluate td span.peer-hl {
    background-color: #ffd1c9;
}

.standardTable table.pb-evaluate td.cc-comment-hl,
.standardTable table.pb-evaluate td span.cc-hl {
    background-color: #d0d1ff;
}

#peer-other-label {
    display: none;
}

#peer-confirm {
    width: 75%;
    margin: 0 auto;
}
#peer-confirm label {
    display: inline;
    /*clear:none;*/
    width: auto;
    /*float: left;*/
    text-align: left;
}
/*
--------------------
12 column Professional Behaviours Evaluation table
--------------------
*/

.standardTable table.pb-evaluate th {
    background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
    padding: 4px 10px;
}

.standardTable table.pb-evaluate td {
    padding: 2px 10px;
    font-size: 0.9em;
}

.standardTable table.pb-evaluate th {
    font-weight: bold;
    font-size: 0.85em;
    color: #000;
}

.standardTable table.pb-evaluate td.radio {
    width: 1%;
    padding: 0 2px 0 2px;
}

.standardTable table.pb-evaluate td.equal-cell,
.standardTable table.pb-evaluate th.equal-cell {
    width: 15%;
}

.standardTable table.pb-evaluate th.behaviour-description {
    font-size: 1.1em;
}

/*.standardTable table.pb-evaluate td.eval-notes-blank-row*/
/*.standardTable tr.eval-notes-blank-row, .standardTable td.eval-notes-blank-row
{
  border-left: 0px;
  border-right: 0px;
}*/

.standardTable table.pb-evaluate th span {
    font-weight: normal;
}

/*Peers table*/
.standardTable table.pb-peers th {
    background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
    padding: 4px 10px;
    font-size: 1em;
}

.standardTable table.pb-peers td {
    padding: 2px 10px;
    font-size: 0.9em;
}

.standardTable table.pb-peers th {
    font-weight: bold;
    font-size: 0.85em;
    color: #000;
}

.standardTable table.pb-peers td.equal-cell,
.standardTable table.pb-peers th.equal-cell {
    width: 20%;
}

/*
--------------------
4 column standard table
--------------------
*/

.standardTable table.columns4 th {
    background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
    padding: 4px 10px;
}

.standardTable table.columns4 td {
    padding: 2px 10px;
    font-size: 0.9em;
}

.standardTable table.columns4 th {
    font-weight: bold;
    color: #000;
}

.standardTable table.columns4 td.equal-cell {
    width: 20%;
}
.standardTable table.columns4 td.behaviours-action {
    width: 16%;
    text-align: center;
}

/*Professional Behaviour Return Error Messages*/
/*Enclosing Div*/
#eval-error {
    margin-left: 1.8em;
    font-size: 1em;
    font-weight: bold;
}

.eval-error-box {
    border: 1px solid #000;
    width: 905px;
    height: 40px;
    padding-left: 10px;
    line-height: 40px;
    background-color: red;
    color: white;
    margin-bottom: 1em;
}

/*
  Page / Form return messages
*/
/*Delivery Site Manager Edit Student*/
#DeliverySiteManager4Message {
    font-weight: bold;
    border: 1px solid #d4d4d4;
    padding: 10px 10px 10px 10px;
    margin: 25px;
    margin-top: 10px;
    color: red;
}

#DeliverySiteManager4Message p {
    margin: auto;
}

#PLMessage {
    font-weight: bold;
    border: 1px solid #d4d4d4;
    margin-bottom: 20px;
}

#PLMessage p {
    padding: 0 10px 10px 10px;
    margin-top: 20px;
}

#MSMessage {
    margin: 0px auto;
    font-weight: bold;
    border: 1px solid #d4d4d4;
    margin-bottom: 20px;
    padding-left: 5px;
    display: none;
}

#MSMessage p {
    padding: 3px 5px 5px 5px;
    line-height: 1.5em;
    margin-bottom: -3px;
}

/*Login Message*/
#LoginMessage {
}

#LoginMessage p {
    line-height: 1.4em;
}

#LoginMessage a {
    color: #ccc;
    text-decoration: none;
}

#LoginMessage a:hover {
    color: inherit;
    text-decoration: none;
}

/*
--------------------
Note #1

Needed a relatively positioned parent for the plus and minus buttons to center them vertically but applying
position: relative to the <td> caused a variety of funky errors accross browsers, including missed border and a
complete breakdown of absolute positioning...

Used to a wrapper div which fixes things.

--------------------
*/
.standardTable table.columns2 td.column1 .columnWrapper,
.standardTable table.pb-eval-header th.column1 .columnWrapper,
.standardTable tr.eval-notes-reveal th.column1 .columnWrapper {
    padding-left: 40px;
    position: relative;
}

.standardTable table.columns2 td.column2 .columnWrapper {
    padding-right: 110px;
    position: relative;
}

.standardTable table.columns2 td.column1 .plus,
.standardTable table.columns2 td.column1 .minus,
.standardTable table.columns2 td.column1 .off,
.standardTable table.pb-eval-header th.column1 .plus,
.standardTable table.pb-eval-header th.column1 .minus,
.standardTable table.pb-eval-header th.column1 .off

/*.standardTable tr.eval-notes-reveal th.column1 .plus,
.standardTable tr.eval-notes-reveal th.column1 .minus,
.standardTable tr.eval-notes-reveal th.column1 .off*/ {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12px;
}

.standardTable tr.eval-notes-reveal th.column1 .plus,
.standardTable tr.eval-notes-reveal th.column1 .minus,
.standardTable tr.eval-notes-reveal th.column1 .off {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -12px;
}

.standardTable table.columns2 td.column1 .plus a,
.standardTable table.columns2 td.column1 .minus a,
.standardTable table.columns2 td.column1 .off a,
.standardTable table.pb-eval-header th.column1 .plus a,
.standardTable table.pb-eval-header th.column1 .minus a,
.standardTable table.pb-eval-header th.column1 .off a,
.standardTable tr.eval-notes-reveal th.column1 .plus a,
.standardTable tr.eval-notes-reveal th.column1 .minus a,
.standardTable tr.eval-notes-reveal th.column1 .off a {
    display: block;
    width: 24px;
    height: 24px;
    text-indent: -9999px;
}

.standardTable table.columns2 td.column1 .off a,
.standardTable table.pb-eval-header th.column1 .off a,
.standardTable tr.eval-notes-reveal th.column1 .off a {
    background: url(/img/plus_minus_off.gif) no-repeat 0 100%;
}

.standardTable table.columns2 td.column1 .minus a,
.standardTable table.pb-eval-header th.column1 .minus a,
.standardTable tr.eval-notes-reveal th.column1 .minus a {
    background: url(/img/plus_minus_off.gif) no-repeat 0 50%;
}

.standardTable table.columns2 td.column1 .plus a,
.standardTable table.pb-eval-header th.column1 .plus a,
.standardTable tr.eval-notes-reveal th.column1 .plus a {
    background: url(/img/plus_minus_off.gif) no-repeat 0 0;
}

/*
--------------------------------------
5 column standard table - Progress Log
--------------------------------------
*/

.standardTable table.columns5 th {
    background: url(/img/standardTableHeader_bg.gif) repeat-x 0 50%;
    padding: 4px 10px;
    font-weight: bold;
    color: #000;
    font-size: 0.9em;
}
.standardTable table.columns5 td {
    padding: 2px 10px;
    font-size: 0.9em;
}

.standardTable table.columns5 tr.even {
    background: #f7fbff;
}

.standardTable table.columns5 td.columnDateLogged {
    width: 85px;
}

.standardTable td.columnDateOccurred {
    width: 87px;
}

.standardTable table.columns5 td.columnDescription {
    width: 214px;
}

.standardTable table.columns5 td.columnReflectiveAccount {
    width: 53px;
}

.standardTable table.columns5 td.columnLoggedBy {
    width: 173px;
}

.standardTable td.columnAdditional {
    width: 60px;
}

.standardTable table.columns5 td.summaryTitle {
    width: 300px;
}

.standardTable table.columns5 td.accessRights {
    width: 120px;
}

/*
------------------------------------------------------------
5 column standard table - Clinical Supervisor & Student Home
------------------------------------------------------------
*/

.standardTable td.columnTask {
    width: 120px;
}

#compClaims td.columnDescription {
    width: 375px;
}

.cclaim,
.qsamp {
    font-weight: bold;
    padding-left: 5px;
}

/*
--------------------
progress table
--------------------
*/

.progressTable table th,
.progressTable table td,
#keyTable table th,
#keyTable table td {
    height: 20px;
    padding: 0 10px;
    line-height: 20px;
}

.progressTable table th,
#keyTable table th {
    background: #415a96;
    color: #fff;
    border: 1px solid #415a96;
    border-right-color: #5576b6;
}

.progressTable table td.columnUnitDescription {
    width: 375px;
}

.progressTable table .columnTotal,
.progressTable table .columnPeer,
.progressTable table .columnNat {
    width: 20px;
    text-align: center;
    padding: 0 4px;
}

.progressTable ul {
    list-style: none;
}

.progressTable li {
    float: left;
    /* width: 16px; */
    text-align: center;
    /* background: url(/img/progressBars.jpg) no-repeat 50% 0; */
    text-indent: -9999px;
}

.progressTable li.progressUnit1 {
    background-position: 50% 0;
}

.progressTable li.progressUnit1.first {
    background-position: 0 0;
}

.progressTable li.progressUnit1.last {
    background-position: 100% 0;
}

.progressTable li.progressUnit2 {
    background-position: 50% -20px;
}

.progressTable li.progressUnit2.first {
    background-position: 0 -20px;
}

.progressTable li.progressUnit2.last {
    background-position: 100% -20px;
}

.progressTable li.progressUnit3 {
    background-position: 50% -40px;
}

.progressTable li.progressUnit3.first {
    background-position: 0 -40px;
}

.progressTable li.progressUnit3.last {
    background-position: 100% -40px;
}

.progressTable li.progressUnit4 {
    background-position: 50% -60px;
}

.progressTable li.progressUnit4.first {
    background-position: 0 -60px;
}

.progressTable li.progressUnit4.last {
    background-position: 100% -60px;
}

.progressTable li.progressUnit5 {
    background-position: 50% -80px;
}

.progressTable li.progressUnit5.first {
    background-position: 0 -80px;
}

.progressTable li.progressUnit5.last {
    background-position: 100% -80px;
}

/* Modified graph using percentages */
.progressTable li.progress1,
#keyTable .progress1 {
    background-color: gray;
    text-indent: -9999px;
}
.progressTable li.progress2,
#keyTable .progress2 {
    background-color: blue;
    text-indent: -9999px;
}
.progressTable li.progress3,
#keyTable .progress3 {
    background-color: navy;
    text-indent: -9999px;
}
.progressTable li.progress4,
#keyTable .progress4 {
    background-color: lime;
    text-indent: -9999px;
}
.progressTable li.progress5,
#keyTable .progress5 {
    background-color: green;
    text-indent: -9999px;
}
.progressTable li.progress6,
#keyTable .progress6 {
    background-color: yellow;
    text-indent: -9999px;
}
.studentName p {
    margin: 0px;
    margin-top: 20px;
    font-weight: bold;
}
.progressTable table td.columnProgress {
    padding: 0px 0px;
}
/* END - Modified graph using percentages */

.starsLink {
    width: 100px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
    cursor: pointer;
}

.stars0,
.stars1,
.stars2,
.stars3,
.stars4,
.stars5 {
    background: url(/img/blue_stars.png) no-repeat 0 -80px;
    width: 100px;
    height: 20px;
    text-indent: -9999px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
}

.stars0 {
    background-position: 0 -80px;
}

.stars1 {
    background-position: 0 -60px;
}

.stars2 {
    background-position: 0 -40px;
}

.stars3 {
    background-position: 0 -20px;
}

.stars4 {
    background-position: 0 -0px;
}

/*Submit Buttons*/
.button,
.button-greyed,
table.pb-evaluate .button {
    font-weight: bold;
    height: 32px;
    width: auto;
}

.button span {
    background-color: #ffb011;
    border-radius: 1rem;
    padding: 8px 0 8px 22px;
}

.button a {
    color: #000;
    text-decoration: none;
    background-color: #ffb011;
    border-radius: 1rem;
    line-height: 32px;
    padding: 8px 22px 8px 0;
}

/*http://www.bestcssbuttongenerator.com*/
table.pb-evaluate .button,
.behaviours-action .button,
#add-peer.button,
#new-peer-eval.button,
.new-peer-eval .button,
#save-peer .button,
#save-peer .button-left,
#cancel-peer .button {
    -moz-box-shadow: 1px 2px 5px 0px #d4d6d3;
    -webkit-box-shadow: 1px 2px 5px 0px #d4d6d3;
    box-shadow: 1px 2px 5px 0px #d4d6d3;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.05, #fdb10e),
        color-stop(1, #f99e02)
    );
    background: -moz-linear-gradient(top, #fdb10e 5%, #f99e02 100%);
    background: -webkit-linear-gradient(top, #fdb10e 5%, #f99e02 100%);
    background: -o-linear-gradient(top, #fdb10e 5%, #f99e02 100%);
    background: -ms-linear-gradient(top, #fdb10e 5%, #f99e02 100%);
    background: linear-gradient(to bottom, #fdb10e 5%, #f99e02 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdb10e', endColorstr='#f99e02',GradientType=0);
    background-color: #fdb10e;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    border-radius: 23px;
    border: 2px solid #efb551;
    display: inline-block;
    cursor: pointer;
    color: #050505;
    padding: 5px 16px;
    text-decoration: none;
    float: right;
    height: 25px;
    line-height: 1em;
}

#save-peer {
    height: 25px;
    padding-right: 2em;
    padding-left: 2em;
    width: 3em;
    float: right;
}

#cancel-peer {
    height: 25px;
    padding-right: 2em;
    padding-left: 2em;
    width: 3em;
    float: right;
}

/*#save-peer .button-left{
  float:left;
  font-weight: bold;
}*/

.behaviours-action .button {
    line-height: 0em;
    float: none;
}

#new-peer-eval.button-greyed,
.new-peer-eval .button-greyed {
    float: right;
}

.button-greyed,
.disabled-submit-stage-button {
    -moz-box-shadow: 1px 2px 5px 0px #d4d6d3;
    -webkit-box-shadow: 1px 2px 5px 0px #d4d6d3;
    box-shadow: 1px 2px 5px 0px #d4d6d3;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.05, #acacac),
        color-stop(1, #999999)
    );
    background: -moz-linear-gradient(top, #acacac 5%, #999999 100%);
    background: -webkit-linear-gradient(top, #acacac 5%, #999999 100%);
    background: -o-linear-gradient(top, #acacac 5%, #999999 100%);
    background: -ms-linear-gradient(top, #acacac 5%, #999999 100%);
    background: linear-gradient(to bottom, #acacac 5%, #999999 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acacac', endColorstr='#999999',GradientType=0);
    background-color: #acacac;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    border-radius: 23px;
    border: 2px solid #909090;
    display: inline-block;
    cursor: default;
    color: #666669;
    /*font-family:Arial;
  font-size:15px;
  font-weight:bold;*/
    padding: 5px 16px;
    text-decoration: none;
    height: 25px;
    line-height: 1em;
}

.disabled-submit-stage-button {
    float: right;
    cursor: none;
}

.gnotelink {
    float: right;
    cursor: pointer;
    color: blue;
}

.gnotelinkDoc {
    float: left;
    cursor: pointer;
    color: white;
    text-decoration: underline;
}

.reflectiveAccount,
.reasonableAdjustment {
    cursor: pointer;
    margin: 0px auto;
    width: 15px;
    display: flex;
    justify-content: center;
}

.floatingMessage {
    width: 340px;
    color: #fff;
    cursor: move;
    z-index: 100;
    position: absolute;
    left: 400px;
    display: none;
    border-radius: 0.5rem;
}

.floatingMessageReflectiveAccount,
.floatingMessageBackground {
    background-color: rgba(46, 88, 159, 1);
}

.floatingMessageReasonableAdjustment {
    background-color: #d22b2b;
}

.floatingMessageHeader {
    justify-content: space-between;
    display: flex;
    padding: 10px 30px;
}

.floatingMessageHeaderText {
    margin: 0;
    color: white;
    font-size: 1rem;
}

.floatingMessageCancel {
    cursor: pointer;
    color: white;
}

.floatingMessageSubheader {
    color: white;
    text-decoration: underline;
}

.floatingMessage .noteContent,
.floatingMessage .reflectAcctNote,
.floatingMessage .reasonableAdjustmentNote {
    width: 280px;
    padding: 0 30px 10px 30px;
    min-height: 82px;
    font-size: 0.9em;
}

.floatingMessage .noteContent p,
.floatingMessage .reflectAcctNote p,
.floatingMessage .reasonableAdjustmentNote p {
    line-height: 1.5em;
    font-size: 1.1em;
}

.skillActions {
    cursor: pointer;
    margin: 0px auto;
    width: 15px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

/*
  Note #2
  Had real problem with IE 7 and positioning of the floating
  message box. Wrapping the floating message div in a relatively
  positioned div seemed to fix things.
*/

.cNoteWrap {
    position: relative;
}

#admin input,
#admin select {
    width: 250px;
    margin-left: 15px;
}

#admin select {
    width: 255px;
    margin-left: 15px;
}

#admin fieldset {
    margin: 0px auto;
    border: 1px solid #c7c7c7;
    padding: 15px;
    margin-bottom: 10px;
}

/* Debug Styles */
#debug {
    text-align: left;
    margin-left: 2em;
    font-size: 1.2em;
}

#wphandbook {
    float: right;
    margin-top: -60px;
}

.hint {
    color: #999;
}

#qa-sampled {
    position: relative;
    float: right;
    width: 23px;
    height: 26px;
    text-indent: -9999px;
    /*margin-top: -12px;*/
    margin-top: -5px;
    cursor: pointer;
}

.qa-unsampled {
    background-image: url("/images/sampled-icon.png");
    background-position: 0px;
}

.qa-sample-unsuccessfull {
    background-image: url("/images/sampled-icon.png");
    background-position: 25px;
}

.qa-sample-successfull {
    background-image: url("/images/sampled-icon.png");
    background-position: -25px;
}

.readOnlyInput {
    pointer-events: none;
    opacity: 0.5;
}

.pagination {
    display: flex;
    justify-content: center;
}

.pageItem {
    outline: 1px solid rgb(46, 88, 159);
    background-color: white;
    height: 24px;
    width: 24px;
    text-align: center;
    vertical-align: middle;
}

.pageFirst {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.pageLast {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.pageLink {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
}

.pageLink:hover {
    text-decoration: underline;
}

.pageActive {
    background-color: rgb(46, 88, 159);
    color: white;
}