/********************************************************************************/
/*	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: 980px; /* fixes small screens when scrolling right */
    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, a:visited {
    color: var(--colour-link);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--colour-link);
    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 td {
        padding: 10px;
        border: solid 1px #bcbcbc;
    }

    table.data tbody tr {
        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 thead th.hidden { /* for things like an overflow menu */
        visibility: hidden;
        font-size: xx-small;
        text-align: center;
    }

    table.data thead tr th {
        color: #161616;
        background: #dbedff;
        border: 1px solid #bcbcbc;
        border-bottom: none;
        font-weight: 600;
        font-size: 1.4rem;
        padding: 8px 10px;
        text-align: left;
        letter-spacing: 0.5px;
    }

        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: 35px;
        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;
    }

    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: 60px;
}

table.workspaces .role-col {
    width: 100px;
}

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;
    }

/********************************************************************************************/
/*	Layout Panels																			*/
/********************************************************************************************/

.leftpanel {
    width: 50%;
    float: left;
}

.rightpanel {
    margin-left: 50%;
}

    .rightpanel .margin {
        margin-left: 10px;
    }

.max-width-800 {
    max-width: 800px;
}
/********************************************************************************************/
/*	Paging																					*/
/********************************************************************************************/

.paging {
    display: flex;
    justify-content: center;
    margin-top: 11px;
    width: 100%;
}

    .paging li {
        display: inline-block;
    }

    .paging .pagebuttons {
        text-align: center;
    }

    .paging .pager-button, .paging .pager-button-disabled, .paging .pager-button-selected {
        padding: 5px 10px;
        display: inline-block;
        color: #666666;
        cursor: pointer;
        font-size: small;
        text-decoration: none;
        border: 1px solid #89929A;
        margin: 1px;
        min-width: 10px;
        background: none;
    }

    .paging .pager-button-disabled {
        cursor: default;
        opacity: 0.4;
    }

    .paging .pager-button-selected, .paging .pager-button:hover {
        color: white;
        background-color: #3B6EAE;
        border: 1px solid #3b6eae;
    }

    .paging .pager-button-selected {
        font-weight: bold;
    }

    .paging .itemsperpage {
        text-align: right;
        width: 25%;
    }

    .paging .pagenumber {
        padding-top: 1rem;
        margin-right: auto;
        width: 20%;
    }

.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;
    }

div.items-selected {
    height: 20px;
    margin-bottom: 10px;
    font-style: normal;
}

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;
    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;
}

    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;
}

table.user-detail {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    margin: 10px 0;
    padding: 0;
}

    table.user-detail td.label {
        width: 25%;
        font-weight: bold;
    }

    table.user-detail td.warning {
        color: #B40000;
    }

    table.user-detail td.data {
        width: 25%;
    }

        table.user-detail td.data > div {
            float: left;
            margin-right: 15px;
        }

            table.user-detail td.data > div.profile-image {
                width: 68px;
                height: 64px;
                text-align: center;
            }

                table.user-detail td.data > div.profile-image img {
                    vertical-align: middle;
                    max-width: 64px;
                    max-height: 64px;
                }

            table.user-detail td.data > div.display-name {
                padding-top: 19px;
                font-size: 1.2rem;
                font-weight: bold;
            }

    table.user-detail td.main {
        width: 50%;
    }

.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;
}

form label.block {
    display: block;
    margin: 5px 0px;
}

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%;
        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;
        }

        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] {
            vertical-align: middle;
        }

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;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    list-style-type: circle;
}

/********************************************************************************/
/*	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 {
        padding-bottom: 10px;
        border-bottom: 1px dashed #ccc;
    }

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;
    }

.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 {
    display: flex;
    align-items: flex-end;
}

.date-time__minutes-container {
    display: flex;
    align-items: flex-end;
}

.date-time__field-container {
    display: flex;
    flex-direction: column;
    padding-right: 5px;
}

.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 */
/********************************************************************************/

.dropdown-menu.style-guide-override {
    box-shadow: 0 1px 8px 0 rgba(137, 146, 154, 0.2), 0 3px 3px 0 rgba(137, 146, 154, 0.12), 0 3px 4px 0 rgba(137, 146, 154, 0.14);
}

.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;
}

    .region-list-header > .search-container label {
        display: block;
    }

    .region-list-header > .search-container input.search {
        width: 50%;
        min-width: 400px;
    }

.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;
}

table.style-guide-override {
    border: none;
    table-layout: fixed;
}

    table.style-guide-override thead tr {
        background: none;
    }

        table.style-guide-override thead tr th {
            background: none;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            border-top: 1px solid transparent;
            line-height: 36px;
            padding: 0px 10px 5px;
            letter-spacing: normal;
        }

            table.style-guide-override thead tr th:first-of-type {
                padding-left: 0;
            }

            table.style-guide-override thead tr th a {
                text-decoration: none;
                display: flex;
                align-items: center;
            }

.region-workspace-list > table.style-guide-override {
    margin-top: -8px;
}

.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;
}