/**
	Created on : 20-Jul-2016, 17:04:14
	Author	   : Matthew Ainge
**/

:root {
    /* Brand colours: */
    --green: #067a40;
    --green-light: #b0dcc5;
    --purple: #b75295;
    --orange: #c45221;
    --yellow: #ffba49;
    --red: #af0d10;
    --blue: #2461b7;
    --text-black: #000000;
    --text-dark: #443742;
    --text-light: #645962;
    --text-white: #ffffff;
    --ui-border: #e3e3e3;
    --ui-dark: #eeeeee;
    --ui-mid: #f5f5f5;
    --ui-light: #fbfbfb;
    --ui-white: #ffffff;

    --shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.17);
    --button-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.27);
    --button-disabled: #7e7e7e;
    --form-element-border: var(--text-light);
}

/* reset margin & padding on all elements */
* {
    margin: 0;
    padding: 0;
}

/* Fix box model universally */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* A note use of calc and vw units.  At this time:
	- Safari on iOS likes percentages, not pixel values, combined with additional vw units
	- Using calc with percentages is totally broken on 11 and Edge.
   Use of -webkit-calc preceeding by calc as an IE fallback covers both issues
   Reference: http://zellwk.com/blog/viewport-based-typography/
*/
html {
    height: 100%;
    overflow-y: scroll;
    font-size: calc(0.80em + 0.20vw);
}

body {
    height: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;

    background: var(--ui-light);

    background-repeat: no-repeat;
    background-attachment: fixed;
}

textarea {
    font-family: 'Lato', sans-serif;
}

hr {
    border-color: var(--ui-border);
}

/* IMPORTANT: Maintain vertical rythmn if altering
   Reference: http://webtypography.net/2.2.2

   Line height: 1.5em, so all lines must be multiples of 1.5
   lines will be combinations of line-heights and margins.
*/
h1, h2, h3 {
    color: var(--text-light);
    letter-spacing: 0em;
    text-transform: capitalize;
}

h2, h3, h4, h5, #admin_dashboard div.layout_panel b {
    font-family: 'Varela Round', 'Lato', sans-serif;
    font-weight: normal;
    letter-spacing: -0.03em;
}

h1.short, h2.short, h3.short, h4.short, h5.short {
    margin-top: 0.4em !important;
    margin-bottom: 0.1em !important;
}

p.short {
    margin-bottom: 0.1em !important;
}


h1 {
    font-family: 'Varela Round', 'Oswald', 'Lato', sans-serif;
    font-weight: normal;
    letter-spacing: -0.05em;
    font-size: 2.5rem;
    line-height: 1; /* Font-size x line-height = multiple of 1.5rem */
    margin: 1.75rem auto 1.75rem auto; /* Set in rems to maintain vertical rythmn      */
}

#content > #title > h1 {
    margin-top: 1.25rem; /* Less margin needed as #content is padded. */
}

h2 {
    font-size: 1.28rem;
    line-height: 1.171875;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h3, .headed_box .content h3, .panel h3 {
    font-size: 1.2rem;
    line-height: 1.25;
    margin-top: 1.8em;
    margin-bottom: 0.7em;
}

.message :is(h1,h2,h3,h4):first-child {
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
}

h4 {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 2.2em;
    margin-bottom: 0.8em;
}

h5 {
    font-size: 0.8rem;
    line-height: 1.875;
    margin-top: 2.8em;
    margin-bottom: 0.95em;
}

h1 span, h2 span, h3 span, h4 span, h5 span {
    text-transform: none;
}

.headed_box h2.short, .headed_box h3.short {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.panel:not(.form) h3:first-child, .flex-row h3 {
    margin-top: 0em;
}

p, blockquote, ul {
    /*	margin-top: 1.5em ; */
    margin-top: 0;
    margin-bottom: 1.5em;
}

.compact-text p, .compact-text ul {
    margin-bottom: 0.5em !important;
}

p img, p .icon {
    margin: 0.2em 0.3em;
}

p, table caption, dd, dt, td {
    line-height: 1.5;
}

ul, ol {
    margin-left: 2em;
    margin-bottom: 0.5em;
}

ul.checklist li {
    list-style: none;
}

ul.checklist li::before {
    list-style: none;
    content: '☐';
    margin-right: 0.3em;
    font-size: 1.2em;
}

ul.checklist li.checked::before {
    content: '☑';
}

a:link {
    color: var(--green);
}

a:hover {
    text-decoration-line: none;
}

a:visited {
    color: var(--green);
}

img.ops_iconTag.link {
    background-color: var(--green);
}

img.ops_iconTag.light {
	background-color: var(--text-light);
}
dl {

}

dt {

}

dd {

}

blockquote {
    quotes: "\201C" "\201D" "\2018" "\2019";
    color: #666;
    font-size: 1.2em;
}

#title {

}

#title:after {
    content: "";
    display: block;
    clear: both;
}

#title h1 a img {
    float: none;
}

#title img {
    max-width: 5rem;
    margin: 1rem 0.2rem 1rem 1rem;
    float: right;
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

blockquote:before, blockquote:after {
    color: #ccc;
    font-size: 3em;
    line-height: 0.1em;

    vertical-align: -0.4em;
}

table:not(.mceToolbar):not(.centered):not(.narrow) {
    background-color: transparent;
    font-size: 0.8rem;
    width: 100%;
}

.magnify table:not(.mceToolbar):not(.centered):not(.narrow) {
    font-size: 1rem;
}

table.centered {
    margin: auto
}

table:not(.mceToolbar).property-table {
    border-width: 2px;
    border-color: #dadada;
    margin-bottom: 0.5rem;
    table-layout: fixed;
}

table.property-table td:nth-child(1) {
    color: var(--text-dark);
    font-family: 'Varela Round', 'Oswald', 'Lato', sans-serif;
    font-weight: bold;
}

table.property-table td:nth-child(2) {
    text-align: center;
}

.headed_box > div > table:not(.mceToolbar).property-table:last-child {
    margin-bottom: 0;
}

div.table-container, table:not(.mceToolbar) {
    border: 1px solid var(--ui-border);
    border-collapse: collapse;
}

div.table-container > table:not(.mceToolbar) {
    border: none;
}

.table-collapsed--borderless {
    border-collapse: collapse !important;
    border: none !important;
}

pre {
    color: var(--text-dark);
    font-size: 1em;
    padding: 0.3em;
    border: 1px solid #ddd;
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.white-space-pre-wrap {
    white-space: pre-wrap;
}

.white-space-pre {
    white-space: pre;
}

tfoot td {
    text-align: center;
}

/* Form elements in the footer should still be aligned left */
tfoot tr.ops_form_table_row td {
    text-align: left;
}

tr.ops_form_table_row div.message.alert {
    margin-bottom: 0;
}

.datagrid-container {
    max-width: 100%;
    /* Disabled as part of an IE/Edge fix. Re-enable if any unexpected behaviour arises. */
    /* display: flex ; */
    /* flex-direction: column ; */
    margin: 0.2em auto;
    /*border: 1px solid #fff ;*/
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.13);
}

#content.container .datagrid-container {
    box-shadow: none;
    margin: auto;
}

.headed_box .datagrid-container {
    box-shadow: none;
}

.datagrid-container .table-container {
    margin-bottom: 0;
}

.datagrid-container.slim {
    width: fit-content;
}

.datagrid-container.dg-header-linked table {
    border: 0 !important;
}

.datagrid-container.dg-header-linked {
    margin-bottom: 0;
}

.datagrid-container.dg-header-linked + .datagrid-container {
    margin-top: 0;
}


.ops_form table.datagrid tbody td {

}

.ops_form table.datagrid tbody td div.ops_cell_elem_wrap {

}

.ops_form table.datagrid tbody td div.ops_cell_elem_wrap > div {
}

.ops_form table.datagrid tbody td div.ops_cell_elem_wrap.ops_el_has_errors {

}

.ops_form table.datagrid tbody td div.ops_cell_element.ops_el_no_errors {

}

.ops_form table.datagrid tbody td div.ops_cell_element.ops_el_has_errors {

}

th.ops_datagrid_cell_center.tablesorter-header[class*="ops_page_highlight_"] {
    text-align: center !important;
    padding-right: 4px !important;
}

.tablesorter-default .tablesorter-header.sorter-false {
    background-image: none;
    padding: 0.4em;
}

.tablesorter-headerAsc, .tablesorter-headerDesc {
    border-bottom: var(--text-light) 2px solid !important;
}

.table-container_footer {
    width: 100%;
    /* margin-top: 1.25em ;*/
}

.table-container_footer table tfoot tr td {
    /*background-color: rgb( 255,255,255 ) ;*/
    border-left: none !important;
    border-right: none !important;
}

.export_options .export_csv {
    font-size: 1.2em;
    padding-left: 1.8em;
    background-position: 0% 50%;
    background-size: contain;
    margin-left: 0.5em;
}

.export_options .export_csv {
    background-image: url('../Icons/ui/ux2/appbar-table-067a40.png');
}

.export_options .export_csv:hover {
    background-image: url('../Icons/ui/ux2/appbar-table.png');
}

.export_options .export_html {
    padding-left: 0.7em;
}

.export_options .export_html:hover {
    color: #FFF;
    background-color: var(--green);
}

.schedule .export_options {
    display: inline-block;
    float: right;
    margin-top: 0.3em;
}

table:not(.mceToolbar) th, table:not(.mceToolbar) td {
    padding: 0.4em;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--ui-border);
    border-right: 1px solid var(--ui-border);
    line-height: 1.5;
    /* color: initial ; */
}

table:not(.mceToolbar) tr.thin th,
table:not(.mceToolbar) tr.thin td {
    line-height: 0.5;
    font-size: 0.8rem;
}

div.table-container table:not(.mceToolbar) tr > :first-child {
    border-left: none;
}

div.table-container table:not(.mceToolbar) tr > :last-child {
    /*border-right: none;*/
}

table:not(.mceToolbar) thead {
}

table {
    border-collapse: collapse;

}

table tr.caption th, table caption {
    font-size: 1.2rem;
    text-transform: capitalize;
    color: var(--palette-headings-foreground, rgb(226, 226, 226));
    background-color: #fff;
    padding: 0.85em;
    border: 1px solid var(--ui-border);
    border-bottom: none;
}

table:not(.mceToolbar, .ops_threadview_thread_table) th {
    text-transform: capitalize;
}

table:not(.mceToolbar) th {
    font-weight: normal;
    font-size: 1em;
    text-align: left;
    font-weight: bold;
    text-align: center;
    background-color: var(--ui-dark);
}

table:not(.mceToolbar) thead tr {
    /*border-bottom: 1px solid #dfdfdf ;*/
    border: 0; /* Eliminate glimpse of background content when scroll*/
}

table:not(.mceToolbar) tfoot tr {
    border-top: 1px solid #dfdfdf;
}

table:not(.mceToolbar) tfoot tr {
    border-top: 1px solid #dfdfdf;
}

table:not(.mceToolbar) tfoot td {
    padding: 0.5em;
}

table:not(.mceToolbar):not(.mceSplitButton) > * > tr:nth-child( odd ) {
    background-color: var(--ui-light);
}

table:not(.mceToolbar):not(.mceSplitButton) > * > tr:nth-child( even ) {
    background-color: var(--ui-mid);
}

table li {
    margin-left: 0;
}

table ul.checklist li {
    margin-left: 0.7em;
}

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

.large:not(.headed_box, .panel, .table-container, .property-table), .large .qtip-content, .large .qtip-title {
    font-size: 1.2rem !important;
    line-height: 1.5;
}

.huge {
    font-size: 2rem !important;
}

form.small,
a.small {
    font-size: 0.85em !important;
}

form.small label {
    line-height: 3;
}

[draggable=true] {
    cursor: move;
    overflow: hidden;
}

.text-transform-none {
    text-transform: none !important;
}

/**
Q-TIPS
***/

.qtip {
    width: 15rem !important;
    max-width: 50vw !important;
}

.qtip, .qtip * {
    font-size: 0.9rem !important;
}

.qtip.dense .qtip-content * {
    font-size: 0.85rem !important;
}

img.student_photo {
    width: 95%;
    margin: 0.5em;
}

table.datagrid img.student_photo {
    height: 70px;
    width: auto;
    margin: auto;
}

.qtip-content p {
    margin-bottom: 0.9em;
}

.qtip.wide {
    width: 25rem !important;
}

.qtip.wider {
    width: 35rem !important;
}


/*********************************
 LAYOUT CLASSES and IDs
**********************************/

/** Theme variables **/
#content, .ops_page_modal_instance {
    --palette-headings-foreground: var(--text-light);

    --palette-navigation-background: var(--green);
    --palette-navigation-foreground: #fff;

    --palette-action-background: var(--green);
    --palette-action-foreground: #fff;

    --palette-alert-background: #ff6c00;
    --palette-alert-foreground: #fff;
}

/** End of theme variables **/


:is(#content, .ops_page_modal_instance) .panel, .result-card {
    margin: 1.5em 1em;
    padding: 1em;
    position: relative;
}

.semitransparent {
    opacity: 0.5;
}

.nowrap {
    white-space: nowrap;
    flex-wrap: nowrap;
}

.transparent-bg {
    background-color: rgba(230, 230, 230, 0) !important;
}

.panel, .message.help, .ui-datepicker, .result-card {
    /*box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.17);*/
    box-shadow: var(--shadow);

    padding: 0.3rem;
    background-color: rgba(255, 255, 255, .5);
}

.panel caption {
    box-shadow: var(--shadow);
}

/** Centering Content **/
.centered {
    justify-content: center;
    text-align: center;
    align-self: center;
}

.x_centered, div.dashboard.x_centered {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    align-self: center;
}

:is(.flex-column, .flex-row).centered {
    display: flex;
    justify-content: center;
    text-align: center;
    align-self: center;
}

.margin_center_children > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

p.centered {
    flex-direction: row;
    text-align: center;
    align-items: center;
    align-content: center;
}

p.centered > * {
    width: auto;
    align-self: center;
}

td.centered {
    display: table-cell;
}

.centered .headed_box > h2, .x_centered .headed_box > h2, .centered .headed_box > h3, .x_centered .headed_box > h3 {
    text-align: left;
}

/** Default highlighting **/
.default {
    background: rgb(242, 242, 242);
}

/** SELECTED highlighting **/
.selected {
    background: rgb(255, 255, 255);
}

/** CONTEXT highlighting **/
.context {
    background: var(--green);
    color: var(--text-white);
}

/** NAVIGATION highlighting **/
.navigation, .message.request, .message.confirmation, input[type=button]:hover, input[type=submit]:hover, .action:hover, .action.active {
    background-color: var(--green);
    color: #fff;
    border-color: var(--green);
}

.test .navigation {
    background-color: #424242;
    color: #fff;
    border-color: #424242;
}


/** ALERT highlighting **/
.alert:not(.headed_box):not(.progress_bar):not(.inverted):not(.layout_panel) {
    position: relative;
    z-index: 520;
    background-color: var(--red) !important;
    color: var(--text-white) !important;
}

.alert:not(.headed_box):not(.layout_panel) * {
    color: #fff;
}

.alert.inverted {
    background-color: #fff !important;
    background-image: none !important;
    color: #ff6c00 !important;
}

.alert.inverted * {
    color: var(--red) !important;
}

/** WARN highlighting **/
.warn {
    position: relative;
    z-index: 520;
    background-color: #ffdc1d !important;
    color: #3d3d3d !important;
}

.warn * {
    color: #3d3d3d !important;
}


/** COMMS highlighting **/
.comms {
    background-color: #00b2e4;
    color: #fff;
    border-color: #00b2e4;
}

/** End of panel style highlighting **/

.icon {
    padding: 0;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    max-width: 1.5em;
}

#topbar .icon {
    max-width: unset;
}

.icon.inline {
    margin-left: 0.4em;
    margin-right: 0.4em;
}

.icon.font-sized {
    height: 1em;
}

#frame {
    position: relative;
}

#logo_container {
    font-size: 5rem;
    line-height: 1;

    position: fixed;
    z-index: 580;
    left: -0.09em;
    top: 0;

    height: 1em;
    width: 1em;

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

#logo_image {
    position: absolute;
    top: 0;
    left: 0;

    height: 1em;
    width: 1em;

    background-image: url('../Images/App/CEDAR_logo_large_bg.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
    background-size: contain;
}

#logo_menu {
    position: relative;
    display: inline-block;

    height: 0.5em;
    width: 0.5em;

    text-transform: uppercase;
    color: transparent;
    font-weight: bolder;
    cursor: pointer;

    background-image: url('../Images/App/CEDAR_logo_large.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

#logo {
    font-size: 15em;
    position: absolute;
    z-index: 580;
    left: 0.3rem;
    top: 0.3rem;
    height: 1.81em;
    width: 1.81em;
    /*	background-color:yellow; */
}

#logo div {
    border-radius: 50%;
    width: 1em;
    height: 1em;
}

#logo_blue {
    position: absolute;
    top: 0.01em;
    left: 0.16em;
    background-color: #1ee0fa;
}

#logo_green {
    position: absolute;
    top: 0.4em;
    left: 0.8em;
    background-color: #c1ed58;
}

#logo_purple {
    position: absolute;
    top: 0.8em;
    left: 0.16em;
    background-color: #bc37c5;
}

#site_corner {
    position: fixed;
    left: -5rem;
    top: -6.4rem;
    z-index: 550;
    width: 10rem;
    height: 10rem;
    background-color: var(--green-light);
    transform: rotate(45deg);
}

#app_title {
    max-width: 100%;
}

.test #site_corner {
    background-color: #757575;
}

#topbar-wrapper {
    background-color: var(--ui-light);
}

#topbar {
    height: 2.6rem;
    line-height: 2.6rem;
    padding-right: 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: stretch;
    white-space: nowrap;
    font-weight: bold;
    font-size: 0.9rem;
}

#topbar input {
    color: #8d8d8d;
    vertical-align: middle;
}

#topbar a, #topbar form {
    overflow: visible;
}

#topbar form input[type=image], #topbar form div.navigation {
    height: 2.6em;
    width: 2.6em;
}

#topbar form input[type=image].loading {
    height: auto;
    width: auto;
    padding-left: 0.5em;
}

/* Contains the reduced width search input image */
#topbar form div.navigation {
    border-radius: 0.25em;
    display: inline-block;
    margin-left: -0.5em;
    /*text-align: center ;*/
}

#topbar form input[type=image]:hover {
}

#topbar > div#site-back {
    background-image: url('../Icons/ui/ux2/appbar-chevron-left-ux3-green.png');
    position: absolute;
    padding-right: 0.5rem;
    background-position: 0% 50%;
    left: 5.4rem;
    text-align: right;
    cursor: pointer;
}

#topbar > #site-back:hover {
    background-image: url('../Icons/ui/ux2/appbar-chevron-left.png');
    background-color: var(--green);
    width: 2.6rem;
    left: 5.4rem;
    box-shadow: var(--button-shadow);
}

#topbar #site-back span {
    display: none;
}

#topbar .links {
    /* padding: 0 0.5rem; */
}

#topbar .links a, #topbar #site-back {
    height: 2.6rem;
    width: 2.6rem;
    display: inline-block;
    background-size: contain;
    color: var(--text-white);
    overflow: hidden;
    padding-right: 0.5em;
    background-position: 0%;
    padding-left: 2em;
    background-repeat: no-repeat;
    border-radius: 0.4em;
    text-decoration: none;
    border-width: 0em;
}

#topbar .links a span {
    margin-left: 2.6rem;
    display: none;
}

#topbar .links a:is(:hover, .active) {
    width: 5.8rem;
    background-color: var(--green);
    box-shadow: var(--button-shadow);
}

#topbar .links a#link_home:is(:hover, .active) {
    width: 5.4rem;
}

#topbar .links a#link_escalate:is(:hover, .active) {
    width: 5.8rem;
}

#topbar .links a#link_impersonate:is(:hover, .active) {
    width: 9rem;
}

#topbar .links a:hover span, #topbar a.active span {
    display: inline;
    margin-left: 0.5rem;
}

#topbar #link_search {
    background-image: url('../Icons/ui/ux2/appbar-magnify-ux3-green.png');
}

#topbar #link_home {
    background-image: url('../Icons/ui/ux2/appbar-home-empty-ux3-green.png');
}

#topbar #link_admin {
    background-image: url('../Icons/ui/ux2/appbar-tools-ux3-green.png');
}

#topbar #link_logout {
    background-image: url('../Icons/ui/ux2/appbar-door-leave-ux3-green.png');
}

#topbar #link_escalate {
    background-image: url('../Icons/ui/ux2/appbar-arrow-up-ux3-green.png');
}

#topbar #link_home:hover {
    background-image: url('../Icons/ui/ux2/appbar-home-empty.png');
}

#topbar #link_admin:hover {
    background-image: url('../Icons/ui/ux2/appbar-tools.png');
}

#topbar #link_logout:hover {
    background-image: url('../Icons/ui/ux2/appbar-door-leave.png');
}

#topbar #link_escalate:hover {
    background-image: url('../Icons/ui/ux2/appbar-arrow-up.png');
}

#topbar #link_impersonate {
    background-image: url('../Icons/ui/ux2/appbar-fingerprint.png');
    background-color: var(--orange);
    color: var(--text-white);
}

#topbar #link_search:hover, #topbar #link_search.active {
    background-image: url('../Icons/ui/ux2/appbar-magnify.png');
}

#topbar > #impersonate_data {
    position: absolute;
    padding: 0.2em 0.8em;
    top: 2.6rem;
    right: 0.1rem;
    max-width: 70vw;
    z-index: 550;
    width: 20rem;
    opacity: 0;
    visibility: hidden;
    border-radius: 0.25em;
    line-height: 1.5;
    white-space: normal;
    background-color: var(--orange);
    color: var(--text-white);
}

#topbar > #impersonate_data a {
    display: block;
    margin-bottom: 0.5em;
    border-radius: 0.3em;
    text-align: center;
    color: var(--text-white);
}

#topbar > #impersonate_data a:hover {
    background-color: rgba(225, 225, 225, 0.2);
}

.panel.context {
    position: relative; /* Else z-index does not apply */
    z-index: 540;
    padding: 0;
    background: #eee;
}

.panel.context > div {
    padding-left: 5rem; /* @frame_padding */
}

.panel.context .arrow.right {
    border-left-color: var(--green);
}

#menu {
    position: fixed;
    z-index: 525;

    width: 100vw; /* calc( 100vw - 15px ); /* @navigation_width */
    max-height: 3rem;
    left: 0px;
    top: 0px;

    border-bottom-right-radius: 0.5rem;
    font-size: 1.2rem;
    overflow: hidden;

    transition-timing-function: var(--ease-out-quint, cubic-bezier(0.175, 0.885, 0.32, 1.105)); /*cubic-bezier(0.47, 1.65, 0.75, 0.99) ; */
    transition-delay: 0.05s;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#menu::-webkit-scrollbar {
    width: 0px; /* Remove scrollbar space */
    background: transparent; /* Make scrollbar invisible */
}

#menu dl dt {
    margin: 0 0 0 0.06em;
    vertical-align: middle;
    list-style-type: none;
    line-height: 1.5;
    font-weight: bold;
    white-space: nowrap;
    transition-property: opacity;
    transition-duration: 0.4s;
}


#menu dl > dd > dl {
    /*display:none;*/
}

#menu a {
    display: block;
    padding: 0.4em 0.5em 0.4em 0.7em;
    color: #fff;
    text-decoration: none;
    border-radius: 0.5em;
    position: relative;
}

#menu dt.group a {
    padding-left: 0em;
}

#menu dl > dt:last-of-type a {
    padding-bottom: 0.8em;
}

#menu dt:nth-child(1) {
    padding-top: 0;
}

/* Hide cursor on mobile (it's controlled via keyboard): */
#menu a:hover, body:not(.is-mobile-device) #menu dt.selected-item-cursor a, #menu dt.current:not(.group) a {
    /*background-color: rgb(81, 157, 191); */
    background-color: var(--yellow);
    color: var(--text-dark);
}

:is(#menu a:hover, body:not(.is-mobile-device) #menu dt.selected-item-cursor,  #menu dt.current:not(.group)) .group-icon span {
    /*background-color: rgb(81, 157, 191); */
    background-color: var(--text-dark);
    border-color: var(--text-dark);
    transition-property: transform;
    background-blend-mode: difference;
    mix-blend-mode: luminosity;
}

#menu i,
#menu img {
    height: 1.8rem;
    width: 1.8rem;
    margin-right: 0.5em;
}

#menu .menu_icon {
    vertical-align: middle;
    transform: scale(0.5);
    margin: -23px;
}

#menu a > .menu_icon:first-child {
    margin-left: -19px;
}

#menu span {
    transition: opacity 0.4s linear, padding 0.4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    padding-right: 2em;
}

#menu.expanded span {
    opacity: 1;
}

#menu.expanded {
    max-height: 100vh;
    box-shadow: var(--button-shadow);
    z-index: 545;
}

#menu dl {

}

#menu h2 {
    color: #fff;
    font-size: 1.2em;
    line-height: 1.5;
    margin: 0;
    padding: 0.7em 1.7em 0.6em 0.4em;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
}

#menu h2:first-child > span {
    display: inline-block;
    margin-top: 0.5rem;
}

#menu h2 img:first-child {
    /*position:absolute ; */
    display: none;
}

#menu h2 img:nth-child(2) {
    width: 2em;
    height: 2em;
    margin-right: 0;
}

#menu.expanded h2 {
    padding-top: 0.5em
}

#menu.expanded span {
    opacity: 1;
}

#menu dl dd {
    margin-bottom: 0;
}

#menu.expanded dt.group + dd {
    padding-left: 0.6rem;
}

#menu dl dd {
    margin-bottom: 0;
    padding-left: 0;
}

#menu dd > span {
    display: none;
}

#menu.disabled {
    background-color: #999;
}

#menu dt.current a {
    background-image: url('../Icons/ui/ux2/circle-white-xxl.png');
    background-size: 0.5em;
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

#menu dt.current a:hover, #menu dt.current:not(.group) a {
    background-image: url('../Icons/ui/ux2/circle-text-dark-xxl.png');
}

#menu dt.current.expanded a:hover, #menu dt.group.current:not(.expanded) a:hover {
    background-image: url('../Icons/ui/ux2/circle-hole-text-dark-xxl.png');
}

#menu dt.group.current:not(.expanded) a {
    background-image: url('../Icons/ui/ux2/circle-hole-white-xxl.png'); /*, url( '../../Icons/ui/ux2/appbar-chevron-right.png' )  ;*/
    background-size: 0.5em, 2em;
    background-repeat: no-repeat, no-repeat;
    background-position: 95% 50%, -0.5em;
    background-blend-mode: normal, overlay;
}

#menu dt.current.expanded a {
    background-image: url('../Icons/ui/ux2/circle-hole-white-xxl.png'); /* , url( '../../Icons/ui/ux2/appbar-close.png' )  ;*/
    background-size: 0.5em, 2em;
    background-repeat: no-repeat, no-repeat;
    background-position: 95% 50%, -0.5em;
    background-blend-mode: normal, overlay;
}


#menu i {
    display: inline-block;
    transform: scale(0.5);
    /* left: 0; */
    /* position: relative; */
    /* top: 0; */
    width: 100%;
    height: 100%;
    min-width: 4rem;
    min-height: 4rem;
    position: absolute;
    top: -15px;
    left: 0;
}

#menu dt.group {
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: -0.5em;
    background-blend-mode: overlay;
    position: relative;
}

#menu dt a span {
    padding-left: 0.2em;
    vertical-align: middle;
}

#menu dt i,
#menu dt img {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.4s;
}


/**
 Menu group icons for indicating when there are more options to reveal/hide
**/
#menu.expanded .group-icon {
    left: 2px;
}

.group-icon {
    width: 13px;
    height: 17px;
    position: relative;
    left: -10px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: .3s ease-in-out;
}

#menu .group-icon span {
    background-color: #fff;
    display: block;
    position: absolute;
    height: 3px;
    padding: 0 !important;
    border-radius: 5px;
    border: 2px solid #fff;
    transition: all .3s ease-in-out, top .1s linear, left .1s linear;
    transition-property: transform;
}

.group-icon span:nth-child(1) {
    top: 5px;
    left: 2px;
    width: 10px;
}

.group-icon span:nth-child(2) {
    top: 9px;
    left: 2px;
    width: 10px;
}

.group-icon span:nth-child(1) {
    transform: rotate(45deg);
}

.group-icon span:nth-child(2) {
    transform: rotate(135deg);
}

#menu dt.expanded .group-icon span:nth-child(1) {
    left: 0px;
    top: 7px;
    width: 14px;
}

#menu dt.expanded .group-icon span:nth-child(2) {
    left: 0px;
    top: 7px;
    width: 14px;
}

dt.expanded .group-icon {
    transform: rotate(90deg);
}

/**
 Breadcrumbs
**/

#breadcrumbs {
    font-size: 1rem;
    padding-top: 0.1em;
    padding-right: 0.1em;
    padding-bottom: 0.1em;
    line-height: 1em;
    overflow: hidden;
    background-color: var(--ui-mid);
    box-shadow: inset 0 1rem 1.2rem -1rem rgba(0, 0, 0, 0.05);
}

#breadcrumbs .crumb {
    display: inline-block;
    padding: 0.3em 0em 0.3em 0.3em;
    margin-top: 0.1em;
    color: var(--green);
}

#breadcrumbs a {
    color: var(--green);
}

#breadcrumbs .crumb .arrow {
    margin-right: 0.8em;
}

#content_wrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /*	overflow:hidden;*/
}

#content {
    position: relative;
    /*width: calc( 100vw - 1.2rem ) ;*/
    transition-property: margin;
    /*left:0rem;  /* This value increases when nav menu expanded */
    padding: 8px;
}

#content, #content :is(.panel, .form, .headed_box) {
    overflow: auto;
}

/* Override TinyMCE styles: */
.tox {
    max-width: 60vw !important;
    min-width: 20rem !important;
}

#page_note {
    display: inline-block;
    height: 1.5rem;
    background-image: url('../Icons/ui/ux2/appbar-draw-pen-add-ux3-green.png');
    background-size: contain;
    margin: 0.25rem;
    font-size: 1rem;
    float: left;
    color: var(--green);
    background-position: -1px 1px;
}

#page_queries {
    display: inline-block;
    height: 1.5rem;
    background-image: url('../Icons/ui/ux2/appbar-database.png');
    background-size: contain;
    margin: 0.25rem;
    font-size: 1rem;
    float: left;
    background-color: var(--green);
    background-position: -1px 1px;
}

#page_note.alert, #page_note:hover {
    background-image: url('../Icons/ui/ux2/appbar-draw-pen-add.png');
}

#capability_checks, #page_queries, #page_note {
    border-width: 1px;
}

/** NOTIFICATIONS **/

#notifications {
    position: fixed;
    z-index: 900;
    font-size: 1rem;
    line-height: 1.5;
    right: 0;
    bottom: 1rem;
    width: 30rem;
    max-width: 90vw;
    float: right;
    margin-right: 1rem;
}

#notifications > div {
    border-radius: 0.5em;
    padding: 0.7em 0.5em;
    border-bottom-right-radius: 0;
}

#notifications form {
    float: right;
    display: inline-block;
    margin: 0 0.5em;
}

#notifications > div {
    background-position: left center;
    background-size: 3em 3em;
    background-repeat: no-repeat;
    padding-left: 3em;
}

#notifications .navigation {
    background-image: url("../Icons/ui/ux2/appbar-flag-wavy.png");
}

#notifications .alert {
    background-image: url("../Icons/ui/ux2/appbar-shield-alert.png");
}

#notifications .comms {
    background-image: url("../Icons/ui/ux2/appbar-message.png");
}


#notifications input[type=submit], #notifications input[type=button], #notifications .action {
    background-color: #fff;
    font-size: 0.8em;
}

#notifications .alert input[type=submit], #notifications .alert input[type=button], #notifications .alert .action {
    color: #ff6c00;
}

#notifications .comms input[type=submit], #notifications .comms input[type=button], #notifications .comms .action {
    color: #00b2e4;
}


#footer {
    margin: 1.5em auto;
    font-size: 0.85em;
    text-align: center;
}


#debug {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-right: 1em;
    margin-left: 0.25em;
    padding: 1.25em;
    width: fit-content;
    min-width: min(45rem, 96%);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
}

#debug p {
    margin-bottom: 0.1em;
}

#debug div:nth-of-type(1) {
    float: right;
}

#debug div:nth-of-type(2) {
    max-height: 30rem;
    max-width: 100%;
    overflow: auto;
}

#debug h2 {
    color: var(--text-light);
    font-size: 1.5em;
    margin-top: 5px;
    margin-bottom: 0;
}

#debug .action {
    font-size: 0.9em;
}

#headerButtons {
    margin-top: 1em;
}

#headerButtons + #tabs {
    margin-top: 1em;
    clear: both;
}

#tabs {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
    border-bottom: 1px solid var(--green);
}

#tabs a {
    margin-top: -1em;
    margin-right: 0.15em;
    padding: 0.5em 0.7em 0.8em 0.7em;
    border-width: 2px 2px 0 2px;
    border-style: solid;
    border-radius: 0.25em 0.25em 0 0;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: var(--ease-out-circ, ease-out);
    color: #fff;
    font-weight: bold;
    border-color: var(--green);
}

#tabs a.context {
    /*	color: #bd98c0 !important ;
	background: #fff !important ;
	border-color: #bd98c0 !important ;*/
}

#tabs a.navigation {
    background-color: #fff;
    color: var(--green);
}

#tabs a.navigation:hover {
    background-color: #dcf9d4;
}

#tabs a.default {
}

#tabs a.selected {
    /*	background-image: none ;
	background-color: #fff ;
	border-color: #aaa;
	color: #54b03c ;*/

    /* See .context */
}

#tabs a.right {
    float: right !important;
}

.alert_wrapper {
    font-size: 1.2em;
    position: absolute;
    left: 0.2em; /* calc( 50% - 0.6em ) ; */
    top: 0.2em; /* calc( 100% - 0.1em ) ; */
    overflow: visible !important;
}

div.alert.icon {
    border: 0.15em solid #fff;
    border-radius: 0.2em;
    transform: rotate(45deg);

    width: 1.2em;
    height: 1.2em;
    max-width: 1.2em;
    max-height: 1.2em;
    min-width: 1.2em;
    min-height: 1.2em;

    overflow: hidden;

    -webkit-box-shadow: 0px 0px 0.15em 0.04em rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 0.15em 0.04em rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 0.15em 0.04em rgba(0, 0, 0, 0.35);
}

div.alert.icon span {
    display: block;
    margin: auto;
    font-size: 1.2em;
    line-height: 1;
    width: 1em;
    max-width: 1em;
    min-width: 1em;

    transform: rotate(-45deg);
}


table.scrollable {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}

table.scrollable thead {
    flex: 0 0 auto;
    width: calc(100% - 1.1em);
}

table.scrollable tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

table.scrollable tbody tr {
    width: 100%;
}

table.scrollable thead, table.scrollable tbody tr {
    display: table;
    table-layout: fixed;
}

.scrollable {
    overflow: auto;
    max-height: 50vh;
}

/**
Table Datagrids
**/


.table-container {
    max-height: 60vh;
    /*	min-height: 25rem;*/
    max-width: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    overflow: auto;
    _overflow: auto;

    -webkit-overflow-scrolling: touch;

    /*	border: solid 1px #aaa; */
    margin: 0 1em 1em 0;
}

.table-container--tall {
    max-height: 80vh;
}

.minimal_scrollbars {
    overflow: scroll;
}

.no_scrollbars {
    overflow: hidden !important;
}

:is(.table-container, .minimal_scrollbars)::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}

:is(.table-container, .minimal_scrollbars)::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, .3);
}

:is(.table-container, .minimal_scrollbars)::-webkit-scrollbar-corner {
    overflow: hidden;
}

.datagrid-container .table-container {
    /*overflow:visible;*/
}

table.slim, .datagrid.slim, .table-container.slim {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.table-container.slim {
    width: fit-content;
}

.table-container.long {
    max-height: inherit;
}

#debug tbody tr, .datagrid tr, .datagrid tr * {
    /*transition-property: background-color ;
	transition-duration: 0.3s ;*/
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

#debug tbody tr:hover, .datagrid tbody tr:hover {
    background-color: var(--green-light) !important;
}

.prev_mark {
    width: 3.4em;
    height: 2.2em;
    display: inline-block;
    text-align: center;
    line-height: 2;
    border-radius: 3px;
    border: 1px solid #000;
    background: #fff;
}

.prev-mark--small {
    display: inline-block;
    text-align: center;
    border-radius: 3px;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    border: 1px solid #000;
    background: #fff;
}

.datagrid tbody tr:is(
	.ops_datagrid_highlight_yellow
	, .ops_datagrid_highlight_orange
	, .ops_datagrid_highlight_red
	, .ops_datagrid_highlight_black
	, .ops_datagrid_highlight_blue
	, .ops_datagrid_highlight_lightblue
	, .ops_datagrid_highlight_purple
	, .ops_datagrid_highlight_green
	, .ops_datagrid_highlight_grey
	, .ops_datagrid_highlight_lightgrey
):hover * {
    background-color: var(--green-light) !important;
    color: var(--text-black) !important;
}

.datagrid tbody tr:hover a {
    color: var(--text-dark);
}

#ops_page_livesearch_title {
    background-color: var(--green);
    border: none;
    margin-bottom: 5px;
}

#ops_page_livesearch_title h2 {
    color: var(--text-white);
}

.datagrid .message.unimportant {
    background-color: transparent;
}

.datagrid div.alert {
    border-radius: 0.4em;
    margin: 0.25rem 0.5em 0.25em 0.5em;
    text-align: left;
}

.datagrid div.alert, .datagrid div.alert * {
    background-color: #fff !important;
    background-image: none !important;
    color: #ff6c00 !important;
}

.datagrid td.emphasize {
    font-size: 1.25em;
}

.cell_squeeze {
    width: 6em;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.2em !important;
}

.cell_monitoring_class_grade {
    min-height: 1.2em;
    width: 1.2em;
    background-color: var(--text-dark);
    color: #fff;
    font-size: 2em;
    font-weight: bolder;
    line-height: 2;
}

.datagrid_cell ol, .datagrid_cell ul {
    margin-left: 0em;
}

.datagrid_cell ul.ops_form_element_radiobuttons {
    list-style: none;
}

.datagrid_cell ul.ops_form_element_radiobuttons li {
    margin-left: 0
}

.datagrid_cell.icon {
    max-width: 3em;
    min-width: 3em;
    width: 3em;
    height: 2em;
    min-height: 2em;
    background-position: 50% 50%;
    background-size: 2.5em 2.5em;
    background-repeat: no-repeat;
    color: transparent;
    cursor: default;
}

.datagrid_cell.icon.info {
    background-image: url('../Icons/ui/ux2/appbar-information-circle.png');
}

.datagrid_cell.icon.alert {
    background-image: url('../Icons/ui/ux2/appbar-flag.png');
}

.datagrid_cell.icon.in_progress {
    background-image: url('../Icons/ui/ux2/appbar-timer-play.png');
    background-color: #a9a9a9;
    border-bottom: 1px solid #c0c0c0;
}

.datagrid_cell.icon.complete {
    background-image: url('../Icons/ui/ux2/appbar-check.png');
    background-color: #27b13d;
    border-bottom: 1px solid #269539;
}

.datagrid_cell.icon.quality_checking {
    background-image: url('../Icons/ui/ux2/appbar-magnify.png');
    background-color: #76b1e8;
    border-bottom: 1px solid #6697cb;
}

.datagrid_cell.icon.error, .datagrid_cell.icon.declined {
    background-image: url('../Icons/ui/ux2/appbar-stop.png');
    background-color: #d31b0e;
    border-bottom: 1px solid #b41b0e;
}

.datagrid_cell.form_element {
    /*	white-space: nowrap; */
    padding-left: 18px;
    padding-right: 18px;
}

.datagrid_cell > .select2 {
    min-width: 300px;
}

.datagrid_cell > span.utf8Icon {
    font-size: 1.05rem;
    font-weight: bold
}

/* The padding is equal in cases of both 'is required' and 'helptext' to avoid an unbalanced appearance
   if one or more rows use one or the other differently */
.datagrid tbody td.datagrid_cell.form_element.is_required {
    background: url('../Icons/F/bullet_star_blue.png') left center no-repeat;
    background-size: 16px;
    padding-left: 18px;
    padding-right: 18px;
}

.datagrid tbody td.datagrid_cell.form_element.helpicon {
    background: url('../Icons/F/help.png') 99% center no-repeat;
    background-size: 16px;
    padding-left: 18px;
    padding-right: 18px;
}

.datagrid tbody td.datagrid_cell.form_element.is_required.helpicon {
    background: url('../Icons/F/bullet_star_blue.png') left center no-repeat, url('../Icons/F/help.png') 99% center no-repeat;
    background-size: 16px, 16px;
    padding-left: 18px;
    padding-right: 18px;
}


/**
  MODAL and AJAX
**/
.modal_loading {
    margin: 10px auto;
    text-align: center;
    font-size: 2em;
    line-height: 2em;
    color: #95DB00;
    padding-top: 100px;
    background-image: url('../Images/ops_page/ajax-loader_large_dial.gif');
    background-position: 50% 15%;
    background-repeat: no-repeat;
}

.AJAX_wrapper {
    padding: 1.5em;
}

.AJAX_wrapper h1 {
    margin-top: 0;
}

/**
  FORMS
**/
/*****w
 Actions cover icons as links, buttons, etc.
*****/

form {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#content form.form {
    padding: 9px;
}

/* Top-level forms: improve visibility on mobile. See https://stackoverflow.com/a/56579404 */
#content > form.form {
    margin: -9px;
}


input, select, textarea, .action, .ops_Form_Element_tinymce .tox, .dropzone {
    border-radius: 0.3em;
    line-height: 1.5;
}

select option {
    padding: 0.2em;
}

:is(input[type=submit], input[type=button]).button--large {
    font-size: 1.2em;
    padding: 0.3em 1em;
}

:is(input[type=submit], input[type=button]).button--small {
    font-size: 0.75em;
    border-width: 1px;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=radio],
input[type=checkbox], select, textarea, .dropzone {
    color: var(--text-dark);
    font-size: 1em;
    padding: 0.3em 0.4em;
    border: 1px solid var(--form-element-border);
}

.dropzone {
    padding: 20px;
}

.tox {
    border: 1px solid var(--form-element-border) !important;
}

:is(input, textarea, select, .ops_form_element_signature, .dropzone):focus {
    outline: var(--green) solid 2px !important;
}

input[type=button], input[type=reset], input[type=submit], .action {
    cursor: pointer;
    color: inherit;

    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;

    border-width: 2px;
    border-color: inherit;
    border-style: solid;

    padding: 0.2em 0.7em;

    transition: all 0.4s;
    transition-timing-function: var(--ease-out-cubic, ease-out);

    font-size: 1.1rem;
    text-decoration: none;

    color: var(--green);
    border-radius: 0.4em;

    font-family: 'Lato', sans-serif;
    font-weight: bold;
}

.action {
    display: inline-block;
    margin: 0.15em 0;
}

.action:is(.small, .ui-widget) {
    font-size: 1rem;
    border-width: 1px;
}


:is(input[type=button], input[type=submit], .action):hover {
    /* See .navigation */
    box-shadow: var(--button-shadow);
}

:is(input[type=button], input[type=submit], .action):is(:disabled, :active) {
    background-color: var(--button-disabled);
    border-color: var(--button-disabled);
    color: #fff;
    cursor: not-allowed;
}

::placeholder {
    color: var(--text-light);
    opacity: 0.8;
}

tr.ops_form_table_row.disabled {
    color: #a6a6a6;
}

input[type=submit].locked, .action.locked {
    transition-property: none;
    color: transparent;
    background-image: url('../Images/ops_page/ajax-loader_submit.gif');
    cursor: wait;
    background-blend-mode: screen;
}

:is(input, select, textarea, .ops_form_element_signature, .dropzone):focus {
    color: var(--text-dark);
    border-color: var(--green);
}

td.error .field-error, td.error .select2-container .select2-selection--single {
    border-color: var(--red);
    outline: 2px solid var(--red);
}

.form input[type=text], .form input[type=search], .form input[type=password], .form input[type=email], .form input[type=number], .form select, .form textarea {
    width: 100%;
    max-width: 95%;
    min-width: 5em;
    transition: background-color var(--speed-fast), border-color var(--speed-fast);
}

.form input[type=color] {
    min-width: 2.5em;
    height: 2.5em
}

.form .datagrid input:not([type="radio"],[type="checkbox"]) {
    width: auto !important;
}

.form .datagrid img:not(.icon) {
    max-width: 20vw;
}

.form select, .form textarea {
    width: 100%;
}

.form input.small {
    width: 40%;
}

.form input[type=text].ops_form_element_timeSpent {
    width: 3rem;
    min-width: 3rem;
    display: inline-block;
    margin-top: 0.4rem;
    margin-right: 0.2rem;
}

.form input[type=text].ops_form_element_timeSpent + i {
    text-transform: capitalize;
}

.form .required-notice td {
    font-size: 0.9em;
    color: var(--text-light);
    padding: 0.8em !important;
}

.form td .required {
    color: var(--red);
    cursor: help;
    line-height: 0.5;
    vertical-align: middle;
    font-size: 1.3em;
}

input[type=button].small {
    font-size: 1rem;
    width: auto;
}

input.changes {
    font-style: italic;
    background: rgb(255, 255, 255);
    background: linear-gradient(to right, rgb(255, 255, 255) 85%, rgb(232, 238, 252) 100%);
}

/* Disabled field styling */
/* Disabled styling overrides formatting */
.form input:is(:read-only, :disabled):not([type=button], [type=submit], [type=checkbox], [type=radio]),
.form textarea:read-only,
.form select:disabled,
.form textarea:disabled,
.ops_disabled,
select option:disabled {
    background-color: #ececec;
    border-style: solid;
    border-color: #ddd;
    border-width: 1px;
    color: #9d9d9d;
    cursor: default;
}

.ops_disabled:visited {
    color: #9d9d9d !important;
}

.ops_form_element_colourpicker_frozen {
    display: inline-block;
    width: 4em;
    height: 1.5em;
    border-width: 1px;
    border-style: solid;
    border-color: var(--text-dark);
    margin: 0 1em 0 0;
}

.ops_form_element_signature {
    background-color: #fff;
    border: 1px solid var(--form-element-border);
    cursor: crosshair;
}

.signature-narrow {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}

.ops_form_element_postcode {
    text-transform: uppercase;
}


table.form, :is(#content, .ops_page_modal_instance) .form.panel {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    width: auto;
    font-size: 1.0em;
}

form[class*="col-"] > table.form {
    width: inherit !important;
}

#content .actionElement > form > .panel.form {
    margin-bottom: 0;
}


#content .headed_box .content table.form {
    width: 95%;
}

table.form > * > tr {
    background-color: #fbfbfb;
    border-bottom: 1px solid var(--ui-border);
    transition-property: background-color;
    transition-duration: 0.3s;
}

table.form > * > tr > td {
    border: none;
    padding: 0.25em 0.1em;
}

table.form > * > tr > td:nth-of-type(1) {
    /* Form element labels */
    border: none;
    padding: 0.8em;

    /*-ms-word-break: break-all;
	word-break: break-all;
	*/
    max-width: 50vw;

    /* Non standard for webkit */
    /*  word-break: break-word; */
    hyphens: auto;
}

table.form > * > tr:hover {
    /*background-color:red;*/
}

table.form tr td {
    vertical-align: top;
}

/** Hiding table rows */
table.form tr.hideable td {
    transition: padding var(--speed-fast) var(--ease-out-quad), opacity var(--speed-fast) var(--ease-out-quad);
    opacity: 1;
}

table.form tr.hideable td > * {
    overflow: hidden;
    max-height: 10em;
    transition: max-height var(--speed-fast) var(--ease-out-quad), margin var(--speed-fast) var(--ease-out-quad);
    display: block;
}

table.form tr.hideable.hide td {
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

table.form tr.hideable.hide td > * {
    overflow: hidden;
    max-height: 0em;
    padding: 0;
    margin: 0;
}

/* causes scrolling issue on mobile - i.e. SPOCS*/
/*table.form tr td:first-child label {
	white-space: nowrap;
}*/

table.form tr td:nth-child(2), table.form tr td:nth-child(4) {
    padding-top: 0.65em;
    padding-bottom: 0.65em;
    padding-right: 0.65em;
}

table.form td:not(.ops_form_table_cell) ul {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
}

table.form ul:not(.ops_form_element_radiobuttons) li {
    margin-bottom: 0.25em;
    margin-left: 0;
}

table.form .message ul {
    list-style: disc inside none;
}


table.pronounced th {
    font-weight: bold;
    font-style: italic;
}

label.pronounced {
    font-weight: bold;
}

.form .actions, .datagrid .actions {
    text-align: center;
    padding: 0.8em;
    color: var(--green);
    margin: auto;
}

.form .errors {
    font-size: 0.9em;
    border-radius: 0.2em;
    width: 95%;
}

.form td .ops_form_errors {
    background-color: transparent;
    color: var(--red);
    padding: 0 0.3em 0.19em 0;
    line-height: 1;
    vertical-align: middle;
    border-radius: 8px;
}

ul.ops_form_table_cell_errors_list li {
    list-style: none;
}

.form td.help {
    min-width: 2em;
    background-color: #3bbde9;
    background-image: url('../Icons/ui/ux2/appbar-question.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: help;
}

.headed_box > .help {
    float: right;
    font-size: 1.1rem;
    min-width: 1.5em;
    max-width: 1.5em;
    min-height: 2.2rem;
    background-color: #3bbde9;
    background-image: url(../Icons/ui/ux2/appbar-question.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 0.25em;
    cursor: help;
    margin: 0.30em 0.6em 0 0.6em;
}

.form tr.help-highlight {
    background-color: #ddf6ff;
}

.form input[type=checkbox] {
    display: none;
    appearance: none;
}

form input[type=checkbox]:checked {
    background-image: url(../Icons/ui/ux2/checkbox-mark-grey.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

form input[type=checkbox]:hover {
    cursor: pointer;
}

.form input[type=checkbox] {
    border-width: 0.1em;
    border-style: solid;
    width: 1.8em;
    height: 1.8em;
    min-width: 1.8em;
    min-height: 1.8em;
    display: inline-block;
    border-radius: 0.25em;
    border-color: var(--form-element-border);
    vertical-align: middle;
    margin-right: 0.25em;
    background-color: white;
}

.form input[type=checkbox]:disabled {
    background-color: #ddd;
    opacity: 0.5;
    border-color: #847f82;
}

.form input[type=radio] {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--form-element-border);
    border-radius: 50%;
    background-clip: content-box;
    padding: 3px;
    vertical-align: middle;
    background-color: transparent;
}

.form input[type="radio"]:checked {
    background-color: var(--green);
    cursor: pointer;
}

.form .ops_form_element_radiobutton_text {
    vertical-align: middle;
    margin-left: 0.2em;
}

.form_page_title {
    margin-top: 0.5em;
    margin-bottom: 0.2em;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Varela Round', 'Lato', sans-serif;
    font-weight: normal;
    letter-spacing: -0.03em;
}

.form span.checkbox-text {
    margin-left: 1em;
    display: inline-block;
    width: 80%;
    vertical-align: middle;
    white-space: normal;
}

.form .cell-submit {
    text-align: center;
    vertical-align: middle;
}

.form--no-shadow {
    box-shadow: none;
}

:is(#content,.ops_page_modal_instance) .form.panel.form--shrunk {
    font-size: 0.85em;
}


table.form h2,
table.form h3,
table.form h4,
table.form h5,
table.form h6 {
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}

table.form h2 {
    font-size: 1.6em;
}

/** Forms pages progress tracking **/
.form-progress {
    list-style-type: none;
    margin: 0.3em 0em 0.8em 0em;
}

.form-progress li {
    display: inline-block;
    padding: 0 5px 0 20px;
    font-size: 1.1em;
}

.form-progress li span {
    padding: 0.2em 0.5em;
    display: inline-block;
    border-radius: 0.8em;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    background-color: #ddd;
}

.form-progress .incomplete {
    background-image: url('../Icons/P/arrow.png');
    background-position: left center;
    background-repeat: no-repeat;
}

.form-progress .incomplete span {
    border-color: #c1f1ff;
    color: #54A0D6;
}

.form-progress .complete {
    background-image: url('../Icons/P/tick.png');
    background-position: left center;
    background-repeat: no-repeat;
}

.form-progress .complete span {
    /*	background-color: lightgrey;
	background-image: url('../../Images/ops_page/header_bg.jpg');
	background-position: center bottom;*/
    color: #c0c0c0;
}

.form-progress .active {
    background-image: url('../Icons/P/control-270.png');
    background-position: left center;
    background-repeat: no-repeat;
}

.form-progress .active span {
    border-color: #94d4e0;
    background-color: #fff;
    color: black;
}

.form_checkbox_multi {
    list-style: none;
    margin-left: 0;
}

.form_checkbox_multi li {
    margin-left: 0;
}

.form_checkbox_multi li label {
    white-space: nowrap;
}

ul.form_checkbox_multi {
    margin-bottom: 1em;
}

table.form-container {
    border: 0;
}

table.form-container td {
    border: 0;
}

table.form-container .form {
    /*border: 0 ;*/
    font-size: 1rem;
}


table.magnify:not(.mceToolbar) {
    font-size: 1.05rem;
}

/**
Multiselect
**/

.ms_new_item_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 2.5em;
    margin-top: 1.5em;
}

p.ms_new_item_label, input[type=text].ms_new_item_name, div.ms_new_item_add_btn {
    margin: 0.3em;
}

p.ms_new_item_label {
    white-space: nowrap;
}

input[type=text].ms_new_item_name {
    flex-grow: 1;
}

div.ms_new_item_add_btn {
    font-size: 1.1em;
    color: var(--green);
    border-color: var(--green);
}

.ms_error {
    text-align: center;
    width: 100%;
}

/**
Colours, mostly for buttons
**/

/* gray */
.gradient_gray, .gray, input.gray, input.gradient_gray a.gray {
    color: #818181;
}

.gradient_gray:hover, .gray:hover, input.gray:hover, input.gradient_gray:hover, a.gray:hover {
    border-color: #818181;
}

.gradient_gray:hover, input.gray:hover, input.gradient_gray:hover, a.gray:hover {
    background-color: #818181;
}

/* red */
.gradient_red, .red, input.red, input.gradient_red, a.red {
    color: var(--red);
}

.gradient_red:hover, .red:hover, input.red:hover, input.gradient_red:hover, a.red:hover {
    border-color: var(--red);
}

.gradient_red:hover, input.red:hover, input.gradient_red:hover, a.red:hover {
    background: var(--red);
}

/* blue */
.gradient_blue, .blue, input.blue, input.gradient_blue, a.action.blue, button.blue {
    color: var(--blue);
}

:is(.gradient_blue, .blue, input.blue, input.gradient_blue, a.action.blue, button.blue):hover {
    border-color: var(--blue);
}

:is(.gradient_blue, input.blue, input.gradient_blue, a.action.blue, button.blue):hover {
    background-color: var(--blue);
    color: var(--text-white);
}

/** Inverted Colours **/

a.action.inverted.blue {
    background-color: var(--blue);
    color: #fff;
}

a.action.inverted.blue:hover {
    background-color: transparent;
    border-color: var(--blue);
    color: var(--blue);
}

/** Extras **/

.arrow {
    font-size: 0.3rem;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 1em solid transparent;
    display: inline-block;
}

.arrow.up {
    border-bottom-color: white;
    border-bottom-width: 1.732em;
    border-top-width: 0.2em;
}

.arrow.down {
    border-top-color: white;
    border-top-width: 1.732em;
    border-bottom-width: 0.2em;
}

.arrow.left {
    border-right-color: white;
    border-right-width: 1.732em;
    border-left-width: 0.2em;
}

.arrow.right {
    border-left-color: white;
    border-left-width: 1.732em;
    border-right-width: 0.2em;
}

.circle {
    display: inline-block;
    height: 1em;
    width: 1em;
    margin: 0.2em 0.5em;
    border-radius: 1em;
    border-style: none;
    float: left;
}

.slide {
    margin-left: 0rem;
}

.nudgeright {
    margin-left: 3.8rem;
}

.slideright {
    margin-left: 8.8rem;
}

.chevron {
    border-style: solid;
    border-width: 0.3em 0.3em 0 0;
    content: '';
    display: inline-block;
    height: 0.9em;
    right: 0.15em;
    position: relative;
    /*top: 0.3em;*/
    transform: rotate(45deg);
    /*vertical-align: top;*/
    width: 0.9em;
}

.hidden {
    display: none;
}

/* Progress bars */
.progress_bars .progress_bar .fill_bar_container {
    margin-right: 2em;
}

.progress_bar {
    width: 100%;
    margin-bottom: 3px;
    background-color: transparent !important;
    position: relative;
}

.progress_bar .fill_bar .fill_text {
    font-weight: bold;
    float: right;
    color: var(--text-white);
    padding-right: 0.2em;
    margin-top: 0.15em; /* hacky */
}

.progress_bar.alert .fill_bar .fill_text.outer {
    color: #333;
}

.progress_bar.alert .label {
    background-color: transparent !important;
    color: var(--red) !important;
}

.progress_bar .fill_bar .fill_text.outer {
    /* for small bars that need their text pushing out of bar to be visible */
    position: absolute;
    right: 0;
    color: #555;
}

.progress_bar .label {
    padding-right: 0.25em;
    font-weight: bolder;
    vertical-align: middle;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    font-size: 0.9em;
}

.progress_bar .fill_bar_container {
    background-color: #eee;
    border-radius: 0.2em;
    border: 1px solid #BBB;
    text-align: left;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.progress_bar .fill_bar:not(.alert):not(.warn) {
    background: linear-gradient(90deg, #EEE, #FFF);
}

.progress_bar .fill_bar {
    height: 1.5em;
    border-radius: 0.2em;
    border-right: 1px solid #DDD;
    overflow: visible;
}

/* Fill vriations - remember to modify fill text colour if needed */
/* Dark Green Bar */
.progress_bar.green:not(.alert):not(.warn) .fill_bar {
    background-image: none;
    background-color: var(--green);
}

.progress_bar.green .fill_text,
.progress_bar.pink .fill_text {
    color: var(--text-white);
}

/* Yellow Bar */
.progress_bar.yellow:not(.alert):not(.warn) .fill_bar {
    background-image: none;
    background-color: var(--yellow);
}

.progress_bar.yellow .fill_bar .fill_text {
    color: var(--text-black)
}

/* Pink Bar */
.progress_bar.pink:not(.alert):not(.warn) .fill_bar {
    background-image: none;
    background-color: var(--red);
}

/*
 * Start at zero width, animate to whatever it is set to elsewhere
 * CSS or inline HTML style
 */
@keyframes progressBarLoad {
    0% {
        width: 0px;
    }
}

/**
 * Collapsible divs by using
 * Container element: class="collapser"
 * Clickable element: class="collapse_toggle"
 * data-collapsed="true/false" for initial state, add start_hidden class if needed to child targets
 * data-collapse-target-classes="optional_string" to target which elements are collapsed within parent
 **/
.collapser .collapse_toggle.collapsed:first-child::before {
    content: '> ';
}

.collapser .collapse_toggle.expanded:first-child::before {
    content: '^ ';
}

.collapse_toggle.collapsed,
.collapse_toggle.expanded {
    margin-bottom: 0;
}


/* ILP Target Grades */

.meter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
    font-size: 0.8em;
}

dd.meter {
    justify-content: flex-start;
}

.meter_column {
    transition: background-color 0.2s ease-out;
    padding: 0;
    margin: 0 0.2em;
    cursor: default;
}

.meter_column p {
    font-size: 4em;
    margin: 0;
    padding: 0;
    line-height: 1;
    cursor: default;
}

.meter_column:hover {
    background-color: #eee;
}

.meter_column span {
    font-size: 1em;
    padding: 0.2em;
}

.meter_column > div {
    height: 5.5em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /*	border-top: 2px solid #00adee ; */
    overflow: hidden;
}

div.meter_level {
    max-height: 5.5em;
    min-height: 0.5em;
    height: 0.5em;
    width: 100%;
    background-color: rgb(255, 108, 00);
    transition: background-color 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s, height 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
    animation-duration: 1s;
    animation-delay: 0.2s;
    border: 1px solid #00adee;
}

/**
  DASHBOARD LAYOUT
**/

div.dashboard {
    /**
	 * Col 2 appears about 730px@300pxw
	 * Col 2 appears about 930px@400pxw
	 * if you change the column-width value please also update the multi-column breakpoint media
	 * query in student_summary.css that modifies the break-after value
	 */
    /* column-width: 450px;
	min-height: 90vh;
	column-gap: 0.5em;*/
}

div.dashboard {
    flex-wrap: wrap;
    display: flex;
    align-content: flex-start;
    flex-direction: row;
    /*justify-content: space-around;*/
    align-items: stretch;
    padding: 0em 0em;
}

div.dashboard:empty {
    display: none;
}

div.dashboard > div, div.dashboard > section {
    /* Don't spread first level divs over multiple columns */
    break-inside: avoid-column;
}

div.dashboard > form {
    margin-left: 10px;
    margin-right: 10px;
}


/** Divs within dashboard flex settings */

div.dashboard > div, div.dashboard > div.headed_box {
    /* border: 1px solid #A4A4A4; */
    flex: 1 1 15rem;
    /* padding: 5px Disabled for now. */;
}

div.dashboard > div.dashboard {
    flex: 1 1 30rem;
    /* Prevent nested dashboards from clipping off-screen */
    max-width: 100%;
}


/*
Note that this slim setting applies to narrow displays.
Wider displays are reset in the breakpoint at this style's base
*/
div.dashboard > div.slim {
    flex: 1 1 10rem;
}

div.dashboard > div.wide {
    flex: 1 1 35rem;
}

.headed_box.wider, div.dashboard > div.headed_box.wider {
    flex: 3 1 35rem;
    min-width: 50vw;
}

div.dashboard > .panel, div.dashboard > .headed_box {
    padding: 0;
}

#content div.headed_box.overflow_visible, #ops_page_AJAX_wrapper div.headed_box.overflow_visible {
    overflow: visible;
}

/**
 * Headed boxes
 **/
/* .headed_box {
	//border: 1px solid #A4A4A4;
	border: 1px solid #fff;
	border-radius: 0.3em ;
	background-color: rgba(255, 255, 255, 0.3);
	margin: 1.2em 0.25em;
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.13);
	min-width: 10em;
	overflow: hidden;
} */

.box, .headed_box {
    margin: 0 0.25em 1.2em 0.25em;
}

.headed_box {
    border-radius: 0.25em;
    background-color: #fff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.13);
    min-width: 10em;
    transition: border 150ms linear;
    max-width: 95vw;
    overflow-x: auto;
}

.headed_box img:not(.icon) {
    max-width: 100%;
}

.headed_box > div:not(.headed_box, .row),
.headed_box > form, .box:not(.spaced) {
    padding: 0.4em;
}

.spaced > * {
    margin: 0.8rem 1.2rem;
}

.spaced-lesser > * {
    margin: 0.6rem 0.9rem;
}

.panel > div.dashboard, .headed_box div > div.dashboard {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.headed_box .content {
    clear:both;
    padding: 1.2em;
    vertical-align: top;
}

.headed_box div.content_compact {
    padding: 0.2em 1.2em 1.2em;
    vertical-align: top;
}

.headed_box .content.fluid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

dl.horizontal {
    display: grid;
    grid-gap: 0.1em 0.1em;
    grid-template-columns: auto;
    flex-grow: 1;
    margin: 0.25em;
    padding: 0.5em;
    border: 1px solid #eee;
    border-radius: 0.5em;
}
dl.horizontal dd {
    margin: 0;
    grid-column-start: 2;
}

.element_static {
    display: block;
}

.paragraph, .element_static {
    max-width: 45em;
    margin-left: auto;
    margin-right: auto;
}

dl dt {
    font-weight: bold;
    color: #000;
    text-decoration: none;
    margin: 0 0 0.4em 0;
}

dl dd {
    color: #000;
    margin-bottom: 0.8em;
    padding-left: 0.8em;
}


.hide-when-slim {
    max-height: 0;
    transition: max-height ease-in-out 0.2s;
    overflow: hidden;
}

a.hide-when-slim, span.hide-when-slim, td.hide-when-slim, th.hide-when-slim {
    display: none;
}

a.hide-when-wide, span.hide-when-wide {
    display: inline;
}

td.hide-when-wide, th.hide-when-wide {
    display: table-cell;
}


/* Any div with this class should be the anchor for reveal panels */
/*.reveal {
	position:relative;
}*/
.reveal_bars {
    flex: 0 1 3rem;
    display: flex;
    flex-direction: column;
}

.reveal_bars > div {
    flex: 1 0 auto;
    background-position: right top;
    background-size: 2.3rem;
    background-repeat: no-repeat;
    background-color: #eee;
    margin-bottom: 0.25rem;
    position: relative;
    padding: 0.5em;
    border-radius: 0.25em;
    text-align: center;
    cursor: pointer;
}

.reveal_bars > div > div, .reveal_bars > div > dl {
    padding: 1em;
    text-align: left;
    font-size: 0.9em;
}

.reveal_bars > div > div {
    display: none;
}

.reveal_bars > div > div h2 {
    color: #2c3335;
    margin-top: 0;
    text-align: center;
    font-family: 'Varela Round', 'Lato', sans-serif;
    display: none;
}

/** UL/LI separator features **/
li.seperator ~ li:not(.seperator) {
    font-size: 0.8em;
}

ul.filters li.seperator {
    cursor: pointer;
}

li.seperator .arrow {
    border-width: 0.85em 0.7em;
    margin-right: 0.3em;
}

/*.reveal_bars > div > div {
	position: absolute;
	bottom: 0.5rem ;
	width: 100% ;
	left: 0rem ;
}*/

a.image {
    width: 100%;
    height: 100%;
    display: block;
    line-height: 0;
}

/*
* Student profile styling
*/
.student_profile, .person_profile {
    text-align: center;
    padding-bottom: 1rem;
    /*	display: flex; */
    flex-direction: column;
}

.student_profile .profile_image, .person_profile .profile_image {
    max-width: 100%;
}

.learner_support_content dd {
    display: inline-block;
    max-width: 5em;
}


/** QR Scanner **/

#qr-video {
    width: 90%;
    max-width: 35rem;
    max-height: 50vh;
    border-radius: 0.5em;
    background-color: #fff;
    margin: 0 0.25em 1.2em 0.25em;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.13);
}

h3#student-name, h3#student-reference {
    margin: 0em 0em 1em 0em;
}

div.dashboard {
    flex: 1 1 15rem;
}

#qr-mirror-container {
    height: 20px;
    width: 90%;
    position: relative;
}

#qr-mirror-container > div {
    background-image: url('../Icons/ui/scanner/mirror.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 52px; /* This should not scale with font size */
    width: 52px;
    position: absolute;
    bottom: -4px;
    right: -4px;
    transition: all 0.2s;
    opacity: 0.70;
}

#qr-mirror-container > div:hover {
    width: 58px;
    height: 58px;
    bottom: -7px;
    right: -7px;
}

#qr-mirror-container > div:active {
    opacity: 0.4;

}

#qr-capture img {
    width: 50%;
    height: auto;
}

#qr-dialog {
    padding: 0.6em 0.8em;
    border-radius: 0.6em;
    position: fixed;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, 0);
    font-weight: bolder;
    max-width: 80vw;
    text-align: center;
    font-size: calc(0.8em + 2vmin);
    z-index: 20;
}

#qr-dialog.qr-dialog-default-colors {
    background-color: var(--green);
    color: #fff;
    font-weight: normal;
    border: 0.07em solid #4cac31;
}

#student-name, #student-reference {
    margin: 1em;
}

#qr-capture.loading #student-name, #qr-capture.loading #student-reference {
    margin: 0em;
}

#qr-camera-options a {
    margin: 0.0em 0.2em 0.2em 0.1em;
}

#no-camera {
    margin-top: 5em;
    display: flex;
    width: 30%;
}

#no-camera + span {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 1.4em;
    color: #888;
    font-family: 'Varela Round', 'Lato', sans-serif;
}

#qr-workflow-marklist {
    margin-bottom: 1.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#qr-workflow-marklist span {
    margin: 0.5em;
    font-family: 'Varela Round', 'Lato', sans-serif;
    font-weight: normal;
    letter-spacing: -0.06em;
    text-transform: capitalize;
}

#qr-workflow-marklist > div {
    flex: 1 1 5em;
    min-width: 10em;
    display: flex;
    justify-content: center;
}

#qr-workflow-marklist select {
    display: flex;
    width: 90%;
    text-align: center;
    cursor: pointer;
    color: var(--green);

    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;

    border-width: 1px;
    border-color: var(--green);
    border-style: solid;

    padding: 0.2em 0.8em;

    transition: all 0.4s;
    text-transform: capitalize;
    transition-timing-function: ease-out;

    font-size: 1.1rem;
    text-decoration: none;
}

/* The student photo and flags */
.student_profile > div:first-child, .person_profile > div:first-child {
    flex: 1 0 0;
}

.student_profile .reveal_bars, .person_profile .reveal_bars {
    text-align: left;
}

/* The student learner support and info reveal icons */
.reveal_bars #reveal_learnersupport {
    background-image: url('../Icons/ui/ux2/appbar-shield.png');
}

.reveal_bars #reveal_learnersupport div {
    display: block;
}

.compact {
    margin: 0 !important;
    padding: 0 !important;
}

.panel > h2:first-child {
    margin-top: 0.5em;
}

.headed_box > h2 {
    color: var(--text-light);
    padding: 0.25em 0.55em 0.06em 0.55em;
    margin: 0;
    font-size: 1.1em;
    font-weight: normal;
    line-height: 2;
    transition: background 950ms linear;

    /*   background: linear-gradient(#B1B1B1, #A4A4A4); */
    /*	background: linear-gradient(#d4d2d2, #c2cac6); */
}

.headed_box > h2.magnify {
    font-size: 1.5em;
}

.headed_box h2 .icon {
    float: right;
    margin: 0.4em;
}

.headed_box h2 .sub_title {
    float: right;
    font-size: 80%;
}

.headed_box h3 {
    margin-bottom: 0;
}

.headed_box.alert, .layout_panel.alert {
    background-color: rgba(255, 255, 255, 1) !important; /* SASS this from main bg colour */
}

.headed_box.alert .content *:not(.alert) {
    /*	color: #555 !important ; 	*/
}

.headed_box .content .label {
    display: block;
    font-weight: bold;
}

.headed_box .content .value {
    display: block;
    margin-bottom: 0.5em;
}

/* More bijou blocks */
.small .headed_box,
.headed_box .headed_box {
    font-size: 0.9em;
    border: none;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.13);
    background-color: #FAFAFA;
    margin: 0.8em;
}

.small .headed_box h2,
.headed_box .headed_box h2 {
    /* background-color: #DDD;
	border-bottom: 1px solid #AAA; */
    background-color: transparent;
    background-image: none;
    color: var(--text-dark);
    font-weight: normal;
    font-size: 1.2em;
}

div.vertical_banner {
    flex: 0 0 10%;
    padding: 0.2em;
    border-bottom-right-radius: 0.2em;
    margin-right: 0.24em;
    margin-left: -0.2em;
    margin-top: -0.2em;
    text-align: center;
}

.headed_box > .content > .left {
    flex: 2;
}

.babyblue.headed_box {
    border: 1px solid var(--blue);
}

.black.headed_box {
    border: 1px solid var(--text-black);
}

.blue.headed_box {
    border: 1px solid var(--blue);
}

.gray.headed_box {
    border: 1px solid var(--text-light);
}

.green.headed_box {
    border: 1px solid var(--green);
}

.orange.headed_box {
    border: 1px solid var(--orange);
}

.purple.headed_box {
    border: 1px solid var(--purple);
}

.red.headed_box {
    border: 1px solid var(--red);
}

.yellow.headed_box {
    border: 1px solid var(--yellow);
}

/* Highlighting */
tr.yellow, .headed_box.yellow > h2, td.yellow, .layout_panel.yellow > b {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

.headed_box.yellow > h2, .headed_box.yellow > h2 *, td.yellow {
    color: #333333 !important;
}

tr.orange, .headed_box.orange > h2 {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
}

.headed_box.orange > h2, .headed_box.orange > h2 * {
    color: #333 !important;
}

tr.green, .headed_box.green > h2, .layout_panel.green > b {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.headed_box.green > h2, .headed_box.green > h2 * {
    color: #FFFFFF !important;
}

.headed_box.red > h2, .layout_panel.red > b {
    background-color: var(--red) !important;
    border-color: var(--red) !important;
}

.headed_box.red > h2, .headed_box.red > h2 *, .layout_panel.red > b {
    color: #FFFFFF !important;
}

.headed_box.black > h2 {
    background-color: var(--text-dark) !important;
    border-color: var(--text-dark) !important;
}

.headed_box.black > h2, .headed_box.black > h2 * {
    color: #FFFFFF !important;
}

.headed_box.grey > h2, td.grey {
    background-color: var(--text-light) !important;
    border-color: var(--text-light) !important;
}

.headed_box.grey > h2, .headed_box.grey > h2 *, td.grey {
    color: #fff !important;
}

.headed_box.blue > h2, td.blue {
    background-color: var(--blue) !important;
    border: var(--blue) !important;
}

.headed_box.blue > h2, .headed_box.blue > h2 *, td.blue {
    color: #FFFFFF !important;
}

.headed_box.babyblue > h2, tr.markbook_category {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}

.headed_box.babyblue > h2, .headed_box.babyblue > h2 * {
    color: #FFFFFF !important;
}

.headed_box.purple > h2 {
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
}

.headed_box.purple > h2, .headed_box.purple > h2 * {
    color: #FFFFFF !important;
}

.highlight-above, .highlight-on, .highlight-below {
    padding: 1em !important;
}

/**
 * Message boxes
 **/
.message {
    border-radius: 0.25em;
    border: 1px solid var(--ui-border);
    padding: 0.8em 1.8em;
    margin: 0.25em auto 1em auto;
    display: block;
    text-align: left;
    background-color: var(--text-white);
    color: var(--text-dark);
    background-position: 0.4em 0.1em;
    background-size: 2.5em;
    background-repeat: no-repeat;
    line-height: 1.5;
    width: fit-content;
    max-width: min(90%, 70rem);
    align-self: flex-start;
}

.message.flash {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.message.thin {
    max-width: 60em !important;
}

/* Messages in cells should have neater margins: */
td > .message {
    margin-bottom: 0.25em;
}

.message p:last-child {
    margin-bottom: 0em;
}

p.message {
    margin-bottom: auto;
}

.unimportant {
    color: var(--text-light);
}

.message.unimportant {
    border-color: transparent;
    background-color: transparent;
}

.message.alert {
    background-image: url('../Icons/ui/ux2/appbar-alert.png');
    font-size: 1em;
    padding: 0.6em 1.5em 0.7em 3em;
}

.message.help {
    background-image: url('../Icons/ui/ux2/appbar-book-perspective-help.png');
    font-size: 0.9em;
    padding: 0.6em 1.5em 0.7em 3em;
    background-color: var(--purple);
}

.message.info {
    background-color: var(--purple);
    color: #fff;
    flex: 0 0 auto;
}

.message.info.confirm {
    background-color: var(--green);
}

.message.info.unimportant {
    background-color: #cc6eb1;
}

.message.info.student-location img {
    float: left;
    width: 3em;
    height: 3em;
}

.message.info p, .message.info a {
    margin-bottom: 0;
    margin-top: 0.6em;
    font-size: 1.09em;
}

.message.confirmation {
    background-image: url('../Icons/ui/ux2/appbar-check.png');
    font-size: 0.9em;
    padding: 0.5em 1.5em 0.7em 3em;
    /*	background-color:#1badd6; */
}

.message:is(.help, .request, .confirmation, .info), .message:is(.help, .request, .confirmation, .info) :is(a,a:link,p,h1,h2,h3,h4,h5,h6) {
    color: #fff;
}

.message ul, .message ol {
    margin-left: 1.5em;
    margin-right: auto;
    width: fit-content;
    text-align: left;
}

.message ol li {
    padding-left: 0.25em;
}


form td .message:not(.ops_form_element_string) {
    max-width: 30rem;
}

/*#topbar form#search {
	display:none;
}

#topbar .links #link_search {
	display:inline-block ;
}*/


#topbar > #search {
    padding: 0.2em 0.8em;
    position: absolute;
    top: 2.4rem;
    right: 0.9rem;
    max-width: 70vw;
    z-index: 550;
    /* left: 10rem; */
    width: 20rem;
    display: none;
}

#topbar > #search.reveal {
    display: block;
}

#topbar > #search input[type=text], #topbar > #search input[type=search] {
    border-style: solid;
    border-color: var(--green);
    border-width: 4px 4px 4px 4px;
    border-radius: 0.3em;
    width: 85%;
    color: var(--green);
    box-shadow: var(--button-shadow);
    margin-top: -0.2em;
}

#topbar > #search > input:nth-child(1)#search_submit {
    visibility: visible;
    height: auto;
    margin-right: 5px;
    margin-bottom: 4px;
}

.reveal {
    opacity: 1 !important;
    visibility: visible !important;
}

#topbar > #search input:nth-child(3) {
    display: inline;
    margin-left: -0.5em;
}

#topbar > #search > input:nth-child(1) {
    width: 0px;
    visibility: hidden;
}

tr.markbook_category {
    font-weight: bold;
}

tr.markbook_category a {
    text-decoration: none;
    color: #555;
}

dl.btec_unit_detail {
    flex-basis: 10rem;
    padding: 1rem;
}

.btec_assignment_status {
    width: 10.5em;
    font-size: 1.1em;
}

div.contract_review .score_box {
    height: auto;
    max-width: 10rem;
    float: left;
    margin: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid #ddd;
    text-align: center;
    padding: 0.6rem;
}


/**
ADMINISTRATION
**/

.datagrid#Photos img {
    width: 10rem;
}

#admin_dashboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

#admin_dashboard > div:nth-child(2) {
    order: 1;
    flex: 0 1 25em;
}

#admin_dashboard > div:first-child {
    flex: 1 1 20em;
    order: 2;
    font-size: 0.85em;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    align-items: stretch;

    padding: 0.15em;
    margin: 0 1em;
    /*min-width: 20em;*/

    width: 65vw;
    overflow-y: scroll;

    border: 4px solid #777;
    border-radius: 0.5em;
    background-color: #fff;

    justify-content: center;
}

#admin_dashboard div.layout_dashboard {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    align-items: stretch;
    padding: 0em 0em;
    flex: 1 1 15em;
    margin: 0.15em;
    background-color: #ccc;
    border-radius: 0.2em;
    padding: 0.2em;
    justify-content: space-around;
}

#admin_dashboard div.layout_dashboard:hover {
    background-color: #ddd;
    cursor: e-resize;
}

#admin_dashboard div.layout_dashboard.slim {
    flex: 0 1 12em;
}

#admin_dashboard div.layout_dashboard > b {
    display: block;
    line-height: 2;
    flex: 1 0 100%;
    padding: 0.2em 0.2em 0.8em 0.2em;
    color: #888;

}

#admin_dashboard div.layout_dashboard > b > a {
    float: right;
    padding: 0.2em;
    margin: 0;
    line-height: 0;
}

#admin_dashboard div.arrow {
    cursor: pointer;
}

#admin_dashboard div.arrow.up {
    border-bottom-color: var(--green);
}

#admin_dashboard div.arrow.down {
    border-top-color: var(--green);
}

#admin_dashboard div.arrow.right {
    border-left-color: var(--green);
}

#admin_dashboard div.arrow.left {
    border-right-color: var(--green);
}

#admin_dashboard div.layout_dashboard > b > a:hover div.arrow.left {
    border-right-color: #fff;
}

#admin_dashboard div.layout_dashboard > b > a:hover div.arrow.right {
    border-left-color: #fff;
}

#admin_dashboard div.layout_dashboard > b > a:hover div.arrow.up {
    border-bottom-color: #fff;
}

#admin_dashboard div.layout_dashboard > b > a:hover div.arrow.down {
    border-top-color: #fff;
}

#admin_dashboard div.layout_dropzone {
    outline: 3px dashed #666;
}

#admin_dashboard div.layout_visibility {
    float: right;
    background-size: contain;
    background: #3e8dca url('../Icons/ui/ux2/appbar-eye.png') no-repeat 50% 50%;
    width: 1em;
    height: 1em;
}

/*#admin_dashboard div.layout_dropzone.ready {
	height:5em;
}*/

#admin_dashboard div.layout_panel {
    border-radius: 0.1em;
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.13);
    min-width: 5em;
    max-width: 95vw;
    margin: 0.15em;
    flex: 1 1 12rem;
    text-align: center;
    overflow: hidden;
}

#admin_dashboard div.layout_panel.wide {
    flex: 2 1 17em;
}

#admin_dashboard div.layout_panel b {
    display: block;
    text-align: left;
    margin-bottom: 0.5em;
    padding: 0.2em;
}

#admin_dashboard div.layout_panel img {
    max-width: 95%;
    width: 95%;
}

#admin_dashboard .form.panel {
    width: 90%;
}


#admin_dashboard div.layout_panel[draggable=true]:hover {
    box-shadow: 0px 12px 13px -5px rgba(122, 122, 122, 1), 0px 0px 10px -3px rgba(122, 122, 122, 1);
    margin: -0.6em 0 0.8em 0;
    outline: 1px solid #aaa;
}

/* Alert styled boxes */
/* Must come after the rest in order to override */
.headed_box.alert, #admin_dashboard div.layout_panel.alert:not(.removed) {
    border-color: var(--orange);
    border-style: solid;
    border-width: 1px;
}

.headed_box.alert > h2, .headed_box h2.alert, #admin_dashboard div.layout_panel.alert:not(.removed) > b {
    background: var(--orange);
    color: var(--text-white) !important;
}

#admin_dashboard div.layout_panel.removed {
    background: #ccc !important;
}

#admin_dashboard div.layout_panel.removed > b {
    background: #bbb !important;
}

#admin_dashboard div.layout_panel.removed > img {
    height: 0;
}

#admin_dashboard .layout_dashboard * {
    transition: all 0.4s ease-out, font-size 0s linear;
}

.hover-border {
    /* border-style: solid; */
    /* border-width: 3px; */
    /* border-color: inherit; */
}

.hover-border.hover-alert:hover {
    border-color: var(--orange);
}

/**
*  Visualizations
**/

/* This prevents flickering visualisation tooltips */
svg > g > g:last-child {
    pointer-events: none
}

.visualization {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.visualization-window {
    overflow: hidden;
}

.visualization-window .loading-message {
    position: absolute;
    display: block;
    z-index: 5;

    margin: 1em 2em 0em 2em;
    padding: 1.5em 1em 1em 1em;

    border-radius: 0.4em;
    border: 1px solid #c1c1c1;
    box-shadow: 0px 0px 3px 2px rgba(148, 148, 148, 0.4);

    text-align: center;
    font-size: 1em;
    color: var(--green);

    background-color: rgba(255, 255, 255, 0.92);
    background-position: 50% 15%;
    background-repeat: no-repeat;
    background-image: url('../Images/ops_page/ajax-loader.gif');

    transform: scale(0);
    opacity: 0;
}

.loading-message.pulse {
    transform: scale(1);
    opacity: 1;
}

.google-visualization-tooltip {
    z-index: 5;
}


/**
* Additional JQuery/JQueryUI tweaks
**/
.ui-datepicker {
    z-index: 950 !important;
}

.ui-button.small {
    padding: 0.2rem 0.8rem;
}

/**
  Contract Reviews
**/

div.contract_review > div {
    padding-left: 1rem;
    padding-right: 3rem;
    position: relative;
    display: inline-block;
    width: 100%;
}

div.contract_review img {
    width: 95%;
    height: auto;
}

div.contract_review p {
    margin-left: 0.5em;
}

div.contract_review .score_box {
    height: auto;
    max-width: 10rem;
    float: left;
    margin: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid #ddd;
    text-align: center;
    padding: 0.6rem;
}

div.contract_review .score {
    display: inline-block;
    font-size: 2em;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

div.contract_review .date {
    position: absolute;
    right: 1.2em;
    bottom: 0.5em;
    font-style: italic;
}

.widget_review_score {
    display: inline-block;
    font-size: 1.4em;
    padding: 0.2em 0.5em;
    border: 1px solid #ddd;
    border-radius: 0.4em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    color: #999;
}

/** Paginator **/

.paginator {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    text-align: center;
    overflow: hidden;
}

.paginator > * {
    margin-left: 0.2em;
    margin-right: 0.2em;
}

.paginator .prev {
    float: left;
}

.paginator .prev:first-child {
    margin-left: 0em;
}

.paginator .next {
    float: right;
}

.paginator .next:last-child {
    margin-right: 0em;
}

/**
  Dropzone
  Note: Dropzone.js uses px for most of its layout approach.
**/

.dz-progress {
    top: 95px !important;
}

.dropzone .dz-preview:not(.dz-complete) .dz-progress {
    opacity: 0.6;
}

.dz-preview.dz-complete .dz-progress {
    display: none;
}

.dz-details {
    overflow: hidden;
}

.dz-details:hover {
    overflow: visible;
}

.dz-details:hover .dz-filename {
    z-index: 1000;
    background: #FFFFFF;
    opacity: 1;
}

.dz-error-message {
    top: 155px !important;
}

.dropzone .dz-preview > a {
    /* See styles for .dz-remove (hence px)*/
    font-size: 14px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none;
}

.dropzone .dz-preview > div + a {
    margin-top: 8px;
}

.dropzone.dropzone-readonly {
    border: none;
    padding: 0px;
    background: transparent;
    min-height: 25px;
}

.dropzone.dropzone-readonly .dz-message > span {
    /* Inspired by .message */
    border-radius: 0.25em;
    border: 1px solid #ddd;
    padding: 0.8em;
    margin: 0.25em auto 2em auto;

    max-width: 50em;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    color: #7b7b7b;
    background-position: top center;
    background-size: 3em;
    background-repeat: no-repeat;
    line-height: 1.5;
}

.dropzone.dropzone-readonly .dz-preview.dz-image-preview {
    background: transparent;
}


.dropzone-buttons {
    text-align: end;
}

.dropzone-buttons > .action {
    margin-top: 0.5em;
    margin-right: 0.3em;
}

.dropzone-message {
    margin-top: 0.4em;
}

a.action.dropzone-paste {
    padding-left: 1.8em;
    background-image: url('../Icons/ui/ux2/appbar-clipboard-variant-text-blue.png');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}

a.action.dropzone-paste:hover {
    background-image: url('../Icons/ui/ux2/appbar-clipboard-variant-text.png');
}


/***
 Offline page
***/
body.offline {
    text-align: center;
    font-size: calc(1.3rem + 0.20vw);
    padding: calc(1.5rem + 0.20vw);
}

body.offline div.dashboard {
    display: flex;
    max-width: 35em;
    margin: auto;
    overflow: hidden;
}

body.offline div.dashboard div {
    flex: 1 1 15rem;
}

body.offline p.message {
    margin-bottom: 1.5em;
    font-size: 1.1rem;
}

body.offline p {
    font-size: 0.8em;
}

body.offline a.action {
    max-width: 100%;
    width: 100%;
    font-size: 0.8em;
    padding: 0.5em;
}

.offline #offline-logo {
    background-image: url(/Static/Images/App/CEDAR_logo_large_white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.offline #offline-logo-badge {

    margin-left: auto;
    margin-right: auto;

    background-color: orange;

    border-radius: 50em;
    border-style: solid;
    border-width: 1.5rem;
    border-color: orange;

    width: 30vw;
    height: 30vw;
    max-height: 128px;
    max-width: 128px;

    cursor: pointer;
    overflow: visible;
}

.offline #offline-logo-badge.online {
    background-color: var(--green);
    border-color: var(--green);
    color: #fff;
}

.offline #offline-logo-loading-bg {
    height: 100%;
    width: 100%;
    overflow: visible;
}

.offline #offline-logo-loading {
    background-image: url(/Static/Images/App/CEDAR_logo_bg_white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    width: 100%;
    height: 100%;
    transform: scale(0);
}

.offline #offline-logo-badge.online.reloading #offline-logo-loading {
    transform: scale(1.3);
}

.offline #offline-logo-badge.check {
    border-color: #ffd800;
}

.offline ul {
    margin: 0;
    padding: 0;
}

.offline ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.offline #message-offline {

}

/*.flash {*/
/*	min-width: 45rem;*/
/*}*/

/*.flash {*/
/*	margin: 0.25rem auto;*/
/*	padding:1rem;*/
/*	border: 2px solid grey;*/
/*	background-color: lightgrey;*/
/*}*/

/*.flash-success {*/
/*	background-color: #d4edda;*/
/*	border-color: #c3e6cb;*/
/*	color: #155724;*/
/*}*/

/*.flash-error {*/
/*	color: #721c24;*/
/*	background-color: #f8d7da;*/
/*	border-color: #f5c6cb;*/
/*}*/

/*.flash-warn {*/
/*	color: #856404;*/
/*	background-color: #fff3cd;*/
/*	border-color: #ffeeba;*/
/*}*/

/*.flash-msg {*/
/*	color: var(--text-dark);*/
/*	background-color: var(--ui-mid);*/
/*	border-color: var(--ui-border);*/
/*}*/

/** Timeline **/

.timeline {
    list-style-type: none;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.timeline::before, .timeline::after {
    content: '';
    margin: auto;
}

.headed_box .timeline {
    overflow: auto;
}

.timeline li {
    transition: all 200ms ease-in;
    white-space: nowrap;
    display: inline;
}

.timestamp {
    margin-bottom: 20px;
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 100;
    font-size: 0.8rem;

}

.status {

    display: flex;
    justify-content: center;
    border-top: 2px solid #D6DCE0;
    position: relative;
    transition: all 200ms ease-in;
}

.timeline .event_title {
    font-weight: 600;
    margin-top: 20px;
    font-size: 0.85em;
}


.timeline .event_title::before {
    content: '';
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 25px;
    border: 1px solid #ddd;
    position: absolute;
    top: -15px;
    left: 42%;
    transition: all 200ms ease-in;
}


.past {
    border-top: 2px solid #66DC71;
    border: none;
    transition: all 200ms ease-in;
    color: #66DC71;
}

.past .event_title::before {
    background-color: #66DC71 !important;
}

.current {
    border-top: 2px solid #8A2BE2;
    border: none;
    transition: all 200ms ease-in;
    color: #8A2BE2;
}

.current .event_title::before {
    background-color: #8A2BE2 !important;
}

.future {
    border-top: 2px solid #C0C0C0;
    border: none;
    transition: all 200ms ease-in;
    color: #C0C0C0;
}

.future .event_title::before {
    background-color: #C0C0C0 !important;
}


/**
 Grouped checkbox option for pastoral log
**/

.headed_box.filters .content div {
    margin-bottom: 0.5em;
}


/**
 Round circle styling used mainly on student summary page
**/
.bubble_container {
    /*  display: flex;
      flex-wrap: wrap;
      align-items: center;*/
    /* justify-content: space-around; */
    margin-bottom: 0.5em;
}

.bubble {
    font-size: 1rem;
    border-radius: 5em;
    min-width: 2.5em;
    min-height: 2.5em;
    width: 2.5em;
    height: 2.5em;
    padding: 0.4em;
    overflow: hidden;
    display: inline-block;
    border: 1px solid #ccc;
    margin: 0.2em;
    text-align: center;
    background-color: #fff;
}

.bubble img {
    margin: 0 auto;
    vertical-align: middle;
}

.bubble .label {
    /* display: inline-block; */
    display: none;
    padding-left: 1em;
    font-size: 0.8em;
    font-weight: bold;
}

.bubble:hover {
    background-color: #7dd566;
    border-color: #fff;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
    padding: 0.2em;
}

.bubble.complete {
    width: inherit;
    font-size: 0.8em;
    background-image: url("../Icons/P/tick.png");
    background-position: 3% 50%;
    background-repeat: no-repeat;
    padding-left: 23px;
}

.bubble.complete:hover {
    padding: 0.4em;
    padding-left: 23px;
}

/**
 Styling for action buttons and action bar
*/
img.actionButton {
    background-color: grey;
    cursor: pointer;
}

img.actionButton.active {
    background-color: #7dd566;
}

div#actionButtons {
    flex: 0 0 5rem;
    padding: 1%;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
}

div#actionPanel {
    position: fixed;
    bottom: 5px;
    right: 15px;
    z-index: 541;
    background: transparent
}

.actionElement {
    bottom: -5rem;
    display: none;
    opacity: 0;
    position: fixed;
    z-index: 540;
    right: 1%;
    box-shadow: 0px 4px 30px -5px #3D3F3C;
    transition-timing-function: ease-out !important;

    width: fit-content !important;
    max-width: 40vw !important;
    max-height: 70vh;
    padding: 0 !important;
    overflow-y: scroll !important;
}

.actionElement > * {
    margin: 0;
}

.actionElement.show {
    bottom: 4.3rem;
    opacity: 1;
}

.ops_page_box_label_date {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.ops_page_box_label_date small {
    flex: 1 0 8em;
    margin-bottom: 0.5em
}

.ops_page_box_label_date div {
    flex: 1 1 3em;
}

.ops_page_box_label_date #occTime {
    flex: 1 1 3em;
    border-left: 1px solid #e6e6e6;
}

.ops_page_breadcrumb_right {
    float: right;
    line-height: 2rem;
    font-size: 0.8rem;
}

#institution img {
    position: absolute;
    z-index: 15;
    max-width: calc(4em + 5vw);
    right: 0.3em;
    bottom: 0em;

    transition-property: right;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

#institution img.header {
    bottom: auto;
    top: 0em;
}

.institution-img-spacer {
    display: flex;
}

.institution-img-spacer > div:nth-child(1) {
    flex-grow: 1;
}

/* Spacer: */
.institution-img-spacer > div:nth-child(2) {
    max-width: calc(4em + 5vw);
    width: 100%;
    height: 1px;
}

/* If the content is a header, then avoid top margins */
.institution-img-spacer > div:nth-child(1) > h1:nth-child(1),
.institution-img-spacer > div:nth-child(1) > h2:nth-child(1),
.institution-img-spacer > div:nth-child(1) > h3:nth-child(1) {
    margin-top: 0;
}

.interviewer {
    width: 5em;
    max-width: 5em;
    display: inline-table;
}

.interviewer tr:first-child td {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 5em;
}

#applicant_interviewers > div {
    padding: 1em;
}

/**
	MIS Learner Agreement
**/

.mis-agreement {
    max-width: 50em;
}

.mis-agreement > .wrapper {
    padding: 1em;
}

.mis-agreement .header {
    width: 100%;
    text-align: center;
}

.mis-agreement .body > * {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mis-agreement .body h2 {
    padding-bottom: 0.5em;
    border-color: var(--purple);
    border-bottom: solid 2px;
}

.mis-agreement .body .stu-details {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.mis-agreement .body .stu-details .property-table {
    flex: 1;
    min-width: 15rem;
    margin: 0.3em 1em;
    width: auto;
}

.mis-agreement .body .stu-programme .property-table {
    width: 70%;
    margin-top: 0.8em;
    margin-left: auto; /* Align the table to the right */
}

.mis-agreement .body .stu-programme .property-table td:nth-child(2) {
    width: 25%;
}

.mis-agreement .controls .action {
    margin-left: 0.5em;
}

.ops_text_small p, .ops_text_small ul {
    font-size: 0.75em;
}

/**
	Pastoral: Student Monitoring
	content
**/

/** Content & Attributes (top) Row: **/

.student_monitoring .ops_threadview_post_content,
table:not(.mceToolbar).ops_threadview_thread_table tr.student_monitoring td.ops_threadview_post_content {

    position: relative;
    vertical-align: top;
}

.student_monitoring .ops_threadview_post_options {
    position: absolute;
    bottom: 0.2em;
    right: 0.8em;
}

.student_monitoring .stumon_summary {
    margin-bottom: 3rem;
}

td.student_monitoring_properties,
table:not(.mceToolbar).ops_threadview_thread_table tr.student_monitoring td.student_monitoring_properties {
    min-width: calc(5rem + 10vw);
    vertical-align: top;
}

table.ops_threadview_thread_table tr th span:first-letter {
    text-transform: uppercase !important;
}

td.student_monitoring_properties > h3:first-child {
    margin-top: 0.2em;
}

td.student_monitoring_properties > h3 {
    margin-top: 1em;
    margin-bottom: 0.1em;
}

.student_monitoring .student_monitoring_properties h3 {
    margin-top: 0;
}

.student_monitoring .student_monitoring_properties ul {
    margin-left: 0;
}

/** 'Add Review' Row **/

.student_monitoring_add_review .action {
    float: right;
}

/**
	Homepage Customisation
**/
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-11 {
    order: 11;
}

.order-12 {
    order: 12;
}

.order-13 {
    order: 13;
}

.order-14 {
    order: 14;
}

.order-15 {
    order: 15;
}


/**
	Exams Results page
**/
.results-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.results-footer-link {
    font-size: 0.8rem;
}

.results-footer-link,
.results-footer-link a {
    color: #8b8b8b !important;
}

.no-results {
    margin-top: 35px;
}

/**
  Exams ResultCard
**/

.result-card {
    padding: 0.7em;
    margin: 0em 1em 1em 1em;
    flex-grow: 1;
    width: 100%;
    font-size: 0.9em;
}

.result-card .ops_threadview_post_meta {
    width: 50%;
}

.result-card .ops_threadview_post_content {
    width: 50%;
}

/* Result Card Title / Header: */

.result-card .chevron {
    margin-left: 0.6em;
    margin-right: 0.4em;
    transition: .2s ease-in-out;
}

.result-card:not(.has-results, .has-content) .chevron {
    color: lightgray;
}

.result-card.expanded .chevron {
    transform: rotate(135deg);
}

.result-card > .header {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.result-card > .header .title-wrapper {
    display: inline-block;
    margin-right: 0.6em;
    margin-left: 0.2em;
    overflow: hidden; /* Necessary on IE11 */
}

.result-card > .header .title span,
.result-card > .header .title::after {
    font-size: 1.3em;
    line-height: 1.2;
}

.result-card:not(.expanded) > .header .title span {
    word-break: break-all;
    text-align: justify;
}


.result-card > .header .grade-wrapper {
    line-height: 0.9;
    text-align: right;
    margin-left: auto;
    margin-right: 0.4em;
    white-space: nowrap;
}

.result-card > .header .grade {
    font-size: 1.9em;
    line-height: 1.5;
    padding: 0 0.25em;
    box-shadow: 1px 1px 2px #d4c2c2;
}

.result-card > .header .marks {
    margin-top: 0.2em;
    display: block; /* Ensure this sits below the grade */
    /* Center the marks below the .grade box: */
    width: 100%;
    text-align: center;
    font-size: 1.2em;
}

/* Shrink the .marks font if a grade exists: */
.result-card > .header .grade ~ .marks {
    font-size: 1em;
}

.result-card .title {
    overflow: hidden;
    display: flex; /* Needed to correctly layout the ::after ellipsis. */
    margin-bottom: 0.3em;
}

/* Only apply the ellipsis if the `.overflowing` is set */
.result-card .title.overflowing::after {
    /*transition: all 0.5s linear;*/
    content: '...';
    opacity: 1;
}

.result-card.expanded .title.overflowing::after {
    /*transition: all 0.5s linear;*/
    opacity: 0;
}

/* Sliding transition for Title: */
.result-card.expanded .title {
    max-height: 1000px; /* Arbitrary max height limit to provide slide transition. */
    transition: max-height 1s ease-in-out;
}

.result-card:not(.expanded) .title {
    max-height: 1.4em;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

/* Result Card Content: */

.result-card > .content {
    overflow: hidden;
}

/* Sliding transition for Content. */
/* See https://stackoverflow.com/a/39103740 */
.result-card.expanded > .content {
    max-height: 1000px; /* Arbitrary max height limit to provide slide transition. */
    transition: max-height 1s ease-in-out;
}

.result-card:not(.expanded) > .content {
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

/* Margins must be used here instead of .content padding.
   This is because padding causes overflowing/collapsed content to be slightly visible, when it should be hidden.
 */
.result-card > .content > * {
    margin: 1em 0.5em 0.5em;
}

/* Ensure the result datagrid is using em (inherited font): */
.result-card > .content table.datagrid {
    font-size: 0.8em;
}

/* Results Toggle */

#results-toggle {
    display: inline-block;
    width: 100%; /* Only applicable to smartphones. Wider displays will set this to `auto`. */
}

#results-toggle .message {
    margin: 20px 0 0 0;
}

#results-toggle a {
    font-size: 1em;
    opacity: 0.85;
    width: 9em;
}

.certificate-notice, .destination-form {
    margin-top: 1.5em;
}

.back.action {
    margin-bottom: 1em;
}

.action.print-button:hover {
    /* Hide box-shadow as it can sometimes show in the print preview. */
    box-shadow: none;
}

#ops_Form__cap-results-overview-table .table-container {
    background-color: rgb(238, 238, 238);
    padding: 5px;
}

/** UCAS **/
.form select.ucas-template-dropdown {
    max-width: calc(100% - 15rem);
    margin-left: 0.5rem;
}

.form textarea.ucas-template-preview {
    color: var(--text-light);
    border-color: var(--form-element-border);
}

/** CAP Results Overall Table **/

#cap-results-overview-table {
    --outline-color: var(--green);
}

#ops_Form__cap-results-overview-table .table-container {
    padding-top: 5px;
    padding-bottom: 5px;
}

#cap-results-overview-table * {
    position: relative;
}

#cap-results-overview-table :is(td, th):first-child {
    min-width: 150px;
    padding: 10px;
}

#cap-results-overview-table :is(td, th):not(:first-child) {
    min-width: 230px;
}

/** Top **/

#cap-results-overview-table th {
    position: absolute;
    z-index: 1;
}

#cap-results-overview-table th:not(:first-child) {
    cursor: default;
}

#cap-results-overview-table th:nth-child(1) {
    z-index: 10;
}

#cap-results-overview-table th:nth-child(3) {
    right: -5px;
    width: calc(100% - 5px);
}

#cap-results-overview-table th:nth-child(2) > * {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    z-index: 500;
    background-color: rgb(238, 238, 238);
}

#cap-results-overview-table th:nth-child(2)::before {
    top: -5px;
    right: -5px;
    content: '';
    position: absolute;
    height: 5px;
    width: calc(100% + 10px);
    background-color: var(--outline-color);
    z-index: 1;
}

#cap-results-overview-table th:nth-child(1)::before {
    right: -3.1rem;
    top: 0;
}

/** "Latest" Highlighting: **/
:is(.cap-result-card--latest, #cap-results-overview-table th:nth-child(1))::before {
    content: 'Latest';
    position: absolute;
    background-color: var(--green);
    color: var(--text-white);
    border-bottom-right-radius: 5px;
    padding-top: 0;
    padding-bottom: 0.1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    z-index: 400;
}

.cap-result-card--latest {
    outline: 4px solid var(--green);
    padding-top: 1.2em;
}

.cap-result-card--latest::before {
    left: 0;
    top: -2px;
    padding: 0 0.5rem;
    z-index: 400;
}


/** Middle **/
#cap-results-overview-table :is(td, th):is(:nth-child(1), :nth-child(2))::after {
    content: '';
    position: absolute;
    top: -5px;
    height: calc(100% + 10px);
    width: 5px;
    background-color: var(--outline-color);
    z-index: 100;
    right: -5px;
}

#cap-results-overview-table :is(td, th):nth-child(1)::after {
    right: 0 !important;
}


/** Bottom **/
#cap-results-overview-table tr:last-child td:nth-child(2)::before {
    bottom: -5px;
    right: -5px;
    content: '';
    position: absolute;
    height: 5px;
    width: calc(100% + 10px);
    background-color: var(--outline-color);
    z-index: 100;
}

/** CAP results "Glance" view **/

.cap-results-glance {
    text-align: center;
    margin-bottom: 10px;
}

.cap-results-glance > .cap-results-glance__header {
    font-weight: bold;
}

.cap-result {
    display: inline-block;
    width: max-content;
    margin-right: 0.25rem;
}

.cap-result > span[title] {
    cursor: help;
}

.cap-result > div { /** Result Grade **/
    display: inline-block;
    border-radius: 0.3em;
    padding: 0.3em 0.8em;
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--ui-dark);
}

.cap-result--on-target > div {
    background-color: var(--green);
    color: var(--text-white);
}

.cap-result--below-target > div {
    background-color: var(--red);
    color: var(--text-white);
}

/** Registers (e.g. DynamicRegister component & friends) **/
td.register-mark-cell {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

td.register-mark-cell input:read-only {
    background-color: var(--ui-white);
    cursor: pointer;
}

.datagrid.min-width-25 {
    min-width: 25em;
}

div.force-slim-28 {
    max-width: 28em;
}

div.dynamic-register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

div.dynamic-register-container div.datagrid-container {
    max-width: 100%;
    flex: 1;
}

div.dynamic-register-selector {
    flex-basis: 100%;
    max-width: 400px;
}


/**
	Touchscreens devices:
**/
@media (hover: none) and (pointer: coarse) {

    /* Disable hover color changes. This distorts the button on touchscreen devices. */
    #results-toggle a:hover {
        background-color: inherit;
        border-color: inherit;
        color: inherit;
    }
}

/**
	Responsive break-points.
	Defines rules for wide displays.
**/
@media only screen and ( max-width: 600px ) {

    #content_wrapper {
        padding: 0;
    }

    #content > form {
        max-width: none;
        overflow: visible;
    }

    .g-recaptcha {
        transform: scale(0.77);
        transform-origin: 0 0;
    }

    #content.container {
        padding: 0 10px 10px 10px;
    }

    .form input[type=text], .form input[type=search], .form input[type=password], .form input[type=email], .form input[type=number], .form select, .form textarea {
        width: 80%
    }

    td > .select2-container {
        max-width: 80% !important;
    }

    .datagrid_cell > .select2 {
        min-width: 14rem;
    }

    .ops_datagrid_cell_squeeze span.select2-container {
        margin: 0.2rem;
        padding-right: 0.2rem
    }

	#ops_Form__destinations input[type=radio] {
		width: 1.8rem;
		height: 1.8rem;
	}
	#ops_Form__destinations .ops_form_element_radiobuttons label {
		display: block;
		margin-bottom: 0.5rem;
	}
}

/* 768px - "Medium" breakpoint (tablets, desktops etc) */
@media screen and ( min-width: 768px ) {

    /* Tablet portrait */
    #title img {
        max-width: 7rem;
        margin: 1rem 0.2rem 1rem 1rem;
    }

    h1 {
        letter-spacing: -0.05em;
        font-size: 2.4rem;
        line-height: 1.25;
        margin: 0.75em auto;
    }

    h2 {
        font-size: 1.8rem;
        line-height: 0.8333;
        margin-top: 1.1em;
        margin-bottom: 0.566em;
    }

    h3, .headed_box .content h3, .panel h3 {
        font-size: 1.2rem;
        line-height: 1.25;
        margin-top: 1.8em;
        margin-bottom: 0.7em;
    }

    h4 {
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 2.2em;
        margin-bottom: 0.8em;
    }

    h5 {
        font-size: 0.8rem;
        line-height: 1.875;
        margin-top: 2.8em;
        margin-bottom: 0.95em;
    }

    h1.welcome {
        font-size: 3.6rem;
        line-height: 1;
        margin: 0.45em auto 0.65em auto;
    }

    .nudgeright, .slideright {
        /*	margin-left: 0rem;*/
    }

    .nowrap-desktop {
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    #topbar .links a:not(#link_impersonate) {
        width: 5.5rem;
    }

    #topbar .links a#link_home {
        width: 5.4rem;
    }

    #topbar .links a#link_escalate {
        width: 5.8rem;
        background-position-x: -5px;
    }

    #topbar .links a:not(#link_impersonate)#link_escalate span {
        margin-left: 0.1rem;
    }

    #topbar .links a:not(#link_impersonate) span {
        display: inline;
        margin-left: 0.5rem;
    }

    #topbar .links a:not(:hover, #link_impersonate) span {
        color: var(--green);
    }

    #topbar .links #link_impersonate {
        margin-left: 0.2rem;
    }

    #topbar > #search {
        position: relative;
        /*background-color:rgba( 200,200,200,0 ) ;*/
        top: auto;
        right: auto;
        padding: 0;
        display: block;
        margin-left: 5.5rem; /* Avoid clipping with "Back" button. */
    }

    #topbar > div#site-back:is(:hover, :not(:hover)) {
        background-image: url('../Icons/ui/ux2/appbar-chevron-left-ux3-green.png');
        width: 5rem;
        left: 5rem;
        background-color: unset;
        color: var(--green);
    }

    #topbar > div#site-back:hover {
        background-image: url('../Icons/ui/ux2/appbar-chevron-left.png');
        background-color: var(--green);
        color: var(--text-white);
    }

    #topbar div#site-back span {
        display: inline;
        margin-right: 0.3em;
    }

    #topbar div#site-back:hover span {
        display: inline;
    }

    #topbar > #search input:is([type=text], [type=search]):focus {
        box-shadow: 0px 0px 0px 4px rgba(65, 182, 73, 1);
    }

    #topbar > #search input:is([type=text], [type=search]) {
        border-width: 1px;
        box-shadow: 0px 0px 1px 1px rgba(65, 182, 73, 0);
    }

    #topbar .links #link_search {
        display: none;
    }

    #topbar > #search > input:nth-child(1) {
        visibility: visible;
        width: 2.6em;
    }

    #topbar > #search input:nth-child(3), #topbar > #search div.navigation {
        display: none;
    }

    #ops_page_livesearch {
        margin-right: 5.1rem;
    }

    #menu {
        max-height: 100vh;
        width: 4.2rem; /* @navigation_width */
        /* padding-top: 2.75rem ; /* @navigation-padding-top */
        z-index: 545;
    }

    #menu span {
        opacity: 0;
    }

    /*#menu:hover, */
    #menu.expanded {
        width: 30rem;
        box-shadow: var(--button-shadow);
    }

    #menu h2, #menu.expanded h2 {
        padding-top: 0.7em;
        /* padding-bottom: 0.7em; */
    }

    #menu dt.group:not(.expanded) {
        background-image: none;
    }

    #content_wrapper {
        padding-left: 5.5rem;
    }

    .no_nav #content_wrapper {
        padding-left: 3rem;
    }

    #content {
        width: calc(100vw - 8.5rem);
    }

    form.wide table.form {
        min-width: 35rem;
    }

    form.wider table.form {
        min-width: 45rem;
    }

    form.widest table.form {
        min-width: 55rem;
    }

    /* Fixed width for a form on wider displays. Useful for e.g. dynamically visible elements, to prevent
	   sudden width changes */
    form.rigid table.form {
        width: 50em !important;
    }

    form.rigid table.form tr > td:first-child {
        width: 10em !important;
    }

    .pins.minimal {
        right: 0rem;
        top: 0rem;
        max-width: 90vw;
        margin: 0;
        background-color: transparent;
        position: relative;
        padding-left: 1em;
    }

    div.dashboard > div, div.dashboard > div.headed_box {
        flex-basis: 25rem;
    }

    .headed_box.wide, div.dashboard > div.headed_box.wide {
        flex: 2 1 35rem;
    }

    .headed_box.wider, div.dashboard > div.headed_box.wider {
        flex: 3 1 35rem;
        min-width: 50vw;
    }

    .headed_box.widest, div.dashboard > div.headed_box.widest {
        flex: 4 1 35rem;
        min-width: 50vw;
    }

    div.dashboard {
        column-gap: 1.5em;
        justify-content: space-around;
    }

    div.dashboard > div.slim {
        flex: 0 1 25rem;
    }

    div.dashboard > div.narrow {
        flex: 1 1 15rem;
    }

    div.dashboard > div.content_sized {
        flex: 0 1 auto;
        min-width: 25rem;
    }

    .learner_support_content dd {
    }

    .learner_support_content dd a {

    }

    a.hide-when-wide, span.hide-when-wide, td.hide-when-wide, th.hide-when-wide {
        display: none;
    }

    .hide-when-slim {
        max-height: inherit;
    }

    a.hide-when-slim, span.hide-when-slim {
        display: inline;
    }

    td.hide-when-slim, th.hide-when-slim {
        display: table-cell;
    }

    .headed_box.short, .panel.short, .headed_box.small, .panel.small {
        vertical-align: top;
        align-self: flex-start;
    }

    .small:is(.headed_box, .panel, .table-container, .property-table) {
        max-width: 25rem;
    }

    .medium:is(.headed_box, .panel, .table-container, .property-table) {
        max-width: 45rem;
    }

    .large:is(.headed_box, .panel, .table-container, .property-table) {
        max-width: 65rem;
    }

    .meter {
        font-size: 1em;
    }

    .meter_column p {
        font-size: 5em;
    }

    .message.flash {
        /* Improve centering (adjust width for left menu). */
        position: relative;
        left: -4.2rem;
    }

    /**
		Dropzone (wider-display)
	**/
    .dropzone-readonly.wide > .dz-message > span {
        min-width: 15em;
    }

    .headed_box > div:not(.headed_box, .content_compact),
    .headed_box > form, .box:not(.spaced) {
        padding: 0.6em 0.9em;
    }

    /**
		Exams ResultCard (wider-display):
	**/
    .result-card {
        max-width: 25em;
    }

    #results-toggle {
        width: auto;
    }

    #results-toggle .message {
        width: 100%;
    }

    /** ADMIN **/
    #admin_dashboard {
        justify-content: flex-start;
    }
}

/* datagrid */

.hoverable:hover .hidden {
    display: block !important;
}

/**
	Rules for even wider displays.
**/
@media screen and (min-width: 1024px) {
    /* Desktop landscape */
    /* some CSS here */
}

@media not print {
    .print-only {
        display: none !important;
    }
}

/*
 *
 */
.select2-container,
.select2-selection {
    width: 100% !important;
}

.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: var(--green);
}

.button-error {
    background: var(--red);
}

.button-warning {
    background: var(--orange);
}

.button-secondary {
    background: var(--blue);
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge:empty {
    display: none;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
}

.badge-success[href]:hover,
.badge-success[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #1e7e34;
}

.badge-info {
    color: #fff;
    background-color: #17a2b8;
}

.badge-info[href]:hover,
.badge-info[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #117a8b;
}

.badge-warning {
    color: #212529;
    background-color: #ffc107;
}

.badge-warning[href]:hover,
.badge-warning[href]:focus {
    color: #212529;
    text-decoration: none;
    background-color: #d39e00;
}

.badge-danger {
    color: #fff;
    background-color: #dc3545;
}

.badge-danger[href]:hover,
.badge-danger[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #bd2130;
}

.pointer {
    cursor: pointer;
}

.learner-support-tooltip {
    float: left;
    margin: 0 4px;
}

.link-no-style {
    text-decoration: none;
}

/* Tippy Tooltips - custom theme */
.tippy-tooltip {
    padding: 0 !important;
}

.tippy-header {
    padding: .5rem;
    width: 100%;
    margin: 0;
    display: block;
    color: var(--text-black) !important;
    background: var(--yellow) !important;
    border: 1px solid var(--yellow);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tippy-inner-content {
    padding: .5rem;
}

.tippy-inner-content p {
    margin-bottom: 0.5em;
}

.tippy-inner-content p:last-child {
    margin-bottom: 0.1em;
}

.tippy-box {
    box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.33) !important;
    background: #fff;
    border-radius: 5px;
}

.tippy-content {
    border-radius: 5px;
    padding: 0 !important;
    background: #fff;
    color: #333 !important;
}

.tippy-arrow {
    background: #fff !important;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.13) !important;
}

#capability_checks {
    display: inline-block;
    height: 1.5rem;
    background-image: url('../Icons/ui/ux2/appbar-tools-ux3-green.png');
    background-position: left center;
    background-size: contain;
    margin: 0.25rem;
    font-size: 1rem;
    float: left;
    text-align: center;
    color: var(--green);
}

#capability_checks:hover {
    background-image: url('../Icons/ui/ux2/appbar-tools.png');
}

/* Menu Icon Sprites */
.menu_icon {
    display: inline-block;
    background-color: inherit !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: hidden;
}

:is(#menu a:hover, body:not(.is-mobile-device) #menu dt.selected-item-cursor, #menu dt.current:not(.group)) .menu_icon {
    background-blend-mode: difference;
    mix-blend-mode: luminosity;
}

/* See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links */
a.skip-link {
    position: absolute;
    background-color: var(--green);
    color: white;
    top: -3rem;
}

a.skip-link:focus {
    top: 0;
    z-index: 1000;
}

.gradient-accordion.collapsed {
    position: relative;
    max-height: max(20vh, 200px);
    overflow: clip;
}

.gradient-accordion.collapsed > * {
    overflow: hidden !important;
}

.gradient-accordion.collapsed::before {
    /* Gradient background (white to transparent) */
    background: linear-gradient(to top, white, transparent);
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    cursor: pointer;
    z-index: 299;
}

.gradient-accordion.collapsed::after {
    content: "\25BC"; /* Unicode for down-pointing triangle */
    font-size: 20px;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) scaleX(2.5);
    color: black;
    opacity: 0.5;
    transition-property: opacity;
    transition-duration: 0.4s;
    cursor: pointer;
    z-index: 299;
}

.gradient-accordion.collapsed:hover::after {
    opacity: 0.8;
    z-index: 299;
}


/* Utility Classes: */

.mb05 {
    margin-bottom: 0.5rem !important;
}

.mt05 {
    margin-top: 0.5rem !important;
}

.mb1 {
    margin-bottom: 1rem !important;
}

.mt1 {
    margin-top: 1rem !important;
}

.mb2 {
    margin-bottom: 2rem !important;
}

.mt2 {
    margin-top: 2rem !important;
}

.mb3 {
    margin-bottom: 3rem !important;
}

.mt3 {
    margin-top: 3rem !important;
}

.mauto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.grayscale {
    filter: grayscale(100%);
}

.text-black {
    color: var(--text-dark) !important;
}

.text-dark {
    color: var(--text-dark) !important;
}

.text-light {
    color: var(--text-light) !important;
}

.flex-basis-35 {
    flex-basis: 35rem !important;
}

.flex-basis-45 {
    flex-basis: 45rem !important;
}

.flex-basis-55 {
    flex-basis: 55rem !important;
}

.w-fit-content {
    width: fit-content !important;
}

.text-style-error {
    background: var(--red);
    color: var(--text-white)
}

.text-style-warn {
    background: var(--yellow);
    color: var(--text-black)
}

.text-style-success {
    background: var(--green);
    color: var(--text-white)
}

.col-width-15 {
    width: 15%;
}

.unset-margin {
    margin: unset !important;
}

.mini-profile {
    max-width: 12rem;
    padding: 0.8rem 0.5rem 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 6rem;

    > img.photo {
        border-radius: 0.5rem;
        box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
        margin-bottom: 0.25rem;
        width: 4rem;
    }
    > div {
        text-align: center;
        p {
            margin-bottom: 0.3rem;
            line-height: 1.1;
        }
        p.name {
            font-size: 1rem;
            margin-bottom: 0.2rem;
        }
        p.reference {
            font-size: 0.75rem;
            margin-bottom: 0.1rem;
        }
        p.pronouns {
            font-size: 0.75rem;
            margin-bottom: 0.2rem;
            font-style: italic;
            color: var(--text-dark);
            margin-top: 0.3rem;
        }
        div.callout-wrapper {
            text-align: start;
            margin-left: auto;
            margin-top: 0.6rem;
            width: max-content;
            margin-right: auto;
            max-width: 7rem;
            margin-bottom: 0.2rem;

            > div {
                img.icon {
                    position: relative;
                    font-size: 0.5rem;
                    top: -0.1rem;
                }
                line-height: 1;
                font-size: 0.75rem;
                font-weight: bold;
                font-style: italic;
                margin-left: auto;
                /* text-align: center; */
                max-width: max-content;
                margin-right: auto;
                margin-top: 0.3rem;
                text-align: center;
            }

        }
    }
}
