From ca6e90d9381149c174380619fe8f80fae62aa55f Mon Sep 17 00:00:00 2001
From: Matti Lupari <matti.lupari@gmail.com>
Date: Tue, 6 Feb 2024 04:56:11 +0200
Subject: [PATCH] CSCEXAM-000 Starting to make some sense to style bloat

---
 ui/src/app/app.component.ts                   |   13 +-
 .../section/examination-section.component.ts  |    2 +-
 ui/src/app/facility/facility.component.html   |    2 +-
 .../facility/machines/machines.component.html |   10 +-
 .../facility/machines/machines.component.ts   |    7 +
 .../app/facility/rooms/rooms.component.scss   |    4 -
 .../app/navigation/navigation.component.scss  |  149 +-
 .../multiple-choice-option.component.ts       |    2 +-
 .../basequestion/multiple-choice.component.ts |    2 +-
 .../basequestion/question-body.component.html |    4 +-
 ...ighted-multiple-choice-option.component.ts |    2 +-
 .../library-transfer-dialog.component.html    |   52 +-
 .../results/library-results.component.html    |    2 +-
 .../results/library-results.component.ts      |    2 -
 .../picker/question-picker.component.ts       |   70 +-
 .../review/assessment/assessment.service.ts   |    7 +
 .../feedback/feedback.component.scss}         |   15 +-
 .../assessment/feedback/feedback.component.ts |   97 +-
 .../feedback/statement.component.ts           |  114 +-
 ui/src/assets/styles/_fonts.scss              |   15 +-
 ui/src/assets/styles/main.scss                |    9 +-
 ui/src/assets/styles/partial/_dashboard.scss  | 3018 +++++++++--------
 .../styles/partial/_datetimepicker.scss       |   18 -
 ui/src/assets/styles/partial/_defines.scss    |  421 +--
 ui/src/assets/styles/partial/_exam.scss       |  688 ++--
 .../styles/partial/_form-validation.scss      |    9 +-
 ui/src/assets/styles/partial/_library.scss    |  209 --
 ui/src/assets/styles/partial/_mainview.scss   |    7 -
 ui/src/assets/styles/partial/_print.scss      |  187 +-
 .../styles/partial/_question-editor.scss      |   26 -
 30 files changed, 2227 insertions(+), 2936 deletions(-)
 rename ui/src/{assets/styles/partial/_feedback.scss => app/review/assessment/feedback/feedback.component.scss} (57%)
 delete mode 100755 ui/src/assets/styles/partial/_datetimepicker.scss
 delete mode 100644 ui/src/assets/styles/partial/_library.scss
 delete mode 100644 ui/src/assets/styles/partial/_mainview.scss
 delete mode 100644 ui/src/assets/styles/partial/_question-editor.scss

diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 6eaff5a555..aadf3cd0c8 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -37,7 +37,7 @@ import { SessionService } from './session/session.service';
         @if (user) {
             <div>
                 <xm-navigation [hidden]="hideNavBar"></xm-navigation>
-                <main id="mainView" class="container-fluid pad0 w-auto" [ngClass]="{ 'vmenu-on': !hideNavBar }">
+                <main id="mainView" class="container-fluid" [ngClass]="{ 'vmenu-on': !hideNavBar }">
                     <router-outlet></router-outlet>
                 </main>
             </div>
@@ -45,6 +45,17 @@ import { SessionService } from './session/session.service';
     `,
     standalone: true,
     imports: [DevLoginComponent, NavigationComponent, NgClass, RouterOutlet],
+    styles: [
+        `
+            #mainView {
+                width: auto !important;
+                @media print {
+                    margin: 0 15px;
+                    max-width: 1000px;
+                }
+            }
+        `,
+    ],
 })
 export class AppComponent implements OnInit, OnDestroy {
     user?: User;
diff --git a/ui/src/app/examination/section/examination-section.component.ts b/ui/src/app/examination/section/examination-section.component.ts
index 00f9a19394..07d838e9f6 100644
--- a/ui/src/app/examination/section/examination-section.component.ts
+++ b/ui/src/app/examination/section/examination-section.component.ts
@@ -65,7 +65,7 @@ import { ExaminationQuestionComponent } from '../question/examination-question.c
             <div class="col-md-12">
                 @for (material of section.examMaterials; track material) {
                     <div class="row">
-                        <div class="col-md-12 info-row mart10">
+                        <div class="col-md-12 mart10">
                             <i class="text-muted bi-book" alt="exam materials"></i>
                             <span style="padding-left: 15px">{{ material.name }}</span>
                             @if (material.author) {
diff --git a/ui/src/app/facility/facility.component.html b/ui/src/app/facility/facility.component.html
index 185ef997fb..5080da0db1 100644
--- a/ui/src/app/facility/facility.component.html
+++ b/ui/src/app/facility/facility.component.html
@@ -7,7 +7,7 @@
             </a>
         </span>
         <span class="col-md-6">
-            <a class="header-top-link float-end me-4 bi-building btn btn-success" (click)="editMultipleRooms()">
+            <a class="float-end me-4 bi-building btn btn-success" (click)="editMultipleRooms()">
                 {{ 'i18n_edit_all_rooms' | translate }}
             </a>
         </span>
diff --git a/ui/src/app/facility/machines/machines.component.html b/ui/src/app/facility/machines/machines.component.html
index 81dc55a516..68722b2d87 100644
--- a/ui/src/app/facility/machines/machines.component.html
+++ b/ui/src/app/facility/machines/machines.component.html
@@ -67,12 +67,10 @@
                                     @for (software of machine.softwareInfo; track software; let l = $last) {
                                         <li class="float-start">
                                             @if (software.status !== 'DISABLED') {
-                                                <span>
-                                                    {{ software.name }}
-                                                    @if (!l) {
-                                                        <span>, </span>
-                                                    }
-                                                </span>
+                                                <span>{{ software.name }}</span>
+                                                @if (!l) {
+                                                    <span>,&nbsp;</span>
+                                                }
                                             }
                                         </li>
                                     }
diff --git a/ui/src/app/facility/machines/machines.component.ts b/ui/src/app/facility/machines/machines.component.ts
index 61136f4900..292fecd958 100644
--- a/ui/src/app/facility/machines/machines.component.ts
+++ b/ui/src/app/facility/machines/machines.component.ts
@@ -27,6 +27,13 @@ import type { ExamMachine, ExamRoom } from '../../reservation/reservation.model'
     selector: 'xm-machines',
     standalone: true,
     imports: [NgbPopover, NgClass, RouterLink, TranslateModule],
+    styles: [
+        `
+            li {
+                list-style: none;
+            }
+        `,
+    ],
 })
 export class MachineListComponent implements OnInit {
     @Input() room!: ExamRoom;
diff --git a/ui/src/app/facility/rooms/rooms.component.scss b/ui/src/app/facility/rooms/rooms.component.scss
index a27e03056e..a133583d21 100644
--- a/ui/src/app/facility/rooms/rooms.component.scss
+++ b/ui/src/app/facility/rooms/rooms.component.scss
@@ -1,9 +1,5 @@
 @import '../../shared/styles.scss';
 
-li {
-    list-style: none;
-}
-
 .selected {
     background-color: #d3e7a8;
     border-top: none;
diff --git a/ui/src/app/navigation/navigation.component.scss b/ui/src/app/navigation/navigation.component.scss
index c07698e12d..cacdb3e6e2 100644
--- a/ui/src/app/navigation/navigation.component.scss
+++ b/ui/src/app/navigation/navigation.component.scss
@@ -33,7 +33,6 @@
 
     a {
         display: flex;
-        background-color: black;
         text-decoration: none;
         padding-left: 1.5em;
         border-left: 3px solid black;
@@ -48,11 +47,18 @@
             border: 3px solid black;
             border-radius: 50px;
         }
+
+        &.selected {
+            font-weight: bold;
+            border-left: 3px solid $exam-dark-green;
+            @media (max-width: $mobile-width) {
+                border-left: 3px solid black;
+                border-radius: 50px !important;
+            }
+        }
     }
 
     a:hover {
-        text-decoration: none;
-        color: white;
         border-left: 3px solid $exam-dark-green;
         @media (max-width: $mobile-width) {
             border: 3px solid white;
@@ -60,24 +66,6 @@
         }
     }
 
-    .selected {
-        background-color: black;
-        border-left: 3px solid $exam-dark-green;
-        text-decoration: none;
-        padding-left: 1.5em;
-        font-family: $family-helvetica;
-        font-size: 16px;
-        color: #e7e7e7;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-        font-weight: bold;
-        @media (max-width: $mobile-width) {
-            border: 3px solid $exam-dark-green !important;
-            border-radius: 50px !important;
-        }
-    }
-
     li {
         list-style: none;
         margin-bottom: 2.5em;
@@ -95,7 +83,6 @@
 
     .nav-header {
         background-color: black;
-        color: $exam-dark-grey;
         position: fixed;
         top: 0;
         left: 0;
@@ -123,7 +110,6 @@
     .nav-body {
         position: fixed;
         background-color: black;
-        color: $exam-dark-grey;
         top: 162px;
         bottom: 105px;
         overflow-y: auto;
@@ -137,7 +123,6 @@
     .nav-body-mobile {
         @media (max-width: $mobile-width) {
             background-color: black;
-            color: $exam-dark-grey;
             position: relative;
             width: 100%;
         }
@@ -145,8 +130,6 @@
 
     .nav-footer {
         background-color: $exam-medium-green;
-        color: $exam-dark-grey;
-        display: block;
         position: fixed;
         bottom: 0;
         width: 17.125em;
@@ -162,20 +145,6 @@
         }
     }
 
-    .minimize .nav-header {
-        height: 175px;
-        width: 50px;
-    }
-
-    .minimize .nav-body {
-        top: 175px;
-        width: 50px;
-    }
-
-    .minimize .nav-footer {
-        width: 50px;
-    }
-
     .menu-item {
         margin: 0;
         @media (max-width: $mobile-width) {
@@ -196,7 +165,7 @@
         padding: 0.5em 1em 1em;
         font-family: $family-helvetica;
         font-size: 14px;
-        color: #ffffff;
+        color: white;
         letter-spacing: 0.27px;
         line-height: 18px;
         text-align: left;
@@ -218,17 +187,6 @@
         letter-spacing: 1px;
     }
 
-    .minify {
-        bottom: 0;
-        padding: 0.5em;
-        float: right;
-        color: #27b9ca;
-    }
-
-    .minimize .menu-item {
-        display: none;
-    }
-
     .locale-bar {
         margin-left: 1.7em;
         margin-top: 0.4em;
@@ -245,28 +203,16 @@
         color: white;
         padding: 0.5em;
         margin-left: 1.5em;
-        background-color: transparent;
         border: 0px;
-        text-decoration: none;
         @media (max-width: $mobile-width) {
             border: 3px solid #00000000;
         }
-    }
-    .locale-item:active .locale-item:hover {
-        font-weight: bold;
-    }
-
-    .minimize .locale-item {
-        text-align: center;
-        padding: 0.3em 0 0.3em 0;
-    }
-
-    .locale-item:hover {
-        color: white;
-        font-weight: bold;
-        @media (max-width: $mobile-width) {
-            border-radius: 50px;
-            border: 3px solid white;
+        :active :hover {
+            font-weight: bold;
+            @media (max-width: $mobile-width) {
+                border-radius: 50px;
+                border: 3px solid white;
+            }
         }
     }
 
@@ -288,39 +234,23 @@
         max-width: 165px;
     }
 
-    .sub-menu {
-        font-family: $family-helvetica;
-        font-size: 16px !important;
-        color: #e7e7e7 !important;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-
-        a {
-            font-family: $family-helvetica;
-            font-size: 16px;
-            color: #e7e7e7;
-            letter-spacing: 0.27px;
-            line-height: 18px;
-            text-align: left;
-        }
-    }
-
     ul.submenu {
-        margin: 0px;
         margin-top: 20px;
         border-top: 15px;
         padding: 0px;
         border: 0px;
+        font-family: $family-helvetica;
+        font-size: 16px;
+        color: #e7e7e7;
+        letter-spacing: 0.27px;
+        line-height: 16px;
+        text-align: left;
 
         a {
-            font-family: $family-helvetica;
-            font-size: 16px;
-            color: #e7e7e7;
-            letter-spacing: 0.27px;
-            line-height: 18px;
-            text-align: left;
-            margin: 0 30px;
+            margin: 0 10px 0 10px;
+            @media (max-width: $mobile-width) {
+                margin: 0;
+            }
         }
 
         li {
@@ -328,13 +258,6 @@
         }
 
         div {
-            width: 175px;
-            font-family: $family-helvetica;
-            font-size: 16px;
-            color: #e7e7e7 !important;
-            letter-spacing: 0.27px;
-            line-height: 18px;
-            text-align: left;
             padding-left: 28px;
             text-indent: -35px;
         }
@@ -348,24 +271,4 @@
             margin-top: 10px;
         }
     }
-
-    .sub-menu-item {
-        padding-left: 1em;
-        font-family: $family-helvetica;
-        font-size: 16px;
-        color: #e7e7e7 !important;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-    }
-    span.sub-menu-item {
-        font-family: $family-helvetica;
-        font-size: 16px;
-        color: #e7e7e7 !important;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-        text-indent: -4em;
-        width: 50px;
-    }
 }
diff --git a/ui/src/app/question/basequestion/multiple-choice-option.component.ts b/ui/src/app/question/basequestion/multiple-choice-option.component.ts
index e50e8aea83..3fa7d17ef2 100644
--- a/ui/src/app/question/basequestion/multiple-choice-option.component.ts
+++ b/ui/src/app/question/basequestion/multiple-choice-option.component.ts
@@ -24,7 +24,7 @@ import { QuestionDraft, QuestionService } from '../question.service';
     selector: 'xm-mc-option-editor',
     viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
     template: `
-        <div ngModelGroup="mcOptions" class="question-editor-option">
+        <div ngModelGroup="mcOptions" class="question-editor-option exclude">
             <div class="row">
                 <div
                     class="col-md-6 question-option-empty"
diff --git a/ui/src/app/question/basequestion/multiple-choice.component.ts b/ui/src/app/question/basequestion/multiple-choice.component.ts
index 25c50bbf17..4698699138 100644
--- a/ui/src/app/question/basequestion/multiple-choice.component.ts
+++ b/ui/src/app/question/basequestion/multiple-choice.component.ts
@@ -63,7 +63,7 @@ import { WeightedMultipleChoiceOptionEditorComponent } from './weighted-multiple
             </div>
         }
         @for (option of question.options; track option.id; let i = $index) {
-            <div class="row" id="question-editor">
+            <div class="row">
                 <div class="col-md-12">
                     @if (question.type === 'MultipleChoiceQuestion') {
                         <xm-mc-option-editor
diff --git a/ui/src/app/question/basequestion/question-body.component.html b/ui/src/app/question/basequestion/question-body.component.html
index b725282408..8fb69b2838 100644
--- a/ui/src/app/question/basequestion/question-body.component.html
+++ b/ui/src/app/question/basequestion/question-body.component.html
@@ -105,10 +105,10 @@
                     {{ 'i18n_toolbar_cloze_test_question' | translate }}
                 }
                 @case ('MultipleChoiceQuestion') {
-                    {{ 'i18n_toolbar_mutltiplechoice_question' | translate }}
+                    {{ 'i18n_toolbar_multiplechoice_question' | translate }}
                 }
                 @case ('WeightedMultipleChoiceQuestion') {
-                    {{ 'i18n_toolbar_weighted_mutltiplechoice_question' | translate }}
+                    {{ 'i18n_toolbar_weighted_multiplechoice_question' | translate }}
                 }
                 @case ('ClaimChoiceQuestion') {
                     {{ 'i18n_toolbar_claim_choice_question' | translate }}
diff --git a/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts b/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts
index e17e86e87a..d99c1595c9 100644
--- a/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts
+++ b/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts
@@ -25,7 +25,7 @@ import { QuestionDraft } from '../question.service';
     selector: 'xm-wmc-option-editor',
     viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
     template: `
-        <div ngModelGroup="wmcOptions" class="question-editor-option">
+        <div ngModelGroup="wmcOptions" class="question-editor-option exclude">
             <div class="row">
                 <div
                     class="col-md-6 question-option-empty"
diff --git a/ui/src/app/question/library/export/library-transfer-dialog.component.html b/ui/src/app/question/library/export/library-transfer-dialog.component.html
index 335d2e599f..4836970184 100644
--- a/ui/src/app/question/library/export/library-transfer-dialog.component.html
+++ b/ui/src/app/question/library/export/library-transfer-dialog.component.html
@@ -1,40 +1,38 @@
-<div id="sitnet-dialog" role="dialog" aria-modal="true" id="library">
+<div id="sitnet-dialog" role="dialog" aria-modal="true">
     <div class="modal-header">
         <div class="student-enroll-dialog-wrap">
             <h1 class="student-enroll-title">{{ 'i18n_transfer_questions' | translate }}</h1>
         </div>
     </div>
     <div class="modal-body">
-        <div class="question-pick-organisation-box">
-            <!-- org pick TODO: make a component out of this-->
-            <div class="row">
-                <div class="col-12">
-                    <div ngbDropdown #orgPicker="ngbDropdown">
-                        <button ngbDropdownToggle class="btn btn-outline-dark" type="button" id="dropDownToggle">
-                            {{ 'i18n_faculty_name' | translate }}&nbsp;
-                            <span class="caret"></span>
-                        </button>
-                        <ul ngbDropdownMenu aria-labelledby="dropDownMenu">
-                            @for (org of organisations; track org) {
-                                <li ngbDropdownItem role="presentation" (click)="organisation = org">
-                                    <a role="menuitem">{{ org.code }}&nbsp;({{ org.name }})</a>
-                                </li>
-                            }
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="row align-items-center">
-                <div class="col-12 mt-2">
-                    <button class="btn green whitetext" [disabled]="!organisation" (click)="transfer()">
-                        {{ 'i18n_copy' | translate }}
+        <!-- org pick TODO: make a component out of this-->
+        <div class="row">
+            <div class="col-12">
+                <div ngbDropdown #orgPicker="ngbDropdown">
+                    <button ngbDropdownToggle class="btn btn-outline-dark" type="button" id="dropDownToggle">
+                        {{ 'i18n_faculty_name' | translate }}&nbsp;
+                        <span class="caret"></span>
                     </button>
-                    @if (organisation) {
-                        <span class="padl10 vertm">({{ organisation.code }})</span>
-                    }
+                    <ul ngbDropdownMenu aria-labelledby="dropDownMenu">
+                        @for (org of organisations; track org) {
+                            <li ngbDropdownItem role="presentation" (click)="organisation = org">
+                                <a role="menuitem">{{ org.code }}&nbsp;({{ org.name }})</a>
+                            </li>
+                        }
+                    </ul>
                 </div>
             </div>
         </div>
+        <div class="row mt-4">
+            <div class="col-12">
+                <button class="btn green whitetext" [disabled]="!organisation" (click)="transfer()">
+                    {{ 'i18n_copy' | translate }}
+                </button>
+                @if (organisation) {
+                    <span class="padl10 vertm">({{ organisation.code }})</span>
+                }
+            </div>
+        </div>
     </div>
     <div class="modal-footer">
         <div class="student-message-dialog-button-save">
diff --git a/ui/src/app/question/library/results/library-results.component.html b/ui/src/app/question/library/results/library-results.component.html
index cc30205864..f519da8886 100644
--- a/ui/src/app/question/library/results/library-results.component.html
+++ b/ui/src/app/question/library/results/library-results.component.html
@@ -1,6 +1,6 @@
 <div class="row">
     <div class="col-md-12">
-        <table class="table table-striped table-sm" [ngClass]="tableClass">
+        <table class="table table-striped table-sm exams-table">
             <thead>
                 <tr>
                     <th>
diff --git a/ui/src/app/question/library/results/library-results.component.ts b/ui/src/app/question/library/results/library-results.component.ts
index cd20164721..6634364154 100644
--- a/ui/src/app/question/library/results/library-results.component.ts
+++ b/ui/src/app/question/library/results/library-results.component.ts
@@ -59,7 +59,6 @@ type SelectableQuestion = LibraryQuestion & { selected: boolean };
 export class LibraryResultsComponent implements OnInit, OnChanges {
     @Input() questions: Question[] = [];
     @Input() disableLinks = false;
-    @Input() tableClass = '';
     @Output() selected = new EventEmitter<number[]>();
     @Output() copied = new EventEmitter<LibraryQuestion>();
 
@@ -85,7 +84,6 @@ export class LibraryResultsComponent implements OnInit, OnChanges {
 
     ngOnInit() {
         this.fixedQuestions = this.questions as SelectableQuestion[]; // FIXME: ugly cast, should resolve this better
-        this.tableClass = this.tableClass || 'exams-table';
         const storedData = this.Library.loadFilters('sorting');
         if (storedData.filters) {
             this.questionsPredicate = storedData.filters.predicate;
diff --git a/ui/src/app/question/picker/question-picker.component.ts b/ui/src/app/question/picker/question-picker.component.ts
index 0301929606..7361c26c34 100644
--- a/ui/src/app/question/picker/question-picker.component.ts
+++ b/ui/src/app/question/picker/question-picker.component.ts
@@ -26,7 +26,7 @@ import { LibrarySearchComponent } from '../library/search/library-search.compone
     standalone: true,
     imports: [TranslateModule, LibrarySearchComponent, LibraryResultsComponent],
     template: `
-        <div id="library">
+        <div id="dashboard">
             <!-- title row and add new question button -->
             <div class="modal-header">
                 <div class="student-enroll-title-wrap">
@@ -37,44 +37,44 @@ import { LibrarySearchComponent } from '../library/search/library-search.compone
                 <!-- search bar and search parameters -->
                 <xm-library-search (updated)="resultsUpdated($event)"></xm-library-search>
 
-                <div class="row">
-                    <div class="col-md-12 padl0 padr0 marb20">
-                        <span class="float-start marl20">
-                            <div class="library-button make-inline mart20 marr30 marl10">
-                                <a class="pointer" (click)="addQuestions()"
-                                    >{{ 'i18n_add_chosen' | translate }} ( {{ selections.length }} )
-                                </a>
-                            </div>
-                        </span>
+                <div class="row ms-3 mb-3">
+                    <div class="col-md-12">
+                        <div class="review-attachment-button make-inline mt-2">
+                            <a class="pointer" (click)="addQuestions()"
+                                >{{ 'i18n_add_chosen' | translate }} ( {{ selections.length }} )
+                            </a>
+                        </div>
                     </div>
                 </div>
 
-                <!-- resulting table with questions -->
-                <xm-library-results
-                    [questions]="questions"
-                    (selected)="questionSelected($event)"
-                    (copied)="questionCopied()"
-                    tableClass="library-table"
-                    [disableLinks]="true"
-                    class="overflow-x-auto"
-                ></xm-library-results>
-            </div>
+                <div class="row ms-3">
+                    <div class="col-md-12">
+                        <xm-library-results
+                            [questions]="questions"
+                            (selected)="questionSelected($event)"
+                            (copied)="questionCopied()"
+                            [disableLinks]="true"
+                            class="overflow-x-auto"
+                        ></xm-library-results>
+                    </div>
+                </div>
 
-            <!-- Buttons -->
-            <div class="modal-footer">
-                <div class="flex flex-middle marr20 marb20">
-                    <span class="float-end">
-                        <div class="library-button make-inline">
-                            <a class="pointer preview" (click)="cancel()">
-                                {{ 'i18n_button_cancel' | translate }}
-                            </a>
-                        </div>
-                        <div class="library-button make-inline mart20 marr30 marl10">
-                            <a class="pointer" (click)="addQuestions()">
-                                {{ 'i18n_add_chosen' | translate }} ( {{ selections.length }} )
-                            </a>
-                        </div>
-                    </span>
+                <!-- Buttons -->
+                <div class="modal-footer">
+                    <div class="flex flex-middle me-2 mb-2">
+                        <span class="float-end">
+                            <div class="review-attachment-button make-inline">
+                                <a class="pointer preview" (click)="cancel()">
+                                    {{ 'i18n_button_cancel' | translate }}
+                                </a>
+                            </div>
+                            <div class="review-attachment-button make-inline mt-2 me-3 ms-2">
+                                <a class="pointer" (click)="addQuestions()">
+                                    {{ 'i18n_add_chosen' | translate }} ( {{ selections.length }} )
+                                </a>
+                            </div>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/ui/src/app/review/assessment/assessment.service.ts b/ui/src/app/review/assessment/assessment.service.ts
index 5945aebab0..0dc9452ca7 100644
--- a/ui/src/app/review/assessment/assessment.service.ts
+++ b/ui/src/app/review/assessment/assessment.service.ts
@@ -26,6 +26,7 @@ import { isRealGrade } from '../../exam/exam.model';
 import { SessionService } from '../../session/session.service';
 import { ConfirmationDialogService } from '../../shared/dialogs/confirmation-dialog.service';
 import { CommonExamService } from '../../shared/miscellaneous/common-exam.service';
+import { Point } from 'chart.js';
 
 type Payload = {
     id: number;
@@ -310,4 +311,10 @@ export class AssessmentService {
             switchMap(() => this.sendToRegistry$(payload, res)),
         );
     };
+
+    fixPosition = (pos: Point): Point => {
+        const vpw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        const vph = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+        return { x: Math.min(Math.max(pos.x, 0), vpw - 30), y: Math.min(Math.max(pos.y, 0), vph - 30) };
+    };
 }
diff --git a/ui/src/assets/styles/partial/_feedback.scss b/ui/src/app/review/assessment/feedback/feedback.component.scss
similarity index 57%
rename from ui/src/assets/styles/partial/_feedback.scss
rename to ui/src/app/review/assessment/feedback/feedback.component.scss
index 185b4d542d..35f41785ed 100644
--- a/ui/src/assets/styles/partial/_feedback.scss
+++ b/ui/src/app/review/assessment/feedback/feedback.component.scss
@@ -1,13 +1,8 @@
-  #feedback {
+@import '../../../shared/styles.scss';
 
-  .body {
-    position: relative;
-  }
-
-  .wrapper {
-    z-index: 400;
-    @media (max-width: $sitnet-mobile) {
-      width: auto;
+.wrapper {
+    @media (max-width: $mobile-width) {
+        width: auto;
     }
     padding: 1em;
     position: fixed;
@@ -18,6 +13,4 @@
     background: rgba(255, 255, 255, 0.7);
     width: 620px;
     margin: 2px;
-  }
-
 }
diff --git a/ui/src/app/review/assessment/feedback/feedback.component.ts b/ui/src/app/review/assessment/feedback/feedback.component.ts
index 37de548822..484be25fc3 100644
--- a/ui/src/app/review/assessment/feedback/feedback.component.ts
+++ b/ui/src/app/review/assessment/feedback/feedback.component.ts
@@ -12,7 +12,7 @@
  * on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the Licence for the specific language governing permissions and limitations under the Licence.
  */
-import { CdkDrag } from '@angular/cdk/drag-drop';
+import { CdkDrag, Point } from '@angular/cdk/drag-drop';
 import { NgClass } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -30,62 +30,61 @@ import { CollaborativeAssesmentService } from '../collaborative-assessment.servi
 
 @Component({
     selector: 'xm-r-feedback',
-    template: `<div id="feedback">
-        <div cdkDrag id="draggable" class="wrapper">
-            <div class="row align-items-center">
-                <div
-                    class="col-1"
-                    ngbPopover="{{ (hideEditor ? 'i18n_show' : 'i18n_hide') | translate }}"
-                    triggers="mouseenter:mouseleave"
+    template: `<div cdkDrag [cdkDragConstrainPosition]="fixPosition" class="wrapper">
+        <div class="row align-items-center">
+            <div
+                class="col-1"
+                ngbPopover="{{ (hideEditor ? 'i18n_show' : 'i18n_hide') | translate }}"
+                triggers="mouseenter:mouseleave"
+            >
+                <i
+                    (click)="toggleFeedbackVisibility()"
+                    class="pointer"
+                    [ngClass]="hideEditor ? 'bi-chevron-right' : 'bi-chevron-down'"
                 >
-                    <i
-                        (click)="toggleFeedbackVisibility()"
-                        class="pointer font-6"
-                        [ngClass]="hideEditor ? 'bi-chevron-right' : 'bi-chevron-down'"
-                    >
-                    </i>
-                </div>
-                <div class="col-11">
-                    {{ title | translate }}
-                </div>
+                </i>
             </div>
-            <div [ngbCollapse]="hideEditor" class="body">
-                <div class="row mt-2 mb-1">
-                    <div class="col-md-12">
-                        <xm-ckeditor
-                            id="feedback-editor"
-                            [enableClozeTest]="false"
-                            [(ngModel)]="exam.examFeedback.comment"
-                            #ck="ngModel"
-                            name="ck"
-                            rows="10"
-                            cols="80"
-                        ></xm-ckeditor>
-                    </div>
+            <div class="col-11">
+                {{ title | translate }}
+            </div>
+        </div>
+        <div [ngbCollapse]="hideEditor" class="body">
+            <div class="row mt-2 mb-1">
+                <div class="col-md-12">
+                    <xm-ckeditor
+                        id="feedback-editor"
+                        [enableClozeTest]="false"
+                        [(ngModel)]="exam.examFeedback.comment"
+                        #ck="ngModel"
+                        name="ck"
+                        rows="10"
+                        cols="80"
+                    ></xm-ckeditor>
                 </div>
-                @if (exam.examFeedback?.attachment) {
-                    <div class="d-flex justify-content-end">
-                        <a class="pointer" (click)="downloadFeedbackAttachment()">{{
-                            exam.examFeedback?.attachment?.fileName
-                        }}</a>
-                        <span class="sitnet-red pointer" (click)="removeFeedbackAttachment()">
-                            <i class="bi-x" title="{{ 'i18n_remove_attachment' | translate }}"></i>
-                        </span>
-                    </div>
-                }
-                <div class="d-flex justify-content-between mt-2">
-                    <button class="btn btn-outline-secondary" (click)="saveFeedback()">
-                        {{ 'i18n_save' | translate }}
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" (click)="selectFile()">
-                        {{ 'i18n_attach_file' | translate }}
-                    </button>
+            </div>
+            @if (exam.examFeedback?.attachment) {
+                <div class="d-flex justify-content-end">
+                    <a class="pointer" (click)="downloadFeedbackAttachment()">{{
+                        exam.examFeedback?.attachment?.fileName
+                    }}</a>
+                    <span class="sitnet-red pointer" (click)="removeFeedbackAttachment()">
+                        <i class="bi-x" title="{{ 'i18n_remove_attachment' | translate }}"></i>
+                    </span>
                 </div>
+            }
+            <div class="d-flex justify-content-between mt-2">
+                <button class="btn btn-outline-secondary" (click)="saveFeedback()">
+                    {{ 'i18n_save' | translate }}
+                </button>
+                <button type="button" class="btn btn-outline-secondary" (click)="selectFile()">
+                    {{ 'i18n_attach_file' | translate }}
+                </button>
             </div>
         </div>
     </div>`,
     standalone: true,
     imports: [CdkDrag, NgbPopover, NgClass, NgbCollapse, CKEditorComponent, FormsModule, TranslateModule],
+    styleUrl: './feedback.component.scss',
 })
 export class FeedbackComponent implements OnInit {
     @Input() exam!: Examination;
@@ -154,6 +153,8 @@ export class FeedbackComponent implements OnInit {
         }
     };
 
+    fixPosition = this.Assessment.fixPosition;
+
     private _saveFeedback$ = () => this.Assessment.saveFeedback$(this.exam);
 
     private _saveCollaborativeFeedback$ = () =>
diff --git a/ui/src/app/review/assessment/feedback/statement.component.ts b/ui/src/app/review/assessment/feedback/statement.component.ts
index 00362ee177..53b0fb5e72 100644
--- a/ui/src/app/review/assessment/feedback/statement.component.ts
+++ b/ui/src/app/review/assessment/feedback/statement.component.ts
@@ -16,7 +16,7 @@ import { CdkDrag } from '@angular/cdk/drag-drop';
 import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapse, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import type { Exam } from '../../../exam/exam.model';
 import { AttachmentService } from '../../../shared/attachment/attachment.service';
@@ -24,73 +24,72 @@ import type { FileResult } from '../../../shared/attachment/dialogs/attachment-p
 import { CKEditorComponent } from '../../../shared/ckeditor/ckeditor.component';
 import { FileService } from '../../../shared/file/file.service';
 import { MaturityService } from '../maturity/maturity.service';
+import { AssessmentService } from '../assessment.service';
 
 @Component({
     selector: 'xm-r-statement',
-    template: `<div id="feedback" [hidden]="hasGoneThroughLanguageInspection()">
-        <div cdkDrag id="draggable" class="wrapper">
-            <div class="row">
-                <div
-                    class="col-md-1"
-                    ngbPopover="{{ (hideEditor ? 'i18n_show' : 'i18n_hide') | translate }}"
-                    popoverTitle="{{ 'i18n_instructions' | translate }}"
-                    triggers="mouseenter:mouseleave"
+    template: `<div
+        cdkDrag
+        [cdkDragConstrainPosition]="fixPosition"
+        class="wrapper"
+        [hidden]="hasGoneThroughLanguageInspection()"
+    >
+        <div class="row align-items-center">
+            <div
+                class="col-1"
+                ngbPopover="{{ (hideEditor ? 'i18n_show' : 'i18n_hide') | translate }}"
+                popoverTitle="{{ 'i18n_instructions' | translate }}"
+                triggers="mouseenter:mouseleave"
+            >
+                <i
+                    (click)="toggleEditorVisibility()"
+                    class="pointer"
+                    [ngClass]="hideEditor ? 'bi-chevron-right' : 'bi-chevron-down'"
                 >
-                    <i
-                        (click)="toggleEditorVisibility()"
-                        class="pointer vcenter font-6"
-                        [ngClass]="
-                            hideEditor
-                                ? 'bi-arrow-right-circle-fill sitnet-green'
-                                : 'bi-arrow-down-circle-fill sitnet-red'
-                        "
-                    >
-                    </i>
-                </div>
-                <div class="col-md-11">
-                    <div class="vcenter">
-                        {{ 'i18n_give_statement' | translate }}
-                    </div>
-                </div>
+                </i>
             </div>
-            <div [hidden]="hideEditor" class="body">
-                <div class="row editor">
-                    <div class="col-md-12">
-                        <xm-ckeditor
-                            [enableClozeTest]="false"
-                            [(ngModel)]="exam.languageInspection.statement.comment"
-                            #ck="ngModel"
-                            name="ck"
-                        ></xm-ckeditor>
-                    </div>
+            <div class="col-11">
+                {{ 'i18n_give_statement' | translate }}
+            </div>
+        </div>
+        <div [ngbCollapse]="hideEditor" class="body">
+            <div class="row mt-2 mb-1">
+                <div class="col-md-12">
+                    <xm-ckeditor
+                        [enableClozeTest]="false"
+                        [(ngModel)]="exam.languageInspection.statement.comment"
+                        #ck="ngModel"
+                        name="ck"
+                        rows="10"
+                        cols="80"
+                    ></xm-ckeditor>
                 </div>
-                <div class="d-flex justify-content-between">
-                    <div>
-                        <button class="btn btn-outline-secondary" (click)="saveInspectionStatement()">
-                            {{ 'i18n_save' | translate }}
-                        </button>
-                    </div>
-                    <div>
-                        @if (exam.languageInspection?.statement?.attachment) {
-                            <span>
-                                <a class="pointer" (click)="downloadStatementAttachment()">{{
-                                    exam.languageInspection?.statement?.attachment?.fileName
-                                }}</a>
-                                <span class="sitnet-red pointer" (click)="removeStatementAttachment()">
-                                    <i class="bi-x" title="{{ 'i18n_remove_attachment' | translate }}"></i>
-                                </span>
-                            </span>
-                        }
-                        <button type="button" class="btn btn-outline-secondary" (click)="selectFile()">
-                            {{ 'i18n_attach_file' | translate }}
-                        </button>
+            </div>
+            <div class="d-flex justify-content-between">
+                <button class="btn btn-outline-secondary" (click)="saveInspectionStatement()">
+                    {{ 'i18n_save' | translate }}
+                </button>
+                @if (exam.languageInspection?.statement?.attachment) {
+                    <div class="d-flex justify-content-end">
+                        <a class="pointer" (click)="downloadStatementAttachment()">{{
+                            exam.examFeedback?.attachment?.fileName
+                        }}</a>
+                        <span class="sitnet-red pointer" (click)="removeStatementAttachment()">
+                            <i class="bi-x" title="{{ 'i18n_remove_attachment' | translate }}"></i>
+                        </span>
                     </div>
+                }
+                <div class="d-flex justify-content-between mt-2">
+                    <button type="button" class="btn btn-outline-secondary" (click)="selectFile()">
+                        {{ 'i18n_attach_file' | translate }}
+                    </button>
                 </div>
             </div>
         </div>
     </div>`,
     standalone: true,
-    imports: [CdkDrag, NgbPopover, NgClass, CKEditorComponent, FormsModule, TranslateModule],
+    imports: [CdkDrag, NgbPopover, NgClass, CKEditorComponent, NgbCollapse, FormsModule, TranslateModule],
+    styleUrl: './feedback.component.scss',
 })
 export class StatementComponent {
     @Input() exam!: Exam;
@@ -100,6 +99,7 @@ export class StatementComponent {
         private Attachment: AttachmentService,
         private Files: FileService,
         private Maturity: MaturityService,
+        private Assessment: AssessmentService,
     ) {}
 
     hasGoneThroughLanguageInspection = () => this.exam.languageInspection?.finishedAt;
@@ -124,4 +124,6 @@ export class StatementComponent {
             }),
         );
     };
+
+    fixPosition = this.Assessment.fixPosition;
 }
diff --git a/ui/src/assets/styles/_fonts.scss b/ui/src/assets/styles/_fonts.scss
index b65415c7be..f97509a634 100644
--- a/ui/src/assets/styles/_fonts.scss
+++ b/ui/src/assets/styles/_fonts.scss
@@ -1,9 +1,10 @@
 /* arimo-regular - latin */
 @font-face {
-  font-family: 'Arimo';
-  font-style: normal;
-  font-weight: 400;
-  src: local(''),
-       url('../fonts/arimo-v17-latin/arimo-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/arimo-v17-latin/arimo-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
\ No newline at end of file
+    font-family: 'Arimo';
+    font-style: normal;
+    font-weight: 400;
+    src:
+        local(''),
+        url('../fonts/arimo-v17-latin/arimo-v17-latin-regular.woff2') format('woff2'),
+        url('../fonts/arimo-v17-latin/arimo-v17-latin-regular.woff') format('woff');
+}
diff --git a/ui/src/assets/styles/main.scss b/ui/src/assets/styles/main.scss
index 8fb1659701..eafc091ad2 100644
--- a/ui/src/assets/styles/main.scss
+++ b/ui/src/assets/styles/main.scss
@@ -1,17 +1,12 @@
 @import 'fonts';
 @import 'partial/defines';
+@import 'partial/form-validation';
 @import 'partial/header';
 @import 'partial/exam';
-@import 'partial/library';
-@import 'partial/question-editor';
 @import 'partial/student_exam';
 @import 'partial/dialog';
 @import 'partial/dashboard';
-@import 'partial/form-validation';
 @import 'partial/print';
-@import 'partial/datetimepicker';
-@import 'partial/feedback';
-@import 'partial/mainview';
 @import 'partial/printout';
 @import 'partial/calendar';
 
@@ -24,7 +19,7 @@ html {
 }
 
 body {
-    background-color: $sitnet-background;
+    background-color: white;
     font-family: $sitnet-family-helvetica;
 }
 
diff --git a/ui/src/assets/styles/partial/_dashboard.scss b/ui/src/assets/styles/partial/_dashboard.scss
index 9b2a066ec9..9974c2af3b 100644
--- a/ui/src/assets/styles/partial/_dashboard.scss
+++ b/ui/src/assets/styles/partial/_dashboard.scss
@@ -1,1690 +1,1756 @@
 #dashboard {
+    $sitnet-dark-red: #be1327;
+    min-height: $sitnet-header-height;
 
-  min-height: $sitnet-header-height;
-
-  // Basic bootstrap grid rows with different kind of padding
-
-  .detail-row {
-    @extend .row;
-    margin: 0;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-
-  .search-list-wrapper { // used in exam-search
-    padding: 3em;
-    @media (max-width: $sitnet-mobile) {
-      padding: 5px;
-    }
-  }
-
-  .student-enrolment-result-wrapper { // used in exam-search and active-enrolment
-    border-radius: 4px;
-    border: 2px solid #EDEDED;
-    border-left: $sitnet-medium-green-new 4px solid;
-    padding: 30px;
-    margin-bottom: 6px;
-    @media (max-width: $sitnet-mobile) {
-      padding: 5px;
-    }
-  }
-  
-  .student-enrolment-wrapper { // used a lot
-    border-radius: 4px;
-    background: white;
-    border: 2px solid #EDEDED;
-    border-left: $sitnet-medium-green-new 4px solid;
-    margin-left: 1.4em;
-    margin-right: 1.4em;
-    margin-bottom: 25px;
-    @media (max-width: $sitnet-mobile) {
-      padding: 5px;
-      margin-bottom: 5px;
-    }
-    padding: 30px;
-
-    &.details-view {
-      margin-left: 3.7em;
-      @media (max-width: $sitnet-mobile) {
-        margin-left: 1em;
-        margin-right: 1em;
-      }
+    // Basic bootstrap grid rows with different kind of padding
+
+    .detail-row {
+        @extend .row;
+        margin: 0;
+        padding-left: 1em;
+        padding-right: 1em;
     }
 
-    &.review-view {
-      margin-left: 0;
-      margin-top: 0;
-      margin-right: 0;
-      padding: 20px;
+    .search-list-wrapper {
+        // used in exam-search
+        padding: 3em;
+        @media (max-width: $sitnet-mobile) {
+            padding: 5px;
+        }
     }
 
-    &.essay-review {
-      margin-top: 10px;
-      margin-right: 0;
-      padding: 20px;
+    .student-enrolment-result-wrapper {
+        // used in exam-search and active-enrolment
+        border-radius: 4px;
+        border: 2px solid #ededed;
+        border-left: $sitnet-medium-green-new 4px solid;
+        padding: 30px;
+        margin-bottom: 6px;
+        @media (max-width: $sitnet-mobile) {
+            padding: 5px;
+        }
     }
 
-    &.notactive {
-      border-left: #B1B1B1 4px solid;
+    .student-enrolment-wrapper {
+        // used a lot
+        border-radius: 4px;
+        background: white;
+        border: 2px solid #ededed;
+        border-left: $sitnet-medium-green-new 4px solid;
+        margin-left: 1.4em;
+        margin-right: 1.4em;
+        margin-bottom: 25px;
+        @media (max-width: $sitnet-mobile) {
+            padding: 5px;
+            margin-bottom: 5px;
+        }
+        padding: 30px;
+
+        &.details-view {
+            margin-left: 3.7em;
+            @media (max-width: $sitnet-mobile) {
+                margin-left: 1em;
+                margin-right: 1em;
+            }
+        }
+
+        &.review-view {
+            margin-left: 0;
+            margin-top: 0;
+            margin-right: 0;
+            padding: 20px;
+        }
+
+        &.essay-review {
+            margin-top: 10px;
+            margin-right: 0;
+            padding: 20px;
+        }
+
+        &.notactive {
+            border-left: #b1b1b1 4px solid;
+        }
+
+        &.waitingroom {
+            margin-left: 2.4em;
+            margin-right: 2.4em;
+        }
+
+        &.exam-view-warning {
+            border-left: $sitnet-red 4px solid;
+            margin-left: 0px;
+            margin-right: 0px;
+        }
+
+        &.exam-questions-warning {
+            border-left: $sitnet-red 4px solid;
+            margin-left: 0px;
+            margin-right: 40px;
+        }
+
+        &.unseen-review {
+            border-color: $sitnet-medium-green-new;
+        }
+
+        @media (max-width: $sitnet-mobile) {
+            margin-left: 0em;
+            margin-right: 0em;
+        }
     }
 
-    &.waitingroom {
-      margin-left: 2.4em;
-      margin-right: 2.4em;
+    .exam-questions-buttons {
+        display: inline-block;
     }
 
-    &.exam-view-warning {
-      border-left: $sitnet-red 4px solid;
-      margin-left: 0px;
-      margin-right: 0px;
-    }
-
-    &.exam-questions-warning {
-      border-left: $sitnet-red 4px solid;
-      margin-left: 0px;
-      margin-right: 40px;
-
-    }
-
-    &.unseen-review {
-      border-color: $sitnet-medium-green-new;
-    }
-
-    @media (max-width: $sitnet-mobile) {
-      margin-left: 0em;
-      margin-right: 0em;
-    }
-
-  }
-
-  .question-review-title { // used in question-review
-    font-family: $sitnet-family-helvetica;
-    font-size: 22px;
-    font-weight: normal;
-    color: #2C2C2C;
-  }
-
-  .question-review-toolbar-text { // ditto
-    line-height: 2.2;
-  }
-
-  .essay-question-review-column { // ditto
-    border-right: 1px solid lightgrey;
-  }
-
-  .essay-question-review-wrapper { // ditto
-    padding-bottom: 30px;
-  }
-
-  .essay-review-status { // ditto
-    line-height: 2.2;
-    font-size: 20px;
-  }
-
-  .essay-answer-instructions-box { // ditto
-    border-top: 1px solid lightgrey;
-    border-bottom: 1px solid lightgrey;
-    padding-top: 1em;
-    padding-bottom: 1em;
-  }
-
-  .question-flow-title { // ditto
-    font-family: $sitnet-family-helvetica;
-    font-size: 22px;
-    font-weight: normal;
-    color: #2C2C2C;
-    padding-bottom: 5px;
-    margin-bottom: 20px;
-    padding-top: 5px;
-    border-bottom: 1px solid #B1B1B1;
-  }
-
-  .question-flow-category-title-wrapper { // ditto
-    border-bottom: 1px solid lightgrey;
-    border-top: 1px solid lightgrey;
-    margin-right: -15px;
-  }
-
-  .question-flow-category-questions {  // ditto
-    margin-bottom: 40px;
-  }
-
-  .question-flow-category-question-wrapper { // ditto
-    border-bottom: 1px solid lightgrey;
-    margin-right: -15px;
-  }
-
-  .question-flow-badge { // ditto
-    background-color: $sitnet-red;
-  }
-
-  .triangle-line { // ditto
-    border-top: 2px solid lightgrey;
-    position: relative;
-    background: white;
-    margin-top: 10px;
-    transform: rotate(180deg);
-    margin-right: -15px;
-    width: 100%;
-  }
-  .triangle-line:before, .triangle-line:after {
-    content: '';
-    position: absolute;
-    right: 70px;
-    top: -19px;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 20px 20px 20px;
-    border-color: transparent transparent white transparent;
-  }
-  .triangle-line:before {
-    right: 68px;
-    top: -22px;
-    border-width: 0 22px 22px 22px;
-    border-bottom-color: lightgrey;
-  }
-
-  .essay-answer-wrapper {
-    border: 1px solid lightgrey;
-    border-left: 4px solid $sitnet-medium-green-new;
-    margin-bottom: 15px
-  }
-
-  .essay-answer-item {
-    border-bottom: 1px solid lightgrey;
-    padding-bottom: 10px;
-    word-wrap: break-word;
-  }
-
-  .essay-answer-warning {
-    margin-left: 1px;
-    margin-right: 1px;
-  }
-
-  .essay-answer-checkbox-item {
-    border-bottom: 1px solid lightgrey;
-    padding-bottom: 14px;
-  }
-
-  .enrollment-card-dropdown{ //active-enrolment
-    grid-column-start: span 3;
-  }
-
-  .student-enrolment-date-box { // waitinroom, active-enrolment
-    border: 2px solid #EDEDED;
-    border-radius: 3px;
-    text-align: center;
-    vertical-align: top;
-    padding: 3px;
-    font-weight: bold;
-    font-family: $sitnet-family-helvetica;
-    font-size: 20px;
-    width: 46px;
-    line-height: 16px;
-    margin-right: 15px;
-
-    .month-name {
-      font-size: 14px;
-    }
-  }
-
-  .student-enrolment-exam { // exam-editor, participations, waiting-room
-    display: inline-block;
-
-    font-size: 16px;
-    font-family: $sitnet-family-helvetica;
-    color: #266B99;
-    font-weight: bold;
-
-    a {
-      font-size: 16px;
-      font-family: $sitnet-family-helvetica;
-      color: #266B99;
-      font-weight: bold;
-      text-decoration: none;
-    }
-
-    .exam-in-progress {
-      color: black;
-      font-size: 13px;
-    }
-
-    .exam-code {
-      color: #555555;
-      font-size: 13px;
-      padding-left: 19px;
-    }
-  }
-
-  .exam-ready {
-    color: $sitnet-green-new;
-    font-size: 13px;
-  }
-
-  .exam-needs-reservation {
-    color: #a61022;
-    font-size: 13px;
-  }
-
-  .student-exam-needs-reservation {
-    color: #a61022;
-    font-size: 13px;
-  }
-
-  .student-exam-header-row {
-    margin-bottom: 10px;
-
-    .student-details-title {
-      font-size: 16px;
-      font-weight: bold;
-      font-family: $sitnet-family-helvetica;
-      color: #2C2C2C;
-    }
+    .question-review-title {
+        // used in question-review
+        font-family: $sitnet-family-helvetica;
+        font-size: 22px;
+        font-weight: normal;
+        color: #2c2c2c;
+    }
 
-    .student-details-subtitle {
-      font-size: 13px;
-      font-weight: bold;
-      color: #555555;
-      font-family: $sitnet-family-helvetica;
+    .question-review-toolbar-text {
+        // ditto
+        line-height: 2.2;
     }
 
-    .student-details-indicator {
-      float: right;
-      color: $sitnet-green-new;
-      font-size: 16px;
-      font-family: $sitnet-family-helvetica;
+    .essay-question-review-column {
+        // ditto
+        border-right: 1px solid lightgrey;
+    }
 
+    .essay-question-review-wrapper {
+        // ditto
+        padding-bottom: 30px;
     }
 
-  }
+    .essay-review-status {
+        // ditto
+        line-height: 2.2;
+        font-size: 20px;
+    }
 
-  .student-exam-row-title-blue { // calendar, waiting-room, participations, exam-search
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    color: #266B99;
-    font-weight: bold;
-  }
+    .essay-answer-instructions-box {
+        // ditto
+        border-top: 1px solid lightgrey;
+        border-bottom: 1px solid lightgrey;
+        padding-top: 1em;
+        padding-bottom: 1em;
+    }
 
-  .student-exam-row {
+    .question-flow-title {
+        // ditto
+        font-family: $sitnet-family-helvetica;
+        font-size: 22px;
+        font-weight: normal;
+        color: #2c2c2c;
+        padding-bottom: 5px;
+        margin-bottom: 20px;
+        padding-top: 5px;
+        border-bottom: 1px solid #b1b1b1;
+    }
 
-    clear: both;
-    padding-top: 10px;
-    color: #555555;
+    .question-flow-category-title-wrapper {
+        // ditto
+        border-bottom: 1px solid lightgrey;
+        border-top: 1px solid lightgrey;
+        margin-right: -15px;
+    }
 
-    .student-exam-row-title {
-      padding-left: 0px;
+    .question-flow-category-questions {
+        // ditto
+        margin-bottom: 40px;
+    }
 
-      .student-exam-row-title-grey {
-        font-family: $sitnet-family-helvetica;
-        font-size: 13px;
-        color: #555555;
+    .question-flow-category-question-wrapper {
+        // ditto
+        border-bottom: 1px solid lightgrey;
+        margin-right: -15px;
+    }
+
+    .question-flow-badge {
+        // ditto
+        background-color: $sitnet-red;
+    }
+
+    .triangle-line {
+        // ditto
+        border-top: 2px solid lightgrey;
+        position: relative;
+        background: white;
+        margin-top: 10px;
+        transform: rotate(180deg);
+        margin-right: -15px;
+        width: 100%;
+    }
+    .triangle-line:before,
+    .triangle-line:after {
+        content: '';
+        position: absolute;
+        right: 70px;
+        top: -19px;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 20px 20px 20px;
+        border-color: transparent transparent white transparent;
+    }
+    .triangle-line:before {
+        right: 68px;
+        top: -22px;
+        border-width: 0 22px 22px 22px;
+        border-bottom-color: lightgrey;
+    }
+
+    .essay-answer-wrapper {
+        border: 1px solid lightgrey;
+        border-left: 4px solid $sitnet-medium-green-new;
+        margin-bottom: 15px;
+    }
+
+    .essay-answer-item {
+        border-bottom: 1px solid lightgrey;
+        padding-bottom: 10px;
+        word-wrap: break-word;
+    }
+
+    .essay-answer-warning {
+        margin-left: 1px;
+        margin-right: 1px;
+    }
+
+    .essay-answer-checkbox-item {
+        border-bottom: 1px solid lightgrey;
+        padding-bottom: 14px;
+    }
+
+    .enrollment-card-dropdown {
+        //active-enrolment
+        grid-column-start: span 3;
+    }
+
+    .student-enrolment-date-box {
+        // waitinroom, active-enrolment
+        border: 2px solid #ededed;
+        border-radius: 3px;
+        text-align: center;
+        vertical-align: top;
+        padding: 3px;
         font-weight: bold;
-      }
+        font-family: $sitnet-family-helvetica;
+        font-size: 20px;
+        width: 46px;
+        line-height: 16px;
+        margin-right: 15px;
 
+        .month-name {
+            font-size: 14px;
+        }
     }
 
-    .student-exam-list-row {
-      display: inline-block;
+    .student-enrolment-exam {
+        // exam-editor, participations, waiting-room
+        display: inline-block;
 
-      &.enroll-button {
-        float: right;
-        color: $sitnet-green-new;
         font-size: 16px;
         font-family: $sitnet-family-helvetica;
-      }
+        color: #266b99;
+        font-weight: bold;
+
+        a {
+            font-size: 16px;
+            font-family: $sitnet-family-helvetica;
+            color: #266b99;
+            font-weight: bold;
+            text-decoration: none;
+        }
+
+        .exam-in-progress {
+            color: black;
+            font-size: 13px;
+        }
+
+        .exam-code {
+            color: #555555;
+            font-size: 13px;
+            padding-left: 19px;
+        }
     }
-  }
 
-  .infolink { // a lot
-    color: #266B99;
-    font-family: $sitnet-family-helvetica;
-    font-weight: bold;
-    text-decoration: none;
-  }
+    .exam-ready {
+        color: $sitnet-green-new;
+        font-size: 13px;
+    }
 
-  .infolink-light {
-    color: #266B99;
-    font-family: $sitnet-family-helvetica;
-    text-decoration: none;
-  }
+    .exam-needs-reservation {
+        color: #a61022;
+        font-size: 13px;
+    }
 
-  .infolink-light-alert {
-    color: $sitnet-aborted;
-    font-family: $sitnet-family-helvetica;
-    text-decoration: none;
-  }
+    .student-exam-needs-reservation {
+        color: #a61022;
+        font-size: 13px;
+    }
 
-  .student-exam-row-infolink {
+    .student-exam-header-row {
+        margin-bottom: 10px;
 
-    padding-top: 1em;
-    display: inline-block;
-    width: 100%;
+        .student-details-title {
+            font-size: 16px;
+            font-weight: bold;
+            font-family: $sitnet-family-helvetica;
+            color: #2c2c2c;
+        }
+
+        .student-details-subtitle {
+            font-size: 13px;
+            font-weight: bold;
+            color: #555555;
+            font-family: $sitnet-family-helvetica;
+        }
 
-    &.infotitle {
-      color: #2C2C2C;
-      font-family: $sitnet-family-helvetica;
-      font-weight: bold;
+        .student-details-indicator {
+            float: right;
+            color: $sitnet-green-new;
+            font-size: 16px;
+            font-family: $sitnet-family-helvetica;
+        }
     }
 
-    .arrow_icon {
-      vertical-align: baseline;
-      padding-left: 3px;
+    .student-exam-row-title-blue {
+        // calendar, waiting-room, participations, exam-search
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        color: #266b99;
+        font-weight: bold;
     }
 
-  }
+    .student-exam-row {
+        clear: both;
+        padding-top: 10px;
+        color: #555555;
 
-  .student-exam-row-infobox { // enrolments
-    padding-top: 1em;
-  }
+        .student-exam-row-title {
+            padding-left: 0px;
 
-  .student-exam-all-required {
-    color: $sitnet-green-new;
-    font-size: 16px;
-    font-family: $sitnet-family-helvetica;
-    padding-right: 3px;
-  }
+            .student-exam-row-title-grey {
+                font-family: $sitnet-family-helvetica;
+                font-size: 13px;
+                color: #555555;
+                font-weight: bold;
+            }
+        }
 
-  .bottom-row {
-    @extend .detail-row;
-    padding-bottom: 1em;
-  }
+        .student-exam-list-row {
+            display: inline-block;
 
-  .top-row {
-    @extend .detail-row;
-    padding-top: 45px;
+            &.enroll-button {
+                float: right;
+                color: $sitnet-green-new;
+                font-size: 16px;
+                font-family: $sitnet-family-helvetica;
+            }
+        }
+    }
 
-    @media (max-width: $sitnet-mobile) {
-      padding-top: 15px;
+    .infolink {
+        // a lot
+        color: #266b99;
+        font-family: $sitnet-family-helvetica;
+        font-weight: bold;
+        text-decoration: none;
     }
-  }
 
-  .main-row {
-    @extend .detail-row;
-    padding-top: 1em;
-    padding-bottom: 1em;
-  }
+    .infolink-light {
+        color: #266b99;
+        font-family: $sitnet-family-helvetica;
+        text-decoration: none;
+    }
 
-  .wide-column { // exam-question
-    padding-right: 0;
-  }
+    .infolink-light-alert {
+        color: $sitnet-aborted;
+        font-family: $sitnet-family-helvetica;
+        text-decoration: none;
+    }
 
-  .collaborative-exam-table { // collab exam search
-    overflow-x: scroll;
-  }
+    .student-exam-row-infolink {
+        padding-top: 1em;
+        display: inline-block;
+        width: 100%;
 
-  .exams-table { // reviews/exam editor/maturity/question/reservations :D 
+        &.infotitle {
+            color: #2c2c2c;
+            font-family: $sitnet-family-helvetica;
+            font-weight: bold;
+        }
 
-    font-family: $sitnet-family-helvetica;
-    font-weight: bold;
-    font-size: 0.9em;
+        .arrow_icon {
+            vertical-align: baseline;
+            padding-left: 3px;
+        }
+    }
 
-    th {
-      border: 0;
-      font-family: $sitnet-family-helvetica;
-      font-size: 14px;
-      text-transform: uppercase;
-      white-space: nowrap;
+    .student-exam-row-infobox {
+        // enrolments
+        padding-top: 1em;
+    }
 
-      &.with-space {
-        white-space: normal;
-      }
+    .student-exam-all-required {
+        color: $sitnet-green-new;
+        font-size: 16px;
+        font-family: $sitnet-family-helvetica;
+        padding-right: 3px;
+    }
 
-      &.with-top {
-        vertical-align: top;
+    .bottom-row {
+        @extend .detail-row;
+        padding-bottom: 1em;
+    }
 
-      }
+    .top-row {
+        @extend .detail-row;
+        padding-top: 45px;
 
-      &.reservation-search {
-        padding-bottom: 25px;
-      }
+        @media (max-width: $sitnet-mobile) {
+            padding-top: 15px;
+        }
+    }
 
+    .main-row {
+        @extend .detail-row;
+        padding-top: 1em;
+        padding-bottom: 1em;
     }
 
-    td {
+    .wide-column {
+        // exam-question
+        padding-right: 0;
+    }
 
-      font-family: $sitnet-family-helvetica;
-      font-weight: normal;
-      font-size: 14px;
+    .collaborative-exam-table {
+        // collab exam search
+        overflow-x: scroll;
+    }
+
+    .exams-table {
+        // reviews/exam editor/maturity/question/reservations :D
 
-      a {
-        font-weight: bold;
-        font-size: 16px;
         font-family: $sitnet-family-helvetica;
-        color: #267B99;
+        font-weight: bold;
+        font-size: 0.9em;
+
+        th {
+            border: 0;
+            font-family: $sitnet-family-helvetica;
+            font-size: 14px;
+            text-transform: uppercase;
+            white-space: nowrap;
+
+            &.with-space {
+                white-space: normal;
+            }
+
+            &.with-top {
+                vertical-align: top;
+            }
+
+            &.reservation-search {
+                padding-bottom: 25px;
+            }
+        }
 
-        &.smaller {
-          font-size: 14px;
+        td {
+            font-family: $sitnet-family-helvetica;
+            font-weight: normal;
+            font-size: 14px;
+
+            a {
+                font-weight: bold;
+                font-size: 16px;
+                font-family: $sitnet-family-helvetica;
+                color: #267b99;
+
+                &.smaller {
+                    font-size: 14px;
+                }
+            }
+
+            &.reservation-search {
+                a {
+                    font-size: 14px !important;
+                }
+                a.reservation {
+                    font-weight: normal !important;
+                }
+
+                &.no_show {
+                    color: $sitnet-red !important;
+                }
+
+                &.review {
+                    color: $sitnet-green-new !important;
+                }
+            }
+
+            .exam-code {
+                color: #2c2c2c;
+                font-weight: bold;
+                font-size: 13px;
+                font-family: $sitnet-family-helvetica;
+            }
+
+            .exam-type {
+                text-transform: capitalize;
+            }
+
+            .exam-count {
+                color: #266b99;
+                font-size: 14px;
+                font-weight: bold;
+            }
+
+            .exam-count-not-active {
+                font-weight: bold;
+                font-size: 16px;
+                font-family: $sitnet-family-helvetica;
+            }
         }
-      }
 
-      &.reservation-search {
-        a {
-          font-size: 14px !important;
+        th:first-child {
+            padding-left: 30px;
         }
-        a.reservation {
-          font-weight: normal !important;
+
+        td:first-child {
+            border-left: 0;
+            padding-left: 30px;
         }
 
-        &.no_show {
-          color: $sitnet-red !important;
+        td:last-child {
+            border-right: 0;
         }
 
-        &.review {
-          color: $sitnet-green-new !important;
+        tr:last-child {
+            td {
+                border-bottom: 0;
+            }
         }
+    }
+
+    .table-column-checkbox {
+        width: 2%;
+        text-align: center;
+    }
 
-      }
+    .table-column-13 {
+        width: 13%;
+    }
 
-      .exam-code {
-        color: #2C2C2C;
+    .table-column-examname {
+        width: 25%;
         font-weight: bold;
-        font-size: 13px;
-        font-family: $sitnet-family-helvetica;
+    }
 
-      }
+    .table-column-enroll-participation {
+        // exam-listign
+        width: 10%;
+        font-weight: bold;
+        font-size: 1.2em;
 
-      .exam-type {
-        text-transform: capitalize;
-      }
+        span {
+            font-size: 0.8em;
+            color: $sitnet-common-medium;
+        }
+    }
 
-      .exam-count {
-        color: #266B99;
-        font-size: 14px;
-        font-weight: bold;
-      }
+    .table-column-open-until {
+        // exam-listign
+        width: 10%;
+    }
 
-      .exam-count-not-active {
+    .table-column-10 {
+        width: 10%;
+    }
+
+    .table-column-15 {
+        width: 15%;
+    }
+
+    .table-column-25 {
+        width: 25%;
+    }
+
+    .table-column-teachers {
+        // exams list, review
+        width: 25%;
+    }
+
+    .table-column-bold {
+        // maturity, review
         font-weight: bold;
-        font-size: 16px;
+    }
+
+    .exams-list-title-text {
+        // wrong-location
+        font-size: 1.4em;
         font-family: $sitnet-family-helvetica;
-      }
+        font-weight: 400;
+        letter-spacing: 1px;
+        vertical-align: middle;
+    }
+
+    .exams-list {
+        // wrong-location, collab search
+        background-color: white;
 
+        .student-enrolment-wrapper {
+            // disambiguosu
+            margin-right: 20px;
+            @media (max-width: $sitnet-mobile) {
+                padding: 10px;
+            }
+        }
     }
 
-    th:first-child {
-      padding-left: 30px;
+    .student-title-wrap {
+        // enrolments
+        display: inline-block;
     }
 
-    td:first-child {
-      border-left: 0;
-      padding-left: 30px;
+    .inline-list li {
+        // library, statistics
+        list-style: none;
     }
 
-    td:last-child {
-      border-right: 0;
+    .muted-list {
+        // participant picker
+        list-style: none;
+        padding: 0;
     }
 
-    tr:last-child {
-      td {
-        border-bottom: 0;
-      }
+    .vcenter {
+        // review (feedback, question review)
+        display: inline-block;
+        vertical-align: middle;
+        float: none;
     }
-  }
 
-  .table-column-checkbox {
-    width: 2%;
-    text-align: center;
-  }
+    .report-category {
+        // reports
+        margin: 2em;
+        border: 2px solid lightgrey;
+        border-radius: 4pt;
+
+        .dropdown > button {
+            width: 100%;
+            display: inline-flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .print-btn {
+            background-color: #6aa33a;
+            color: white;
+            width: 38px;
+            height: 38px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 2px;
+            margin-left: auto;
+        }
+    }
 
-  .table-column-13 {
-    width: 13%;
-  }
+    @media screen {
+        // maturity report
+        .print-only {
+            display: none !important;
+        }
+    }
 
-  .table-column-examname { 
-    width: 25%;
-    font-weight: bold;
-  }
+    @media print {
+        // maturity report
 
-  .table-column-enroll-participation { // exam-listign
-    width: 10%;
-    font-weight: bold;
-    font-size: 1.2em;
+        a[href]:after {
+            content: none !important;
+        }
 
-    span {
-      font-size: 0.8em;
-      color: $sitnet-common-medium;
+        .no-print {
+            display: none !important;
+        }
     }
-  }
 
-  .table-column-open-until { // exam-listign
-    width: 10%;
-  }
+    .evaluation-padtop {
+        // finished enrolment
+        padding-top: 10px;
+    }
 
-  .table-column-10 {
-    width: 10%;
-  }
+    .margin-10 {
+        // question
+        margin-top: 10px;
+    }
 
-  .table-column-15 {
-    width: 15%;
-  }
+    .margin-20 {
+        // editpr, review, question
+        margin-top: 20px;
+    }
 
-  .table-column-25 {
-    width: 25%;
-  }
+    .notice-wrap {
+        // finiwghed enrolment
+        margin-left: 1em;
+        display: inline-block;
+        margin-bottom: 30px;
+        margin-top: 10px;
+    }
 
-  .table-column-teachers { // exams list, review
-    width: 25%;
-  }
+    .tab-wrapper {
+        // facility, teacher db, maturity, review
+        margin-top: 40px;
+        @media (max-width: $sitnet-mobile) {
+            margin-left: 0;
+            margin-right: 0;
+        }
+        margin-left: 3.4em;
+        margin-right: 3.4em;
+        @media (max-width: $sitnet-mobile) {
+            margin-left: 3px;
+            margin-right: 3px;
+            margin-top: 10px;
+        }
+    }
 
-  .table-column-bold { // maturity, review
-    font-weight: bold;
-  }
+    .tab-number {
+        // teacher db
+        @extend .badge;
+        background-color: $sitnet-red !important;
+        color: white;
+    }
 
-  .exams-list-title-text { // wrong-location
-    font-size: 1.4em;
-    font-family: $sitnet-family-helvetica;
-    font-weight: 400;
-    letter-spacing: 1px;
-    vertical-align: middle;
-  }
+    .tab-wrapper-exams {
+        // maturity, review
+        margin-top: 40px;
+        @media (max-width: $sitnet-mobile) {
+            margin-left: 0;
+            margin-right: 0;
+        }
+        margin-left: 3.4em;
+        margin-right: 3.4em;
 
-  .exams-list { // wrong-location, collab search
-    background-color: $sitnet-background;
+        &.review {
+            margin-top: 0px;
+        }
 
-    .student-enrolment-wrapper { // disambiguosu
-      margin-right: 20px;
-      @media (max-width: $sitnet-mobile) {
-        padding: 10px;
-      }
+        .review-border {
+            border: 1px solid $sitnet-border-color;
+            padding-bottom: 30px;
+            margin-top: 25px;
+            border-radius: 4px;
+        }
+
+        @media print {
+            margin-left: 0;
+            margin-right: 0;
+        }
     }
-  }
 
-  .student-title-wrap { // enrolments
-    display: inline-block;
-  }
+    .nav-tabs {
+        // facili, teacher db, review, editor
 
-  .inline-list li { // library, statistics
-    list-style: none;
-  }
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        .nav-link.active {
+            font-weight: bold;
+        }
+        a {
+            color: #555555;
+        }
+    }
 
-  .muted-list { // participant picker
-    list-style: none;
-    padding: 0;
-  }
+    .tab-search {
+        // teacher db
 
-  .vcenter { // review (feedback, question review)
-    display: inline-block;
-    vertical-align: middle;
-    float: none;
-  }
+        padding-top: 30px;
+        padding-bottom: 20px;
+        padding-left: 30px;
+    }
 
-  .report-category { // reports
-    margin: 2em;
-    border: 2px solid lightgrey;
-    border-radius: 4pt;
+    .review-list-title {
+        // editor, question,  revie2, maturity
+        font-family: $sitnet-family-helvetica;
+        font-size: 22px;
+        font-weight: normal;
+        color: #2c2c2c;
+        padding-bottom: 5px;
+        border-bottom: 1px solid #b1b1b1;
+
+        &.section-title {
+            font-size: 20px;
+            letter-spacing: 0.63px;
+        }
+    }
 
-    .dropdown > button {
-      width: 100%;
-      display: inline-flex;
-      justify-content: space-between;
-      align-items: center;
+    .score-details {
+        // review, examination
+        float: right;
+        font-size: 16px;
+        vertical-align: bottom;
+        margin-top: 6px;
+        color: #555555;
     }
 
-    .print-btn {
-      background-color: #6AA33A;
-      color: white;
-      width: 38px;
-      height: 38px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 2px;
-      margin-left: auto;
+    .review-list-footer {
+        // review
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        font-weight: normal;
+        color: #2c2c2c;
     }
-  }
 
-  @media screen { // maturity report
-    .print-only {
-      display: none !important;
+    @media (max-width: 1100px) {
+        .review-list-footer {
+            float: left;
+            padding-left: 30px;
+        }
     }
-  }
 
-  @media print { // maturity report
+    .review-list-subtitle {
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        color: #2c2c2c;
+    }
 
-    a[href]:after {
-      content: none !important;
+    .review-list-title-row {
+        // speed rev
+        padding-top: 30px;
+        padding-left: 30px;
     }
 
-    .no-print {
-      display: none !important;
+    .review-list-bluetitle {
+        // review-llist
+
+        a {
+            font-family: $sitnet-family-helvetica;
+            font-weight: bold;
+            color: #266b99;
+            font-size: 16px;
+        }
     }
 
-  }
+    .review-attachment-button {
+        a,
+        button {
+            font-size: 16px;
+            font-family: $sitnet-family-helvetica;
+            background-color: $sitnet-green-new;
+            border: 1px solid $sitnet-dark-green-new;
+            width: 100%;
+            padding-left: 20px;
+            padding-right: 20px;
+            line-height: 1.5;
+            border-radius: 3px;
+            color: white;
+            text-align: center;
+            display: block;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            text-decoration: none;
+
+            &.notinuse {
+                background-color: #7f7f7f;
+                color: #ffffff;
+                border: 1px solid black;
+            }
+
+            &.preview {
+                background-color: white;
+                border: 1px #979797 solid;
+                color: #555555;
+            }
+
+            &.warning {
+                background-color: white;
+                border: $sitnet-red 1px solid;
+                color: $sitnet-red;
+            }
+
+            &.warning-filled {
+                background-color: $sitnet-red;
+                border: $sitnet-red 1px solid;
+                color: white;
+            }
+
+            &.cancel {
+                color: #fff;
+                background-color: #7f7f7f;
+                border-color: #6b6b6b;
+            }
+        }
 
-  .evaluation-padtop { // finished enrolment
-    padding-top: 10px;
-  }
+        .disabled-button-popover-wrapper {
+            cursor: not-allowed;
+        }
 
-  .margin-10 { // question
-    margin-top: 10px;
-  }
+        button:disabled {
+            opacity: 0.3;
+            pointer-events: none;
+            cursor: not-allowed;
+        }
 
-  .margin-20 { // editpr, review, question
-    margin-top: 20px;
-  }
+        a:hover,
+        button:active,
+        button:focus,
+        button:active:focus {
+            background-color: $sitnet-dark-green-new;
+            border: 1px solid $sitnet-dark-green-new;
+            text-decoration: none;
+
+            &.notinuse {
+                background-color: #7f7f7f;
+                color: #ffffff;
+                border: 1px solid black;
+            }
+
+            &.preview {
+                background-color: #7f7f7f;
+                border: 1px #979797 solid;
+                color: #ffffff;
+            }
+
+            &.warning {
+                background-color: $sitnet-dark-red;
+                border: $sitnet-dark-red 1px solid;
+                color: #ffffff;
+            }
+
+            &.warning-filled {
+                background-color: $sitnet-dark-red;
+                border: $sitnet-dark-red 1px solid;
+                color: white;
+            }
+
+            &.cancel {
+                color: #fff !important;
+                background-color: #6b6b6b !important;
+                border-color: #6b6b6b !important;
+            }
+        }
 
-  .notice-wrap { // finiwghed enrolment
-    margin-left: 1.0em;
-    display: inline-block;
-    margin-bottom: 30px;
-    margin-top: 10px;
-  }
+        &.print-button {
+            display: inline-block;
+            margin-left: 30px;
+        }
 
-  .tab-wrapper { // facility, teacher db, maturity, review
-    margin-top: 40px;
-    @media (max-width: $sitnet-mobile) {
-      margin-left: 0;
-      margin-right: 0;
+        &.autoeval-button {
+            width: 170px;
+            margin-top: 25px;
+            margin-bottom: 30px;
+        }
     }
-    margin-left: 3.4em;
-    margin-right: 3.4em;
-    @media (max-width: $sitnet-mobile) {
-
-      margin-left: 3px;
-      margin-right: 3px;
-      margin-top: 10px;
 
+    .review-no-show {
+        margin-right: 0px;
+        margin-left: 0;
+        margin-top: 40px;
     }
-  }
 
-  .tab-number { // teacher db
-    @extend .badge;
-    background-color: $sitnet-red !important;
-    color: white;
-  }
+    .review-no-results {
+        padding-left: 10px;
+        color: #555555;
+        font-size: 18px;
+        margin-right: 10px;
+        letter-spacing: 0.84px;
+        margin-top: 10px;
+    }
 
-  .tab-wrapper-exams { // maturity, review
-    margin-top: 40px;
-    @media (max-width: $sitnet-mobile) {
-      margin-left: 0;
-      margin-right: 0;
+    .review-toolbar-wrapper {
+        // grading
+        margin-top: 20px;
+        padding-top: 20px;
+        margin-left: 30px;
+        padding-right: 15px;
     }
-    margin-left: 3.4em;
-    margin-right: 3.4em;
 
-    &.review {
-      margin-top: 0px;
+    .exam-basic-title {
+        // editor, review, matr, qu
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        color: #2c2c2c;
     }
 
-    .review-border {
-      border: 1px solid $sitnet-border-color;
-      padding-bottom: 30px;
-      margin-top: 25px;
-      border-radius: 4px;
+    .exam-basic-selecttitle {
+        // maturity, editor
+        color: #777777;
+        font-size: 12px;
+        text-transform: uppercase;
+        font-family: $sitnet-family-helvetica;
     }
 
-    @media print {
-      margin-left: 0;
-      margin-right: 0;
+    .exam-button {
+        // course select
+        color: white;
+        background-color: $sitnet-green-new;
+        border: 1px solid $sitnet-dark-green-new;
+        height: 45px;
+        padding-left: 30px;
+        padding-right: 30px;
+        margin-bottom: 5px;
+        margin-left: 20px;
     }
 
-  }
+    .exam-button:hover {
+        background-color: $sitnet-dark-green-new;
+    }
 
-  .nav-tabs { // facili, teacher db, review, editor
+    .btn-review {
+        // editor
+        color: #2c2c2c;
+        background-color: white;
+        border-color: #00a34b;
+        height: 40px;
+        padding-left: 30px;
+        padding-right: 30px;
+
+        &.btn-primary {
+            color: #2c2c2c;
+            background-color: #7fd28e;
+            border-color: $sitnet-dark-green-new;
+            height: 40px;
+            padding-left: 30px;
+            padding-right: 30px;
+        }
+    }
 
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    .nav-link.active {
-      font-weight: bold;
+    .reservation-border {
+        // question reserv, editor :D
+        @media (max-width: $sitnet-mobile) {
+            margin-left: 0;
+            margin-right: 0;
+        }
+        border: 1px solid $sitnet-border-color;
+        padding-bottom: 50px;
+        margin-left: 50px;
+        margin-right: 30px;
+        margin-top: 45px;
+        padding-left: 1px;
     }
-    a {
-      color: #555555;
 
+    .reservation-search-titles {
+        // reservation
+        font-family: $sitnet-family-helvetica;
+        font-weight: normal;
+        font-size: 12px;
+        background-color: white;
+        border: 0;
+        color: #777777;
+        text-transform: uppercase;
+        //white-space: nowrap;
     }
-  }
 
-  .tab-search { // teacher db
+    .btn {
+        &.green {
+            background-color: #3ca34f;
+        }
+        &.whitetext {
+            color: #ffffff;
+        }
+    }
 
-    padding-top: 30px;
-    padding-bottom: 20px;
-    padding-left: 30px;
+    .general-info-title {
+        // review
+        color: #555555;
+    }
+    .general-info-content {
+        color: #2c2c2c;
 
-  }
+        pre {
+            white-space: inherit;
+        }
+    }
+    .general-info-link {
+        color: #266b99;
+    }
+    .general-info-link-bold {
+        color: #266b99;
+        font-weight: bold;
+    }
 
-  .review-list-title { // editor, question,  revie2, maturity
-    font-family: $sitnet-family-helvetica;
-    font-size: 22px;
-    font-weight: normal;
-    color: #2C2C2C;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #B1B1B1;
+    .review-points {
+        margin-right: 0px;
+        padding-right: 15px;
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        color: #555555;
+        font-weight: 400;
+    }
 
-    &.section-title {
-      font-size: 20px;
-      letter-spacing: 0.63px;
+    .review-points-exam {
+        display: block;
+        margin-right: 0px;
+        padding-top: 10px;
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        color: #555555;
+        font-weight: 400;
+        padding-bottom: 10px;
+        padding-left: 10px;
     }
-  }
 
-  .score-details { // review, examination
-    float: right;
-    font-size: 16px;
-    vertical-align: bottom;
-    margin-top: 6px;
-    color: #555555;
-  }
+    .review-question-title {
+        font-family: $sitnet-family-helvetica;
+        font-size: 16px;
+        color: #2c2c2c;
+        padding-right: 15px;
+        letter-spacing: 0.3px;
 
-  .review-list-footer { // review
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    font-weight: normal;
-    color: #2C2C2C;
-  }
+        p {
+            display: inline-block;
+        }
+    }
 
-  @media (max-width: 1100px) {
-    .review-list-footer {
-      float: left;
-      padding-left: 30px;
-    }
-  }
-
-  .review-list-subtitle {
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    color: #2C2C2C;
-  }
-
-  .review-list-title-row { // speed rev
-    padding-top: 30px;
-    padding-left: 30px;
-  }
-
-  .review-list-bluetitle { // review-llist
-
-    a {
-      font-family: $sitnet-family-helvetica;
-      font-weight: bold;
-      color: #266B99;
-      font-size: 16px;
-
-    }
-  }
-
-  .review-attachment-button {
-    a, button {
-      font-size: 16px;
-      font-family: $sitnet-family-helvetica;
-      background-color: $sitnet-green-new;
-      border: 1px solid $sitnet-dark-green-new;
-      width: 100%;
-      padding-left: 20px;
-      padding-right: 20px;
-      line-height: 1.5;
-      border-radius: 3px;
-      color: white;
-      text-align: center;
-      display: block;
-      padding-top: 10px;
-      padding-bottom: 10px;
-      text-decoration: none;
-
-      &.notinuse {
-        background-color: #7F7F7F;
-        color: #ffffff;
-        border: 1px solid black;
-      }
-
-      &.preview {
+    .teacher-toolbar {
+        // library, teacher db
+        float: right;
+        margin-right: 30px;
+    }
+
+    .btn-publish {
+        // editor
+        color: #2c2c2c;
         background-color: white;
-        border: 1px #979797 solid;
+        border-color: #00a34b;
+        height: 40px;
+        padding-left: 15px;
+        padding-right: 15px;
+
+        &.btn-primary {
+            color: #2c2c2c;
+            background-color: #7fd28e;
+            border-color: $sitnet-dark-green-new;
+            height: 40px;
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+    }
+
+    .autoevaluation-info {
         color: #555555;
-      }
+        font-size: 18px;
+        font-family: $sitnet-family-helvetica;
+        line-height: 26px;
+    }
 
-      &.warning {
+    .autoevaluation-titles {
         background-color: white;
-        border: $sitnet-red 1px solid;
-        color: $sitnet-red;
-      }
+        border: 0;
+        font-family: $sitnet-family-helvetica;
+        font-size: 12px;
+        color: #777777;
+        text-transform: uppercase;
+        font-weight: normal;
+        padding-bottom: 10px;
+    }
 
-      &.warning-filled {
-        background-color: $sitnet-red;
-        border: $sitnet-red 1px solid;
-        color: white;
-      }
+    .autoevaluation-inputs {
+        width: 113px;
+        height: 40px;
+        //border: 1px solid #EDEDED;
+        display: inline-block;
+    }
 
-      &.cancel {
-        color: #fff;
-        background-color: #7F7F7F;
-        border-color: #6B6B6B;
+    .autoevaluation-numbers {
+        height: 40px;
+        padding-top: 10px;
+    }
 
-      }
+    .question-table-name {
+        // library
+        p {
+            margin: 0px;
+        }
+        a {
+            font-size: 14px !important;
+        }
+    }
 
+    .question-table-checkbox {
+        font-size: 20px;
+        padding-top: 15px;
     }
 
-    .disabled-button-popover-wrapper {
-      cursor: not-allowed;
+    .warning-text {
+        // question
+        font-size: 18px;
+        color: #555555;
     }
 
-    button:disabled {
-      opacity: 0.3;
-      pointer-events: none;
-      cursor: not-allowed;
+    .warning-text-small {
+        color: #2c2c2c;
+        font-size: 12px;
     }
 
-    a:hover, button:active, button:focus, button:active:focus {
-      background-color: $sitnet-dark-green-new;
-      border: 1px solid $sitnet-dark-green-new;
-      text-decoration: none;
+    .exists-text {
+        font-family: $sitnet-family-helvetica;
+        font-weight: bold;
+        color: #266b99;
+        font-size: 16px;
+    }
 
-      &.notinuse {
-        background-color: #7F7F7F;
-        color: #ffffff;
-        border: 1px solid black;
-      }
+    .reddish {
+        color: $sitnet-red;
+    }
 
-      &.preview {
-        background-color: #7F7F7F;
-        border: 1px #979797 solid;
-        color: #ffffff;
-      }
+    .grayish {
+        color: #979797;
+        font-size: 20px;
+        margin-right: 10px;
+    }
 
-      &.warning {
-        background-color: $sitnet-dark-red;
-        border: $sitnet-dark-red 1px solid;
-        color: #ffffff;
-      }
+    .question-border {
+        border: 1px solid $sitnet-border-color;
+        padding-bottom: 30px;
+        margin-top: 25px;
+        border-radius: 4px;
+    }
 
-      &.warning-filled {
-        background-color: $sitnet-dark-red;
-        border: $sitnet-dark-red 1px solid;
-        color: white;
-      }
-
-      &.cancel {
-        color: #fff !important;;
-        background-color: #6B6B6B !important;;
-        border-color: #6B6B6B !important;;
-      }
-
-    }
-
-    &.print-button {
-      display: inline-block;
-      margin-left: 30px;
-    }
-
-    &.autoeval-button {
-      width: 170px;
-      margin-top: 25px;
-      margin-bottom: 30px;
-    }
-  }
-
-  .review-no-show {
-    margin-right: 0px;
-    margin-left: 0;
-    margin-top: 40px;
-  }
-
-  .review-no-results {
-    padding-left: 10px;
-    color: #555555;
-    font-size: 18px;
-    margin-right: 10px;
-    letter-spacing: 0.84px;
-    margin-top: 10px;
-  }
-
-  .review-toolbar-wrapper { // grading
-    margin-top: 20px;
-    padding-top: 20px;
-    margin-left: 30px;
-    padding-right: 15px;
-  }
-
-  .exam-basic-title { // editor, review, matr, qu
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    color: #2C2C2C;
-  }
-
-  .exam-basic-selecttitle { // maturity, editor
-    color: #777777;
-    font-size: 12px;
-    text-transform: uppercase;
-    font-family: $sitnet-family-helvetica;
-  }
-
-  .exam-button { // course select
-    color: white;
-    background-color: $sitnet-green-new;
-    border: 1px solid $sitnet-dark-green-new;
-    height: 45px;
-    padding-left: 30px;
-    padding-right: 30px;
-    margin-bottom: 5px;
-    margin-left: 20px;
-  }
-
-  .exam-button:hover {
-    background-color: $sitnet-dark-green-new;
-  }
-
-  .btn-review { // editor
-    color: #2C2C2C;
-    background-color: white;
-    border-color: #00A34B;
-    height: 40px;
-    padding-left: 30px;
-    padding-right: 30px;
-
-    &.btn-primary {
-      color: #2C2C2C;
-      background-color: #7FD28E;
-      border-color: $sitnet-dark-green-new;
-      height: 40px;
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-  }
-
-  .reservation-border { // question reserv, editor :D
-    @media (max-width: $sitnet-mobile) {
-      margin-left: 0;
-      margin-right: 0;
-    }
-    border: 1px solid $sitnet-border-color;
-    padding-bottom: 50px;
-    margin-left: 50px;
-    margin-right: 30px;
-    margin-top: 45px;
-    padding-left: 1px;
-  }
-
-  .reservation-search-titles { // reservation
-    font-family: $sitnet-family-helvetica;
-    font-weight: normal;
-    font-size: 12px;
-    background-color: white;
-    border: 0;
-    color: #777777;
-    text-transform: uppercase;
-    //white-space: nowrap;
-
-  }
-
-  .btn {
-    &.green {
-      background-color: #3CA34F;
-    }
-    &.whitetext {
-      color: #ffffff;
-    }
-  }
-
-  .general-info-title { // review
-    color: #555555;
-  }
-  .general-info-content {
-    color: #2C2C2C;
-
-    pre {
-      white-space: inherit;
-    }
-  }
-  .general-info-link {
-    color: #266B99;
-  }
-  .general-info-link-bold {
-    color: #266B99;
-    font-weight: bold;
-  }
-
-  .review-points {
-    margin-right: 0px;
-    padding-right: 15px;
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    color: #555555;
-    font-weight: 400;
-  }
-
-  .review-points-exam {
-    display: block;
-    margin-right: 0px;
-    padding-top: 10px;
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    color: #555555;
-    font-weight: 400;
-    padding-bottom: 10px;
-    padding-left: 10px;
-  }
-
-  .review-question-title {
-    font-family: $sitnet-family-helvetica;
-    font-size: 16px;
-    color: #2C2C2C;
-    padding-right: 15px;
-    letter-spacing: 0.3px;
-
-    p {
-      display: inline-block;
-    }
-  }
-
-  .teacher-toolbar {  // library, teacher db
-    float: right;
-    margin-right: 30px;
-  }
-
-  .btn-publish { // editor
-    color: #2C2C2C;
-    background-color: white;
-    border-color: #00A34B;
-    height: 40px;
-    padding-left: 15px;
-    padding-right: 15px;
-
-    &.btn-primary {
-      color: #2C2C2C;
-      background-color: #7FD28E;
-      border-color: $sitnet-dark-green-new;
-      height: 40px;
-      padding-left: 15px;
-      padding-right: 15px;
-    }
-  }
-
-  .autoevaluation-info {
-    color: #555555;
-    font-size: 18px;
-    font-family: $sitnet-family-helvetica;
-    line-height: 26px;
-  }
-
-  .autoevaluation-titles {
-    background-color: white;
-    border: 0;
-    font-family: $sitnet-family-helvetica;
-    font-size: 12px;
-    color: #777777;
-    text-transform: uppercase;
-    font-weight: normal;
-    padding-bottom: 10px;
-  }
-
-  .autoevaluation-inputs {
-    width: 113px;
-    height: 40px;
-    //border: 1px solid #EDEDED;
-    display: inline-block;
-  }
-
-  .autoevaluation-numbers {
-    height: 40px;
-    padding-top: 10px;
-  }
-
-  .question-table-name { // library
-    p {
-      margin: 0px;
-    }
-    a {
-      font-size: 14px !important;
-    }
-  }
-
-  .question-table-checkbox {
-    font-size: 20px;
-    padding-top: 15px;
-  }
-
-  .warning-text {  // question
-    font-size: 18px;
-    color: #555555;
-  }
-
-  .warning-text-small {
-    color: #2C2C2C;
-    font-size: 12px;
-  }
-
-  .exists-text {
-    font-family: $sitnet-family-helvetica;
-    font-weight: bold;
-    color: #266B99;
-    font-size: 16px;
-  }
-
-  .reddish {
-    color: $sitnet-red;
-  }
-
-  .grayish {
-    color: #979797;
-    font-size: 20px;
-    margin-right: 10px;
-  }
-
-  .question-border {
-    border: 1px solid $sitnet-border-color;
-    padding-bottom: 30px;
-    margin-top: 25px;
-    border-radius: 4px;
-  }
-
-  .wdt50 {
-    width: 50px;
-  }
-
-  .wdt100 {
-    width: 100px;
-    border-bottom-right-radius: 4px;
-    border-top-right-radius: 4px;
-
-  }
-
-  .wdt120 {
-    width: 120px;
-  }
-  .wdt240 {
-    width: 240px;
-  }
-
-  .attachment-link {
-    color: #266B99;
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  .remove-attachment {
-    margin-bottom: 3px;
-    margin-left: 5px;
-  }
-
-  .bigbutton {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 60px;
-    padding-right: 60px;
-  }
-
-  .question-cancel {
-    float: right;
-    margin-top: 40px;
-  }
-
-  .question-option-radio {
-    font-size: 20px;
-    margin-right: 30px;
-    margin-left: 15px;
-    margin-top: 12px;
-  }
-
-  .question-option-input {
-    width: 27em;
-    height: 40px;
-    border-radius: 4px;
-    border: 1px solid #E0E0DF;
-    padding-left: 10px;
-    margin-right: 30px;
-
-    &.ng-invalid {
-      border: 1px solid red;
-    }
-
-    &.radiobut {
-      width: 100%;
-    }
-
-    &.points {
-      width: 5em;
-    }
-  }
-
-  .question-option-empty {
-    border-top: 1px solid white;
-    border-left: 1px solid white;
-    border-bottom: 1px solid white;
-    background-color: white;
-    padding: 10px 10px 0 10px;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-
-  .question-option-empty-radio {
-    border-top: 1px solid white;
-    border-right: 1px solid white;
-    border-bottom: 1px solid white;
-    padding-left: 15px;
-    background-color: white;
-    padding: 10px;
-    border-bottom-right-radius: 4px;
-    border-top-right-radius: 4px;
-    height: 62px;
-  }
-
-  .question-correct-option {
-    border-top: 1px solid $sitnet-green-new !important;
-    border-left: 1px solid $sitnet-green-new;
-    border-right: 1px solid $sitnet-green-new;
-    border-bottom: 1px solid $sitnet-green-new;
-    background-color: #F3FFF5;
-    padding: 10px 10px 0 10px;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-
-  .question-incorrect-option {
-    border-top: 1px solid $sitnet-red !important;
-    border-left: 1px solid $sitnet-red;
-    border-right: 1px solid $sitnet-red;
-    border-bottom: 1px solid $sitnet-red;
-    background-color: #fde8ea;
-    padding: 10px 10px 0 10px;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-
-  .question-correct-option-radio {
-    border-top: 1px solid $sitnet-green-new;
-    border-right: 1px solid $sitnet-green-new;
-    border-bottom: 1px solid $sitnet-green-new;
-    box-shadow: -2px 0px 0px -1px #F3FFF5;
-    padding-left: 15px;
-    background-color: #F3FFF5;
-    padding: 10px;
-    border-bottom-right-radius: 4px;
-    border-top-right-radius: 4px;
-    height: 62px;
-  }
-  .question-incorrect-option-radio {
-    border-top: 1px solid $sitnet-red;
-    border-right: 1px solid $sitnet-red;
-    border-bottom: 1px solid $sitnet-red;
-    box-shadow: -2px 0px 0px -1px #fde8ea;
-    background-color: #fde8ea;
-    padding-left: 15px;
-    padding: 10px;
-    border-bottom-right-radius: 4px;
-    border-top-right-radius: 4px;
-    height: 62px;
-  }
-
-  .question-option-trash {
-    font-size: 20px;
-    color: #979797;
-    cursor: pointer;
-    margin-top: 15px;
-  }
-
-  .question-editor-option {
-    margin: 0px;
-    padding: 0px;
-  }
-
-  .question-editor-claim-choice-option {
-    border: 1px solid transparent;
-    border-radius: 4px;
-    padding: 10px;
-    margin-bottom: 1em;
-    width: 600px;
-    transition-duration: 0.2s;
-  }
-
-  .claim-choice-option-labels {
-    width: 500px;
-    padding: 10px;
-    .claim-choice-option-label {
-      display: inline-block;
-      width: 380px;
-      margin: 0 21px 0 11px;
-
-      &.points {
-        margin: 0;
-        width: 70px;
-      }
+    .wdt50 {
+        width: 50px;
     }
-  }
 
-  .claim-choice-option-inputs {
-    .question-option-input {
-      width: 380px;
-      display: inline-block;
+    .wdt100 {
+        width: 100px;
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+    }
 
-      &.points {
-        margin: 0;
-        width: 70px;
-      }
+    .wdt120 {
+        width: 120px;
+    }
+    .wdt240 {
+        width: 240px;
     }
-  }
 
-  .claim-choice-option-description {
-    display: inline-block;
-    width: 100%;
-    margin: 0;
-    padding: 5px 0 0 5px;
-    font-size: 12px;
-  }
+    .attachment-link {
+        color: #266b99;
+        font-weight: bold;
+        font-size: 16px;
+    }
 
-  .claim-choice-correct-answer {
-    border: 1px solid #358F45;
-    background-color: rgba($color: #358F45, $alpha: 0.1);
+    .remove-attachment {
+        margin-bottom: 3px;
+        margin-left: 5px;
+    }
 
-    .claim-choice-option-description {
-      color: #358F45;
+    .bigbutton {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        padding-left: 60px;
+        padding-right: 60px;
     }
 
-    input:disabled {
-      color: gray;
-      cursor: not-allowed;
+    .question-cancel {
+        float: right;
+        margin-top: 40px;
     }
-  }
 
-  .claim-choice-incorrect-answer {
-    border: 1px solid $sitnet-red;
-    background-color: rgba($color: $sitnet-red, $alpha: 0.1);
+    .question-option-radio {
+        font-size: 20px;
+        margin-right: 30px;
+        margin-left: 15px;
+        margin-top: 12px;
+    }
 
-    .claim-choice-option-description {
-      color: $sitnet-red;
+    .question-option-input {
+        width: 27em;
+        height: 40px;
+        border-radius: 4px;
+        border: 1px solid #e0e0df;
+        padding-left: 10px;
+        margin-right: 30px;
+
+        &.ng-invalid {
+            border: 1px solid red;
+        }
+
+        &.radiobut {
+            width: 100%;
+        }
+
+        &.points {
+            width: 5em;
+        }
     }
 
-    input:disabled {
-      color: #727272;
-      cursor: not-allowed;
+    .question-option-empty {
+        border-top: 1px solid white;
+        border-left: 1px solid white;
+        border-bottom: 1px solid white;
+        background-color: white;
+        padding: 10px 10px 0 10px;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
     }
-  }
 
-  .claim-choice-skip-answer {
-    input:disabled {
-      color: #727272;
-      cursor: not-allowed;
+    .question-option-empty-radio {
+        border-top: 1px solid white;
+        border-right: 1px solid white;
+        border-bottom: 1px solid white;
+        padding-left: 15px;
+        background-color: white;
+        padding: 10px;
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+        height: 62px;
+    }
+
+    .question-correct-option {
+        border-top: 1px solid $sitnet-green-new !important;
+        border-left: 1px solid $sitnet-green-new;
+        border-right: 1px solid $sitnet-green-new;
+        border-bottom: 1px solid $sitnet-green-new;
+        background-color: #f3fff5;
+        padding: 10px 10px 0 10px;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
+
+    .question-incorrect-option {
+        border-top: 1px solid $sitnet-red !important;
+        border-left: 1px solid $sitnet-red;
+        border-right: 1px solid $sitnet-red;
+        border-bottom: 1px solid $sitnet-red;
+        background-color: #fde8ea;
+        padding: 10px 10px 0 10px;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
+
+    .question-correct-option-radio {
+        border-top: 1px solid $sitnet-green-new;
+        border-right: 1px solid $sitnet-green-new;
+        border-bottom: 1px solid $sitnet-green-new;
+        box-shadow: -2px 0px 0px -1px #f3fff5;
+        padding-left: 15px;
+        background-color: #f3fff5;
+        padding: 10px;
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+        height: 62px;
+    }
+    .question-incorrect-option-radio {
+        border-top: 1px solid $sitnet-red;
+        border-right: 1px solid $sitnet-red;
+        border-bottom: 1px solid $sitnet-red;
+        box-shadow: -2px 0px 0px -1px #fde8ea;
+        background-color: #fde8ea;
+        padding-left: 15px;
+        padding: 10px;
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+        height: 62px;
     }
-  }
 
-  .claim-choice-warning-wrapper {
-    min-height: 40px;
-  }
+    .question-option-trash {
+        font-size: 20px;
+        color: #979797;
+        cursor: pointer;
+        margin-top: 15px;
+    }
 
-  .claim-choice-warning {
-    background-color: rgba($color: $sitnet-red, $alpha: 0.1);
-    border-left: 6px solid $sitnet-red;
-    padding: 10px;
-  }
+    .question-editor-option {
+        margin: 0px;
+        padding: 0px;
+    }
 
-  @media screen and (max-width: 1250px) {
     .question-editor-claim-choice-option {
-      width: 400px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        padding: 10px;
+        margin-bottom: 1em;
+        width: 600px;
+        transition-duration: 0.2s;
     }
 
     .claim-choice-option-labels {
-      width: 400px;
-      .claim-choice-option-label {
-        width: 280px;
-      }
+        width: 500px;
+        padding: 10px;
+        .claim-choice-option-label {
+            display: inline-block;
+            width: 380px;
+            margin: 0 21px 0 11px;
+
+            &.points {
+                margin: 0;
+                width: 70px;
+            }
+        }
     }
 
     .claim-choice-option-inputs {
-      .question-option-input {
-        width: 280px;
-      }
+        .question-option-input {
+            width: 380px;
+            display: inline-block;
+
+            &.points {
+                margin: 0;
+                width: 70px;
+            }
+        }
     }
-  }
 
-  @media screen and (max-width: 920px) {
-    .question-editor-claim-choice-option {
-      width: 300px;
+    .claim-choice-option-description {
+        display: inline-block;
+        width: 100%;
+        margin: 0;
+        padding: 5px 0 0 5px;
+        font-size: 12px;
     }
 
-    .claim-choice-option-labels {
-      width: 300px;
-      .claim-choice-option-label {
-        width: 180px;
-      }
+    .claim-choice-correct-answer {
+        border: 1px solid #358f45;
+        background-color: rgba($color: #358f45, $alpha: 0.1);
+
+        .claim-choice-option-description {
+            color: #358f45;
+        }
+
+        input:disabled {
+            color: gray;
+            cursor: not-allowed;
+        }
     }
 
-    .claim-choice-option-inputs {
-      .question-option-input {
-        width: 180px;
-        margin-right: 18px;
+    .claim-choice-incorrect-answer {
+        border: 1px solid $sitnet-red;
+        background-color: rgba($color: $sitnet-red, $alpha: 0.1);
 
-        &.points {
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  .question-option-title {
-    color: #777777;
-    font-size: 12px;
-  }
-
-  .exam-section-settings {
-    float: right;
-    font-size: 14px;
-  }
-
-  .exam-section-question-options { // editor
-    list-style-type: none;
-    padding: 0px;
-    margin: 0px;
-
-    li {
-      background-color: #fff;
-      padding-top: 0.5em;
-    }
-  }
-
-  .exam-new-border {
-    border: 1px solid $sitnet-border-color;
-    padding-bottom: 30px;
-    margin-top: 25px;
-    border-radius: 4px;
-
-  }
-
-  .middle-column { // review
-    width: 70%;
-    margin-left: 20px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-  }
-
-  .notice-text {
-    line-height: 24px;
-    vertical-align: bottom;
-    color: #555555;
-    letter-spacing: 0.65px;
-  }
-
-  .points-title {
-    color: #777777;
-  }
-
-  .grading-title {
-    color: #555555;
-    font-size: 12px;
-  }
-
-  .speed-review-border {
-    margin-left: 60px;
-    margin-right: 60px;
-    border: 1px solid $sitnet-border-color;
-    border-radius: 4px;
-    margin-bottom: 30px;
-  }
-
-  .time-display { // editor
-    padding: 5px;
-    border: 1px solid #9e9e9e;
-    border-radius: 4px;
-    vertical-align: bottom;
-    margin-right: 10px;
-  }
-
-  .speed-review-title {
-    font-family: $sitnet-family-helvetica;
-    font-size: 22px;
-    font-weight: normal;
-    color: #2C2C2C;
-    padding-bottom: 5px;
-    padding-right: 10px;
-  }
-
-  .speed-review-subtitle {
-    font-family: $sitnet-family-helvetica;
-    font-size: 14px;
-    color: #2C2C2C;
-  }
-
-  .speed-review-csv {
-    font-size: 16px;
-    font-weight: bold;
-    color: #266B99;
-  }
-
-  .approved { // maturity
-    color: $sitnet-approved;
-  }
-
-  .rejected {
-    color: $sitnet-rejected;
-  }
-
-  .inspection-button { // review
-    font-size: 16px;
-    font-family: $sitnet-family-helvetica;
-    background-color: $sitnet-green-new;
-    border: 1px solid $sitnet-dark-green-new;
-    padding-left: 20px;
-    padding-right: 20px;
-    line-height: 1.5;
-    border-radius: 3px;
-    color: white;
-    text-align: center;
-    display: block;
-    padding-top: 10px;
-    padding-bottom: 10px;
-
-    &.cancel {
-      background-color: white;
-      border: $sitnet-red 1px solid;
-      color: $sitnet-red;
-    }
-
-    &.button[disabled] {
-      cursor: not-allowed;
-    }
-
-  }
-
-  .exam-status { // editor
-    color: #266B99;
-    font-size: 22px;
-    letter-spacing: 1.05px;
-    margin-left: 20px;
-  }
-
-  .green_button { // EXAMINAtion
-
-    cursor: pointer;
-    text-decoration: none;
-    float: right;
-    font-size: 16px;
-    font-family: $sitnet-family-helvetica;
-    background-color: $sitnet-green-new;
-    border: 1px solid $sitnet-dark-green-new;
-    //width: 150px;
-    margin-left: 10px;
-    border-radius: 3px;
-    padding: 8px;
-    padding-left: 20px;
-    padding-right: 20px;
-    color: white;
-    font-weight: 200;
-
-    :hover, :active, :focus, :active:focus {
-      background-color: $sitnet-dark-green-new;
-    }
-
-    &.left-floater {
-      float: left;
-      width: 167px;
-      padding: 5px;
-      padding-left: 20px;
-      margin-right: 15px;
-      font-size: 14px;
-      letter-spacing: 0.3px;
-    }
-
-    &.left-floater-for-section {
-      float: left;
-      padding: 5px;
-      padding-left: 20px;
-      margin-right: 15px;
-      margin-left: 0px;
-      font-size: 14px;
-      letter-spacing: 0.3px;
-
-    }
-
-    &.previous {
-      float: left;
-      padding-right: 40px;
-    }
-
-    &.attachment {
-      float: left;
-      margin-left: 0px;
-    }
-  }
-
-  .green_button:hover, .green_button:active, .green_button:focus, .green_button:active:focus {
-    background-color: $sitnet-dark-green-new;
-    border: 1px solid $sitnet-dark-green-new;
-    text-decoration: none;
-  }
-
-  .attachment-name { // review, examination
-    font-family: $sitnet-family-helvetica;
-    font-size: 12px;
-    color: #555555;
-    margin-top: 10px;
-
-    @media (max-width: 1050px) {
-      margin-top: 3px;
-    }
-
-  }
-
-  .scrollable-menu { // library, dd-select
-    height: auto;
-    max-height: 400px;
-    overflow-y: scroll;
-  }
-  .scrollable-menu::-webkit-scrollbar-track {
-    background: #f1f1f1;
-  }
+        .claim-choice-option-description {
+            color: $sitnet-red;
+        }
 
-  .participant-selector-toggle { // editor
-    label {
-      display: block;
-      font-weight: 400;
+        input:disabled {
+            color: #727272;
+            cursor: not-allowed;
+        }
     }
-  }
 
-  .no-caret { //enrolment, users
-    .dropdown-toggle::after {
-      display:none;
-    }
-  }
-
-  .flex-wrap-gap{ // users
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
+    .claim-choice-skip-answer {
+        input:disabled {
+            color: #727272;
+            cursor: not-allowed;
+        }
+    }
 
-  .min-width-300{ // library, facilty, users
-    min-width: 300px;
-  }
-
-  .edit-warning-container { // question
-    display: flex; 
-    align-items: center
-  }
+    .claim-choice-warning-wrapper {
+        min-height: 40px;
+    }
 
-}
+    .claim-choice-warning {
+        background-color: rgba($color: $sitnet-red, $alpha: 0.1);
+        border-left: 6px solid $sitnet-red;
+        padding: 10px;
+    }
+
+    @media screen and (max-width: 1250px) {
+        .question-editor-claim-choice-option {
+            width: 400px;
+        }
 
+        .claim-choice-option-labels {
+            width: 400px;
+            .claim-choice-option-label {
+                width: 280px;
+            }
+        }
+
+        .claim-choice-option-inputs {
+            .question-option-input {
+                width: 280px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 920px) {
+        .question-editor-claim-choice-option {
+            width: 300px;
+        }
+
+        .claim-choice-option-labels {
+            width: 300px;
+            .claim-choice-option-label {
+                width: 180px;
+            }
+        }
+
+        .claim-choice-option-inputs {
+            .question-option-input {
+                width: 180px;
+                margin-right: 18px;
+
+                &.points {
+                    margin: 0;
+                }
+            }
+        }
+    }
+
+    .question-option-title {
+        color: #777777;
+        font-size: 12px;
+    }
+
+    .exam-section-settings {
+        float: right;
+        font-size: 14px;
+    }
+
+    .exam-section-question-options {
+        // editor
+        list-style-type: none;
+        padding: 0px;
+        margin: 0px;
+
+        li {
+            background-color: #fff;
+            padding-top: 0.5em;
+        }
+    }
+
+    .exam-new-border {
+        border: 1px solid $sitnet-border-color;
+        padding-bottom: 30px;
+        margin-top: 25px;
+        border-radius: 4px;
+    }
+
+    .middle-column {
+        // review
+        width: 70%;
+        margin-left: 20px;
+        margin-top: 4px;
+        margin-bottom: 4px;
+    }
+
+    .notice-text {
+        line-height: 24px;
+        vertical-align: bottom;
+        color: #555555;
+        letter-spacing: 0.65px;
+    }
+
+    .points-title {
+        color: #777777;
+    }
+
+    .grading-title {
+        color: #555555;
+        font-size: 12px;
+    }
+
+    .speed-review-border {
+        margin-left: 60px;
+        margin-right: 60px;
+        border: 1px solid $sitnet-border-color;
+        border-radius: 4px;
+        margin-bottom: 30px;
+    }
+
+    .time-display {
+        // editor
+        padding: 5px;
+        border: 1px solid #9e9e9e;
+        border-radius: 4px;
+        vertical-align: bottom;
+        margin-right: 10px;
+    }
+
+    .speed-review-title {
+        font-family: $sitnet-family-helvetica;
+        font-size: 22px;
+        font-weight: normal;
+        color: #2c2c2c;
+        padding-bottom: 5px;
+        padding-right: 10px;
+    }
+
+    .speed-review-subtitle {
+        font-family: $sitnet-family-helvetica;
+        font-size: 14px;
+        color: #2c2c2c;
+    }
+
+    .speed-review-csv {
+        font-size: 16px;
+        font-weight: bold;
+        color: #266b99;
+    }
+
+    .reviewer-remove {
+        border: 0px;
+        background-color: #fff;
+    }
+
+    .approved {
+        // maturity
+        color: $sitnet-red;
+    }
+
+    .rejected {
+        color: $sitnet-green-new;
+    }
+
+    .inspection-button {
+        // review
+        font-size: 16px;
+        font-family: $sitnet-family-helvetica;
+        background-color: $sitnet-green-new;
+        border: 1px solid $sitnet-dark-green-new;
+        padding-left: 20px;
+        padding-right: 20px;
+        line-height: 1.5;
+        border-radius: 3px;
+        color: white;
+        text-align: center;
+        display: block;
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        &.cancel {
+            background-color: white;
+            border: $sitnet-red 1px solid;
+            color: $sitnet-red;
+        }
+
+        &.button[disabled] {
+            cursor: not-allowed;
+        }
+    }
+
+    .exam-status {
+        // editor
+        color: #266b99;
+        font-size: 22px;
+        letter-spacing: 1.05px;
+        margin-left: 20px;
+    }
+
+    .green_button {
+        // EXAMINAtion
+
+        cursor: pointer;
+        text-decoration: none;
+        float: right;
+        font-size: 16px;
+        font-family: $sitnet-family-helvetica;
+        background-color: $sitnet-green-new;
+        border: 1px solid $sitnet-dark-green-new;
+        //width: 150px;
+        margin-left: 10px;
+        border-radius: 3px;
+        padding: 8px;
+        padding-left: 20px;
+        padding-right: 20px;
+        color: white;
+        font-weight: 200;
+
+        :hover,
+        :active,
+        :focus,
+        :active:focus {
+            background-color: $sitnet-dark-green-new;
+        }
+
+        &.left-floater {
+            float: left;
+            width: 167px;
+            padding: 5px;
+            padding-left: 20px;
+            margin-right: 15px;
+            font-size: 14px;
+            letter-spacing: 0.3px;
+        }
+
+        &.left-floater-for-section {
+            float: left;
+            padding: 5px;
+            padding-left: 20px;
+            margin-right: 15px;
+            margin-left: 0px;
+            font-size: 14px;
+            letter-spacing: 0.3px;
+        }
+
+        &.previous {
+            float: left;
+            padding-right: 40px;
+        }
+
+        &.attachment {
+            float: left;
+            margin-left: 0px;
+        }
+    }
+
+    .green_button:hover,
+    .green_button:active,
+    .green_button:focus,
+    .green_button:active:focus {
+        background-color: $sitnet-dark-green-new;
+        border: 1px solid $sitnet-dark-green-new;
+        text-decoration: none;
+    }
+
+    .attachment-name {
+        // review, examination
+        font-family: $sitnet-family-helvetica;
+        font-size: 12px;
+        color: #555555;
+        margin-top: 10px;
+
+        @media (max-width: 1050px) {
+            margin-top: 3px;
+        }
+    }
+
+    .scrollable-menu {
+        // library, dd-select
+        height: auto;
+        max-height: 400px;
+        overflow-y: scroll;
+    }
+    .scrollable-menu::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    .participant-selector-toggle {
+        // editor
+        label {
+            display: block;
+            font-weight: 400;
+        }
+    }
+
+    .no-caret {
+        //enrolment, users
+        .dropdown-toggle::after {
+            display: none;
+        }
+    }
+
+    .flex-wrap-gap {
+        // users
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+    }
+
+    .min-width-300 {
+        // library, facilty, users
+        min-width: 300px;
+    }
+
+    .edit-warning-container {
+        // question
+        display: flex;
+        align-items: center;
+    }
+}
diff --git a/ui/src/assets/styles/partial/_datetimepicker.scss b/ui/src/assets/styles/partial/_datetimepicker.scss
deleted file mode 100755
index 970da698dc..0000000000
--- a/ui/src/assets/styles/partial/_datetimepicker.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.datetimepicker-wrapper {
-    vertical-align: middle;
-    display: inline-block;
-}
-
-.datetimepicker-wrapper > input {
-    margin-bottom: 0 !important;
-    width: 130px;
-}
-
-.btn.green {
-    background-color: #3CA34F;
-}
-
-.datetimepicker-wrapper [ng-model=hours],
-.datetimepicker-wrapper [ng-model=minutes] {
-    width: 46px !important;
-}
\ No newline at end of file
diff --git a/ui/src/assets/styles/partial/_defines.scss b/ui/src/assets/styles/partial/_defines.scss
index 1c01b9a9b7..215a39747e 100644
--- a/ui/src/assets/styles/partial/_defines.scss
+++ b/ui/src/assets/styles/partial/_defines.scss
@@ -14,88 +14,28 @@ $sitnet-mobile: 920px;
     }
 }
 
+$sitnet-header-height: 4em;
+
+$sitnet-family-helvetica: Arimo, Helvetica-Neue, Helvetica;
+
 // colors
-$sitnet-dark-green: #63aa92;
-$sitnet-green: #2bb9a8;
-$sitnet-dark-blue: #3fa9f5;
-$sitnet-grey: #c0c0c0;
 $sitnet-light-grey: #e6e6e6;
-$sitnet-light-grey_new: rgb(33, 33, 33);
 $sitnet-light-green_new: rgb(50, 149, 61);
 $sitnet-medium-green-new: #238635;
 $sitnet-green-new: #2c7639;
 $sitnet-dark-green-new: #25622f;
-
 $sitnet-dark-grey: #4c4c4c;
-$sitnet-dark: #3e3e3e;
-$sitnet-beige: #f6f2e6;
-$sitnet-beige-active: #f7d56f;
-$sitnet-white: #fff;
-$sitnet-black: #000;
+$sitnet-white: white;
+$sitnet-black: black;
 $sitnet-red: #e3162e;
-$sitnet-dark-red: #be1327;
-$sitnet-rejected: $sitnet-red;
-$sitnet-approved: $sitnet-green-new;
 $sitnet-border-color: #c3c3c3;
-
-$sitnet-teacher-turquoise-dark-active: #006674;
-$sitnet-teacher-turquoise-dark-inactive: #7ab3bc;
-$sitnet-teacher-turquoise-active-question: #019eb1;
-$sitnet-teacher-turquoise-light-active: #7fc5cf;
-$sitnet-teacher-turquoise-light-inactive: #7ab3bc;
-$sitnet-teacher-turquoise-header: #2d848e;
-$sitnet-teacher-blue-light: #d8e6e7;
-
-$sitnet-teacher-green-dark: #d3e7a8;
-$sitnet-teacher-green-light: #d3e7a8;
-
-$sitnet-header-height: 4em;
-
-$sitnet-student-lightgreen: #7fb373;
-$sitnet-student-darkgreen: #4a883f;
-$sitnet-student-inactive-green: #8dc1b5;
-$sitnet-student-turquoise: #3eaa93;
-$sitnet-student-inactive-turquoise: #8dc1b5;
-$sitnet-student-orange: #ffb129;
-$sitnet-student-inactive-gray: #818181;
-$sitnet-blue-highlight: #66afe9;
-
-$sitnet-essay-review-background: #f4f9fc;
-
-$sitnet-family-helvetica: Arimo, Helvetica-Neue, Helvetica;
-
-// #### layout colors ############################################
 $sitnet-alarm: #c0001f;
 $sitnet-aborted: #770505;
-$sitnet-notice: #e1a117;
 $sitnet-ready: #6aa33a;
 $sitnet-theme: #3fa9f5;
 $sitnet-text: #000000;
-$sitnet-language-link-text: #ffffff;
 $sitnet-common-dark: rgba(0, 0, 0, 0.65);
 $sitnet-common-medium: rgba(0, 0, 0, 0.3);
-$sitnet-common-light: rgba(0, 0, 0, 0.1);
-$sitnet-background: #ffffff;
-
-.sitnet-common-light {
-    background-color: $sitnet-common-light;
-}
-
-.sitnet-common-medium {
-    background-color: $sitnet-common-medium;
-}
-
-.sitnet-common-dark {
-    background-color: $sitnet-common-dark;
-}
-
-.sitnet-common-theme {
-    background-color: $sitnet-theme;
-}
-
-.sitnet-text-light {
-    color: $sitnet-common-light;
-}
 
 .sitnet-text-medium {
     color: $sitnet-common-medium;
@@ -105,14 +45,6 @@ $sitnet-background: #ffffff;
     color: $sitnet-common-dark;
 }
 
-.sitnet-text-theme {
-    color: $sitnet-theme;
-}
-
-.sitnet-text-notice {
-    color: $sitnet-notice;
-}
-
 .sitnet-text-ready {
     color: $sitnet-ready;
 }
@@ -129,38 +61,10 @@ $sitnet-background: #ffffff;
     color: $sitnet-text;
 }
 
-.sitnet-dark-green {
-    color: $sitnet-dark-green;
-}
-
-.sitnet-green {
-    color: $sitnet-green;
-}
-
-.sitnet-dark-blue {
-    color: $sitnet-dark-blue;
-}
-
-.sitnet-grey {
-    color: $sitnet-grey;
-}
-
-.sitnet-light-grey {
-    color: $sitnet-light-grey;
-}
-
 .sitnet-dark-grey {
     color: $sitnet-dark-grey;
 }
 
-.sitnet-dark {
-    color: $sitnet-dark;
-}
-
-.sitnet-beige {
-    color: $sitnet-beige;
-}
-
 .sitnet-white {
     color: $sitnet-white;
 }
@@ -169,34 +73,6 @@ $sitnet-background: #ffffff;
     color: $sitnet-black;
 }
 
-.sitnet-student-lightgreen {
-    color: $sitnet-student-lightgreen;
-}
-
-.sitnet-student-darkgreen {
-    color: $sitnet-student-darkgreen;
-}
-
-.sitnet-student-inactive-green {
-    color: $sitnet-student-inactive-green;
-}
-
-.sitnet-student-turquoise {
-    color: $sitnet-student-turquoise;
-}
-
-.sitnet-student-inactive-turquoise {
-    color: $sitnet-student-inactive-turquoise;
-}
-
-.sitnet-student-orange {
-    color: $sitnet-student-orange;
-}
-
-.sitnet-student-inactive-gray {
-    color: $sitnet-student-inactive-gray;
-}
-
 .sitnet-medium-green-new {
     color: $sitnet-medium-green-new;
 }
@@ -205,37 +81,6 @@ $sitnet-background: #ffffff;
     color: $sitnet-red;
 }
 
-.sitnet-teacher-turquoise-dark-active {
-    color: $sitnet-teacher-turquoise-dark-active;
-}
-
-.sitnet-teacher-turquoise-dark-inactive {
-    color: $sitnet-teacher-turquoise-dark-inactive;
-}
-
-.sitnet-teacher-turquoise-light-active {
-    color: $sitnet-teacher-turquoise-light-active;
-}
-
-.sitnet-teacher-turquoise-light-inactive {
-    color: $sitnet-teacher-turquoise-light-inactive;
-}
-
-.sitnet-teacher-blue-light {
-    color: $sitnet-teacher-blue-light;
-}
-
-.sitnet-teacher-green-dark {
-    color: $sitnet-teacher-green-dark;
-}
-
-.sitnet-teacher-green-light {
-    color: $sitnet-teacher-green-light;
-}
-
-.greenHover:hover {
-    color: $sitnet-ready;
-}
 .blue-shadow-hover:hover {
     box-shadow: 0 0 1px 3px rgba(0, 117, 255, 1);
 }
@@ -247,94 +92,22 @@ $sitnet-background: #ffffff;
     background: lightcyan;
 }
 
-.sitnet-horizontal-line {
-    background-color: $sitnet-common-light;
-    height: 0.15em;
-}
-
-.italic {
-    font-style: italic;
-}
-
-.popover {
-    font-size: 11px;
-    color: $sitnet-text;
-    width: 300px;
-}
-
-.base {
-    background-color: $sitnet-background;
-    padding: 1em;
-    margin: 0;
-}
-
-$sitnet-icon-size: 32px;
-
-.sitnet-icon-wrapper {
-    min-width: $sitnet-icon-size;
-    width: $sitnet-icon-size;
-    max-width: $sitnet-icon-size;
-    min-height: $sitnet-icon-size;
-    height: $sitnet-icon-size;
-    max-height: $sitnet-icon-size;
-    display: block;
-    text-align: center;
-}
-
-@mixin border-radius($radius) {
-    -webkit-border-radius: $radius;
-    -moz-border-radius: $radius;
-    -ms-border-radius: $radius;
-    border-radius: $radius;
-}
-
 .status_green,
-.status_red,
-.status_orange,
-.status_theme {
+.status_red {
     font-weight: normal;
     letter-spacing: 1px;
     font-size: 0.9em;
     padding: 0.2em 0.5em;
     color: $sitnet-white;
-    @include border-radius(5px);
+    border-radius: 5px;
 }
 
 .status_red {
-    background-color: $sitnet-alarm;
+    background-color: red;
 }
 
 .status_green {
-    background-color: $sitnet-student-darkgreen;
-}
-
-.status_orange {
-    background-color: $sitnet-student-orange;
-}
-
-.status_theme {
-    background-color: $sitnet-theme;
-}
-
-.status_comment {
-    padding: 0.5em;
-    font-size: 0.9em;
-    color: $sitnet-common-medium;
-    font-style: italic;
-    font-weight: bold;
-    font-family: $sitnet-family-helvetica;
-}
-
-.icon-alarm {
-    color: $sitnet-alarm;
-}
-
-.icon-ok {
-    color: $sitnet-student-darkgreen;
-}
-
-.icon-theme {
-    color: $sitnet-theme;
+    background-color: green;
 }
 
 .bold-button {
@@ -346,42 +119,6 @@ $sitnet-icon-size: 32px;
     font-weight: bold;
 }
 
-.icon-notice {
-    color: $sitnet-student-orange;
-}
-
-.header-top {
-    height: 4em;
-    padding: 0.5em;
-}
-
-.header-top-icon {
-    margin-top: 0.4em;
-}
-
-.header-top-link {
-    display: flex;
-    align-items: center;
-    color: $sitnet-text;
-    font-size: 0.9em;
-    font-weight: bold;
-    cursor: pointer;
-    text-decoration: none;
-
-    i {
-        display: inline-flex;
-        width: 2rem;
-        height: 2rem;
-        background-color: #3fa9f5;
-        border-radius: 2px;
-        color: white;
-        margin-right: 0.5rem;
-        justify-content: center;
-        align-items: center;
-        font-size: 1.1rem;
-    }
-}
-
 .top-margin-1 {
     margin-top: 1em;
 }
@@ -390,94 +127,20 @@ $sitnet-icon-size: 32px;
     padding-top: 2em;
 }
 
-.bottom-padding-1 {
-    padding-bottom: 1em;
-}
-
 .bottom-padding-2 {
     padding-bottom: 2em;
 }
 
-.horizontal-padding-1 {
-    padding: 0 1em;
-}
-
 .horizontal-padding-05 {
     padding: 0 0.5em;
 }
 
-.vertical-padding-2 {
-    padding: 2em 0;
-}
-
 .info {
     padding-left: 0;
     margin-left: 0;
     margin-bottom: 1em;
 }
 
-.info-row {
-    padding-left: 0;
-    margin-left: 0;
-}
-
-.info-row-space {
-    padding: 0;
-    margin: 0;
-}
-
-.info-column {
-    padding-right: 1em;
-    font-size: 1em;
-    font-family: Helvetica, Arial, sans-serif;
-    padding-left: 0;
-    margin-left: 0;
-
-    .header {
-        padding-right: 0.5em;
-        float: left;
-        color: $sitnet-common-medium;
-        padding-left: 0;
-        margin-left: 0;
-    }
-    .text {
-        padding-left: 0;
-        margin-left: 0;
-        font-weight: bold;
-        float: left;
-        color: $sitnet-text;
-    }
-    .light-text {
-        padding-left: 0;
-        margin-left: 0;
-        font-weight: normal;
-        float: left;
-    }
-    .link-text {
-        padding-left: 0;
-        margin-left: 0;
-        font-weight: normal;
-        float: left;
-        color: $sitnet-theme;
-    }
-}
-
-.info-header-bolditalic {
-    font-size: 1.1em;
-    font-weight: bold;
-    font-style: italic;
-}
-
-.info-header-bold {
-    font-size: 1.1em;
-    font-weight: bold;
-}
-
-.info-header-normal {
-    font-size: 1.1em;
-    font-weight: normal;
-}
-
 .examination-event-list-item {
     background: #00a34b;
     color: #ffffff;
@@ -488,37 +151,10 @@ $sitnet-icon-size: 32px;
     }
 }
 
-.icon_fix {
-    margin-left: 1em;
-    line-height: 1.8em;
-}
-
 .rotate90 {
     transform: rotate(90deg);
 }
 
-.light-table {
-    border: 0;
-    font-size: 0.9em;
-    border-spacing: 1em;
-    border-collapse: separate;
-
-    td {
-        padding: 0.5em;
-        border: 0;
-        border-right: 0.15em solid $sitnet-common-light;
-    }
-}
-
-.sitnet-badge {
-    padding: 0.25em 0.6em 0.1em;
-    font-size: 0.9em;
-    background-color: $sitnet-theme;
-    color: $sitnet-white;
-    margin: 0.1em;
-    text-align: center;
-}
-
 .width-100 {
     width: 100%;
 }
@@ -532,43 +168,16 @@ $sitnet-icon-size: 32px;
     white-space: pre-wrap;
 }
 
-.removeListLeftSpace {
-    ul {
-        padding-left: 0;
-        margin-left: 0;
-    }
-}
-
 .inline {
     display: inline;
 }
 
-.editable {
-    cursor: pointer;
-}
-
-.editable:hover {
-    color: green;
-}
-
 .sitnet-info-text {
     color: #727272;
     font-style: normal;
     margin-top: 1em;
 }
 
-.sitnet-info-text-compact {
-    color: #727272;
-    font-style: normal;
-}
-
-.sitnet-info-text-bold {
-    color: #727272;
-    font-style: normal;
-    margin-top: 1em;
-    font-weight: bold;
-}
-
 .pointer {
     cursor: pointer;
 }
@@ -834,10 +443,6 @@ $sitnet-icon-size: 32px;
     border-color: #6b6b6b !important;
 }
 
-.font20 {
-    font-size: 20px !important;
-}
-
 .grey-top {
     border-top: 1px solid $sitnet-border-color;
 }
@@ -874,10 +479,6 @@ $sitnet-icon-size: 32px;
     font-size: 0.8rem !important;
 }
 
-.overflow-hidden {
-    overflow: hidden;
-}
-
 .overflow-x-scroll {
     overflow-x: scroll;
 }
@@ -932,7 +533,7 @@ $sitnet-icon-size: 32px;
 }
 
 .hover-grey:hover {
-    background-color: $sitnet-grey;
+    background-color: #c0c0c0;
 }
 
 .flex {
diff --git a/ui/src/assets/styles/partial/_exam.scss b/ui/src/assets/styles/partial/_exam.scss
index 83f5811d39..f7aead7108 100644
--- a/ui/src/assets/styles/partial/_exam.scss
+++ b/ui/src/assets/styles/partial/_exam.scss
@@ -1,358 +1,336 @@
+$sitnet-teacher-turquoise-dark-active: #006674;
+$sitnet-teacher-turquoise-dark-inactive: #7ab3bc;
+$sitnet-teacher-turquoise-header: #2d848e;
+$sitnet-common-light: rgba(0, 0, 0, 0.1);
+
 #exam {
-  .no-padding {
-    padding: 0;
-  }
-
-  .courseBorder {
-    width: 100%;
-    height: 100%;
-    padding: 1em 1em 4.5em;
-    border: 1px solid $sitnet-common-medium;
-    display: block;
-  }
-
-  .section-border {
-    padding: 0 15px 30px 0;
-    border: 1px solid white;
-    margin-bottom: 1em;
-    margin-top:1em;
-  }
-
-  .section-handle {
-    border: dashed 1px transparent;
-  }
-
-  .section-handle:hover {
-    border-color: $sitnet-teacher-turquoise-dark-inactive;
-  }
-
-  .exam-header {
-    background-color: $sitnet-teacher-turquoise-header;
-    color: white;
-  }
-
-  .exam-general-information-header {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    height: 4em;
-  }
-  .exam-general-information-header span {
-    font-size: 1.4em;
-  }
-
-  .exam-general-information {
-    background-color: $sitnet-white;
-    padding-left: 1em;
-  }
-
-  .exam-info {
-    padding: 5px;
-    margin-top: 1em;
-  }
-
-  .exam-wrapper {
-    padding: 2em;
-  }
-
-  .section-header {
-    height: 5.6em;
-    margin-bottom: 1em;
-  }
-
-  .line-height56 {
-    line-height: 5.6em;
-  }
-
-  .exam-question-container {
-    border-left: 1px solid $sitnet-teacher-turquoise-dark-inactive;
-    padding-left: 0.5em;
-    padding-top: 0.5em;
-  }
-
-  .create-new {
-    display: block;
-    color: #4c4c4c;
-    border: 4px dashed $sitnet-green-new;
-    border-radius: 4px;
-    padding: 1em;
-    margin: 1em 30px 1em 30px;
-    background-color: #EDFFF0;
-
-    div > i {
-      margin-right: 1em;
-      vertical-align: middle;
-    }
-
-    div > span {
-      line-height: 2em;
-    }
-  }
-
-  .total-score {
-    padding: 2em 1em 0 0;
-
-    span {
-      padding-top: 0.6em;
-      vertical-align: middle;
-    }
-  }
-
-  .create-new-section-button, .create-new-section-button:hover {
-    padding: 0.6em 1em 0.6em 1em;
-    color: $sitnet-white;
-    background-color: $sitnet-theme;
-    text-decoration: none;
-    cursor: pointer;
-    border: 0;
-    line-height: 2.5em;
-  }
-
-  .active-exams-list {
-    margin-bottom: 10px;
-  }
-
-  .exams-info-title {
-    font-weight: bold;
-  }
-
-  .exam-list-saved {
-    color: $sitnet-dark-grey;
-    border: dashed 3px $sitnet-white;
-    background-color: $sitnet-teacher-turquoise-dark-inactive;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 8px;
-    padding: 1em;
-  }
-
-  .exam-question-option {
-    background-color: $sitnet-white;
-    border: 1px solid $sitnet-common-medium;
-    border-top: 0;
-    padding: 0.2em 0.5em;
-  }
-
-  .exam-question-option-text {
-    color: #2C2C2C;
-    font-size: 14px;
-  }
-
-  .exam-editor-question-item {
-    color: $sitnet-white;
-    background-color: #B8DCE6;
-    margin-top: 0.5em !important;
-  }
-
-  .exam-editor-question-item:hover {
-    background-color: $sitnet-theme;
-    cursor: move;
-  }
-
-  .exam-editor-question-body {
-    color: $sitnet-teacher-turquoise-dark-active;
-    padding-top: 1em;
-  }
-
-  .single-question-icon {
-    color: $sitnet-teacher-turquoise-dark-active;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-  }
-
-  .pointer-hand {
-    cursor: pointer;
-  }
-
-  // to highlight ck-editor content marked with this class
-  .marker {
-    background-color: yellow;
-  }
-
-  .exams-table {
-
-    border: 0;
-    font-family: $sitnet-family-helvetica;
-    font-weight: normal;
-    font-size: 0.9em;
-
-    th {
-      background-color: $sitnet-common-light;
-      font-family: $sitnet-family-helvetica;
-      color: $sitnet-common-medium;
-      font-style: italic;
-      font-weight: normal;
-      border: 0;
-    }
-
-    td:first-child {
-      border-left: 0;
-    }
-    td:last-child {
-      border-right: 0;
-    }
-
-    tr:last-child {
-      td {
-        border-bottom: 0;
-      }
-    }
-    .table-column-examcode {
-      width: 6%;
-      text-align: center;
-      font-weight: bold;
-    }
-  }
-
-  // REVIEW RELATED ->
-
-  .review-question-border {
-    border: $sitnet-common-light solid 0.15em;
-    border-radius: 25px;
-    margin: 0.75em;
-    padding: 0.5em;
-  }
-
-  .review-question {
-    padding-left: 4em;
-  }
-
-  .review-question-value {
-    padding-left: 6em;
-
-    p {
-      word-wrap: break-word;
-    }
-  }
-
-  .review-question-option-name {
-    padding-left: 2em;
-  }
-
-  .review-feedback {
-    background-color: #f5f5f5;
-    opacity: 0.8;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    margin-right: 1em;
-  }
-
-  .review-feedback-text {
-    color: grey;
-    font-style: italic;
-    margin: 1em;
-  }
-
-  .exam-duration-btn {
-    margin-right: 0.5em;
-  }
-
-  .exam-small-warning-box {
-    margin-top: 0.5em;
-    text-align: center;
-  }
-
-  .draggable {
-    list-style: none;
-  }
-
-  .cloze-correct {
-    margin-right: 3px;
-    padding-right: 3px;
-    border: 1px solid green;
-    border-radius: 3px;
-    background: #ccffcc;
-    min-width: 30px; 
-    display: inline-block; 
-    box-shadow: 4px 4px 9px 0px rgba(0,0,0,0.75);
-  }
-
-  .cloze-incorrect {
-    margin-right: 3px;
-    padding-right: 3px;
-    border: 1px solid red;
-    border-radius: 3px;
-    background: #feeeef;
-    min-width:30px; 
-    display: inline-block; 
-    box-shadow: 4px 4px 9px 0px rgba(0,0,0,0.75);
-  }
-
-  .cloze-neutral {
-    margin-right: 3px;
-    padding-right: 3px;
-    border: 1px solid gray;
-    border-radius: 3px;
-    background: white;
-    min-width:30px; 
-    display: inline-block; 
-    box-shadow: 4px 4px 9px 0px rgba(0,0,0,0.75);
-  }
-
-  .lottery-item-count {
-    margin-top: 0 !important;
-    margin-right: 1em;
-  }
-
-  [class*="sortable-"] {
-    list-style: none;
-  }
-
-  .exam-answered-correct {
-    border: 1px solid $sitnet-green-new;
-    background-color: #F3FFF5;
-    padding: 5px;
-    border-radius:4px;
-
-    .answer-score-text {
-      color: #3c763d;
-    }
-  }
-
-  .exam-answered-wrong {
-    border: 1px solid $sitnet-red;
-    background-color: #FFF6F7;
-    padding: 5px;
-    border-radius:4px;
-
-    .answer-score-text {
-      color: #a94442;
-    }
-  }
-
-  .exam-answered-skip {
-    border: 1px solid #7F7F7F;
-    background-color: rgb(238, 238, 238);
-    padding: 5px;
-    border-radius:4px;
-  }
-
-  .exam-not-answered {
-    border: 1px solid white;
-    background-color: white;
-    padding: 5px;
-    border-radius:4px;
-  }
-
-  .drag-preview {
-    box-sizing: border-box;
-    background: white;
-    border: 2px solid #EDEDED;
-    border-radius: 4px;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-      0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  }
-
-  .dragdrop-placeholder {
-    background: #ccc;
-    border: dotted 3px #999;
-    min-height: 120px;
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
-
-  .section-question {
-    box-sizing: border-box;
-    cursor: move;
-  }
+    .no-padding {
+        padding: 0;
+    }
 
-}
+    .courseBorder {
+        width: 100%;
+        height: 100%;
+        padding: 1em 1em 4.5em;
+        border: 1px solid $sitnet-common-medium;
+        display: block;
+    }
+
+    .section-border {
+        padding: 0 15px 30px 0;
+        border: 1px solid white;
+        margin-bottom: 1em;
+        margin-top: 1em;
+    }
+
+    .section-handle {
+        border: dashed 1px transparent;
+    }
+
+    .section-handle:hover {
+        border-color: $sitnet-teacher-turquoise-dark-inactive;
+    }
+
+    .exam-header {
+        background-color: $sitnet-teacher-turquoise-header;
+        color: white;
+    }
+
+    .exam-general-information-header {
+        padding-top: 0.5em;
+        padding-bottom: 0.5em;
+        height: 4em;
+    }
+    .exam-general-information-header span {
+        font-size: 1.4em;
+    }
+
+    .exam-general-information {
+        background-color: $sitnet-white;
+        padding-left: 1em;
+    }
+
+    .exam-info {
+        padding: 5px;
+        margin-top: 1em;
+    }
+
+    .exam-wrapper {
+        padding: 2em;
+    }
+
+    .section-header {
+        height: 5.6em;
+        margin-bottom: 1em;
+    }
+
+    .line-height56 {
+        line-height: 5.6em;
+    }
+
+    .exam-question-container {
+        border-left: 1px solid $sitnet-teacher-turquoise-dark-inactive;
+        padding-left: 0.5em;
+        padding-top: 0.5em;
+    }
+
+    .create-new {
+        display: block;
+        color: #4c4c4c;
+        border: 4px dashed $sitnet-green-new;
+        border-radius: 4px;
+        padding: 1em;
+        margin: 1em 30px 1em 30px;
+        background-color: #edfff0;
+
+        div > i {
+            margin-right: 1em;
+            vertical-align: middle;
+        }
+
+        div > span {
+            line-height: 2em;
+        }
+    }
+
+    .total-score {
+        padding: 2em 1em 0 0;
+
+        span {
+            padding-top: 0.6em;
+            vertical-align: middle;
+        }
+    }
+
+    .active-exams-list {
+        margin-bottom: 10px;
+    }
+
+    .exams-info-title {
+        font-weight: bold;
+    }
+
+    .exam-list-saved {
+        color: $sitnet-dark-grey;
+        border: dashed 3px $sitnet-white;
+        background-color: $sitnet-teacher-turquoise-dark-inactive;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 8px;
+        padding: 1em;
+    }
+
+    .exam-question-option {
+        background-color: $sitnet-white;
+        border: 1px solid $sitnet-common-medium;
+        border-top: 0;
+        padding: 0.2em 0.5em;
+    }
+
+    .exam-question-option-text {
+        color: #2c2c2c;
+        font-size: 14px;
+    }
+
+    .single-question-icon {
+        color: $sitnet-teacher-turquoise-dark-active;
+        padding-left: 0.5em;
+        padding-right: 0.5em;
+    }
+
+    .pointer-hand {
+        cursor: pointer;
+    }
+
+    // to highlight ck-editor content marked with this class
+    .marker {
+        background-color: yellow;
+    }
 
+    .exams-table {
+        border: 0;
+        font-family: $sitnet-family-helvetica;
+        font-weight: normal;
+        font-size: 0.9em;
+
+        th {
+            background-color: $sitnet-common-light;
+            font-family: $sitnet-family-helvetica;
+            color: $sitnet-common-medium;
+            font-style: italic;
+            font-weight: normal;
+            border: 0;
+        }
+
+        td:first-child {
+            border-left: 0;
+        }
+        td:last-child {
+            border-right: 0;
+        }
+
+        tr:last-child {
+            td {
+                border-bottom: 0;
+            }
+        }
+        .table-column-examcode {
+            width: 6%;
+            text-align: center;
+            font-weight: bold;
+        }
+    }
+
+    // REVIEW RELATED ->
+
+    .review-question-border {
+        border: $sitnet-common-light solid 0.15em;
+        border-radius: 25px;
+        margin: 0.75em;
+        padding: 0.5em;
+    }
+
+    .review-question {
+        padding-left: 4em;
+    }
+
+    .review-question-value {
+        padding-left: 6em;
+
+        p {
+            word-wrap: break-word;
+        }
+    }
+
+    .review-question-option-name {
+        padding-left: 2em;
+    }
+
+    .review-feedback {
+        background-color: #f5f5f5;
+        opacity: 0.8;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        margin-right: 1em;
+    }
+
+    .review-feedback-text {
+        color: grey;
+        font-style: italic;
+        margin: 1em;
+    }
+
+    .exam-duration-btn {
+        margin-right: 0.5em;
+    }
+
+    .exam-small-warning-box {
+        margin-top: 0.5em;
+        text-align: center;
+    }
+
+    .draggable {
+        list-style: none;
+    }
+
+    .cloze-correct {
+        margin-right: 3px;
+        padding-right: 3px;
+        border: 1px solid green;
+        border-radius: 3px;
+        background: #ccffcc;
+        min-width: 30px;
+        display: inline-block;
+        box-shadow: 4px 4px 9px 0px rgba(0, 0, 0, 0.75);
+    }
+
+    .cloze-incorrect {
+        margin-right: 3px;
+        padding-right: 3px;
+        border: 1px solid red;
+        border-radius: 3px;
+        background: #feeeef;
+        min-width: 30px;
+        display: inline-block;
+        box-shadow: 4px 4px 9px 0px rgba(0, 0, 0, 0.75);
+    }
+
+    .cloze-neutral {
+        margin-right: 3px;
+        padding-right: 3px;
+        border: 1px solid gray;
+        border-radius: 3px;
+        background: white;
+        min-width: 30px;
+        display: inline-block;
+        box-shadow: 4px 4px 9px 0px rgba(0, 0, 0, 0.75);
+    }
+
+    .lottery-item-count {
+        margin-top: 0 !important;
+        margin-right: 1em;
+    }
+
+    [class*='sortable-'] {
+        list-style: none;
+    }
+
+    .exam-answered-correct {
+        border: 1px solid $sitnet-green-new;
+        background-color: #f3fff5;
+        padding: 5px;
+        border-radius: 4px;
+
+        .answer-score-text {
+            color: #3c763d;
+        }
+    }
+
+    .exam-answered-wrong {
+        border: 1px solid $sitnet-red;
+        background-color: #fff6f7;
+        padding: 5px;
+        border-radius: 4px;
+
+        .answer-score-text {
+            color: #a94442;
+        }
+    }
+
+    .exam-answered-skip {
+        border: 1px solid #7f7f7f;
+        background-color: rgb(238, 238, 238);
+        padding: 5px;
+        border-radius: 4px;
+    }
+
+    .exam-not-answered {
+        border: 1px solid white;
+        background-color: white;
+        padding: 5px;
+        border-radius: 4px;
+    }
+
+    .drag-preview {
+        box-sizing: border-box;
+        background: white;
+        border: 2px solid #ededed;
+        border-radius: 4px;
+        box-shadow:
+            0 5px 5px -3px rgba(0, 0, 0, 0.2),
+            0 8px 10px 1px rgba(0, 0, 0, 0.14),
+            0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    }
+
+    .dragdrop-placeholder {
+        background: #ccc;
+        border: dotted 3px #999;
+        min-height: 120px;
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .section-question {
+        box-sizing: border-box;
+        cursor: move;
+    }
+}
diff --git a/ui/src/assets/styles/partial/_form-validation.scss b/ui/src/assets/styles/partial/_form-validation.scss
index 245881ce30..43c2e8d5de 100644
--- a/ui/src/assets/styles/partial/_form-validation.scss
+++ b/ui/src/assets/styles/partial/_form-validation.scss
@@ -1,11 +1,14 @@
 .ng-invalid {
-  border: 0;
+    border: 0;
 }
 
 form .ng-invalid {
-  border: 1px solid red;
+    border: 1px solid red;
+    .exclude {
+        border: 0 !important;
+    }
 }
 
 ng-form {
-  border: 0 !important;
+    border: 0 !important;
 }
diff --git a/ui/src/assets/styles/partial/_library.scss b/ui/src/assets/styles/partial/_library.scss
deleted file mode 100644
index 7bacf87114..0000000000
--- a/ui/src/assets/styles/partial/_library.scss
+++ /dev/null
@@ -1,209 +0,0 @@
-#library {
-
-  .library {
-    //display: inline-block;
-    padding-top: 20px;
-    min-height: 100%;
-    max-width:100%;
-    .results {
-      margin-top: 1em;
-    }
-  }
-
-  .library-button {
-    a {
-      font-size: 16px;
-      font-family: $sitnet-family-helvetica;
-      background-color: $sitnet-green-new;
-      border: 1px solid $sitnet-dark-green-new;
-      width: 100%;
-      padding-left: 20px;
-      padding-right: 20px;
-      line-height: 1.5;
-      border-radius: 3px;
-      color: white;
-      text-align: center;
-      display: block;
-      padding-top: 10px;
-      padding-bottom: 10px;
-      text-decoration: none;
-
-      &.notinuse {
-        background-color: #7F7F7F;
-        color:#ffffff;
-        border:1px solid black;
-      }
-
-      &.preview {
-        background-color: white;
-        border: 1px #979797 solid;
-        color: #555555;
-      }
-
-      &.warning {
-        background-color: white;
-        border: $sitnet-red 1px solid;
-        color: $sitnet-red;
-      }
-
-    }
-
-    a:hover, button:active, button:focus, button:active:focus {
-      background-color: $sitnet-dark-green-new;
-      border: 1px solid $sitnet-dark-green-new;
-      text-decoration: none;
-
-      &.notinuse {
-        background-color: #7F7F7F;
-        color:#ffffff;
-        border:1px solid black;
-      }
-
-      &.preview {
-        background-color: #7F7F7F;
-        border: 1px #979797 solid;
-        color: #ffffff;
-      }
-
-      &.warning {
-        background-color: $sitnet-red;
-        border: $sitnet-red 1px solid;
-        color: #ffffff;
-      }
-
-    }
-
-    &.add-button {
-      display: inline-block;
-      margin-left: 30px;
-    }
-
-  }
-
-  .library-table {
-
-    font-family: $sitnet-family-helvetica;
-    font-weight: normal;
-    font-size: 0.9em;
-
-    th {
-      background-color: white;
-      border: 0;
-      font-family: $sitnet-family-helvetica;
-      font-size: 12px;
-      color: #777777;
-      text-transform: uppercase;
-      font-weight: normal;
-      white-space: nowrap;
-
-      &.reservation-search {
-        padding-bottom: 25px;
-      }
-
-    }
-
-    td {
-
-      font-family: $sitnet-family-helvetica;
-      color: #2C2C2C;
-      font-weight: normal;
-      font-size: 14px;
-
-      a {
-        font-weight: bold;
-        font-size: 16px;
-        font-family: $sitnet-family-helvetica;
-        color: #267B99;
-      }
-
-
-      &.reservation-search {
-        a {
-          font-size: 14px !important;
-        }
-        a.reservation {
-          font-weight: normal !important;
-        }
-
-        &.no_show {
-          color: $sitnet-red !important;
-        }
-
-        &.review {
-          color:$sitnet-green-new !important;
-        }
-
-      }
-
-      .exam-code {
-        color: #2C2C2C;
-        font-weight: bold;
-        font-size: 13px;
-        font-family: $sitnet-family-helvetica;
-
-      }
-
-      .exam-type {
-        text-transform: capitalize;
-      }
-
-      .exam-count {
-        color: #266B99;
-        font-size: 14px;
-        font-weight: bold;
-      }
-
-    }
-
-    th:first-child {
-      padding-left: 30px;
-    }
-
-    td:first-child {
-      border-left: 0;
-      padding-left: 30px;
-    }
-
-    td:last-child {
-      border-right: 0;
-    }
-
-    tr:last-child {
-      td {
-        border-bottom: 0;
-      }
-    }
-  }
-
-  ul {
-    list-style: none;
-  }
-
-  .question-add-owners {
-    margin-left: 10px;
-    margin-top: 10px;
-    width: 210px;
-    margin-bottom: 10px;
-  }
-
-  .question-add-owners-box {
-    margin-top: 10px;
-    margin-bottom: 20px;
-  }
-
-  .question-pick-organisation-box {
-    margin: 10px;
-  }
-
-  .btn {
-    &.green {
-      background-color: $sitnet-green-new;
-    }
-    &.border-green {
-      border: $sitnet-dark-green-new;
-    }
-    &.whitetext {
-      color:#ffffff;
-    }
-  }
-}
diff --git a/ui/src/assets/styles/partial/_mainview.scss b/ui/src/assets/styles/partial/_mainview.scss
deleted file mode 100644
index 4ba2d5cc93..0000000000
--- a/ui/src/assets/styles/partial/_mainview.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-#mainView {
-
-  @media print {
-    margin: 0 15px;
-    max-width: 1000px;
-  }
-}
diff --git a/ui/src/assets/styles/partial/_print.scss b/ui/src/assets/styles/partial/_print.scss
index dacff1ed84..da98690a6e 100644
--- a/ui/src/assets/styles/partial/_print.scss
+++ b/ui/src/assets/styles/partial/_print.scss
@@ -1,123 +1,116 @@
 @media print {
-
-  [class*="col-md-"] {
-    float: left;
-  }
-
-  #mainView {
-    width: 100%;
-  }
-  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
-    float: left;
-  }
-  .col-md-12 {
-    width: 100%;
-  }
-  .col-md-11 {
-    width: 91.66666666666666%;
-  }
-  .col-md-10 {
-    width: 83.33333333333334%;
-  }
-  .col-md-9 {
-    width: 75%;
-  }
-  .col-md-8 {
-    width: 66.66666666666666%;
-  }
-  .col-md-7 {
-    width: 58.333333333333336%;
-  }
-  .col-md-6 {
-    width: 50%;
-  }
-  .col-md-5 {
-    width: 41.66666666666667%;
-  }
-  .col-md-4 {
-    width: 33.33333333333333%;
-  }
-  .col-md-3 {
-    width: 25%;
-  }
-  .col-md-2 {
-    width: 16.666666666666664%;
-  }
-  .col-md-1 {
-    width: 8.333333333333332%;
-  }
-  .newRow {
-    float: left;
-    clear: left;
-  }
-
-  .fa-stack-1x, .fa-stack-2x {
-    position: static;
-    display: block;
-    width: auto;
-  }
-
-  .fa-stack {
-    display: inline;
-  }
-
-  .fa {
-    position: static;
-    display: inline;
-  }
-
-  .review-question-option-name {
-    line-height: 2em;
-  }
+    [class*='col-md-'] {
+        float: left;
+    }
+
+    #mainView {
+        width: 100%;
+    }
+    .col-md-1,
+    .col-md-2,
+    .col-md-3,
+    .col-md-4,
+    .col-md-5,
+    .col-md-6,
+    .col-md-7,
+    .col-md-8,
+    .col-md-9,
+    .col-md-10,
+    .col-md-11,
+    .col-md-12 {
+        float: left;
+    }
+    .col-md-12 {
+        width: 100%;
+    }
+    .col-md-11 {
+        width: 91.66666666666666%;
+    }
+    .col-md-10 {
+        width: 83.33333333333334%;
+    }
+    .col-md-9 {
+        width: 75%;
+    }
+    .col-md-8 {
+        width: 66.66666666666666%;
+    }
+    .col-md-7 {
+        width: 58.333333333333336%;
+    }
+    .col-md-6 {
+        width: 50%;
+    }
+    .col-md-5 {
+        width: 41.66666666666667%;
+    }
+    .col-md-4 {
+        width: 33.33333333333333%;
+    }
+    .col-md-3 {
+        width: 25%;
+    }
+    .col-md-2 {
+        width: 16.666666666666664%;
+    }
+    .col-md-1 {
+        width: 8.333333333333332%;
+    }
+    .newRow {
+        float: left;
+        clear: left;
+    }
+
+    .review-question-option-name {
+        line-height: 2em;
+    }
 }
 
 .font-bold {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .lightBorderBox {
-  border: 1px solid $sitnet-border-color;
-  padding: 5px;
-  width: 100%;
-  page-break-inside: avoid;
+    border: 1px solid $sitnet-border-color;
+    padding: 5px;
+    width: 100%;
+    page-break-inside: avoid;
 }
 
 .main-header-row {
-  margin-top: 1em;
-  font-weight: 300;
-  font-size: 1.5em;
+    margin-top: 1em;
+    font-weight: 300;
+    font-size: 1.5em;
 }
 
 .sub-header-row {
-  margin-top: 0.25em;
-  font-weight: bold;
+    margin-top: 0.25em;
+    font-weight: bold;
 }
 
 .sub-content-row {
-  margin-top: 0.25em;
-  font-size: 1em;
-  word-wrap: break-word;
+    margin-top: 0.25em;
+    font-size: 1em;
+    word-wrap: break-word;
 }
 
 .marker {
-  @media print {
-    border: 1px solid;
-  }
-  background: yellow;
+    @media print {
+        border: 1px solid;
+    }
+    background: yellow;
 }
 
 blockquote {
-  color: #999;
-  border: 0;
-  border-left: 2px solid #999;
-  padding-left: 1em;
+    color: #999;
+    border: 0;
+    border-left: 2px solid #999;
+    padding-left: 1em;
 }
 
 @-moz-document url-prefix() {
-  .firefox-print-fix{
-      overflow: visible !important;
-      display: block !important;
-  }
+    .firefox-print-fix {
+        overflow: visible !important;
+        display: block !important;
+    }
 }
-
-
diff --git a/ui/src/assets/styles/partial/_question-editor.scss b/ui/src/assets/styles/partial/_question-editor.scss
deleted file mode 100644
index ef3b13f866..0000000000
--- a/ui/src/assets/styles/partial/_question-editor.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-#question-editor {
-
-  .question-editor-option {
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    margin: 1em;
-    padding: 0.5em;
-  }
-
-  .question-editor-option .form-group {
-    margin-bottom: 5px;
-  }
-
-  li {
-    list-style: none;
-  }
-
-  ul {
-    padding: 0;
-  }
-
-  .pointer-hand {
-    cursor: pointer;
-  }
-}