@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/pages/_pages.scss

@@ -0,0 +1,4429 @@
+.category-list li a .text-info {
+    color: $info;
+}
+
+.ibox-content {
+    .social-avatar img {
+        width: 40px;
+    }
+}
+
+
+/* Agile list */
+
+.agile-list {
+    padding: 0;
+    li {
+        background: darken($hover-grey, 2%);
+        cursor: pointer;
+        margin-bottom: 6px;
+        border: 0;
+        border-left: darken($hover-grey, 2%);
+        &:hover {
+            background: darken($hover-grey, 2%);
+            cursor: pointer;
+            div.clearfix a {
+                color: darken($accent-color, 2%);
+            }
+        }
+        li {
+            margin: 0;
+            padding: 0;
+            border-radius: 0;
+            background: none;
+            border: 0;
+        }
+        a {
+            word-wrap: break-word;
+        }
+        div>hr {
+            padding: 0;
+            border-color: darken($gray, 2%);
+        }
+        .input-group {
+            input,
+            .input-group-addon {
+                background: transparent !important;
+            }
+        }
+        &.white-bg {
+            background: #FFF;
+        }
+        &.danger-element {
+            border-color: $red;
+        }
+        &.agenda-item-container {
+            overflow: hidden;
+        }
+    }
+    .selected {
+        //background: darken($hover-grey, 5%);
+        //&:hover {
+        //    background: darken($hover-grey, 5%);            
+        //}
+    }
+    .element {
+        @include agile-list-element(transparent);
+    }
+    .green-element {
+        @include agile-list-element($green);
+    }
+    .accent-element {
+        @include agile-list-element($accent-color);
+    }
+    .orange-element {
+        @include agile-list-element($orange);
+    }
+    .orangepeel-element {
+        @include agile-list-element($orangepeel);
+    }
+    .purple-element {
+        @include agile-list-element($purple);
+    }
+    .teal-element {
+        @include agile-list-element($teal);
+    }
+    .grey-element {
+        @include agile-list-element($grey);
+    }
+    .s1-element {
+        @include agile-list-nb-li($allports);
+        .icon {
+            background-position: 0px 0px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -320px;
+            }
+        }
+    }
+    .s2-element {
+        @include agile-list-nb-li($cerulean);
+        .icon {
+            background-position: 0 -32px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -352px;
+            }
+        }
+    }
+    .s3-element {
+        @include agile-list-nb-li($dixie);
+        .icon {
+            background-position: 0 -64px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -384px;
+            }
+        }
+    }
+    .s4-element {
+        @include agile-list-nb-li($atlantis);
+        .icon {
+            background-position: 0 -96px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -416px;
+            }
+        }
+    }
+    .s5-element {
+        @include agile-list-nb-li($shakespeare);
+        .icon {
+            background-position: 0 -128px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -448px;
+            }
+        }
+    }
+    .s6-element {
+        @include agile-list-nb-li($jade);
+        .icon {
+            background-position: 0 -160px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -480px;
+            }
+        }
+    }
+    .s7-element {
+        @include agile-list-nb-li($shiraz);
+        .icon {
+            background-position: 0 -192px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -512px;
+            }
+        }
+    }
+    .s8-element {
+        @include agile-list-nb-li($eminence);
+        .icon {
+            background-position: 0 -225px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -544px;
+            }
+        }
+    }
+    .s9-element {
+        @include agile-list-nb-li($eminence);
+        .icon {
+            background-position: 0 -258px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -586px;
+            }
+        }
+    }
+    .s10-element {
+        @include agile-list-nb-li($bluelagoon);
+        .icon {
+            background-position: 0 -290px;
+        }
+        &.inactive {
+            .icon {
+                background-position: 0px -618px;
+            }
+        }
+    }
+    .inactive {
+        color: $text-color;
+    }
+    &.bg-change {
+        li {
+            background-color: white;
+            padding: 0;
+            border: 0;
+            margin-bottom: -1px;
+            div.odd {
+                background: $hover-grey;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                margin: 0;
+                border: 1px solid darken($gray, 2%);
+                .ibox-rs & {
+                    background: #FFF;
+                }
+            }
+            div.even {
+                background-color: white;
+                border-left: 1px solid darken($gray, 2%);
+                border-right: 1px solid darken($gray, 2%);
+                border-bottom: 1px solid darken($gray, 2%);
+                margin: 0;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                &.yellow {
+                    border-left: 1px solid $mustard;
+                    margin: 0 0 0 15px;
+                }
+            }
+        }
+    }
+    &.bookings-in-rooms {
+        margin-left: 30px;
+    }
+    &.no-indent {
+        li {
+            div.even {
+                margin: 0 !important;
+            }
+        }
+    }
+    &.schedule {
+        li {
+            margin: 0 0 10px 0;
+            .schedule {
+                text-align: left;
+            }
+            hr {
+                margin: 8px 0 4px 0;
+            }
+        }
+    }
+}
+
+.agile-list.no-pointer li {
+    cursor: default;
+}
+
+
+/* nh - no hover */
+
+.agile-list-nh {
+    li {
+        &:hover {
+            div.clearfix a {
+                color: $accent-color;
+            }
+        }
+        div.clearfix a:hover {
+            color: darken($accent-color, 15%);
+        }
+    }
+}
+
+
+/* nb - no borders */
+
+.agile-list-nb {
+    .row {
+        /* agile list with a text description */
+        .description {
+            display: block;
+            margin-left: 45px;
+            float: none;
+        }
+        /* agile list with a checkbox */
+        .checkbox {
+            float: right;
+            margin: 5px 0 0 0;
+        }
+        button {
+            float: right;
+        }
+    }
+    li {
+        width: 100%;
+        span {
+            display: inline-block;
+            min-height: 24px;
+            line-height: 24px;
+            /* Some agile list items may have an icon and use a description for the text */
+            &.icon {
+                display: block !important;
+                float: left;
+            }
+            &.description {
+                margin: 4px 0 2px 44px;
+                display: block;
+            }
+        }
+    }
+}
+
+.agile-list-icons {
+    display: inline;
+    li {
+        background: transparent;
+        border: 0;
+        float: left;
+        padding: 0;
+        margin: 5px 5px 5px 0;
+        &:hover {
+            background: transparent;
+        }
+        .icon {
+            margin-left: 5px;
+        }
+        .description {
+            display: none;
+        }
+    }
+}
+
+#courses .agile-list-icons {
+    li {
+        margin: 0px 0px 10px 0px;
+    }
+}
+
+.agile-list-expanded {
+    li {
+        background: none;
+        margin: 0;
+        border: 0;
+        padding: 5px 0;
+        clear: both;
+        &:hover {
+            background: none;
+        }
+    }
+}
+
+.agile-list-checkboxes {
+    li.element span {
+        margin-top: 5px;
+    }
+}
+
+.roomslist .btn-xs {
+    margin-top: -4px;
+}
+
+.feed-element {
+    padding-bottom: 0;
+    i {
+        margin-top: 3px;
+    }
+    p {
+        font-size: $font-std;
+    }
+    .card-pocketcentre & {
+        margin-bottom: 0;
+        padding-bottom: 0;
+    }
+    #recently-added-bookings & {
+        padding-bottom: 10px;
+        &:last-of-type {
+            padding-bottom: none !important;
+            border-bottom: none;
+        }
+    }
+}
+
+.course-profile.orangepeel-bg {
+    @include course-profile($orangepeel);
+}
+
+.course-profile.teal-bg {
+    @include course-profile($teal);
+}
+
+.course-profile.purple-bg {
+    @include course-profile($purple);
+}
+
+.no-bg {
+    background: none;
+}
+
+.scrollable {
+    overflow-y: auto;
+}
+
+// Custom styles for the course profile page
+.course-reg-price-type {
+    padding-top: 6px;
+    padding-left: 20px;
+    small {
+        margin-bottom: 5px;
+    }
+}
+
+.course-reg-price {
+    .input-group {
+        margin-bottom: 3px;
+    }
+}
+
+.course-code {
+    text-transform: uppercase;
+}
+
+.disabled {
+    pointer-events: none;
+}
+
+.nodisplay {
+    display: none;
+}
+
+.rolestable td .i-checks2 {
+    @extend .m-b-xs;
+}
+
+//BOOKINGS - Search page 
+.btn-bookings-search {
+    padding: 6px 12px;
+    i {
+        font-size: 20px;
+    }
+}
+
+.search-results-bookings {
+    .widget-schedule-agenda-item {
+        margin-left: 0;
+    }
+}
+
+.column-filter {
+    margin-left: 10px;
+    padding-right: 30px !important;
+    //comment this out if it won't be used #justdoit
+}
+
+.column-items {
+    padding-right: 30px !important;
+    //comment this out if it won't be used #justdoit
+}
+
+.room-container {
+    .widget.room {
+        background: $lighter-grey;
+    }
+    .expand-row-container {
+        background: $lighter-grey;
+        color: #FFF;
+    }
+    &.occupied {
+        .widget.room {
+            border-color: $light-grey;
+            background-color: #FFF;
+            background-image: repeating-linear-gradient( 135deg, transparent, transparent 5px, rgba(50, 50, 50, .045) 5px, rgba(50, 50, 50, .045) 10px);
+        }
+        .expand-row-container {
+            background: transparent;
+        }
+        .expand-row-button {
+            background: #FFF;
+            color: $grey;
+        }
+    }
+}
+
+.empty-box {
+    display: block;
+    height: 140px;
+}
+
+.room-label {
+    //margin-bottom: 10px;
+    .btn {
+        margin-top: -5px;
+    }
+    .block-level {
+        display: block;
+        clear: both !important;
+        float: none !important;
+    }
+}
+
+.row.schedule {
+    margin-bottom: 20px;
+}
+
+.previous {
+    opacity: 0.75;
+}
+
+.agenda-list-context {
+    display: block;
+    width: 60px;
+    margin-bottom: 10px;
+    margin-top: -13px;
+    text-align: left;
+    .current & {
+        color: $navy;
+    }
+    .day {
+        font-size: 40px;
+        font-weight: bold;
+        letter-spacing: -3px;
+        margin: 0;
+        clear: both;
+    }
+    .day-text {
+        display: block;
+        margin-top: -12px;
+        margin-left: 3px;
+        font-weight: 500;
+    }
+    .time {
+        display: block;
+        width: 80px;
+        font-weight: bold;
+    }
+    &.past {
+        .time {
+            opacity: 0.5;
+        }
+    }
+    .start-time,
+    .end-time,
+    .divider {
+        font-size: 18px;
+        display: block;
+        clear: both;
+        margin-top: 8px;
+        //remove top margin for today's overview
+        #calendar .ibox & {
+            margin-top: 0;
+        }
+    }
+    .divider {
+        text-align: center;
+        height: 10px;
+        line-height: 10px;
+        margin-bottom: 0px;
+        font-size: 14px;
+        i {
+            @extend .divider;
+        }
+    }
+    .end-time {
+        font-size: $font-std;
+        margin-top: -2px;
+        opacity: 0.5;
+    }
+    .ibox & {
+        margin-bottom: 0 !important;
+    }
+    &.cancelled {
+        opacity: 0.5;
+    }
+}
+
+.agenda-list-singleRow {
+    margin-left: 70px;
+    //height: 40px;
+    background: #FFF;
+    padding: 10px;
+    text-align: center;
+    display: block;
+    overflow: hidden;
+    h3 {
+        margin: 0px;
+    }
+}
+
+.stat-widget {
+    background: $lighter-grey;
+    h1 {
+        margin: 0px !important;
+        font-size: 32px;
+        display: inline-block;
+        width: auto;
+        float: right;
+        text-align: right;
+    }
+    h4 {
+        margin-bottom: 0px !important;
+    }
+    small {
+        display: block;
+    }
+    .widget-content.left {
+        display: inline-block;
+        float: left;
+        width: auto;
+    }
+    .status-icon {
+        position: relative;
+        top: -1em;
+        font-size: 50%;
+    }
+    .btn {
+        margin-top: 15px;
+        width: 100%;
+    }
+    .list-options .btn {
+        width: auto;
+    }
+    .dashboard & {
+        .widget-content {
+            text-align: left;
+        }
+    }
+    &.whats-happening {
+        background: #FFF;
+        margin-top: 20px;
+    }
+    &.update-profile {
+        .widget-content {
+            text-align: left;
+            p {
+                font-weight: 300;
+            }
+            .action {
+                text-align: center;
+            }
+        }
+    }
+    &.emails-list {
+        .widget-content {
+            overflow: hidden;
+        }
+    }
+}
+
+.bookings-lp-infoRow {
+    .widget {
+        border: none;
+        margin-bottom: 10px;
+    }
+    .info-col {
+        &:last-of-type {
+            .widget {
+                margin-bottom: 0px;
+            }
+        }
+    }
+}
+
+
+/* BOOKINGS CALENDAR */
+
+.calendar-filter {
+    display: block;
+    width: 100%;
+    clear: both;
+    margin-bottom: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    button,
+    div {
+        float: left;
+    }
+    .date {
+        display: block;
+        line-height: 34px;
+        font-size: 24px;
+        letter-spacing: -1px;
+        margin-top: 15px;
+        clear: both;
+    }
+    .date-text.form-control {
+        display: inline;
+        font-size: 24px;
+        margin-left: 5px;
+        background: transparent;
+    }
+}
+
+.filter-desktop {
+    display: none;
+    margin-right: 5px;
+}
+
+.filter-group {
+    display: none;
+}
+
+.filter-label {
+    margin: 0px !important;
+}
+
+@media (min-width: 880px) {
+    .filter-group {
+        display: inline-block;
+    }
+}
+
+@media (min-width: 1282px) {
+    .filter-label {
+        margin-left: 25px !important;
+    }
+}
+
+.calendar-title {
+    font-size: 26px;
+    line-height: 0px;
+    padding-bottom: 5px;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    .date {
+        position: relative;
+        i.fa {
+            position: absolute;
+            top: -11px;
+            left: 0px;
+        }
+        span.date-text {
+            position: absolute;
+            top: 0px;
+            left: 30px;
+        }
+    }
+    .pull-right {
+        display: block;
+        //width: 100%;
+        clear: both;
+    }
+}
+
+.timeline {
+    padding-left: 10px;
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0px;
+        height: 100%;
+        width: 3px;
+        background: $teal;
+    }
+    .timeline-item {
+        display: block;
+        position: relative;
+        clear: both;
+        padding-left: 5px;
+        margin-bottom: 5px;
+        .roomslist {
+            margin-bottom: 15px;
+        }
+        label {
+            opacity: 0.4;
+        }
+        span.marker {
+            position: absolute;
+            top: 0px;
+            left: -15px;
+            font-size: 14px;
+            i.fa {
+                display: block;
+                background: white;
+                margin-top: 3px;
+            }
+        }
+        &:first-of-type {
+            span.marker {
+                background: white;
+                i.fa {
+                    padding-top: 2px;
+                }
+            }
+        }
+        &:last-of-type {
+            span.marker {
+                i.fa {
+                    padding-bottom: 15px;
+                }
+            }
+        }
+    }
+    .active {
+        margin-bottom: 10px;
+        label {
+            opacity: 1;
+        }
+    }
+}
+
+.full-width-text {
+    display: block;
+}
+
+.mobile-text {
+    display: none;
+}
+
+.equipment-lp-requestWorkOrder {
+    .widget {
+        margin-bottom: 10px;
+    }
+    .row:first-of-type {
+        .widget {
+            margin-top: 0px;
+        }
+    }
+    .row:last-of-type {
+        div:last-of-type {
+            .widget {
+                margin-bottom: 20px;
+            }
+        }
+    }
+}
+
+.equipment-lp-usage {
+    .widget {
+        margin-bottom: 10px;
+    }
+    .col-sm-6:nth-of-type(1),
+    .col-sm-6:nth-of-type(2) {
+        .widget {
+            margin-top: 0px;
+        }
+    }
+}
+
+.fluid-ellipsis-container {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+}
+
+.fluid-ellipsis-content-wrapper {
+    display: table-cell;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+//Individual BOOKING page
+.roomslist .odd .label {
+    margin-top: -4px;
+}
+
+.booking-body {
+    overflow: hidden;
+}
+
+.booking-left-col {
+    .booking-info {
+        /*FOR IE 8 */
+        height: 100%;
+        padding: 15px;
+        margin-bottom: -99999px;
+        padding-bottom: 99999px;
+    }
+    h1 {
+        margin-top: 0px;
+        padding-right: 45px;
+    }
+    .external-org {
+        opacity: 0.6;
+    }
+    hr {
+        margin-top: 2px;
+        margin-bottom: 3px;
+        height: 2px;
+        background-color: #fff;
+        border: 0 none;
+    }
+}
+
+.agenda-item-wrapper {
+    &.error {
+        .widget-schedule-agenda-item {
+            margin-top: 5px !important;
+        }
+        .agenda-list-context {
+            margin-top: 15px !important;
+        }
+    }
+    &.ongoing {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    .room-container .room-bookings & {
+        margin-left: 20px;
+        &:last-of-type {
+            margin-bottom: 30px;
+        }
+    }
+}
+
+//Default view - smallest view
+.widget-schedule-agenda-item {
+    //border-left: 3px solid #FFF; 
+    padding: 0;
+    overflow: hidden;
+    margin: 0 0 8px 70px;
+    border-radius: 3px;
+    .list-container .listing & {
+        margin-left: 0px !important;
+    }
+    &.cancelled {
+        background: #fafafa;
+        //update this to a variable
+        .status {
+            color: $red;
+        }
+        .agenda-item-title,
+        .agenda-item-status,
+        .agenda-item-time-rooms,
+        .agenda-item-pax {
+            opacity: 0.5;
+        }
+    }
+    .col-sm-7 {
+        width: 100%;
+    }
+    .col-sm-5 {
+        width: 100%;
+    }
+    //Search results
+    .list-results & {
+        margin: 0px 15px 6px 15px;
+        border-radius: 3px;
+        border-bottom: 1px solid $border-grey !important;
+        box-shadow: none;
+        &:first-of-type {
+            margin-top: 0px;
+        }
+    }
+    .dashboard-bookings & {
+        margin: 0px;
+        margin-bottom: 6px;
+        box-shadow: none;
+    }
+    .ibox & {
+        border-left: none !important;
+        margin-bottom: 0 !important;
+    }
+    table.with-icons {
+        td:first-child {
+            min-width: 20px;
+            text-align: center;
+            vertical-align: top;
+        }
+        margin-bottom: 10px;
+    }
+    .pending {
+        float: right !important;
+        margin-top: 5px;
+        margin-left: 10px;
+        .fa {
+            font-size: 22px !important;
+        }
+    }
+    .rooms &,
+    .today & {
+        margin-left: 90px;
+    }
+    .agile-list.bookings-in-rooms & {
+        margin-left: 0px;
+        border-radius: 0px;
+        .list-results & {
+            margin-bottom: 0px;
+        }
+    }
+    .room-conflicts & {
+        margin-left: 15px;
+        border-left: 1px solid #e7e7e7 !important;
+        border-right: 1px solid #e7e7e7 !important;
+        border-radius: 0px !important;
+        &:hover {
+            transform: none;
+            box-shadow: none;
+        }
+    }
+}
+
+.agenda-item {
+    &_course {
+        @include agenda-item($teal, "C");
+    }
+    &_meeting {
+        @include agenda-item($pink, "M");
+    }
+    &_event {
+        @include agenda-item($deep-blue, "E");
+    }
+    &_clinical {
+        @include agenda-item($orange, "Cl");
+    }
+    &_course,
+    &_meeting,
+    &_event,
+    &_clinical {
+        /* Calendar page classes */
+        .truncate {
+            white-space: normal;
+            overflow: visible;
+            text-overflow: clip;
+            .dashboard-bookings & {
+                padding-right: 40px;
+            }
+        }
+    }
+}
+
+
+/* Bookings Calendar */
+
+.bookings-calendar-downloads {
+    width: 50%;
+    float: left;
+    .btn-group {
+        float: right !important;
+    }
+}
+
+.bookings-calendar-title {
+    width: 50%;
+    float: left;
+    font-size: 18px;
+    line-height: 32px;
+}
+
+
+/* AGENDA ITEM COMPONENTS */
+
+//Container that contains agenda at`butes within a widget
+.agenda-item-container {
+    padding: 10px 15px 6px 15px;
+    display: block;
+    .status {
+        display: block;
+        clear: right;
+    }
+    .ibox & {
+        //margin-bottom: 0;
+    }
+    //remove top and bottom padding for today's overview
+    #calendar .ibox & {
+        padding: 0px 15px;
+    }
+    a & {
+        color: $text-color;
+    }
+    .label {
+        margin-bottom: 4px;
+    }
+    .fa-chevron-down {
+        margin-left: 10px;
+        &:before {
+            content: "\F077";
+        }
+        .collapsed & {
+            &:before {
+                content: "\F078";
+            }
+        }
+    }
+}
+
+//Agenda title 
+.agenda-item-title {
+    padding-top: 2px;
+    h3 {
+        line-height: 24px;
+        margin: 0 !important;
+    }
+    .name {
+        //margin-right: 10px; 
+    }
+    .time {
+        display: inline-block;
+        clear: both;
+    }
+}
+
+//Agenda type - Course/Meeting/Event
+.agenda-item-type {
+    //margin-right: 10px;
+    //font-weight: bold;
+    text-transform: uppercase;
+    //margin-left: 10px;
+}
+
+//Agenda attribute 
+.agenda-item-attribute {
+    display: block;
+    height: auto;
+    width: 100%;
+    clear: both;
+    .rooms & {
+        &.col-second,
+        &:last-of-type {
+            float: left;
+            clear: none;
+            width: 50%;
+        }
+    }
+}
+
+.agenda-item-details {
+    @include if-direct-parent('.past') {
+        opacity: 0.5;
+    }
+}
+
+//Agenda status - Pending approval/Approved/Cancelled
+.agenda-item-status {
+    opacity: 0.7;
+    @include if-direct-parent('.unapproved') {
+        color: $mustard;
+    }
+    .room-conflicts & {
+        margin-top: 3px;
+    }
+}
+
+.agenda-item-attribute-divider {
+    display: none;
+}
+
+.agenda-item-furtherdetails {
+    display: none;
+}
+
+.agenda-item-mobiledetails {
+    display: block;
+    margin: 0px 0 5px 0;
+    clear: both;
+}
+
+
+/* Bookings dashboard */
+
+.divider-dashed-container {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    hr {
+        border-color: $grey;
+        border-style: dashed;
+    }
+}
+
+.divider-caret-right-container {
+    display: block;
+    position: absolute;
+    font-size: 24px;
+    top: -17px;
+    left: 87px;
+    color: $grey;
+}
+
+.ongoing-indicator {
+    margin-left: 10px;
+    margin-top: 15px;
+    position: relative;
+    .fa {
+        position: absolute;
+        top: -7px;
+        left: -12px;
+        color: $accent-color;
+    }
+    hr {
+        border-color: $accent-color;
+        height: 2px;
+        margin-top: 15px;
+    }
+    .room-container .room-bookings & {
+        margin-left: 20px;
+    }
+}
+
+.expand-row {
+    position: relative;
+}
+
+.expand-row-container {
+    position: absolute;
+    bottom: -10px;
+    height: 8px;
+    width: 100%;
+}
+
+.expand-row-button {
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    background-color: inherit;
+    margin: 0px auto;
+}
+
+.new-booking {
+    display: none;
+}
+
+.quick-access {}
+
+
+/* Page filters */
+
+.page-filter {
+    margin-top: 10px;
+    .list-filters {
+        margin-bottom: 0;
+    }
+}
+
+
+/* Component filters */
+
+.component-filter-rooms {
+    button {
+        margin-bottom: 15px;
+    }
+    button {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+#reportslist select {
+    width: 30px;
+}
+
+
+/* Pocket Centre Dashboard Cards */
+
+.results-totals {
+    text-align: right;
+}
+
+.centres-list-filters {
+    margin-top: 15px;
+}
+
+.pc-stats tr td {
+    padding-bottom: 8px;
+}
+
+.pc-stat-widget {
+    .navy-bg {
+        color: #fff;
+    }
+}
+
+#centres-map .maps {
+    height: 600px;
+    iframe {
+        width: 100%;
+        height: 600px;
+        max-height: none;
+    }
+}
+
+#centres-map-side {
+    position: absolute;
+    z-index: 999;
+    right: 0px;
+    width: 0px;
+    max-height: none;
+    padding: 0px;
+    overflow: hidden;
+    iframe {
+        width: 100%;
+        height: 100%;
+        max-height: none;
+    }
+}
+
+
+/* Settings */
+
+.settings-title-row {
+    background-color: $accent-color;
+    padding: 17px 10px 17px 10px;
+    color: #fff;
+    .centered-content {
+        margin-bottom: 0;
+    }
+    a {
+        color: #fff;
+    }
+}
+
+.settings-title-holder {
+    display: table;
+    width: 100%;
+}
+
+.settings-cell {
+    display: table-cell;
+    width: auto;
+    vertical-align: middle;
+    padding-right: 15px;
+}
+
+.settings-center-cell {
+    width: 600px;
+}
+
+.settings-cell .cell-inner {
+    min-width: 30px;
+    vertical-align: middle;
+    &.empty {
+        min-width: 1px;
+    }
+}
+
+.header-with-notice {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        display: block;
+        float: left;
+    }
+    .notification {
+        display: block;
+    }
+    small {
+        i.fa {
+            display: block;
+            float: left;
+            margin-top: 4px;
+            margin-left: 5px;
+        }
+    }
+}
+
+
+/* Landing Page */
+
+#landing-page-wrapper {
+    .page-heading {
+        background-color: $navyblue;
+        padding: 0px;
+        color: #fff;
+        position: relative;
+        min-height: 75px;
+        a {
+            color: #337ab7;
+        }
+        h2 {
+            margin: 14px 0px 3px 0px;
+        }
+    }
+}
+
+.landing-nav {
+    background-color: $navyblue;
+    padding: 0px;
+    text-align: right;
+    height: 100%;
+    position: absolute;
+    right: 0px;
+    ul {
+        padding: 0px;
+        height: 100%;
+    }
+    li {
+        list-style-type: none;
+        display: inline-block;
+        text-align: center;
+        padding-top: 25px;
+        padding-bottom: 15px;
+        font-weight: bold;
+        width: 75px;
+        height: 100%;
+    }
+    .login-box {
+        background-color: $navy;
+    }
+}
+
+#landing-hero {
+    background-image: url("images/temp-landing-hero.jpg");
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 350px;
+}
+
+.landing-course-ibox {
+    @extend .ibox;
+    @extend .ibox-card-wh;
+    .ellipsis {
+        @include ellipsis(18px,
+        1.2,
+        1);
+    }
+    .date-ellipsis {
+        @include ellipsis(15px,
+        1.2,
+        1);
+    }
+    a {
+        float: right;
+    }
+}
+
+#landing-contact {
+    background-color: $navy;
+    color: #fff;
+    text-align: center;
+    table {
+        text-align: left;
+        width: 250px;
+        margin: auto;
+        td {
+            padding-bottom: 15px;
+        }
+        td:first-child {
+            text-align: center;
+            padding-right: 10px;
+            i {
+                font-size: 20px;
+            }
+        }
+    }
+    a {
+        color: #fff;
+    }
+}
+
+#landing-map iframe {
+    width: 100%;
+    height: 300px;
+}
+
+#upcoming-courses .course-grid-item {
+    padding-left: 12px;
+    padding-right: 12px;
+    width: 50%;
+    display: block;
+    a {
+        display: block;
+    }
+    .row {
+        color: $grey;
+    }
+}
+
+#landing-footer {
+    background-color: $navyblue;
+    color: #fff;
+    min-height: 120px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    text-align: center;
+    font-size: 10pt;
+    a {
+        color: #fff;
+    }
+    .footer-nav {
+        ul {
+            padding: 0px;
+        }
+        li {
+            padding: 10px;
+            list-style-type: none;
+            display: inline-block;
+            text-align: center;
+            font-weight: bold;
+        }
+    }
+}
+
+
+/* Landing Page 2 */
+
+.landingPage {
+    /* Defaults */
+    background: #ececec;
+    color: $grey;
+    /* Typography */
+    small {
+        font-weight: bold;
+        color: desaturate($accent-color, 25%);
+        a {
+            color: desaturate($accent-color, 25%) !important;
+            border-bottom: 1px solid #5e5e63 !important;
+            &:hover {
+                border-bottom: 1px solid white !important;
+                color: white !important;
+            }
+        }
+    }
+    p>a {
+        border-bottom: 1px solid desaturate($accent-color, 25%);
+        &:hover {
+            border-bottom: 1px solid $accent-color !important;
+        }
+    }
+    h1 {
+        margin: 0 0 10px;
+    }
+    h2 {
+        margin: 0 0 10px;
+    }
+    h3 {
+        margin: 0px;
+    }
+    hr {
+        width: 100%;
+        display: block;
+    }
+    .btn-transparent {
+        color: $accent-color;
+    }
+    .sessionlist .sessiontimes:not(first-of-type) {
+        padding-top: 5px;
+    }
+    /* Buttons */
+    .main-button {
+        display: inline;
+        padding: 10px;
+        border-radius: 3px;
+        background: none;
+        border: 1px solid white;
+        color: lighten(white, 10%) !important;
+        &:hover {
+            background: $accent-color;
+            color: #FFF !important;
+        }
+    }
+    //$faint-grey: hsla(198, 100%, 20%,0.07);  
+    $faint-grey: $lightest-grey;
+    /* Colours */
+    .faint-grey {
+        background: $faint-grey;
+    }
+    .white {
+        background: #FFF;
+    }
+    .navyblue {
+        background: $navyblue;
+        color: #FFF;
+        a,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            color: #FFF;
+        }
+        h2 {
+            color: $grey;
+        }
+        h3 a {
+            border-bottom: 1px solid $navyblue;
+            &:hover {
+                border-bottom: 1px solid #FFF;
+            }
+        }
+    }
+    /* Sections */
+    .base-container {
+        padding: 0 10px;
+        overflow: hidden;
+    }
+    .centered-content {
+        padding: 10px 0;
+        margin: 0px auto;
+    }
+    .top-nav {
+        margin: 0px auto;
+        text-align: left;
+        img {
+            display: block;
+            opacity: 0.5;
+            margin-left: -5px;
+        }
+        a:not(:last-of-type) {
+            margin-right: 25px;
+        }
+        .navigation {
+            padding-top: 30px;
+        }
+    }
+    .hero-container {
+        display: block;
+        position: relative;
+        overflow: hidden;
+        height: auto;
+        .hero {
+            height: auto;
+            margin: 0px auto;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            &.main {
+                padding-top: 20px;
+                padding-bottom: 50px;
+            }
+        }
+    }
+    .two-col-container {
+        padding-top: 20px;
+        overflow: hidden;
+        .centered-content {
+            overflow: hidden;
+        }
+        .col {
+            display: block;
+            float: left;
+            width: 100%;
+            padding: 20px;
+            background: $faint-grey;
+        }
+        .map {
+            padding: 0px;
+            height: 200px;
+            iframe {
+                width: 100%;
+                height: 100%;
+                border-top-left-radius: 5px;
+                border-top-right-radius: 5px;
+            }
+        }
+        .image {
+            height: 200px;
+        }
+        .left {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+        }
+        .right {
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+        }
+        .elearning {
+            background: $lighter-grey url('images/csds-eLearning-showcase-1.png');
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .simulation {
+            background: $lighter-grey url('images/pocket-simulation-centre.jpg');
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+    }
+    .base-container {
+        &.pcn-allCourse {
+            padding: 0;
+        }
+    }
+    .centre {
+        max-width: 1200px;
+        width: 95%;
+        margin: 0px auto;
+        position: relative;
+        overflow: hidden;
+        border-radius: 5px;
+        .banner {
+            background-image: url("images/pcn-learning-solutions.jpg");
+            background-size: cover;
+            height: 100%;
+            width: 100%;
+            background-repeat: no-repeat;
+            float: left;
+        }
+        &.pcn-Coursead-small,
+        &.pcn-allCourse-i {
+            width: unset !important;
+        }
+        .text {
+            width: 100%;
+            height: auto;
+            padding: 20px;
+            overflow: hidden;
+            display: block;
+            float: left;
+            background: white;
+        }
+    }
+    .pcn-eLearningCourse,
+    .pcn-allCourse {
+        padding-top: 0 !important;
+    }
+    .pcn-allCourse,
+    .pcn-Coursead-small {
+        margin-bottom: 20px;
+        .centre {
+            .banner {
+                transform: unset;
+                .text {
+                    margin-left: 250px;
+                }
+            }
+        }
+    }
+    .pcn-allCourse {
+        .centre .banner {
+            background-image: url('images/pocket-simulation-centre.jpg');
+        }
+    }
+    .centre .pcn-Coursead-small {
+        width: unset !important;
+    }
+    .courses {
+        .ibox-content.p-t {
+            height: 140px;
+        }
+    }
+    .footer {
+        position: relative !important;
+        padding: 30px 10px 0 10px;
+        overflow: hidden;
+        .logos {
+            img {
+                display: block;
+                float: right;
+            }
+        }
+        hr {
+            display: block;
+            clear: both;
+            width: 100%;
+        }
+    }
+    .pcn-footer {
+        .text {
+            h2 {
+                color: #fff;
+            }
+        }
+    }
+    .footer-copyright {
+        color: desaturate($accent-color, 25%);
+        font-size: 15px;
+        padding-top: 40px;
+        & a {
+            color: desaturate($accent-color, 25%) !important;
+            border-bottom: 1px solid #5e5e63 !important;
+            &:hover {
+                border-bottom: 1px solid white !important;
+                color: white !important;
+            }
+        }
+    }
+    .multiple-two-cols {
+        &>div {
+            &:not(:first-of-type, :last-of-type) {
+                padding-top: 4px;
+                padding-bottom: 4px;
+            }
+            &:first-of-type {
+                padding-top: 15px;
+                padding-bottom: 4px;
+            }
+            &:last-of-type {
+                padding-top: 4px;
+                padding-bottom: 15px;
+            }
+        }
+    }
+    .blurb1 {
+        img {
+            width: 70%;
+            margin: 0px auto;
+        }
+    }
+    .blurb2 {
+        .hero {
+            padding-top: 25px;
+            padding-right: 0;
+            padding-left: 0;
+        }
+    }
+    .contact-us {
+        padding-top: 0px;
+        padding-bottom: 15px;
+    }
+    .courses-list {
+        a {
+            color: $grey;
+        }
+        .ibox-title h2 {
+            color: #FFF;
+        }
+        .courses {
+            padding-top: 0px;
+            padding-bottom: 25px;
+        }
+        .hero {
+            text-align: left;
+        }
+        .courses.less-than-three {
+            .row {
+                position: relative;
+                text-align: center;
+                &>div {
+                    text-align: left;
+                    float: none;
+                    margin: 0px auto;
+                    display: inline-block;
+                }
+            }
+        }
+    }
+    .pocket-after-header {
+        padding-bottom: 150px;
+
+        h3.pcn-courselist {
+            color: white;
+        }
+    }
+    .courses-negative-margin {
+        margin-top: -160px;
+    }
+
+    // New course cards - Courses UX project
+    .centered-content.courses.one {
+        .section-one {
+            display: table;
+            width: 100%;
+            margin-top: 20px;
+            margin-bottom: 20px;
+            min-height: 150px;
+            height: 150px;
+        }
+
+        .col {
+            display: table-cell;
+            vertical-align: top;
+            height: 100%;
+            padding: 10px;
+            position: relative;
+        }
+
+        .col-wrapper {
+            width: 100%;
+            height: 100%;
+            padding: 15px;
+            background-color: #FFF;
+            border-radius: 4px;
+        }
+
+        .col1 {
+            width: 30%;
+            padding-left: 0px;
+
+            .col-wrapper {
+                padding: 0px;
+            }
+        }
+
+        .col2 {
+            width: 70%;
+            padding-right: 0px;
+            padding-left: 20px;
+
+            .col-wrapper {
+                padding: 30px;
+            }
+        }
+
+
+
+    }
+
+    .course-card {
+        &:hover {
+            .container {
+                cursor: pointer;
+            }
+        }
+
+        // Meant only for mockup purposes
+        &.first {
+            .image {
+                background-image: url('images/courses/acls.jpg');
+            }
+        }        
+        
+        &.second {
+            .image {
+                background-image: url('images/courses/seed.jpg');
+            }
+        } 
+        
+        &.third {
+            .image {
+                background-image: url('images/courses/aam.jpg');
+            }
+        } 
+        
+        
+        .col-wrapper,
+        .course-card-container {
+            background: #FFF;
+            border-radius: 5px;
+            padding: 0px;
+            box-shadow: 0 8px 48px 0 rgba(0, 0, 0, .08);
+            transition: all .2s ease-in-out;
+            position: relative;
+            overflow: hidden;    
+            box-shadow: 0px 8px 48px 0 rgba(0, 0, 0, .2);
+            width: 100%;
+            margin-bottom: 25px;
+
+            &:hover {
+                box-shadow: 0 8px 48px 0 rgba(0, 0, 0, .16);         
+                cursor: pointer;       
+            }
+
+            .content {
+                padding: 15px 16px;
+            }
+
+            .course-code, .opaque {
+                opacity: 0.5;
+            }
+
+            .date {
+                display: block;
+                position: absolute;
+                top: 35px;
+                left: 15px;
+                font-family: 'Roboto', sans-serif;
+                font-weight: bold;
+                font-size: smaller;
+                background-color: #ff9800;
+                padding: 2px 10px;
+                color: #FFF;
+                z-index: 2;                
+            }
+
+            .image {
+                display: block;
+                height: 75px;
+                background-size: cover;
+                background-position: center center;
+                
+                &::before {
+                    z-index: 0;
+                    height: 75px;
+                    opacity: 0.3;
+                }
+            }
+
+            p {
+                margin: 0px;
+                color: #4F4F4F;             
+                
+                &.course-type {
+                    color: #4F4F4F;
+                    text-transform: uppercase;
+                    font-weight: bold;
+                    font-size: smaller;
+                    opacity: .5;
+                    margin-top: 10px;                    
+                }
+
+                &.course-name {
+                    margin-bottom: 15px;
+                    display: block; /* Fallback for non-webkit */
+                    display: -webkit-box;
+                    max-width: 95%;
+                    height: 75.6px; /* Fallback for non-webkit */
+                    margin: 0px;
+                    font-size: 18px;
+                    line-height: 1.4;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin-bottom: 10px;
+                    font-weight: bold;                        
+                }
+            }
+        }
+
+        .col-wrapper {
+            margin-bottom: 0px;
+        }
+
+        &.online {
+            .date {
+                background-color: $purple;
+            }
+        }
+
+        &.f2f {
+            .date {
+                background: $teal;
+            }
+        }
+
+
+    }
+}
+
+
+.scoped-search {
+    width: 100%;
+    position: relative;
+
+    label {
+        position: absolute;
+        left: 0px;
+        z-index: 9999;
+        display: inline-block;
+    }
+
+    input {
+        display: inline-block;
+        float: left;
+        padding-left: 20px;
+    }
+}
+
+@media (max-width: 992px) {
+    .landingPage {
+        .centered-content.courses.one {
+
+            .section-one {
+                display: block;         
+                clear: both;
+                overflow: hidden;       
+                height: auto;
+            }
+
+            .col {
+                padding: 20px;
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}
+
+
+@media (max-width: 579px) {
+    
+    .landingPage {
+        .course-card .course-card-container {
+            p.course-name {
+                height: auto;
+                -webkit-line-clamp: none;
+            }
+        }
+    }
+
+}
+
+@media (min-width: 768px) {
+    
+    .landingPage {
+        .course-card .course-card-container {
+            .date {
+                top: 60px;
+            }
+
+            .image,
+            .image::before {
+                height: 100px;
+            }
+        }
+    }
+
+}
+
+@media (min-width: 992px) {
+    
+    .landingPage {
+        .course-card .course-card-container {
+            .date {
+                top: 110px;
+            }
+
+            .image,
+            .image::before {
+                height: 150px;
+            }
+        }
+    }
+}
+
+
+.withBG {
+    .main-hero {
+        background-color: #292C36;
+        //background-image: url('provideURLHere') !important;    
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        &:before {
+            background: -moz-linear-gradient(top, rgba(41, 44, 54, 0.7) 0%, rgba(41, 44, 54, 0.85) 60%);
+            background: -webkit-linear-gradient(top, rgba(41, 44, 54, 0.7) 0%, rgba(41, 44, 54, 0.85) 60%);
+            background: linear-gradient(to bottom, rgba(41, 44, 54, 0.7) 0%, rgba(41, 44, 54, 0.85) 60%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3292c36', endColorstr='#d9292c36', GradientType=0);
+            content: "";
+            display: block;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+        }
+    }
+    .pocket-after-header.navyblue {
+        background: none;
+        .centered-content {
+            .navyblue {
+                background: none;
+            }
+        }
+    }
+    .navyblue h3 a {
+        border-bottom-color: #FFF;
+    }
+    small {
+        color: #FFF;
+        opacity: 0.6;
+    }
+}
+
+
+/* Sign up page */
+
+div.list-with-icons {
+    .list-item {
+        cursor: pointer;
+        word-wrap: break-word;
+        padding: 5px;
+        padding-bottom: 66px;
+        margin: 2px 12px 12px 2px;
+        position: relative;
+        border: 1px solid $light-grey;
+        border-radius: 3px;
+        &.last {
+            margin-right: 0 !important;
+        }
+        &.active {
+            background-color: $lightest-grey;
+        }
+        .tick-wrapper {
+            display: block;
+            width: 50px;
+            height: 50px;
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: url("images/bg_tick_wrapper.png");
+        }
+        i.fa {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            color: $light-grey;
+        }
+    }
+    .text {
+        position: absolute;
+        text-align: center;
+        font-weight: bold;
+        left: 0;
+        right: 0;
+        font-size: 18px;
+        margin-top: 5px;
+    }
+    .image-wrapper {
+        width: 100%;
+        height: 50px;
+        position: relative;
+        overflow: hidden;
+        display: block;
+        margin: 0px auto;
+        text-align: center;
+        i.fa {
+            position: relative !important;
+            top: 10px;
+            right: 0px;
+            font-size: 30px;
+        }
+    }
+}
+
+.step {
+    padding: 25px 25px 50px 25px;
+    width: 100%;
+    h1,
+    h2,
+    h3 {
+        color: $grey;
+    }
+    .orphan & {
+        width: 100%;
+        margin: 0px auto;
+        min-width: 350px;
+        max-width: 700px;
+    }
+}
+
+.full_height {
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+}
+
+.fs_split {
+    position: absolute;
+    overflow: hidden;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #FFF;
+    -webkit-transition: background-color .2s ease-out 0s;
+    -moz-transition: background-color .2s ease-out 0s;
+    transition: background-color .2s ease-out 0s;
+}
+
+.fs_split_pane {
+    height: 100%;
+    width: 50%;
+    .fs_split_flex_wrapper {
+        position: relative;
+        min-height: 100%;
+    }
+}
+
+.fs_split_pane_left {
+    background-color: transparent;
+    width: 50%;
+    float: left;
+    z-index: 1;
+    overflow-y: auto;
+    word-wrap: break-word;
+}
+
+
+/*
+.fs_split_pane_left>*{
+    flex:1 0 auto;
+}
+*/
+
+.fs_split_pane_right {
+    background: $navyblue;
+    width: auto;
+    overflow: hidden;
+    //background-image: url("images/pattern_darkPages.png");     
+}
+
+.fs_split_graphics {
+    img {
+        display: block;
+        width: 110%;
+        float: right;
+        margin-right: -150px;
+    }
+}
+
+.v-wrap {
+    white-space: nowrap;
+    text-align: center;
+    padding-top: 50px;
+}
+
+.v-wrap:before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    /* adjust for white space between pseudo element and next sibling */
+    margin-right: -.25em;
+    /* stretch line height */
+    height: 100%;
+}
+
+.v-box {
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
+}
+
+.sign-up-tos {
+    margin-top: 15px;
+}
+
+#paymentOptionsList,
+#paymentOption1,
+#paymentOption2,
+#paymentOption3,
+#paymentCostwithGST,
+#paymentCostwithoutGST {
+    display: none;
+}
+
+@media only screen and (max-height:44rem) and (min-width:767px) {
+    .fs_split {
+        display: table;
+        overflow: scroll;
+        .fs_split_pane {
+            display: table-cell;
+            vertical-align: top;
+            overflow: hidden!important;
+        }
+        .fs_split_pane_right {
+            width: 100%;
+        }
+        .fs_split_pane_left {
+            min-height: 100%;
+            width: 486px;
+        }
+    }
+}
+
+@media only screen and (max-width:767px) {
+    .fs_split .fs_split_pane_left {
+        width: 100%;
+        min-width: inherit;
+        max-width: inherit;
+        overflow: scroll;
+        -webkit-overflow-scrolling: touch;
+    }
+    .fs_split .fs_split_pane_right {
+        display: none;
+    }
+}
+
+.row-no-padding {
+    [class*="col-"] {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+}
+
+
+/* Pocket Centre search modal */
+
+.pocket-centre-search {
+    .row {
+        padding: 7px 0 8px 0;
+        margin: 0;
+        cursor: pointer;
+        &:hover {
+            background: $lightest-grey;
+            .sub-heading {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.carousel {
+    background: transparent;
+    margin-right: -10px;
+    .item-wrapper {
+        //padding-right: 10px;
+        outline: 0 !important;
+        margin-right: 10px;
+        border-radius: 5px;
+        &:last-of-type {
+            margin-right: 0px;
+        }
+    }
+    .item {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        //border-right: 1px solid $lightest-grey;
+        outline: 0 !important;
+    }
+}
+
+@media only screen and (max-width: 479px) {
+    .carousel {
+        .item-wrapper {
+            padding-right: 0;
+        }
+        .item {
+            border: none;
+        }
+    }
+}
+
+
+/*
+.floating-button {
+
+    float: right !important;
+    margin: -40px 8px 0 0;
+
+    @include transition(.4s);
+    width: 46px;
+    height: 46px;
+    text-align: center;
+    line-height: 46px;
+    border-radius: 50%;
+    background-color: $accent-color;
+    color: #FFFFFF;
+    font-size: 24px;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
+    cursor:pointer;
+
+    &:hover {
+        background: darken($navy,5%);
+        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    a {
+        color: #FFFFFF;
+    }    
+
+    &.btn-grey {
+        background: ($dark-gray);
+    }
+}
+*/
+
+
+/* HRs */
+
+.lighter {
+    border-color: $light-grey;
+}
+
+.widget-hv {
+    padding: 0px 15px;
+    overflow: auto;
+    display: block;
+    height: 100%;
+}
+
+.widget-row-hv {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    position: relative;
+    display: block;
+    height: 100%;
+    overflow: auto;
+    &:before,
+    &:after {
+        background-color: $light-grey;
+        content: "";
+        height: 1px;
+        width: 93%;
+        margin: 0px auto;
+        position: relative;
+        bottom: -10px;
+    }
+    &:before {
+        background-color: transparent;
+        top: -10px;
+    }
+    &:last-of-type {
+        &:after {
+            height: 0px !important;
+        }
+    }
+}
+
+
+/* RESOURCES - INDEX */
+
+#iso-all {
+    display: none;
+}
+
+#resource-filters {
+    .tab-content {
+        .col-lg-3 {
+            max-height: 400px;
+            overflow-y: auto;
+        }
+    }
+    .list-search-custom input.form-control {
+        background: none;
+        border: solid 1px $lighter-grey;
+    }
+}
+
+.card-resource {
+    width: 100%;
+    padding-left: 12px;
+    padding-right: 12px;
+    display: block;
+    .ibox>a {
+        color: inherit;
+    }
+    .ellipsis {
+        @include ellipsis(20px,
+        1.2,
+        1);
+    }
+    .description .ellipsis-auto {
+        @include ellipsis-auto(16px,
+        1.2,
+        10);
+    }
+}
+
+#resource-page {
+    .form-group input {
+        text-overflow: ellipsis;
+    }
+}
+
+.tag-cloud .fa-times {
+    cursor: pointer;
+}
+
+
+/* Carousel */
+
+
+/* Arrows */
+
+.slick-prev,
+.slick-next {
+    font-size: 0;
+    line-height: 0;
+    position: absolute;
+    top: 47%;
+    display: block;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    cursor: pointer;
+    color: transparent;
+    border: none;
+    outline: none;
+    border-radius: 50%;
+    background-color: #FFF;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
+    text-align: center;
+}
+
+.slick-prev:before {
+    margin-left: -2px;
+}
+
+.slick-next:before {
+    margin-right: -2px;
+}
+
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus {
+    color: transparent;
+    outline: none;
+    background: $lightest-grey;
+    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
+}
+
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before {
+    opacity: 1;
+}
+
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before {
+    font-family: 'FontAwesome';
+    font-size: 24px;
+    line-height: 36px;
+    opacity: .75;
+    color: $grey !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev {
+    left: -28px;
+    z-index: 999;
+}
+
+[dir='rtl'] .slick-prev {
+    right: -25px;
+    left: auto;
+}
+
+.slick-prev:before {
+    content: '\f104';
+    text-align: center;
+}
+
+[dir='rtl'] .slick-prev:before {
+    content: '\f105';
+    text-align: center;
+}
+
+.slick-next {
+    right: -18px;
+    z-index: 999;
+}
+
+[dir='rtl'] .slick-next {
+    right: auto;
+    left: -25px;
+}
+
+.slick-next:before {
+    content: '\f105';
+    text-align: center;
+}
+
+[dir='rtl'] .slick-next:before {
+    content: '\f104';
+    text-align: center;
+}
+
+
+/* Rooms */
+
+.rooms {
+    .room-status {
+        margin: 0 10px;
+        @include if-direct-parent('.occupied') {
+            color: $red;
+            &:before {
+                content: 'Occupied';
+            }
+        }
+        @include if-direct-parent('.partial') {
+            color: $mustard;
+            &:before {
+                content: 'Partial';
+            }
+        }
+        @include if-direct-parent('.available') {
+            color: $green;
+            &:before {
+                content: 'Available';
+            }
+        }
+    }
+    .list-row {
+        i.fa {
+            line-height: 23px;
+            font-size: 16px;
+            margin-right: 5px;
+        }
+    }
+    .room-label {
+        //display: block;
+        //float: left;
+        line-height: 23px;
+    }
+    .room-time {
+        display: block;
+        float: left;
+        font-weight: bold;
+    }
+    .room-name {
+        padding-right: 10px;
+    }
+    .inline-button {
+        display: inline-block;
+        background: $lightest-grey;
+        padding: 0px 10px;
+        font-size: 14px;
+        opacity: 0.8;
+        &:hover {
+            background: $accent-color;
+            color: #FFF;
+        }
+    }
+}
+
+
+/* Filters for booking pages */
+
+.filter-inline-container {
+    margin: 10px 0px;
+}
+
+.filter-inline {
+    font-size: 20px;
+    line-height: 20px;
+    font-weight: bold;
+    text-align: center;
+    position: relative;
+    .filter-mobile &,
+    .modal .form-group & {
+        text-align: left;
+        font-size: 16px;
+    }
+    .btn.dropdown-toggle,
+    a {
+        display: inline-block;
+        background: #FFF;
+        white-space: nowrap;
+        padding: 5px 8px;
+        margin: 4px 0;
+        border-radius: 2px;
+        font-size: 26px;
+        line-height: 36px;
+        font-weight: bold;
+        .modal & {
+            font-size: 16px !important;
+        }
+        &:hover {
+            color: #FFF;
+            background: $accent-color;
+            cursor: pointer;
+        }
+        .filter-mobile &,
+        .modal .form-group & {
+            padding: 5px 10px;
+            background: $lightest-grey;
+            width: 100%;
+            
+            /*wrap text within the box*/
+            display: inline-block;
+            overflow: hidden;
+            white-space: normal;
+            line-height: 20px;
+            padding: 10px; 
+
+            &:hover {
+                background: $accent-color;
+            }
+            &.selected {
+                background: $accent-color;
+                color: #FFF;
+                padding-left: 36px;
+
+                &:before {
+                    font-family: FontAwesome;
+                    content: "\f00c ";
+                    font-size: 14px;
+                    line-height: 20px;
+                    position: absolute;
+                    left: 30px;
+                    top: 12px;
+                }
+            }
+        }
+    }
+    ul.dropdown-menu {
+        width: 100%;
+    }
+    ul.dropdown-menu li a {
+        font-size: 16px !important;
+        line-height: 20px !important;
+    }
+    button {
+        position: absolute;
+        top: 25%;
+        #filterDaily & {
+            top: 0%;
+        }
+        &:nth-of-type(1) {
+            left: 0px;
+        }
+        &:nth-of-type(2) {
+            right: 0px;
+        }
+        i.fa {
+            font-size: 30px;
+        }
+    }
+    &.auto {
+        a {
+            width: auto !important;
+        }
+    }
+    .filter-set {
+        display: inline-block;
+        width: 70%;
+        margin: 0px auto;
+        overflow: hidden;
+        position: relative;
+        .btn-group.mobile {
+            display: inline-block;
+        }
+        .btn-group.desktop {
+            display: none;
+        }
+    }
+    .filter-buttons-container {
+        padding: 10px;
+        margin-top: -15px;
+        overflow: hidden;
+    }
+}
+
+
+/* Weekly view of Rooms */
+.container-fw {
+    width: 100%; 
+    position: relative;    
+
+    .outer-div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        border-top: 1px solid $text-color;
+    }
+
+    .inner-div {
+        overflow-x: scroll;
+        margin-left: 200px; /*adjustable*/
+        overflow-y: visible;
+        padding-bottom: 1px;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: separate;
+
+        td {
+            margin: 0;
+            border: 1px solid $text-color;
+            border-top-width: 0;
+            border-left-width: 0px;
+            padding: 10px;
+        }
+
+        td:first-child {
+            background-color: transparent;
+        }
+    
+        td.headcol {
+            position: absolute;
+            left: 0;
+            top: auto;
+            border-bottom-width: 1px;
+            padding: 0;
+            border-left-width: 1px;
+        }
+    
+        td.hiddenheadcol {
+            max-width: 0;
+            visibility: hidden;
+            padding: 0;
+        }
+    
+        td.headcol div {
+            width: 200px; /* adjustable */
+            max-width: 200px; /* adjustable */
+            padding: 10px;
+            box-sizing: border-box;
+        }
+    
+        td.hiddenheadcol div {
+            width: 200px; /* adjustable */
+            max-width: 200px; /* adjustable */
+            padding: 10px;
+        }
+    
+        tr.header td {
+            font-size: 1.2em;
+            font-weight: bold;
+            white-space: nowrap;
+            color: grey;
+        }
+
+        tr.header td.today {
+            background-color: $dark-accent-color;
+            color: #FFF;
+        }
+    
+        tr:not(.header):hover td {
+            background: #EBF1FE;
+        }  
+
+        tr:not(.header) td:hover {
+            background: #D2D8E5;
+        }
+
+        td {
+            background: #FFF;
+            color: $green;
+
+            a {
+                color: $green;
+            }
+
+            p {
+                margin: 0px;
+            }    
+
+            &.full p {
+                color: $red;
+            }
+
+            &.partial p {
+                color: $mustard;
+            }
+        
+            &.previous {
+                background: #DDD;
+            }
+        
+            &.previous p {
+                opacity: 0.5;
+            }  
+
+            &.we {
+                background: #EFEFEF;
+            }
+            
+            &.we p {
+                opacity: 0.5;
+            }
+            
+        }
+
+        td:first-child {
+            color: $text-color;
+        }
+      
+    }
+
+    table:nth-of-type(2) {
+        margin-top: 50px;
+        border-top: 1px solid grey;
+    }
+
+    table:nth-of-type(2) tr td.headcol {
+        margin-top: -1px;
+        border-top: 1px solid grey;
+    }
+
+}
+
+
+
+/* Equipment usage form design */
+
+.invi-UK {
+    display: none;
+}
+
+#pocketCentreButtonText {
+    display: block;
+    float: left;
+    width: 122px;
+    max-width: 122px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+/*
+#addEquipmentModal {
+    .col-lg-9 {
+        float: left;
+    }
+
+    .col-lg-7 {
+        float: left;
+    }
+}
+*/
+
+#stickyFooter {
+    position: absolute fixed;
+    bottom: 0;
+}
+
+
+/* Home - Dashboard */
+
+.sidebar-panel {
+    width: 300px;
+}
+
+.dashboard-admin {
+    .widget {
+        background: $dark-accent-color;
+        .btn.btn-grey {
+            color: $text-color;
+        }
+    }
+}
+
+.wrapper.navy-bg {
+    margin-left: -15px;
+    padding-left: 25px;
+    padding-right: 25px;
+    margin-right: 285px;
+    color: $text-color;
+}
+
+.dashboard-admin {
+    .card-resource {
+        width: 33.33% !important;
+        color: $text-color;
+        small {
+            font-weight: bold;
+            letter-spacing: 4px;
+        }
+        .ibox {
+            border-top: none !important;
+        }
+        .ibox-title {
+            background: $dark-accent-color !important;
+        }
+        .ibox-content {
+            border-top-right-radius: 5px;
+            border-top-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-bottom-left-radius: 5px;
+        }
+    }
+}
+
+.dashboard-external-button {
+    margin-bottom: 15px;
+    background-color: #FFF;
+    table {
+        margin-bottom: 0px;
+        td {
+            padding: 4px !important;
+            h3 {
+                margin: 0px;
+            }
+        }
+    }
+}
+
+.course-profile {
+    .registered,
+    .completed,
+    .started {
+        display: none;
+    }
+}
+
+
+/* Creating UX mockups */
+
+.gsteps {
+    display: none;
+}
+
+.gblock {
+    display: block;
+}
+
+.ginline {
+    display: inline-block;
+}
+
+.ibox-title-wrapper-footer {
+    width: 100%;
+    padding-bottom: 15px !important;
+    font-size: 14px;
+}
+
+
+/* Dashboard section */
+
+.ibox-content {
+    .reminder & {
+        height: 180px;
+        border-radius: 5px;
+        background-position: bottom right !important;
+        background-repeat: no-repeat !important;
+        padding-bottom: 15px;
+        .action {
+            position: absolute;
+            bottom: 40px;
+        }
+        a {
+            color: $accent-color;
+        }
+    }
+    .reminder.pending-group & {
+        background: #FFF url('images/alert-header-groups.png');
+    }
+    .reminder.pending-payment & {
+        background: #FFF url('images/alert-header-payments.png');
+    }
+    .reminder.equipment & {
+        background: #FFF url('images/alert-header-equipment.png');
+    }
+    .reminder.elearning & {
+        background: #FFF url('images/alert-header-elearning.png');
+    }
+}
+
+.empty-state-container {
+    display: table;
+    width: 100%;
+    overflow: hidden;
+    text-align: center;
+    background: #D8D8D8;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    .wrapper {
+        text-align: center;
+        vertical-align: middle;
+        width: 100%;
+        display: table-cell;
+        margin: 0px auto;
+        .img {
+            height: 100px;
+            width: 100px;
+            margin: 0px auto;
+            margin-top: 20px;
+            img {
+                width: 100%;
+                height: 100%;
+                filter: grayscale(100%);
+            }
+        }
+        .caption {
+            text-align: center;
+            margin-top: 10px;
+        }
+    }
+}
+
+.show-more-card {
+    display: table;
+    width: 100%;
+    overflow: hidden;
+    text-align: center;
+    background: white;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.08);
+    .wrapper {
+        text-align: center;
+        vertical-align: middle;
+        height: 260px;
+        width: 100%;
+        display: table-cell;
+        margin: 0px auto;
+        img {
+            height: 70px;
+        }
+        &.reminder {
+            height: 180px;
+        }
+    }
+}
+
+
+/* Dashboard-row section */
+
+.dashboard-row {
+    .ibox {
+        .ibox-title {
+            height: 260px;
+            border-radius: 5px;
+            a {
+                color: #FFF;
+            }
+            @at-root {
+                .reco#{&} {
+                    height: 180px;
+                }
+            }
+        }
+        .ibox-title-wrapper {
+            position: relative !important;
+            .ellipsis {
+                @include ellipsis(18px,
+                1.2,
+                2);
+            }
+        }
+        .ibox-title-wrapper-footer {
+            position: absolute !important;
+            bottom: 0px;
+            span {
+                opacity: .7;
+            }
+        }
+    }
+    &.recommended {
+        .ibox {
+            .ibox-title {
+                height: 120px;
+            }
+        }
+    }
+    .elearningexpired {
+        color: #FFF;
+        background: $red;
+        padding: 3px 6px;
+        border-radius: 3px;
+        width: auto;
+        float: left;
+        clear: left;
+    }
+    &.overview-staff {
+        .ibox-title {
+            display: table;
+            height: 230px;
+            vertical-align: middle;
+            width: 100%;
+        }
+        .wrapper {
+            display: table-cell;
+            width: 100%;
+            height: 230px;
+            vertical-align: middle;
+        }
+        .totals {
+            opacity: 0.5;
+        }
+    }
+}
+
+.view-all {
+    display: block;
+    position: relative;
+    width: 100%;
+    clear: both;
+    margin-bottom: 15px;
+    a {
+        width: 100%;
+        position: relative;
+        text-align: left;
+    }
+}
+
+@media (min-width: 520px) {
+    .view-all {
+        position: static;
+        width: 200px;
+        margin-bottom: 0px;
+        a {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            text-align: right;
+        }
+    }
+}
+
+.my-course-info {
+    color: $text-color;
+    .settings-title-row {
+        .settings-title-holder {
+            .wrapper {
+                display: inline-block;
+                min-width: 30px;
+                text-align: center;
+                font-size: 22px;
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .fa-check-circle {
+        color: $green;
+    }
+
+    .course-info-row {
+        max-width: 1600px;
+        padding: 17px 25px;
+        .widget {
+            position: relative;
+        }
+        h2 {
+            display: inline-block;
+            margin: 0px;
+            margin-bottom: 5px;
+        }
+        .abbr {
+            opacity: 0.5;
+        }
+        .agile-list {
+            div.row {
+                //margin-left: 0px !important;
+            }
+        }
+    }
+
+    .results-message {
+        margin: -17px -20px 20px -20px;
+        img.success {
+            height: 70px;
+            display: block;
+            clear: both;
+            margin: 0px auto;
+            margin-bottom: 10px;
+        }
+        .results-message-wrapper {
+            background: $accent-color;
+            color: #FFF;
+            text-align: center;
+            padding: 40px 20px;
+        }
+        .results-message-actions {
+            width: 100%;
+            margin: 0px auto;
+            .results-message-actions-wrapper {
+                display: block;
+                overflow: hidden;
+                margin: 0px auto;
+                text-align: center;
+            }
+            .c-a-element {
+                display: block;
+                margin: 0px auto;
+                width: 100%;
+                clear: both;
+                text-align: center;
+                vertical-align: top;
+                h3 {
+                    margin-top: 0px;
+                    background: $dark-accent-color;
+                    color: white;
+                    font-weight: 500;
+                    border-radius: 2px;
+                    @include shadow-sm;
+                    border: 0;
+                    outline: 0 !important;
+                    font-size: $font-std;
+                    padding: 6px 12px;
+                    a {
+                        color: #FFF;
+                    }
+                }
+            }
+            .c-a-element-divider {
+                display: inline-block;
+                background-color: #FFF;
+                width: 2px;
+                margin: 0px auto;
+                margin-left: 20px;
+                margin-right: 20px;
+                margin-top: -15px;
+                height: 65px;
+                opacity: 0.5;
+            }
+        }
+        .hidden-mobile {
+            display: none !important;
+        }
+    }
+    .failed {
+        .results-message-wrapper {
+            background: $grey;
+        }
+    }
+    .widget.outline {
+        margin: 0 0 20px 0;
+        background: none;
+        border: 1px solid $ultra-light-grey
+    }
+    .course-recently-row {
+        max-width: 1600px;
+        padding: 17px 25px;
+        background: white;
+    }
+    &.e {
+        .course-info, .course-info a {
+            color: $purple;
+        }
+    }
+    &.f {
+        .course-info, .course-info a {
+            color: $teal;
+        }
+
+    }
+    &.b {
+        .course-info, .course-info a {
+            color: $orangepeel;
+        }
+        .e .course-info {
+            color: $purple;
+        }
+        .f .course-info {
+            color: $teal;
+        }       
+    }
+
+    .alert-grey-outline {
+        .fa-check-circle {
+            display: none;
+        }
+    }
+
+
+    .alert-green-outline {
+        position: relative;
+
+        &.f2f {
+            margin-top: 30px;
+        }
+
+        .fa-check-circle {
+            display: block;
+            font-size: 30px;
+            position: absolute;
+            right: -10px;
+            top: -15px;
+            background-color: #FFF;
+        }
+    }
+
+    table {
+        tr:first-child td {
+            border-top: none;
+        }
+    }
+
+    .course-components {
+        div:last-child {
+            margin-bottom: 5px;
+        }
+    }
+
+}
+
+@media only screen and (min-width: 769px) {
+    .my-course-info {
+        .results-message {
+            .results-message-actions {
+                .c-a-element {
+                    display: inline-block;
+                    width: auto;
+                    clear: none;
+                    text-align: left;
+                    h3 {
+                        margin-top: 15px;
+                        background: transparent;
+                        font-size: 20px;
+                        line-height: 24px;
+                        padding: 0px;
+                        box-shadow: none;
+                    }
+                }
+            }
+            .hidden-mobile {
+                display: inline-block !important;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 1119px) {
+    .my-course-info {
+        .results-message {
+            img.success {
+                display: none !important;
+            }
+            .results-message-actions {
+                width: 60%;
+            }
+        }
+    }
+}
+
+.settings-title-row {
+    .e & {
+        background: $purple;
+        color: #FFF;
+    }
+    .f & {
+        background: $teal;
+        color: #FFF;
+    }
+    .b & {
+        background: $orangepeel;
+        color: #FFF;
+    }
+}
+
+.helper-modal {
+    opacity: 0.7;
+}
+
+button.close {
+    span {
+        color: #FFF;
+        font-size: 26px;
+        opacity: 1;
+        text-shadow: none;
+    }
+}
+
+.close {
+    opacity: 1;
+    filter: alpha(opacity=100)
+}
+
+
+/* Centres page */
+
+c-view-role {
+    margin-right: -2px;
+}
+
+.card-navy .ibox-title a {
+    color: #FFFFFF;
+    &:hover {
+        color: #FFFFFF;
+    }
+}
+
+
+/* Toasties */
+
+.simple-notification-wrapper {
+    font-family: $font-stack;
+    a,
+    .sn-content {
+        color: #FFF;
+        /* Theoretically for IE 8 & 9 (more valid) */
+        /* ...but not required as filter works too */
+        /* should come BEFORE filter */
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; // IE8
+        /* This works in IE 8 & 9 too */
+        /* ... but also 5, 6, 7 */
+        filter: alpha(opacity=70); // IE 5-7
+        /* Modern Browsers */
+        opacity: 0.7;
+    }
+}
+
+
+/*  Courses V2 */
+
+#courses {
+
+
+    .course-list-footer,
+    .course-list-header {
+        margin-bottom: 20px;
+        position: relative;
+        width: 100%;
+        clear: both;
+        float: left;
+        width: 100%;
+
+        h3 {
+            font-weight: 300;
+            margin-bottom: 5px;
+        }
+    }
+
+
+    .filter-indicators {
+        position: relative;
+        left: 0px;
+        float: left;
+        margin-right: 210px;
+        //margin should be width of .course-listing + margin
+
+        .label {
+            font-size: 90%;
+            padding: 6px 8px;
+
+
+            &:first-of-type {
+                margin-left: 0px;
+            }
+
+            a > i {
+                margin-left: 5px;
+                color: #FFF; 
+                opacity: 0.5;
+
+                &:hover {
+                    color: #FFF;
+                    opacity: 1;
+                }
+            }
+
+            a {
+                color: #FFF;
+            }
+        
+            &.label-medium-grey {
+                a {
+                    line-height: 15px;
+                }
+            }
+        }
+
+
+    }
+
+    .sorting-dropdown {
+        position: absolute;  
+        padding-bottom: 5px !important;
+        float: right;
+        width: 200px;
+        right: 0px;
+        top: 0px;
+
+        .sub-heading-wrapper {
+            height: 100%;
+            width: 85px;
+            position: absolute;
+            top: 0px;
+            right: 155px;
+        }
+
+        .sub-heading-container {
+            display: table;
+            width: 100%;
+            height: 100%;
+        }
+
+        .sub-heading {
+            display: table-cell;
+            height: 100%;
+            vertical-align: middle;
+        }
+
+        .btn-group-wrapper {
+            position: relative;
+            right: 3px;
+            float: right;
+        }
+    }
+
+    .course-list-footer {
+        .sorting-dropdown {
+            .sub-heading-wrapper {
+                width: 100px;
+                right: 35px;
+            }
+        }
+
+        .filter-indicators {
+            display: block;
+            padding-bottom: 0px;
+            margin: 0px auto;
+            margin-right: 175px;
+            overflow: hidden;
+            float: none;
+        }
+
+        .listing {
+            display: block;
+            padding-bottom: 0px;
+            float: left;
+        }
+
+        .dropdown-container {
+            display: block;
+            position: absolute;
+            float: right;
+            right: 0px;
+            height: 100%;
+
+            .wrapper {
+                padding: 0px;
+                display: table;
+                height: 100%;
+                float: right;
+                margin-top: -4px;
+
+
+                a {
+                    display: table-cell;
+                    height: 100%;
+                    width: 100%;
+                    vertical-align: middle;
+                    font-size: 18px;
+                }                
+            }
+        }
+    }
+
+    .filter-component {
+        .i-checks {
+            label {
+                font-weight: 900;
+            }
+        }
+
+        &.mobile {
+            margin-bottom: 5px;
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: inline-block;
+            white-space: nowrap;
+        }
+
+        &.desktop {
+            display: none;
+        }
+
+        .i-checks {
+            position: relative;
+
+            .icheckbox_square-steelblue {
+                position: absolute;
+                left: 0;
+                right: 0;
+            }
+
+            .i-checks-label {
+                position: relative;
+                display: inline-block;
+                padding-left: 0px;
+                margin-left: 35px;
+            }
+        }
+    }
+
+    .filter-mobile-wrapper {
+        position: relative;
+        display: block;
+        margin-bottom: 5px;
+        height: 100%;
+        //padding-bottom: 45px;
+        clear: both;
+
+        .filter-component.mobile {
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: inline-block;
+            white-space: nowrap;
+            //footer doesn't work for this one
+
+            &.pull-right {
+                top: 100px;
+                position: absolute;
+                top: 45px;
+                right: 0px;        
+                padding-right: 30px;     
+
+                span.caret {
+                    position: absolute;
+                    top: 45%;
+                    right: 15px;
+                }
+            }
+        }
+    }
+
+    .course-list {
+        p { margin: 0px; }
+    }
+
+    button.fixed-width {
+        width: 200px;
+        text-overflow: ellipsis;
+        padding-right: 30px;
+        overflow: hidden;
+        text-align: left;
+
+        span.caret {
+            position: absolute;
+            top: 45%;
+            right: 13px;
+        }
+    }    
+}
+
+
+@media (max-width: 768px) {
+    #courses {
+        .filter-component {
+            .btn-block {
+                margin: 0px;
+            }
+
+            &.mobile {
+                width: 100%;
+            }
+        }     
+    }
+}
+
+@media (max-width: 1079px) {
+    #courses {
+        .filter-indicators {
+            margin-right: 0px;
+        }
+
+        .course-list-footer {
+            height: 100%;
+            overflow: hidden;
+
+
+            .filter-indicators {
+                margin-right: 0px;
+                float: left;
+                position: relative;
+                overflow: hidden;                
+            }
+        }        
+    }
+
+}
+
+#courses {
+
+    .colmask {
+        position: relative;
+        clear: both;
+        //background: #EFEFEF;
+        width: 100%;
+        //height: 100px;
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        overflow: hidden;
+
+        
+        &::after {
+            display: block;
+            width: 100%;
+            height: 1px;
+            background-color: $light-grey;
+            content: " ";
+            position: absolute;
+            margin: 10px 0;
+            bottom: -10px;
+        }
+
+        &.calendar-course {
+            margin-bottom: 10px; 
+            
+            &::after {
+                display: none;
+            }
+        }
+
+        .cell .opaque {
+            white-space: nowrap;
+        }
+
+        &.unlisted {
+            opacity: 0.7;
+            filter: alpha(opacity=70);
+        }
+    }
+
+
+    .colright {
+        float: left;
+        width: 200%;
+        position: relative;
+        left: 200px;
+        //background: yellow;
+        //height: 80px;
+    }
+
+    .colmask.calendar-course-date .colright {
+        left: 0px;
+        width: 100%;
+    }
+
+    .col1wrap {
+        float: right;
+        width: 50%;
+        position: relative;
+        right: 200px;
+        //background: orange;
+        //height: 80px;
+    }
+
+
+    .colmask.calendar-course-date .col1wrap {
+        width: 100%;
+        right: 0px;
+    }    
+
+    .col1 {
+        position: relative;
+        right: 100%;
+        overflow: hidden;
+        margin: 0 0 0 200px;
+        //height: 80px;
+        //background: green;
+    }
+
+    .colmask.calendar-course-date .col1 {
+        right: 0px;
+        margin: 0px;
+    }
+
+
+    .col2  {
+       // float: left;
+        width: 185px;
+        //position: relative;
+        position: absolute;
+        //right: 200px;
+        left: -200px;
+        height: 100%;
+        background-image: url("images/courses/workshop.jpg");
+        background-size: cover;
+        background-position: center center; 
+
+        &.unlisted {
+            opacity: 0.7;
+            filter: alpha(opacity=70);
+        }        
+    }
+
+    .label-unlisted {
+        text-align: center;
+        font-weight: bold;
+        display: block;
+        background: #000;
+        color: #FFF;
+        width: 100%;
+        padding: 5px;
+        opacity: 0.8;
+        filter: alpha(opacity=80);
+    }
+
+    .colmask.cid--1 {
+        .col2 {
+            background-image: url("images/courses/rrcd-a.jpg");
+        }
+    }
+
+    .colmask.cid--2 {
+        .col2 {
+            background-image: url("images/courses/als.jpg");
+        }
+    }    
+
+    .colmask.cid--3 {
+        .col2 {
+            background-image: url("images/courses/aam.jpg");
+        }
+    }    
+
+    .colmask.cid--4 {
+        .col2 {
+            background-image: url("images/courses/acls.jpg");
+        }
+    }    
+    
+    .colmask.cid--5 {
+        .col2 {
+            background-image: url("images/courses/acrm.jpg");
+        }
+    }    
+    
+    .colmask.cid--6 {
+        .col2 {
+            background-image: url("images/courses/basic-sim.jpg");
+        }
+    }    
+
+    .colmask.cid--7 {
+        .col2 {
+            background-image: url("images/courses/bbs.jpg");
+        }
+    }    
+
+    .colmask.cid--8 {
+        .col2 {
+            background-image: url("images/courses/capp.jpg");
+        }
+    }    
+    
+    .colmask.cid--9 {
+        .col2 {
+            background-image: url("images/courses/ebus.jpg");
+        }
+    }    
+    
+    .colmask.cid--10 {
+        .col2 {
+            background-image: url("images/courses/emac.jpg");
+        }
+    }    
+    
+    .colmask.cid--11 {
+        .col2 {
+            background-image: url("images/courses/tasp.jpg");
+        }
+    }        
+    
+    .colmask.no-image {
+        .col2 {
+            -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+            filter: grayscale(100%);   
+            /*
+            -webkit-filter: blur(5px);
+            -moz-filter: blur(5px);
+            -o-filter: blur(5px);
+            -ms-filter: blur(5px);
+            filter: blur(5px);        
+            */    
+            opacity: 0.4;
+        }            
+    }
+
+    .course-info {
+        display: table;
+        width: 100%;
+
+        .cell {
+            display: table-cell;
+            
+            i:nth-of-type(2) {
+                margin-left: 10px;
+            }
+
+            &.info {
+                padding-right: 5px;
+            }
+        }
+
+        .cta {
+            vertical-align: middle;
+            padding-right: 5px;
+            text-align: right;
+        }
+    }
+
+    .colmask.calendar-course .course-info {
+        min-height: auto;
+
+        .cell {
+            vertical-align: middle;
+        }
+    }
+
+    .colmask.calendar-course-date .course-info {
+        .cell {
+            display: block;
+            width: 100%;
+
+            .price {
+                float: left;
+                text-align: right;
+                margin: 0px;
+                padding-top: 5px;
+            }
+
+            .opaque {
+                white-space: nowrap;
+            }
+
+            p { margin: 0px; }         
+        }
+
+        .cta {
+            p, a, button {
+                width: 50%;
+            }
+
+            .price {
+                padding-right: 20px;
+            }
+        }           
+    }
+
+    $font-size: 18px;
+    $line-height: 1.4;
+    $lines-to-show: 2;
+    
+    p.course-name {
+        display: block; /* Fallback for non-webkit */
+        display: -webkit-box;
+        max-width: 95%;
+        height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
+        margin: 0px;
+        font-size: $font-size;
+        line-height: $line-height;
+        -webkit-line-clamp: $lines-to-show;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: bold;
+
+        .opaque {
+            white-space: nowrap;
+        }
+    }    
+
+    p.price {
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    div.sub-heading {
+        margin-top: 10px;
+    }
+
+    /*
+    &.calendar {
+        .cell {
+            padding: 20px 0;
+        }
+
+        p {
+            line-height: 1.6;
+        }
+        p.course-name, p.price {
+            -webkit-line-clamp: none;
+        }
+    }
+    */
+
+
+}
+
+
+
+@media (min-width: 1200px) {
+    #courses {
+        p.course-name {
+            height: auto;
+            -webkit-line-clamp: none;
+            overflow: auto;
+        }
+    }
+}
+
+
+@media (max-width: 910px) {
+    #courses {
+
+        .course-info {
+            display: block;
+            min-height: 100%;
+    
+            .cell {
+                display: block;
+                width: 100%;
+                padding-bottom: 5px;
+            }
+
+            .cta {
+                text-align: left;
+            }
+
+            .btn {
+                margin-top: 8px;
+            }
+        }
+    }
+}
+
+@media (min-width: 497px) {
+    #courses {
+        .colmask.calendar-course .course-info {
+            min-height: 150px;
+        }    
+    }
+
+}
+
+@media (max-width: 496px) {
+    #courses {
+        .col2 {
+            width: 50%;
+            height: 100px;
+            position: absolute;
+        }
+
+        .colmask.calendar-course-date .col2 {
+            display: none;
+            background-image: none;
+        }
+
+        .col1 {
+            margin: 110px 0 0 0;
+        }
+
+        $font-size: 16px;
+        $line-height: 1.4;
+        
+        p.course-name {
+          max-width: 100%;
+          height: auto;
+          margin: 0px;
+          font-size: $font-size;
+        }          
+
+        .label-unlisted {
+            text-align: left;
+            padding: 10px 8px;
+        }        
+    }
+}
+
+@media (max-width: 991px) {
+    #courses {
+        .colmask.calendar-course-date .course-info {
+            .cta {
+                text-align: left;
+                p { width: 100%; }
+                a { width: auto; }
+
+                .price {
+                    padding-right: 0px;
+                    text-align: left; 
+                }
+            }           
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    #courses {
+        .col-md-3.filter-wrapper {
+            width: 100%;
+        }
+
+        .col-md-9.course-list-col {
+            width: 100%;
+        }
+
+        .colmask.calendar-course-date .course-info {
+            .cell {
+                display: table-cell;
+                width: 50%;
+            }
+        }            
+    }
+}
+
+
+
+@media (min-width: 1080px) {
+    #courses {
+        .filter-component {
+            &.mobile {
+                display: none;
+            }
+
+            &.desktop {
+                display: block;
+            }            
+        }
+
+        .col-md-3.filter-wrapper {
+            width: 25%;
+        }
+
+        .col-md-9.course-list-col {
+            width: 75%;
+        }        
+    }
+}
+
+#courses {
+
+    @mixin nth-children($points...) {
+        @each $point in $points {
+            &:nth-child(#{$point}) {
+                @content;
+            }
+        }
+    }
+    
+    .skeleton {
+        height: auto;
+        width: 100%;
+        overflow: hidden;
+
+        .skeleton-wrapper {
+            display: block;
+            position: relative;
+            float: left;
+            clear: both;
+            width: 100%;
+        }
+
+        &--item {
+            display: block;
+            float: left;
+            width: 100%;
+            margin: 0 0 10px 0;
+            animation: pulseLoader 1s infinite ease-in-out;
+
+            &.header {
+                height: 30px;
+                width: 60%;
+                clear: both;
+            }
+
+            &.line {
+                height: 20px;
+            }
+
+            &.checkbox {
+                height: 20px;
+                width: 20px;
+                margin-right: 15px;
+                float: left;
+                position: relative;
+            }
+
+            &.checkbox-line {
+                height: 20px;
+                width: 100%;
+                float: right;
+                margin-left: 35px;
+                position: absolute;
+            }
+
+            &.course-image {
+                height: 185px;
+                width: 185px;
+                margin-right: 15px;
+                float: left;
+                position: relative;
+            }            
+        }
+
+        .course-description-wrapper {
+            height: auto;
+            width: 100%;
+            float: right;
+            margin-left: 200px;
+            position: absolute;
+
+            div {
+                clear: both;
+                float: left;
+            }
+
+            div:nth-child(1) { width: 42%; }  
+            div:nth-child(2) { width: 35%; }  
+            div:nth-child(3) { width: 28%; }  
+            div:nth-child(4) { width: 43%; }  
+            div:nth-child(5) { width: 56%; }  
+            div:nth-child(6) { width: 10%; }                                                                        
+        }      
+
+        div:first-of-type {
+            margin-top: 0px;
+        }
+
+        div:last-of-type {
+            margin-bottom: 0px;
+        }
+
+        &.page-header {
+            width: 300px;
+            margin: 0px auto;
+            padding-bottom: 30px;
+            margin-top: 20px;
+            float: left;
+
+            .skeleton--item.header {
+                width: 100%;
+                height: 40px;
+            }
+        }
+    }
+    
+    @keyframes pulseLoader {
+        0% {
+            background-color: rgba(165, 165, 165, 0.1)
+        }
+        50% {
+            background-color: rgba(165, 165, 165, 0.3)
+        }
+        100% {
+            background-color: rgba(165, 165, 165, 0.1)
+        }
+    }  
+}
+
+
+@media (max-width: 767px) {
+    #courses {
+        .skeleton.page-header {
+            width: 45%;
+        }
+    }
+}
+
+.datepicker-dropdown:before {
+    display: none !important;
+}
+.datepicker-dropdown:after {
+    display: none !important;
+}
+
+.datepicker-dropdown.datepicker-orient-left:after,
+.datepicker-dropdown.datepicker-orient-left:before {
+    display: none !important;
+}
+
+
+@media only screen and (max-width: 1358px) {
+    .datepicker tbody {
+        display: table;
+        width: 100%;
+    }
+
+    .datepicker tr {
+        display: table-row;
+    }
+
+    .datepicker td {
+        display: table-cell;
+    }
+}