diff --git a/scss/invitemanager.scss b/scss/invitemanager.scss
new file mode 100644
index 0000000..4fa502a
--- /dev/null
+++ b/scss/invitemanager.scss
@@ -0,0 +1,82 @@
+/* stylelint-disable length-zero-no-unit, color-hex-case, color-hex-length*/
+
+.path-local-treestudyplan {
+    div.tab-pane:target {
+        margin-top: 0px;
+    }
+
+    [v-cloak] {
+        visibility: hidden;
+    }
+
+    .vue-loader {
+        width: 32px;
+        margin: auto;
+    }
+
+}
+
+/*******************
+*
+* Invite manager
+*
+********************/
+.path-admin-local-treestudyplan {
+
+    table.m-cohortgrouptable,
+    table.m-roomtable {
+        width: auto;
+    }
+}
+
+.path-local-treestudyplan {
+    table.m-manage_invites {
+
+        margin-bottom: 2em;
+        width: 80%;
+    }
+
+    table.m-manage_invites thead tr {
+        background-color: #009EE2;
+        color: white;
+    }
+
+    table.m-manage_invites tbody tr:nth-child(even) {
+        background-color: #D4EDFC;
+    }
+
+    table.m-manage_invites tbody tr:nth-child(odd) {
+        background-color: white;
+    }
+
+    table.m-manage_invites tbody td {
+        padding: 5px;
+    }
+
+    table.m-manage_invites tbody td[data-field=name] {
+        width: 20em;
+    }
+    table.m-manage_invites tbody td[data-field=email] {
+        width: 10em;
+    }
+    table.m-manage_invites tbody td[data-field=date] {
+        width: 10em;
+    }
+
+    table.m-manage_invites tbody td[data-field=allow_details],
+    table.m-manage_invites tbody td[data-field=allow_calendar],
+    table.m-manage_invites tbody td[data-field=allow_badges] {
+        width: 5em;
+        padding-left: 1em;
+    }
+
+    table.m-manage_invites tbody td[data-field=control] {
+        width: 150px;
+    }
+
+    table.m-manage_invites tbody td[data-field=control] a {
+        margin-left: 7px;
+        margin-right: 7px;
+    }
+}
+
diff --git a/scss/studyplan.scss b/scss/studyplan.scss
new file mode 100644
index 0000000..a14ecff
--- /dev/null
+++ b/scss/studyplan.scss
@@ -0,0 +1,1146 @@
+/* stylelint-disable length-zero-no-unit, color-hex-case, color-hex-length, no-eol-whitespace, unit-blacklist, block-no-empty */
+
+.path-local-treestudyplan, .block_mytreestudyplan
+ {
+    /* we can override these colors in the :root field if needed */
+    --less-light: color-mix(in srgb, var(--light) 80%, #ccc);
+    --highlight-mix: 10%;
+    --highlight: var(--info);
+    --past: var(--purple);
+    --present: var(--blue);
+    --future: var(--gray);
+    --coursecat-list: var(--blue);
+    --course-list: var(--green);
+    --excellent: var(--blue);
+    --pending: var(--gray);
+    --incomplete: var(--gray);
+
+    .t-toolbox-preface {
+        margin: 10px;
+    }
+
+    .t-studyplan-container {
+        margin-top: 16px;
+        min-height: 500px;
+            
+    }
+
+    .t-studyplan-content,
+    .r-studyplan-content {
+        display: flex;
+    }
+
+    .t-studyplan-headings,
+    .r-studyplan-headings {
+        display: block; 
+
+    }
+    .t-studyplan-wrapper,
+    .r-studyplan-wrapper {
+        display: block;
+    }
+
+    .t-studyplan-timeline,
+    .r-studyplan-timeline {
+        display: grid;
+        position: relative; /* make sure this grid is the offset for all arrows that are drawn by SimpleLine */
+        /* grid-template-columns will be set in the style attribute */
+        /* Use the variables below to specify width for filter spots and course spots */
+        --studyplan-filter-width: auto; /* better leave this at auto for now*/
+        --studyplan-course-width: auto; /* better leave this at auto for now*/
+    }
+
+    .t-studyplan-scrollable,
+    .r-studyplan-scrollable {
+        overflow-x: scroll;
+        overflow-y: clip; /* to ensure the x scrollbar does not cause an y scrollbar to appear */
+        scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
+        scrollbar-width: thin;
+    }
+    .t-studyplan-scrollable::-webkit-scrollbar,
+    .r-studyplan-scrollable::-webkit-scrollbar  {
+    width: 8px;
+    }
+
+    /* Track */
+    .t-studyplan-scrollable::-webkit-scrollbar-track,
+    .r-studyplan-scrollable::-webkit-scrollbar-track {
+    background:  color-mix(in srgb, var(--primary) 20%, white);
+    }
+    
+    /* Handle */
+    .t-studyplan-scrollable::-webkit-scrollbar-thumb,
+    .r-studyplan-scrollable::-webkit-scrollbar-thumb {
+    background:var(--primary); 
+    }
+
+    .t-studyplan-column-heading,
+    .r-studyplan-column-heading {
+        color: inherit; /* placeholder */
+    }
+
+    ul.dropdown-menu.show {
+        background-color: white;
+    }
+
+    .t-studyline,
+    .r-studyline  {
+        display: grid;
+        grid-auto-flow: column;
+        /*border-bottom-style: solid;*/
+        border-color: #cccccc;
+        border-width: 1px;
+    }
+
+    .t-studyline-drag .t-studyline {
+        justify-content: start;
+    }
+
+    .t-studyline.t-studyline-heading,
+    .r-studyline.r-studyline-heading {
+        border-right-style: none;
+    }
+
+    .t-studyline.end,
+    .r-studyline.end {
+        border-right-style: solid;
+    }
+
+    .t-studyline .t-studyline-editmode-content {
+        border-right-style: solid;
+        border-color: #cccccc;
+        border-width: 1px;
+    }
+
+    .t-studyline .controlbox {
+        white-space: nowrap;
+        width: 64px;
+    }
+    .t-studyline .control {
+        display: inline-block;
+        width: 24px;
+        text-align: center;
+        padding-top: 5px;
+    }
+
+    .t-studyline-editmode-content {
+        min-width: 450px;
+        max-width: 700px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+
+    .t-studyplan-controlbox {
+        height: 30px;
+    }
+
+    .t-studyplan-controlbox .control {
+        float: right;
+        margin-left: 10px;
+        margin-right: 5px;
+    }
+
+    .t-studyline-drag {
+        display: inline;
+    }
+
+
+    .t-studyline-add {
+        margin-top: 0.5em;
+        margin-bottom: 1em;
+    }
+
+    .t-studyline-title,
+    .r-studyline-title {
+        padding-top: 5px;
+        padding-left: 10px;
+        width: 150px;
+        white-space: nowrap;
+        border-color: rgba(0, 0, 0, 0.125);
+        border-width: 1px;
+        border-left-style: solid;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+    }
+
+    .t-studyline-title abbr,
+    .r-studyline-title abbr {
+        display: inline-block;
+        vertical-align: middle;
+        font-weight: bold;
+        font-style: italic;
+    }
+
+    svg.empty-slot circle {
+        fill: transparent;
+        stroke: #ccc;
+        stroke-width: 4px;
+        stroke-opacity: 0.5;
+        stroke-dasharray: 4 4;
+    }
+
+    ul.t-item-module-children,
+    ul.t-coursecat-list li,
+    ul.t-course-list li {
+        list-style: none;
+        padding-left: 0;
+    }
+
+    li.t-item-course-gradeinfo {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    span.t-item-course-chk-lbl {
+        font-size: 0.7em;
+        display: inline-block;
+        width: 4em;
+    }
+
+    li.t-item-course-gradeinfo img {
+        vertical-align: top;
+        top: 3px;
+        position: relative;
+        max-width: 24px;
+        max-height: 24px;
+    }
+
+    i.t-coursecat-list-item {
+        color: var(--coursecat-list);
+    }
+
+    i.t-course-list-item {
+        color: var(--course-list);
+    }
+
+    ul.t-competency-list li {
+        list-style: none;
+    }
+
+
+    .collapsed > .when-open,
+    .not-collapsed > .when-closed {
+        display: none;
+    }
+
+
+    .t-studyline-slot,
+    .r-studyline-slot{
+        width: 130px;
+    }
+
+    .r-studyline-slot {
+        min-height: 32px;
+    }
+
+    .t-studyline-slot-0.filter .t-slot-item,
+    .r-studyline-slot-0.filter .r-slot-item {
+        margin-left: 0;
+    }
+
+
+
+    .t-studyline-slot.t-studyline-slot-0,
+    .r-studyline-slot.r-studyline-slot-0  {
+        width: 75px;
+    }
+
+    .t-studyline-slot.t-studyline-slot-0 .t-slot-drop.filter .t-slot-item,
+    .r-studyline-slot.r-studyline-slot-0 .r-item-base {
+        margin-left: 0px;
+    }
+
+    .t-studyline-slot.gradable.current.odd,
+    .r-studyline-slot.gradable.current.odd  {
+        --hlcol: color-mix(in srgb, var(--less-light) , var(--highlight) var(--highlight-mix));
+        background-color: var(--hlcol);
+        position: relative;
+    }
+
+    .t-studyline-slot.gradable.current.odd:before,
+    .r-studyline-slot.gradable.current.odd:before {
+        --hlcol: color-mix(in srgb, var(--less-light) , var(--highlight) var(--highlight-mix));
+        box-shadow: -20px 0 10px -7px var(--hlcol) inset;
+        content: " ";
+        height: 100%;
+        left: -20px;
+        position: absolute;
+        top: 0;
+        width: 20px;
+    }
+
+    .t-studyline-slot.gradable.current.odd:after,
+    .r-studyline-slot.gradable.current.odd:after {
+        --hlcol: color-mix(in srgb, var(--less-light) , var(--highlight) var(--highlight-mix));
+        box-shadow: 20px 0 10px -7px var(--hlcol) inset;
+        content: " ";
+        height: 100%;
+        right: -20px;
+        position: absolute;
+        top: 0;
+        width: 20px;
+    }
+
+    .t-studyline-slot.lastlyr .t-slot-item {
+        margin-bottom: 0;
+    }
+
+    .s-studyline-header-period.current {
+        --hlcol: color-mix(in srgb, var(--white) , var(--highlight) var(--highlight-mix));
+        box-shadow: 0 0 10px 10px var(--hlcol);
+        background-color: var(--hlcol);
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+    }
+
+    .s-studyline-header-heading {
+        margin-top: 16px;
+    }
+
+    .t-studyline-slot.gradable.current.even,
+    .r-studyline-slot.gradable.current.even {
+        --hlcol: color-mix(in srgb, var(--white) , var(--highlight) var(--highlight-mix));
+        background-color: var(--hlcol);
+        position: relative;
+    }
+
+    .t-studyline-slot.gradable.current.even:before,
+    .r-studyline-slot.gradable.current.even:before {
+        --hlcol: color-mix(in srgb, var(--white) , var(--highlight) var(--highlight-mix));
+        box-shadow: -20px 0 10px -7px var(--hlcol) inset;
+        content: " ";
+        height: 100%;
+        left: -20px;
+        position: absolute;
+        top: 0;
+        width: 20px;
+    }
+
+    .simpleline {
+        z-index: 20;
+    }
+
+    .t-studyline-slot.gradable.current.even:after,
+    .r-studyline-slot.gradable.current.even:after {
+        --hlcol: color-mix(in srgb, var(--white) , var(--highlight) var(--highlight-mix));
+        box-shadow: 20px 0 10px -7px var(--hlcol) inset;
+        content: " ";
+        height: 100%;
+        right: -20px;
+        position: absolute;
+        top: 0;
+        width: 20px;
+    }
+
+    .t-slot-drop {
+        min-height: 32px;
+        height: 100%;
+        min-width: 50px;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+    }
+
+    .t-slot-drop.competency {
+        min-width: 100px;
+    }
+
+    .t-slot-drop.filter {
+        min-width: 50px;
+    }
+
+    .t-slot-drop.secondary {
+        min-height: 5px;
+    }
+
+    .t-slot-drop.secondary.drop-allowed {
+        min-height: 5px;
+    }
+
+    .t-item-deletebox {
+        display: inline-block;
+        width: 100px;
+        text-align: center;
+        visibility: hidden;
+    }
+
+    .t-item-deletebox.drop-allowed {
+        visibility: visible;
+        border-width: 1px;
+        border-style: dashed;
+        color: #f77;
+    }
+
+    .t-item-deletebox.drop-in {
+        visibility: visible;
+        border-style: solid;
+        background-color: #FFCCCC;
+        color: #a00;
+    }
+
+    .modal-dialog .modal-content {
+        background: white;
+    }
+
+    .modal-dialog.modal-lg {
+        max-width: 800px;
+    }
+
+    .modal-dialog.modal-sm {
+        max-width: 300px;
+    }
+
+    .gradable .t-slot-item,
+    .gradable .r-slot-item {
+        width: 100%;
+    }
+
+    .t-slot-item,
+    .r-slot-item {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        margin-left: auto;
+        margin-right: auto;
+        display: grid;
+    }
+
+    .t-item-base,
+    .r-item-base {
+        align-self: center;
+        position: relative;
+    }
+
+    .t-item-connector-start {
+        position: absolute;
+        top: calc(50% - 5px);
+        right: -1px;
+        line-height: 0px;
+    }
+
+    .t-item-connector-start svg rect {
+        cursor: crosshair;
+        stroke-width: 1px;
+        stroke: #3c3;
+        fill: #3c3;
+    }
+
+    .t-item-connector-start.deleteMode svg rect {
+        stroke: #f70;
+        fill: #f70;
+    }
+
+    .t-item-connector-end {
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        left: -1px;
+        line-height: 0px;
+    }
+
+    .t-item-connector-end svg rect {
+        stroke-width: 1px;
+        stroke: #f00;
+        fill: #f00;
+    }
+
+    .sw-studyline-editmode {
+        display: inline-block;
+    }
+
+    .t-item-base .deletebox {
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        right: 5px;
+        border-radius: 5px;
+        padding: 3px;
+        background-color: #fff7;
+        cursor: default;
+        border-color: #ccc;
+        border-width: 1px;
+        border-style: solid;
+        z-index: 20;
+    }
+
+    .t-item-base .deletebox a {
+        display: block;
+        margin: 3px;
+
+    }
+    .t-item-base .t-item-contextview {
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, 100%);
+        bottom: 0px;
+        z-index: 25;
+    }
+
+    .t-item-contextview .close-button {
+        float: right;
+    }
+
+
+    ul.t-toolbox li {
+        list-style: none;
+    }
+
+    .t-item-filter {
+        display: inline-block;
+        height: 1em;
+        padding: 0px;
+        margin: 0;
+        text-align: left;
+        font-size: 2em;
+        vertical-align: top;
+    }
+
+    .t-item-filter i {
+        vertical-align: top;
+    }
+
+
+    .t-toolbox .t-item-filter {
+        font-size: 1em;
+    }
+
+    .t-item-junction i {
+        color: var(--warning);
+    }
+
+    .t-item-finish i {
+        color: var(--success);
+    }
+
+    .t-item-start i {
+        color: var(--success);
+    }
+
+    .t-item-badge svg {
+        color: var(--warning);
+    }
+
+    .t-slot-drop.type-allowed {
+        border-color: var(--success);
+        border-style: dashed;
+        border-width: 1px;
+    }
+
+    .t-slot-drop.type-allowed.drop-forbidden {
+        border-color: var(--danger);
+    }
+
+    .t-slot-drop.filter .t-item-base {
+        display: inline-block;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        margin-left: auto;
+        margin-right: auto;
+
+        line-height: 1px;
+    }
+
+    .t-studyline-slot-0.filter .t-slot-drop.filter .t-item-base{
+        margin-left: 0;
+    }
+
+
+    a.t-item-config {
+        position: absolute;
+        top: -5px;
+        right: -5px;
+    }
+
+    a.t-item-config.badge {
+        top: -5px;
+        right: -5px;
+        font-size: 16px;
+    }
+
+
+    a.t-item-course-config {
+        font-size: 16pt;
+        vertical-align: middle;
+        float: right;
+        margin-right: 2px;
+        margin-top: -5px;
+    }
+
+    .t-item-connector-end {
+        visibility: hidden;
+    }
+    .t-item-connector-end.type-allowed.drop-allowed {
+        visibility: visible;
+    }
+
+    .t-badges li {
+        list-style: none;
+    }
+
+    .t-badges .t-badge-drag {
+        display: inline;
+    }
+
+    .t-badges img {
+        width: 32px;
+        height: 32px;
+    }
+
+    .t-item-badge {
+        width: 50px;
+        height: 50px;
+        position: relative;
+        margin-top: 3px;
+    }
+
+    .t-item-badge img.badge-image {
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .t-item-badge svg.t-badge-backdrop {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    /******************************************************************************/
+
+    .r-report-tabs .list-group-item-action {
+        width: inherit;
+    }
+
+
+
+    .r-studyplan-tab,
+    .t-studyplan-tab {
+        width: auto;
+        overflow-x: auto;
+
+    }
+
+    .t-studyline-drag:nth-child(odd) .t-studyline div,
+    .t-studyline-heading.odd,
+    .r-studyline-heading.odd,
+    .t-studyline-slot.odd,
+    .r-studyline-slot.odd {
+        background-color: var(--less-light);
+    }
+
+    .t-studyline-drag:nth-child(even) .t-studyline div,
+    .t-studyline-heading.even,
+    .r-studyline-heading.even,
+    .t-studyline-slot.even,
+    .r-studyline-slot.even {
+        background-color: var(--white);
+    }
+
+    .t-studyline-drag:first-child,
+    .t-studyline-heading.first,
+    .t-studyline-slot.first,
+    .r-studyline-heading.first,
+    .r-studyline-slot.first {
+        border-top-style: solid;
+    }
+
+    .t-studyline-drag:last-child,
+    .t-studyline-heading.last,
+    .t-studyline-slot.last.newlyr,
+    .r-studyline-heading.last,
+    .r-studyline-slot.last {
+        border-bottom-style: solid;
+    }
+
+    .s-studyline-header-period {
+        text-align: center;
+        padding-top: 5px;
+        margin-top: 16px; /* To allow for box shadow on highlighted period */
+    }
+    .s-studyline-header-period p {
+        margin-bottom: 0;
+    }
+
+    .s-studyline-header-period-datespan{
+        white-space: nowrap;
+    }
+
+    .s-studyline-header-period-datespan .date{
+        font-weight: bold;
+    }
+
+    .s-studyline-header-period-datespan.small{
+        font-size: 9px;
+    }
+
+
+
+    .t-studyline-slot.rightmost,
+    .r-studyline-slot.rightmost {
+        border-right-style: solid;
+    }
+
+
+    .t-studyline-handle,
+    .r-studyline-handle {
+        width: 10px;
+        height: 100%;
+        border-left-style: solid;
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.125);
+    }
+
+
+    .gradable .r-item-base {
+        width: 100%;
+    }
+
+    .t-item-invalid .card-body,
+    .r-item-invalid .card-body,
+    .t-item-competency .card-body,
+    .t-item-course .card-body,
+    .r-item-competency .card-body {
+        padding: 3px;
+        padding-left: 7px;
+        padding-right: 7px;
+    }
+
+    .r-item-invalid .card-body,
+    .t-item-invalid .card-body {
+        color: darkred;
+    }
+
+    .r-item-filter {
+        display: inline-block;
+        padding: 0px;
+        text-align: left;
+        font-size: 2em;
+        vertical-align: top;
+        height: 1em;
+    }
+
+    .r-item-filter i {
+        vertical-align: top;
+    }
+
+    .r-item-start i {
+        color: var(--success);
+    }
+
+    .r-item-badge i {
+        color: var(--warning);
+    }
+
+    .r-badges li {
+        list-style: none;
+    }
+
+    .r-badges .r-badge-drag {
+        display: inline;
+    }
+
+    .r-badges img {
+        width: 32px;
+        height: 32px;
+    }
+
+    .r-item-badge {
+        width: 50px;
+        height: 50px;
+        position: relative;
+        margin-top: 3px;
+    }
+
+    .r-item-badge img.badge-image {
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .r-item-badge svg.r-badge-backdrop {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .r-item-badge svg.r-badge-backdrop circle {
+        stroke: black;
+        stroke-width: 2px;
+        fill: #ccc;
+    }
+
+    .r-item-module-children {
+        list-style: none;
+    }
+
+    .r-item-start.completion-incomplete i,
+    .r-completion-incomplete {
+        color: var(--incomplete);
+    }
+    .r-completion-progress {
+        color: var(--warning);
+    }
+    .r-completion-completed, .r-completion-complete-pass {
+        color: var(--success);
+    }
+    .r-completion-good {
+        color: var(--info);
+    }
+    .r-completion-excellent, .r-completion-complete {
+        color: var(--excellent);
+    }
+    .r-completion-pending {
+        color: var(--pending);
+    }
+    .r-completion-failed, .r-completion-complete-fail {
+        color: var(--danger);
+    }
+
+    th.r-aggregation-all {
+        color:rgb(0, 32, 80);
+    }
+    th.r-aggregation-any {
+        color:rgb(0, 46, 0);
+    }
+    tr.r-completion-category-header {
+        border-top-style: solid;
+        border-top-width: 1px;
+        border-color:rgb(127, 127, 127);
+    }
+
+    .r-course-grading {
+        font-size: 16pt;
+        margin-right: 2px;
+        vertical-align: bottom;
+    }
+
+    .r-course-graded,
+    .r-course-result {
+        font-size: 16pt;
+        vertical-align: middle;
+        float: right;
+        margin-right: 2px;
+        margin-top: 2px;
+    }
+
+    .r-progress-circle-popup{
+        position: relative;
+        top: 0.1em;
+    }
+
+    .r-completion-detail-header {
+        font-size: 20pt;
+    }
+
+    .r-item-finish.completion-incomplete,
+    .r-item-junction.completion-incomplete {
+        color: var(--incomplete);
+    }
+    .r-item-finish.completion-progress,
+    .r-item-junction.completion-progress {
+        color: var(--warning);
+    }
+    .r-item-finish.completion-completed,
+    .r-item-junction.completion-completed {
+        color: var(--success);
+    }
+    .r-item-finish.completion-good,
+    .r-item-junction.completion-good {
+        color: var(--info);
+    }
+    .r-item-finish.completion-excellent,
+    .r-item-junction.completion-excellent {
+        color: var(--excellent);
+    }
+
+    .r-item-finish.completion-failed,
+    .r-item-junction.completion-failed {
+        color: var(--danger);
+    }
+
+    .r-activity-icon {
+        position: relative;
+        top: -2px;
+    }
+
+    table.r-item-course-grade-details td {
+        padding-right: 3px;
+    }
+
+    .r-course-detail-header-right {
+        width: 260px;
+        text-align: end;
+    }
+
+    .r-timing-invalid,
+    .t-timing-invalid {
+        color: var(--danger);
+    }
+
+    .t-timing-past,
+    .r-timing-past {
+        color: var(--past);
+    }
+    .t-timing-present,
+    .r-timing-present {
+        color: var(--present);
+    }
+    .t-timing-future,
+    .r-timing-future {
+        color: var(--future);
+    }
+
+    .t-timing-indicator,
+    .r-timing-indicator {
+        border-color: rgba(0, 0, 0, 0.125);
+        width: 7px;
+        display: inline-block;
+        height: 100%;
+        border-width: 1px;
+        border-top-left-radius: 3.5px;
+        border-bottom-left-radius: 3.5px;
+    }
+
+    .t-timing-indicator.timing-invalid,
+    .r-timing-indicator.timing-invalid {
+        background-color: var(--danger);
+    }
+
+    .t-timing-indicator.timing-past,
+    .r-timing-indicator.timing-past {
+        background-color: var(--past);
+    }
+
+    .t-timing-indicator.timing-present,
+    .r-timing-indicator.timing-present {
+        background-color: var(--present);
+    }
+
+    .t-timing-indicator.timing-future,
+    .r-timing-indicator.timing-future {
+        background-color: var(--future);
+    }
+
+    .r-course-am-teacher {
+        box-shadow: 0 0 3px 3px rgba(255, 224, 0, 0.5);
+    }
+
+    .r-graded-unknown {
+        color: rgb(139, 107, 0);
+    }
+    .r-graded-unsubmitted {
+        color: var(--incomplete);
+    }
+    .r-graded-ungraded {
+        color: var(--danger);
+    }
+    .r-graded-allgraded {
+        color: var(--excellent);
+    }
+    .r-graded-graded {
+        color: var(--success);
+    }
+    .r-graded-nogrades {
+        color: var(--light);
+    }
+
+    .t-configured-ok {
+        color: var(--success);
+    }
+    .t-configured-alert {
+        color: var(--warning);
+    }
+
+
+    .r-grading-bar {
+        display: inline-block;
+        white-space: nowrap;
+        height: min-content;
+    }
+    .r-grading-bar-segment {
+        border-color: #aaa;
+        border-width: 1px;
+        display: inline-block;
+        border-bottom-style: solid;
+        border-top-style: solid;
+
+    }
+    .r-grading-bar-segment:first-child {
+        border-bottom-left-radius: 3px;
+        border-top-left-radius: 3px;
+        border-left-style: solid;
+
+    }
+    .r-grading-bar-segment:last-child {
+        border-bottom-right-radius: 3px;
+        border-top-right-radius: 3px;
+        border-right-style: solid;
+    }
+
+    .r-grading-bar-unsubmitted {
+        background-color: var(--light);
+    }
+
+    .r-grading-bar-graded {
+        background-color: var(--success);
+    }
+
+    .r-grading-bar-ungraded {
+        background-color:var(--danger);
+    }
+
+
+
+    .r-completion-bar-incomplete {
+        background-color: var(--light);
+    }
+
+    .r-completion-bar-completed {
+        background-color: var(--info);
+    }
+
+    .r-completion-bar-completed-pass {
+        background-color: var(--success);
+    }
+
+    .r-completion-bar-completed-fail {
+        background-color: var(--danger);
+    }
+
+    .r-completion-bar-ungraded {
+        background-color: var(--warning);
+    }
+
+
+    .card.s-studyplan-card {
+        min-width: 300px;
+        max-width: 500px;
+        margin-bottom: 1em;
+    }
+
+    .card.s-studyplan-card.timing-past .card-header {
+        background-color: var(--past);
+    }
+    .card.s-studyplan-card.timing-present .card-header {
+        background-color: var(--present);
+    }
+    .card.s-studyplan-card.timing-future .card-header {
+        background-color: var(--future);
+    }
+
+    .s-studyplan-card-title-buttons {
+        font-size: 12pt;
+        float: right;
+    }
+    .s-studyplan-card-title-buttons > * {
+        margin-left: 0.2em;
+        margin-right: 0.3em;
+    }
+
+    .s-studyplan-card-buttons {
+        float: right;
+        display: flex;
+        align-items: center;
+        justify-content: right;
+    }
+
+    .s-studyplan-card-buttons > * {
+        margin-left: 1em;
+    }
+
+    .s-studyplan-associate-window .custom-select {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .s-required {
+        color: var(--danger);
+    }
+
+    .s-required.complete {
+        color: var(--info);
+    } 
+
+    .s-required.complete-pass, 
+    .s-required.good, 
+    .s-required.excellent,
+    .s-required.allgraded {
+        color: var(--success);
+    }
+
+    .s-required.neutral {
+        color: #aaa;
+    }
+
+    .r-tooltip.incomplete .tooltip-inner,
+    .r-tooltip.complete-fail .tooltip-inner,
+    .r-tooltip.completed-fail .tooltip-inner {
+        background-color: var(--danger);
+    }
+    .r-tooltip.incomplete .arrow::before,
+    .r-tooltip.complete-fail .arrow::before,
+    .r-tooltip.completed-fail .arrow::before {
+        border-top-color: var(--danger);
+    }
+
+    .r-tooltip.complete .tooltip-inner,
+    .r-tooltip.completed .tooltip-inner {
+        background-color: var(--info);
+    }
+    .r-tooltip.complete .arrow::before,
+    .r-tooltip.completed .arrow::before {
+        border-top-color: var(--info);
+    }
+
+    .r-tooltip.complete-pass .tooltip-inner,
+    .r-tooltip.completed-pass .tooltip-inner {
+        background-color: var(--success);
+    }
+    .r-tooltip.complete-pass .arrow::before,
+    .r-tooltip.completed-pass .arrow::before {
+        border-top-color: var(--success);
+    }
+
+    .r-tooltip.incomplete .tooltip-inner {
+        background-color: var(--danger);
+    }
+    .r-tooltip.incomplete .arrow::before {
+        border-top-color: var(--danger);
+    }
+
+    .m-buttonbar {
+        display: flex;
+        align-items: center;
+        justify-content: left;
+    }
+
+    .m-buttonbar a,
+    .m-buttonbar span,
+    .m-buttonbar i {
+        vertical-align: middle;
+        display: inline;
+    }
+
+    .m-buttonbar a {
+        margin-right: 1em;
+    }
+
+    .s-edit-mod-form [data-fieldtype=submit] { display: none ! important; }
+    .s-edit-mod-form.genericonly form > fieldset:not(#id_general) { display: none ! important; }
+
+    .border-grey {
+        border-color: #aaa;
+    }
+
+}
\ No newline at end of file