/*
	Copyright (C) 1999-2025 Empresa Limited - All Rights Reserved
	This resource is subject to the terms of the e-StudentTracker Full Code Access license.				
	A copy of this license can be found at:
		http://www.e-studenttracker.co.uk/Licenses/Full-Code-Access/
		licensing@e-studenttracker.co.uk
*/

@import url(shared.css);

/*
    HTML Tags
*/

html, body {
    margin: 0;
    padding: 0;
}

body {
    color: #212121;
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    line-height: 16px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

h1 {
    color: #333;
    display: none;
    font-size: 22px;
    height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 11px;
    text-transform: uppercase;
}

h2 {
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

    h2 input.textbox {
        font-size: 18px;
        font-weight: bold;
        line-height: 18px;
        margin: 0 0 8px;
        padding: 0;
        text-transform: uppercase;
        width: 95%;
    }

h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    margin: 0 0 8px;
    padding: 0;
    text-transform: uppercase;
}

h4 {
}

h5 {
    font-size: 13px;
    font-weight: bold;
    background-color: #ccc;
    border: 1px double #aaa;
    padding: 3px;
    text-align: left;
}

h6 {
}

p {
    margin: 0;
    padding: 0 0 16px;
}

span {
    margin: 0;
    padding: 0;
}

a {
    color: #000;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    text-decoration: none;
}

.noTouchEvents a:hover {
    color: #111;
    text-decoration: underline;
}

a img {
    border: 0 none;
}

ul {
}

    ul li {
    }

input, textarea, select {
    outline: none;
}

textarea {
    resize: none;
}

/*
    Mobile tabs
*/

.mobileTabs {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 0 0 16px;
    overflow: hidden;
}

    .mobileTabs a.option {
        display: block;
        height: 0;
        line-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0 16px;
        transition: height 0.5s, line-height 0.5s, opacity 0.5s;
    }

.mobileTabs-open a.option {
    height: 32px;
    line-height: 32px;
    opacity: 1;
}

.mobileTabs a.selected {
    background: #f1f1f1 url(../images/icons/icon-mobileTabs.png) no-repeat scroll right center;
    color: #212121;
    height: 32px;
    line-height: 32px;
    opacity: 1;
}

/*
    Generic
*/

.breakWord {
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.missingImage {
    background: repeating-linear-gradient(45deg, #ccc, #ccc 10px, #ddd 10px, #ddd 20px);
    background-color: #ccc;
}

.spacer {
    clear: both;
    height: 11px;
    margin: 0;
    padding: 0;
    width: 100%;
}


.strikeThrough {
    text-decoration: line-through !important;
}

a.asc {
    background: transparent url(../images/icons/asc.png) no-repeat scroll right center;
    padding: 0 20px 0 0;
}

a.desc {
    background: transparent url(../images/icons/desc.png) no-repeat scroll right center;
    padding: 0 20px 0 0;
}

a.emailButton, a.sharingButton {
    width: 20px;
    height: 20px;
    overflow: hidden;
    display: inline-block;
    background: transparent url(../images/icons/email.png) no-repeat scroll center 5px;
}

    a.emailButton.dark, a.sharingButton.dark {
        background-position: center -15px !important;
    }

    a.emailButton.padded, a.sharingButton.padded {
        margin-right: 5px;
    }

a.sharingButton {
    background: transparent url(../images/icons/share.png) no-repeat scroll center 5px;
    margin: 12px;
}

.buttons a.sharingButton.right {
    margin: 3px 12px 3px;
}

.centered {
    text-align: center;
}

.lefted {
    text-align: left;
}

.righted {
    text-align: right;
}

.bottomed {
    vertical-align: bottom;
}

.middled {
    vertical-align: middle;
}

.topped {
    vertical-align: top;
}

.nowrap, .noWrap, .softNoWrap {
    white-space: nowrap !important;
}

@media(max-width: 924px) {
    .softNoWrap {
    white-space: initial !important;
    }
}

.information {
    cursor: help;
}

.recipient {
    background: #555;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    margin: 2px 0;
    padding: 6px 6px 5px 6px;
}

    .recipient:empty {
        display: none;
    }

    .recipient a {
        background: transparent url(../images/icons/remove.png) no-repeat scroll 0 0;
        display: inline-block;
        font-size: 0;
        height: 20px;
        line-height: 12px;
        margin: 0 0 2px 0;
        padding: 0;
        vertical-align: middle;
        width: 20px;
    }

        .recipient a.swap {
            background-image: url(../images/icons/swap.png);
        }

.noTouchEvents .recipient a:hover {
    background-position: 0 -26px;
}

.navigation {
    background: #555;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    margin: 2px 0;
    padding: 6px 12px 5px 12px;
}

    .navigation:hover, .navigation.active {
        background-color: #000;
        color: #fff !important;
        text-decoration: none !important;
    }

    .navigation .fa {
        color: #fff !important;
        font-size: 100% !important;
        margin: -8px;
        vertical-align: text-bottom;
    }

.navigationicon .fa {
    color: #808080 !important;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    width: 18px !important;
    margin: 4px;
}

.navigation.student {
    padding: 0;
    color: white !important;
    font-size: 18px !important;
}

.print-enabled {
    background-image: url(../images/icons/print-enabled.png);
}

.print-disabled {
    background-image: url(../images/icons/print-disabled.png);
}

.printOnly {
    display: none;
}

.fullWidth {
    width: 100% !important;
}

.halfWidth {
    width: 50% !important;
}

.longTextBox {
    width: 75% !important;
    min-width: 300px;
    max-width: 600px;
}

.mediumTextBox {
    width: 50% !important;
    max-width: 300px;
    min-width: 200px;
}

.shortTextBox {
    width: 20% !important;
    max-width: 200px;
    min-width: 120px;
}

.smallTextBox {
    width: 10% !important;
    max-width: 60px !important;
    min-width: 60px !important;
}

.radioButtonList {
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

    .radioButtonList li {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

.bordered {
    border: 1px solid #aaa;
}

.highlight {
    background-color: #feffad !important;
}

    .highlight td {
        background-color: #feffad;
    }

    .highlight {
        border-color: #ede300 !important;
    }

.greenBorder {
    border: 2px solid #6fb366 !important;
}

.orangeBorder, .amberBorder {
    border: 2px solid #e28830 !important;
}

.redBorder {
    border: 2px solid #e63d43 !important;
}
    .redBorder.padded {
        padding: 8px;
    }

.greyBorder {
    border: 2px solid #e0e0e0 !important;
}

.blackBorder {
    border: 2px solid #545454 !important;
}

.noBorder {
    border: 0 none !important;
}

.noPadding, .noPadding td, noPadding tr, .noPadding th {
    padding: 0 !important;
}

.green {
    color: #6fb366 !important;
}

.orange, .amber {
    color: #e28830 !important;
}

.red {
    color: #e63d43 !important;
}

.grey {
    color: #808080 !important;
}

.lightGrey {
    color: #e0e0e0 !important;
}

.white {
    color: #ffffff !important;
}

tr.errorData {
}

    tr.errorData td,
    tr td.errorData {
        background-color: #ffc0c0 !important;
    }

        tr.errorData td input,
        tr.errorData td select,
        tr.errorData td textarea,
        tr td.errorData input,
        tr td.errorData select,
        tr td.errorData textarea {
            border: 1px solid #e63d43 !important;
        }

tr.unsavedData {
}

    tr.unsavedData td,
    tr td.unsavedData {
        background-color: #ffdbc2 !important;
    }

        tr.unsavedData td input,
        tr.unsavedData td select,
        tr.unsavedData td textarea,
        tr td.unsavedData input,
        tr td.unsavedData select,
        tr td.unsavedData textarea {
            border: 1px solid #e28830 !important;
        }

tr.savedData {
}

    tr.savedData td,
    tr td.savedData {
        background-color: #d0f9cb !important;
    }

        tr.savedData td input,
        tr.savedData td select,
        tr.savedData td textarea,
        tr td.savedData input,
        tr td.savedData select,
        tr td.savedData textarea {
            border: 1px solid #6fb366 !important;
        }

.orangeBg, .amberBg {
    background-color: #ffdbc2 !important;
}

.redBg {
    background-color: #ffc0c0 !important;
}

.greenBg {
    background-color: #d0f9cb !important;
}

table.darkText,
table.darkText tr td,
table.darkText tr th,
table.darkText thead tr th,
table.darkText tbody tr td {
    color: #212121 !important;
}

.lsStudentIcon {
    background: url(../images/icons/myModules-learnersupport.png) no-repeat center top;
    width: 20px !important;
    height: 20px !important;
    display: block;
    margin-right: 3px;
}

    .lsStudentIcon:hover {
        background-position: center -40px;
    }

.courseStatus.active,
.courseStatus.active td {
}

.courseStatus.completed,
.courseStatus.completed td, .courseStatus.completed td a {
    background-color: #6fb366;
    color: #fff;
}

    .courseStatus.completed td.smallIcon {
        background-color: #fff;
    }

.courseStatus.transferred,
.courseStatus.transferred td, .courseStatus.transferred td a {
    background-color: #e28830;
    color: #fff;
}

    .courseStatus.transferred td.smallIcon {
        background-color: #fff;
    }

.courseStatus.withdrawn,
.courseStatus.withdrawn td, .courseStatus.withdrawn td a {
    background-color: #e63d43;
    color: #fff;
}

    .courseStatus.withdrawn td.smallIcon {
        background-color: #fff;
    }

.courseStatus.other,
.courseStatus.other td, .courseStatus.other td a {
    background-color: #e28830;
    color: #fff;
}

    .courseStatus.other td.smallIcon {
        background-color: #fff;
    }

.greenBackground,
tr.hoverState td.greenBackground,
tr.greenBackground td,
tr td.hoverState.greenBackground {
    background-color: #6fb366 !important;
}

.orangeBackground, .amberBackground,
tr.hoverState td.orangeBackground, tr.hoverState td.amberBackground,
tr.orangeBackground td, tr.amberBackground td,
tr td.hoverState.orangeBackground, tr td.hoverState.amberBackground {
    background-color: #e28830 !important;
}

.redOrangeBackground,
tr.hoverState td.redOrangeBackground,
tr td.hoverState.redOrangeBackground {
    background-color: #e4633a !important;
}

.redBackground,
tr.hoverState td.redBackground,
tr.redBackground td,
tr td.hoverState.redBackground {
    background-color: #e63d43 !important;
}

.greyBackground,
tr.hoverState .greyBackground,
tr.greyBackground td,
tr td.hoverState.greyBackground {
    background-color: #808080 !important;
}

.yellowBackground,
tr.hoverState .yellowBackground,
tr.yellowBackground td,
tr td.hoverState.yellowBackground {
    background-color: yellow !important;
    color: #000 !important;
}

.darkText {
    color: #212121 !important;
}

.lightText {
    color: #fff !important;
}

.largeText {
    font-size: 18px;
    font-weight: bold;
}

.error, .errorLabel {
    color: #ff0000;
}

.errorLabel {
    padding: 8px;
    font-weight: bold;
}

.notstarted td {
    background-color: #ffbe7e;
}

.warning {
    background-color: #ffc0c0;
}

.warningBox {
    border: 1px solid #ffc0c0;
    padding: 8px;
    margin: 0 8px;
}

.pending {
    background-color: #ffa500;
}

.autoUpdate {
    display: none;
}

input.color {
    cursor: pointer;
    width: 16px;
    font-size: 0 !important;
    border: 1px solid #222 !important;
    border-radius: 0 !important;
}

.dropper {
    position: relative;
    top: 2px;
    display: inline-block;
    margin: 0 0 0 5px;
}

.invisibleOverlay {
    background: transparent url(../Images/CSS/invisibleOverlay-background.png) repeat scroll 0 0;
    z-index: 1000;
}

.clear {
    clear: both;
    float: none;
    font-size: 0;
    height: 1px;
    line-height: 0;
    margin: 0 0 -1px;
    padding: 0;
}

.separator {
    border-top: 1px dashed #e1e1e1;
    float: left;
    font-size: 0;
    height: 1px;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.left {
    float: left;
    width: auto;
}

.right {
    float: right;
    width: auto;
}

.hidden {
    display: none;
}

.hiddenForced {
    display: none !important;
}

.updateOnPopupClose {
    display: none;
}

.paginator {
    border: 1px solid #e1e1e1;
    display: block;
    margin: 11px 0 0;
    padding: 11px;
}

    .paginator .details {
        float: left;
        margin: 0;
        padding: 0;
        width: auto;
    }

    .paginator .links {
        float: right;
        margin: 0;
        max-width: 100%;
        padding: 0;
        width: auto;
    }

        .paginator .links a {
            background-color: #e1e1e1;
            border: 1px solid #e1e1e1;
            display: inline-block;
            left;
            margin: 2px 2px 0;
            padding: 2px 4px;
        }

            .paginator .links a.active {
                background-color: #fff;
                color: #212121;
                cursor: default;
                text-decoration: none;
            }

.responsiveTable {
    overflow: auto;
    max-height: 75vh;
    position: relative;
}

.responsiveTable,
.responsiveTable_Med,
.responsiveTable_Sma,
.responsiveTable_XSma {
    border-right: 1px solid #e1e1e1;
    position: relative;
}

.responsiveTableGradient {
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 100;
}

.responsiveTableGradient_scrollDown,
.responsiveTableGradient_scrollRight,
.responsiveTableGradient_scrollUp,
.responsiveTableGradient_scrollLeft {
    display: block;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 350ms;
}

.responsiveTableGradient_scrollDown { 
    background: transparent linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) right center repeat-x; 
    bottom: 0;
    left: 0;
    height: 16px;
    right: 0;
}

.responsiveTableGradient_scrollRight {
    background: transparent linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) right center repeat-y;
    bottom: 0;
    right: 0;
    top: 0;
    width: 16px;
}

.responsiveTableGradient_scrollUp {
    background: transparent linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) right center repeat-x;
    height: 16px;
    left: 0;
    right: 0;
    top: 0;
}

.responsiveTableGradient_scrollLeft {
    background: transparent linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) right center repeat-y;
    bottom: 0;
    left: 0;
    top: 0;
    width: 16px;
}

.responsiveTableFullHeight {
    max-height: none !important;
}

@media(max-width: 639px) {
    .responsiveTableFullHeight_Sma {
        max-height: none !important;
    }
}

@media(max-width: 924px) {
    .responsiveTable_Med {
        overflow: auto;
        max-height: 75vh;
        max-width: 100%;
    }

        .responsiveTable_Med > table {
            min-width: 924px;
        }
}

@media(max-width: 639px) {
    .responsiveTable_Sma {
        overflow: auto;
        max-height: 75vh;
        max-width: 100%;
    }

        .responsiveTable_Sma > table {
            min-width: 639px;
        }
}

@media(max-width: 399px) {
    .responsiveTable_XSma {
        overflow: auto;
        max-height: 75vh;
        max-width: 100%;
    }

        .responsiveTable_XSma > table {
            min-width: 399px;
        }
}

/*.scrollingTable {
    overflow-x: scroll;
    width: 100%;
}*/

.scroll-X {
    overflow-x: auto;
    width: 100%;
}

span.trackingOption {
    border: 1px solid #212121;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    text-align: center;
    vertical-align: middle;
    width: 26px;
}

.lowerCase {
    text-transform: lowercase;
}

.printButton {
    float: left;
    margin: 0;
    padding: 8px 0;
    width: 100%;
}

    .printButton a {
        background: transparent url(../images/icons/print.gif) no-repeat scroll right center;
        display: inline;
        float: right;
        height: 32px;
        line-height: 32px;
        margin: 0 16px 0 0;
        padding: 0 40px 0 0;
        width: auto;
    }

#progressIndicator,
.progressIndicator {
    background: rgba(0, 0, 0, 0.8) none no-repeat scroll center center;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 1;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;

    /*-webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);*/ /* looks nice but some gpus struggle */
}
.progressIndicator {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.25s;
}
.progressIndicator.shown {
    opacity: 1;
    pointer-events: all;
}

#outerWrap {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: auto;
}

#scrollingContent {
    float: left;
    margin: 0;
    min-width: 128px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: 100%;
}

#scrollingContentFooter {
    width: 1px;
    display: none;
}

    @media(max-width: 400px) {
        #scrollingContentFooter {
            margin-bottom: 40px;
            display: block;
        }
    }

.success {
    background: #eeffee none no-repeat scroll 0 0;
    border: 1px solid #009900;
    color: #009900;
    margin: 0 0 8px;
    padding: 8px;
}

table tbody tr td.success {
    background: #eeffee none no-repeat scroll 0 0;
    border: 1px solid #009900;
    color: #009900;
    margin: 0 0 8px;
    padding: 8px;
}

.buttons {
    border: 1px solid #eaeaea;
    margin: 4px 0 0;
    padding: 4px;
}

.topButtons {
    margin: 0 0 12px;
}

.buttons a.button {
    display: inline;
    float: right;
    margin: 0 0 0 16px;
    width: auto;
}

.textbox {
    background: #eff0ed none no-repeat scroll 0 0;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    color: #333;
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    height: 28px;
    line-height: 13px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    padding: 0;
    padding-left: 4px;
    width: 100%;
    -webkit-box-sizing: border-box;
}

.shortTextbox {
    width: 46px;
}

textarea, textarea.textbox {
    background: #eff0ed none no-repeat scroll 0 0;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    color: #333;
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    height: 80px;
    line-height: 16px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    padding: 4px 4px;
    resize: none;
    width: 100%;
    -webkit-box-sizing: border-box;
}

    .textbox:focus, textarea:focus {
        border-color: #555;
        color: #333;
        outline: #555 solid 1px;
    }

    textarea.blendIn {
        background: transparent;
        border: 0 none;
        color: #212121;
    }

.aspNetDisabled, select[disabled=disabled], input.aspNetDisabled, input:disabled, .aspNetDisabled td {
    background-color: #dfe0dd !important;
    color: #777 !important;
    cursor: default !important;
}

    .aspNetDisabled.iconButton {
        cursor: not-allowed !important;
        opacity: 0.2;
    }

.warning .aspNetDisabled, .warning select[disabled=disabled], .warning input.aspNetDisabled, .warning input:disabled, .warning .aspNetDisabled td {
    color: #000 !important;
}

.pending .aspNetDisabled, .pending select[disabled=disabled], .pending input.aspNetDisabled, .pending input:disabled, .pending .aspNetDisabled td {
    color: #000 !important;
}

.ajax__tab_disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

select {
    background: #eff0ed none no-repeat scroll 0 0;
    border: 1px solid #777;
    box-sizing: border-box;
    color: #333;
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    height: 28px;
    line-height: 28px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    padding: 0 0 0 3px;
    vertical-align: middle;
    width: 100%;
    -webkit-box-sizing: border-box;
}

    select.multiSelect {
        height: auto;
        min-height: 28px;
    }

a.button {
    color: #ec008c;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-transform: uppercase;
}

input:focus, select:focus, textarea:focus {
    border-color: #555;
    color: #333;
    outline: #555 solid 1px;
}

input[type=radio]:focus {
    border: 0 none;
    outline: 0 none;
}

.form {
    margin: 0;
    padding: 11px;
}

.formNoPadding {
    padding: 0;
}

    .form .group {
        border: 1px solid #eff0ed;
        margin: 4px 0 0;
        padding: 11px;
    }

        .form .groupIconTitle {
            font-weight: bold;
            margin: 10px 0;
            min-height: 23px;
            padding: 6px 0 0 36px;
            position: relative;
        }

            .form .groupIconTitle .fa {
                left: 0;
                position: absolute;
                top: 0;
            }

    .form .firstGroup {
        margin: 0;
    }

    .form .row {
        box-sizing: border-box;
        float: left;
        margin: 4px 0 0;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        padding: 0 0 0 120px;
        width: 100%;
        -webkit-box-sizing: border-box;
    }

        .form .row.wider {
            padding-left: 140px;
        }

        .form .row.noIndent {
            padding-left: 0 !important;
        }

        .form .row .row {
            padding: 0;
        }

            .form .row .row.positionLeft {
                margin-left: -120px;
            }

    .form .halfRow {
        padding: 0 8px 0 120px;
        width: 50%;
    }

        .form .halfRow.smaller {
            width: 40%;
        }

        .form .halfRow.narrow {
            padding-left: 140px;
        }

        .form .halfRow.shuffleRight {
            padding-left: 30px;
        }

    .form .fifthRow {
        width: 20%;
    }

    .form .quarterRow {
        width: 25%;
    }

    .form .thirdRow {
        width: 33.333%;
    }

    .form .twoThirdsRow {
        width: 66.666%;
    }

    .form .threeQuarterRow {
        width: 75%;
    }

        .form .threeQuarterRow.narrow {
            padding-left: 90px;
        }

    .form .buttonRow {
        padding: 0;
    }

    .form label {
        display: block;
        float: left;
        margin: 0 0 0 -120px;
        padding: 3px 0;
        width: 120px;
    }

        .form .longCheckbox label {
            min-width: 120px;
            width: auto;
        }

        .form label.wider {
            width: 140px;
            margin-left: -140px;
        }

        .form label.narrow {
            width: 130px !important;
        }

    .form .thirdRow label {
        width: 70px !important;
    }

    .form .row .row label {
        margin-left: 0;
        width: 150px;
    }

        .form .row .row label.wide {
            margin-left: 0;
            width: 165px;
        }

        .form .row .row label.widest {
            margin-left: 0;
            width: 195px;
        }

    .form label.calendarField {
        padding: 6px 0;
    }

@media (max-width: 768px) {
    .form .row {
        padding: 0;
    }

        .form .row label {
            float: none;
            margin: 0;
        }
}

input.calendarField {
    background: #eff0ed url(../images/icons/button-calendar.png) no-repeat right 0 !important;
    border: 1px solid #ccc !important;
    border-radius: 0 5px 5px 0 !important;
    cursor: pointer !important;
    height: 32px !important;
    padding: 0 32px 0 4px !important;
    width: 120px !important;
}
    input.aspNetDisabled.calendarField, .aspNetDisabled input.calendarField {
        background-color: #dfe0dd !important;
        color: #777 !important;
        cursor: default !important;
    }


input.timepicker {
    background: #eff0ed url(../images/icons/button-clock.png) no-repeat right 0 !important;
}

.noTouchEvents input.calendarField:hover,
.noTouchEvents input.timepicker:hover {
    background-position: right -32px !important;
}

input.calendarField:active, input.calendarField:focus,
input.timepicker:active, input.timepicker:focus {
    background-position: right -64px !important;
    outline: none !important;
}

.form .checkboxRow {
    padding: 0;
    width: 120px;
}

    .form .checkboxRow.longer {
        width: 400px;
    }

.form .firstCheckboxRow {
    display: inline;
    margin: 4px 0 0 120px;
}

.form .checkboxRow .checkbox {
    border: 0 none;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}

.form .checkboxRow label {
    float: left;
    margin: 0;
    padding: 0 0 0 4px;
    width: auto;
}

.form .radiobuttonlist {
    float: left;
    margin: 0;
    padding: 0;
    width: 200px;
}

    .form .radiobuttonlist input {
        border: 0 none;
        display: inline-block;
        float: none;
        margin: 0;
        padding: 0;
        vertical-align: middle;
        width: auto;
    }

    .form .radiobuttonlist label {
        display: inline-block;
        float: none;
        margin: 0;
        padding: 0 0 0 4px;
        vertical-align: middle;
        width: auto;
    }

.form .radiolist {
    border: 0 none !important;
    border-collapse: collapse;
}

    .form .radiolist td {
        border: 0 none !important;
        vertical-align: middle;
    }

    .form .radiolist input {
        margin: 0 !important;
        padding: 0;
        vertical-align: middle;
        width: auto !important;
    }

    .form .radiolist label {
        margin: 0 !important;
        padding: 0;
        vertical-align: middle;
        width: auto !important;
    }

.form .checkboxlist {
    border: 0 none !important;
    border-collapse: collapse;
}

    .form .checkboxlist td {
        border: 0 none !important;
        vertical-align: middle;
    }

    .form .checkboxlist input {
        margin: 0 !important;
        padding: 0;
        vertical-align: middle;
        width: auto !important;
    }

    .form .checkboxlist label {
        margin: 0 !important;
        padding: 0;
        vertical-align: middle;
        width: auto !important;
        padding-left: 6px;
    }

.form .row select.time {
    width: 64px;
}

.form .row .checkboxList {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

    .form .row .checkboxList li {
        float: left;
        margin: 0;
        padding: 2px 0;
        width: 120px;
    }

    .form .row .checkboxList input {
        float: left;
        margin: 0;
        padding: 0;
        width: auto;
    }

    .form .row .checkboxList label {
        float: left;
        font-weight: normal;
        margin: 0;
        padding: 0 0 0 4px;
        width: calc(100% - 37px);
        margin-right: 20px;
    }

.form .row .input input, .form .row .input select, .form .row .input textarea {
    float: left;
}

span.error {
    background: #e63d43 none no-repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    margin: 0;
    padding: 6px;
    width: auto;
}

input.error, input.textbox.error, select.error, table.error, textarea.error {
    border: 1px solid #e63d43 !important;
    color: inherit !important;
}

    input.error:focus, select.error:focus, table.error:focus, textarea.error:focus {
        outline: 1px solid #e63d43;
    }

input.warning, input.textbox.warning, select.warning, table.warning, textarea.warning {
    border: 1px solid #ffc0c0 !important;
    color: inherit !important;
}

    input.warning:focus, select.warning:focus, table.warning:focus, textarea.warning:focus {
        outline: 1px solid #ffc0c0;
    }

div.fauxInput {
    border: 0 none;
    margin: 0;
    padding: 8px 3px;
}

table.error {
    border: 1px solid #e63d43 !important;
    color: inherit !important;
}

    table.error tr td {
        border: 1px solid #e63d43 !important;
    }

table.warning {
    border: 1px solid #ffc0c0 !important;
    color: inherit !important;
}

    table.warning tr td {
        border: 1px solid #ffc0c0 !important;
    }

table.pending {
    border: 1px solid #ffa500 !important;
    color: inherit !important;
}

    table.pending tr td {
        border: 1px solid #ffa500 !important;
    }

.pagination {
    border: 1px solid #ebebeb;
    display: block;
    margin: 4px 0 0;
    padding: 4px 8px;
    text-align: center;
}

    .pagination span, .pagination .link {
        border: 1px solid #545454;
        background-color: #545454;
        color: #fff;
        display: inline-block;
        font-weight: bold;
        margin: 0 2px 0 0;
        padding: 2px 4px;
        width: auto;
    }
        .pagination .link {
            padding: 4px 8px;
            border-radius: 4px;
            min-width: 12px;
        }
            .pagination .link:hover, .pagination .link.active {
                background-color: #fff;
                color: #000;
                text-decoration: none;
            }

    .pagination a {
        border: 1px solid #808080;
        display: inline-block;
        font-weight: bold;
        margin: 0 2px 0 0;
        padding: 2px 4px;
        width: auto;
    }

    .pagination .itemCount {
        border: 0 none;
        display: block;
        margin: 0;
        padding: 0 8px 4px;
        text-align: center;
    }

    .pagination a .fas,
    .pagination span .fas {
        color: inherit !important;
        font-size: 13px !important;
        height: auto !important;
        line-height: 1 !important;
        width: auto !important;
    }

table {
    border-collapse: collapse;
    border: 1px solid #aaa !important;
}

    table.fullWidth {
        width: 100%;
    }

    table tr th {
        background-color: #ccc;
        border: 1px double #aaa;
        padding: 3px;
        text-align: left;
    }

        table tr th.mainHeading {
            background-color: #555;
            border: 1px double #212121;
            color: #fff;
        }

    table tr td {
        background-color: #fff;
        border: 1px solid #e1e1e1;
        padding: 3px;
    }

        table tr td.noBorder {
            border: 0 none !important;
        }

        table tr td.alternate, table tr.alternate td {
            background-color: #f1f1f1;
        }

            table tr td.heading, table tr.alternate td.heading {
                background-color: #ccc;
                border: 1px solid #aaa;
                font-weight: bold;
            }

                table tr td.heading a, table tr.alternate td.heading a, table tr th a {
                    color: #212121;
                }

        table tr td.noalternate, table tr.noalternate td {
            background-color: #fff;
        }

        table tr td.disabled a, table tr th.disabled a {
            cursor: default;
            pointer-events: none;
            text-decoration: none;
        }

    table .heading .selected {
        
    }

    table .heading .deselected .fas {
        font-weight: 400 !important;
    }

        table tr th.centered, table tr td.centered {
            text-align: center;
        }

        table tr th.righted, table tr td.righted {
            text-align: right;
        }

        table tr td.warning, table tr.warning td, table tr.alternate td.warning, table tr.alternate.warning td, div.warning {
            outline-color: #ffc0c0;
            border-color: #ffc0c0;
            background-color: #ffc0c0;
        }

    table tr td.pending, table tr.pending td, table tr.alternate td.pending, table tr.alternate.pending td, div.pending {
        background-color: #ffa500;
    }    

    table tr.active:not(.courseStatus) td, table tr:not(.courseStatus) td.active {
        background-color: #c0ffc0;
        border: 1px double #6fb366;
    }

    table tr th.blank {
        background-color: transparent;
        border: 0 none;
    }

    table tr.archived td, table tr.archived td.alternate {
        background-color: #f7f7f7; /*#ffc0c0;*/
        border: 1px double #aaa; /*#ff0000;*/
        color: #aaa;
    }

.archived a {
    color: #aaa;
}

.warningParent.warning {
    border: 1px solid #ff0000 !important;
}

    .warningParent.warning table tr td {
        border: 1px solid #ff0000 !important;
    }

    .warningParent.warning table tr th {
        border: 1px solid #ff0000 !important;
        background-color: #ff0000 !important;
        color: #fff !important;
    }

.noTouchEvents table tbody tr {
    outline: 0 solid #aaa;
}

.noTouchEvents table tbody > tr:hover {
    outline-width: 2px;
}

.noTouchEvents table.noRowHighlights > tbody > tr {
    outline: 0 none;
}

    .noTouchEvents table.noRowHighlights > tbody > tr:hover {
        outline: 0 none;
    }

.noTouchEvents table tbody > tr.noRowHighlights {
    outline: 0 none;
}

    .noTouchEvents table tbody > tr.noRowHighlights:hover {
        outline: 0 none;
    }

table.noBorder,
table.noBorderOuter,
table.noBorderKeepInner {
    border: 0 none !important;
}

    table.noBorder tr td {
        border: 0 none !important;
    }

    table.noBorderOuter > tbody > tr > td {
        border: 0 none !important;
    }


table.withPadding td {
    padding: 15px;
}

table.withoutPadding td {
    padding: 0px;
}

.settings {
    border: 1px solid #eaeaea;
    margin: 0;
    padding: 9px 11px;
}

    .settings .row {
        box-sizing: border-box;
        float: left;
        margin: 0;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        padding: 2px 0 2px 200px;
        width: 100%;
        -webkit-box-sizing: border-box;
    }

    .settings .halfRow {
        padding: 2px 8px 2px 120px;
        width: 50%;
    }

    .settings .shortLabel {
        padding: 2px 8px 2px 120px;
    }

    .settings .row label {
        float: left;
        margin: 0 0 0 -200px;
        padding: 4px 0;
        width: 200px;
    }

    .settings .halfRow label, .settings .shortLabel label {
        margin: 0 0 0 -120px;
        width: 120px;
    }

    .settings .row .textbox {
        max-width: 320px;
        vertical-align: middle;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .settings .row select {
        max-width: 320px;
        vertical-align: middle;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .settings .row input[type=checkbox] {
        margin-top: 8px;
    }

    .settings .row a {
        vertical-align: middle;
    }

    .settings .checkboxlist {
        border: 0 none !important;
        border-collapse: collapse;
    }

        .settings .checkboxlist {
            border: 0 none !important;
            display: block !important;
            float: left !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
            vertical-align: middle;
        }
        .settings .checkboxlist li {
            border: 0 none !important;
            display: block !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 2px 0 !important;
            vertical-align: middle;
        }
        .settings .checkboxlist li::after {
            clear: both;
            content: "";
            display: table;
        }

        .settings .checkboxlist input {
            float: left;
            margin: 2px 5px 0 0 !important;
            padding: 0;
            vertical-align: middle;
            width: auto !important;
        }

        .settings .checkboxlist label {
            margin: 0 !important;
            padding: 0;
            vertical-align: middle;
            width: auto !important;
        }

@media screen and (max-width: 639px) {
    .settings .row {
        padding: 2px 0;
    }

    .settings .halfRow, .group .halfRow {
        padding: 2px 0;
        width: 100%;
    }

        .settings .row label, .settings .halfRow label, .settings .row .shortLabel {
            display: block;
            float: none;
            margin: 0;
            padding: 4px 0;
            width: auto;
        }

            .settings .row label.inlineLabel {
                display: inline-block;
            }
}

.ajax__tab_xp .ajax__tab_header {
    font-family: inherit !important;
    font-size: inherit !important;
}

.ajax__tab_container .ajax__tab_header {
    background: transparent none no-repeat scroll 0 0 !important;
    float: left;
    margin: 0 0 -1px;
    position: relative;
    width: 100%;
    z-index: 1;
    cursor: pointer;
}

    .ajax__tab_container .ajax__tab_header span {
        display: inline-block;
        float: left;
        height: 26px;
        padding: 0 2px 0 0;
        width: auto;
    }

    .ajax__tab_container .ajax__tab_header .ajax__tab_disabled {
        display: none;
    }

    .ajax__tab_container .ajax__tab_header .ajax__tab_outer {
        background: transparent none no-repeat scroll 0 0;
        display: inline-block;
        float: none;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .ajax__tab_container .ajax__tab_header .ajax__tab_inner {
        background: transparent none no-repeat scroll 0 0;
        display: block;
        float: none;
        margin: 0;
        padding: 0;
    }

        .ajax__tab_container .ajax__tab_header .ajax__tab_inner .ajax__tab_tab {
            background: #545454 none no-repeat scroll 0 0;
            border: 1px solid #545454;
            color: #fff;
            display: block;
            float: none;
            font-size: inherit !important;
            font-weight: bold;
            height: auto;
            line-height: 24px !important;
            margin: 0;
            padding: 0 8px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

            .ajax__tab_container .ajax__tab_header .ajax__tab_inner .ajax__tab_tab .settingsTab {
                height: auto;
                background: #838383;
                padding: 0 8px 0 8px;
            }

    .ajax__tab_container .ajax__tab_header .ajax__tab_active {
        display: inline-block;
    }

        .ajax__tab_container .ajax__tab_header .ajax__tab_active .ajax__tab_outer {
            background: transparent none no-repeat scroll 0 0;
        }

            .ajax__tab_container .ajax__tab_header .ajax__tab_active .ajax__tab_outer .ajax__tab_inner {
                background: transparent none no-repeat scroll 0 0;
            }

.noTouchEvents .ajax__tab_container .ajax__tab_header span:not(.ajax__tab_active) .ajax__tab_outer .ajax__tab_inner .ajax__tab_tab:hover,
.noTouchEvents .ajax__tab_container .ajax__tab_header span:not(.ajax__tab_active) .ajax__tab_outer .ajax__tab_inner .ajax__tab_tab:hover .settingsTab {
    background-color: #242424;
    border-color: #242424;
}

.ajax__tab_container .ajax__tab_header .ajax__tab_active .ajax__tab_outer .ajax__tab_inner .ajax__tab_tab,
.ajax__tab_container .ajax__tab_header .ajax__tab_active .ajax__tab_outer .ajax__tab_inner .ajax__tab_tab .settingsTab {
    background: #fff none no-repeat scroll 0 0;
    border-bottom: 1px solid #fff;
    color: #242424;
}

.ajax__tab_container .ajax__tab_body {
    border: 1px solid #333 !important;
    clear: both;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 11px !important;
}

.ajax__tab_container.hideTabs {
}
    .ajax__tab_container.hideTabs .ajax__tab_header {
        display: none;
    }
    .ajax__tab_container.hideTabs .ajax__tab_body {
        border: none !important;
        padding: 0 !important;
    }

@media(min-width: 925px) {
    .tabsOnLeft.ajax__tab_container .ajax__tab_header {
        float: left;
        margin: 0;
        padding: 0;
        position: sticky;
        top: 0;
        width: 200px;
        cursor: pointer;
    }

        .tabsOnLeft.ajax__tab_container .ajax__tab_header span {
            display: block;
            width: 200px;
        }

            .tabsOnLeft.ajax__tab_container .ajax__tab_header span span {
                display: block !important;
                float: none;
                width: auto;
            }

        .tabsOnLeft.ajax__tab_container .ajax__tab_header .ajax__tab_inner .ajax__tab_tab {
            border: 1px solid #212121;
        }

        .tabsOnLeft.ajax__tab_container .ajax__tab_header .ajax__tab_active .ajax__tab_outer .ajax__tab_inner .ajax__tab_tab {
            border-bottom: 1px solid #212121;
            border-right: 1px solid #fff;
        }

    .tabsOnLeft.ajax__tab_container .ajax__tab_body {
        border: 1px solid #212121;
        clear: none;
        display: block;
        left: -1px;
        margin: 0 0 0 200px;
        position: relative;
    }
}

.studentPastoralStatus {
    float: left;
    left: 0;
    margin: 10px;
    padding: 10px 0 10px 0;
    position: relative;
    text-align: center;
    top: 0;
    width: 88px;
    z-index: 101;
    border: 1px solid #e1e1e1;
    font-weight: bold;
}

    .studentPastoralStatus a {
        background-color: #fff;
        color: #555;
        font-weight: bold;
        display: block;
        text-align: center;
        width: 100%;
    }

        .studentPastoralStatus a img {
            padding-right: 5px;
        }

.noTouchEvents .studentPastoralStatus a:hover {
    text-decoration: none;
}

.studentPastoralStatus .studentPastoralStatusList {
    border-top: 1px solid #ddd;
    float: left;
    left: 88px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 0;
    min-width: 200px;
}

    .studentPastoralStatus .studentPastoralStatusList li {
        background: #fff none no-repeat scroll 0 0;
        border: 1px solid #ddd;
        border-top: 0 none;
        float: left;
        margin: 0;
        padding: 0 5px 0 0;
        min-width: 200px;
        white-space: nowrap;
    }

        .studentPastoralStatus .studentPastoralStatusList li a {
            background: #fff none no-repeat scroll 0 0;
            color: #212121;
            float: left;
            margin: 0;
            padding: 4px;
            text-align: left;
            width: 192px;
        }

            .studentPastoralStatus .studentPastoralStatusList li a img {
                padding-right: 5px;
            }

.noTouchEvents .studentPastoralStatus .studentPastoralStatusList li a:hover {
    background-color: #f1f1f1;
    text-decoration: none;
}

.studentPastoralStatus .studentPastoralStatusList li.cancel a {
    background-color: #f1f1f1;
    color: #555;
}

.noTouchEvents .studentPastoralStatus .studentPastoralStatusList li.cancel a:hover {
    background-color: #ddd;
    color: #555;
}

.studentPastoralStatusDetails .studentPastoralStatusForms, .studentPastoral .pastoralStatus .studentPastoralStatusForms {
    padding: 20px 0 8px;
}

.studentPastoralStatusDetails .studentPastoralStatusForms .status {
    text-align: left;
}

    .studentPastoralStatusDetails .studentPastoralStatusForms .status img {
        margin: 0 6px 0 4px;
    }

.studentDetails .studentPastoralStatusDetails .studentPastoralStatusForms .statusForms .title, .studentPastoralStatusDetails .studentPastoralStatusForms .statusForms .date {
    display: none;
}

.studentPastoral .studentPastoralStatusForms .statusForms {
    max-height: 40vh;
    overflow: auto;
}

/*
    Student Selector
*/

.studentSelector {
}

    .studentSelector td {
        vertical-align: top;
    }

    .studentSelector select {
        max-width: 490px;
    }

/*
    Course Details
*/

.courseDetails, .registerDetails, .attendanceDetails {
    margin: 0;
    padding: 9px;
    /* max-width: 1020px; */
}

    .courseDetails h2, .registerDetails h2, .attendanceDetails h2 {
        margin: 0;
        padding: 0 0 8px;
        text-align: center;
    }

    .courseDetails .details, .registerDetails .details, .attendanceDetails .details {
        border: 1px solid #f1f1f1;
        margin: 8px 0 0;
        padding: 8px;
        text-align: center;
    }

        .courseDetails .details:first-child {
            margin: 0;
            margin-top: 8px;
            padding: 8px;
        }

    .courseDetails .attendees {
        border: 1px solid #f1f1f1;
        margin: 0;
        padding: 8px;
        text-align: center;
        line-height: 2;
    }

        .courseDetails .attendees .attendeeList {
            text-align: left;
        }

    .courseDetails div.timetable {
        border: 1px solid #f1f1f1;
        margin: 0;
        padding: 8px;
    }

    .courseDetails .timetable .timetable td {
        height: 39px;
    }

    .courseDetails div.attendance {
        border: 1px solid #f1f1f1;
        margin: 0;
        padding: 8px;
    }

    .courseDetails .teachersList {
        max-height: 150px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: left;
        width: 100%;
        padding: 1px;
    }

    .courseDetails .headsList {
        max-height: 150px;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        padding: 1px;
    }

    .courseDetails .details .className {
        font-weight: bold;
    }

.courseDetails .details .classDescription {
    font-weight: normal;
    font-style: italic;
    padding: 8px;
    white-space: break-spaces;
}

#studentCoursePhotos {
    clear: both;
    overflow: hidden;
    padding: 8px;
}

    #studentCoursePhotos .student {
        float: left;
        width: 88px;
        height: auto;
        text-align: center;
        margin: 0 8px 15px 0;
        overflow: hidden;
        position: relative;
    }

        #studentCoursePhotos .student .studentInner {
            width: 100%;
            text-align: center;
            height: 104px;
            margin: 0 auto;
            margin-bottom: 5px;
        }

            #studentCoursePhotos .student .studentInner a {
                width: 100%;
                text-align: center;
                height: 120px;
                margin: 0 auto;
                margin-bottom: 5px;
            }

            #studentCoursePhotos .student .studentInner img {
                max-height: 100%;
                max-width: 100%;
            }

        #studentCoursePhotos .studentPhotos {
            display: flex;
            flex-wrap: wrap;
        }

        #studentCoursePhotos .student p {
            padding: 0 10px;
        }

#studentCoursePhotos.expanded {
    clear: none;
    display: flex;
    flex-flow: wrap;
}

    #studentCoursePhotos.expanded .student {
        clear: none;
    }

    #studentCoursePhotos.expanded .contentExpanded {
        display: block !important;
    }

.courseDetails .courseStudents a img {
    max-width: 100%;
    max-height: 160px;
}

.courseStudents .notesContainer:hover textarea {
    border: 1px solid #555;
}

.classAttendance .courseHistory table th.pct, .reporting table td.pct {
    min-width: 30px;
    text-wrap: none;
    white-space: nowrap;
    text-align: right;
}

.classAttendance .courseHistory table th.pct {
    text-align: center;
}

.classAttendance .courseHistory td.pct.green {
    background-color: #6fb366;
    color: #fff !important;
}

.classAttendance .courseHistory td.pct.orange, .classAttendance .courseHistory td.pct.amber {
    background-color: #e28830;
    color: #fff !important;
}

.classAttendance .courseHistory td.pct.red {
    background-color: #e63d43;
    color: #fff !important;
}

.classAttendance .courseHistory table.noBorder tr, .classAttendance .courseHistory table.noBorder tr:hover {
    border: none !important;
    outline: none !important;
}


@media screen and (max-width: 639px) {
    #studentCoursePhotos .student {
        width: 33.333%;
    }
}

@media screen and (max-width: 479px) {
    #studentCoursePhotos .student {
        width: 50%;
    }
}

/*
    Full News Article
*/

.fullNewsArticle {
    margin: 0;
    padding: 11px 0;
    max-width: 1024px;
}

    .fullNewsArticle img {
        border: 1px solid #f1f1f1;
        display: inline-block;
        margin: 0;
        padding: 14px;
        width: auto;
    }

        .fullNewsArticle img.icon {
            border: none;
            float: right;
            margin: 11px;
            padding: 0px;
            width: 32px;
        }

    .fullNewsArticle .text {
        margin: 0;
        padding: 11px;
    }

    .fullNewsArticle .buttons {
        margin: 11px 11px 0;
    }

body.med .fullNewsArticle {
    max-width: 1024px;
}

/*
    Add News Article
*/

.addNewsArticle {
    margin: 0;
    padding: 0 0 11px;
    width: 950px;
}

    .addNewsArticle .checkboxRow input[type=radio] {
        float: left;
    }

        .addNewsArticle .checkboxRow input[type=radio] + label {
            float: left;
        }

/*
    Add Calendar Event
*/

.addCalendarEvent {
    margin: 0;
    padding: 0 0 11px;
    width: 950px;
}

/*
    Add Pastoral Comment
*/

.addPastoralComment {
    margin: 0;
    padding: 11px;
    width: 880px;
}

    .addPastoralComment .studentDetails {
        border: 1px solid #f1f1f1;
        float: left;
        line-height: 1.6;
        margin: 0 0 8px;
        padding: 8px;
        width: 417px;
    }

        .addPastoralComment .studentDetails img {
            vertical-align: middle;
        }

    .addPastoralComment .commentDetails {
        border: 1px solid #f1f1f1;
        display: inline;
        float: right;
        line-height: 1.6;
        margin: 0 0 8px 0;
        padding: 8px;
        width: 417px;
    }

        .addPastoralComment .commentDetails .separator {
            padding: 4px 0 0;
        }

        .addPastoralComment .commentDetails label {
            margin: 0;
            width: 144px;
        }

        .addPastoralComment .commentDetails select {
            width: 260px;
        }

        .addPastoralComment .commentDetails input.textbox {
            display: inline;
            float: left;
            margin: 0 0 0 144px;
            width: 260px;
        }

        .addPastoralComment .commentDetails .radiobuttonList {
            float: left;
            margin: 0;
            padding: 0;
            width: 260px;
        }

            .addPastoralComment .commentDetails .radiobuttonList input {
                border: 0 none;
                float: left;
                margin: 0;
                padding: 0;
                width: auto;
            }

            .addPastoralComment .commentDetails .radiobuttonList label {
                float: left;
                line-height: 14px;
                margin: 0;
                padding: 0 0 0 4px;
                width: auto;
            }

    .addPastoralComment .commentToRow, .addPastoralComment .commentCcRow {
        padding: 0 0 0 30px;
    }

        .addPastoralComment .commentToRow label, .addPastoralComment .commentCcRow label {
            margin: 0 0 0 -30px;
            width: 30px;
        }

        .addPastoralComment .commentToRow select, .addPastoralComment .commentCcRow select {
            float: left;
            width: auto;
        }

        .addPastoralComment .commentCcRow .button {
            float: left;
            margin: 4px 0 0 4px;
        }

        .addPastoralComment .commentCcRow .ccList {
            display: inline-block;
            margin: 0 0 0 4px;
            padding: 4px 0 0;
            width: 400px;
        }

    .addPastoralComment .row .checkboxList {
        float: left;
        margin: 0;
        padding: 4px 0 0;
        width: auto;
    }

        .addPastoralComment .row .checkboxList label {
            padding: 0 32px 0 4px;
        }

    .addPastoralComment .row .checkbox {
        float: left;
        margin: 0;
        padding: 4px 0 0;
        width: auto;
    }

        .addPastoralComment .row .checkbox input {
            float: left;
            margin: 0;
            padding: 0;
            width: auto;
        }

        .addPastoralComment .row .checkbox label {
            float: left;
            font-weight: normal;
            line-height: 14px;
            margin: 0;
            padding: 0 0 0 4px;
            width: auto;
        }

/*
    Preview Pastoral Comment
*/

.previewPastoralComment {
    margin: 0;
    padding: 11px;
    width: 880px;
}

    .previewPastoralComment .inner {
        padding: 8px 16px;
    }

    .previewPastoralComment .studentDetails {
        border: 1px solid #f1f1f1;
        float: left;
        line-height: 1.6;
        margin: 0 0 8px;
        padding: 8px;
        width: 418px;
    }

        .previewPastoralComment .studentDetails img {
            vertical-align: middle;
        }

    .previewPastoralComment .commentDetails {
        border: 1px solid #f1f1f1;
        display: inline;
        float: right;
        line-height: 1.6;
        margin: 0 0 8px 0;
        padding: 8px;
        width: 418px;
    }

        .previewPastoralComment .commentDetails img {
            vertical-align: middle;
        }

    .previewPastoralComment .comment {
        border: 1px solid #f1f1f1;
        float: left;
        margin: 0 0 8px;
        padding: 8px;
        width: 862px;
    }

    .previewPastoralComment .redComment {
        border: 1px solid #ffcccc;
    }

    .previewPastoralComment .comment p {
        background: #f1f1f1;
        float: left;
        margin: 0 0 8px;
        padding: 2px 4px;
        width: 854px;
    }

    .previewPastoralComment .redComment p {
        background: #fff1f1;
    }

    .previewPastoralComment .comment p.madeContactWith {
        margin: 8px 0 0;
    }

    .previewPastoralComment .comment .commentSettings {
        float: right;
        margin: 0;
        padding: 0;
        width: auto;
    }

        .previewPastoralComment .comment .commentSettings img {
            float: left;
            margin: 0;
            padding: 0;
            width: auto;
        }

    .previewPastoralComment .comment .messageHidden {
        color: #999;
        font-style: italic;
    }

    .previewPastoralComment .response {
        border: 1px solid #aaeeaa;
        float: left;
        margin: 0 0 8px;
        padding: 8px;
        width: 862px;
    }

        .previewPastoralComment .response p {
            background: #e5ffe5;
            float: left;
            margin: 0 0 8px;
            padding: 2px 4px;
            width: 854px;
        }

            .previewPastoralComment .response p.madeContactWith {
                margin: 8px 0 0;
            }

        .previewPastoralComment .response .commentSettings {
            float: right;
            margin: 0;
            padding: 0;
            width: auto;
        }

            .previewPastoralComment .response .commentSettings img {
                float: left;
                margin: 0;
                padding: 0;
                width: auto;
            }

        .previewPastoralComment .response .messageHidden {
            color: #999;
            font-style: italic;
        }

    .previewPastoralComment .responseList {
        float: left;
        margin: 0;
        padding: 0;
        width: 880px;
    }

        .previewPastoralComment .responseList .item {
            border: 1px solid #f1f1f1;
            float: left;
            margin: 0;
            padding: 8px;
            width: 862px;
        }

            .previewPastoralComment .responseList .item p {
                background: #f1f1f1;
                float: left;
                margin: 0 0 8px;
                padding: 2px 4px;
                width: 854px;
            }

    .previewPastoralComment .sendUpdateNotifications {
        float: right;
        margin: 0;
        padding: 0;
        width: auto;
    }

        .previewPastoralComment .sendUpdateNotifications input {
            float: right;
            margin: 0 0 0 4px;
            padding: 0;
            width: auto;
        }

    .previewPastoralComment .addResponse {
        float: left;
        left: 0;
        margin: 0;
        padding: 0;
        position: relative;
        top: 0;
        width: 862px;
    }

        .previewPastoralComment .addResponse h2 {
            float: left;
            font-size: 150%;
            font-weight: bold;
            margin: 0;
            padding: 0 0 16px;
            width: 862px;
        }

        .previewPastoralComment .addResponse .form {
            padding: 0;
            width: 862px;
        }

            .previewPastoralComment .addResponse .form .row {
                padding: 0 0 0 145px;
            }

                .previewPastoralComment .addResponse .form .row label {
                    margin: 0 0 0 -145px;
                    width: 145px;
                }

        .previewPastoralComment .addResponse .commentRow .error {
            margin: 0;
            padding: 3px 0 0;
        }

        .previewPastoralComment .addResponse .commentToRow, .previewPastoralComment .addResponse .commentCcRow {
            padding: 0 0 0 30px;
        }

            .previewPastoralComment .addResponse .commentToRow label, #addPastoralComment .commentCcRow label {
                margin: 0 0 0 -30px;
                width: 30px;
            }

            .previewPastoralComment .addResponse .commentToRow select, .previewPastoralComment .addResponse .commentCcRow select {
                float: left;
                margin: 0;
                width: auto;
            }

            .previewPastoralComment .addResponse .commentCcRow .button {
                float: left;
                margin: 4px 0 0 4px;
            }

            .previewPastoralComment .addResponse .commentCcRow .ccList {
                float: left;
                margin: 0 0 0 4px;
                padding: 4px 0 0;
                width: 400px;
            }

        .previewPastoralComment .addResponse .checkboxList {
            float: left;
            margin: 0;
            padding: 4px 0 0;
            width: auto;
        }

        .previewPastoralComment .addResponse .form .row .checkboxList label {
            margin: 0;
            padding: 0 32px 0 4px;
            width: auto;
        }

        .previewPastoralComment .addResponse .longCheckbox {
        }

            .previewPastoralComment .addResponse .longCheckbox input {
                float: left;
                margin: 2px 0;
                padding: 0;
                width: auto;
            }

        .previewPastoralComment .addResponse .form .longCheckbox label {
            float: left;
            margin: 0;
            padding: 0 0 0 8px;
            width: auto;
        }


/*
    Add Assessment
*/

.addAssessment {
    margin: 0;
    min-height: 320px;
    padding: 0;
    max-width: 950px;
}

    .addAssessment .form .row select.short {
        width: auto;
    }

    .addAssessment .form .row .range,
    .formalAssessments .row .range {
        float: left;
        margin: 0;
        padding: 0;
        width: 200px;
    }

        .addAssessment .form .row .range input.textbox,
        .formalAssessments .row .range input.textbox {
            float: none;
            width: 50px;
        }


/*
    Import Assessment
*/

.importAssessment {
    margin: 0;
    padding: 0;
    max-width: 950px;
}

    .importAssessment .group {
        margin-bottom: 12px;
    }

    .importAssessment select {
        width: auto;
        min-width: 300px;
        max-width: 100%;
    }

    .importAssessment table.importMarkbookPreview .fa {
        line-height: 1.0 !important;
        height: auto !important;
    }

    .importAssessment table.importMarkbookPreview tr.error th {
        background-color: #ff0000;
        color: #fff;
    }


/*
    Formal Assessment
*/

.formalAssessments .row .range {
    margin: 4px 0 0 0;
}

.formalAssessments .assessmentType {
    width: 400px;
}

.formalAssessments .weighting {
    width: 200px;
}


/*
    Add Assignment
*/

.addAssignment {
    margin: 0;
    padding: 0;
    width: 950px;
}

    .addAssignment .form .row select.short {
        width: auto;
    }

    .addAssignment .form .row .range {
        float: left;
        margin: 0;
        padding: 0;
        width: 200px;
    }

        .addAssignment .form .row .range input.textbox {
            float: none;
            width: 50px;
        }

    .addAssignment .form .checkboxList {
        box-sizing: border-box;
        float: left;
        margin: 0;
        padding: 0;
        width: 25%;
    }

    .addAssignment .form .criteria {
        min-height: 180px;
    }

/*
    News Archive
*/

.newsArchive {
    margin: 0;
    padding: 11px;
    width: 950px;
}

    .newsArchive .item {
        border: 1px solid #eaeaea;
        height: auto;
        margin: 4px 0 0;
        padding: 0;
        width: 100%;
    }

        .newsArchive .item .image {
            background: transparent none repeat scroll 0 center;
            float: left;
            margin: 0;
            padding: 0 10px;
            width: 130px;
        }

        .newsArchive .item .text {
            margin: 0;
            padding: 11px;
        }

        .newsArchive .item .links {
            float: left;
            margin: 10px 0 0 0;
            padding: 0 0 10px;
            width: 100%;
        }

            .newsArchive .item .links a {
                float: right;
                margin: 0 0 0 4px;
            }

    .newsArchive .add {
        background: transparent url(../images/icons/button-add.png) no-repeat scroll 0 0;
        height: 24px;
        width: 24px;
    }

.noTouchEvents .newsArchive .add:hover {
    background-position: 0 -24px;
}

/*
    Full Calendar
*/

.fullCalendar {
    margin: 0;
    padding: 11px;
    width: 600px;
}

    .fullCalendar h3 {
        line-height: 32px;
    }

    .fullCalendar h4 {
        margin: 0;
        padding: 0 0 11px;
    }

        .fullCalendar h4 span {
            float: none;
            font-weight: normal;
            margin: 0;
            padding: 0;
            width: auto;
        }

    .fullCalendar .item img {
        float: right;
        max-width: 240px;
        padding: 0 0 11px 11px;
        width: auto;
    }

    .fullCalendar .monthSelector {
        margin: 0;
        padding: 0 16px;
    }

        .fullCalendar .monthSelector .currentMonth {
            float: left;
            font-weight: bold;
            height: 32px;
            line-height: 32px;
            margin: 0 0 -32px;
            padding: 0;
            text-align: center;
            width: 100%;
        }

    .fullCalendar .calendarWrapper {
        margin: 0;
        padding: 16px;
    }

    .fullCalendar table {
        border-collapse: collapse;
        width: 100%;
    }

        .fullCalendar table tr th {
            background-color: #ccc;
            border: 1px solid #aaa;
        }

        .fullCalendar table tr td {
            background-color: #fff;
            border: 1px solid #e1e1e1;
        }

            .fullCalendar table tr td.event {
                background-color: #f1f1f1 !important;
            }

            .fullCalendar table tr td.selected {
                background-color: #777 !important;
                border-color: #777;
                font-weight: bold;
            }

        .fullCalendar table tr.dayHeading td {
            background-color: #ccc;
            border: 1px solid #aaa;
            font-weight: bold;
        }

        .fullCalendar table tr td a {
            color: #545454 !important;
            font-weight: normal;
        }

        .fullCalendar table tr td.event a {
            color: #242424 !important;
            font-weight: bold;
        }

        .fullCalendar table tr td.selected a {
            color: #fff !important;
            font-weight: bold;
        }

    .fullCalendar .separator {
        margin: 8px 0 0;
    }

    .fullCalendar .item {
        float: left;
        margin: 0;
        padding: 0;
        width: 100%;
    }

        .fullCalendar .item .item-top {
            float: left;
            height: 8px;
            line-height: 8px;
            margin: 0;
            padding: 0;
            width: 100%;
        }

            .fullCalendar .item .item-top .item-top-left {
                background: transparent url(../images/css/item-top-left.png) no-repeat scroll 0 0;
                float: left;
                height: 8px;
                line-height: 8px;
                margin: 0;
                padding: 0;
                width: 4px;
            }

            .fullCalendar .item .item-top .item-top-center {
                background-color: #f1f1f1;
                float: right;
                height: 8px;
                line-height: 8px;
                margin: 0 0 -8px;
                padding: 0;
                width: 100%;
            }

            .fullCalendar .item .item-top .item-top-right {
                background: transparent url(../images/css/item-top-right.png) no-repeat scroll 0 0;
                float: right;
                height: 8px;
                line-height: 8px;
                margin: 0;
                padding: 0;
                width: 4px;
            }

        .fullCalendar .item .item-middle {
            background-color: #f1f1f1;
            float: left;
            margin: 0;
            padding: 0;
            width: 100%;
        }

            .fullCalendar .item .item-middle .content {
                padding: 0 8px;
            }

            .fullCalendar .item .item-middle .buttons {
                border: 0 none;
                margin: 0;
                padding: 8px 0 0;
            }

        .fullCalendar .item .item-bottom {
            float: left;
            height: 8px;
            line-height: 8px;
            margin: 0 0 4px;
            padding: 0;
            width: 100%;
        }

            .fullCalendar .item .item-bottom .item-bottom-left {
                background: transparent url(../images/css/item-bottom-left.png) no-repeat scroll 0 bottom;
                float: left;
                height: 8px;
                line-height: 8px;
                margin: 0;
                padding: 0;
                width: 4px;
            }

            .fullCalendar .item .item-bottom .item-bottom-center {
                background-color: #f1f1f1;
                float: right;
                height: 8px;
                line-height: 8px;
                margin: 0 0 -8px;
                padding: 0;
                width: 100%;
            }

            .fullCalendar .item .item-bottom .item-bottom-right {
                background: transparent url(../images/css/item-bottom-right.png) no-repeat scroll 0 bottom;
                float: right;
                height: 8px;
                line-height: 8px;
                margin: 0;
                padding: 0;
                width: 4px;
            }

/*
    Student Search
*/

.studentSearchResults {
    margin: 0;
    padding: 11px;
    max-width: 960px;
}

    .studentSearchResults .timetable {
        margin: 16px 0 0;
    }

    .studentSearchResults table th {
        white-space: nowrap;
    }

/*
    Tutor Profile
*/

.tutorProfile {
    margin: 0;
    padding: 0 0 16px;
}

    .tutorProfile .left {
        float: left;
        margin: 0;
        padding: 0;
        width: 88px;
    }

        .tutorProfile .left img {
            float: left;
            margin: 0;
            padding: 0;
            width: 88px;
        }

    .tutorProfile .right {
        float: right;
        margin: 0;
        padding: 0;
        width: 574px;
    }

        .tutorProfile .right p {
            float: left;
            margin: 0;
            padding: 0;
            width: 574px;
        }

/*
    Timetable
*/

.timetable {
    margin: 0;
    padding: 16px;
}

    .timetable .scrollingContainer { /*overflow: auto;*/
    }

    .timetable table {
    }

        .timetable table tr td.registration {
            text-align: center;
        }

        .timetable table tr.today td {
            background-color: #ddf2da;
            border: 1px double #6fb366;
            color: #000;
            vertical-align: top;
            cursor: default;
        }

            .timetable table tr.today td.heading {
                background-color: #6fb366;
                color: #fff;
            }

                .timetable table tr.today td a, .timetable table tr.today td.heading a, .timetable table tr.today td span {
                    color: #6fb366 !important;
                }

        .timetable table td.today {
            background-color: #ddf2da;
            border: 1px double #6fb366;
            color: #000;
            vertical-align: top;
            cursor: default;
        }

        .timetable table td.tt_day {
            cursor: default;
    	    vertical-align: inherit;
        }

            .timetable table td.tt_day a {
                padding: 2px;
            }

            .timetable table td.tt_day .notstarted {
                background-color: #ffbe7e;
                opacity: 1.0;
                border: 1px solid #e28830;
                color: #000;
            }

            .timetable table td.tt_day .ended {
                background-color: #e63d43;
                color: #fff !important;
                opacity: 1.0;
            }
            .timetable table td.tt_day .timetableClass:has(.ended.hide), .timetable table td.tt_day .timetableClass:has(.notstarted.hide) {
                display: none !important;
            }

            .timetable table td:has(.ended.hide)[onmouseover], .timetable table td:has(.notstarted.hide)[onmouseover] {
                pointer-events: none;
            }

            .timetable table td.tt_day .notteaching {
                background-color: #ffc0c0;
                border: 1px solid #ff0000;
                color: #000;
                opacity: 0.8;
            }

                .timetable table td.tt_day .notteaching i.weekly {
                    display: none !important;
                }

            .timetable table td.tt_day .date hr {
                border-style: dotted;
                padding: 0;
                margin: 2px 0;
            }

        .timetable table td p.tt_week_default, .timetable table td a.tt_week_default {
            background-color: #d3d3d3;
            border: 1px solid #e1e1e1;
            padding: 4px;
        }

            .timetable table td tt_week_default .fa {
                margin: -4px;
            }

        .timetable table td p.tt_week_alternate, .timetable table td a.tt_week_alternate {
            background-color: #c1c1c1;
            border: 1px solid #e1e1e1;
            padding: 4px;
        }

        .timetable table td .tt_week_alternate .fa, .timetable table td .tt_week_default .fa {
            margin: -4px;
        }

        .timetable table td .tt_week_alternate .fa {
            transform: scaleX(-1);
        }

        .timetable table td .tt_week_inactive.tt_week_alternate:not(.tt_week_0):not(.notstarted):not(.ended):not(.notteaching) span {
            opacity: 0.8;
        }

        .timetable table td p.tt_week_active, .timetable table td a.tt_week_active {
            border: 1px solid #000;
        }

        .timetable table td p.tt_week_inactive:not(.tt_week_0):not(.notstarted):not(.ended):not(.notteaching), .timetable table td a.tt_week_inactive:not(.tt_week_0):not(.notstarted):not(.ended):not(.notteaching) span {
            opacity: 0.8;
        }

        .timetable table td p.tt_week_0, .timetable table td a.tt_week_0 {
            opacity: 0.8 !important;
            background-color: #ffc0c0 !important;
            border: 1px solid #ff0000;
            padding: 4px;
            color: #000 !important;
            font-weight: normal !important;
        }

        .timetable table th.today {
            background-color: #6fb366;
            color: #fff;
        }

    .timetable tr td:not(.heading):hover,
    .noTouchEvents .timetable tr.alternate td:not(.heading):hover {
        background: #E3E3E3;
    }

.noTouchEvents .timetable tr.today td:not(.heading):hover {
    background: #D7E6D5;
}

.timetable th.tt_link {
    cursor: pointer;
}

.timetable .timetableClass {
    position: relative;
    container-type: inline-size;
    container-name: timetableClass;
}

.timetable .mark {
    border-radius: 50%;
    font-weight: bold;
    color: #fff;
    cursor: help;
    float: right;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
}

@container timetableClass (min-width: 120px) {
    .timetable .mark {
        position: relative;
        transform: translateY(-50%);
    }
}

/*
    Staff Profile
*/

.staffProfile {
    margin: 0;
    padding: 11px;
    box-sizing: border-box;
}

    .staffProfile .staffProfileRegisters table tr td {
        padding: 4px 8px;
    }

    .staffProfile .staffProfileRegisters table tr.alternate td {
        background-color: #f1f1f1;
    }


/*
    Student Profile
*/

.studentProfile {
    margin: 0;
    padding: 11px;
}

/*
    Student Details
*/

.attendanceGraph {
    border: 0 none !important;
    height: 24px;
    margin: 4px 0 0;
}

    .attendanceGraph .green {
        background-color: #6fb366 !important;
    }

    .attendanceGraph .orange, .attendanceGraph .amber {
        background-color: #e28830 !important;
    }

    .attendanceGraph .red {
        background-color: #e63d43 !important;
    }

.studentDetails {
    margin: 0;
    padding: 0;
}

    .studentDetails .col {
        vertical-align: top;
    }

    .studentDetails .item,
    .tutorProfile .item,
    .personDetails .item {
        border: 1px solid #eee;
        float: left;
        margin: 0 0 8px;
        padding: 8px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

        .studentDetails .item img.photo,
        .personDetails .item img.photo {
            width: 88px;
            max-width: 100%;
        }

    .studentDetails .status .icon {
        margin: 8px 12px 14px;
    }

    .studentDetails .praiseConcern {
        display: inline-block;
        overflow: hidden;
        clear: both;
    }
    /*.studentDetails .item .praise, .studentDetails .item .concern { float: left; margin: 0; padding: 4px 0 0; width: 45%; }
            .studentDetails .item .concern { float: right; }*/
    .studentDetails .item .praise, .studentDetails .item .concern, .studentDetails .item .praise, .studentDetails .item .neutral, .studentDetails .item .praise, .studentDetails .item .praise {
        display: inline-block;
        margin: 0 4px;
    }

    .studentDetails .item span.praise img, .studentDetails .item span.neutral img, .studentDetails .item span.concern img {
        vertical-align: middle;
        margin-right: 2px;
    }

    .studentDetails .item .studentPastoralStatus {
        float: none;
        left: 0;
        margin: 0;
        padding: 10px 0 10px 0;
        position: relative;
        text-align: center;
        top: 0;
        width: auto;
        z-index: 2;
    }

        .studentDetails .item .studentPastoralStatus a {
            display: block;
            text-align: center;
            width: 100%;
        }

        .studentDetails .item .studentPastoralStatus .studentPastoralStatusList {
            border-top: 1px solid #ddd;
            float: left;
            left: 100%;
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            text-align: center;
            top: 0;
            min-width: 200px;
        }

            .studentDetails .item .studentPastoralStatus .studentPastoralStatusList li {
                background: #fff none no-repeat scroll 0 0;
                border: 1px solid #ddd;
                border-top: 0 none;
                display: block;
                float: none;
                margin: 0;
                padding: 0 5px 0 0;
                width: auto;
            }

                .studentDetails .item .studentPastoralStatus .studentPastoralStatusList li a {
                    background: #fff none no-repeat scroll 0 0;
                    display: block;
                    float: none;
                    margin: 0;
                    padding: 4px;
                    text-align: left;
                    width: auto;
                }

.noTouchEvents .studentDetails .item .studentPastoralStatus .studentPastoralStatusList li a:hover {
    background-color: #f1f1f1;
    text-decoration: none;
}

.studentDetails .item .studentPastoralStatus .studentPastoralStatusList li.cancel a {
    background-color: #f1f1f1;
    color: #555;
}

.noTouchEvents .studentDetails .item .studentPastoralStatus .studentPastoralStatusList li.cancel a:hover {
    background-color: #ddd;
    color: #555;
}

.studentDetails.warning .item {
    border: 1px solid #ff0000 !important;
}

.studentDetails .item .value .otherNames {
    opacity: 0.5;
}

.studentDetails .item .label,
.tutorProfile .item .label,
.personDetails .item .label {
    display: block;
    font-weight: bold;
    margin: 0;
    padding: 0;
    width: 140px;
    text-align: left;
}

.studentDetails .item .value, .studentDetails .item .input,
.tutorProfile .item .value, .tutorProfile .item .input,
.personDetails .item .value, .personDetails .item .input {
    display: block;
    margin: -18px 0 0;
    padding: 0 0 0 150px;
    text-align: left;
}

.studentDetails .item .input,
.tutorProfile .item .input,
.personDetails .item .input {
    display: initial;
}

.studentDetails .learnerSupport {
    padding: 12px 0 0 0;
}

    .studentDetails .learnerSupport a {
        clear: both;
        overflow: hidden;
        display: inline-block;
    }

    .studentDetails .learnerSupport span {
        color: #000;
        float: left;
        margin: 5px 2px 8px 0;
        text-align: left;
        width: 17px;
    }

        .studentDetails .learnerSupport span.clippedImage {
            margin-top: 0;
            margin-right: 2px;
            margin-left: 5px;
            width: 26px;
        }

.studentProfile .lsFieldDataTabs .ajax__tab_tab.inactiveTab {
    background-color: #ddd;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

.studentProfile .lsFieldDataTabs .ajax__tab_tab.emptyTab {
    border-top: 1px solid #e28830;
    border-right: 1px solid #e28830;
    border-left: 1px solid #e28830;
    background-color: #e28830;
}

.studentProfile .lsFieldDataTabs .ajax__tab_panel.emptyTab, .studentProfile .lsFieldDataTabs .ajax__tab_panel.emptyTab table tr td {
    border-color: #e28830;
}

    .studentProfile .lsFieldDataTabs .ajax__tab_panel.emptyTab table th {
        background-color: #e28830;
        color: #fff;
    }

.studentProfile .lsCategoryTabs .ajax__tab_active {
    display: none !important;
}

.studentDetails .studentFields .item .value .warning,
.tutorProfile .item .value .warning {
    padding: 2px 4px;
}

.studentDetails .buttons.notes .iconButton {
    margin: 8px 4px 4px !important;
}

.studentDetails .buttons.notes .note, .studentNotes .notes .note {
    border-bottom: 1px solid #e1e1e1;
    text-align: left;
}

.studentDetails .notes .fa:not(.iconButton), .studentCourses table tr td.notes .fa:not(.iconButton), .studentNotes .notes .fa {
    color: #ede300 !important;
}

.studentNotes .notes .note {
    border: 1px solid #e1e1e1;
    padding: 12px;
    margin-bottom: 12px;
}

.studentDetails .notes.pinned .note, .studentNotes .notes .note.pinned {
    border: 2px solid;
    color: #000;
    padding: 12px;
    margin-bottom: 12px;
}
    .studentDetails .notes.pinned .fa {
    }
    .studentDetails .notes.pinned .fa.pinned {
        display: none !important;
    }

.studentDetails .notes .note.warning, .studentDetails .notes .note.error, .studentNotes .notes .note.warning, .studentNotes .notes .note.error {
    background: #ffc0c0;
    color: #000;
    border: 1px solid #ff0000;
}
    .studentDetails .notes .note.warning .fa, .studentDetails .notes .note.error .fa, .studentNotes .notes .note.warning .fa, .studentNotes .notes .note.error .fa {
        color: #ff0000 !important;
    }

.studentDetails .changeImage,
.tutorProfile .changeImage {
    float: none;
    margin: 0;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
}

.studentDetails.editMode .studentFields .item,
.tutorProfile.editMode .item {
    display: flex;
    text-align: initial;
}

    .tutorProfile.editMode .item:has(.userPhotoWrapper) {
        flex-direction: column;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .tutorProfile.editMode .item:has(.userPhotoWrapper) > br {
            display: none;
        }

.studentDetails.editMode .item .label,
.tutorProfile.editMode .item .label {
    display: inline-block;
        padding: 10px;
	width: 110px;
    }

.studentDetails.editMode .item .inputFields,
.tutorProfile.editMode .item .inputFields{
    flex: 1;
    padding-top: 1%;
}

.studentDetails.editMode .item input, .studentDetails.editMode .item select,
.tutorProfile.editMode .item input, .tutorProfile.editMode .item select {
    width: 45%;
        min-width: 32%;
    }

@media screen and (max-width: 1100px){
    .studentDetails.editMode .item input, .studentDetails.editMode .item select,
    .tutorProfile.editMode .item input, .tutorProfile.editMode .item select {
        width: 85%;
    }
}

.studentDetails.editMode .item .value,
.tutorProfile.editMode .item .value {
    margin: unset;
    padding: 10px 0px;
    }

@media screen and (max-width: 959px) {
    .studentDetails .item .studentPastoralStatus .studentPastoralStatusList {
        display: block;
        float: none;
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
    }
}

@media screen and (max-width: 639px) {
    .studentDetails .item .label,
    .tutorProfile .item .label,
    .personDetails .item .label {
        width: auto;
    }

    .studentDetails .item .value, .studentDetails .item .input,
    .tutorProfile .item .value, .tutorProfile .item .input,
    .personDetails .item .value, .personDetails .item .input {
        margin: 0;
        margin-top: 0 !important;
        padding: 0;
    }
}

/*
    Send Email/SMS
*/

.sendEmail, .sendSMS {
    margin: 0;
    padding: 11px;
    box-sizing: border-box;
    max-width: 680px;
}

body.med .sendEmail, body.med .sendSMS {
    max-width: 1024px;
}

.sendEmail .ajaxTextBox, .sendSMS .ajaxTextBox {
    display: block;
}

    .sendEmail .ajaxTextBox.error input, .sendSMS .ajaxTextBox.error input {
        border: 1px solid #e63d43 !important;
        color: inherit !important;
    }

        .sendEmail .ajaxTextBox.error input:focus, .sendSMS .ajaxTextBox.error input:focus {
            outline: 1px solid #e63d43;
        }

/*
    Support
*/

.support {
    margin: 0;
    padding: 10px;
    max-width: 960px;
    width: 100%;
}

    .support table {
        width: 100% !important;
    }

        .support table.eventLogs td:first-child {
            border-left: 2px solid #aaa;
        }

        .support table.eventLogs td:last-child {
            border-right: 2px solid #aaa;
        }

        .support table.eventLogs tr:nth-child(2n+0) td {
            border-bottom: 2px solid #aaa;
        }

        .support table.eventLogs tr:nth-child(2n+1) td {
            border-top: 2px solid #aaa;
        }

        .support table div {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            width: 100% !important;
        }

/*
    Student Courses
*/

.studentCourses.warning {
    border: 1px solid #ff0000 !important;
}

    .studentCourses.warning table tr td {
        border: 1px solid #ff0000 !important;
    }

    .studentCourses.warning table tr th {
        border: 1px solid #ff0000 !important;
        background-color: #ff0000 !important;
        color: #fff !important;
    }

/*
    Student Timetable
*/

.studentTimetable.warning {
    border: 1px solid #ff0000 !important;
}

    .studentTimetable.warning table tr td {
        border: 1px solid #ff0000 !important;
    }

    .studentTimetable.warning table tr th {
        border: 1px solid #ff0000 !important;
        background-color: #ff0000 !important;
        color: #fff !important;
    }

/*
    Student Attendance
*/

.studentAttendance {
    margin: 0;
    padding: 0;
}

    .studentAttendance h2 {
        margin: 11px 0 0;
        padding: 0 0 4px;
    }

    .studentAttendance .noAttendanceData {
        padding: 8px;
    }

    .studentAttendance.warning {
        border: 1px solid #ff0000 !important;
        padding: 8px;
    }

        .studentAttendance.warning table tr td {
            border: 1px solid #ff0000 !important;
        }

        .studentAttendance.warning table tr th {
            border: 1px solid #ff0000 !important;
            background-color: #ff0000 !important;
            color: #fff !important;
        }

        .studentAttendance.warning .settings {
            border: 1px solid #ff0000 !important;
        }

.studentAttendanceTableWeekly tr.futureWeek {
    opacity: 0.5;
}

/*
    Student Exam Results
*/

.studentExamResults {
    margin: 0;
    padding: 0;
}

    .studentExamResults h2 {
        margin: 11px 0 0;
        padding: 0 0 4px;
    }

    .studentExamResults .buttons {
        display: none;
    }

    .studentExamResults.warning .settings {
        border: 1px solid #ff0000 !important;
    }

    .studentExamResults.warning table tr td {
        border: 1px solid #ff0000 !important;
    }

    .studentExamResults.warning table tr th {
        border: 1px solid #ff0000 !important;
        background-color: #ff0000 !important;
        color: #fff !important;
    }

/*
    Student Exam Entries
*/

.studentExamEntries {
    margin: 0;
    padding: 0;
}

    .studentExamEntries h2 {
        margin: 11px 0 0;
        padding: 0 0 4px;
    }

    .studentExamEntries .buttons {
        display: none;
    }

    .studentExamEntries.warning .settings {
        border: 1px solid #ff0000 !important;
    }

    .studentExamEntries.warning table tr td {
        border: 1px solid #ff0000 !important;
    }

    .studentExamEntries.warning table tr th {
        border: 1px solid #ff0000 !important;
        background-color: #ff0000 !important;
        color: #fff !important;
    }

/*
    Student diagnostics
*/

.studentDiagnostics {
    margin: 0;
    padding: 0;
}

    .studentDiagnostics h2 {
        margin: 11px 0 0;
        padding: 0 0 4px;
    }

    .studentDiagnostics.warning .settings {
        border: 1px solid #ff0000 !important;
    }

    .studentDiagnostics.warning table tr td {
        border: 1px solid #ff0000 !important;
    }

    .studentDiagnostics.warning table tr th {
        border: 1px solid #ff0000 !important;
        background-color: #ff0000 !important;
        color: #fff !important;
    }

/*
    Student Pastoral
*/

.studentPastoral {
    margin: 0;
    padding: 0;
}

    .studentPastoral h2 {
        margin: 0;
        padding: 0 0 11px;
    }

    .studentPastoral .top {
        border: 1px solid #e1e1e1;
        margin: 0 0 11px;
        padding: 11px;
    }

        .studentPastoral .top .pastoralStatus {
            float: right;
            margin: 0;
            padding: 0;
            width: auto;
        }

            .studentPastoral .top .pastoralStatus .studentPastoralStatus {
                display: inline-block;
                float: none;
                left: 0;
                margin: 0;
                padding: 10px 0 10px 0;
                position: relative;
                text-align: center;
                top: 0;
                width: 88px;
                z-index: 2;
            }

@media (min-width: 768px) {

        .studentPastoral .top .pastoralStatus .studentPastoralStatus {
            min-width: 88px;
            padding-left: 10px;
            padding-right: 10px;
            white-space: nowrap;
            width: auto;
        }
}

@media(max-width: 767px) {
    .studentPastoral .top .pastoralStatus {
        float: none;
    }
}

.studentPastoral .top .pastoralStatus .studentPastoralStatus a {
    display: block;
    text-align: center;
    width: 100%;
}

.studentPastoral .top .pastoralStatus .studentPastoralStatus .studentPastoralStatusList {
    border-top: 1px solid #ddd;
    bottom: auto;
    float: left;
    list-style: none;
    left: auto;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 100%;
    width: 200px;
}

    .studentPastoral .top .pastoralStatus .studentPastoralStatus .studentPastoralStatusList li {
        background: #fff none no-repeat scroll 0 0;
        border: 1px solid #ddd;
        border-top: 0 none;
        float: left;
        margin: 0;
        padding: 0;
        width: 200px;
    }

        .studentPastoral .top .pastoralStatus .studentPastoralStatus .studentPastoralStatusList li a {
            background: #fff none no-repeat scroll 0 0;
            float: left;
            margin: 0;
            padding: 4px;
            text-align: left;
            width: 192px;
        }

.noTouchEvents .studentPastoral .top .pastoralStatus .studentPastoralStatus .studentPastoralStatusList li a:hover {
    background-color: #f1f1f1;
    text-decoration: none;
}

.studentPastoral .top .pastoralStatus .studentPastoralStatus .studentPastoralStatusList li.cancel a {
    background-color: #f1f1f1;
    color: #555;
}

.noTouchEvents .studentPastoral .top .pastoralStatus .studentPastoralStatus .studentPastoralStatusList li.cancel a:hover {
    background-color: #ddd;
    color: #555;
}

.studentPastoral .top .praiseConcern {
    float: left;
    line-height: 40px;
    margin: 0;
    padding: 0;
    width: auto;
}

    .studentPastoral .top .praiseConcern span {
        display: inline-block;
        padding: 0 8px 0 0;
        vertical-align: middle;
    }

        .studentPastoral .top .praiseConcern span img {
            display: inline-block;
            padding: 0 4px 0 0;
            vertical-align: middle;
        }

.studentPastoral .full {
    border: 1px solid #e1e1e1;
    margin: 0;
    padding: 11px;
}

.studentPastoral div.left {
    float: left;
    margin: 0;
    padding: 0;
    width: 50%;
}

    .studentPastoral div.left .inner {
        border: 1px solid #e1e1e1;
        margin: 0 5px 0 0;
        padding: 11px;
    }

.studentPastoralNotifications {
}

    .studentPastoralNotifications .standardTable {
        width: 100%;
    }

        .studentPastoralNotifications .standardTable .comment:not(.pastoralStatus) {
            overflow: auto;
            min-height: 72px;
            max-height: 144px;
        }

            .studentPastoralNotifications .standardTable .comment .titleBar {
                display: none;
            }

        .studentPastoralNotifications .standardTable .fieldgroup {
            border-top: 1px dotted #bbb;
            padding-bottom: 10px;
            padding-top: 10px;
        }

            .studentPastoralNotifications .standardTable .fieldgroup:first-child {
                border-top: 0;
            }

            .studentPastoralNotifications .standardTable .fieldgroup .label {
                float: left;
                width: 29%;
                font-weight: bold;
            }

            .studentPastoralNotifications .standardTable .fieldgroup .value {
                float: right;
                width: 69%;
            }

            .studentPastoralNotifications .standardTable .fieldgroup img {
                display: none;
            }

            .studentPastoralNotifications .standardTable .fieldgroup .singleField.fieldDetails .label {
            }

            .studentPastoralNotifications .standardTable .fieldgroup .singleField.fieldDetails .value {
            }

            .studentPastoralNotifications .standardTable .expandedNotification .fieldgroup .singleField.fieldDetails .label {
            }

            .studentPastoralNotifications .standardTable .expandedNotification .fieldgroup .singleField.fieldDetails .value {
            }

    .studentPastoralNotifications td {
        max-width: 400px;
    }

    .studentPastoralNotifications tr.expandedNotification td .comment {
        max-height: none;
    }

    .studentPastoralNotifications .sensitive td, .studentPastoralNotifications div.sensitive {
        background-color: #ffeded;
        border: 1px dotted #bf0000;
    }

        .studentPastoralNotifications .sensitive td .sensitive {
            border: none;
        }

        .studentPastoralNotifications .sensitive td .fa {
            color: #bf0000 !important;
            padding: 6px;
        }

.studentPastoralNotifications .pastoralStatus {
    border: 1px dotted #e1e1e1;
    padding: 0 8px;
}

.studentPastoralNotifications .pastoralStatus img {
    display: block !important;
    float: left;
}

.studentPastoral div.right {
    float: right;
    margin: 0;
    padding: 0;
    width: 50%;
}

    .studentPastoral div.right .inner {
        border: 1px solid #e1e1e1;
        margin: 0 0 0 5px;
        padding: 11px;
    }

.studentPastoralLog {
}

    .studentPastoralLog .comment, .studentPastoralLog .action, .studentPastoralLog .outcome {
        overflow: auto;
        min-height: 72px;
        max-height: 144px;
        min-width: 140px;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    .studentPastoralLog td {
        max-width: 400px;
    }

.studentPastoral .studentPastoralLog h2 {
    line-height: 32px;
    padding: 0;
}

.studentPastoralLog .formEntry {
    border: 1px solid #e1e1e1;
    margin: 5px 0 0;
    padding: 11px;
}

.studentPastoralLog .sensitive td, .studentPastoralLog div.sensitive {
    background-color: #ffeded;
    border: 1px dotted #bf0000;
}

.studentPastoralLog .formEntry .field {
    padding: 5px 0 0 120px;
}

.studentPastoralLog .formEntry .firstField {
    padding: 0 0 0 120px;
}

.studentPastoralLog .formEntry .field .label {
    display: block;
    float: left;
    font-weight: bold;
    margin: 0 0 0 -120px;
    padding: 0;
    width: 120px;
}

.studentPastoralLog .formEntry .field .value {
    display: block;
    margin: 0;
    padding: 0;
}

.studentPastoral .bottom {
    border: 1px solid #e1e1e1;
    margin: 11px 0 0;
    padding: 11px;
}

.studentPastoral .pastoralStatusForms h2 {
    line-height: 32px;
    padding: 0;
}

.studentPastoral .pastoralStatusForms .hideShow {
    margin-top: -32px;
}

.studentPastoral .pastoralStatusForms .standardTable {
    margin-top: 12px;
}

/*
    Student Learner Support
*/

.studentLearnerSupportNotifications {
}

    .studentLearnerSupportNotifications .standardTable {
        width: 100%;
    }

        .studentLearnerSupportNotifications .standardTable .comment {
            overflow: auto;
            min-height: 72px;
            max-height: 144px;
        }

            .studentLearnerSupportNotifications .standardTable .comment .titleBar {
                display: none;
            }

        .studentLearnerSupportNotifications .standardTable .fieldgroup {
            border-top: 1px dotted #bbb;
            padding-bottom: 10px;
            padding-top: 10px;
        }

            .studentLearnerSupportNotifications .standardTable .fieldgroup:first-child {
                border-top: 0;
            }

            .studentLearnerSupportNotifications .standardTable .fieldgroup .field p {
                padding-bottom: 0;
                margin-bottom: 0;
            }

            .studentLearnerSupportNotifications .standardTable .fieldgroup .label {
                float: left;
                width: 29%;
                font-weight: bold;
            }

            .studentLearnerSupportNotifications .standardTable .fieldgroup .value {
                float: right;
                width: 69%;
            }

            .studentLearnerSupportNotifications .standardTable .fieldgroup img {
                display: none;
            }

    .studentLearnerSupportNotifications .sensitive td, .studentLearnerSupportNotifications div.sensitive {
        background-color: #ffeded;
        border: 1px dotted #bf0000;
    }

        .studentLearnerSupportNotifications .sensitive td .sensitive {
            border: none;
        }

        .studentLearnerSupportNotifications .sensitive td .fa {
            color: #bf0000 !important;
            padding: 6px;
        }


/*
    eMarkBook
*/

.eMarkBook {
    margin: 0;
    padding: 11px;
}

    .eMarkBook h2 {
        margin: 11px 0 0;
        padding: 0 0 4px;
    }

    .eMarkBook.expanded .ajax__tab_header {
        display: none;
    }

    .eMarkBook.expanded .lockedScrollingTable .bottomLeft, .eMarkBook.expanded .lockedScrollingTable .bottomRight {
        height: 100% !important;
    }


/*
    Unit Grades
*/

.unitGrades {
    margin: 0;
    padding: 0;
}

    .unitGrades .level2, .unitGrades .level3 {
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        padding: 0 4px 0 0;
        width: 50%;
        vertical-align: top;
        -webkit-box-sizing: border-box;
    }

    .unitGrades .level3 {
        padding: 0 0 0 4px;
    }

    .unitGrades table {
        width: 100%;
    }

        .unitGrades table .textbox {
            width: 64px;
        }

/*
    Unit Grades
*/

.gradeBoundaries {
    margin: 0;
    padding: 0;
}

    .gradeBoundaries .level2, .gradeBoundaries .level3 {
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        padding: 0 4px 0 0;
        width: 50%;
        vertical-align: top;
        -webkit-box-sizing: border-box;
    }

    .gradeBoundaries .level3 {
        padding: 0 0 0 4px;
    }

    .gradeBoundaries table {
        width: 100%;
    }

        .gradeBoundaries table .textbox {
            width: auto;
        }

        .gradeBoundaries table .shortTextbox {
            width: 64px;
        }

/*
    Manage Course Units
*/

.manageCourseUnits {
    margin: 0;
    padding: 0;
}

    .manageCourseUnits .settings .row {
        position: relative;
    }

    .manageCourseUnits .totalUnits {
        border: 1px solid #ebebeb;
        box-sizing: border-box;
        float: left;
        margin: 4px 0 0;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        padding: 11px;
        width: 100%;
        -webkit-box-sizing: border-box;
    }

        .manageCourseUnits .totalUnits .error {
            background: #fff1f1 none no-repeat scroll 0 0;
            border: 1px solid #ffcccc;
            color: #dd0044;
            margin: 0 0 8px;
            padding: 8px;
        }

        .manageCourseUnits .totalUnits .total {
            float: left;
            margin: 0;
            padding: 0;
            width: 33%;
        }

            .manageCourseUnits .totalUnits .total .textbox {
                width: 30px;
            }

    .manageCourseUnits table {
        margin: 4px 0 0;
        padding: 0;
        width: 100%;
    }

        .manageCourseUnits table .textbox {
            border: 1px solid #ccc;
            margin: 0;
            padding: 2px 1px;
            width: auto;
        }

        .manageCourseUnits table .shortTextbox {
            width: 30px;
        }

        .manageCourseUnits table .mediumTextbox {
            width: 60px;
        }

/*
    eMarkBook Grid
*/

.eMarkBookGrid {
}

    .eMarkBookGrid table {
        border: 0 none !important;
    }

.eMarkBookGrid {
    margin: 4px 0 0;
}

    .eMarkBookGrid table .col_ALIS {
        text-align: center;
    }

    .eMarkBookGrid table .col_AMG {
        text-align: center;
    }

        .eMarkBookGrid table .col_AMG input.textbox {
            border: 1px solid #ccc;
            float: left;
            margin: 0;
            padding: 2px 1px;
            width: 30px;
        }

        .eMarkBookGrid table .col_AMG .addTargetGrade {
            background: #fff url(../Images/Icons/saveMark.gif) no-repeat scroll center center;
            border: 1px solid #ccc;
            border-left: 0 none;
            float: left;
            height: 20px;
            margin: 0;
            padding: 0;
            width: 20px;
        }

    .eMarkBookGrid table .col_targetGrade {
        text-align: center;
    }

        .eMarkBookGrid table .col_targetGrade input.textbox {
            border: 1px solid #ccc;
            margin: 0;
            padding: 2px 1px;
            width: 30px;
            text-align: center;
        }

        .eMarkBookGrid table .col_targetGrade .addTargetGrade {
            background: #fff url(../Images/Icons/saveMark.gif) no-repeat scroll center center;
            border: 1px solid #ccc;
            border-left: 0 none;
            float: left;
            height: 20px;
            margin: 0;
            padding: 0;
            width: 20px;
        }

    .eMarkBookGrid table .col_UCASPredictedGrade {
        text-align: center;
    }

        .eMarkBookGrid table .col_UCASPredictedGrade input.textbox {
            border: 1px solid #ccc;
            margin: 0;
            padding: 2px 1px;
            width: 30px;
            text-align: center;
        }

        .eMarkBookGrid table .col_UCASPredictedGrade .addTargetGrade {
            background: #fff url(../Images/Icons/saveMark.gif) no-repeat scroll center center;
            border: 1px solid #ccc;
            border-left: 0 none;
            float: left;
            height: 20px;
            margin: 0;
            padding: 0;
            width: 20px;
        }

    .eMarkBookGrid table .assessment {
        text-align: center;
    }

    .eMarkBookGrid table td.assessment:first-child, .eMarkBookGrid table th.assessment:first-child {
        max-width: 80px;
    }

    .eMarkBookGrid table th.assessmentImage {
        vertical-align: bottom;
    }

    .eMarkBookGrid table th.assessment .staff {
        background: transparent url(../Images/Icons/teacher_24.gif) no-repeat scroll 0 0;
        display: inline-block;
        height: 24px;
        line-height: 0;
        margin: 0;
        padding: 0;
        width: 24px;
    }

    .eMarkBookGrid table .assessment .inner {
        float: left;
        left: 0;
        margin: 0;
        min-width: 63px;
        padding: 0;
        position: relative;
        top: 0;
        width: 100%;
    }

    .eMarkBookGrid table .assessment input.textbox {
        border: 1px solid #ccc;
        float: left;
        margin: 0;
        padding: 2px 1px;
        width: 30px;
        text-align: center;
    }

    .eMarkBookGrid table .assessment .addMark {
        background: #fff url(../Images/Icons/saveMark.gif) no-repeat scroll center center;
        border: 1px solid #ccc;
        border-left: 0 none;
        float: left;
        height: 20px;
        margin: 0;
        padding: 0;
        width: 20px;
    }

    .eMarkBookGrid table .assessment .addMarkComment {
        background: #fff url(../Images/Icons/saveMarkComment.gif) no-repeat scroll center center;
        border: 1px solid #ccc;
        border-left: 0 none;
        cursor: pointer;
        float: left;
        height: 20px;
        margin: 0;
        padding: 0;
        width: 20px;
    }

    .eMarkBookGrid table .assessment .addMarkCommentPanel {
        background: #fff none no-repeat scroll 0 0;
        border: 1px solid #ccc;
        float: left;
        left: 0;
        margin: 0;
        padding: 4px;
        position: absolute !important;
        top: 20px;
        width: 150px;
        z-index: 100 !important;
    }

        .eMarkBookGrid table .assessment .addMarkCommentPanel .textbox {
            border: 1px solid #ccc;
            float: left;
            margin: 0;
            padding: 2px 1px;
            width: 146px;
        }

        .eMarkBookGrid table .assessment .addMarkCommentPanel .button {
            margin: 4px 0 0 4px;
        }

        .eMarkBookGrid table th.assessment .iconButton, .eMarkBookGrid table th.assignment .iconButton {
            opacity: 0.5;
        }

        .eMarkBookGrid table th.assessment .iconButton:hover, .eMarkBookGrid table th.assignment .iconButton:hover {
            opacity: 1.0;
        }

    .eMarkBookGrid table th.assessmentHideFromStudents {
        border-bottom: 2px double #ff0000;
    }

    .eMarkBookGrid table th.assessmentShowToStudents {
        border-bottom: 2px double #000;
    }

    .eMarkBookGrid table td.showToStudents.assessmentHideFromStudents {
        border-top: 2px double #ff0000;
    }

    .eMarkBookGrid table td.showToStudents.assessmentShowToStudents {
        border-top: 2px double #000;
    }

    .eMarkBookGrid table td.showToStudents.showToStudents.disabled {
        cursor: not-allowed;
        opacity: 0.2;
        pointer-events: none;
    }

    .eMarkBookGrid table .assignment {
        text-align: center;
    }

    .eMarkBookGrid table .customText {
        background: #f1f1f1;
        border-color: #777;
        border-style: double;
    }

    .eMarkBookGrid table .alternate .customText {
        background: #fff;
        border-color: #777;
        border-style: double;
    }

    .eMarkBookGrid table th.assignmentImage {
        vertical-align: bottom;
    }

    .eMarkBookGrid table th.assignment .staff {
        background: transparent url(../Images/Icons/teacher_24.gif) no-repeat scroll 0 0;
        display: inline-block;
        height: 24px;
        line-height: 0;
        margin: 0;
        padding: 0;
        width: 24px;
    }

    .eMarkBookGrid table .assignment .inner {
        float: left;
        left: 0;
        margin: 0;
        min-width: 50px;
        padding: 0;
        position: relative;
        top: 0;
        width: 100%;
    }

    .eMarkBookGrid table .assignment .checkbox {
        border: 1px solid #ccc;
        float: left;
        height: 20px;
        margin: 0;
        padding: 0;
        width: 20px;
    }

        .eMarkBookGrid table .assignment .checkbox input {
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }

    .eMarkBookGrid table .assignment .addMark {
        background: #fff url(../Images/Icons/saveMark.gif) no-repeat scroll center center;
        border: 1px solid #ccc;
        border-left: 0 none;
        float: left;
        height: 20px;
        margin: 0;
        padding: 0;
        width: 20px;
    }

    .eMarkBookGrid table .assignment .addMarkComment {
        background: #fff url(../Images/Icons/saveMarkComment.gif) no-repeat scroll center center;
        border: 1px solid #ccc;
        border-left: 0 none;
        cursor: pointer;
        float: left;
        height: 20px;
        margin: 0;
        padding: 0;
        width: 20px;
    }

    .eMarkBookGrid table .assignment .addMarkCommentPanel {
        background: #fff none no-repeat scroll 0 0;
        border: 1px solid #ccc;
        float: left;
        left: 0;
        margin: 0;
        padding: 4px;
        position: absolute !important;
        top: 20px;
        width: 150px;
        z-index: 100 !important;
    }

        .eMarkBookGrid table .assignment .addMarkCommentPanel .textbox {
            border: 1px solid #ccc;
            float: left;
            margin: 0;
            width: 148px;
        }

        .eMarkBookGrid table .assignment .addMarkCommentPanel .iconButton {
            margin: 4px 0 0;
        }

    .eMarkBookGrid table .col_averageMark {
        text-align: center;
    }

    .eMarkBookGrid table th.col_averageMark {
        vertical-align: bottom;
    }

    .eMarkBookGrid table .col_viewExamResults {
        text-align: center;
    }

    .eMarkBookGrid table th.col_viewExamResults {
        vertical-align: bottom;
    }

    .eMarkBookGrid table .col_progressTrafficLight {
        text-align: center;
    }

    .eMarkBookGrid table th.col_progressTrafficLight {
        vertical-align: bottom;
    }

    .eMarkBookGrid table .col_passedUnit {
        text-align: center;
    }

    .eMarkBookGrid table th.col_passedUnit {
        vertical-align: bottom;
    }

    .eMarkBookGrid table .col_pointAchieved {
        text-align: center;
    }

    .eMarkBookGrid table th.col_pointAchieved {
        vertical-align: bottom;
    }

    .eMarkBookGrid table .col_gradeForUnit {
        text-align: center;
    }

    .eMarkBookGrid table th.col_gradeForUnit {
        vertical-align: bottom;
    }

    .eMarkBookGrid table td.col_total {
        text-align: center;
    }

    .eMarkBookGrid table td.col_tutorGroup {
        text-align: center;
    }

    .eMarkBookGrid table td.col_studentStatus {
        text-align: center;
    }

/*.eMarkBook .standardTable*/ tr.hoverState td,
/*.eMarkBook .standardTable*/ tr td.hoverState {
    background: #E4E5E8 !important;
}

.eMarkBook th.assessment .iconButton, .eMarkBook th.assignment .iconButton,
.eMarkBook th.assessment .iconButton:hover, .eMarkBook th.assignment .iconButton:hover,
.eMarkBook th.assessment .iconButton:active, .eMarkBook th.assignment .iconButton:active,
.eMarkBook th.assessment .iconButton:focus, .eMarkBook th.assignment .iconButton:focus {
    background-color: transparent !important;
    background-position: -6px -38px !important;
    border: 0 none !important;
    height: 20px !important;
    width: 20px !important;
}

.eMarkBookGrid .excludeStudents {
    margin: 32px 0 0;
}

.eMarkBookGrid .migrateStudents {
    margin: 32px 0 0;
}

/*
    eMarkBook Delete Assignment
*/

.deleteAssignment {
    margin: 0;
    padding: 11px;
    width: 512px;
}

/*
    eMarkBook Delete Assessment
*/

.deleteAssessment {
    margin: 0;
    padding: 11px;
    width: 512px;
}

/*
    eReports
*/

.myReports {
    margin: 0;
    padding: 11px;
    width: 950px;
}

    .myReports .myReports {
        margin: 0;
        padding: 0;
    }

    .myReports .category {
        border: 1px solid #eaeaea;
        margin: 4px 0 0;
        padding: 11px;
    }

        .myReports .category.focus {
            border: 2px solid #555;
        }

    .myReports .firstCategory {
        margin: 0;
    }

    .myReports .category h2 {
        margin: 0 0 4px;
    }

    .myReports .parameters {
        border: 1px solid #eaeaea;
        margin: 8px 0 0;
        padding: 11px;
    }

        .myReports .parameters .parameter {
            margin: 8px 0 0;
        }

        .myReports .parameters .firstParameter {
            margin: 0;
        }

    .myReports .category a.viewReport {
        margin-top: 8px;
    }

.reporting table {
    width: 100%;
}
    .reporting table th, .reporting table td {
        text-wrap: none;
        white-space: nowrap;
    }
        .reporting table th.pct, .reporting table td.pct {
            min-width: 30px;
            text-wrap: none;
            white-space: nowrap;
            text-align: right;
        }
        .reporting table th.pct, .reporting table td.rag {
            text-align: center;
        }
        .reporting table td.pct.green, .reporting table td.rag.green {
            background-color: #6fb366;
            color: #fff !important;
        }
        .reporting table td.pct.orange, .reporting table td.rag.orange, .reporting table td.pct.amber, .reporting table td.rag.amber {
            background-color: #e28830;
            color: #fff !important;
        }
        .reporting table td.pct.red, .reporting table td.rag.red {
            background-color: #e63d43;
            color: #fff !important;
        }
        .reporting table td.pct.grey, .reporting table td.rag.grey {
            background-color: darkgrey;
            color: #fff !important;
        }

/*
    ePastoral Monitor
*/

.pastoralMonitor {
    margin: 0;
    padding: 11px;
}

    .pastoralMonitor .settings .row label {
        width: 200px;
    }

    .pastoralMonitor .lockedScrollingTable {
        margin: 4px 0 0;
    }

/*
    Status History
*/

.statusHistory {
    margin: 0;
    padding: 11px;
    width: 640px;
}

/*
    Aliasing
*/

.aliasing {
    margin: 0;
    width: 640px;

    padding: 11px;
}

/*
    Blocked Users
*/

.blockedUsers {
    margin: 0;
    padding: 11px;
    width: 640px;
}

    .blockedUsers table {
        width: 100%;
    }

        .blockedUsers table tr td select {
            width: auto;
        }

        .blockedUsers table tr td .button {
            vertical-align: middle;
        }

/*
    Dashboard Settings
*/

.dashboardSettings {
    margin: 0;
    max-width: 950px;
    padding: 11px;
}

    .dashboardSettings .showModuleSettings {
        float: left;
        margin: 3px 0 0 0;
    }

    .dashboardSettings .moduleGroup {
        display: none;
    }

    .dashboardSettings .showModuleSettings label {
        position: relative;
        top: -2px;
        margin: 0 0 0 5px;
    }

    .dashboardSettings .group {
        border: 1px solid #eaeaea;
        margin: 4px 0 0;
        padding: 11px;
        position: relative;
    }

        .dashboardSettings .group .toggleSection {
            position: absolute;
            top: 5px;
            right: 12px;
        }

        .dashboardSettings .group .groupCollapse {
            display: none;
        }

            .dashboardSettings .group .groupCollapse table {
                margin-top: 20px;
            }

        .dashboardSettings .group h2 {
            font-size: 18px;
            margin: 0;
            padding: 0 0 4px;
        }

            .dashboardSettings .group h2 img {
                width: 24px;
                margin: 0 10px -5px 0;
            }

    .dashboardSettings .toggleSession {
        background: url(../images/icons/pastoral_cantView.png) no-repeat;
        width: 41px;
        height: 41px;
        display: block;
    }

        .dashboardSettings .toggleSession.active {
            background: url(../images/icons/pastoral_canView.png) no-repeat;
        }

    .dashboardSettings .licenceKey .textbox {
        padding: 6px;
        text-align: center;
    }

.moduleSetting .dashboardSettings {
    width: 100%;
    padding: 0;
    max-width: 100%;
}

    .moduleSetting .dashboardSettings .group h2 {
        display: none;
    }

    .moduleSetting .dashboardSettings .group .groupCollapse table {
        margin-top: 0;
    }

    .moduleSetting .dashboardSettings .moduleGroup {
        display: block;
    }


/*
    Configuration Settings
*/

.configurationSettings {
    margin: 0;
    padding: 11px 11px 16px;
    min-width: 900px;
}

/*
    User Roles
*/

.userRoles {
    margin: 0;
    padding: 11px;
}

    .userRoles .group {
        border: 1px solid #eaeaea;
        margin: 4px 0 0;
        padding: 11px;
    }

        .userRoles .group h2 {
            font-size: 18px;
            margin: 0;
            padding: 0 0 4px;
        }

        .userRoles .group table {
            width: 100%;
        }

            .userRoles .group table tr td .textbox {
                width: auto;
            }

            .userRoles .group table tr td .shortTextbox {
                width: 64px !important;
            }

            .userRoles .group table tr td .longTextbox {
                width: 350px !important;
            }

/*
    User Permissions
*/

.editPermissions {
    margin: 0;
    min-height: 120px;
    padding: 11px;
    width: 640px;
}

    .editPermissions table {
        width: 100%;
    }

/*
    User Permissions
*/

.editUsers {
    margin: 0;
    padding: 11px;
    width: 640px;
}

    .editUsers table {
        width: 100%;
    }

/*
    Users
*/

.userRegistration td input.aspNetDisabled {
    background-color: transparent !important;
    border: none !important;
}

/*
    My Exam Entries
*/

.myExamEntries {
    margin: 0;
    padding: 11px;
    min-width: 640px;
}

@media(max-width: 639px) {
    .myExamEntries {
        min-width: unset;
    }
}

/*
    My Exam Results
*/

.myExamResults {
    margin: 0;
    padding: 11px;
    min-width: 640px;
}

    .myExamResults h2 {
        font-size: 18px;
        line-height: 18px;
    }

@media(max-width: 639px) {
    .myExamResults {
        min-width: unset;
    }
}

/*
    My Pastoral
*/

.myPastoral {
    margin: 0;
    padding: 11px;
}

    .myPastoral h2 {
        font-size: 18px;
        line-height: 18px;
    }

/*
    My Learner Support
*/

.myLearnerSupport {
    margin: 0;
    padding: 11px;
}

/*
    My Details
*/

.myDetails {
    margin: 0;
    padding: 11px;
}

/*
    My Attendance
*/

.myAttendance {
    margin: 0;
    padding: 11px;
}

    .myAttendance h2 {
        font-size: 18px;
        line-height: 18px;
    }

/*
    My Courses
*/

.myCourses {
    margin: 0;
    padding: 11px;
    min-width: 640px;
}

    .myCourses table {
        width: 100%;
    }

    .myCourses table th {
        white-space: nowrap;
    }

/*
    Registers
*/

.registerDetails .registerFlex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.registerDetails .registerFlex .details {
    flex: 0 0 300px;
}

.registerDetails .myCourses {
    min-width: 90%;
    max-width: 100%;
}

    .registerDetails .myCourses table {
        width: auto;
        max-width: 600px;
    }

    .registerDetails .myCourses .coursesEmails {
        display: none;
    }

    .registerDetails .myCourses table tr td {
        border: none !important;
    }

    .registerDetails .scrollingTable {
        max-height: 75vh;
    }

        .registerDetails.expanded .scrollingTable {
            max-height: 100vh;
        }

    .registerDetails .summary .details {
        width: 20%;
    }

        .registerDetails .summary .details .img {
            width: 16px;
            height: 16px;
            padding: 4px 2px;
        }

        .registerDetails .summary .details.title {
            width: 98% !important;
        }

.registerDetails .teachersList {
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    width: 100%;
    padding: 1px;
}

.registerDetails .registerStudents .registerStudent .registerStudentAttendance td {
    min-width: 10px;
    text-align: center;
}

.registerStudent td select {
    max-width: none;
}

.registerStudent td input.aspNetDisabled {
    background-color: transparent !important;
    border: none !important;
}

.registerStudentAttendance td.currentMark {
    background-color: #feffad;
    color: #000;
}

.registerStudent td.notes.faded, .manageRegisters .notes.faded {
    opacity: 0.1;
    color: #808080;
}

.registerLeft .hideShow {
    margin-right: 12px;
}

.registerStudents .registerStudentStatus select[disabled=disabled] {
    background-color: transparent !important;
    color: #000 !important;
    border: 0;
    appearance: none;
    padding: 0px 16px 0 6px;
}

    .registerStudents .registerStudentStatus select[disabled=disabled]::-ms-expand {
        display: none;
    }

.manageRegistersSaved tr.faded td {
    opacity: 0.5;
}

.manageRegistersSaved td {
    padding: 0 6px;
}

.manageRegistersSaved.preview .fa {
    color: #e28830 !important;
}

.manageRegistersSaved.preview tr {
    border: 2px solid #e28830 !important;
}

.registerWarnings {
    margin: 20px 0;
    min-height: 200px;
}

    .registerWarnings .scrollingTable {
        max-height: 66vh;
    }

    .registerWarnings table th {
        text-align: center;
    }

    .registerWarnings table td, .registerWarnings table td.warning {
        padding: 0 8px;
    }

.registerClass tr.registerStudent.notOnTimetable, .registerClass tr.registerStudent.notOnTimetable td {
    background-color: #ffc94e;
}

.registerHistory .registerHistoryData table td {
    vertical-align: top;
    padding: 0 4px;
    min-width: 124px;
    white-space: nowrap !important;
}

/*
    student summary
*/

.studentSummary {
    padding: 20px;
}

    .studentSummary .summaryStudent, .studentSummary .separator {
        display: none;
    }

    .studentSummary .summarySection .summaryItems {
        display: grid;
        grid-template-columns: repeat(auto-fit, 25%);
    }

    @media screen and (max-width: 1200px){
        .studentSummary .summarySection .summaryItems {
            grid-template-columns: repeat(auto-fit, 33%);
        }
    }

    @media screen and (max-width: 900px) {
        .studentSummary .summarySection .summaryItems {
            grid-template-columns: repeat(auto-fit, 50%);
        }
    }

    @media screen and (max-width: 540px) {
        .studentSummary .summarySection .summaryItems {
            grid-template-columns: repeat(auto-fit, 100%);
        }
    }

    .studentSummary .summarySection .summaryItem {
        padding: 16px;
        outline: 1px solid #5a5654;
    }

        .studentSummary .summarySection .summaryItem.alternate {
            background: #f1f1f1 none no-repeat scroll 0 0;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .studentSummary .summarySection .summaryItem .title {
            font-weight: bold;
            font-size: 15px;
            float: left;
        }

            .studentSummary .summarySection .summaryItem .title .icon {
                padding-right: 12px;
            }

        .studentSummary .summarySection .summaryItem .subtitle {
            font-weight: bold;
            float: right;
            max-width: 50%;
            padding: 0 0 12px 12px;
        }

        .studentSummary .summarySection .summaryItem .attendance {
            padding: 12px !important;
        }

            .studentSummary .summarySection .summaryItem .attendance td {
                /* padding: 6px 0 12px; */
            }

        .studentSummary .summarySection .summaryItem .studentProgress {
            padding: 8px 0;
        }

.summarySection .summaryItem .timelost, .summarySection .summaryItem .timelate {
    padding: 10px !important;
}

.studentSummary .summarySection .summaryItem .pieChart {
    max-width: calc(50% - 20px);
    float: left;
}

.studentSummary .content table tr td {
    border: 1px solid #ccc !important;
    text-align: center;
}

.studentSummary .summaryTimetable {
    width: calc(100% - 32px) !important;
}

/*
    My eMarkBook
*/
.myEMarkBook {
    margin: 0;
    padding: 11px;
}

/*
    Student eMarkBook
*/

.eMarkBookStudent {
    margin: 0;
    padding: 0;
}

    .eMarkBookStudent .course {
        border: 1px solid #eee;
        margin: 11px 0 0;
        padding: 11px;
    }

        .eMarkBookStudent .course .unit {
            margin: 11px 0 0;
        }

            .eMarkBookStudent .course .unit .details {
                border: 1px solid #eee;
                border-collapse: collapse;
                width: 100%;
            }

                .eMarkBookStudent .course .unit .details th, .studentEMarkBook .course .unit .details td {
                    border: 1px solid #eee;
                    padding: 3px;
                    text-align: left;
                }

                .eMarkBookStudent .course .unit .details th {
                    font-weight: bold;
                    text-align: right;
                }

            .eMarkBookStudent .course .unit .academic th {
                text-align: center;
                vertical-align: bottom;
            }

            .eMarkBookStudent .course .unit .academic td {
                text-align: center;
            }

            .eMarkBookStudent .course .unit .vocational th {
                text-align: center;
                vertical-align: bottom;
            }

            .eMarkBookStudent .course .unit .vocational td {
                text-align: center;
            }

            .eMarkBookStudent .course .unit th .teacher {
                background: transparent url(../Images/Icons/teacher_24.gif) no-repeat scroll 0 0;
                display: inline-block;
                height: 24px;
                line-height: 0;
                margin: 0;
                padding: 0;
                width: 24px;
            }

    .eMarkBookStudent span.trackingOption {
        height: 20px;
        line-height: 20px;
        margin: 0 0 0 4px;
        width: 20px;
    }

.studentMarkbookGrid span.trackingOption {
    cursor: default;
}

.vocationalProgress .criteria .unit .criterion {
    padding: 2px;
    min-height: 32px;
}
.vocationalProgress .criteria .unit .separator {
    min-height: 32px;
}
.vocationalProgress .criteria .unit .criterion.whiteBorder { border: 2px solid #fff !important; }
.vocationalProgress .criteria .unit .criterion.greyBorder { border: 2px solid #808080 !important; }
.vocationalProgress .criteria .unit .criterion.redBorder { border: 2px solid #e63d43 !important; }
.vocationalProgress .criteria .unit .criterion.amberBorder { border: 2px solid #e28830 !important; }
.vocationalProgress .criteria .unit .criterion.greenBorder { border: 2px solid #6fb366 !important; }
.vocationalProgress .criteria .unit .criterion.blueBorder { border: 2px solid #1773b7 !important; }
.vocationalProgress .criteria .unit .criterion.purpleBorder { border: 2px solid #972889 !important; }
.vocationalProgress .criteria .unit .criterion.defaultBorder { border: 2px solid !important; }

.vocationalProgress .criteria .unit .unitResult { padding: 0 8px; }
    .vocationalProgress .criteria .unit .unitResult a, .vocationalProgress .criteria .unit a { color: #fff; }
        .vocationalProgress .criteria .unit a:hover, .vocationalProgress .criteria .unit a:hover .unitResult {
            text-decoration: none;
            background-color: #000 !important;
            color: #fff !important;
        }

.courseDetails .departmentAttendance.markBook .vocationalProgressContainer .vocationalProgress, .studentEMarkBook .vocationalProgressContainer .vocationalProgress {
    width: 100%;
}

.courseDetails .details {
    position: relative;
}

    .courseDetails .details .information {
        position: absolute;
        left: 2%;
    }

.multiyearAcademicSummary table td:first-child, .multiyearAcademicSummary table th:first-child {
    height: 32px;
    padding: 2px 8px;
}

/*
    View Event
*/
.fullCalendarEvent {
    margin: 0;
    padding: 11px 0;
    width: 600px;
}

    .fullCalendarEvent h2 {
        margin: 0;
        padding: 11px 11px 0;
    }

    .fullCalendarEvent h3 {
        font-size: 14px;
        margin: 0;
        padding: 0 11px 11px;
    }

        .fullCalendarEvent h3 span {
            color: #666;
            font-weight: normal;
        }

    .fullCalendarEvent img {
        border: 1px solid #f1f1f1;
        display: inline;
        float: right;
        margin: 0 11px 11px 11px;
        padding: 11px;
        width: auto;
    }

        .fullCalendarEvent img.icon {
            border: none;
            float: right;
            margin: 11px;
            padding: 0px;
            width: 32px;
        }

    .fullCalendarEvent .text {
        margin: 0;
        padding: 11px;
    }

    .fullCalendarEvent .buttons {
        margin: 11px 11px 0;
    }

/*
    Tracking Notes
*/

.trackingNotes {
    margin: 0;
    padding: 11px;
    width: 600px;
}

    .trackingNotes .context {
        margin: 0;
        padding: 0;
    }

    .trackingNotes h2 {
        margin: 0;
        padding: 0;
    }

    .trackingNotes .form {
        padding: 0;
    }

        .trackingNotes .form label, .trackingNotes label {
            height: 32px;
            line-height: 32px;
            padding: 0;
            display: initial;
            padding-left: 4px;
        }

    .trackingNotes .trackingOptions {
        margin: 0;
        padding: 0;
    }

        .trackingNotes .trackingOptions .item {
            border: 1px solid #e1e1e1;
            color: #212121;
            float: left;
            height: 32px;
            line-height: 32px;
            margin: 0 1px 2px;
            padding: 0;
            text-align: center;
            width: 32px;
        }

        .trackingNotes .trackingOptions .active {
            border: 1px solid #212121;
        }

    .trackingNotes .form .customText {
        margin: 0;
        padding: 0;
    }

        .trackingNotes .form .customText textarea {
            height: 100px;
        }

    .trackingNotes .separator {
        margin: 16px 0 0;
        padding: 0 0 16px;
    }

    .trackingNotes .history {
        margin: 4px 0 0;
    }

        .trackingNotes .history td.trackingOption, .trackingNotes .history th.trackingOption {
            width: 34px;
        }

        .trackingNotes .history td span.trackingOption {
            border: 1px solid #212121;
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            vertical-align: middle;
            width: 32px;
        }

        .trackingNotes .history tr.old td {
            text-decoration: line-through;
        }

            .trackingNotes .history tr.old td span.trackingOption {
                -khtml-opacity: 0.5;
                -moz-opacity: 0.5;
                -ms-filter: "alpha(opacity=50)";
                opacity: 0.5;
                text-decoration: line-through;
            }

/*
    ePastoral
*/

.ePastoral {
    margin: 0;
    padding: 11px;
}

    .ePastoral .tabsOnLeft {
        margin: 11px 0 8px;
    }

/*
        ePastoral - Staff Pastoral
    */

.staffPastoral {
    margin: 0;
    padding: 0;
}

    .staffPastoral .ajax__tab_container {
        margin: 10px 0 0;
    }

    .staffPastoral table {
        width: 100%;
    }

        .staffPastoral table tr td a.view {
            display: inline-block;
            font-size: 0;
            height: 24px;
            line-height: 0;
            margin: 0;
            padding: 0;
            width: 24px;
        }

        .staffPastoral table tr.unread, .staffPastoral table tr.unread a, .staffMessageBoard table tr.unread, .staffMessageBoard table tr.unread a {
            color: #0000b1;
        }

        .staffPastoral table tr.unreadWarning, .staffPastoral table tr.unreadWarning a, .staffMessageBoard table tr.unreadWarning, .staffMessageBoard table tr.unreadWarning a {
            color: #ad0001;
        }

        .staffPastoral table tr.unreadProxy, .staffPastoral table tr.unreadProxy a {
            color: #404040;
            border: 2px dotted #404040;
        }

        .staffPastoral table tr.unread, .staffMessageBoard table tr.unread {
            border-left: 2px double #0000b1;
            border-right: 2px double #0000b1;
        }

        .staffPastoral table tr.unreadWarning, .staffMessageBoard table tr.unreadWarning {
            border-left: 2px double #ff0000;
            border-right: 2px double #ff0000;
        }

        .staffPastoral table tr.archived, .staffMessageBoard table tr.archived {
            border-left: 2px double #808080;
            border-right: 2px double #808080;
        }

    .staffPastoral .ajax__tab_header > span:nth-child(3) .ajax__tab_tab {
        background: #c9282d;
        font-size: 17px;
        font-weight: bold;
    }

    .staffPastoral .ajax__tab_header > span:not(.ajax__tab_active):nth-child(3) .ajax__tab_tab {
        border-top-color: #c9282d;
        border-right-color: #c9282d;
        border-left-color: #c9282d;
        background: #c9282d;
        font-size: 17px;
        font-weight: bold;
    }

    .staffPastoral .ajax__tab_header > span:nth-child(4) .ajax__tab_outer {
        margin-left: 10px;
    }

    .staffPastoral .settings select,
    .staffPastoral .settings .textbox {
        width: auto;
        margin-right: 5px;
    }

/*
        ePastoral - Status Tracker
    */

.statusTracker {
    width: 100%;
}

    .statusTracker table {
        width: 100%;
    }

/*
        ePastoral - Form Management
    */

.formManagement {
    margin: 0;
    padding: 0;
}

    .formManagement table {
        width: 100%;
    }

        .formManagement table tr td {
        }

/*
        ePastoral - Edit Form
    */

.editPastoralForm {
    margin: 0;
    padding: 0;
    width: 950px;
}

    .editPastoralForm .form select {
        width: auto;
    }

    .editPastoralForm .form .description {
        height: 40px;
    }

    .editPastoralForm .form .summaryOptions {
        height: 80px;
    }

    .editPastoralForm .form .template {
        height: 200px;
    }

    .editPastoralForm .form .recipient {
        margin-top: -10px;
        margin-bottom: 20px !important;
    }

/*
        ePastoral - Edit Form Entry
    */

.editPastoralFormEntry {
    margin: 0;
    padding: 0;
    width: 950px;
}

    .editPastoralFormEntry .separator {
        clear: both;
        margin: 11px 0 0;
        padding: 0 0 7px;
    }

    .editPastoralFormEntry .form select {
        width: auto;
    }

    .editPastoralFormEntry .form .row {
        padding: 0 0 0 250px;
    }

        .editPastoralFormEntry .form .row label {
            margin: 0 0 0 -250px;
            width: 240px;
        }

        /* Columns */
        .editPastoralFormEntry .form .row .col {
            float: left;
        }

            .editPastoralFormEntry .form .row .col .input {
                max-width: 94% !important;
                margin-bottom: 10px;
            }

        .editPastoralFormEntry .form .row p {
            padding: 10px 0 !important;
        }

        .editPastoralFormEntry .form .row .col:last-child {
            float: right;
        }

        .editPastoralFormEntry .form .row .col label {
            margin: 0 0 0 0;
            width: auto;
            min-width: 125px;
            margin-right: 8px;
        }

        .editPastoralFormEntry .form .row .studentSearch {
        }

            .editPastoralFormEntry .form .row .studentSearch input.textbox {
                width: 150px;
            }

        .editPastoralFormEntry .form .row .errorLabel {
            color: #ff0000;
            display: block;
            margin: 0;
            padding: 0 0 4px;
        }

    @media(max-width: 768px) {
        .editPastoralFormEntry .form .row {
            padding: 0;
        }

            .editPastoralFormEntry .form .row label {
                margin: 0;
            }
    }

    .editPastoralFormEntry .formDetails {
        margin: 0;
        padding: 10px;
    }

        .editPastoralFormEntry .formDetails p {
            margin: 0;
            padding: 4px 0 0;
        }

    .editPastoralFormEntry .multiplePrimaryRecipients {
        background: rgba(0, 0, 0, 0.7);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 2;
    }

        .editPastoralFormEntry .multiplePrimaryRecipients .scrollingSection {
            background: #fff;
            height: 320px;
            left: 50%;
            margin: -170px 0 0 -170px;
            padding: 10px;
            position: fixed;
            top: 50%;
            width: 320px;
        }

            .editPastoralFormEntry .multiplePrimaryRecipients .scrollingSection .inner {
                height: 200px;
                overflow-y: auto;
                width: 320px;
            }

                .editPastoralFormEntry .multiplePrimaryRecipients .scrollingSection .inner table {
                    width: 100%;
                }

            .editPastoralFormEntry .multiplePrimaryRecipients .scrollingSection a {
                float: right;
                margin: 8px 0 0;
            }

/*
        ePastoral - View Form Entry
    */

.viewPastoralFormEntry {
    margin: 0;
    padding: 0;
    width: 950px;
}

    .viewPastoralFormEntry .viewFormEntry {
        margin: 0;
        padding: 11px;
    }

        .viewPastoralFormEntry .viewFormEntry .buttons {
            margin: 11px 0 0;
        }

        .viewPastoralFormEntry .viewFormEntry .topButtons {
            margin: 0;
        }

        .viewPastoralFormEntry .viewFormEntry .commentDetails {
            float: left;
            margin: 11px 0 0;
            padding: 0;
            width: 50%;
        }

            .viewPastoralFormEntry .viewFormEntry .commentDetails .inner {
                border: 1px solid #e1e1e1;
                margin: 0 5px 0 0;
                padding: 11px;
            }

        .viewPastoralFormEntry .viewFormEntry .studentDetails {
            float: right;
            margin: 11px 0 0;
            padding: 0;
            width: 50%;
        }

            .viewPastoralFormEntry .viewFormEntry .studentDetails .inner {
                border: 1px solid #e1e1e1;
                margin: 0 0 0 6px;
                padding: 11px;
            }

        .viewPastoralFormEntry .viewFormEntry .formTargetReview .group .row, .viewPastoralFormEntry .viewFormEntry .formNoTargetReview .group .row, .viewPastoralFormEntry .viewFormEntry .addResponse .row {
            padding-left: 120px !important;
        }

        .viewPastoralFormEntry .viewFormEntry .formTargetReview .targetReview {
            padding: 8px;
        }

        .viewPastoralFormEntry .viewFormEntry .formTargetReview .targetReview .row label {
            float: left !important;
        }

        .viewPastoralFormEntry .viewFormEntry .form .row.changeStudentStatus {
            margin: 0;
            padding-left: 120px !important;
            width: auto;
        }

        @media(max-width: 639px) {
            .viewPastoralFormEntry .viewFormEntry .commentDetails,
            .viewPastoralFormEntry .viewFormEntry .studentDetails {
                float: none;
                width: auto;
            }
}

        .viewPastoralFormEntry .viewFormEntry .comment:not(.pastoralStatus) {
            border: 1px solid #e1e1e1;
            margin: 11px 0 0;
            padding: 11px;
        }

        .viewPastoralFormEntry .viewFormEntry .sensitive, .editPastoralFormEntry .editFormEntry .sensitive {
            background-color: #ffeded;
            border: 1px dotted #bf0000;
            padding: 11px;
            margin: 11px 0 0;
        }

            .viewPastoralFormEntry .viewFormEntry .sensitive .fa, .editPastoralFormEntry .editFormEntry .sensitive .fa {
                float: left;
                margin: -7px 4px 0 -4px;
                color: #bf0000 !important;
            }

        .viewPastoralFormEntry .viewFormEntry .response {
            border: 1px solid #c0ffc0;
            margin: 11px 0 0;
            padding: 4px;
        }

        .viewPastoralFormEntry .viewFormEntry .redComment {
            border-color: #ffc0c0;
            padding: 4px;
        }

        .viewPastoralFormEntry .viewFormEntry .addResponse #divCloseComment label {
            margin-top: 7px;
        }
            .viewPastoralFormEntry .viewFormEntry .addResponse #divCloseComment label {
                margin-top: -2px;
            }
            .viewPastoralFormEntry .viewFormEntry .addResponse #divCloseComment .infoBox {
                margin-top: 12px;
            }        

        .viewPastoralFormEntry .viewFormEntry .response .responseText {
            padding: 4px;
        }

        .viewPastoralFormEntry .viewFormEntry .comment .commentSettings {
            float: right;
            margin: 0;
            padding: 0;
            width: auto;
        }

        .viewPastoralFormEntry .viewFormEntry .comment .buttons {
            margin: 4px 0 0;
        }

        .viewPastoralFormEntry .viewFormEntry .redComment .titleBar {
            background-color: #ffc0c0;
            margin: 0;
            padding: 4px;
        }

        .viewPastoralFormEntry .viewFormEntry .response .titleBar {
            background-color: #c0ffc0;
            margin: 0;
            padding: 4px;
        }

        .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup {
            border: 1px solid #e1e1e1;
            margin: 4px 0 0;
            padding: 11px;
        }

            .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup .field {
                box-sizing: border-box;
                float: left;
                margin: 4px 0 0;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                padding: 0 0 0 250px;
                width: 100%;
                -webkit-box-sizing: border-box;
            }

                .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup .field .label {
                    display: block;
                    float: left;
                    font-weight: bold;
                    margin: 0 0 0 -250px;
                    padding: 3px 0;
                    width: 240px;
                }

                .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup .field .value {
                    display: block;
                    margin: 0;
                    padding: 3px 0;
                }

        .viewPastoralFormEntry .viewFormEntry .response .fieldgroup {
            border: 0;
            ;
            margin: 4px 0 0;
            padding: 0;
        }

            .viewPastoralFormEntry .viewFormEntry .response .fieldgroup .field {
                box-sizing: border-box;
                float: left;
                margin: 4px 0 0;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                padding: 0 0 0 250px;
                width: 100%;
                -webkit-box-sizing: border-box;
            }

                .viewPastoralFormEntry .viewFormEntry .response .fieldgroup .field .label {
                    display: block;
                    float: left;
                    font-weight: bold;
                    margin: 0 0 0 -250px;
                    padding: 3px 0;
                    width: 240px;
                }

                .viewPastoralFormEntry .viewFormEntry .response .fieldgroup .field .value {
                    display: block;
                    margin: 0;
                    padding: 3px 0;
                }

        .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup .field p:last-child {
            padding-bottom: 0;
        }

        /* Columns */
        .viewPastoralFormEntry .viewFormEntry .row {
            padding-left: 250px !important;
        }

            .viewPastoralFormEntry .viewFormEntry .row .col {
                float: left;
                margin-right: 10px;
            }

        .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup .row .col .field {
            padding-left: 0 !important;
        }

            .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup .row .col .field .input {
                max-width: 94% !important;
                padding-left: 0 !important;
                margin-bottom: 10px !important;
            }

        .viewPastoralFormEntry .viewFormEntry .form .row .col p {
            padding-bottom: 10px !important;
        }

        .viewPastoralFormEntry .viewFormEntry .row .col:last-child {
            float: right;
        }

        .viewPastoralFormEntry .viewFormEntry .comment .fieldgroup .row .col .field .label {
            margin: 0 0 0 0;
            width: auto;
            min-width: 125px;
        }

/*
        ePastoral - View Form Entry History
    */

.viewPastoralFormEntryHistory {
    margin: 0;
    padding: 0;
    width: 512px;
}

    .viewPastoralFormEntryHistory .viewFormEntryHistory {
        margin: 0;
        padding: 11px;
    }

/*
        ePastoral - Edit Response
    */

.editPastoralFormResponse {
    width: 640px;
    min-height: 720px;
    max-height: 100%;
}

    .editPastoralFormResponse input[type=checkbox] {
        float: left;
        margin-right: 8px;
    }

    .editPastoralFormResponse .checkbox.fullWidth label {
        width: auto;
    }

/*
        ePastoral - Monitor
    */

.pastoralMonitor {
}

    .pastoralMonitor .standardTable {
        margin: 11px 0 0;
        width: 100%;
    }

/*
        Learner Support - Clipped Image
    */

.clippedImage {
    display: block;
    height: 26px;
    overflow: hidden;
}


/*
        Learner Support - Student Details
    */

.learnerSupportStudentDetails table .editingButtons a {
    margin: 0 0 5px 0;
}

.learnerSupportStudentDetails .readOnly {
    background-color: transparent !important;
    color: #000 !important;
    border: none !important;
}

.learnerSupportStudentDetails table.groupData td .label {
    margin: 4px;
    display: block;
}

.learnerSupportStudentDetails table.groupData th {
    white-space: nowrap;
}

/*
        Learner Support - Edit Form
    */
.editLearnerSupportForm {
    margin: 0;
    padding: 0;
    width: 950px;
}

    .editLearnerSupportForm .form select {
        width: auto;
    }

    .editLearnerSupportForm .form .description {
        height: 40px;
    }

    .editLearnerSupportForm .form .summaryOptions {
        height: 80px;
    }

    .editLearnerSupportForm .form .template {
        height: 200px;
    }

    .editLearnerSupportForm .form .typeButtons a {
        width: 24px;
        height: 24px;
        display: block;
        float: left;
        margin: 0 8px 0 0;
        border: 1px solid #ccc;
        padding: 10px;
        background-color: #e1e1e1;
        background-repeat: no-repeat;
        background-position: center 10px;
    }

        .noTouchEvents .editLearnerSupportForm .form .typeButtons a:hover,
        .editLearnerSupportForm .form .typeButtons a.selected {
            border: 1px solid #e1e1e1;
            background-color: #000;
            background-position: center -26px;
        }

    .editLearnerSupportForm .form .typeButtons .workflow {
        background-image: url(../images/icons/learner-support-message-workflow.png);
    }

    .editLearnerSupportForm .form .typeButtons .informational {
        background-image: url(../images/icons/learner-support-message-informational.png);
    }

    .editLearnerSupportForm .form .typeButtons .log {
        background-image: url(../images/icons/learner-support-message-log.png);
    }

/*
        Learner Support - Edit Form Entry
    */

.editLearnerSupportFormEntry {
    margin: 0;
    padding: 0;
}

    .editLearnerSupportFormEntry .separator {
        clear: both;
        margin: 11px 0 0;
        padding: 0 0 7px;
    }

    .editLearnerSupportFormEntry .form select {
        width: auto;
        min-width: 260px;
    }

    .editLearnerSupportFormEntry .form .row {
        padding: 0 0 0 250px;
    }

        .editLearnerSupportFormEntry .form .row img {
            max-width: 100%;
        }

        .editLearnerSupportFormEntry .form .row label {
            margin: 0 0 0 -250px;
            width: 240px;
        }

        .editLearnerSupportFormEntry .form .row p:last-child {
            padding-bottom: 0;
        }

        /* Columns */
        .editLearnerSupportFormEntry .form .row .col {
            float: left;
            margin-right: 10px;
        }

            .editLearnerSupportFormEntry .form .row .col .input {
                max-width: 94% !important;
                margin-bottom: 10px !important;
            }

        .editLearnerSupportFormEntry .form .row p {
            padding: 10px 0 !important;
        }

        .editLearnerSupportFormEntry .form .row .col:last-child {
            float: right;
        }

        .editLearnerSupportFormEntry .form .row .col label {
            margin: 0 0 0 0;
            width: auto;
            min-width: 125px;
        }

        .editLearnerSupportFormEntry .form .row .studentSearch {
        }

            .editLearnerSupportFormEntry .form .row .studentSearch input.textbox {
                width: 150px;
            }

        .editLearnerSupportFormEntry .form .row .errorLabel {
            color: #ff0000;
            display: block;
            margin: 0;
            padding: 0 0 4px;
        }

    .editLearnerSupportFormEntry .formDetails {
        margin: 0;
        padding: 10px;
    }

        .editLearnerSupportFormEntry .formDetails p {
            margin: 0;
            padding: 4px 0 0;
        }

    .editLearnerSupportFormEntry .multiplePrimaryRecipients {
        background: rgba(0, 0, 0, 0.7);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 2;
    }

        .editLearnerSupportFormEntry .multiplePrimaryRecipients .scrollingSection {
            background: #fff;
            height: auto;
            left: 50%;
            margin: -170px 0 0 -170px;
            padding: 10px;
            position: fixed;
            top: 50%;
            width: 320px;
        }

            .editLearnerSupportFormEntry .multiplePrimaryRecipients .scrollingSection .inner {
                height: 200px;
                overflow-y: auto;
                width: 320px;
            }

                .editLearnerSupportFormEntry .multiplePrimaryRecipients .scrollingSection .inner table {
                    width: 100%;
                }

            .editLearnerSupportFormEntry .multiplePrimaryRecipients .scrollingSection a {
                float: right;
                margin: 8px 0 0;
            }

    .editLearnerSupportFormEntry .buttonsGroup {
        min-width: 550px;
    }

        .editLearnerSupportFormEntry .buttonsGroup a {
            width: 24px;
            height: 24px;
            display: block;
            float: left;
            margin: 0 8px 8px 0;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #e1e1e1;
        }

            .editLearnerSupportFormEntry .buttonsGroup a:nth-child(6n+6) {
                clear: left;
            }

            .noTouchEvents .editLearnerSupportFormEntry .buttonsGroup a:hover,
            .editLearnerSupportFormEntry .buttonsGroup a.selected {
                border: 1px solid #e1e1e1;
                background-color: #000;
            }

                .editLearnerSupportFormEntry .buttonsGroup a.selected span img,
                .noTouchEvents .editLearnerSupportFormEntry .buttonsGroup a:hover span img {
                    margin-top: -34px;
                }

    .editLearnerSupportFormEntry .studentSelector input[type=text] {
        width: 260px;
    }

/*
        Learner Support - View Form Entry
    */

.viewLearnerSupportFormEntry {
    margin: 0;
    padding: 0;
    width: 950px;
}

    .viewLearnerSupportFormEntry .viewFormEntry {
        margin: 0;
        padding: 11px;
    }

        .viewLearnerSupportFormEntry .viewFormEntry .buttons {
            margin: 11px 0 0;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .topButtons {
            margin: 0;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .commentDetails {
            margin: 11px 0 0;
            padding: 0;
        }

            .viewLearnerSupportFormEntry .viewFormEntry .commentDetails .inner {
                border: 1px solid #e1e1e1;
                margin: 0 5px 0 0;
                padding: 11px;
            }

        .viewLearnerSupportFormEntry .viewFormEntry .studentDetails {
            margin: 11px 0 0;
            padding: 0;
        }

            .viewLearnerSupportFormEntry .viewFormEntry .studentDetails .inner {
                border: 1px solid #e1e1e1;
                margin: 0 0 0 6px;
                padding: 11px;
            }

        .viewLearnerSupportFormEntry .viewFormEntry .comment {
            border: 1px solid #e1e1e1;
            margin: 11px 0 0;
            padding: 11px;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .response {
            border: 1px solid #c0ffc0;
            margin: 11px 0 0;
            padding: 4px;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .redComment {
            border-color: #ffc0c0;
            padding: 4px;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .response .responseText {
            padding: 4px;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .comment .commentSettings {
            float: right;
            margin: 0;
            padding: 0;
            width: auto;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .comment .buttons {
            margin: 4px 0 0;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .redComment .titleBar {
            background-color: #ffc0c0;
            margin: 0;
            padding: 4px;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .response .titleBar {
            background-color: #c0ffc0;
            margin: 0;
            padding: 4px;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup {
            border: 1px solid #e1e1e1;
            margin: 4px 0 0;
            padding: 11px;
        }

            .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup .field {
                box-sizing: border-box;
                float: left;
                margin: 4px 0 0;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                padding: 0 0 0 250px;
                width: 100%;
                -webkit-box-sizing: border-box;
            }

                .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup .field .label {
                    display: block;
                    float: left;
                    font-weight: bold;
                    margin: 0 0 0 -250px;
                    padding: 3px 0;
                    width: 240px;
                }

                .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup .field .value {
                    display: block;
                    margin: 0;
                    padding: 3px 0;
                    float: left;
                }

        .viewLearnerSupportFormEntry .viewFormEntry .response .fieldgroup {
            border: 0;
            margin: 4px 0 0;
            padding: 0;
        }

            .viewLearnerSupportFormEntry .viewFormEntry .response .fieldgroup .field {
                box-sizing: border-box;
                float: left;
                margin: 4px 0 0;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                padding: 0 0 0 250px;
                width: 100%;
                -webkit-box-sizing: border-box;
            }

                .viewLearnerSupportFormEntry .viewFormEntry .response .fieldgroup .field .label {
                    display: block;
                    float: left;
                    font-weight: bold;
                    margin: 0 0 0 -250px;
                    padding: 3px 0;
                    width: 240px;
                }

                .viewLearnerSupportFormEntry .viewFormEntry .response .fieldgroup .field .value {
                    display: block;
                    margin: 0;
                    padding: 3px 0;
                }

        .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup .field p:last-child {
            padding-bottom: 0;
        }

        /* Columns */
        .viewLearnerSupportFormEntry .viewFormEntry .row {
            padding-left: 250px !important;
        }

            .viewLearnerSupportFormEntry .viewFormEntry .row .col {
                float: left;
                margin-right: 10px;
            }

        .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup .row .col .field {
            padding-left: 0 !important;
        }

            .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup .row .col .field .input {
                max-width: 94% !important;
                padding-left: 0 !important;
                margin-bottom: 10px !important;
            }

        .viewLearnerSupportFormEntry .viewFormEntry .row .col p {
            padding-bottom: 10px !important;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .row .col:last-child {
            float: right;
        }

        .viewLearnerSupportFormEntry .viewFormEntry .comment .fieldgroup .row .col .field .label {
            margin: 0 0 0 0;
            width: auto;
            min-width: 125px;
        }

.viewLearnerSupportFormEntry .viewFormEntry .sensitive, .editLearnerSupportFormEntry .editFormEntry .sensitive {
    background-color: #ffeded;
    border: 1px dotted #bf0000;
    padding: 11px;
    margin: 11px 0 0;
}

    .viewLearnerSupportFormEntry .viewFormEntry .sensitive .fa, .editLearnerSupportFormEntry .editFormEntry .sensitive .fa {
        float: left;
        margin: -7px 4px 0 -4px;
        color: #bf0000 !important;
    }

/*
    Learner Support - View Form Entry History
*/

.viewLearnerSupportFormEntryHistory {
    margin: 0;
    padding: 0;
    width: 512px;
}

    .viewLearnerSupportFormEntryHistory .viewFormEntryHistory {
        margin: 0;
        padding: 11px;
    }

/*
        Learner Support - Edit Response
    */

.editLearnerSupportFormResponse {
    width: 640px;
}

/*
        Student Profile - Pastoral - Status Entries
    */

.statusEntries {
    float: left;
    line-height: 40px;
    margin: -40px 0 0;
    text-align: center;
    width: 100%;
}

/*
    Attendance Codes
*/

.attendanceCodes {
    padding: 11px 11px 16px;
}

    .attendanceCodes h2 {
        padding-bottom: 8px;
    }

/*
    Multiple Primary Recipients
*/

.multiplePrimaryRecipients {
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
}

    .multiplePrimaryRecipients .scrollingSection {
        background: #fff;
        height: 320px;
        left: 50%;
        margin: -170px 0 0 -170px;
        padding: 10px;
        position: fixed;
        top: 50%;
        width: 320px;
    }

        .multiplePrimaryRecipients .scrollingSection .inner {
            height: 200px;
            overflow-y: auto;
            width: 320px;
        }

            .multiplePrimaryRecipients .scrollingSection .inner table {
                width: 100%;
            }

        .multiplePrimaryRecipients .scrollingSection a {
            float: right;
            margin: 8px 0 0;
        }

/*
    Manage markbook course
*/

.manageMarkbookCourse {
    margin: 0;
    padding: 11px;
    min-width: 900px;
}

    .manageMarkbookCourse .unitTotals {
        margin: 11px 0 0;
    }

    .manageMarkbookCourse .units {
        margin: 11px 0 0;
    }

    .manageMarkbookCourse .ruleSet {
        margin: 11px 0 0;
    }

    .manageMarkbookCourse .unitsResponse p {
        padding: 10px 5px 10px 10px;
    }

    .manageMarkbookCourse .unitsResponse ul {
        margin: 0;
        padding: 10px 0 10px 32px;
    }

/*
    Copy markbook configuration
*/

.copyMarkbookConfiguration {
    margin: 0;
    padding: 11px;
    width: 900px;
}

/*
    Manage courses
*/

.manageCourses h2 {
    line-height: 32px;
    margin: 0;
    padding: 0;
}

.manageCourses .settings .row select {
    max-width: 430px;
}

/*
    Terminology
*/

.terminology {
    margin: 0;
    padding: 11px;
    width: 512px;
}

/*
    Role mappings
*/

.roleMappings {
    margin: 0;
    padding: 11px;
    width: 512px;
}

/*
    Configure step
*/

.configureStep {
}

    .configureStep table {
        border: 2px double #777 !important;
        margin: 16px 0 0;
    }

        .configureStep table .noWrap {
            text-align: right;
        }

    .configureStep .template > table:first-child {
        margin: 0;
    }

    .configureStep table tr th.iconCell {
        text-align: center;
        vertical-align: middle;
    }

        .configureStep table tr th.iconCell span {
            background: transparent none no-repeat scroll 0 0;
            display: inline-block;
            height: 20px;
            margin: 4px 0 0;
            width: 20px;
        }

    .configureStep table tr th .iconButton, .configureStep table tr td .iconButton {
    }

    .configureStep table tr th select, .configureStep table tr td select {
        width: 100% !important;
    }

    .configureStep table tr.group th {
        background-color: #ccc;
        border-color: #777;
    }

        .configureStep table tr.group th .textbox {
            background-color: #ccc;
            border: 0 none;
            font-weight: bold;
            height: 32px;
            line-height: 32px;
        }

.configureStep_comments {
    background-image: url(../images/icons/configureStep_comments.png) !important;
}

.configureStep_mandatory {
    background-image: url(../images/icons/configureStep_mandatory.png) !important;
}

.configureStep_sensitive {
    background-image: url(../images/icons/configureStep_sensitive.png) !important;
}

.configureStep_status {
    background-image: url(../images/icons/configureStep_status.png) !important;
}

.configureStep_externalise {
    background-image: url(../images/icons/configureStep_externalise.png) !important;
}

/*
    Student Record Form
*/

.studentRecordForm {
}

.srfGrid table thead tr th.special {
    background-color: #fff;
    border: 0 none;
    text-align: right;
}

.srfGrid table thead tr th, .studentRecordForm table tbody tr td {
    transition: padding 0.5s;
}

    .srfGrid table thead tr th span, .studentRecordForm table tbody tr td span {
        display: inline-block;
        transition: 0.5s;
    }

    .srfGrid table thead tr th.collapsed, .studentRecordForm table tbody tr td.collapsed {
        padding: 0;
    }

        .srfGrid table thead tr th.collapsed span, .studentRecordForm table tbody tr td.collapsed span {
            height: 0;
            overflow: hidden;
            padding: 0;
            width: 0;
        }

.studentRecordForm .panel {
    border: 1px solid #eaeaea;
    margin: 11px 0 0;
    padding: 11px;
}

.studentRecordForm .srfGrid {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 60vh;
}

/*
    Historic ILPs    
*/

.historicILPs {
    padding: 20px 0 0;
}

    .historicILPs h3 {
        padding: 0 0 10px;
    }

/*

/*
    Student ILP
*/

.studentILP .courseWrapper {
    max-width: 45%;
}

    .studentILP .courseWrapper .teacherStudentIcons {
        margin-left: 20px;
        display: inline-block;
        float: right;
        padding-top: 4px;
    }

        .studentILP .courseWrapper .teacherStudentIcons img {
            vertical-align: middle;
            height: 16px;
            position: relative;
            top: -1px;
        }

        .studentILP .courseWrapper .teacherStudentIcons .hideVal {
            color: #fff;
        }

.studentILP .courseHeading .courseWrapper {
    max-width: 100%;
    padding-right: 12px;
}

/*
    ILP Report
*/

.reportPadding.excludeReport a.iconButton:not(.iconButton-print),
.reportPadding.excludeReport .buttons,
.reportPadding.excludeReport .excluded {
    display: none !important;
}

/*
    Learner Support
*/

.learnerSupport {
    margin: 0;
    padding: 11px;
}

    .learnerSupport .tabsOnLeft {
        margin: 11px 0 8px;
    }

/*
    References
*/

.previewReference {
    width: 825px;
    max-width: 825px;
}

.references_expander {
    padding: 8px;
}

    .references_expander a.expand, .references_expander a.contract {
        float: right;
    }

.references_expander_content {
    padding: 8px 0 0;
}

.References .references_expander h3 {
    padding: 8px 0 0 !important;
}

.References .staffView .hasReferences .referencesAssignments {
    max-height: 50vh !important;
}

.References .staffView table tr td.statement img {
    transform: rotate(45deg);
    width: 84%;
    margin: 1px;
    vertical-align: top;
}

#commentsExpander .group {
    border: 1px solid #eaeaea;
    margin: 4px 0 0;
    padding: 11px;
    position: relative;
}

    #commentsExpander .group .toggleSection {
        position: absolute;
        top: 5px;
        right: 12px;
    }

    #commentsExpander .group .groupCollapse {
        display: none;
        margin-top: 10px;
        overflow: hidden;
        clear: both;
    }

#commentsExpander .commentBlock {
    float: left;
    margin: 10px 20px;
}

    #commentsExpander .commentBlock .smallIcon {
        position: relative;
        top: -2px;
    }

#commentsExpander .commentBlock .comment {
    padding: 8px;
}

#commentsExpander .iconImg {
    position: relative;
    top: -1px;
    float: left;
    margin-right: 6px;
}

.subjectComments, .subjectNotes {
    background-color: #eaeaea;
    padding: 10px 7px;
    margin-bottom: 12px;
}

    .subjectComments img, .subjectNotes img {
        float: left;
        position: relative;
        top: -2px;
        margin-right: 7px;
    }

.referencesStaff .updatedGrade, .referencesStaff .defaultGrade, .referencesStaff .updatedGradeStatus {
    border: 1px solid #e28830;
}

.referencesStaff .aspNetDisabled.updatedGrade, .referencesStaff .aspNetDisabled.defaultGrade, .referencesStaff .aspNetDisabled.updatedGradeStatus {
    background-color: #e28830 !important;
    color: #fff !important;
}

/*
    
*/
    .markbookCourseSummary {
    max-width: 100%;
    padding: 11px;
    width: auto;
}

/*
    Release Notes
*/

.releaseNotes {
    padding: 20px;
}

    .releaseNotes .checkboxNotes {
        background-color: #f7eed2;
        padding: 10px;
        margin: 30px 0 20px;
    }

        .releaseNotes .checkboxNotes input {
            position: relative;
            top: 2px;
        }

        .releaseNotes .checkboxNotes label {
            padding-left: 5px;
        }

    .releaseNotes table {
        width: 100%;
    }

    .releaseNotes .monitorUpdate {
        background-color: #f0f0f0;
        padding: 15px 15px 5px 15px;
        margin: 20px 0 15px 0;
    }

        .releaseNotes .monitorUpdate h3 {
            font-size: 14px;
            margin-bottom: 5px;
        }

/*
    ILP Snapshotter    
*/

@keyframes progressBar {
    0% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 20px, #f1f1f1 20px, #f1f1f1 40px, #eaeaea 40px, #eaeaea 40px, #f1f1f1 40px, #f1f1f1 40px);
    }

    12.5% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 15px, #f1f1f1 15px, #f1f1f1 35px, #eaeaea 35px, #eaeaea 40px, #f1f1f1 40px, #f1f1f1 40px);
    }

    25% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 10px, #f1f1f1 10px, #f1f1f1 30px, #eaeaea 30px, #eaeaea 40px, #f1f1f1 40px, #f1f1f1 40px);
    }

    37.5% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 5px, #f1f1f1 5px, #f1f1f1 25px, #eaeaea 25px, #eaeaea 40px, #f1f1f1 35px, #f1f1f1 40px);
    }

    50% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 0px, #f1f1f1 0px, #f1f1f1 20px, #eaeaea 20px, #eaeaea 40px, #f1f1f1 40px, #f1f1f1 40px);
    }

    62.5% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 0px, #f1f1f1 0px, #f1f1f1 15px, #eaeaea 15px, #eaeaea 35px, #f1f1f1 35px, #f1f1f1 40px);
    }

    75% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 0px, #f1f1f1 0px, #f1f1f1 10px, #eaeaea 10px, #eaeaea 30px, #f1f1f1 30px, #f1f1f1 40px);
    }

    87.5% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 0px, #f1f1f1 0px, #f1f1f1 5px, #eaeaea 5px, #eaeaea 25px, #f1f1f1 25px, #f1f1f1 40px);
    }

    100% {
        background-image: repeating-linear-gradient(315deg, #eaeaea 0px, #eaeaea 0px, #f1f1f1 0px, #f1f1f1 0px, #eaeaea 0px, #eaeaea 20px, #f1f1f1 20px, #f1f1f1 40px);
    }
}

#SnapshotterStatus,
#MessagingWizardStatus {
    background: #ccc;
    border: 0 none !important;
}

.ProgressBar {
    background-color: #f1f1f1 !important;
    animation-name: progressBar;
    animation-iteration-count: infinite;
    animation-duration: 0.5s;
    -o-animation-name: progressBar;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 0.5s;
    -moz-animation-name: progressBar;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 0.5s;
    -ms-animation-name: progressBar;
    -ms-animation-iteration-count: infinite;
    -ms-animation-duration: 0.5s;
    -webkit-animation-name: progressBar;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.5s;
}
.ProgressBar:before {
    background-color: #6fb366;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.25s;
}
.completed .ProgressBar:before {
    opacity: 1;
}
.cancelled .ProgressBar:before {
    background-color: #e63d43;
    opacity: 1;
}

.ProgressText {
    font-weight: bold;
    transition: color 0.25s;
}
.completed .ProgressText,
.cancelled .ProgressText {
    color: #fff;
}


/*
    Institution/Department/Course/Class details    
*/

.coursesList {
    width: 100%;
}

    .coursesList .item {
        border: 1px solid #ccc;
        box-sizing: border-box;
        text-align: left;
        width: 100%;
    }

        .coursesList .item .heading {
            min-height: 24px;
            line-height: 24px;
            padding: 4px 32px 4px 40px;
        }

            .coursesList .item .heading .smallIcon {
                float: left;
                margin: 0 0 0 -32px;
            }

            .coursesList .item .heading a {
                display: block;
            }

            .coursesList .item .heading .expand, .coursesList .item .heading .contract {
                margin: 2px -24px 0 0;
            }

        .coursesList .item .contents {
            background: #f1f1f1;
            padding: 8px;
        }

            .coursesList .item .contents .item {
                border: 0 none;
                padding: 0;
                margin: 8px 2px;
            }

.courseBreakDown .expand, .courseBreakDown .contract {
    display: inline-block;
    float: none;
    margin: 0;
    vertical-align: middle;
}

.institutionStructure table {
    border: 1px solid #aaa;
}
    .institutionStructure table td, .institutionStructure table th {
        border: none;
    }

/*
    Set ILP Target
*/
.setTarget select, .setTarget .textbox:not(.calendarField) {
    max-width: 100% !important;
    width: 480px !important;
}


/*
    Markbook Tolerances
*/

.progressTolerances .department {
    margin: 10px 0 0 0;
    padding: 10px;
    border: 1px solid #ccc;
}

.progressTolerances .departmentTitle {
    line-height: 32px;
}

    .progressTolerances .departmentTitle .expander {
        margin-right: 5px;
        position: relative;
        top: -2px;
    }

.progressTolerances div.expander {
    display: none;
}

/*
    Markbook Grid Learner Progress Charts
*/

.eMarkBookGrid.curriculumHead .departmentAttendance .courseBreakDown .standardTable {
    margin: 20px 0 0 0;
    border: 1px solid #eaeaea;
    padding: 12px;
}

.eMarkBookGrid.curriculumHead .departmentAttendance, .markbookCurriculumOverview .eMarkBookGrid.curriculumHead .departmentAttendance {
    border: 1px solid #eaeaea;
    padding: 12px;
    margin-top: 20px;
}

.markbookCurriculumOverview .eMarkBookGrid.curriculumHead .departmentAttendance {
    margin: 20px;
}

@media only screen and (min-width: 1280px) {
    .eMarkBookGrid.curriculumHead .departmentAttendance .summary.details,
    .eMarkBookGrid.curriculumHead .departmentAttendance .courseBreakDown {
        width: 50%;
        float: left;
    }
}

/*
    Analysis    
*/

table.oneColumn tr td {
    width: 100%;
}

table.twoColumn tr td {
    padding-right: 5%;
    width: 45%;
}

table.threeColumn tr td {
    padding-right: 5%;
    width: 28.333333%;
}

table.fourColumn tr td {
    padding-right: 5%;
    width: 20%;
}

.checkBoxList, .checkBoxList tr, .checkBoxList tr th, .checkBoxList tr td {
    background: transparent !important;
    border: 0 none !important;
    outline: none !important;
}

.analysis, .analysis * {
    box-sizing: border-box;
}

.analysis {
}

    .analysis .studentSelector {
    }

        .analysis .studentSelector .fullWidth {
            max-width: 100%;
            width: auto !important;
        }

        .analysis .studentSelector table tbody tr td {
            background-color: transparent;
            border-color: #ccc;
        }

    .analysis .llddIcon {
        background: transparent url(../images/icons/myModules-learnersupport.png) no-repeat scroll 0 -40px;
        display: inline-block;
        height: 20px;
        vertical-align: middle;
        width: 20px;
    }

    .analysis .filters {
        background: #fff;
        border: 1px solid #ccc;
        float: left;
        padding: 16px 8px 8px;
        width: 100%;
    }

        .analysis .filters .filterGroup {
            border: 1px solid #ccc;
            float: left;
            margin: 16px 0 0;
            padding: 8px;
            width: 100%;
        }

            .analysis .filters .filterGroup:first-child {
                margin: 0;
            }

            .analysis .filters .filterGroup h2 {
                background: #fff;
                color: #000;
                float: left;
                font-size: 18px;
                font-weight: bold;
                margin: -16px 0 0;
                padding: 0 8px;
                text-align: left;
                width: auto;
            }

        .analysis .filters .filter {
            float: left;
            padding: 8px 0 8px 20%;
            width: 100%;
        }

            .analysis .filters .filter.halfWidth {
                padding-right: 2%;
            }

            .analysis .filters .filter > label:first-child {
                float: left;
                line-height: 28px;
                margin: 0 0 0 -25%;
                padding: 0 8px 0 0;
                width: 25%;
            }

            .analysis .filters .filter.halfWidth > label:first-child {
                margin: 0 0 0 -71%;
                width: 71%;
            }

        .analysis .filters .buttons {
            border: 0 none;
            float: left;
            margin: 8px 0 0;
            padding: 8px 0 0;
            text-align: right;
            width: 100%;
        }

            .analysis .filters .buttons a {
            }

    .analysis .results {
        float: left;
        margin: 16px 0 0;
        width: 100%;
    }

        .analysis .results .summary {
            color: #999;
            font-style: italic;
            margin: 16px 0 8px;
        }

        .analysis .results .graphic {
            border: 1px solid #ccc;
            float: left;
            margin: 16px 0 0;
            padding: 8px;
            width: 100%;
        }

            .analysis .results .graphic h2 {
                background: #fff;
                color: #999;
                float: left;
                font-size: 120%;
                font-weight: bold;
                margin: -16px 0 16px;
                padding: 0 8px;
                text-align: left;
                width: auto;
            }

    .analysis .noResults {
        color: #999;
        float: left;
        font-weight: bold;
        margin: 16px 0 0;
        text-align: center;
        width: 100%;
    }

/*
    Trigger Management
*/

.triggerManagement {
    padding: 10px;
    width: 900px;
}

body.med .triggerManagement {
    width: 600px;
}

body.sma .triggerManagement {
    width: 280px;
}


/*
    Messaging Wizard
*/

.messagingWizard {
    padding: 10px;
}

    .messagingWizard .separator {
        margin: 10px 0;
    }

    .messagingWizard .wizardStep {
        border: 1px solid #eaeaea;
        box-sizing: border-box;
        margin: 10px 0 0;
        overflow: hidden;
        padding: 10px;
        position: relative;
    }
    .messagingWizard .wizardStep:first-child {
        margin: 0;
    }

        .messagingWizard .wizardStep .section {
            border: 1px solid #eaeaea;
            margin: 10px 0 0;
            padding: 10px;
        }
        .messagingWizard .wizardStep .section:first-child {
            margin: 0;
        }

        .messagingWizard .wizardStep a.goBack {
            bottom: 0;
            height: 100%;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            z-index: 2;
        }
        .messagingWizard .wizardStep.active a.goBack {
            display: none;
        }

        .messagingWizard .wizardStep h2{
            margin: 0 0 10px;
            padding: 0;
        }
        .messagingWizard .wizardStep p.intro {
            font-weight: 700;
            margin: 0 0 10px;
            padding: 0;
        }

        .messagingWizard .wizardStep .messageTypes {
        }

            .messagingWizard .wizardStep .messageTypes a.messageType {
                border: 1px solid #212121;
                color: #212121;
                display: block;
                padding: 10px 10px 10px 64px;
                position: relative;
                transition: background-color 0.125s, color 0.125s;
            }
            .noTouchEvents .messagingWizard .wizardStep .messageTypes a.messageType:hover,
            .noTouchEvents .messagingWizard .wizardStep .messageTypes a.messageType:active,
            .messagingWizard .wizardStep .messageTypes a.messageType.selected {
                background-color: #212121;
                color: #fff !important;
                text-decoration: none;
            }
            .noTouchEvents .messagingWizard .wizardStep .messageTypes a.messageType:hover *,
            .noTouchEvents .messagingWizard .wizardStep .messageTypes a.messageType:active *,
            .messagingWizard .wizardStep .messageTypes a.messageType.selected * {
                color: #fff !important;
                text-decoration: none;
            }
                .messagingWizard .wizardStep .messageTypes a.messageType .fas {
                    font-size: 32px !important;
                    height: auto !important;
                    left: 32px;
                    line-height: 1 !important;
                    position: absolute;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: auto !important;
                }
                .messagingWizard .wizardStep .messageTypes a.messageType h3 {
                    margin: 0;
                    padding: 0;
                }
                .messagingWizard .wizardStep .messageTypes a.messageType p {
                    margin: 0;
                    padding: 0;
                }

                .messagingWizard .wizardStep .messageIcon .fas {
                    font-size: 32px !important;
                    float: right;
                    padding: 0 8px;
                }

            .messagingWizard table {
                width: 100%;
            }
            .messagingWizard .settings .row .checkboxlist label {
                float: left !important;
                margin: 0 !important;
                padding: 0 !important;
                vertical-align: middle !important;
                width: auto !important;
            }

.messagingWizard .previewOutput {

}

    .messagingWizard .previewOutput .recipientType {
        border: 1px solid #ccc;
        box-sizing: border-box;
        float: left;
        margin: 0;
        padding: 10px;
        width: 100%;
    }
        .messagingWizard .previewOutput .recipientType .label {
            font-weight: 700;
            padding: 0 0 0 10px;
        }

        .messagingWizard .previewOutput .recipientType .recipients {
            box-sizing: border-box;
            float: left;
            height: 0;
            padding: 0 0 0 42px;
            overflow: hidden;
            width: 100%;
        }

        .messagingWizard .previewOutput .previews .expander {
            overflow: hidden;
        }

        .messagingWizard .previewOutput .previews .preview {
            border: 1px solid #ccc;
            margin: 5px;
            padding: 5px;
        }
        .messagingWizard .previewOutput .previews .preview.duplicate {
            margin-top: -3px;
            opacity: 0.5;
        }

    .messagingWizard .studentCount {
        border: 1px solid #ccc;
        font-weight: 700;
        padding: 5px;
        text-align: right;
    }

/*
    Messaging Message
*/

.messagingMessage {
    margin: 0;
    max-width: 720px;
    padding: 11px;
    width: 100%;
}

.messagingMessage .messageText{
    padding-right: 20px;
}

/*
    Messaging Inbox
*/

.messagingInbox { }

    .messagingInbox .bulkActions {
        background-color: #fff;
        border-radius: 5px 5px 0 0;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1), 0 0 4px 0 rgba(0, 0, 0, 0.2);
        bottom: 0;
        color: #fff;
        left: 50%;
        opacity: 0;
        padding: 10px;
        pointer-events: none;
        position: fixed;
        right: auto;
        top: auto;
        transition: opacity 0.125s, transform 0.25s;
        transform: translate(-50%, 100%);
        z-index: 100;
    }
    .messagingInbox .bulkActions.active {
        opacity: 1;
        pointer-events: all;
        transform: translate(-50%, 0);
    }

/*
    Authentication
*/

.authentication { }

    .authentication .iconButton-tick {
        outline: 2px solid #6fb366;
    }
    .authentication .iconButton-cross {
        outline: 2px solid #e63d43;
    }
    .authentication .iconButton-reset {
        outline: 2px solid #ffa500;
    }