body {
    font-family: Roboto !important;
}

.footer-img-container {
    margin: 0 0 2rem 0;
}

.footer-img {
    height: 100%;
    max-width: 800px;
    width: 100%;
}

.logo-img {
    height: 100%;
    max-height: 72px;
    width: 220px;
    /*max-width: 110px;*/
    margin: 12px 0;
}

.display-mx1 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 2;
}

.display-mx2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2;
}

.control-label-mx {
    font-weight: 600;
}

.menu-icon {
    width: 60px;
    height: 60px;
}

.flex {
    display: flex;
}

.flex-align-center {
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-horizontal-center {
    -webkit-align-items: center;
    align-items: center;
}

.container-mx {
    z-index: 10;
    min-height: 100vh;
}

.table-container {
    overflow-x: auto;
    padding: 1rem 0px;
    background-color: white;
}

.formPanel {
    background-color: white;
}

.link-button {
    background-color: #E8F0FE;
}

.control-group {
    background-color: #F0F0F0;
    -moz-box-shadow: rgba(0,0,0,0.18) 0 0 16px;
    -webkit-box-shadow: rgba(0,0,0,0.18) 0 0 16px;
    box-shadow: rgba(0,0,0,0.18) 0 0 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    width: 320px;
    padding: 12px 16px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 36px auto;
}

.control-group-menu {
    background-color: transparent;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
}

.input-control-container{
    background-clip: padding-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 14px 6px 0px 6px;
    position: relative;
    text-align: left;
    background-color: #FFF;
}



.input-control-container .input-title {
    color: #495057;
    font-size: 1em;
    position: relative;
    text-align: left;
    -moz-transform: translateY(25%) translateX(10%);
    -ms-transform: translateY(25%) translateX(10%);
    -o-transform: translateY(25%) translateX(10%);
    -webkit-transform: translateY(25%) translateX(10%);
    transform: translateY(25%) translateX(10%);
    -moz-transition: top 0.5s, font-size 0.5s;
    -o-transition: top 0.5s, font-size 0.5s;
    -webkit-transition: top 0.5s, font-size 0.5s;
    transition: top 0.5s, font-size 0.5s;
}

        .input-control-container .input-title[data-added] {
            -moz-transform: translateY(0%);
            -ms-transform: translateY(0%);
            -o-transform: translateY(0%);
            -webkit-transform: translateY(0%);
            transform: translateY(0%);
            font-size: 0.8em;
        }

    .input-control-container input:focus, .input-title {
        color: #424D58;
        /*font-size: 0.85em;*/
    }

    .input-control-container .input-control {
        background-color: #fff;
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        border: none;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        outline: none;
    }

.input-btn {
    background-color: #424D58;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: none;
    color: #FFF;
    padding: 6px 12px;
    outline: none;
}

    .input-btn[disabled],
    .input-btn[disabled=disabled],
    .input-btn.disabled {
        color: rgba(66,77,88,0.5);
        background-color: #F0F0F0;
    }

    .input-btn.remove {
        background-color: #bf3434;
        color: #FFF;
    }

    .input-btn.full-width {
        width: 100%;
    }

    .input-btn.sso {
        background-color: #FFF;
        border: 1px #424D58 solid;
        color: #424D58;
        outline: none;
    }


.form-title-container {
    margin: 0 0 8px 0;
    text-align: center;
}

    .form-title-container span {
        font-size: 1.25em;
        color: #424D58;
        font-weight: bold;
    }

.dropdown-container {
    margin: 6px 0 12px 0;
}

.dropdown {
    /*background-color: #FFF;
    border: 1px solid #E6E6E6;*/
    /*-moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;*/
    text-align: left;
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

    .dropdown.compact {
        min-width: 80px;
        max-width: 100px;
    }

    .dropdown .dropdown-contentcontainer {
        width: 100%;
    }

    .dropdown[data-open] {
        /*margin: 24px 0;*/
        /*background-color: #FFF;*/
        border-right: none;
        border-left: none;
        border-bottom: none;
    }

    .dropdown .dd-items-container {
        padding: 4px 0;
        position: absolute;
        width: 100%;
        z-index: 1000;
        background-color: #FFF;
        border-right: 1px solid #E6E6E6;
        border-left: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
        -moz-border-radius: 0 0 16px 16px;
        -webkit-border-radius: 0 0 16px 16px;
        border-radius: 0 0 16px 16px;
        overflow: hidden;
    }

    .dropdown .dd-items {
        max-height: 224px;
        overflow-y: auto;
    }

    .dropdown .dropdown-selected {
        display: flex;
        justify-content: flex-start;
        -webkit-align-items: center;
        align-items: center;
        background-color: #FFF;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        padding: 0 6px;
        border: 1px solid #E6E6E6;
    }

        .dropdown .dropdown-selected .input-container {
            width: 100%;
        }

        .dropdown .dropdown-selected[data-open] {
            border-radius: 8px 8px 0px 0px;
            border-right: 1px solid #E6E6E6;
            border-left: 1px solid #E6E6E6;
            border-bottom: none;
            border-top: 1px solid #E6E6E6;
        }

        .dropdown .dropdown-selected input[readonly="readonly"] {
            border: none;
            display: block;
            width: 100%;
            height: calc(1.5em + .75rem + 2px);
            padding: .375rem 4px;
            font-size: 0.9em;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: transparent;
            background-clip: padding-box;
            outline: none;
        }

    .dropdown .dd-item {
        cursor: pointer;
        padding: 4px 8px;
        display: flex;
        align-items: center;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

        .dropdown .dd-item:hover {
            background-color: #E6E6E6;
        }

.img-dropdown {
    width: 20px;
    height: 24px;
    margin-right: 8px;
}

.img-dropdown-selection {
    width: 20px;
    height: 24px;
    margin-left: 6px;
}

.srch-img {
    width: 20px;
    height: 24px;
    margin: 0 8px;
}

.application-container {
    width: 100%;
    background-color: #FFF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    -moz-box-shadow: 0 0 16px rgba(0,0,0,0.14);
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.14);
    box-shadow: 0 0 16px rgba(0,0,0,0.14);
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    /*overflow: hidden;*/
    margin: 28px 0;
}

.app-column1 {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 320px;
    min-width: 200px;
    background-color: #F0F0F0;
    overflow: hidden;
}

.app-column2 {
    -ms-flex: 2;
    -webkit-flex: 2;
    flex: 2;
    padding: 16px;
}

.app-module-container {
    display: flex;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    background-color: #FFF;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    padding: 8px 6px;
    border-bottom: 1px solid #F0F0F0;
}

    .app-module-container:last-child {
        border-bottom: none;
    }

.app-module {
    color: #424D58;
    /*font-family: 'Roboto', 'sans-serif';*/
    font-size: 1em;
}

.module-title {
    color: rgba(66,77,88,0.5);
    font-size: 0.75em;
    text-align: left;
}

.app-heading-container {
    padding: 0 4px;
    margin: 12px 0;
}

.app-heading {
    font-weight: 600;
    font-size: 1.25rem;
}

.app-sub-heading {
    font-weight: 600;
    font-size: 1.2rem;
}

.app-backgroundimg {
    /*background: url('/img/mlep-bg.png') scroll no-repeat 50% 50% / cover;*/
    /*width: 100%;*/
    height: 100%;
    max-height: 180px;
    margin: 0 auto;
    display: block;
}

.app-backgroundimg-container {
    /*padding: 8px;*/
    /*max-height: 180px;*/
}

.horizontal-line {
    height: 4px;
    width: 100%;
    background-color: #F0F0F0;
}

.info-panel {
    padding: 16px;
}


.search-container {
    margin: 24px 0;
    background-color: #FFF;
    border: 1px solid #E6E6E6;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    text-align: left;
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

.search-components {
    display: flex;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    /*    background-color: #FFF;
    border-radius: 16px;*/
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    padding: 0 6px;
    width: 100%;
}
/*
.search-container .search-components div {
    width: 100%;
}*/

.search-container .search-components input {
    border: none;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: transparent;
    background-clip: padding-box;
    outline: none;
}

.search-panel-container {
    margin: 0 6px;
    background-color: #FFF;
    border: 1px solid #E6E6E6;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-align: left;
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

    .search-panel-container.fixed-width {
        max-width: 350px;
    }


    .search-panel-container input {
        border: none;
        display: block;
        width: 100%;
        height: calc(1.5em + .75rem + 2px);
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: transparent;
        background-clip: padding-box;
        outline: none;
    }

/* Firefox & Chrome specific - remove the stupid yellow autofill colour. */
input:autofill,
input:autofill:focus,
input:autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background: #FFF !important;
}

.action {
    cursor: pointer;
}

.tag-container {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.app-tag-base {
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 0.625em;
    margin: 0 4px;
    font-weight: 600;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    opacity: 0;
}

    .app-tag-base:first-child {
        margin-left: 12px;
    }

    .app-tag-base.help {
        background-color: #e64195;
        color: #FFF;
        opacity: 1;
    }

    .app-tag-base.active {
        background-color: #4EE53D;
        color: #FFF;
        opacity: 1;
    }

    .app-tag-base.expired {
        background-color: #D27B5B;
        color: #FFF;
        opacity: 1;
    }

.page {
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.menu-container {
    background-color: #fff;
    position: relative;
    width: 320px;
    -moz-transition: width 0.4s ease-out;
    -o-transition: width 0.4s ease-out;
    -webkit-transition: width 0.4s ease-out;
    transition: width 0.4s ease-out;
    padding: 24px 16px;
}

    .menu-container[closed] {
        width: 60px;
        text-align: center;
        -moz-transition: width 0.4s ease-out;
        -o-transition: width 0.4s ease-out;
        -webkit-transition: width 0.4s ease-out;
        transition: width 0.4s ease-out;
    }

.main-content {
    -ms-flex: 2;
    -webkit-flex: 2;
    flex: 2;
}

.menu-btn-container {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.menu-btn {
    display: inline-flex;
}

.menu-img-dropdown {
    width: 20px;
    height: 24px;
}

.mx-btn {
    background: none;
    border: none;
    background-color: transparent;
}

.app-content-container {
    margin: 6px 0;
}

.institution-container {
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin: 8px 0;
    padding: 6px 12px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.intallation-container {
    margin: 24px 0;
}

.empty-results-container {
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin: 12px 0;
    text-align: center;
}

.empty-results-subtext {
    margin: 12px 0;
}

.empty-img {
    width: 256px;
    height: 112px;
}

.welcome-text {
    margin: 8px 0;
}

.accordion-container {
    padding: 0px 0 0 24px;
}

.selected-menu-item {
    color: #E64195;
    background-color: rgb(230 65 149 / 0.10);
    font-weight: 600;
}

.session-panel {
    margin: 0 auto;
}

.session-row {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #E6E6E6;
}

    .session-row .column {
        flex: 1 1 auto;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-align-items: center;
        align-items: center;
        width: 20%;
    }

    .session-row.needs-help {
        border-left: 4px solid #E64195;
        background-color: #FDF0F6;
        color: #e64195;
    }

    .session-row.assigned-tome {
        border-left: 4px solid #E64195;
        background-color: #FFF;
        color: #e64195;
    }

.session-buttons-container {
    display: flex;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
}

.module-contents {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.replay-list-container {
    background-color: #FFF;
    padding: 12px;
    -moz-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.filter-container {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    margin: 16px 0;
}

    .filter-container .filter-fields {
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-align-items: center;
        align-items: center;
        width: 100%;
    }
.report-filter-container {
    width: 100%;
    margin-left: 16px;
    margin-right: 16px;
}
.report-filter-container-start {
}
.report-filter-container-next {
}
.report-filter-container-end {
    margin-bottom: 16px;
}

.filter-container-report {
    display: flex;
    gap: 15px;
}
.filter-container-report-div {
    margin-top: auto;
    margin-bottom: auto;
}
.filter-container-report-div-title {
    width: 130px;
    text-align: right;
    font-weight: bold;
}
.filter-report-input {
    border: none;
}
.report-counter {
    font-weight: bold;
}
.report-custom-title {
    color: #ad34ad;
    font-style: italic;
}
.report-no-results {
    width: 100%;
    justify-content: center;
}
.entries-count {
    font-weight: bold;
    color: black;
}
.breadcrumb-container {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.breadcrumb-piece-container {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.appinfo-container {
    margin: 12px 0;
}


.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    /*padding: 1rem 1.25rem;*/
    /*    font-size: 1rem;*/
    /*color: #E64195;*/
    text-align: left;
    /*background-color: #fff;*/
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}

    .accordion-button:not(.collapsed)::after {
        /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E64195'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");*/
        transform: rotate(180deg);
    }

    .accordion-button::after {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: auto;
        content: "";
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect width='20' height='20' style='fill: none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg style='clip-path: url(%23clip-path)'%3E%3Cpath id='Polygon_7' data-name='Polygon 7' d='M10,13,6,7h8Z' style='fill: %23424d58'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
        background-size: 1.25rem;
        transition: transform 0.2s ease-in-out;
        transform: rotate(0deg);
    }

.menu-block-container {
    margin: 12px 0;
}

.forgot-password-container {
    margin: 16px 0;
    display: flex;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.tsandcs-container {
    margin: 16px 0;
    font-size:small;
/*    display: flex;
    justify-content: center;
    -webkit-align-items: center;
*/    align-items: center;
}

.buttons-container {
    margin: 16px 0;
}

.login-label {
    font-size: 16px;
    -moz-transition: font-size 0.8s;
    -o-transition: font-size 0.8s;
    -webkit-transition: font-size 0.8s;
    transition: font-size 0.2s ease-out, left 0.2s, top 0.2s;
    display: inline-table;
    top: 16px;
    left: 18px;
    position: absolute;
    color: #424D58;
}

    .login-label.label-focus {
        font-size: 12px;
        top: 6px;
        left: 12px;
        color: #495057;
    }

.adjustable-container {
    height: 80px;
}

.course-menucontainer {
    padding: 0 16px 0 0;
}

.replay-panel {
    margin: 14px 0;
    padding: 8px 0px 0px 0px;
    background-color: #F6F6F6;
    border: 1px solid #E6E6E6;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    text-align: left;
    position: relative;
    display: inline-block;
    width: 100%;
}

    .replay-panel:first-child {
        margin: 24px 0 0px 0;
    }

.replay-heading-container {
    padding: 0 16px;
    margin: 4px 0;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.replay-table {
    display: table;
    width: 100%;
}

    .replay-table .replay-table-column {
        min-width: 20px;
    }

    .replay-table .replay-table-iconcolumn {
        max-width: 20px;
    }

        .replay-table .replay-table-iconcolumn:first-child {
            margin-right: 12px;
        }

    .replay-table .center-column {
        width: 100%;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
    }

    .replay-table .replay-table-action-column {
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        word-wrap: normal;
        white-space: nowrap;
        padding: 0 4px;
    }

    .replay-table .replay-table-action-column-header {
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        word-wrap: normal;
        white-space: nowrap;
        min-width: 80px;
    }

    .replay-table .replay-table-action-column-header-live {
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        word-wrap: normal;
        white-space: nowrap;
        min-width: 55px;
    }

.replay-heading {
    margin: 8px 0;
}

.replay-content {
    padding: 12px 0;
}

.user-action {
    color: #3A96DD;
    font-size: 1em;
    background: none;
    border: none;
    outline: none;
}

    .user-action[disabled],
    .user-action.disabled,
    .user-action[disabled=true],
    .user-action[disabled=disabled] {
        color: #E2E3E6;
    }

.chat-container {
    position: fixed;
    bottom: 0;
    right: 0;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    background-color: #FFF;
    overflow: hidden;
    margin: 0 20px 20px 0;
    /*height: 560px;*/
    height: 50%;
    /*  width: 376px;*/
    width: 20%;
    -moz-box-shadow: 0 0 16px rgba(0,0,0,0.14);
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.14);
    box-shadow: 0 0 16px rgba(0,0,0,0.14);
}

    .chat-container .chat-titlebar {
        background-color: #E64195;
        width: 100%;
        vertical-align: middle;
        padding: 16px;
    }

        .chat-container .chat-titlebar.history {
            background-color: #424D58;
        }

        .chat-container .chat-titlebar .chat-titlebar-content {
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-align-items: center;
            align-items: center;
            color: #FFF;
        }

.message-container {
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

    .message-container.their-message {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .message-container.my-message {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

.message-sendfrom-container {
    margin: 4px 0;
    display: flex;
}

    .message-sendfrom-container.their-message {
        margin: 4px 0;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .message-sendfrom-container.my-message {
        margin: 4px 0;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }


.message-sendfrom {
    color: #424D58;
    font-weight: 600;
}

.message-text-container {
    background-color: #F6F6F6;
    padding: 8px;
    display: inline-block;
}

    .message-text-container.their-message {
        -moz-border-radius: 0 8px 8px 8px;
        -webkit-border-radius: 0 8px 8px 8px;
        border-radius: 0 8px 8px 8px;
    }

    .message-text-container.my-message {
        background-color: #F6F6F6;
        -moz-border-radius: 8px 0 8px 8px;
        -webkit-border-radius: 8px 0 8px 8px;
        border-radius: 8px 0 8px 8px;
    }

.message-text {
    color: #424D58;
}

.ms-block-container {
    position: relative;
    padding: 0 16px;
    overflow-y: auto;
    height: calc(100% - 132px);
}

    .ms-block-container.req-obs {
        height: calc(100% - 172px);
    }

    .ms-block-container.req-una {
        height: calc(100% - 162px);
    }

    .ms-block-container.req-both {
        height: calc(100% - 202px);
    }

.ms-block {
    position: relative;
}

.message-interaction-container {
    width: 100%;
    padding: 16px;
    display: inline-block;
}

.message-outer-container {
    border: 1px solid #E6E6E6;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 8px;
}

.ms-input-hidden {
    width: 100%;
    margin-right: 8px;
}

    .ms-input-hidden input {
        border: none;
        outline: none;
        color: #424D58;
        width: 100%;
    }

.interact-btn-img {
    width: 20px;
    height: 24px;
    margin: 0 8px;
}

.interact-btn {
    width: 20px;
    height: 24px;
    margin: 0 8px;
}

    .interact-btn[disable],
    .interact-btn[disable=disable],
    .interact-btn.disable {
        opacity: 0.5;
    }

.observe-container {
    padding: 8px 16px;
    background-color: #FDF0F6;
}

.observe-content {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    white-space: nowrap;
}

.unassign-container {
    padding: 0px 0 8px 0;
    background-color: #ffffffd1;
    position: relative;
    width: 100%;
}

.unassign-content {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.background {
    background: url('/img/mlplus-logo.png') scroll no-repeat 50% 50% / cover;
    height: 100%;
    width: 100%;
    position: fixed;
}

.message-multiline {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    max-height: 45px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.current-page {
    background-color: #E64195;
    padding: 4px;
}

.paging-container {
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 16px 0;
}

.paging-items-container {
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
}

    .paging-items-container input {
        width: 50px;
    }

.img-paging-icon-container {
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 12px;
}

    .img-paging-icon-container[disable] {
        opacity: 0.5;
    }

.img-paging-icon {
    width: 20px;
    height: 20px;
}

.info-text {
    margin-right: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.details-panel-field {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    margin: 2px 0;
}

.entries-container {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin: 0 8px;
}

.info-side-panel {
    width: 400px;
    -moz-transition: right 0.4s, visibility 2s;
    -o-transition: right 0.4s, visibility 2s;
    -webkit-transition: right 0.4s, visibility 2s;
    transition: right 0.4s;
    background-color: #fff;
    position: fixed;
    padding: 24px 16px;
    height: 100%;
    right: -420px;
    z-index: 100;
    -moz-box-shadow: 0 0 16px rgba(0,0,0,0.14);
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.14);
    box-shadow: 0 0 16px rgba(0,0,0,0.14);
}

    .info-side-panel.panel-visible {
        right: 0;
    }

.info-paragraph {
    margin: 16px 0;
}

.info-sub-paragraph {
    margin: 0 0 0 8px;
    padding: 0 0 0 16px;
    border-left: 1px solid #424d5881;
}

.sidepanel-titlebar-content {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}


.dialog-panel {
    padding: 8px 0px 0px 0px;
    background-color: #F6F6F6;
    border: 1px solid #E6E6E6;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    text-align: left;
    overflow: hidden;
}

.dialog-buttons-container {
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 8px 0;
}

.dialog-buttons {
    width: 100%;
    padding: 0 16px;
}

.button-container {
    margin: 4px auto;
    text-align: center;
}

.dlg-button-container {
    padding: 0px 8px;
}

.dlg-button {
    padding: 8px 0px;
    margin: 8px 0px;
}

.dialog-background-panel {
    background-color: #FFF;
}

.accoutProfileImage {
    width: 64px;
    height: 64px;
    border: none;
    outline: none;
}

.inst-image-logo {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.institution-upload-buttons {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    margin: 2px 0;
}

.field-invalidated {
    color: #d72525;
    text-align: center;
}

.text-successful {
    color: #13C42B;
}

.text-failure {
    color: #dc3545;
}

.notification-Image {
    width: 32px;
    height: 32px;
    border: none;
    outline: none;
}

.session-modal {
    max-width: 50vw;
}
.session-modal-body {
    overflow: auto;
    max-height: 70vh;
}

.session-modal-score-notattempted {
    color: gray;
}
.session-modal-score-correct {
    color: green;
}
.session-modal-score-partiallycorrect {
    color: orange;
}
.session-modal-score-incorrect {
    color: red;
}
.pimRow {
    background-color: blue;
}
.pimCol {
    background-color: blue;
}
.pimText {
    color: white;
}
.table-div-mlp {
    width: fit-content;
}