@csdsesystems/central-styles 1.0.2 → 1.0.4

package/sass/pages/_pages.scss

@@ -1,4429 +0,0 @@
-.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;
-    }
-}