﻿/********************************************************************************/
/*	Custom Bootstrap
/********************************************************************************/
.mceEditor {
    visibility: hidden;
}

* {
    font-family: 'Open Sans', Helvetica, Sans-Serif;
}

html {
    height: 100%;
    font-size: 62.5%;
    background: none;
    background-color: #e3e3e3;
}

body {
    color: #161616;
    font-size: 1.3rem;
    line-height: 1.42857; /* taken from the flamestrap line-height-base variable */
    font-weight: 400;
    margin: 0px;
    padding: 0;
    position: relative;
    min-width: 300px;
    background: #e3e3e3;
}

@media (prefers-reduced-motion: no-preference) {
    body {
        scroll-behavior: smooth;
    }
}

.small-screen-only {
    display: none;
}

@media (max-width: 1300px) {
    .small-screen-only {
        display: initial;
    }

    .large-screen-only {
        display: none;
    }
}

input, textarea {
    font-size: small;
}

input[type=text]::-ms-clear, input[type=password]::-ms-reveal {
    display: none;
}


ul {
    list-style: none;
    padding: 0px;
}

ul li {
    margin-bottom: 3px;
}

/********************************************************************************/
/*	Header
/********************************************************************************/
.products-menu {
    display: table;
    height: 55px;
    float: left;
}

.products-menu__item {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    padding: 0;
    border-right: 1px solid #5b676b;
    background: 0 0;
    transition: background .23s cubic-bezier(.215,.61,.355,1);
}

    .products-menu__item::after {
        display: none;
        content: " ";
        position: absolute;
        bottom: 1px;
        width: 80%;
        margin-left: 10%;
        height: 3px;
        left: 0;
        background-color: transparent;
    }

    .products-menu__item.plus::after {
        background-color: #78952c;
    }

    .products-menu__item.atlas::after {
        background-color: #0088ce;
    }

    .products-menu__item.admissions::after {
        background-color: #8565ac;
    }

    .products-menu__item.active {
        background: rgba(0, 0, 0, 0.2);
    }

        .products-menu__item.active::after {
            display: block;
        }

    .products-menu__item:hover, .tools-sub-section > a:hover {
        background: rgba(255,255,255,.05);
    }

.products-menu .icon-logo {
    height: 25px;
    padding: 0 15px;
}

#header {
    padding: 0 !important;
    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.4);
    height: 55px;
    background-color: #474d55;
    border-bottom: 1px solid #5b676b;
    margin: 0;
    color: #ffffff;
    width: 100%;
}

    #header > .page {
        height: 55px;
        border-left: 1px solid #5b676b;
        border-right: 1px solid #5b676b;
        padding: 0;
    }

.name-tag {
    padding-right: 15px;
    line-height: 45px;
    float: right;
}

.tools-section {
    display: table;
    position: relative;
    z-index: 1;
    float: right;
}

.tools-sub-section {
    display: table-cell;
}

.tools-sub-section > a {
    display: block;
    padding: 0;
    border-left: 1px solid #5b676b;
}

.tools-sub-section > a > img {
    height: 25px;
    padding: 15px;
}

.tile-header {
    background-color: #474d55;
    padding: 10px;
    color: #FFFFFF;
    font-size: 1.7rem;
    margin: 2rem 0 0 0;
}

/********************************************************************************/
/*	Page Layout
/********************************************************************************/
.page {
    min-width: 960px;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
}

    .page.body-footer {
        padding-bottom: 20px;
    }

div#title {
    display: block;
}

.content {
    border: 1px solid rgba(0, 0, 0, .2);
    background-color: #f7f7f7;
    margin-top: 20px;
}

.content-inner {
    padding: 20px 10px 10px 10px;
}

.content-title {
    background: #474d55;
    border-bottom: 1px solid #5b676b;
    border-radius: 0;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
}

/********************************************************************************/
/*	Typography
/********************************************************************************/

h1, h2, h3 {
    font-family: inherit;
    line-height: 1.1;
    margin: 0;
    font-weight: 400;
    font-size: 2.2rem;
    letter-spacing: -0.5px;
}

h3 {
    font-size: 1.4rem;
}

p {
    margin: 8px 0px;
}

.ui-dialog .ui-dialog-title {
    font-size: 1.6rem;
}

.empty-text-data {
    font-size: 1.2rem;
    font-style: normal;
}

.subtle-message {
    color: #4f5a65; /* taken from the flamestrap grey-text-for-white-background */
    text-align: center;
    font-style: italic;
}

.subtle-message-left {
    color: #4f5a65; /* taken from the flamestrap grey-text-for-white-background */
    font-style: italic;
}
/********************************************************************************/
/*	Links
/********************************************************************************/
a:link {
    color: var(--colour-link-default);
    text-decoration: none;
}

a:visited {
    color: var(--colour-link-visited);
    text-decoration: none;
}

a:active {
    color: var(--colour-link-active);
    text-decoration: underline;
}

a:hover {
    color: var(--colour-link-hover);
    text-decoration: underline;
}

a[disabled] {
    pointer-events: none;
}

a img {
    border: 0;
}

a.number-icon-link {
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

    a.number-icon-link:hover {
        text-decoration: none;
        border-bottom: 1px solid #0566a9;
    }

    a.number-icon-link > img {
        margin: 0px;
        padding: 0 0 0 3px;
    }

a.region-header, a.workspace-header {
    text-decoration: underline;
    font-weight: 400;
}

/********************************************************************************/
/*	Data Tables																	*/
/********************************************************************************/
table {
    border-collapse: collapse;
}

    table td {
        padding: 5px;
    }
        table td.important-column {
            width: 95%;
        }
        table td.meta {
            font-size: var(--font-size-meta);
            color: var(--colour-supporting-text-on-primary-base);
            text-transform: uppercase;
        }

.fixed {
    table-layout: fixed;
}

table.data {
    color: #161616;
    border: 1px solid #bcbcbc;
    border-collapse: collapse;
    width: 100%;
    word-wrap: break-word;
}

    table.data th:not(:first-of-type), table.data td:not(:first-of-type) {
        border-left: 0;
    }

    table.data th:not(:last-of-type), table.data td:not(:last-of-type) {
        border-right: 0;
    }

    table.data.scrollable-table__table {
        border: 0;
    }

    table.data td {
        padding: 10px;
        border-bottom: 0.2rem solid var(--colour-border-subtle);
    }

    table.data tbody tr:not(.table-header) {
        background-color: #FFFFFF;
    }

        table.data tbody tr:hover > td.default-role, table.data tbody tr td.default-role {
            background-color: #e9f5f8;
        }

        table.data tbody tr p.deleted-user {
            color: #A71010;
            font-size: 0.7rem;
            margin: 2px 0;
        }

        table.data tbody tr.selected .unselect-button {
            display: block;
        }

        table.data tbody tr .unselect-button {
            display: none;
        }

        table.data tbody tr.selected .select-button {
            display: none;
        }

        table.data tbody tr.unselected {
            opacity: 0.4;
            display: none;
        }

        table.data tbody tr:last-of-type td {
            border-bottom: 0;
        }

    table.data thead {
        border-bottom: 0.1rem solid var(--colour-border);
        background-color: var(--colour-highlighted-region-background-standout);
    }

    table.data thead th.hidden { /* for things like an overflow menu */
        visibility: hidden;
        font-size: xx-small;
        text-align: center;
    }

    table.data thead tr th {
        color: var(--colour-text-on-primary-base);
        border-bottom: none;
        font-weight: 600;
        font-size: 1.4rem;
        padding: 1rem 0 1rem 1.5rem;
        text-align: left;
        letter-spacing: normal;
    }

        table.data thead tr th:last-of-type {
            padding-right: 1rem;
        }

        table.data thead tr th a {
            color: #161616;
            text-decoration: underline;
        }


            table.data thead tr th a:hover {
                text-decoration: none;
            }

    table.data thead tr.no-background th {
        border: none;
        background: none;
        filter: none;
        color: #999;
    }

    table.data thead th.select-button-column {
        width: 92px;
    }

    table.data tbody tr td.type, table.data thead tr th.type {
        width: 65px;
        text-align: center;
    }

    table.data tbody tr td.checkbox, table.data thead tr th.checkbox {
        padding: 0px;
        text-align: center;
        vertical-align: middle;
        width: 35px;
    }

    /*  The select-all for these tables sits above the table rather than in this column's header,
        so the column carries a visible name and needs the room for it.  */
    table.data.data--select-column tbody tr td.checkbox, table.data.data--select-column thead tr th.checkbox {
        width: 6rem;
    }

    table.data tbody tr td.button-icon, table.data thead tr th.button-icon {
        text-align: center;
        vertical-align: middle;
        width: 44px; /* because the buttons now have +3px padding */
    }

    table.data tbody tr td.icon, table.data thead tr th.icon {
        padding: 5px;
        text-align: center;
        vertical-align: middle;
        width: 35px;
    }

    table.data tbody tr td.profile-image, table.data thead th.profile-image {
        padding: 3px;
        text-align: center;
        vertical-align: middle;
        width: 32px;
    }

        table.data tbody tr td.profile-image img, table.data thead th.profile-image img {
            max-width: 32px;
            max-height: 32px;
            vertical-align: middle;
        }

    table.data tbody tr td span.centred-cell {
        display: flex;
        justify-content: center;
    }

th.large-cell {
    width: 20%;
}

th.medium-cell {
    width: 15%;
    max-width: 150px;
}

table.workspaces .title {
    max-width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.workspaces .status-col {
    width: 80px;
}

table.workspaces .role-col {
    width: 120px;
}

table.workspaces .has-mitted-col {
    text-align: center;
}

table.workspaces td img {
    padding-right: 5px;
    vertical-align: text-bottom;
}

td.action-container > a, td > a.action-button, td > a.action-button-disabled {
    margin: 0;
}

td.action-container > a:last-of-type {
    margin-right: 0;
}

.role-management__row-header {
    width: 200px;
    color: var(--colour-text-on-primary-base);
    font-weight: 400;
    border: 0.2rem solid var(--colour-border-subtle);
    border-right: 0;
    border-left: 0;
    padding: 1rem;
    text-align: left;
}
  
tr:first-of-type .role-management__row-header {
    border-top: 0;
}

tr:last-of-type .role-management__row-header {
    border-bottom: 0;
}

    .role-management__row-header--first {
        border-left: var(--layout-border-thickness-default) solid var(--colour-border);
    }

table.data td.role-management__row-header--border-right,
table.data th.role-management__row-header--border-right {
    border-right: var(--layout-border-thickness-default) solid var(--colour-border);
}

table.data thead tr th.role-management__role-header {
    width: 80px;
    text-align: center;
    border: none;
    color: var(--colour-text-on-primary-base);
}

table.data thead tr.no-background th.role-management__role-header--text-col{
    text-align: left;
    width: auto;
}

table.data tbody tr td.role-management__role-cell,
table.data thead tr th.role-management__role-cell {
    width: 80px;
    text-align: center;
}

.role-management__reset {
    margin-top: var(--layout-margin-between-text-content);
}

.role-management__reset--right {
    text-align: right;
}

.role-management__reset--left {
    text-align: left;
}


table.data tbody tr td.role-management__role-cell,
table.data thead tr th.role-management__role-cell {
    width: 80px;
    text-align: center;
}

.role-management__reset {
    margin-top: var(--layout-margin-between-text-content);
}

.role-management__reset--right {
    text-align: right;
}

.role-management__reset--left {
    text-align: left;
}

.scrollable-table__container {
    overflow: auto;
    border: 0.1rem solid var(--colour-border);
}

.scrollable-table__table {
    min-width: 1000px
}

.table-select-all {
    display: inline-flex;
    align-items: center;
    gap: var(--layout-margin-between-text-content);
    margin-bottom: 0.5rem;
}

.description-list {
    --description-list-term-col: fit-content(50%);
    --description-list-value-col: 1fr;
    --description-list-width: auto;
    display: grid;
    grid-template-columns: var(--description-list-term-col) var(--description-list-value-col);
    gap: 0.5rem 1rem;
    max-width: min(60rem, 100%);
    margin: 0;
    box-sizing: border-box;
    width: var(--description-list-width);
}

.description-list__term {
    margin: 0;
    font-weight: var(--font-weight-regular);
    overflow-wrap: anywhere;
}

.description-list__value {
    margin: 0;
    overflow-wrap: anywhere;
}

.description-list--bordered {
    /* padding from a cell to the outer border / between rows */
    --description-list-padding: var(--layout-padding-form-container, 1rem);
    /* smaller padding between a term and its value so the pair reads as one unit */
    --description-list-pair-gap: calc(var(--description-list-padding) / 2);
    gap: 0;
    border: var(--layout-border-thickness-default) solid #bcbcbc;
}

.description-list--bordered > dt,
.description-list--bordered > dd {
    padding-block: var(--description-list-padding);
    border-top: var(--layout-border-thickness-default) solid #bcbcbc;
}

/* term (column 1): full padding on the outer edge, tight gap toward its value */
.description-list--bordered > dt {
    padding-inline: var(--description-list-padding) var(--description-list-pair-gap);
}

/* value (column 2): tight gap toward its term, full padding on the outer edge */
.description-list--bordered > dd {
    padding-inline: var(--description-list-pair-gap) var(--description-list-padding);
}

.description-list--bordered > :first-child,
.description-list--bordered > :nth-child(2) {
    border-top: none;
}

/* content-width variant — both columns hug their content and the list shrinks to fit,
   rather than stretching to the reading width with the value column filling */
.description-list--content-width {
    --description-list-term-col: auto;
    --description-list-value-col: auto;
    --description-list-width: max-content;
}

@media (max-width: 479px) {
    .description-list {
        grid-template-columns: 1fr;
        row-gap: 0;
        width: auto;
    }

    .description-list__value {
        margin-bottom: 0.5rem;
    }
    
    .description-list--bordered {
        --description-list-pair-gap: 0;
    }
    
    /* stacked layout: restore full inline padding and move the tight pair
       gap to the vertical axis (term bottom / value top) */
    .description-list--bordered > dt {
        padding-inline: var(--description-list-padding);
        padding-block: var(--description-list-padding) var(--description-list-pair-gap);
    }

    .description-list--bordered > dd {
        padding-inline: var(--description-list-padding);
        padding-block: var(--description-list-pair-gap) var(--description-list-padding);
        border-top: none;
        margin-bottom: 0;
    }
}

.profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2rem;
    margin: 1rem 0;
}

.profile-header__image {
    flex: none;
    max-width: 8rem;
    max-height: 8rem;
}

.profile-header__name {
    align-self: center;
    margin: 0;
    min-width: 0;
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.profile-header > .description-list {
    flex: 1 1 20rem;
    min-width: 0;
}

.description-list__term--warning {
    color: var(--colour-danger);
}


/********************************************************************************************/
/*	Layout Panels																			*/
/********************************************************************************************/

.leftpanel {
    width: 50%;
    float: left;
}

.rightpanel {
    margin-left: 50%;
}

    .rightpanel .margin {
        margin-left: 10px;
    }

.max-width-800 {
    max-width: 800px;
}
/*  Paging styles live in Content/styles/Pagers/ajax-pager.css  */

.embark-breakdown-details {
    margin: 0 0 15px 0;
}

.embark-breakdown-details-item {
    padding-bottom: 10px;
}

    .embark-breakdown-details-item > span {
        vertical-align: middle;
        display: inline-block;
        font-size: 0;
    }

    .embark-breakdown-details-item > a {
        display: inline-block;
        vertical-align: middle;
    }

.embark-breakdown-container {
    display: none;
    background-color: #ffffff
}

    .embark-breakdown-container > td {
        background-color: #ffffff
    }

.embark-breakdown-header {
    margin: 5px 0 20px 0;
}

.embark-dropdown-arrow {
    float: right;
}


/********************************************************************************/
/*	Keyword Search																*/
/********************************************************************************/

.keyword-search {
    vertical-align: middle;
    margin-bottom: 5px;
}
    /* specific settings to fix weird glitch in dropdown position */
    .keyword-search > select, .keyword-search > .leftpanel > select {
        padding: 0 8px;
        height: 34px;
        margin: 0 5px;
        max-width: 400px;
    }

.keyword-search--wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--layout-margin-between-text-content);
    margin-bottom: var(--layout-margin-between-text-content);
}

    .keyword-search--wrap input.search[type="text"] {
        margin: 0;
    }

    .keyword-search--wrap > select {
        margin: 0;
        max-width: min(40rem, 100%);
        min-width: 0;
        box-sizing: border-box;
    }

div.items-selected {
    margin-bottom: 10px;
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.items-selected__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--colour-text-on-primary-base);
}

input[type="text"].search {
    padding: 0 10px 0 30px;
    border: 1px solid #89929A;
    line-height: 32px;
    background: url("../images/icons/SVGs/search.svg");
    background-position: 5px;
    background-size: 18px;
    background-repeat: no-repeat;
    width: 200px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 10px 0px;
}

    input[type="text"].search.simple {
        width: 50%;
    }

input[type="text"].searching {
    background: url("../images/icons/16/loading.gif");
    background-position: 5px center;
    background-repeat: no-repeat;
}

#ClearFilter {
    padding-left: 5px;
}


/********************************************************************************/
/*	Search	Amendments									                        */
/********************************************************************************/


div.panel div.usersearch {
    float: left;
    margin-right: 10px;
    max-width: 100%;
}

    div.panel div.usersearch.simple {
        width: 100%;
    }

    div.panel div.usersearch label, div.panel div.usersearch div {
        display: flex;
    }

div.exactusernameemail {
    padding-right: 8px;
    border-right: 1px solid #ccc;
}

div.panel div.usersearch div button {
    margin: 10px 0 10px 8px;
    cursor: pointer;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}




/********************************************************************************************/
/*	Form Elements                                                                           */
/********************************************************************************************/

legend {
    color: #161616;
    font-size: 1.4rem;
    font-weight: 600;
    margin-left: -5px;
    padding: 0 5px;
}

    legend img {
        vertical-align: bottom;
        margin: 0px 5px;
    }

fieldset {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 20px;
    min-width: 0;
}

form label.block {
    display: block;
    margin: 5px 0px;
}

form label.bold {
    font-weight: bold;
}

form input, form select, form textarea {
    margin: 5px 0px 5px 0px;
}

    form input[type="text"], form input[type="password"], input[type="url"], input[type="number"] {
        width: 50%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 3px;
        border: 1px solid #89929A;
    }

form select {
    padding: 3px;
    border: 1px solid #89929A;
    max-width: 100%;
}

form textarea {
    width: 50%;
    padding: 3px;
    border: 1px solid #89929A;
}

form input[type="text"].longtext, form input[type="password"].longtext, input[type="url"].longtext {
    width: 80%;
}

form input[type="text"].shorttext, form input[type="password"].shorttext, input[type="url"].shorttext {
    width: 200px;
}

form input.short-text-for-number-input {
    width: 40px;
}

form input[type="submit"] {
    margin-top: 10px;
}

form ul {
    list-style: none;
    padding: 0px;
    margin: 8px 0 15px 25px;
}

    form ul li {
        margin-bottom: 2px;
    }

        /*  Align the check / radio in the middle */
        form ul li input { /*, form ul li select  {*/
            vertical-align: top;
            margin-right: 8px;
        }

        form ul li img {
            vertical-align: top;
            margin-right: 0px;
        }

        form ul li label {
            display: inline;
            display: inline-block;
            vertical-align: middle;
        }

        /* An option label is shrink-to-fit against the li, not against the space left
           beside the control, so without a clamp it drops to the next line and strands
           the radio or checkbox on its own. 3rem covers the control plus its margins. */
        form ul li > input[type=radio] + label,
        form ul li > input[type=checkbox] + label {
            max-width: calc(100% - 3rem);
            vertical-align: top;
        }

        form ul li img {
            display: inline;
            display: inline-block;
            vertical-align: middle;
            padding-right: 5px;
        }

        form ul li input[type=radio], form ul li input[type=checkbox] {
            /* Top-aligned so a multi-line label keeps the control beside its first line
               rather than centred against the whole block */
            vertical-align: top;
            margin-top: 0.3rem;
        }

.radio-with-description{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
}

.radio-with-description input{
    grid-row: 1;
    grid-column: 1;
    margin-right: var(--layout-margin-between-text-content);
}

.radio-with-description label {
    grid-row: 1;
    grid-column: 2;
}

.radio-with-description .radio-with-description_desc {
    grid-row: 2;
    grid-column: 2;
}

ul.list-circle li {
    list-style: circle;
}

ul.inline-list {
    margin: 34px 0;
}

    ul.inline-list > li {
        float: left;
        margin-left: 20px;
    }

ul.panel-list {
    list-style-type: circle;
    margin-bottom: 5px;
}

.indent, .indent-double, .indent-triple {
    margin: 8px 0 8px 25px;
}

.indent-double {
    margin-left: 50px;
}

.indent-triple {
    margin-left: 75px;
}

ul#AssetRenderingFramework {
    margin-left: 0;
}

    ul#AssetRenderingFramework > li {
        padding: 20px;
        border: 1px solid transparent;
    }

        ul#AssetRenderingFramework > li.selected {
            border: 1px solid #0566a9;
            border-radius: 3px;
            background: rgba(5, 102, 169, .05);
        }

        ul#AssetRenderingFramework > li .preferred {
            font-weight: 600;
        }

        ul#AssetRenderingFramework > li:last-of-type {
            padding-bottom: 10px;
        }

    ul#AssetRenderingFramework input[type=radio] {
        vertical-align: top;
        margin-top: 3px;
    }

/********************************************************************************************/
/*	Icons                                                                                   */
/********************************************************************************************/

.icon {
    vertical-align: bottom;
}

.icon_disabled:hover {
    opacity: 1;
}

.icon_disabled {
    vertical-align: bottom;
    opacity: 0.4;
}

a.icon, a.icon:hover, a.icon_disabled, a.icon_disabled:hover {
    text-decoration: none;
}

.icon-on-dark svg {
    color: #FFF;
    height: 25px;
    width: 25px;
    padding: 15px;
    vertical-align: text-bottom;
}

/********************************************************************************/
/*	Loaders																		*/
/********************************************************************************/
.loader {
    min-height: 50px;
    background: url("../images/loading.gif") center center no-repeat !important;
    display: none;
}

.waiting {
    width: 100%;
    background: url("../images/loading.gif") center center no-repeat !important;
}



/********************************************************************************************/
/*	Styles for validation helpers															*/
/********************************************************************************************/

.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors, .validation-summary {
    color: #cc0000;
    padding-left: 10px;
}

.validation-summary {
    font-weight: bold;
}

:root{
    --error-summary-default-width: 56rem;
}

.error-summary {
    border: var(--layout-border-thickness-standout) solid var(--colour-danger);
    padding: 2rem;
    margin-bottom: var(--layout-margin-between-content-sections);
    background-color: var(--colour-background-primary-base);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--error-summary-default-width);
}

/* Sitting among .panel blocks rather than inside one, so it takes their inset */
.error-summary:not(.panel *, .modern-atlas-container *) {
    width: auto;
    margin-left: 2rem;
    margin-right: 2rem;
}

.error-summary__intro {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    margin-top: 0;
}

.error-summary:focus-visible {
    outline: var(--layout-border-thickness-standout) solid var(--colour-danger);
    outline-offset: calc(var(--layout-border-thickness-default) * -1);
}

.error-summary__list {
    list-style: disc;
    margin: 1rem 0 0 2.5rem;
    padding: 0;
}

.error-summary__item {
    color: var(--colour-danger);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    margin: var(--layout-margin-between-text-content) 0 0 0;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    list-style-type: circle;
}

.primary-surface .field-validation-error,
.validation-theme .field-validation-error {
    color: var(--colour-danger);
}

.primary-surface .input-validation-error,
.validation-theme .input-validation-error{
    border: var(--layout-border-thickness-default) solid var(--colour-danger);
    background-color: var(--colour-input-background-default);
}

.primary-surface .input-validation-error:focus,
.validation-theme .input-validation-error:focus{
    outline-color: var(--colour-danger);
}

.chars-remaining--error {
    color: var(--colour-danger);
}

#Title.input-validation-error {
    border-color: inherit;
    background-color: var(--colour-input-background-default);
}

.validate-attempted #Title.input-validation-error {
    border-color: var(--colour-danger);
}

.validate-attempted #Title.input-validation-error:focus {
    outline: var(--layout-border-thickness-standout) solid var(--colour-danger);
    outline-offset: -2px;
    border-color: var(--colour-danger);
}

#Description:focus {
    outline: var(--layout-border-thickness-standout) solid var(--colour-input-border-focused);
    outline-offset: -2px;
    border-color: var(--colour-input-border-focused);
}

/********************************************************************************/
/*	MISC																		*/
/********************************************************************************/

.clear {
    clear: both;
}

.clearboth {
    clear: both;
}

.clickable {
    cursor: pointer;
}

.rotate-left {
    transform: rotate(-90deg);
}
.rotate-right {
    transform: rotate(90deg);
}
.rotate-180 {
    transform: rotate(180deg);
}

.standard-icon-size {
    width: 16px;
    height: 16px;
}

.page-message {
    margin-top: 10px;
}

.workspacePopup {
    width: 500px;
}

.breadcrumb a {
    color: #fff;
}

.no-padding {
    padding: 0px !important;
}

.nowrap {
    white-space: nowrap;
}

.section {
    margin-bottom: 20px;
}

.section:last-child {
    margin-bottom: 0px;
}

.section .section-header--plain {
    all: inherit;
    margin: 8px 0;
}

.section .section-header--sub-option {
    all: inherit;
    margin: 0;
}

.section .section-header {
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

.manage-feedback-options {
    margin-left: 1rem;
}

.manage-feedback-options li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.manage-feedback-options label {
    min-width: 0;
}

fieldset.feedback-settings-section,
fieldset.plain{
    border: none;
    padding: 0;
    border-radius: 0;
}
fieldset.plain{
    margin: 0;
}

fieldset.feedback-settings-section > legend.section-header,
legend.plain{
    font-weight: 400;
}

.feedback-settings-child-group {
    border: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
}

a.toggler {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F4F4F4 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #DDDDDD;
    color: #666666 !important;
    line-height: 22px;
    padding: 5px;
    padding-right: 20px;
}

.chosen-asset .icon {
    margin: 0 10px;
}

.chosen-asset a {
    margin-left: 15px;
}

.loading-replace.loading {
    padding: 24px 0;
    background: url("../images/icons/16/loading.gif") no-repeat scroll center center transparent;
}

    .loading-replace.loading a {
        display: none;
    }

.word-break {
    -ms-word-break: break-all;
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.log-detail {
    display: none;
    padding-top: 10px;
}

    .log-detail > h4 {
        margin: 5px 0 10px;
    }

    .log-detail > .log-detail-text {
        max-height: 500px;
        overflow-y: auto;
        font-size: 12px;
    }

    .log-detail-text dt {
        font-weight: 600;
    }

        .log-detail-text dt::after {
            content: ": ";
        }

.approval-settings-header {
    font-size: 1.4rem;
}

.approval-settings-hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 15px 0 20px;
}

.screen-reader-only,
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
}

.workspace-info-title {
    margin-bottom: 20px;
}

.workspace-list-for-users {
    margin-bottom: 20px;
}

#Categories li {
    display: flex;
    align-items: center;
}

/********************************************************************************/
/*	Password classes															*/
/********************************************************************************/
.password-container {
    position: relative;
}

    .password-container #passwordStrengthIndicator {
        position: absolute;
        right: 50%;
        top: 8px;
        text-align: right;
    }

.strength0 {
    color: red;
}

.strength1 {
    color: darkred;
}

.strength2 {
    color: orange;
}

.strength3 {
    color: inherit;
}

.strength4 {
    color: yellowgreen;
}

.strength5 {
    color: green;
}

/********************************************************************************/
/*	qTip empty classes															*/
/********************************************************************************/

.tip-standard {
}

/********************************************************************************/
/*	dropdown overrides                                                          */
/********************************************************************************/

.action-container .dropdown .dropdown-menu LI > A,
.action-container .dropdown .dropdown-menu LABEL {
    line-height: 32px;
}

    .action-container .dropdown .dropdown-menu LI > A IMG {
        padding: 0 5px 0 0;
    }

/********************************************************************************/
/*	bespoke LTI styling                                                         */
/********************************************************************************/

.lti-assignment-link {
    margin-bottom: 15px;
}

    .lti-assignment-link label {
        font-weight: bold;
    }

.danger-text {
    color: #ff0000;
    font-weight: bold;
}

/********************************************************************************/
/*	DateTime styling                                                            */
/********************************************************************************/

.date-time {
    --date-time-control-height: 2.8rem;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    max-width: 100%;
}

.date-time__time-group {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    min-width: 0;
}

.date-time__minutes-container {
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.date-time__field-container {
    display: flex;
    flex-direction: column;
    padding-right: 5px;
    min-width: 0;
}

.date-time__field-container input[type="text"],
.date-time__field-container select {
    box-sizing: border-box;
    max-width: 100%;
    min-height: var(--date-time-control-height);
}

.date-time__seperator {
    padding-right: 5px;
}

.date-time__label {
    font-size: 0.9em;
}

.date-time__text {
    margin: 8px 5px 8px 0;
    height: 20px;
    line-height: 20px;
}

.date-time__clear {
    background-color: unset;
    border: none;
}


/********************************************************************************/
/*	Overflow menu */
/********************************************************************************/

.overflow-menu-container {
    text-align: right;
    width: 32px;
    padding: 10px 0;
}

    .overflow-menu-container > a {
        display: inline-block;
        padding: 4px 12px 2px;
    }

        .overflow-menu-container > a:focus-visible {
            border-radius: 100%;
        }

        .overflow-menu-container a.dropdown-open {
            background: #DBF1FF;
            border-radius: 100%;
        }

.overflow-menu {
    height: 17px;
    cursor: pointer;
}

.overflow-menu-container .dropdown .dropdown-menu.region-actions-placeholder,
.overflow-menu-container .dropdown .dropdown-menu.workspace-actions-placeholder {
    padding: 15px 0;
}

    .overflow-menu-container .dropdown .dropdown-menu.region-actions-placeholder LI:last-child,
    .overflow-menu-container .dropdown .dropdown-menu.workspace-actions-placeholder LI:last-child {
        border: none;
    }

.overflow-menu-container .dropdown .dropdown-menu, .overflow-menu-container .dropdown .dropdown-panel {
    padding: 0;
    border: none;
}

    .overflow-menu-container .dropdown .dropdown-menu LI {
        border: 1px solid #89929A;
        border-bottom: none;
    }

        .overflow-menu-container .dropdown .dropdown-menu LI:last-child {
            border-bottom: 1px solid #89929A;
        }

        .overflow-menu-container .dropdown .dropdown-menu LI > A {
            line-height: 24px;
            padding: 5px;
            display: flex;
            align-items: center;
            color: #161616;
        }
            .overflow-menu-container .dropdown .dropdown-menu LI > A > svg {
                width: 22px;
                height: 22px;
                margin-right: 5px;
                padding: 3px;
            }

            .overflow-menu-container .dropdown .dropdown-menu LI > A:hover {
                background-color: #F5FBFF;
                color: inherit;
            }

            .overflow-menu-container .dropdown .dropdown-menu LI > A:focus {
                color: inherit;
                border: 1px solid #0077BB;
                padding: 4px;
            }

.overflow-menu-icon {
    width: 22px;
    height: 22px;
    margin-right: 5px;
}

.activate-workspace-button svg,
.archive-workspace-button svg,
.pin-button__pin-icon svg,
.pin-button__unpin-icon svg {
    fill: var(--colour-icon-fill-info);
}

/********************************************************************************/
/*	Region & Workspaces View  													*/
/********************************************************************************/
.region-list-header {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

    .region-list-header > .search-container label {
        display: block;
    }

    .region-list-header > .search-container {
        flex: 0 1 40rem;
        min-width: 0;
    }

    .region-list-header > .search-container input.search {
        width: 100%;
        min-width: 0;
    }

.filter-container {
    margin: 16px;
    display: flex;
    align-items: center;
}

    .filter-container > input {
        margin-right: 10px
    }

.region-list-header > div {
    margin-bottom: 5px;
}

.region-workspace-list-placeholder {
    margin: 20px auto 10px;
}

.collapsible {
    cursor: pointer;
}

.region-description {
    padding-left: 12px;
}

.region-description, .workspace-description {
    color: #6A7480;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2rem;
}

table.data tbody tr.region-workspace-list-container, table.data tbody tr.workspace-list-container {
    display: none;
    background-color: #EEF9FF;
    padding: 10px;
}

    table.data tbody tr.region-workspace-list-container > td, table.data tbody tr.workspace-list-container > td {
        padding: 5px 15px 15px
    }

.region-header .subnav-icon {
    display: inline-block;
    width: 28px;
    margin-left: -20px;
    border: none;
    background: none;
    cursor: pointer;
}

    .region-header .subnav-icon > img {
        width: 8px;
        height: 10px;
    }

.region-header.active .subnav-icon > img {
    transform: rotate(90deg);
}

.region-header > td:first-child {
    padding-left: 25px;
    height: 3.8rem;
}

.region-workspace-status-dot, .workspace-status-dot {
    background-color: #606060;
    min-width: 0.9rem;
    min-height: 0.9rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    display: inline-block;
}

.region-workspace-status-dot--setup, .workspace-status-dot--setup {
    background-color: #F06700;
}

.region-workspace-status-dot--playing,
.region-workspace-status-dot--active,
.workspace-status-dot--playing,
.workspace-status-dot--active {
    background-color: var(--colour-success);
}

.region-workspace-status-dot--archived, .workspace-status-dot--archived {
    background-color: var(--colour-warning);
}

.region-workspace-status-dot--deleted, .workspace-status-dot--deleted {
    background-color: var(--colour-danger);
}

.region-workspace-status-text, .workspace-status-text {
    display: inline-block;
    margin-left: 5px;
}

.sort-arrow {
    height: 12px;
    margin-left: 5px;
}

    .sort-arrow.descending {
        transform: rotate(180deg);
    }

.region-actions-container {
    margin: 0 auto;
}

.can-highlight-text span.highlight {
    background: #FFFF00;
}
/********************************************************************************/
/*	Dot flashing loader															*/
/********************************************************************************/
.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #0077BB;
    color: #0077BB;
    animation: dot-flashing .5s infinite linear alternate;
    animation-delay: .25s;
}

    .dot-flashing::before, .dot-flashing::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }

    .dot-flashing::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #0077BB;
        color: #0077BB;
        animation: dot-flashing .5s infinite alternate;
        animation-delay: 0s;
    }

    .dot-flashing::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #0077BB;
        color: #0077BB;
        animation: dot-flashing .5s infinite alternate;
        animation-delay: .5s;
    }

@keyframes dot-flashing {
    0% {
        background-color: #0077BB;
    }

    50%, 100% {
        background-color: rgba(5, 102, 169, 0.2);
    }
}

/********************************************************************************/
/*	LTI Info Panel Styles
/********************************************************************************/

.panel.lti-info {
    padding: 2.0rem !important;
}

.panel.lti-info > p {
    margin-bottom: 2rem;
}

.lti-info-groups {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lti-info-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lti-info-label {
    font-weight: bold;
}

.lti-info .panel-info {
    margin-top: 1.8rem;
}

.lti-info .action-button {
    margin-top: 1rem;
}
