@import "pages/page-base.css";


label, .label {
    color: #7D7D7D !important;
}


.start-with-plus::before {
    content: '+ ';
}

.end-with-colon::after {
    content: ':';
}

.end-with-ellipsis::after {
    content: '...';
}

.end-with-percent::after {
    content: '%';
}


/*
 * Alternative to hr tag
 **/
.horizontal-rule {
    height: 0px;
    box-shadow: 0 0 0.5px 0.5px rgba(0,0,0,6%);
}


/*
 * Generic text
 **/
span.text-bold {
    font-weight: 700;
}

span.text-semi-bold {
    font-weight: 600;
}

span.text-italic {
    font-style: italic;
}

span.text-uppercase {
    text-transform: uppercase;
}

span.text-red {
    color: #FF0000;
}

span.text-grey {
    color: #616161;
}

span.text-light-grey {
    color: #9E9E9E;
}

span.text-clickable:hover {
    text-decoration: underline;
    color: #0288D1;
    cursor: pointer;
}


/*
 * Generic widths & heights
 **/
.w-100 {
    width: 100%;
}


/*
 * Generic margin
 **/
.m-0 {
    margin: 0;
}

.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.m-15 {
    margin: 15px;
}

.m-20 {
    margin: 20px;
}

.mt-0 {
    margin-top: 0;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mr-0 {
    margin-right: 0;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.ml-0 {
    margin-left: 0;
}

.ml-5 {
    margin-left: 5px;
}

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

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}


/*
 * Generic padding
 **/
.p-0 {
    padding: 0;
}

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}

.pt-0 {
    padding-top: 0;
}

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pr-0 {
    padding-right: 0;
}

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pl-0 {
    padding-left: 0;
}

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}


/*
 * Generic form input
 **/
.form-input {
    display: flex;
    flex-direction: column;
}

.form-input.ui-switch {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.form-input-label {
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    color: #9E9E9E;
}

.form-input.ui-switch .form-input-label {
    flex: 1 1 100%;
    font-size: 13px;
    color: #484848;
}

.form-input-control {
}

.form-input-control.simple-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-input-control.simple-checkbox > label {
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    color: #424242;
    cursor: pointer;
}

.form-input.ui-switch .form-input-control {
    flex: 0 0 auto;
    display: flex; /* removes unnecessary space around switch */
}

.form-input-text-counter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
}

.form-input-validation-error {
    display: none;
}

.form-input.error .form-input-validation-error {
    display: flex;
    align-items: center;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    color: #E51C23;
}


/*
 * Generic message styles
 **/

.message-with-blue-border {
    min-width: 240px;
    max-width: 480px;
    width: 100%;
    margin: 20px auto;
    padding: 10px 15px;
    font-size: 12px;
    color: #AAAAAA;
    background-color: #E1F5FE;
    border: 6px solid #29B6F6;
    border-radius: 4px;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,12%);
}

.frame.message {
    background-color: #F3F3F3;
    box-shadow: none;
    color: #5A5A5A;
}


/*
 * Top bar
 **/

.top-bar {
    display: flex;
    justify-content: space-between;
    max-width: 100vw;
    height: 60px !important;
    overflow: hidden;
}

.top-bar.dark {
    background: #FFFFFF;
    color: #4D4D4D;
}

.top-bar.dark {
    background: #424242;
    color: #FFFFFF;
}

.top-bar > .left, .top-bar > .right {
    display: flex;
}

.top-bar > .right {
    width: 240px;
}

.top-bar .nav60 {
    width: 60px;
    height: 60px;
    overflow: hidden;
}

.top-bar .nav60 > a {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    color: #FFFFFF;
}

.top-bar .nav60 > a > i {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
}

.top-bar > .left .logo-container {
    flex: 1 0 60px;
}

.top-bar > .left .logo-container a#dnn_dnnLOGO_hypLogo {
    display: block;
    width: 60px;
    height: 60px;
}

.top-bar > .left .logo-container img#dnn_dnnLOGO_imgLogo {
    width: 60px;
}

/* top-bar panel */
.top-bar .items-panel {
    display: none;
    position: absolute;
    top: 60px;
    min-width: 300px;
    max-width: 480px;
    width: 100%;
    min-height: 200px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: +100;
}

.top-bar .items-panel.left {
    left: 0;
}

.top-bar .items-panel.right {
    right: 0;
}

.top-bar .items-panel-close {
    height: 34px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 20px;
    text-align: right;
}

.top-bar .items-panel ul {
    list-style: none;
    margin: 0;
}

.top-bar .items-panel ul > li, .top-bar .items-panel ul > li.item {
    padding: 10px 15px;
}

.top-bar .items-panel ul > li.item > a {
    display: block;
    font-size: 13px;
    cursor: pointer;
}

/* top-bar panel color scheme */
.top-bar .items-panel {
    background: #FAFAFA;
    color: #4D4D4D;
}

.top-bar .items-panel.dark {
    background: #424242;
    color: #FFFFFF;
}

.top-bar .items-panel .items-panel-close a, .top-bar .items-panel .items-panel-close a:hover {
    color: #4D4D4D;
}

.top-bar .items-panel.dark .items-panel-close a, .top-bar .items-panel.dark .items-panel-close a:hover {
    color: #FFFFFF;
}

.top-bar .items-panel ul > li:hover, .top-bar .items-panel ul > li.item:hover {
    background: #F2F2F2;
}

.top-bar .items-panel.dark ul > li:hover, .top-bar .items-panel.dark ul > li.item:hover {
    /*background: #1B1B1B;*/
    background: #808080;
}

.top-bar .items-panel ul > li.item > a {
    color: #4D4D4D;
}

.top-bar .items-panel.dark ul > li.item > a {
    color: #FFFFFF;
}

.top-bar div#dnn_dnnUserMenu_messageGroup span, .top-bar div#dnn_dnnUserMenu_notificationGroup span {
    padding-left: 2px;
    display: inline-block;
    font-weight: 600;
}


/*
 * Top bar responsive
 **/

@media (max-width: 419px) {
    .top-bar .main-menu-container {
        display: none;
    }
    .top-bar .intercom-help-container,
    .top-bar .my-assignments-container {
        display: none;
    }
}

@media (min-width: 420px) {
    .top-bar > .right {
        width: 300px;
    }
}

@media (max-width: 479px) {
    .top-bar .my-assignments-container {
        display: none;
    }
}

@media (min-width: 480px) {
    .top-bar > .right {
        width: 360px;
    }
}

@media (max-width: 959px) {
    .top-bar .main-menu-container {
        display: none;
    }
}

@media (min-width: 960px) {
    .top-bar .mob-menu-container {
        display: none;
    }
}


/*
 * Injected navigation v1
 * (CSS only with hamburger menu on the left)
 **/

#injected-navigation-v1 {
    min-height: 30px;
    padding: 0px 15px;
    background-color: hsl(0, 0%, 94%);
}

#injected-navigation-v1 > input[type=checkbox] {
    display: none;
} 

#injected-navigation-v1 > .hamburger {
    display: none;
    width: 60px;
    height: 60px;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    color: hsl(0, 0%, 50%);
    user-select: none;
}

#injected-navigation-v1 > input[type=checkbox]:checked ~ .hamburger  {
    background-color: hsl(0, 0%, 90%);
    color: hsl(0, 0%, 20%);
}

#injected-navigation-v1 > #button-container {
    display: flex;
    flex-wrap: wrap;
}

#injected-navigation-v1 > #button-container > .nav-element {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 60px;
    padding: 0 18px;
    font: 700 13px 'Roboto';
    cursor: pointer;
}

#injected-navigation-v1 > #button-container > .nav-element:hover, #injected-navigation-v1 > #button-container > .nav-element.active:hover {
    background-color: hsl(0, 0%, 96%);
}

#injected-navigation-v1 > #button-container > .nav-element.active {
    background-color: hsl(0, 0%, 98%);
}

/* collapsed menu */
@media (max-width: 768px) {
    /* mimic dropdown menu */
    #injected-navigation-v1 > #button-container {
        display: none;
        position: absolute;
        right: 0;
        left: 15px;
        width: 200px;
        padding: 10px 0;
        background-color: hsl(0, 0%, 90%);
        z-index: 90; /* do not overflow top-bar dropdown menu(s) */
    }

    #injected-navigation-v1 > #button-container > .nav-element {
        height: 30px;
    }

    #injected-navigation-v1 > #button-container > .nav-element:hover {
        /*background-color: hsl(0, 0%, 96%);*/ /* if we want different color */
    }

    #injected-navigation-v1 > #button-container > .nav-element + .nav-element {
        /*margin-top: 10px;*/ /* if we want more space between */
    }

    #injected-navigation-v1 > .hamburger {
        display: block;
    }

    #injected-navigation-v1 > input[type=checkbox]:checked ~ #button-container {
        display: block;
    }
}


/*
 * Injected navigation v2
 * (javascript version with dropdown menu on the right)
 **/

#injected_navigation_v2 {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    background-color: hsl(0, 0%, 94%);
}

#injected_navigation_v2 > #button_container {
    display: flex;
    align-items: center;
    /*overflow-x: auto;*/
}

#injected_navigation_v2 > #button_container > .nav-element {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 18px;
    font: 700 13px 'Roboto';
    cursor: pointer;
}

#injected_navigation_v2 > #button_container > .nav-element:hover, #injected_navigation_v2 > #button_container > .nav-element.active:hover {
    background-color: hsl(0, 0%, 96%);
}

#injected_navigation_v2 > #button_container > .nav-element.active {
    background-color: hsl(0, 0%, 98%);
}

#injected_navigation_v2 > #button_container > .nav-element > span {
    white-space: nowrap;
}

#injected_navigation_v2 > #hamburger_dropdown {
    position: relative;
}

#injected_navigation_v2 > #hamburger_dropdown > .hamburger {
    width: 60px;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    text-align: center;
    color: hsl(0, 0%, 28%);
    user-select: none;
    cursor: pointer;
}

#injected_navigation_v2 > #hamburger_dropdown > .hamburger:hover {
    background-color: hsl(0, 0%, 90%);
    color: hsl(0, 0%, 20%);
}


/*
 * Main centric menu
 **/

.main-menu-container .centric-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    overflow: hidden;
}

.main-menu-container .centric-menu ul > li:hover, .main-menu-container .centric-menu ul > li.item:hover {
    background: #808080;
}

.main-menu-container .centric-menu ul > li > a {
    display: block;
    padding: 0 15px;
    font-family: "Open Sans" sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 60px;
    text-decoration: none;
    color: #FFFFFF;
}


/*
 * MyGroups Module
 * Styles copied from module.css
 **/

/*
a#my-groups {
    display: block;
}

#groups-close {
    height: 1.2em;
    line-height: 1.2em;
    font-size: 1.5em;
    text-align: right;
    padding: 0 .75em;
}

#groups-close a {
    color: #4D4D4D;
}
*/

.my-groups {
    position: relative;
    padding: 0 15px;
}

.my-groups h4 {
    margin: 0;
    padding: 15px 0 2px;
    border-bottom: 1px solid #DDDDDD;
}

.my-groups ul {
    margin: 0;
    list-style: none;
}

.my-groups ul li {
    /* overwriting top-bar panel style */
    padding: 8px 4px !important;
}

.my-groups ul li:after {
    content: '';
    display: table;
    clear: both;
}

.my-groups ul li:hover {
    background-color: #EFEFEF;
}

.my-groups ul li:hover a {
    color: #4D4D4D;
    text-shadow: none;
}

.my-groups ul li a {
    display: flex;
    line-height: 20px;
    font-size: 13px;
    font-weight: 300;
    color: #454545;
    cursor: pointer;
}


/*
 * My Groups Avatar
 **/

.my-groups .avatar {
    /* background-color: #DDDDDD; */
    /* border: 2px solid #DDDDDD; */
    border-radius: 20%;
    width: 32px;
    height: 32px;
    line-height: 1;
    margin-right: 16px;
}

.mygroups .avatar span {
    display: inline-block;
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.my-groups .avatar span em {
    display: table-cell;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.my-groups .avatar span img {
    border: 0 none;
    height: auto;
    width: 100%;
}


/*
 * My Groups Filter
 **/

.my-groups div.filter {
    line-height: 32px;
}

.my-groups div.filter:hover {
    background: transparent;
}

.my-groups div.filter input {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 0;
    font-style: italic;
    color: #999999;
}

.my-groups div.filter input:focus {
    border-color: #A9D2F3;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 175, 233, 0.5);
}


/*
 * User menu
 **/

#user-menu-panel .user-menu .item:last-child {
    border-top:1px solid #EFEFEF;
}

/*
#user-menu-panel .user-menu .item a {
    display: block;
    font-size: 15px;
    color: #4D4D4D;
}
*/

#user-menu-panel .user-menu li.item a.user-menu-name {
    display: inline;
    padding: 0 0 0 15px;
    line-height: 32.5px;
}


@media (max-width: 768px) {
    /*-- Menu --*/
    #left-menu {
        max-width: 140px;
    }
    #right-menu {
        max-width: 340px;
    }
    #mob-menu {
        display: inline-block !important;
    }
    .main-menu {
        display: none !important;
    }
    /*-- My Groups --*/
    .lpane .my-groups {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    /* -- Centric -- */
    #dnnGroups,
    #dnnMyLocker,
    #dnnMyLocker a,
    #dnnGroups:hover,
    #dnnMyLocker:hover {
        width: 40px !important;
        min-width: 40px !important;
    }
    #user-controls .registerGroup li {
        min-width: 40px;
    }
    .main-menu .centric-menu ul li {
        padding: 0 10px !important;
    }
    /*-- Menu --*/
    #mob-menu {
        display: inline-block !important;
    }
    .main-menu {
        display: none !important;
    }
}

/* content wrapper */
div#content-wrap {
margin-top: 20px;
}

/*
 * Page bar styles
 **/

div#page-bar {
    clear: both;
    position: relative;
    /*margin-bottom: 20px;*/
    padding: 0;
    min-height: 60px;
    /*-webkit-box-shadow: 0 1px 1px #999999;*/
    /*-moz-box-shadow: 0 1px 1px #999999;*/
    /*box-shadow: 0 1px 1px #999999;*/
    /*overflow: hidden;*/
}

div#page-bar > div#page-header {
    width: 100%;
}

div#page-bar > div#page-header > div#push-menu-trigger {
    float: left;
}

div#page-bar > div#page-header > div#push-menu-trigger > a#trigger {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    color: #FFFFFF;
}

div#page-bar > div#page-header > div#push-menu-trigger > a#trigger > i {
    width: 32px;
    height: 32px;
    line-height: 60px;
    /* height of container */
    font-size: 2.45em;
}

div#page-bar > div#page-header > div#dnn_TopPane {
    position: relative;
    margin: 0;
    /*margin-left: 50px;*/
    /* requred to allow access to a#trigger */
    line-height: 60px;
    color: #FFFFFF;
}

div.GroupViewTop > div.dgdAvatar {
    display: none;
    width: 100%;
    max-width: 60px;
    max-height: 60px;
    margin: 0;
    padding: 10px;
    background: transparent;
    border: 0;
    line-height: 60px;
}

div.GroupViewTop > div.dgdAvatar > img {
    display: block;
    background: transparent;
    border: 0;
}

div.GroupViewTop > div.GroupViewHeader > h2 {
    margin: 0;
    line-height: 60px;
    color: #FFFFFF;
}

div.GroupViewTop > div > a {
    display: block;
    margin: 0;
    line-height: 60px;
    color: #FFFFFF;
}

.crow .ws-12 #dnn_TopPane .DnnModule-SocialGroups .GroupViewTop .GroupViewHeader h2 {
    color: #323232; /* overwrite default style on Hub page */
}

.crow .ws-12 #dnn_TopPane .DnnModule-SocialGroups .GroupViewTop div a {
    color: #03A9F4; /* overwrite default style on Hub page */
}


/*
 * Stop Word Break
 **/

p {
    word-break: keep-all;
}


/*
 * Control Panel Height
 **/

#ControlBar {
    height: 53px !important;
}

#ControlBar .ControlContainer {
    width: 100%;
    margin: 0;
}

#ControlBar .ServiceIcon {
    display: none;
}


/*
 * Button Styles
 **/

a.dnnPrimaryAction,
.dnnPrimaryAction {
    color: #FFFFFF;
    background: #039BE5;
    border: none;
    text-shadow: none;
}

a.dnnPrimaryAction:hover,
a.dnnPrimaryAction:active {
    background: #0288D1;
    border: none;
}

a.dnnSecondaryAction,
.dnnSecondaryAction {
    color: #03A9F4;
    background: #FFFFFF;
    border: none;
    text-shadow: none;
}

a.dnnSecondaryAction:hover,
.dnnSecondaryAction:hover,
a.dnnSecondaryAction:active,
.dnnSecondaryAction:active {
    background: #0288D1;
    color: #FFFFFF;
    border: none;
}

.dnnTertiaryAction,
a.dnnTertiaryAction {
    background: none;
}

a.dnnTertiaryAction:hover,
.dnnTertiaryAction:hover,
a.dnnTertiaryAction:active,
.dnnTertiaryAction:active {
    color: #03A9F4;
    background: #F1F1F1;
    border: none;
}

.dnnFormItem input[type="text"] + a.dnnPrimaryAction,
.dnnFormItem input[type="text"] + a.dnnSecondaryAction,
.dnnFormItem input[type="text"] + a.dnnTerriaryAction {
    margin-left: 15px;
    margin-right: 15px
}


/*
 * More button styles
 **/

div.button.simple,
button.button.simple {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
    text-transform: none;
    outline: none;
    overflow: visible;
    cursor: pointer;
}

div.button.simple:hover,
button.button.simple:hover {
    background: none;
    box-shadow: none;
    text-decoration: underline;
    color: #0288D1;
}

div.button.simple:disabled,
button.button.simple:disabled {
    color: #BDBDBD;
}

div.button.simple:disabled:hover,
button.button.simple:disabled:hover {
    text-decoration: none;
}

.circle-30 {
    height: 30px;
    padding: 0px 0px;
}

.circle-40 {
    height: 40px;
    padding: 9px 8px;
}

.circle-40 .icon {
    font-size: 24px;
    line-height: 24px;
}

.circle-50 {
    height: 50px;
    padding: 5px 10px;
}

div.button.circle,
button.button.circle {
    border: none;
    outline: none;
    overflow: visible;
    cursor: pointer;
}

div.button.circle:disabled,
button.button.circle:disabled {
    color: #BDBDBD;
}

div.button.circle:disabled:hover,
button.button.circle:disabled:hover {
    color: #BDBDBD;
}

.button.rect {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 10px 15px;
    background: none;
    border: none;
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
    font-weight: normal;
    text-transform: none;
    outline: none;
    overflow: visible;
    cursor: pointer;
}

.button.rect.primary, .button.rect.primary:hover {
    background-color: #0086D1;
    border-color: #039BE5;
    box-shadow: none;
    color: #FFFFFF;
}

.button.rect.secondary, .button.rect.secondary:hover {
    background-color: #FFFFFF;
    border-color: #E9E9E9;
    box-shadow: none;
    color: #424242;
}

.button.rect.checkbox {
    gap: 6px;
    margin: 0;
    padding: 3px 6px;
    background-color: #FFFFFF00;
    border: none;
    box-shadow: none;
    color: #424242;
}

.button.rect.checkbox:hover {
    background-color: #FFFFFFFF;
    box-shadow: none;
    color: #424242;
}

.button.rect.checkbox .icon-checkbox-unchecked, .button.rect.checkbox .icon-checkbox-checked {
    font-size: 13px;
    color: #AAAAAA;
}

.button.rect.checkbox .icon-checkbox-checked {
    color: #0288D1;
}

.button.rect.checkbox.dark .icon-checkbox-checked {
    color: #4D4D4D;
}

.button.rectangle-22 {
    gap: 3px;
    height: 22px;
    padding: 6px;
    font-size: 90%;
    line-height: 0.9;
    text-transform: none;
}

.button.rectangle-22 > .button-icon {
    font-size: 90%;
}

.button.rectangle-22 > .button-icon > .icon {
    font-size: 100%;
}

.rectangle.rectangle-30 {
    height: 30px;
    padding: 9px 10px;
    font-size: 100%;
}

.rectangle.rectangle-37 {
    height: 37px;
    padding: 6px 12px;
    font-size: 100%;
}

.rectangle.rectangle-40 {
    height: 40px;
    padding: 14px 20px;
    font-size: 100%;
}

div.button.rectangle,
button.button.rectangle {
    border: none;
    outline: none;
    overflow: visible;
    cursor: pointer;
}

div.button.rectangle.primary,
button.button.rectangle.primary {
    background-color: #0086D1;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    font-weight: 600;
    color: #FFFFFF;
}

div.button.rectangle.primary:hover,
button.button.rectangle.primary:hover {
    background-color: #0288D1;
    border: none;
}

div.button.rectangle.primary.alt,
button.button.rectangle.primary.alt {
    background-color: #E51C23;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    font-weight: 600;
    color: #FFFFFF;
}

div.button.rectangle.primary.alt:hover,
button.button.rectangle.primary.alt:hover {
    background-color: #D01716;
    border: none;
}

div.button.rectangle.secondary,
button.button.rectangle.secondary {
    background-color: #FFFFFF;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    font-weight: 600;
    color: #4D4D4D;
}

div.button.rectangle.secondary:hover,
button.button.rectangle.secondary:hover {
    background-color: #0288D1;
    color: #FFFFFF;
}

div.button.rectangle.tertiary,
button.button.rectangle.tertiary {
    background: none;
    box-shadow: none;
    font-weight: 600;
    color: #4D4D4D;
}

div.button.rectangle.tertiary .icon-menu8,
button.button.rectangle.tertiary .icon-menu8 {
    color: #424242;
}

div.button.rectangle.tertiary:hover,
button.button.rectangle.tertiary:hover {
    background-color: #F1F1F1;
    color: #0288D1;
}

div.button.rectangle.tertiary.alt,
button.button.rectangle.tertiary.alt {
    background: none;
    box-shadow: none;
    font-weight: 600;
    color: #D01716;
}

div.button.rectangle.tertiary.alt:hover,
button.button.rectangle.tertiary.alt:hover {
    background-color: #D01716;
    color: #FFFFFF;
}

div.button.rectangle.grey-dark,
button.button.rectangle.grey-dark {
    background-color: #FFFFFF;
    font-weight: 600;
    color: #484848;
}

div.button.rectangle.grey-dark:hover,
button.button.rectangle.grey-dark:hover {
    background-color: #484848;
    border: none;
    color: #FFFFFF;
}

div.button.rectangle[disabled],
button.button.rectangle[disabled],
div.button.rectangle.primary[disabled]:hover,
button.button.rectangle.primary[disabled]:hover,
div.button.rectangle.primary.alt[disabled],
button.button.rectangle.primary.alt[disabled],
div.button.rectangle.primary.alt[disabled]:hover,
button.button.rectangle.primary.alt[disabled]:hover,
div.button.rectangle.secondary[disbaled]:hover,
button.button.rectangle.secondary[disabled]:hover,
div.button.rectangle.tertiary[disabled]:hover,
button.button.rectangle.tertiary[disabled]:hover,
div.button.rectangle.tertiary.alt[disabled],
button.button.rectangle.tertiary.alt[disabled],
div.button.rectangle.tertiary.alt[disabled]:hover,
button.button.rectangle.tertiary.alt[disabled]:hover,
div.button.rectangle.grey-dark[disabled]:hover,
button.button.rectangle.grey-dark[disabled]:hover {
    background-color: #ECEFF1;
    color: #BDBDBD;
    cursor: default;
}

.options-popover {
    display: flex;
    align-items: center;
}

.options-popover > span {
}

.options-popover > .cog-action {
    padding-top: 2px;
    background: none;
    border: none;
    outline: none;
    font-size: 20px;
}


/*
 * Panes
 **/

 

/*
.rpane, .lpane, .cpane {
    margin: 22px 0 0 0;
}

.lpane {
    padding: 0;
}

.rpane {
    text-align: center !important;
}
*/


/*
 * Page Default Colour
 **/

#page-bar {
    background: #0288D1;
}


/*
 * Form Items
 **/

.dnnFormItem input[type="text"],
.dnnFormItem select,
.dnnFormItem textarea,
.dnnFormItem input[type="email"],
.dnnFormItem input[type="search"],
.dnnFormItem input[type="password"] {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.dnnFormItem input[type="text"]:active,
.dnnFormItem input[type="text"]:focus,
.dnnFormItem input[type="password"]:focus,
.dnnFormItem input[type="password"]:active,
.dnnFormItem input[type="email"]:active,
.dnnFormItem input[type="email"]:focus,
.dnnFormItem select:active,
.dnnFormItem select:focus,
.dnnFormItem textarea:active,
.dnnFormItem textarea:focus,
.dnnFormItem input[type="search"]:active,
.dnnFormItem input[type="search"]:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
}

.dnnDropDownList .selected-item a,
.dnnDropDownList .selected-item a:link,
.dnnDropDownList .selected-item a:visited,
.dnnDropDownList .selected-item a:hover,
.dnnDropDownList .selected-item a:active {
    height: 36px !important;
}


/*
 * Journal z-index for push menu
 **/

#journalEditor,
.jcmt .cmteditarea {
    z-index: 0;
    border: 2px solid #BBBBBB;
    background: transparent;
    margin: 14px 0 28px 0;
    padding: 10px;
}


/*
 * Journal
 * Upload button styles
 **/

a#fileFromOneDrive,
a#fileFromGoogleDrive,
a#photoFromLearningResources,
a#photoFromSite, a#photoFromSiteAlt,
div#journalOptionArea div.journal_localFileShare .dnnInputFileWrapper {
    padding: 12px 16px 12px 36px;
}

div#journalOptionArea > div.fileUploadArea, .journalTools #journalOptionArea {
    background: #F0F2F4;
}

.attach-buttons div {
    padding: 12px 0 12px 12px;
}

a#fileFromOneDrive {
    background: #FFFFFF url(/Portals/1/icons/onedrive.png) center left no-repeat;
    background-position: 6px;
    color: #212121;
}

a#fileFromGoogleDrive {
    background: #FFFFFF url(/Portals/1/icons/googledrive.png) center left no-repeat;
    background-position: 6px;
    color: #212121;
}

a#photoFromLearningResources {
    background: #FFFFFF url(/Portals/1/icons/learning.png) center left no-repeat;
    background-position: 6px;
    color: #212121;
}

a#photoFromSite, a#photoFromSiteAlt {
    background: #FFFFFF url(/Portals/1/icons/mylocker.png) center left no-repeat;
    background-position: 6px;
    color: #212121;
}

div#journalOptionArea div.journal_localFileShare .dnnInputFileWrapper {
    background: #FFFFFF url(/Portals/1/icons/upload.png) center left no-repeat;
    background-position: 6px;
    color: #212121;
}

a#photoFromLearningResources:hover,
a#photoFromLearningResources:active,
a#fileFromOneDrive:hover,
a#fileFromOneDrive:active,
a#fileFromGoogleDrive:hover,
a#fileFromGoogleDrive:active,
a#photoFromSite:hover, a#photoFromSiteAlt:hover,
a#photoFromSite:active, a#photoFromSiteAlt:active,
div#journalOptionArea div.journal_localFileShare .dnnInputFileWrapper:hover,
div#journalOptionArea div.journal_localFileShare .dnnInputFileWrapper:active {
    color: #FFFFFF;
    border: none;
}

a#fileFromOneDrive:hover,
a#fileFromOneDrive:active {
    background: #9E9E9E url(/Portals/1/icons/onedrive.png) center left no-repeat;
    background-position: 6px;
}

a#fileFromGoogleDrive:hover,
a#fileFromGoogleDrive:active {
    background: #9E9E9E url(/Portals/1/icons/googledrive.png) center left no-repeat;
    background-position: 6px;
}

a#photoFromLearningResources:hover,
a#photoFromLearningResources:active {
    background: #9E9E9E url(/Portals/1/icons/learning.png) center left no-repeat;
    background-position: 6px;
}

a#photoFromSite:hover, a#photoFromSiteAlt:hover,
a#photoFromSite:active, a#photoFromSiteAlt:active {
    background: #9E9E9E url(/Portals/1/icons/mylocker.png) center left no-repeat;
    background-position: 6px;
}

div#journalOptionArea div.journal_localFileShare .dnnInputFileWrapper:hover,
div#journalOptionArea div.journal_localFileShare .dnnInputFileWrapper:active {
    background: #9E9E9E url(/Portals/1/icons/upload.png) center left no-repeat;
    background-position: 6px;
}

#journalEditor {
    width: 100%;
    background: #FFFFFF;
    margin: 40px 0;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.06);
}

#journalEditor:after,
#journalEditor:before {
    top: 100%;
    left: 5%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#journalEditor:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #FFFFFF;
    border-width: 15px;
    margin-left: -15px;
}

#journalEditor:before {
    border-color: rgba(187, 187, 187, 0);
    border-top-color: #BBBBBB;
    border-width: 18px;
    margin-left: -18px;
}

.DnnModule .securityMenu ul {
    font-size: 11px
}

.journalTools #journalOptionArea {
    margin: -32px 0 0 0;
}

.journalTools #btnShare,
.jcmt li.cmtbtn a {
    background: #039BE5;
    padding: 10px 22px;
    border: none;
    font-weight: 600;
    text-shadow: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-transform: uppercase;
    width: auto !important;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    *zoom: 1;
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
}

.journalTools #btnShare:hover,
.jcmt li.cmtbtn a:hover,
.journalTools #btnShare:active,
.jcmt li.cmtbtn a:active {
    background: #455EDE;
}

div#journalOptionArea #closeGroupArea, div#journalOptionArea .miniclose {
    margin-right: 9px;
}

div#journalOptionArea div.joutnal_dragDrop {
    color: #999999;
}

.journalTools #journalOptionArea div span:hover,
.journalTools #journalOptionArea div span:active {
    /* color: #FFFFFF; */
}

.journalTools #journalOptionArea #linkArea,
.journalTools #journalOptionArea #tbar-group-Area {
    padding: 10px;
    padding-right: 2px;
}

.juser {
    padding: 4px 8px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.journalrow {
    margin: 0;
    padding: 10px 0 20px;
    border: none !important;
}

.jfile img {
    float: left;
    margin: 10px 0 0;
}

.jlink {
    margin: 10px 0 0;
}

.journalrow div.journalitem .jlink div {
    max-width: 800px;
    padding: 10px 0 10px 0;
}

.journalrow div.journalitem {
    word-break: normal;
    background: #FFFFFF;
    padding: 10px 15px;
    margin-left: 60px;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.06);
}


.journalrow div.author img {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
}

.journalrow div.journalitem ul.jcmt li img {
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.journalrow div.journalitem .authorname {
    padding: 0;
    font-weight: 700;
}

.journalrow div.journalitem .groupname {
    float: right;
    color: #9E9E9E;
}

.journalrow div.journalitem .groupname a {
    font-weight: 700;
    color: #484848;
}

#journalEditor #journalClose, #linkClose, #groupClose, .miniclose, .minidel, .minipin {
    /*background-color: #FFFFFF;*/
    margin: 0 0 0 7px;
    /*box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.06);*/
}

.minipin {
    /* margin-top: 10px; */
}

p.journalfooter {
    padding: 10px 0 0 0;
}

.journalrow div.journalitem .journalfooter abbr {
    color: #9E9E9E;
}



/*
 * Console Tiles
 **/

.console {
    width: 100%;
    height: 100%;
    max-width: 204px;
    margin: 0 auto;
}

.console-none div {
    width: 100px;
    height: 100px;
    margin: 0;
    /* overwrite module.css */
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 0;
    /* overwrite module.css */
    background-color: #03A9F4;
}

.console-none div:nth-child(2n+2) {
    margin-right: 0;
}

.console-none h3 {
    margin: 0 auto;
    padding: 84px 0 0 6px;
    font-size: 0.84em;
    font-weight: 300;
    line-height: 1;
    color: #FFFFFF;
}

/*
#central .console {
    max-width: 100%;
}

#central .console-none {
    margin: 20px 14px 20px -6px;
}
*/

.console-none [title~="Message"] {
    background: #9E9E9E;
}

.console-none [title~="Message"]:hover,
[title~="Message"]:active {
    background: #757575;
}

[title~="Message"] h3 {
    background: url(../img/message.png) no-repeat;
}

.console-none [title~="Activity"] {
    background: #CC1731;
}

.console-none [title~="Activity"]:hover,
[title~="Activity"]:active {
    background: #B0120A;
}

[title~="Activity"] h3 {
    background: url(../img/activity.png) no-repeat;
}

.console-none [title~="Boards"] {
    background: #7CB342;
}

.console-none [title~="Boards"]:hover,
[title~="Boards"]:active {
    background: #558B2F;
}

[title~="Boards"] h3 {
    background: url(../img/boards.png) no-repeat;
}

.console-none [title~="Calendar"] {
    background: #3F7D99;
}

.console-none [title~="Calendar"]:hover,
[title~="Calendar"]:active {
    background: #34687F;
}

[title~="Calendar"] h3 {
    background: url(../img/calendar.png) no-repeat;
}

.console-none [title~="Documents"] {
    background: #FF8F00;
}

.console-none [title~="Documents"]:hover,
[title~="Documents"]:active {
    background: #FF6F00;
}

[title~="Documents"] h3 {
    background: url(../img/documents.png) no-repeat;
}

.console-none [title~="Members"] {
    background: #673AB7;
}

.console-none [title~="Members"]:hover,
[title~="Members"]:active {
    background: #512DA8;
}

[title~="Members"] h3 {
    background: url(../img/members.png) no-repeat;
}

.console-none [title~="Departments"] {
    background: #673AB7;
}

.console-none [title~="Departments"]:hover,
[title~="Departments"]:active {
    background: #512DA8;
}

[title~="Departments"] h3 {
    background: url(../img/members.png) no-repeat;
}

.console-none [title~="Planner"] {
    background: #FF5722;
}

.console-none [title~="Planner"]:hover,
[title~="Departments"]:active {
    background: #D84315;
}

[title~="Planner"] h3 {
    background: url(../img/planner.png) no-repeat;
}

[title~="Activity"] h3,
[title~="Boards"] h3,
[title~="Calendar"] h3,
[title~="Documents"] h3,
[title~="Members"] h3,
[title~="Message"] h3,
[title~="Departments"] h3,
[title~="Planner"] h3 {
    background-size: 64px 64px;
    background-position: 22px 15px;
    /* text-indent: -9999px !important; */
}

[title~="Message"]:hover,
[title~="Message"]:active,
[title~="Activity"]:hover,
[title~="Activity"]:active,
[title~="Boards"]:hover,
[title~="Boards"]:active,
[title~="Calendar"]:hover,
[title~="Calendar"]:active,
[title~="Documents"]:hover,
[title~="Documents"]:active,
[title~="Members"]:hover,
[title~="Members"]:active,
[title~="Departments"]:hover,
[title~="Departments"]:active,
[title~="Planner"]:hover,
[title~="Planner"]:active {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


/*
 * User Controls
 **/

#user-controls {
    height: 60px;
    line-height: 60px;
    font-family: "Open Sans" sans-serif;
    font-weight: 300;
}

.registerGroup ul.buttonGroup {
    margin-left: 10px;
}

#user-controls .registerGroup,
#user-controls .registerGroup *,
#user-controls .loginGroup,
#user-controls .loginGroup * {
    display: block;
}

#user-controls .registerGroup,
#user-controls .loginGroup {
    float: right;
    padding: 0;
    margin: 0;
}

#user-controls .registerGroup li {
    height: 60px;
    min-width: 64px;
}

#user-controls .registerGroup li:hover,
#user-controls .loginGroup:hover {
    background: #9E9E9E;
    height: 60px;
    min-width: 64px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#dnnGroups:active,
#dnnGroups:hover,
#dnnMyLocker:hover {
    background: #9E9E9E;
    height: 60px;
    min-width: 60px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


/*
 * Register Group Styles
 **/

#user-controls .registerGroup li {
    float: left;
}

#user-controls .registerGroup .buttonGroup {
    margin-right: 0;
}

#user-controls .registerGroup a,
#user-controls .loginGroup a {
    display: block;
    position: relative;
    height: 60px;
    min-width: 34px;
    color: #FFFFFF;
    font-size: 13px;
    vertical-align: middle;
    line-height: 60px;
    margin: 0 6px;
}

#user-controls .registerGroup a:hover,
#user-controls .loginGroup a:hover {
    color: #FFFFFF;
}

#user-controls .registerGroup a:active,
#user-controls .loginGroup a:active {
    color: #FFFFFF;
}

#user-controls .registerGroup a:hover,
#user-controls .loginGroup a:hover {
    text-decoration: none;
}

#user-controls .registerGroup a strong,
#user-controls .loginGroup a strong {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    font-size: 13px;
    text-indent: -9999px;
}

#user-controls .userMessages strong {
    height: 100%;
    background: url('../img/user.png') no-repeat 0px 24px;
}

#user-controls .userNotifications strong {
    height: 100%;
    background: url('../img/user.png') no-repeat -99px 16px;
}

/*
#user-controls .registerGroup .userNotifications strong {
    background-position:-85px 10px;
}
*/

#user-controls .registerGroup .userNotifications strong:hover {
    background-position: -99px -36px;
}

#user-controls .registerGroup .userNotifications strong:active {
    background-position: -99px -36px;
}

#user-controls .registerGroup .userMessages strong:hover {
    background-position: 0px -79px;
}

#user-controls .registerGroup .userMessages strong:active {
    background-position: 0px -79px;
}

#user-controls .registerGroup a span {
    display: inline-block;
    position: absolute;
    left: 40px;
    text-align: center;
    font-size: 13px;
    color: #FFFFFF;
}

#user-controls .registerGroup .userProfileImg a {
    min-width: 25px;
    min-height: 32px;
    padding: 0;
    background: none;
}

#user-controls .registerGroup a img {
    height: 32px;
    width: 32px;
    margin: 14px auto;
}


/*
 * Login Group Styles
 **/

#user-controls .loginGroup {}

#user-controls .loginGroup a {
    color: #FFFFFF;
}


/*
 * Number of message next to the message icon
 **/

#user-controls .userMessages a span,
#user-controls .userNotifications a span {
    display: inline-block;
    margin-top: 0px;
    background-color: transparent;
    font-size: 13px;
    margin-left: -12px;
}

#user-controls .userDisplayName {
    padding: 0 10px;
}


/*
 * MyLocker
 **/

/*
#dnnMyLocker {
    float: right;
    width: 60px;
    text-align: center;
}

#dnnMyLocker a {
    height: 60px;
    width: 60px;
    display: block;
}
*/


/*
 * User Controls
 **/

div#user-controls {
    position: relative;
}

div#user-controls > div#dnnGroups {
    float: right;
    width: 60px;
    text-align: center;
}

div#user-controls > div#dnnGroups > a,
div#user-controls > div#dnnMyLocker > a {
    display: block;
    width: 60px;
    height: 60px;
    color: #FFFFFF;
}

div#user-controls > div#dnnGroups > a > i,
div#user-controls > div#dnnMyLocker > a > i {
    width: 32px;
    height: 32px;
    font-size: 1.4em;
    line-height: 60px;
    /* height of container */
}

a.ComposeMessage {
    background: #03A9F4;
    color: #FFFFFF;
    padding: 10px 20px;
}

/*
 * Boards
 **/

.myBoard {
    width: 100%;
    padding: 0;
}

.myBoard .list {
    width: 31%;
    background: #EEEEEE;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    moz-border-radius: 2px;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
}

.myBoard .cards {
    width: 100%;
    margin-bottom: 18px;
}

.myBoard .card {
    width: 100%;
    padding: 12px;
    border-left: none;
    border-right: none;
    border: none;
}

.myBoard .card .avatar,
.myBoard .card .avatar span,
.member-container .avatar,
.member-container .avatar span {
    border: none;
    background: none;
    width: 32px;
    height: 32px;
}

.myBoard .card .avatar span img,
.member-container .avatar span img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.myBoard .card .card-title-container {
    color: #4D4D4D;
}

.myBoard .card .card-title {
    font-size: 14px;
    font-weight: 600;
}

.myBoard .card .card-title-container,
.myBoard .card .card-due-date-container {
    line-height: 26px;
}

#divModal .block-heading,
#divModal .card-title,
#divModal2 .block-heading,
#divModal2 .card-title {
    font-weight: 500;
}

.myBoard .card .card-due-date-container {
    color: #9E9E9E;
}

.need-name .avatar {
    border: none;
    background: none;
}

.title-block .card-due-date {
    padding: 4px 18px;
}

.attachments-block .file .file-icon,
.attachments-block .file .file-data {
    height: 60px;
}

.attachments-block .file .file-icon {
    width: 60px;
}

a.hlCompose {
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 10px 12px;
    background: #039BE5;
}

a.hlCompose:hover {
    background: #0288D1;
}


/*
 * Groups View
 **/

.createGroup {
    margin-top: -54px;
}

.dgdMainContent input.dnnFixedSizeComboBox {
    width: 280px !important;
}

.dgdGroupQuickInfo h3 {
    font-weight: 600;
    font-size: 16px;
    font-size: 1.2em;
}

.dgdGroupQuickInfoWrap {
    padding: 14px 0 28px 0;
}

.dgdGroupQuickInfoWrap .dgdAvatar a {
    max-height: 64px !important;
}

.dgdGroupQuickInfo ul li {
    text-transform: uppercase;
    color: #9E9E9E;
}

.dgdGroupQuickInfo ul li.posts-icn {
    background: url(../img/group-posts.png) no-repeat;
}

.dgdGroupQuickInfo ul li.member-icn {
    background: url(../img/group-members.png) no-repeat;
}

.dgdGroupQuickInfo ul li.photo-icn {
    background: url(../img/group-photos.png) no-repeat;
}

.dgdGroupQuickInfo ul li.docs-icn {
    background: url(../img/group-docs.png) no-repeat;
}

.dgdGroupQuickInfo ul li.join-group-icn {
    padding-right: 20%;
    float: right;
}

.dgdGroupQuickInfo ul li a {
    font-size: 12px;
    color: #FFFFFF;
    background-color: #9F9F9F;
    line-height: 36px;
}


/*
 * Member Directory
 * custom member card styles
 **/

.dnnMemberDirectory .mdSearch {
    border: none;
}

.dnnMemberDirectory .mdSearchBar .dnnPrimaryAction {
    color: #FFFFFF;
}

/*
.DnnModule #mdMemberList {
    z-index: 0;
}

#mdMemberList li {
    height: 250px;
    max-width: 250px;
    padding: 0;
    border: none;
    margin: 0 15px 30px 0;
}

#mdMemberList li:nth-child(1n) {
    background: #3F7D99;
}

#mdMemberList li:nth-child(1n) li.mdComposeMessage {
    background: #54A7CC ;
}

#mdMemberList li:nth-child(2n) {
    background: #E51C23;
}

#mdMemberList li:nth-child(2n) li.mdComposeMessage {
    background: #ff4f69 !important;
}

#mdMemberList li:nth-child(3n) {
    background: #673AB7;
}

#mdMemberList li:nth-child(3n) li.mdComposeMessage {
    background: #9051FF !important;
}

#mdMemberList li:nth-child(5n) {
    background: #7CB342;
}

#mdMemberList li:nth-child(5n) li.mdComposeMessage {
    background: #8DCC4B !important;
}

#mdMemberList li:nth-child(6n) {
    background: #FF8F00;
}

#mdMemberList li:nth-child(6n) li.mdComposeMessage {
    background: #FFB14C !important;
}

#mdMemberList li:nth-child(7n) {
    background: #03A9F4;
}

#mdMemberList li:nth-child(7n) li.mdComposeMessage {
    background: #50C8FF !important;
}

li.mdDisplayName {
    background: none !important;
}

.mdMemberDetails .mdMemberImg {
    border-radius: 0;
    border: none;
    padding: 0;
}

.mdMemberDetails .mdMemberImg, .mdMemberDetails .mdMemberImg span {
    min-width: 75px;
    width: 75px;
    max-height: 75px;
    height: 75px;
}

.mdMemberDetails .mdMemberImg img {
    min-width: 75px;
    min-height: 75px;
}

.mdMemberDetails .mdHoverActions {
    border: none;
    background: #FFFFFF;
    text-shadow: none;
    height: 175px;
}

.DnnModule .mdMemberDetails ul {
    padding: 20px 0 0 0;
}

.mdMemberDetails .mdHoverActions li {
    clear: both;
    height: 42px !important;
    margin: 0 10px 8px 0 !important;
}

.mdMemberDetails .mdHoverActions li a, .mdMemberDetails .mdHoverActions li p {
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0 10px 76px;
}

.mdFriendRequest, .mdFriendPending, .mdFriendAccept, .mdFriendRemove {
    background: url(../img/add-friend.png) 24px 4px no-repeat !important;
}

.mdFollow, .mdUnfollow {
    background: url(../img/follow.png) 24px 4px no-repeat !important;
}

.mdMyLocker {
    background: url(../img/locker.png) 24px 4px no-repeat !important;
}

a.mdMemberTitle, a.mdMemberTitle:hover, a.mdMemberTitle:active {
    color: #FFFFFF;
    font-size: 13px;
}

.mdMemberDetails .mdHoverActions .mdComposeMessage {
    border: none !important;
    border-left: none !important;
    display: inline;
    top: -24px;
    right: 0px;
    /* background: #eeeeee !important; */
/*
    border-radius: 50%;
    padding: 0 !important;
}

.mdMemberDetails .mdHoverActions .mdComposeMessage a {
    background: url(../img/mdmessage.png) 8px 12px no-repeat;
    border: none !important;
}

.mdMemberDetails .mdHoverActions .mdComposeMessage a:hover {
    background-position: 8px 12px;
}

.mdMemberDetails .mdHoverActions .mdComposeMessage:hover {
    background: url(../img/mdmessage.png) 8px 12px no-repeat;
    border: none !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.mdMemberDetails .mdHoverActions .mdComposeMessage:hover a {
    border: none !important;
}

.mdMemberDetails .mdHoverActions li a, .mdMemberDetails .mdHoverActions li p {
    min-height: 42px;
}

li.mdComposeMessage {
    width: 48px;
    height: 48px;
    min-height: 48px;
}
*/

#mdMemberList {
    display: flex !important;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#mdMemberList > li {
    float: none;
    height: 150px;
    margin: 0 15px 15px 0;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

#mdMemberList > li:hover {
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
}

.mdMemberDetails > a {}

.mdMemberDetails > a > span {}

.mdMemberDetails > .mdMemberInfo {}

.mdMemberDetails > .mdMemberInfo > .mdDisplayName,
.mdMemberDetails > .mdMemberInfo > .mdTitle,
.mdMemberDetails > .mdMemberInfo > .mdLocation {
    display: none;
}

.mdMemberDetails > .mdMemberInfo > .mdCustom > .mdMember {
    display: block;
}

.mdMemberDetails > .mdMemberInfo > .mdCustom > .mdMember > img {
    width: 75px;
    height: 75px;
}

.mdMemberDetails > .mdMemberInfo > .mdCustom > .mdMember > span {
    display: inline-block;
    font-weight: 700;
    text-indent: 10px;
}

.mdMemberDetails > .mdHoverActions {
    display: flex;
    justify-content: flex-end;
    top: 54px;
    bottom: 96px;
    background: none;
    border: none;
}

.mdMemberDetails > .mdHoverActions > .mdFriendRequest,
.mdMemberDetails > .mdHoverActions > .mdFriendPending,
.mdMemberDetails > .mdHoverActions > .mdFriendAccept,
.mdMemberDetails > .mdHoverActions > .mdFriendRemove,
.mdMemberDetails > .mdHoverActions > .mdFollow,
.mdMemberDetails > .mdHoverActions > .mdUnfollow {
    display: none;
}

.mdMemberDetails > .mdHoverActions > .mdMyLocker,
.mdMemberDetails > .mdHoverActions > .mdComposeMessage {
    /* float: right; */
    position: relative;
    margin-right: 10px;
    padding: 0 !important;
    background: none;
    border: none;
}

.mdMemberDetails > .mdHoverActions > .mdMyLocker:hover,
.mdMemberDetails > .mdHoverActions > .mdComposeMessage:hover {
    background: none;
    box-shadow: none;
}

.mdMemberDetails > .mdHoverActions > .mdMyLocker > a,
.mdMemberDetails > .mdHoverActions > .mdComposeMessage > a {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    background: none;
    border: none !important;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    overflow: hidden;
}

.mdMemberDetails > .mdHoverActions > .mdMyLocker > a > i,
.mdMemberDetails > .mdHoverActions > .mdComposeMessage > a > i {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 22px;
}

#mdMemberList > li:nth-child(1n) li.mdCustom > .mdMember {
    background: #3F7D99;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(2n) li.mdCustom > .mdMember {
    background: #E51C23;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(3n) li.mdCustom > .mdMember {
    background: #673AB7;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(4n) li.mdCustom > .mdMember {
    background: #7CB342;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(5n) li.mdCustom > .mdMember {
    background: #FF8F00;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(6n) li.mdCustom > .mdMember {
    background: #03A9F4;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(1n) li.mdMyLocker > a,
#mdMemberList > li:nth-child(1n) li.mdComposeMessage > a {
    background: #6597AD;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(2n) li.mdMyLocker > a,
#mdMemberList > li:nth-child(2n) li.mdComposeMessage > a {
    background: #EA494E;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(3n) li.mdMyLocker > a,
#mdMemberList > li:nth-child(3n) li.mdComposeMessage > a {
    background: #8561C5;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(4n) li.mdMyLocker > a,
#mdMemberList > li:nth-child(4n) li.mdComposeMessage > a {
    background: #96C267;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(5n) li.mdMyLocker > a,
#mdMemberList > li:nth-child(5n) li.mdComposeMessage > a {
    background: #FFA532;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(6n) li.mdMyLocker > a,
#mdMemberList > li:nth-child(6n) li.mdComposeMessage > a {
    background: #35BAF6;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(1n) li.mdMyLocker > a:hover,
#mdMemberList > li:nth-child(1n) li.mdComposeMessage > a:hover {
    background: #528AA3;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(2n) li.mdMyLocker > a:hover,
#mdMemberList > li:nth-child(2n) li.mdComposeMessage > a:hover {
    background: #E73238;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(3n) li.mdMyLocker > a:hover,
#mdMemberList > li:nth-child(3n) li.mdComposeMessage > a:hover {
    background: #764DBE;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(4n) li.mdMyLocker > a:hover,
#mdMemberList > li:nth-child(4n) li.mdComposeMessage > a:hover {
    background: #89BA54;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(5n) li.mdMyLocker > a:hover,
#mdMemberList > li:nth-child(5n) li.mdComposeMessage > a:hover {
    background: #FF9A19;
    color: #FFFFFF;
}

#mdMemberList > li:nth-child(6n) li.mdMyLocker > a:hover,
#mdMemberList > li:nth-child(6n) li.mdComposeMessage > a:hover {
    background: #1CB1F5;
    color: #FFFFFF;
}


/*
 * Group Message
 **/

/*
.composeMessageDialog input[type=text], .composeMessageDialog .dnnFormItem input[type="text"] {
    width: 45% !important;
}
*/


/*
 * DAM
 **/

#dnnModuleDigitalAssetsCreateFolderModal input[type=text],
#dnnModuleDigitalAssetsCreateFolderModal .dnnFormItem input[type="text"] {
    width: 45% !important;
}

#dnnModuleDigitalAssetsMainToolbar button,
#dnnModuleDigitalAssetsMainToolbar button span {
    width: 36px;
    height: 36px;
}

.dnnModuleDigitalAssetsBackground {
    background: #FFFFFF;
}

#dnnModuleDigitalAssetsLeftPane {
    background: #F5F5F5;
    border-right: 2px solid #E0E0E0;
}

.dnnModuleDigitalAssetsLeftPaneContents {
    top: 36px;
}

#dnnModuleDigitalAssetsLeftPaneFilesTabContentScroll {
    left: 5px;
}

.dnnModuledigitalAssetsTreeView.RadTreeView .rtIn {
    font-size: 12px;
    color: #4D4D4D;
    line-height: 18px;
}

#dnnModuleDigitalAssetsSearchBox {
    border-radius: 0px;
    border: 1px solid #B3E5FC;
    background: #FFFFFF;
    margin: 4px 0 0 0;
    box-shadow: none;
}

div#dnnModuleDigitalAssetsSearchBox input,
div#dnnModuleDigitalAssetsSearchBox input:focus {
    border-bottom: none !important;
}

#dnnModuleDigitalAssetsBreadcrumb {
    border: none;
    padding: none;
}

#dnnModuleDigitalAssetsMainToolbarTitle {
    padding: 8px 0 0 12px;
}

#dnnModuleDigitalAssetsMainToolbar {
    border: none;
}

#dnnModuleDigitalAssetsListViewToolbar {
    height: 32px;
    border: none;
    border-left: none;
    border-right: none;
    background: none;
}

#dnnModuleDigitalAssetsSelectionToolbar {
    min-height: 42px;
    border: none;
    background: none;
    padding: 14px 10px;
    margin: 8px 0 0 0;
}

div.dnnModuleDigitalAssetsGrid {
    border: none;
}

#dnnModuleDigitalAssetsListContainer {
    border-left: none;
    border-right: none;
}

.dnnModuleDigitalAssetsGrid > table > thead > tr {
    background: none;
    border-right: none;
    border-left: none;
}

.RadGrid_Default .rgHeader,
.RadGrid_Default th.rgResizeCol {
    background: none !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important:
}

.dnnModuleDigitalAssetsGrid tr.rgRow td,
.dnnModuleDigitalAssetsGrid tr.rgAltRow td {
    border-top: none;
}

.fu-container .fu-dialog-content-fileupload-web a.dnnSecondaryAction,
.fu-container .fu-dialog-content-fileupload-web a.PrimaryAction {
    padding: 12px 10px;
}

.dnnModuleDigitalAssetsGrid table.rgMasterTable {
    //*table-layout: auto !important; **//
}


/*
 * Tiles for Central
 **/

/*
#central-tiles {
    margin: 0 -15px;
}

.central-tile {
    width: 120px;
    height: 120px;
    margin: 0 4px 8px 4px;
}

#central-tiles ul.buttonGroup {
    margin-left: 0;
    margin-bottom: 0;
}

#central-tiles .buttonGroup li {
    width: 120px;
    height: 120px;
    display: inline-block;
    background: #03A9F4;
    margin: 0 2px 4px 3px;
    position: relative;
}

#central-tiles .registerGroup a, #central-tiles .loginGroup a {
    display: block;
    padding: 20px 8px 0px 16px;
    height: 100%;
}

#central-tiles .registerGroup a span {
    position: absolute;
  top: 66px;
  right: 50px;
  font-size: 36px;
  font-weight: 100;
  color: #FFFFFF;
}

#central-tiles .registerGroup .userNotifications strong {
    background: url(../img/tiles-bknd.png) no-repeat -28px 29px;
    width: 100%;
    height: 60px;
}

#central-tiles .registerGroup .userMessages strong {
    background: url(../img/tiles-bknd.png) no-repeat 78px 28px;
    width: 100%;
    height: 60px;
}

#central-tiles .registerGroup a strong {
    position: absolute;
  left: 0;
  top: 36px;
  font-size: 15px;
  font-weight: normal;
  text-indent: 16px;
  color: #FFFFFF;
}

#central-tiles .registerGroup a:hover, #central-tiles .loginGroup a:hover {
    background: #039BE5;
    color: #FFFFFF;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#central-tiles #profile-tile {
    max-width: 120px;
}

#central-tiles #locker-tile {
  background: #03A9F4 url(../img/tiles-locker.png) no-repeat 16px 68px;
  line-height: 100px;
  width: 120px;
}

#central-tiles #locker-tile a:hover {
    background: #039BE5 url(../img/tiles-locker.png) no-repeat 16px 68px;
    color: #FFFFFF;

}

#central-tiles #locker-tile a {
    display: block;
  color: #FFFFFF;
  font-size: 15px;
  text-indent: 16px;
  width: 100%;
  height: 100%;
}

#dnn_dnnUser999_registerGroup .userDisplayName {
    visibility: hidden;
}

#search-tile {
    min-height: 40px;
}

#search-tile .SearchContainer {margin:0 0 8px 0; width: 100%; max-width: 250px;}
#search-tile .SearchContainer input {border:0px; border-bottom: none; padding:0;}
#search-tile .SearchContainer .SearchBorder{border:2px solid #9F9F9F;background:none;height:32px; float: left; width: 100%; max-width: 210px;}
#search-tile .SearchContainer .SearchIcon{float:left;width:0px;padding:0px; }
#SearchIcon {background-repeat: no-repeat !important;}
#search-tile .SearchContainer .SearchTextBox{background:none;margin:5px;color:#7f7f7f; border: 0px; border-bottom: none !important;line-height: 20px}
#search-tile .SearchContainer .SearchTextBox:focus {border-bottom: none}
#search-tile .SearchContainer .SearchButton{float:right;text-indent:10px;display:block;height:32px;width:30px;padding: 8px 0 0 0; color: #7F7F7F; font-size: 14px; font-weight: normal;}
/*Hide Arrow Drop Down for Serach Choice/
#search-tile div.SearchIcon img {width:0px; height:0px;}
#search-tile ul.searchSkinObjectPreview {position: relative; top: 22px; width: 250px;}
#search-tile .searchInputContainer a.dnnSearchBoxClearText {top: 0;}
#search-tile span.searchInputContainer {max-width: 210px}
*/


/*
 * User Profile
 **/

.UserProfileControls {
    margin: 20px 0;
    text-align: center;
}

#UserProfileImg {
    text-align: center;
}

#UserProfileImg img {
    height: 120px;
    width: 120px;
    border-radius: 50%;
}

.console.profile {
    background: #757575 !important;
}

.console.profile .console-none [title~="Activity"] h3 {
    height: 36px !important;
}

.console.profile [title~="Activity"] {
    background: none;
}


/*
 * Login and Register
 **/

#Login {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.login {
    margin-top: 5%;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

.login h1,
.login h2,
.login span {
    color: #F2F2F2;
}

.login .dnnFormItem input[type="text"],
.login .dnnFormItem input[type="password"] {
    width: 250px;
    min-width: 200px;
    margin-bottom: 18px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #C9C9C9;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    color: #313131;
}

#login-background {
    /* z-index: -999; */
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.footer div {
    line-height: 60px;
}

.footer a {
    color: #454545;
}


/*
 * Module/View title block
 **/

.view-title-container {
}

.view-title, .view-sub-title {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.2;
}

.view-title {
    font-size: 24px;
    color: #313131;
}

.view-sub-title {
    font-size: 18px;
    /*color: #BDBDBD;*/
}


/*
 * Module/View content block
 **/
.view-content-container {
    position: relative;
    min-height: 480px;
}


/*
 * Module/View filter block
 **/

.view-filters-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.view-filters-container > .filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    position: relative;
}


/*
 * Module/View action block
 **/

.view-actions-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.view-actions-container > .button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}


/*
 * Clean table styles
 * Primarily used by SubjectPlanner, Reports, Grades modules
 * Can be modified at each modules discretion.
 **/

table.clean-table {
    width: 99.99%;
}

table.clean-table > thead > tr > th,
table.clean-table > tbody > tr > th,
table.clean-table > tbody > tr > td {
    background-color: #FFFFFF;
}

table.clean-table > thead > tr > th {
    color: #313131;
}

table.clean-table > thead > tr > th.border-bottom {
    border-bottom: 1px solid #0288D1;
}

table.clean-table > thead > tr > th.border-right {
    border-right: 1px solid #0288D1;
}

table.clean-table > tbody > tr > td.border-bottom {
    border-bottom: 1px solid #E9E9E9;
}

table.clean-table > tbody > tr > td.border-right {
    border-right: 1px solid #E9E9E9;
}

table.clean-table > tbody > tr:nth-child(2n+2) > td {
    /*background: rgba(0,0,0,2%);*/
}

table.clean-table > tbody > tr:hover > td {
    /*background: rgba(0,0,0,4%);*/
}

table.clean-table .col-no-border {
    border: none;
}

table.clean-table .col-70px {
    /*min-width: 70px;*/
    max-width: 70px;
    width: 70px;
}

table.clean-table .col-90px {
    /*min-width: 90px;*/
    max-width: 90px;
    width: 90px;
}

table.clean-table span {
    white-space: nowrap;
}

table.clean-table .header-cell {
    min-height: 60px;
}

table.clean-table > thead > tr:only-child .header-cell {
    /*min-height: 60px;*/
}

table.clean-table .data-cell {
    min-height: 60px;
}

table.clean-table.light-blue {
    border-radius: 1px;
}

table.clean-table.light-blue > thead > tr:only-child .header-cell {
    /*min-height: 60px;*/
}

table.clean-table.light-blue > thead > tr > th {
    /*background-color: #039BE5;*/
    background-color: #0288D1; /* same color as first row */
    color: #FFFFFF;
}

table.clean-table.light-blue > thead > tr:first-child > th {
    background-color: #0288D1;
    color: #FFFFFF;
}

table.clean-table.light-blue tr > th, table.clean-table.light-blue tr > td {
    background-color: #FAFAFA;
}

table.clean-table.light-blue.border-bottom tr > th {
    /*border-bottom: 2px solid #F0F0F0;*/
}

table.clean-table.light-blue.border-bottom tr > td, table.clean-table.light-blue.border-bottom tbody > tr > th {
    border-bottom: 1px solid #E9E9E9;
}

table.clean-table.light-green {
    border-radius: 1px;
}

table.clean-table.light-green > thead > tr:only-child .header-cell {
    /*min-height: 60px;*/
}

table.clean-table.light-green > thead > tr > th {
    background-color: #8BC34A; /* same color as first row */
    color: #FFFFFF;
}

table.clean-table.light-green > thead > tr:first-child > th {
    background-color: #8BC34A;
    color: #FFFFFF;
}

table.clean-table.light-green tr > th, table.clean-table.light-green tr > td {
    background-color: #FAFAFA;
}

table.clean-table.light-green.border-bottom tr > th {
    /*border-bottom: 2px solid #689F38;*/
}

table.clean-table.light-green.border-bottom tr > td, table.clean-table.light-green.border-bottom tbody > tr > th {
    border-bottom: 1px solid #E9E9E9;
}

table.clean-table.orange {
    border-radius: 1px;
}

table.clean-table.orange > thead > tr:only-child .header-cell {
    /*min-height: 60px;*/
}

table.clean-table.orange > thead > tr > th {
    background-color: #FF9800; /* same color as first row */
    color: #FFFFFF;
}

table.clean-table.orange > thead > tr:first-child > th {
    background-color: #FF9800;
    color: #FFFFFF;
}

table.clean-table.orange tr > th, table.clean-table.orange tr > td {
    background-color: #FAFAFA;
}

table.clean-table.orange.border-bottom tr > th {
    /*border-bottom: 1px solid #F57C00;*/
}

table.clean-table.orange.border-bottom tr > td, table.clean-table.orange.border-bottom tbody > tr > th {
    border-bottom: 1px solid #E9E9E9;
}

table.clean-table.purple {
    border-radius: 1px;
}

table.clean-table.purple > thead > tr:only-child .header-cell {
    /*min-height: 60px;*/
}

table.clean-table.purple > thead > tr > th {
    background-color: #9C27B0; /* same color as first row */
    color: #FFFFFF;
}

table.clean-table.purple > thead > tr:first-child > th {
    background-color: #9C27B0;
    color: #FFFFFF;
}

table.clean-table.purple tr > th, table.clean-table.purple tr > td {
    background-color: #FAFAFA;
}

table.clean-table.purple.border-bottom tr > th {
    /*border-bottom: 1px solid #7B1FA2;*/
}

table.clean-table.purple.border-bottom tr > td, table.clean-table.purple.border-bottom tbody > tr > th {
    border-bottom: 1px solid #E9E9E9;
}

table.clean-table.cyan {
    border-radius: 1px;
}

table.clean-table.cyan > thead > tr:only-child .header-cell {
    /*min-height: 60px;*/
}

table.clean-table.cyan > thead > tr > th {
    background-color: #00BCD4; /* same color as first row */
    color: #FFFFFF;
}

table.clean-table.cyan > thead > tr:first-child > th {
    background-color: #00BCD4;
    color: #FFFFFF;
}

table.clean-table.cyan tr > th, table.clean-table.cyan tr > td {
    background-color: #FAFAFA;
}

table.clean-table.cyan.border-bottom tr > th {
    /*border-bottom: 1px solid #0097A7;*/
}

table.clean-table.cyan.border-bottom tr > td, table.clean-table.cyan.border-bottom tbody > tr > th {
    border-bottom: 1px solid #E9E9E9;
}

table.clean-table.grey-scale {
    border-radius: 1px;
}

table.clean-table.grey-scale > thead > tr:only-child .header-cell {
    /*min-height: 60px;*/
}

table.clean-table.grey-scale > thead > tr > th {
    background-color: #F5F5F5; /* lighter shade compared to first row */
    color: #424242;
}

table.clean-table.grey-scale > thead > tr:first-child > th {
    background-color: #E0E0E0;
    color: #424242;
}

table.clean-table.grey-scale tr > th, table.clean-table.grey-scale tr > td {
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0;
}

.header-cell, .data-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
}

.header-cell.center-cell, .data-cell.center-cell {
    justify-content: center;
}

.header-cell.clickable, .data-cell.clickable {
    cursor: pointer;
}


/*
 * Slide panel styles
 * TODO: make slide panels more fluent and responsive
 **/

.slide-panel {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 345px;
    max-width: 100%;
    width: 1024px;
    height: 100vh;
    background: #FCFCFC;
    border: 1px solid #CCCCCC;
    overflow: auto;
    z-index: 100; /* required to stay on to of other elements on the page */
}

.slide-panel.xsm {
    width: 345px;
}

.slide-panel.sm {
    width: 455px;
}

.slide-panel.md {
    width: 768px;
}

.slide-panel.lg {
    width: 1024px;
}

.slide-panel.xsm.full-screen,
.slide-panel.sm.full-screen,
.slide-panel.md.full-screen,
.slide-panel.lg.full-screen {
    width: 100vw;
}

.slide-panel .slide-panel-header, .slide-panel .slide-panel.footer {
    height: 60px;
    overflow: hidden;
}

.slide-panel .slide-panel-body {
    max-height: calc(100vh - 120px);
    height: 100%;
    overflow: auto;
}

.slide-panel .heading {
    background-color: #0288D1;
    color: #FFFFFF;
    margin: 0;
    padding: 12px 10px;
    text-align: center;
}

.slide-panel .close,
.slide-panel .maximise {
    position: absolute;
    right: 0;
    top: 0;
    padding: 17px 10px;
    font-size: 24px;
    color: #FFFFFF;
    overflow: visible;
    cursor: pointer;
}

.slide-panel .maximise {
    right: 40px;
    padding: 18px 12px;
    font-size: 20px;
}

.slide-panel .close:hover,
.slide-panel .maximise:hover {
    color: #666666;
}

.slide-panel div.tab-pane h3 {
    font-size: 16px !important;
}

/*.multi-col-container depricated from assignment & schoolwork panels in faivor of .d-flex*/
/*.slide-panel .multi-col-container {
    display: flex;
    flex-wrap: wrap;
}

.slide-panel .multi-col-container > .left-container,
.slide-panel .multi-col-container > .right-container {
    width: 100%;
}

@media (min-width: 600px) {
    .slide-panel .multi-col-container > .left-container {
        flex: 0 1 60%;
    }
    .slide-panel .multi-col-container > .right-container {
        flex: 0 1 40%;
    }
}*/

/*
@media (min-width: 750px) {
    .slide-panel.small {
        width: 380px;
    }
}

@media (min-width: 1120px) {
    .slide-panel.small {
        width: 25%;
    }
}

@media (min-width: 1500px) {
    .slide-panel {
        width: 50%;
    }
}
*/

/*
 * SchoolWise Panel
 * based on Angular Bootstrap UI Template styles
 * Modal (ui.bootstrap.modal)
 **/

.panel-backdrop.in {
    opacity: .5;
    filter: alpha(opacity=50);
}

.panel-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}

.panel {
    display: none;
    overflow-y: scroll;
    position: fixed !important;
    /* override base.css */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1150;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    outline: 0;
}

.panel.xsm, .panel-xsm > .panel-content {
    width: 345px;
}

.panel.sm, .panel-sm > .panel-content {
    width: 455px;
}

.panel.md, .panel-md > .panel-content {
    width: 768px;
}

.panel.lg, .panel-lg > .panel-content {
    width: 1024px;
}

.panel.xsm.full-screen, .panel-xsm.full-screen > .panel-content
.panel.sm.full-screen, .panel-sm.full-screen > .panel-content
.panel.md.full-screen, .panel-md.full-screen > .panel-content
.panel.lg.full-screen, .panel-lg.full-screen > .panel-content {
    width: 100vw;
}

.panel-dialog {
    position: relative;
    width: auto;
    /*margin: 10px;*/
}

@media (min-width: 768px) {
    /*.panel-dialog .panel-content {
        width: 600px;
    }*/

    /*.panel-sm > .panel-content {
        width: 300px;
    }*/
}

@media (min-width: 992px) {
    /*.panel-lg > .panel-content {
        width: 900px;
    }*/
}

.panel-content {
    display: flex;
    flex-direction: column;

    position: fixed;
    right: 0;
    top: 0;

    min-width: 345px;
    max-width: 100%;
    width: 1024px;
    height: 100vh;

    background: #FCFCFC;
    border: 1px solid #CCCCCC;
    overflow: auto;
    z-index: 100; /* required to stay on to of other elements on the page */
}

.panel-content > .panel-header {
    flex: 0 0 60px;
    position: relative;
}

.panel-content > .panel-header > .heading {
    background-color: #0288D1;
    color: #FFFFFF;
    margin: 0;
    padding: 12px 15px;
    text-align: center;
}

.panel-content > .panel-header > .heading > .heading-icon {
    margin-right: 10px;
    font-size: 24px;
}

.panel-content > .panel-header > .heading > .heading-text {
    font-size: 20px;
}

.panel-content > .panel-header > .close, .panel-content > .panel-header > .maximise {
    position: absolute;
    right: 0;
    top: 0;
    padding: 17px 10px;
    font-size: 24px;
    color: #FFFFFF;
    overflow: visible;
    cursor: pointer;
}

.panel-content > .panel-header > .maximise {
    right: 40px;
    padding: 18px 12px;
    font-size: 20px;
}

.panel-content > .panel-header > .close:hover, .panel-content > .panel-header > .maximise:hover {
    color: #606060;
}

.panel-content > .panel-body {
    /*flex: 1 1 100px;*/
    flex-grow: 1;
    position: relative;
    min-height: 480px;
    max-height: calc(100vh - 120px); /* header+footer = 120px */
    overflow: auto;
}

.panel-content > .panel-footer {
    flex: 0 0 60px;
    /*position: -webkit-sticky;*/
    /*position: sticky;*/
    /*bottom: 0;*/
    position: relative;
    background-color: #FCFCFC;
}

@media (min-width: 667px) {
    /*.panel-content {
        display: flex;
        flex-direction: column;
    }*/

    .panel-content > .panel-header {
        /*flex: 0 0 60px;*/
    }

    .panel-content > .panel-body {
        /*flex: 1 1 480px;*/ /* allocate as much height as possible */
    }

    .panel-content > .panel-footer {
        /*flex: 0 0 60px;*/
    }
}


/*
 * Attachment panel panes
 * used in conjunction with attachment panels
 **/

.attachment-panes {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.attachment-panes > .pane-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.06);
    border-top: none;
    border-left: none;
    overflow: hidden;
}

.attachment-panes > .pane-labels > .pane-label {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
    padding: 15px 10px;
    cursor: pointer;
}

.attachment-panes > .pane-labels > .pane-label.divider {
    display: none;
    flex-grow: 1;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.attachment-panes > .pane-labels > .pane-label.active {
    background-color: #E1F5FE;
}

.attachment-panes > .panes {
    flex: 1 1 100px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.attachment-panes > .panes > .pane-title {
    display: none;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
}

.attachment-panes > .panes > .pane-content {
    position: relative;
    height: 100%;
}

.attachment-panes > .panes > .pane-content .container-for-attachment-file-list {
    max-height: 480px;
    overflow: auto;
}

@media (min-width: 667px) {
    .attachment-panes {
        flex-wrap: wrap;
        flex-direction: row;
    }

    .attachment-panes > .pane-labels {
        flex: 1 1 120px;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
        min-width: 120px;
        max-width: 220px;
        height: 100%;
    }

    .attachment-panes > .pane-labels > .pane-label {
        width: 100%;
    }

    .attachment-panes > .pane-labels > .pane-label.resources {
        margin-top: 20px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }

    .attachment-panes > .pane-labels > .pane-label.divider {
        display: block;
    }

    .attachment-panes > .panes {
        flex: 1 1 540px;
        height: 100%;
    }

}


/*
 * Breadcrumb styles
 * used in conjunction with attachment panel
 **/

.breadcrumb-list {
    display: flex;
    list-style: none;
    margin: 0;
}

.breadcrumb-list > .breadcrumb {
    position: relative;
    padding: 10px 0 10px 10px;
    color: #03A9F4;
    cursor: pointer;
}

.breadcrumb-list > .breadcrumb:hover {
    text-decoration: underline;
}

.breadcrumb-list > .breadcrumb.divider {
    color: inherit;
    pointer-events: none;
    cursor: default;
}

.breadcrumb-list > .breadcrumb:last-child {
    color: inherit;
    pointer-events: none;
    cursor: default;
}


/*
 * drag-n-drop box styles
 * primarily used to upload files from computer by draggin and dropping files into a box
 **/
.drop-box {
    position: relative;
    width: 100%;
    min-height: 150px;
    padding: 50px 20px;
    border: 1px solid #CED4E0;
    border-radius: 4px;
    background: #E8F0FB;
    text-align: center;
    font-size: 14px;
    line-height: 50px;
    color: #4D4D4D;
}

.drop-box:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 2px dashed #CED4E0;
    /*z-index: -1;*/
}

.drop-box.dragover {
    border-color: #8BC34A; /* light-green */
    background: #D0F8CE; /* green .minus-5 */
    color: #2BAF2B; /* green .minus-1 */
}


/*
 * Events module
 * New style for List View Details template.
 **/

table.ListDataGrid,
table.ListDataGrid .ListAlternate,
table.ListDataGrid td {
    /* overwrite Event's ThemeCentricity styles */
    border-color: transparent;
    border-style: hidden;
    border-width: 0;
    background: transparent !important;
}

table.ListDataGrid > tbody {
    display: flex;
}

table.ListDataGrid > tbody > tr {
    float: left;
    width: 20%;
    height: 100%;
}

table.ListDataGrid > tbody > tr > td {
    width: 500px; /* to make sure there is enough width */
    border: 0 !important; /* overwrite Events's ThemeCentricity styles */
}

table.ListDataGrid > tbody > tr > td > span > div.event {
    position: relative;
    /* padding: 15px 0; */
}

table.ListDataGrid > tbody > tr > td > span > div.event:before {
    content: '';
    position: absolute;
    top: 34px;
    display: block;
    width: 100%;
    height: 1px;
    border-top: 2px solid #B3E5FC;
    border-bottom: 2px solid #B3E5FC;
    z-index: -1;
}

table.ListDataGrid > tbody > tr:last-child > td > span > div.event:before {
    content: '';
    display: none;
    width: 0;
    height: 0;
    border: 0;
}

table.ListDataGrid > tbody > tr > td > span > div.event > div.event-date {
    /*float: left;*/
    width: 70px;
    height: 70px;
    padding: 12px;
    border: 6px solid #B3E5FC;
    border-radius: 100%;
    background: #29B6F6;
    color: #FFFFFF;
}

table.ListDataGrid > tbody > tr > td > span > div.event > div.event-date > span {
    display: block;
    font-size: 2em;
    text-align: center;
}

table.ListDataGrid > tbody > tr > td > span > div.event > div.event-date > small {
    display: block;
    line-height: 1.6;
    text-transform: uppercase;
    text-align: center;
}

table.ListDataGrid > tbody > tr > td > span > div.event > div.event-content {
    /* margin-left: 70px; *//* corrensponds to the width of .event-date */
    padding: 4px 16px;
}


/*
 * Angular Bootstrap UI Template styles
 * Accordion (ui.bootstrap.accordion)
 **/

.panel-group {
    position: relative;
    margin: 10px 0 20px;
    background: #FAFAFA; /* color of left border on .panel-body */
}

.panel-group .panel {
    display: block; /* overwrite sw-panel style */
    position: relative !important; /* overwrite sw-panel style */
    z-index: 1; /* overwrite sw-panel style */
    /*margin-bottom: 20px;*/
    /*border-bottom: 1px solid transparent;*/
    /*border-radius: 4px;*/
    /*background: #FFFFFF;*/
    /*box-shadow: 0 1px 2px 1px rgba(0,0,0,0.15);*/

    /*margin-bottom: 0;*/
    /*border-radius: 4px;*/
    /*overflow: hidden;*/
}

.panel-group .panel.panel-default {
    /*border-color: #DDDDDD;*/
}

.panel-group .panel .panel-heading {
    /*padding: 10px 15px;*/
    /*border-bottom: 1px solid transparent;*/
    /*border-top-right-radius: 3px;*/
    /*border-top-left-radius: 3px;*/
    /*border-bottom: 0;*/
    /*color: #313131;*/
    /*background-color: #F5F5F5;*/
    /*border-color: #DDDDDD;*/
}

.panel-group .panel .panel-heading .panel-title {
    /*margin-top: 0;*/
    margin-bottom: 0;
    /*font-size: 16px;*/
    /*color: inherit;*/
}

.panel-group .panel .panel-heading .panel-title > a, .panel-group .panel .panel-heading .panel-title > a:active, .panel-group .panel .panel-heading .panel-title > a:visited {
    display: block;
    padding: 20px;
    /*background-color: #E0E0E0;*/
    border-bottom: 1px solid #D0D0D0;
    font-weight: 500;
    color: #4D4D4D;
    -webkit-transition: background-color 0.5s ease-in-out;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.06);
}

.panel-group .panel .panel-heading .panel-title > a:hover {
    /*background: #2C3E50;*/
    /*color: #FFFFFF;*/
}

.panel-group .panel .collapse {
    display: none;
    /* animation */
    /*animation-name: collapse;
    animation-duration: 0.75s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0s;
    -webkit-animation-name: collapse;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 0s;
    -moz-animation-name: collapse;
    -moz-animation-duration: 0.75s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: both;
    -moz-animation-delay: 0s;*/
}

.panel-group .panel .collapse.in {
    display: block;
    /*margin-left: 40px;*/
    margin-left: 0px;
    /* animation */
    /*animation-name: collapseIn;
    animation-duration: 0.65s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0s;
    -webkit-animation-name: collapseIn;
    -webkit-animation-duration: 0.65s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 0s;
    -moz-animation-name: normal;
    -moz-animation-duration: 0.65s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: both;
    -moz-animation-delay: 0s;*/
}

/*@media (min-width: 769px) {
    .panel-group .panel .collapse.in {
        margin-left: 0;
    }
}*/

.panel-group .panel .collapse .panel-body {
    /*padding: 15px;*/
    /*background: #FAFAFA;*/
    background-color: #FFFFFF;
    color: #484848;
    line-height: 22px;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.06);
}

.panel-group .panel.panel-group .panel-heading + .panel-collapse .panel-body {
    /*border-top: 1px solid #DDDDDD;*/
}

.panel-group .panel.panel-default > .panel-heading + .panel-collapse .panel-body {
    /*border-top-color: #DDDDDD;*/
}

.panel-group .panel .collapse .panel-body p {
    margin: 10px 0;
    padding: 10px 20px;
    margin: 0;
}

/*.panel-group .panel .collapse .panel-body p:after {
    content: '';
    display: block;
    clear: both;
}*/

/*.panel-group .panel .collapse .panel-body p > a.edit-notice, .panel-group .panel .collapse .panel-body p > a.read-more {*/
    /*padding: 0.3em 0.6em;*/
    /*background: transparent;*/
    /*border-bottom: 2px solid #EFEFEF;*//*#4db6ac;*/
    /*color: #FFFFFF;*/
    /*cursor: pointer;*/
/*}*/

/*.panel-group .panel .collapse .panel-body p > a.edit-notice:hover, .panel-group .panel .collapse .panel-body p > a.read-more:hover {*/
    /*border-bottom: 2px solid #4D4D4D;*//*#26a69A;*/
    /*color: #FFFFFF;*/
/*}*/

.panel-group .panel .collapse .panel-body .read-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
}

/*.panel-group .panel .collapse .panel-body .read-edit > .read-action, .panel-group .panel .collapse .panel-body .read-edit > .edit-action {
    padding: 2px 5px;
    color: #263238;
    cursor: pointer;
    overflow: hidden;
}*/

/*.panel-group .panel .collapse .panel-body .read-edit > .read-action {
    display: flex;
    align-items: center;
    gap: 6px;
}*/

/*.panel-group .panel .collapse .panel-body .read-edit > .read-action > i.icon {
    display: flex;
    font-size: 15px;
}*/

/*.panel-group .panel .collapse .panel-body .read-edit > .edit-action {*/
    /*text-align: right;*/
/*}*/

/*.panel-group .panel .collapse .panel-body .read-edit > .read-action:hover, .panel-group .panel .collapse .panel-body .read-edit > .edit-action:hover {
    color: #03A9F4;
}*/


/*
 * Angular Bootstrap UI Template styles
 * Alert (ui.bootstrap.alert)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Buttons (ui.bootstrap.buttons)
 **/

.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
    position: relative;
    float: left;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
    z-index: 2;
}

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
    margin-left: -1px;
}

.btn-group > .btn:first-child {
    margin-left: 0;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 0;
    /* font-size: 14px; */
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 2px;
}

/* .big-rectangle is uzed to toggle Topic/Outcome on Grades Dashboard */
.btn.big-rectangle {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 0;
}

.btn-primary {
    color: #FFFFFF;
    background-color: #0288D1;
    border-color: #2E6DA4;
}

.btn-success {
    color: #FFFFFF;
    background-color: #5CB85C;
    border-color: #4CAE4C;
}

.big-rectangle {
    color: #666666;
    background-color: #F1F1F1;
    border-color: #AAAAAA;
}

.btn-primary:hover {
    color: #FFFFFF;
    background-color: #286090;
    border-color: #204D74;
}

.btn-success:hover {
    color: #FFFFFF;
    background-color: #449D44;
    border-color: #398439;
}

.big-rectangle:hover {
    color: #666666;
    background-color: #EAEAEA;
    border-color: #AAAAAA;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
    color: #FFFFFF;
    background-color: #204D74;
    border-color: #122B40;
}

.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover {
    color: #FFFFFF;
    background-color: #398439;
    border-color: #255625;
}

.big-rectangle.active.focus,
.big-rectangle.active:focus,
.big-rectangle.active:hover,
.big-rectangle:active.focus,
.big-rectangle:active:focus,
.big-rectangle:active:hover,
.open > .dropdown-toggle.big-rectangle.focus,
.open > .dropdown-toggle.big-rectangle:focus,
.open > .dropdown-toggle.big-rectangle:hover {
    color: #FFFFFF;
    background-color: #449D44;
    border-color: #AAAAAA;
}

.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary {
    color: #FFFFFF;
    background-color: #286090;
    border-color: #204D74;
}

.btn-success.active,
.btn-success:active,
.open > .dropdown-toggle.btn-success {
    color: #FFFFFF;
    background-color: #449D44;
    border-color: #398439;
}

.big-rectangle.active,
.big-rectangle:active,
.open > .dropdown-toggle.big-rectangle {
    color: #FFFFFF;
    background-color: #5CB85C;
    border-color: #AAAAAA;
}

.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-success.active,
.btn-success:active,
.open > .dropdown-toggle.btn-success {
    background-image: none;
}

.big-rectangle.active,
.big-rectangle:active,
.open > .dropdown-toggle.big-rectangle {
    background-image: none;
}

.btn[disabled] {
    color: #666666;
    background-color: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.2);
}

.btn[disabled]:hover,
.btn[disabled]:focus,
.btn[disabled].active {
    color: #666666;
    background-color: rgba(0,0,0,0.15);
    border-color: rgba(0,0,0,0.2);
}

.btn[disabled].active:hover,
.btn[disabled].active:focus,
.btn[disabled].active.focus {
    color: #666666;
    background-color: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.2);
}


/*
 * Angular Bootstrap UI Template styles
 * Carousel (ui.bootstrap.carousel)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Collapse (ui.bootstrap.collapse)
 **/

.collapse {
    display: none;
}

.collapse.in {
    display: block;
}


/*
 * Angular Bootstrap UI Template styles
 * Dateparser (ui.bootstrap.dateparser)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Datepicker (ui.bootstrap.datepicker)
 * Datepicker Popup (ui.bootstrap.datepickerPopup)
 **/

.date-picker-ctrl {
    display: flex;
    align-items: flex-end;
}

.date-picker-ctrl > .date-picker-input {

}

.date-picker-ctrl > .date-picker-input > input {

}

.date-picker-ctrl > .date-picker-button {

}

.date-picker-ctrl > .date-picker-button > button {
    padding: 10px 12px 9px;
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    border-left: none;
    color: #313131;
    cursor: pointer;
    outline: none;
}

.date-picker-ctrl > .date-picker-button > button:hover {
    background-color: #F1F1F1;
    color: #222222;
}

.date-picker-ctrl > .date-picker-button > button[disabled], .date-picker-ctrl > .date-picker-button > button[disabled]:hover {
    background-color: #ECEFF1;
    color: #444444;
    cursor: default;
}

.date-picker-ctrl > .date-picker-button > button > .icon {
    display: flex;
    font-size: 16px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    float: left;
    min-width: 160px;
    margin: -1px 0 0;
    padding: 0 0 5px;
    list-style: none;
    font-size: 13px;
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    border-radius: 1px;
    box-shadow: 0 6px 12px rgba(0,0,0,15%);
    background-clip: padding-box;
    z-index: 1000;
}

.uib-datepicker-popup.dropdown-menu {
    padding-top: 0 !important;
}

.dropdown-menu table:focus {
    outline: none;
}

.dropdown-menu table > thead > tr > th {
    padding: 0.5em;
    border: none;
}

.dropdown-menu table > thead > tr:first-child > th {
    border-bottom: 5px solid #FFFFFF;
    background: #03A9F4;
    color: #FFFFFF;
}

.dropdown-menu table > thead > tr > th {
    /* border-bottom: 5px solid transparent; */
    background: #FFFFFF; /* override elemets.css line 1561 */
    color: #666666;
}

.dropdown-menu table > thead > tr > th > button.btn-default,
.dropdown-menu table > thead > tr > th > button.btn-default:hover {
    border: none;
    background: transparent;
    color: #FFFFFF;
}

.dropdown-menu table > tbody > tr > td,
.dropdown-menu table > tbody > tr > td:last-child {
    padding: 0;
    min-width: inherit;
}

.dropdown-menu table > tbody > tr > td > em {
    font-size: 0.8em;
    font-style: normal;
    color: #9C27B0;
}

.dropdown-menu table > tbody > tr > td > button.btn-default {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 1px;
    padding: 0.3em 0.6em;
    color: #666666;
    cursor: pointer;
}

.dropdown-menu table > tbody > tr > td > button.btn-default.active,
.dropdown-menu table > tbody > tr > td > button.btn-default.btn-info.active,
.dropdown-menu table > tbody > tr > td > button.btn-default:hover,
.dropdown-menu table > tbody > tr > td > button.btn-default.btn-info:hover {
    background: #B3E5FC;
    border: 1px solid #81D4FA;
    color: #03A9F4;
}

.dropdown-menu table > tbody > tr > td > button > span.text-muted {
    background: transparent;
    border: 1px solid transparent;
    color: #B0BEC5;
}

.dropdown-menu table > tbody > tr > td > button[disabled],
.dropdown-menu table > tbody > tr > td > button[disabled]:hover {
    background: transparent;
    border: 1px solid transparent;
    color: #B0BEC5;
    cursor: default;
}

.dropdown-menu button.btn-info,
.dropdown-menu button.btn-danger,
.dropdown-menu button.btn-success {
    background: none;
    border: none;
    border-radius: 1px;
    padding: 0.3em 0.6em;
    /* font-size: 0.9em; */
    /* text-transform: uppercase; */
    font-variant: small-caps;
    color: #03A9F4;
}

.dropdown-menu button.btn-info:hover,
.dropdown-menu button.btn-danger:hover,
.dropdown-menu button.btn-success:hover {
    background: #EEEEEE;
    border: none;
    color: #03A9F4;
}


/*
 * Angular Bootstrap UI Template styles
 * Dropdown (ui.bootstrap.dropdown)
 **/

.dropdown > .dropdown-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 160px;
    list-style: none;
    margin: -1px 0 0;
    padding: 0 !important;
    background-color: #FFFFFF;
    background-clip: padding-box;
    border: 1px solid #E9E9E9;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,15%);
    z-index: 1000;
}

.dropdown.open > .dropdown-menu {
    display: flex;
}

.dropdown > .dropdown-menu > li[role=menuitem]:hover {
    background-color: #E8F0FE;
}

.dropdown > .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    color: #414141;
}

.dropdown > .dropdown-menu > li > a:hover {
    /*font-weight: 500;*/
    color: #414141;
}

.dropdown > .dropdown-menu > li > a > .icon {
    /*color: #D1D1D1;*/
}

.dropdown > .dropdown-menu > li[role=grouptitle],
.dropdown > .dropdown-menu[role=menu] > li[role=menuitem] > a,
.dropdown > .dropdown-menu[role=contextmenu] > li[role=menuitem] > a {
    padding: 3px 20px;
}

.dropdown > .dropdown-menu > li[role=grouptitle] {
    padding-top: 10px;
    padding-bottom: 0;
}

.dropdown > .dropdown-menu[role=menu] > li[role=menuitem] > a {
    font-weight: 600;
}

.dropdown > .dropdown-menu > li[role=menuitem] > a:hover {
}

.dropdown > .dropdown-menu > li[role=spacer] {
    height: 7px;
}

.dropdown > .dropdown-menu > li[role=divider] {
    height: 1px;
    margin: 7px 0;
    background-color: #E9E9E9;
    overflow: hidden;
}


/*
 * Angular Bootstrap UI Template styles
 * Modal (ui.bootstrap.modal)
 **/

.modal-backdrop.in {
    opacity: .5;
    filter: alpha(opacity=50);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}

.modal {
    display: none;
    overflow-y: scroll;
    position: fixed !important;
    /* override base.css */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .modal-sm {
        width: 300px;
    }

    .modal-lg {
        width: 99%;
    }

    .modal-xlg {
        width: 99%;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

@media (min-width: 1282px) {
    .modal-xlg {
        width: 1280px;
    }
}

.modal-content {
    position: relative;
    background: #FAFAFA;
    border: 1px solid #CFD8DC;
    border-radius: 1px;
    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    background-clip: padding-box;
    outline: 0;
}

.modal-header {
    position: relative;
    padding: 15px;
    /*border-bottom: 1px solid #E5E5E5;*/
}

.modal-header.red {
    background-color: #FF0000;
    color: #FFFFFF;
}

.modal-header > .heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-header > .heading > .heading-icon {
    margin-right: 10px;
    font-size: 24px;
}

.modal-header > .heading > .heading-text {
    font-size: 20px;
}

.modal-header > .close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px 10px;
    font-size: 24px;
    color: #B0B0B0;
    overflow: visible;
    cursor: pointer;
}

.modal-header > .close:hover {
    color: #606060;
}

.modal-header.red > .close {
    color: #F0F0F0;
}

.modal-header.red > .close:hover {
    color: #333333;
}

.modal-body {
    position: relative;
    padding: 20px;
}

.modal-body > .loading-overlay {
    margin: -20px; /* compensate for padding */
}

.modal-footer {
    margin-top: 15px;
    padding: 19px 20px 20px;
    /*border-top: 1px solid #E5E5E5;*/
    text-align: right;
}


/*
 * Angular Bootstrap UI Template styles
 * Pager (ui.bootstrap.pager)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Pagination (ui.bootstrap.pagination)
 **/

.pagination {
    list-style: none;
    margin: 4px 0;
}

.pagination > li {
    display: inline-block;
    vertical-align: top;
}

.pagination > li > a,
.pagination > li > span {
    margin-left: -1px;
    padding: 0.3em 1em;
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 1px;
    color: #999999;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: #F1F1F1;
    border-color: #DDDDDD;
    color: #039BE5;
}

.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > span:hover,
.pagination > li.active > a:focus,
.pagination > li.active > span:focus {
    background-color: #039BE5;
    border-color: #039BE5;
    color: #FFFFFF;
    z-index: 2;
    cursor: default;
}


/*
 * Angular Bootstrap UI Template styles
 * Popover (ui.bootstrap.popover)
 **/

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 340px;
    width: 340px; /* fixes issue with collapsed popover */
    padding: 1px;
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    /* importnat to set font-size otherwise font-size is inherited from parent */
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #FFFFFF;
    color: #313131;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #CCCCCC;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    line-break: auto;
}

.popover.top {
    margin-top: -10px;
}

.popover.right {
    margin-left: 10px;
}

.popover.bottom {
    margin-top: 10px;
}

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

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #F7F7F7;
    border-bottom: 1px solid #EBEBEB;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 9px 14px;
}

.popover > .arrow,
.popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover > .arrow {
    border-width: 11px;
}

.popover > .arrow:after {
    content: "";
    border-width: 10px;
}

.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999999;
    border-top-color: rgba(0, 0, 0, .25);
    border-bottom-width: 0;
}

.popover.top > .arrow:after {
    bottom: 1px;
    margin-left: -10px;
    content: " ";
    border-top-color: #FFFFFF;
    border-bottom-width: 0;
}

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999999;
    border-right-color: rgba(0, 0, 0, .25);
    border-left-width: 0;
}

.popover.right > .arrow:after {
    bottom: -10px;
    left: 1px;
    content: " ";
    border-right-color: #FFFFFF;
    border-left-width: 0;
}

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999999;
    border-bottom-color: rgba(0, 0, 0, .25);
}

.popover.bottom > .arrow:after {
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #FFFFFF;
}

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999999;
    border-left-color: rgba(0, 0, 0, .25);
}

.popover.left > .arrow:after {
    right: 1px;
    bottom: -10px;
    content: " ";
    border-right-width: 0;
    border-left-color: #FFFFFF;
}

[uib-tooltip-popup].tooltip.top-left > .tooltip-arrow,
[uib-tooltip-popup].tooltip.top-right > .tooltip-arrow,
[uib-tooltip-popup].tooltip.bottom-left > .tooltip-arrow,
[uib-tooltip-popup].tooltip.bottom-right > .tooltip-arrow,
[uib-tooltip-popup].tooltip.left-top > .tooltip-arrow,
[uib-tooltip-popup].tooltip.left-bottom > .tooltip-arrow,
[uib-tooltip-popup].tooltip.right-top > .tooltip-arrow,
[uib-tooltip-popup].tooltip.right-bottom > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.top-left > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.top-right > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.bottom-left > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.bottom-right > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.left-top > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.left-bottom > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.right-top > .tooltip-arrow,
[uib-tooltip-html-popup].tooltip.right-bottom > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.top-left > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.top-right > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.bottom-left > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.bottom-right > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.left-top > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.left-bottom > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.right-top > .tooltip-arrow,
[uib-tooltip-template-popup].tooltip.right-bottom > .tooltip-arrow,
[uib-popover-popup].popover.top-left > .arrow,
[uib-popover-popup].popover.top-right > .arrow,
[uib-popover-popup].popover.bottom-left > .arrow,
[uib-popover-popup].popover.bottom-right > .arrow,
[uib-popover-popup].popover.left-top > .arrow,
[uib-popover-popup].popover.left-bottom > .arrow,
[uib-popover-popup].popover.right-top > .arrow,
[uib-popover-popup].popover.right-bottom > .arrow,
[uib-popover-html-popup].popover.top-left > .arrow,
[uib-popover-html-popup].popover.top-right > .arrow,
[uib-popover-html-popup].popover.bottom-left > .arrow,
[uib-popover-html-popup].popover.bottom-right > .arrow,
[uib-popover-html-popup].popover.left-top > .arrow,
[uib-popover-html-popup].popover.left-bottom > .arrow,
[uib-popover-html-popup].popover.right-top > .arrow,
[uib-popover-html-popup].popover.right-bottom > .arrow,
[uib-popover-template-popup].popover.top-left > .arrow,
[uib-popover-template-popup].popover.top-right > .arrow,
[uib-popover-template-popup].popover.bottom-left > .arrow,
[uib-popover-template-popup].popover.bottom-right > .arrow,
[uib-popover-template-popup].popover.left-top > .arrow,
[uib-popover-template-popup].popover.left-bottom > .arrow,
[uib-popover-template-popup].popover.right-top > .arrow,
[uib-popover-template-popup].popover.right-bottom > .arrow {
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 0;
}

.popover label {
    font-weight: 700;
}


/*
 * Angular Bootstrap UI Template styles
 * Position (ui.bootstrap.position)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Progressbar (ui.bootstrap.progressbar)
 **/

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #F5F5F5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    text-align: center;
    background-color: #337AB7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-bar-info {
    background-color: #5BC0DE;
}

.progress-bar-success {
    background-color: #5CB85C;
}

.progress-bar-warning {
    background-color: #F0AD4E;
}

.progress-bar-danger {
    background-color: #D9534F;
}

.progress-bar-striped,
.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress-striped .progress-bar-info,
.progress-striped .progress-bar-success,
.progress-striped .progress-bar-warning,
.progress-striped .progress-bar-danger {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar.active,
.progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}


/*
 * Angular Bootstrap UI Template styles
 * Rating (ui.bootstrap.rating)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Tabs (ui.bootstrap.tabs)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Justified tab styles
 **/

.nav-tabs.nav-justified {
    list-style: none;
    width: 100%;
    margin: 0;
    border-bottom: 0;
}

.nav-tabs.nav-justified > li {
    float: none;
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1% !important;
    }
}


/*
 * Angular Bootstrap UI Template styles
 * Timepicker (ui.bootstrap.timepicker)
 **/


/*
 * Angular Bootstrap UI Template styles
 * Tooltip (ui.bootstrap.tooltip)
 **/

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    filter: alpha(opacity=0);
    opacity: 0;
    line-break: auto;
}

.tooltip.in {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.tooltip.top {
    margin-top: -3px;
    padding: 5px 0;
}

.tooltip.right {
    margin-left: 3px;
    padding: 0 5px;
}

.tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0;
}

.tooltip.left {
    margin-left: -3px;
    padding: 0 5px;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    right: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

/* css tooltip generator - http://www.menucool.com/tooltip/css-tooltip */
.css-tooltip {
    display:inline-block;
    position:relative;
    /*border-bottom:1px dotted #666666;*/
    text-align:left;
}

.css-tooltip h3 {margin:12px 0;}

.css-tooltip .top {
    min-width:200px;
    max-width:400px;
    top:-20px;
    left:50%;
    transform:translate(-30%,-100%);
    padding:5px;
    color:#ffffff;
    background-color:#000000;
    font-weight:normal;
    font-size:11px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    /*box-shadow:0 5px 10px rgba(0,0,0,20%);*/
    display:none;
}

.css-tooltip:hover .top {
    display:block;
}

.css-tooltip .top i {
    position:absolute;
    top:100%;
    left:30%;
    margin-left:-15px;
    width:30px;
    height:15px;
    overflow:hidden;
}

.css-tooltip .top i::after {
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#000000;
    /*box-shadow:0 5px 10px rgba(0,0,0,20%);*/
}


/*
 * Angular Bootstrap UI Template styles
 * Typeahead (ui.bootstrap.typeahead)
 **/


/*
 * Angular Toggle switch styles
 **/

.toggle-switch {
    border: 1px solid #CFD8DC;
}

.toggle-switch span {
    line-height: 28px;
}

.toggle-switch .switch-left {
    background: #7CB342; /* #039BE5; */
    color: #FFFFFF;
}

.toggle-switch .knob {
    border-left: 1px solid #CFD8DC;
    border-right: 0;
}

.toggle-switch .switch-right {
    border-left: 1px solid #CFD8DC;
    background: #E51C23;
    color: #FFFFFF;
}

.switch {
    margin: 4px 0 0;
    background-color: #E0E0E0;
    border-color: #D6D6D6;
}

.switch.blue {
    background: #039BE5;
    border-color: #039BE5;
}

.switch.red {
    background: #E51C23;
    border-color: #E51C23;
}

.switch.blue.checked,
.switch.red.checked {
    background: #7CB342;
    border-color: #7CB342;
}


/*
 * Tag styles
 * tag/key skill container
 **/

.tag-list,
.skill-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tag-list > .tag,
.skill-list > .tag {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 1px;
    text-transform: none;
    line-height: 1;
    cursor: pointer;
}

.tag-list > .tag > div.drop,
.skill-list > .tag > div.drop {
    left: -1px;
    width: 260px;
    border: 1px solid #212121;
    border-radius: 2px;
    padding: 6px;
    font-size: smaller;
    background: #455A64;
    color: #FFFFFF;
}

.tag-list > .tag > div.drop > h6,
.skill-list > .tag > div.drop > h6 {
    margin-bottom: 6px;
    padding: 6px 0;
    border-bottom: 0.1em solid #FFFFFF;
    font-weight: 700;
    color: #FFFFFF;
}

.tag-list > .tag > div.drop > p,
.skill-list > .tag > div.drop > p {
    padding: 6px 0;
    margin-bottom: 6px;
    line-height: 1.5;
    color: #FFFFFF;
    cursor: text;
}

.tag-list > .tag > div.drop textarea,
.skill-list > .tag > div.drop textarea {
    background: #455A64;
    color: #FFFFFF;
    cursor: text;
}

.tag-list > .tag > div.drop > div > a,
.skill-list > .tag > div.drop > div > a {
    text-decoration: none;
    color: #FFFFFF;
}

.tag-list > .tag > div.drop > div > a:hover,
.skill-list > .tag > div.drop > div > a:hover {
    text-decoration: underline;
}


/*
 * Tag/panel remove styles
 * little 'x' in top right corner that allows user to remove tag
 **/

.tag .remove,
.card .remove {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px !important;
    color: #263238;
    text-shadow: 0 0 2px #FFFFFF;
    cursor: pointer;
    z-index: 1;
}

.tag .remove i.icon,
.card .remove i.icon {
    font-size: 1.3em;
}

.tag .remove-tag,
.card .remove-tag {
    right: -18px;
    top: -18px;
}

.tag .remove-panel,
.card .remove-panel {
    right: -5px;
    top: -5px;
}

.tag .remove:hover,
.card .remove:hover {
    color: #E51C23;
}


/*
 * Tag/panel edit styles
 * edit button for learnign objectived and success criteria
 **/

.card .edit {
    position: absolute;
    right: 2px;
    bottom: -5px;
    background-color: #FFFFFF;
    padding: 10px !important;
    z-index: 1;
}

.card .edit small {
    color: #0091EA;
    cursor: pointer;
}

.card .edit:hover small {
    text-decoration: underline;
}

/* new style for intentions and criteria */
.tag .edit {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 16px !important;
    color: #263238;
    cursor: pointer;
    z-index: 1;
}

.tag .edit:hover {
    text-decoration: underline;
    color: #FFA270;
}


/*
 * Tag search dropdown styles
 * drop-down panel that appears when user types text into tag or sub-tag fields
 **/

.input .tag-search,
.lw-input .tag-search,
.form-input .tag-search {
    width: 95%;
    min-width: 250px;
    max-height: 250px;
    margin-top: -10px;
    margin-left: 10px;
    background-color: #FFFFFF;
    overflow: auto;
}

.form-input .tag-search {
    margin-top: 0;
}

.input .tag-search,
.lw-input .tag-search,
.form-input .tag-search,
.flex-item .tag-search {
    width: 95%;
    min-width: 250px;
    max-height: 250px;
    margin-left: 10px;
    background-color: #FFFFFF;
    overflow: auto;
}

/*.input .tag-search > a, .lw-input .tag-search > a, .flex-item .tag-search > a,*/
.input .tag-search > *,
.lw-input .tag-search > *,
.form-input .tag-search > *,
.flex-item .tag-search > * {
    display: block;
    padding: 12px 20px;
    cursor: pointer;
}

/*.input .tag-search > a:hover, .lw-input .tag-search > a:hover, .flex-item .tag-search > a:hover,*/
.input .tag-search > *:hover,
.lw-input .tag-search > *:hover,
.form-input .tag-search > *:hover,
.flex-item .tag-search > *:hover {
    background-color: #EEFFEE;
    color: #666666;
    text-decoration: none;
}


/*
 * File attachments styles
 * files/attachment styles
 **/

/* attachment panel styles */
.file-list {
    clear: both;
}

.file-list .file {
    display: inline-block;
    margin: 0 10px 10px 0;
}

.file-list .file .file-icon {
    display: inline-block;
    vertical-align: top;
    width: 60px;
    height: 60px;
    padding: 10px;
    background: #2980B9;
    border-radius: 1px 0 0 1px;
}

.file-list .file .file-icon span {
    display: inline-block;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.file-list .file .file-icon span em {
    display: table-cell;
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.file-list .file .file-icon span em img {
    width: 100%;
    height: auto;
    border: 0;
}

.file-list .file .file-data {
    display: inline-block;
    vertical-align: top;
    width: 230px;
    height: 60px;
    padding: 10px;
    background: #F1F1F1;
    border-radius: 0 1px 1px 0;
}

.file-list .file .file-data > span {
    display: block;
    line-height: 20px;
}

.file-list .file .file-actions {
    clear: both;
}

.file-list .file .file-actions > span {
    float: right;
    line-height: 20px;
    cursor: pointer;
}

/* regular file blocks */
.nfile-list {
    display: flex;
    flex-wrap: wrap;
}

.nfile-list.documents {
    flex-direction: column;
}

.nfile-list > .file {
    position: relative;
    width: 320px;
    margin: 10px;
    margin-left: 0;
}

.nfile-list > .file.full-width {
    width: auto;
}

.nfile-list > .file.bottom-border {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nfile-list > .file.no-border {
    border: none;
}

.nfile-list > .file.bottom-margin-only {
    margin: 0;
    margin-bottom: 10px;
}

.nfile-list.documents > .file:last-child {
    margin: 0;
}

.nfile-list > .file > .file-details {
    display: flex;
}

.nfile-list > .file > .file-details > .file-icon {
    flex: 1 0 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-color: #2980B9;
    background-size: 40px;
    background-position: 10px 10px;
    border-radius: 1px 0 0 1px;
}

.nfile-list > .file > .file-details > .file-name-date {
    flex: 0 1 100%;
    background: #F1F1F1;
    border-radius: 0 1px 1px 0;
}

.nfile-list > .file > .file-details > .file-name-date > .file-name, .nfile-list > .file > .file-details > .file-name-date > .file-date {
    display: block;
    padding: 4px 10px;
}

.nfile-list > .file > .file-details > .file-name-date > .file-date {
    color: #888888;
}

.nfile-list > .file > .file-actions {
    padding: 0 5px;
    text-align: right;
}

.nfile-list > .file > .file-actions > span > a {
    cursor: pointer;
}

/* new file 2.0 presentation */
.nfile-list > .file {
    display: flex;
    align-items: center;
    background-color: rgba(240,240,240,0.8);
}

.nfile-list > .file.no-background {
    background-color: transparent;
}

.nfile-list > .file.selectable:hover {
    background-color: rgba(225,245,254,0.4);
}

.nfile-list > .file.selected {
    background-color: rgba(225,245,254,1);
}

.nfile-list > .file > .file-properties {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.nfile-list > .file.clickable > .file-properties, .nfile-list > .file.selectable > .file-properties {
    cursor: pointer;
}

.nfile-list > .file > .file-properties > .icon-block {
    margin: 5px;
    padding: 10px 5px;
}

.nfile-list > .file > .file-properties > .icon-block > .file-icon {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.nfile-list > .file > .file-properties > .content-block {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    margin: 5px;
}

.nfile-list > .file > .file-properties > .content-block > .file-name {
}

.nfile-list > .file > .file-properties > .content-block > .sub-heading {
    font-size: 11px;
    color: rgba(130,130,130,0.9);
}

.nfile-list > .file > .options-block {
    margin: 5px;
}

.nfile-list > .file > .options-block > .file-options {
    padding: 10px 5px;
    font-size: 24px;
    color: rgba(130,130,130,0.9);
    cursor: pointer;
}

.nfile-list > .file > .options-block > .file-options:hover {
    background-color: rgba(220,220,220,0.4);
    color: rgba(50,50,50,0.9);
}

.nfile-list > .file > .context-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    /*right: -210px;*/
    right: 3px;
    /*top: 54px;*/
    top: 46px;
    width: 210px;
    font-size: 11px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.12);
    z-index: 1;
}

.nfile-list > .file > .context-menu > .file-access-options > .file-access-option, .nfile-list > .file > .context-menu > .file-actions > .file-action {
    padding: 4px 10px;
    cursor: pointer;
}

.nfile-list > .file > .context-menu > .file-access-options > .file-access-option:hover, .nfile-list > .file > .context-menu > .file-actions > .file-action:hover {
    background-color: rgba(220,220,220,40%);
    color: rgba(50,50,50,90%);
}

.nfile-list > .file > .context-menu > .file-access-options > .file-access-option {
    display: flex;
    align-items: center;
}


.attachment-file-list {
    display: flex;
    flex-direction: column;
    min-height: 150px;
}

.attachment-file-list > .file {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,12%);
}

.attachment-file-list > .file:hover {
    background-color: rgba(225,245,254,40%);
}

.attachment-file-list > .file.selected {
    background-color: rgba(225,245,254,100%);
}

.attachment-file-list > .file > .file-properties {
    display: flex;
    align-items: center;
    flex-grow: 1;
    cursor: pointer;
}

.attachment-file-list > .file > .file-properties > .icon-block {
    margin: 5px;
    padding: 10px 5px;
}

.attachment-file-list > .file > .file-properties > .icon-block > .select-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.attachment-file-list > .file > .file-properties > .icon-block > .select-icon > i {
    display: none;
}

.attachment-file-list > .file.selected > .file-properties > .icon-block > .select-icon > i {
    display: inline;
}

.attachment-file-list > .file > .file-properties > .icon-block > .file-icon {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    font-size: 24px;
}

.attachment-file-list > .file > .file-properties > .content-block {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    margin: 5px;
}

.attachment-file-list > .file > .file-properties > .content-block > .file-name {
    word-break: break-all;
}

.attachment-file-list > .file > .file-properties > .content-block > .sub-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: rgba(130,130,130,90%);
    word-break: break-all;
}

.attachment-file-list > .file > .file-properties > .content-block > .sub-heading > * {

}

.attachment-file-list > .file > .file-properties > .options-block {
    margin: 5px;
}

.attachment-file-list > .file > .options-block > .file-options {
    padding: 10px 5px;
    font-size: 24px;
    color: rgba(130,130,130,90%);
    cursor: pointer;
}

.attachment-file-list > .file > .options-block > .file-options:hover {
    background-color: rgba(220,220,220,40%);
    color: rgba(50,50,50,90%);
}

.attachment-file-list > .file > .context-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 3px;
    top: 46px;
    width: 210px;
    font-size: 11px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,12%);
    z-index: 1;
}

.attachment-file-list > .file > .context-menu.last {
    top: auto;
    bottom: 46px;
}

.attachment-file-list > .file > .context-menu > .file-access-options > .file-access-option, .attachment-file-list > .file > .context-menu > .file-attachment-options > .file-attachment-option, .attachment-file-list > .file > .context-menu > .file-actions > .file-action {
    padding: 4px 10px;
    cursor: pointer;
}

.attachment-file-list > .file > .context-menu > .file-access-options > .file-access-option:hover, .attachment-file-list > .file > .context-menu > .file-attachment-options > .file-attachment-option:hover, .attachment-file-list > .file > .context-menu > .file-actions > .file-action:hover {
    background-color: rgba(220,220,220,40%);
    color: rgba(50,50,50,90%);
}

.attachment-file-list > .file > .context-menu > .file-access-options > .file-access-option, .attachment-file-list > .file > .context-menu > .file-attachment-options > .file-attachment-option {
    display: flex;
    align-items: center;
}

.attachment-file-list > .file > .context-menu > .file-access-options > .file-access-option.selected, .attachment-file-list > .file > .context-menu > .file-attachment-options > .file-attachment-option.selected {
    font-weight: 700;
}

.attachment-file-list > .file > .context-menu > .file-access-options > .file-access-option, .attachment-file-list > .file > .context-menu > .file-attachment-options > .file-attachment-option > .option-label {
    flex-grow: 1;
}

.attachment-file-list > .file > .context-menu > .file-access-options > .file-access-option, .attachment-file-list > .file > .context-menu > .file-attachment-options > .file-attachment-option > .option-checkmark {
    display: none;
    color: blue;
}

.attachment-file-list > .file > .context-menu > .file-access-options > .file-access-option.selected, .attachment-file-list > .file > .context-menu > .file-attachment-options > .file-attachment-option.selected > .option-checkmark {
    display: block;
}


/*
 * Animated spinner
 * rotate icon 360 degrees
 **/

.icon.rotate {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg) translateX(0);
    }
    to {
        transform: rotate(360deg) translateX(0);
    }
}


/*
 * Flex styles
 * new flex layout styles
 **/

.flex-container {
    display: flex;
}

.flex-container.vertical {
    flex-direction: column;
}

.flex-item {
    position: relative;
    min-width: 60px;
    padding: 0 15px;
}

.flex-item.vertical {
    padding: 10px 15px;
}

.flex-item.half {
    min-width: 30px;
}

.flex-item.double {
    min-width: 120px;
}

.flex-item.triple {
    min-width: 180px;
}

.flex-item.flex-container {
    position: relative;
    padding: 0;
}

.vert-item {
    position: relative;
    padding: 10px 0;
}

.vert-item.horizontal {
    padding: 10px 15px;
}

.flex-item .error-message,
.vert-item .error-message {
    font-size: 12px;
    line-height: 1px;
    color: #E51C23;
    opacity: 0;
    visibility: hidden;
}

.flex-item.error .error-message,
.vert-item.error .error-message {
    opacity: 1;
    visibility: visible;
}


/*
 * Definition list
 **/

dl.basic,
dl.horizontal {
    font-size: 0.9em;
    /* columns: 2; */
    /* -webkit-columns: 2; */
    /* -moz-columns: 2; */
}

dl.basic > dt {
    font-weight: bold;
    text-decoration: underline;
}

dl.basic > dd {
    margin: 0;
    padding: 0 0 0.5em 0;
}

dl.horizontal > dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: 700;
    color: green;
}

dl.horizontal > dt:after {
    content: ":";
}

dl.horizontal > dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
}


/*
 * Simple replacement for difinition list
 *
 * Unlike standard horizontal dl it will keep itself aligned when you don't
 * have anything to display in dd
 **/
div.dl-horizontal {
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
}

div.dl-horizontal > div.group {
    display: flex;
    padding: 2.5px 0;
}

div.dl-horizontal > div.group:first-child {
    padding-top: 0;
}

div.dl-horizontal > div.group:last-child {
    padding-bottom: 0;
}

div.dl-horizontal > div.group > div.dt {
    flex: 0 0 100px;
    margin-right: 5px;
    font-weight: 700;
    color: green;
}

/*div.dl-horizontal > div.group > div.dt:after {
    content: ":";
}*/

div.dl-horizontal > div.group > div.dd {
    flex-grow: 1;
}


/*
 * Badges, pills
 **/
.lw-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lw-badge {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 10px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: 1px;
}

.lw-badge:last-child {
    margin-right: 0;
}

.lw-badge-pill {
    padding: 3px 8px;
    border-radius: 15px;
}

.lw-badge-thickest-font {
    font-weight: 700;
}

.lw-badge-double-padding {
    padding: 6px 12px;
}

.lw-badge-raised {
    box-shadow: 0 2px 1px -1px rgba(0,0,0,20%), 0 1px 1px 0 rgba(0,0,0,14%), 0 1px 3px 0 rgba(0,0,0,12%);
}

.lw-badge-border {
    box-shadow: 0 0 1px 1px rgba(0,0,0,12%);
}

.lw-badge-hover:hover {
    background-color: #F1F1F1;
    color: #424242;
}

.lw-badge-clickable {
    cursor: pointer;
}

.badge-action {
    display: flex;
    padding: 3px;
    border: 1px solid #9e9e9e;
    border-radius: 50%;
}

.badge-action:hover {
    border-color: #F44336;
    cursor: pointer;
}

.lw-badge-remove {
    cursor: pointer;
}

.lw-badge-remove:hover {
    color: #F44336;
}

.lw-badge-default {
    background-color: #2BBBAD;
    color: #FFFFFF;
}

.lw-badge-primary {
    background-color: #039BE5;
    color: #FFFFFF;
}

.lw-badge-secondary {
    background-color: #FFFFFF;
    color: #039BE5;
}

.lw-badge-success {
    background-color: #00C851;
    color: #FFFFFF;
}

.lw-badge-danger {
    background-color: #FF3547;
    color: #FFFFFF;
}

.lw-badge-warning {
    background-color: #FFBB33;
    color: #FFFFFF;
}

.lw-badge-info {
    background-color: #33B5E5;
    color: #FFFFFF;
}

.lw-badge-light {
    background-color: #E0E0E0;
    color: #424242;
}

.lw-badge-dark {
    background-color: #212121;
    color: #FFFFFF;
}

.lw-badge-white {
    background-color: #FFFFFF;
    color: #424242;
}

.lw-chips {
    margin: 0 5px 3px 0;
}

.lw-chip {
    display: inline-block;
    min-width: 10px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 400;
    /*background-color: #ECEFF1;*/
    /*color: rgba(0,0,0,0.6);*/
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

.lw-chip, .lw-chip-icon, .lw-chip img {
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
}

.lw-chip-icon, .lw-chip img {
    float: left;
    width: 32px;
    margin: 0 8px 0 -12px;
    border-radius: 50%;
}

.lw-chip-icon {
    display: block;
    text-align: center;
    background: #009587;
    color: white;
    border-radius: 50%;
}

.lw-chip img {
    height: 32px;
    text-align: center;
    background: #009587;
    color: white;
}

.lw-chip-thick-font {
    font-weight: 700;
}

.lw-chip-raised {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,14%), 0 1px 5px 0 rgba(0,0,0,12%), 0 3px 1px -2px rgba(0,0,0,20%);
}

.lw-chip-clickable {
    cursor: pointer;
}

.lw-chip-remove {
    cursor: pointer;
}

.lw-chip-remove:hover {
    color: #F44336;
}


/*
 * Overwriting bage/chip style to suite certain modules
 **/
.learner-support .lw-badge, .modal-body .lw-badge {
    line-height: 1.8;
    white-space: normal;
}


/*
 * Box for (outcomes, key learnings, experiences, concepts, evaluations(assessments), intentions, success criteria, improvements, reflections)
 * primarily used in the Planner but now also can be found in Assignments, Gradebook and VSWare modules
 **/
.callout-container { }

.callout-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 5px;
}

.callout {
    flex: 0 1 49.5%;
    padding: 10px;
    padding-right: 27px; /* clearance the actions */
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,12%);
    word-break: break-word;
}

.callout.selectable {
    cursor: pointer;
}

.callout.selectable:hover {
    background-color: rgba(100,220,50,10%);
}

@media (max-width: 500px) {
    .callout {
        flex: 0 1 100%;
    }
}

.callout > .remove-action,
.callout > .edit-action {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    min-width: 0;
    width: 32px;
    height: 32px;
    font-size: 17px;
    color: #263238;
    cursor: pointer;
    z-index: 1;
}

.callout > .remove-action {
    top: 0;
}

.callout > .edit-action {
    bottom: 0;
}

.callout > .remove-action:hover {
    color: #E51C23;
}

.callout > .edit-action:hover {
    color: #03A9F4;
}

.callout > .crumbs-noaction {
    display: flex;
    flex-flow: row nowrap;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 42px;
    padding: 10px;
    padding-right: 27px; /* clearance the actions */
}

.callout > .content {
    margin: 32px 0 15px;
    white-space: pre-wrap;
}

.callout > .crumbs-noaction > .crumbs {
    flex: 0 1 100%;
    overflow: hidden;
}

.callout > .badges-and-files, .callout > .badges-and-action {
}

.callout > .badges-and-files > .lw-badges, .callout > .badges-and-action > .lw-badges {
    gap: 6px;
    margin-top: 10px;
}

.callout > .badges-and-files > .lw-badges > .lw-badge {
}


/*
 * Avatar classes
 * first introduced as part of learner support
 **/
.user-avatar {
    display: flex;
    align-items: center;
    gap: 3px 6px;
}

.user-avatar.wrap-name {

}

.user-avatar.clickable {
    cursor: pointer;
}

.user-avatar > .user-name {

}

.user-avatar > .user-name.bold {
    font-weight: 700;
}

.user-avatar > .user-name.semi-bold {
    font-weight: 600;
}

.user-avatar > .user-email {

}

.user-avatar > .user-email.grey {
    color: #9E9E9E;
}

.user-avatar > .user-age {

}

.user-avatar > .action {
    cursor: pointer;
}

.user-avatar > .action > .icon {
    color: #313131;
}

.user-avatar > .action:hover > .icon {
    color: #F44336;
}

.avatar-img {
    flex: 1 0 18px;
    width: 18px;
    height: 18px;
    max-width: 18px;
    /*background-size: cover;*/
    background-size: 18px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    /*box-shadow: 0 0 1px 1px rgba(0,0,0,0.12);*/
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
}

.avatar-img.avatar-24 {
    flex: 1 0 24px;
    width: 24px;
    height: 24px;
    max-width: 24px;
    background-size: 24px 24px;
}

.avatar-img.avatar-33 {
    flex: 1 0 33px;
    width: 33px;
    height: 33px;
    max-width: 33px;
    background-size: 33px 33px;
}

.avatar-img.avatar-42 {
    flex: 1 0 42px;
    width: 42px;
    height: 42px;
    max-width: 42px;
    background-size: 42px 42px;
}

.avatar-img.avatar-51 {
    flex: 1 0 51px;
    width: 51px;
    height: 51px;
    max-width: 51px;
    background-size: 51px 51px;
}


/*
 * framed border for each block
 * first introduced as part of learner support
 **/
.frame-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin: 10px;
    line-height: 37px;
}

.frame-title > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.frame-title .title {
    font-weight: 700;
}

.frame-footer {
    margin: 10px;
    /*font-weight: 700;*/
    line-height: 37px;
}

.frame {
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,9%);
}


div.dl-horizontal > div.group > div.dt {
    color: #939396 !important;
    font-weight: 400 !important;
    flex: 0 0 80px !important;
}

div.dl-horizontal {
    font-size: 0.92em !important;
}


/*
 * ILP Record styles
 * Checklist, Plan, Plan Review
 **/
.ilp-records {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ilp-records > .record {
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,6%);
}

.ilp-records > .record:hover {
    background-color: #F3F3F3;
    cursor: pointer;
}

.ilp-records > .record > .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 30px;
}

.ilp-records > .record .title + .record-text {
    padding-top: 10px;
}


/*
 * Learner notes styles
 * first introduced as part of learner support
 **/
.learner-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.learner-notes .note {
    position: relative;
    padding: 10px;
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    border-radius: 4px;
}

.learner-notes .note.linked {
    border-color: #0D47A1;
}

.learner-notes .note.referred {
    border-color: #C62828;
}

.learner-notes .note:hover {
    background-color: #F3F3F3;
    cursor: pointer;
}

.learner-notes .note.linked:hover {
    background-color: #ECF8FE;
}

.learner-notes .note.referred:hover {
    background-color: #FFEAE3;
}

.learner-notes .note[disabled=disabled],
.learner-notes .note[disabled=disabled]:hover,
.learner-notes .note.linked[disabled=disabled],
.learner-notes .note.linked[disabled=disabled]:hover,
.learner-notes .note.referred[disabled=disabled],
.learner-notes .note.referred[disabled=disabled]:hover {
    border-color: #DFDFDF;
    background: #E9E9E9;
    cursor: default;
}

.learner-notes .note > .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 30px;
}

.learner-notes .note .title + .note-text {
    padding-top: 10px;
}

.learner-notes .parent {
    margin: -15px auto 0;
    width: 99%;
}

.learner-notes .parent + .parent {
    margin: -15px autp 0;
    width: 98%;
}

.linked-note, .referred-note {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 0 5px;
    border: 1px solid #E9E9E9;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.linked-note {
    border: 1px solid #BBDEFB;
    background-color: #BBDEFB;
    /*color: #484848;*/
}

.referred-note {
    background-color: #FFCCBC;
    border: 1px solid #FFCCBC;
    /*color: #484848;*/
}


/*
 * Learner notes styles
 * updated with introduction of linked and referred notes
 **/

.new-learner-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.new-learner-notes .notes-card {
    border: 1px solid #E9E9E9;
    border-radius: 4px;
}

/*.new-learner-notes .notes-card.linked {
    border-color: #E6F7FE;
}*/

/*.new-learner-notes .notes-card.referred {
    border-color: #FFECE5;
}*/

.new-learner-notes .notes-card .status {
    height: 42px;
    padding: 10px;
    background-color: #F2F2F2;
    font-weight: 600;
}

/*.new-learner-notes .notes-card.linked .status {
    background-color: #BBDEFB;
    color: #484848;
}*/

/*.new-learner-notes .notes-card.referred .status {
    background-color: #FFCCBC;
    color: #484848;
}*/

.new-learner-notes .notes-card.linked .status:before, .new-learner-notes .notes-card.referred .status:before {
    float: right;
    margin: 0 0 0 5px;
    padding: 0 5px;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 3px;
}

.new-learner-notes .notes-card.linked .status:before {
    content: 'linked';
    background-color: #BBDEFB;
    /*color: #484848;*/
}

.new-learner-notes .notes-card.referred .status:before {
    content: 'referral';
    background-color: #FFCCBC;
    /*color: #484848;*/
}

.new-learner-notes .notes-card .notes {
    display: flex;
    flex-direction: column;
}

.new-learner-notes .notes-card .notes .note {
    padding: 10px 15px;
    cursor: pointer;
}

.new-learner-notes .notes-card .notes .note:hover {
    background-color: #F2F2F2;
}

.new-learner-notes .notes-card.linked .notes .note:hover {
    background-color: #EDF7FE;
}

.new-learner-notes .notes-card.referred .notes .note:hover {
    background-color: #FDF3F2;
}

.new-learner-notes .notes-card .notes .note[disabled=disabled],
.new-learner-notes .notes-card .notes .note[disabled=disabled]:hover,
.new-learner-notes .notes-card.linked .notes .note[disabled=disabled],
.new-learner-notes .notes-card.linked .notes .note[disabled=disabled]:hover,
.new-learner-notes .notes-card.referred .notes .note[disabled=disabled],
.new-learner-notes .notes-card.referred .notes .note[disabled=disabled]:hover {
    background: #E9E9E9;
    cursor: default;
}

.new-learner-notes .notes-card .notes .note .identifiers {
    display: none;
    font-size: 10px;
    line-height: 12px;
}

.new-learner-notes .notes-card .notes .note .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 30px;
}

.new-learner-notes .notes-card .notes .note .note-text {
    padding-top: 5px;
}

.new-learner-notes .notes-card .notes .note + .note:before {
    display: block;
    content: '';
    line-height: 1px;
    height: 1px;
    margin: -10px 0 10px;
    background-color: #F2F2F2;
}


/*
 * Learner ilps styles
 * first introduced as part of learner support
 **/
.learner-ilps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.learner-ilps > .ilp {
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.06);
}

.learner-ilps > .ilp:hover {
    background-color: #F3F3F3;
    cursor: pointer;
}

.learner-ilps > .ilp > .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 30px;
}

.learner-ilps > .ilp .title + .user-avatar {
    padding-top: 10px;
}

.learner-ilps > .ilp > .ilp-progress {
    display: flex;
    gap: 10px;
}

.learner-ilps > .ilp > .ilp-progress > .progress-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.learner-ilps > .ilp > .ilp-progress > .recent-changes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.learner-ilps > .ilp > .ilp-progress > .recent-changes > .recent-changes-table {
    display: table;
}

.learner-ilps > .ilp > .ilp-progress > .recent-changes > .recent-changes-table .table-row {
    display: table-row;
}

.learner-ilps > .ilp > .ilp-progress > .recent-changes > .recent-changes-table .table-cell {
    display: table-cell;
    padding: 2.5px;
    vertical-align: middle;
}

/*
 * Learner conversation styles
 * first introduced as part of learner support
 **/
.learner-conversations {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.learner-conversations > .conversation {
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,6%);
}

.learner-conversations > .conversation:hover {
    background-color: #F3F3F3;
    cursor: pointer;
}

.learner-conversations > .conversation > .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 30px;
}

.learner-conversations > .conversation .title + .conversation-text {
    padding-top: 10px;
}

.DnnModule-Messaging-Notifications ul.dnnAdminTabNav {
    height: 42px;
    border-bottom: 1px solid #DDDDDD;
}

.messageControls {
    border: none;
}

.conversation-recipients > .recipients {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.conversation-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conversation-messages > .conversation-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 34px;
}

.conversation-messages > .conversation-message:first-child {

}

.conversation-messages > .conversation-message:last-child {

}

.conversation-messages > .conversation-message .message-sender {
    font-weight: 700;
}

.conversation-messages > .conversation-message > .user-avatar {
    padding-top: 20px; /* to match .message */
}

.conversation-messages > .conversation-message > .message-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.conversation-messages > .conversation-message > .message-body > .message {
    padding: 20px 10px;
    color: #4D4D4D;
    background-color: rgba(240,240,255,80%);
    border-radius: 2px;
    box-shadow: 1px 1px 0 0 rgba(100,121,143,12%);
    white-space: normal; /* to get around Core Messaging module's css */
}

.conversation-messages > .conversation-message > .message-body > .message > .body > span {
    /*white-space: pre-line;*/ /* collapses multiple white spaces to single white space */
    white-space: pre-wrap; /* preserves multiple white spaces */
}

.conversation-messages > .conversation-message > .message-body > .message > .attachments {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.conversation-messages > .conversation-message > .message-body > .date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #BABABA;
}

.conversation-messages > .conversation-message.reverse {
    flex-direction: row-reverse;
    padding-right: 0;
    padding-left: 34px;
}

.conversation-messages > .conversation-message.reverse > .user-avatar {

}

.conversation-messages > .conversation-message.reverse > .message-body > .message {
    background-color: rgba(245,245,245,80%);
}

.conversation-messages > .conversation-message.reverse > .message-body > .date {
    flex-direction: row-reverse;
}


/*
 * Multi badge/input container
 * first intorduced as part of learner support
 **/
.tbd-multi-badge-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;

    min-height: 42px;
    padding: 6px;
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    /*border-bottom: none;*/
}

.tbd-multi-badge-input-container[disabled] {
    background-color: #ECEFF1;
    cursor: default;
}

.tbd-multi-badge-input-container > * {
    /*margin: 0 5px 5px 0;*/
}

.tbd-multi-badge-input-container > .tbd-badge, .tbd-multi-badge-input-container > .tbd-chip {
    display: flex;
    align-items: center;
    gap: 3px 6px;

    padding: 3px 6px;
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    border-radius: 2px;
}

.tbd-multi-badge-input-container > .tbd-badge.light-grey, .tbd-multi-badge-input-container > .tbd-chip.light-grey {
    background-color: #E0E0E0;
    color: #424242;
}

.tbd-multi-badge-input-container > .input-container {
    flex-grow: 1;
    border: 1px solid #F0F0F0;
}

.tbd-multi-badge-input-container > .input-container > input {
    padding: 5px;
    border: none;
}

.tbd-multi-badge-input-container > .input-container > input:focus {
    padding-bottom: 5px;
    border: none;
}

.tbd-multi-badge-selection-list {
    max-height: 140px;
    height: 100vh;
    padding: 3px;
    background-color: #FAFAFA;
    box-shadow: 0 0 1px 1px rgba(0,0,0,12%);
    overflow: auto;
}

.tbd-multi-badge-selection-list > ul {
    list-style: none;
    margin: 0;
}

.tbd-multi-badge-selection-list > ul > li {
    cursor: pointer;
}


/* Select list that is usualy presented after multi batch element
 **/
.tbd-select-list {
    max-height: 140px;
    height: 100vh;
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    overflow: auto;
}

.tbd-multi-badge-input-container ~ .tbd-select-list {
    border-top: none;
}

.tbd-select-list > ul {
    list-style: none;
    margin: 0;
}

.tbd-select-list > ul > li {
    padding: 6px 12px;
    cursor: pointer;
}


/* Modified list for learner tag selection
 **/
.tbd-select-list.learner-tags li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tbd-select-list.learner-tags li .tag-name {
    flex: 1 1 100%;
}

.tbd-select-list.learner-tags li .tag-options {
    flex: 1 0 100px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.tbd-select-list.learner-tags li .tag-options .priority,
.tbd-select-list.learner-tags li .tag-options .style,
.tbd-select-list.learner-tags li .tag-options .edit {
    flex: 0 0 20px;
    display: flex;
}

.tbd-select-list.learner-tags li .tag-options .priority .icon,
.tbd-select-list.learner-tags li .tag-options .style .icon,
.tbd-select-list.learner-tags li .tag-options .style .icon-contrast,
.tbd-select-list.learner-tags li .tag-options .edit .icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.tbd-select-list.learner-tags li .tag-options .priority .icon {
    color: #D2D2D2;
}

.tbd-select-list.learner-tags li .tag-options .style .icon {
    border-radius: 50%;
}

.tbd-select-list.learner-tags li .tag-options .style .icon-contrast {
    color: #E9E9E9;
}

.tbd-select-list.learner-tags li .tag-options .style .icon-blocked,
.tbd-select-list.learner-tags li .tag-options .style .icon-radio-unchecked {
    background-color: #FFFFFF;
    border-radius: 50%;
}

.tbd-select-list.learner-tags li .tag-options .style .icon-blocked {
    color: #F44336;
}

.tbd-select-list.learner-tags li .tag-options .style div {
    width: 22px;
    height: 22px;
    background-color: #FFFFFF;
    border: 1px solid #9E9E9E;
    border-radius: 50%;
}

.tbd-select-list.learner-tags li .tag-options .edit {
    cursor: pointer;
}

.tbd-select-list.learner-tags li .tag-options .edit:hover .icon {
    background-color: #F1F1F1;
    border-radius: 3px;
    color: #323232;
}


/* Modified list for learner note category selection
 **/
.tbd-select-list.learner-note-categories li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tbd-select-list.learner-note-categories li .category-name {
    flex: 1 1 100%;
}

.tbd-select-list.learner-note-categories li .category-options {
    flex: 1 0 20px;
    display: flex;
    align-items: center;
    /*gap: 20px;*/
}

.tbd-select-list.learner-note-categories li .category-options .edit {
    flex: 0 0 20px;
    display: flex;
}

.tbd-select-list.learner-note-categories li .category-options .edit .icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.tbd-select-list.learner-note-categories li .category-options .edit {
    cursor: pointer;
}

.tbd-select-list.learner-note-categories li .category-options .edit:hover .icon {
    background-color: #F1F1F1;
    border-radius: 3px;
    color: #323232;
}


/*
 * ILP files
 * first introduced in learner support
 **/
.ilp-files {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ilp-files > .ilp-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    padding-right: 0;
    border-bottom: 1px solid rgba(0,0,0,6%);
}

.ilp-files > .ilp-file > .file-actions {
    display: flex;
    align-items: baseline;
}

.ilp-files > .ilp-file > .file-actions > .button {
    /*margin-right: 5px;*/
}

.ilp-files > .ilp-file > .file-actions > .button:last-child {
    /*margin-right: 0;*/
}


/*
 * Report learner info
 * styled after gradebook learner report (for printing purposes)
 **/
.learner-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.learner-info > .name {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
}

.learner-info > .stats {
    display: flex;
    align-items: center;
}

@media print {
    .learner-info > .name {
        font-size: 22pt;
    }

}


/*
 * Report boxes
 * styled after gradebook learner report (for printing purposes)
 **/
.lw-box-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 5px;
}

.lw-box {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 0 100px;
    padding: 10px 15px;
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    border-left-width: 2px;
}

.lw-box-info {
    position: absolute;
    right: 5px;
    top: 5px;
}

.lw-box-info > .icon-info2 {
    width: 16px;
    height: 16px;
    font-size: 18px;
    color: #D2D2D2;
    cursor: pointer;
}

.lw-box-title {
    min-height: 22px;
    font-size: 12px;
    font-weight: 600;
}

.lw-box-metric {
    min-height: 34px;
    font-size: 26px;
    line-height: 1.2;
}

.lw-box-delta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    font-size: 12px;
    color: #999999;
}

.lw-box-delta .delta {
    display: flex;
    align-items: center;
    gap: 3px;
}

.lw-box-delta .delta .icon {
    display: flex;
    font-size: 13px;
}

@media print {
    .lw-box-metric {
        font-size: 16pt;
        line-height: 1.2;
    }
}


/*
 * Report line/bar chart
 * styled after gradebook learner report (for printing purposes)
 **/
.lw-line-chart-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    background-color: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-radius: 1px;
}

.lw-line-chart-container > .title {
    width: 100%;
    /*padding: 30px 0 15px;*/
    padding-bottom: 10px;
    font-size: 18px;
    line-height: 1.2;
    /*text-transform: uppercase;*/
    word-break: break-word;
}

.lw-line-chart-container > .title > span {
    color: #9E9E9E;
}

.lw-line-chart-container > .filter {
    width: 100%;
    margin: 10px 0;
}

.lw-line-chart-container > .chart {
    position: relative;
    width: 100%;
    padding: 15px;
    background-color: #FFFFFF;
}

@media print {
    .lw-line-chart-container {
        margin-bottom: 40pt;
    }

    .lw-line-chart-container > .title {
        padding: 20pt 0 10pt;
        font-size: 18pt;
        text-transform: none;
    }

    .lw-line-chart-container > .title > span {
        color: #313131;
    }

    .lw-line-chart-container > .filter {
        display: none;
    }

    .lw-line-chart-container > .chart canvas {
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        width: auto !important;
        height: auto !important;
    }

}


/*
 * Report pods
 * styled after gradebook learner report (for printing purposes)
 **/
.lw-pod-container {
    display: flex;
    align-items: flex-start;
}

.lw-pod-container > .pod {
    flex-grow: 1;
    width: 100%;
    padding: 5px;
    border: 5px solid #FAFAFA;
    background-color: #FFFFFF;
}

.lw-pod-container > .pod > .title {
    padding: 30px 0 15px;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    word-break: break-word;
}

.lw-pod-container > .pod > .title > span {
    color: #9E9E9E;
}

.lw-pod-container > .pod > .content {
    display: flex;
    flex-direction: column;
}

.lw-pod-container > .pod > .content > .charts {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.lw-pod-container > .pod > .content > .charts > .doughnut {
    flex-grow: 1;
}

.lw-pod-container > .pod > .content > .charts > .bar {
    flex: 0 0 50%;
}

.lw-pod-container > .pod > .content > .tables {
    display: flex;
    flex-direction: column;
}

.lw-pod-container > .pod > .content > .tables > table {
    margin-bottom: 20px;
}

.lw-pod-container > .pod > .content > .tables > table:last-child {
    margin-bottom: 0;
}

.lw-pod-container > .pod > .content > .tables > .no-data-msg {
    margin: 20px 0;
    padding: 10px 15px;
    font-size: 12px;
    color: #AAAAAA;
    background-color: #E1F5FE;
    border: 6px solid #29B6F6;
    border-radius: 4px;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.12);
}

.lw-pod-container > .pod.w25 {
    flex: 0 0 25%;
}

.lw-pod-container > .pod.w33 {
    flex: 0 0 33%;
}

.lw-pod-container > .pod.w50 {
    flex: 0 0 50%;
}

.lw-pod-container > .pod.w75 {
    flex: 0 0 75%;
}

.lw-pod-container > .pod.full {
    flex-grow: 1;
}

@media print {
    .lw-pod-container {
        flex-direction: column;
        margin-bottom: 40pt;
        padding-bottom: 40pt;
    }

    .lw-pod-container > .pod {
        border-color: #FFFFFF;
    }

    .lw-pod-container > .pod > .title {
        padding: 20pt 0 10pt;
        font-size: 18pt;
        text-transform: none;
    }

    .lw-pod-container > .pod > .title > span {
        color: #313131;
    }

    .lw-pod-container > .pod > .content {
        flex-direction: row;
    }

    .lw-pod-container > .pod.full > .content {
        flex-direction: column;
    }

    .lw-pod-container > .pod > .content > .charts {
        flex: 0 0 180pt;
    }

    .lw-pod-container > .pod > .content > .charts > .doughnut canvas,
    .lw-pod-container > .pod > .content > .charts > .bar canvas {
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        width: auto !important;
        height: auto !important;
    }

    .lw-pod-container > .pod > .content > .tables {
        flex-grow: 1;
    }

    /*.lw-pod-container > .pod > .content > .tables > table tr,
    .lw-pod-container > .pod > .content > .tables > table tr th,
    .lw-pod-container > .pod > .content > .tables > table tr td {
        page-break-inside: avoid;
    }*/

    .lw-pod-container > .pod.w25,
    .lw-pod-container > .pod.w33,
    .lw-pod-container > .pod.w50,
    .lw-pod-container > .pod.w75,
    .lw-pod-container > .pod.full {
        flex-grow: 1;
        width: 100%;
    }

}


/*
 * Report assessment summary
 * styled after gradebook learner report (for printing purposes)
 **/
.assessment-summary {

}

.assessment-summary > .title {
    padding: 30px 0 15px;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    word-break: break-word;
}

.assessment-summary > .title > span {
    color: #9E9E9E;
}

@media print {
    .assessment-summary {
        margin-bottom: 40pt;
        padding-bottom: 40pt;
    }

    .assessment-summary > .title {
        padding: 20pt 0 10pt;
        font-size: 18pt;
        text-transform: none;
    }

    .assessment-summary > .title > span {
        color: #313131;
    }

    .assessment-summary > table tr {
        page-break-inside: avoid;
    }

}


/*
 * School Calendar events
 * shared css between School Calendar and Learner Support
 **/
.calendar-container {
    display: flex;
    /*align-items: flex-start;*/
    align-items: stretch;
}

.calendar-container > .calendar-day {
    flex: 1;
    min-width: 300px; /* fix for chrome as ie, edge and firefox display items with correct witdth */
    width: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.calendar-day > .day-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.day-heading > .day-of-week {
    color: #616161;
}

.day-heading > .date {
    text-align: right;
    color: #9E9E9E;
}

.calendar-day > .calendar-event-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 10px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.03);
}

.calendar-event-container > .calendar-event {
    width: 100%;
    min-height: 120px;
    margin-bottom: 10px;
    padding: 10px;

    border-left: 5px solid #9E9E9E;
    background-color: #F5F5F5;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.03);
}

.calendar-event-container > .calendar-event:last-child {
    margin-bottom: 0;
}

.calendar-event-container > .calendar-event.clickable {
    cursor: pointer;
}

.calendar-event-container > .calendar-event.clickable:hover {
    background-color: #F1F1F1;
}

.calendar-event-container > .calendar-event > .time-all-day {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
    font-size: 12px;
    font-weight: 100;
}

.calendar-event-container > .calendar-event > .title {
    font-size: 13px;
    font-weight: 600;
}

.calendar-event-container > .calendar-event > .group {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 100;
}

.calendar-event-container > .calendar-event > .group > span:after {
    content: ',';
    margin-right: 3px;
}

.calendar-event-container > .calendar-event > .group > span:last-child:after {
    content: '';
    margin-right: 0;
}

.calendar-event-container > .calendar-event > .location-subject {
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    font-size: 12px;
    font-weight: 100;
}

.calendar-event-container > .calendar-event > .badges-and-action {
    display: flex;
    justify-content: space-between;
}

.calendar-event-container > .calendar-event > .badges-and-action > .badges {
    overflow: hidden;
}

.calendar-event-container > .calendar-event > .badges-and-action > .edit-action {
    color: #263238;
    cursor: pointer;
}

.calendar-event-container > .calendar-event > .badges-and-action > .edit-action:hover {
    color: #03A9F4;
}


/*
 * School Calendar event highlights
 * shared css between School Calendar and Learner Support
 **/
.calendar-event-container > .calendar-event.assignment-due, .calendar-event-container > .calendar-event.assignments {
    border-left-color: #CF161B;
    background-color: #FCDBDA;
    color: #CF161B;
}

.calendar-event-container > .calendar-event.extra-curricular {
    border-left-color: #9C27B0;
    background-color: #E1BEE7;
    color: #9C27B0;
}

.calendar-event-container > .calendar-event.mass {
    border-left-color: #7B1FA2;
    background-color: #CE93D8;
    color: #7B1FA2;
}

.calendar-event-container > .calendar-event.meeting {
    background-color: #C5CAE9;
    border-left-color: #3F51B5;
    color: #3F51B5;
}

.calendar-event-container > .calendar-event.project {
    border-left-color: #5677FC;
    background-color: #D0D9FF;
    color: #5677FC;
}

.calendar-event-container > .calendar-event.music-and-drama {
    border-left-color: #00BCD4;
    background-color: #B2EBF2;
    color: #00BCD4;
}

.calendar-event-container > .calendar-event.sports {
    border-left-color: #259B24;
    background-color: #A3E9A4;
    color: #259B24;
}

.calendar-event-container > .calendar-event.assembly {
    border-left-color: #AFB42B;
    background-color: #F0F4C3;
    color: #AFB42B;
}

.calendar-event-container > .calendar-event.holiday {
    border-left-color: #FBC02D;
    background-color: #FFF9C4;
    color: #FBC02D;
}

.calendar-event-container > .calendar-event.school-trip, .calendar-event-container > .calendar-event.tour-and-field-trip {
    border-left-color: #F57F17;
    background-color: #FFF59D;
    color: #F57F17;
}

.calendar-event-container > .calendar-event.exam {
    border-left-color: #F57C00;
    background-color: #FFE0B2;
    color: #F57C00;
}

.calendar-event-container > .calendar-event.study {
    border-left-color: #FF5722;
    background-color: #FFCCBC;
    color: #FF5722;
}

.calendar-event-container > .calendar-event.closure, .calendar-event-container > .calendar-event.school-closed {
    border-left-color: #212121;
    background-color: #E0E0E0;
    color: #212121;
}


/* new calendare color dots */
.school-calendar .event-divider > .event-category.assignment-due, .school-calendar .event-divider > .event-category.assignments {
    background-color: #CF161B;
}

.school-calendar .event-divider > .event-category.extra-curricular {
    background-color: #9C27B0;
}

.school-calendar .event-divider > .event-category.mass {
    background-color: #7B1FA2;
}

.school-calendar .event-divider > .event-category.meeting {
    background-color: #3F51B5;
}

.school-calendar .event-divider > .event-category.project {
    background-color: #5677FC;
}

.school-calendar .event-divider > .event-category.music-and-drama {
    background-color: #00BCD4;
}

.school-calendar .event-divider > .event-category.sports {
    background-color: #259B24;
}

.school-calendar .event-divider > .event-category.assembly {
    background-color: #AFB42B;
}

.school-calendar .event-divider > .event-category.holiday {
    background-color: #FBC02D;
}

.school-calendar .event-divider > .event-category.school-trip, .school-calendar .event-divider > .event-category.tour-and-field-trip {
    background-color: #F57F17;
}

.school-calendar .event-divider > .event-category.exam {
    background-color: #F57C00;
}

.school-calendar .event-divider > .event-category.study {
    background-color: #FF5722;
}

.school-calendar .event-divider > .event-category.closure, .school-calendar .event-divider > .event-category.school-closed {
    background-color: #212121;
}


/*
 * Date and time wrapper
 * Used in Assignment and Meeting Creator to display hour and minute selectors beside calendar picker
 **/
.date-time-selector {
    display: flex;
    align-items: stretch;
    column-gap: 10px;
}

.date-time-selector .date-selector {
    padding-top: 11px;
}

.date-time-selector .time-selector {
}


/*
 * Class for div that goes over content when processing request
 */
.loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,6%);
    z-index: 1;
}

.loading-overlay > .spinner-message {
    display: flex;
    align-items: center;
    gap: 5px;

    font-size: 32px;
}

.loading-overlay > .spinner-message > .icon {
    display: inline-block;
}

.loading-overlay > .spinner-sub-message { }


/*
 * Scrollable table with fixed header row and first column
 **/

.table-with-fixed-header-and-column-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 80vh;
    overflow: auto;
}

.modal-body .table-with-fixed-header-and-column-container {
    max-height: 75vh;
}

@media (max-width: 400px) {
    .table-with-fixed-header-and-column-container {
        max-height: 530px;
    }
}

.table-with-fixed-header-and-column-container > table {
    position: relative;
    border-collapse: collapse;
    width: 99.99%;
}

.table-with-fixed-header-and-column-container > table > thead th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
    z-index: 1; /* prevent tbody>td cells from overflowing thead row (aka top header) */
}

.table-with-fixed-header-and-column-container > table > thead tr:nth-child(2) th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 60px; /* height of first thead row determines top position of second thead row */
    z-index: 1; /* prevent tbody>td cells from overflowing second thead row */
}

.table-with-fixed-header-and-column-container > table > thead tr th:first-child {
    left: 0;
    z-index: 2; /* force thead>th cells to hide under first column th cell and tbody rows under thead row */
}

.table-with-fixed-header-and-column-container > table > tbody th, .table-with-fixed-header-and-column-container > table > tbody td:first-child {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    left: 0;
    z-index: 1; /* prevent tbody>td cells to from overflowing tbody>th (or first column td) cells (aka left header) */
}

.table-with-fixed-header-and-column-container > table th > div, .table-with-fixed-header-and-column-container > table td > div {
    min-width: 60px; /* minimum base width of every cell */
    /*width: 90px;*/ /* base width of every cell */
    /*min-height: 60px;*/ /* minimum base height of every cell */
    /*height: 60px;*/ /* base height of every cell */
}

.table-with-fixed-header-and-column-container > table > thead th > div {
    min-height: auto; /* clear height on header row */
    /*height: auto;*/ /* clear height on header row */
}

.table-with-fixed-header-and-column-container > table > tbody th > div, .table-with-fixed-header-and-column-container > table > tbody td:first-child > div {
    min-width: 160px; /* single value to control left column width */
}


/*
 * Multi Range Slider
 * used by CAT4 Differentiation Bands panel
 **/
.multirange-slider.slider {
    position: relative;
    height: 10px;
    margin: 45px 0;
    background-color: rgba(0,0,0,0.06);
    border-radius: 10px;
    overflow: visible;
}

.multirange-slider.slider > .slider-range {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.multirange-slider.slider > .slider-range:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.multirange-slider.slider > .slider-range:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.multirange-slider.slider > .slider-range > .slider-handle {
    position: absolute;
    right: -5px;
    top: -5px;
    width: 20px;
    height: 20px;
    background-color: #F7F7F7;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 1px #aaa, inset 0 1px 1px #AAAAAA;
    text-align: center;
    cursor: pointer;
    z-index: 100;
}

.multirange-slider.slider > .slider-range > .slider-handle > .slider-handle-label {
    position: absolute;
    top: -34px;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.multirange-slider.slider > .slider-range > .slider-handle:hover {
    background-color: #0288D1;
}

.multirange-slider.slider > .slider-range:last-child > .slider-handle {
    display: none;
}

.multirange-slider.slider > .slider-range > .slider-label-top {
    position: absolute;
    top: -22px;
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

.multirange-slider.slider > .slider-range > .slider-label-bottom {
    position: absolute;
    top: 16px;
    display: block;
    width: 100%;
    height: 48px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    overflow: hidden;
}


/*
 * Charts background image
 * user by CAT4 module
 **/
.scatter-plot-gradient {
    background-image: url('/images/scatter-plot-bg.png');
}

.radar-plot-gradient {
    background-image: url('/images/radar-chart-bg.png'), url('/images/radar-chart-bg.png');
    /*background-image: url('/images/radar-chart-bg(2).png');*/
}


/*
 * Color arrow
 * first introduced as part of CAT4 module
 **/
.color-arrow-container {
    display: flex;
    align-items: center;
}

.color-arrow-container > .arrow-text {
    color: #9E9E9E;
}

.color-arrow {
    margin-right: 3px;
    margin-top: 3px;
    color: #9E9E9E;
}

.color-arrow.red {
    color: #E51C23;
}

.color-arrow.green {
    color: #8BC34A;
}


/*
 * Band and style square
 * first introduced as part of CAT4 module
 **/
.color-square-container {
    display: flex;
    align-items: center;
}

.color-square-container > .square-text {
    /*color: #9E9E9E;*/
}

.color-square {
    /*float: left;*/
    width: 20px;
    height: 20px;
    margin: 1px 3px 1px 0;
    border: 1px solid #EEEEEE;
    background-color: #FFFFFF;
    color: #313131;
}

/*.color-square.verbal {
    background: #FB8C00;
    background: #1E88E5;
    color: #FFFFFF;
}

.color-square.quantitative {
    background: #03A9F4;
    background: #5E35B1;
}

.color-square.non-verbal {
    background: #C158DC;
    background: #7CB342;
    color: #FFFFFF;
}

.color-square.spatial {
    background: #8E24AA;
    background: #303F9F;
    color: #FFFFFF;
}

.color-square.underperform {
    background: #FDD835;
    color: #313131;
}

.color-square.excelling {
    background: #4CAF50;
    color: #FFFFFF;
}

.color-square.average {
    background: #E1BEE7;
    color: #313131;
}

.color-square.sas-band1 {
    background: #D32F2F;
    color: #FFFFFF;
}

.color-square.sas-band2 {
    background: #FB8C00;
    color: #313131;
}

.color-square.sas-band3 {
    background: #FDD835;
    color: #313131;
}

.color-square.sas-band4 {
    background: #F3E5F5;
    color: #313131;
}

.color-square.sas-band5 {
    background: #E1BEE7;
    color: #313131;
}

.color-square.sas-band6 {
    background: #F06292;
    color: #313131;
}

.color-square.sas-band7 {
    background: #673AB7;
    color: #FFFFFF;
}

.color-square.sas-band8 {
    background: #03A9F4;
    color: #FFFFFF;
}

.color-square.sas-band9 {
    background: #4CAF50;
    color: #FFFFFF;
}*/


/*
 * Custom report selection menu
 * styled to fit-in as a button in button-group class
 **/
.custom-reports-menu-container {
    position: relative;
}

.custom-reports-menu-container > .button {
    color: inherit;
}

.custom-reports-menu-container > .button > .icon {
    margin-left: 3px;
    margin-bottom: -2px;
    font-size: 11px;
    color: inherit; /* added to get around Gradebook css */
}

.custom-reports-menu-container > .custom-reports-menu {
    position: absolute;
    right: 0;
    top: 43px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 230px;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,12%);
    z-index: 99999;
}

.custom-reports-menu-container > .custom-reports-menu > .category-item, .custom-reports-menu-container > .custom-reports-menu > .category-item > .category-reports {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.custom-reports-menu-container > .custom-reports-menu > .category-item > .category-title {
    color: #9E9E9E;
    font-weight: 600;
}

.custom-reports-menu-container > .custom-reports-menu > .category-item > .category-reports > .button.simple {
    font-weight: 600;
}


/*
 * Custom timeframe selection menu
 * styled to fit-in as a filter in filter-group class
 **/

.lw-timeframes-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.lw-timeframes-container > .timeframe {
    margin: 3px;
    padding: 3px 6px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.lw-timeframes-container > .timeframe.selected {
    font-weight: 700;
    border-bottom-color: #FF3D00;
}

.custom-timeframe-selector {
    position: absolute;
    right: 5px;
    top: 43px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,12%);
    z-index: 2;
}

.custom-timeframe-selector > .simple-button-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}


/*
 * Random styles
 * Used to give background color to textarea in Learner Support
 **/
.tbd-colored-bg {
    padding: 10px;
    background-color: #FEF8EB;
    border-radius: 2px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,6%);
}


/*
 * Activity log styles
 * Used in Learner Support activity logs
 **/
.lw-activity-log {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.lw-activity-log > .log-title {
    font-weight: 700;
}

.lw-activity-log > .log-entries {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

.lw-activity-log > .log-entries > .log-entry {
    display: flex;
    align-items: center;
    gap: 3px 6px;
    padding: 2.5px 0;
    font-size: 12px;
}

.lw-activity-log > .log-entries > .log-entry > .user-avatar { }

.lw-activity-log > .log-entries > .log-entry > .log-text { }


/*
 * Templating style
 **/
.d-flex {
    display: flex;
    align-items: center;
}

.d-flex.fd-col {
    flex-direction: column;
}

.d-flex.fw-wrap {
    flex-wrap: wrap;
}

.d-flex.ai-start {
    align-items: flex-start;
}

.d-flex.ai-end {
    align-items: flex-end;
}

.d-flex.ai-stretch {
    align-items: stretch;
}

.d-flex.jc-start {
    justify-content: flex-start;
}

.d-flex.jc-end {
    justify-content: flex-end;
}

.d-flex.jc-center {
    justify-content: center;
}

.d-flex.jc-between {
    justify-content: space-between;
}

.d-flex.jc-evenly {
    justify-content: space-evenly;
}

.d-flex.jc-around {
    justify-content: space-around;
}

.d-flex.jc-stretch {
    justify-content: stretch;
}

.d-flex.gap-0 {
    gap: 0;
}

.d-flex.gap-5 {
    gap: 5px;
}

.d-flex.gap-10 {
    gap: 10px;
}

.d-flex.gap-15 {
    gap: 15px;
}

.d-flex.gap-20 {
    gap: 20px;
}

.d-flex.gap-30 {
    gap: 30px;
}

.d-flex .col-20 {
    flex: 1 1 20%;
}

.d-flex .col-30 {
    flex: 1 1 30%;
}

.d-flex .col-40 {
    flex: 1 1 40%;
}

.d-flex .col-50 {
    flex: 1 1 50%;
}

.d-flex .col-60 {
    flex: 1 1 60%;
}

.d-flex .col-70 {
    flex: 1 1 70%;
}

.d-flex .col-80 {
    flex: 1 1 80%;
}

.d-flex .col-100 {
    flex: 1 1 100%;
}

.d-flex .col-fixed {
    flex: 0 0 auto;
}

.d-flex .col-fixed-20 {
    flex: 0 0 20px;
}

.d-flex .col-fixed-30 {
    flex: 0 0 30px;
}

.d-flex .col-fixed-40 {
    flex: 0 0 40px;
}

.d-flex .col-fixed-60 {
    flex: 0 0 60px;
}

.d-flex .col-fixed-80 {
    flex: 0 0 80px;
}

.d-flex .col-fixed-100 {
    flex: 0 0 100px;
}

.d-flex .col-fixed-200 {
    flex: 0 0 200px;
}

/*
@media (min-width: 600px) {
    .split-20-80 > .left-container {
        flex: 0 1 20%;
    }

    .split-20-80 > .right-container {
        flex: 0 1 80%;
    }

    .split-50-50 > .left-container, .split-50-50 > .right-container {
        flex: 1 1 200px;
    }
}
*/

/*
 * Overriding datepicker styles
 * Used with uib-dropdown directive to make buttons with expandable menu
 **/
.dropdown-menu {
    padding: 5px 0 !important;
}

.dropdown-menu > li > a {
    cursor: pointer;
}


/*
 * Styles for custom chart tooltip element
 **/

/* remove undesired css rule(s) inherited from base.css */
#chartjs-tooltip:before {
    content: none;
}

#chartjs-tooltip.center {
    margin: 0;
    text-align: initial;
}

#chartjs-tooltip {
    width: 300px;
    min-height: 44px;
    padding: 10px;
    border-radius: 6px;

    background-color: rgba(0,0,0,80%);
    color: rgba(255,255,255,90%);
    z-index: 10000;
}

/* note to self: 
 * custom tooltips do not support caret out of the box
 * use https://cssarrowplease.com to generate css examples
 **/
#chartjs-tooltip {
    position: relative;
    background: rgba(0,0,0,80%);
    border: 1px solid rgba(0,0,0,80%);
}

#chartjs-tooltip:after, #chartjs-tooltip:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: solid transparent;
    border-color: rgba(0,0,0,80%);
    border-width: 1px;
    pointer-events: none;
}

/* top */
#chartjs-tooltip.top:after, #chartjs-tooltip.top:before {
    left: 50%;
    bottom: 100%;
}

#chartjs-tooltip.top:after {
    margin-left: -5px;
    border-color: rgba(0,0,0,0%);
    border-bottom-color: rgba(0,0,0,80%);
    border-width: 5px;
}

#chartjs-tooltip.top:before {
    margin-left: -6px;
    border-color: rgba(0,0,0,0%);
    border-bottom-color: rgba(0,0,0,80%);
    border-width: 6px;
}

/* right */
#chartjs-tooltip.right:after, #chartjs-tooltip.right:before {
    left: 100%;
    top: 50%;
}

#chartjs-tooltip.right:after {
    margin-top: -5px;
    border-color: rgba(0,0,0,0%);
    border-left-color: rgba(0,0,0,80%);
    border-width: 5px;
}

#chartjs-tooltip.right:before {
    margin-top: -6px;
    border-color: rgba(0,0,0,0%);
    border-left-color: rgba(0,0,0,80%);
    border-width: 6px;
}

/* bottom */
#chartjs-tooltip.bottom:after, #chartjs-tooltip.bottom:before {
    left: 50%;
    top: 100%;
}

#chartjs-tooltip.bottom:after {
    margin-left: -5px;
    border-color: rgba(0,0,0,0%);
    border-top-color: rgba(0,0,0,80%);
    border-width: 5px;
}

#chartjs-tooltip.bottom:before {
    margin-left: -6px;
    border-color: rgba(0,0,0,0%);
    border-top-color: rgba(0,0,0,80%);
    border-width: 6px;
}

/* left */
#chartjs-tooltip.left:after, #chartjs-tooltip.left:before {
    right: 100%;
    top: 50%;
}

#chartjs-tooltip.left:after {
    margin-top: -5px;
    border-color: rgba(0,0,0,0%);
    border-right-color: rgba(0,0,0,80%);
    border-width: 5px;
}

#chartjs-tooltip.left:before {
    margin-top: -6px;
    border-color: rgba(0,0,0,0%);
    border-right-color: rgba(0,0,0,80%);
    border-width: 6px;
}

#chartjs-tooltip .custom-tooltip {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#chartjs-tooltip .custom-tooltip-title {
    font-weight: 600;
}

#chartjs-tooltip .custom-tooltip-body {
    font-size: 12px;
}


/*
 * Circle indicators for:
 * Learners Notes for Teachers popover
 * Learners Learning, Social and Emotional Needs popover
 * Learners ILPs popover
 **/

.circle-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,20%), 0 1px 1px 0 rgba(0,0,0,14%), 0 1px 3px 0 rgba(0,0,0,12%);
}

.circle-indicator.clickable {
    cursor: pointer;
}

.circle-indicator.red {
    background-color: #D01716;
    color: #FFFFFF;
}

.circle-indicator.amber {
    background-color: #F9F0E1;
    color: #E2934B;
}

.circle-indicator.light-blue {
    font-weight: 600;
    background-color: #DEFCFF;
    color: #0786AB;
}

.circle-indicator.light-green {
    background-color: #F1F8E9;
    color: #7CB342;
}

.circle-indicator.deep-purple {
    background-color: #EDE7F6;
    color: #6B46B7;
}


/*
 * Background color for Academic Ratio zones
 * Used in Learner Support reports
 **/

.academic-ratio-zone.red {
    background-color: #F9BDBB;
}

.academic-ratio-zone.yellow {
    background-color: #F9ECBB;
}

.academic-ratio-zone.green {
    background-color: #AED581;
}


/* Fancy tooltip for shortened text
 * Source: https://codepen.io/MaruthiMohanReddy/pen/gVWOzK
 **/

.text {
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
    text-overflow: ellipsis;
}

.text-tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease;
    bottom: 50px;
    padding: 10px;
    border-radius: 2px;
    background: rgb(2,2,111);
    color: rgb(255,255,255);
    box-shadow: 0px 0px 12px rgba(2,2,111,40%);
    z-index: 99;
}

.text:hover + .text-tooltip {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}


/* Another fancy tooltip for shortened  text
 * Source: https://codepen.io/bgrebowiec/pen/gbEPKa
 **/

.truncated {
    position: relative;
    width: 200px;
}

.truncated div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    padding: .5em;

    width: auto;
    max-width: 100%;
    /*-webkit-transition: max-width linear .5s;*/
    /*transition: max-width linear .5s;*/
}

.truncated:hover div {
    overflow: visible;
    white-space: normal;
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit*/
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

    max-width: 400%;
    width: 400%;
    z-index: 1; /* stack above subsequent cells */
}

td.tbd:hover div:before {
    background-color: #F2F2F2;
    border: 1px solid #DDDDDD;
    content: "";
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 3px;
    position: absolute;
    z-index:-1; /* stack below truncated text */
}

/* SchoolWise Shortcuts Directive
 * Basic template styles
 **/

.sw-shortcut-list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px 10px;
    padding-top: 10px;
}

.sw-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 5px;
    cursor: pointer;
}

.sw-shortcut.alt {
    color: #7DCAF0;
    background-color: #F8FAFC;
}

.sw-shortcut:hover {
    background-color: #E8F0FE;
}

.sw-shortcut.alt:hover {
    color: #039BE5;
    background-color: #EFF5FE;
}

.sw-shortcut .shortcut-icon {
    width: 48px;
    height: 48px;
}

.sw-shortcut.alt .shortcut-icon {
    width: auto;
    height: auto;
}

.sw-shortcut .shortcut-icon img {
    width: 48px;
    height: 48px;
}

.sw-shortcut .shortcut-icon .icon {
    font-size: 24px;
}

.sw-shortcut .shortcut-name {
    font-size: 13px;
    letter-spacing: 0.09px;
    line-height: 18px;
    overflow: hidden;
    text-align: center;
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    width: 76px;
    height: 36px;
}

.sw-shortcut:hover .shortcut-name {
    /*overflow-wrap: break-word;*/
    /*white-space: normal;*/
    /*word-wrap: break-word;*/
}


/* Generic card styles
 **/

.sw-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 15px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 2px rgba(0,0,0,6%);
}

.sw-card .card-heading {
    display: flex;
    flex-wrap: no-wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sw-card .card-heading .heading-text {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #4D4D4D;
}

.sw-card .card-body {
}

.sw-card .card-footer {
}


/* Specific module card styles
 **/

.microsoft-shortcuts .sw-card .config,
.google-shortcuts .sw-card .config,
.my-shortcuts .sw-card .config {
    font-size: 22px;
    color: #808080;
}

.microsoft-shortcuts .sw-card .config:hover,
.google-shortcuts .sw-card .config:hover,
.my-shortcuts .sw-card .config:hover {
    color: #606060;
    cursor: pointer;
}

.my-learner-support .sw-card.top-pane,
.my-gradebook .sw-card.top-pane,
.my-curriculum-planner .sw-card.top-pane,
.quick-task .sw-card.top-pane {
    min-height: 250px;
}

.my-learner-support .sw-card.top-pane {
    border-bottom: 2px solid #03A9F4;
}

.my-gradebook .sw-card.top-pane {
    border-bottom: 2px solid #8E24AA;
}

.my-curriculum-planner .sw-card.top-pane {
    border-bottom: 2px solid #AD1457;
}

.quick-task .sw-card.top-pane {
    border-bottom: 2px solid #FF9800;
}